/* levers.css — the Levers board's one sheet. Tokens and component shapes are
   copied from the no-crying board's system (engine/guides/system/tokens.css +
   system.css, picks locked 10/18: Georgia body, tight 16px 20px cards, sand
   accent). Copied, not linked: this page lives on Hetzner, the engine on jessie.
   Written by 111026 Tuesday Levers-Site. */

:root{
  --paper:#12110d; --card:#1c1a15; --card-sunk:#181611; --rule:#3a372e; --hair:#494437;
  --frame:rgba(232,228,216,.10);
  --ink:#e8e4d8; --ink-name:#aca697; --ink-body:#a8a394; --ink-mute:#8a8578; --ink-dim:#6f6a5e;
  --ink-ghost:#57534a; --ink-attr:#5a564c;
  --late:#f0a03c; --ok:#86a98c; --bad:#ef5a50; --plan:#7dd3fc;
  --tag-ink:#1a1710;
  --st-active:#8a9280; --st-active-edge:#626656;
  --st-waitproc:#84939a; --st-waitproc-edge:#5e6667;
  --st-done:#d8a43c; --st-done-edge:#8e6a1d;
  --st-verifying:#978b72; --st-verifying-edge:#706754;
  --st-held:#9c4a3c; --st-held-edge:#6e3328;
  --accent:#d9c9a3;
  --clock-tint:rgba(217,201,163,.035); --clock-edge:#454034; --clock-ink:#948e81;
  --f-title:'Quantico',Futura,'Futura PT','Century Gothic',ui-sans-serif,sans-serif;
  --f-caps:Futura,'Futura PT','Century Gothic',ui-sans-serif,sans-serif;
  --f-body:Georgia,'Times New Roman',serif;
  --f-mono:ui-monospace,Menlo,monospace;
  --t-tab:12px; --t-meta:11px; --t-body:17px; --t-heading:22px; --t-title:32px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;
  --radius:3px; --border:1.5px solid var(--rule); --line:1px solid var(--rule);
  --shadow:0 2px 8px rgba(0,0,0,.5); --pad-card:16px 20px; --pad-roomy:30px 36px;
  --wide:1500px; --gutter:22px; --notes-w:360px;
  /* chart series: this video = sand, baseline / median = plan blue, catalog = mute ink */
  --c-this:#d9c9a3; --c-base:#7dd3fc; --c-cat:#8a8578; --c-grid:#2a281f;
  --c-search:#d9c9a3; --c-suggested:#7dd3fc; --c-browse:#86a98c; --c-external:#f0a03c; --c-other:#57534a;
}
.nc{--accent:#d9c9a3}
@media (max-width:720px){:root{--t-title:22px; --t-heading:18px; --t-body:16px; --gutter:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--t-body);
  line-height:1.5; padding:var(--gutter); overflow-wrap:break-word}
img,svg,canvas,video{max-width:100%}
a{color:var(--ink-name)}

/* masthead + tabs (board shapes) */
.masthead{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s3) var(--s5); border-bottom:4px double var(--rule); padding-bottom:var(--s3)}
.masthead h1{margin:0; font-family:var(--f-title); font-weight:700; font-size:var(--t-title); text-transform:uppercase;
  letter-spacing:.05em; line-height:1.05; color:var(--ink)}
.masthead h1::after{content:''; display:block; width:28px; height:3px; margin-top:6px; background:var(--accent)}
.masthead .sub{font-family:var(--f-caps); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim)}
.tabs{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin:0; padding:0; list-style:none; min-width:0}
.tab{display:inline-flex; align-items:center; gap:6px; min-height:32px; font-family:var(--f-mono); font-size:var(--t-tab);
  font-weight:700; letter-spacing:.10em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:var(--ink-mute); background:transparent; border:1px solid var(--hair); border-radius:var(--radius);
  padding:6px 12px; cursor:pointer}
.tab:hover{color:var(--ink-name); border-color:var(--ink-name)}
.tab.on{color:var(--ink); border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent)}
.clockbar{margin:var(--s4) 0 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:var(--s3);
  background:var(--clock-tint); border:1px solid var(--clock-edge); color:var(--clock-ink); padding:6px 14px 5px}
.clockbar span{font-family:var(--f-caps); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.clockbar .mid{text-align:center; color:var(--clock-ink); letter-spacing:.3em}
.clockbar .r{text-align:right}
@media (max-width:720px){.clockbar{grid-template-columns:1fr} .clockbar span{text-align:left} .clockbar .mid{display:none}}

/* shell: panels + the notes column, running the whole way down */
.shell{display:grid; grid-template-columns:minmax(0,1fr) var(--notes-w); gap:var(--s4); max-width:var(--wide); margin:var(--s4) auto 0; align-items:start}
.panels{display:grid; gap:var(--s4); min-width:0}
.notes{position:sticky; top:12px; max-height:calc(100vh - 24px); display:flex; flex-direction:column; min-width:0}
.notes .card{flex:1 1 auto; min-height:0; overflow:hidden}
.notes .list{overflow:auto; min-height:0; flex:1 1 auto; display:grid; gap:var(--s2); align-content:start; padding-right:2px}
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .notes{position:static; max-height:none}
  .notes .list{max-height:60vh}
}

/* card */
.card{position:relative; background:var(--card); border:var(--border); border-radius:var(--radius); padding:var(--pad-card);
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:var(--s2); min-width:0}
.card::before{content:''; position:absolute; inset:9px; border:1px solid var(--frame); pointer-events:none}
.card.roomy{padding:var(--pad-roomy)}
@media (max-width:720px){.card.roomy{padding:22px 20px}}
.card .head{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--s2) var(--s3)}
.card h2,.card .name{margin:0; font-family:var(--f-caps); font-weight:500; font-size:var(--t-heading); letter-spacing:.08em;
  text-transform:uppercase; line-height:1.1; color:var(--ink-name); min-width:0}
.card h2 .n{color:var(--ink-ghost); margin-right:.4em; font-size:.8em; letter-spacing:.2em}
.card p,.card .desc{margin:0; color:var(--ink-body); font-size:var(--t-body); line-height:1.4}
.card .desc{font-size:14.5px; color:var(--ink-mute)}
.card .meta{font-family:var(--f-mono); font-size:var(--t-meta); color:var(--ink-dim); letter-spacing:.04em}
.card .row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); border-top:1px dashed var(--rule); padding-top:var(--s2)}
.card .since{font-family:var(--f-caps); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--late);
  border:1.5px solid var(--late); border-radius:var(--radius); padding:4px 10px; background:rgba(240,160,60,.10)}
.card .headbtns{display:flex; gap:6px; align-items:center; flex:none}

/* luggage tag */
.tag{--f:var(--st-verifying); --e:var(--st-verifying-edge); position:relative; display:inline-block; flex:none; white-space:nowrap;
  font-family:var(--f-caps); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tag-ink);
  background:var(--e); padding:3px 9px 3px 20px; transform:rotate(-1.2deg);
  clip-path:polygon(0 50%,9px 0,100% 0,100% 100%,9px 100%); isolation:isolate}
.tag::before{content:''; position:absolute; inset:1px; z-index:-1; background:var(--f); clip-path:polygon(2px 50%,10px 0,100% 0,100% 100%,10px 100%)}
.tag::after{content:''; position:absolute; left:9px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--card); border:1px solid var(--e)}
.tag.active{--f:var(--st-active); --e:var(--st-active-edge)}
.tag.done{--f:var(--st-done); --e:var(--st-done-edge)}
.tag.wait{--f:var(--st-waitproc); --e:var(--st-waitproc-edge)}
.tag.held{--f:var(--st-held); --e:var(--st-held-edge)}

/* buttons + inputs */
.btn{font-family:var(--f-mono); font-size:var(--t-tab); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
  background:transparent; border:1px solid var(--hair); border-radius:var(--radius); padding:5px 11px; min-height:30px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.btn:hover{color:var(--ink-name); border-color:var(--ink-name)}
.btn.primary{color:var(--ink-name); border-color:var(--ink-mute)}
.btn.primary:hover{color:var(--ok); border-color:var(--ok)}
.btn.big{font-size:14px; padding:12px 22px; min-height:44px}
.btn.small{font-size:10.5px; padding:3px 8px; min-height:24px}
.btn[disabled]{opacity:.55; cursor:default}
.field{display:grid; gap:var(--s1)}
.field label{font-family:var(--f-caps); font-size:var(--t-meta); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim)}
.input,select.input,textarea.input{font:16px/1.3 var(--f-mono); color:var(--ink); background:var(--paper); border:var(--line);
  border-radius:var(--radius); padding:9px 11px; width:100%; min-width:0}
.input:focus{outline:2px solid var(--accent); outline-offset:1px}
textarea.input{resize:vertical; min-height:72px; font-family:var(--f-body); font-size:16px}
.bad{color:var(--bad)} .good{color:var(--ok)} .warn{color:var(--late)}

/* gate pages */
body.gate{display:flex; min-height:100vh; align-items:flex-start; justify-content:center}
.gatewrap{width:min(100%,460px); display:grid; gap:var(--s5); margin-top:6vh}
.gateform{display:grid; gap:var(--s3); margin-top:var(--s2)}

/* tables */
table.t{border-collapse:collapse; width:100%; font-size:14px}
table.t th{font-family:var(--f-caps); font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim);
  text-align:left; padding:6px 8px 6px 0; border-bottom:1px solid var(--rule); white-space:nowrap}
table.t td{padding:6px 8px 6px 0; border-bottom:1px dashed var(--c-grid); vertical-align:top; color:var(--ink-body)}
table.t td.num,table.t th.num{text-align:right; font-family:var(--f-mono); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}
table.t td{padding-right:14px}
.vt{color:var(--ink); display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(360px,100%); vertical-align:middle}
.vmeta{display:block; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-dim)}
.more{display:none!important}
.kind{font-family:var(--f-caps); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--hair);
  border-radius:var(--radius); padding:1px 5px; margin-left:6px; vertical-align:middle}
.kind.short{color:var(--plan); border-color:var(--plan)}
.tscroll{overflow:auto; -webkit-overflow-scrolling:touch}

/* charts */
.chart{width:100%; height:auto; display:block}
.chart text{font-family:var(--f-mono); font-size:10.5px; fill:var(--ink-dim)}
.chart .ax{stroke:var(--rule); stroke-width:1}
.chart .gl{stroke:var(--c-grid); stroke-width:1}
.chart .ln{fill:none; stroke-width:1.75; stroke-linejoin:round; stroke-linecap:round}
.chart .ln.this{stroke:var(--c-this)} .chart .ln.base{stroke:var(--c-base); stroke-dasharray:4 4} .chart .ln.cat{stroke:var(--c-cat); stroke-width:1; opacity:.55}
.chart .dot{fill:var(--c-this)} .chart .dot.cat{fill:var(--c-cat); opacity:.6}
.chart .bar{fill:var(--ink-mute)} .chart .bar.this{fill:var(--c-this)}
.legend{display:flex; flex-wrap:wrap; gap:var(--s3); font-family:var(--f-mono); font-size:11px; color:var(--ink-dim)}
.legend i{display:inline-block; width:18px; height:0; border-top:2px solid var(--c-this); vertical-align:middle; margin-right:5px}
.legend i.base{border-top-style:dashed; border-color:var(--c-base)} .legend i.cat{border-color:var(--c-cat)}
.legend i.sw{height:10px; border:0; width:10px}
.strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:var(--s3)}
.mini{border:1px solid var(--c-grid); border-radius:var(--radius); padding:8px 10px 6px; background:var(--card-sunk); display:grid; gap:4px; min-width:0}
.mini .mt{font-size:13px; color:var(--ink); line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.mini .mm{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-dim)}
.mini .nr{color:var(--ink-mute)}
.count{font-family:var(--f-mono); font-size:11px; color:var(--ink-mute); margin:var(--s2) 0}
.panels .card p.caveat{font-family:var(--f-mono); font-size:11px; line-height:1.45; color:var(--late); border-left:2px solid var(--late); padding:2px 0 2px var(--s3); margin:var(--s3) 0 0}
.big2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.big2 .bn{font-family:var(--f-caps); font-size:34px; letter-spacing:.04em; color:var(--ink); line-height:1}
.big2 .bl{font-family:var(--f-caps); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); margin-top:4px}
.sharebar{height:14px; display:flex; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden}
.sharebar i{display:block; height:100%}
.stack{display:grid; gap:6px}
.srow{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:10px; align-items:center}
@media (max-width:720px){.srow{grid-template-columns:minmax(0,1fr) 120px}}
.srow .sb{height:12px; display:flex; border:1px solid var(--c-grid); overflow:hidden; border-radius:2px}
.srow .sb i{display:block; height:100%}
.srow .sl{font-size:13px; color:var(--ink-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmp{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.cmp .ch{font-family:var(--f-caps); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-name); border-bottom:1px solid var(--rule); padding-bottom:4px}
.cmp dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:14px}
.cmp dt{font-family:var(--f-caps); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); align-self:baseline}
.cmp dd{margin:0; font-family:var(--f-mono); font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
@media (max-width:720px){.cmp{grid-template-columns:1fr}}

/* notes */
.note{border:1px solid var(--c-grid); border-left:3px solid var(--accent); border-radius:var(--radius); padding:8px 10px; background:var(--card-sunk); display:grid; gap:4px}
.note .nh{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-dim)}
.note .nh b{color:var(--ink-name); font-weight:700}
.note .np{font-family:var(--f-caps); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); border:1px solid var(--hair); border-radius:var(--radius); padding:1px 6px}
.note .nv{color:var(--plan); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.note .nb{font-size:15px; color:var(--ink-body); line-height:1.4; white-space:pre-wrap}
.noteform{display:grid; gap:var(--s2); border-bottom:1px dashed var(--rule); padding-bottom:var(--s2)}
.noteform .two{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.empty{font-family:var(--f-mono); font-size:12px; color:var(--ink-ghost); text-align:center; padding:var(--s4)}
.foot{margin:var(--s6) auto 0; max-width:var(--wide); font-family:var(--f-mono); font-size:11px; color:var(--ink-ghost); text-align:center}