/* ============================================================
   theme2.css — the Navy & Amber redesign (Oct 2026).

   A presentation layer loaded LAST. It changes how screens look and
   how the page chrome is laid out; it changes no behaviour, no
   markup a script depends on, and no permission. Delete the one
   <link> to it in index.html (and restore tokens.css) to go back.

   Tokens only (tests_cc_theme forbids raw colours), so night mode
   follows tokens.css by itself.
   ============================================================ */

/* ============ 1. THE PAGE CHROME (desktop) ============
   #main holds, in order: #topnav, .topbar, #subtabs, #content.
   On a desktop it becomes a grid: the menu bar and the office tools
   (search, company, bell, user) share ONE dark row; back + breadcrumb
   + title share the next. .topbar is display:contents so its three
   children are placed directly, without touching the markup. */
@media (min-width: 901px) {
  #main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-lg);
    align-content: start;
    padding-top: 0;
    position: relative;
  }
  #main > * { grid-column: 1 / -1; min-width: 0; }

  /* the dark band behind row 1, painted edge to edge of the window
     without widening the page (a shadow never adds scroll width) */
  #main::before {
    content: "";
    grid-row: 1; grid-column: 1 / -1;
    background: var(--nav-bg);
    box-shadow: 0 0 0 100vmax var(--nav-bg);
    clip-path: inset(0 -100vmax);
    pointer-events: none;
  }

  #topnav {
    grid-row: 1; grid-column: 1 / -1;
    position: relative; z-index: 40;      /* dropdowns open over the page */
    min-height: 56px;
    margin: 0;
    border-bottom: none;
    gap: var(--space-xl);
  }
  .topbar { display: contents; }
  .topbar > .nav-toggle { display: none; }
  /* the office tools (search, company, bell, user) sit at the right of the
     title row: seven menus need the whole bar on every screen width */
  .topbar-actions {
    grid-row: 2; grid-column: 2;
    position: relative; z-index: 41;
    align-self: center;
    flex-wrap: nowrap;
  }
  /* row 2: back · breadcrumb over title */
  .topbar-main {
    grid-row: 2; grid-column: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "back crumbs" "back title";
    column-gap: var(--space-md);
    align-items: center;
    padding: var(--space-lg) 0 var(--space-md);
  }
  #backBtn { grid-area: back; margin: 0 !important; width: 34px; height: 34px; }
  .topbar-main .crumbs { grid-area: crumbs; min-height: 16px; }
  .topbar-main h1 { grid-area: title; }
  #subtabs { grid-row: 3; }
  #content { grid-row: 4; }
}

/* ============ 2. THE MENU BAR ============ */
@media (min-width: 901px) {
  .tn-brand { color: var(--nav-ink-strong); padding-bottom: 0; font-size: 15px; }
  .tn-brand .brandmark {
    background: var(--nav-accent);
    color: var(--nav-accent-ink);
    border-radius: var(--radius-md);
  }
  /* overflow must stay visible: the old overflow-x:auto here also clipped
     every dropdown, so hovering a menu showed nothing. Narrow screens drop
     the menu glyphs first, then let the menus wrap, instead of scrolling. */
  .tn-menus { gap: 0; align-self: stretch; overflow: visible; flex-wrap: wrap; }
  .tn-menu { align-self: stretch; }
  .tn-btn {
    color: var(--nav-ink);
    padding: 0 var(--space-md);
    border-radius: 0;
    font-weight: var(--weight-semibold);
    box-shadow: inset 0 -3px 0 transparent;
  }
  .tn-menu[data-menu] .tn-btn:hover,
  .tn-menu.open .tn-btn {
    color: var(--nav-ink-strong);
    background: var(--nav-bg-hover);
  }
  .tn-menu.active .tn-btn,
  .tn-menu.active[data-menu] .tn-btn:hover {
    color: var(--nav-ink-strong);
    box-shadow: inset 0 -3px 0 var(--nav-accent);
  }
  .tn-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--nav-accent); }
  .tn-mico { color: var(--nav-ink-dim); }
  .tn-menu.active .tn-mico, .tn-btn:hover .tn-mico { color: var(--nav-ink-strong); }
  .tn-caret { opacity: .7; }
  .tn-drop { top: 100%; border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 3px solid var(--nav-accent); }

}
.u-avatar { background: var(--color-accent); color: var(--text-inverse); }
.coswitch { max-width: 240px; }

@media (min-width: 901px) and (max-width: 1180px) {
  .tn-mico { display: none; }
  .tn-btn { padding: 0 var(--space-sm); }
  #topnav { gap: var(--space-md); }
}

/* ============ 3. PAGE TITLE + TAB STRIP ============ */
.topbar-main h1 {
  font-size: 22px;
  font-weight: var(--weight-bold);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.crumbs .crumb, .crumb-link { color: var(--text-tertiary); }
#backBtn { border-radius: var(--radius-md); }

#subtabs {
  margin: 0 0 var(--space-lg);
  gap: var(--space-xs);
}
.subtabs-name {
  color: var(--text-tertiary);
  border-right: 1px solid var(--color-border);
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) 0;
  margin-right: var(--space-xs);
}
.subtab { padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + 2px); font-weight: var(--weight-semibold); }
.subtab:hover { color: var(--color-primary); }
.subtab.active { border-bottom-width: 3px; }

/* ============ 4. MENU TILE PAGES (hubs) ============ */
.hubpage { padding-top: 0; }
.hubgrid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-md);
  justify-items: stretch;
  padding: 0 0 var(--space-xl);
}
.hubtile {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.hubtile:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.hubtile b, .hubtile .ht-sub { text-align: left; }
.hubtile > b { display: block; }
/* the label and caption stack beside the icon */
.hubtile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-md); row-gap: var(--space-2xs); }
.hubtile .ht-ico { grid-row: 1 / 3; width: 44px; height: 44px; }
.hubtile .i { width: 22px; height: 22px; }
.hubtile b { font-weight: var(--weight-semibold); align-self: end; }
.hubtile .ht-sub { font-size: var(--text-xs); color: var(--text-secondary); max-width: none; }
.hubhint { margin-top: var(--space-md); }

/* ============ 5. CARDS (sections) ============ */
.section {
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: relative;
}
.section h3 {
  font-size: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: -.005em;
}
.section h3 > .hint { font-weight: var(--weight-normal); margin-top: 0; }
.section .desc { line-height: var(--leading-normal); }

/* a lone "?" that sat on its own line under a row of filters goes to the
   card's top-right corner, where every other card's "?" can be found */
.section > .help {
  position: absolute;
  top: var(--space-xl); right: var(--space-xl);
  margin: 0;
}
.section > .help > .help-pop { left: auto; right: 0; }
/* the "?" that explains a warning banner tucks into the banner's corner */
.msg + .help {
  display: flex; position: relative;
  width: 16px; margin: -30px var(--space-md) var(--space-md) auto;
}
.msg + .help > .help-pop { left: auto; right: 0; }

/* sub-sections inside a long form */
.form-section > h4 {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
}

/* ============ 6. FORMS ============ */
/* rows of fields: steady spacing between rows, and no field stretched
   past the width its content can use (a PAN is ten characters) */
.row + .row,
.row + .field,
.field + .row { margin-top: var(--space-md); }
.row > .field:not([style*="flex"]):not(:has(textarea)):not(:has(input[type="file"])) { max-width: 420px; }
.row > .field:has(input[type="file"]) { max-width: 640px; }
.field label { color: var(--text-secondary); font-weight: var(--weight-semibold); }
.field > .hint { display: block; }
/* fields that carry a hint under the box line up by their labels, not by
   their bottoms; buttons in such a row still sit on the input line */
.row:has(> .field > .hint) { align-items: flex-start; }
.row:has(> .field > .hint) > .btn { margin-top: 22px; }
/* a "?" inside a field sits at the end of its label line */
.field { position: relative; }
.field > .help { position: absolute; top: 0; right: 0; margin: 0; }
.field > .help > .help-pop { left: auto; right: 0; }

/* plain browser controls that no class reached: same height, border and
   radius as every other input (zero specificity, so any rule still wins) */
:where(select, input:not([type]), input[type="text"], input[type="number"], input[type="date"],
       input[type="month"], input[type="email"], input[type="search"], input[type="password"],
       input[type="tel"]):not(.sr-only) {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
:where(textarea) {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  padding: var(--space-sm);
}
td select, td input:not([type="checkbox"]):not([type="radio"]) {
  height: var(--control-h-sm);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--text-primary);
  font-size: var(--text-sm);
}
td select:focus, td input:focus,
:where(select, input, textarea):focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }

/* file pickers: a real button instead of the bare browser one */
input[type="file"] {
  max-width: 100%;
  height: auto !important;
  padding: var(--space-xs) !important;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}
input[type="file"]:hover { border-color: var(--color-primary); }
input[type="file"]::file-selector-button {
  height: 28px;
  margin-right: var(--space-md);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ============ 7. BUTTONS ============ */
.btn { border-radius: var(--radius-md); font-weight: var(--weight-semibold); letter-spacing: .005em; }
.btn:not(.sec):not(.ghost):not(.tertiary):not(.danger):not(.dq) { box-shadow: var(--shadow-sm); }
.btn.sec { border-color: var(--color-border-strong); }
.btn.sec:hover { border-color: var(--color-primary-border); color: var(--color-primary); background: var(--color-primary-soft); }
/* quiet destructive action: red words, red only on hover. Solid red is kept
   for the "are you sure?" button, where it belongs. */
.btn.dq {
  background: transparent;
  color: var(--color-danger);
  border-color: transparent;
}
.btn.dq:hover { background: var(--color-danger-soft); border-color: var(--color-danger-border); color: var(--color-danger); }
.btn.sec.dq { border-color: var(--color-danger-border); }

/* ============ 8. COUNT TILES ============ */
.stat, .kpi {
  position: relative;
  overflow: hidden;
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg) var(--space-md) calc(var(--space-lg) + 2px);
}
.stat::before, .kpi::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-border-strong);
}
.stat.red, .stat.green, .stat.amber { border-color: var(--color-border); }
.stat.red::before, .kpi.bad::before  { background: var(--color-danger); }
.stat.green::before, .kpi.good::before { background: var(--color-success); }
.stat.amber::before, .kpi.warn::before { background: var(--color-warning); }
.stat .k { font-weight: var(--weight-semibold); letter-spacing: .06em; }
.stat .v { font-size: 24px; font-weight: var(--weight-bold); }
.stat .hint { margin-top: 0; }
.stat[onclick]:hover, a.stat:hover { border-color: var(--color-primary-border); }

/* ============ 9. TABLES ============ */
th {
  background: var(--color-surface-2);
  color: var(--text-secondary);
  letter-spacing: .06em;
  padding-top: calc(var(--row-pad-y) + 1px);
  padding-bottom: calc(var(--row-pad-y) + 1px);
}
td { vertical-align: middle; }
.table-wrap, .section > div[style*="overflow-x"] { border-color: var(--color-border); box-shadow: none; }
tbody tr:hover td { background: var(--color-surface-2); }
td a, td .linkish { font-weight: var(--weight-medium); }

/* the Tally-format reports: navy heading band to match the menu bar */
.tally { border-radius: var(--radius-lg); overflow: hidden; }

/* ============ 10. MESSAGES + TAGS ============ */
.msg { border-radius: var(--radius-md); border-left-width: 4px; }
.tag { font-weight: var(--weight-semibold); }

/* ============ 11. MOBILE ============ */
@media (max-width: 900px) {
  /* menu button · back · breadcrumb over title on one line, the office
     tools on the next */
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-sm);
    row-gap: var(--space-sm);
    align-items: center;
  }
  .topbar > .nav-toggle { grid-row: 1; grid-column: 1; }
  .topbar-main {
    grid-row: 1; grid-column: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "back crumbs" "back title";
    column-gap: var(--space-sm);
    align-items: center;
  }
  #backBtn { grid-area: back; margin: 0 !important; }
  .topbar-main .crumbs { grid-area: crumbs; }
  .topbar-main h1 { grid-area: title; font-size: 19px; width: auto; order: 0; }
  .topbar-actions { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap; }
  .topbar-actions .company-pick { flex: 1 1 auto; min-width: 0; }
  .topbar-actions .searchtrigger { flex: none; min-width: 40px; width: 40px; justify-content: center; padding: 0; }
  .topbar-actions .coswitch { width: 100%; max-width: none; }
}

/* ============ 12. JOB BOARD (Oct 2026 redesign) ============
   A worklist grouped by urgency with the saved views on the left, and a
   compact board one click away. */
.jb-bar {
  display: flex; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.jb-filters { display: flex; align-items: flex-end; gap: var(--space-sm); flex-wrap: wrap; flex: 1; min-width: 0; }
.jb-f { display: flex; flex-direction: column; gap: 3px; font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--weight-semibold); }
.jb-f select, .jb-f input { height: var(--control-h-sm); min-width: 150px; max-width: 220px; font-weight: var(--weight-normal); }
.jb-check { display: inline-flex; align-items: center; gap: var(--space-xs); height: var(--control-h-sm); font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
.jb-right { display: flex; align-items: center; gap: var(--space-md); }
.jb-total { color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; }
.jb-seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.jb-seg button { border: 0; background: none; padding: 0 var(--space-md); height: var(--control-h-sm); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); cursor: pointer; }
.jb-seg button + button { border-left: 1px solid var(--color-border); }
.jb-seg button.on { background: var(--color-primary-soft); color: var(--color-primary); }
.jb-right .help { position: relative; }

.jb-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.jb-views {
  position: sticky; top: var(--space-md);
  display: grid; gap: 2px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-sm); box-shadow: var(--shadow-sm);
}
.jb-vh { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); padding: var(--space-sm) var(--space-sm) var(--space-2xs); }
.jb-view {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 7px var(--space-sm); border: 0; border-radius: var(--radius-md);
  background: none; font: inherit; font-size: var(--text-sm); color: var(--text-primary);
  text-align: left; cursor: pointer;
}
.jb-view:hover { background: var(--color-surface-2); }
.jb-view.on { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--weight-bold); }
.jb-n { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.jb-n.hot { color: var(--text-inverse); background: var(--color-danger); border-radius: var(--radius-pill); padding: 0 7px; }
.jb-main { min-width: 0; }

/* the worklist */
.jb-list {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.jb-row {
  display: grid;
  grid-template-columns: 22px minmax(140px, 1.1fr) minmax(180px, 1.7fr) 150px minmax(120px, .9fr) 112px 76px;
  gap: var(--space-md); align-items: center;
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm); cursor: pointer;
}
.jb-row:hover { background: var(--color-surface-2); }
.jb-row.sel { background: var(--color-primary-soft); }
.jb-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary); }
.jb-row > span { min-width: 0; }
.jb-head { cursor: default; background: var(--color-surface-2); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.jb-head:hover { background: var(--color-surface-2); }
.jb-co a, .jb-co .linkish { font-weight: var(--weight-semibold); }
.jb-co, .jb-job b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.jb-sub { display: block; font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--weight-normal); }
.jb-due { font-variant-numeric: tabular-nums; white-space: nowrap; }
.jb-act { text-align: right; opacity: .0; transition: opacity var(--dur-fast) var(--ease); }
.jb-row:hover .jb-act, .jb-row:focus-within .jb-act { opacity: 1; }
.jb-grp {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-surface-2); border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-primary);
  text-transform: uppercase; letter-spacing: .05em;
}
.jb-grp span { color: var(--text-secondary); font-weight: var(--weight-semibold); }
.jb-g-bad  { color: var(--color-danger); box-shadow: inset 3px 0 0 var(--color-danger); }
.jb-g-warn { color: var(--color-warning); box-shadow: inset 3px 0 0 var(--color-warning); }
.jb-empty { padding: var(--space-2xl); text-align: center; color: var(--text-secondary); }
.jb-pager { display: flex; align-items: center; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-md); }
.jb-pager .hint { margin: 0 auto 0 0; }
.jb-late { color: var(--color-danger); font-weight: var(--weight-semibold); }

.jb-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 1px 9px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jb-neutral { background: var(--color-neutral-soft); color: var(--text-secondary); border: 1px solid var(--color-border); }
.jb-warn { background: var(--color-warning-soft); color: var(--color-warning-text); }
.jb-info { background: var(--color-info-soft); color: var(--color-info-text); }
.jb-vio  { background: var(--menu-compliance-soft); color: var(--menu-compliance); }
.jb-ok   { background: var(--color-success-soft); color: var(--color-success-text); }
.jb-bad  { background: var(--color-danger-soft); color: var(--color-danger-text); }

.jb-own { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-own .hint { margin: 0; }
.jb-av {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-accent); color: var(--text-inverse);
  font-size: 10px; font-weight: var(--weight-bold);
}
.jb-av.none { background: transparent; border: 1.5px dashed var(--color-border-strong); color: var(--text-tertiary); }

/* the compact board */
.jb-board { display: flex; gap: var(--space-sm); overflow-x: auto; padding-bottom: var(--space-sm); align-items: flex-start; }
.jb-col {
  flex: 0 0 248px; min-width: 248px;
  display: flex; flex-direction: column; gap: var(--space-sm);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-sm);
  max-height: 72vh; overflow-y: auto;
}
.jb-col h4 {
  position: sticky; top: calc(-1 * var(--space-sm)); z-index: 1;
  margin: calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-2);
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
}
.jb-col h4 .jb-late { text-transform: none; letter-spacing: 0; }
.jb-col h4 .jb-cn { margin-left: auto; font-variant-numeric: tabular-nums; }
.jb-col.jb-rail { flex: 0 0 40px; min-width: 40px; padding: var(--space-sm) 0; align-items: center; overflow: hidden; }
.jb-col.jb-rail h4 {
  writing-mode: vertical-rl; transform: rotate(180deg);
  margin: 0; padding: var(--space-sm) 0; background: none; position: static;
  white-space: nowrap; color: var(--text-tertiary);
}
.jb-col.drop { outline: 2px dashed var(--color-primary); outline-offset: 2px; }
.jb-card {
  display: grid; gap: 4px;
  margin: 0; padding: var(--space-sm) var(--space-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border); border-radius: var(--radius-md);
  cursor: grab; box-shadow: var(--shadow-sm);
}
.jb-card:hover { border-color: var(--color-primary-border); }
.jb-card.od { box-shadow: inset 3px 0 0 var(--color-danger), var(--shadow-sm); border-left-color: var(--color-border); }
.jb-card.blocked { box-shadow: inset 3px 0 0 var(--color-warning), var(--shadow-sm); }
.jb-card.sel { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.jb-t { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-m { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--text-secondary); min-width: 0; }
.jb-m .jb-own { margin-left: auto; }
.jb-m .jb-av { width: 20px; height: 20px; font-size: 9px; }
.jb-more { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: none; padding: var(--space-sm); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary); cursor: pointer; }

/* the job's side panel */
.jb-dhead { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.jb-steps { display: flex; gap: 4px; margin-top: var(--space-md); }
.jb-steps span { flex: 1; height: 6px; border-radius: 3px; background: var(--color-surface-3); }
.jb-steps span.done { background: var(--color-success); }
.jb-steps span.cur { background: var(--color-primary); }
.jb-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-sm) var(--space-md); margin: var(--space-lg) 0; font-size: var(--text-sm); }
.jb-kv dt { color: var(--text-secondary); }
.jb-kv dd { margin: 0; }
.jb-kv select { max-width: 260px; height: var(--control-h-sm); }

@media (max-width: 1100px) {
  .jb-wrap { grid-template-columns: 1fr; }
  .jb-views { position: static; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
  .jb-vh { display: none; }
  .jb-view { border: 1px solid var(--color-border); }
}
@media (max-width: 760px) {
  .jb-head { display: none; }
  .jb-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: "ck co due" ". job job" ". st st";
    row-gap: var(--space-xs);
  }
  .jb-row > span:nth-child(1) { grid-area: ck; }
  .jb-row > span:nth-child(2) { grid-area: co; }
  .jb-row > span:nth-child(3) { grid-area: job; }
  .jb-row > span:nth-child(4) { grid-area: st; }
  .jb-row > span:nth-child(6) { grid-area: due; text-align: right; }
  .jb-row > span:nth-child(5), .jb-act { display: none; }
  .jb-f select, .jb-f input { min-width: 0; max-width: none; width: 100%; }
  .jb-f { flex: 1 1 45%; }
  .jb-right { width: 100%; justify-content: space-between; }
}

/* the Work menu's saved views */
.tn-sep {
  margin: var(--space-xs) var(--space-sm) 2px;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary);
}
.tn-drop a.tn-view { padding-left: var(--space-lg); }
.tn-count { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tn-count.hot { color: var(--text-inverse); background: var(--color-danger); border-radius: var(--radius-pill); padding: 0 7px; }
#jbMsg:empty, #jbApproval:empty, #jbBlock:empty { display: none; }

/* ============ 13. HOME (Oct 2026 redesign) ============
   Colour summary cards, a filing chart, the work-by-stage ring, this week's
   due list and who carries what. Icon tiles take the two-tone icon palette. */
.hk-hello { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.hk-hello h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.hk-hello p { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.hk-grow { flex: 1; }
.hk-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.hk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.hk-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-lg); }
.hk, .hk-mini, .hk-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: var(--shadow-sm); min-width: 0;
}
.hk {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-md);
  align-items: center; padding: var(--space-lg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hk[role="button"] { cursor: pointer; }
.hk[role="button"]:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.hk:focus-visible, .hk-mini:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hk .hk-ic { grid-row: 1 / 3; }
.hk-k { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.hk-v { font-size: 28px; font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hk-s { grid-column: 1 / -1; margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--text-secondary); }
.hk-tr { font-weight: var(--weight-bold); padding: 1px 7px; border-radius: var(--radius-pill); }
.hk-up { color: var(--color-danger-text); background: var(--color-danger-soft); }
.hk-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.hk-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--ico-onaccent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hk-red    { background: var(--ico-red); }
.hk-amber  { background: var(--ico-amber); }
.hk-violet { background: var(--ico-violet); }
.hk-blue   { background: var(--ico-blue); }
.hk-green  { background: var(--ico-green); }
.hk-teal   { background: var(--ico-teal); }
.hk-card { display: flex; flex-direction: column; overflow: hidden; }
.hk-ch { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-lg) var(--space-xl) var(--space-sm); }
.hk-ch h3 { margin: 0; font-size: 15.5px; font-weight: var(--weight-bold); }
.hk-sub { font-size: var(--text-xs); color: var(--text-tertiary); }
.hk-link {
  margin-left: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: 3px 10px; font: inherit; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); color: var(--color-primary); cursor: pointer;
}
.hk-link:hover { background: var(--color-primary-soft); }
.hk-ch .help { margin-left: auto; position: relative; }
.hk-cb { padding: var(--space-xs) var(--space-xl) var(--space-lg); flex: 1; }
.hk-empty { padding: var(--space-xl) var(--space-sm); color: var(--text-secondary); font-size: var(--text-sm); text-align: center; }
.hk-chart { width: 100%; height: auto; display: block; }
.hk-chart text { fill: var(--text-tertiary); font: 11px var(--font-sans); }
.hk-chart .hk-grid { stroke: var(--color-border); stroke-width: 1; }
.hk-chart .hk-on { fill: var(--series-1); }
.hk-chart .hk-lt { fill: var(--color-danger); }
.hk-key { display: inline-flex; gap: var(--space-md); font-size: var(--text-xs); color: var(--text-secondary); flex-wrap: wrap; }
.hk-key span { display: inline-flex; align-items: center; gap: 5px; }
.hk-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
i.hk-on, .hk-trk i.hk-on { background: var(--series-1); }
i.hk-lt, .hk-trk i.hk-lt { background: var(--color-danger); }
i.hk-bl, .hk-trk i.hk-bl { background: var(--color-warning); }
.hk-donut { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; justify-content: center; }
.hk-donut svg { width: 170px; height: 170px; flex: none; }
.hk-donut .hk-track { stroke: var(--color-surface-2); }
.hk-c1 { font: 700 26px var(--font-sans); fill: var(--text-primary); }
.hk-c2 { font: 12px var(--font-sans); fill: var(--text-secondary); }
.hk-legend { display: grid; gap: 2px; flex: 1; min-width: 180px; }
.hk-li { display: flex; align-items: center; gap: var(--space-sm); padding: 4px 6px; border: 0; border-radius: var(--radius-md); background: none; font: inherit; font-size: var(--text-sm); color: var(--text-primary); text-align: left; cursor: pointer; }
.hk-li:hover { background: var(--color-surface-2); }
.hk-li i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hk-li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.hk-li small { width: 34px; text-align: right; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hk-table { border: 0; border-radius: 0; box-shadow: none; max-height: none; border-top: 1px solid var(--color-border); }
.hk-table th { padding-left: var(--space-xl); }
.hk-table td:first-child, .hk-table th:first-child { padding-left: var(--space-xl); }
.hk-table tbody tr:nth-child(even) td { background: var(--color-surface-2); }
.hk-ppl { display: grid; gap: var(--space-sm); }
.hk-pp {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px var(--space-sm); align-items: center;
  padding: 6px; border: 0; border-radius: var(--radius-md); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text-primary);
}
.hk-pp:hover { background: var(--color-surface-2); }
.hk-pp .jb-av { width: 28px; height: 28px; font-size: 11px; grid-row: 1 / 3; }
.hk-nm { font-weight: var(--weight-semibold); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-ct { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hk-trk { grid-column: 2 / -1; height: 8px; border-radius: 5px; background: var(--color-surface-2); display: flex; overflow: hidden; }
.hk-trk i { display: block; height: 100%; }
.hk-cb > .hk-key { margin-top: var(--space-md); }
.hk-mini { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.hk-mini[role="button"] { cursor: pointer; }
.hk-mini[role="button"]:hover { border-color: var(--color-primary-border); }
.hk-mini .hk-ic { width: 38px; height: 38px; border-radius: 10px; }
.hk-mini .hk-ic svg { width: 18px; height: 18px; }
.hk-mt { flex: 1; min-width: 0; }
.hk-mt b { display: block; font-size: var(--text-sm); }
.hk-mt span { font-size: var(--text-xs); color: var(--text-secondary); }
.hk-big { font-size: 22px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.hk-prog { display: block; height: 6px; border-radius: 4px; background: var(--color-surface-2); margin-top: 6px; overflow: hidden; }
.hk-prog i { display: block; height: 100%; background: var(--color-success); }
@media (max-width: 1100px) {
  .hk-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hk-row, .hk-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .hk-grid4 { grid-template-columns: 1fr; } }