/* ═══════════════════════════════════════════════════════════════════════════
   EDSON HUB DESIGN SYSTEM — hub-design.css
   ─────────────────────────────────────────────────────────────────────────────
   The single source of truth for how every Hub module looks.
   Link it in each module's <head>, BEFORE the module's own <style>:

       <link rel="stylesheet" href="hub-design.css">

   RULES FOR EVERY MODULE (see also the QA checklist at the bottom):
   • Use ONLY these tokens — no hardcoded colors, spacing, radii, or shadows.
   • Spacing comes from the 8px scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
   • Typography: Inter. Weights 400 / 500 / 600 / 700 only.
   • Cards: 16px radius, 1px --hd-border, 24px padding, --hd-shadow-1.
   • Inputs + buttons: 44px tall, 10px radius. Focus = blue border + soft glow.
   • Content: max 1400px wide, centered; page padding 32px (24 tablet, 16 mobile).
   • One accent: --hd-blue. Green = completed only. Red = danger only.
   • Motion: --hd-anim-fast (120ms) for controls, --hd-anim (180ms) for surfaces,
     --hd-anim-overlay (240ms) for modals/drawers. Hover lifts 1px on controls;
     the Hub launcher tiles are the one sanctioned larger lift.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inter is loaded by each module via <link rel=preconnect + stylesheet> in its <head>
   (see NEW_MODULE_GUIDE.md) — an @import here chained the font request behind this
   file and delayed first paint on every module. */

:root {
  /* ── Color ─────────────────────────────────────────────────────────────── */
  --hd-bg:            #EDF1F7;   /* page background — deep enough that white cards stand out */
  --hd-surface:       #FFFFFF;   /* cards, panels, sidebar (the topbar is NAVY — see TOPBAR below) */
  --hd-border:        #E6EAF0;   /* the ONLY border color */
  --hd-border-input:  #D9DEE7;   /* form control borders */
  --hd-text:          #111827;   /* primary text + titles */
  --hd-text-2:        #6B7280;   /* secondary text, labels */
  --hd-text-3:        #9CA3AF;   /* muted / disabled */
  --hd-blue:          #2563EB;   /* THE accent: actions, active, links, focus */
  --hd-blue-hover:    #1D4ED8;
  --hd-blue-soft:     #EFF4FE;   /* active-row backgrounds, soft chips */
  --hd-green:         #16A34A;   /* completed / success ONLY */
  --hd-green-soft:    #EAF7EF;
  --hd-amber:         #F59E0B;   /* warnings ONLY */
  --hd-amber-soft:    #FEF6E7;
  --hd-red:           #DC2626;   /* danger ONLY */
  --hd-red-soft:      #FEF2F2;
  --hd-focus-ring:    rgba(37, 99, 235, .15);

  /* ── Spacing (8px system — never invent other values) ──────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --hd-r-btn:   10px;   /* buttons */
  --hd-r-input: 10px;   /* inputs, selects, textareas */
  --hd-r-card:  16px;   /* cards, modals, panes */
  --hd-r-badge: 999px;  /* pills / badges */

  /* ── Shadows (only these two) ──────────────────────────────────────────── */
  --hd-shadow-1: 0 1px 2px rgba(0,0,0,.03);
  --hd-shadow-2: 0 4px 12px rgba(0,0,0,.04);

  /* ── Typography (Inter) ────────────────────────────────────────────────── */
  --hd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hd-fs-page:    30px;  /* page title, 700, lh 1.2, tracking -.015em — one size hub-wide (2026-08-30 coherence pass) */
  --hd-fs-section: 24px;  /* section title, 600, lh 1.2 */
  --hd-fs-card:    20px;  /* card title,    600, lh 1.2 */
  --hd-fs-body:    15px;  /* body,          400, lh 1.6 */
  --hd-fs-small:   13px;  /* helper text,   400 */
  --hd-fs-label:   13px;  /* labels: 500, uppercase, letter-spacing .08em */

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --hd-content-max: 1400px;
  --hd-sidebar-w:   280px;
  --hd-topbar-h:    64px;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --hd-anim-fast:    120ms ease-out;                       /* hovers, toggles, small controls */
  --hd-anim:         180ms ease-out;                       /* cards, rows, surface changes */
  --hd-anim-overlay: 240ms cubic-bezier(0.16, 1, 0.3, 1);  /* modals, drawers, toasts */
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--hd-font);
  font-size: var(--hd-fs-body);
  line-height: 1.6;
  color: var(--hd-text);
  background: var(--hd-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { line-height: 1.2; color: var(--hd-text); }
::selection { background: var(--hd-blue-soft); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--hd-border); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--hd-text-3); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--hd-blue); outline-offset: 2px; border-radius: 6px; }

/* ── TOPBAR (the shipped standard — every Edson module uses this shell) ─────
   sticky, 64px, background: linear-gradient(180deg,#013a72,#003466), white text.
   Left: triangle logo + module name (links back to Edson_Hub.html).
   Middle: nav tabs — 100% height, white at 75% opacity, active = full white
   + inset 0 -2px 0 #fff underline. Right: settings icon-btn + avatar + hub-menu.
   Under 700px the tab row scrolls horizontally inside the bar (see the
   hub-adapt-mobile block each module carries). Copy the shell from
   Edson_FieldOps.html or Edson_PM.html, not from memory.

   SUB-BRANDS (deliberate, not drift):
   • Edson_PileLog.html — standalone dark field theme for site tablets.
     Does NOT link this file. Big touch targets, dark steel palette.
   • EF_Process_Hub.html — E&F Builders brand: crimson #A12438 accent,
     black topbar, E&F mark. Does NOT link this file.
   Everything else is Edson blue and must build on these tokens.

   PATCH LAYERS (2026-08-30 audit): modules carry three marked style blocks —
   #hub-adapt-mobile (phone layouts), #hub-adapt-a11y (labels/landmarks/
   reduced-motion), #hub-polish (contrast fixes). Keep them when editing;
   fold their rules into the module's main <style> only deliberately. ── */

/* ── Typography helpers ────────────────────────────────────────────────────── */
.hd-page-title    { font-size: var(--hd-fs-page);    font-weight: 700; line-height: 1.2; color: var(--hd-text); }
.hd-section-title { font-size: var(--hd-fs-section); font-weight: 600; line-height: 1.2; color: var(--hd-text); }
.hd-card-title    { font-size: var(--hd-fs-card);    font-weight: 600; line-height: 1.2; color: var(--hd-text); }
.hd-label { font-size: var(--hd-fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--hd-text-2); }
.hd-help  { font-size: var(--hd-fs-small); font-weight: 400; color: var(--hd-text-2); }

/* ── Card primitive ────────────────────────────────────────────────────────── */
.hd-card {
  background: var(--hd-surface);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-card);
  box-shadow: var(--hd-shadow-1);
  padding: var(--sp-5);
}

/* ── Button system ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border-radius: var(--hd-r-btn);
  font-family: var(--hd-font); font-size: 14px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background var(--hd-anim), box-shadow var(--hd-anim), border-color var(--hd-anim), transform var(--hd-anim);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary, .btn-blue, .btn-navy { background: var(--hd-blue); color: #fff; box-shadow: var(--hd-shadow-1); }
.btn-primary:hover, .btn-blue:hover, .btn-navy:hover { background: var(--hd-blue-hover); }
.btn-secondary { background: var(--hd-surface); color: var(--hd-text); border-color: var(--hd-border-input); }
.btn-secondary:hover { background: var(--hd-bg); }
.btn-danger { background: var(--hd-surface); color: var(--hd-red); border-color: #FCA5A5; }
.btn-danger:hover { background: var(--hd-red-soft); }
.btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: 13px; border-radius: 8px; }

/* ── Badge primitive ───────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--hd-r-badge); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.badge-done { background: var(--hd-green-soft); color: var(--hd-green); }
.badge-prog { background: var(--hd-blue-soft);  color: var(--hd-blue); }
.badge-over { background: var(--hd-red-soft);   color: var(--hd-red); }

/* ── Form control convention ───────────────────────────────────────────────
   Modules should style their inputs to match:
     height 44px · border 1px var(--hd-border-input) · radius var(--hd-r-input)
     focus: border var(--hd-blue) + box-shadow 0 0 0 3px var(--hd-focus-ring)
     label above the input, styled like .hd-label, 8px below it
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══ QA CHECKLIST (run before shipping any module restyle) ═══
   □ Spacing only from the scale (4/8/12/16/24/32/48/64)
   □ Every card: identical padding (24), radius (16), border, shadow
   □ Inter everywhere; weights 400/500/600/700 only; sizes from tokens
   □ No element touches another without intentional spacing
   □ All controls: 44px height, 10px radius, same focus state
   □ Sidebar: white, 280px, active = blue left border + soft blue bg
   □ Primary action obvious; secondary info de-emphasized
   □ No arbitrary values — everything from this file
   □ Phone (390px): zero horizontal page scroll — tables/boards scroll inside
     their own container; nav tabs scroll inside the topbar
   □ Every input/select has a label (or aria-label); page has one <h1>
     and a role="main" container; html has lang="en"
   □ Keyboard: every control reachable, focus ring visible (never strip
     outlines without :focus-visible replacement); drag actions have a
     click/Enter path too
   □ Motion honors prefers-reduced-motion (block at the bottom of this file);
     only transform/opacity are animated
   □ Text contrast ≥ 4.5:1 (3:1 for 24px+): body #6B7280 is the FLOOR on
     white and fails on tinted grounds — use #5D6878 there; --hd-text-3 is
     decorative only, never for text someone must read
   ═════════════════════════════════════════════════════════════ */

/* ── Reduced motion (hub-adapt-a11y): honor the OS setting ── */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ── Keyboard focus (hub-polish): visible ring on every control, keyboard only ── */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--hd-blue,#2563EB) !important;outline-offset:2px}

/* ── Motion layer (hub-animate): one entrance language for overlays,
      press feedback on every button. Killed by the reduced-motion block above. ── */
@keyframes hd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd-rise { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hd-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.modal-overlay.open { animation: hd-fade var(--hd-anim-overlay); }
.modal-overlay.open .modal { animation: hd-rise var(--hd-anim-overlay); }
:where(button):active { transform: scale(.985); }
