/* tidekeeper: tokens and components shared by every board.
   Colour means mode. Shore (ochre, outlined) is easy mode: counted without knowing who.
   Water (blue, filled) is hard mode: recognised, with consent. Buttons are ink, never an accent.
   The look is Harbour office (14 October 2026): figures and headings in a serif, as a tide table
   sets them, on sheets told apart by tone; labels plain; one ink rule over the figures. Every text
   colour is at least 5 to 1 against its ground in both themes. */

.tl{
  --bg:#0A1417; --surface:#121E22; --raised:#1C2C31; --line:#263A3F; --line-2:#5F757A;
  --text:#E8F0EE; --text-2:#B4C4C2; --text-3:#93A8A8;
  --shore:#BD8A35; --shore-text:#E2B66C; --shore-wash:rgba(189,138,53,.17);
  --water:#5B8FE8; --water-text:#8DB4F5; --water-wash:rgba(91,143,232,.18);
  --live:#38A68E; --live-text:#6FCFB7; --live-wash:rgba(56,166,142,.16);
  --alert:#E8705C; --alert-text:#F28B78; --alert-wash:rgba(232,112,92,.14);
  --ink:#E8F0EE; --on-ink:#0A1417; --on-mark:#0A1417;
  --shadow:0 18px 48px rgba(0,0,0,.5);
  --font:"Schibsted Grotesk","Helvetica Neue",Helvetica,system-ui,sans-serif;
  --serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
  font-family:var(--font); font-size:15px; line-height:1.45; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
.tl[data-theme="light"]{
  --bg:#EEF2F0; --surface:#FBFCFB; --raised:#E1E8E5; --line:#CBD5D1; --line-2:#788A84;
  --text:#0C191B; --text-2:#3A4D50; --text-3:#4F6366;
  --shore:#A8741A; --shore-text:#734C00; --shore-wash:rgba(168,116,26,.14);
  --water:#2F6BD6; --water-text:#1B4EA6; --water-wash:rgba(47,107,214,.12);
  --live:#16876F; --live-text:#0F6B58; --live-wash:rgba(22,135,111,.12);
  --alert:#C2412D; --alert-text:#B23A26; --alert-wash:rgba(194,65,45,.10);
  --ink:#0C191B; --on-ink:#EEF2F0; --on-mark:#FFFFFF;
  --shadow:0 18px 48px rgba(14,27,29,.16);
  color-scheme:light;
}
.tl *,.tl *::before,.tl *::after{box-sizing:border-box}
.tl h1,.tl h2,.tl h3,.tl h4,.tl p,.tl ul,.tl ol,.tl dl,.tl dd,.tl figure{margin:0}
.tl ul,.tl ol{padding:0;list-style:none}
.tl h1{font:500 38px/1.1 var(--serif);letter-spacing:-.018em}
.tl h2{font:500 23px/1.22 var(--serif);letter-spacing:-.01em}
.tl h3{font-size:13px;line-height:1.3;font-weight:500;color:var(--text-2)}
.tl h4{font-size:15px;font-weight:650}
/* A card's heading is a level below the page's, and looks like a label;
   a heading inside a card's section is a level below that. */
.tl h2.lbl{font:500 13px/1.3 var(--font);letter-spacing:0;color:var(--text-2)}
.tl h3.sub{font:650 15px/1.45 var(--font);color:inherit}
/* Where the keyboard is: one mark for everything that takes the focus. */
.tl :focus-visible{outline:2px solid var(--shore);outline-offset:2px}
.tl button.kpi:focus-visible,.tl .nav:focus-visible,.tl .tab:focus-visible{outline-offset:-2px}
/* Words for a screen reader that the page does not show. */
.tl .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tl a{color:inherit}
.tl button{font-family:inherit}
.tl .mono,.tl code,.tl kbd,.tl pre{font-family:var(--mono)}
.tl code{font-size:.92em}
.tl .num{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums}
.tl .t2{color:var(--text-2)} .tl .t3{color:var(--text-3)}
.tl .small{font-size:13px} .tl .xs{font-size:12px} .tl .big{font-size:17px;line-height:1.5}
.tl .b{font-weight:650}
.tl .eyebrow{font:500 13px/1.3 var(--font);color:var(--text-3)}
.tl .shore-t{color:var(--shore-text)} .tl .water-t{color:var(--water-text)} .tl .live-t{color:var(--live-text)} .tl .alert-t{color:var(--alert-text)}

/* layout */
.tl .row{display:flex;align-items:center;gap:12px}
.tl .col{display:flex;flex-direction:column;gap:12px;min-width:0}
.tl .wrap{flex-wrap:wrap}
.tl .between{justify-content:space-between}
.tl .top{align-items:flex-start}
.tl .grow{flex:1 1 0;min-width:0}
.tl .sp{flex:1 1 auto}
.tl .g8{gap:8px} .tl .g4{gap:4px} .tl .g16{gap:16px} .tl .g20{gap:20px} .tl .g24{gap:24px} .tl .g32{gap:32px}
.tl .grid{display:grid;gap:16px}
.tl .c2{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.tl .c3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.tl .c4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.tl .hr{height:1px;background:var(--line);flex:none}
.tl .scroll{overflow-x:auto}
.tl .center{align-items:center;justify-content:center;text-align:center}

/* app shell */
.tl.app{display:flex;flex-wrap:wrap;align-items:stretch;min-height:100vh}
.tl.page{min-height:100vh}
.tl .side,.tl.side{flex:0 0 236px;display:flex;flex-direction:column;gap:2px;padding:18px 12px;border-right:1px solid var(--line);background:var(--bg)}
.tl .main{flex:999 1 560px;min-width:0;padding:40px 48px 72px;display:flex;flex-direction:column;gap:28px}
.tl .logo{display:inline-flex;align-items:center;gap:9px;font:600 20px/1 var(--serif);letter-spacing:-.01em;color:var(--text);text-decoration:none;padding:0 10px}
.tl .logo svg{width:24px;height:24px;flex:none}
.tl .mark{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tl .mark .peb{fill:var(--shore);stroke:none}
.tl .site{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 10px;margin:14px 0 4px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg);color:var(--text);font:600 14px var(--font);cursor:pointer;width:100%}
.tl .navhead{font:500 13px/1 var(--font);color:var(--shore-text);padding:14px 10px 6px}
.tl .nav{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px 0 24px;border-radius:6px;color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500}
.tl .nav.on{color:var(--text);font-weight:650}
.tl .nav.on::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--shore)}
.tl .nav.locked{color:var(--text-3)}
.tl .nav .count{margin-left:auto;font:500 13px var(--serif);font-variant-numeric:tabular-nums lining-nums}
.tl .tideline{display:flex;flex-direction:column;gap:7px;padding:14px 10px 6px}
.tl .tideline svg{display:block;width:100%;height:10px;fill:none;stroke:var(--water);stroke-width:1.5}
.tl .tideline path,.tl .wave path{vector-effect:non-scaling-stroke}
.tl .tideline span{font:500 13px/1 var(--font);color:var(--water-text)}
.tl .wave{display:block;width:100%;height:10px;fill:none;stroke:var(--line-2);stroke-width:1.5}
.tl .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3);flex-wrap:wrap}
.tl .crumb a{color:var(--text-2);text-decoration:none}

/* surfaces: sheets told apart from the ground by tone, not by lines. A card's
   only border is a top one, transparent until a mode colours it
   (style="border-color: var(--shore)"). An unfilled card is an outlined one. */
.tl .card{background:var(--surface);border-width:2px 0 0;border-style:solid;border-color:transparent;border-radius:2px;padding:24px 26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.tl .card.tight{padding:14px 16px;gap:10px}
.tl .card.plain{background:transparent;border:1px solid var(--line)}
.tl .card[style*="dashed"]{border:1px dashed var(--line-2);background:transparent}
.tl .card[style*="background: var(--bg)"]{border:1px solid var(--line)}
.tl .card[style*="box-shadow"]{border:1px solid var(--line-2)}
.tl .head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tl .note{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:6px;border:1px solid var(--line-2);background:var(--raised);font-size:14px}
.tl .note.alert{border-color:var(--alert);background:var(--alert-wash)}
.tl .note.water{border-color:var(--water);background:var(--water-wash)}
.tl .note.shore{border-color:var(--shore);background:var(--shore-wash)}
.tl .note.live{border-color:var(--live);background:var(--live-wash)}
.tl .dialog{background:var(--surface);border:1px solid var(--line-2);border-radius:2px;box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:16px;width:100%;max-width:480px}
.tl .scrim{background:rgba(4,10,12,.62)}

/* controls */
.tl .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:6px;border:1px solid var(--line-2);background:transparent;color:var(--text);font:600 14px/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.tl .btn.pri{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tl .btn.water{background:var(--water);border-color:var(--water);color:var(--on-mark)}
.tl .btn.danger{border-color:var(--alert);color:var(--alert-text)}
.tl .btn.dangerfill{background:var(--alert);border-color:var(--alert);color:var(--on-mark)}
.tl .btn.ghost{border-color:transparent;color:var(--text-2)}
.tl .btn.sm{height:32px;padding:0 12px;font-size:13px}
.tl .btn.lg{height:48px;padding:0 22px;font-size:16px}
.tl .btn.wide{width:100%}
.tl .btn[disabled]{opacity:.45;cursor:default}
.tl .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tl label,.tl .label{font-size:13px;font-weight:600;color:var(--text-2)}
.tl .input{height:40px;padding:0 12px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);font:400 15px var(--font);width:100%;min-width:0}
.tl textarea.input{height:auto;padding:10px 12px;line-height:1.45;resize:none}
.tl .input.err{border-color:var(--alert)}
.tl .input.mono{font-family:var(--mono);font-size:14px}
.tl .hint{font-size:13px;color:var(--text-3)}
.tl .errmsg{font-size:13px;color:var(--alert-text);font-weight:500}
.tl input[type=checkbox],.tl input[type=radio]{accent-color:var(--ink);width:16px;height:16px;margin:0;flex:none}
.tl .check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--text)}
.tl .switch{width:36px;height:20px;border-radius:999px;border:0;background:var(--line-2);position:relative;flex:none;cursor:pointer;padding:0}
.tl .switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface)}
.tl .switch.on{background:var(--ink)}
.tl .switch.on::after{left:18px;background:var(--on-ink)}
.tl .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tl .tab{height:40px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font:600 14px var(--font);color:var(--text-2);border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;cursor:pointer}
.tl .tab.on{color:var(--text);border-bottom-color:var(--text)}
.tl .seg{display:inline-flex;gap:16px}
.tl .seg>*{height:30px;padding:0 1px;border:0;border-bottom:1.5px solid transparent;background:transparent;color:var(--text-2);font:600 13px var(--font);text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}
.tl .seg>.on{color:var(--text);border-bottom-color:var(--text)}
.tl .chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:6px;background:var(--raised);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--text);white-space:nowrap}
.tl kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;font:500 12px/1 var(--mono);color:var(--text-2);background:var(--surface)}

/* mode and state: a word with a mark before it, outlined for shore and a
   warning, filled for water and what is live or wrong */
.tl .pill{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font);color:var(--text-2);white-space:nowrap}
.tl .pill.shore{color:var(--shore-text)}
.tl .pill.water{color:var(--water-text)}
.tl .pill.live{color:var(--live-text)}
.tl .pill.warn,.tl .pill.alert{color:var(--alert-text)}
.tl .pill.shore::before,.tl .pill.water::before,.tl .pill.live::before,.tl .pill.warn::before,.tl .pill.alert::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.tl .pill.shore::before{border:1.5px solid var(--shore)}
.tl .pill.water::before{background:var(--water)}
.tl .pill.live::before{background:var(--live)}
.tl .pill.warn::before{border:1.5px solid var(--alert)}
.tl .pill.alert::before{background:var(--alert)}
.tl .pill:has(>.dot)::before{content:none}
.tl .dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--text-3)}
.tl .dot.live{background:var(--live)}
.tl .dot.quiet{background:transparent;border:2px solid var(--alert)}
.tl .dot.silent{background:var(--alert);border-radius:2px}
.tl .dot.never{background:transparent;border:2px dashed var(--text-3)}
.tl .dot.shore{background:transparent;border:2px solid var(--shore)}
.tl .dot.water{background:var(--water)}
.tl .state{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap}

/* numbers: one ink rule over the figures, ochre under the one being read */
.tl .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));border-top:2px solid var(--text);border-radius:2px;background:var(--surface);overflow:hidden}
.tl .kpi{padding:20px 24px 22px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line);min-width:0}
.tl .kpi:last-child{border-right:0}
.tl .kpi.on{box-shadow:inset 0 -3px 0 var(--shore)}
.tl .kpi .k{font-size:13px;color:var(--text-2);font-weight:500}
.tl .kpi .v{font:400 40px/1.05 var(--serif);letter-spacing:-.018em;font-variant-numeric:tabular-nums lining-nums}
.tl .delta{font:500 13px var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--text-2)}
.tl .rows{display:flex;flex-direction:column;gap:2px}
.tl .rh{display:flex;gap:12px;padding:0 10px 4px;font-size:12px;font-weight:600;color:var(--text-3)}
/* a row of a list: its share is a line under it, on a hairline */
.tl .r{position:relative;display:flex;align-items:center;gap:12px;min-height:36px;padding:0 2px;font-size:14px;text-decoration:none;color:var(--text);box-shadow:inset 0 -1px 0 var(--line)}
.tl .r::before{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--p,0%);background:var(--shore)}
.tl .r.w::before{background:var(--water)}
.tl .r.z::before{background:var(--line-2)}
.tl .r>*{position:relative}
.tl .r .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tl .r .n{margin-left:auto;font:500 15px var(--serif);font-variant-numeric:tabular-nums lining-nums}
.tl .r .pc{width:42px;text-align:right;font:400 12px var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--text-3);flex:none}
.tl table{border-collapse:collapse;width:100%;font-size:14px}
.tl th{font-size:13px;font-weight:500;color:var(--text-2);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tl tr:last-child td{border-bottom:0}
.tl td.n,.tl th.n{text-align:right}
.tl td.n{font:500 15px var(--serif);font-variant-numeric:tabular-nums lining-nums}
.tl .meter{height:8px;border-radius:4px;background:var(--raised);overflow:hidden}
.tl .meter>i{display:block;height:100%;width:var(--p,0%);background:var(--text-2);border-radius:0 4px 4px 0}
.tl .meter.shore>i{background:var(--shore)} .tl .meter.water>i{background:var(--water)} .tl .meter.alert>i{background:var(--alert)}

/* a figure as it comes in: each digit is a cell (<span class="fd d7">7</span>)
   that turns over from 0 to its own value, a step a tick, the cells and the
   figures of a row a moment apart. The digit itself is the text throughout:
   read aloud, copied or found, the figure is as it was. Where less motion is
   asked for, nothing moves. A cell holds its column of digits in its paint:
   turned over in perspective, the column's far end is thrown wide, and
   without it a row of figures is for a moment far wider than its page. */
.tl .fd{--fd-tick:55ms;--fd-wait:calc(90ms + var(--fd-k,0) * 70ms + var(--fd-i,0) * 35ms);display:inline-block;position:relative;clip-path:inset(0 -.1em);contain:paint;
  animation:tk-fd-hold calc(var(--d) * var(--fd-tick)) steps(1,end) var(--fd-wait) both,tk-fd-flap var(--fd-tick) ease-out var(--fd-wait) var(--d)}
.tl .fd::after{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"/"";position:absolute;left:0;top:0;white-space:pre;-webkit-text-fill-color:currentColor;
  animation:tk-fd-roll calc(var(--d) * var(--fd-tick)) steps(var(--d),start) var(--fd-wait) both,tk-fd-gone calc(var(--d) * var(--fd-tick)) steps(1,end) var(--fd-wait) both}
.tl :has(>.fd){white-space:nowrap}
.tl .fd.d0{animation:none}.tl .fd.d0::after{content:none}
.tl .fd.d1{--d:1}.tl .fd.d2{--d:2}.tl .fd.d3{--d:3}.tl .fd.d4{--d:4}.tl .fd.d5{--d:5}.tl .fd.d6{--d:6}.tl .fd.d7{--d:7}.tl .fd.d8{--d:8}.tl .fd.d9{--d:9}
.tl .fd:nth-of-type(2){--fd-i:1}.tl .fd:nth-of-type(3){--fd-i:2}.tl .fd:nth-of-type(4){--fd-i:3}.tl .fd:nth-of-type(5){--fd-i:4}.tl .fd:nth-of-type(6){--fd-i:5}.tl .fd:nth-of-type(n+7){--fd-i:6}
.tl .kpi:nth-child(2){--fd-k:1}.tl .kpi:nth-child(3){--fd-k:2}.tl .kpi:nth-child(4){--fd-k:3}.tl .kpi:nth-child(5){--fd-k:4}.tl .kpi:nth-child(n+6){--fd-k:5}
@keyframes tk-fd-hold{from{-webkit-text-fill-color:transparent}}
@keyframes tk-fd-flap{from{transform:perspective(3em) rotateX(-72deg);opacity:.55}}
@keyframes tk-fd-roll{to{translate:0 calc(var(--d) * -1lh)}}
@keyframes tk-fd-gone{from{visibility:visible}to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.tl .fd{animation:none}.tl .fd::after{content:none}}

/* charts: 2px line over a wash, previous period dashed, hairline grid */
.tl .chart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px}
.tl .yax{display:flex;flex-direction:column;justify-content:space-between;font:400 12px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--text-3);text-align:right}
.tl .xax{grid-column:2;display:flex;justify-content:space-between;font:400 12px/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--text-3)}
.tl .plotbox{position:relative;min-width:0}
.tl .plot{display:block;width:100%;height:100%;overflow:visible}
.tl .plot .g{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.tl .plot .ln{fill:none;stroke:var(--shore);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tl .plot .ar{fill:var(--shore);opacity:.13;stroke:none}
.tl .plot .w.ln{stroke:var(--water)} .tl .plot .w.ar{fill:var(--water)}
.tl .plot .n.ln{stroke:var(--text-2)} .tl .plot .n.ar{fill:var(--text-2)}
.tl .plot .prev{fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.tl .plot .gapb{fill:var(--raised)}
.tl .plot .bar{fill:var(--shore)} .tl .plot .w.bar{fill:var(--water)} .tl .plot .n.bar{fill:var(--line-2)}
.tl .plot .rule{stroke:var(--text-2);stroke-width:1;vector-effect:non-scaling-stroke}
.tl .pt{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--shore);border:2px solid var(--surface);transform:translate(-50%,-50%)}
.tl .pt.w{background:var(--water)}
.tl .tip{position:absolute;background:var(--raised);border:1px solid var(--line-2);border-radius:6px;padding:10px 12px;box-shadow:var(--shadow);font-size:13px;display:flex;flex-direction:column;gap:5px;white-space:nowrap;z-index:2}
.tl .flag{position:absolute;top:0;bottom:0;border-left:1px solid var(--text-2)}
.tl .flag span{position:absolute;top:-2px;left:6px;font:500 11px var(--font);color:var(--text-2);white-space:nowrap;background:var(--surface);padding:1px 5px;border-radius:4px;border:1px solid var(--line)}
.tl .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.tl .key{display:inline-flex;align-items:center;gap:6px}
.tl .sw{width:14px;height:3px;border-radius:2px;background:var(--shore);flex:none}
.tl .sw.w{background:var(--water)} .tl .sw.n{background:var(--text-2)}
.tl .sw.dash{height:0;background:none;border-top:2px dashed var(--text-3)}
.tl .sw.box{height:10px;width:10px;background:var(--raised);border:1px solid var(--line-2)}
.tl .heat{display:grid;gap:3px;align-items:stretch}
.tl .heat>*{min-height:38px;display:flex;align-items:center;padding:0 10px;font-size:13px}
.tl .heat .cell{justify-content:center;border-radius:4px;font:500 13px var(--mono);background:color-mix(in srgb,var(--water) calc(var(--a,0)*1%),var(--surface))}
.tl .heat .cell.full{color:var(--on-mark)}
.tl .heat .cell.none{background:transparent;border:1px dashed var(--line)}
.tl .strip{display:flex;gap:2px}
.tl .strip>i{flex:1 1 0;height:24px;border-radius:3px;background:var(--live)}
.tl .strip>i.q{background:transparent;border:2px solid var(--alert)}
.tl .strip>i.s{background:var(--alert);border-radius:1px}
.tl .strip>i.x{background:var(--raised)}
.tl .bars{display:flex;align-items:flex-end;gap:3px}
.tl .bars>i{flex:1 1 0;min-width:2px;background:var(--shore);border-radius:3px 3px 0 0}
.tl .bars.w>i{background:var(--water)}
.tl .bars>i.off{background:var(--line-2)}
.tl .spark{display:block;width:100%;height:36px;overflow:visible}
.tl .spark path{fill:none;stroke:var(--shore);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tl .spark .w{stroke:var(--water)}
.tl .spark .off{stroke:var(--text-3);stroke-dasharray:3 3}

/* code and terminal */
.tl pre{margin:0;padding:14px 16px;border-radius:6px;background:var(--bg);border:1px solid var(--line);font-size:13px;line-height:1.6;overflow-x:auto;color:var(--text)}
.tl .c1{color:var(--text-3)} .tl .c2{color:var(--shore-text)} .tl .c3{color:var(--water-text)} .tl .c4{color:var(--live-text)} .tl .c5{color:var(--alert-text)}
.tl .tui{font:400 13.5px/1.6 var(--mono)}
.tl .pane{position:relative;border:1px solid var(--line-2);padding:14px 14px 10px;min-width:0;display:flex;flex-direction:column;gap:2px}
.tl .pane.focus{border-color:var(--text)}
.tl .pane>.ptitle{position:absolute;top:-11px;left:10px;background:var(--bg);padding:0 6px;color:var(--text-2)}
.tl .pane.focus>.ptitle{color:var(--text);font-weight:600}
.tl .trow{display:flex;gap:1ch;white-space:pre}
.tl .trow.sel{background:var(--raised)}
.tl .trow .rn{margin-left:auto;text-align:right}
.tl .tbar{display:inline-block;height:.85em;background:var(--shore);vertical-align:baseline}
.tl .tbar.w{background:var(--water)}
.tl .l{display:block;white-space:pre;min-height:1.6em}
.tl .l.add{background:var(--live-wash);color:var(--live-text)}
.tl .l.del{background:var(--alert-wash);color:var(--alert-text)}
.tl .term{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:18px 22px;font:400 13.5px/1.6 var(--mono);white-space:pre;overflow:hidden;color:var(--text)}

/* public pages */
.tl .wrap1{max-width:1120px;margin:0 auto;padding:0 32px}
.tl .topnav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;flex-wrap:wrap}
.tl .topnav a.l{color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500}
.tl .display{font:400 clamp(40px,5.4vw,84px)/1.03 var(--serif);letter-spacing:-.028em}
.tl .h2x{font:500 clamp(28px,3vw,40px)/1.1 var(--serif);letter-spacing:-.018em}
.tl .lede{font-size:20px;line-height:1.5;color:var(--text-2);max-width:60ch}
.tl .sect{padding-block:84px}
.tl .strata{display:block;width:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.tl .strata path{vector-effect:non-scaling-stroke}
.tl .auth{flex:1 1 440px;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:48px min(8vw,96px);min-width:0}
.tl .authart{flex:1 1 440px;background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;gap:24px;padding:56px;min-height:320px;min-width:0;color:var(--text-2)}
.tl .or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-3)}
.tl .or::before,.tl .or::after{content:"";flex:1;height:1px;background:var(--line)}
.tl .ph{border:1px dashed var(--line-2);border-radius:6px;padding:1px 6px;font:500 .9em var(--mono);color:var(--text-2)}

/* spec sheets, imported data, phone, email */
.tl .spec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.tl .swatch{height:52px;border-radius:8px;border:1px solid var(--line-2)}
.tl .plot .hl{stroke:var(--shore);stroke-width:1.5}
.tl .plot .imp{opacity:.5;stroke:none}
.tl .hatch,.tl .sw.box.hatch{background:repeating-linear-gradient(135deg,var(--shore-wash) 0 4px,transparent 4px 8px)}
.tl .tap{min-height:44px}
.tl .mail{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:36px 40px;display:flex;flex-direction:column;gap:22px}
.tl .skel{background:var(--raised);border-radius:5px;height:14px}
.tl .pin{position:absolute;transform:translate(-50%,-50%);min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:var(--ink);color:var(--on-ink);font:600 12px/26px var(--mono);text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35);border:0}
.tl .pin.sel{background:var(--shore);color:#0B1416}
.tl .pin.in{position:static;transform:none;display:inline-block;vertical-align:middle;margin-left:6px}
.tl .shot .pin{background:#0E1B1D;color:#FFFFFF}
.tl .shot .pin.sel{background:#8A5E10;color:#FFFFFF;outline:3px solid rgba(138,94,16,.3)}
.tl .shot a{color:#1F56B3}
.tl .shot pre{background:#F1F3F2;border-color:#D6DFDD;color:#1C2526}
.tl .shot .depth{position:absolute;left:0;right:0;border-top:1px dashed #8A5E10;font:500 11px var(--mono);color:#7A5200}
.tl .shot .depth span{position:absolute;right:8px;top:4px;background:#FFFFFF;padding:0 4px}
.tl .shot{position:relative;background:#FFFFFF;color:#1C2526;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;font-family:Georgia,"Times New Roman",serif}