/* ========================================================================
   ServiceLog — Terminal-inspired design system
   Mono-first · tabs · bracket checkboxes · // comment helper · heatmap
   Works identically on mobile + desktop (mobile-first container).
   ======================================================================== */

/* Fonts are loaded via <link rel="stylesheet"> in base/layout.html (parallel,
   non-render-blocking) rather than an @import here, which would force the
   browser to download + parse this file before even discovering the fonts. */

:root {
  /* ── palette ─────────────────────────────────────────────── */
  --bg:         #0b0d14;
  /* ServiceLog's atmospheric canvas is the shared background for every
     module/page.  Keep surfaces separate so glass cards retain hierarchy. */
  --page-canvas-base: #0b0d14;
  --page-canvas-atmosphere:
    radial-gradient(circle at 12% 0%, rgba(241,90,60,.08), transparent 28rem),
    radial-gradient(circle at 92% 26%, rgba(67,212,158,.025), transparent 23rem);
  --bg-2:       #10131e;
  --surface:    #151927;
  --surface-2:  #1a1f33;
  --border:     #242a42;
  --border-2:   #2f3650;
  --text:       #e8ecf4;
  --muted:      #7a8099;
  --dim:        #4a5068;

  --amber:      #f5a623;
  --amber-bg:   rgba(245,166,35,.10);
  --amber-dim:  rgba(245,166,35,.35);
  --green:      #5bd98a;
  --green-bg:   rgba(91,217,138,.10);
  --green-dim:  rgba(91,217,138,.35);
  --red:        #ef5a5a;
  --red-bg:     rgba(239,90,90,.10);
  --red-dim:    rgba(239,90,90,.35);
  --blue:       #6aa7ff;
  --blue-bg:    rgba(106,167,255,.10);
  --blue-dim:   rgba(106,167,255,.35);
  --purple:     #b185ff;
  --purple-bg:  rgba(177,133,255,.10);
  --purple-dim: rgba(177,133,255,.35);

  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  --radius:     6px;
  --radius-lg:  10px;
  --shell-max:  1100px;   /* consistent wide layout across all apps */
  --shell-wide: 1100px;   /* wider for data-heavy screens */
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #edf1f4;
  --bg-2: #f5f7f9;
  --surface: #ffffff;
  --surface-2: #f3f6f8;
  --border: #cbd4dc;
  --border-2: #aebbc6;
  --text: #17212b;
  --muted: #5d6975;
  --dim: #5f6b76;
  --page-canvas-base: #edf1f4;
  --page-canvas-atmosphere:
    radial-gradient(circle at 12% 0%, rgba(241,90,60,.13), transparent 30rem),
    radial-gradient(circle at 92% 26%, rgba(35,142,125,.10), transparent 26rem);
  --amber: #965500;
  --amber-bg: rgba(150,85,0,.10);
  --amber-dim: rgba(150,85,0,.34);
  --green: #147a55;
  --green-bg: rgba(20,122,85,.10);
  --green-dim: rgba(20,122,85,.34);
  --red: #c53646;
  --red-bg: rgba(197,54,70,.10);
  --red-dim: rgba(197,54,70,.32);
  --blue: #2868c7;
  --blue-bg: rgba(40,104,199,.10);
  --blue-dim: rgba(40,104,199,.32);
  --purple: #7349b8;
  --purple-bg: rgba(115,73,184,.10);
  --purple-dim: rgba(115,73,184,.32);
}

/* ── reset ─────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-mono);
  font-size: .87rem;
  background-color: var(--page-canvas-base);
  background-image: var(--page-canvas-atmosphere);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); color: var(--amber); }
hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ── app shell ─────────────────────────────────────────────── */
.app {
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.app.wide { max-width: var(--shell-wide); }

/* ── Dashboard shell · same max-width as all other apps, no side padding (dashboard owns its own padding) ── */
.app.dash {
  max-width: var(--shell-max);
  padding-left: 0;
  padding-right: 0;
}
/* On desktop PWA (window-controls-overlay) push content below the title bar */
@media (display-mode: window-controls-overlay) {
  .brand-bar {
    padding-top: max(.55rem, env(titlebar-area-height, .55rem));
    -webkit-app-region: drag;
  }
  .brand-bar a,
  .brand-bar button,
  .brand-bar form { -webkit-app-region: no-drag; }
  .app.dash .dash-statusbar { padding-top: .4rem; }
}
/* Phone PWA · single-column, larger touch targets */
@media (display-mode: standalone) and (max-width: 600px) {
  .dash-body         { grid-template-columns: 1fr !important; }
  .dash-panel + .dash-panel { border-left: none !important; border-top: 1px solid var(--border); }
  .dash-chips        { gap: 1.25rem; flex-wrap: wrap; }
  .dash-hero-num     { font-size: 3rem; }
  .dash-row          { padding: .85rem 0; }
  .dash-pill         { padding: .4rem .9rem; font-size: .82rem; }
}

/* ── brand bar (sits above top tabs) ──────────────────────── */
.brand-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .4rem 0 .25rem;
  padding-top: max(.4rem, env(safe-area-inset-top));
  font-family: var(--font-mono);
}
.brand-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text);
  text-decoration: none;
  padding: .15rem .25rem;
  border-radius: var(--radius);
  transition: background .12s;
}
.brand-link:hover { background: var(--surface); text-decoration: none; }
.brand-mark {
  display: block;
  width: 24px; height: 24px;       /* hanko stamp is square (14×14) */
  image-rendering: pixelated;
}
.brand-mark .brand-frame   { fill: var(--amber); }
.brand-mark .brand-check   { fill: var(--green); }
/* Slight brightening on hover — echoes the "approved" state */
.brand-link:hover .brand-mark .brand-check { fill: #74e59c; }
.brand-link:hover .brand-mark .brand-frame { fill: #ffb841; }
.brand-word {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--text);
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .02em;
  margin-left: .1rem;
}
@media (max-width: 420px) {
  .brand-sub { display: none; }
}
/* Hide who-chip entirely on very small screens — icon + role both gone */
@media (max-width: 480px) {
  .brand-who { display: none; }
}

/* ── apps switcher chip + popover (brand bar) ────────────────── */
.apps-switcher { position: relative; margin-left: auto; }
.apps-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .3rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono); font-size: .72rem;
  cursor: pointer;
  transition: color .12s;
  min-height: 32px;
}
.apps-btn:hover,
.apps-btn[aria-expanded="true"] { color: var(--text); background: transparent; }
.apps-btn .pico { width: 13px; height: 13px; }
.apps-btn-chev  { color: var(--muted); font-size: .6rem; margin-left: .05rem; }
@media (max-width: 560px) { .apps-btn-label { display: none; } }

.apps-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  max-width: 340px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.55),
              0 0 0 1px rgba(245,166,35,.10);
  padding: .45rem;
  z-index: 50;
  font-family: var(--font-mono);
  animation: apps-pop .12s ease-out;
}

/* Mobile: pin popover to viewport so it never clips off either edge */
@media (max-width: 600px) {
  .apps-switcher { position: static; }
  .apps-popover {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top));
    left: max(.75rem, env(safe-area-inset-left));
    right: max(.75rem, env(safe-area-inset-right));
    min-width: 0;
    max-width: none;
    width: auto;
  }
}
@keyframes apps-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.apps-popover[hidden] { display: none; }
.apps-popover-head {
  padding: .25rem .4rem .35rem;
  border-bottom: 1px dashed rgba(255,255,255,.07);
  margin-bottom: .35rem;
}
.apps-popover-grid { display: flex; flex-direction: column; gap: 2px; }
.apps-popover-tile {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .55rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid transparent;
  transition: background .1s, border-color .1s;
  position: relative;
}
.apps-popover-tile:hover {
  background: rgba(245,166,35,.08);
  border-color: rgba(245,166,35,.35);
  text-decoration: none;
}
.apps-popover-tile.active {
  background: rgba(245,166,35,.12);
  border-color: var(--amber);
}
.apps-popover-tile.disabled {
  opacity: .45; pointer-events: none; cursor: not-allowed;
}
.apps-popover-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}
.apps-popover-ico .pico { width: 14px !important; height: 14px !important; }
.apps-popover-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.apps-popover-name {
  font-weight: 700; font-size: .82rem; line-height: 1.1;
}
.apps-popover-tag {
  font-size: .68rem; color: var(--muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apps-popover-mark {
  margin-left: auto; color: var(--amber); font-size: .7rem; line-height: 1;
}
.apps-popover-foot {
  display: block;
  margin-top: .3rem;
  padding: .35rem .5rem;
  text-align: center;
  font-size: .7rem;
  color: var(--muted);
  border-top: 1px dashed rgba(255,255,255,.07);
  text-decoration: none;
}
.apps-popover-foot:hover { color: var(--amber); text-decoration: none; }

/* Role chip · sits next to apps switcher */
/* ═════════ inbox · reaction chips on replies (Tier 3b) ═════════ */
.reaction-chip {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: .7rem;
  line-height: 1.4;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  transition: background .1s, border-color .1s, opacity .1s, color .1s;
}
.reaction-chip:hover { background: var(--surface); border-color: var(--amber); color: var(--text); }
.reaction-chip.reacted {
  border-color: var(--amber);
  background: rgba(245, 166, 35, .1);
  color: var(--amber);
}
.reaction-chip.empty { opacity: .45; }
.reaction-chip.empty:hover { opacity: 1; }
.reaction-chip .rx-emoji { font-size: .85rem; }
.reaction-chip .rx-count { font-weight: 600; color: var(--text); }
.reaction-chip.reacted .rx-count { color: var(--amber); }

/* ═════════ inbox · calendar month grid (Tier 3a · grid rewrite) ═════════
   Uses CSS Grid with 7 equal columns.  More robust than <table> inside
   the narrow .app shell · cells can't collapse into a single column,
   content grows naturally, responsive rules are simpler.

   Structure:
     .cal-wrap      outer overflow-x safety + horizontal scroll on phones
       .cal-grid    display: grid · 7 × 1fr
         .cal-head  7 weekday labels (row 1)
         .cal-cell  42 cells (6 weeks × 7 days)
           .cal-date-row    top-row: date number + "+N more" overflow hint
           .cal-item        up to 3 items · rest fold into "+N more"

   Why cap at 3 items per cell: keeps row height predictable.  Over-full
   days surface via title tooltip + clicking into detail.  Better than
   a tall month grid that scrolls.
*/
.cal-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.cal-nav-btns { display: flex; gap: .3rem; }
.cal-nav-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
}

.cal-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* keep a hair of padding so focus rings on cells don't get clipped */
  padding: 2px;
  margin: 0 -2px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 0;
  font-family: var(--font-mono);
  min-width: 620px;            /* force horizontal scroll on tiny screens */
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}

.cal-head {
  padding: .45rem .55rem;
  color: var(--muted);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.cal-head.cal-wk { color: var(--amber); }

.cal-cell {
  min-height: 5.6rem;
  padding: .3rem .35rem .35rem .35rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.cal-cell:nth-child(7n + 7)      { border-right: none; }     /* end-of-row */
.cal-cell.cal-wk-cell            { background: rgba(245, 166, 35, .025); }
.cal-cell.cal-oom                { opacity: .42; background: rgba(255,255,255,.01); }
.cal-cell.cal-oom .cal-date      { color: var(--muted); }
.cal-cell.cal-today              {
  background: rgba(245, 166, 35, .06);
  box-shadow: inset 0 0 0 1px var(--amber);
  z-index: 1;
}

.cal-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.cal-date {
  font-weight: 700;
  color: var(--text);
  font-size: .78rem;
  line-height: 1.3;
}
/* "today" · small amber dot behind the number, like Google Calendar */
.cal-date.is-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--bg);
  font-weight: 800;
  padding: 0 .35rem;
}
.cal-more-n {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 600;
}

.cal-item {
  display: block;
  padding: 2px 5px;
  border-radius: 3px;
  text-decoration: none;
  font-size: .66rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid var(--muted);
  background: rgba(255, 255, 255, .025);
  color: var(--text);
}
.cal-item:hover {
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
}
.cal-item .cal-time {
  color: var(--muted);
  margin-right: .3rem;
  font-size: .6rem;
}

/* kind-coloured left edges · match the legend chips */
.cal-event    { border-left-color: var(--amber); }
.cal-request  { border-left-color: var(--green); }
.cal-reminder { border-left-color: var(--blue);  }
.cal-note     { border-left-color: var(--muted); }

.cal-done   { opacity: .5; text-decoration: line-through; }
.cal-cancel { opacity: .35; }

/* legend row · kind key below the grid */
.cal-legend {
  margin-top: .7rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 .4rem;
  border-left: 2px solid var(--muted);
  background: rgba(255, 255, 255, .02);
  border-radius: 2px;
  font-size: .66rem;
}
.leg-event    { border-left-color: var(--amber); color: var(--amber); }
.leg-request  { border-left-color: var(--green); color: var(--green); }
.leg-reminder { border-left-color: var(--blue);  color: var(--blue);  }
.leg-note     { border-left-color: var(--muted); }

@media (max-width: 780px) {
  .cal-grid      { min-width: 560px; }    /* user can swipe horizontally */
  .cal-cell      { min-height: 4.4rem; padding: .22rem .25rem .3rem .25rem; }
  .cal-head      { padding: .35rem .3rem; font-size: .62rem; }
  .cal-date      { font-size: .72rem; }
  .cal-item      { font-size: .6rem; padding: 1px 4px; }
  .cal-item .cal-time { font-size: .55rem; }
}

/* @mention inline token inside an inbox reply body.  Reads as a
   tagged-user reference: amber text on subtle bg, monospace so it
   stands out without shouting. */
.mention {
  font-family: var(--font-mono);
  color: var(--amber);
  background: rgba(245, 166, 35, .08);
  padding: 0 .2rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* Inbox bell · three states driven by brand_bar.html:
     base          → muted · "nothing to see here"
     .has-pending  → blue  · "stuff on your plate, all read"
     .has-unread   → amber · "stuff on your plate AND new since you looked"
                     + small pulsing dot in top-right corner
   Count badge shows inbox_pending_count (what's on your plate) in both
   active states · the colour tells you whether any of it is new. */
.brand-bell {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.brand-bell:hover,
.brand-bell:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: none;
}

/* state · items on plate, all read */
.brand-bell.has-pending {
  border-color: var(--blue);
  color: var(--text);
}
.brand-bell.has-pending .pico { color: var(--blue); }
.brand-bell.has-pending .brand-bell-count { color: var(--blue); }

/* state · items on plate AND new activity · the LOUD one:
   filled amber pill, white-ish count, pulsing dot in the corner. */
.brand-bell.has-unread {
  border-color: var(--amber);
  background: var(--amber);
  box-shadow: 0 0 0 2px rgba(245, 166, 35, .25);
  color: var(--bg);
}
.brand-bell.has-unread:hover,
.brand-bell.has-unread:focus-visible {
  background: var(--amber);
  filter: brightness(1.08);
  color: var(--bg);
}
.brand-bell.has-unread .pico { color: var(--bg); }
.brand-bell.has-unread .brand-bell-count {
  color: var(--bg);
  font-weight: 800;
}

.brand-bell-count {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  min-width: 1.1rem;
  text-align: center;
}
.brand-bell .pico { width: 14px; height: 14px; transition: color .12s; }

/* pulsing dot · top-right corner · only renders when has-unread */
.brand-bell-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--bg);  /* clean "cut-out" of the surrounding bg */
  animation: bell-pulse 1.8s ease-in-out infinite;
}
@keyframes bell-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: .55;  transform: scale(1.25); }
}
/* Respect reduced-motion preference · some users find pulses nauseating */
@media (prefers-reduced-motion: reduce) {
  .brand-bell-dot { animation: none; }
}

@media (max-width: 420px) {
  .brand-bell { padding: .25rem .35rem; }
}

/* ─────────── launcher-tile badge · inbox unread/pending signal ───────────
   Sits next to the app name inside .app-tile-head · mirrors the bell
   states: blue chip when there are pending items, amber+pulse when
   some have new replies. */
.app-tile .app-tile-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.app-tile-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
}
.app-tile-badge.badge-pending {
  background: rgba(106, 167, 255, .15);
  color: var(--blue);
  border: 1px solid var(--blue);
}
.app-tile-badge.badge-unread {
  background: var(--amber);
  color: var(--bg);
  border: 1px solid var(--amber);
  box-shadow: 0 0 0 2px rgba(245, 166, 35, .25);
  animation: tile-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes tile-badge-pulse {
  0%, 100% { transform: scale(1);   }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(245, 166, 35, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .app-tile-badge.badge-unread { animation: none; }
}
.app-tile.has-unread  { border-color: rgba(245, 166, 35, .6); }
.app-tile.has-pending { border-color: rgba(106, 167, 255, .45); }

/* ─────────── apps-popover · compact inline count badge next to name ─── */
.apps-popover-count {
  display: inline-block;
  margin-left: .4rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 999px;
  line-height: 1.5;
  vertical-align: middle;
}
.apps-popover-count.count-pending {
  background: rgba(106, 167, 255, .2);
  color: var(--blue);
}
.apps-popover-count.count-unread {
  background: var(--amber);
  color: var(--bg);
}

/* Top-right user chip · primary entry point for /accounts/profile/.
   (The 'profile' tab was removed from servicelog/_tabs.html since profile
   is a personal-settings surface, not a field-service concern.)  Stronger
   hover + keyboard focus affordance so this reads as a clickable link,
   not a static label. */
.brand-who {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .3rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  text-decoration: none;
  cursor: pointer;
  transition: color .12s;
}
.brand-who:hover,
.brand-who:focus-visible { color: var(--text); text-decoration: none; outline: none; }
.brand-who:hover .brand-who-name,
.brand-who:focus-visible .brand-who-name { color: var(--text); }
.brand-who .pico { width: 13px; height: 13px; opacity: .7; }
.brand-who-name { color: var(--text); font-size: .72rem; }
.brand-who-role { color: var(--muted); font-size: .68rem; opacity: .6; }
@media (max-width: 560px) { .brand-who-name { display: none; } }
@media (max-width: 420px) {
  .brand-who-role { display: none; }
  .brand-who { padding: .2rem .25rem; }
}

.brand-logout-form { margin: 0; line-height: 0; }
.brand-logout {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: .2rem .3rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .72rem; line-height: 1;
  transition: color .12s;
  min-height: 32px;
  opacity: .65;
}
.brand-logout:hover { color: var(--red); opacity: 1; }
.brand-logout svg { display: block; width: 14px; height: 14px; }
.brand-logout-label { display: inline; }
@media (max-width: 560px) {
  .brand-logout-label { display: none; }
  .brand-logout { padding: .2rem .25rem; }
}

/* ── top tabs (primary nav) ────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  padding-top: max(1rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 10;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1;
  min-width: max-content;
  text-align: center;
  padding: .7rem .6rem;
  font-size: .82rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  font-weight: 500;
  white-space: nowrap;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
  font-weight: 600;
}
.tab.active.green   { color: var(--green);  border-bottom-color: var(--green); }
.tab.active.blue    { color: var(--blue);   border-bottom-color: var(--blue); }
.tab.active.purple  { color: var(--purple); border-bottom-color: var(--purple); }

/* Screen-reader-only content remains accessible without affecting layout. */
.sr-only {
  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;
}

/* ServiceLog uses one reports action plus an inline search field, not tabs. */
.servicelog-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  font-family: var(--font-mono);
}
.servicelog-home {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
.servicelog-home:hover,
.servicelog-home:focus-visible,
.servicelog-home.active {
  border-color: var(--amber);
  color: var(--amber);
  text-decoration: none;
}
.servicelog-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.servicelog-search:focus-within { border-color: var(--blue); }
.servicelog-search-icon {
  padding-left: .75rem;
  color: var(--blue);
  font-size: 1rem;
}
.servicelog-search input[type="search"] {
  width: 100%;
  min-width: 0;
  padding: .48rem .65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .78rem;
  outline: 0;
}
.servicelog-search button {
  align-self: stretch;
  padding: 0 .9rem;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: .74rem;
  cursor: pointer;
}
.servicelog-search button:hover,
.servicelog-search button:focus-visible {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--text);
}
@media (max-width: 520px) {
  .servicelog-toolbar { gap: .45rem; }
  .servicelog-home { padding: 0 .55rem; font-size: .68rem; }
  .servicelog-search input[type="search"] { font-size: .72rem; padding-inline: .45rem; }
  .servicelog-search button { padding-inline: .6rem; font-size: 0; }
  .servicelog-search button::after { content: "go"; font-size: .7rem; }
}

/* ── sub tabs (inside a section) ───────────────────────────── */
.subtabs {
  display: flex;
  gap: 0;
  font-family: var(--font-mono);
  font-size: .76rem;
  margin: .85rem 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  padding: .35rem .7rem .5rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subtab.active {
  color: var(--text);
  border-bottom-color: var(--amber);
  font-weight: 600;
}

/* ── terminal prompt header ────────────────────────────────── */
.prompt {
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: 1.7;
  margin: 1.1rem 0 .4rem;
  word-wrap: break-word;
}
.prompt .user   { color: var(--amber); }
.prompt .role   { color: var(--blue); }
.prompt .at     { color: var(--muted); }
.prompt .host   { color: var(--text); font-weight: 500; }
.prompt .sigil  { color: var(--green); margin: 0 .35em; }
.prompt .cmd    { color: var(--text); }
.prompt .flag   { color: var(--purple); margin-left: .35em; }

.comment {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: .82rem;
  margin-bottom: .35rem;
}
.comment::before { content: '// '; color: var(--dim); }

/* ── meta strip (date · streak) ────────────────────────────── */
.meta {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.meta-num { color: var(--text); }

/* ── day strip (week picker, like the reference) ───────────── */
.weekstrip {
  display: grid;
  grid-template-columns: auto repeat(7, 1fr) auto;
  gap: .3rem;
  align-items: end;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
}
.weekstrip .arrow {
  color: var(--muted); padding: .25rem; cursor: pointer;
  font-size: 1rem; line-height: 1;
}
.weekstrip .day {
  text-align: center;
  padding-bottom: .35rem;
  font-size: .72rem;
  color: var(--muted);
}
.weekstrip .day .d-label { font-size: .65rem; letter-spacing: .05em; }
.weekstrip .day .d-num {
  font-size: 1rem; font-weight: 600; color: var(--muted); margin-top: 2px;
}
.weekstrip .day.today .d-num {
  color: #000; background: var(--amber); border-radius: 3px;
  display: inline-block; padding: 0 .35em;
}
.weekstrip .day.today .d-label { color: var(--amber); }
.weekstrip .day.past .d-num { color: var(--text); }
.weekstrip .day .d-bar {
  height: 6px; margin-top: .4rem; border-radius: 1px;
  background: repeating-linear-gradient(
    45deg, var(--border) 0 2px, transparent 2px 4px
  );
  overflow: hidden; position: relative;
}
.weekstrip .day .d-bar::after {
  content: ''; position: absolute; inset: 0;
  width: var(--pct, 0%);
  background: var(--amber);
}
.weekstrip .day.past .d-bar::after { background: var(--amber); }
.weekstrip .day.today .d-bar::after { background: var(--amber); }
.weekstrip .day.future .d-bar::after { display: none; }
.weekstrip .day.viewed { border-bottom: 2px solid var(--amber); padding-bottom: .2rem; }
.weekstrip .day.viewed:not(.today) .d-num { color: var(--amber); }
.weekstrip .day .d-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--amber); margin: .15rem auto 0;
}

/* ── section header ────────────────────────────────────────── */
.section {
  border-top: 1px solid var(--border);
  padding: 1rem 0 .2rem;
  margin-top: .5rem;
}
.section:first-of-type { border-top: none; padding-top: .2rem; }
.section-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .15rem;
}
.section-head .ico { font-size: 1rem; line-height: 1; }
.section-head .title {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 1rem;
  color: var(--amber);
  flex: 1;
  letter-spacing: -.005em;
}
.section-head .count {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
}
.section-head .chev { color: var(--muted); font-size: .9rem; }

/* color variants */
.section.morning .section-head .title { color: var(--amber); }
.section.focus   .section-head .title { color: var(--blue); }
.section.action  .section-head .title { color: var(--red); }
.section.wind    .section-head .title { color: var(--purple); }
.section.closed  .section-head .title { color: var(--green); }

.section-sub {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  margin: 0 0 .55rem 1.55rem;
}
.section-sub::before { content: '// '; color: var(--dim); }

/* ── task / report row ─────────────────────────────────────── */
.row-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: .5rem;
  padding: .4rem 0;
  align-items: start;
  font-family: var(--font-mono);
  font-size: .88rem;
}
.row-item + .row-item { border-top: 1px dashed transparent; }
.row-item .brk {
  color: var(--amber);
  font-weight: 600;
  white-space: nowrap;
  min-width: 2.4em;
  padding-top: 1px;
}
.brk-done    { color: var(--amber); }
.brk-pending { color: var(--muted); }
.brk-action  { color: var(--red); }
.brk-green   { color: var(--green); }

.row-item .ico-lead {
  font-size: .9rem; opacity: .85; padding-top: 1px;
}
.row-item .body {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.row-item .body a { color: var(--text); }
.row-item .body a:hover { color: var(--amber); text-decoration: none; }
.row-item .main {
  color: var(--text);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-item .sub {
  color: var(--muted); font-size: .78rem;
}
.row-item .sub::before { content: '// '; color: var(--dim); }
.row-item .meta-tail {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  white-space: nowrap;
}
.row-item .meta-tail .streak { color: var(--amber); }
.row-item .meta-tail .muted  { color: var(--muted); }

/* ── pills ─────────────────────────────────────────────────── */
.pill {
  display: inline-block; font-family: var(--font-mono); font-size: .65rem;
  padding: 1px 6px; border-radius: 3px; font-weight: 600;
  letter-spacing: .04em;
}
.pill-amber  { color: var(--amber);  background: var(--amber-bg);  border: 1px solid var(--amber-dim); }
.pill-green  { color: var(--green);  background: var(--green-bg);  border: 1px solid var(--green-dim); }
.pill-red    { color: var(--red);    background: var(--red-bg);    border: 1px solid var(--red-dim); }
.pill-blue   { color: var(--blue);   background: var(--blue-bg);   border: 1px solid var(--blue-dim); }
.pill-purple { color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple-dim); }
.pill-muted  { color: var(--muted);  background: var(--surface);   border: 1px solid var(--border); }

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  font-family: var(--font-mono);
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 500;
  padding: .45rem .9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
  text-align: center;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--amber); color: #000; border-color: var(--amber); font-weight: 600;
}
.btn-primary:hover { background: #e39618; border-color: #e39618; color: #000; }
.btn-danger {
  background: var(--red-bg); color: var(--red); border-color: var(--red-dim);
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface); }
.btn-sm { font-size: .75rem; padding: .3rem .65rem; }
.btn-block { width: 100%; justify-content: center; }

/* a "$ command" looking button */
.btn-cmd {
  font-family: var(--font-mono);
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: .6rem 1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  display: flex; align-items: center; gap: .55rem;
  width: 100%;
}
.btn-cmd::before { content: '$'; color: var(--green); font-weight: 700; }
.btn-cmd:hover { background: var(--surface); }
.btn-cmd.amber::before { color: var(--amber); }

/* ── form fields ───────────────────────────────────────────── */
.field, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], input[type="time"], input[type="number"],
select, textarea {
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .85rem;
  padding: .55rem .7rem;
  border-radius: var(--radius);
  width: 100%;
  transition: border-color .12s;
}
.field:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--amber);
}
.field::placeholder, input::placeholder, textarea::placeholder { color: var(--dim); }
textarea.field { resize: vertical; min-height: 70px; line-height: 1.5; }
.field-row {
  display: grid; grid-template-columns: 11em 1fr; gap: .5rem 1rem;
  align-items: baseline; padding: .35rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .85rem;
}
.field-row .label {
  color: var(--muted); font-size: .78rem;
}
.field-row .label::after { content: ':'; color: var(--dim); }
.field-row .value { color: var(--text); }
.field-row:last-child { border-bottom: none; }

.input-with-prefix {
  display: flex; align-items: center; gap: .4rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 .7rem;
}
.input-with-prefix:focus-within { border-color: var(--amber); }
.input-with-prefix .prefix { color: var(--green); font-weight: 700; }
.input-with-prefix input {
  background: transparent; border: none; padding: .55rem 0; flex: 1;
}
.input-with-prefix input:focus { outline: none; }

/* ── cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}
.card-title {
  font-family: var(--font-mono); font-weight: 600; font-size: .9rem;
  display: flex; align-items: center; gap: .4rem;
}

/* ── callouts ──────────────────────────────────────────────── */
.callout {
  font-family: var(--font-mono);
  font-size: .8rem;
  border-left: 2px solid var(--amber);
  background: var(--amber-bg);
  color: var(--text);
  padding: .6rem .8rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: .75rem 0;
}
.callout.red    { border-color: var(--red);    background: var(--red-bg); }
.callout.green  { border-color: var(--green);  background: var(--green-bg); }
.callout.blue   { border-color: var(--blue);   background: var(--blue-bg); }
.callout.purple { border-color: var(--purple); background: var(--purple-bg); }

/* ── stat-style key:value bulletin list ────────────────────── */
.stats-block {
  padding: 1rem 0 .4rem;
  border-top: 1px solid var(--border);
}
.stats-block:first-of-type { border-top: none; padding-top: .2rem; }
.stats-block .sb-head {
  display: flex; gap: .5rem; align-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: .95rem;
  margin-bottom: .35rem;
}
.stats-block .sb-head .ico { font-size: 1rem; }
.stats-block.amber  .sb-head { color: var(--amber); }
.stats-block.green  .sb-head { color: var(--green); }
.stats-block.blue   .sb-head { color: var(--blue); }
.stats-block.purple .sb-head { color: var(--purple); }
.stats-block .sb-sub {
  font-size: .78rem; color: var(--muted); margin: 0 0 .5rem 1.55rem;
}
.stats-block .sb-sub::before { content: '// '; color: var(--dim); }

.kv {
  font-family: var(--font-mono); font-size: .85rem;
  padding: .15rem 0 .15rem 1.55rem;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.kv .k { color: var(--muted); }
.kv .k::after { content: ':'; color: var(--dim); }
.kv .v { color: var(--green); font-weight: 600; }
.kv .v.amber  { color: var(--amber); }
.kv .v.blue   { color: var(--blue); }
.kv .v.purple { color: var(--purple); }
.kv .v.red    { color: var(--red); }
.kv .v.text   { color: var(--text); }
.kv .delta { font-size: .78rem; color: var(--muted); }
.kv .delta.up   { color: var(--green); }
.kv .delta.down { color: var(--amber); }

/* ── horizontal bar (day-of-week style) ────────────────────── */
.hbar {
  display: grid;
  grid-template-columns: 3em 1fr 3em;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  padding: .2rem 0;
}
.hbar .hlabel {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hbar .htrack {
  height: 14px;
  background: repeating-linear-gradient(
    90deg, var(--border) 0 3px, transparent 3px 6px
  );
  border-radius: 2px;
  overflow: hidden; position: relative;
}
.hbar .hfill {
  position: absolute; inset: 0; width: var(--pct, 0%);
  background: var(--green);
}
.hbar .hfill.amber  { background: var(--amber); }
.hbar .hfill.blue   { background: var(--blue); }
.hbar .hval { color: var(--green); text-align: right; font-weight: 600; }
.hbar .hval.amber { color: var(--amber); }

/* ── contribution heatmap ──────────────────────────────────── */
.heatmap {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    ".       hmmonths"
    "hmlabs  hmgrid";
  gap: .3rem;
  font-family: var(--font-mono);
  margin: .5rem 0;
}
.heatmap .hm-months {
  grid-area: hmmonths;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  color: var(--muted); font-size: .66rem; margin-bottom: 2px;
  padding-left: 0;
}
.heatmap .hm-rowlabels {
  grid-area: hmlabs;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
  color: var(--muted); font-size: .6rem;
  line-height: 1;
  align-items: center;
}
.heatmap .hm-grid {
  grid-area: hmgrid;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9px, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.hm-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  align-self: stretch;
}
.hm-cell[data-lvl="1"] { background: rgba(91,217,138,.20); border-color: rgba(91,217,138,.25); }
.hm-cell[data-lvl="2"] { background: rgba(91,217,138,.40); border-color: rgba(91,217,138,.40); }
.hm-cell[data-lvl="3"] { background: rgba(91,217,138,.65); border-color: rgba(91,217,138,.60); }
.hm-cell[data-lvl="4"] { background: var(--green);          border-color: var(--green); }
.hm-legend {
  display: flex; align-items: center; gap: .35rem;
  font-size: .7rem; color: var(--muted); margin-top: .4rem;
  font-family: var(--font-mono);
}
.hm-legend .hm-cell { width: 11px; height: 11px; min-width: 11px; aspect-ratio: 1/1; }
.hm-caption {
  font-size: .72rem; color: var(--muted); font-family: var(--font-mono); margin-top: .3rem;
}
.hm-caption::before { content: '// '; color: var(--dim); }

/* ── scope selector (date ranges row) ──────────────────────── */
.scope-row {
  font-family: var(--font-mono);
  font-size: .78rem;
  padding: 0 0 .4rem 1.55rem;
  display: flex; gap: .55rem; flex-wrap: wrap;
}
.scope-row a {
  color: var(--muted); padding: 0; border: none;
  font-family: var(--font-mono);
}
.scope-row a.active { color: var(--amber); font-weight: 700; }
.scope-row a::before { content: '['; color: var(--dim); }
.scope-row a::after  { content: ']'; color: var(--dim); }

/* ── sig pad ───────────────────────────────────────────────── */
.sig-box {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--border-2); overflow: hidden; position: relative;
}
.sig-canvas { display: block; width: 100%; height: 180px; cursor: crosshair; touch-action: none; }
.sig-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.sig-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #999; font-size: .85rem; pointer-events: none; font-family: var(--font-sans);
}

/* ── comment thread (chat-log style) ───────────────────────── */
.chat {
  display: flex; flex-direction: column; gap: .4rem;
  font-family: var(--font-mono); font-size: .82rem;
}
.chat-line {
  background: var(--surface);
  border-left: 2px solid var(--amber);
  padding: .45rem .7rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.chat-line.client   { border-color: var(--blue); }
.chat-line.internal { border-color: var(--purple); background: var(--purple-bg); }
.chat-head {
  display: flex; gap: .4rem; flex-wrap: wrap;
  color: var(--muted); font-size: .72rem; margin-bottom: .15rem;
}
.chat-head .who {
  color: var(--amber); font-weight: 600;
}
.chat-line.client .chat-head .who { color: var(--blue); }
.chat-line.internal .chat-head .who { color: var(--purple); }
.chat-body { color: var(--text); white-space: pre-wrap; }

/* ── toasts ────────────────────────────────────────────────── */
.toasts {
  position: fixed; top: .75rem; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: .4rem;
  width: calc(100% - 2rem); max-width: 420px;
}
.toast {
  font-family: var(--font-mono); font-size: .82rem;
  background: var(--surface); border: 1px solid var(--border-2);
  border-left: 3px solid var(--amber);
  padding: .6rem .85rem; border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.toast.success { border-left-color: var(--green); }
.toast.error, .toast.warning { border-left-color: var(--red); }

/* ── standalone (login / public) ───────────────────────────── */
.standalone {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.standalone-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  width: 100%; max-width: 420px;
}
.standalone-card.wide { max-width: 640px; }
.standalone-brand {
  display: flex; align-items: center; gap: .55rem;
  margin-bottom: 1.1rem;
  justify-content: center;
}
.standalone-brand .brand-mark { width: 40px; height: 40px; }

/* ── 3-step form ───────────────────────────────────────────── */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem;
  margin: .75rem 0 1.25rem;
  font-family: var(--font-mono); font-size: .72rem;
}
.step {
  padding: .55rem .65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; gap: .4rem;
}
.step .step-num { color: var(--dim); font-weight: 700; }
.step.active {
  color: var(--amber); border-color: var(--amber); background: var(--amber-bg);
}
.step.active .step-num { color: var(--amber); }
.form-section { display: none; }
.form-section.active { display: block; }

/* parts formset row */
.parts-formset { display: flex; flex-direction: column; gap: .75rem; }
.part-row {
  display: flex; flex-direction: column; gap: .6rem;
  padding: .85rem; padding-right: 2.2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.part-row .part-label {
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--muted);
  margin-bottom: 2px;
  letter-spacing: .02em;
  display: block;
}
.part-row .part-label::before { content: '// '; color: var(--dim); }
.part-row .part-sub {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: .5rem;
}
.part-row input { font-size: .82rem; padding: .4rem .55rem; }
.part-row .delete {
  position: absolute; top: .4rem; right: .5rem;
  background: transparent; border: none; color: var(--red);
  cursor: pointer; font-size: 1.2rem; line-height: 1;
  padding: .25rem .4rem; border-radius: 4px;
}
.part-row .delete:hover { background: var(--red-bg); }
.part-row .del-checkbox {
  display: flex; align-items: center; gap: .35rem;
  font-size: .7rem; color: var(--muted);
}
@media (max-width: 480px) {
  .part-row .part-sub { grid-template-columns: 1fr 1fr; }
  .part-row .part-sub > :last-child { grid-column: 1 / -1; }
}

/* ── pixel icons (8-bit SVG glyphs) ───────────────────────── */
/* Each SVG in pixel_icon.html has explicit width/height attributes so it
   never blows up to viewport size — CSS only needs to handle colors and
   contextual sizing. */
.pico {
  display: inline-block;
  color: var(--amber);
  image-rendering: pixelated;
  vertical-align: -2px;
  flex-shrink: 0;
  /* hard cap so the SVG can never exceed these bounds regardless of markup */
  max-width: 32px;
  max-height: 32px;
}
/* Generic color classes — work on any element, not just .pico SVGs */
.ico-amber  { color: var(--amber); }
.ico-green  { color: var(--green); }
.ico-blue   { color: var(--blue); }
.ico-red    { color: var(--red); }
.ico-purple { color: var(--purple); }
.ico-muted  { color: var(--muted); }
/* Section heads have their own bump — CSS override wins over the inline SVG attrs */
.sb-head .pico, .ach-title .pico { width: 16px !important; height: 16px !important; }
/* Achievement tile icon */
.ach-icon .pico { width: 22px !important; height: 22px !important; }
/* Hero streak flame */
.hero-streak .pico { width: 14px !important; height: 20px !important; }

/* ── Gamification: hero card (level + xp + streak) ────────── */
.hero-card {
  background: linear-gradient(180deg, rgba(245,166,35,.06), transparent 80%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: .6rem 0 1rem;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  /* subtle corner pixel decoration */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--amber-dim) 2px, transparent 2px) 0 0/100% 1px no-repeat,
    linear-gradient(to right, var(--amber-dim) 2px, transparent 2px) 100% 100%/100% 1px no-repeat;
  pointer-events: none;
}
.hero-top {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1rem; align-items: center;
  margin-bottom: .75rem;
}
.hero-avatar {
  width: 54px; height: 54px;
  background: var(--bg);
  border: 2px solid var(--amber);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  color: var(--amber);
  position: relative;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--amber);
}
.hero-level {
  font-size: .55rem; font-weight: 700; letter-spacing: .1em;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.hero-level span {
  font-size: 1.5rem; font-weight: 800; letter-spacing: 0;
  margin-top: 2px; color: var(--text);
}
.hero-body { min-width: 0; }
.hero-name {
  font-family: var(--font-mono); font-weight: 600; font-size: .95rem;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-title {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  color: var(--amber); letter-spacing: .12em; margin-top: 2px;
}
.xp-meta {
  font-family: var(--font-mono); font-size: .75rem;
  color: var(--text); margin-top: 3px;
}
.xp-num { color: var(--green); font-weight: 700; }
.hero-streak {
  display: flex; flex-direction: column; align-items: center;
  padding: .35rem .5rem;
  background: var(--amber-bg);
  border: 1px solid var(--amber-dim);
  border-radius: 6px;
  min-width: 54px;
}
.hero-streak .pico { width: 16px; height: 20px; }
.streak-num {
  font-family: var(--font-mono); font-weight: 800; font-size: 1.2rem;
  color: var(--amber); line-height: 1; margin-top: 2px;
}
.streak-label {
  font-family: var(--font-mono); font-size: .6rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}

/* ── segmented XP bar (NES-style) ────────────────────────── */
.xpbar {
  --xp-pct: 0%;
  position: relative;
  height: 14px;
}
.xpbar-track {
  height: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.xpbar-fill {
  height: 100%;
  width: var(--xp-pct);
  background: linear-gradient(
    to right,
    var(--amber) 0%, var(--amber) 70%,
    rgba(255,200,90,.95) 85%, var(--amber) 100%
  );
  transition: width .45s ease-out;
}
/* ten cap-dividers draw the NES "segmented" look across the bar */
.xpbar-caps {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(10, 1fr);
  pointer-events: none;
}
.xpbar-caps .cap {
  border-right: 1px solid rgba(0,0,0,.45);
}
.xpbar-caps .cap:last-child { border-right: none; }

/* ── achievements strip ──────────────────────────────────── */
.ach-section { margin-bottom: 1rem; }
.ach-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-mono);
  padding: .35rem .1rem;
  margin-bottom: .4rem;
}
.ach-title {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--amber); font-weight: 700; font-size: .88rem;
}
.ach-count { color: var(--muted); font-size: .75rem; }
.ach-count::before { content: '// '; color: var(--dim); }

.ach-strip {
  display: flex; gap: .55rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .4rem;
  scrollbar-width: none;
}
.ach-strip::-webkit-scrollbar { display: none; }

.ach-card {
  flex: 0 0 118px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .65rem .55rem;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  font-family: var(--font-mono);
  text-align: center;
  position: relative;
}
.ach-card.unlocked {
  border-color: var(--amber-dim);
  background:
    radial-gradient(circle at top, rgba(245,166,35,.10), transparent 70%),
    var(--surface);
}
.ach-card.unlocked::before {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.ach-card.locked { opacity: .55; }
.ach-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: .15rem;
}
.ach-card.unlocked .ach-icon {
  border-color: var(--amber-dim);
  background: rgba(245,166,35,.06);
}
.ach-card .ach-icon .pico { width: 22px; height: 22px; }
.ach-card.unlocked .ach-icon .pico { color: var(--amber); }
.ach-card.locked .ach-icon .pico   { color: var(--dim); }

.ach-name {
  font-size: .72rem; font-weight: 600;
  color: var(--text);
}
.ach-card.locked .ach-name { color: var(--muted); }
.ach-desc {
  font-size: .62rem; color: var(--muted);
  line-height: 1.35;
}

/* Small screens: tighten layout */
@media (max-width: 480px) {
  .hero-avatar { width: 46px; height: 46px; }
  .hero-level span { font-size: 1.25rem; }
  .hero-top { gap: .75rem; }
  .hero-streak { min-width: 46px; padding: .3rem .4rem; }
  .ach-card { flex: 0 0 108px; }
}

/* ── console/exports: download cards ──────────────────────── */
.export-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: .55rem;
  font-family: var(--font-mono);
}
.export-card.hero {
  border-color: var(--amber-dim);
  background:
    linear-gradient(180deg, rgba(245,166,35,.06), transparent 80%),
    var(--surface);
  margin-bottom: 1rem;
}
.export-icon {
  width: 36px; height: 36px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.export-icon .pico { width: 20px !important; height: 20px !important; }
.export-card.hero .export-icon { border-color: var(--amber-dim); background: rgba(245,166,35,.06); }

.export-body { min-width: 0; }
.export-title {
  font-weight: 700; font-size: .95rem; color: var(--text);
  display: flex; gap: .35rem; align-items: baseline; flex-wrap: wrap;
}
.export-count { color: var(--muted); font-size: .72rem; font-weight: 500; }
.export-desc {
  color: var(--muted); font-size: .76rem; margin-top: 1px;
}
.export-desc::before { content: '// '; color: var(--dim); }
.export-meta {
  font-size: .68rem; color: var(--muted); margin-top: 4px;
  font-family: var(--font-mono);
}
.export-meta::before { content: '// '; color: var(--dim); }

.export-filters {
  display: flex; gap: .35rem; flex-wrap: wrap; align-items: center;
  margin-top: .55rem;
}
.export-filters .field-sm { width: auto; min-width: 100px; padding: .35rem .5rem; font-size: .78rem; }

.export-actions {
  display: flex; flex-direction: column; gap: .35rem;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .export-card {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .export-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }
  .export-filters { width: 100%; }
}

/* ── console/activity: audit timeline ─────────────────────── */
.activity-list { display: flex; flex-direction: column; gap: .35rem; }

.activity-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: .6rem;
  padding: .45rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .8rem;
  align-items: baseline;
}
.activity-row.act-green  { border-left-color: var(--green); }
.activity-row.act-red    { border-left-color: var(--red); }
.activity-row.act-amber  { border-left-color: var(--amber); }
.activity-row.act-blue   { border-left-color: var(--blue); }
.activity-row.act-purple { border-left-color: var(--purple); }
.activity-row.act-muted  { border-left-color: var(--muted); }

.act-time {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.2;
}
.act-date { font-size: .7rem; color: var(--muted); }
.act-clock { font-size: .72rem; color: var(--text); font-weight: 600; }

.act-body { min-width: 0; }
.act-top {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline;
  min-width: 0;
}
.act-actor {
  color: var(--amber); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 12em;
}
.act-verb {
  font-size: .72rem;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--text);
  font-weight: 500;
}
.activity-row.act-green  .act-verb { color: var(--green);  border-color: var(--green-dim); background: var(--green-bg); }
.activity-row.act-red    .act-verb { color: var(--red);    border-color: var(--red-dim);   background: var(--red-bg); }
.activity-row.act-amber  .act-verb { color: var(--amber);  border-color: var(--amber-dim); background: var(--amber-bg); }
.activity-row.act-blue   .act-verb { color: var(--blue);   border-color: var(--blue-dim);  background: var(--blue-bg); }
.activity-row.act-purple .act-verb { color: var(--purple); border-color: var(--purple-dim); background: var(--purple-bg); }

.act-target {
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 22em;
}
a.act-target:hover { color: var(--amber); text-decoration: none; }

.act-meta {
  margin-top: 3px;
  display: flex; gap: .6rem; flex-wrap: wrap;
  font-size: .7rem; color: var(--muted);
}
.act-meta::before { content: '// '; color: var(--dim); }
.act-kv   { color: var(--dim); }
.act-kv-v { color: var(--muted); }

@media (max-width: 480px) {
  .activity-row { grid-template-columns: 44px minmax(0, 1fr); padding: .4rem .55rem; }
  .act-actor { max-width: 8em; }
  .act-target { max-width: 14em; }
}

/* ── stats/month: calendar grid ──────────────────────────── */
.month-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .5rem 0; margin: .5rem 0 .25rem;
  font-family: var(--font-mono);
}
.month-nav .month-title {
  font-weight: 700; color: var(--amber); letter-spacing: .02em;
  font-size: .95rem;
}

.cal-month { margin: .6rem 0 .4rem; }
.cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: .3rem; font-family: var(--font-mono); font-size: .6rem;
  color: var(--muted); padding: 0 .1rem; margin-bottom: .35rem;
  text-align: center; letter-spacing: .04em;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
}
.cal-cell {
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .28rem;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
  min-height: 44px;
}
.cal-cell.muted     { opacity: .28; }
.cal-cell.today     { border-color: var(--amber); outline: 1px solid var(--amber); outline-offset: -2px; }
.cal-cell.lvl-0     { background: var(--bg-2); }
.cal-cell.lvl-1     { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.22); }
.cal-cell.lvl-2     { background: rgba(245,166,35,.26); border-color: rgba(245,166,35,.4); }
.cal-cell.lvl-3     { background: rgba(245,166,35,.5);  border-color: var(--amber-dim); }
.cal-cell.lvl-4     { background: var(--amber);         border-color: var(--amber); }
.cal-num  {
  font-size: .62rem; color: var(--muted);
  align-self: flex-end;
}
.cal-cell.today    .cal-num  { color: var(--amber); font-weight: 700; }
.cal-cell.lvl-4    .cal-num  { color: #000; font-weight: 600; }
.cal-cell.lvl-3    .cal-num  { color: var(--text); font-weight: 600; }
.cal-count {
  font-size: .95rem; font-weight: 800; color: var(--text);
  line-height: 1;
  align-self: flex-start;
}
.cal-cell.lvl-4 .cal-count { color: #000; }
.cal-dot {
  position: absolute; top: 3px; left: 3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 3px rgba(91,217,138,.6);
}
.cal-cell.lvl-4 .cal-dot { background: #0b5028; box-shadow: none; }

.cal-legend {
  display: flex; align-items: center; gap: .3rem;
  margin-top: .55rem; font-size: .65rem; color: var(--muted);
  font-family: var(--font-mono);
}
.cal-cell.demo {
  width: 14px; height: 14px; min-height: 14px;
  padding: 0; aspect-ratio: auto;
}

@media (max-width: 480px) {
  .cal-cell { padding: .2rem; min-height: 36px; }
  .cal-num { font-size: .58rem; }
  .cal-count { font-size: .82rem; }
}

/* ── donut chart ─────────────────────────────────────────── */
.donut-wrap {
  display: grid; grid-template-columns: 150px 1fr;
  gap: 1rem; align-items: center;
  padding: .5rem 0;
}
.donut-chart {
  width: 140px; height: 140px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  /* background set inline via conic-gradient */
}
.donut-hole {
  position: absolute; inset: 28px;
  background: var(--surface);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono);
}
.donut-total {
  font-size: 1.4rem; font-weight: 800; color: var(--text); line-height: 1;
}
.donut-label {
  font-size: .6rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 3px;
}

.donut-legend {
  display: flex; flex-direction: column; gap: .3rem;
  font-family: var(--font-mono); font-size: .75rem;
}
.donut-key {
  display: grid; grid-template-columns: 10px 1fr auto;
  gap: .5rem; align-items: center;
}
.dkey-dot {
  width: 10px; height: 10px; border-radius: 2px;
  display: inline-block;
}
.dkey-name { color: var(--text); }
.dkey-meta { color: var(--muted); font-size: .72rem; }

@media (max-width: 480px) {
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .donut-chart { width: 120px; height: 120px; }
  .donut-hole  { inset: 24px; }
  .donut-legend { width: 100%; }
}

/* ── stats/week: 7-day grid ───────────────────────────────── */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .4rem;
  font-family: var(--font-mono);
  margin-top: .4rem;
}
.wk-day {
  padding: .55rem .3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0;
}
.wk-day.today {
  border-color: var(--amber);
  background: linear-gradient(180deg, rgba(245,166,35,.10), rgba(245,166,35,.04));
  box-shadow: 0 0 0 1px var(--amber-dim);
}
.wk-day.past { }
.wk-day.future { opacity: .45; }

.wk-dow {
  color: var(--muted); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.wk-day.today .wk-dow { color: var(--amber); font-weight: 600; }

.wk-num {
  color: var(--text); font-weight: 700; font-size: .95rem;
}
.wk-day.today .wk-num { color: var(--amber); }
.wk-day.future .wk-num { color: var(--muted); }

.wk-count {
  font-size: 1.4rem; font-weight: 800; color: var(--text);
  margin-top: 4px; line-height: 1;
}
.wk-day.today .wk-count { color: var(--amber); }
.wk-day.future .wk-count { color: var(--dim); }
.wk-day:not(.today):not(.future) .wk-count { color: var(--text); }

.wk-label {
  color: var(--muted); font-size: .56rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.wk-hours   { color: var(--green);  font-size: .65rem; font-weight: 600; margin-top: 3px; }
.wk-pending { color: var(--amber);  font-size: .6rem; }
.wk-approved{ color: var(--green);  font-size: .6rem; }

@media (max-width: 520px) {
  .week-grid { gap: .25rem; }
  .wk-day { padding: .4rem .2rem; }
  .wk-count { font-size: 1.15rem; }
  .wk-label { font-size: .52rem; }
  .wk-hours, .wk-pending, .wk-approved { font-size: .56rem; }
}

/* goal-hit xp bar recolors green */
.xpbar.xp-done .xpbar-fill {
  background: linear-gradient(
    to right,
    var(--green) 0%, var(--green) 70%,
    rgba(130,255,175,.95) 85%, var(--green) 100%
  );
}

/* stats-block.blue head accent */
.stats-block.blue .sb-head { color: var(--blue); }

/* today-highlight on hours-per-day bar */
.hbar .hfill.amber { background: var(--amber); }

/* ── stats/reports: deep-dive view ────────────────────────── */
.stats-block.red .sb-head { color: var(--red); }

/* Summary strip at top of reports tab */
.rep-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: .5rem;
  margin: .75rem 0 1rem;
}
.rep-sum-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .7rem;
  text-align: center;
  font-family: var(--font-mono);
}
.rep-sum-card.warn {
  border-color: var(--red-dim);
  background: rgba(239,90,90,.04);
}
.rep-sum-num {
  font-size: 1.55rem; font-weight: 800; color: var(--text);
  line-height: 1;
}
.rep-sum-lbl {
  font-size: .62rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 3px;
}
.rep-sum-sub {
  font-size: .6rem; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.rep-sum-sub.red { color: var(--red); }

/* Pending debt rows — color-coded by age */
.debt-list { display: flex; flex-direction: column; gap: .4rem; }
.debt-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: .6rem; align-items: center;
  padding: .5rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .82rem;
}
.debt-row.debt-green { border-left-color: var(--green); }
.debt-row.debt-amber { border-left-color: var(--amber); background: rgba(245,166,35,.03); }
.debt-row.debt-red   { border-left-color: var(--red);   background: rgba(239,90,90,.06); }
.debt-age {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
}
.debt-days { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.debt-row.debt-green .debt-days { color: var(--green); }
.debt-row.debt-amber .debt-days { color: var(--amber); }
.debt-row.debt-red   .debt-days { color: var(--red); }
.debt-label {
  font-size: .58rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 3px;
}
.debt-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.debt-id {
  color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.debt-id:hover { color: var(--amber); text-decoration: none; }
.debt-sub {
  color: var(--muted); font-size: .72rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.debt-sub::before { content: '// '; color: var(--dim); }

/* Fastest-approvals leaderboard */
.leader-list { display: flex; flex-direction: column; gap: .35rem; }
.leader-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: .6rem; align-items: center;
  padding: .45rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .82rem;
}
.leader-row.rank-1 {
  border-color: var(--amber-dim);
  background:
    radial-gradient(circle at 20px center, rgba(245,166,35,.12), transparent 70%),
    var(--surface);
}
.leader-rank {
  text-align: center;
  font-size: 1.1rem;
  color: var(--muted);
}
.leader-row.rank-1 .leader-rank,
.leader-row.rank-2 .leader-rank,
.leader-row.rank-3 .leader-rank {
  filter: drop-shadow(0 0 4px rgba(245,166,35,.4));
}
.leader-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.leader-id { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-id:hover { color: var(--amber); text-decoration: none; }
.leader-sub { color: var(--muted); font-size: .72rem; }
.leader-sub::before { content: '// '; color: var(--dim); }
.leader-turn {
  font-family: var(--font-mono); font-weight: 700;
  color: var(--green); font-size: .9rem; white-space: nowrap;
}

/* Per-client performance table */
table.data.client-perf th.num,
table.data.client-perf td.num { text-align: right; }
table.data.client-perf td.num.green  { color: var(--green); }
table.data.client-perf td.num.red    { color: var(--red); }
table.data.client-perf td.num.amber  { color: var(--amber); }
table.data.client-perf td.num .green { color: var(--green); }
table.data.client-perf td.num .red   { color: var(--red); }
table.data.client-perf td.num .amber { color: var(--amber); }

/* Service type groups (bars with longer text labels need a wider label col) */
.type-group + .type-group { margin-top: .7rem; }
.type-group .hbar {
  grid-template-columns: 8.5em minmax(0, 1fr) 3.5em;
  gap: .6rem;
}
.type-group .hbar .hlabel { font-size: .8rem; }
.type-sub {
  font-family: var(--font-mono); font-size: .7rem;
  color: var(--muted); margin: 4px 0 0 calc(8.5em + .6rem);
}
.type-sub::before { content: '// '; color: var(--dim); }
@media (max-width: 480px) {
  .type-group .hbar { grid-template-columns: 6em minmax(0, 1fr) 3em; }
  .type-sub { margin-left: calc(6em + .6rem); }
}

/* Rejection rows */
.reject-row {
  background: var(--red-bg);
  border: 1px solid var(--red-dim);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: .55rem .75rem;
  margin-bottom: .4rem;
}
.reject-head {
  display: flex; gap: .5rem; align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--muted); margin-bottom: .25rem;
}
.reject-id { color: var(--text); font-weight: 600; }
.reject-id:hover { color: var(--amber); text-decoration: none; }
.reject-client { color: var(--muted); }
.reject-date { margin-left: auto; font-size: .72rem; color: var(--dim); }
.reject-reason {
  font-family: var(--font-mono); font-size: .8rem;
  color: var(--text);
  white-space: pre-wrap;
}

@media (max-width: 480px) {
  .rep-summary { grid-template-columns: repeat(2, 1fr); }
  .debt-row { grid-template-columns: 48px 1fr auto; }
  .leader-row { grid-template-columns: 34px 1fr auto; }
}

/* ── attachments ──────────────────────────────────────────── */
.file-drop {
  display: block;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.file-drop:hover, .file-drop.drag-over {
  background: var(--surface-2); border-color: var(--amber);
}
.file-drop-inner {
  padding: 1.1rem 1rem;
  text-align: center;
  display: flex; flex-direction: column; gap: .3rem; align-items: center;
  font-family: var(--font-mono); color: var(--muted); font-size: .82rem;
}
.file-drop-inner .file-drop-ico { font-size: 1.6rem; }
.file-drop.file-drop-sm .file-drop-inner { padding: .75rem .85rem; }

.attach-list { display: flex; flex-direction: column; gap: .35rem; }
.attach-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .82rem;
}
.attach-row.attach-pill {
  cursor: pointer;
  grid-template-columns: auto 26px 1fr auto;
}
.attach-row.attach-pill:has(input[type=checkbox]:checked) {
  background: var(--red-bg); border-color: var(--red-dim);
}
.attach-ico { font-size: 1rem; line-height: 1; }
.attach-body {
  min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.attach-name {
  color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.attach-name:hover { color: var(--amber); }
.attach-sub {
  color: var(--muted); font-size: .72rem;
}
.attach-sub::before { content: '// '; color: var(--dim); }
.attach-act { font-family: var(--font-mono); font-size: .7rem; }

.attach-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
}
.attach-thumb-wrap {
  display: flex; flex-direction: column; gap: .25rem;
}
.attach-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.attach-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .15s;
}
.attach-thumb:hover img { transform: scale(1.03); }
.attach-thumb-cap {
  font-family: var(--font-mono); font-size: .7rem;
  color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
  gap: .35rem;
  overflow: hidden;
}
.attach-thumb-cap span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-thumb-del {
  background: transparent; border: 1px solid var(--border);
  color: var(--red); cursor: pointer;
  padding: 0 .3rem; border-radius: 3px;
  font-size: .85rem; line-height: 1;
  font-family: var(--font-mono);
}
.attach-thumb-del:hover { background: var(--red-bg); border-color: var(--red-dim); }

@media (max-width: 480px) {
  .attach-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ── helpers ───────────────────────────────────────────────── */
.row   { display: flex; align-items: center; gap: .75rem; }
.row.between { justify-content: space-between; }
.row.wrap    { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: .5rem; }
.mt    { margin-top: .75rem; }
.mt-2  { margin-top: 1.5rem; }
.mb    { margin-bottom: .75rem; }
.mb-2  { margin-bottom: 1.5rem; }
.ml-mono { padding-left: 1.55rem; } /* align under section icons */
.muted { color: var(--muted); }
.small { font-size: .75rem; }
.mono  { font-family: var(--font-mono); }
.amber { color: var(--amber); }
.green { color: var(--green); }
.blue  { color: var(--blue); }
.purple{ color: var(--purple); }
.red   { color: var(--red); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
h1, h2, h3 { font-family: var(--font-mono); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.1rem; margin: .4rem 0; }
h2 { font-size: 1rem;   margin: .6rem 0 .4rem; }
h3 { font-size: .85rem; color: var(--muted); margin: .4rem 0 .25rem; font-weight: 600; }
p  { font-family: var(--font-sans); font-size: .88rem; margin-bottom: .55rem; line-height: 1.55; color: var(--text); }

/* a bit of space after content */
.content-end { height: 3rem; }

/* ── responsive (desktop just widens the shell, no restructure) ─ */
@media (min-width: 760px) {
  html { font-size: 15px; }
  .app { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
  .app.wide { padding: 0 2rem; }
}

/* ── print basic cleanup ───────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .tabs, .toasts, .btn, button { display: none !important; }
}


/* ── console/users · role changer row ─────────────────────── */
/* users list row — inherits the standard 4-col row-item grid */
.user-row {
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
}
.user-actions {
  display: inline-flex; align-items: center; gap: .35rem;
}

/* ══════════════════════════════════════════════════════════════
   Inbox · quick-add bar
   ══════════════════════════════════════════════════════════════ */
.quickadd {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  padding: 0;
  margin: .4rem 0 .1rem;
  transition: border-color .12s, background .12s;
}
.quickadd:focus-within {
  border-color: var(--amber);
  background: rgba(245,166,35,.05);
}
.quickadd .qa-prompt {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .55rem;
  font-family: var(--font-mono); font-weight: 700; color: var(--amber);
  border-right: 1px dashed rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.quickadd .qa-input {
  flex: 1; min-width: 0;
  padding: .55rem .7rem;
  background: transparent; border: none; outline: none;
  color: var(--text);
  font-family: var(--font-mono); font-size: .95rem;
}
.quickadd .qa-input::placeholder { color: var(--muted); }
.quickadd .qa-go {
  padding: 0 .9rem;
  background: transparent;
  border: none; border-left: 1px dashed rgba(255,255,255,.08);
  color: var(--amber);
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.quickadd .qa-go:hover { background: rgba(245,166,35,.15); }

.qa-help {
  font-size: .7rem;
  margin-bottom: .8rem;
}
.qa-help code {
  font-family: var(--font-mono); font-size: .7rem;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  color: var(--amber);
  margin: 0 .15rem;
}

/* ══════════════════════════════════════════════════════════════
   App launcher · /launcher/ · post-login grid of app tiles
   ══════════════════════════════════════════════════════════════ */
.launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
  margin: .75rem 0;
}
.app-tile {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.1rem 1rem;
  min-height: 140px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  color: var(--text);
  text-decoration: none;
  transition: border-color .12s, background .12s, transform .12s;
  position: relative;
}
.app-tile:hover {
  border-color: var(--amber);
  background: rgba(245,166,35,.06);
  text-decoration: none;
  transform: translateY(-1px);
}
.app-tile.disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}
.app-tile-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .1rem;
}
.app-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}
.app-tile-icon .pico { width: 18px !important; height: 18px !important; }
.app-tile-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.app-tile-tagline {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
  flex: 1;
}
.app-tile-status {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: .1rem .4rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.app-tile-status.live { color: var(--green); border: 1px solid rgba(91,217,138,.5); }
.app-tile-status.soon { color: var(--muted); border: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════
   Avatar icon picker (profile pages)
   ══════════════════════════════════════════════════════════════ */
.avatar-picker { margin: .4rem 0 .75rem; }
.avatar-current {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  margin-bottom: .5rem;
}
.avatar-big {
  width: 48px; height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.avatar-big .pico { width: 32px !important; height: 32px !important; }
.avatar-caption { display: flex; flex-direction: column; gap: .15rem; }
.avatar-caption .avatar-label {
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}

.avatar-color-row {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .72rem;
  margin: .4rem 0;
}
.avatar-color-row .avatar-color-label { color: var(--muted); margin-right: .2rem; }
.avatar-color {
  width: 22px; height: 22px;
  border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer;
  background: currentColor;
  opacity: .55; transition: opacity .12s, border-color .12s, transform .12s;
}
.avatar-color:hover { opacity: .85; }
.avatar-color.active { opacity: 1; border-color: var(--text); transform: scale(1.1); }

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  margin-bottom: .4rem;
}
.avatar-tile {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  color: var(--muted);
  transition: color .1s, background .1s, border-color .1s;
}
.avatar-tile:hover { color: var(--amber); background: rgba(245,166,35,.08); }
.avatar-tile.active {
  color: var(--amber);
  border-color: var(--amber);
  background: rgba(245,166,35,.12);
}
.avatar-tile .pico { width: 20px !important; height: 20px !important; }

.avatar-clear-row { display: flex; justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════
   Broadcast banners (base/layout.html · above .tabs)
   ══════════════════════════════════════════════════════════════ */
.broadcasts { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0 .6rem; }

.bcast {
  display: flex; align-items: flex-start; gap: .6rem;
  border: 1px solid var(--border, #2a2f3d);
  background: rgba(245, 166, 35, 0.06);
  padding: .55rem .7rem; border-radius: 4px;
  position: relative;
}
.bcast-info     { border-color: #4a80c8; background: rgba(74, 128, 200, .08); }
.bcast-warning  { border-color: var(--amber); background: rgba(245, 166, 35, .10); }
.bcast-critical { border-color: #e25b5b; background: rgba(226, 91, 91, .12); }

.bcast-body { flex: 1 1 auto; min-width: 0; }
.bcast-head { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .2rem; }
.bcast-tag  { font-family: var(--mono); font-size: .75rem; opacity: .7; text-transform: uppercase; }
.bcast-subject { font-weight: 700; color: var(--fg, #e6e7eb); }
.bcast-text { font-size: .88rem; color: var(--fg-dim, #cfd3dc); line-height: 1.4; }
.bcast-meta { font-family: var(--mono); font-size: .72rem; opacity: .55; margin-top: .25rem; }

.bcast-dismiss-form { flex: 0 0 auto; margin: 0; }
.bcast-dismiss {
  background: transparent; border: 1px solid transparent;
  color: var(--fg-dim, #9aa0ae); font-size: 1.1rem; line-height: 1;
  padding: .15rem .4rem; cursor: pointer; border-radius: 3px;
}
.bcast-dismiss:hover { background: rgba(255,255,255,.06); color: var(--fg, #fff); border-color: var(--border, #2a2f3d); }


/* ══════════════════════════════════════════════════════════════
   Console · settings form + broadcast list
   ══════════════════════════════════════════════════════════════ */
.settings-form .stats-block { margin-bottom: .75rem; }

.set-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: .5rem 1rem;
  align-items: center;
  padding: .4rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.05);
}
.set-row:last-child { border-bottom: none; }
.set-row .set-k {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--fg-dim, #9aa0ae);
}
.set-row .set-v { display: flex; align-items: center; gap: .5rem; }
.set-row .set-v .field { max-width: 14rem; }
.set-row .set-hint {
  grid-column: 2 / -1;
  font-family: var(--mono);
  font-size: .72rem;
  opacity: .55;
  margin-top: -.15rem;
}
.set-row .checkbox-row { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); }
.set-row .checkbox-row input[type="checkbox"] { width: 1rem; height: 1rem; }

.swatch-row { display: inline-flex; align-items: center; gap: .6rem; }
.swatch {
  display: inline-block; width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.field.field-color {
  width: 60px !important; height: 32px !important;
  padding: 2px !important;
  cursor: pointer;
}

.form-actions {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: .75rem;
}

/* Broadcast list (/console/broadcasts/) */
.bcast-toolbar { margin: .4rem 0 .75rem; }
.bcast-list { display: flex; flex-direction: column; gap: .5rem; }
.bcast-row {
  border: 1px solid var(--border, #2a2f3d);
  background: rgba(255,255,255,.02);
  padding: .55rem .7rem;
  border-radius: 4px;
}
.bcast-row-info     { border-left: 3px solid #4a80c8; }
.bcast-row-warning  { border-left: 3px solid var(--amber); }
.bcast-row-critical { border-left: 3px solid #e25b5b; }

.bcast-row-head {
  display: flex; gap: .5rem; align-items: center;
  flex-wrap: wrap; margin-bottom: .2rem;
}
.bcast-row .bcast-tag { font-family: var(--mono); font-size: .72rem; opacity: .7; text-transform: uppercase; }
.bcast-row .bcast-aud { font-family: var(--mono); font-size: .72rem; color: var(--fg-dim, #9aa0ae); }
.bcast-when { margin-left: auto; }
.bcast-row-subj { font-weight: 700; margin-bottom: .2rem; }
.bcast-row-body { font-size: .88rem; color: var(--fg-dim, #cfd3dc); line-height: 1.4; }
.bcast-row-meta { margin-top: .25rem; opacity: .55; }

/* Pills (reused by broadcast list) */
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  padding: .08rem .4rem;
  border-radius: 2px;
  text-transform: lowercase;
  border: 1px solid rgba(255,255,255,.12);
}
.pill-green  { color: var(--green); border-color: rgba(91, 217, 138, .45); }
.pill-amber  { color: var(--amber); border-color: rgba(245, 166, 35, .45); }
.pill-blue   { color: #7ab2ff;     border-color: rgba(122, 178, 255, .45); }
.pill-grey   { color: #888;        border-color: rgba(136, 136, 136, .35); }

/* ==========================================================
   Inbox · Tier 4a bulk-action selection
   ----------------------------------------------------------
   Each bulkable row sprouts a checkbox to its left.  The
   sticky footer (#inbox-bulk-form) toggles visible when any
   .bulk-cb is :checked — JS sets the [hidden] attr, the CSS
   here gives the bar its look and the selected row its tint.
   ========================================================== */
.row-item.row-bulkable {
  position: relative;
}
.bulk-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: .25rem .45rem 0 0;
  border: 1px solid rgba(245, 166, 35, .55);
  border-radius: 2px;
  background: rgba(20, 24, 33, .6);
  cursor: pointer;
  vertical-align: top;
  flex-shrink: 0;
  transition: background .1s, border-color .1s;
}
.bulk-cb:hover { border-color: var(--amber); }
.bulk-cb:checked {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: inset 0 0 0 2px #0f1117;
}
.bulk-cb:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.row-item.row-bulkable:has(.bulk-cb:checked) {
  background: rgba(245, 166, 35, .06);
  box-shadow: inset 3px 0 0 var(--amber);
}

.bulk-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  margin: 0;
  padding: 0;
  background: #0f1117;
  border-top: 1px solid var(--amber);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
  animation: bulk-slide-up .18s ease-out;
}
.bulk-bar[hidden] { display: none !important; }
.bulk-bar-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: .55rem .9rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.bulk-count {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--amber);
  font-weight: 700;
  letter-spacing: .02em;
}
.bulk-actions {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-left: auto;
}

@keyframes bulk-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Leave breathing room so the sticky bar doesn't cover the
   last row when the user scrolls all the way to the bottom. */
body:has(.bulk-bar:not([hidden])) {
  padding-bottom: 4.5rem;
}

/* ==========================================================
   Inbox · Tier 4b Kanban board
   ----------------------------------------------------------
   Four equal columns with a scrollable body each.  Cards are
   draggable; drop zones highlight when a card is hovered.
   ========================================================== */
.kb-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin-top: .8rem;
}
@media (max-width: 1100px) {
  .kb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .kb-board { grid-template-columns: 1fr; }
}

.kb-col {
  background: rgba(20, 24, 33, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  border-top: 2px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  transition: background .15s, border-color .15s;
}
.kb-col-blue   { border-top-color: #7ab2ff; }
.kb-col-amber  { border-top-color: var(--amber); }
.kb-col-green  { border-top-color: var(--green); }
.kb-col-grey   { border-top-color: #888; }
.kb-col.is-over {
  background: rgba(245, 166, 35, .10);
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
}

.kb-col-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--mono);
}
.kb-col-head .title {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kb-col-blue  .kb-col-head .title { color: #7ab2ff; }
.kb-col-amber .kb-col-head .title { color: var(--amber); }
.kb-col-green .kb-col-head .title { color: var(--green); }
.kb-col-grey  .kb-col-head .title { color: #aaa; }
.kb-col-head .count {
  font-size: .72rem;
  opacity: .65;
  margin-left: auto;
}

.kb-col-body {
  flex: 1 1 auto;
  padding: .4rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 70vh;
  overflow-y: auto;
}
.kb-col-foot {
  padding: .3rem .6rem .45rem;
  font-size: .7rem;
  opacity: .55;
  text-align: center;
  font-family: var(--mono);
}

.kb-card {
  background: #151923;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 3px;
  padding: .45rem .55rem;
  cursor: grab;
  transition: transform .08s, box-shadow .1s, border-color .1s;
  position: relative;
}
.kb-card:hover {
  border-color: rgba(245, 166, 35, .4);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}
.kb-card:active { cursor: grabbing; }
.kb-card.is-dragging {
  opacity: .45;
  outline: 1px dashed var(--amber);
}

.kb-card-head {
  display: flex;
  align-items: baseline;
  gap: .35rem;
}
.kb-card-title {
  color: var(--fg, #e8ecf4);
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.3;
  text-decoration: none;
  flex: 1 1 auto;
  word-break: break-word;
}
.kb-card-title:hover { color: var(--amber); }

.kb-card-meta {
  margin-top: .25rem;
  font-family: var(--mono);
  font-size: .72rem;
  opacity: .7;
  line-height: 1.35;
}
.kb-card-meta .sub { color: var(--fg-dim, #9aa0ae); }

.kb-card-tail {
  margin-top: .3rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.kb-card-tail:empty { display: none; }

.kb-empty {
  padding: 1rem .5rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--fg-dim, #9aa0ae);
  opacity: .55;
  font-style: italic;
}

.kb-toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 80;
  padding: .5rem .8rem;
  font-family: var(--mono);
  font-size: .82rem;
  border-radius: 3px;
  background: #0f1117;
  border: 1px solid rgba(255, 255, 255, .12);
  animation: kb-toast-in .15s ease-out;
}
.kb-toast.ok  { border-color: var(--green); color: var(--green); }
.kb-toast.err { border-color: #e25b5b;      color: #e25b5b; }
.kb-toast[hidden] { display: none !important; }

@keyframes kb-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ==========================================================
   Inbox · Tier 4c lightweight markdown in replies & bodies
   ---------------------------------------------------------- */
.md strong { color: #fff; font-weight: 700; }
.md em     { color: var(--amber); font-style: italic; }
.md code {
  font-family: var(--mono);
  font-size: .85em;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .06);
  color: #ffd27a;
  border: 1px solid rgba(255, 255, 255, .08);
}
.md pre {
  margin: .35rem 0;
  padding: .5rem .65rem;
  background: #0b0d14;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid var(--amber);
  border-radius: 3px;
  overflow-x: auto;
}
.md pre code {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg, #e8ecf4);
  font-size: .82em;
  line-height: 1.45;
  white-space: pre;
}
.md a {
  color: #7ab2ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md a:hover { color: var(--amber); }
.md .md-ul {
  margin: .2rem 0 .35rem 1rem;
  padding: 0;
  list-style-type: disc;
}
.md .md-ul li { margin: .08rem 0; line-height: 1.4; }

/* Inline <code> tokens inside the reply helper line under the textarea */
.comment code {
  font-family: var(--mono);
  font-size: .85em;
  padding: 0 4px;
  background: rgba(255, 255, 255, .05);
  border-radius: 2px;
  color: #ffd27a;
}

/* ==========================================================
   Error pages (404.html, and inline fallback on 500)
   ========================================================== */
.err-panel {
  max-width: 520px;
  margin: 2.5rem auto;
  padding: 1.6rem 1.5rem;
  background: #151923;
  border: 1px solid rgba(255, 255, 255, .08);
  border-top: 2px solid var(--amber);
  border-radius: 4px;
}
.err-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .3rem;
}
.err-code {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--amber);
  font-weight: 700;
}
.err-title {
  margin: 0 0 .7rem;
  font-size: 1.4rem;
  letter-spacing: .02em;
}
.err-body {
  line-height: 1.55;
  color: var(--fg-dim, #cfd3dc);
}
.err-body code {
  background: rgba(255, 255, 255, .06);
  padding: 1px 5px;
  border-radius: 2px;
  color: #ffd27a;
  font-family: var(--mono);
}
.err-hint {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--fg-dim, #7a8099);
}
.err-hint a { color: #7ab2ff; text-decoration: underline; }
.err-hint a:hover { color: var(--amber); }




/* ==========================================================
   Users app — bulk checkbox + activity feed
   ========================================================== */

/* Bulk checkbox column */
.bulk-check {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 .25rem;
}
.bulk-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--amber);
  cursor: pointer;
}

/* Activity feed on user detail */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: .35rem;
  max-height: 360px;
  overflow-y: auto;
}
.feed-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
  flex-wrap: wrap;
}
.feed-row:last-child { border-bottom: none; }
.feed-label {
  flex: 1;
  font-size: .84rem;
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.feed-label:hover { color: var(--amber); }
.feed-ts {
  font-size: .76rem;
  white-space: nowrap;
}


/* ==========================================================
   Global fixed beacon — REPORT WARN + INBOX
   Visible on every authenticated page (non-client).
   Fixed right-side strip, hidden on mobile.
   ========================================================== */
.global-beacon {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1rem .45rem;
  background: var(--bg, #0b0d14);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-left: none;
  border-radius: 0 8px 8px 0;
}
@media (max-width: 900px) {
  /* On mobile: float beacon top-right, below the brand bar, icons-only */
  .global-beacon {
    left: auto;
    right: 0;
    top: calc(max(.4rem, env(safe-area-inset-top, .4rem)) + 5.2rem);
    bottom: auto;
    transform: none;
    flex-direction: column;
    gap: .4rem;
    padding: .5rem .45rem;
    border-left: 1px solid var(--border, rgba(255,255,255,.1));
    border-right: none;
    border-top: 1px solid var(--border, rgba(255,255,255,.1));
    border-bottom: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 8px 0 0 8px;
    opacity: .82;
  }
  .global-beacon:hover { opacity: 1; }
  .gb-label  { display: none; }   /* hide text labels — icons only */
  .gb-divider {
    width: 80%;
    height: 1px;
  }
  /* slightly smaller icons on mobile */
  .gb-icon {
    width: 30px;
    height: 30px;
  }
}

/* shared item wrapper */
.gb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .28rem;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* labels */
.gb-label {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  line-height: 1.3;
}
.gb-label-inbox.active { color: var(--amber, #f5a623); }
.gb-label-inbox.idle   { color: var(--muted, rgba(255,255,255,.5)); opacity: .75; }

/* icon boxes */
.gb-icon {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .15s, border-color .15s;
}

/* ok / clear state */
.gb-label-ok { color: var(--green, #5bd98a); opacity: .8; }
.gb-icon-ok {
  border: 1px solid rgba(91,217,138,.3);
  background: rgba(91,217,138,.08);
  color: var(--green, #5bd98a);
}

/* warn state */
.gb-label-warn { color: #ff4136; }
.gb-icon-warn {
  border: 1px solid rgba(255,65,54,.4);
  background: rgba(255,65,54,.1);
  color: #ff4136;
  animation: gb-warn-pulse 1.8s ease-in-out infinite;
}
.gb-item.gb-warn .gb-label {
  color: #ff4136;
  animation: gb-warn-fade 1.8s ease-in-out infinite;
}
.gb-icon-warn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  border: 1px solid rgba(255,65,54,.45);
  animation: gb-ring 1.8s ease-in-out infinite;
}
.gb-icon-warn::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 8px;
  border: 1px solid rgba(255,65,54,.18);
  animation: gb-ring 1.8s ease-in-out infinite .18s;
}

/* inbox idle */
.gb-icon-inbox {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.35);
}

/* inbox new */
.gb-icon-inbox-new {
  border: 1px solid rgba(245,166,35,.45);
  background: rgba(245,166,35,.12);
  color: var(--amber, #f5a623);
  animation: gb-inbox-pulse 2s ease-in-out infinite;
}
.gb-item.gb-inbox-new .gb-icon-inbox-new::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  border: 1px solid rgba(245,166,35,.4);
  animation: gb-ring 2s ease-in-out infinite;
}
.gb-item.gb-inbox-new .gb-icon-inbox-new::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 8px;
  border: 1px solid rgba(245,166,35,.14);
  animation: gb-ring 2s ease-in-out infinite .2s;
}

/* count badges */
.gb-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ff4136;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gb-count-amber { background: var(--amber, #f5a623); color: #0b0d14; }

/* divider */
.gb-divider {
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,.07);
}

/* hover lift */
.gb-item:hover .gb-icon { opacity: .8; transform: scale(1.05); }

/* keyframes */
@keyframes gb-warn-pulse {
  0%, 100% { background: rgba(255,65,54,.08); box-shadow: none; }
  50%       { background: rgba(255,65,54,.22); box-shadow: 0 0 8px 2px rgba(255,65,54,.25); }
}
@keyframes gb-inbox-pulse {
  0%, 100% { background: rgba(245,166,35,.08); box-shadow: none; }
  50%       { background: rgba(245,166,35,.22); box-shadow: 0 0 8px 2px rgba(245,166,35,.25); }
}
@keyframes gb-warn-fade {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}
@keyframes gb-ring {
  0%   { opacity: 0; transform: scale(.82); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}

/* ─── User performance KPI block (v92) ───────────────────────────── */
.perf-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.perf-header {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .9rem .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.perf-period { font-weight: 400; margin-left: auto; font-size: .72rem; }

.perf-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 780px) {
  .perf-metrics { grid-template-columns: repeat(2, 1fr); }
}
.perf-metric {
  padding: .85rem .9rem;
  border-right: 1px solid var(--border);
}
.perf-metric:last-child { border-right: none; }
.perf-metric-num {
  font-family: var(--font-mono);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .25rem;
}
.perf-metric-unit { font-size: .85rem; font-weight: 400; }
.perf-metric-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
  margin-bottom: .3rem;
}
.perf-metric-sub { font-size: .74rem; color: var(--fg-muted); margin-top: .15rem; }
.perf-delta { font-weight: 700; font-size: .76rem; }
.perf-delta.up   { color: var(--green); }
.perf-delta.down { color: var(--red); }

.perf-bar-wrap {
  display: flex;
  height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
  margin-top: .45rem;
}
.perf-bar { height: 100%; transition: width .3s; border-radius: 3px; }
.perf-bar-green  { background: var(--green); }
.perf-bar-amber  { background: var(--amber); }
.perf-bar-red    { background: var(--red); }
.perf-bar-blue   { background: #4a9eff; }

/* 6-month bar chart */
.perf-chart-section {
  padding: .7rem .9rem .6rem;
  border-bottom: 1px solid var(--border);
}
.perf-chart-label { font-size: .72rem; margin-bottom: .5rem; }
.perf-bars-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}
.perf-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.perf-col-bar-wrap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 3px; height: 64px;
}
.perf-col-count {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  color: var(--fg); min-height: 12px;
}
.perf-col-bar {
  width: 100%; min-height: 3px; background: var(--amber);
  border-radius: 3px 3px 1px 1px; opacity: .8; transition: height .3s;
}
.perf-col-label { font-size: .68rem; color: var(--fg-muted); text-align: center; }

/* secondary chips */
.perf-chips { display: flex; gap: 0; }
.perf-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: .55rem .5rem; gap: .15rem;
  border-right: 1px solid var(--border); text-align: center;
}
.perf-chip:last-child { border-right: none; }
.perf-chip-val { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; color: var(--fg); }
.perf-chip .muted { font-size: .7rem; }

/* colour helpers (shared) */
.col-green  { color: var(--green); }
.col-amber  { color: var(--amber); }
.col-red    { color: var(--red); }
.col-blue   { color: #4a9eff; }
.col-purple { color: #a78bfa; }

/* feed improvements */
.feed-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-ts    { white-space: nowrap; flex-shrink: 0; }

/* ── shared frozen-glass surfaces ─────────────────────────── */
.card,
.standalone-card,
.hero-card,
.ach-card,
.rep-sum-card,
.kpi-card,
.export-card,
.ops-panel,
.ops-page .section,
.ops-metric,
.ops-dashboard .day-nav,
.queue-column,
.queue-record-card,
.err-panel {
  background: rgba(10, 13, 18, .50) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  border-color: rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 16px 38px rgba(0,0,0,.18);
}

@media (prefers-reduced-transparency: reduce) {
  .card,
  .standalone-card,
  .hero-card,
  .ach-card,
  .rep-sum-card,
  .kpi-card,
  .export-card,
  .ops-panel,
  .ops-page .section,
  .ops-metric,
  .ops-dashboard .day-nav,
  .queue-column,
  .queue-record-card,
  .err-panel {
    background: rgba(10, 13, 18, .94) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ── BAEK / OPS global header ─────────────────────────────── */
.brand-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 54px;
  gap: .5rem;
  padding-inline: 0;
  padding-bottom: .45rem;
  padding-top: max(.45rem, env(safe-area-inset-top));
  background: rgba(3, 4, 7, .50);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.brand-link { min-width: 0; gap: .55rem; padding: .2rem; }
.brand-mark-frame {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border: 1px solid rgba(241,90,60,.75);
  border-radius: 5px;
  background: rgba(241,90,60,.1);
}
.brand-mark {
  width: 25px; height: 25px;
  border-radius: 3px;
  filter: invert(1) brightness(1.25);
}
.brand-lockup { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.brand-word { font-size: .92rem; letter-spacing: .09em; }
.brand-ops { color: #f15a3c; font-weight: 800; font-size: .8rem; letter-spacing: .08em; }
.brand-divider { width: 1px; height: 18px; background: rgba(255,255,255,.16); margin: 0 .15rem; }
.brand-location {
  min-width: 0; max-width: 13rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: .72rem; letter-spacing: .03em;
}
.apps-btn, .account-btn {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 5px;
}
.apps-btn { padding: .35rem .55rem; font-weight: 700; letter-spacing: .05em; }
.apps-btn:hover, .apps-btn:focus-visible,
.apps-btn[aria-expanded="true"] { border-color: var(--border); background: var(--surface); outline: none; }
.apps-popover {
  min-width: 310px; max-height: min(72vh, 620px); overflow-y: auto;
  background: #090c0e; border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 32px rgba(0,0,0,.72), 0 0 0 1px rgba(245,166,35,.1);
}
.apps-popover-group + .apps-popover-group { margin-top: .45rem; }
.apps-popover-group-label {
  margin: 0; padding: .35rem .45rem .2rem;
  color: var(--muted); font-size: .58rem; font-weight: 800;
  letter-spacing: .13em;
}
.brand-environment {
  flex: 0 0 auto; padding: .17rem .42rem;
  border: 1px solid rgba(245,166,35,.55); border-radius: 999px;
  color: var(--amber); background: rgba(245,166,35,.08);
  font-size: .58rem; font-weight: 800; letter-spacing: .1em;
}
.account-menu { position: relative; }
.account-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .5rem;
  background: transparent; color: var(--text);
  font-family: var(--font-mono); cursor: pointer;
}
.account-btn:hover, .account-btn:focus-visible,
.account-btn[aria-expanded="true"] { border-color: var(--border); background: var(--surface); outline: none; }
.account-btn .pico { width: 14px; height: 14px; }
.account-identity { display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.account-name { font-size: .72rem; font-weight: 700; }
.account-role { color: var(--muted); font-size: .64rem; }
.account-chev { color: var(--muted); font-size: .58rem; }
.account-popover {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 220px; padding: .45rem;
  background: #090c0e; border: 1px solid rgba(255,255,255,.16); border-radius: 5px;
  box-shadow: 0 12px 32px rgba(0,0,0,.72), 0 0 0 1px rgba(241,90,60,.08);
  z-index: 55; animation: apps-pop .12s ease-out;
}
.account-popover[hidden] { display: none; }
.account-popover-head {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .35rem .45rem .55rem; margin-bottom: .25rem;
  border-bottom: 1px dashed rgba(255,255,255,.09);
}
.account-popover-head strong { font-size: .78rem; overflow-wrap: anywhere; }
.account-popover-head span { color: var(--muted); font-size: .6rem; letter-spacing: .1em; }
.account-menu-item {
  display: flex; width: 100%; align-items: center;
  min-height: 38px; padding: .5rem .55rem;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: #d7dbde; opacity: 1;
  font-family: var(--font-mono); font-size: .72rem; text-decoration: none;
  cursor: pointer; text-align: left;
}
.account-menu-item:hover, .account-menu-item:focus-visible {
  background: var(--surface); border-color: var(--border); outline: none; text-decoration: none;
}
.account-logout-form { margin: .2rem 0 0; padding-top: .2rem; border-top: 1px dashed rgba(255,255,255,.09); }
.account-logout:hover, .account-logout:focus-visible { color: var(--red); border-color: rgba(255,90,90,.35); }

@media (max-width: 700px) {
  .brand-divider, .brand-location { display: none; }
  .brand-bar { min-height: 56px; }
  .apps-btn, .account-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .account-role { display: none; }
}
@media (max-width: 600px) {
  .account-menu { position: static; }
  .apps-popover, .account-popover {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top));
    left: max(.75rem, env(safe-area-inset-left));
    right: max(.75rem, env(safe-area-inset-right));
    width: auto;
    max-height: calc(100vh - 4.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 4.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}
@media (max-width: 480px) {
  .account-identity, .account-chev { display: none; }
  .brand-environment { font-size: .52rem; padding: .15rem .32rem; }
}
@media (max-width: 420px) {
  .brand-ops { display: none; }
  .brand-mark-frame { width: 32px; height: 32px; flex-basis: 32px; }
  .brand-word { font-size: .86rem; }
  .brand-bar { gap: .3rem; }
}
@media (display-mode: window-controls-overlay) {
  .brand-bar { padding-top: max(.55rem, env(titlebar-area-height, .55rem)); }
}

/* ── theme controls + light visual system ─────────────────── */
.theme-menu-item { gap: .55rem; }
.theme-menu-icon { width: 1.1rem; color: var(--amber); text-align: center; }
.standalone-theme-toggle {
  position: fixed;
  z-index: 10;
  top: max(.8rem, env(safe-area-inset-top));
  right: max(.8rem, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: .45rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(10,13,18,.55);
  color: var(--text);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  font: 600 .7rem/1 var(--font-mono);
  cursor: pointer;
}

html[data-theme="light"] .card,
html[data-theme="light"] .standalone-card,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .ach-card,
html[data-theme="light"] .rep-sum-card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .export-card,
html[data-theme="light"] .ops-panel,
html[data-theme="light"] .ops-page .section,
html[data-theme="light"] .ops-metric,
html[data-theme="light"] .ops-dashboard .day-nav,
html[data-theme="light"] .queue-column,
html[data-theme="light"] .queue-record-card,
html[data-theme="light"] .err-panel {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(53,72,87,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 16px 38px rgba(43,59,72,.10);
}
html[data-theme="light"] .brand-bar {
  background: rgba(245,248,250,.50);
  border-bottom-color: rgba(53,72,87,.18);
  box-shadow: 0 10px 28px rgba(43,59,72,.08);
}
html[data-theme="light"] .brand-mark { filter: none; }
html[data-theme="light"] .standalone-brand img { filter: none !important; }
html[data-theme="light"] .brand-divider { background: rgba(53,72,87,.22); }
html[data-theme="light"] .apps-popover,
html[data-theme="light"] .account-popover {
  background: rgba(250,252,253,.92);
  border-color: rgba(53,72,87,.20);
  box-shadow: 0 14px 34px rgba(43,59,72,.18), 0 0 0 1px rgba(241,90,60,.05);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}
html[data-theme="light"] .account-menu-item { color: var(--text); }
html[data-theme="light"] .account-popover-head,
html[data-theme="light"] .account-logout-form { border-color: rgba(53,72,87,.15); }
html[data-theme="light"] .standalone-theme-toggle {
  background: rgba(255,255,255,.62);
  box-shadow: 0 10px 28px rgba(43,59,72,.10);
}
html[data-theme="light"] .global-beacon {
  background: rgba(245,248,250,.72);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
html[data-theme="light"] .gb-icon-inbox {
  border-color: rgba(53,72,87,.18);
  background: rgba(255,255,255,.46);
  color: var(--muted);
}
html[data-theme="light"] .gb-divider { background: rgba(53,72,87,.14); }

@media (prefers-reduced-transparency: reduce) {
  html[data-theme="light"] .card,
  html[data-theme="light"] .standalone-card,
  html[data-theme="light"] .hero-card,
  html[data-theme="light"] .ach-card,
  html[data-theme="light"] .rep-sum-card,
  html[data-theme="light"] .kpi-card,
  html[data-theme="light"] .export-card,
  html[data-theme="light"] .ops-panel,
  html[data-theme="light"] .ops-page .section,
  html[data-theme="light"] .ops-metric,
  html[data-theme="light"] .ops-dashboard .day-nav,
  html[data-theme="light"] .queue-column,
  html[data-theme="light"] .queue-record-card,
  html[data-theme="light"] .err-panel {
    background: rgba(255,255,255,.96) !important;
  }
}

@media print {
  html[data-theme="light"] body {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
  }
  html[data-theme="light"] .card,
  html[data-theme="light"] .ops-panel,
  html[data-theme="light"] .ops-page .section,
  html[data-theme="light"] .queue-column,
  html[data-theme="light"] .queue-record-card {
    background: #fff !important;
    border-color: #d5d5d5 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}