/* ══════════════════════════════════════════════════════════════════════════
   TEXAS ONE — design system
   Paper, flag navy and flag red. Navy carries the structure, red marks what
   is selected or primary, and everything else stays out of the way.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --page:#F5F3EE; --surface:#FFFFFF; --sunk:#EFECE5; --hover:#FAF9F6;
  --line:rgba(20,24,34,.10); --line-2:rgba(20,24,34,.17);
  --text:#15181F; --muted:#565C69; --dim:#868B96;
  --fill:rgba(20,24,34,.045); --fill-2:rgba(20,24,34,.08);
  --brand:#B71C2C; --brand-hover:#9C1524; --brand-soft:rgba(183,28,44,.08); --on-brand:#FFFFFF;
  --navy:#14213D; --flag-blue:#2B4A8B; --flag-white:#F2F2F2;
  --side:#14213D; --side-2:#1B2A4C; --side-text:#E9EDF5; --side-muted:#9BA7BF;
  --side-line:rgba(255,255,255,.09); --side-fill:rgba(255,255,255,.07); --side-fill-2:rgba(255,255,255,.12);
  --green:#1B7F4C; --green-soft:rgba(27,127,76,.11); --amber:#A15C0B; --amber-soft:rgba(161,92,11,.11);
  --blue:#24508F; --blue-soft:rgba(36,80,143,.10);
  --shadow-sm:0 1px 2px rgba(20,24,34,.06);
  --shadow-pop:0 14px 36px rgba(17,20,28,.16),0 2px 6px rgba(17,20,28,.08);
  --r-sm:6px; --r:8px; --r-lg:10px;
  --f:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --d:'Barlow Condensed','Arial Narrow','Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --side-w:264px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --page:#0D1015; --surface:#141922; --sunk:#10141B; --hover:#181E28;
  --line:rgba(226,232,242,.08); --line-2:rgba(226,232,242,.15);
  --text:#E8EBF1; --muted:#A2A9B7; --dim:#727988;
  --fill:rgba(226,232,242,.05); --fill-2:rgba(226,232,242,.09);
  --brand:#E5484D; --brand-hover:#F06368; --brand-soft:rgba(229,72,77,.13); --on-brand:#FFFFFF;
  --navy:#1B2A4C; --flag-blue:#3B5DA6; --flag-white:#D9DCE3;
  --side:#0A1222; --side-2:#111B31; --side-text:#E6EAF2; --side-muted:#8E9AB2;
  --side-line:rgba(255,255,255,.07); --side-fill:rgba(255,255,255,.06); --side-fill-2:rgba(255,255,255,.10);
  --green:#3DBE7A; --green-soft:rgba(61,190,122,.13); --amber:#E0A040; --amber-soft:rgba(224,160,64,.13);
  --blue:#6E9BE0; --blue-soft:rgba(110,155,224,.13);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 18px 44px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--page);color:var(--text);font:14px/1.5 var(--f);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.lg{width:20px;height:20px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)} .dim{color:var(--dim)}

/* ── shell ───────────────────────────────────────────────────────────────── */
.one{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--side);color:var(--side-text);display:flex;flex-direction:column;
  padding:0 12px 12px;z-index:30}
.flag{display:flex;height:4px;flex:none}
.side .flag{margin:0 -12px}
.flag i{flex:1}
.flag i:nth-child(1){background:var(--flag-blue)} .flag i:nth-child(2){background:var(--flag-white)} .flag i:nth-child(3){background:var(--brand)}
.brand{display:flex;align-items:center;gap:12px;padding:16px 6px 14px}
.brand img{width:44px;height:50px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));flex:none}
.brand b{display:block;font:700 23px/1 var(--d);letter-spacing:.07em;text-transform:uppercase;color:#fff}
.brand small{display:block;font-size:12px;color:var(--side-muted);margin-top:4px}

.switch{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid var(--side-line);border-radius:var(--r);
  background:var(--side-fill);color:var(--side-text);text-align:left;cursor:pointer;transition:background .15s var(--ease)}
.switch:hover,.switch[aria-expanded="true"]{background:var(--side-fill-2)}
.switch .t{flex:1;min-width:0;line-height:1.25}
.switch .t b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switch .t span{display:block;font-size:12px;color:var(--side-muted)}
.switch svg{color:var(--side-muted)}

.nav{margin:12px -4px 0;padding:0 4px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin}
.nav h6{margin:16px 8px 6px;font:600 13px/1 var(--d);letter-spacing:.09em;text-transform:uppercase;color:var(--side-muted)}
.nav h6:first-child{margin-top:6px}
.nav a{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 8px 0 10px;border-radius:var(--r-sm);color:var(--side-muted);
  font-weight:500;position:relative;transition:background .12s var(--ease),color .12s var(--ease)}
.nav a:hover{background:var(--side-fill);color:var(--side-text)}
.nav a.on{background:var(--side-fill);color:#fff}
.nav a.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--brand)}
.nav a .n{margin-left:auto;font-size:12px;color:var(--side-muted);font-variant-numeric:tabular-nums}
.nav a .n.hot{color:#fff;background:var(--brand);border-radius:9px;padding:0 7px;line-height:18px;font-weight:600}
.nav a .ext{margin-left:auto;opacity:.6}
.me{display:flex;align-items:center;gap:10px;padding:12px 4px 0;margin-top:8px;border-top:1px solid var(--side-line);position:relative}
.me .t{flex:1;min-width:0;line-height:1.25}
.me .t b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .t span{font-size:12px;color:var(--side-muted)}
.side .iconbtn{color:var(--side-muted)} .side .iconbtn:hover{background:var(--side-fill);color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:10px;padding:0 24px 0 28px;
  background:color-mix(in srgb,var(--page) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.top .menu-btn{display:none}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);min-width:0;overflow:hidden;white-space:nowrap}
.crumbs a:hover{color:var(--text)}
.crumbs b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:var(--dim)}
.canary{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--amber);background:var(--amber-soft);
  border-radius:var(--r-sm);padding:3px 8px;white-space:nowrap}
.search-btn{margin-left:auto;display:flex;align-items:center;gap:8px;width:300px;height:34px;padding:0 8px 0 10px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--surface);color:var(--dim);cursor:pointer;text-align:left;transition:border-color .15s var(--ease)}
.search-btn:hover{border-color:var(--dim)}
.search-btn span{flex:1}
kbd{font:500 11px/1 var(--f);color:var(--muted);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:3px 5px;background:var(--sunk)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:34px;padding:0 8px;border-radius:var(--r-sm);
  border:0;background:none;color:var(--muted);cursor:pointer;position:relative;transition:background .12s var(--ease),color .12s var(--ease)}
.iconbtn:hover,.iconbtn[aria-expanded="true"]{background:var(--fill);color:var(--text)}
.bell .count{position:absolute;top:3px;left:19px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff;
  font:600 10px/16px var(--f);text-align:center;box-shadow:0 0 0 2px var(--page)}
.view{padding:28px 40px 64px;max-width:1260px;width:100%;animation:fadein .18s var(--ease)}
.view.wide{max-width:none}
.view:focus,.view:focus-visible{outline:none}   /* focus lands here after each page change, for screen readers */
.view.flush{padding:0;max-width:none;flex:1;display:flex;flex-direction:column}
@keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ── page headings ───────────────────────────────────────────────────────── */
.ph{margin-bottom:24px}
.ph .eyebrow,.eyebrow{font:600 13.5px/1 var(--d);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.ph h1{margin:6px 0 0;font:700 32px/1.05 var(--d);letter-spacing:.01em}
.ph p{margin:6px 0 0;color:var(--muted);max-width:720px}
.ph .row-end{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ph .row-end > div:first-child{flex:1;min-width:240px}
.rule{height:3px;display:flex;margin-top:18px}
.rule i:nth-child(1){flex:34;background:var(--navy)} .rule i:nth-child(2){flex:33;background:var(--line-2)} .rule i:nth-child(3){flex:33;background:var(--brand)}
:root[data-theme="dark"] .rule i:nth-child(1){background:var(--flag-blue)}
.masthead{display:flex;align-items:center;gap:18px}
.masthead > img{width:62px;height:70px;object-fit:contain;flex:none}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px}
.cols.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.sec{margin-bottom:32px}
.sh{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;min-height:22px}
.sh h2{margin:0;font:700 17px/1.1 var(--d);letter-spacing:.06em;text-transform:uppercase}
.sh .meta{font-size:12.5px;color:var(--dim)}
.sh .end{margin-left:auto;font-size:13px;color:var(--muted);display:flex;gap:12px;align-items:center}
.sh a.end:hover,.sh .end a:hover{color:var(--text)}

/* ── lists ───────────────────────────────────────────────────────────────── */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line);min-height:52px}
.row:first-child{border-top:0}
a.row,button.row{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;cursor:pointer;transition:background .12s var(--ease)}
button.row:first-child{border-top:0}
a.row:hover,button.row:hover{background:var(--hover)}
.row .ic{width:32px;height:32px;border-radius:7px;background:var(--sunk);display:grid;place-items:center;color:var(--muted);flex:none}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.row .t p{margin:4px 0 0;color:var(--muted);font-size:13px;white-space:pre-wrap}
.row .end{font-size:12.5px;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:8px}
.row .chev{color:var(--dim)}
.row .count{font:700 18px/1 var(--d);color:var(--text);min-width:24px;text-align:right}
.row .count.hot{color:var(--brand)}

/* workspace badge: the logo for the community, the abbreviation otherwise */
.wsb{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;color:#fff;flex:none;overflow:hidden;
  font:700 12px/1 var(--d);letter-spacing:.04em;background:var(--navy)}
.wsb.sm{width:26px;height:26px;font-size:10.5px;border-radius:6px}
.wsb.lg{width:56px;height:56px;font-size:19px;border-radius:10px}
.wsb img{width:100%;height:100%;object-fit:cover}
.wsb.logo{background:none}
.wsb.logo img{object-fit:contain}
.wsb.w4{font-size:10.5px;letter-spacing:.01em} .wsb.sm.w4{font-size:9px}

.av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;background:var(--sunk)}
.av.sm{width:24px;height:24px} .av.lg{width:72px;height:72px} .av.md{width:40px;height:40px}
span.av{display:grid;place-items:center;color:#fff;font:600 11px/1 var(--f)}

.status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dim)}
.status.on{color:var(--green)} .status.on::before{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.status.warn{color:var(--amber)} .status.warn::before{background:var(--amber)}
.status.bad{color:var(--brand)} .status.bad::before{background:var(--brand)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.tag i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.row .t .pill,.pill{display:inline-flex;margin-top:0;align-items:center;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:5px;background:var(--fill-2);color:var(--muted);white-space:nowrap}
.row .t b .pill{margin-left:6px;vertical-align:1px}
.pill.red{background:var(--brand-soft);color:var(--brand)} .pill.green{background:var(--green-soft);color:var(--green)}
.pill.amber{background:var(--amber-soft);color:var(--amber)} .pill.blue{background:var(--blue-soft);color:var(--blue)}

/* ── live strip ──────────────────────────────────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.strip > div{padding:14px 16px 13px;border-left:1px solid var(--line);min-width:0}
.strip > div:first-child{border-left:0}
.strip .l{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.strip .v{font:700 34px/1 var(--d);letter-spacing:.01em;margin-top:6px}
.strip .v small{font:600 17px/1 var(--d);color:var(--dim);letter-spacing:.02em}
.strip .v.word{font-size:24px;padding-top:6px}
.strip .c{font-size:12px;color:var(--dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── tabs ────────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:6px;overflow-x:auto;scrollbar-width:none}
.tabs a,.tabs button{padding:0 0 10px;font-size:13.5px;color:var(--muted);font-weight:500;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;background:none;cursor:pointer;white-space:nowrap;transition:color .12s var(--ease)}
.tabs a:hover,.tabs button:hover{color:var(--text)}
.tabs .on{color:var(--text);border-bottom-color:var(--brand)}

/* ── feed ────────────────────────────────────────────────────────────────── */
.feed{list-style:none;margin:0;padding:0}
.feed .day{font-size:12px;color:var(--dim);font-weight:600;padding:14px 0 4px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--d);font-size:13px}
.feed li.e{display:flex;gap:12px;padding:9px 0;align-items:flex-start}
.feed li.e a.w:hover p{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.feed .w{flex:1;min-width:0}
.feed .w p{margin:0;font-size:14px}
.feed .w p b{font-weight:600}
.feed .w .tag{margin-top:2px}
.feed time{font-size:12.5px;color:var(--dim);white-space:nowrap;padding-top:1px}
.feed .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--sunk);color:var(--muted)}

/* ── tables ──────────────────────────────────────────────────────────────── */
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font:600 12.5px/1 var(--d);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--sunk);white-space:nowrap}
.tbl th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.tbl th button:hover{color:var(--text)}
.tbl td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr:first-child td{border-top:0}
.tbl tbody tr{transition:background .12s var(--ease)}
.tbl tbody tr.link{cursor:pointer}
.tbl tbody tr.link:hover{background:var(--hover)}
.tbl .who{display:flex;align-items:center;gap:10px;min-width:180px}
.tbl .who b{font-weight:600}
.tbl .who span:not(.av){display:block;font-size:12px;color:var(--dim)}
.tbl td.r,.tbl th.r{text-align:right}

/* ── controls ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-weight:600;font-size:13.5px;cursor:pointer;
  white-space:nowrap;transition:background .12s var(--ease),border-color .12s var(--ease),transform .08s var(--ease)}
.btn:hover{background:var(--hover);border-color:var(--dim)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--fill);color:var(--text)}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.55;pointer-events:none}
.input,.select{height:34px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--text);
  min-width:0;transition:border-color .12s var(--ease)}
.input:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar .grow{flex:1;min-width:200px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600}
.radio-row{display:flex;gap:8px;flex-wrap:wrap}
.radio-row label{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;background:var(--surface)}
.radio-row label:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* ── empty and loading ───────────────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 24px;color:var(--muted)}
.empty img{width:44px;height:50px;object-fit:contain;opacity:.22;filter:grayscale(1);margin-bottom:12px}
:root[data-theme="dark"] .empty img{opacity:.3}
.empty b{display:block;color:var(--text);font-weight:600;font-size:14.5px}
.empty p{margin:4px 0 0;font-size:13.5px;max-width:420px}
.list .empty{padding:28px 20px}
.sk{display:block;border-radius:6px;background:linear-gradient(90deg,var(--fill) 25%,var(--fill-2) 50%,var(--fill) 75%);background-size:200% 100%;
  animation:sk 1.3s linear infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.sk-row{display:flex;gap:12px;align-items:center;padding:14px;border-top:1px solid var(--line)}
.sk-row:first-child{border-top:0}
.err{padding:16px;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);background:var(--surface)}
.err b{display:block}
.err p{margin:4px 0 0;color:var(--muted)}

/* ── popovers, menus, dialogs ────────────────────────────────────────────── */
.pop{position:fixed;z-index:60;min-width:240px;max-width:min(380px,calc(100vw - 24px));background:var(--surface);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden;
  transform-origin:top left;animation:popin .14s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.pop .find{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);color:var(--dim)}
.pop .find input{flex:1;border:0;background:none;height:40px;outline:none;color:var(--text)}
.pop h6{margin:10px 12px 4px;font:600 12.5px/1 var(--d);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.pop .opt{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:0 4px;border-radius:var(--r-sm);cursor:pointer;width:calc(100% - 8px);
  border:0;background:none;text-align:left}
.pop .opt:hover,.pop .opt.hl{background:var(--fill)}
.pop .opt .t{flex:1;min-width:0;line-height:1.25}
.pop .opt .t b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop .opt .t span{font-size:12px;color:var(--muted)}
.pop .opt .check{color:var(--brand)}
.pop .scroll{max-height:min(60vh,420px);overflow-y:auto;padding-bottom:6px}
.pop .acts{border-top:1px solid var(--line);padding:4px 0}
.pop .acts .opt{color:var(--muted)}
.pop .note{margin:-2px 12px 6px;font-size:12px;color:var(--dim)}
.pop .head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.pop .head b{font:700 15px/1 var(--d);letter-spacing:.06em;text-transform:uppercase;flex:1}
.notif .item{display:flex;gap:10px;padding:10px 12px;border-top:1px solid var(--line);align-items:flex-start}
.notif .item:first-child{border-top:0}
.notif .item:hover{background:var(--hover)}
.notif .item .u{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none;background:transparent}
.notif .item.unread .u{background:var(--brand)}
.notif .item p{margin:0;font-size:13.5px}
.notif .item time{font-size:12px;color:var(--dim)}
.backdrop{position:fixed;inset:0;z-index:50;background:rgba(10,14,22,.45);animation:fade .15s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

.cmdk{position:fixed;z-index:70;left:50%;top:12vh;width:min(640px,calc(100vw - 24px));transform:translateX(-50%);background:var(--surface);
  border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-pop);overflow:hidden;animation:popin .14s var(--ease)}
.cmdk .inbar{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line)}
.cmdk .inbar input{flex:1;height:52px;border:0;background:none;outline:none;font-size:16px;color:var(--text)}
.cmdk .res{max-height:min(56vh,460px);overflow-y:auto;padding:6px 0 8px}
.cmdk h6{margin:10px 16px 4px;font:600 12.5px/1 var(--d);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.cmdk .opt{display:flex;align-items:center;gap:12px;padding:8px 12px;margin:0 6px;border-radius:var(--r-sm);cursor:pointer}
.cmdk .opt.hl{background:var(--fill-2)}
.cmdk .opt .t{flex:1;min-width:0;line-height:1.3}
.cmdk .opt .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk .opt .t span{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk .opt .ic{width:30px;height:30px;border-radius:7px;background:var(--sunk);display:grid;place-items:center;color:var(--muted);flex:none}
.cmdk .foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.cmdk .none{padding:24px;text-align:center;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:var(--text);color:var(--page);
  padding:10px 14px;border-radius:var(--r);font-weight:500;box-shadow:var(--shadow-pop);animation:popin .16s var(--ease)}

/* ── workspace header ────────────────────────────────────────────────────── */
.wshead{display:flex;align-items:center;gap:16px}
.wshead h1{margin:0;font:700 32px/1.05 var(--d);letter-spacing:.01em}
.wshead .sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;color:var(--muted);font-size:13.5px}
.banner{height:120px;border-radius:var(--r-lg);background:var(--navy) center/cover no-repeat;margin-bottom:18px;border:1px solid var(--line)}
.stats-inline{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}
.stats-inline div{display:flex;flex-direction:column}
.stats-inline b{font:700 26px/1 var(--d)}
.stats-inline span{font-size:12.5px;color:var(--muted);margin-top:3px}

/* ── network tree ────────────────────────────────────────────────────────── */
.tree{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 0}
.tree .node{display:flex;align-items:center;gap:12px;padding:9px 16px;position:relative}
.tree a.node:hover{background:var(--hover)}
.tree .node .t{flex:1;min-width:0}
.tree .node .t b{display:block;font-weight:600}
.tree .node .t span{font-size:12.5px;color:var(--muted)}
.tree .branch{margin-left:31px;border-left:2px solid var(--line-2);padding-left:0}
.tree .branch .node{padding-left:28px}
.tree .branch .node::before{content:"";position:absolute;left:0;top:50%;width:18px;border-top:2px solid var(--line-2)}
.tree .branch .node:last-child::after{content:"";position:absolute;left:-2px;top:50%;bottom:0;border-left:2px solid var(--surface)}
.tree .group{font:600 12.5px/1 var(--d);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);padding:12px 16px 6px 28px;position:relative}
.tree .group::before{content:"";position:absolute;left:0;top:18px;width:18px;border-top:2px solid var(--line-2)}

/* ── profile ─────────────────────────────────────────────────────────────── */
.profile-head{display:flex;align-items:center;gap:18px}
.profile-head h1{margin:0;font:700 32px/1.05 var(--d)}
.profile-head .sub{color:var(--muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ── console page inside Texas One ───────────────────────────────────────── */
.toolhead{padding:16px 28px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.toolhead h1{margin:0;font:700 26px/1.1 var(--d);letter-spacing:.01em}
.toolhead p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.toolhead > div:first-child{flex:1;min-width:220px}
.toolframe{flex:1;position:relative;min-height:calc(100vh - 56px - 76px)}
.toolframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--page)}
.toolframe .loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}

/* ── drawer and phone ────────────────────────────────────────────────────── */
.drawer-bg{display:none}
@media (max-width:1100px){
  .cols{grid-template-columns:minmax(0,1fr) 300px;gap:28px}
  .search-btn{width:220px}
}
@media (max-width:900px){
  .one{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-102%);transition:transform .22s var(--ease);
    box-shadow:var(--shadow-pop)}
  .drawer-open .side{transform:none}
  .drawer-open .drawer-bg{display:block;position:fixed;inset:0;z-index:25;background:rgba(10,14,22,.45);animation:fade .15s var(--ease)}
  .top .menu-btn{display:inline-flex}
  .top{padding:0 10px;gap:4px}
  .search-btn{width:auto;margin-left:auto;border:0;background:none;padding:0 8px}
  .search-btn span,.search-btn kbd{display:none}
  .crumbs .full{display:none}
  .view{padding:20px 16px 48px}
  .cols,.cols.even{display:block}
  .ph h1,.wshead h1,.profile-head h1{font-size:27px}
  .masthead > img{width:48px;height:54px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip > div:nth-child(odd){border-left:0}
  .strip > div:nth-child(n+3){border-top:1px solid var(--line)}
  .strip > div:last-child:nth-child(odd){grid-column:1/-1}
  .canary .long{display:none}
  .toolhead{padding:12px 16px}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:6px}
  /* tables become rows */
  .tbl-wrap.cards{background:none;border:0;overflow:visible}
  .tbl-wrap.cards table,.tbl-wrap.cards tbody,.tbl-wrap.cards tr,.tbl-wrap.cards td{display:block;width:100%}
  .tbl-wrap.cards thead{display:none}
  .tbl-wrap.cards tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 4px;margin-bottom:8px}
  .tbl-wrap.cards td{border:0;padding:4px 12px;display:flex;justify-content:space-between;gap:12px}
  .tbl-wrap.cards td[data-label]::before{content:attr(data-label);color:var(--dim);font-size:12.5px}
  .tbl-wrap.cards td.lead{padding-top:8px}
  .tbl-wrap.cards td.lead::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
