/* Results, share sheet and result-card pages (UX optimisation 2026-11-01,
   lane C: plan-final C1-C4, C7, C8). Loaded after site.css on test pages and
   on the /r/<test>/<band>/ pages. Tokens come from site.css :root (lane A);
   every var() carries a fallback so this file reads right on its own. */

/* C1. A slim header: the illustration band is at most 48 px on phones, the
   "Your result" eyebrow goes, and the score card follows straight on. */
.result .result-intro > .eyebrow { display: none; }
@media (max-width: 699px) {
  .result .result-art { margin-block-end: .75rem; }
  .result .result-art img { min-block-size: 0; max-block-size: 68px; block-size: 68px; }
  .result .score-figure { font-size: clamp(2.25rem, 10vw, 3rem); }
  .result .score-figure[data-shape="phrase"] { font-size: clamp(1.5rem, 6.4vw, 1.875rem); }
  .result h2 { font-size: 1.25rem; }
}

/* C2. The action row: one CTA first, at most three buttons, two rows on a
   phone (the CTA alone, then the other two side by side). */
/* Verify 2026-11-01: the intro's outer margins and this padding left a 56 px
   empty band between the score lines and the CTA; the row's own 1.5rem margin
   is the only gap now. */
.result .score-wrap > div > p:first-child { margin-block-start: 0; }
.result .score-wrap > div > p:last-child { margin-block-end: 0; }
.result .result-actions, .practice-summary .result-actions { gap: 8px; padding: 0; justify-content: flex-start; margin-block-start: 1rem; padding-block-start: 0; align-items: stretch; }
.practice-summary .result-actions > .button { block-size: 50px; }
.result .result-actions > .button,
.practice-summary .result-actions > .button,
.result .result-actions > a.button { margin: 0; min-block-size: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 699px) {
  .result .result-actions > .button, .practice-summary .result-actions > .button { flex: 1 1 calc(50% - 4px); min-inline-size: 0; }
  .result .result-actions > [data-result-cta], .practice-summary .result-actions > [data-result-cta] { flex-basis: 100%; }
  .result .result-actions > .save-result { flex: 1 1 100%; }
}
.result .share-status:empty { display: none; }

/* C3. The keep panel is one quiet line under the row. */
.result .result-keep:has(> [data-keep-line]) { display: block; margin-block: .5rem 0; }
.keep-line { margin: 0; color: var(--muted-strong, #44524c); font-size: .95rem; line-height: 1.5; }
.keep-line .link-button, .keep-line .keep-line-link { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 4px; color: var(--ink, #14221d); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.keep-line .keep-status:empty { display: none; }
.keep-line .keep-status { display: block; font-size: .9rem; }
/* A phone wraps the line after "Sign in ·"; the lead gets its own line so the
   two links share the second one. */
@media (max-width: 540px) { .keep-line .keep-line-lead { display: block; } .keep-line-lead + * { margin-inline-start: -4px; } }

/* C4. Too fast: the count, one caveat, the retake; the review stays below. */
.too-fast { display: grid; gap: .5rem; margin-block: .5rem 1rem; padding: 16px; border: 2px solid var(--line-strong, #727f79); border-radius: var(--radius-m, 14px); background: var(--surface, #fffdf7); }
.too-fast:focus { outline: none; }
.too-fast:focus-visible { outline: 3px solid var(--focus, #14221d); outline-offset: 2px; }
.too-fast-count { margin: 0; font-family: var(--sans, "Public Sans", sans-serif); font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.too-fast-caveat { margin: 0; color: var(--muted-strong, #44524c); }
.result-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: .25rem; }
.result-actions-row > .button { min-block-size: 48px; }
@media (max-width: 699px) { .result-actions-row > .button { flex: 1 1 100%; } }
.result .therapist:not([hidden]) { margin-block: 1.25rem; } .therapist > .button { inline-size: 100%; min-block-size: 48px; }
/* A too-fast result keeps no empty score shell above the panel. */
.result[data-unscored="true"] .result-intro .score-figure:empty { display: none; }

/* C7. Nothing to score: only the header band and the panel are shown. */
.result[data-invalid="true"] > :not(.result-art):not([data-invalid-panel]) { display: none; }
.result-invalid { display: grid; gap: .5rem; }
.result-invalid h2 { margin: 0; font-size: clamp(1.25rem, 4vw, 1.625rem); line-height: 1.25; }
.result-invalid p { margin: 0; }

/* C8. The share sheet: at most 85 % of the screen, Close in a sticky head
   (on screen on a 320x568 phone), five round networks with labels and
   "More", then the actions. */
dialog.share-sheet { max-block-size: 85dvh; padding-block-start: 0; gap: .75rem; }
dialog.share-sheet .share-sheet-head { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-inline: -16px; padding: 12px 8px 8px 16px; background: var(--surface, #fffdf7); border-block-end: 1px solid var(--line, #d9d3c3); }
dialog.share-sheet .share-sheet-head h2 { margin: 0; font-size: 1.25rem; }
/* The sheet opens on its heading (focus target only, no ring); Close keeps a keyboard ring. */
dialog.share-sheet .share-sheet-head h2:focus { outline: none; }
dialog.share-sheet .share-close:focus:not(:focus-visible) { outline: none; }
.share-close { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 44px; block-size: 44px; padding: 0; border: 2px solid var(--line-strong, #727f79); border-radius: 50%; background: var(--tone, #e6dfc9); color: var(--ink, #14221d); cursor: pointer; }
.share-close .share-icon { display: inline-grid; place-items: center; }
dialog.share-sheet .sheet-lead { font-size: .95rem; }
.share-networks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 4px; }
/* Verify 2026-11-01: the 400 px centred sheet (tablet, desktop) fitted five
   networks and wrapped "More" alone; 440 px holds all six in one row. */
@media (min-width: 720px) {
  dialog.share-sheet { inline-size: 480px; }
  .share-round { font-size: .75rem; }
  .share-label { white-space: nowrap; }
  dialog.share-sheet .share-grid [data-share-challenge] { grid-column: 1 / -1; }
}
/* The certificate name field read as an unstyled 30 px box beside 48 px buttons. */
.certificate-block input { box-sizing: border-box; inline-size: 100%; min-block-size: 48px; padding: .5rem .75rem; border: 2px solid var(--line-strong, #727f79); border-radius: var(--radius-m, 12px); background: var(--surface, #fffdf7); font: inherit; }
.share-networks[hidden] { display: none; }
.share-round { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink, #14221d); font: inherit; font-size: .8rem; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; }
.share-round .share-icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--ink, #14221d); color: #fff; }
.share-round[data-share-channel="whatsapp"] .share-icon { background: #1fa855; }
.share-round[data-share-channel="telegram"] .share-icon { background: #229ed9; }
.share-round[data-share-channel="facebook"] .share-icon { background: #1877f2; }
.share-round[data-share-channel="x"] .share-icon { background: #000; }
.share-round[data-share-channel="linkedin"] .share-icon { background: #0a66c2; }
.share-round:hover .share-icon { filter: brightness(.9); }
.share-round:focus-visible { outline: none; }
.share-round:focus-visible .share-icon { outline: 3px solid var(--focus, #14221d); outline-offset: 2px; }
.share-label { line-height: 1.2; overflow-wrap: anywhere; }
dialog.share-sheet .share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
dialog.share-sheet .share-grid .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; inline-size: 100%; }
dialog.share-sheet .share-grid .share-icon { display: inline-grid; place-items: center; }
dialog.share-sheet .share-status:empty { display: none; }

/* The /r/<test>/<band>/ page (result-card-pages.mjs). */
.result-card-page { display: grid; gap: 1rem; justify-items: start; padding-block: clamp(1.5rem, 5vw, 3rem); }
.result-card-page .result-card-band { margin: 0; padding: .3rem .8rem; border: 2px solid var(--ink, #14221d); border-radius: 999px; background: var(--surface, #fff); font-weight: 800; }
.result-card-page h1 { margin: 0; }
.result-card-page .result-card-scale { margin: 0; font-size: 1.125rem; }
.result-card-page .result-card-note { margin: 0; color: var(--muted-strong, #44524c); font-size: .95rem; }
.result-card-page img { display: block; inline-size: 100%; max-inline-size: 600px; block-size: auto; border: 2px solid var(--ink, #14221d); border-radius: var(--radius-m, 14px); }

/* CRITIC PASS (2026-11-01). Labels stay on one line on a 375 px phone: "Download PDF" and the
   share actions; all six round networks in one row; "Challenge a friend" gets the full row. */
@media (max-width: 699px) {
  :is(.result, .practice-summary) .result-actions > .button:not([data-result-cta]) { padding-inline: .6rem; font-size: .95rem; white-space: nowrap; }
  .share-networks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .share-round { font-size: .85rem; gap: 6px; }
  .share-label { overflow-wrap: normal; }
  dialog.share-sheet .share-grid .button { padding-inline: .6rem; font-size: .95rem; white-space: nowrap; }
  dialog.share-sheet .share-grid [data-share-challenge] { grid-column: 1 / -1; }
}
/* Too fast: the panel already says the count and the pace, so the old headline, its two lines and
   the second Retake in the row are not repeated under it. */
.result:has(> [data-too-fast]) > .result-intro,
.result:has(> [data-too-fast]) [data-result-actions] { display: none; }
/* "More detail" (R11): the third card on folds into one full-width disclosure; open, it lays its
   cards out as the grid does. */
.result-grid > .result-more { grid-column: 1 / -1; }
.result-grid > .result-more > summary { display: flex; align-items: center; min-block-size: 44px; padding-block: .5rem; font-weight: 700; cursor: pointer; }
.result-grid > .result-more[open] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.result-grid > .result-more[open] > summary { grid-column: 1 / -1; }
@media (max-width: 640px) { .result-grid > .result-more[open] { grid-template-columns: minmax(0, 1fr); } }

/* Wide tables scroll sideways: a shadow marks each edge that has more to see (CSS only, no script). */
.aptitude-table-wrap { background: linear-gradient(to right, var(--surface, #fffdf7) 30%, #fff0) 0 0 / 2rem 100% no-repeat local, linear-gradient(to left, var(--surface, #fffdf7) 30%, #fff0) 100% 0 / 2rem 100% no-repeat local, linear-gradient(to right, #14221d40, #14221d00) 0 0 / .75rem 100% no-repeat scroll, linear-gradient(to left, #14221d40, #14221d00) 100% 0 / .75rem 100% no-repeat scroll; }
/* Aptitude result: the next-step card spans the summary card with a full-width action; on phones the
   section label sits above its number cells so six numbers fit one row. */
.practice-summary ~ .result-step { max-inline-size: none; }
.practice-summary ~ .result-step .result-step-primary { inline-size: 100%; }
@media (max-width: 560px) { .aptitude-grid-row { flex-direction: column; align-items: flex-start; gap: .25rem; } }
/* "Next: 5 questions on ... (about 3 minutes)" wraps to two lines on phones: a pill shape reads as a blob. */
.button.result-next-start { border-radius: var(--radius-m, 14px); padding-block: .6rem; line-height: 1.25; text-wrap: balance; }