/* ============================================================
   /s/:token — the public share page.

   PUBLIC: the gate serves this sheet without a session (isPublicRoute), because the
   page it styles is read by people who will never have one. Keep it to this page.

   A share is a teaser, not a copy: the summary, the key points, an excerpt from the
   article's opening and a way out to the original. There is no article body to lay
   out, so this sheet is one centred column and nothing else.

   Every colour, size and radius comes from studio.css's tokens. No width media query:
   testInterfaceScaleBreakpoints sweeps every sheet for one, and a single column that
   wraps its own rows does not need one. Class names are `sh-` prefixed; studio.css
   owns component names and donates declarations to any it already defines.
   ============================================================ */

.sh-page {
  max-width: 720px;
}

/* ---------- Masthead: whose page this is, and the way to the product site ----------
   The app's mark and wordmark, a size up, centred over the slogan. The mark and word
   take their colours from studio.css's brand rules as everywhere else; only the size is
   set here. */

.sh-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4) 0;
  text-align: center;
}

.sh-masthead .brand { border-radius: var(--r-2); }
.sh-masthead .brand:hover { text-decoration: none; }
.sh-masthead .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sh-masthead .brand-mark { width: 32px; height: 32px; }
.sh-masthead .brand-word { height: 17px; }

.sh-slogan {
  margin: 0;
  font-size: var(--fs-3);
  color: var(--label-2);
}

.sh-card {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--elev-1);
  overflow-wrap: anywhere;
}

/* ---------- Header: where it is from, what it is called, what it is about ---------- */

.sh-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-3);
  color: var(--label-2);
}

.sh-favicon {
  width: var(--sp-4);
  height: var(--sp-4);
  border-radius: var(--r-1);
  flex: none;
}

.sh-site { color: var(--label); font-weight: 600; }

.sh-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-doc);
  font-size: var(--fs-7);
  font-weight: 600;
  line-height: 1.2;
  color: var(--label);
}

.sh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

/* The category is an outlined pill with the shelf's folder glyph (share.js puts it in);
   a tag is a plain filled pill. Neither is coloured: they lead nowhere a visitor can
   follow, and colouring them would mean a copy of the app's tag palette here. */
.sh-tag,
.sh-category {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--h-control-xs);
  padding: 0 var(--sp-2);
  font-size: var(--fs-2);
  color: var(--label-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}

.sh-category { background: none; }
.sh-category svg { flex: none; width: 12px; height: 12px; }

.sh-tag { background: var(--surface-2); }

/* ---------- Action bar ---------- */

/* One labelled way out to the source, then the reader's icon-button strip: quiet until
   approached, a glyph from the shared set, the name in its tooltip and its label. */
.sh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-5);
}

.sh-open { margin-right: var(--sp-2); }

.sh-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-control);
  height: var(--h-control);
  padding: 0;
  color: var(--label-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sh-act:hover { color: var(--label); background: var(--control); }
.sh-act:active { background: var(--control-press); }
.sh-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sh-act.on { color: var(--accent-ink); }
.sh-act[hidden] { display: none; }

.sh-lead {
  margin: 0 0 var(--sp-5);
}

.sh-lead img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-2);
}

/* ---------- Summary, excerpt, highlights ---------- */

.sh-section {
  margin: 0 0 var(--sp-5);
}

.sh-section:last-child { margin-bottom: 0; }

.sh-section-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--label-2);
}

.sh-audio { margin: 0 0 var(--sp-3); }
.sh-audio audio { display: block; width: 100%; }
.sh-audio audio[hidden] { display: none; }
.sh-audio-status { margin: var(--sp-1) 0 0; font-size: var(--fs-2); color: var(--label-2); }
.sh-audio-status[hidden] { display: none; }

.sh-prose {
  font-family: var(--font-doc);
  font-size: var(--fs-5);
  line-height: 1.6;
  color: var(--label);
}

.sh-prose h3 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--label-2);
}

.sh-prose h3:first-child { margin-top: 0; }
.sh-prose p { margin: 0 0 var(--sp-3); }
/* The summary's tagline, the bare paragraph above its Overview heading. */
.sh-prose > p:first-child:has(+ h3) {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-6);
  font-weight: 600;
  line-height: 1.3;
}
.sh-prose ul,
.sh-prose ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.sh-prose li { margin: 0 0 var(--sp-1); }
.sh-prose a { color: var(--accent-ink); }

.sh-excerpt {
  margin: 0 0 var(--sp-3);
  padding: 0 0 0 var(--sp-4);
  border-left: 2px solid var(--hairline-strong);
  color: var(--label-2);
}

.sh-excerpt p { margin: 0 0 var(--sp-3); }
.sh-excerpt p:last-child { margin-bottom: 0; }

.sh-continue {
  margin: 0;
  font-size: var(--fs-3);
}

.sh-continue a { color: var(--accent-ink); font-weight: 600; }

.sh-highlights {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-highlight {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
}

.sh-highlight:last-child { margin-bottom: 0; }

.sh-quote {
  margin: 0;
  font-family: var(--font-doc);
  font-size: var(--fs-4);
  line-height: 1.5;
  color: var(--label);
}

.sh-note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-3);
  color: var(--label-2);
}

/* ---------- Footer, missing page, toast ---------- */

.sh-foot {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-2);
  color: var(--label-2);
  text-align: center;
}

.sh-hint {
  margin: 0;
  font-size: var(--fs-4);
  color: var(--label-2);
}

.sh-toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-3);
  color: var(--label);
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--elev-2);
}

.sh-toast[hidden] { display: none; }