/* Copied from mockups/dashboard-v2/b.css, the approved Dense look (Matt, 2026-09-30: the app matches it), less the mockup's own switch and sample styles. */
/* Direction B: Strip bay. Each problem is a strip of paper racked by how soon it needs a person. */
:root {
  --ground: #dde2df;
  --rack: #bfc7c3;
  --rack-edge: #a9b3ae;
  --strip: #fbfaf4;
  --strip-alt: #f3f2ea;
  --box: #c3c6bb;
  --ink: #141a1c;
  --ink-2: #434c50;
  --ink-3: #596266;
  --bar: #222a2d;
  --bar-ink: #e9eeec;
  --bar-dim: #a9b4b0;
  --now: #c5352a;
  --today: #dc9a1b;
  --today-ink: #6d4700;
  --week: #3a6fab;
  --ok: #3a8657;
  --ok-ink: #2d6a44; /* --ok as text on white: 4.44:1 fell short of 4.5 (Impeccable critique, 2026-10-04) */
  --focus: #1b5fd0;
  --coming: #5e6488;
  --coming-bg: repeating-linear-gradient(135deg, #f1f1f6 0 5px, #e6e6ef 5px 6px);

  --sans: 'Barlow', system-ui, sans-serif;
  --cond: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 14px/1.4 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
::selection { background: #f4d98a; color: var(--ink); }
a { color: var(--focus); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.i { width: 16px; height: 16px; flex: none; }
code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; }
h1, h2, h3 { text-wrap: balance; }

/* ---- bar ---- */
.bar { background: var(--bar); color: var(--bar-ink); }
.bar__in { max-width: 1320px; margin: 0 auto; padding: 0 20px; height: 48px; display: flex; align-items: stretch; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--bar-ink); text-decoration: none; font: 700 17px/1 var(--cond); letter-spacing: 0.01em; }
.brand__tag { width: 10px; height: 22px; background: var(--today); }
.nav { display: flex; align-items: stretch; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--bar-dim); text-decoration: none; font: 600 15px/1 var(--cond); border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--bar-ink); background: #2c3538; }
.nav a[aria-current='page'] { color: #fff; border-bottom-color: var(--today); }
.nav .n { padding: 2px 6px; background: var(--now); color: #fff; font-size: 12px; }
.bar__meta { margin-left: auto; display: flex; align-items: center; gap: 16px; font: 500 13px/1.2 var(--cond); color: var(--bar-dim); }
.bar__meta strong { color: var(--bar-ink); font-weight: 600; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 18px 20px 56px; }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--cond); padding: 7px 10px; background: var(--strip); color: var(--ink); border: 1px solid var(--ink-3); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #fff; border-color: var(--ink); }
.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--solid:hover { background: #000; color: #fff; }
.btn.is-copied { background: var(--ok); border-color: var(--ok); color: #fff; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 6px 8px; font: 600 12.5px/1 var(--cond); background: none; border: 1px solid var(--box); color: var(--ink-2); cursor: pointer; }
.iconbtn:hover { background: #fff; color: var(--ink); border-color: var(--ink-3); }

.tabset { display: inline-flex; border: 1px solid var(--ink-3); background: var(--strip); }
.tabset button { font: 600 13px/1 var(--cond); padding: 8px 12px; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.tabset button + button { border-left: 1px solid var(--box); }
.tabset button[aria-pressed='true'] { background: var(--ink); color: #fff; }


/* ---- tooltips ---- */
.tip { position: relative; display: inline-flex; }
.tip > button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-align: inherit; border-bottom: 1px dotted var(--ink-3); }
.tip [role='tooltip'] { position: absolute; z-index: 30; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 16rem; padding: 8px 10px; background: var(--bar); color: var(--bar-ink); font: 400 12.5px/1.45 var(--sans); text-align: left; white-space: normal; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; transition: opacity .1s ease-out; pointer-events: none; }
.tip--left [role='tooltip'] { left: 0; transform: none; }
.tip--right [role='tooltip'] { left: auto; right: 0; transform: none; }
.tip:hover [role='tooltip'], .tip:focus-within [role='tooltip'] { opacity: 1; visibility: visible; }

/* ---- dense grid table ---- */
.grid { width: 100%; border-collapse: collapse; background: var(--strip); border: 1px solid var(--ink-3); }
.grid th { font: 600 12.5px/1.2 var(--cond); color: var(--ink-2); text-align: right; vertical-align: bottom; padding: 7px 9px; background: var(--strip-alt); border: 1px solid var(--box); border-bottom-color: var(--ink-3); }
.grid td { padding: 7px 9px; text-align: right; border: 1px solid var(--box); vertical-align: middle; }
.grid th.l, .grid td.l { text-align: left; }
.grid .sub { display: block; font: 500 12px/1.25 var(--cond); color: var(--ink-3); }
.grid .dash { color: var(--ink-3); }
.grid tfoot td { font-weight: 700; background: var(--strip-alt); border-top: 1px solid var(--ink-3); }
.coming-col { background: var(--coming-bg); }
th.coming-col { background: #e4e4ee; }
td.coming-col { color: var(--coming); }
.coming-tag { display: block; font: 600 11px/1.2 var(--cond); color: var(--coming); }

.hold { display: inline-block; padding: 1px 5px; margin-left: 5px; font: 700 11px/1.3 var(--cond); color: #fff; vertical-align: 1px; }
.hold--now { background: var(--now); }
.hold--today { background: var(--today); color: var(--ink); }
.hold--week { background: var(--week); }
.hold--ok { background: var(--ok); }

.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pagehead h1 { font: 700 22px/1.1 var(--cond); margin: 0; }
.pagehead p { margin: 2px 0 0; color: var(--ink-3); font: 500 13px/1.3 var(--cond); }

@media (max-width: 760px) {
  .bar__in { height: auto; flex-wrap: wrap; gap: 0 16px; padding: 8px 16px 0; }
  .bar__meta { margin-left: 0; width: 100%; order: 3; padding: 6px 0 8px; }
  .nav a { padding: 10px 12px; }
  .wrap { padding: 14px 16px 48px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tablewrap { position: relative; }

/* ---- page captures ---- */
.shot { display: block; padding: 0; border: 1px solid var(--box); background: #fff; cursor: zoom-in; overflow: hidden; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot:hover { border-color: var(--ink); }
.shot--row { width: 52px; height: 74px; }
.shot--large { width: 180px; height: 300px; }
.shotview { padding: 0; border: 1px solid var(--ink); width: min(440px, calc(100vw - 32px)); height: calc(100vh - 32px); max-height: none; margin: 16px 16px 16px auto; background: var(--strip); color: var(--ink); display: none; flex-direction: column; }
.shotview[open] { display: flex; }
.shotview::backdrop { background: rgba(20, 26, 28, .45); }
.shotview__bar { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: start; padding: 10px 12px; background: var(--bar); color: var(--bar-ink); }
.shotview__bar h2 { font: 700 16px/1.2 var(--cond); margin: 0 0 2px; }
.shotview__bar h2 code { font-size: 11.5px; color: var(--bar-dim); margin-left: 4px; }
.shotview__bar p { margin: 0; font: 500 12px/1.3 var(--cond); color: var(--bar-dim); }
.shotview__open { display: inline-flex; gap: 5px; align-items: center; font: 600 13px/1 var(--cond); color: #fff; padding-top: 3px; white-space: nowrap; }
.shotview__close { border: 1px solid var(--bar-dim); background: none; color: var(--bar-ink); padding: 4px; cursor: pointer; display: inline-flex; }
.shotview__close .is-x { transform: rotate(45deg); }
.shotview__scroll { overflow-y: auto; flex: 1; background: var(--rack); padding: 10px; display: flex; justify-content: center; align-items: flex-start; }
.shotview__scroll img { width: 390px; max-width: 100%; height: auto; display: block; background: #fff; }

/* ---- search ---- */
.search { position: relative; display: inline-flex; align-items: center; }
.search .i { position: absolute; left: 8px; color: var(--ink-3); pointer-events: none; }
.search input { font: 500 14px var(--sans); width: 16rem; max-width: 100%; padding: 7px 30px 7px 30px; border: 1px solid var(--ink-3); background: #fff; color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search kbd { position: absolute; right: 6px; font: 600 11.5px/1 var(--cond); color: var(--ink-3); border: 1px solid var(--box); padding: 2px 5px; background: var(--strip-alt); }
.search input:focus + kbd, .search input:not(:placeholder-shown) + kbd { display: none; }
.noresults { padding: 20px 12px; text-align: center; font: 500 14px/1.4 var(--cond); color: var(--ink-2); background: var(--strip); }