/* 36 questions live player. Tokens only (dark mode in tools.css). */
.tool.q36 { gap: 16px; }
.tool .q36-center { text-align: center; justify-content: center; }
.tool .q36-center-row { display: flex; justify-content: center; }
.tool .q36-kicker { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.tool .q36-hero { display: flex; flex-direction: column; gap: 8px; }
.tool .q36-hero .tool-sub { margin: 0; }

.tool .u14-switch { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 4px; text-align: left; font-size: 15px; line-height: 20px; font-weight: 750; color: rgb(var(--ink) / .8); background: none; }
.tool .u14-switch-knob { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: rgb(var(--ink) / .15); transition: background-color .2s ease; }
.tool .u14-switch-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .25s var(--ease-out); }
.tool .u14-switch[aria-checked="true"] .u14-switch-knob { background: rgb(var(--accent)); }
.tool .u14-switch[aria-checked="true"] .u14-switch-knob::after { transform: translateX(18px); }

.tool .q36-set { align-items: center; text-align: center; padding: 8px 0; }
.tool .q36-roman { font-size: 64px; line-height: 68px; font-weight: 950; letter-spacing: -.03em; background: var(--ramp); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.tool .q36-set .tool-sub { margin: 0; max-width: 420px; }
.tool .q36-set-actions { width: 100%; max-width: 360px; }
.tool .q36-set-actions .btn { width: 100%; }
.tool .q36-hook { max-width: 420px; padding: 12px 16px; border-radius: 16px; background: var(--surface); font-size: 15px; line-height: 22px; font-weight: 700; color: rgb(var(--ink) / .8); }

.tool .q36-top { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.tool .q36-spacer { flex: 1; }
.tool .q36-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 14px; font-weight: 850; background: rgb(var(--ink)); color: var(--bg); }
.tool .q36-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 20px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--surface); color: rgb(var(--ink) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); }
.tool .q36-pill.is-paused { color: rgb(var(--ink) / .45); }
.tool .q36-icon { width: 40px; height: 40px; }
.tool .q36-ticks i:nth-child(12n):not(:last-child) { margin-right: 6px; }

.tool .q36-card { min-height: 280px; align-content: center; gap: 14px; padding: 28px 24px; touch-action: pan-y; }
.tool .q36-card:focus { outline: none; }
.tool .q36-num { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.tool .q36-q { font-size: 25px; line-height: 33px; font-weight: 850; letter-spacing: -.01em; color: rgb(var(--ink)); text-wrap: balance; }
.tool .q36-note { font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink) / .6); max-width: 440px; margin: 0 auto; text-wrap: pretty; }
.tool .q36-task { padding-top: 4px; }
.tool .q36-turn { text-align: center; font-size: 15px; line-height: 22px; font-weight: 650; color: rgb(var(--ink) / .7); }
.tool .q36-who { font-weight: 900; color: rgb(var(--ink)); }
.tool .q36-who.is-second { font-weight: 800; color: rgb(var(--ink) / .85); }
.tool .q36-timeup { padding: 16px; border-radius: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; box-shadow: inset 0 0 0 2px rgb(var(--accent) / .4); }
.tool .q36-joined { padding: 10px 14px; border-radius: 14px; background: var(--surface); }

.tool .q36-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px 16px 16px; }
.tool .q36-grid button { min-height: 44px; border-radius: 12px; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; background: var(--surface-2); color: rgb(var(--ink) / .75); }
.tool .q36-grid button.is-done { background: rgb(var(--accent) / .22); color: rgb(var(--ink)); }
.tool .q36-grid button.is-cur { background: rgb(var(--ink)); color: var(--bg); }
.tool .q36-grid button:nth-child(12n+1):not(:first-child) { margin-top: 0; }

.tool .q36-eyes { align-items: stretch; }
.tool .q36-eyes .tool-note { max-width: 440px; margin: 0 auto; }
.tool.q36-calm .q36-eyes > :not(.u14-timer) { opacity: .25; transition: opacity 1.2s ease; }
.tool.q36-calm .q36-eyes .u14-ring-fg { transition: stroke-dashoffset .3s linear; }
.tool.q36-calm .tool-cta { opacity: .25; }
.tool .q36-done { align-items: stretch; }
.tool .q36-done .q36-roman { text-align: center; }

/* Focus mode: the player fills the screen, the card is big, tap the card for the next question. */
.tool.u14-focus { position: fixed; inset: 0; z-index: 1000; display: flex; margin: 0; border-radius: 0; overflow-y: auto; background: var(--bg); padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.tool.u14-focus .q36-play { max-width: 720px; width: 100%; margin: 0 auto; flex: 1; }
.tool.u14-focus .q36-card { flex: 1; min-height: 50vh; cursor: pointer; }
.tool.u14-focus .q36-q { font-size: 30px; line-height: 40px; }
.tool.u14-focus .q36-all, .tool.u14-focus > .tool-cta { display: none; }
html.q36-noscroll, html.q36-noscroll body { overflow: hidden; }

@media (max-width: 599px) {
  .tool .q36-card { min-height: 300px; padding: 24px 18px; }
  .tool .q36-q { font-size: 23px; line-height: 31px; }
  .tool .q36-roman { font-size: 60px; line-height: 64px; }
  .tool .q36-set-actions { max-width: none; }
}
@media (min-width: 600px) {
  .tool.u14-focus .q36-q { font-size: 38px; line-height: 48px; }
}

.tool .q36-pill .u14-ring circle { stroke-width: 14; }
.tool .q36-pill.is-paused .u14-ring-fg { stroke: rgb(var(--ink) / .3); }
.tool .q36-note, .tool .q36-turn, .tool.q36 .tool-note, .tool .q36-set .tool-sub { color: rgb(var(--ink) / .75); }
.tool .q36-exit { font-size: 14px; font-weight: 850; margin-left: 4px; }
.tool.u14-focus .q36-icon[aria-pressed="true"] { width: auto; padding: 0 12px; border-radius: 20px; background: var(--surface); color: rgb(var(--ink)); }
/* The soft app line sits on the start and done screens only, never under a question. */
.tool.q36[data-screen="q"] > .tool-cta, .tool.q36[data-screen="set"] > .tool-cta, .tool.q36[data-screen="eyes"] > .tool-cta { display: none; }
.tool .u14-actions .btn-secondary { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .14), 0 4px 12px rgb(121 35 192 / .08); }
@media (max-width: 599px) { .tool .q36-card { min-height: max(280px, calc(100svh - 480px)); } }
@media (min-width: 600px) { .tool.u14-focus .q36-card { flex: 0 1 auto; min-height: 0; max-height: 64vh; height: 56vh; } .tool.u14-focus .q36-play { justify-content: center; } }
.tool .tool-actions.u14-actions .btn.q36-next { flex: 1 1 auto; width: auto; }
/* Round 2 */
.tool .q36-note { letter-spacing: 0; word-spacing: .04em; }
.tool .q36-hook { background: none; padding: 0; font-weight: 650; color: rgb(var(--ink) / .7); }
.tool .q36-chip.is-soft { background: var(--surface); color: rgb(var(--ink) / .75); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1); }
.tool .q36-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tool .q36-lbl { display: none; font-size: 14px; font-weight: 800; line-height: 20px; }
@media (min-width: 600px) { .tool .q36-icon { width: auto; padding: 0 12px; border-radius: 20px; } .tool .q36-lbl { display: inline; } }
.tool.u14-focus .q36-lbl.q36-exit { display: inline; }
.tool .q36-under { display: flex; flex-direction: column; gap: 10px; }
.tool .q36-skip { align-self: center; background: none; box-shadow: none; color: rgb(var(--ink) / .6); text-decoration: underline; text-underline-offset: 3px; }
.tool .q36-keep { display: flex; flex-direction: column; gap: 8px; }
.tool .q36-keep input { min-height: 44px; }
@media (prefers-color-scheme: dark) {
  .tool .q36-card { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .1), 0 8px 32px rgb(0 0 0 / .35); }
  .tool .q36-chip:not(.is-soft) { background: rgb(var(--accent) / .3); color: rgb(var(--ink)); }
  .tool .u14-actions .btn-secondary { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .3); }
}
/* Round 3 */
.tool .q36-hero .tool-sub { color: rgb(var(--ink) / .72); }
.tool .q36-card .q36-turn { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgb(var(--ink) / .08); width: 100%; font-size: 15px; }
.tool .q36-card { min-height: 260px; }
@media (max-width: 599px) { .tool .q36-card { min-height: max(260px, calc(100svh - 520px)); } }
.tool .q36-skip { color: rgb(var(--ink) / .75); }
.tool .q36-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tool .q36-stats .tool-stat b { font-size: 20px; line-height: 28px; }
.tool .q36-done .q36-roman { font-size: 80px; line-height: 84px; margin-top: 8px; }
.tool .q36-calltip { padding: 10px 14px; border-radius: 14px; background: var(--surface); }
.tool .u14-names .tool-label { font-size: 13px; }
.tool .u14-time-sub { max-width: 84px; }
/* Round 4: the turn line is a chip under the question number; it changes tint every question so the switch is felt. */
.tool .q36-card .q36-turn { margin: 2px auto 4px; padding: 6px 14px; border: 0; width: auto; max-width: 100%; border-radius: 16px; background: rgb(var(--accent) / .12); font-size: 14px; line-height: 20px; color: rgb(var(--ink) / .85); transition: background-color .25s ease; }
.tool .q36-card .q36-turn.is-b { background: rgb(var(--ink) / .07); }
.tool .q36-card { min-height: 240px; }
@media (max-width: 599px) { .tool .q36-card { min-height: 240px; } .tool .q36-chip.is-soft { display: none; } }
.tool .q36-lbl { display: inline; }
.tool .q36-icon { width: auto; padding: 0 10px; border-radius: 20px; }
.tool.q36-calm .q36-eyes > :not(.u14-timer) { opacity: 1; }
.tool.q36-calm .q36-eyes .q36-center-row, .tool.q36-calm .q36-eyes > div.q36-center, .tool.q36-calm .q36-eyes .u14-timer .u14-mini { opacity: .35; transition: opacity 1.2s ease; }
.tool .q36-chip, .tool .q36-pill, .tool .q36-icon { white-space: nowrap; flex: none; }
@media (max-width: 599px) { .tool .q36-icon[aria-label="Focus mode"] .q36-lbl { display: none; } .tool .q36-icon { padding: 0 8px; } .tool .q36-top { gap: 6px; } }
/* After round 5 (not re-scored) */
.tool.q36-calm .q36-eyes .q36-center-row, .tool.q36-calm .q36-eyes > div.q36-center, .tool.q36-calm .q36-eyes .u14-timer .u14-mini { opacity: 1; }
.tool .q36-task .u14-time-sub { text-transform: none; letter-spacing: 0; font-size: 12px; }
.tool .q36-card .q36-turn.is-b { background: rgb(var(--accent) / .2); }
.tool .q36-skip { min-height: 44px; }
.tool.u14-focus .q36-top { padding-right: 4px; }
.tool .q36-stats { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.tool .q36-stats .tool-stat { padding: 12px; }
.tool .q36-grid button:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; }
@media (max-width: 599px) { .tool .q36-hero .tool-sub { display: none; } }