/* twoplus11.com — share sheet
   ─────────────────────────────────────────────────────────────────────────
   Loaded by every page on the origin, exactly like the accessibility panel:
   the root site, the twoplus11-admin form pages, and all the app sites. Those
   are ~110 hand-written pages with their own inline stylesheets, so nothing
   here may depend on a page's own class names.

   It leans on the same two things a11y.css does: the design-system tokens,
   and semantic elements. The token names differ by tree — the app sites
   declare --bg2/--card/--sep/--acc, the root site declares --s1/--s2/--b1/
   --blue — so every colour below is read through one of the six aliases set
   in .shr-scope, each a fallback chain that lands on whichever name the page
   actually has. A literal ends every chain, so a page with neither still
   renders a legible sheet.

   ⚠ The accent is deliberately NOT used for focus rings or for any surface
   carrying text. It is per-app and has no contrast floor: Anchr's #6F7C00 is
   2.4:1 on its own background, under the 3:1 WCAG 2.1 asks of a focus
   indicator, and several others are close. Focus rings are white, which is
   21:1 on all of these — every page on the origin is dark-only. The accent
   appears once, as a hover border, where it is decoration and nothing rests
   on it. */

.shr-scope {
  --shr-surface: var(--bg2, var(--s1, #16161A));   /* the sheet itself      */
  --shr-raise:   var(--card, var(--s2, #232329));  /* rows inside it        */
  /* --sep on most app sites, --line on the three that also have a light mode
     (Monthr, Datr, Blinkr), --b1 on the root site. The literal is a neutral
     grey rather than a white wash, so it is still a visible edge if a future
     page declares none of the three and happens to be light. */
  --shr-line:    var(--sep, var(--line, var(--b1, rgba(128,128,128,0.35))));
  --shr-ink:     var(--t1, #FFFFFF);
  --shr-ink2:    var(--t2, rgba(255,255,255,0.80));
  --shr-ink3:    var(--t3, rgba(255,255,255,0.58));
  --shr-accent:  var(--acc, var(--blue, #0A84FF));
  --shr-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

/* The ring is the page's own strongest ink — white on the dark sites, near-black
   on the three with a light mode — so it clears 3:1 on every one of them. ⚠ Never
   the accent: it is per-app and has no contrast floor, and Anchr's #6F7C00 is
   2.4:1 on its own background. */
.shr-scope:focus-visible,
.shr-scope :focus-visible { outline: 2px solid var(--shr-ink); outline-offset: 2px; }

/* ── The button on a home-page app card ────────────────────────────────────
   Slots into .app-actions beside Learn more / Download, which are flex:1
   each. This one is not: it keeps its own width so the two real actions stay
   the same size as on every card that has no share button yet. */
.shr-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--shr-raise);
  border: 1px solid var(--shr-line);
  border-radius: 14px;
  color: var(--shr-ink2);
  font-family: var(--shr-font);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.shr-btn:hover { color: var(--shr-ink); border-color: var(--shr-accent); }
.shr-btn svg { display: block; }

/* ── The "Share these apps" button in the apps header ──────────────────── */
.shr-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.2rem;
  background: var(--shr-raise);
  border: 1px solid var(--shr-line);
  border-radius: 14px;
  color: var(--shr-ink2);
  font-family: var(--shr-font);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.shr-all:hover { color: var(--shr-ink); border-color: var(--shr-accent); }

/* ── The strip at the foot of an app page ─────────────────────────────────
   Sits between the page's last section and its footer. Someone who read to
   here already knows whether they liked it. */
.shr-strip {
  box-sizing: border-box;
  /* 1000px inside 32px of gutter is what every app page's footer and its
     "More Mac apps" section use, so the strip's text starts on the same
     vertical as the copyright line directly beneath it. */
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 32px 44px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--shr-font);
}
.shr-strip__text { flex: 1 1 260px; min-width: 0; }
.shr-strip__h {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--shr-ink);
  line-height: 1.3;
}
.shr-strip__p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--shr-ink3);
}
.shr-strip__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--shr-raise);
  border: 1px solid var(--shr-line);
  border-radius: 12px;
  color: var(--shr-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.shr-strip__btn:hover { border-color: var(--shr-accent); }
@media (max-width: 640px) {
  .shr-strip { padding: 24px 20px 36px; }
  .shr-strip__btn { width: 100%; justify-content: center; }
}

/* ── The sheet ────────────────────────────────────────────────────────── */
.shr {
  position: fixed;
  inset: 0;
  z-index: 1200;              /* over the app pages' own checkout modal (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-family: var(--shr-font);
  font-size: 16px;
  line-height: 1.5;
}
.shr[hidden] { display: none; }

/* The sheet is a fixed full-viewport overlay, so a11y.css leaves it out of the
   page-wide zoom that "Larger text" applies — a zoomed overlay is sized against
   a viewport 15% larger than the real one. It scales its own type instead: every
   size inside it is an em of this one declaration, and the box metrics stay put
   so the sheet still fits the screen it has. */
html.a11y-text .shr { font-size: 18.4px; }
.shr__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6,6,9,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.shr__sheet {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: min(88vh, 42rem);
  display: flex;
  flex-direction: column;
  background: var(--shr-surface);
  border: 1px solid var(--shr-line);
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(0,0,0,0.6);
  padding: 1.5rem 1.5rem 1.35rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.shr__sheet:focus { outline: none; }
/* The sheet is a column flex container that scrolls, so its children must not
   be squeezed to make the content fit: without this the message box — the one
   element sized to its own text — is the first thing flex takes the height out
   of, and on a phone it loses the line carrying the link. */
.shr__sheet > * { flex-shrink: 0; }
.shr.is-open .shr__scrim { opacity: 1; }
.shr.is-open .shr__sheet { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .shr__scrim, .shr__sheet { transition: none; }
}

.shr__hd { display: flex; align-items: flex-start; gap: 1rem; }
.shr__title {
  margin: 0;
  font-size: 1.2em;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--shr-ink);
}
.shr__sub {
  margin: 0.35rem 0 0;
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--shr-ink3);
}
.shr__x {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--shr-line);
  border-radius: 10px;
  color: var(--shr-ink3);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.shr__x:hover { color: var(--shr-ink); border-color: var(--shr-ink3); }

/* The message, exactly as it will be pasted. Editable on purpose — someone
   adding a word of their own should not have to paste it somewhere else
   first, and whatever they type here is what every button below sends. */
.shr__msg {
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.8rem 0.9rem;
  background: var(--shr-raise);
  border: 1px solid var(--shr-line);
  border-radius: 14px;
  color: var(--shr-ink2);
  font-family: inherit;
  font-size: 0.875em;
  line-height: 1.6;
  resize: vertical;
  min-height: 6.5rem;
}
.shr__msg:focus-visible { outline: 2px solid var(--shr-ink); outline-offset: 2px; }

.shr__row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
/* 8rem basis, not 0: three of these on a 320px phone would each be ~85px and
   clip their label, so they wrap to a second line instead. */
.shr__act {
  flex: 1 1 8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border-radius: 13px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Ink on paper, whichever way round the page has them: the strongest text
   colour becomes the fill and the sheet's own surface becomes the label. That
   is the maximum contrast the page offers, on a dark theme and a light one
   alike, without borrowing an accent that may not carry text. */
.shr__act--go { background: var(--shr-ink); color: var(--shr-surface); }
.shr__act--go:hover { opacity: 0.88; }
.shr__act--alt {
  background: var(--shr-raise);
  border-color: var(--shr-line);
  color: var(--shr-ink2);
}
.shr__act--alt:hover { color: var(--shr-ink); border-color: var(--shr-ink3); }
.shr__act svg { flex-shrink: 0; }

.shr__lbl {
  margin: 1.2rem 0 0.6rem;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shr-ink3);
}
.shr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}
.shr__to {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.7rem;
  background: var(--shr-raise);
  border: 1px solid var(--shr-line);
  border-radius: 12px;
  color: var(--shr-ink2);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.shr__to:hover { color: var(--shr-ink); border-color: var(--shr-accent); }
.shr__to svg { flex-shrink: 0; }

.shr__note {
  margin: 1rem 0 0;
  font-size: 0.75em;
  line-height: 1.55;
  color: var(--shr-ink3);
}

/* Announced to screen readers, invisible to everyone else. */
.shr__live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}