/* EverBlossom Ops — shared styles.
   Composition: Mercury (sidebar chrome, card modules with counts).
   Candidates page: Linear's list-and-record.
   Tokens: the Origin reference (reference/origin-style.md) + brand green. */

:root{
  --iris-gleam:#847dff; --cyan-signal:#00b3dd; --orchid-bloom:#dd90d8;
  --obsidian:#0f1011; --abyss:#090a0b; --graphite:#2e2e2e; --steel:#3f4041;
  --silver:#cacaca; --fog:#6a6b6b; --ash:#9f9fa0; --cloud:#f5f5f7; --pure:#ffffff; --void:#000000;
  --green-deep:#1a4a3a;
  --serif:"DM Serif Display",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Roboto Mono",ui-monospace,Consolas,monospace;
  --sidebar:224px;
}
*{box-sizing:border-box}
html{background:var(--obsidian)}
body{margin:0; background:var(--obsidian); color:var(--ash); font-family:var(--sans);
  font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit}
.mono{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; line-height:2}

/* ---------------- chrome: sidebar on desktop, glass bar on phone ---------------- */
.chrome{display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh}
aside{background:var(--green-deep); border-right:1px solid rgba(255,255,255,.07);
  padding:18px 14px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh; overflow:hidden}
/* the ops header film runs behind the chrome, never behind the content:
   sticky creates the stacking context, so z -1 sits above the chrome's own
   green ground and under everything it carries. The scrim (::after — same
   z, later in tree order, so it paints over the film) keeps the nav on
   deep green with the footage moving through it, heaviest where the text
   sits. Readability is the scrim's job, not the film's. */
.chromevid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-1; opacity:.55; pointer-events:none}
aside::after, .topbar::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,74,58,.92) 0%, rgba(26,74,58,.55) 42%, rgba(26,74,58,.82) 100%)}
@media (prefers-reduced-motion: reduce){.chromevid{display:none}}
.homebtn{display:flex; align-items:center; gap:10px; text-decoration:none; padding:4px 8px 18px}
.homebtn img{width:38px; height:38px; border-radius:50%; display:block}
.homebtn .wm{font-family:var(--serif); font-size:17px; color:var(--cloud); line-height:1.1}
.homebtn .wm span{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.182em;
  text-transform:uppercase; color:var(--ash)}
.navitem{display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.85); text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  padding:10px 12px; border-radius:8px; transition:background-color .2s ease, color .2s ease}
.navitem:hover{color:var(--pure); background:rgba(255,255,255,.08)}
.navitem[aria-current]{background:rgba(255,255,255,.16); color:var(--pure)}
.navitem .n{font-variant-numeric:tabular-nums; color:var(--cyan-signal); font-size:12px}
.sidefoot{margin-top:auto; display:flex; flex-direction:column; gap:8px}
.ghost{background:transparent; border:1px solid rgba(255,255,255,.35); color:var(--pure);
  border-radius:8px; padding:9px 14px; font:inherit; font-size:13.5px; cursor:pointer;
  transition:background-color .2s ease, transform .2s ease}
.ghost:hover{background:rgba(255,255,255,.1)}
.ghost:focus-visible{outline:2px solid var(--pure); outline-offset:2px}

.topbar{display:none}
@media (max-width:899px){
  .chrome{display:block}
  aside{display:none}
  .topbar{display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:30;
    background:var(--green-deep);
    border-bottom:1px solid rgba(255,255,255,.08); padding:10px 14px}
  .topbar .homebtn{padding:0}
  .topbar .homebtn img{width:34px; height:34px}
  .topbar .homebtn .wm{display:none}
  .topbar nav{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex:1}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar .navitem{padding:8px 11px; white-space:nowrap}
  .topbar .navitem .n{display:none}
  .topbar .ghost{padding:7px 11px; font-size:12.5px; flex:none}
}

/* ---------------- content column ---------------- */
.content{min-width:0}
.stale-slot{}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px 64px}
.pagehead{font-family:var(--serif); font-weight:400; color:var(--cloud);
  font-size:clamp(30px,5vw,42px); line-height:.95; letter-spacing:-.01em; margin:26px 0 18px}

/* the rescission row: full band on the board, slim strip elsewhere.
   The band carries its own film under the same green scrim as the chrome —
   isolation makes the stacking context the negative-z film needs, and the
   scrim + text shadow keep the action and consequence lines legible over
   the motion. The strip stays solid. */
.critical{background:var(--green-deep); color:var(--pure); padding:26px 20px;
  position:relative; isolation:isolate; overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.critical::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,74,58,.9) 0%, rgba(26,74,58,.6) 45%, rgba(26,74,58,.82) 100%)}
.critical a.go, .critical .ghost, .critical .undo{text-shadow:none}
.critical .in{max-width:1080px; margin:0 auto}
.critical .h{font-family:var(--serif); font-size:clamp(26px,6vw,40px); line-height:.95;
  letter-spacing:-.005em; text-wrap:balance}
.critical .due{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.182em;
  text-transform:uppercase; margin-top:10px; color:rgba(255,255,255,.75)}
.critical .cq{font-size:15px; line-height:1.55; margin-top:10px; color:rgba(255,255,255,.85); max-width:62ch}
.critical a.go{display:inline-block; margin-top:14px; background:var(--pure); color:var(--void);
  text-decoration:none; border-radius:8px; padding:10px 16px; font-size:14px}
.critstrip{display:block; background:var(--green-deep); color:var(--pure); padding:9px 16px;
  text-align:center; font-size:13px; text-decoration:none}
.critstrip b{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; color:rgba(255,255,255,.8)}

/* board headline */
.date{text-align:center; color:var(--fog); margin-top:26px}
.headline{font-family:var(--serif); color:var(--cloud); font-size:clamp(52px,9vw,84px);
  line-height:.9; text-align:center; margin:6px 0 26px}

/* ---------------- modules: the Mercury card grid ---------------- */
.modrow{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 26px}
@media (max-width:720px){.modrow{grid-template-columns:1fr}}
.mod{display:block; background:var(--graphite); border-radius:16px; padding:18px 20px;
  text-decoration:none; transition:background-color .2s ease}
.mod:hover{background:var(--steel)}
.mod .k{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog)}
.mod .v{font-family:var(--serif); font-size:30px; color:var(--cloud); line-height:1.1; margin-top:6px}
.mod .s{font-size:12.5px; color:var(--ash); margin-top:4px}
.mod .s .hot{background:var(--silver); color:var(--void); border-radius:9999px; padding:1px 8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase}

.seclabel{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog); margin:26px 0 10px; line-height:2}
.sublabel{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fog); margin:0 0 8px}
.sublabel span{letter-spacing:.05em; text-transform:none}
.panel{background:var(--graphite); border-radius:16px; padding:8px 18px}
.panel + .panel{margin-top:12px}
.quiet{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--fog); padding:8px 2px}
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
@media (max-width:880px){.cols2{grid-template-columns:1fr}}

/* rows */
.rows{width:100%; border-collapse:collapse}
.rows td{padding:12px 10px 12px 0; border-top:1px solid rgba(255,255,255,.07);
  font-size:14px; color:var(--cloud); vertical-align:top}
.rows tr:first-child td{border-top:none}
.rows td.ck{width:34px; padding-right:0}
.rows td.due{font-family:var(--mono); font-size:12px; color:var(--ash);
  white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right}
.rows .lbl a{color:var(--cloud)}
.rows .meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fog); margin-top:3px}
.rows tr.done .lbl{color:var(--fog); text-decoration:line-through}
.chip{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; border-radius:9999px; padding:2px 9px; white-space:nowrap}
.chip.inv{background:var(--silver); color:var(--void)}
.chip.dim{border:1px solid var(--steel); color:var(--ash)}
.rank{font-family:var(--mono); font-size:12px; color:var(--cyan-signal);
  font-variant-numeric:tabular-nums; width:26px}
.ckbtn{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ash);
  background:none; cursor:pointer; padding:0;
  transition:border-color .2s ease, transform .2s ease}
.ckbtn:hover{border-color:var(--pure)}
.ckbtn:active{transform:scale(.92)}
.ckbtn.on{background:var(--silver); border-color:var(--silver); color:var(--void); font-size:13px; line-height:1}
.pillbtn{background:transparent; border:1px solid var(--ash); color:var(--cloud);
  border-radius:9999px; padding:5px 14px; font-family:var(--sans); font-size:13px;
  cursor:pointer; white-space:nowrap; transition:background-color .2s ease, border-color .2s ease, transform .2s ease}
.pillbtn:hover{background:rgba(255,255,255,.1); border-color:var(--pure)}
.pillbtn:active{transform:scale(.94)}
.undo{background:none; border:none; color:var(--fog); font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:0}
.undo:hover{color:var(--pure)}
.tablewrap{overflow-x:auto}

/* gates */
.gates th{font-family:var(--mono); font-size:9.5px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog); text-align:left; padding:12px 10px 6px 0}
.gates td{white-space:nowrap}
.g{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase}
.g.done{color:var(--ash)} .g.done::before{content:"✓ "; color:var(--cyan-signal)}
.g.pending{color:var(--cloud)}
.g.blocked,.g.missing{background:var(--silver); color:var(--void); border-radius:9999px; padding:2px 8px}
.g.na{color:var(--steel)}

/* desk tiles */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.tile{display:block; position:relative; border-radius:26px; padding:26px 26px 22px;
  text-decoration:none; min-height:124px; transition:filter .2s ease, transform .2s ease, background-color .2s ease}
.tile:hover{filter:brightness(1.08); transform:translateY(-3px)}
.tile:focus-visible{outline:2px solid var(--pure); outline-offset:3px}
.tile .t{display:block; font-family:var(--serif); font-weight:400; font-size:25px; line-height:1; letter-spacing:-.005em}
.tile .d{display:block; font-size:13px; line-height:1.6; margin-top:8px; opacity:.85}
.tile .stamp{position:absolute; left:26px; bottom:13px}
.tile .count{position:absolute; top:18px; right:18px}
.tile.compliance{background:var(--iris-gleam); color:var(--pure)}
.tile.compliance .d{color:rgba(255,255,255,.85)}
.tile.hiring{background:var(--orchid-bloom); color:var(--void)}
.tile.hiring .d{color:rgba(0,0,0,.65)}
.tile.infra{background:var(--graphite); color:var(--cloud)}
.tile.infra .d{color:var(--ash)}
.tile.infra:hover{background:var(--steel); filter:none}
.stamp-ok{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.75}

/* ---------------- candidates: Linear's list and record ---------------- */
.split{display:grid; grid-template-columns:300px 1fr; gap:24px; align-items:start; margin-top:22px}
@media (max-width:880px){
  .split{grid-template-columns:1fr}
  .split.showing-record .listpane{display:none}
  .split:not(.showing-record) .recordpane{display:none}
}
.search{background:var(--void); border:1px solid rgba(255,255,255,.2); color:var(--cloud);
  border-radius:8px; padding:11px 13px; font:inherit; font-size:15px; width:100%; margin-bottom:10px}
.search:focus-visible{outline:2px solid var(--pure); outline-offset:2px}
.roster a{display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:11px 6px; border-top:1px solid rgba(255,255,255,.07); font-size:14px;
  color:var(--cloud); text-decoration:none; border-radius:6px;
  transition:background-color .2s ease}
.roster a:first-child{border-top:none}
.roster a:hover{background:rgba(255,255,255,.05)}
.roster a.sel{background:rgba(255,255,255,.08); color:var(--pure)}
.record h1{font-family:var(--serif); font-weight:400; color:var(--cloud);
  font-size:clamp(30px,4.5vw,44px); line-height:.95; letter-spacing:-.01em; margin:0 0 6px; text-wrap:balance}
.record .meta-line{color:var(--fog); font-size:13.5px}
.backlink{display:none; margin:0 0 12px; font-size:13.5px; color:var(--ash); text-decoration:none}
@media (max-width:880px){.backlink{display:inline-block}}
.stage{display:flex; gap:13px; padding:9px 0; border-top:1px solid rgba(255,255,255,.07)}
.stage:first-child{border-top:none}
.stage .glyph{font-family:var(--mono); width:20px; flex:none; text-align:center}
.stage.done .glyph{color:var(--cyan-signal)}
.stage.pending{color:var(--fog)}
.stage.pending .nm{color:var(--fog)}
.stage .nm{color:var(--cloud); font-size:14px}
.stage.current .nm{font-weight:600}

/* sign-in cover + set-password form */
#cover{position:fixed; inset:0; background:var(--obsidian); z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; text-align:center; padding:20px}
#cover[hidden]{display:none}
#cover h1{font-family:var(--serif); font-weight:400; color:var(--cloud);
  font-size:clamp(40px,9vw,72px); line-height:.9; margin:0; letter-spacing:-.01em}
#cover .sub{color:var(--fog); font-size:14px; max-width:40ch}
#pwform,#loginform{display:flex; flex-direction:column; gap:12px; width:min(320px,86vw)}
#pwform[hidden],#loginform[hidden]{display:none}
#pwform input,#loginform input{background:var(--void); border:1px solid rgba(255,255,255,.2);
  color:var(--cloud); border-radius:8px; padding:12px 14px; font:inherit; font-size:16px}
#pwform input:focus-visible,#loginform input:focus-visible{outline:2px solid var(--pure); outline-offset:2px}
#loginform .linkish{background:none; border:0; color:var(--fog); cursor:pointer;
  font:inherit; font-size:13px; text-decoration:underline; padding:4px; align-self:center}
#pwmsg,#loginmsg{color:var(--silver); min-height:24px}

/* held items: one line and a clock per row; the full text lives behind it */
.heldtable{table-layout:fixed; width:100%}
.heldtable .duecol{width:96px}
.heldtable .due{width:96px}
.heldrow{cursor:pointer}
.clamp{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.heldtable .grouphead td{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fog); padding:12px 14px 6px}
.heldtable .grouphead{cursor:default}
.heldline{display:flex; gap:8px; align-items:center}
.heldline .clamp{flex:1; min-width:0; display:block}
.heldline .pillbtn{flex:none}
.noterow{display:flex; gap:8px; margin-top:8px}
.noteline{flex:1; min-width:0; background:var(--void); border:1px solid rgba(255,255,255,.2);
  color:var(--cloud); border-radius:8px; padding:8px 10px; font:inherit; font-size:14px}
.noteline:focus-visible{outline:2px solid var(--pure); outline-offset:2px}

.critical .act{font-weight:600; color:#fff; margin:10px 0 2px}
.critrow{display:flex; gap:14px; align-items:center; margin-top:12px; flex-wrap:wrap}
.critrow .mono{color:rgba(255,255,255,.85)}

footer{border-top:1px solid rgba(255,255,255,.08); padding:22px 0 44px; margin-top:8px;
  text-align:center; color:var(--fog)}

/* ---------------- motion: plays when content appears, not behind the cover.
   body.revealed is added at boot and on page entry. ---------------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes ops-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  @keyframes ops-fade{from{opacity:0} to{opacity:1}}
  .reveal, .critical, .headline, .date, .pagehead{opacity:0}
  body.revealed .critical{animation:ops-rise .7s ease-out both}
  body.revealed .date{animation:ops-fade 1s cubic-bezier(.455,.03,.515,.955) both .1s}
  body.revealed .headline{animation:ops-fade 2s cubic-bezier(.455,.03,.515,.955) both .15s}
  body.revealed .pagehead{animation:ops-fade .9s cubic-bezier(.455,.03,.515,.955) both}
  body.revealed .reveal{animation:ops-rise .55s ease-out both}
  body.revealed .reveal:nth-of-type(2){animation-delay:.07s}
  body.revealed .reveal:nth-of-type(3){animation-delay:.14s}
  body.revealed .reveal:nth-of-type(4){animation-delay:.21s}
  body.revealed .panel{animation:ops-fade .35s ease both}
  body.revealed .grid .tile{animation:ops-rise .5s ease-out both}
}
@media (prefers-reduced-motion: reduce){
  .reveal, .critical, .headline, .date, .pagehead{opacity:1}
}

/* a ledger write the server refused: revert happened, this says why */
.ledgerfail{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:#1a1a1a;color:#fff;padding:10px 18px;border-radius:8px;
  font-size:14px;z-index:99;max-width:90vw;}