/* DUDE.AI — Work OS app shell (scream skin)
   Shared by every page in ui_kits/work-os/pages/. Requires ../../styles.css
   (tokens + scream layer) loaded first. Full-bleed always: --bleed-pad gutters. */

body { margin: 0; }

/* ---------- Top bar ---------- */
/* [b08435ac] The red rule is a box-shadow, NOT a border: a border adds 1.5px to
   the bar's height while .appbody/.sidenav offset by the same amount — all three
   now share the --shell-topbar-h token (rem, follows the responsive root scale),
   so the offsets stay exact at every viewport. */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(7,6,5,0.94); backdrop-filter: blur(8px); box-shadow: 0 1.5px 0 var(--scream-red); }
.topin { padding: 0 var(--bleed-pad); height: var(--shell-topbar-h); display: flex; align-items: center; gap: 30px; }
.logo { font-family: var(--font-display); font-size: 1.4375rem; color: var(--cream); letter-spacing: 0.02em; white-space: nowrap; }
.logo .dot { color: var(--scream-red); }
.nav { display: flex; gap: 24px; font-family: var(--font-mono); font-size: 0.78125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.nav a { color: var(--cream-dim); padding: 19px 0; white-space: nowrap; }
.nav a:hover { color: var(--scream-yellow); }
.nav a.active { color: var(--scream-yellow); border-bottom: 3px solid var(--scream-yellow); }
@media (max-width: 1100px) { .nav { display: none; } }
.userchip { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.userchip .av { width: 30px; height: 30px; background: var(--scream-yellow); color: #14100a; display: grid; place-items: center; font-family: var(--font-display); font-size: 0.9375rem; box-shadow: 2px 2px 0 rgba(0,0,0,0.8); }
.userchip .nm { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: var(--cream); text-transform: uppercase; }

/* ---------- Breadcrumb ---------- */
.crumbs { padding: 10px var(--bleed-pad) 0; font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--cream-dim); }
.crumbs a:hover { color: var(--scream-yellow); }
.crumbs .here { color: var(--scream-yellow); }

/* ---------- Buttons ---------- */
.btn-scream { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 19px; cursor: pointer; box-shadow: 3px 3px 0 rgba(0,0,0,0.8); border: 1.5px solid var(--scream-red); background: var(--scream-red); color: var(--cream); transition: transform 0.12s var(--ease); text-decoration: none; }
.btn-scream:hover { transform: translate(-1px,-1px); }
.btn-scream:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,0.8); }
.btn-scream.yellow { background: transparent; border-color: var(--scream-yellow); color: var(--scream-yellow); }
.btn-scream.yellow:hover { background: var(--scream-yellow); color: #14100a; }
.btn-scream.ghost { background: transparent; border-color: rgba(234,224,203,0.4); color: var(--cream-dim); }
.btn-scream.ghost:hover { border-color: var(--cream); color: var(--cream); }
.btn-scream[disabled] { opacity: 0.35; cursor: not-allowed; }

.rangebtn { cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border: 1.5px solid rgba(234,224,203,0.3); background: transparent; color: var(--cream-dim); box-shadow: 2px 2px 0 rgba(0,0,0,0.7); text-decoration: none; display: inline-block; }
.rangebtn.on { border-color: var(--scream-yellow); background: var(--scream-yellow); color: #14100a; }

/* ---------- Panels / grids ---------- */
.panel { border: 1.5px solid rgba(234,224,203,0.22); background: var(--scream-panel); box-shadow: 4px 4px 0 rgba(0,0,0,0.7); padding: 16px 18px; min-width: 0; }
/* [e162a8f2 · c_tdux0007] h2 covers Task Detail's Panel/ActionCard section titles (promoted from h3
   so the page's heading hierarchy doesn't skip a level below its single h1); h3 stays for any other
   caller of this rule that has not made the same move. */
.panel h2, .panel h3, .panel .h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--cream); text-transform: uppercase; margin: 0 0 6px; letter-spacing: 0.01em; }
.note { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: var(--cream-dim); line-height: 1.6; margin: 0 0 12px; }
.statgrid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1.5px; background: rgba(234,224,203,0.18); border: 1.5px solid rgba(234,224,203,0.18); }
.statgrid .cellx { background: var(--scream-ink); padding: 12px 16px 14px; min-width: 0; }
.statgrid.cols4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.statgrid.cols3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* [N5 64b15089] Card stack: ONE owner for the vertical rhythm between major
   page cards. Every direct child keeps the standard 16px gap from its
   predecessor, at every viewport width — so adding, removing, or reordering
   cards (the N4 strip removal collapsed the tiles onto the Agents card) can
   never silently delete the spacing again. Conditional children that don't
   render simply drop out of the rhythm. */
.cardstack > * + * { margin-top: 16px; }
@media (max-width: 980px) { .statgrid, .statgrid.cols4, .statgrid.cols3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 1.8vw, 1.75rem); }
@media (max-width: 1080px) { .split { grid-template-columns: 1fr; } }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(0.875rem,1.6vw,1.375rem); }
@media (max-width: 1080px) { .cards3 { grid-template-columns: 1fr; } }

/* ---------- Stat number in cellx ---------- */
.cellx .big { font-family: var(--font-display); font-size: clamp(1.875rem,2.4vw,2.625rem); line-height: 0.9; color: var(--scream-yellow); text-shadow: var(--extrude-yellow); text-transform: uppercase; }
.cellx .lab { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; color: var(--cream); margin-top: 10px; text-transform: uppercase; }
.cellx .sub { font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--cream-dim); margin-top: 4px; text-transform: uppercase; }

/* ---------- Tables ---------- */
.tbl { border: 1.5px solid rgba(234,224,203,0.22); background: #0A0807; box-shadow: 4px 4px 0 rgba(0,0,0,0.7); overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; }
.tbl th { background: #1d150d; font-family: var(--font-mono); font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.1em; color: var(--scream-yellow); text-transform: uppercase; text-align: left; padding: 10px 14px; white-space: nowrap; }
.tbl td { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: var(--cream); padding: 11px 14px; border-top: 1px solid rgba(234,224,203,0.1); vertical-align: baseline; }
.tbl td.dim { color: var(--cream-dim); }
.tbl tr:hover td { background: rgba(240,197,63,0.04); }

/* ---------- Chips / tags ---------- */
.tag { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid rgba(234,224,203,0.55); color: rgba(234,224,203,0.75); padding: 3px 9px; white-space: nowrap; display: inline-block; }
.tag.ok { border-color: var(--ok); color: var(--ok); }
.tag.yellow { border-color: var(--scream-yellow); color: var(--scream-yellow); }
.tag.red { border-color: var(--scream-red); color: var(--scream-red); }
.tag.fill-yellow { background: var(--scream-yellow); border-color: var(--scream-yellow); color: #14100a; }

/* ---------- Forms ---------- */
.flabel { font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.12em; color: var(--cream-dim); text-transform: uppercase; display: block; margin: 14px 0 6px; }
.flabel:first-child { margin-top: 0; }
.fin, textarea.fin, select.fin { width: 100%; box-sizing: border-box; background: #0A0807; border: 1.5px solid rgba(234,224,203,0.3); color: var(--cream); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; padding: 12px 13px; outline: none; }
.fin:focus { border-color: var(--scream-yellow); }
select.fin { appearance: none; }

/* ---------- Page headline block ---------- */
.pagehead { margin-bottom: clamp(0.75rem, 1.4vw, 1.25rem); }
.pagehead .scream-body { max-width: 820px; }

/* ---------- Score colors ---------- */
.sc-ok { color: var(--ok); } .sc-yellow { color: var(--scream-yellow); } .sc-orange { color: #E8923B; } .sc-red { color: var(--scream-red); } .sc-dim { color: var(--cream-dim); }

/* ---------- Footer ---------- */
.appfoot { border-bottom: none !important; padding-top: 28px !important; padding-bottom: 28px !important; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--cream-dim); text-transform: uppercase; }
.appfoot .y { color: var(--scream-yellow); }