/* =====================================================================
   THE TOOLS. Loaded by the generator rooms only (after room.css).
   A generator page has no site nav: one small "Tools" link back, then the room.
   ===================================================================== */
.toolsback{margin-bottom:var(--s-2)}
.back{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;font-family:var(--mono);font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.back .arr{transform:rotate(180deg)}
.back:hover span{text-decoration:underline;text-underline-offset:.2em}
.local{margin-top:var(--s-2)}
.tool .rt{margin-top:0}
.tool noscript .reserved{margin-top:var(--s-4)}

/* step strip: jump links to each step of the Foundry, in-page only */
.stepstrip{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-2);margin-top:var(--s-4)}
.stepstrip a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-3);border:1.5px solid var(--line-strong);border-radius:2px;font-family:var(--mono);font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.stepstrip a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.stepstrip .n{color:inherit}

.n{display:inline-grid;place-items:center;min-width:1.9em;border:1px solid var(--line-strong);padding:1px 5px;line-height:1.4;color:var(--ink);flex:none}
.lbl .n{font-size:var(--fs-micro)}

/* the Foundry grid: steps down the left, the glyph kept in view on the right.
   On a phone the glyph sits right under Reduce, so the Draw controls are under it. */
.fgrid{display:grid;gap:var(--s-5);margin-top:var(--s-5);grid-template-columns:minmax(0,1fr);grid-template-areas:"write" "reduce" "face" "draw" "charge" "release"}
.a-write{grid-area:write}.a-reduce{grid-area:reduce}.a-face{grid-area:face}.a-draw{grid-area:draw}.a-charge{grid-area:charge}.a-release{grid-area:release}
.step{display:grid;gap:var(--s-3);align-content:start;scroll-margin-top:var(--s-4)}
.step>*{margin:0}
.fin{display:block;width:100%;min-height:52px;padding:0 14px;font-family:var(--mono);font-weight:700;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:2px}
.fin::placeholder{color:var(--soft);text-transform:none;opacity:1}
.sel{display:block;width:100%;min-height:44px;padding:0 10px;font-family:var(--mono);font-weight:700;font-size:.8125rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:2px}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ac{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.check{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;cursor:pointer;font-size:var(--fs-meta)}
.check input{width:20px;height:20px;accent-color:#fff;margin:0}
.flag{border-left:3px solid var(--ink);padding-left:var(--s-3);display:grid;gap:var(--s-2)}
.flag p{margin:0}
.flag q{font-family:var(--mono);font-weight:700;quotes:none}
.cardnote{border:1.5px dashed var(--line-strong);padding:var(--s-3);font-size:var(--fs-meta);margin:0}

/* reduce: the cut, made visible */
.redline{display:flex;flex-wrap:wrap;gap:2px 0;min-height:2.2em;font-family:var(--mono);font-weight:700;font-size:1.25rem;letter-spacing:.12em;line-height:1.5}
.redline .gap{width:.8em}
.rl{display:inline-block;padding:0 .08em;position:relative;transition:color .25s var(--ease)}
.rl.x{color:var(--soft);text-decoration:line-through;text-decoration-thickness:2px}
.spineout{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3)}
.spine-l{font-family:var(--mono);font-weight:700;font-size:var(--fs-h3);letter-spacing:.22em;line-height:1.5;overflow-wrap:anywhere;color:var(--glyph)}
.spine-l.empty{font-size:.8125rem;letter-spacing:.04em;color:var(--soft)}

/* the glyph face */
.face{border:1.5px solid var(--line-strong);background:var(--surface);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);align-self:start}
.glyph{display:block;width:min(100%,24rem);min-width:14rem;margin-inline:auto;height:auto;aspect-ratio:1/1;overflow:visible;touch-action:none}
.w-ring{fill:none;stroke:var(--rule);stroke-width:1.1}
.wl{font-family:var(--mono);font-weight:700;font-size:13px;fill:var(--soft)}
.wl.on{fill:var(--glyph);stroke:var(--halo);stroke-width:6;paint-order:stroke;stroke-linejoin:round}
.wl.on.start{fill:var(--on-yellow);stroke:none}
.art .w-path,.artwrap .w-path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:var(--glyph);stroke-width:2.2;vector-effect:non-scaling-stroke}
.w-start{fill:var(--glyph)}
.w-end{fill:none;stroke:var(--glyph);stroke-width:2}
.w-path,.w-start,.w-end{transition:stroke 1.2s linear,fill 1.2s linear}
.mono-l .w-path{stroke-width:2.6}
.mono-l.sel .w-path{stroke-width:4}
.mono-l{cursor:grab}
.mono-l:focus-visible{outline:none}
.mono-l:focus-visible{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff)}
.mono-l:focus-visible .w-path{stroke:var(--ink);stroke-width:5;transition:none}
.mono-l .hit{fill:none;stroke:transparent;stroke-width:22;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}
.gbox{position:relative}
.burnline{position:absolute;left:0;right:0;top:100%;height:3px;opacity:0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 10px)}
.engines{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.mono-ctl{display:grid;gap:var(--s-2);border-top:1px solid var(--rule);padding-top:var(--s-3)}
.mono-ctl .lbl{margin:0}

/* charge: the ring fills over the chosen time, the glyph in the middle */
.chargebox{display:grid;gap:var(--s-3);justify-items:center}
.chargectl{display:grid;gap:var(--s-3);grid-template-columns:1fr 1fr;align-items:end;width:100%}
.chargectl .btn{grid-column:1/-1}
.ringwrap{width:min(100%,17rem)}
.ringsvg{display:block;width:100%;height:auto;aspect-ratio:1/1;overflow:visible}
.w-hold{fill:none;stroke:var(--ink);stroke-width:3}
.pacer{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.2;transform-box:fill-box;transform-origin:center;transform:scale(.55)}
.pacer.on{stroke:var(--ink)}
.phase{font-family:var(--disp);font-size:var(--fs-h3);letter-spacing:.04em;text-transform:uppercase;min-height:1.2em;text-align:center}
.ctime{font-family:var(--mono);font-weight:700;font-size:.8125rem;text-align:center;min-height:1.5em;margin:0}

/* the receipt: torn edge, a degree off true so it reads pressed and not placed */
.rc{position:relative;z-index:2;width:min(100%,21rem);background:var(--ink);color:var(--paper);font-family:var(--mono);font-weight:700;font-size:.8125rem;line-height:1.5;padding:var(--s-4) var(--s-4) calc(var(--s-4) + 14px);transform:rotate(-1deg);transform-origin:top left;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.rc:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;box-shadow:inset 0 0 0 3px var(--paper)}
.rc h3{font-family:var(--disp);font-weight:400;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.rc hr{border:0;border-top:2px dashed currentColor;margin:var(--s-3) 0}
.rc dl{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--s-1) var(--s-3);align-items:center}
.rc dt{font-weight:700;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase}
.rc .redact{display:block;height:1.15em;background:var(--paper)}
.rc input[type="date"]{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1.5px solid currentColor;min-height:44px;width:100%;color-scheme:light}
.rc .close{margin-block:var(--s-2) var(--s-3)}
.rc .row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.rc a{color:inherit}
.rc .btn{background:var(--ink);color:var(--paper);border-color:var(--paper)}
.rc .btn:hover,.rc .btn--fill{background:var(--paper);color:var(--ink)}
.rc .btn--fill:hover{background:var(--ink);color:var(--paper)}
.rc :focus-visible{outline-color:var(--paper)}

/* release: colour drains, then the glyph burns off the screen */
.tool.drain .w-path,.tool.drain .w-end{stroke:#6e6e6e}
.tool.drain .w-start{fill:#6e6e6e}
.tool.drain .wl.on{fill:#6e6e6e}
.tool.drain .spine-l{color:var(--soft);transition:color 1.2s linear}
.tool.burn .glyph,.tool.burn .shoalgrid{animation:burn 1.5s steps(30,end) forwards}
.tool.burn .burnline{animation:burnedge 1.5s steps(30,end) forwards}
.tool.burn .artwrap{animation:fade 1.5s steps(10,end) forwards}
.tool.gone .glyph,.tool.gone .shoalgrid{clip-path:inset(0 0 100% 0)}
@keyframes burn{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes burnedge{0%{top:100%;opacity:1}99%{opacity:1}100%{top:0;opacity:0}}
@keyframes fade{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .rc.print{animation:feed .9s steps(16,end) both}
  @keyframes feed{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
}
@media (prefers-reduced-motion:reduce){.pacer{transition:none!important}.w-path,.w-start,.w-end{transition:none}}

/* shoal */
.stack{display:grid;gap:var(--s-6);margin-top:var(--s-5);max-width:46rem}
.intents{display:grid;gap:var(--s-2)}
.irow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);align-items:end}
.irow .lbl{grid-column:1/-1;margin-bottom:0}
.shoalgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--s-3)}
.sg{display:block;width:100%;height:auto;aspect-ratio:1/1;border:1.5px solid var(--line-strong);background:var(--surface);padding:var(--s-2);overflow:visible}

/* servitor */
.wiz{display:grid;gap:var(--s-4);max-width:40rem;margin-top:var(--s-5)}
.prog{display:flex;gap:var(--s-1);align-items:center}
.prog i{flex:1;height:4px;background:var(--rule)}
.prog i.on{background:var(--ink)}
.panel{display:grid;gap:var(--s-3)}
.panel h2{font-family:var(--disp);font-weight:400;font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.ta{display:block;width:100%;min-height:7rem;padding:12px 14px;font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;resize:vertical}
.warn{border-left:3px solid var(--ink);padding-left:var(--s-3);margin:0}
.err{font-family:var(--mono);font-weight:700;font-size:.8125rem}
.radio{display:flex;align-items:flex-start;gap:var(--s-2);min-height:44px;cursor:pointer}
.radio input{width:20px;height:20px;margin:.35rem 0 0;accent-color:#fff;flex:none}
.wizbar{display:flex;gap:var(--s-2);flex-wrap:wrap}
.charter{background:var(--ink);color:var(--paper);padding:var(--s-5);display:grid;gap:var(--s-3);max-width:34rem;transform:rotate(.4deg);border-right:3px solid var(--ink);box-shadow:0 0 0 1px var(--line-strong)}
.charter h2{font-family:var(--disp);font-weight:400;font-size:var(--fs-h2);text-transform:uppercase;line-height:1.05}
.charter .csig{display:block;width:9rem;height:auto;aspect-ratio:1/1;justify-self:end}
.charter .csig .w-path{stroke:#000;stroke-width:2.4}
.charter .csig .w-start{fill:#000}.charter .csig .w-end{stroke:#000}
.charter dl{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--s-2) var(--s-3)}
.charter dt{font-family:var(--mono);font-weight:700;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;padding-top:.2rem}
.charter dd{overflow-wrap:anywhere;white-space:pre-line}
.charter hr{border:0;border-top:2px dashed currentColor;margin:0}

/* deck */
.deckctl{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.spread{display:grid;gap:var(--s-5);margin-top:var(--s-5);grid-template-columns:minmax(0,1fr)}
.card{position:relative;border:1px solid var(--ink);border-right-width:3px;border-bottom-width:3px;background:var(--surface);padding:var(--s-5) var(--s-4) var(--s-4);display:grid;gap:var(--s-3);align-content:start;overflow:hidden}
.card:nth-child(odd){transform:rotate(-.4deg)}.card:nth-child(even){transform:rotate(.35deg)}
/* halftone in the corner: a repeating dot gradient, zero image weight, never under text */
.card::after{content:"";position:absolute;right:0;top:0;width:5rem;height:5rem;pointer-events:none;background:radial-gradient(circle,var(--rule) 1.2px,transparent 1.6px) 0 0/7px 7px;-webkit-mask:linear-gradient(225deg,#000,transparent 70%);mask:linear-gradient(225deg,#000,transparent 70%)}
.card .role{font-family:var(--mono);font-weight:700;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.card h2{font-family:var(--disp);font-weight:400;font-size:var(--fs-h2);text-transform:uppercase;line-height:1.05;position:relative}
.card h3{font-family:var(--mono);font-weight:700;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;margin-top:var(--s-2)}
.card p{max-width:48ch}
.deckmeta{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

/* log */
.logsum{margin-top:var(--s-4);font-family:var(--mono);font-weight:700;font-size:.8125rem}
.logbar{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4)}
.loglist{margin-top:var(--s-5);border-top:3px solid var(--ink)}
.logrow{display:grid;gap:var(--s-2) var(--s-4);grid-template-columns:minmax(0,1fr);padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
.logrow .meta{font-family:var(--mono);font-weight:700;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.logrow .t{font-weight:800;font-size:var(--fs-h3);line-height:1.15}
.logrow .due{display:inline-block;background:var(--ink);color:var(--paper);padding:1px 6px;margin-left:var(--s-2)}
.logrow .marks{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.logmsg{min-height:1.5em;margin-top:var(--s-3);font-family:var(--mono);font-weight:700;font-size:.8125rem}

@media (min-width:46rem){
  .fgrid{grid-template-columns:minmax(0,1fr) clamp(19rem,40vw,28rem);column-gap:var(--s-7);row-gap:var(--s-6);grid-template-areas:"write face" "reduce face" "draw face" "charge face" "release face";grid-template-rows:auto auto auto auto 1fr}
  .a-face{position:sticky;top:var(--s-4);padding:var(--s-5)}
  .spread.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logrow{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}

/* print: only the glyph (Foundry) or only the card (Bench), black on white */
@media print{
  html,body,.page{background:#fff!important;color:#000!important}
  .skip,.toolsback,.rt,.intro,.ac,.logmsg,.local,.stepstrip,.fgrid>.step,.rfoot,#live,.wiz>.prog,.wizbar,.panel,.deckctl,noscript{display:none!important}
  .tool .wrap{padding:0}
  .face{border:0;background:#fff;padding:0;position:static}
  .face .frame,.face figcaption,.burnline{display:none}
  .face .w-path,.face .w-end{stroke:#000!important}.face .w-start{fill:#000!important}
  .face{display:block;text-align:center}
  .glyph{width:100%;max-width:16cm;margin-inline:auto}
  .charter{transform:none;box-shadow:none;border:2px solid #000;background:#fff;color:#000}
  .charter .csig .w-path{stroke:#000}
}

.filebtn{cursor:pointer}
.sr:focus-visible+.btn{outline:3px solid var(--ink);outline-offset:2px}
.share{display:grid;gap:var(--s-2);max-width:32rem;margin-top:var(--s-5)}
.share .row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.share input{flex:1 1 12rem;min-height:44px;padding:0 10px;font-family:var(--mono);font-weight:700;font-size:.8125rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:2px;min-width:0}
.charter .kick{color:inherit}
.chbar{margin-top:var(--s-4)}
fieldset.nofs{border:0;padding:0;margin:0;min-width:0}
fieldset.nofs legend{padding:0}