@charset "utf-8";
/* SPQ — Sensory Perception Quotient, 92-item self-administered inventory.
   Design tokens first; every colour is defined on bare :root, then redefined
   for dark under both the media query and the [data-theme] stamp. */

:root {
  color-scheme: light;

  /* Neutrals — cool slate bias, chosen to read as instrument rather than paper */
  --ground:        #f4f6f8;
  --surface:       #ffffff;
  --surface-sunk:  #eef1f4;
  --hairline:      #dde2e8;
  --hairline-soft: #e8ecf0;
  --ink:           #14181d;
  --ink-2:         #4b545e;
  --ink-3:         #78828d;

  /* Series — validated categorical slots 1/2/3 (see palette validation) */
  --ser-you: #2a78d6;
  --ser-asc: #eb6834;
  --ser-ctl: #1baf7a;
  --ser-you-wash: rgba(42, 120, 214, .10);
  --ser-asc-wash: rgba(235, 104, 52, .10);
  --ser-ctl-wash: rgba(27, 175, 122, .10);

  --accent:       #2a78d6;
  --accent-ink:   #1b5194;
  --accent-wash:  rgba(42, 120, 214, .08);
  --focus:        #2a78d6;
  --warn-wash:    #fff7ed;
  --warn-edge:    #f5c99a;
  --warn-ink:     #8a4b16;
  --bad-wash:     #fdf1f1;
  --bad-edge:     #efb9b8;
  --bad-ink:      #97302e;
  --good-wash:    #eefaf4;
  --good-edge:    #a6ddc6;
  --good-ink:     #14653f;

  --radius:   10px;
  --radius-s:  7px;
  --shadow:   0 1px 2px rgba(20, 24, 29, .05), 0 6px 18px -12px rgba(20, 24, 29, .22);

  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:        #0f1215;
    --surface:       #181c21;
    --surface-sunk:  #14181c;
    --hairline:      #2a3037;
    --hairline-soft: #232930;
    --ink:           #eef1f4;
    --ink-2:         #a6afb9;
    --ink-3:         #78828d;
    --ser-you: #3987e5;
    --ser-asc: #d95926;
    --ser-ctl: #199e70;
    --ser-you-wash: rgba(57, 135, 229, .14);
    --ser-asc-wash: rgba(217, 89, 38, .14);
    --ser-ctl-wash: rgba(25, 158, 112, .14);
    --accent:      #3987e5;
    --accent-ink:  #8fbdf2;
    --accent-wash: rgba(57, 135, 229, .12);
    --focus:       #6ba8ee;
    --warn-wash:   #24190f;
    --warn-edge:   #5c3c1c;
    --warn-ink:    #e3b184;
    --bad-wash:    #251413;
    --bad-edge:    #5e2f2d;
    --bad-ink:     #eda6a4;
    --good-wash:   #0f2119;
    --good-edge:   #245741;
    --good-ink:    #86d3b1;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:        #0f1215;
  --surface:       #181c21;
  --surface-sunk:  #14181c;
  --hairline:      #2a3037;
  --hairline-soft: #232930;
  --ink:           #eef1f4;
  --ink-2:         #a6afb9;
  --ink-3:         #78828d;
  --ser-you: #3987e5;
  --ser-asc: #d95926;
  --ser-ctl: #199e70;
  --ser-you-wash: rgba(57, 135, 229, .14);
  --ser-asc-wash: rgba(217, 89, 38, .14);
  --ser-ctl-wash: rgba(25, 158, 112, .14);
  --accent:      #3987e5;
  --accent-ink:  #8fbdf2;
  --accent-wash: rgba(57, 135, 229, .12);
  --focus:       #6ba8ee;
  --warn-wash:   #24190f;
  --warn-edge:   #5c3c1c;
  --warn-ink:    #e3b184;
  --bad-wash:    #251413;
  --bad-edge:    #5e2f2d;
  --bad-ink:     #eda6a4;
  --good-wash:   #0f2119;
  --good-edge:   #245741;
  --good-ink:    #86d3b1;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -12px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0; line-height: 1.25; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1rem; }
p  { margin: 0; }

a { color: var(--accent-ink); text-underline-offset: 2px; }

:where(button, a, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- shell ---------------------------------------------------- */

.wrap { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 16px; }
.wrap--wide { max-width: 1020px; }

.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.topbar__in {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding-block: 8px;
}
.brand { display: flex; align-items: baseline; gap: 9px; margin-right: auto; min-width: 0; }
.brand__mark { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; }
.brand__sub {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 460px) { .brand__sub { display: none; } }

.progressbar { height: 3px; background: var(--hairline-soft); }
.progressbar__fill { height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .progressbar__fill { transition: none; } }

main { padding-block: 26px 64px; }

/* ---------- controls -------------------------------------------------- */

.btn {
  font: inherit; font-weight: 500; font-size: .92rem;
  padding: 9px 16px; border-radius: var(--radius-s);
  border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink);
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--ink-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { filter: brightness(1.07); border-color: var(--accent); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); padding-inline: 10px; }
.btn--ghost:hover { color: var(--ink); background: var(--surface-sunk); border-color: transparent; }
.btn--sm { font-size: .82rem; padding: 6px 11px; }

.iconbtn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: var(--radius-s); border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.iconbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.iconbtn svg { width: 17px; height: 17px; display: block; }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px;
}

.note {
  background: var(--warn-wash);
  border: 1px solid var(--warn-edge);
  border-radius: var(--radius-s);
  padding: 13px 15px;
  font-size: .87rem; line-height: 1.5;
  color: var(--warn-ink);
}
.note strong { color: inherit; }
.note--bad  { background: var(--bad-wash);  border-color: var(--bad-edge);  color: var(--bad-ink); }
.note--good { background: var(--good-wash); border-color: var(--good-edge); color: var(--good-ink); }
.note ul { margin: 7px 0 0; padding-left: 19px; }
.note li { margin-bottom: 3px; }

.eyebrow {
  font-size: .71rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}

.lede { color: var(--ink-2); font-size: 1.02rem; max-width: 62ch; }
.fine { font-size: .84rem; color: var(--ink-3); line-height: 1.55; }

.stack   { display: flex; flex-direction: column; gap: 18px; }
.stack-s { display: flex; flex-direction: column; gap: 10px; }
.row     { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- intro ----------------------------------------------------- */

.hero { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.hero h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem); }
.meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden;
}
.meta-grid > div { background: var(--surface); padding: 13px 15px; }
.meta-grid dt { font-size: .73rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.meta-grid dd { margin: 0; font-size: .93rem; }

/* ---------- questionnaire --------------------------------------------- */

.qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.qhead__count { font-size: .84rem; color: var(--ink-3); }

.qlist { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }

.q {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  margin: 0;  /* it is a <fieldset>: reset UA defaults */
  min-width: 0;
}
.q[data-answered="yes"] { border-color: var(--hairline-soft); background: var(--surface); }
.q[data-flag="unanswered"] { border-color: var(--warn-edge); background: var(--warn-wash); }

.q__legend { display: flex; gap: 11px; padding: 0; width: 100%; }
.q__num {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-3);
  padding-top: .18em; min-width: 2.1em; text-align: right; flex: none;
}
.q__text { font-size: .97rem; line-height: 1.45; }

.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 13px; }
@media (max-width: 560px) { .opts { grid-template-columns: repeat(2, 1fr); } }

.opt { position: relative; }
.opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.opt span {
  display: block; text-align: center;
  padding: 8px 6px; border-radius: var(--radius-s);
  border: 1px solid var(--hairline);
  background: var(--surface-sunk);
  font-size: .82rem; line-height: 1.25; color: var(--ink-2);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
@media (prefers-reduced-motion: reduce) { .opt span { transition: none; } }
.opt input:hover + span { border-color: var(--ink-3); color: var(--ink); }
.opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.opt input:checked + span {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 500;
}

.qnav {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; flex-wrap: wrap;
}
.qnav__spacer { margin-left: auto; }

.pager { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
.pager button {
  font: inherit; font-family: var(--mono); font-size: .76rem;
  width: 30px; height: 30px; padding: 0;
  border-radius: 6px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink-3); cursor: pointer;
}
.pager button[aria-current="true"] { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pager button[data-complete="yes"] { background: var(--accent-wash); color: var(--ink-2); }
.pager button:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---------- results --------------------------------------------------- */

.tiles { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .tiles { grid-template-columns: 1.5fr 1fr 1fr; } }
.tile {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 15px 17px;
  display: flex; flex-direction: column; gap: 3px;
}
.tile--hero { border-color: var(--accent); background: var(--accent-wash); }
.tile__label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tile__value { font-family: var(--mono); font-size: 1.85rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.tile--hero .tile__value { font-size: 2.6rem; }
.tile__sub { font-size: .83rem; color: var(--ink-2); }

.section { margin-top: 34px; }
.section__head { margin-bottom: 14px; }
.section__head h2 { margin-bottom: 4px; }

figure.chart { margin: 0; }
figure.chart figcaption { font-size: .83rem; color: var(--ink-3); margin-top: 9px; line-height: 1.5; }
.chart__box { width: 100%; }
.chart__box svg { display: block; width: 100%; height: auto; overflow: visible; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--ink-2); }
.legend__key { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.legend__key--rule { width: 14px; height: 3px; border-radius: 2px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px; }
.tabs button {
  font: inherit; font-size: .88rem; font-weight: 500;
  padding: 8px 13px; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--ink); }

/* Scroll shadows appear only when a table actually overflows: the two
   `local` layers scroll with the content and uncover the fixed radial
   layers at whichever edge still has content beyond it. */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--surface) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--surface) 40%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%,    rgba(20, 24, 29, .16), rgba(20, 24, 29, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(20, 24, 29, .16), rgba(20, 24, 29, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
th, td { padding: 7px 9px; text-align: right; border-bottom: 1px solid var(--hairline-soft); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr[data-group="sub"] td:first-child { padding-left: 30px; color: var(--ink-2); }

.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; }

/* tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  padding: 8px 11px; font-size: .82rem; line-height: 1.45;
  max-width: 250px;
}
.tip[hidden] { display: none !important; }
.tip__t { font-weight: 600; margin-bottom: 2px; }
.tip__r { display: flex; justify-content: space-between; gap: 14px; }
.tip__r span:last-child { font-family: var(--mono); }

details.method { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
details.method > summary {
  cursor: pointer; padding: 13px 17px; font-weight: 500; font-size: .93rem;
  list-style: none; display: flex; align-items: center; gap: 9px;
}
details.method > summary::-webkit-details-marker { display: none; }
details.method > summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .15s ease; margin-left: 2px;
}
details.method[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { details.method > summary::before { transition: none; } }
.method__body { padding: 0 17px 17px; font-size: .89rem; color: var(--ink-2); line-height: 1.6; }
.method__body h3 { font-family: var(--sans); font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 7px; }
.method__body h3:first-child { margin-top: 4px; }
.method__body ul { margin: 0; padding-left: 20px; }
.method__body li { margin-bottom: 6px; }
.method__body p + p { margin-top: 9px; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none !important; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10, 13, 16, .5); }
.modal__panel {
  position: relative; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow);
  width: min(620px, 100%); max-height: min(80vh, 640px);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal__head { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--hairline); }
.modal__head h2 { margin-right: auto; font-size: 1.05rem; }
.modal__body { padding: 15px 17px; overflow: auto; }
.modal__body textarea {
  width: 100%; min-height: 230px; resize: vertical;
  font-family: var(--mono); font-size: .76rem; line-height: 1.45;
  background: var(--surface-sunk); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-s); padding: 10px;
}
.modal__foot { display: flex; gap: 9px; flex-wrap: wrap; padding: 13px 17px; border-top: 1px solid var(--hairline); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

footer.pagefoot { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hairline); }

/* ---------- print ------------------------------------------------------ */

@media print {
  :root { --ground: #fff; --surface: #fff; --surface-sunk: #fff; --hairline: #c8ced5; --hairline-soft: #dfe4e9; --ink: #000; --ink-2: #333; --ink-3: #555; }
  body { background: #fff; font-size: 11pt; }
  .topbar, .qnav, .pager, .tabs, .modal, .noprint, .iconbtn { display: none !important; }
  main { padding-block: 0; }
  .wrap, .wrap--wide { max-width: none; padding-inline: 0; }
  .card, .tile, .tablewrap, details.method { break-inside: avoid; box-shadow: none; }
  .section { break-inside: avoid-page; margin-top: 20pt; }
  details.method[open] > summary { font-weight: 600; }
  details.method { border: 0; }
  .method__body { padding-inline: 0; }
  figure.chart { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}

/* Small multiples: three roomy panels per row, never a five-across squeeze
   that leaves no space for the subdomain labels. */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

.tablenote { font-size: .84rem; color: var(--ink-3); line-height: 1.5; margin-bottom: 9px; max-width: 78ch; }

/* ---------- import ----------------------------------------------------- */

.drop {
  border: 1.5px dashed var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 13px; align-items: flex-start;
  transition: border-color .12s ease, background .12s ease;
}
@media (prefers-reduced-motion: reduce) { .drop { transition: none; } }
.drop[data-drag="over"] { border-color: var(--accent); background: var(--accent-wash); border-style: solid; }
.drop__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* File input kept focusable and keyboard-operable, with the focus ring shown
   on the label that stands in for it visually. */
.filebtn { position: relative; display: inline-flex; }
.filebtn input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.filebtn > span {
  font-weight: 500; font-size: .92rem;
  padding: 9px 16px; border-radius: var(--radius-s);
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
.filebtn:hover > span { filter: brightness(1.07); }
.filebtn:focus-within > span { outline: 2px solid var(--focus); outline-offset: 2px; }

.paste { width: 100%; }
.paste > summary {
  cursor: pointer; font-size: .86rem; color: var(--ink-2);
  list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 2px 0;
}
.paste > summary::-webkit-details-marker { display: none; }
.paste > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
}
.paste[open] > summary::before { transform: rotate(45deg); }
.paste textarea {
  width: 100%; min-height: 110px; resize: vertical; margin-top: 10px;
  font-family: var(--mono); font-size: .76rem; line-height: 1.45;
  background: var(--surface-sunk); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-s); padding: 10px;
}
.provenance {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  font-size: .84rem; color: var(--ink-2);
  background: var(--surface-sunk); border: 1px solid var(--hairline);
  border-radius: var(--radius-s); padding: 10px 13px;
}
.provenance > span { flex: 1 1 320px; }
.provenance b { font-weight: 600; color: var(--ink); }