/* Shared styles for the tool pages added after the yes or no wheel.
   The base rules are the same as in yes-or-no-wheel/index.html and index.html; the part below
   "form controls" is new and uses only the same tokens. */
:root{
  --a:#1d36c9; --b:#c62f1d; --c:#0d6b4a;
  --paper:#ffffff; --ink:#000000; --pop:#b6f36a;
  --display:'Unbounded',system-ui,sans-serif;
  --text:'Bricolage Grotesque',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--a)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* controls, as on Twelve Notes */
.btn{appearance:none;border:0;background:var(--ink);color:#fff;border-radius:10px;padding:10px 16px;min-height:48px;min-width:48px;font:600 16px/1.2 var(--text);cursor:pointer;touch-action:manipulation}
.btn.primary{background:var(--pop);color:var(--ink)}
.btn:active{transform:translateY(2px)}
.btn[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:800}
.btn:disabled{opacity:.55;cursor:default}
.btn:disabled:active{transform:none}
.btn[aria-disabled="true"]{opacity:.55;cursor:default}
.lnk{appearance:none;background:none;border:0;color:#fff;font:600 16px/1.2 var(--text);text-decoration:underline;text-underline-offset:4px;min-height:48px;min-width:48px;padding:0 6px;cursor:pointer;touch-action:manipulation;text-align:left;display:inline-flex;align-items:center}
:focus{outline:none}
:focus-visible{outline:3px solid var(--pop);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
@media (hover:hover){
  .btn:not(:disabled):not([aria-disabled="true"]):hover{box-shadow:inset 0 0 0 2px var(--pop)}
  .btn.primary:not(:disabled):not([aria-disabled="true"]):hover{box-shadow:inset 0 0 0 2px var(--ink)}
  .btn[aria-pressed="true"]:not(:disabled):hover{box-shadow:inset 0 0 0 2px var(--a)}
  .lnk:hover{text-decoration-thickness:3px;color:var(--pop)}
}
.skip:not(:focus){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:absolute;left:6px;top:6px;z-index:10;background:var(--a);color:#fff;font:600 16px/1.2 var(--text);text-decoration:underline;text-underline-offset:4px;padding:14px 12px;min-height:48px;display:inline-flex;align-items:center}

/* header and tool */
#bar{background:var(--a);color:#fff;display:flex;align-items:center;padding:4px 10px;min-height:56px}
@media (min-width:700px){#bar{padding:4px 14px}}
#tool{background:var(--a);color:#fff;padding:8px 16px 32px}
#tool h1{margin:0 0 12px;font:500 clamp(20px,4vw,30px)/1.1 var(--display);letter-spacing:-.01em;text-align:center}
#tool .stage>h1{margin:0;width:100%}
.stage{display:grid;grid-template-columns:1fr;gap:16px;max-width:1080px;margin:0 auto;justify-items:center}
#wheel{display:block;width:min(100%,560px);aspect-ratio:1/1;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:50%}
#wheel:focus-visible{outline-offset:-6px}
.panel{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
#result{margin:0;min-height:1.1em}
.wheelcol{width:min(100%,560px);display:flex;flex-direction:column;align-items:center;gap:8px}
.wheelcol #wheel{width:100%}
.wheelcol .note{text-align:center;min-height:0}
.group{display:flex;flex-direction:column;gap:4px;align-items:center}
.group>span{font-weight:600}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
@media (min-width:960px){
  .stage{grid-template-columns:minmax(0,560px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 40px;align-items:center;justify-items:stretch}
  #tool .stage>h1{grid-column:2;grid-row:1;align-self:end;text-align:left;margin:0 0 12px}
  #wheel,.wheelcol{grid-column:1;grid-row:1/span 2;justify-self:center}
  .panel{grid-column:2;grid-row:2}
  .panel{max-width:none;align-items:flex-start;text-align:left}
  .group{align-items:flex-start}
  .row{justify-content:flex-start}
  #tool>h1{text-align:left;max-width:1080px;margin:0 auto 12px}
}

/* text */
main.doc{background:var(--paper);color:var(--ink)}
.doc-in{max-width:680px;margin:0 auto;padding:40px 16px 72px}
.doc h2{margin:40px 0 12px;font:800 clamp(28px,5vw,38px)/1.05 var(--display);letter-spacing:-.02em}
.doc h2:first-child{margin-top:0}
.doc h3{margin:24px 0 6px;font:500 22px/1.25 var(--display);letter-spacing:-.01em}
.doc p{margin:0 0 12px;font-size:17px}
.doc ul{margin:0 0 12px;padding:0;list-style:none;font-size:17px}
.doc li{margin:0 0 8px}
.doc .tl li{position:relative;margin:0;padding:10px 0}
.doc .tl a{display:inline;padding:0;min-height:0}
.doc .tl a::after{content:"";position:absolute;inset:0}
.doc .tl .d{display:block}
.doc a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:10px 0;min-height:44px}
.doc a:focus-visible{outline:3px solid var(--a);box-shadow:none}
.sitefoot{margin-top:40px;display:flex;flex-wrap:wrap;gap:0 28px;font-size:16px;line-height:1.4}
.sitefoot a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;line-height:1.4}

/* form controls (shared by the new tools) */
.work{max-width:1080px;margin:0 auto}
.cols{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:960px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}}
.fields{display:flex;flex-direction:column;gap:14px;align-items:stretch;min-width:0}
.fields .group{align-items:flex-start}
.fields .row{justify-content:flex-start}
.f{display:flex;flex-direction:column;gap:6px}
.f>label,.f>span,.lab{font-weight:600}
.hint{margin:0;font-size:16px;line-height:1.4}
.in{display:block;width:100%;background:var(--paper);color:var(--ink);border:0;border-radius:10px;padding:12px 14px;min-height:48px;font:500 17px/1.4 var(--text)}
.in::placeholder{color:#595959;opacity:1}
textarea.in{resize:vertical;min-height:180px}
input.num{width:96px}
.chk{display:flex;align-items:center;gap:12px;min-height:48px;font-weight:600;cursor:pointer}
.chk input{width:24px;height:24px;margin:0;accent-color:var(--pop);flex:none}
.note{margin:0;min-height:1.4em;font-weight:600}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.out{min-width:0}
.bigtxt{margin:0;font:800 clamp(28px,6vw,56px)/1.08 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.bigtxt:empty:not(.spinning)::before{content:attr(data-idle);font:600 18px/1.4 var(--text);letter-spacing:0}
.fade{animation:fade .35s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* coloured blocks, from the tokens */
.c0{background:var(--paper);color:var(--ink)}
.c1{background:var(--pop);color:var(--ink)}
.c2{background:var(--c);color:#fff}
.c3{background:var(--b);color:#fff}

/* letter tiles */
.tiles{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.lt{display:flex;align-items:center;justify-content:center;width:clamp(64px,14vw,112px);aspect-ratio:1/1;border-radius:10px;font:800 clamp(36px,8vw,64px)/1 var(--display)}
.lt.land{animation:land .3s ease-out}
@keyframes land{0%{transform:translateY(-10px) scale(1.12)}100%{transform:none}}

/* teams, dealt out */
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:0;padding:0;list-style:none;align-items:start}
.team{padding:14px 16px;border-radius:10px;min-width:0}
.team h2{margin:0 0 8px;font:700 20px/1.2 var(--display);letter-spacing:-.01em}
.team ul{margin:0;padding:0;list-style:none}
.team li{padding:7px 0;border-top:2px solid currentColor;overflow-wrap:anywhere}
.dealt .team>ul>li,.dealt>li{animation:deal .28s ease-out both;animation-delay:var(--d,0s)}
@keyframes deal{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* plain numbered or bulleted lists inside the blue block */
.olist{margin:0;padding:0 0 0 2em;font-size:18px;line-height:1.4}
.olist li{padding:4px 0;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  .btn:active{transform:none}
  .fade,.lt.land,.dealt .team>ul>li,.dealt>li{animation:none}
}

/* ad band (same rules as Twelve Notes). Hidden unless ads.js adds html.ads-on; the band sits below the tool block and in normal flow. */
:root{--adh:146px}
@media (min-width:800px){:root{--adh:138px}}
.adband{display:none}
html.ads-on .adband{display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);min-height:var(--adh);padding:10px 12px 12px;border-top:2px solid var(--ink)}
.adslot{display:flex;flex-direction:column;align-items:center;gap:6px}
.adslot .adlabel{font:400 12px/1.4 var(--text);letter-spacing:.02em;color:var(--ink)}
.adslot ins,.adslot .adtest{display:block;width:320px;height:100px}
.adslot .adtest{display:flex;align-items:center;justify-content:center;border:1px dashed var(--ink);font:600 14px/1.4 var(--text)}
@media (min-width:800px){.adslot ins,.adslot .adtest{width:728px;height:90px}}
@media (max-width:340px){.adslot ins,.adslot .adtest{width:300px;height:100px}}