/* Chrome values copied from Blather 12449798 landing/prototype/index.html lines 12-196; palette, type, shadow and ease
   from the investor deck (carcinize-corp/modyl-pitch angels/deck/style.css at c00ecb0), the one token source. */
/* Geist sans is @fontsource-variable/geist 5.3.0 (OFL, geist-LICENSE.txt). */
@font-face{font-family:Geist;src:url('./geist-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:'Geist Mono';src:url('./geist-mono-latin-500-normal.woff2') format('woff2');font-weight:400 500;font-display:block}
/* The light ground is the source. On a dark system ground.js replaces every colour token below with tone.js's dark
   counterpart, so the page and the plates come from one palette. Monochrome with one lit accent: --settled means a
   person kept or settled this, --risk means it is at risk, and each pairs with a shape cue. The tones group things.
   --ink-3 is darker than the deck's #8b8b93 (3.38:1 on paper) so small grey text meets WCAG AA (4.69:1 on --tone-3);
   the surface episode measures it. The floor is --tone-1 and plates are --paper. */
:root{--ink:#18181b;--ink-2:#52525b;--ink-3:#68686f;--rule:#e4e4e7;--paper:#fff;
  --settled:#2f5fc4;--settled-wash:#eef2fb;--risk:#b42318;
  --tone-1:#fafafa;--tone-2:#f4f4f5;--tone-3:#ececee;--tone-4:#e2e2e5;
  --halo:0 18px 32px -20px rgba(24,24,27,.28);--ease:cubic-bezier(.22,1,.36,1);
  --mono:'Geist Mono',ui-monospace,monospace;--label:Geist,ui-sans-serif,system-ui,sans-serif}
/* Paints dark paper before ground.js runs, so a dark system never flashes the light ground. It is tone('#fafafa'). */
@media (prefers-color-scheme:dark){html,body{background:#161616}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--tone-1);overflow:hidden}
body{font-family:var(--label);color:var(--ink);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* Titles in the deck's hand: semibold, tight, balanced. */
h1,h2{font-weight:600;letter-spacing:-.035em;text-wrap:balance}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--settled);outline-offset:3px}
[hidden]{display:none!important}
.mono{font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
[data-icon] svg{width:100%;height:100%;fill:currentColor;display:block}

/* Help and reports open in the support drawer, a 440 px column the telemetry include draws at the right edge. On a wide
   screen the ground gives it that width rather than lying under it; ground.js redraws from #stage's own size. On a
   phone the drawer covers the screen, so the stage keeps its width. */
html{--stage-w:100vw}
@media (min-width:721px){html[data-support-drawer=open]{--stage-w:calc(100vw - var(--support-drawer,0px))}}
#stage{position:relative;width:var(--stage-w);height:100dvh;overflow:clip;background:var(--tone-1);isolation:isolate;transition:width .45s var(--ease)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:filter .45s var(--ease)}
#gl.pen{cursor:crosshair}#gl.eraser{cursor:cell}
#stage.past #gl{filter:saturate(.3) contrast(.94)}
#ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#ink path{fill:none;stroke:var(--risk);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* A question stands beside the plate it names, flat and at reading size, answered in place; a presence mark sits on the
   plate's far corner. ground.js places both from the plate's projected top every frame. */
#on-plates{position:absolute;inset:0;pointer-events:none;z-index:7}
#on-plates>*{position:absolute;left:0;top:0;pointer-events:auto;margin:0}
.ask{width:min(288px,calc(100% - 16px));padding:14px 16px 16px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);transition:opacity .2s}
.ask .who{margin:0 0 6px;font-size:10px;color:var(--risk)}
.ask[data-mine=true] .who{color:var(--ink-3)}
.ask:not([data-docked]) .about{display:none}
.ask[data-docked]{width:calc(100% - 24px)}
.ask .q{margin:0 0 12px;font-size:16px;line-height:1.35;font-weight:500;letter-spacing:-.005em}
.ask .answers{display:flex;flex-wrap:wrap;gap:8px}
.ask .answers button{min-height:44px;min-width:44px;padding:0 14px;font-size:15px;box-shadow:0 0 0 1px var(--rule) inset;transition:box-shadow .2s,background .2s}
.ask .answers button:hover{box-shadow:0 0 0 1px var(--ink-2) inset;background:var(--tone-2)}
.ask .answers button[type=submit]{color:var(--paper);background:var(--ink);box-shadow:none}
.ask .answers input{flex:1;min-width:0;height:44px;padding:0 12px;border:0;font-size:16px;background:var(--tone-2);box-shadow:0 0 0 1px var(--rule) inset}
.ask .wait{margin:0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.ask[aria-busy=true]{opacity:.6;pointer-events:none}
/* A finding reads as what Modyl noticed, the answer it bears on, then the label. Its words are a lead, so they never
   take the signal colour, and a long one stops at three lines. */
.finding .who{color:var(--ink-3)}
.finding .q{margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.finding .statement,.finding .bears{margin:0 0 6px;font-size:14px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.finding .bears{padding-left:10px;box-shadow:inset 2px 0 0 var(--settled)}
/* A raised hand's decisions read whole: the person answers what they say, never a cut of it. */
.finding.hand :is(.statement,.bears){display:block}
.finding .bears.then{box-shadow:inset 2px 0 0 var(--rule);color:var(--ink-3)}
.finding .from{margin:0 0 12px;font-size:10px;color:var(--ink-3)}
.finding .from .opens{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--settled);background:none;border:0;padding:6px 0;margin:-6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.finding .answers button[aria-pressed=true]{color:var(--paper);background:var(--ink);box-shadow:none}
/* A raised hand asks for a decision first. Replace and Keep mine answer it as its room does; whether it was worth
   raising follows, smaller. */
.finding .decide{margin:0 0 10px}
.finding .decide .chosen{margin:0 0 8px;font-size:15px;line-height:1.4;font-weight:500;color:var(--ink)}
.finding .decide .answers button.adopt{color:var(--paper);background:var(--ink);box-shadow:none}
.finding .decide .answers button:disabled{opacity:.45;pointer-events:none}
.finding .decide .answers.why{align-items:center;margin-top:8px}
.finding .decide .answers.why span{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.finding .decide .answers button.room{padding:0 6px;box-shadow:none;color:var(--settled)}
.finding .decide .answers button.room:hover{background:var(--tone-2)}
.finding .worth-q{margin:0 0 4px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.finding .answers.worth{gap:6px}
.finding .answers.worth button{min-height:36px;padding:0 10px;font-size:13.5px;color:var(--ink-2)}
.finding .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0;font-size:13px;line-height:1.35;color:var(--ink-2)}
.finding .foot .next{flex:none;min-height:44px;padding:0 14px;font-size:15px;color:var(--settled)}
.finding .foot .next:hover{background:var(--tone-2)}
.finding .tab{display:none}
.finding[data-folded]{padding:0}
.finding[data-folded]>:not(.tab){display:none}
.finding[data-folded] .tab{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0 16px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.finding[data-folded] .tab .caret{width:14px;height:14px;fill:currentColor;transform:rotate(-90deg)}
.finding .decide .aside{margin:0 0 8px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.finding .decide .aside summary{display:inline-flex;align-items:center;min-height:32px;cursor:pointer;color:var(--settled)}
.finding .decide .aside p{margin:0;padding-left:10px;box-shadow:inset 2px 0 0 var(--rule);text-decoration:line-through;text-decoration-color:var(--rule)}
.labels .labelled{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.labels .labelled button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;padding:6px 10px;text-align:left;box-shadow:inset 2px 0 0 var(--rule);background:none}
.labels .labelled button:hover,.labels .labelled button:focus-visible{background:var(--tone-2)}
.labels .labelled .what{font-size:15px;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.labels .labelled .said{font-size:10px;color:var(--settled);text-transform:uppercase;letter-spacing:.04em}
.labels .labelled .relates{font-size:13px;line-height:1.3;color:var(--ink-2)}
.labels .labelled .relates::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;background:var(--settled);vertical-align:1px}
.labels .labelled .relates.none{color:var(--ink-3)}
.labels .labelled .relates.none::before{background:none;box-shadow:inset 0 0 0 1px var(--ink-3)}
.labels .foot .next{padding:0 10px}
.rule .who{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
/* Square status marks, as the deck's tags: half filled for a draft that is not on, filled while on, hollow when it
   stops nothing. */
.rule .who i{flex:none;width:8px;height:8px;box-shadow:inset 0 0 0 1px var(--ink);background:linear-gradient(to top,var(--ink) 50%,transparent 50%)}
.rule[data-state=confirmed] .who{color:var(--ink)}
.rule[data-state=confirmed] .who i{background:var(--ink)}
.rule:not([data-state=draft],[data-state=confirmed]) .who{color:var(--ink-3)}
.rule:not([data-state=draft],[data-state=confirmed]) .who i{background:none;box-shadow:inset 0 0 0 1px var(--ink-3)}
.rule .q{margin-bottom:4px;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
/* A rule that stops nothing keeps its words for reference, quieter than a rule that is on. */
.rule:is([data-state=off],[data-state=refused],[data-state=rejected],[data-state=superseded]) :is(.q,.examples li){color:var(--ink-3)}
.rule .bears{margin:0 0 12px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.rule .bears{padding-left:10px;box-shadow:inset 1px 0 0 var(--ink-3)}
.rule .reach{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:auto auto;column-gap:20px;margin:0 0 12px}
.ask[data-docked].rule .reach{grid-template-columns:1fr;grid-auto-flow:row;margin-bottom:4px}
.ask[data-docked].rule .examples{margin-bottom:8px}
.ask[data-docked].rule .examples li{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:12px}
.ask[data-docked].rule .examples button{flex:none;min-height:44px}
/* Deck labels: Geist 500 at 12 px, sentence case, tabular figures, over one ink hairline. */
.rule .reach-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:7px;margin:0;padding:0 0 6px;font-size:12px;font-weight:500;color:var(--ink-2);box-shadow:inset 0 -1px 0 var(--ink)}
.rule .reach-head i{flex:none;width:9px;height:9px;box-shadow:inset 0 0 0 1.25px var(--ink);
  background:linear-gradient(to top right,transparent calc(50% - .7px),var(--ink) calc(50% - .7px) calc(50% + .7px),transparent calc(50% + .7px))}
.rule .reach-head svg{flex:none;width:11px;height:11px;fill:var(--ink)}
.rule .examples{margin:0 0 8px;padding:0;list-style:none;display:flex;flex-direction:column}
.rule .examples li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 0;font-size:14px;line-height:1.35;box-shadow:inset 0 -1px 0 var(--rule)}
.rule .examples button{min-height:32px;padding:0;font-size:13px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.rule .examples button:hover{text-decoration-color:var(--ink)}
.rule .examples em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.rule .reach-head .turn{min-height:32px;margin-left:auto;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.rule .exact{display:grid;grid-template-columns:auto 1fr;margin:0 0 12px;font-size:14px;line-height:1.35;border-top:1px solid var(--ink)}
.rule .exact :is(dt,dd){margin:0;padding:8px 0;border-bottom:1px solid var(--rule)}
.rule .exact dt{padding-right:16px;font-size:12px;font-weight:500;color:var(--ink-3)}
.rule .exact dd{overflow-wrap:anywhere;color:var(--ink)}
.rule .exact dd.pattern{font:13px/1.35 var(--mono)}
.rule .add{margin:0 0 10px}
.rule .add input{flex-basis:100%}
.rule .acts{align-items:center}
.rule .acts :is(.on,.off:not(.next)){color:var(--paper);background:var(--ink);box-shadow:none}
/* The kept act is the one lit thing: the person's yes, marked with the settled square. */
.rule .kept{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font-size:14px;line-height:1.4;color:var(--ink)}
.rule[data-state=confirmed] .kept{font-weight:500}
.rule[data-state=confirmed] .kept::before{content:'';flex:none;width:8px;height:8px;background:var(--settled)}
/* How the settings read the yes: hatched while unread, solid once read. It builds after the yes, never spins. */
.rule .reading{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.rule .reading::before{content:'';flex:none;width:8px;height:8px;box-shadow:inset 0 0 0 1px var(--ink-3);background:var(--ink-3)}
.rule .reading.unread::before{background:repeating-linear-gradient(135deg,var(--ink-3) 0 1px,transparent 1px 3px)}
.rule .reading.against{color:var(--ink)}
.rule .reading.against::before{box-shadow:none;background:var(--ink)}
.rule .acts .done{margin-left:auto}
.rule .acts .next{min-height:44px;padding:0 14px;font-size:15px;font-weight:500;color:var(--ink);box-shadow:none}
.rule .acts .next:hover{background:var(--tone-2)}
.ask.rule:not([data-docked]){width:min(420px,calc(100% - 16px))}
.here{display:flex;gap:4px;pointer-events:none!important}
.here span{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 3px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);font-size:12px;font-weight:500;white-space:nowrap}
.here i{width:22px;height:22px;display:grid;place-items:center;background:var(--settled);color:#fff;font:600 9.5px Geist,sans-serif;font-style:normal;letter-spacing:.02em}
.here i svg{width:13px;height:13px;fill:currentColor}
.here b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


#brand{position:absolute;left:40px;top:32px;display:flex;align-items:center}
#brand img{display:block;height:22px;width:auto}
[data-theme=dark] #brand img{filter:invert(1) brightness(.92)}

/* The tallies are the timeline's key: each count sits after the tick that marks it on the rail above. */
#readout{position:absolute;left:12px;bottom:92px;font-size:10px;color:var(--ink-3);display:flex;gap:16px;z-index:6;pointer-events:none;text-shadow:0 0 3px var(--tone-1),0 0 6px var(--tone-1)}
#readout span{display:flex;align-items:center;gap:6px}
#readout span::before{content:"";width:9px;height:1.5px;background:var(--ink-3)}
#readout .changed::before{background:var(--risk)}
#readout .guessed::before{background:repeating-linear-gradient(90deg,var(--ink-3) 0 2px,transparent 2px 4px)}
#readout b{color:var(--ink);font-weight:500;display:inline-block;min-width:1ch}
#as-known{position:absolute;left:40px;top:110px;font-size:12px;color:var(--settled);border-left:1px solid var(--rule);padding:12px 16px}
#message{position:absolute;right:48px;bottom:200px;width:295px;padding:20px 24px;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--halo);font-size:16px;line-height:1.5;animation:arrive .7s var(--ease)}
#message .mono{font-size:10px;color:var(--ink-3);margin-bottom:10px}
#message .act:not([hidden]){display:flex;align-items:center;justify-content:center;height:44px;margin-top:16px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;text-decoration:none}
#message .act:hover{background:var(--settled)}
@keyframes arrive{from{opacity:0;transform:translateX(38px)}}

/* The composer keeps clear of the timeline legend on its left and the view toolbar on its right, so it narrows with the stage. */
#dock{position:absolute;left:50%;bottom:calc(52px + var(--keyboard,0px));width:min(600px,calc(100% - 528px));transform:translateX(-50%);text-align:center;transition:left .45s var(--ease)}
/* The ground slides left of a lifted room (ground.js aim), and the field goes with it. */
@media (min-width:721px){#stage.room-open #dock{left:calc(50% - 206px)}}
#caption:empty{min-height:0;margin:0}
/* A lifted sheet or an open canvas stands over the ground, so the ground's own controls step back the same way under
   either: the caption is still announced but not drawn, and the views, timeline and its legend are not drawn half under it. */
:is(body:has(#lift .well.lifted) #stage,#stage.board-open) #caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
:is(body:has(#lift .well.lifted) #stage,#stage.board-open) :is(#views,#time,#readout,#dial){visibility:hidden}
/* A texted link's own card (signed out, refused) is no ground yet, so it has no tallies to read. */
#stage[data-room-link]:not([data-room-link=opened]) :is(#readout,#empty,#opening){visibility:hidden}
#caption{font-size:18px;font-weight:400;letter-spacing:-.01em;min-height:26px;margin-bottom:16px;color:var(--ink);line-height:1.3;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-feature-settings:"cv11" 1}
#caption.yours{color:var(--ink-2)}
#caption.folded{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:10px;-webkit-line-clamp:none}
#caption .said-gist{color:var(--ink-2);font-style:italic}
#caption .said-gist::before{content:'You sent ';font-style:normal;color:var(--ink-3)}
#caption .said-cut{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#caption .said-more{font:500 12px/1.4 Geist,system-ui,sans-serif;color:var(--settled);white-space:nowrap}
#caption.whole{display:block;-webkit-line-clamp:none;max-height:min(62vh,560px);overflow:auto;white-space:pre-wrap;text-align:left;font-size:15px;background:var(--tone-1);padding:4px 8px}
#caption.whole .said-more{display:block;margin:8px auto 0}
#dock:has(> #caption.whole) :is(#reply,#reply-more){display:none}
/* A call's caption: the person's words on one line, lighter while the recognizer may still change them, then
   Modyl's answer. Over a lifted plate or an open board it stands above the composer, so the call is never invisible. */
/* Its words, and the person's typed words, sit on paper the width of the words, so a plate's edge or a link line
   behind them never runs through them. */
#caption:is(.call,:has(> .heard,> .said)){display:block;-webkit-line-clamp:none}
#caption:is(.call,.yours,:has(> .heard,> .said)):not(:empty){width:fit-content;max-width:100%;margin-inline:auto;padding:2px 8px;background:var(--tone-1)}
#caption .heard{display:block;color:var(--ink-2);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#caption .heard.interim{color:var(--ink-3);font-style:italic}
#caption .said{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--ink)}
:is(body:has(#lift .well.lifted) #stage,#stage.board-open) #caption.call:not(:empty){width:auto;height:auto;overflow:hidden;clip-path:none;left:0;right:0;bottom:calc(100% + 8px);margin:0;padding:10px 14px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);font-size:15px;text-align:left}
#dock:has(> #caption.call:not(:empty),button[data-tip]:is(:hover,:focus-visible)){z-index:12}
/* Modyl's typed answer sits between the person's words and the composer. It shows what fits, and the rest opens in place. */
#reply{text-align:left;font-size:15px;line-height:1.45;color:var(--ink);background:var(--tone-1);padding:2px 4px;max-height:var(--reply-max,min(30vh,240px));overflow:hidden;margin:-6px 0 12px}
/* Only an answer cut off at its foot fades there; a whole answer ends on a plain last line. */
#reply.cut{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
#reply.whole{max-height:min(62vh,560px);overflow:auto}
#reply .event-link{display:inline;text-align:inherit;text-decoration:underline 1px color-mix(in srgb,var(--settled) 45%,transparent);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
#reply .event-link:is(:hover,:focus-visible){color:var(--settled);text-decoration-color:var(--settled)}
#reply a{color:var(--settled);overflow-wrap:anywhere}
#reply .event-link:focus-visible{outline:2px solid color-mix(in srgb,var(--settled) 40%,transparent);outline-offset:2px}
#reply :is(p,ul,ol){margin:0 0 6px}#reply :is(ul,ol){padding-left:20px}#reply :is(h3,h4,h5,h6){font-size:15px;margin:8px 0 4px}
#reply.thinking .reply-wait{color:var(--ink-3);animation:reply-wait 1.4s ease-in-out infinite}
@keyframes reply-wait{50%{opacity:.45}}
#reply.failed,#reply.thinking{text-align:center}#reply.failed{color:var(--ink-2)}#reply .reply-again{color:var(--settled);text-decoration:underline;font:inherit}
#reply-more{display:block;margin:-6px auto 10px;font-size:12px;color:var(--settled)}
#reply-more[hidden]{display:none}
/* An app's suggested words wait here, over any lifted plate, for the person to send or drop. The app's name leads, so it is plain whose words they are. */
#proposal{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;text-align:left;font-size:14px;line-height:1.4;color:var(--ink);background:var(--tone-1);padding:8px 12px;margin:-6px 0 12px}
#proposal[hidden]{display:none}
#proposal .from{flex:0 0 100%;font-size:11px;color:var(--ink-3)}
#proposal q{flex:1 1 200px;quotes:"“" "”";display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#proposal .acts{display:flex;gap:14px;margin-left:auto}
/* Over a lifted plate it stays in the dock above the composer, and the sheet ends above it (ground-wells.js liftFloor), so the
   suggestion never covers the app it came from. */
:is(body:has(#lift .well.lifted) #stage,#stage.board-open) #proposal{margin:0 0 8px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo)}
#proposal .send{color:var(--settled)}#proposal .drop{color:var(--ink-3)}
:is(body:has(#lift .well.lifted) #stage,#stage.board-open) :is(#reply,#reply-more){display:none}
/* Once the person has asked, the first-visit prompt has done its work. */
body:has(#reply:not([hidden])) #empty{display:none}
/* The floor bar (ground-bar.js) is the dock's floor: one line that ends in the M. Draw, erase, undo and Modyl's voice
   are tools on the view bar, beside the views they mark up. */
#field{display:block}
#markup{display:contents}
#speaker[aria-pressed]{color:var(--ink-2);background:none}
#speaker[aria-pressed=true]>[data-icon$=-slash],#speaker[aria-pressed=false]>:not([data-icon$=-slash]){display:none}
#speaker[aria-pressed=false]{color:var(--ink-3)}
#dock .after{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:16px;font-size:10.5px;color:var(--ink-3)}
/* A status or a waiting notice takes a line under the bar only while it has something to say. */
#dock .after:has(> :not(:empty):not([hidden])){margin-top:10px;min-height:28px}
/* The top right corner says whether the ground is live and holds everything that is not the work: help, a report,
   the classic view and the keys. Connection is one quiet dot, green when live and coral when not. */
#corner{position:absolute;right:38px;top:40px;display:flex;align-items:center;gap:6px;z-index:12}
#sync{width:24px;height:24px;display:grid;place-items:center;color:var(--ink-3)}
#sync::before{content:"";width:8px;height:8px;background:currentColor;transition:background .35s}
#sync[data-state="live"]{color:var(--ink-2)}
#sync[data-state="offline"]{color:var(--risk)}
#sync:hover{background:var(--tone-2)}
#help{width:30px;height:30px;display:grid;place-items:center;position:relative;font-size:14px;font-weight:600;color:var(--ink-2);box-shadow:0 0 0 1px var(--rule) inset;transition:color .2s,box-shadow .2s}
#help:hover,#help[aria-expanded=true]{color:var(--ink);box-shadow:0 0 0 1px var(--ink-2) inset}
#help[data-unread]::after{content:"";position:absolute;top:0;right:0;width:8px;height:8px;background:var(--risk);box-shadow:0 0 0 2px var(--tone-1)}
#help-menu{position:absolute;right:0;top:40px;min-width:220px;padding:6px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);display:flex;flex-direction:column;animation:arrive-down .25s var(--ease)}
#help-menu>button,#help-menu>a{display:flex;text-decoration:none;align-items:center;justify-content:space-between;gap:16px;height:34px;padding:0 10px;font-size:13.5px;color:var(--ink);text-align:left}
#help-menu>button:hover,#help-menu>button:focus-visible,#help-menu>a:hover,#help-menu>a:focus-visible{background:var(--tone-2);outline:0}
#help-menu kbd{font-size:10px;color:var(--ink-3)}
#help-menu .sep{height:1px;margin:6px 4px;background:var(--rule)}
#show-keys[aria-expanded=true]{color:var(--ink-2)}
.keys{display:grid;grid-template-columns:1fr auto;gap:2px 16px;margin:2px 10px 6px;font-size:12.5px;color:var(--ink-2)}
.keys dt{margin:0}.keys dd{margin:0;text-align:right;font:500 11px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:19px}
@keyframes arrive-down{from{opacity:0;transform:translateY(-4px)}}

#dial{position:absolute;right:40px;bottom:118px;width:132px;text-align:center}
#dial svg{width:104px;height:104px;display:block;margin:0 auto 8px;overflow:visible}
#dial .r{font-size:10.5px;color:var(--ink-3)}#dial .r b{color:var(--ink);font-weight:500}
#dial .hint{font-size:10px;color:var(--ink-3);margin-top:3px}

#views{position:absolute;display:flex;gap:2px;padding:3px;background:color-mix(in srgb,var(--paper) 82%,transparent);box-shadow:0 0 0 1px var(--rule),var(--halo)}
/* The views and markup tools share the top row with the corner, so the floor holds only the floor bar. */
#views{right:110px;top:36px}
#views button{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2);position:relative}
#views button svg{width:18px;height:18px}
#views button:hover{background:var(--tone-2);color:var(--ink)}
#views button.on{color:var(--settled);background:var(--settled-wash)}
#views button[data-tip]:hover::after,#views button[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;top:40px;right:0;white-space:nowrap;font:500 11px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--paper);padding:5px 7px;box-shadow:0 0 0 1px var(--rule);pointer-events:none}
#views .sep{width:1px;margin:6px 3px;background:var(--rule)}
#views [hidden]{display:none}
/* Report and help are the view bar's last section (ground.js moves them in), so the include's own toolbar stays empty. */
#stage #support{display:none}
#views [id^=support-] svg{fill:currentColor}
#views button[data-unread]::before{content:'';position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--settled);box-shadow:0 0 0 2px var(--paper)}
#views button[aria-pressed=true]{color:var(--settled);background:var(--settled-wash)}
#views button[aria-pressed=true]::after{display:none!important}

#time{position:absolute;left:0;top:128px;bottom:128px;width:30px;z-index:6}
/* The paper behind the labels is always as wide as the open rail and fades, so a label is never drawn over bare plates: opening lays the paper first and the labels follow, closing takes the labels first and the paper after. */
#time::before{content:"";position:absolute;left:0;top:-100vh;bottom:-100vh;width:320px;opacity:0;background:linear-gradient(90deg,var(--tone-1) 0,var(--tone-1) 72%,transparent);transition:opacity .2s var(--ease) .15s;pointer-events:none}
#time:hover,#time:focus-within,#time.pinned,#time.asking{width:300px}
#time:hover::before,#time:focus-within::before,#time.pinned::before,#time.asking::before{opacity:1;transition-delay:0s}
#time .track{position:absolute;left:16px;top:0;bottom:0;width:1px;pointer-events:none}
#time .rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule);opacity:.7}
#time .head{position:absolute;left:-3px;width:7px;height:7px;margin-top:-3.5px;background:var(--settled);box-shadow:0 0 0 3px color-mix(in srgb,var(--settled) 12%,transparent);transition:top .25s var(--ease)}
#time.pinned .head{background:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
#time ol{list-style:none;margin:0;padding:0;position:absolute;inset:0}
#time li{position:absolute;left:0;height:0;display:flex;align-items:center}
#time li .tick{position:absolute;top:0;left:12px;width:9px;height:1.5px;margin-top:-.75px;background:var(--ink-3);transition:width .3s var(--ease)}
#time li.t-minor .tick{left:14px;width:5px;height:1px;opacity:.7}
#time li.t-kept .tick{background:var(--settled)}
#time li.t-changed .tick{background:var(--risk)}
#time li.t-guess .tick{background:repeating-linear-gradient(90deg,var(--ink-3) 0 2px,transparent 2px 4px)}
#time li.t-at .tick{width:13px}
#time li button{position:absolute;top:0;left:30px;display:flex;align-items:baseline;gap:8px;white-space:nowrap;max-width:calc(min(300px,82vw) - 38px);transform:translate(-8px,-50%);opacity:0;transition:opacity .15s,transform .45s var(--ease);font-size:12.5px;color:var(--ink);pointer-events:none}
#time:hover li button,#time:focus-within li button,#time.pinned li button,#time.asking li button{opacity:1;transform:translate(0,-50%);pointer-events:auto;transition:opacity .2s .15s,transform .45s var(--ease)}
#time li.t-minor button{font-size:11px;color:var(--ink-3)}
#time li.t-at button .l{font-weight:600}
/* A long name ends in an ellipsis inside the opened rail, so it never runs under the answer. */
#time li .l{min-width:0;overflow:hidden;text-overflow:ellipsis}
#time li .w{flex:none;font-size:9.5px;color:var(--ink-3)}
#time .look{position:absolute;left:30px;bottom:-44px;display:flex;gap:6px}
#time .look button{height:28px;padding:0 11px;font-size:12px;font-weight:500;color:var(--ink);background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo)}
#time .look .restore-btn{color:var(--paper);background:var(--ink);box-shadow:none}
/* Looking back shows the ground as it was, so today's change count would be stale and sits where the look-back buttons do. */
body:has(#time.pinned) #readout{visibility:hidden}
/* A thumb on one step sits beside it, and its questions grow from the same place (ground-thumbs.js). */
#time li button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#time li .said{flex:none;align-self:center;display:inline-grid}
#time li .said svg{width:11px;height:11px;fill:var(--settled)}
#time li .said.down svg{fill:var(--risk)}
#said{position:fixed;z-index:10;padding:5px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo)}
#said[hidden]{display:none}
#said:has(> .thumbs-menu){max-width:330px;padding:0;background:none;box-shadow:none}
#said .thumbs{display:flex;gap:2px}
#said .thumbs button{width:42px;height:36px;display:grid;place-items:center;color:var(--ink-2)}
#said .thumbs button:hover,#said .thumbs button:focus-visible{background:var(--tone-2)}
#said .thumbs svg{width:19px;height:19px;fill:currentColor}
#said .thumbs [data-thumb=up][aria-pressed=true]{color:var(--settled);background:var(--settled-wash)}
#said .thumbs [data-thumb=down][aria-pressed=true]{color:var(--risk);background:color-mix(in srgb,var(--risk) 9%,transparent)}
#said.asked{width:340px;padding:18px 20px 16px;animation:lift .5s var(--ease)}
#said.asked .thumbs{margin:0 0 2px -8px}
#said h2{margin:0 0 10px;font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.005em}
#said h2 .w{margin-left:6px;font-size:10px;font-weight:400;color:var(--ink-3);white-space:nowrap}
#said .was{margin:-4px 0 8px;font-size:12.5px;color:var(--ink-3)}
#said fieldset{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;border:0}
#said legend{float:left;width:100%;margin-bottom:8px;padding:0;font-size:13px;color:var(--ink-2)}
#said fieldset button{min-height:32px;padding:0 12px;font-size:13px;color:var(--ink);box-shadow:0 0 0 1px var(--rule) inset}
#said fieldset.long{flex-direction:column;align-items:stretch}
#said fieldset.long button{padding:7px 12px;text-align:left;line-height:1.3}
#said fieldset button[aria-pressed=true]{color:var(--paper);background:var(--ink);box-shadow:none}
#said .q{display:block;margin-top:12px;font-size:13px;color:var(--ink-2)}
#said .q textarea{margin-top:8px}
#said textarea{display:block;width:100%;min-height:40px;max-height:24vh;margin-top:12px;padding:9px 12px;border:0;field-sizing:content;font:400 14.5px/1.35 Geist;color:var(--ink);background:var(--settled-wash);box-shadow:0 0 0 1px var(--settled) inset;resize:none;outline:0}
#said textarea:focus{box-shadow:0 0 0 1.5px var(--settled) inset}
#said .acts{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
#said .acts button{height:36px;padding:0 14px;font-size:13px;font-weight:500;color:var(--ink-2)}
#said .acts [type=submit]{color:var(--paper);background:var(--ink)}

/* Show what you'd rather (ground-rather.js): the ground as it stood at one step, marked up. The sheet only says what is
   being kept and how to finish; the marking happens on the ground itself, so the sheet stays to one side of it. */
body.rathering #history-actions{display:none}
#rather{position:fixed;z-index:10;right:16px;top:84px;width:316px;max-height:calc(100% - 200px);overflow:auto;padding:18px 20px 16px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);animation:lift .5s var(--ease)}
#rather[hidden]{display:none}
#rather h2{margin:0 0 6px;font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.005em}
#rather h2 .w{margin-left:6px;font-size:10px;font-weight:400;color:var(--ink-3);white-space:nowrap}
#rather p{margin:0;font-size:13px;line-height:1.4}
#rather .quiet{color:var(--ink-2)}
#rather .mic{display:flex;gap:7px;align-items:center;margin-top:10px;font-size:12.5px;color:var(--ink-3)}
#rather .mic svg{flex:none;width:15px;height:15px;fill:currentColor}
#rather .mic[data-live=true]{color:var(--settled)}
#rather .heard{margin-top:8px;color:var(--ink);font-style:italic;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#rather .told{margin-top:10px;color:var(--ink-3);font-size:12.5px}
#rather .leave{margin-top:12px;color:var(--ink)}
#rather .edit{margin-top:14px;padding-top:12px;box-shadow:0 -1px 0 var(--rule)}
#rather .edit h3{margin:0 0 4px;font-size:13.5px;font-weight:500}
#rather label{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-3)}
#rather :is(input,textarea){display:block;width:100%;margin-top:4px;padding:7px 10px;border:0;font:400 14px/1.35 Geist;color:var(--ink);background:var(--settled-wash);box-shadow:0 0 0 1px var(--settled) inset;outline:0;resize:none;field-sizing:content}
#rather textarea{min-height:36px;max-height:20vh}
#rather :is(input,textarea):focus{box-shadow:0 0 0 1.5px var(--settled) inset}
#rather .finish .q{font-size:13px;color:var(--ink-2)}
#rather .acts{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
#rather .acts button{height:36px;padding:0 14px;font-size:13px;font-weight:500;color:var(--ink-2)}
#rather .acts :is([type=submit],.go){color:var(--paper);background:var(--ink)}
#rather .acts .danger{color:var(--paper);background:var(--risk)}
#time li .said.rather svg{fill:var(--risk)}
#source-sheet{position:absolute;width:340px;max-width:calc(100% - 32px);padding:24px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);z-index:9;max-height:65vh;overflow:auto;animation:lift .7s var(--ease)}
#close-sheet{position:absolute;top:8px;right:10px;font-size:22px;color:var(--ink-3);min-height:32px;padding:0 6px}
#sheet-body h2:not(:is(.team-people,.team-actions,.support-grants,.connections) *){font-size:18px;font-weight:500;margin:0 28px 16px 0;letter-spacing:-.01em}
#sheet-body .kicker{color:var(--ink-3);font:500 11px var(--label);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
#sheet-body label:not(:is(.team-people,.team-actions,.support-grants,.connections) *){display:block;font:500 11px var(--label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:16px 0 6px}
#sheet-body input:not(:is(.team-people,.team-actions,.support-grants,.connections) *){width:100%;border:0;padding:10px 14px;font:500 17px Geist;background:var(--settled-wash);box-shadow:0 0 0 1px var(--settled) inset;min-height:44px;outline:0}
#sheet-body input:not(:is(.team-people,.team-actions,.support-grants,.connections) *):focus{box-shadow:0 0 0 1.5px var(--settled) inset}
#sheet-body input:not(:is(.team-people,.team-actions,.support-grants,.connections) *)[data-dirty=true]{background:var(--paper);box-shadow:0 0 0 1.5px var(--risk) inset}
/* The goal level is ui/done-sheet.js, styled by ui/ui.css; the sheet's generic rules stay off its parts. */
#sheet-body small:not(:is(.done-line,.done-summary,.done-footer,.team-people,.team-actions,.support-grants,.connections) *){display:block;font-size:11px;color:var(--ink-3);margin:6px 0 0}
#sheet-body .from{font-size:12px;color:var(--ink-3);margin:-10px 0 4px}
/* A shared goal's done is read, not edited, so it is words where the owner has a field. */
#source-sheet.shared .means{margin:6px 0 0;font:500 15px/1.35 Geist,system-ui,sans-serif;color:var(--ink)}
#source-sheet.shared .waits{flex-basis:100%;margin:0;font-size:13px;color:var(--ink)}
#sheet-body input::placeholder{color:var(--ink-3);font-weight:440}
/* An item's connections, in the sheet that holds its fields: a way back, then one sentence per link. */
#sheet-body .back{display:block;font-size:12px;font-weight:500;color:var(--ink-3);min-height:32px;padding:0;margin:-6px 0 6px -2px}
#sheet-body .back:hover{color:var(--ink)}
#sheet-body .links{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#sheet-body .links li{padding-top:14px;border-top:1px solid var(--rule)}
#sheet-body .links li:first-child{padding-top:0;border-top:0}
#sheet-body .links p{margin:0;font-size:15px;line-height:1.35;color:var(--ink)}
#sheet-body .links .waiting{color:var(--ink);font-weight:600}
#sheet-body .links .acts{margin-top:10px}
#sheet-body .review:not(.done-sheet *){font-size:12px;color:var(--risk);min-height:0;margin:12px 0 0}
#sheet-body .acts:not(:is(.done-line,.team-people,.team-actions,.support-grants,.connections) *){display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#sheet-body .acts:not(:is(.done-line,.team-people,.team-actions,.support-grants,.connections) *) button{height:36px;padding:0 13px;font-size:13px;font-weight:500;box-shadow:0 0 0 1px var(--rule) inset}
#sheet-body .acts:not(:is(.done-line,.team-people,.team-actions,.support-grants,.connections) *) button[type=submit]{color:var(--paper);background:var(--ink);box-shadow:none}
#sheet-body .acts:not(:is(.done-line,.team-people,.team-actions,.support-grants,.connections) *) button:hover{box-shadow:0 0 0 1px var(--ink) inset}
/* A goal's definition of done: the sentence, then one row per line with its mark, words, result and how it is checked. */
#source-sheet.goal{width:640px;max-height:calc(var(--floor,calc(100% - 96px)) - var(--top,80px));padding:18px 24px}
/* A goal's team and who can read the person's goals: ui/team-*.js and ui/support-grants.js, styled by ui/ui.css. A part
   that does not fit folds to one row that opens it, styled like the way back. */
#source-sheet:is(.team,.access,.services){width:600px;max-height:calc(100% - 176px);padding:18px 24px}
#source-sheet.team .fold{display:block;font-size:13px;font-weight:500;color:var(--ink-2);min-height:36px;padding:0;margin:4px 0}
#source-sheet.team .fold:hover{color:var(--ink)}
#source-sheet.goal h2{margin-bottom:4px}
#source-sheet.goal .from{margin:0 28px 2px 0}
#source-sheet.goal .kicker{margin-bottom:6px}
#source-sheet.goal label{margin-top:10px}
/* Its actions stay in reach under a long definition: they ride the sheet's lower edge over the lines. */
#source-sheet.goal .acts:not(:is(.done-line,.team-people,.team-actions,.support-grants,.connections) *){position:sticky;bottom:-18px;margin:12px 0 -18px;padding:8px 0 18px;background:var(--paper)}
#source-sheet.goal .done-footer{position:sticky;z-index:2;bottom:-18px;margin:12px 0 -18px;padding:0 0 18px;background:var(--paper)}
#sheet-body h3:not(.done-sheet>h3,:is(.team-people,.team-actions,.support-grants,.connections) *){font:500 11px var(--label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:12px 0 4px}
#sheet-body textarea:not(:is(.done-sheet,.support-grants,.connections) *){display:block;field-sizing:content;min-height:40px;width:100%;border:0;padding:8px 12px;font:500 15px/1.35 Geist;color:var(--ink);background:var(--settled-wash);box-shadow:0 0 0 1px var(--settled) inset;resize:none;outline:0}
#sheet-body textarea:not(:is(.done-sheet,.support-grants,.connections) *):focus,#sheet-body .lines input:focus{box-shadow:0 0 0 1.5px var(--settled) inset}
#sheet-body textarea:not(:is(.done-sheet,.support-grants,.connections) *)[data-dirty=true],#sheet-body .lines input[data-dirty=true]{background:var(--paper);box-shadow:0 0 0 1.5px var(--risk) inset}
#sheet-body .lines{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#sheet-body .lines li{display:grid;grid-template-columns:16px minmax(0,1fr) auto auto;column-gap:8px;align-items:center;min-height:32px}
#sheet-body .lines li>svg{width:15px;height:15px;fill:var(--ink-3);align-self:start;margin-top:6px}
#sheet-body .lines .line-text{font-size:14px;line-height:1.3;color:var(--ink);padding:4px 0}
#sheet-body .lines li[data-dropped] .line-text{text-decoration:line-through;color:var(--ink-3)}
#sheet-body .lines input{min-height:32px;padding:5px 10px;font:500 14px Geist}
#sheet-body .lines textarea{min-height:32px;padding:5px 10px;font:500 14px/1.35 Geist}
#sheet-body .lines .st{font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
#sheet-body .lines li[data-state=met] .st{color:var(--settled)}
#sheet-body .lines li[data-state=missed] .st{color:var(--risk)}
#sheet-body .lines li small{grid-column:2/4;margin:-3px 0 3px;line-height:1.3}
#sheet-body .line-acts{display:flex;gap:4px}
#sheet-body .lines button.st{min-height:32px;padding:0 8px;text-decoration:underline dotted;text-underline-offset:3px}
#sheet-body .lines button.st:hover,#sheet-body .lines button.st:focus-visible,#sheet-body .lines button.st[aria-expanded=true]{box-shadow:0 0 0 1px var(--rule) inset;text-decoration:none}
#sheet-body .raise{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
#sheet-body .raise button{min-height:32px;padding:0 12px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:0 0 0 1px var(--rule) inset}
#sheet-body .raise button:first-child{background:var(--ink);color:var(--paper);box-shadow:none}
#sheet-body .raise button:hover,#sheet-body .raise button:focus-visible{box-shadow:0 0 0 1.5px var(--risk) inset}
@media (max-width:720px){#sheet-body .raise{grid-column:2/-1;flex-wrap:nowrap;gap:4px}#sheet-body .raise button{padding:0 7px;white-space:nowrap}}
#sheet-body .raise.answers{flex-wrap:wrap}
#sheet-body .lines li.assumed button{display:inline;font:inherit;color:inherit;text-align:left;padding:2px 0;text-decoration:underline dotted var(--ink-3);text-underline-offset:3px}
#sheet-body .lines li.assumed .by{color:var(--ink-3);font-size:12px}
#sheet-body .lines li.assumed button:hover,#sheet-body .lines li.assumed button:focus-visible{text-decoration-color:var(--ink);outline:none;box-shadow:0 1.5px 0 var(--risk)}
#sheet-body .raise.answers button:first-child{background:none;color:var(--ink);box-shadow:0 0 0 1px var(--rule) inset}
#sheet-body .line-acts button{min-height:32px;min-width:32px;padding:0 8px;font-size:12px;color:var(--ink-2);display:grid;place-items:center}
#sheet-body .line-acts button:hover,#sheet-body .line-acts button:focus-visible{box-shadow:0 0 0 1px var(--rule) inset;color:var(--ink)}
#sheet-body .line-acts svg{width:15px;height:15px;fill:currentColor}
#sheet-body .legend{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--ink-3)}
#sheet-body .legend button.ids{font:inherit;color:inherit;text-decoration:underline dotted;text-underline-offset:2px;padding:0;min-height:0}
/* The proof's zoom (ground-sheet.js proofSheet): a line points one level down; the crumbs go back up. */
#sheet-body .lines button.line-text{text-align:left;font:inherit;font-size:14px;min-height:28px}
#sheet-body .lines button.line-text:hover,#sheet-body .lines button.line-text:focus-visible{text-decoration:underline dotted var(--ink-3);text-underline-offset:3px}
#sheet-body .lines li[aria-current=true]{box-shadow:inset 2px 0 0 var(--risk);padding-left:4px;margin-left:-6px}
/* Heard words that became this line light here as they do in the bar, then fade; reduced motion skips to the end. */
#sheet-body .heard-lit{animation:heard-lit 1.6s var(--ease) both}
@media (prefers-reduced-motion:reduce){#sheet-body .heard-lit{animation:none}}
#sheet-body .rollup{margin:10px 0 0;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
#sheet-body .rollup[data-outcome=missed]{color:var(--risk)}
#sheet-body .rollup[data-outcome=held]{color:var(--settled)}
#sheet-body .read{margin:2px 0 0;font-size:12.5px;line-height:1.35;color:var(--ink-3)}
@media (max-width:720px){#sheet-body .rollup{margin-top:6px}#sheet-body .read{margin:0;line-height:1.3}#sheet-body .legend{margin-top:4px}}
/* Marks wait on the sheet: the observed words whole, the line they bear on below, and the person's label in place. */
#sheet-body .marks .excerpt{color:var(--ink-2)}
#sheet-body .marks li small{grid-column:2/3;grid-row:2}
#sheet-body .marks .mark-labels{grid-column:3/-1;grid-row:2;justify-self:end;flex-wrap:nowrap;gap:4px;margin:-3px 0 3px}
@media (max-width:720px){#sheet-body .marks li small{grid-column:2/-1}#sheet-body .marks .mark-labels{grid-column:2/-1;grid-row:3;justify-self:start}}
#sheet-body .marks .mark-labels button{min-height:28px;padding:0 9px;font-size:12px;font-weight:500;color:var(--ink-2)}
/* Every answer reads alike until the person picks one. The chosen one is filled and said in words after Modyl's why;
   the others stay where they were, to change it. */
#sheet-body .marks .mark-labels button[aria-pressed]{color:var(--ink-2);background:none;box-shadow:0 0 0 1px var(--rule) inset}
#sheet-body .marks .mark-labels button[aria-pressed=false]:is(:hover,:focus-visible){color:var(--ink);box-shadow:0 0 0 1.5px var(--risk) inset}
#sheet-body .marks .mark-labels button[aria-pressed=true]{color:var(--paper);background:var(--ink);box-shadow:none}
#sheet-body .marks .said{font-weight:600;color:var(--ink)}
#sheet-body .quiet:not(.done-footer *) button{font:inherit;color:var(--ink-2);padding:0;min-height:28px;text-decoration:underline dotted;text-underline-offset:3px}
#sheet-body .quiet:not(.done-footer *) button:hover,#sheet-body .quiet:not(.done-footer *) button:focus-visible{color:var(--ink)}
#sheet-body .quiet:not(.done-footer *){margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--ink-3)}
#sheet-body .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font:500 11px var(--label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 6px}
#sheet-body .crumbs button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink-2);min-height:28px;padding:0 2px;text-decoration:underline dotted;text-underline-offset:3px}
#sheet-body .crumbs [aria-current]{color:var(--ink)}
#sheet-body .evidence{margin:8px 0;font-size:13px;line-height:1.5;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
#sheet-body .evidence mark{background:var(--settled-wash);color:var(--ink);box-shadow:0 1.5px 0 var(--settled);padding:0 1px}
#sheet-body .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes lift{from{opacity:0;translate:0 60px}}

#work-list{position:absolute;left:40px;top:72px;z-index:7;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#mirror section{margin-bottom:10px}
#mirror button{display:block;text-align:left;font-weight:500;min-height:28px}
#mirror p{margin:0;font-size:12px;color:var(--ink-2)}
#mirror small{font:500 11px var(--label);color:var(--ink-3)}
#opening{position:absolute;left:50%;top:35%;transform:translateX(-50%);margin:0;font-size:15px;color:var(--ink-3);animation:opening 1.2s var(--ease) infinite alternate}
#opening[hidden]{display:none}
@keyframes opening{from{opacity:.45}to{opacity:1}}
#empty{position:absolute;left:50%;top:35%;transform:translateX(-50%);width:min(440px,calc(100% - 72px));text-align:center;color:var(--ink-2);text-shadow:0 0 6px var(--tone-1),0 0 12px var(--tone-1),0 0 18px var(--tone-1)}
#empty h1{margin:0 0 10px;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
#empty p{margin:0;font-size:15px;line-height:1.45}
#wells{position:absolute;inset:0;pointer-events:none;z-index:-1}
/* The ground fades out under the top chrome and under the dock's words (ground.js measureBand), so no line or plate
   runs beneath what they say. */
:is(#gl,#wells){--band:linear-gradient(transparent calc(var(--band-t,0px) - 24px),#000 var(--band-t,0px),#000 var(--band-b,100%),transparent calc(var(--band-b,100%) + 24px));
  -webkit-mask-image:var(--band);mask-image:var(--band)}
#stage.past #wells{filter:saturate(.3) contrast(.94)}
.socket{position:absolute;left:0;top:0;width:248px;height:248px;transform-origin:0 0;background:color-mix(in srgb,var(--settled-wash) 85%,transparent);box-shadow:0 0 0 1.4px var(--settled) inset;pointer-events:auto;cursor:pointer}
/* The 7-unit corner of a 40-unit task window, at the socket's 248 px. */
.socket.task,.socket.task .well:not(.lifted){}
.well{position:relative;width:248px;height:248px;padding:14px 18px;display:flex;flex-direction:column;justify-content:center;font-size:19px;line-height:1.25;color:var(--ink);overflow:hidden;text-align:left}
.well-head,.well-foot{display:none}
.a2-col{display:flex;flex-direction:column;gap:10px}
.a2-row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;font-weight:500;letter-spacing:-.01em;transition:background .25s}
.a2-row>.a2-text:nth-of-type(2){margin-left:auto;text-align:right}
.a2-row[data-pinned=true]{color:var(--settled);font-weight:600}
.a2-text[data-unknown=true]{color:var(--risk);font-weight:500}
/* In the plate a row reads like the plate itself: a mono label over its value (FLOOR row 3). Lifted, it reads as a list. */
.well:not(.lifted) .a2-col{gap:8px}
.well:not(.lifted) .a2-row{flex-direction:column;align-items:flex-start;row-gap:3px;line-height:1.15}
.well:not(.lifted) .a2-text:first-of-type{font:500 26px 'Geist Mono',monospace;letter-spacing:0;text-transform:uppercase;color:var(--ink-3)}
.well:not(.lifted) .a2-row[data-pinned=true] .a2-text:first-of-type{color:var(--settled)}
.well:not(.lifted) .a2-text:nth-of-type(2){margin-left:0;text-align:left;font-size:29px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.well:not(.lifted) .a2-text[data-unknown=true]{font-size:27px;font-weight:500;letter-spacing:-.02em;line-height:1.05}
.well.lifted .well-body{animation:unfold .4s var(--ease) both}
.a2-bar{display:none}
.well.bars:not(.lifted) .a2-text,.well.bars:not(.lifted) .a2-source{display:none}
.well.bars:not(.lifted) .a2-col{gap:22px}
.well.bars:not(.lifted) .a2-bar{display:block;height:34px;width:calc(var(--share) * 100%);background:var(--ink-3)}
.well.bars:not(.lifted) .a2-row[data-pinned=true] .a2-bar{background:var(--settled)}
.well.bars:not(.lifted) .a2-bar[data-missing=true]{background:transparent;outline:3px dashed var(--risk);outline-offset:-3px}
/* A document's Markdown (markdown.js), in the plate as a picture of its first lines and lifted as the page to read. */
.well.doc .a2-text{display:block;width:100%;overflow-wrap:anywhere}
.well.doc .a2-text>:first-child{margin-top:0}
.well.doc :is(h3,h4,h5,h6){margin:.9em 0 .3em;font-weight:600;letter-spacing:-.012em;line-height:1.25}
.well.doc h3{font-size:1.3em}.well.doc h4{font-size:1.12em}.well.doc :is(h5,h6){font-size:1em}
.well.doc :is(p,ul,ol,blockquote,pre,.md-table){margin:0 0 .65em}
.well.doc :is(ul,ol){padding-left:1.3em}
.well.doc blockquote{padding-left:.8em;border-left:2px solid var(--rule);color:var(--ink-2)}
.well.doc code{font:500 .85em 'Geist Mono',monospace;background:var(--tone-2);padding:.05em .3em}
.well.doc pre{background:var(--tone-2);padding:.6em .8em;overflow-x:auto}.well.doc pre code{background:none;padding:0}
.well.doc hr{border:0;border-top:1px solid var(--rule);margin:.9em 0}
.well.doc a{color:var(--settled)}
.well.doc .md-table{overflow-x:auto}
.well.doc table{border-collapse:collapse;font-size:.9em;font-variant-numeric:tabular-nums}
.well.doc.lifted table{width:100%}
.well.doc th{white-space:nowrap;font:500 .7em 'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:.3em 1.4em .45em 0;border-bottom:1px solid var(--rule)}
.well.doc td{padding:.4em 1.4em .4em 0;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:normal}
.well.doc :is(th,td):last-child{padding-right:0}
.well.doc [data-align=right]{text-align:right}.well.doc [data-align=center]{text-align:center}
.well.doc:not(.lifted){justify-content:flex-start}
.well.doc:not(.lifted) .well-body{mask-image:linear-gradient(#000 72%,transparent)}
.well.doc:not(.lifted) .a2-row .a2-text:first-of-type{font:400 19px/1.3 Geist,sans-serif;letter-spacing:-.005em;text-transform:none;color:var(--ink)}
/* Lifted, a document is read in pages that fit the sheet and is never scrolled (ground-pages.js drawRung). The sheet has one
   height; the pager lays the rung out in columns one page wide and shows one, so every rung fits by construction. */
#lift .well.doc.lifted{width:min(600px,calc(var(--stage-w) - 32px));height:min(600px,var(--lift-max,calc(100dvh - 120px)));max-height:none;overflow:hidden;padding:24px 28px 16px}
.well.doc.lifted .well-body{flex:1;min-height:0;display:flex;flex-direction:column}
.well.doc.lifted .a2-col,.well.doc.lifted .well-foot{display:none}
.ladder{display:none}
.well:is(.doc,.case).lifted .ladder{display:flex;flex-direction:column;flex:1;min-height:0;animation:unfold .4s var(--ease) both}
.ladder .pager{flex:1;min-height:0;overflow:hidden}
.ladder .flow{height:100%;column-count:1;column-width:var(--page,540px);column-gap:48px;column-fill:auto;font-size:15px;line-height:1.55;transition:transform .38s var(--ease)}
.ladder .flow>:first-child{margin-top:0}
.ladder :is(h3,h4,h5,h6){break-after:avoid}
.ladder :is(li,tr,.facts>div,.row>div,blockquote){break-inside:avoid}
.ladder .md-table{overflow:hidden}
.ladder .up{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--settled);padding:4px 0;margin:-6px 0 8px;min-height:32px}
.ladder .caret{width:14px;height:14px;fill:currentColor;flex:none}
.ladder .pages .caret{width:18px;height:18px}
.ladder .answer{font-size:18px;line-height:1.4;font-weight:500;letter-spacing:-.012em;margin:0 0 18px;color:var(--ink)}
.ladder .answer strong{font-weight:650}
.ladder .facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 20px}
.ladder :is(.facts,.row) dt{font:500 10px/1.2 'Geist Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ladder .facts dd{margin:3px 0 0;font-size:14px;font-weight:500}
.well.doc .ladder :is(.sections,.doc-rows){list-style:none;padding:0;margin:0 0 .8em;border-top:1px solid var(--rule)}
.ladder :is(.sections,.doc-rows) button{display:block;width:100%;text-align:left;padding:10px 26px 10px 0;border-bottom:1px solid var(--rule);position:relative;min-height:44px}
.ladder :is(.sections,.doc-rows) button::after{content:'';position:absolute;right:4px;top:50%;translate:0 -50%;width:14px;height:14px;background:var(--ink-3);mask:var(--caret) center/contain no-repeat}
.ladder :is(.sections,.doc-rows) button:hover{background:var(--settled-wash)}
.ladder :is(.sections,.doc-rows) b{display:block;font-size:15px;font-weight:600;letter-spacing:-.008em;line-height:1.3}
.ladder :is(.sections,.doc-rows) span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:1.4;color:var(--ink-3);margin-top:2px}
.ladder .row{margin:0}
.ladder .row>div{padding:10px 0;border-top:1px solid var(--rule)}
.ladder .row dd{margin:4px 0 0}
.ladder .turn{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--rule);margin-top:8px;min-height:44px}
.ladder .from{flex:1;font-size:11px;color:var(--ink-3)}
.ladder .pages{display:flex;align-items:center;gap:4px}
.ladder .pages[hidden]{display:none}
.ladder .pages button{display:inline-grid;place-items:center;min-width:40px;min-height:40px;color:var(--settled)}
.ladder .pages button:disabled{color:var(--rule);cursor:default}
.ladder .count{font-size:11px;color:var(--ink-3);min-width:48px;text-align:center}
.a2-source{display:none;flex-basis:100%;font-size:11px;font-weight:400;letter-spacing:0;color:var(--ink-3);margin-top:4px}
#lift{position:absolute;inset:0;z-index:11;pointer-events:none}
#lift .well{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto;background:var(--settled-wash);box-shadow:0 0 0 1.4px var(--settled) inset;interpolate-size:allow-keywords;transition:left .5s var(--ease),top .5s var(--ease),width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease),background .4s,box-shadow .4s,padding .5s var(--ease)}
#lift .well.flying{transition:none}
/* A lifted sheet stops above the composer (ground-wells.js liftFloor sets --lift-max), so the person can still say, type or
   draw about what they lifted. */
#lift .well.lifted{width:360px;height:auto;max-height:min(560px,var(--lift-max,calc(100dvh - 120px)));overflow:auto;justify-content:flex-start;padding:24px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo)}
.well.lifted .well-head,.well.lifted .well-foot,.well.lifted .a2-source{display:block;animation:unfold .45s var(--ease) both}
.well.lifted [data-redrawn] .a2-source{animation:none}
.well.lifted .a2-col{gap:2px}
.well.lifted .a2-row{cursor:pointer;padding:9px 10px;margin:0 -10px}
.well.lifted .a2-row:hover{background:var(--settled-wash)}
/* A row with more than one field is a record: its name, then each field on its own line, read left to right. */
.well.lifted .a2-row:has(>.a2-text:nth-of-type(3)){flex-direction:column;align-items:stretch;row-gap:3px}
.well.lifted .a2-row:has(>.a2-text:nth-of-type(3))>.a2-text{margin-left:0;text-align:left}
.well.lifted .a2-row:has(>.a2-text:nth-of-type(3))>.a2-text:first-of-type{font-size:17px;font-weight:600}
.well.lifted .a2-row:has(>.a2-text:nth-of-type(3))>.a2-text:not(:first-of-type){font-size:15px;font-weight:400;line-height:1.38;color:var(--ink-2)}
.well.lifted .a2-row:has(>.a2-text:nth-of-type(3))>.a2-text[data-unknown=true]{color:var(--risk);font-weight:500}
.well.lifted[data-fit="1"] .a2-row>.a2-text:not(:first-of-type,[data-unknown=true]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.well.lifted[data-fit="2"] .a2-row>.a2-text:not(:first-of-type,[data-unknown=true]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.well.lifted:is([data-fit="2"],[data-fit="3"]) .a2-source{display:none}
.well.lifted[data-fit="3"] .a2-row>.a2-text:not(:first-of-type,[data-unknown=true]){display:none}
.well.lifted[data-fit="3"] .a2-row:not(:has(>.a2-text[data-unknown=true]))>.a2-text:nth-of-type(2){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.well.lifted:is([data-fit="1"],[data-fit="2"]) .well-foot::before{content:'Some rows are cut short. ';color:var(--ink-2)}
.well.lifted[data-fit="3"] .well-foot::before{content:'Each row shows its name and what is still unknown. ';color:var(--ink-2)}
@media (min-width:721px){#lift .well.lifted:has(.a2-row>.a2-text:nth-of-type(3)){width:min(520px,calc(var(--stage-w,100vw) - 32px))}
  #lift .well.lifted[data-cols="2"]{width:min(960px,calc(var(--stage-w,100vw) - 32px))}
  .well.lifted[data-cols="2"] .a2-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-items:start}}
.well-head .kicker{color:var(--ink-3);font-size:10px;margin:0 112px 10px 0}
/* 112 px keeps a long name clear of the labelled fold button and its focus ring. */
.well-head h2{font-size:18px;font-weight:500;margin:0 112px 14px 0;letter-spacing:-.01em}
.well-close{position:absolute;z-index:1;top:8px;right:10px;display:inline-flex;align-items:center;gap:5px;padding:0 10px;font-size:13px;color:var(--ink-2);min-height:32px;min-width:32px;box-shadow:0 0 0 1px var(--rule) inset}
.well-close:hover{color:var(--ink)}
.well-close span{font-size:19px;line-height:1;color:var(--ink-3)}
.well-foot{font-size:11px;color:var(--ink-3);margin:14px 0 0}
@keyframes unfold{from{opacity:0;translate:0 6px}}
/* A review room. The paper is one document, 380 units wide at scale u. In the plate u fits it to the well (248/380):
   a header at the label floor carries the state and statement, and below it the paper's evidence shows through
   with its live ink. Lifted, the whole paper shows at the sheet's u. */
.well.room{--u:.6526px;display:block;padding:0;position:relative;overflow:hidden}
.room-plate{position:relative;padding:20px 22px 0;display:flex;flex-direction:column;gap:8px}
.room-plate .room-state{font-size:30px;line-height:1;letter-spacing:.04em;color:var(--ink-3)}
.room-plate .room-count{font-size:30px;line-height:1;letter-spacing:.04em;color:var(--risk)}
.room-plate .room-count{display:flex;align-items:center;gap:4px}
.room-plate .room-count[hidden]{display:none}
.room-plate .room-count svg{width:28px;height:28px;fill:currentColor}
.room-plate .statement{margin:0;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.08}
.room-plate .room-head{display:flex;justify-content:space-between;gap:8px}
.room-decision[hidden]{display:none}
.paper>.room-state:has(+.room-decision:not([hidden])){display:none}
.room-decision .room-label{display:block;font-size:calc(10 * var(--u));line-height:1;color:var(--ink-3)}
/* Against a decision the two statements are a pair at one size: yours on a grey rule, the proposal in ink on a blue one. */
.room-kept{margin:calc(6 * var(--u)) 0 calc(16 * var(--u));padding-left:calc(12 * var(--u));border-left:calc(2 * var(--u)) solid var(--rule);font-size:calc(17 * var(--u));line-height:1.35;color:var(--ink-2)}
.paper .room-decision:not([hidden])+.statement{margin:calc(6 * var(--u)) 0 calc(22 * var(--u));padding-left:calc(12 * var(--u));border-left:calc(2 * var(--u)) solid var(--settled);font-size:calc(17 * var(--u));font-weight:600;letter-spacing:-.01em;line-height:1.35}
.well.room[data-state=adopted] .room-state{color:var(--settled)}
.socket.room[data-state=new],.socket.room[data-state=deferred]{background:color-mix(in srgb,var(--settled-wash) 80%,transparent);box-shadow:none;outline:1.6px dashed var(--ink-3);outline-offset:-1.6px}
.socket.room[data-state=rejected],.socket.room[data-state=closed]{background:color-mix(in srgb,var(--tone-3) 90%,transparent);box-shadow:0 0 0 1.4px var(--tone-4) inset}
.paper{position:absolute;left:0;top:0;width:calc(380 * var(--u));padding:calc(6 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u))}
.well.room:not(.lifted) .paper{pointer-events:none}
/* The header says the paper's state and statement at the floor, so the paper keeps their space but does not draw them. */
.well.room:not(.lifted) .paper>.room-state,.well.room:not(.lifted) .paper>.statement,.well.room:not(.lifted) .paper>.room-decision{visibility:hidden}
.well.room.lifted{overflow:auto}
.well.room.lifted .room-plate{display:none}
.well.room.lifted .paper{position:relative;top:0!important;animation:unfold .45s var(--ease) both}
.paper .room-state{font-size:calc(10 * var(--u));line-height:1;color:var(--ink-3);margin-bottom:calc(8 * var(--u))}
.paper .statement{margin:0 0 calc(16 * var(--u));font-size:calc(23 * var(--u));font-weight:580;letter-spacing:-.015em;line-height:1.15}
.evidence{display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.evidence-row{display:flex;flex-direction:column;gap:calc(5 * var(--u))}
.room-source{font-size:calc(10 * var(--u));line-height:1;color:var(--ink-3)}
.room-quote{font-size:calc(14.5 * var(--u));line-height:1.45;color:var(--ink)}
/* Ink lies under the words, as a highlighter does: it darkens light paper and lightens dark paper, never the text. */
.room-ink{position:absolute;inset:0;pointer-events:none;--tl-color-background:transparent;mix-blend-mode:multiply}
[data-theme=dark] .room-ink{mix-blend-mode:lighten}
.room-ink[data-armed=true]{pointer-events:auto;cursor:crosshair}
.room-ink .tl-container,.room-ink .tl-background{background:transparent!important}
/* tldraw outlines its focused canvas in its own light palette. The ink is the paper itself, not a field, so no rule crosses it. */
.room-ink .tl-container__focused{outline:none}
.room-acts,.room-reasons,.room-answer,.room-commit,.room-guests{display:none}
.well.room.lifted .room-guests:not(:empty){display:flex;flex-direction:column;gap:6px;margin:12px 24px 0}
.room-guest{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.room-guest span{flex:1}
.room-guest button{height:30px;padding:0 11px;font-size:12.5px;font-weight:500;box-shadow:0 0 0 1px var(--rule)}
.room-guest button[data-answer=admit]{color:var(--paper);background:var(--ink);box-shadow:none}
#lift .well.room.lifted{width:calc(380 * var(--u));max-height:var(--lift-max,calc(100dvh - 32px));padding:0 0 20px}
.well.room.lifted .well-head{padding:22px 24px 0}
.well.room.lifted .well-head h2{margin-bottom:0;font-size:20px}
.room-questions,.room-note{display:none}
.well.room.lifted .room-questions:not(:empty){display:flex;flex-direction:column;gap:12px;margin:0 24px 14px}
.room-question{display:flex;flex-direction:column;gap:6px}
.room-question>span{font-size:13px;font-weight:500;color:var(--ink)}
.room-choices{display:flex;flex-wrap:wrap;gap:6px}
.room-choices button{height:30px;min-width:30px;padding:0 11px;font-size:12.5px;font-weight:500;color:var(--ink-2);box-shadow:0 0 0 1px var(--rule)}
.room-choices.scale button{padding:0;flex:1;max-width:40px}
.room-choices button:hover:not(:disabled){background:var(--tone-2)}
.room-choices button[aria-pressed=true]{color:var(--settled);background:var(--settled-wash);box-shadow:0 0 0 1.5px var(--settled)}
.room-choices button:disabled{opacity:.45;cursor:default}
.room-brief{display:none}
.well.room.lifted .room-brief:not([hidden]){display:block;margin:0 24px 20px}
.room-brief nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.room-brief nav span{font-size:10px;line-height:1.4;color:var(--ink-2);text-align:center}
.room-brief nav button{width:44px;height:44px;flex:none;box-shadow:0 0 0 1px var(--rule)}
.room-brief nav button:disabled{opacity:.4;cursor:default}
.room-brief-copy{font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.room-brief-copy:empty{display:none}
.well.room.lifted.briefing :is(.paper,.room-questions,.room-note:not([hidden])){display:none}
.well.room.lifted .room-note:not([hidden]){display:flex;align-items:center;gap:6px;margin:0 24px 14px;height:38px;padding:0 4px 0 12px;box-shadow:0 0 0 1px var(--rule)}
.room-note input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:13.5px;color:var(--ink)}
.room-note:focus-within{box-shadow:0 0 0 1.5px var(--settled)}
.room-note button{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-2);box-shadow:0 0 0 1px var(--rule)}
.room-note button svg{width:15px;height:15px;fill:currentColor}
.well.room.lifted :is(.room-answer,.room-commit):not(:empty){display:block;margin:0 24px 10px;font-size:13px;line-height:1.4;color:var(--ink-2)}
/* Adopted unless the person objects: the words it commits to, said once beside the acts, with Object in reach. */
.room-confirm{display:none}
.well.room.lifted .room-confirm:not([hidden]){display:block;margin:0 24px 14px;padding-left:12px;border-left:2px solid var(--risk)}
.well.room.lifted .room-confirm[data-state=silent]{border-left-color:var(--settled)}
.well.room.lifted .room-confirm[data-state=objected]{border-left-color:var(--rule)}
.room-confirm-head{margin:0 0 4px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--risk)}
.room-confirm[data-state=silent] .room-confirm-head{color:var(--settled)}
.room-confirm[data-state=objected] .room-confirm-head{color:var(--ink-2)}
.room-confirm-said{margin:0;font-size:15px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.room-confirm-said q{font-weight:600}
.room-confirm-how{display:flex;align-items:center;gap:10px;margin:8px 0 0;font-size:13px;line-height:1.35;color:var(--ink-2)}
.room-confirm-how span{flex:1}
.room-confirm-how span:empty{display:none}
.room-confirm .object{flex:none;height:36px;padding:0 16px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:0 0 0 1.5px var(--ink-2)}
.room-confirm .object:hover{background:var(--tone-2)}
.room-saved{margin-left:8px;font-size:10px;font-weight:400;color:var(--settled)}
.well.room.lifted .room-acts{display:flex;gap:8px;padding:0 24px}
.room-acts button,.room-reasons button{height:36px;padding:0 14px;font-size:13.5px;font-weight:500;box-shadow:0 0 0 1px var(--rule)}
.room-acts button:hover:not(:disabled),.room-reasons button:hover:not(:disabled){background:var(--tone-2)}
.room-acts .adopt{color:var(--paper);background:var(--settled);box-shadow:none}
.room-acts .adopt:hover:not(:disabled){background:var(--settled)}
.room-acts button:disabled,.room-reasons button:disabled{opacity:.45;cursor:default}
/* An act that is off reads as off, not as a faded primary. */
.room-acts .adopt:disabled{opacity:1;color:var(--ink-3);background:none;box-shadow:0 0 0 1px var(--rule)}
.room-acts [aria-expanded=true]{box-shadow:0 0 0 1px var(--ink-2)}
.well.room.lifted .room-reasons:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 24px 0;font-size:12px;color:var(--ink-3)}
.room-reasons span{margin-right:2px}
.room-reasons button{height:30px;padding:0 11px;font-size:12.5px}
.well.room.lifted .well-foot{padding:0 24px}
/* When a deferral comes back: three kinds, one field for the chosen kind, and the condition said in plain words above Defer.
   While it is open it stands in for the acts, so the sheet keeps its height. */
.room-when,.room-visitors{display:none}
.well.room.lifted.when-open :is(.room-acts,.room-reasons,.room-commit,.room-questions,.room-note,.room-visitors,.room-guests,.room-confirm){display:none!important}
.well.room.lifted .room-when:not([hidden]){display:flex;flex-direction:column;gap:10px;margin:0 24px 4px;padding-top:12px;border-top:1px solid var(--rule)}
.when-kinds{display:flex;gap:2px;padding:2px;background:var(--tone-2)}
.when-kinds button{flex:1;height:32px;padding:0 6px;font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.when-kinds button[aria-checked=true]{color:var(--ink);background:var(--paper);box-shadow:0 0 0 1px var(--rule)}
.when-ask:empty,.when-plain:empty,.when-options:empty{display:none}
.when-ask{margin:0;font-size:13px;line-height:1.4;color:var(--risk)}
.when-options{display:flex;flex-wrap:wrap;gap:6px}
.when-options button,.when-proposals button{min-height:34px;padding:6px 11px;font-size:13px;font-weight:500;text-align:left;box-shadow:0 0 0 1px var(--rule)}
.when-options button:hover,.when-proposals button:hover{background:var(--tone-2)}
.when-proposals{display:flex;flex-direction:column;gap:6px}
.when-proposals button[aria-pressed=true]{color:var(--settled);background:var(--settled-wash);box-shadow:0 0 0 1.5px var(--settled)}
.when-proposals p{margin:0;font-size:13px;color:var(--ink-3)}
.when-field{display:flex;flex-direction:column;gap:5px}
.when-field[hidden]{display:none}
.when-field>span{font-size:10px;color:var(--ink-3)}
.when-field input{height:38px;padding:0 12px;border:0;font:inherit;font-size:14px;color:var(--ink);background:none;box-shadow:0 0 0 1px var(--rule);color-scheme:inherit}
.when-field input:focus{outline:0;box-shadow:0 0 0 1.5px var(--settled)}
.when-plain{margin:0;font-size:14px;line-height:1.4;font-weight:500;color:var(--ink)}
.when-acts{display:flex;flex-wrap:wrap;gap:8px}
.when-acts button{height:36px;padding:0 14px;font-size:13.5px;font-weight:500;box-shadow:0 0 0 1px var(--rule)}
.when-acts button[hidden]{display:none}
.when-acts .adopt{color:var(--paper);background:var(--settled);box-shadow:none}
.when-acts .adopt:disabled{color:var(--ink-3);background:none;box-shadow:0 0 0 1px var(--rule);cursor:default}
/* The one-time link stands in for the acts while it shows, as the deferral does, so the sheet keeps its height. */
.well.room.lifted.inviting :is(.room-acts,.room-reasons,.room-commit,.room-questions,.room-note,.room-confirm){display:none!important}
/* On a wide screen a lifted room stands at the right edge, so the corner steps left of it rather than cover its top. */
@media (min-width:721px){body:has(#lift .well.room.lifted) #corner{right:412px}}
/* Visitors sit under the acts: who is here, who was let in, refused or removed, and the one-time link when it is made. */
.well.room.lifted .room-visitors{display:flex;flex-direction:column;gap:4px;margin:4px 24px 0;padding-top:4px;border-top:1px solid var(--rule)}
.visitors-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.visitors-head .mono{font-size:10px;color:var(--ink-3)}
.room-visitors button{height:30px;padding:0 11px;font-size:12.5px;font-weight:500;box-shadow:0 0 0 1px var(--rule)}
.room-visitors button:hover{background:var(--tone-2)}
.room-visitors button[hidden]{display:none}
.visitors-link:not([hidden]){display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--settled-wash);box-shadow:0 0 0 1px var(--settled) inset}
.visitors-link input{height:32px;padding:0 10px;border:0;font:12px 'Geist Mono';color:var(--ink);background:var(--paper);box-shadow:0 0 0 1px var(--rule);min-width:0;text-overflow:ellipsis}
.visitors-link p{margin:0;font-size:12px;line-height:1.4;color:var(--ink-2)}
.visitors-acts{display:flex;gap:6px}
.visitors-acts [data-visit=copy]{color:var(--paper);background:var(--ink);box-shadow:none}
.visitors-acts [data-visit=copy]:hover{background:var(--ink-2)}
.visitors-list{display:flex;flex-direction:column}
.visitor{display:flex;align-items:center;gap:8px;min-height:34px;font-size:13px;color:var(--ink);flex-wrap:wrap}
.visitor .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visitor .mono{font-size:10px;color:var(--ink-3)}
.visitor[data-state=here] .mono{color:var(--settled)}
.visitor[data-state=here] .who::before{content:'';display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;background:var(--settled)}
.visitors-ended{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.visitors-ended .visitor{display:inline;min-height:0}
.visitors-ended .visitor+.visitor::before{content:' · '}
.visitors-ended .visitor .who{color:var(--ink-3);white-space:normal}
.visitor em{flex-basis:100%;order:3;font-style:normal;font-size:12px;color:var(--risk)}
#mirror .open-well{font-weight:400;font-size:13px;color:var(--settled)}

/* A goal's canvas: the slab lifted flat into one sheet of the ground's paper. The goal heads it with no box; work is a
   white plate with a hairline; evidence is a quoted wash with a rule; a watch is a pill. Ink says who acted: Modyl blue,
   the person's pen red, a draft grey, a watch's catch green. Cards say more the nearer the camera (data-depth). */
#mirror .open-canvas{font-weight:400;font-size:13px;color:var(--settled)}
#board{position:absolute;left:0;top:0;z-index:10;transform-origin:0 0;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);overflow:hidden}
#board.flying{box-shadow:0 0 0 1px var(--rule)}
/* The tool row has its own band above the canvas, so no card or label scrolls under it at any width. */
#board{--band:56px}
#board .bd-still,#board .bd-canvas{position:absolute;inset:var(--band) 0 0}
#board::after{content:'';position:absolute;left:0;right:0;top:calc(var(--band) - 1px);height:1px;background:var(--rule);pointer-events:none}
#board.flying::after{visibility:hidden}
#board .bd-still{overflow:hidden;pointer-events:none;padding:0}
#board[data-live=true] .bd-still{visibility:hidden}
#board:not([data-live=true]) .bd-canvas,#board.flying .bd-canvas{visibility:hidden}
#board .bd-canvas{outline:0}
/* The canvas runs tldraw's light theme on both grounds, so its own text and halo tokens take the page palette here.
   Each card is a .tl-html-container, whose colour is --tl-color-text-1, and a title inherits it (dark: 1.1:1). */
#board .bd-canvas .tl-container{--color-background:var(--paper);--tl-color-background:var(--paper);--tl-color-text:var(--ink);
  --tl-color-text-1:var(--ink);background:var(--paper);font-family:Geist,system-ui,sans-serif}
#board .bd-canvas .tl-background{background:var(--paper)}
.bd-still-page{position:absolute;left:0;top:0;transform-origin:0 0}
.bd-still-page svg{position:absolute;left:0;top:0;overflow:visible}
.bd-still-page path,.bd-still-page line{stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:5 4}
.bd-still-page path[data-by=person],.bd-still-page line[data-by=person]{stroke:var(--risk);stroke-dasharray:none}
.bd-still-page path[data-by=agent],.bd-still-page line[data-by=agent]{stroke:var(--settled)}
.bd-still-page path[data-by=catch],.bd-still-page line[data-by=catch]{stroke:var(--ink-2);stroke-dasharray:2 4}
.bd-still-label{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:150px;padding:1px 4px;text-align:center;white-space:pre-line;font:400 12px/1.35 Geist,system-ui,sans-serif;color:var(--ink-3);background:var(--paper);}
.bd-still-label[data-by=agent]{color:var(--settled)}.bd-still-label[data-by=person]{color:var(--risk)}.bd-still-label[data-by=catch]{color:var(--ink-2)}
.bd-still-page .bd-cluster,.bd-still-page .bd-ring{position:absolute}
.bd-still-page .bd-ring{border:1.6px solid var(--risk);}
.bd-still-page .bd-ring[data-by=agent]{border-color:var(--settled)}

.bd-card{box-sizing:border-box;padding:12px 14px;background:var(--paper);box-shadow:0 0 0 1px var(--rule);display:flex;flex-direction:column;gap:4px;overflow:hidden;font-family:Geist,system-ui,sans-serif;color:var(--ink);pointer-events:all}
.bd-kicker{font:500 11px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-title{font-size:14px;font-weight:500;line-height:1.3;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd-body{font-size:12.5px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd-foot{margin-top:auto;font:500 11px var(--label);letter-spacing:.04em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-card[data-kind=goal]{background:none;box-shadow:none;padding:8px 12px}
.bd-card[data-kind=goal] .bd-title{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.bd-card[data-kind=evidence]{background:var(--tone-2);box-shadow:none;border-left:2px solid var(--rule)}
.bd-card[data-kind=evidence] .bd-title{font-weight:400;font-size:13.5px;-webkit-line-clamp:3}
.bd-card[data-kind=evidence][data-tone=gone]{opacity:.6}
.bd-card[data-kind=watch]{box-shadow:0 0 0 1px var(--settled);padding:14px 26px;background:var(--settled-wash)}
.bd-card[data-tone=done] .bd-kicker{color:var(--ink-2)}
.bd-card[data-tone=ask]{box-shadow:0 0 0 1px color-mix(in srgb,var(--risk) 55%,var(--rule))}
.bd-card[data-tone=ask] .bd-kicker{color:var(--risk)}
.bd-card[data-depth=far] .bd-body,.bd-card[data-depth=far] .bd-foot{display:none}
.bd-rels{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.bd-rel{font-size:12px;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2)}
.bd-rel[data-by=agent]{color:var(--settled)}.bd-rel[data-by=person]{color:var(--risk)}.bd-rel[data-by=catch]{color:var(--ink-2)}.bd-rel[data-by=draft]{color:var(--ink-3)}
.bd-card[data-depth=far] .bd-title{font-size:16px}
.bd-card[data-depth=near] .bd-body{-webkit-line-clamp:6}
.bd-card[data-depth=near] .bd-title{-webkit-line-clamp:4}
.bd-flash{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--settled) inset;animation:bd-flash 2.4s var(--ease) forwards;pointer-events:none}
@keyframes bd-flash{0%,40%{opacity:1}100%{opacity:0}}
.bd-people{position:absolute;right:10px;top:9px;display:flex}
.bd-person{width:20px;height:20px;display:grid;place-items:center;margin-left:-4px;font:600 8.5px Geist,system-ui,sans-serif;letter-spacing:.02em;color:var(--paper);background:var(--ink-2);box-shadow:0 0 0 2px var(--paper)}
.bd-person:nth-child(2){background:var(--risk)}.bd-person:nth-child(3){background:var(--ink-2)}
.bd-person[data-as=self],.bd-person[data-as=voice]{width:auto;display:flex;gap:4px;align-items:center;padding:0 7px;font:500 11px var(--label);letter-spacing:.06em;text-transform:uppercase}
.bd-person[data-as=self]{background:var(--ink-2)}.bd-person[data-as=voice]{background:var(--ink-2)}
.bd-person[data-as=voice]::before{content:'';width:8px;height:8px;background:linear-gradient(currentColor,currentColor) 0 50%/2px 4px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/2px 8px no-repeat,linear-gradient(currentColor,currentColor) 100% 50%/2px 5px no-repeat}
.bd-card[data-people] .bd-kicker{padding-right:60px}
.bd-card[data-people]{box-shadow:0 0 0 1.5px var(--ink-2)}
.bd-card:has(.bd-person[data-as=voice]){box-shadow:0 0 0 1.5px var(--ink-2)}
.bd-cluster{box-sizing:border-box;border:1.4px dashed var(--ink-3);pointer-events:none}
.bd-cluster[data-by=agent]{border-color:var(--settled)}.bd-cluster[data-by=person]{border-color:var(--risk)}.bd-cluster[data-by=draft]{border-color:var(--ink-3)}
.bd-cluster[data-kind=ask]{border-style:solid;background:color-mix(in srgb,var(--risk) 4%,transparent)}
.bd-cluster[data-kind=ask][data-by=agent]{background:color-mix(in srgb,var(--settled) 4%,transparent)}
.bd-cluster-label,.bd-ring-label{position:absolute;left:12px;bottom:calc(100% + 4px);display:flex;gap:8px;align-items:baseline;max-width:calc(100% - 24px);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-cluster[data-by=person] .bd-cluster-label,.bd-ring[data-by=person] .bd-ring-label{color:var(--risk)}
.bd-cluster[data-by=agent] .bd-cluster-label,.bd-ring[data-by=agent] .bd-ring-label{color:var(--settled)}
.bd-cluster-label .bd-kicker,.bd-ring-label .bd-kicker{color:inherit}
.bd-cluster-label{bottom:auto;top:-9px;padding:0 6px;line-height:18px;background:var(--paper);font-size:12px}
.bd-cluster-reply{position:absolute;left:12px;top:calc(100% - 9px);max-width:calc(100% - 24px);padding:0 6px;line-height:18px;background:var(--paper);font-size:12.5px;font-weight:400;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.bd-cluster-reply .bd-kicker{display:inline;margin-right:4px}
.bd-cluster-reply[data-by=agent] .bd-kicker{color:var(--settled)}.bd-cluster-reply[data-by=person] .bd-kicker{color:var(--risk)}
.bd-ring{pointer-events:none}
.bd-note{box-sizing:border-box;padding:6px 10px;background:var(--paper);border-left:2px solid var(--settled);display:flex;flex-direction:column;gap:2px;overflow:hidden;font-family:Geist,system-ui,sans-serif;pointer-events:all}
.bd-note[data-by=person]{border-left-color:var(--risk)}
.bd-note .bd-kicker{color:var(--settled);opacity:.8}.bd-note[data-by=person] .bd-kicker{color:var(--risk)}
.bd-note-text{font-size:12.5px;font-weight:500;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bd-ring svg{position:absolute;inset:0;overflow:visible}
.bd-ring rect{fill:none;stroke:var(--risk);stroke-width:1.6}
.bd-ring[data-by=agent] rect{stroke:var(--settled)}.bd-ring[data-by=draft] rect{stroke:var(--ink-3);stroke-dasharray:4 4}
.bd-ring-label{top:auto;bottom:-9px;left:auto;right:16px;padding:0 6px;line-height:18px;background:var(--paper);font-size:12px}

#board .bd-tools{position:absolute;left:14px;top:9px;display:flex;gap:2px;padding:3px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:0 0 0 1px var(--rule),var(--halo);z-index:3}
#board.flying .bd-tools,#board.flying .bd-bar,#board.flying .bd-say,#board.flying .bd-drafts{visibility:hidden}
#board .bd-tools button{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2);position:relative;font-size:20px;line-height:1}
#board .bd-tools button svg{width:18px;height:18px}
#board .bd-tools button:hover{background:var(--tone-2);color:var(--ink)}
#board .bd-tools button[aria-pressed=true]{color:var(--settled);background:var(--settled-wash)}
#board .bd-tools button[data-tip]:hover::after,#board .bd-tools button[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;top:40px;left:0;white-space:nowrap;font:500 11px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--paper);padding:5px 7px;box-shadow:0 0 0 1px var(--rule);pointer-events:none}
#board .bd-tools .sep{width:1px;margin:6px 3px;background:var(--rule)}
#board .bd-bar{position:absolute;z-index:4;display:flex;gap:2px;padding:3px;background:var(--ink);box-shadow:var(--halo)}
#board .bd-bar button{height:32px;padding:0 12px;font-size:13px;font-weight:500;color:var(--paper)}
#board .bd-bar button:hover{background:color-mix(in srgb,var(--paper) 14%,transparent)}
#board .bd-say{position:absolute;z-index:4;width:min(380px,calc(100% - 16px));padding:14px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);display:flex;flex-direction:column;gap:10px}
#board .bd-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px}
#board .bd-chips span{padding:3px 8px;background:var(--tone-2);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board .bd-chips i{font-style:normal;color:var(--risk)}
#board .bd-say input{border:0;padding:10px 12px;font-size:15px;background:var(--settled-wash);box-shadow:0 0 0 1px var(--settled) inset;outline:0;min-height:42px}
#board .bd-say input:focus{background:var(--paper);box-shadow:0 0 0 1.5px var(--risk) inset}
#board .bd-say-acts{display:flex;justify-content:flex-end;gap:6px}
#board .bd-say-acts button{height:34px;padding:0 14px;font-size:13.5px;font-weight:500;box-shadow:0 0 0 1px var(--rule)}
#board .bd-say-acts [type=submit]{background:var(--ink);color:var(--paper);box-shadow:none}
#board .bd-drafts{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;flex-direction:column;gap:6px;max-width:min(420px,calc(100% - 28px))}
#board .bd-drafts div{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;background:var(--paper);box-shadow:0 0 0 1px var(--ink-3);font-size:12.5px}
#board .bd-drafts .mono{font-size:9.5px;color:var(--ink-3)}
#board .bd-drafts span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board .bd-drafts button{height:28px;padding:0 9px;font-size:12px;font-weight:500;box-shadow:0 0 0 1px var(--rule)}
/* Since you were here: what Modyl did on this canvas while the person was away, with a replay that walks them through it. */
#board .bd-away{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:3;width:max-content;max-width:min(720px,calc(100% - 520px));display:flex;align-items:center;gap:10px;padding:7px 7px 7px 14px;background:var(--paper);box-shadow:0 0 0 1px var(--settled),var(--halo);font-size:13px;line-height:1.35}
#board .bd-away[hidden]{display:none}
#board .bd-away .mono{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--settled);white-space:nowrap}
#board .bd-away-what{flex:1;min-width:0;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#board .bd-away button{height:30px;padding:0 12px;font-size:13px;font-weight:500;flex:none}
#board .bd-away [data-replay]{background:var(--settled);color:var(--paper)}
#board .bd-away [data-replay]:disabled{opacity:.6;cursor:default}
#board .bd-away [data-dismiss]{width:30px;padding:0;font-size:18px;color:var(--ink-3)}
#board .bd-away [data-dismiss]:hover{background:var(--tone-2);color:var(--ink)}
#board.flying .bd-away{visibility:hidden}
#board .bd-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
#board .bd-list button:focus{outline:0}
/* While the canvas is up it is the page: the ground behind it dims and its chrome steps aside. The dock stays. */
#stage.board-open #gl{filter:saturate(.6) opacity(.45)}
#stage.board-open #wells{visibility:hidden}
#stage.board-open #source-sheet{z-index:12}
@media (max-width:720px){
  #board{}
  #board .bd-tools{left:auto;right:10px}
  #board .bd-card[data-kind=goal] .bd-title{-webkit-line-clamp:4}
  #board .bd-tools button[data-tip]::after{display:none!important}
  #board .bd-drafts{left:10px;right:10px;bottom:10px;max-width:none}
  #board .bd-away{left:8px;right:8px;top:auto;bottom:12px;transform:none;width:auto;max-width:none;flex-wrap:wrap;row-gap:2px;padding-top:9px}
  #board .bd-away .mono{flex-basis:calc(100% - 40px);order:-2}
  #board .bd-away [data-dismiss]{order:-1;margin:-6px 0 -4px}
}

/* A chart in a well (ground-chart.js chartBody). In the plate a still of its bars at the label floor, Modyl's marked rows in
   its blue; lifted, Flint's chart with what the person points at in words beneath it and the questions about it as a
   list, each with Modyl's answer and what it marked. */
.well.chart{justify-content:flex-start;padding:20px 22px 16px}
.well.chart:not(.lifted) .chart-sheet,.well.chart.lifted .chart-plate{display:none}
.chart-plate{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.chart-head{display:flex;justify-content:space-between;align-items:center}
.chart-kind{font-size:26px;line-height:1;letter-spacing:.04em;color:var(--ink-3)}
.chart-count{display:flex;align-items:center;gap:4px;font-size:26px;line-height:1;letter-spacing:.04em;color:var(--settled)}
.chart-count svg{width:26px;height:26px;fill:currentColor}
.chart-still{flex:1;min-height:0;width:100%;overflow:visible}
.chart-still rect,.chart-still circle{fill:var(--ink-3)}
.chart-still [data-marked=true]{fill:var(--settled)}
.chart-still line,.chart-still polyline{stroke:var(--rule);stroke-width:1.5;fill:none}
.chart-still polyline{stroke:var(--ink-3);stroke-width:3}
/* The chart and what the person points at hold still; only the questions scroll, newest first, so earlier answers stay
   readable to their last word. */
#lift .well.chart.lifted{width:min(760px,calc(100vw - 32px));max-height:var(--lift-max,calc(100dvh - 184px));overflow:hidden;display:flex;flex-direction:column}
@media (max-width:720px){#lift .well.chart.lifted{padding:24px 18px 12px}}
.well.chart.lifted .well-body{flex:1;min-height:0;display:flex;flex-direction:column}
.well.chart.lifted .chart-sheet{flex:1;min-height:0;display:flex;flex-direction:column}
.well.chart.lifted .well-head h2{margin-bottom:8px}
.well.chart .well-foot{display:none!important}
.chart-mount{width:100%;min-height:220px;flex:none}
/* Room above the plot, so Modyl's note can stand over the bars it names instead of on them. */
.chart-mount [data-flint-chart]{padding-top:42px}
.chart-pointing{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--ink-3);flex:none}
.chart-pointing b{font-weight:600;color:var(--ink)}
.chart-asks{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--rule);flex:1;min-height:72px;overflow-y:auto;overscroll-behavior:contain}
.chart-asks.more{mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.chart-asks:focus-visible{outline:2px solid var(--settled);outline-offset:2px}
.chart-ask{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.45}
.chart-ask p{margin:0}
.chart-ask p+p{margin-top:6px}
.chart-ask p{padding-left:56px;text-indent:-56px}
.chart-ask .who{display:inline-block;width:52px;text-indent:0;font:500 11px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.chart-ask .who[data-by=agent]{color:var(--settled)}
.chart-about{color:var(--ink-3);font-size:13px}
.chart-ask .chart-a.waiting,.chart-ask .chart-did{text-indent:0}
.chart-a.waiting{color:var(--ink-3)}
/* The newest exchange sits under the chart it marks; earlier ones step back. */
.chart-ask+.chart-ask{color:var(--ink-2)}
.chart-did{font-size:13px;color:var(--settled)}
.chart-did.missed{color:var(--risk)}

/* A file in a well (ground-files.js fileBody). In the plate a still of the file under its kind and thread count at the label
   floor; lifted, a sheet read a page at a time with its threads and proposals in a rail beside the words they name. */
.well.file{justify-content:flex-start;padding:20px 22px 0}
.well.file:not(.lifted) .file-sheet,.well.file.lifted .file-plate{display:none}
.file-plate{display:flex;flex-direction:column;gap:12px;min-height:0;height:100%}
.file-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.file-kind{font-size:26px;line-height:1;letter-spacing:.04em;color:var(--ink-3)}
.file-count{display:flex;align-items:center;gap:4px;font-size:26px;line-height:1;letter-spacing:.04em;color:var(--risk)}
.file-count svg{width:26px;height:26px;fill:currentColor}
.file-picture{flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.file-picture p{margin:0 0 6px;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.file-picture p.h1{font-size:23px;font-weight:620;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
/* A sheet's still keeps each column at its own width, so no cell is cut into its neighbour; the columns that do not
   fit run past the window's right edge and fade there, as the rows fade at its foot. */
.file-picture:has(table){-webkit-mask-image:linear-gradient(#000 70%,transparent),linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(#000 70%,transparent),linear-gradient(90deg,#000 82%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.file-picture table{border-collapse:collapse;font-size:19px;font-variant-numeric:tabular-nums}
.file-picture td{padding:4px 16px 4px 0;border-bottom:1.5px solid var(--rule);white-space:nowrap}
.file-picture td[data-num]{text-align:right}
.file-picture td[data-thread]{box-shadow:inset -3px 0 var(--risk)}
.file-picture td[data-proposed]{color:var(--settled)}
.file-picture .pdf-page,.file-picture .slide{width:100%;box-shadow:0 0 0 1px var(--rule)}
.file-picture del{color:var(--ink-3)}.file-picture ins{color:var(--settled);text-decoration:none}
.well.file[data-state=closed] .file-picture{-webkit-mask-image:none;mask-image:none;color:var(--ink-3)}
.socket.file[data-state=new]{background:color-mix(in srgb,var(--settled-wash) 80%,transparent);box-shadow:none;outline:1.6px dashed var(--ink-3);outline-offset:-1.6px}
.socket.file[data-state=closed]{background:color-mix(in srgb,var(--tone-3) 90%,transparent);box-shadow:0 0 0 1.4px var(--tone-4) inset}

#lift .well.file.lifted{width:min(880px,calc(var(--stage-w) - 32px));height:min(780px,var(--lift-max,calc(100dvh - 48px)));max-height:none;overflow:hidden;display:flex;flex-direction:column;padding:22px 24px 14px}
@media (min-width:721px){#lift .well.file.pipeline.lifted{width:min(1080px,calc(var(--stage-w) - 32px))}
  #lift .well.file.pipeline .file-page{grid-template-columns:minmax(0,1fr) 320px;column-gap:24px}}
.well.file.lifted .well-head h2{margin-bottom:12px}
.well.file.lifted .well-body{flex:1;min-height:0;display:flex;flex-direction:column}
.well.file .well-foot{display:none!important}
.file-sheet{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.file-page{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 248px;column-gap:28px;overflow:hidden;position:relative}
.file-main{min-width:0}
.file-rail{position:relative}
.file-rail .card{right:2px}
.file-unit{position:relative;padding-bottom:calc(10px + var(--room,0px))}
.file-unit.single{padding-bottom:var(--room,0px)}
.file-main .words{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink);outline:none;white-space:pre-wrap;overflow-wrap:anywhere}
.file-main .words.h1{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.file-main .words.h2{font-size:17px;font-weight:600;letter-spacing:-.01em}
.file-main .words[contenteditable]:hover{background:var(--tone-2)}
.file-main .words[contenteditable]:focus{background:var(--settled-wash);box-shadow:0 0 0 5px var(--settled-wash)}
.file-main .words[data-by]{box-shadow:-10px 0 0 -8px var(--ink-2)}
.file-main .words[data-by=agent]{box-shadow:-10px 0 0 -8px var(--settled)}
.file-by{display:block;margin-top:2px;font-size:10px;color:var(--ink-3)}
.file-by b{font-weight:500;color:var(--ink-2)}.file-by[data-by=agent] b{color:var(--settled)}
.file-main mark{background:color-mix(in srgb,var(--risk) 13%,transparent);color:inherit;border-bottom:1.5px solid color-mix(in srgb,var(--risk) 60%,transparent);transition:background .2s}
.file-main mark.hot{background:color-mix(in srgb,var(--risk) 26%,transparent)}
.file-main del{color:var(--ink-3);text-decoration-color:var(--ink-3)}
.file-main ins{color:var(--settled);background:var(--settled-wash);text-decoration:none;box-shadow:0 1.5px 0 var(--settled)}
.file-gone{color:var(--ink-3);font-size:15px}

.file-bar{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--rule)}
.file-tabs{display:flex;gap:4px}
.file-tabs:empty{display:none}
.file-tabs button{height:28px;padding:0 10px;font-size:13px;color:var(--ink-2)}
.file-tabs button[aria-pressed=true]{background:var(--tone-2);color:var(--ink);font-weight:500}
.file-ref{flex:none;min-width:34px;font-size:11px;color:var(--ink-3);white-space:nowrap}
/* The bar keeps one height whatever the cell says, because its height sets how many rows a page holds. A value the
   field cannot hold ends in an ellipsis. */
.file-input{flex:1;min-width:0;height:32px;border:0;padding:0 10px;font:400 14px 'Geist Mono',monospace;letter-spacing:0;background:var(--tone-2);text-overflow:ellipsis}
.file-input:focus{outline:none;box-shadow:0 0 0 1.5px var(--settled) inset;background:var(--paper)}
/* With no cell picked the bar is a quiet line that says what picking one does, not an empty grey field. */
.file-input:disabled{background:transparent;padding-left:0;font:400 13px Geist,sans-serif}
.file-input::placeholder{color:var(--ink-3)}
.file-ref:empty{display:none}
.file-ask{height:32px;padding:0 12px;font-size:13px;font-weight:500;box-shadow:0 0 0 1px var(--rule)}
.file-ask:disabled{opacity:.45;cursor:default}

.file-main table.grid{border-collapse:collapse;width:100%;font-size:14.5px;font-variant-numeric:tabular-nums}
.grid thead th{font:500 11px var(--label);letter-spacing:.06em;color:var(--ink-3);text-align:left;padding:0 10px 6px;border-bottom:1px solid var(--rule)}
.grid tbody th{font:500 11px var(--label);color:var(--ink-3);text-align:right;padding:0 8px 0 0;width:28px;vertical-align:top;padding-top:9px}
.grid td{position:relative;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top;cursor:cell;white-space:nowrap}
.grid tr.file-unit{padding:0}
.grid tr.file-unit>*{padding-bottom:calc(8px + var(--room,0px))}
.grid td[data-num]{text-align:right}
.grid.pipeline td:not([data-num]):not([data-cell^="A"]){white-space:normal}
/* A pipeline is read by its own column names, so the sheet's letters and row numbers step aside. */
.grid.pipeline thead,.grid.pipeline tbody th{display:none}
.grid.pipeline tr.head td{font:500 11px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:0;cursor:default}
.grid.pipeline tr.head td[data-num]{text-align:right}
.grid td:hover{background:var(--tone-2)}
.grid td.on{box-shadow:0 0 0 1.5px var(--settled) inset;background:var(--settled-wash)}
.grid td[data-thread]::after{content:'';position:absolute;right:0;top:0;border:5px solid transparent;border-top-color:var(--risk);border-right-color:var(--risk)}
.grid td[data-thread].hot{background:color-mix(in srgb,var(--risk) 10%,transparent)}
.grid td[data-by]{box-shadow:inset 2px 0 var(--ink-2)}
.grid td[data-by=agent]{box-shadow:inset 2px 0 var(--settled)}
/* Someone changed this cell in the Google Sheet itself. */
.grid td[data-by=sheet]{background:color-mix(in srgb,var(--ink-2) 8%,transparent)}
.file-main [data-ring]>.words{background:color-mix(in srgb,var(--risk) 12%,transparent);box-shadow:0 0 0 2px var(--risk);}
.grid td del{display:block;font-size:12px}
.grid td ins{display:block}

.pdf-page,.slide{position:relative;background:#fff;box-shadow:0 0 0 1px var(--rule),var(--halo);overflow:hidden}
.pdf-page canvas{display:block;width:100%;height:100%}
.file-main .pdf-page{cursor:crosshair;touch-action:none}
.pdf-mark{position:absolute;background:color-mix(in srgb,var(--risk) 12%,transparent);box-shadow:0 0 0 1.5px var(--risk);transition:background .2s}
.pdf-mark.hot{background:color-mix(in srgb,var(--risk) 24%,transparent)}
.file-main td[data-ring]{box-shadow:inset 0 0 0 2px var(--risk);background:color-mix(in srgb,var(--risk) 12%,transparent)}
.file-main .words .card-link{margin:0;font-size:inherit;font-weight:500;padding:0;border:0;background:none;cursor:pointer}
.pdf-mark.ring{background:color-mix(in srgb,var(--risk) 14%,transparent);box-shadow:0 0 0 2px var(--risk)}
.pdf-mark.draft{background:color-mix(in srgb,var(--settled) 10%,transparent);box-shadow:0 0 0 1.5px var(--settled)}
.pdf-ghost{position:absolute;box-shadow:0 0 0 1.5px var(--settled);background:color-mix(in srgb,var(--settled) 8%,transparent);pointer-events:none}
.slide{container-type:inline-size;color:#1d232a}
.slide .shape{position:absolute;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.slide .words{margin:0;line-height:1.2;font-size:inherit;color:inherit}

.card{position:absolute;left:0;right:0;padding:12px 14px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);font-size:13px;line-height:1.45}
.card p{margin:0}
.card-who{color:var(--ink-3);font-size:12px;margin-bottom:3px!important}
.card-who b{color:var(--ink);font-weight:600}
.card-who time{margin-left:4px}
.card-text{color:var(--ink);overflow-wrap:anywhere}
.card.thread{border-left:0}
.card.thread[data-by=agent] .card-who b{color:var(--settled)}
.card-reply{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.card.proposal{background:var(--settled-wash);box-shadow:0 0 0 1px var(--settled)}
.card.proposal .card-who b{color:var(--settled)}
.card.proposal.stale{background:var(--tone-2);box-shadow:0 0 0 1px var(--rule)}
.card.proposal.refused{background:color-mix(in srgb,var(--risk) 6%,var(--paper));box-shadow:0 0 0 1px color-mix(in srgb,var(--risk) 35%,transparent)}
.card.proposal.refused .card-who b{color:var(--risk)}
/* An exception: what needs a look, what it rests on, and who owns it. */
.card.exception{box-shadow:0 0 0 1px color-mix(in srgb,var(--risk) 45%,var(--rule)),var(--halo)}
/* The deal the card speaks of carries the card's colour on its row, and not on the room an inline card fills below it. */
.grid tr[data-exception]>td{background:linear-gradient(color-mix(in srgb,var(--risk) 6%,transparent) 0 0) top/100% calc(100% - var(--room,0px)) no-repeat}
.grid tr[data-exception]>td:nth-child(2){background:linear-gradient(var(--risk) 0 0) left top/3px calc(100% - var(--room,0px)) no-repeat,linear-gradient(color-mix(in srgb,var(--risk) 6%,transparent) 0 0) top/100% calc(100% - var(--room,0px)) no-repeat}
.exception-item+.exception-item{margin-top:6px;padding-top:6px;border-top:1px solid var(--rule)}
.exception-title{display:block;width:100%;text-align:left;font-weight:600;color:var(--risk);padding:2px 0}
.exception-title[aria-expanded=false]{color:var(--ink-2);font-weight:500}
.exception-title[aria-expanded=false]::before{content:'';display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;background:var(--risk)}
.exception-title:hover{text-decoration:underline}
.exception-item .card-text{margin-top:2px!important}
.card-sources{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:6px!important;font-size:12px;color:var(--ink-3)}
.card-sources .card-link{margin:0}
.card-owner{margin-top:4px!important;font-size:12px;color:var(--ink-3)}
.card-owner b{font-weight:600;color:var(--ink-2)}
.card[aria-busy=true] .card-acts{opacity:.6;pointer-events:none}
.card.composer{box-shadow:0 0 0 1.5px var(--settled),var(--halo)}
.card-quote{margin:4px 0 8px;padding-left:8px;border-left:2px solid var(--rule);color:var(--ink-2);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* A thread names its words in the same mark the passage carries, so a card below or beside the text says which words it is about. */
.card-quote.marked{margin:0 0 6px;padding:0;border:0;color:var(--ink)}
.card-quote.marked mark{background:color-mix(in srgb,var(--risk) 13%,transparent);color:inherit;border-bottom:1.5px solid color-mix(in srgb,var(--risk) 60%,transparent);}
.card textarea{display:block;width:100%;margin:6px 0 0;padding:7px 9px;border:0;resize:none;field-sizing:content;min-height:3.2em;max-height:12em;font:inherit;color:var(--ink);background:var(--tone-2)}
.card textarea:focus{outline:none;box-shadow:0 0 0 1.5px var(--settled) inset;background:var(--paper)}
.card-acts{display:flex;gap:6px;margin-top:10px}
.card-acts button{height:30px;padding:0 12px;font-size:12.5px;font-weight:500;box-shadow:0 0 0 1px var(--rule);background:var(--paper)}
.card-acts button:hover{background:var(--tone-2)}
.card-acts .primary{color:var(--paper);background:var(--settled);box-shadow:none}
.card-acts .primary:hover{background:var(--settled)}
.card-link{margin-top:6px;font-size:12px;font-weight:500;color:var(--settled)}
.card-link:hover{text-decoration:underline}
.card-links{display:flex;gap:14px}
.card.thread.folded{padding:8px 14px;background:transparent;box-shadow:0 0 0 1px var(--rule)}
.card.thread.folded .card-who{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
.card-gist{color:var(--ink-3)}
.card.thread.folded .card-link{margin-top:2px}
.file-cols{position:relative;flex:none}
.file-cols summary{list-style:none;cursor:pointer;margin:0;white-space:nowrap}
.file-cols summary::-webkit-details-marker{display:none}
.file-cols menu{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;min-width:180px;max-height:50vh;overflow:auto;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);z-index:3}
.file-cols menu button{display:block;width:100%;padding:7px 10px;text-align:left;font-size:12.5px;color:var(--ink)}
.file-cols menu button:hover{background:var(--tone-2)}
/* What the pipeline review did not check, said once for every deal it covers, in the risk colour so it never reads as a pass. */
.file-review{margin:0 0 10px;padding:1px 0 1px 10px;border-left:2px solid var(--risk);font-size:12.5px;color:var(--ink-2)}
.file-review b{font-weight:600;color:var(--risk)}
.file-review span{color:var(--ink-3)}
.file-source{margin:0;padding-top:8px;font-size:12.5px;color:var(--ink-3)}
.file-source b{font-weight:600;color:var(--ink-2)}
.file-source .card-link{margin:0}
.file-take{position:relative}
.file-take summary{list-style:none;cursor:pointer;margin:0}
.file-take summary::-webkit-details-marker{display:none}
.file-take menu{position:absolute;right:0;bottom:calc(100% + 8px);margin:0;padding:6px;list-style:none;min-width:200px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),var(--halo);z-index:3}
.file-take menu button{display:block;width:100%;padding:7px 10px;text-align:left;font-size:12.5px;color:var(--ink)}
.file-take menu button:hover{background:var(--tone-2)}

.file-pill{position:absolute;z-index:2;transform:translateX(-50%);height:32px;padding:0 13px;font-size:13px;font-weight:500;color:var(--paper);background:var(--ink);box-shadow:var(--halo)}
.file-foot{display:flex;align-items:center;gap:14px;min-height:34px;padding-top:10px;margin-top:6px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-3)}
.file-people{flex:1;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-people b{font-weight:600;color:var(--ink-2)}
.file-people .who[data-by=guest]{color:var(--ink-2)}.file-people .who[data-by=agent]{color:var(--settled)}
.file-people .sep{color:var(--ink-3)}
.file-people .card-link{margin:0 0 0 10px}
.file-say{margin:0;color:var(--risk)}
.file-say:empty{display:none}
.file-pager{display:flex;align-items:center;gap:6px}
.file-pager span{font-size:10.5px;min-width:40px;text-align:center}
.file-pager button{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-2)}
.file-pager button:hover:not(:disabled){background:var(--tone-2)}
.file-pager button:disabled{opacity:.3;cursor:default}
.file-pager svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:720px){
  #lift .well.file.lifted{width:100%;height:var(--lift-max,100%);padding:24px 18px 10px}
  .file-page{grid-template-columns:minmax(0,1fr);column-gap:0}
  .file-main,.file-rail{grid-area:1/1}
  .file-rail{pointer-events:none}
  .file-rail .card{pointer-events:auto;right:0}
  .file-foot{flex-wrap:wrap;row-gap:2px}
  .file-people{flex-basis:100%;white-space:normal}
  .file-people:empty{display:none}
  .file-bar{flex-wrap:wrap;row-gap:8px}
  .file-cols{flex-basis:100%}
  .file-main table.grid.pipeline{font-size:13.5px}
  .grid.pipeline td{padding-left:6px;padding-right:6px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:720px){
  /* A phone's ground carries no wordmark (Basit's narrow-ground ruling); the view bar spans that row instead. The sign-in
     page shares this sheet and keeps its wordmark, since a stranger there has nothing else that names Modyl. */
  #stage > #brand{display:none}
  #dial,#as-known{display:none!important}
  /* On a phone the goal's own caption runs where the tally would sit, and the tally is the rail's legend, not the work. */
  #readout{left:14px;bottom:178px;gap:12px;visibility:hidden}
  /* The top is one short row (Basit's narrow-ground ruling): the views at the left, the account at the right, and the
  connection only when it is not live. The views sit above the rail, whose paper backdrop spans the phone's width while
  the person looks back, and wrap before they would run under the account. */
  #views{left:12px;right:auto;top:14px;bottom:auto;z-index:9;flex-wrap:wrap;max-width:calc(100% - 92px)}
  #corner{right:12px;top:14px;gap:4px}
  #sync[data-state=live]{display:none}
  /* A lifted window runs from the top of a phone with its own Close, so the corner steps aside until it folds back. */
  body:has(#lift .well.lifted) #corner{visibility:hidden}
  #help{width:30px;height:30px}
  #views{gap:0}#views button{width:29px;height:30px}#views .sep{margin:6px 2px}
  #views button[data-tip]::after{display:none!important}
  #dock{left:14px;right:14px;width:auto;transform:none;bottom:calc(max(10px,env(safe-area-inset-bottom)) + var(--keyboard,0px))}
  #caption{font-size:15px;margin-bottom:10px;white-space:normal;line-height:1.3}
  #dock .after:has(> :not(:empty):not([hidden])){margin-top:6px}
  /* A long reply rises past the rail's foot on a phone, so the dock sits over the resting rail and the opened rail over the dock. */
  #dock{z-index:7}
  #time{top:132px;bottom:210px;width:34px}
  #time:hover,#time:focus-within,#time.pinned,#time.asking{width:min(300px,82vw);z-index:8}
  /* On a phone the answer and the caption fill the space under the rail, so the look-back buttons sit above it. */
  #time .look{top:-44px;bottom:auto}
  #time::before{bottom:-32px;-webkit-mask-image:linear-gradient(#000 calc(100% - 32px),transparent);mask-image:linear-gradient(#000 calc(100% - 32px),transparent)}
  #message{left:14px;right:14px;width:auto;bottom:auto;top:132px}
  /* On a phone a lifted sheet runs the screen's width from the top and ends where its content does, above the composer. */
  #lift .well.lifted{left:0!important;top:0!important;width:100%;height:auto;max-height:var(--lift-max,100%);padding:28px 22px}
  #lift .well.doc.lifted{width:100%;height:var(--lift-max,100%);padding:24px 20px 14px}
  #lift .well.room.lifted{padding:0 0 24px}
  .well.room.lifted .well-head{padding:24px 24px 0}
  /* It stands on the composer's top edge (ground-sheet.js positionSheet sets --floor), so the composer stays whole. */
  #source-sheet{left:0!important;right:0;bottom:calc(100% - var(--floor,100%));top:auto!important;width:100%;max-width:100%;max-height:58vh;}
  /* On a phone the composer stays reachable under the plates, so the marking sheet takes the top of the screen. */
  #rather{left:0;right:0;top:0;width:100%;max-height:60vh;padding:16px 18px 12px;z-index:13}
  #rather .acts{margin-top:10px}
  /* The sheet names the step being marked, so on a phone the looked-back rail folds to its track and leaves the plates to mark. */
  body.rathering #time.pinned:not(:hover,:focus-within){width:34px}
  body.rathering #time.pinned:not(:hover,:focus-within)::before{opacity:0}
  body.rathering #time.pinned:not(:hover,:focus-within) li button{opacity:0;pointer-events:none;transform:translate(-8px,-50%)}
  #said.docked{left:0;right:0;top:auto;bottom:0;width:100%;padding:20px 20px max(16px,env(safe-area-inset-bottom))}
  /* A definition of done is read whole, so its sheet may rise higher than a subject's before it would scroll. */
  #source-sheet.goal{width:100%;max-height:calc(var(--floor,100%) - 96px);padding:14px 18px 12px}
  #source-sheet:is(.team,.access,.services){width:100%;max-height:calc(var(--floor,100%) - 96px);padding:14px 18px 12px}
  /* Every line reads whole, so wrapped lines sit a little tighter on a phone rather than any of them being cut. */
  /* Two to a row, so the four actions take two rows instead of the last one wrapping alone. */
  #source-sheet.goal .done-footer{bottom:-12px;margin-bottom:-12px;padding-bottom:12px}
  #source-sheet.goal .acts:not(:is(.done-line,.team-people,.team-actions,.support-grants,.connections) *){bottom:-12px;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 -12px;padding:4px 0 12px}
  #sheet-body .lines .line-text{padding:3px 0}
}

/* A narrow sheet covers the plate it came from but for a sliver, and that sliver's words read as a stray line, so the
   ground under any lifted sheet steps back to a faint trace at 390 the way it does under an open canvas. */
@media (max-width:720px){body:has(#lift .well.lifted) #stage :is(#gl,#wells){filter:opacity(.05)}}
/* The call: who is speaking, whether Modyl listens, and whether a notice waits. */
#notice{font:inherit;font-size:12px;font-weight:500;color:var(--settled);background:var(--settled-wash);border:0;min-height:28px;padding:0 12px;cursor:pointer}
#notice::before{content:"";display:inline-block;width:6px;height:6px;background:currentColor;margin-right:7px;vertical-align:1px}
#notice[data-state=blocked]{color:var(--paper);background:var(--settled)}
@media (max-width:720px){#notice{min-height:44px;font-size:13px;padding:0 16px}}