/* agentec console, second edition. the book, chapter 09, made real.
   state ticks in steps, space glides on a spring, amber is the only light,
   and there is exactly one amber key on any screen. */

@import url("fonts/faces.css");
@import url("tokens.css");

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{color-scheme:dark}
body{background:var(--ground);color:var(--text);font-family:var(--mono);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100dvh;overflow-x:hidden}
::selection{background:#FFB25333;color:var(--text)}
a{color:var(--run);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%}
p.prose{font-family:var(--sans);font-size:15px;color:var(--text-dim);line-height:1.75}
p.prose b{color:var(--text)}
p.prose.small{font-size:13.5px}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.08}}
@keyframes landin{0%{opacity:0}100%{opacity:1}}
@keyframes rise{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}

/* ============ boot. it prints only what it did ============ */
#boot{position:fixed;inset:0;z-index:100;background:var(--ground);display:flex;
  align-items:center;justify-content:center;cursor:pointer}
#boot.gone{display:none}
#boot .lines{font-size:13px;line-height:2.1;color:var(--text-dim);min-width:min(420px,86vw)}
#boot .lines div{animation:landin var(--tick) var(--step2)}
#boot .lines b{color:var(--text);font-weight:600}
#boot .lines .t{color:var(--text-meta)}
#boot .lines .ok{color:var(--done)}
#boot .lines .am{color:var(--amber)}
#boot .lines .er{color:var(--fail)}

/* ============ frame ============ */
#app{display:none;min-height:100dvh}
#app.on{display:block}

#top{display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ground) 88%,black);
  position:sticky;top:0;z-index:50}
#top .mark{display:flex;align-items:center;gap:9px;flex:none}
#top .mark svg{display:block}
#top .path{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#top .path b{color:var(--text);font-weight:600}
#top .gap{flex:1}
#top .live{font-size:11px;letter-spacing:.05em;display:flex;align-items:center;gap:6px;white-space:nowrap}
#top .live i{width:7px;height:7px;border-radius:2px;background:var(--text-mute);flex:none}
#top .live.ok{color:var(--done)}
#top .live.ok i{background:var(--done);box-shadow:0 0 6px #7CE38Baa,0 0 14px #7CE38B55}
#top .live.bad{color:var(--fail)}
#top .live.bad i{background:var(--fail);box-shadow:0 0 6px #FF6B5Aaa}
#top .live.wait{color:var(--amber)}
#top .live.wait i{background:var(--amber);box-shadow:0 0 6px #FFB25399}
#top .live.dim{color:var(--text-meta)}

/* four tabs. bottom on the phone, a row under the header on a desk */
#tabs{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 94%,black);border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.navbtn{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;
  font-size:12.5px;letter-spacing:.04em;color:var(--text-dim);text-align:left;min-height:44px;
  transition:background var(--tick) var(--step2),color var(--tick) var(--step2)}
.navbtn .k{color:var(--text-meta);font-size:11px;flex:none;text-align:center}
.navbtn:hover{background:var(--raised);color:var(--text)}
.navbtn.here{background:var(--raised);color:var(--amber)}
.navbtn.here .k{color:var(--amber)}
.navbtn:focus-visible{outline:none;background:var(--raised);box-shadow:inset 0 0 0 1px #FFB25366}
#tabs .navbtn{flex-direction:column;gap:4px;padding:7px 2px;font-size:10px;flex:1;align-items:center;min-height:50px;letter-spacing:.02em}
#tabs .navbtn .k{width:auto;font-size:14px}
@media(min-width:901px){
  #tabs{position:sticky;top:52px;bottom:auto;border-top:0;border-bottom:1px solid var(--line);
    padding:8px max(16px,calc((100vw - 1080px)/2));gap:6px;
    background:color-mix(in srgb,var(--ground) 92%,black)}
  #tabs .navbtn{flex-direction:row;flex:0 0 auto;font-size:12.5px;padding:9px 16px;min-height:44px;gap:9px}
}

main{padding:22px 16px 130px;max-width:1080px;width:100%;margin:0 auto;min-width:0}
@media(min-width:901px){main{padding:26px 26px 80px}}
.room{display:none}
.room.here{display:block;animation:landin var(--tick) var(--step2)}
.rhead{margin-bottom:16px}
.rhead h1{font-size:19px;font-weight:600;letter-spacing:-.01em}
.rhead h1 .dollar{color:var(--amber);text-shadow:0 0 12px #FFB25366}
.rhead p{color:var(--text-dim);font-size:15px;margin-top:5px;font-family:var(--sans);max-width:64ch;line-height:1.6}
.rhead p b{color:var(--text)}

/* ============ common pieces ============ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0;position:relative}
.card+.card,main>section>div+div{margin-top:14px}
.card h3{font-size:11px;letter-spacing:.16em;color:var(--amber);font-weight:600;margin-bottom:14px}
.card.glow{border-color:#3A2C18}
.card.glow::before{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,#FFB2530F 0%,transparent 62%)}
.card.glow>*{position:relative}
.card.red{border-color:#FF6B5A55;box-shadow:0 0 0 1px #FF6B5A14,0 14px 44px -30px #FF6B5A}
.card.red h3{color:var(--fail)}

.kv{display:flex;align-items:baseline;font-size:13px;padding:10px 0;border-bottom:1px solid var(--line);min-height:44px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--text-dim)}
.kv .dots{flex:1;margin:0 10px;border-bottom:1px dotted var(--line-bright);transform:translateY(-4px);min-width:18px}
.kv .v{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.kv .v.num{font-size:15px}
button.kv{width:100%;text-align:left;border-radius:6px;padding-left:6px;padding-right:6px;
  transition:background var(--tick) var(--step2)}
button.kv:hover{background:var(--raised)}
button.kv:active{background:var(--amber)}
button.kv:active .k,button.kv:active .v,button.kv:active .arr{color:var(--ink)}
button.kv .arr{color:var(--amber);margin-left:8px;flex:none}
button.kv:focus-visible{outline:none;background:var(--raised)}
.v.ok{color:var(--done)}.v.bad{color:var(--fail)}.v.warn{color:var(--band-orange)}

.key{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);
  font-size:12.5px;font-weight:600;color:var(--ink);background:var(--amber);border-radius:7px;
  padding:11px 16px;min-height:44px;text-align:center;
  box-shadow:0 2px 0 var(--copper),0 4px 16px -6px #FFB25399,0 0 26px -12px #FFB253aa;
  transition:transform var(--tick) var(--step2),box-shadow var(--tick) var(--step2)}
.key:hover{box-shadow:0 2px 0 var(--copper),0 6px 22px -6px #FFB253bb,0 0 34px -10px #FFB253cc}
.key:active{transform:translateY(2px);box-shadow:0 0 0 var(--copper)}
.key.ghost{background:transparent;color:var(--text);border:1px solid var(--line-bright);
  box-shadow:0 2px 0 var(--line);text-shadow:none}
.key.ghost:hover{background:var(--raised);box-shadow:0 2px 0 var(--line)}
.key.danger{background:transparent;color:var(--fail);border:1px solid #FF6B5A44;box-shadow:0 2px 0 #3A1512}
/* the alarm key belongs to a red card. it is loud without spending the screen's one amber. */
.key.alarm{background:var(--fail);color:#1A0806;border:0;box-shadow:0 2px 0 #7A2A20,0 4px 16px -6px #FF6B5A99}
.key.alarm:hover{box-shadow:0 2px 0 #7A2A20,0 6px 22px -6px #FF6B5Abb}
.key.sm{min-height:44px;padding:9px 13px;font-size:11.5px;box-shadow:0 2px 0 var(--line)}
.key:focus-visible{outline:none;box-shadow:0 2px 0 var(--copper),0 0 0 2px var(--amber)}
.key[disabled]{opacity:.45;cursor:not-allowed;background:transparent;color:var(--text-meta);
  border:1px solid var(--line);box-shadow:none}
a.key:hover{text-decoration:none}
.pacts{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}

.chip{font-size:10.5px;letter-spacing:.08em;padding:4px 10px;border-radius:6px;border:1px solid;
  display:inline-block;white-space:nowrap}
.chip.stage{min-width:96px;text-align:center}

.prompt{display:flex;align-items:center;gap:9px;background:#0D0B08;border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;font-size:13.5px;min-height:44px;margin-top:9px}
.prompt .d{color:var(--amber);font-weight:600;flex:none}
.prompt input,.prompt textarea{flex:1;background:none;border:0;color:var(--text);font:inherit;
  font-size:16px;outline:none;min-width:0;resize:vertical}
.prompt input::placeholder,.prompt textarea::placeholder{color:var(--text-meta)}
.prompt:focus-within{border-color:var(--line-bright);box-shadow:0 0 0 1px #FFB25322,0 0 22px -10px #FFB25399}
.plabel{font-size:10px;letter-spacing:.12em;color:var(--text-meta);margin-top:16px}
select.pick{width:100%;background:#0D0B08;border:1px solid var(--line);border-radius:8px;color:var(--text);
  font:inherit;font-size:16px;padding:11px 13px;min-height:44px;outline:none}

#toasts{position:fixed;left:14px;right:14px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:90;
  display:flex;flex-direction:column;gap:6px;pointer-events:none}
@media(min-width:901px){#toasts{left:auto;right:24px;width:430px;bottom:18px}}
.toast{background:#0D0B08;border:1px solid var(--line-bright);border-radius:8px;padding:10px 14px;
  font-size:12px;display:flex;gap:10px;align-items:baseline;animation:rise var(--tick) var(--step2);
  box-shadow:0 10px 34px -14px #000}
.toast .t{color:var(--text-meta)}
.toast .ok{color:var(--done)}.toast .er{color:var(--fail)}

.state{font-size:11.5px;color:var(--text-meta);display:flex;align-items:flex-start;gap:7px;margin-top:12px;
  font-family:var(--sans);line-height:1.6}
.state i{width:6px;height:6px;border-radius:2px;background:var(--text-mute);flex:none;margin-top:5px}
.state.ok i{background:var(--done)}.state.bad i{background:var(--fail)}.state.warn i{background:var(--band-orange)}
.state.bad{color:var(--text-dim)}

/* ============ NEEDS YOU. the shape of every item on the first screen ============ */
.need{border:1px solid var(--line);border-left:3px solid var(--line-bright);border-radius:var(--r);
  background:#0D0B08;padding:16px;margin-bottom:11px}
.need:last-child{margin-bottom:0}
.need.soon{border-left-color:var(--band-orange)}
.need.late{border-left-color:var(--fail)}
.need.done{border-left-color:var(--done);opacity:.72}
.need.first{background:linear-gradient(180deg,#171208 0%,#0D0B08 70%);border-color:#FFB25333}
.nhead{display:flex;align-items:baseline;gap:12px}
.nhead b{font-size:15px;font-weight:600;flex:1;min-width:0;line-height:1.4}
.nhead .when{font-size:12px;color:var(--text-dim);flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.nhead .when.warn{color:var(--band-orange)}
.nhead .when.bad{color:var(--fail)}
.nhead .when.ok{color:var(--done)}
.nsub{font-size:11.5px;color:var(--text-meta);margin-top:4px;letter-spacing:.03em}
.ncost{font-family:var(--sans);font-size:14.5px;color:var(--text-dim);margin-top:8px;line-height:1.6}
.ncost.dim{color:var(--text-meta);font-size:13px}
/* one amber key on the screen: the most urgent thing. everything else is quiet. */
.need .key:not(.ghost):not(.danger){background:transparent;color:var(--amber);border:1px solid #FFB25355;
  box-shadow:0 2px 0 #2A2013}
.need.first .key:not(.ghost):not(.danger){background:var(--amber);color:var(--ink);border:0;
  box-shadow:0 2px 0 var(--copper),0 4px 16px -6px #FFB25399}

/* ============ the deal ============ */
.card.deal .dhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card.deal .dhead b{font-size:16px;font-weight:600}
.card.deal .dhead span{font-size:12px;color:var(--text-dim)}
.dquote{font-family:var(--sans);font-size:15px;color:var(--amber);margin-top:10px;line-height:1.6}
.dnext{font-family:var(--sans);font-size:14.5px;color:var(--text-dim);margin-top:10px;line-height:1.55}
.dnext em{font-style:normal;color:var(--text);white-space:nowrap}
.dnext.big{font-size:16px;color:var(--text);margin-top:6px}
.dline{font-size:12px;color:var(--text-meta);margin-top:12px;letter-spacing:.04em}
.dots4{display:flex;align-items:flex-start;margin:16px 0 4px;gap:0}
.dots4 .dot{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.dots4 .dot::before{content:"";position:absolute;top:5px;left:50%;right:-50%;height:1px;background:var(--line-bright)}
.dots4 .dot:last-child::before{display:none}
.dots4 .dot i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line-bright);background:var(--panel);z-index:1}
.dots4 .dot.on i{background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px #FFB25399}
.dots4 .dot s{text-decoration:none;font-size:10.5px;color:var(--text-dim);text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dots4 .dot.on s{color:var(--text)}
.dots4 .dot u{text-decoration:none;font-size:9.5px;color:var(--text-meta);text-align:center;white-space:nowrap}

.tline{display:flex;flex-direction:column}
.tstep{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);min-height:44px}
.tstep:last-child{border-bottom:0}
.tstep .tdot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-bright);flex:none;margin-top:5px}
.tstep.on .tdot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 10px #FFB25388}
.tstep .tw{flex:1;min-width:0}
.tstep .tw b{font-size:13.5px;font-weight:600;display:block}
.tstep .tw s{text-decoration:none;display:block;font-family:var(--sans);font-size:13.5px;color:var(--text-dim);margin-top:2px;line-height:1.5}
.tstep .tdate{font-size:11.5px;color:var(--text-meta);flex:none;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:2px}
.tstep .tdate.next{color:var(--amber)}

.ladder{margin-top:14px}
.lrow{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid #FFB2531f;flex-wrap:wrap}
.lrow:last-child{border-bottom:0}
.lrow b{font-size:13.5px;font-weight:600;white-space:nowrap}
.lrow .p{color:var(--amber);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
.lrow .w{flex-basis:100%;font-family:var(--sans);font-size:13.5px;color:var(--text-dim);line-height:1.6}

.plrow{width:100%;text-align:left;display:flex;align-items:center;gap:11px;padding:14px;min-height:64px;
  background:#0D0B08;border:1px solid var(--line);border-radius:var(--r);margin-bottom:9px;
  transition:border-color var(--tick) var(--step2),background var(--tick) var(--step2)}
.plrow:last-child{margin-bottom:0}
.plrow:hover{background:var(--raised);border-color:var(--line-bright)}
.plrow .who{flex:1;min-width:0}
.plrow .who b{display:block;font-size:13.5px;font-weight:600}
.plrow .who s{display:block;text-decoration:none;font-size:12px;color:var(--text-dim);font-family:var(--sans);margin-top:2px}
.plrow .wv{font-size:11.5px;color:var(--text-dim);text-align:right;flex:none;max-width:38%}
.plrow .wv s{display:block;text-decoration:none;color:var(--text-meta);font-size:10.5px;margin-top:2px}
.plrow .arr{color:var(--amber);flex:none}
.plrow.door{min-height:56px}
.plnext{font-family:var(--sans);font-size:14.5px;line-height:1.65;color:var(--text-dim)}
@media(max-width:420px){.plrow .wv{display:none}}

/* ============ the engine ============ */
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(min-width:640px){.counts{grid-template-columns:repeat(6,minmax(0,1fr))}}
.count{border:1px solid var(--line);border-radius:var(--r);background:#0D0B08;padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;gap:3px;min-height:64px;
  transition:border-color var(--tick) var(--step2),background var(--tick) var(--step2)}
.count:hover{border-color:var(--line-bright);background:var(--raised)}
.count:active{background:var(--amber)}
.count:active u,.count:active s{color:var(--ink)}
.count u{text-decoration:none;font-size:20px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.count s{text-decoration:none;font-size:10px;color:var(--text-dim);letter-spacing:.04em;text-align:center}

.apcard{border:1px solid #FFB25333;border-radius:var(--r);background:linear-gradient(180deg,#171208 0%,#0D0B08 60%);
  padding:16px;transition:opacity var(--tick) var(--step2)}
.apcard.done{opacity:.6}
.aphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.aphead .d{font-size:12.5px;font-weight:600;color:var(--text)}
.aphead .apn{margin-left:auto;font-size:11px;color:var(--text-meta);font-variant-numeric:tabular-nums}
.aptitle{display:block;font-size:15px;font-weight:600;margin:12px 0 8px}
.strip{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.strip figure{flex:0 0 auto;width:min(72%,240px);scroll-snap-align:start}
.strip img{width:100%;border:1px solid var(--line);border-radius:8px;display:block;background:#000}
.strip figcaption{font-size:10px;color:var(--text-meta);margin-top:5px;text-align:center;letter-spacing:.06em}
.pbody{font-size:14px;line-height:1.85;background:#0A0906;border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;white-space:pre-wrap;word-break:break-word;color:var(--text)}
.pmetas{margin-top:10px;font-size:13px;color:var(--text-dim);line-height:1.75;font-family:var(--sans)}
.pmetas div{margin-bottom:6px}
.pmetas b{color:var(--text);font-family:var(--mono);font-size:10px;letter-spacing:.08em;margin-right:6px}
.gateline{font-size:11.5px;margin-top:12px;font-family:var(--sans);line-height:1.5}
.gateline.ok{color:var(--done)}
.gateline.bad{color:var(--fail)}
.apnav{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.apnav .state{flex:1;min-width:140px}
.apdone{color:var(--done);font-size:13px;font-weight:600}

.prow{width:100%;text-align:left;display:flex;align-items:center;gap:9px;padding:12px 14px;min-height:56px;
  background:#0D0B08;border:1px solid var(--line);border-radius:var(--r);flex-wrap:wrap;margin-bottom:8px;
  transition:border-color var(--tick) var(--step2),background var(--tick) var(--step2)}
.prow:hover{background:var(--raised);border-color:var(--line-bright)}
.prow .d{font-size:11.5px;font-weight:600;color:var(--text);white-space:nowrap;flex:none}
.prow .ti{font-size:12.5px;color:var(--text-dim);flex:1;min-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .kept{font-size:10px;color:var(--done);flex:none}
.prow .kept.bad{color:var(--fail)}

.event .cd{font-size:32px;font-weight:600;font-variant-numeric:tabular-nums;margin:6px 0 0;color:var(--amber);
  text-shadow:0 0 24px #FFB25355}
.event .cd s{text-decoration:none;font-size:12px;color:var(--text-dim);font-weight:400;margin-left:8px;text-shadow:none}
.event .ln{font-family:var(--sans);font-size:14.5px;color:var(--text-dim);margin-top:8px;line-height:1.65}
.event ul{margin:12px 0 0 18px;font-family:var(--sans);font-size:14px;color:var(--text-dim);line-height:1.7}
.event li::marker{color:var(--amber)}
.event.next{border-color:#FFB25355;box-shadow:0 0 0 1px #FFB2531a,0 18px 50px -34px #FFB253}
.kitrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);min-height:44px}
.kitrow:last-child{border-bottom:0}
.kitrow .nm{flex:1;font-size:13px}

/* ============ the firm ============ */
.brief{border:1px solid var(--line);border-radius:var(--r);background:#0D0B08;padding:16px;margin-bottom:11px}
.brief .top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.brief b{font-size:13.5px;font-weight:600}
.brief .ln{font-family:var(--sans);font-size:14px;color:var(--text-dim);margin-top:7px;line-height:1.6}
.duty{width:100%;text-align:left;display:flex;align-items:center;gap:11px;padding:12px 0;min-height:52px;
  border-bottom:1px solid var(--line);transition:background var(--tick) var(--step2)}
.duty:last-of-type{border-bottom:0}
.duty:hover{background:var(--raised)}
.duty .nm{flex:1;min-width:0}
.duty .nm b{display:block;font-size:13px;font-weight:600}
.duty .nm s{display:block;text-decoration:none;font-size:11px;color:var(--text-meta);margin-top:2px}
.duty .arr{color:var(--amber);flex:none}
.docgroup{font-size:10px;letter-spacing:.14em;color:var(--text-meta);margin:18px 0 8px}
.docgroup:first-child{margin-top:0}
.shiprow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);min-height:56px;flex-wrap:wrap}
.shiprow:last-child{border-bottom:0}
.shiprow .nm{flex:1;min-width:150px}
.shiprow .nm b{font-size:13px;font-weight:600;display:block}
.shiprow .nm s{text-decoration:none;font-size:12px;color:var(--text-dim);font-family:var(--sans)}
.shiprow .st{font-size:10px;letter-spacing:.08em;padding:5px 9px;border-radius:5px;border:1px solid;white-space:nowrap}
.src{font-size:11.5px;color:var(--text-meta);font-family:var(--sans);display:block;margin-top:3px;line-height:1.5}
.tokengrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;margin-top:8px}
.tok{border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:left;min-height:64px;
  transition:border-color var(--tick) var(--step2),transform var(--tick) var(--step2)}
.tok:hover{border-color:var(--line-bright)}
.tok:active{transform:translateY(1px)}
.tok i{display:block;height:34px}
.tok s{display:block;text-decoration:none;font-size:9.5px;color:var(--text-dim);padding:6px 9px 2px}
.tok u{display:block;text-decoration:none;font-size:10px;color:var(--text);padding:0 9px 8px;font-variant-numeric:tabular-nums}

/* ============ tap to copy ============ */
.copyrow{width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;background:#0D0B08;
  padding:13px 15px;margin-bottom:9px;display:block;min-height:44px;
  transition:border-color var(--tick) var(--step2),background var(--tick) var(--step2)}
.copyrow:hover{border-color:var(--line-bright);background:#100E0A}
.copyrow:active{background:var(--amber)}
.copyrow:active *{color:var(--ink)!important}
.copyrow .lbl{font-size:10px;letter-spacing:.12em;color:var(--amber);display:flex;gap:8px;align-items:center}
.copyrow .lbl em{font-style:normal;color:var(--text-meta);letter-spacing:0;margin-left:auto;font-size:10px}
.copyrow .txt{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--text-dim);margin-top:7px}

/* ============ the sheet ============ */
.scrim{position:fixed;inset:0;z-index:79;background:#05040288;opacity:0;pointer-events:none;
  transition:opacity var(--tick) var(--step2)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;inset:auto 0 0 0;z-index:80;background:var(--panel);border-top:1px solid var(--line-bright);
  border-radius:16px 16px 0 0;padding:20px 16px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(105%);visibility:hidden;max-height:86dvh;overflow:auto;
  transition:transform .42s var(--spring),visibility 0s linear .42s;
  box-shadow:0 -18px 60px -30px #000}
.sheet.open{transform:translateY(0);visibility:visible;transition:transform .42s var(--spring),visibility 0s}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:sticky;top:-20px;
  background:var(--panel);padding:6px 0 10px;z-index:2}
.sheet-head h3{font-size:12px;letter-spacing:.14em;color:var(--amber);flex:1;min-width:0}
@media(min-width:901px){
  .sheet{left:auto;right:24px;bottom:24px;width:500px;border:1px solid var(--line-bright);border-radius:16px;
    transform:translateY(24px) scale(.98);opacity:0;pointer-events:none;visibility:hidden;
    transition:transform .42s var(--spring),opacity var(--tick) var(--step2),visibility 0s linear .42s;
    max-height:82dvh;padding:20px}
  .sheet.open{transform:none;opacity:1;pointer-events:auto;visibility:visible;
    transition:transform .42s var(--spring),opacity var(--tick) var(--step2),visibility 0s}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  #boot{display:none!important}
  #app{display:block}
}

/* on a wide screen the first screen is two columns under the ask list, so the
   deal and the week sit beside each other instead of stacking into empty space */
@media(min-width:1100px){
  #room-today.here{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  #room-today.here>*{margin-top:0}
  #room-today .rhead,#room-today #needs-card,#room-today #health-today{grid-column:1/-1}
  #room-today #health-today:empty{display:none}
}