/* Shared responsive shell — 2026-08-19 "tasks workspace and contact
   workbench next" phase. One stylesheet every staff page links to,
   replacing each page's own hand-duplicated flat <nav> row with one
   grouped, responsive, accessible navigation component (see shell.js).
   Deliberately plain CSS custom properties + flex/grid — no framework,
   no build step, per the phase's own "avoid a framework migration"
   instruction. Design tokens mirror public/tasks.html's own palette
   (the newest page before this phase) so the whole app converges on
   one visual language instead of two. */

:root {
  --ink: #172033;
  --muted: #64748b;
  --line: #dbe3ee;
  --panel: #fff;
  --brand: #3157d5;
  --brand-ink: #1d3fae;
  --bg: #f5f7fb;
  --danger: #9b1c1c;
  --ok: #166534;
  --warn: #854d0e;
  --focus: #1d4ed8;
}

* { box-sizing: border-box; }

body.shell-body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* Skip link — the FIRST focusable element on every shell page, visually
   hidden until it receives keyboard focus. Points at #main. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  font-size: 13px; text-decoration: none;
}
.skip-link:focus { left: 0; }

.shell-header { background: #111a2e; color: #fff; }
.shell-header-inner { max-width: 1180px; margin: 0 auto; padding: 14px 20px 0; }
.shell-header h1 { margin: 0 0 12px; font-size: 20px; }

.shell-nav-toggle {
  display: none;
  background: transparent; color: #fff; border: 1px solid #33415f; border-radius: 6px;
  padding: 6px 10px; font-size: 13px; cursor: pointer;
}

.shell-nav { padding-bottom: 12px; }
.shell-nav-group { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.shell-nav-group:last-child { margin-bottom: 0; }
.shell-nav-group-label { color: #7a89ad; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; width: 100%; margin-top: 2px; }
.shell-nav a {
  color: #dce6ff; text-decoration: none; font-size: 13px; padding: 5px 2px; border-bottom: 2px solid transparent;
}
.shell-nav a:hover { color: #fff; }
.shell-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.shell-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--brand); font-weight: 600; }

@media (max-width: 860px) {
  .shell-nav-toggle { display: inline-block; margin-bottom: 10px; }
  .shell-nav { display: none; }
  .shell-nav.shell-nav-open { display: block; }
  .shell-nav-group { flex-direction: column; gap: 6px; }
}

.shell-main { max-width: 1180px; margin: 24px auto; padding: 0 18px 40px; }

/* Shared primitives used across pages (cards, badges, forms) — extracted
   from tasks.html's own design so new pages don't re-invent them. */
.shell-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px rgba(15, 23, 42, .05); }
.shell-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; margin-bottom: 18px; }
.shell-input, .shell-select, .shell-button { font: inherit; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 7px; }
.shell-button { cursor: pointer; background: #fff; }
.shell-button:disabled { cursor: default; opacity: .6; }
.shell-button.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.shell-button.primary:hover { background: var(--brand-ink); }
.shell-button.danger { background: #fff; color: var(--danger); border-color: #c55; }

.shell-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 9px; font-weight: 700; font-size: 11px; background: #e8edf5; }
/* Status semantics never rely on color alone — every badge also carries
   a leading glyph, so a color-blind or grayscale render still reads. */
.shell-badge.ok::before { content: "✓"; }
.shell-badge.bad::before { content: "✕"; }
.shell-badge.pending::before { content: "…"; }
.shell-badge.ok { color: var(--ok); background: #dcfce7; }
.shell-badge.bad { color: var(--danger); background: #fee2e2; }
.shell-badge.pending { color: var(--warn); background: #fef3c7; }
.shell-badge.neutral { color: var(--muted); background: #e8edf5; }

.shell-empty, .shell-loading { padding: 28px; text-align: center; color: var(--muted); }
.shell-error { color: var(--danger); background: #fee2e2; padding: 12px; border-radius: 8px; white-space: pre-wrap; }

/* Loading skeleton — a real placeholder shape, not just a spinner or a
   blank panel, so a slow contact/workbench fetch has visible structure
   immediately. */
.shell-skeleton-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #edf1f6 25%, #e2e8f0 37%, #edf1f6 63%); background-size: 400% 100%; animation: shell-skeleton 1.4s ease infinite; margin-bottom: 8px; }
.shell-skeleton-line.short { width: 40%; }
.shell-skeleton-line.medium { width: 70%; }
@keyframes shell-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .shell-skeleton-line { animation: none; } }

/* Accessible tabs (Overview / Recommendations / Reviews / Tasks / Activity) */
.shell-tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 14px; }
.shell-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.shell-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.shell-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 4px; }
.shell-tabpanel { padding: 16px; }
.shell-tabpanel[hidden] { display: none; }

/* ======================================================================
   2026-08-19 "visual convergence" extension — reusable primitives every
   staff page can adopt without a framework, plus a set of BARE-ELEMENT
   baselines (body, table, input/select/button, .banner, .badge,
   .toolbar, .empty-state/.loading-state, pre.error) that intentionally
   use the SAME selectors/class names the older staff pages already
   wrote their own near-identical copies of — see docs/visual-convergence.md's
   own inventory. Deduplicating onto ONE shared definition here, then
   deleting each page's own copy, converges the visual language without
   touching a single page's markup, IDs, or JS (acceptance item #4:
   "remove per-page global body/nav constraints... keep only page-
   specific layout rules inline").
   ====================================================================== */

/* The bug class docs/contact-workbench.md's own build log already found
   and fixed once for index.html: a page-level `body { max-width: ...;
   margin: 40px auto; }` visually compresses the shared header/main
   layout shell.css's own `.shell-main` already establishes. Shared here
   so no page can reintroduce it by accident. */
body.shell-body { max-width: none; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
table th, table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
table th { background: #fafbfd; color: var(--muted); font-weight: 600; }
table tr.clickable { cursor: pointer; }
table tr.clickable:hover, table tr.selected { background: #eef3ff; }
/* Table actions stay native buttons instead of turning a semantic row
   into a synthetic control. This preserves table semantics and gives
   keyboard and assistive-technology users an explicit action name. */
.table-row-action { white-space: nowrap; }
.table-row-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Wide tables scroll within their own container, never the page body
   (acceptance item #6 of the prior phase's own responsiveness bar). */
.shell-table-wrap { overflow-x: auto; }
/* 2026-08-21 "release-candidate convergence" handoff — Workstream 4,
   mobile-semantics review: an overflow-x:auto <div> with no tabindex is
   invisible to Tab and has no visible focus state, so a keyboard-only
   user (no mouse/trackpad/touch) has no way to scroll a table that
   overflows on a narrow viewport at all. Pages that mark their wrapper
   `tabindex="0"` (contacts.html's application-fit History table is the
   first) get a real Tab stop AND a visible focus ring here; this rule is
   inert on any wrapper that doesn't opt in, so it's safe to add
   project-wide before every page's wrapper is updated to match. */
.shell-table-wrap[tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

input, select, button { font: inherit; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 7px; }
button { cursor: pointer; background: #fff; }
button:disabled { cursor: default; opacity: .6; }
button.primary, .shell-button.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
button.primary:hover, .shell-button.primary:hover { background: var(--brand-ink); }
button.danger, .shell-button.danger { background: #fff; color: var(--danger); border-color: #c55; }

.banner { background: #fff3cd; border: 1px solid #ffe69c; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.banner.info { background: #e7f1ff; border-color: #b6d4fe; }
.banner.error { background: #fdecea; border-color: #f5c2c0; color: #611a15; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }

.empty-state, .loading-state { padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
pre.error { background: #fdecea; color: #611a15; padding: 12px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }

/* Toolbar / filter bar — the search + filter + primary-action row every
   list page opens with. `.toolbar` is the exact class name every
   pre-existing page already used; kept as the canonical name rather
   than introducing a second `.shell-filter-bar` synonym pages would
   have to be renamed to adopt. */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }

/* Page header — title + optional description + trailing actions, for
   pages that want more than the shared shell's own <h1>. */
.shell-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.shell-page-header h2 { margin: 0; font-size: 18px; }
.shell-page-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.shell-page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Detail drawer — a slide-in side panel for inspecting one record
   without navigating away from its list (the pattern tasks.html and
   contacts.html already use as a static side column; this is the same
   visual language made available as an overlay for pages with less
   horizontal room). */
.shell-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 900; }
.shell-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--panel); box-shadow: -12px 0 32px rgba(15, 23, 42, .18); z-index: 901; overflow-y: auto; padding: 20px; }
.shell-drawer h2 { margin-top: 0; font-size: 16px; }
.shell-drawer-close { position: absolute; top: 14px; right: 14px; }
@media (max-width: 600px) { .shell-drawer { width: 100vw; } }

/* Pagination */
.shell-pagination { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 12px; }
.shell-pagination .page-info { color: var(--muted); }

/* Destructive action confirmation — a visible, textual "are you sure"
   step for anything irreversible, never a bare click-to-delete button
   (status/semantics never rely on color alone applies to CONSEQUENCE
   too, not just state). */
.shell-destructive-confirm { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--danger); }

@media (max-width: 700px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .shell-page-header { flex-direction: column; }
}