/* INKLOSURE v5 additions: accessibility, bullseye badge, progress pips as a list, histogram, error banner. Same tokens as app.css. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--gold);color:var(--gold-ink);border:var(--bw) solid var(--edge);border-radius:var(--r-md);padding:10px 16px;font:700 15px var(--display);text-decoration:none;box-shadow:var(--sh-sm)}
.skip:focus{top:max(10px,env(safe-area-inset-top))}
main:focus{outline:none}
h1:focus,h2:focus{outline:none}
[tabindex="-1"]:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* the bull wears a bullseye the way the goat wears a crown */
.bullseyed{position:relative}
.bullseyed::after{content:"\1F3AF";position:absolute;left:50%;top:-.55em;font-size:.55em;line-height:1;transform:translateX(-40%) rotate(-10deg);pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}

/* progress pips are a real list; misses get stripes so colour is never the only signal */
ol.pips{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex:1;min-width:30px}
ol.pips li.pip{flex:1;height:12px;list-style:none}
.pip.m{background:repeating-linear-gradient(135deg,var(--miss) 0 4px,var(--surface) 4px 7px)}
.pip.h{background:var(--hit)}
#app.phone ol.pips li.pip{height:9px}

/* settings rows: real labels, big targets, switch look */
.sw label{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;cursor:pointer}
.sw label span.t{display:block}
.sw input[type=checkbox]{inline-size:44px;block-size:44px;margin:0}

/* error banner and busy state */
.err{margin:0 var(--off) var(--s3) 0;padding:12px 14px;border:var(--bw) solid var(--edge);border-radius:var(--r-md);background:var(--blush);color:var(--text);box-shadow:var(--sh-sm);font-weight:700;display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.err p{margin:0;flex:1 1 220px}
.err .btn{min-height:44px}
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::before{content:"";width:14px;height:14px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* keyboard help under the chart, shown on focus and in the how-to */
.kbdhelp{font-size:var(--fs-sm);color:var(--mute);font-weight:600;margin:0}
kbd{font:700 12px var(--mono);background:var(--surface2);border:2px solid var(--edge);border-radius:6px;padding:1px 6px}
#dropBtn{padding:0 12px;font-size:14px;white-space:nowrap}
.nudge{flex:1 1 100%;min-width:0;flex-wrap:wrap}
.dockrow{flex-wrap:wrap}
#app.wide .dockrow .gold{flex:1 1 100%}
#app.phone .dockrow{flex-wrap:nowrap}
#app.phone .nudge{flex:1 1 auto;flex-wrap:wrap}
/* WCAG 2.5.7: the move / resize / place buttons are the single-pointer alternative to dragging, so they stay visible on phones too */
#app.phone #dockPlay{display:flex}
#app.phone .dock{padding-top:6px}
#app.phone .nudge .btn.sq{width:44px;min-height:44px}
.nudge .btn.sq svg.i{width:20px;height:20px}

/* the stake-and-fence readout is a live region for screen readers but stays quiet visually */
.spans{overflow-wrap:anywhere}

/* histogram: how everyone did today */
.histo h2,.histo h3{margin:0 0 var(--s2)}
.histo .hsum{margin:0 0 var(--s3);font-weight:700;font-size:15px;line-height:1.35}
.histo .hsub{margin:var(--s2) 0 0;color:var(--mute);font-size:var(--fs-sm);font-weight:600}
.histo .demo{display:inline-block;background:var(--blush);border:2px solid var(--edge);border-radius:999px;padding:2px 10px;font:800 11px var(--display);margin-left:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:.03em}
.histo svg{display:block;width:100%;height:auto;overflow:visible}
.histo .hbar{fill:var(--butter);stroke:var(--edge);stroke-width:1.6}
.histo .hbar.you{fill:var(--gold);stroke-width:2.6}
.histo .curve{fill:none;stroke:var(--marker);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.histo .area{fill:rgba(0,169,157,.16);stroke:none}
.histo .axis{stroke:var(--edge);stroke-width:2}
.histo .tick{stroke:var(--edge);stroke-width:1.5}
.histo .txt{fill:var(--text);font:700 11px var(--mono)}
.histo .txt.mute{fill:var(--mute);font-weight:600}
.histo .youline{stroke:var(--edge);stroke-width:2.4;stroke-dasharray:5 4}
.histo .youdot{fill:var(--gold);stroke:var(--edge);stroke-width:2.4}
.histo .youtag rect{fill:var(--gold);stroke:var(--edge);stroke-width:2}
.histo .youtag text{fill:var(--gold-ink);font:800 11px var(--display)}
.histo details{margin-top:var(--s3)}
.histo summary{cursor:pointer;font:700 14px var(--display);min-height:44px;display:flex;align-items:center}
.histo table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.histo th,.histo td{border-top:2px dashed var(--surface3);padding:6px 8px;text-align:left}
.histo td.n,.histo th.n{text-align:right}
.histo tr.you td,.histo tr.you th{background:var(--butter);font-weight:800}

/* things that used to be inline styles (the strict CSP forbids inline style attributes) */
.sprite{position:absolute}
.card-first{margin-top:4px}
.gut{color:var(--mute);font-size:14px;margin-top:4px;font-weight:600}
.sw-first{margin-top:10px}
.noscript{margin:var(--s4)}
#how .demogrid path{stroke:#ddd2b4;fill:none}
#how .demo-blob{fill:rgba(0,169,157,.22);stroke:#00a99d;stroke-width:2.5;stroke-linejoin:round}
#how .demodot{fill:#2d3748;stroke:#f6bd2f;stroke-width:2.5}
#viewLoading{margin-top:var(--s4)}
#viewLoading p{margin:0;font-weight:700}

/* how-to dialog: scroll lock + focus ring on the sheet */
body.modal{overflow:hidden}
#how .sheet:focus{outline:none}

/* visible text alternatives instead of colour-only cues on the reveal */
.revres .mark{display:inline-block;margin-right:6px}

@media (forced-colors:active){
  .btn,.iconbtn,.chip,.seg{border:2px solid ButtonText}
  .bar i{background:Highlight}
  .histo .hbar{fill:Canvas;stroke:CanvasText}.histo .hbar.you{fill:Highlight}
  .histo .curve{stroke:Highlight}
}
@media (prefers-reduced-motion:reduce){
  .btn[aria-busy="true"]::before{animation:none}
}

/* contrast: small muted labels on tinted chips must reach 4.5:1 in the dark theme too */
.pts .sm{color:var(--text)}

/* ===== spacing: one 12px rhythm between blocks (10px on phones), consistent card padding, text with even space above and below ===== */
:root{--gap:12px}
.play{gap:var(--gap)}
#app.wide header{margin-bottom:var(--gap)}
#app.phone header{margin-bottom:10px}
#app.phone .play{gap:10px}
.kickrow{min-height:28px}
.qcard{padding:12px 14px}
.qcard h1{line-height:1.2;margin:0}
.qcard p{margin:5px 0 0;line-height:1.35}
#app.phone .qcard{padding:0 2px}
#app.phone .qcard p{margin:4px 0 0}
.axkey{gap:8px}
.axr{align-items:center;min-height:24px}
.ink{margin-top:0}
#playPanel{display:flex;flex-direction:column;gap:var(--gap)}
#app.phone #playPanel{display:contents}
.tools{row-gap:var(--s2)}
.dockrow{gap:var(--s2) var(--gap);row-gap:var(--gap)}
.nudge{gap:var(--s2)}
.dock{padding-top:0}
.card{margin:var(--gap) var(--off) 0 0}
#revealPanel .card{margin-top:0}
.card-first{margin-top:0}
#viewLoading{margin-top:0}
.two{margin-top:var(--gap)}
.card .two{margin-top:var(--s3)}
.total{margin-bottom:2px}
.emojirow{margin-top:var(--s3)}
.persona{margin-top:var(--s3);line-height:1.3}
.gut{margin-top:6px;line-height:1.4}
.minis{margin-top:var(--s4)}
.rows{margin-top:var(--s4)}
.card h2{margin:0 0 var(--s3);line-height:1.25}
.legnote{line-height:1.45}
.fact{line-height:1.5}
.revsub,.revans{line-height:1.4}
.revans{margin-top:var(--s3)}
.hint{line-height:1.4}
#app.phone .hint{bottom:60px}
.cd{margin:var(--gap) 0 0;padding-bottom:var(--s3)}
/* move / resize pad: the six round buttons share the row evenly; "Place box" (only before a shape exists) gets its own full-width row */
.nudge .btn.sq{flex:1 1 0;min-width:44px;width:auto;max-width:72px}
#dropBtn{flex:1 1 100%}
#app.phone .nudge .btn.sq{width:auto}

/* everyone's average fence (dashed indigo box on the reveal) */
.revcrowd{margin:var(--s2) 0 0;font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--text)}
.revcrowd:empty{display:none}
.revcrowd::before{content:"";display:inline-block;width:16px;height:12px;margin-right:8px;vertical-align:-1px;border:2.5px dashed #4b4bc4;background:rgba(91,91,214,.12);border-radius:2px}

/* ===== INKLOSURE ink-blot branding: faint splashes behind the how-to sheet, the pre-launch card and the first result card. Pure decoration (clip-path shapes, no images). ===== */
:root{--blot:rgba(45,55,72,.07);--blot-gold:rgba(246,189,47,.22)}
:root[data-theme="dark"]{--blot:rgba(255,255,255,.06);--blot-gold:rgba(246,189,47,.16)}
#how .sheet,.card.pre,.card-first{position:relative;overflow:hidden}
#how .sheet::before,.card.pre::before,.card-first::before{content:"";position:absolute;right:-18px;top:-18px;width:156px;height:140px;pointer-events:none;background:var(--blot);
  clip-path:path("M98.51 88.77C96.01 91.97 88.61 90.66 84.12 93.1C79.63 95.54 75.61 103.52 71.6 103.41C67.58 103.3 64.63 95.26 60.03 92.43C55.42 89.59 45.91 90.13 43.97 86.4C42.04 82.67 47.26 75.07 48.42 70.04C49.59 65.02 48.3 59.23 50.97 56.25C53.65 53.26 60.24 54.58 64.46 52.12C68.69 49.66 72.5 41.46 76.34 41.49C80.17 41.52 83.12 49.5 87.47 52.32C91.81 55.13 100.46 54.78 102.4 58.38C104.35 61.98 99.77 68.86 99.13 73.92C98.48 78.99 101.01 85.57 98.51 88.77zM73.36 53.74C82.44 47.06 98.11 44.72 111.33 35.98A5.63 5.63 0 1 1 115.96 41.49C105.05 53 100.03 68.02 91.87 75.8zM84.03 57.57C91.93 57.56 102.03 64.47 112.35 65.26A4.95 4.95 0 1 1 112.94 71.98C102.91 74.55 94.17 83.11 86.38 84.47zM90.72 69.58C95.22 74.18 96.46 84.68 101.53 90.99A4.5 4.5 0 1 1 97.48 95.82C90.39 91.92 79.84 92.52 74.52 88.88zM84.67 84.23C83.65 89.22 76.76 94.71 74.69 100.25A4.27 4.27 0 1 1 68.41 99.7C67.34 93.89 61.51 87.28 61.36 82.19zM69.88 87.37C62.88 90.76 51.83 90.26 42.06 94.08A4.5 4.5 0 1 1 38.91 88.62C47.11 82.07 52.19 72.25 58.63 67.88zM60.04 77.46C55.67 75.34 52.04 68.32 47.03 65.06A3.6 3.6 0 1 1 48.88 59.98C54.81 60.71 62.1 57.66 66.81 58.85zM122.32 44.1A5.4 3.96 -30 1 0 131.68 38.7A5.4 3.96 -30 1 0 122.32 44.1zM123.99 55.76A3.24 2.38 -18 1 0 130.15 53.76A3.24 2.38 -18 1 0 123.99 55.76zM120.05 86.96A3.78 2.77 18 1 0 127.24 89.3A3.78 2.77 18 1 0 120.05 86.96zM96.36 110.74A2.97 2.18 60 1 0 99.33 115.88A2.97 2.18 60 1 0 96.36 110.74zM46.17 105.16A3.51 2.57 130 1 0 41.66 110.54A3.51 2.57 130 1 0 46.17 105.16zM26.14 80.44A2.7 1.98 170 1 0 20.82 81.38A2.7 1.98 170 1 0 26.14 80.44zM95.3 31.95A3.24 2.38 -62 1 0 98.34 26.23A3.24 2.38 -62 1 0 95.3 31.95z")}
#how .sheet::after,.card.pre::after,.card-first::after{content:"";position:absolute;right:20px;top:112px;width:30px;height:30px;pointer-events:none;background:var(--blot-gold);
  clip-path:path("M18.45 15.98C17.9 17.04 15.89 17.5 14.46 17.97C13.02 18.43 10.96 19.33 9.86 18.75C8.75 18.18 8.28 16.02 7.81 14.52C7.35 13.02 6.45 10.9 7.05 9.75C7.65 8.59 9.95 7.91 11.41 7.59C12.87 7.28 14.76 7.18 15.81 7.85C16.87 8.52 17.31 10.25 17.74 11.61C18.18 12.96 19 14.92 18.45 15.98zM14.05 9.07C15.64 8.32 18.31 8.74 20.5 7.87A1.03 1.03 0 1 1 21.19 9.07C19.35 10.53 18.37 13.05 16.93 14.05zM16.9 12.82C17.94 13.87 18.28 16.19 19.5 17.63A0.98 0.98 0 1 1 18.69 18.6C17.06 17.65 14.71 17.72 13.5 16.87zM13.75 16.75C13 17.81 10.89 18.39 9.84 19.62A0.92 0.92 0 1 1 8.85 19.05C9.39 17.52 8.83 15.41 9.37 14.22zM9.51 14.18C8.5 13.69 7.69 11.98 6.54 11.26A0.86 0.86 0 1 1 6.93 10.18C8.28 10.36 9.99 9.58 11.09 9.86zM22.85 10.91A0.97 0.71 -12 1 0 24.74 10.5A0.97 0.71 -12 1 0 22.85 10.91zM17.8 21.31A0.76 0.56 60 1 0 18.55 22.62A0.76 0.56 60 1 0 17.8 21.31z")}
@media (prefers-reduced-motion:no-preference){ .biglogo{overflow:visible} }

/* result screen: score first, share second, the long lists after */
.rows.rows-first{margin-top:0}
.rows.rows-first li:first-child{border-top:0;padding-top:0}
.fkick{position:relative;display:inline-block;font:800 12px/1 var(--display);background:var(--lav);border:2px solid var(--edge);border-radius:999px;padding:5px 10px;margin-bottom:var(--s3)}

/* phones: show the wordmark whenever it fits (it used to be hidden on every phone) */
#app.phone header .brand{width:auto;overflow:visible}
#app.phone .logo{height:24px}
@media (max-width:349px){ #app.phone header .brand{width:23px;overflow:hidden} }
/* non-phone narrow widths: never clip the loop mark */
@media (max-width:460px){ header .brand{width:auto} }

/* phones on their side: compact header, the chart stays put while the controls scroll beside it */
@media (orientation:landscape) and (max-height:520px){
  #app.wide{padding-top:max(6px,env(safe-area-inset-top))}
  #app.wide header{min-height:44px;padding:2px 6px 2px 10px;margin-bottom:8px}
  #app.wide .logo{height:26px}
  #app.wide .iconbtn{width:40px;height:40px}
  #app.wide .chip{height:30px}
  #app.wide #chartWrap{position:sticky;top:8px}
  #app.wide .axkey{display:none}
  #app.wide .qcard{padding:8px 12px}
  #app.wide .qcard h1{font-size:21px}
  #app.wide .qcard p{font-size:12.5px;margin-top:3px}
  #app.wide .play{gap:8px}
}

/* how-to: fine print is collapsed by default */
#how details.more{margin:var(--s3) 0;border:2px dashed var(--surface3);border-radius:var(--r-md);padding:0 12px}
#how details.more summary{cursor:pointer;font:700 14px var(--display);min-height:44px;display:flex;align-items:center}
#how details.more ul{margin:0 0 var(--s3);padding:0;list-style:none}
#how details.more li{padding-left:0;margin:var(--s2) 0;font-size:13.5px;min-height:0}
#how details.more li::before{content:none}
#how details.more summary{list-style:none}
#how details.more summary::-webkit-details-marker{display:none}
#how details.more summary::after{content:"+";margin-left:auto;font:800 18px var(--display)}
#how details.more[open] summary::after{content:"\2212"}

/* pre-launch card */
.card.pre{padding:var(--s5) var(--s4)}
.card.pre h1{font:700 28px/1.15 var(--display);margin:0 0 var(--s3);padding-right:56px}
.card.pre .cd{display:inline-block;text-align:left;margin:0 0 var(--s4);padding:6px 12px;background:var(--butter);border:2px solid var(--edge);border-radius:var(--r-md);color:var(--text);font-size:13px;line-height:1.35}
.card.pre p{margin:0 0 var(--s4);color:var(--text);font-weight:600;line-height:1.5}
.card.pre .cd{padding-bottom:6px}
.card.pre .btn{width:100%;min-height:50px}

/* ---- optional Google sign-in: start bar, result card, sheet section, info note, footer ---- */
.gbtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;border-radius:var(--r-md);border:2px solid #747775;background:#fff;color:#1f1f1f;font:500 14.5px/1 "Roboto","Segoe UI",system-ui,sans-serif;cursor:pointer;box-shadow:var(--sh-sm);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.gbtn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shade)}
.gbtn:disabled{opacity:.7;cursor:progress}
.gbtn[aria-busy="true"]{cursor:progress}
.gbtn svg.gl{width:20px;height:20px;flex:none;display:block}
:root[data-theme="dark"] .gbtn{background:#131314;color:#e3e3e3;border-color:#8e918f}
.acctbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin:0 var(--off) var(--s3) 0;padding:8px 12px;border:var(--bw) solid var(--edge);border-radius:var(--r-md);background:var(--lav);box-shadow:var(--sh-sm)}
.acctbar p{margin:0;flex:1 1 220px;font-weight:600;font-size:14px;line-height:1.3}
.acctbar .gbtn{min-height:40px;box-shadow:none}
#app.phone .acctbar{padding:4px 8px;margin-bottom:6px;gap:8px;flex-wrap:nowrap}
#app.phone .acctbar p{font-size:13px;flex:1 1 auto}
#app.phone .acctbar .long{display:none}
#app.phone .acctbar .gbtn{min-height:44px;padding:0 12px;font-size:13.5px}
.note{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0 var(--off) var(--s3) 0;padding:10px 14px;border:var(--bw) solid var(--edge);border-radius:var(--r-md);background:var(--mint);color:var(--text);box-shadow:var(--sh-sm);font-weight:700}
.note p{margin:0;flex:1 1 220px}
.note .btn{min-height:44px;padding:0 14px;font-size:14px}
.acctcard h2{margin:0 0 var(--s2);font:700 var(--fs-md) var(--display)}
.acctcard p{margin:0 0 var(--s3);font-weight:600;color:var(--text)}
.acctp{margin:var(--s2) 0;font-size:14px;font-weight:600}
.acctp.small{font-size:13px;color:var(--mute)}
.acctrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0}
.btn.danger{border-color:var(--miss-ink);color:var(--miss-ink)}
.foot{text-align:center;margin:var(--s5) 0 var(--s3);font:600 13px var(--display)}
.foot a,.acctp a{color:var(--text);text-underline-offset:3px}

/* ===== phone: tools menu (place box, move, resize, loupe) lives in a popover over the chart so the chart gets the height ===== */
#toolsBtn,#toolsMenu,#aimBtn .lbl{display:none}
#app.phone #toolsBtn{display:inline-flex}
#app.phone #dockPlay{display:none}
#app.phone .dock{padding-top:0}
#app.phone .dock:has(#dockRev:not(.hidden)){padding:10px 0 2px}
#app.phone #toolsMenu{position:absolute;left:8px;right:8px;bottom:8px;z-index:6;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--surface);border:var(--bw) solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:bottom right;transition:opacity .16s,transform .26s cubic-bezier(.34,1.56,.64,1),visibility 0s .26s}
#app.phone #toolsMenu.open{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .26s cubic-bezier(.34,1.56,.64,1)}
#app.phone #toolsMenu .btn{min-height:40px}
#app.phone #toolsMenu #aimBtn{display:inline-flex!important;width:100%;justify-content:flex-start;padding:0 12px;font-size:14px}
#app.phone #toolsMenu #aimBtn .lbl{display:inline}
#app.phone #toolsMenu .nudge{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;flex:none}
#app.phone #toolsMenu .nudge .btn{width:auto;min-width:0}
#app.phone #toolsMenu #dropBtn{grid-column:1/-1}
#app.phone .hint{bottom:8px}
/* while playing, the phone dock is empty (lock-in lives in the tools row): drop it so its grid gap does not eat chart height */
#app.phone .dock:not(:has(#dockRev:not(.hidden))){display:none}
@media (prefers-reduced-motion:reduce){#app.phone #toolsMenu,#app.phone #toolsMenu.open{transition:none}}