:root{
  /* surfaces — neutral dark, layered so light reads across them */
  --void:#181818;
  --deck:rgba(255,255,255,.035);
  --panel:rgba(255,255,255,.055);
  --panel-hi:rgba(255,255,255,.1);
  --rail:#181818;

  /* edges */
  --edge:rgba(255,255,255,.06);
  --edge-solid:#2d2e31; /* --edge as it renders over --workspace-bg, opaque (the workspace cap needs it) */
  --edge-lit:rgba(255,255,255,.14);
  --stub-edge:rgba(255,255,255,.13);
  --stub-tone:rgba(255,255,255,.28);

  /* type */
  --tx:#f0f0f0;
  --tx-2:rgba(240,240,240,.70);
  --tx-3:rgba(240,240,240,.48);

  /* brand accent — deep oxblood, reserved for interaction and highlight */
  --amber:#a51c00;
  --amber-rgb:165,28,0;
  --accent-ink:#fff3ef;
  --amber-soft:rgba(var(--amber-rgb),.14);
  --amber-glow:rgba(var(--amber-rgb),.1);

  /* caution / warning status — kept distinct from the brand accent so a
     warning doesn't read as "the same red thing" as a link or a button */
  --warn:#e2a23c;
  --warn-rgb:226,162,60;
  --warn-soft:rgba(var(--warn-rgb),.12);

  /* informational: links, ids */
  --cyan:#85aade;
  --cyan-rgb:133,170,222;
  --cyan-soft:rgba(var(--cyan-rgb),.12);

  --ok:#6fbf97;
  --ok-rgb:111,191,151;
  --ok-glow:rgba(111,191,151,.11);
  --ok-soft:rgba(var(--ok-rgb),.12);
  --alert:#ea6a5c;
  --alert-rgb:234,106,92;
  --alert-soft:rgba(var(--alert-rgb),.11);
  --alert-glow:rgba(var(--alert-rgb),.11);
  --planned:#b69add;
  --planned-rgb:182,154,221;
  --planned-soft:rgba(var(--planned-rgb),.13);

  /* Categorical data: cool hues stay distinct from operational status colours. */
  --data-platform-1:#6c92e8;
  --data-platform-2:#9a7cde;
  --data-platform-3:#4a9bc9;
  --data-platform-4:#b28acb;
  --data-platform-5:#5276b8;
  --data-platform-6:#7695bd;
  --data-platform-7:#7664bb;
  --data-platform-8:#69859f;
  --data-platform-9:#6d758c;

  /* dark chassis shared by both themes */
  --rail-bg1:#1f1f1f;
  --rail-bg2:#181818;
  --rail-edge:rgba(255,255,255,.08);
  --rail-tx:#f0f0f0;
  --rail-tx-2:rgba(240,240,240,.84);
  --rail-tx-3:rgba(240,240,240,.74);
  --rail-key:rgba(240,240,240,.38);
  --rail-hover:rgba(255,255,255,.035);
  --rail-amber:#f5f5f5;
  --rail-amber-soft:rgba(255,255,255,.18);
  --rail-amber-glow:rgba(255,255,255,.08);
  --frame:#111214;
  --workspace-bg:#202124;

  /* overlays, flipped by theme */
  --hair:transparent;
  --sheen:rgba(255,255,255,.06);
  --field:rgba(255,255,255,.06);
  --wash:rgba(255,255,255,.035);
  --track:rgba(255,255,255,.07);
  --chip-bg:rgba(255,255,255,.05);
  --chip-edge:rgba(255,255,255,.07);
  --lift:rgba(255,255,255,.14);
  --strip:#181818;
  --drop:0 14px 34px -22px rgba(0,0,0,.7);
  --drop-hi:0 22px 48px -22px rgba(0,0,0,.8);

  --w-rail:176px;
  --w-rail-min:56px;
  --ui-font:'Inter','Calibri',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* Figure scale: every large number in the console uses one of these four sizes, one weight and
     the number font (--mono, tabular). hero = the one headline figure of a card, card = a card's
     main figure, sub = a figure inside a section, strip = compact KPI strips. Phones step down below. */
  --num-weight:300;--num-track:-.02em;
  --num-hero:34px;--num-card:26px;--num-sub:20px;--num-strip:16px;
  --ease:cubic-bezier(.16,1,.3,1);
  --hero-fill:rgba(255,255,255,.045);
  --card-radius:18px;
  --solid:#1f1f23;
  --solid-field:#27272c;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scrollbar-gutter:stable}
::selection{background:rgba(var(--amber-rgb),.28)}
html[data-theme=dark]{color-scheme:dark}
html[data-theme=light]{color-scheme:light}
body{
  font-family:var(--ui-font);
  background:var(--frame);
  color:var(--tx);
  /* A small outer inset stops the console chrome from feeling pinned to the
     viewport edge. The sticky rail and strip preserve that rhythm on scroll. */
  padding:8px 0 0 8px;
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* The frame remains dark while the content surface follows the chosen theme. */
html[data-theme=light] body{background:var(--frame)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* Form controls carry their own UA fonts (textarea is monospace); inherit so the
   interface font preference reaches every field. */
input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
/* Shared dropdown foundation. Context-specific classes control dimensions only. */
select{
  color-scheme:inherit;color:var(--tx);background-color:var(--field);border-radius:9px!important;cursor:pointer;
}
select:not([multiple]){
  appearance:none;padding-right:28px!important;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),
    linear-gradient(135deg,var(--tx-3) 50%,transparent 50%)!important;
  background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%!important;
  background-size:4px 4px,4px 4px!important;background-repeat:no-repeat!important;
}
select option,select optgroup{background-color:var(--panel);color:var(--tx)}
select:focus-visible{outline:none;border-color:var(--amber)!important;box-shadow:0 0 0 3px var(--amber-soft)}
select:disabled{opacity:.55;cursor:not-allowed}
.k1-dropdown{position:relative;display:inline-block;min-width:120px;font:inherit}.k1-select-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.k1-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:31px;padding:7px 10px;border:1px solid var(--edge);background:var(--field);color:var(--tx-2);text-align:left}.k1-dropdown-trigger::after{content:'';width:5px;height:5px;flex:none;border-right:1px solid var(--tx-3);border-bottom:1px solid var(--tx-3);transform:rotate(45deg) translateY(-2px);transition:transform .16s}.k1-dropdown.open .k1-dropdown-trigger{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}.k1-dropdown.open .k1-dropdown-trigger::after{transform:rotate(225deg) translate(-1px,-1px)}.k1-dropdown-menu{position:absolute;z-index:90;top:calc(100% + 6px);left:0;min-width:100%;max-height:min(380px,calc(100vh - 140px));overflow-y:auto;border:1px solid var(--edge-lit);}.k1-dropdown-menu button{display:block;width:100%;padding:7px 9px;color:var(--tx-2);text-align:left;white-space:nowrap}.k1-dropdown-menu button:hover,.k1-dropdown-menu button:focus-visible{outline:none;background:var(--wash);color:var(--tx)}.k1-dropdown-menu button[aria-selected=true]{color:var(--amber)}.k1-dropdown-menu button:disabled{opacity:.5;cursor:not-allowed}.k1-dropdown-menu button small{display:block;margin-top:1px;font-family:var(--ui-font);font-size:9.5px;color:var(--tx-3)}
.app{display:grid;grid-template-columns:var(--w-rail) minmax(0,1fr);min-height:calc(100dvh - 8px);position:relative;z-index:1;
  transition:grid-template-columns .24s var(--ease)}
:is(.app.rail-min,html[data-rail-collapsed=true] .app){grid-template-columns:var(--w-rail-min) minmax(0,1fr)}
.app>.workspace-surface{min-width:0;min-height:calc(100dvh - 16px);display:flex;flex-direction:column;margin:0 8px 8px 0;border:1px solid var(--edge);border-radius:20px;background:var(--workspace-bg);box-shadow:-8px 0 28px -20px rgba(0,0,0,.65)}


/* ───────── light theme: paper workspace within the dark frame ───────── */
[data-theme=light]{
  --void:#ffffff;
  --deck:rgba(255,255,255,.56);
  --panel:rgba(255,255,255,.72);
  --panel-hi:rgba(255,255,255,.9);
  --edge:rgba(10,18,50,.06);
  --edge-solid:#f1f1f3;
  --edge-lit:rgba(10,18,50,.12);
  --stub-edge:rgba(10,18,50,.13);
  --stub-tone:rgba(10,18,50,.22);

  --tx:#0a1232;
  --tx-2:#3d4358;
  --tx-3:#6e6e73;

  /* brand accent — oxblood, darkened until it holds its own against white */
  --amber:#6f1100;
  --amber-rgb:111,17,0;
  --accent-ink:#fff3ef;
  --amber-soft:rgba(var(--amber-rgb),.08);
  --amber-glow:rgba(var(--amber-rgb),.08);

  /* caution / warning status — kept distinct from the brand accent */
  --warn:#a36400;
  --warn-rgb:163,100,0;
  --warn-soft:rgba(var(--warn-rgb),.1);

  --cyan:#2a5fa8;
  --cyan-rgb:42,95,168;
  --cyan-soft:rgba(var(--cyan-rgb),.1);
  --ok:#1b7a55;
  --ok-rgb:27,122,85;
  --ok-glow:rgba(27,122,85,.09);
  --ok-soft:rgba(var(--ok-rgb),.1);
  --alert:#c62f22;
  --alert-rgb:198,47,34;
  --alert-soft:rgba(var(--alert-rgb),.09);
  --alert-glow:rgba(var(--alert-rgb),.09);
  --planned:#7653a6;
  --planned-rgb:118,83,166;
  --planned-soft:rgba(var(--planned-rgb),.1);

  --data-platform-1:#315fb7;
  --data-platform-2:#7855b1;
  --data-platform-3:#247aa8;
  --data-platform-4:#925fae;
  --data-platform-5:#3b5c98;
  --data-platform-6:#4c719b;
  --data-platform-7:#6150a0;
  --data-platform-8:#536d88;
  --data-platform-9:#5a6275;

  --hair:transparent;
  --sheen:rgba(255,255,255,.95);
  --field:rgba(255,255,255,.74);
  --wash:rgba(10,18,50,.03);
  --track:rgba(10,18,50,.07);
  --chip-bg:rgba(10,18,50,.038);
  --chip-edge:rgba(10,18,50,.07);
  --lift:rgba(10,18,50,.1);
  --strip:#ffffff;
  --drop:0 14px 34px -22px rgba(10,18,50,.22);
  --drop-hi:0 22px 48px -22px rgba(10,18,50,.26);
  --hero-fill:rgba(255,255,255,.55);
  --card-radius:18px;
  --solid:#ffffff;
  --solid-field:#f3f4f8;
  --workspace-bg:#fff;
  /* K1 Sherpa atmosphere: two soft blooms behind the page, light theme only. */
  --workspace-fusion:radial-gradient(60% 50% at 75% 50%,#FBDDD5 0%,rgba(251,221,213,0) 70%),radial-gradient(55% 50% at 20% 35%,#EFE9F8 0%,rgba(239,233,248,0) 70%);
  --rail-bg1:#111214;
  --rail-bg2:#111214;
  --rail-edge:rgba(255,255,255,.1);
  --rail-tx:#f5f5f5;
  --rail-tx-2:rgba(245,245,245,.88);
  --rail-tx-3:rgba(245,245,245,.77);
  --rail-key:rgba(245,245,245,.4);
  --rail-hover:rgba(255,255,255,.07);
  --rail-amber:#f5f5f5;
  --rail-amber-soft:rgba(255,255,255,.22);
  --rail-amber-glow:rgba(255,255,255,.08);
}
/* on paper, glow reads as smudge — trade it for weight and crisper edges */
[data-theme=light] .stat .v,
[data-theme=light] .days{text-shadow:none}
/* Large figures keep the shared --num-weight in both themes; only small inline day counts get the boost. */
[data-theme=light] .days.red,
[data-theme=light] .days.amber{font-weight:600}
[data-theme=light] .tag{box-shadow:none}
[data-theme=light] .p1{box-shadow:none}

/* ───────── rack rail ───────── */
.rail{
  border:0;border-radius:0;
  display:flex;flex-direction:column;position:sticky;z-index:2;top:8px;height:calc(100dvh - 16px);
  background:var(--frame);
}
.rail-resize{
  position:absolute;z-index:8;top:0;right:-6px;width:12px;height:100%;cursor:col-resize;
  touch-action:none;outline:none;
}
.rail-resize::after{content:'';position:absolute;top:0;bottom:0;left:5px;width:2px;border-radius:2px;background:transparent;transition:background .18s,box-shadow .18s}
.rail-resize:hover::after,.rail-resize:focus-visible::after,.app.rail-resizing .rail-resize::after{background:var(--edge-lit)}
.app.rail-resizing{cursor:col-resize;user-select:none}
/* Same height as .strip, so the rail's top-left corner and the top bar read
   as one straight seam instead of the rail starting taller than the header
   it sits beside. */
.brand{
  height:44px;padding:0 14px;border-bottom:0;
  display:flex;align-items:center;gap:8px;
}
.brand-logo{width:24px;height:24px;flex:none;object-fit:cover;border-radius:0}
.brand-txt{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--rail-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-copy{min-width:0;flex:1}

.nav{position:relative;padding:14px 9px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav-motion-indicator{position:absolute;z-index:0;border-radius:12px 0 0 12px;background:var(--workspace-bg);pointer-events:none;transition:left .26s var(--ease),top .26s var(--ease),width .26s var(--ease),height .26s var(--ease),opacity .18s ease}
.app.rail-toggling .nav{overflow:hidden}
.app.rail-toggling .nav-motion-indicator{transition:none}
.nav.nav-row-indicator .nav-motion-indicator{border-radius:7px}
.nav.nav-row-indicator .nav-btn[aria-current=page]:hover{background:transparent}
.nav.motion-nav .nav-btn{z-index:1}
.nav.motion-nav .nav-btn[aria-current=page]{background:transparent}
@media(prefers-reduced-motion:reduce){.nav-motion-indicator{transition:none}}
@media(max-width:900px){.nav-motion-indicator{border-radius:7px}}
.nav-btn{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 11px;border-radius:7px;text-align:left;
  color:var(--rail-tx-2);font-size:13.5px;position:relative;
  transition:color .18s,background .18s;
}
.nav-btn::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;
  width:3px;border-radius:2px;background:var(--rail-amber);
  opacity:0;transition:opacity .18s;
  display:none!important;
}
/* min-width:0 lets this shrink inside the flex row instead of forcing the
   rail wider than the person dragged it to; ellipsis rather than wrap keeps
   every row one line tall at the skinniest widths. */
.nav-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-btn:hover{color:var(--rail-tx);background:var(--rail-hover)}
.nav-btn:hover::before{opacity:.4}
.nav-btn[aria-current=page]{
  color:var(--tx);font-weight:600;
  background:var(--workspace-bg);
}
.nav-btn[aria-current=page]::before{opacity:1}
.nav-ico{flex:none;text-align:center;font-size:13px;color:var(--rail-tx-3);transition:color .18s;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px}
.nav-btn:hover .nav-ico{color:var(--rail-amber)}
.nav-btn[aria-current=page] .nav-ico{color:var(--tx)}
/* Modules past the ninth have no shortcut; keep the column width so their
   labels line up with everything above rather than stretching wider. */

.rail-scrim,.mobile-nav-toggle{display:none}

/* ───────── top strip ───────── */
.strip{
  position:sticky;top:8px;z-index:6;
  
  /* A hairline anchors the page beneath the global controls without bringing
     back the heavy, boxed-in header treatment. */
  border-bottom:1px solid var(--edge);
  display:flex;align-items:center;gap:12px;padding:0 24px;height:44px;
  border-bottom-color:transparent;
  border-radius:19px 19px 0 0;background:var(--workspace-bg);
}
.strip::before{display:none}
.crumb{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.crumb b{color:var(--amber);font-weight:500}
.spacer{flex:1}
.search-wrap{position:relative;z-index:2}
.strip-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0;margin-left:auto}
.strip .strip-actions{gap:8px}
.strip .strip-actions :is(.leds,.notification-button,.note-button){display:flex;align-items:center;justify-content:center;gap:5px;flex:none;width:32px;min-width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--tx-2)}
.strip .strip-actions .leds{width:auto;padding-inline:6px}
.strip .strip-actions :is(.leds,.notification-button,.note-button) .icon-svg{width:18px;height:18px;stroke-width:1.7}
.strip .strip-actions :is(.leds,.notification-button,.note-button):is(:hover,[aria-expanded=true],[aria-current=page]){background:var(--wash);border-color:var(--edge);color:var(--tx)}
.strip .strip-actions :is(.leds,.notification-button,.note-button):focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.strip .strip-actions .profile-wrap{margin-left:4px;padding-left:12px;border-left:1px solid var(--edge-lit)}
.strip .strip-actions .who{height:32px}
.strip .strip-actions .who-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.strip:has(>.search-wrap){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%) minmax(0,1fr)}
.strip:has(>.search-wrap)>.spacer{display:none}
.strip:has(>.search-wrap)>.crumb,.strip:has(>.search-wrap)>.mobile-nav-toggle{grid-column:1;grid-row:1}
.strip:has(>.search-wrap)>.strip-actions{grid-column:3;grid-row:1;width:100%}
.strip>.search-wrap{grid-column:2;grid-row:1;top:0;min-width:0;width:100%;max-width:480px;justify-self:center}
.strip>.search-wrap .q{width:100%;min-height:34px;padding-left:36px}
.strip>.search-wrap .dash-zen-search-icon{position:absolute;top:50%;left:12px;display:block;width:17px;height:17px;transform:translateY(-50%);fill:none;stroke:var(--tx-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1300px){.strip-actions .global-sync{display:none}}
@media(max-width:1100px){.strip-actions .who-name{display:none}}
@media(max-width:900px){.strip:has(>.search-wrap)>.crumb{display:none}}
@media(max-width:700px){
  .strip:has(>.search-wrap){grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:auto;min-height:44px;row-gap:6px;padding-bottom:8px}
  .strip:has(>.search-wrap)>.strip-actions{grid-column:2;min-height:36px}
  .strip>.search-wrap{grid-column:1/-1;grid-row:2;max-width:480px}
  .strip-actions{gap:8px}
}
.search-shell{
  position:relative;padding:1px;
  background:var(--edge);
  transition:background .2s;
}
.search-shell:hover{background:var(--stub-tone)}
.search-shell:focus-within{
  background:var(--amber);box-shadow:none;
}
.q{
  display:block;width:310px;padding:5px 38px 5px 12px;border:0;border-radius:7px;
  background:var(--panel);color:var(--tx);font-size:13px;
  transition:background .2s;
}
.q::placeholder{color:var(--tx-3)}
.q:focus{outline:none;background:var(--panel)}
.search-key{
  position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;
  min-width:18px;padding:2px 5px;border:1px solid var(--edge-lit);border-radius:4px;
  background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.08);color:var(--tx-3);
  font:10px/1.2 var(--mono);text-align:center;
}
.q:not(:placeholder-shown)+.search-key{display:none}
.search-shell.is-assistant-busy{background:var(--amber)}
.search-shell.is-assistant-busy .q{cursor:progress}
.search-shell.is-assistant-busy .search-key{display:none}
@media(prefers-reduced-motion:reduce){.search-shell,.q{transition:none}}
.search-results{position:absolute;top:calc(100% + 8px);right:0;left:0;width:auto;max-height:min(520px,calc(100vh - 82px));overflow:auto;padding:7px;border:1px solid var(--edge-lit);--panel:var(--solid);--deck:var(--solid);--panel-hi:var(--solid-field);--field:var(--solid-field);--wash:var(--solid-field);background:var(--solid);box-shadow:0 24px 60px -30px rgba(0,0,0,.45)}
.search-results.has-assistant-conversation{max-height:min(700px,calc(100vh - 82px))}
.search-group{padding:9px 9px 4px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.search-group:first-child{padding-top:5px}
.search-result{width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:6px;text-align:left;cursor:pointer}
.search-result:hover,.search-result[aria-selected="true"]{background:var(--amber-soft);color:var(--tx)}
.search-result-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--edge);border-radius:8px;background:var(--field);color:var(--tx-2)}
.search-result-icon .nav-svg{width:17px;height:17px}
.search-result-icon:is(.is-browser,.is-portals,.is-docs){border-color:rgba(var(--cyan-rgb),.22);background:var(--cyan-soft);color:var(--cyan)}
.search-result-icon:is(.is-renewals,.is-briefcase){border-color:rgba(var(--warn-rgb),.22);background:var(--warn-soft);color:var(--warn)}
.search-result-icon:is(.is-people,.is-user){border-color:rgba(var(--planned-rgb),.22);background:var(--planned-soft);color:var(--planned)}
.search-result-icon:is(.is-inventory,.is-tickets,.is-tasks){border-color:rgba(var(--ok-rgb),.22);background:var(--ok-soft);color:var(--ok)}
.search-result-icon.is-assistant{border-color:rgba(var(--amber-rgb),.2);background:var(--amber-soft);color:var(--amber);font-size:19px;line-height:1}
.search-result-main{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:500}
.search-result-detail{margin-left:auto;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3)}
.search-empty{padding:13px 10px;font-size:12px;color:var(--tx-3)}
.assistant-answer{padding:11px 12px 12px;border-radius:9px;background:var(--wash);color:var(--tx)}
html[data-theme="light"] .search-results.has-assistant-conversation .assistant-answer{border:1px solid rgba(var(--amber-rgb),.1);background:#fffdfc;box-shadow:0 8px 20px -18px rgba(44,18,12,.28)}
.assistant-answer.is-error{color:var(--alert)}
.assistant-answer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;color:var(--amber);font:600 9px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.assistant-session-actions{display:inline-flex;align-items:center;gap:8px}.assistant-session-actions em{color:var(--amber);font:500 9px var(--ui-font);letter-spacing:0;text-transform:none;font-style:normal}.assistant-answer-head button{padding:0;border:0;background:none;color:var(--tx-3);font:500 9px var(--ui-font);letter-spacing:0;text-transform:none;cursor:pointer}.assistant-answer-head button:hover{color:var(--tx)}.assistant-answer-head button:disabled{color:var(--amber);cursor:default}.assistant-answer-head button:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}
.assistant-answer p{display:grid;gap:3px;margin:0;font-size:12px;line-height:1.45}.assistant-answer p b{font-weight:500}.assistant-answer p small{color:var(--tx-3);font-size:10.5px}
.assistant-question{display:grid;gap:3px;margin:0 0 12px;padding:8px 10px;border:1px solid rgba(var(--amber-rgb),.18);border-radius:6px;background:var(--amber-soft)}.assistant-question>span{color:var(--amber);font:600 8px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}.assistant-question p{display:block;margin:0;color:var(--tx);font-size:11px;line-height:1.45}
.assistant-conversation-turns{display:grid;gap:14px;max-height:min(560px,calc(100vh - 190px));overflow-y:auto;padding-right:4px;overscroll-behavior:contain}.assistant-turn+.assistant-turn{padding-top:14px;border-top:1px solid var(--edge)}.assistant-turn-pending p{color:var(--tx-2)}.assistant-conversation-turns::-webkit-scrollbar{width:6px}.assistant-conversation-turns::-webkit-scrollbar-thumb{border-radius:999px;background:var(--edge-lit)}
.assistant-answer-copy{display:grid;gap:10px;font-size:12px;line-height:1.6}.assistant-answer-copy p{display:block;margin:0}.assistant-answer-copy ul,.assistant-answer-copy ol{display:grid;gap:6px;margin:0;padding-left:20px}.assistant-answer-copy li{padding-left:3px}.assistant-answer-copy strong{color:var(--tx);font-weight:700}.assistant-answer-copy code{padding:1px 4px;border:1px solid var(--edge);border-radius:3px;background:var(--field);font:10.5px var(--mono);color:var(--tx)}.assistant-answer-copy .assistant-answer-label{margin-top:4px;color:var(--tx);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.assistant-answer-copy .assistant-answer-label:first-child{margin-top:0}.assistant-sources,.assistant-warnings{margin-top:12px;padding-top:10px;border-top:1px solid var(--edge);color:var(--tx-3);font-size:9.5px;line-height:1.45}.assistant-sources summary{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--tx-2);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;list-style:none}.assistant-sources summary::-webkit-details-marker{display:none}.assistant-sources summary::before{content:'+';width:10px;color:var(--amber);font-size:12px;font-weight:500;line-height:1}.assistant-sources[open] summary::before{content:'−'}.assistant-sources summary em{padding:1px 5px;border:1px solid var(--edge);border-radius:999px;color:var(--tx-3);font-size:8px;font-style:normal;letter-spacing:0}.assistant-source-items{display:grid;gap:4px;margin-top:8px}.assistant-sources span,.assistant-warnings span{display:block}.assistant-warnings{display:grid;gap:3px;color:var(--warn)}
/* The LED cluster is a shortcut into Status. Keep its click target and focus
   ring, but let the indicators read as standalone dots rather than a pill. */
.leds{
  display:flex;gap:6px;align-items:center;
  background:none;border:0;border-radius:0;
  padding:4px 7px;cursor:pointer;
}
.leds:hover{background:none;border-color:transparent}
.leds:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.leds[aria-current="page"]{background:none;border-color:transparent}
/* one health lamp: neutral when all is well, coloured (with a count) when something needs attention */
.lamp{width:8px;height:8px;border-radius:50%;background:var(--tx-3);opacity:.55;transition:background .2s,opacity .2s}
.lamp.w{background:var(--warn);opacity:1}
.lamp.d{background:var(--alert);opacity:1}
.lamp-n{font:600 11px var(--mono);color:var(--tx-2);line-height:1}
.lamp-n.w{color:var(--warn)}
.lamp-n.d{color:var(--alert)}
.notification-wrap{position:relative;flex:none}.notification-button{display:grid;place-items:center;width:28px;height:28px;border:1px solid transparent;border-radius:7px;color:var(--tx-2);background:transparent}.notification-button .icon-svg{width:18px;height:18px;stroke-width:1.7}.notification-button:hover,.notification-button[aria-expanded="true"]{border-color:var(--edge-lit);background:var(--panel);color:var(--amber)}.notification-button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.notification-button:disabled{cursor:not-allowed;opacity:.42}.notification-button:disabled:hover{border-color:transparent;background:transparent;color:var(--tx-2)}
.page-tab-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px}.page-tab-head>div>.h{margin-bottom:0}.page-tab-head>div>.sub{margin:4px 0 0}.page-tab-head .sub{margin-bottom:0}.page-tabs{display:flex;align-items:center;gap:3px;width:max-content;max-width:100%;margin-top:0;padding:3px;border:1px solid var(--edge);border-radius:9px;background:var(--field)}.page-tab{padding:6px 12px;border-radius:6px;color:var(--tx-3);font-size:10.5px;font-weight:500;white-space:nowrap;transition:color .18s,background .18s,box-shadow .18s}.page-tab:hover{color:var(--tx)}.page-tab.active{color:var(--amber);background:rgba(var(--amber-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--amber-rgb),.22)}.page-tab:focus-visible{outline:2px solid var(--amber);outline-offset:1px}.page-tab-panel>.ticket-title-row:empty{display:none}
@media(max-width:760px){.page-tabs{display:flex;flex-wrap:wrap;width:100%;margin-top:14px}.page-tab{flex:1 1 auto;white-space:normal;text-align:center}}
.profile-wrap{position:relative;flex:none}
.who{
  display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 4px;
  border:none;border-radius:8px;background:transparent;flex:none;
  cursor:pointer;
}
.who-avatar{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--amber);
  color:var(--accent-ink);font-weight:700;font-size:10px;overflow:hidden;
}
.who-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.who-name{font-size:12px;color:var(--tx);white-space:nowrap}
.icon-svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Browsers don't apply the UA [hidden]{display:none} rule to <svg> elements
   the way they do for HTML elements, so the attribute is otherwise a no-op. */
svg[hidden]{display:none}
/* The hidden attribute always wins. Author rules such as .row{display:flex} otherwise override the browser default and leave
   an element that script has hidden on screen. */
[hidden]{display:none!important}
.who-svg{color:var(--tx-3)}
.profile-menu{position:absolute;right:0;top:calc(100% + 9px);min-width:160px;padding:4px;border:1px solid var(--edge-lit);border-radius:8px;z-index:20;--panel:var(--solid);--deck:var(--solid);--panel-hi:var(--solid-field);--field:var(--solid-field);--wash:var(--solid-field);background:var(--solid);box-shadow:0 24px 60px -30px rgba(0,0,0,.45)}
.profile-meta{padding:8px 10px;font-size:11.5px;color:var(--tx-3)}
.profile-signout{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;color:var(--tx);font-size:12px;transition:background .18s}
.profile-signout .who-svg{color:inherit}
.profile-signout:hover{background:var(--wash)}
.profile-signout[hidden]{display:none}
.profile-theme{width:100%;min-height:38px}
.profile-theme-track{position:relative;width:34px;height:20px;flex:none;margin-left:auto;border:1px solid var(--edge-lit);border-radius:999px;background:var(--field);transition:background .2s var(--ease),border-color .2s var(--ease)}
.profile-theme-track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--tx-3);transition:transform .2s var(--ease),background .2s var(--ease)}
.profile-theme[aria-checked=true] .profile-theme-track{border-color:var(--amber);background:var(--amber)}
.profile-theme[aria-checked=true] .profile-theme-track::after{background:var(--accent-ink);transform:translateX(14px)}
@media(prefers-reduced-motion:reduce){.profile-theme-track,.profile-theme-track::after{transition:none}}

/* ───────── views ───────── */
/* 1200px was leaving half of a wide monitor empty. The cap still exists — text
   at 2000px wide is unreadable — but it is now generous and centred, so the
   void is split evenly rather than dumped on the right. */
main{width:100%;flex:1;max-width:2200px;margin-inline:auto}
.view{display:none}
.view.on{display:block}
html[data-route-pending] .view.on{display:none}
.h{font-size:24px;font-weight:300;letter-spacing:-.015em;margin-bottom:4px;line-height:1.15}
.h .thin{color:var(--tx-3);font-weight:300}
.sub{color:var(--tx-2);font-size:13px;margin-bottom:14px;max-width:64ch;line-height:1.5}.sub:empty{display:none}
.mb{margin-bottom:16px}
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ───────── small utilities ─────────
   These replaced the Tailwind Play CDN. Five classes covered everything the
   markup used, and owning them means no third-party script runs in the console. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.lift{transition:border-color .3s,box-shadow .3s}
.lift:hover{border-color:var(--edge-lit);box-shadow:0 1px 0 var(--sheen) inset,var(--drop-hi)}
.press{transition:transform .15s}
.press:active{transform:scale(.95)}
.busyable{transition:opacity .15s,transform .15s}
.busyable:disabled{opacity:.5;cursor:wait}
.rise-in{animation:rise .5s var(--ease) both}
@keyframes sweep{from{background-position:-160% 0}to{background-position:260% 0}}
@media (prefers-reduced-motion:reduce){.lift,.press,.busyable{transition:none}.rise-in{animation:none}}
/* Loading states (js/core/core.js K1.skeleton, K1.working, K1.refreshStatus;
   docs/app-design.md "Loading states"). Neutral grey, opacity only, still
   under reduced motion. */
.k1-loading-host.is-loading>:not(.k1-loading-state){display:none!important}
.k1-loading-state{width:100%;padding:20px 22px;border:1px solid var(--edge);border-radius:12px;background:var(--panel);color:var(--tx-2)}
.k1-loading-state.compact{padding:16px 18px;box-shadow:none}
.k1-skel.bare{padding:0;border:0;border-radius:0;background:none}
.k1-skel-cap{display:block;margin:0 0 14px;color:var(--tx-3);font-size:11px}
.k1-sk{display:block;border-radius:999px;background:var(--edge-lit);animation:k1-breathe 1.6s ease-in-out infinite}
.k1-sk-line{height:9px}
.k1-sk-line.thin{height:7px}
.k1-sk-text{display:inline-block;max-width:100%;vertical-align:middle}
.k1-sk-fig{height:26px;border-radius:7px}
.k1-sk-dot{width:24px;height:24px;flex:none;border-radius:50%}
.k1-sk-pill{width:62px;height:18px;flex:none;border-radius:6px}
.k1-sk-block{width:100%;border-radius:10px}
.k1-sk-end{margin-left:auto}
.k1-sk-rows{display:grid}
.k1-sk-row{display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 0;border-top:1px solid var(--edge)}
.k1-sk-row:first-child{border-top:0}
.k1-sk-stack{flex:1;min-width:0;display:grid;gap:6px}
.k1-sk-tiles{display:grid;grid-template-columns:repeat(var(--k1-sk-tiles,3),minmax(0,1fr));gap:10px}
.k1-sk-tiles+*,.k1-sk-rows+*,.k1-sk-lines+*,.k1-sk-block+*{margin-top:14px}
.k1-sk-tile{display:grid;gap:9px;padding:13px 14px;border:1px solid var(--edge);border-radius:12px}
.k1-sk-lines{display:grid;gap:10px}
@keyframes k1-breathe{0%,100%{opacity:.5}50%{opacity:.9}}
@media(max-width:640px){.k1-sk-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.k1-sk-tiles>:nth-child(n+3){display:none}}
/* Work in progress: a label and three dots that fade in turn. */
.k1-working{display:inline}
.k1-working-dots{display:inline-flex;gap:3px;margin-left:5px;vertical-align:middle;white-space:nowrap}
.k1-working-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.25;animation:k1-dot 1.2s ease-in-out infinite}
.k1-working-dots i:nth-child(2){animation-delay:.2s}.k1-working-dots i:nth-child(3){animation-delay:.4s}
@keyframes k1-dot{0%,100%{opacity:.25}40%{opacity:1}}
/* Refresh status: top right of a page header. The arrow is the one control
   that spins, and only while a refresh runs. */
.k1-rs{display:inline-flex;align-items:center;gap:6px;min-height:24px;margin-left:auto}
.k1-rs[hidden]{display:none}
.k1-rs-text{font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--tx-3)}
.k1-rs[data-state=failed] .k1-rs-text,.k1-rs[data-state=failed] .k1-rs-btn,.k1-rs.is-stale .k1-rs-text{color:var(--warn)}
.k1-rs-btn{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;color:var(--tx-3)}
.k1-rs-btn[hidden]{display:none}
.k1-rs-btn:hover{background:var(--wash);color:var(--tx)}
.k1-rs-btn:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.k1-rs-btn:disabled{cursor:default}
.k1-rs-btn svg{width:13px;height:13px}
.k1-rs[data-state=refreshing] .k1-rs-btn{color:var(--tx-2)}
.k1-rs[data-state=refreshing] .k1-rs-btn svg{animation:k1-spin .9s linear infinite}
@keyframes k1-spin{to{transform:rotate(360deg)}}
html[data-motion=reduced] .k1-sk,html[data-motion=reduced] .k1-working-dots i,html[data-motion=reduced] .k1-rs-btn svg{animation:none!important}
html[data-motion=reduced] .k1-sk{opacity:.7}html[data-motion=reduced] .k1-working-dots i{opacity:.6}
@media(prefers-reduced-motion:reduce){.k1-sk,.k1-working-dots i,.k1-rs-btn svg{animation:none!important}.k1-sk{opacity:.7}.k1-working-dots i{opacity:.6}}

/* entrance: one orchestrated rise, staggered by position. This is the console's
   single entrance spec (10px, .5s, 55ms per item). News tabs, tab switches and
   empty states reuse it; do not add a second one. */
.view.on .stat,.view.on .panel{
  animation:rise .5s var(--ease) both;
  animation-delay:var(--d,0ms);
}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
/* A panel that holds a whole page (a register, a library) would arrive as one
   block. Mark it .cascade and list its contents in K1.ENTRANCE instead, so the
   rows and tiles rise in turn. */
.view.on .panel.cascade{animation:none}

/* ───────── panels + the asset-tag signature ───────── */
.panel{
  
  border:1px solid var(--hair);
  position:relative;
  
}
/* stacked panels in the same view breathe, matching the 16px grid gap */
.panel + .panel{margin-top:12px}
/* A .sub inside a panel is a caption for the thing below it, not body copy,
   so it keeps the muted type but drops the 64ch reading measure that was
   wrapping one short line into two. */
.panel > .sub{max-width:none;margin-bottom:12px}
.tag{
  position:absolute;top:-1px;right:-1px;
  font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber);background:var(--void);
  border:1px solid var(--edge-lit);border-top-color:rgba(var(--amber-rgb),.45);border-right-color:rgba(var(--amber-rgb),.45);
  border-top-right-radius:13px;border-bottom-left-radius:7px;
  padding:4px 10px 4px 11px;
  box-shadow:0 0 20px -6px var(--amber-glow);
}
.p-h{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.p-h .n{font-size:10.5px;color:var(--tx-3);font-weight:400;letter-spacing:.05em}

/* ───────── tooltip ─────────
   One overlay for every hover hint (js/tooltip.js). Panel surface, hairline
   edge, soft shadow, an arrow toward the target; flips below when there is
   no room above. Never display:none — it has to be measurable before it
   shows so it can be positioned. */
.k1-tip{position:fixed;z-index:1000;left:0;top:0;max-width:280px;padding:7px 10px 8px;border:1px solid var(--edge-lit);border-radius:8px;color:var(--tx);font-family:var(--ui-font);font-size:11.5px;line-height:1.45;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.k1-tip.below{transform:translateY(-4px)}
.k1-tip.on{opacity:1;transform:none}
.k1-tip-head{margin-bottom:3px;font-size:8.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.k1-tip-body{display:grid;gap:1px}
.k1-tip-body span{display:block;overflow-wrap:anywhere}
.k1-tip.pinned{pointer-events:auto;max-width:min(280px,calc(100vw - 16px))}
.k1-tip-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;padding-top:6px;border-top:1px solid var(--edge)}
.k1-tip-actions>span{color:var(--tx-2);font-size:11px;white-space:nowrap}
.k1-tip-actions button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:4px;border:1px solid var(--edge-lit);border-radius:6px;background:var(--wash);color:var(--tx);font:400 18px var(--ui-font)}
.k1-tip-actions button:hover{background:var(--field)}
.k1-tip-actions button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.k1-tip-arrow{position:absolute;left:var(--ax,50%);bottom:-5px;width:9px;height:9px;background:var(--panel-hi);border-right:1px solid var(--edge-lit);border-bottom:1px solid var(--edge-lit);transform:translateX(-50%) rotate(45deg)}
.k1-tip.below .k1-tip-arrow{bottom:auto;top:-5px;border:0;border-left:1px solid var(--edge-lit);border-top:1px solid var(--edge-lit)}
@media (prefers-reduced-motion:reduce){.k1-tip{transition:none}}

/* ───────── stats ───────── */
.stat{
  
  border:1px solid var(--hair);
  
  transition:border-color .25s,box-shadow .25s;
}
.stat:hover{border-color:var(--edge-lit);}
.stat .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)}
.stat .v{font-family:var(--mono);line-height:1}
.stat .d{color:var(--tx-2);}
.stat.hot .v{color:var(--alert);text-shadow:0 0 26px var(--alert-glow)}
.stat.warm .v{color:var(--warn);text-shadow:0 0 26px var(--warn-soft)}
@keyframes grow{to{width:var(--w,0%)}}


/* ───────── rows ───────── */
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);transition:translate .22s var(--ease)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row:first-of-type{padding-top:0}
.row:hover{translate:5px 0}
.pri{
  font-size:9.5px;font-weight:500;letter-spacing:.06em;
  padding:3px 7px;border-radius:5px;flex:none;border:1px solid transparent;
}
.p1{background:var(--alert-soft);color:var(--alert);border-color:rgba(var(--alert-rgb),.3);box-shadow:0 0 16px -6px var(--alert-glow)}
.p2{background:var(--warn-soft);color:var(--warn);border-color:rgba(var(--warn-rgb),.28)}
.p3{background:var(--chip-bg);color:var(--tx-2);border-color:var(--chip-edge)}
.row .t{flex:1;font-size:13.5px}
.row .m{font-family:var(--mono);font-size:10.5px;color:var(--tx-3);flex:none}
.row .id{font-family:var(--mono);font-size:10.5px;color:var(--cyan);flex:none;width:64px;opacity:.8}
.note{font-size:12px;color:var(--tx-3);margin-top:3px}


/* The picker only matters with several networks; keep its dropdown shell out of sight until the API says so. */
.k1-dropdown:has(> .net-pick[hidden]){display:none}



/* ───────── table ───────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);font-weight:400;padding:0 12px 11px 0;border-bottom:1px solid var(--edge-lit);
}
td{padding:13px 12px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--wash)}
tr:last-child td{border-bottom:0}
.days{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--tx-2)}
.days.red{color:var(--alert);text-shadow:0 0 18px var(--alert-glow)}
.days.amber{color:var(--warn);text-shadow:0 0 18px var(--warn-soft)}

/* ───────── docs ───────── */
.docs-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.docs-page-head .sub{margin-bottom:12px;max-width:none;white-space:nowrap}
.chip{
  
  background:var(--wash);
  transition:border-color .22s,color .22s,box-shadow .22s;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 10px;
  border:1px solid var(--edge);
  color:var(--tx-3);
}
.chip:hover{border-color:rgba(var(--cyan-rgb),.5);color:var(--cyan);box-shadow:0 0 22px -10px rgba(var(--cyan-rgb),.7)}


@media(max-width:560px){.docs-page-head{display:block}}


svg text{font-family:'JetBrains Mono',monospace}
.empty{
  border:1px dashed var(--edge-lit);border-radius:13px;padding:32px;
  text-align:center;color:var(--tx-2);font-size:13.5px;
}
.empty b{display:block;color:var(--tx);font-weight:600;font-size:14.5px;margin-bottom:5px}

@media (max-width:900px){
  body{padding:0}
  .app{min-height:100dvh}
  .app>.workspace-surface{min-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}
  .strip{top:0;border-radius:0}
  /* The rail is fixed and off-canvas here, so it is no longer a grid item and
     the content lands in the first column. That column must be the whole
     width whatever rail state the person saved on their desktop: the
     collapsed-rail rule above has higher specificity and would otherwise win. */
  .app,:is(.app.rail-min,html[data-rail-collapsed=true] .app){grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;z-index:30;inset:0 auto 0 0;width:min(82vw,290px);height:100dvh;margin:0;border:1px solid var(--rail-edge);border-radius:0 16px 16px 0;transform:translateX(-102%);transition:transform .24s var(--ease);box-shadow:18px 0 45px -28px rgba(0,0,0,.8)}
  .app.mobile-nav-open .rail{transform:translateX(0)}
  .nav{flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:12px 9px}
  .nav-btn{flex:none}
  .rail-resize{display:none}
  .rail-scrim{display:block;position:fixed;z-index:29;inset:0;background:rgba(4,7,11,.52);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  .app.mobile-nav-open .rail-scrim{opacity:1;visibility:visible}
  .mobile-nav-toggle{display:grid;width:34px;height:34px;place-content:center;gap:4px;flex:none;border:1px solid var(--edge);border-radius:7px;background:var(--panel)}
  .mobile-nav-toggle span{display:block;width:15px;height:1.5px;border-radius:2px;background:var(--tx-2)}
  .g4{grid-template-columns:1fr}
  .q{width:132px}
  .h{font-size:20px}
}
@media(max-width:600px){.strip{gap:8px;padding:0 10px}.strip .crumb,.strip .leds{display:none}.strip .q{width:min(150px,42vw)}}
@media(max-width:760px){.who-name{display:none}.who{padding:0 6px;gap:0}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
/* ───────── editing ───────── */
.add-btn{
  margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(var(--amber-rgb),.35);border-radius:6px;padding:5px 11px;
  background:var(--amber-soft);transition:box-shadow .22s,filter .22s;
}
.add-btn:hover{box-shadow:0 0 20px -6px var(--amber-glow);filter:brightness(1.12)}
.add-btn.add-primary{color:var(--accent-ink);border-color:var(--amber);background:var(--amber);box-shadow:0 8px 20px -12px var(--amber-glow)}
.add-btn.add-primary:hover{box-shadow:0 10px 24px -10px var(--amber-glow);filter:brightness(1.06)}
.ticket-title-row{display:flex;align-items:center;gap:12px;margin-bottom:5px}
.ticket-title-row .h{margin-bottom:0}
.ticket-title-row .add-btn{margin-left:0}
.ticket-title-row .n{margin-left:auto}
.ticket-refresh-status{font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--tx-3)}
.ticket-refresh-status.stale{color:var(--warn)}
.file-input{display:none}


.device-sheet-card{max-width:560px}
.edit{
  position:absolute;top:6px;right:6px;z-index:2;
  width:22px;height:22px;border-radius:6px;
  display:grid;place-items:center;font-size:11px;
  color:var(--tx-3);background:rgba(10,14,20,.85);border:1px solid var(--edge-lit);
  opacity:0;transition:opacity .2s,color .2s,border-color .2s;
}
.edit:hover{color:var(--amber);border-color:rgba(var(--amber-rgb),.55)}
.edit.inline{position:absolute;top:11px;right:4px;opacity:0;flex:none;margin:0}

.sheet{
  position:fixed;inset:0;z-index:40;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(4,7,11,.72);
}
.sheet.open{display:flex;animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-card{
  width:100%;max-width:440px;max-height:88vh;overflow-y:auto;
  
  border:1px solid var(--edge-lit);border-radius:13px;padding:24px;
  
  animation:pop .3s var(--ease);
  --panel:var(--solid);
  --deck:var(--solid);
  --panel-hi:var(--solid-field);
  --field:var(--solid-field);
  --wash:var(--solid-field);
  background:var(--solid);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.45);
}
.sheet-h{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:4px}
.sheet-sub{font-size:12.5px;color:var(--tx-3);margin-bottom:20px}
.field{margin-bottom:14px}
.field label{
  display:block;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:6px;
}
.field input{
  width:100%;padding:10px 13px;border:1px solid var(--edge);border-radius:7px;
  color:var(--tx);font-size:13.5px;
  transition:border-color .2s,box-shadow .2s;
}
.field select{
  width:100%;padding:10px 13px;border:1px solid var(--edge);border-radius:7px;
  color:var(--tx);font-size:13.5px;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.field input[type=checkbox]{width:auto;padding:0;border:none;background:none}
.field input[type=checkbox]:focus{box-shadow:none}
.field .help{font-size:11.5px;color:var(--tx-3);margin-top:5px}
.sheet-form-section{margin:0 -24px;padding:18px 24px;border-top:1px solid var(--edge)}
.sheet-form-section:first-child{margin-top:-2px}.sheet-form-section.essentials{padding-top:20px;background:var(--wash)}
.sheet-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:13px}
.sheet-section-head>span{color:var(--tx);font-size:11px;font-weight:650;letter-spacing:.02em}.sheet-section-head p{margin:0;color:var(--tx-3);font-size:10px;text-align:right}
.sheet-section-fields{display:grid;gap:0}.sheet-form-section.essentials .field:first-child input{padding:11px 13px;border-color:var(--edge-lit);font-size:14px;font-weight:600}

/* Note and checklist each carry their own "show on the card" checkbox, so the
   label row splits instead of stacking the toggle under the field. */
.field-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.field-head label{margin-bottom:0}
.show-toggle{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--tx-3);white-space:nowrap;cursor:pointer}

.sheet-err{
  font-size:12.5px;color:var(--ok);background:rgba(var(--ok-rgb),.08);
  border:1px solid rgba(var(--ok-rgb),.34);border-radius:7px;padding:9px 12px;margin-bottom:14px;display:none;
}
.sheet-err.show{display:block}
.sheet-err.error{color:var(--alert);background:var(--alert-soft);border-color:rgba(var(--alert-rgb),.3)}
.seg-tabs{display:flex;padding:3px;border:1px solid var(--edge);border-radius:8px;background:var(--field);margin-bottom:16px}
.seg-tab{flex:1;padding:6px 10px;border-radius:5px;color:var(--tx-3);font-size:11px;font-weight:500;text-align:center;transition:background .15s,color .15s}
.seg-tab.active{background:var(--panel-hi);color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.btn-row{display:flex;gap:9px;align-items:center;margin-top:20px}
.btn{padding:10px 18px;font-size:13px;font-weight:500;transition:filter .2s,box-shadow .2s,border-color .2s;border-radius:999px}
.btn-go{background:var(--amber);color:var(--accent-ink);font-weight:600;box-shadow:0 0 24px -8px var(--amber-glow)}
.btn-go:hover{filter:brightness(1.08)}
.btn-go[disabled]{opacity:.55;cursor:default;filter:none}
.btn-off{border:1px solid var(--edge-lit);color:var(--tx-2)}
.btn-off:hover{color:var(--tx);border-color:var(--tx-3)}
.btn-kill{margin-left:auto;color:var(--alert);border:1px solid rgba(var(--alert-rgb),.32)}
.btn-kill:hover{background:var(--alert-soft)}

/* Resources and service checks use the focused right drawer used for renewals
   and people profiles. Other list editors retain the compact sheet. */
.sheet-drawer-scrim,.sheet-drawer-close{display:none}
body.drawer-sheet-open{overflow:hidden}
.sheet.drawer-sheet{display:block;padding:0;visibility:hidden;pointer-events:none;background:transparent}
.sheet.drawer-sheet.open{visibility:visible;pointer-events:auto;animation:none}
.sheet.drawer-sheet .sheet-drawer-scrim{position:absolute;inset:0;display:block;background:rgba(4,7,11,.58);opacity:0;transition:opacity .24s}
.sheet.drawer-sheet.open .sheet-drawer-scrim{opacity:1}
.sheet.drawer-sheet .sheet-card{position:absolute;z-index:1;inset:0 0 0 auto;width:min(620px,94vw);max-width:none;max-height:none;margin:0;overflow-y:auto;padding:24px 26px 28px;border:0;border-left:1px solid var(--edge-lit);border-radius:0;background:var(--panel);box-shadow:-30px 0 70px -35px rgba(0,0,0,.9);translate:100% 0;transition:translate .32s var(--ease);animation:none}
.sheet.drawer-sheet.open .sheet-card{translate:0}
.sheet.drawer-sheet .sheet-drawer-close{position:absolute;top:18px;right:20px;z-index:1;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--edge);border-radius:7px;color:var(--tx-3);font-size:22px;line-height:1}
.sheet.drawer-sheet .sheet-drawer-close:hover{background:var(--wash);color:var(--tx)}
.sheet.drawer-sheet .sheet-h{padding-right:44px;font-size:20px}.sheet.drawer-sheet .sheet-sub{padding-right:44px;margin-bottom:24px}
.sheet.drawer-sheet .sheet-form-section{margin-inline:-26px;padding-inline:26px}.sheet.drawer-sheet .btn-row{position:sticky;bottom:-28px;margin:24px -26px -28px;padding:16px 26px;border-top:1px solid var(--edge);background:var(--panel)}
[data-theme=light] .sheet.drawer-sheet .sheet-drawer-scrim{background:rgba(25,28,32,.3)}
@media(max-width:700px){.sheet.drawer-sheet .sheet-card{width:100vw;padding:20px}.sheet.drawer-sheet .sheet-form-section{margin-inline:-20px;padding-inline:20px}.sheet.drawer-sheet .btn-row{right:-20px;bottom:-20px;left:-20px;margin:22px -20px -20px;padding:14px 20px}.sheet.drawer-sheet .sheet-drawer-close{top:14px;right:14px}}

.seed{
  border:1px dashed rgba(var(--amber-rgb),.4);border-radius:10px;padding:16px 18px;margin-bottom:16px;
  display:flex;align-items:center;gap:14px;background:rgba(var(--amber-rgb),.045);
}
.seed p{flex:1;font-size:13px;color:var(--tx-2)}
.seed b{color:var(--tx);font-weight:600}


.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip.amber{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.chip.red{color:var(--alert);border-color:var(--alert);background:var(--alert-soft,transparent)}


.check-bullet{
  flex:none;width:14px;height:14px;margin-top:1px;border-radius:50%;border:1.5px solid var(--edge-lit);
  display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--amber);box-sizing:border-box;
}
.check-text{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.add-btn.quiet{background:transparent;border:1px solid var(--edge);color:var(--tx-3);box-shadow:none}
.add-btn.quiet:hover{color:var(--tx);border-color:var(--edge-lit);filter:none;box-shadow:none}


.btn.sm{padding:6px 11px;font-size:11.5px;flex:none}


/* ───────── news ───────── */





@container (min-width:801px){}
@container (max-width:1200px){}
@container (max-width:560px){}
@container (max-width:800px){}


/* ───────── customisable rail ───────── */
.nav-section{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rail-key);
  padding:14px 11px 4px;
}
.nav:first-child > .nav-section:first-child{padding-top:2px}

.nav-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;border-top:0;margin:13px 9px 0;padding:10px 3px 8px}
.rail-collapse{
  display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;padding:0;
  border:1px solid transparent;border-radius:7px;color:var(--rail-tx-3);
  font-size:10.5px;text-align:left;transition:color .18s,border-color .18s,background .18s;
}
.rail-collapse svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-collapse:hover{color:var(--rail-tx);border-color:var(--rail-edge);background:var(--rail-hover)}
.rail-collapse:focus-visible{outline:2px solid var(--rail-amber);outline-offset:2px}
.nav-tool{
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rail-tx-3);border:1px solid var(--rail-hover);border-radius:6px;padding:5px 9px;
  background:transparent;cursor:pointer;transition:color .18s,border-color .18s,background .18s;
}
.nav-tool:hover{color:var(--rail-tx);border-color:var(--rail-amber)}
.nav-tool[aria-pressed=true]{color:var(--rail-amber);border-color:var(--rail-amber);background:var(--rail-amber-soft)}
.nav-tool.quiet{border-color:transparent}
.nav-tool-msg{
  flex:1 0 100%;font-size:9.5px;color:var(--rail-key);letter-spacing:.05em;
}
.nav-tool-msg.warn{color:var(--warn)}

.nav-edit-row{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 8px;border-radius:7px;color:var(--rail-tx-2);font-size:13px;
  border:1px dashed transparent;cursor:grab;user-select:none;
  transition:background .18s,border-color .18s,opacity .18s;
}
.nav-edit-row:hover{background:var(--rail-hover);color:var(--rail-tx)}
.nav-edit-row:focus-visible{outline:none;border-color:var(--rail-amber);background:var(--rail-hover)}
.nav-edit-row.dragging{opacity:.4;cursor:grabbing}
.nav-edit-row.over-top{border-top-color:var(--rail-amber)}
.nav-edit-row.over-bottom{border-bottom-color:var(--rail-amber)}
.nav-edit-row.off{opacity:.42}
.nav-edit-row.off .nav-edit-name{text-decoration:line-through}
.nav-edit-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-grip{color:var(--rail-key);font-size:12px;line-height:1;cursor:grab}
.nav-act{
  flex:none;width:22px;height:22px;border-radius:5px;background:transparent;border:0;cursor:pointer;
  color:var(--rail-key);font-size:11px;line-height:1;transition:color .18s,background .18s;
}
.nav-act:hover{color:var(--rail-tx);background:var(--rail-hover)}
.nav-act.on{color:var(--rail-amber)}
.nav-act .nav-svg{width:14px;height:14px;vertical-align:middle}
.nav-act.locked{cursor:default;opacity:.5}
.nav-act.locked:hover{background:transparent;color:var(--rail-key)}

.menu-editing .nav{cursor:default}
/* Keep the footer actions compact while the rail is being rearranged. The
   edit rows need the room; the utility controls do not. */
.menu-editing .nav-tools{gap:4px;padding-bottom:8px}
.menu-editing .nav-tools .nav-tool{padding:4px 7px;font-size:9px}
.menu-editing .nav-tools .rail-collapse{width:26px;height:26px;flex-basis:26px}
@media (prefers-reduced-motion: reduce){
  .nav-edit-row{transition:none}
}

/* ───────── rail polish ───────── */
/* Section headers sit tighter to the list they label than to the block above,
   so "Pinned" and "Modules" read as captions rather than free-floating rows. */
.nav > .nav-section:first-child{padding-top:4px}
.nav-section + .nav-btn{margin-top:1px}

/* Pinned rows carry a faint star so the block still reads as pinned once the
   caption has scrolled out of sight on a short window. */


/* ───────── nav icons ───────── */
/* .nav-ico was sized for a single glyph; the SVG needs a box and a baseline
   that does not shift with the surrounding text metrics. */
.nav-svg{
  width:17px;height:17px;display:block;
  /* Half-pixel strokes blur on a 1x display, so nudge the whole set onto the
     pixel grid rather than fighting it path by path. */
  shape-rendering:geometricPrecision;
  transition:opacity .18s;
}
.nav-btn .nav-svg{opacity:.84}
.nav-btn:hover .nav-svg,.nav-btn[aria-current=page] .nav-svg{opacity:1}
.nav-edit-row .nav-svg{opacity:.6}
/* The ticket's landscape silhouette and a standalone dollar sign carry less
   visual mass than the squarer rail marks, so optically size them up. */
.nav-btn[data-v=tickets] .nav-svg,.nav-edit-row[data-v=tickets] .nav-svg{transform:scale(1.18)}

/* Keep nav icons crisp against the dark frame in either theme. */
[data-theme=light] .nav-btn[aria-current=page] .nav-svg{opacity:1}
[data-theme=light] .nav-btn .nav-svg{opacity:.88}
[data-theme=light] .nav-tool{border-color:var(--rail-edge)}
[data-theme=light] .nav-tool.quiet{border-color:transparent}
[data-theme=light] .nav-tools{border-top-color:var(--rail-edge)}


.scope-count{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;border:1px solid transparent;border-radius:6px;font-size:9.5px;font-weight:650;letter-spacing:.025em;font-style:normal}
.scope-count.alert{border-color:rgba(var(--alert-rgb),.2);background:var(--alert-soft);color:var(--alert)}
.scope-count.warn{border-color:rgba(var(--warn-rgb),.22);background:var(--warn-soft);color:var(--warn)}


/* Tile titles are the way into their workspace. Same weight as a plain title,
   a quiet arrow appears on hover so the affordance is discoverable without a
   permanent button in every header. */
.panel-title-link{display:inline-flex;align-items:center;justify-self:start;width:max-content;max-width:100%;gap:6px;margin:-2px -6px;padding:2px 6px;border-radius:6px;color:inherit;font:inherit;font-weight:600;letter-spacing:inherit;text-align:left;cursor:pointer;transition:color .16s,background .16s;white-space:nowrap;flex:none}
.panel-title-link::after{content:'';width:9px;height:9px;flex:none;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,1px);opacity:0;transition:opacity .16s,transform .16s}
.panel-title-link:hover{color:var(--amber);background:var(--amber-soft)}
.panel-title-link:hover::after,.panel-title-link:focus-visible::after{opacity:.8;transform:rotate(45deg) translate(1px,-1px)}
.panel-title-link:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
/* In a one-column tile the title and its scope pill share ~215px; the pill
   trims rather than dropping to a second line. */
.p-h:has(>.panel-title-link),.dash-block[data-cols="1"] .p-h:has(>.panel-title-link){flex-wrap:nowrap}
.p-h .panel-title-link+.n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Four columns below ~1400px, then two and one. Four rather than three so
   two Small (two-column) tiles still share a row instead of leaving a gap.
   The stored span never changes, only how many columns exist to spend it on. */


/* A permission name in running text is a literal, so it reads as one. */
.mono-inline{font-family:var(--mono);font-size:11.5px;color:var(--amber)}


@container (max-width:480px){}


.panel:hover .tp-refresh,.panel:focus-within .tp-refresh,.tp-refresh.is-refreshing,.tp-refresh.is-failed{opacity:1}
.row.link{color:inherit;text-decoration:none}.row.link .tp-go{margin-top:0;margin-left:0}.row.link:hover .tp-go{opacity:1}.row.link:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;border-radius:5px}


/* ───────── compact stat cards ───────── */
/* These were ~100px tall to show one digit. The number keeps its presence at
   26px because it is the thing being read across the room; everything around
   it gives back a third of the height. */
.stat{padding:12px 14px 11px}
.stat .v{font-size:var(--num-card);margin-top:4px}
.stat .d{font-size:11.5px;margin-top:4px}

/* ───────── collapsed rail ───────── */
/* The collapsed brand remains a simple identity block. The rail control stays
   in the bottom utility area, where it is available without competing with it. */
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .brand{justify-content:center;padding:0;height:44px}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .brand-copy,:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-section,:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-key,:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-label,:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-tool-msg,:is(.app.rail-min,html[data-rail-collapsed=true] .app) #menuEdit,:is(.app.rail-min,html[data-rail-collapsed=true] .app) #menuReset{display:none}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav{padding:10px 6px;align-items:center}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-btn{justify-content:center;padding:10px 0;gap:0}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-btn .nav-ico{width:19px;height:19px}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-svg{width:19px;height:19px}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-tools{justify-content:center;margin:8px 6px 0;padding:9px 0;border-top-color:transparent}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .rail-collapse{width:32px;flex-basis:32px}
/* Labels vanish when collapsed, so the icon has to answer "what is this" on
   its own — the title attribute is the only thing left doing that job. */
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-btn::before{left:0}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-unpinned-start{margin-top:9px}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-unpinned-start::before{display:block!important;top:-5px;bottom:auto;left:5px;width:calc(100% - 10px);height:1px;border-radius:0;background:var(--rail-edge);opacity:1}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .rail-resize{display:none}
@media(max-width:900px){
  /* The rail is a full-width off-canvas drawer on mobile regardless of the
     desktop collapse preference, so it renders expanded here and hides the
     desktop-only collapse toggle rather than the icon-only layout above. */
  :is(.app.rail-min,html[data-rail-collapsed=true] .app) .brand{flex-direction:row;height:44px;padding:0 18px;justify-content:flex-start;align-items:center}
  .rail-collapse{display:none}
  :is(.app.rail-min,html[data-rail-collapsed=true] .app) .brand-copy,:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-section,:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-key,:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-label,:is(.app.rail-min,html[data-rail-collapsed=true] .app) #menuEdit{display:initial}
:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav{padding:12px 9px;align-items:stretch}:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-btn{justify-content:flex-start;padding:9px 11px;gap:12px;font-size:13.5px}:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-btn .nav-ico{width:17px;height:17px}:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-svg{width:17px;height:17px}:is(.app.rail-min,html[data-rail-collapsed=true] .app) .nav-tools{justify-content:flex-start;margin:8px 9px 0;padding:10px 3px 8px}
}

/* ───────── charts ───────── */
.chart-cols{display:flex;align-items:flex-end;gap:7px;height:96px;margin:4px 0 2px}
.chart-col{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.chart-col-n{font-family:var(--mono);font-size:10px;color:var(--tx-3);text-align:center;height:14px}
.chart-col-track{flex:1;display:flex;align-items:flex-end;background:var(--wash);border-radius:4px 4px 0 0}
.chart-col-fill{
  display:block;width:100%;height:0;border-radius:4px 4px 0 0;opacity:.85;
  background:var(--cyan);
  animation:colGrow .7s .2s var(--ease) forwards;
}
.chart-col-fill.warm{background:var(--warn)}
.chart-col-fill.hot{background:var(--alert)}
.chart-col-k{
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--tx-3);
  text-align:center;padding-top:6px;border-top:1px solid var(--hair);margin-top:0;
}
@keyframes colGrow{to{height:var(--h,0%)}}

.chart-bars{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.chart-bar{display:flex;align-items:center;gap:10px;font-size:12.5px}
.chart-bar-k{
  flex:0 0 84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx-2);
}
.chart-bar-track{flex:1;height:7px;background:var(--wash);border-radius:4px;overflow:hidden}
.chart-bar-fill{
  display:block;height:100%;width:0;border-radius:4px;opacity:.85;
  background:var(--cyan);
  animation:grow .8s .2s var(--ease) forwards;
}
.chart-bar-fill.warm{background:var(--warn)}
.chart-bar-fill.hot{background:var(--alert)}
.chart-bar-v{flex:0 0 34px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--tx-2)}
.chart-bar-v em{display:block;font-style:normal;font-size:9px;color:var(--tx-3)}
.chart-none{font-size:10.5px;color:var(--tx-3);padding:14px 0}
@media (prefers-reduced-motion:reduce){
  .chart-col-fill{height:var(--h,0%)!important}
  .chart-bar-fill{width:var(--w,0%)!important}
}


/* ───────── renewals command center ───────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


html.motion-ready .renew-drawer-scrim,html.motion-ready .renew-drawer-panel{transition:none}
html.motion-ready .people-profile-scrim,html.motion-ready .people-profile-drawer .pp-profile-panel{transition:none}
html.motion-ready .pp-intake-drawer-scrim,html.motion-ready .pp-intake-drawer-panel{transition:none}
html.motion-ready .sheet.drawer-sheet .sheet-drawer-scrim,html.motion-ready .sheet.drawer-sheet .sheet-card{transition:none}
html.motion-ready #ticketSheet{animation:none}
html.motion-ready #ticketSheet .ticket-sidekick{animation:none}


@media(max-width:700px){.docs-page-head .sub{white-space:normal}}


/* Claude is the first vendor analytics surface under Spend. It deliberately
   reuses the renewal table and shared page tabs so future spend sources can
   slot in without inventing another navigation or table language. */
.section-h{margin:0 0 5px;color:var(--tx);font-size:16px;font-weight:600}


.field textarea{width:100%;resize:vertical;padding:10px 13px;border:1px solid var(--edge);border-radius:7px;color:var(--tx);font-family:inherit;font-size:13px;line-height:1.5;transition:border-color .2s,box-shadow .2s}.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}


@container (max-width:560px){}


/* ───────── minimal surface cleanup ─────────
   Operational state keeps its existing dots and labels. Decorative atmosphere,
   coloured edge rules and elevated-card effects are deliberately removed. */
.nav-btn::before,.svc-tile::before{display:none}
.stat,.tile{background:var(--panel);border-radius:7px;box-shadow:none}
.stat:hover,.tile:hover{box-shadow:none}

.k1-loading-state{box-shadow:none}


/* ═══════════ Surfaces ═══════════
   The console look: translucent cards over a tinted ground, larger radii,
   pill controls, lighter hero numbers. It sits last so it settles every
   shape and shadow rule above it. Performance rule: rgba fills and one
   shadow per card only; no backdrop-filter, because blur is what
   measurably slows painting. Surface tokens live in :root and
   [data-theme=light] at the top of this file. */
/* Anything that floats over the page or takes input is solid and flat:
   translucency is for the tiles underneath, not for menus, dialogs or fields. */
.k1-dropdown-menu,.k1-tip{--panel:var(--solid);--deck:var(--solid);--panel-hi:var(--solid-field);--field:var(--solid-field);--wash:var(--solid-field);background:var(--solid);box-shadow:0 24px 60px -30px rgba(0,0,0,.45)}
.k1-dropdown-menu button[aria-selected=true]{background:var(--amber-soft)}
.field input,.field select,.field textarea,.renew-field input,.renew-field select,.renew-field textarea{background:var(--solid-field);border-color:var(--edge)}
.strip .search-shell{padding:0;border:1px solid var(--edge-lit);background:var(--solid);box-shadow:var(--drop),0 1px 0 var(--sheen) inset}
.strip .search-shell:focus-within{border-color:var(--amber)}
.strip .q{background:var(--solid);box-shadow:none;border-radius:999px}
/* cards */
.panel{border-color:transparent;border-radius:var(--card-radius);padding:20px 22px 22px;background:var(--panel);box-shadow:var(--drop),0 1px 0 var(--sheen) inset}
main{padding:22px 26px 56px}
.stat .v,.risk-n,.net-tile-v{font-weight:var(--num-weight);letter-spacing:var(--num-track);font-variant-numeric:tabular-nums}
/* pills and circles */
.k1-dropdown-trigger,select.k1-select,.k1-dropdown-menu button{border-radius:16px}
.chip,.accent-custom{border-radius:999px}
.k1-dropdown-menu{border-radius:16px;padding:6px}
.search-shell{border-radius:999px}
.search-results{border-radius:16px}
.n{border-radius:999px}
.rail{border-right-color:transparent}
/* The row hairlines inside lists stay, but softer, so lists still scan. */
.row,.tp-item{border-bottom-color:var(--edge)}
/* Users who ask the OS for less transparency get opaque cards, same shapes. */
@media (prefers-reduced-transparency:reduce){
  [data-theme=light]{--panel:#ffffff;--deck:#ffffff;--field:#ffffff;--strip:#f6f7fa}
  [data-theme=dark]{--panel:#1e1e21;--deck:#1c1c1f;--field:#22222a;--strip:#131316}
}


/* Calendar month grid shrinks with its column instead of forcing a sideways
   scroll below 760px. On a phone each event becomes a thin coloured bar so the
   month still reads at a glance; tapping the day opens its list. */

/* Page transitions: the incoming page fades in while its panels keep their
   staggered rise, which supplies the slide. Opacity only, never a transform on
   .view, because a transform would re-anchor the fixed drawers and dialogs
   that live inside a page. Off for reduced motion. */
.view.on{animation:view-in .2s ease-out both}
@keyframes view-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}

/* Page tabs in dark mode: the console accent is too dark to read as text on
   a dark surface, so the active tab's label uses the text colour and the
   raised pill carries the selection. Light mode keeps the accent. */
[data-theme=dark] .page-tab.active{color:var(--tx);background:rgba(var(--amber-rgb),.18)}


/* A console preference can reduce motion even when the device setting does not. */
html[data-motion=reduced],html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}


.page-tabs.motion-tabs{position:relative}
.page-tabs.motion-tabs .page-tab{position:relative;z-index:1}
.page-tabs.motion-tabs .page-tab.active{background:transparent;box-shadow:none}
.tab-motion-indicator{position:absolute;z-index:0;border:1px solid rgba(var(--amber-rgb),.22);border-radius:6px;background:rgba(var(--amber-rgb),.16);pointer-events:none;transition:left .26s var(--ease),top .26s var(--ease),width .26s var(--ease),height .26s var(--ease)}
@media(prefers-reduced-motion:reduce){.tab-motion-indicator{transition:none}}

/* Phones: tighter panels, and text fields at 16px so iOS Safari does not zoom the page when one is focused. */
@media(max-width:520px){.panel{padding:14px 14px 16px}main{padding-inline:14px}}
@media(hover:none) and (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea{font-size:16px!important}}

/* iOS Safari inflates long single-line text (the news ticker) unless told not to. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.news-ticker,.news-ticker *{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Console Assistant conversation: one quiet header, a sticky title row, and a hint that explains the bar. */
.assistant-conversation .assistant-answer-head{position:sticky;top:-7px;z-index:2;margin:-7px -7px 8px;padding:9px 11px 6px;background:var(--solid)}
.assistant-answer-head .assistant-close{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:10px;color:var(--tx-3)}
.assistant-answer-head .assistant-close:hover{background:var(--wash);color:var(--tx)}
.assistant-answer-head [data-assistant-new]{padding:3px 8px;border:1px solid var(--edge);border-radius:999px;color:var(--tx-2)}
.assistant-answer-head [data-assistant-new]:hover{border-color:var(--edge-lit);background:var(--wash)}
.assistant-hint{margin:12px 0 2px;color:var(--tx-3);font-size:10px;text-align:center}
.dash-zen-search .search-results.has-assistant-conversation .assistant-conversation-turns{max-height:none;overflow:visible}

/* Phones: let the header search use the room between the menu and the icons, drop the keyboard hint, and use a smaller placeholder so "Ask a follow-up…" is not cut off. Typed text stays 16px so iOS does not zoom the page. */
@media(max-width:600px){
/* Only while the search bar sits in the header; in Zen it moves into the page and the spacer must push the icons right. */
.strip:has(>.search-wrap) .spacer{display:none}
.strip .search-wrap{flex:1 1 0;min-width:0}
.strip .q{width:100%;padding-right:12px}
.strip .search-key{display:none}
.strip .q::placeholder{font-size:12.5px}
}

/* Department colours (see js/core/departments.js). One list for every place a department is named.
   No green, amber or red: those are status colours. The chip text is mixed toward --tx so it reads in both themes. */
:root{--dept-0:#4a8cf7;--dept-1:#9b6df6;--dept-2:#e8559e;--dept-3:#12b5d8;--dept-4:#6670f2;--dept-5:#cf55e6;--dept-6:#b58aa6;--dept-7:#8ea0c0;--dept-x:#7f8896}
.dept-0{--dept:var(--dept-0)}.dept-1{--dept:var(--dept-1)}.dept-2{--dept:var(--dept-2)}.dept-3{--dept:var(--dept-3)}.dept-4{--dept:var(--dept-4)}.dept-5{--dept:var(--dept-5)}.dept-6{--dept:var(--dept-6)}.dept-7{--dept:var(--dept-7)}.dept-x{--dept:var(--dept-x)}
.dept-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 9px;border:1px solid color-mix(in srgb,var(--dept) 42%,transparent);border-radius:999px;background:color-mix(in srgb,var(--dept) 15%,transparent);color:color-mix(in srgb,var(--dept) 58%,var(--tx));font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dept-chip::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:var(--dept)}

/* Workspace cap: while the page is scrolled, the workspace keeps its rounded top corners and nothing
   shows in the 8px gap above the sticky top strip. It is a fixed element rather than part of the sticky
   strip, which Chrome does not reliably paint outside its box on high-density screens.
   - The frame colour covers the gap (8px, overlapping the corner pieces by 1px so no seam row shows at
     fractional scales).
   - Two SVG corner pieces (#111214 = --frame) fill the areas outside the 20px curve; SVG keeps the curve
     anti-aliased.
   - ::after redraws the surface's hairline border in --edge-solid. It must be opaque: the usual --edge is
     translucent, so text scrolling underneath would show through that 1px line.
   header.js shows the cap and aligns it with the workspace. Keep plain backgrounds here: no mask,
   clip-path or box-shadow. */
.workspace-cap{display:none;position:fixed;z-index:7;top:0;left:0;width:0;height:27px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23111214' d='M0 0H20A20 20 0 0 0 0 20Z'/%3E%3C/svg%3E") left 7px/20px 20px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23111214' d='M20 0H0A20 20 0 0 1 20 20Z'/%3E%3C/svg%3E") right 7px/20px 20px no-repeat,linear-gradient(var(--frame),var(--frame)) left top/100% 8px no-repeat}
.workspace-cap::after{content:'';position:absolute;top:7px;left:0;right:0;height:21px;border:1px solid var(--edge-solid);border-bottom:0;border-radius:20px 20px 0 0}
.workspace-cap.on{display:block}
@media(max-width:900px){.workspace-cap.on{display:none}}

/* The two tones of the accent swatch, whatever the theme: light is the lighter, dark the darker.
   Defaults are the K1 red pair; appearance.js and theme-boot.js replace them when another accent is chosen. */
:root{--accent-light:#a51c00;--accent-dark:#6f1100}

/* Page atmosphere. The blooms are fixed to the viewport so the sticky strip and the active
   nav tab, which repaint the workspace colour, match the surface exactly with no seam. */
.app>.workspace-surface,.strip,.nav-btn[aria-current=page],.nav-motion-indicator{background-image:var(--workspace-fusion,none);background-attachment:fixed}

/* Figure scale on phones (tokens are defined in :root). */
@media(max-width:700px){:root{--num-hero:28px;--num-card:22px;--num-sub:18px;--num-strip:15px}}

/* Shared source freshness and widget controls. */
.global-sync{flex:0 1 auto;min-width:0;max-width:190px;color:var(--tx-3);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.widget-refresh{margin-left:auto}
.widget-refresh:disabled{opacity:.5}
/* Phones and small screens drop it; each page header keeps its own status line. */
@media(max-width:900px){.global-sync{display:none}}
/* Header bell: saved notifications (js/core/notifications.js). Flat panel, one
   hairline per row, a 30px icon tile per kind; colour only on the icon of an
   item that needs action, and on the unread dot. */
.notification-count{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--amber);color:var(--accent-ink);font-size:10px;font-weight:650;line-height:16px;text-align:center}
.notification-menu{--panel:var(--solid);--wash:var(--solid-field);position:absolute;top:36px;right:0;width:min(392px,calc(100vw - 32px));display:flex;flex-direction:column;max-height:min(560px,76vh);background:var(--panel);border:1px solid var(--edge-lit);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:120;overflow:hidden}
.notification-menu header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--edge)}
.notification-menu header b{font-size:13px;font-weight:650;color:var(--tx)}
#notificationSummary{font-size:11px;color:var(--tx-3)}
.nt-link{margin-left:auto;padding:2px 0;border:0;background:none;color:var(--tx-2);font:inherit;font-size:12px;cursor:pointer}
.nt-link:hover:not(:disabled){color:var(--tx);text-decoration:underline}
.nt-link:disabled{opacity:.45;cursor:default}
.nt-link:focus-visible,.nt-main:focus-visible,.nt-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
.nt-list{overflow:auto;overscroll-behavior:contain}
.nt-item{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:12px 28px 12px 14px;border-bottom:1px solid var(--edge)}
.nt-item:last-child{border-bottom:0}
.nt-item:hover{background:var(--wash)}
.nt-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--field);border:1px solid var(--edge);color:var(--tx-2)}
.nt-icon .nav-svg{width:16px;height:16px}
.nt-icon.warn{color:var(--warn)}
.nt-icon.alert{color:var(--alert)}
.nt-body{min-width:0;display:grid;gap:8px}
.nt-main{display:grid;gap:2px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.nt-main:disabled{cursor:default}
.nt-meta{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--tx-3)}
.nt-meta time{text-transform:none;letter-spacing:0}
.nt-title{font-size:13px;line-height:1.35;color:var(--tx-2);overflow-wrap:anywhere}
.nt-item.unread .nt-title{color:var(--tx);font-weight:600}
.nt-detail{font-size:12px;line-height:1.4;color:var(--tx-3);overflow-wrap:anywhere}
.nt-dot{position:absolute;top:17px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.nt-actions{display:flex;flex-wrap:wrap;gap:6px}
.nt-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--edge-lit);border-radius:7px;background:var(--panel);color:var(--tx);font:inherit;font-size:12px;font-weight:550;cursor:pointer}
.nt-btn .nav-svg{width:14px;height:14px}
.nt-btn:hover:not(:disabled){background:var(--wash)}
.nt-btn.primary{background:var(--amber);border-color:var(--amber);color:var(--accent-ink)}
.nt-btn.primary:hover:not(:disabled){background:var(--amber);filter:brightness(1.08)}
.nt-btn:disabled{opacity:.6;cursor:default}
.nt-confirm{display:grid;gap:8px;padding:10px;border:1px solid var(--edge-lit);border-radius:9px;background:var(--wash)}
.nt-confirm p{margin:0;font-size:12.5px;line-height:1.45;color:var(--tx)}
.nt-note{margin:0;font-size:11.5px;line-height:1.4;color:var(--tx-3)}
.nt-note.bad{color:var(--alert)}
.nt-results{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.nt-results li{display:grid;grid-template-columns:6px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12px;color:var(--tx-2)}
.nt-results li i{width:6px;height:6px;border-radius:50%;background:var(--tx-3)}
.nt-results li i.ok{background:var(--ok)}
.nt-results li i.bad{background:var(--alert)}
.nt-results li b{font-weight:600;color:var(--tx)}
.nt-empty{display:grid;justify-items:center;gap:6px;margin:0;padding:32px 24px;text-align:center;font-size:12px;line-height:1.45;color:var(--tx-3)}
.nt-empty .nav-svg{width:22px;height:22px;color:var(--tx-3)}
.nt-loading{padding:16px 18px}
.nt-empty b{font-size:13px;color:var(--tx)}
.notification-menu footer{padding:8px 14px;border-top:1px solid var(--edge);font-size:11px;color:var(--tx-3)}
.notification-menu footer:empty{display:none}
@media(max-width:700px){.notification-menu{position:fixed;top:56px;left:16px;right:16px;width:auto;max-height:calc(100vh - 72px)}}