/* Consul look (2026-10-21). Structure and restraint from Linear, warmth from the Streamline palette.
   - Shell: a quiet neutral frame (top bar + sidebar) around one white working panel with soft corners — the eye
     always knows where the work is.
   - One hairline weight, one accent (emerald, used sparingly), near-black primary actions, everything on a 4/8px
     grid with equal gutters so columns and edges line up.
   - Sidebar: 16px line icons, 32px rows, a soft grey fill for where you are; section labels in sentence case.
   - Type: Tobias (self-hosted) for page titles only; Inter for everything else, one step larger than Linear's
     (Faisal asked for comfortable reading sizes, 2026-10-20).
   Loaded after each Consul page's own <style>, so it re-points tokens and restyles shared components only.
   ConsulR never loads this file (consulr.html has its own theme; shared auth pages get it from Consul routes only). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@font-face{font-family:'Tobias';src:url('/static/fonts/tobias-regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Tobias';src:url('/static/fonts/tobias-medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Tobias';src:url('/static/fonts/tobias-semibold.otf') format('opentype');font-weight:600;font-display:swap}

:root,:root[data-skin="metal"]{
  --chrome:#f4f4f2;                       /* the frame: top bar + sidebar (a touch of the Streamline warmth) */
  --bg:#f4f4f2; --panel:#ffffff; --field:#f7f7f6; --ink:#18181b; --mut:#6b6b74; --dim:#9a9aa2;
  --line:#ebebee; --line2:#dedee3; --none:#0b8f62; --warn:#b45309; --sanction:#d92d20; --ok:#0b8f62;
  --muted:#f6f6f5; --mint:#d5e1de; --hover:rgba(24,24,27,.045); --sel:rgba(24,24,27,.07); --ring:rgba(11,143,98,.22);
  --rail-ink:#3f3f46; --rail-ic:#71717a; --rail-dim:#8a8a93;
  --f:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Tobias',Georgia,'Times New Roman',serif;
  --text-xs:13px; --text-sm:14.5px; --text-md:16px; --text-xl:20px; --text-2xl:28px;
  --r-ctl:6px; --r-card:10px; --r-tile:14px; --r-panel:12px;
  --sh-xs:0 1px 1px rgba(0,0,0,.04); --sh-sm:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.02);
  --sh-pop:0 16px 48px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);
}
:root[data-skin="dark"]{
  --chrome:#0f0f11; --bg:#0f0f11; --panel:#17171a; --field:#1d1d21; --ink:#ededef; --mut:#9b9ba4; --dim:#71717a;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12); --none:#34d399; --warn:#fbbf24; --sanction:#f87171; --ok:#34d399;
  --muted:#1b1b1f; --mint:#22332e; --hover:rgba(255,255,255,.045); --sel:rgba(255,255,255,.08); --ring:rgba(52,211,153,.25);
  --rail-ink:#d4d4d8; --rail-ic:#8b8b94; --rail-dim:#71717a;
  --sh-xs:none; --sh-sm:0 0 0 1px rgba(255,255,255,.06); --sh-pop:0 16px 48px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---- type ---- */
body{font-family:var(--f);font-size:var(--text-sm);line-height:1.55;letter-spacing:-.006em;color:var(--ink);background:var(--chrome);
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--disp);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
h2{font-size:var(--text-2xl);line-height:1.15;margin:0 0 6px}
h3{font-family:var(--f);font-weight:600;letter-spacing:-.01em;font-size:var(--text-md)}
.sub,.msub{color:var(--mut)}
.sub{margin-bottom:24px}
b,strong{font-weight:600;color:inherit}
a{color:var(--ink);text-decoration-color:var(--line2);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
.mini{color:var(--mut)}
::selection{background:var(--mint)}
label{letter-spacing:.04em;font-weight:500}

/* ---- the shell: frame + one working panel ---- */
header{background:var(--chrome);border-bottom:0;padding-left:20px;padding-right:16px}
.brand{font-family:var(--disp);font-weight:500;letter-spacing:-.02em}
.mark{background:var(--ink)} .mark::after{background:var(--chrome)}
.who{font-size:13.5px}
body.rail-on #rail{background:var(--chrome);border-right:0;width:232px;padding:6px 10px 14px;gap:1px}
body.rail-on main{margin:0 8px 8px 232px;padding:36px 44px 88px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-panel);min-height:calc(100vh - 65px);box-shadow:var(--sh-xs)}
#notifPanel{border-radius:var(--r-card);border-color:var(--line)!important;box-shadow:var(--sh-pop)!important;top:52px!important}
@media (max-width:860px){
  body.rail-on main{margin:0;border-radius:0;border-left:0;border-right:0;padding:24px 16px 80px}
  body.rail-on #rail{width:auto;padding:6px 10px}
}

/* ---- sidebar: icon + label rows, a soft fill for where you are ---- */
.ri{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:var(--rail-ink);font-weight:500;font-size:14px;
  border-radius:var(--r-ctl);transition:background .12s,color .12s}
.ri-ic{display:inline-flex;width:16px;height:16px;color:var(--rail-ic);flex:none}
.ri:hover{color:var(--ink);background:var(--hover)}
.ri.on{color:var(--ink);background:var(--sel);box-shadow:none;font-weight:600}
.ri.on .ri-ic{color:var(--ink)}
.ri.ri-child{padding-left:36px} .ri.ri-child::before{left:18px;top:6px;bottom:6px;background:var(--line2)}
.ri-sub{height:28px;padding:0 10px 0 12px;margin-left:17px;width:calc(100% - 17px);color:var(--mut);font-size:13.5px;
  border-left:1px solid var(--line2);border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.ri-sub:hover{color:var(--ink);background:var(--hover)}
.ri-sub.on{color:var(--ink);border-left:1px solid var(--ink);padding-left:12px;font-weight:600}
.ri-sec{margin:14px 0 2px;padding:10px 10px 4px;border-top:0;text-transform:none;letter-spacing:0;font-size:12.5px;
  font-weight:500;color:var(--rail-dim)}
nav button:hover,nav button.on:hover{color:var(--ink);background:var(--hover);box-shadow:none}
nav button.on{color:var(--ink);background:var(--sel);box-shadow:none}

/* ---- buttons: 32px, quiet secondary, near-black primary ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;background:var(--ink);color:var(--panel);
  border:1px solid var(--ink);border-radius:var(--r-ctl);font-family:var(--f);font-weight:500;font-size:14px;letter-spacing:-.005em;
  padding:6px 14px;box-shadow:var(--sh-xs);transition:background .12s,border-color .12s,opacity .12s}
html[data-skin="dark"] .btn:not(.ghost){color:#0f0f11}
.btn:hover{box-shadow:var(--sh-xs);opacity:.88}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--sh-xs)}
.btn.ghost:hover{background:var(--field);border-color:var(--line2);opacity:1}
.btn.sm{min-height:30px;padding:4px 11px;font-size:13.5px}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,.ri:focus-visible,.subnav button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.tb-opt{border-radius:var(--r-ctl)}

/* ---- surfaces: hairline cards on the white panel ---- */
.card,.aml-u{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none}
.modal{border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh-pop);padding:22px 24px 20px}
.modal h3{font-size:var(--text-md)}
.modal-backdrop{background:rgba(15,15,17,.32);backdrop-filter:blur(3px)}
.tab-menu{border-radius:var(--r-card);border-color:var(--line);box-shadow:var(--sh-pop);overflow:hidden;padding:4px}
.tab-menu button{border-radius:var(--r-ctl)!important}
.note{border-radius:var(--r-ctl)}
.empty{color:var(--mut);padding:44px 20px}
/* summary tiles: flat, quiet, numbers carry the weight (a faint grey-to-mint wash keeps the warmth) */
.crm-kpi{background:linear-gradient(180deg,var(--muted) 0%,color-mix(in srgb,var(--mint) 55%,var(--muted)) 100%);
  border:1px solid var(--line);border-radius:var(--r-tile);padding:14px 16px}
.crm-kpi b{font-family:var(--disp);font-weight:500;letter-spacing:-.02em;font-size:26px;margin-top:2px}
.crm-kpi span{letter-spacing:.04em;color:var(--mut);font-size:12px;font-weight:500}

/* ---- lists: rows that line up, gentle hover ---- */
.item{padding:14px 0;border-bottom-color:var(--line)}
.item .t{font-weight:600;font-size:15px;letter-spacing:-.01em}
.card>.item:last-child{border-bottom:0}
#w_list .item,#w_list>div>.item{margin:0 -12px;padding:14px 12px;border-radius:var(--r-ctl);transition:background .12s}
#w_list .item:hover{background:var(--hover)}

/* ---- form controls: 36px, hairline, accent ring on focus ---- */
input[type=text],input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],textarea,select{
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-ctl);color:var(--ink);font-family:var(--f);
  font-size:14.5px;box-shadow:var(--sh-xs);transition:border-color .12s,box-shadow .12s}
input[type=text],input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],select{min-height:38px;padding:8px 11px}
input:focus,textarea:focus,select:focus{border-color:var(--none);box-shadow:0 0 0 3px var(--ring);outline:none}

/* ---- tabs: segmented ---- */
.subnav{border-bottom:0;gap:2px;padding:3px;background:var(--hover);border-radius:8px;width:fit-content;max-width:100%;margin:6px 0 22px}
.subnav button{border:0;border-radius:6px;color:var(--mut);font-weight:500;padding:5px 12px;font-size:14px}
.subnav button:hover{color:var(--ink);background:transparent;box-shadow:none}
.subnav button.on{color:var(--ink);background:var(--panel);border:0;box-shadow:var(--sh-sm);font-weight:600}
#cl_tabs{width:100%}

/* ---- pills, chips, badges: small grey tags ---- */
.pill,.chip,.badge{border-radius:5px;font-weight:500}
.chip{border:0;background:var(--field);color:var(--mut);padding:2px 8px;box-shadow:inset 0 0 0 1px var(--line)}
.pill.ok,.bz-st.paid,.bz-st.confirmed{background:color-mix(in srgb,var(--ok) 9%,transparent)}

/* ---- tables ---- */
table.mp-t th,.mp-t th{color:var(--mut);font-weight:500;font-size:12.5px;letter-spacing:.01em;border-bottom-color:var(--line)}
.mp-t td{border-bottom-color:var(--line)}

/* ---- one accent only: two series side by side → the first goes ink ---- */
.bz-b i.inv,.bz-k.inv{background:var(--ink)}

/* ---- every card-like block: the same soft corners ---- */
.fa,.op-item,.aml-fs,.aml-linkbox,.aml-prev,.crm-card,.crm-col,.crm-task,.datasec,.dr-mail,.dr-opt,.em-q,.em-tile,.gp-c,
.la,.lf-agp,.lf-body,.lf-cdg,.lf-filters,.lf-g,.lf-jc,.lf-lc,.lf-toc,.ns-hit,.po-pols,.pq,.pr-flag,.rm-kpi,.rm-wrap,
.scopebox,.su-row,.logoprev,.brandthumb,.bz-warn,.bz-bench,.bz-drop,.item.scr-match{border-radius:var(--r-card)}
/* Agent Studio tools read like Linear's feature cards: a flat tinted block, icon + title, then the description */
.fa{background:var(--muted);border:1px solid var(--line);padding:16px 18px}
.fa:hover{background:var(--panel);border-color:var(--line2);box-shadow:var(--sh-sm)}
.fa-ic{border-radius:7px;background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);width:32px;height:32px;font-size:15px}
.op-item{background:var(--muted);border-color:var(--line)}
.rm-kpi{background:var(--muted);border:1px solid var(--line)}
.lf-lab,.tb-opt,.pr-paper{border-radius:var(--r-ctl)}

/* Client files: the share row keeps its choices on one line */
#cf_ri,#cf_dy{width:auto;flex:none}
.cf-client{border-radius:var(--r-card)} .cf-client:hover{box-shadow:var(--sh-sm)}

/* Engagements: no subtitle under the title, so the tabs need a little air */
#p_work>h2{margin-bottom:16px}

/* the Active / Paused / Ended switch sits at its natural width, the "+ New engagement" button at the far edge */
#w_tabs{flex:0 1 auto!important;padding:3px!important;margin:0!important}
#w_new{margin-left:auto}
/* summary tiles: label, figure and note sit on the same three rows in every tile, so side-by-side figures align */
.crm-kpi{display:grid;grid-template-rows:auto auto 1fr;align-content:start;min-width:0}
.crm-kpi>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-kpi b{white-space:nowrap}
/* engagement setup checklist: hairline rows with a status dot, not coloured bars */
.su-row{margin-top:0;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 6px;background:transparent}
.su-row::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--dim)}
.su-row.done::before{border-color:var(--ok);background:var(--ok)}
.su-row.miss{border-left:0;border-radius:var(--r-ctl)}
.su-row.miss::before{border-color:var(--warn)}
.su-row.miss:hover{background:var(--hover);box-shadow:none;border-color:transparent;border-bottom-color:var(--line)}
.su-row.miss .t{font-weight:500}

/* a self-registered firm's trial, in the header */
.trial-chip{margin-left:8px;text-decoration:none;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line2)}
.trial-chip.over{color:var(--sanction)!important;box-shadow:inset 0 0 0 1px var(--sanction)}