/* AskDimitri Stats (/tools/stats/): the page's own styles. Colours come from /css/tokens.css;
   the figures are SVG drawn from the data (figures.mjs) and carry their own white page.
   Layout: the 720 px tool column; with the view system (views.js), from 1100 px a sticky list of
   the analyses at the left, below that a sticky "Analyses" button. Three steps (your data, which test, results), the analyses grouped by
   question, and every result in the same order (answer, key numbers, what it means, figure,
   sentences, all the numbers, references, notebook, citation). */

.tool [hidden] { display: none !important; }
.st-page h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 6vw, 42px); line-height: 1.15; color: var(--ink); margin: 0 0 20px; letter-spacing: -.01em; }
.st-page .lede { font-family: var(--serif); font-size: 18px; line-height: 1.7; }
.st-page .lede p { margin: 0 0 16px; }

/* ------------------------------------------------------------------ the three steps */
.st-flow { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.st-flow::before { content: ""; position: absolute; left: 19px; right: calc(33.333% - 19px); top: 19px; height: 1px; background: var(--gold-line); }
.st-flow-step { position: relative; min-width: 0; }
.st-flow-step a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; color: var(--text); padding: 0 10px 0 0; border-radius: 10px; }
.st-flow-step a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.st-flow-n { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 500 15px/1 var(--serif); color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--gold-ink); transition: background-color .3s ease, color .3s ease; }
.st-flow-step.is-done .st-flow-n { background: var(--ink); color: var(--paper); box-shadow: none; }
.st-flow-step.is-done .st-flow-n::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--paper); }
.st-flow-text { display: flex; flex-direction: column; min-width: 0; }
.st-flow-title { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--ink); }
.st-flow-sub { font-size: 13px; color: var(--muted); line-height: 1.4; }
.st-flow-step a:hover .st-flow-title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* ------------------------------------------------------------------ views (views.js)
   Without JavaScript the page is one long column, as before. With it (html.st-views): one view at
   a time; from 1100 px a sticky list of the analyses at the left (the page widens to hold it),
   below that a sticky "Analyses" button that opens the same list as a dialog. */
.st-body { position: relative; }
.st-nav { display: none; }
.st-views .st-link-section { display: none; }
.st-views .st-group-label { display: none; }

.st-menubar { position: sticky; top: 0; z-index: 20; margin: 22px -20px 0; padding: 0 20px; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--hairline); backdrop-filter: blur(6px); }
@media (max-width: 380px) { .st-menubar { margin-left: -16px; margin-right: -16px; padding: 0 16px; } }
.st-menubar-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.st-menubar-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -3px 2px 0 auto; flex: none; }
.st-menubar-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.st-menubar-label { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); flex: none; }
.st-menubar-current { font-family: var(--serif); font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-on-view .st-page h1 { font-size: 22px; margin: 0; letter-spacing: 0; }
.st-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; padding: 0 0 16px; border-bottom: 1px solid var(--hairline); }
.st-crumbs { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.st-crumbs a { color: var(--muted); text-decoration: none; }
.st-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.st-crumb-sep { color: var(--gold-line); }
.st-viewbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.st-viewbar-actions .btn.inline { height: 40px; font-size: 14.5px; padding: 0 16px; margin: 0; }
.st-ask-link { font-size: 14.5px; color: var(--ink); text-underline-offset: 3px; }
.st-viewchip { flex: 1 1 100%; }
.st-chip-small { padding: 8px 14px; }
.st-chip-small .st-chip-text { font-size: 14.5px; }
.st-on-view .st-analyses { margin-top: 0; }
.st-on-view .st-group { margin-top: 0; }
.st-on-view .st-section { margin-top: 26px; padding-top: 0; border-top: 0; }

/* The lists: the left column and the dialog */
.st-nav-list, .st-nav-list ul { list-style: none; margin: 0; padding: 0; }
.st-nav-head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.st-nav-label { margin: 16px 0 2px; padding-left: 14px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); }
.st-nav-list a { display: block; position: relative; font-size: 14px; line-height: 1.35; color: var(--text); text-decoration: none; padding: 6px 0 6px 14px; border-left: 1px solid var(--hairline); transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.st-nav-list a:hover { color: var(--ink); border-left-color: var(--ink); }
.st-nav-list a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.st-nav-list a[aria-current="page"] { color: var(--ink); font-weight: 600; border-left: 3px solid var(--gold); padding-left: 12px; background: linear-gradient(90deg, var(--gold-tint), transparent); }
.st-nav-list a.st-nav-home { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.st-nav-out { color: var(--gold-ink); }

@media (min-width: 1100px) {
  .st-views .st-page { max-width: 1010px; }
  .st-views .st-body { display: grid; grid-template-columns: 210px minmax(0, 720px); gap: 0 40px; align-items: start; }
  .st-views .st-content { grid-column: 2; }
  .st-views .st-nav { display: block; grid-column: 1; grid-row: 1; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 6px 4px 12px 0; margin-top: 4px; }
  .st-menubar { display: none !important; }
}

/* The Analyses dialog */
.st-menu { border: 0; padding: 0; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); border-radius: 18px; background: var(--card); color: var(--text); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ink) 70%, transparent); }
.st-menu::backdrop { background: color-mix(in srgb, var(--ink) 38%, transparent); }
.st-menu-panel { padding: 18px 22px 22px; }
.st-menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; position: sticky; top: -18px; background: var(--card); padding: 4px 0 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.st-menu-head h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); margin: 0; }
.st-menu .st-nav-list a { padding-top: 9px; padding-bottom: 9px; font-size: 15.5px; }
@media (min-width: 560px) { .st-menu-list > .st-nav-list { columns: 2; column-gap: 28px; } .st-menu-list .st-nav-group { break-inside: avoid; } }
@media (prefers-reduced-motion: no-preference) {
  .st-menu[open] { animation: st-menu-in .22s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes st-menu-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
}

/* The home grid of analyses */
.st-grid { margin-top: 22px; display: grid; gap: 26px; }
.st-cat-label { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-ink); }
.st-cat-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--gold-line); }
.st-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-card { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 40px 14px 16px; background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.st-card:hover, .st-card:focus-visible { border-color: var(--ink); box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--ink) 60%, transparent); transform: translateY(-1px); }
.st-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.st-card-name { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--ink); }
.st-card-when { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.st-card-go { position: absolute; right: 14px; top: 14px; color: var(--gold-ink); transition: transform .2s ease; }
.st-card:hover .st-card-go { transform: translateX(3px); }
.st-card-page { background: linear-gradient(160deg, var(--card) 0%, var(--gold-tint) 100%); border-color: var(--gold-line); }

/* The tool's own footer line: version and DOI */
.st-tool-foot { margin: 48px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }
.st-tool-foot a { color: var(--ink); }

@media (max-width: 600px) {
  .st-cards { grid-template-columns: 1fr; }
}
/* Places on home an address can open (#cite, #home, #analyses) clear the sticky Analyses bar. */
.st-citebox, .st-head, .st-analyses-head, .st-card { scroll-margin-top: 64px; }
@media (min-width: 1100px) { .st-citebox, .st-head, .st-analyses-head, .st-card { scroll-margin-top: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .st-nav-list a, .st-card, .st-card-go { transition: none; }
  .st-card:hover, .st-card:focus-visible, .st-card:hover .st-card-go { transform: none; }
}

/* ------------------------------------------------------------------ how to cite (cite.js) */
.st-citebox { position: relative; margin: 34px 0 0; padding: 24px 24px 20px; border-radius: 18px; background: linear-gradient(165deg, var(--card) 0%, var(--card) 52%, var(--gold-tint) 100%); border: 1px solid var(--gold-line); box-shadow: 0 26px 52px -38px color-mix(in srgb, var(--ink) 55%, transparent); overflow: hidden; }
.st-citebox::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--gold-ink)); }
.st-cite-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 18px; }
.st-cite-kicker { margin: 0 0 4px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.st-citebox h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--ink); margin: 0; letter-spacing: -.005em; }
.st-doi { display: inline-flex; align-items: stretch; border-radius: 7px; overflow: hidden; text-decoration: none; font-size: 13px; line-height: 1; border: 1px solid var(--ink); margin-top: 4px; transition: box-shadow .2s ease; }
.st-doi-k { background: var(--ink); color: var(--paper); padding: 7px 9px; font-weight: 600; letter-spacing: .08em; }
.st-doi-v { background: var(--card); color: var(--ink); padding: 7px 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-doi:hover, .st-doi:focus-visible { box-shadow: 0 0 0 3px var(--gold-tint), 0 0 0 4px var(--gold-line); }
.st-doi:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.st-cite-lede { font-size: 14.5px; line-height: 1.55; margin: 12px 0 0; color: var(--text); }
.st-cite-rows { display: grid; gap: 12px; margin-top: 16px; }
.st-cite-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.st-cite-style { margin: 10px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-cite-copybox { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 14px; background: var(--card); border: 1px solid var(--hairline); border-radius: 10px; }
.st-cite-line { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.st-cite-methods .st-cite-copybox { border-color: var(--gold-line); background: var(--paper); }
.st-cite-copy { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--field-border); background: var(--paper); color: var(--ink); font: 500 13px/1 var(--sans); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.st-cite-copy:hover { border-color: var(--ink); background: var(--tint); }
.st-cite-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.st-cite-copy.is-copied { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.st-cite-files { margin: 14px 0 0; font-size: 14.5px; color: var(--text); }
.st-cite-files .link-button { font-size: 14.5px; font-weight: 600; }
.st-cite-files-note { color: var(--muted); font-size: 13.5px; }
.st-cite-status { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: var(--delta); font-weight: 500; }
@media (max-width: 600px) {
  .st-citebox { padding: 20px 16px 16px; }
  .st-citebox h2 { font-size: 23px; }
  .st-cite-row { grid-template-columns: 1fr; }
  .st-cite-style { margin: 0; }
  .st-cite-copybox { flex-direction: column; align-items: stretch; }
  .st-cite-copy { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .st-doi, .st-cite-copy { transition: none; } }

/* ------------------------------------------------------------------ sections */
.st-section { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--hairline); scroll-margin-top: 64px; }
@media (min-width: 1100px) { .st-section { scroll-margin-top: 24px; } }
.st-section h2, .st-analyses-title { font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.22; color: var(--ink); margin: 0 0 10px; letter-spacing: -.005em; }
.st-step-section { border-top: 0; padding-top: 0; margin-top: 56px; }
.st-step-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.st-step-kicker span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font: 500 13px/1 var(--serif); letter-spacing: 0; }
.st-analyses { margin-top: 64px; scroll-margin-top: 64px; }
.st-analyses-head { padding-bottom: 6px; }
.st-group { margin-top: 44px; }
.st-group-label { display: flex; align-items: center; gap: 12px; margin: 0 0 -26px; font-size: 11.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-ink); }
.st-group-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--gold-line); }
.st-group .st-section:first-of-type { border-top: 0; }
.st-h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 28px 0 10px; }
.st-intro { font-size: 15.5px; line-height: 1.6; color: var(--text); margin: 0 0 18px; }
.st-when-label { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 2px; }
.st-when { font-family: var(--serif); font-size: 17px; line-height: 1.55; }

.st-form { margin: 0; }
.st-form fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.st-form legend { font-size: 13.5px; font-weight: 500; color: var(--text); padding: 0; margin: 0 0 6px; }
.st-textarea {
  display: block; width: 100%; box-sizing: border-box; font: 16px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text); background: var(--card); border: 1px solid var(--field-border); border-radius: 8px; padding: 10px 12px; resize: vertical; min-height: 120px;
}
.st-textarea:hover { border-color: var(--ink); }
.st-textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.st-textarea::placeholder { color: var(--muted); opacity: 1; }
.st-row { margin-top: 12px; flex-wrap: wrap; }
.st-row .field { min-width: 150px; }
.st-options-row { margin: 0 0 12px; }
.st-options-row .field { max-width: 460px; }
.st-narrow .field { flex: 0 0 auto; min-width: 140px; }
.st-gap { margin-top: 10px; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-two input[type="text"] { width: 100%; box-sizing: border-box; }
.st-inline-options { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.st-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; min-height: 32px; }
.st-opt input, .st-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
.st-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.45; margin: 10px 0 0; }
.st-check input { margin-top: 2px; }
.st-check[hidden] { display: none; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 0; }
.st-actions .btn { width: auto; margin: 0; }
.st-tight { margin: 4px 0 8px; }
.btn.inline { width: auto; display: inline-flex; align-items: center; padding: 0 20px; }
.st-run { min-width: 180px; justify-content: center; }
.st-try { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.st-try .link-button { font-size: 14px; }
.st-dot { color: var(--gold-ink); }

/* Count grids (chi-square, kappa and McNemar) */
.st-grid-wrap { overflow-x: auto; margin: 6px 0 4px; }
.st-grid { border-collapse: separate; border-spacing: 6px; margin-left: -6px; }
.st-grid th { font-size: 12.5px; font-weight: 500; color: var(--muted); text-align: left; padding: 0; }
.st-grid input[type="text"] { width: 92px; box-sizing: border-box; padding: 8px 10px; }
.st-grid input.st-count { width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.st-pair-grid th { padding: 0 6px 0 0; white-space: nowrap; }
.st-pair-grid td.st-changed input { background: var(--gold-tint); border-color: var(--gold-ink); }

/* Mortality inputs */
.st-mort-grid { display: grid; grid-template-columns: 22px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.st-mort-grid input[type="text"] { width: 100%; box-sizing: border-box; }
.st-mort-head { font-size: 12.5px; color: var(--muted); }
.st-mort-row { font-size: 13px; color: var(--muted); text-align: center; }

/* Cox covariates */
.st-covs, .st-pick-covs { margin-top: 12px; }
.st-cov-head { font-size: 13.5px; font-weight: 500; margin: 0 0 6px; }
.st-pick-covs { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.st-cov { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--hairline); }
.st-cov-use { display: flex; align-items: center; gap: 8px; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.st-cov-use input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; margin: 0; }
.st-cov select { height: 40px; font-size: 16px; padding: 0 34px 0 10px; background-position: right 12px center; }
.st-cov select:disabled { opacity: .5; }
.st-cov-ref { display: flex; align-items: center; gap: 6px; min-width: 0; }
.st-cov-ref-label { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ the chooser */
.st-chooser-card { margin-top: 6px; }
.st-path { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.st-path li { font-size: 13px; background: var(--tint); border-radius: 999px; padding: 4px 10px; color: var(--ink); }
.st-question legend { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 10px; }
.st-options { display: grid; gap: 8px; }
.st-options .st-optcard { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--hairline); background: var(--card); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.45; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.st-options .st-optcard:hover { border-color: var(--ink); background: var(--tint); }
.st-options .st-optcard input { margin-top: 3px; accent-color: var(--ink); width: 18px; height: 18px; flex: none; }
.st-chooser-result { margin-top: 14px; border: 1px solid var(--gold-line); background: var(--gold-tint); border-radius: 14px; padding: 20px 22px; }
.st-chooser-result:focus { outline: none; }
.st-chooser-result:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.st-kicker { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 6px; }
.st-test { font-family: var(--serif); font-size: 23px; color: var(--ink); margin: 0 0 8px; line-height: 1.3; }
.st-chooser-result p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.st-chooser-result p.st-test { font-size: 23px; }
.st-chooser-result p:last-child { margin-bottom: 0; }
.st-chooser-result .st-actions { margin-top: 14px; }

/* "What do you want to know?" (data.js), above the chooser when a spreadsheet is open */
.st-ask { margin: 8px 0 26px; background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; padding: 24px 20px 22px; box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--ink) 35%, transparent); }
.st-ask-title { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.2; color: var(--ink); margin: 0 0 16px; }
.st-ask-aims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; }
.st-aim { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 12px; cursor: pointer; background: var(--paper); transition: border-color .15s ease, background-color .15s ease; }
.st-aim:hover { border-color: var(--ink); }
.st-aim input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.st-aim:has(input:checked) { border-color: var(--ink); background: var(--tint); box-shadow: inset 0 0 0 1px var(--ink); }
.st-aim:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.st-aim-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-aim-label { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.st-aim-eg { font-size: 13px; color: var(--muted); line-height: 1.4; }
.st-ask-cols { padding-top: 14px; border-top: 1px solid var(--hairline); }
.st-ask-adjust { margin: 4px 0 0; }
.st-ask-out { margin-top: 4px; }
.st-ask-out:empty { display: none; }
.st-ask-facts { font-size: 14.5px; margin: 14px 0 0; }
.st-ask-shape { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.st-ask-more { font-size: 15px; margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--paper); }
.st-ask-result { margin-top: 14px; }

/* ------------------------------------------------------------------ results */
.st-result { margin-top: 26px; border: 1px solid var(--hairline); background: var(--card); border-radius: 16px; padding: 26px 22px 22px; box-shadow: 0 22px 44px -32px color-mix(in srgb, var(--ink) 40%, transparent); scroll-margin-top: 64px; }
@media (min-width: 720px) { .st-result { padding: 34px 36px 28px; } }
.st-result[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .st-result:not([hidden]) { animation: st-rise .5s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes st-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.st-r-head { padding-bottom: 18px; border-bottom: 1px solid var(--hairline); }
.st-r-kicker { margin: 0 0 10px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.st-result h3.st-r-answer { font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 3.2vw, 25px); line-height: 1.32; color: var(--ink); margin: 0 0 18px; letter-spacing: -.005em; }
.st-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin: 0; }
.st-key { margin: 0; padding: 12px 14px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; min-width: 0; }
.st-key dt { font-size: 12px; color: var(--muted); line-height: 1.35; margin: 0 0 4px; }
.st-key dd { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-result h4 { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; }
.st-interpret p { font-family: var(--serif); font-size: 16.5px; line-height: 1.62; margin: 0 0 10px; }
.st-notes { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.st-notes li { margin-bottom: 4px; }
.st-r-block { margin-top: 6px; }
.st-sentence-label { margin: 12px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.st-sentence { border-left: 3px solid var(--gold-line); padding: 2px 0 2px 14px; margin: 0 0 8px; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; }
.st-copyrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.st-copyrow .btn.inline { height: 40px; font-size: 14.5px; padding: 0 14px; }
.st-copy.is-copied { border-color: var(--ink); background: var(--tint); }
.st-copy-status { font-size: 13px; color: var(--delta); font-weight: 500; }
.st-r-details { margin-top: 22px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.st-r-details > summary, .st-fig-options > summary, .st-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.st-r-details > summary::-webkit-details-marker, .st-fig-options > summary::-webkit-details-marker, .st-fold > summary::-webkit-details-marker { display: none; }
.st-r-details > summary::before, .st-fig-options > summary::before, .st-fold > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; flex: none; }
.st-r-details[open] > summary::before, .st-fig-options[open] > summary::before, .st-fold[open] > summary::before { transform: rotate(45deg); }
.st-r-details[open] { padding-bottom: 8px; }

/* Long tables scroll inside their card, never the page. */
.st-table-wrap { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; max-width: 100%; }
.st-table { border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 60%; }
.st-table caption { text-align: left; font-size: 13px; font-weight: 600; color: var(--text); padding: 0 0 6px; }
.st-table th, .st-table td { border-bottom: 1px solid var(--hairline); padding: 7px 14px 7px 0; text-align: left; vertical-align: top; }
.st-table thead th { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.st-table td + td, .st-table th + th { padding-left: 4px; }

.st-figure { margin: 0 0 10px; background: #ffffff; border: 1px solid var(--hairline); border-radius: 10px; padding: 8px; }
.st-figure-svg { display: block; width: 100%; height: auto; }
.st-figure-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 4px 0 6px; }
.st-figure-controls .field { margin: 0; }
.st-figure-controls input[type="text"], .st-figure-controls select { width: 100%; box-sizing: border-box; }
.st-figure-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 8px; }
.st-figure-checks .st-check { margin-top: 6px; }
.st-fig-options { border-bottom: 1px solid var(--hairline); margin: 4px 0 8px; }
.st-export { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.st-export-label { font-size: 13.5px; color: var(--muted); margin-right: 2px; }
.st-export .btn { margin: 0; height: 40px; font-size: 14.5px; padding: 0 16px; }
.st-export .field { margin: 0; }
.st-export select { width: auto; height: 40px; }

.st-refs { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.st-refs li { margin-bottom: 3px; }
.st-cite { margin-top: 22px; padding: 16px 18px; background: var(--gold-tint); border: 1px solid var(--gold-line); border-radius: 12px; }
.st-cite p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.st-cite .st-cite-text { font-family: var(--serif); font-size: 15.5px; }
.st-cite .st-cite-ask { font-weight: 600; color: var(--ink); }
.st-notebook p, .st-member p { font-size: 14.5px; line-height: 1.55; margin: 0 0 8px; }
.st-member { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--tint); }
.st-member[hidden] { display: none; }
.st-share { font-size: 14px; margin: 16px 0 0; }

/* The reconstruction, as a card in the Meta-analysis group */
.st-link-section { border-top: 0; }
.st-link-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 22px 20px; background: linear-gradient(160deg, var(--card) 0%, var(--gold-tint) 100%); border: 1px solid var(--gold-line); border-radius: 16px; text-decoration: none; color: var(--text); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.st-link-card:hover, .st-link-card:focus-visible { transform: translateY(-2px); border-color: var(--delta); box-shadow: 0 16px 30px -24px color-mix(in srgb, var(--ink) 60%, transparent); }
.st-link-art { width: 92px; height: auto; }
.st-art-axis { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.st-art-curve { fill: none; stroke: var(--ink); stroke-width: 2; }
.st-art-curve2 { fill: none; stroke: var(--gold-ink); stroke-width: 1.6; stroke-dasharray: 3 2.5; }
.st-art-dot { fill: var(--card); stroke: var(--ink); stroke-width: 1.4; }
.st-link-copy { display: flex; flex-direction: column; gap: 6px; }
.st-link-kicker { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.st-link-title { font-family: var(--serif); font-size: 23px; line-height: 1.25; color: var(--ink); }
.st-link-text { font-size: 15px; line-height: 1.55; }
.st-link-go { font-size: 14.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.st-link-go::after { content: " \2192"; }

.st-about p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.st-print-foot { display: none; }

@media (max-width: 600px) {
  .st-two { grid-template-columns: 1fr; }
  .st-figure-controls { grid-template-columns: 1fr 1fr; }
  .st-result { padding: 20px 16px 18px; border-radius: 14px; }
  .st-section h2, .st-analyses-title { font-size: 23px; }
  .st-mort-grid { grid-template-columns: 16px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 6px; }
  .st-flow-n { width: 32px; height: 32px; font-size: 14px; }
  .st-flow::before { top: 16px; }
  .st-flow-title { font-size: 15.5px; }
  .st-flow-sub { display: none; }
  .st-ask { padding: 18px 14px; }
  .st-ask-aims { grid-template-columns: 1fr; }
  .st-aim { padding: 10px 12px; }
  .st-aim:not(:has(input:checked)) .st-aim-eg { display: none; }
  .st-keys { grid-template-columns: 1fr 1fr; }
  .st-key dd { font-size: 17px; }
  .st-cov { grid-template-columns: 1fr 1fr; }
  .st-cov-use { grid-column: 1 / -1; }
  .st-link-card { grid-template-columns: 1fr; }
  .st-link-art { width: 76px; }
  .st-run { width: 100%; }
}
@media (max-width: 400px) {
  .st-figure-controls { grid-template-columns: 1fr; }
  .st-keys { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .st-flow-n, .st-options .st-optcard, .st-aim, .st-link-card, .st-r-details > summary::before, .st-fig-options > summary::before, .st-fold > summary::before { transition: none; }
  .st-link-card:hover, .st-link-card:focus-visible { transform: none; }
}

@media print {
  .st-flow, .st-menubar, .st-viewbar, .st-nav, .st-menu, .st-grid, .st-cite-copy, .st-cite-files, .st-form, .st-figure-controls, .st-fig-options, .st-export, .st-copyrow .btn, .st-member, .st-notebook, .st-share, #chooser, .st-about, .st-group-label, .st-analyses-head, .st-link-section { display: none !important; }
  .st-result { border: 0; padding: 0; break-inside: auto; box-shadow: none; }
  .st-r-details { border: 0; }
  .st-section { border-top: 0; }
  .st-print-foot { display: block; font-size: 12px; color: var(--muted); margin-top: 18px; }
}

/* ===================================================================== Your spreadsheet (data.js)
   The drop zone, the loaded sheet (the columns, the privacy note, the folded preview and reading
   options, then the one-line summary once confirmed), and the "From your spreadsheet" menus
   data.js puts at the top of each analysis form. */
.st-drop { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; border: 1.5px dashed var(--field-border); border-radius: 16px; background: var(--card); padding: 22px 22px 18px; transition: border-color .2s ease, background-color .2s ease; }
.st-drop.st-drop-over { border-color: var(--ink); background: var(--tint); }
.st-drop-art { width: 56px; height: auto; margin-top: 2px; }
.st-art-sheet { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.st-art-grid { fill: none; stroke: var(--gold-line); stroke-width: 1.2; }
.st-art-head { fill: var(--gold-tint); stroke: var(--ink); stroke-width: 1.6; }
.st-drop p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.st-drop .st-drop-main { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.st-drop .st-drop-safe { font-size: 14.5px; }
.st-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.st-file-button { cursor: pointer; margin: 0; }
.st-drop:focus-within .st-file-button { outline: 2px solid var(--ink); outline-offset: 2px; }
.st-reading { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.st-data { margin-top: 18px; }
.st-data-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.st-data-summary { font-size: 15.5px; margin: 0; overflow-wrap: anywhere; }
.st-data-check { font-size: 14.5px; color: var(--text); margin: 8px 0 14px; line-height: 1.55; }
.st-data-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 12px; padding-bottom: 8px; }
.st-data-settings .field { min-width: 0; }
.st-data-settings select, .st-data-settings input[type="text"] { width: 100%; box-sizing: border-box; }
.st-fold { border-bottom: 1px solid var(--hairline); }
.st-fold:first-of-type { border-top: 1px solid var(--hairline); }
.st-fold > summary { font-weight: 400; font-size: 14.5px; }
.st-confirm-row { margin-top: 18px; }
.st-hint { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.st-privacy { margin: 14px 0; padding: 12px 16px; border: 1px solid var(--danger-line); background: var(--danger-bg); border-radius: 10px; }
.st-privacy p, .st-privacy li { font-size: 14.5px; line-height: 1.55; margin: 0 0 6px; overflow-wrap: anywhere; }
.st-privacy ul { margin: 0 0 6px; padding-left: 18px; }
.st-privacy .st-privacy-head { font-weight: 600; color: var(--danger); }
.st-preview td, .st-preview th { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.st-masked, .st-left-out td, .st-left-out th { color: var(--muted); }
.st-masked { font-style: italic; }
.st-columns { width: 100%; }
.st-columns select { font-size: 16px; height: 40px; padding: 0 30px 0 10px; background-position: right 10px center; min-width: 200px; max-width: 260px; width: 100%; }
.st-columns td:nth-child(3) { font-variant-numeric: tabular-nums; }
.st-columns input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.st-colname { font-weight: 500; color: var(--text); }
.st-letter { font-size: 12px; color: var(--muted); }
.st-warn { color: var(--gold-ink); font-size: 13px; }
.st-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; background: var(--card); border: 1px solid var(--hairline); border-left: 3px solid var(--gold); border-radius: 12px; }
.st-chip-icon { width: 22px; height: 22px; flex: none; fill: var(--gold-tint); stroke: var(--ink); stroke-width: 1.4; }
.st-chip-text { flex: 1 1 220px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.st-chip-actions { display: flex; gap: 14px; font-size: 14.5px; }
.st-chip-note { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }
.st-pick { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--hairline); border-left: 3px solid var(--gold); background: var(--card); border-radius: 12px; }
.st-pick-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0 0 8px; }
.st-pick-head, .st-pick-hint { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.st-pick-switch { font-size: 13.5px; }
.st-pick-hint { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.st-pick-paste { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.st-pick-grid, .st-pick-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 14px; }
.st-pick-cell { min-width: 0; }
.st-pick-grid .field, .st-pick-levels .field { margin-bottom: 8px; min-width: 0; }
.st-pick-grid select, .st-pick-levels select, .st-pick-levels input[type="text"] { width: 100%; box-sizing: border-box; }
.st-yes { margin: -2px 0 10px; padding-left: 12px; border-left: 2px solid var(--gold-line); }
.st-yes label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.st-yes select { height: 42px; }
.st-pick-note { font-size: 13.5px; color: var(--text); margin: 8px 0 0; line-height: 1.5; }
.st-pick-note:empty { display: none; }
.st-pick-error { color: var(--danger); }
.st-columns-mode .st-manual { display: none; }
.st-example-sheet { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 600px) {
  .st-drop { grid-template-columns: 1fr; padding: 16px 14px 12px; }
  .st-drop-art { display: none; }
  .st-pick { padding: 12px; }
  .st-pick-grid, .st-pick-levels { grid-template-columns: 1fr; }
  /* The column list stacks: one card per column, each value beside its heading. */
  .st-columns, .st-columns tbody, .st-columns tr, .st-columns th, .st-columns td { display: block; }
  .st-columns { min-width: 0; width: 100%; }
  .st-columns thead { display: none; }
  .st-columns caption { display: block; }
  .st-columns tr { border-bottom: 1px solid var(--hairline); padding: 8px 0; }
  .st-columns th, .st-columns td { border: 0; padding: 2px 0; }
  .st-columns td { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; }
  .st-columns td::before { content: attr(data-label); font-size: 12.5px; color: var(--muted); }
  .st-columns td + td { padding-left: 0; }
  .st-columns select { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .st-drop { transition: none; } }
@media print {
  #data, .st-pick, .st-pick-paste, .st-example-sheet, .st-try { display: none !important; }
}
/* ================================================================= end of Your spreadsheet */