/* ============================================================
   DRYSTAR Change Order Hub  --  styles
   Same tokens as the field forms portal, deliberately: two apps
   behind one login should not look like two companies.
   ============================================================ */
:root{
  --bg:#0b0e13; --bg2:#10141b; --panel:#161b23; --panel2:#1b212b;
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.16);
  --text:#eceef2; --muted:#9aa3b1; --accent:#4a7ba6; --accent2:#6ba3d0; --steel:#aac4d8;
  --ok:#3f9d6b; --warn:#c9a227; --err:#cf5b4e;
  --display:"Sora",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  /* Tabular figures. Money in a column that does not line up reads as sloppy
     bookkeeping before anyone has checked whether it is right. */
  --num:"Inter",ui-monospace,SFMono-Regular,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.15}
a{color:var(--accent2);text-decoration:none}
img{display:block;max-width:100%}
.hidden{display:none!important}

.btn{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.04em;border:1px solid transparent;border-radius:6px;padding:13px 22px;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent2)}
.btn-g{background:transparent;border-color:var(--line2);color:var(--text)}.btn-g:hover{border-color:var(--steel)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{min-height:34px;padding:6px 12px;font-size:12.5px}

label{display:block;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
input[type=text],input[type=password],input[type=email],input[type=search]{
  width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:6px;color:var(--text);
  font-family:var(--body);font-size:16px;padding:13px 14px;transition:border-color .18s}
input:focus{outline:none;border-color:var(--accent)}
.field{margin-bottom:18px}
.msg{font-size:13.5px;margin:-4px 0 14px;min-height:18px;color:var(--err)}
.msg.ok{color:var(--ok)}

/* ---------- sign in ---------- */
.gate{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(74,123,166,.16),transparent 60%),var(--bg)}
.gate-card{width:100%;max-width:400px;background:rgba(16,20,27,.96);border:1px solid var(--line2);border-radius:12px;padding:38px 32px}
/* The real horizontal lockup, in white, on the dark card. Not the company
   name set in a font: see the note in lib/export.js. The mark alone stays the
   favicon, which is the one place a mark without the wordmark is correct. */
.gate-card .mark{display:block;width:208px;height:auto;margin:0 auto 22px}
.gate-card h1{font-size:21px;text-align:center;margin-bottom:6px}
.gate-card .lede{text-align:center;color:var(--muted);font-size:14.5px;margin-bottom:26px}

/* ---------- top bar ---------- */
header{position:sticky;top:0;z-index:30;background:rgba(11,14,19,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{max-width:1440px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
/* The full colour lockup, on the dark ground, at full opacity.
   Sized larger than a white mark would need to be. The wordmark is a gradient
   running from silver into a steel blue, and the blue end sits close to the
   background here, so at 31px the whole thing receded and the tagline went
   faint. Given room it reads properly. Dimming a gradient, or shrinking it,
   both produce a washed out logo rather than a quieter one. */
.brand .logo{height:42px;width:auto;display:block;flex:0 0 auto}
/* "Change Orders" is the name of this app, not part of the brand, so it stays
   as type and is divided off from the lockup rather than sitting inside it. */
.brand .sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:var(--display);font-weight:600;padding-left:14px;border-left:1px solid var(--line2);white-space:nowrap}
@media (max-width:640px){
  .brand .logo{height:32px}
  .brand .sub{display:none}
}
.bar .right{display:flex;align-items:center;gap:16px}
.who{font-size:13px;color:var(--muted)}
.who b{color:var(--text);font-weight:600}
.lo{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;font-family:var(--display);letter-spacing:.04em;padding:6px}
.lo:hover{color:var(--text)}
.wrap{max-width:1440px;margin:0 auto;padding:26px 24px 90px}

.lead{margin-bottom:22px}
.lead .ey{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);display:block;margin-bottom:8px}
.lead h1{font-size:clamp(22px,3.4vw,30px)}

/* ---------- tiles ----------
   Each tile is one specific way money leaks, and each is a filter as well
   as a count. A tile that says 3 and shows 4 rows on click would make the
   whole row of numbers untrustworthy, so both come from the same table. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;text-align:left;cursor:pointer;transition:all .18s;color:var(--text);font-family:var(--body)}
.tile:hover{background:var(--panel2);border-color:var(--line2)}
.tile[aria-pressed="true"]{border-color:var(--accent);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--accent)}
.tile .n{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.tile .k{font-size:11.5px;font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.tile .v{font-size:12.5px;color:var(--steel);margin-top:3px;font-variant-numeric:tabular-nums}
.tile.alarm .n{color:var(--err)}
.tile.warn .n{color:var(--warn)}
.tile.ok .n{color:var(--ok)}
.tile.zero .n{color:var(--muted)}

/* ---------- controls ---------- */
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.controls input[type=search]{max-width:340px;-webkit-appearance:none;appearance:none}
.chip{background:transparent;border:1px solid var(--line2);border-radius:999px;color:var(--muted);font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;padding:7px 14px;cursor:pointer;transition:all .16s}
.chip:hover{color:var(--text);border-color:var(--steel)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.spacer{flex:1}
.stale{font-size:12.5px;color:var(--muted)}

/* ---------- the register ---------- */
.tablewrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1080px}
/* Scoped to the register. The breakdown table has its own header rule and must
   NOT be sticky: inside a card it floats the labels down over the rows. */
.tablewrap thead th{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:11px 10px;background:var(--bg2);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:5}
tbody td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel2)}
.num{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap}
.ref{font-family:var(--display);font-weight:600;font-size:13.5px;white-space:nowrap}
.ref .their{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--muted)}
.proj{white-space:nowrap}
.proj .code{font-family:var(--display);font-weight:600;font-size:13px}
.proj .nm{display:block;font-size:12px;color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.subj{max-width:250px}
/* Two lines, then an ellipsis. A four-line subject pushed every other
   row apart and bought nothing: the full text is on the record. */
.subj .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.subj .gc{display:block;font-size:12px;color:var(--muted)}
/* A change with no project code at all. Not an error, and not something to
   paper over with a blank: the code is missing and that is worth seeing. */
.nocode{color:var(--warn)}

.pill{display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.pill.accent{color:var(--accent2);border-color:rgba(107,163,208,.4);background:rgba(74,123,166,.12)}
.pill.ok{color:var(--ok);border-color:rgba(63,157,107,.4);background:rgba(63,157,107,.1)}
.pill.warn{color:var(--warn);border-color:rgba(201,162,39,.4);background:rgba(201,162,39,.1)}
.pill.alarm{color:#e8897e;border-color:rgba(207,91,78,.45);background:rgba(207,91,78,.12)}
.pill.muted{color:var(--muted)}

/* The deadline column. 'unknown' is styled as its own thing rather than as
   a blank, because a job whose window nobody has read out of the subcontract
   is not a job without a deadline. */
.due{white-space:nowrap;font-size:13px}
.due.blown{color:#e8897e;font-weight:600}
.due.hot{color:var(--warn);font-weight:600}
.due.warm{color:var(--steel)}
.due.ok{color:var(--muted)}
.due.met{color:var(--muted)}
.due.unknown{color:var(--muted);font-style:italic}

.claim{white-space:nowrap;font-size:13px;color:var(--muted)}
.claim b{color:var(--text);font-weight:600}

.empty{padding:60px 24px;text-align:center;color:var(--muted)}
.empty h3{font-size:16px;color:var(--text);margin-bottom:6px}
.loading{padding:60px 24px;text-align:center;color:var(--muted)}

.foot{margin-top:14px;font-size:12.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.foot .tot{font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .wrap{padding:20px 14px 70px}
  .bar{padding:0 14px}
}

/* ============================================================
   Record screen  (card, two-column, line table, totals panel)
   ------------------------------------------------------------
   Written for a pricing screen that was cancelled on 2026-08-25:
   the hub records a result priced elsewhere, it does not price.
   The layout carries over to the record screen unchanged, so this
   stays. The markup it styles does not exist yet.
   ============================================================ */
/* minmax(0,1fr), not 1fr: a grid track defaults to min-width:auto, so the
   left column could not shrink below the 900px min-width of the lines
   table inside it. Between 1080px and about 1310px that pushed the whole
   PAGE sideways, header and all, instead of scrolling the table inside
   the .scroll wrapper that is already there for it. */
/* One column. The breakdown is the widest thing on the page and it was
   competing with a 320px sidebar for room, which is what forced it to
   scroll sideways. Status and value goes underneath it instead. */
.price-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}

.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:18px}
.card h2{font-size:12px;font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width:720px){.row2,.row3{grid-template-columns:1fr}}
select,textarea,input[type=date],input[type=number]{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;color:var(--text);font-family:var(--body);font-size:15px;padding:11px 12px}
select:focus,textarea:focus,input[type=date]:focus,input[type=number]:focus{outline:none;border-color:var(--accent)}
textarea{min-height:74px;resize:vertical}
input[type=number]{font-family:var(--num);font-variant-numeric:tabular-nums;text-align:right}

/* Two-state switch. A radio pair rather than a dropdown because the choice
   changes what the whole form means and should never be one click from wrong. */
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.seg button{background:transparent;border:0;color:var(--muted);font-family:var(--display);font-size:13px;font-weight:600;padding:10px 18px;cursor:pointer;transition:all .16s}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.seg button:not(:last-child){border-right:1px solid var(--line2)}

/* ---------- lines ---------- */
.lines{width:100%;border-collapse:collapse;min-width:900px}
.lines th{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.lines td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.lines tr:last-child td{border-bottom:0}
.lines input,.lines select{font-size:14px;padding:8px 9px}
.lines .amt{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;font-size:14.5px;padding-top:16px;white-space:nowrap}
.lines .amt.credit{color:#e8897e}
.lines .del{background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:12px 6px}
.lines .del:hover{color:var(--err)}
.w-code{width:210px}.w-desc{min-width:230px}.w-num{width:104px}.w-dir{width:104px}.w-uom{width:78px}

/* The routing note. This is rule 7 in the one place it actually bites: the
   moment somebody picks a code from the 8xx block. */
.lines tr.noterow td{padding-top:0;border-bottom:1px solid var(--line)}
.note{margin-top:0;font-size:12px;color:var(--warn);background:rgba(201,162,39,.08);border-left:2px solid rgba(201,162,39,.5);padding:7px 10px;border-radius:0 4px 4px 0}
.issues{margin-top:6px;font-size:12px;color:#e8897e}

/* ---------- totals ---------- */
/* Not sticky. It was sticky with no stacking context, so the Onward card
   below it scrolled up and painted its Push and Copy row buttons straight
   through the totals figures. In one column there is nothing to stick to. */
.totals .tcols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.totals .tinputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px;align-items:start}
.totals .tmoney{border-left:1px solid var(--line);padding-left:26px}
@media (max-width:900px){.totals .tcols,.totals .tinputs{grid-template-columns:1fr}
  .totals .tmoney{border-left:0;padding-left:0}}
.tline{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.tline dt{color:var(--muted)}
.tline dd{font-family:var(--num);font-variant-numeric:tabular-nums}
.tline.sub{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:600}
.tline.grand{border-top:1px solid var(--line2);margin-top:8px;padding-top:14px;font-size:19px;font-family:var(--display);font-weight:700}
.tline.grand dt{color:var(--text)}
.tline.credit dd{color:#e8897e}

/* Anything the GC never sees is marked, so nobody has to remember which is
   which when the quotation is being checked one last time before it goes. */
.internal{display:inline-block;font-size:9.5px;font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.capwarn{margin-top:12px;font-size:12.5px;color:var(--warn);background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.35);padding:10px 12px;border-radius:6px}
.blocker{margin-top:12px;font-size:12.5px;color:#e8897e;background:rgba(207,91,78,.08);border:1px solid rgba(207,91,78,.35);padding:10px 12px;border-radius:6px}
.terms{font-size:12.5px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* b is for figures, hence the tabular font. em is for a gap somebody has to
   go and close, so it takes the warning colour and stays in the body face. */
.terms b{color:var(--steel);font-weight:600;font-family:var(--num)}
.terms em{color:var(--warn);font-style:normal;font-weight:600}
.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.actions .btn{flex:1;min-width:130px}
.backlink{font-size:13px;color:var(--muted);margin-bottom:14px;display:inline-block}
.backlink:hover{color:var(--text)}

/* The reference and the next action both open the change. A pill that is a
   link still has to look like a pill, not like body copy that turned blue. */
.ref a{color:var(--text);text-decoration:none}
.ref a:hover{color:var(--accent2);text-decoration:underline}
a.pill{text-decoration:none}
a.pill:hover{filter:brightness(1.25)}

/* A disabled input has to look disabled. Hours are switched off on material and
   other lines, and an enabled-looking empty box invites somebody to type a
   number the budget would then take literally. */
.lines input:disabled,.lines select:disabled{opacity:.35;cursor:not-allowed;background:var(--bg2)}

/* Derived money. Read only by construction, not by a disabled attribute: there
   is no input to disable, because there is nothing to type. */
.derived{margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.derived .tline dt{display:flex;align-items:center;gap:6px}
.derived .tline dd{font-family:var(--num);font-variant-numeric:tabular-nums}

/* OH&P: two boxes for one number. Whichever is typed drives, the other follows,
   and the follower is dimmed so it is obvious which one is being believed. */
.ohp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ohp-box{position:relative;display:flex;align-items:center}
.ohp-box input{padding-right:26px}
.ohp-box .unit{position:absolute;right:10px;color:var(--muted);font-size:13px;pointer-events:none}
.ohp-box .unit.pre{position:absolute;left:11px;right:auto}
.ohp-box:has(.unit.pre) input{padding-left:22px;padding-right:12px}
.ohp-box.follows input{color:var(--muted)}

/* The OH&P percentage sits beside its label, because the GC reads the two
   together: a percentage is what gets checked against a subcontract cap. */
.derived .pct{font-family:var(--num);font-size:12.5px;color:var(--steel);font-variant-numeric:tabular-nums}
/* A gap the screen will close for you, rather than a warning. */
.hint.learn{color:var(--accent2)}

/* ---------- the export sheet ----------
   A native dialog, so focus trapping and Escape are the browser's job
   rather than three more listeners nobody maintains. */
.sheet-dialog{
  width:min(560px,calc(100vw - 32px));border:1px solid var(--line2);border-radius:12px;
  background:var(--panel);color:var(--text);padding:0;
}
.sheet-dialog::backdrop{background:rgba(6,8,12,.72);backdrop-filter:blur(3px)}
.sheet-form{padding:24px 26px 22px}
.sheet-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sheet-head h2{font-family:var(--display);font-size:19px;font-weight:700;margin:0;flex:1}
.sheet-head .x{background:none;border:0;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.sheet-head .x:hover{color:var(--text)}
.sheet-dialog .field{margin-bottom:18px}
.sheet-dialog .seg{display:flex;width:100%}
.sheet-dialog .seg button{flex:1}
.sheet-dialog .actions{display:flex;gap:10px;margin-top:22px}
.sheet-dialog .actions .btn{flex:1}

/* What is about to come out, before it comes out. A count and a total is
   enough to catch the wrong job or the wrong list without opening the file. */
.ex-summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:12px;
}
.ex-summary .n{font-family:var(--display);font-size:15px;font-weight:600}
.ex-summary .n em{color:var(--muted);font-style:normal;font-weight:400}
.ex-summary .v{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:20px;font-weight:600}
.ex-summary .v span{font-size:12px;color:var(--muted);display:block;text-align:right;font-family:var(--display);letter-spacing:.06em;text-transform:uppercase}
.ex-summary.none .v{color:var(--muted)}

.ex-warn{font-size:12.5px;padding:9px 12px;border-radius:6px;margin-bottom:8px;border:1px solid}
.ex-warn.alarm{color:#e8897e;background:rgba(207,91,78,.08);border-color:rgba(207,91,78,.35)}
.ex-warn.warn{color:var(--warn);background:rgba(201,162,39,.08);border-color:rgba(201,162,39,.35)}
.ex-warn.muted{color:var(--muted);background:transparent;border-color:var(--line)}

/* The internal toggle is deliberately a bit of friction: a checkbox that has
   to be found and ticked, and a red panel that appears when it is. */
.ex-internal{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);cursor:pointer}
.ex-internal input{width:16px;height:16px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--err)}
.ex-internal b{display:block;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text)}
.ex-internal em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.ex-danger{
  margin-top:12px;font-size:12.5px;color:#e8897e;background:rgba(207,91,78,.1);
  border:1px solid rgba(207,91,78,.45);padding:11px 13px;border-radius:6px;
}

/* ---------- importing a payload ---------- */
.drop{
  border:1.5px dashed var(--line2);border-radius:9px;padding:22px 18px;text-align:center;
  margin-bottom:18px;transition:all .16s;cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(74,123,166,.07)}
.drop p{margin:0;font-size:14px}
.drop .hint{margin-top:5px}
.linkish{background:none;border:0;color:var(--accent2);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
#import textarea{font-family:var(--num);font-size:12.5px;line-height:1.5;resize:vertical}

/* What the payload will do, and what is wrong with it. Errors block, warnings
   do not, and the two never share a colour. */
.im-block{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:12px;background:var(--panel2)}
.im-block h3{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.im-line{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:3px 0}
.im-line dt{color:var(--muted)}
.im-line dd{margin:0;font-family:var(--num);font-variant-numeric:tabular-nums}
.im-msg{font-size:12.5px;padding:9px 12px;border-radius:6px;margin-bottom:8px;border:1px solid}
.im-msg.err{color:#e8897e;background:rgba(207,91,78,.08);border-color:rgba(207,91,78,.35)}
.im-msg.warn{color:var(--warn);background:rgba(201,162,39,.08);border-color:rgba(201,162,39,.35)}
.im-msg .where{display:block;font-family:var(--display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.im-cand{display:block;border:1px solid var(--line2);border-radius:7px;padding:10px 13px;margin-bottom:7px;color:var(--text);font-size:13.5px}
.im-cand:hover{border-color:var(--accent);background:var(--panel2)}
.im-cand b{font-family:var(--num)}
.im-cand span{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* ---------- pushing onward ---------- */
.onward{margin-top:18px}
.push{padding:14px 0;border-bottom:1px solid var(--line)}
.push:last-child{border-bottom:0;padding-bottom:0}
.push:first-of-type{padding-top:0}
.push-head{display:flex;align-items:flex-start;gap:12px}
.push-head>div{flex:1;min-width:0}
.push-head b{display:block;font-size:14px;font-weight:600}
.push-head em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.push-head .btn{flex:0 0 auto;margin-top:2px}
/* Why a push is closed, in the same place the button is, so nobody has to hunt
   for the reason it did nothing. */
.push-state{font-size:12.5px;margin:9px 0 0;color:var(--muted)}
.push-state.done{color:var(--ok)}
.push-state.blocked{color:var(--warn)}
.push-state.failed{color:#e8897e}
.sov-row{
  margin:10px 0 0;padding:10px 12px;background:var(--bg2);border:1px solid var(--line);
  border-radius:6px;font-family:var(--num);font-size:11.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-all;color:var(--steel);
}