/* =============================================================================
   HUNT CLIENT PORTAL — STYLESHEET
   -----------------------------------------------------------------------------
   Tokens taken directly from the Hunt Architects design system.
   Sections:
     1.  Tokens / reset
     2.  Generic UI: buttons, forms, modals, toasts, tables
     3.  App header / brand
     4.  Login + invite + reset pages
     5.  App shell, sidebar, map, state list
     6.  Dashboard, project cards
     7.  Project page
     8.  Admin layout + screens
     9.  Footer
     10. Utilities + responsive
   ============================================================================= */

/* ------------------------------------------------------------------ 1. tokens */
:root {
  --hunt-charcoal:#0D0D0D;
  --hunt-ivory:#EFEEEB;
  --hunt-warm-grey:#B7B0AB;
  --hunt-red:#EF3E23;
  --hunt-white:#FFFFFF;
  --charcoal-80:#3D3D3C;
  --charcoal-60:#6E6D6C;
  --charcoal-40:#9E9D9B;
  --charcoal-20:#CECECB;
  --ivory-80:#F2F1EE;
  --ivory-60:#F5F4F2;
  --warm-grey-20:#F1EFEE;
  --rule:var(--charcoal-20);
  /* v1.1 — Status colour system. Live=charcoal, Pending=warm-grey,
     Complete=muted forest green, High Priority=Hunt red. Applied to status
     dots, tags, pills, map pins and (for High Priority) card outlines. */
  --status-live:           var(--hunt-charcoal);
  --status-pending:        var(--hunt-warm-grey);
  --status-complete:       #1F6F3E;
  --status-high-priority:  var(--hunt-red);
  --font-sans:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-serif:"Lora",Georgia,"Times New Roman",serif;
  --ease-out:cubic-bezier(0.2,0.6,0.2,1);
  --shadow-sm: 0 1px 2px rgba(13,13,13,0.06), 0 1px 3px rgba(13,13,13,0.10);
  --shadow-md: 0 4px 6px rgba(13,13,13,0.08), 0 2px 4px rgba(13,13,13,0.05);
  --shadow-lg: 0 12px 24px rgba(13,13,13,0.12), 0 4px 8px rgba(13,13,13,0.06);
}

/* Shared status classes — applied to whichever element needs the colour:
   .dot.status-live  → coloured background
   .tag.status-live  → coloured text + border
   .card.status-high-priority → red outline (high-priority projects only)
   .hunt-marker.status-live .dot → coloured map pin
   Status keys derive from the project's status text via statusClass() in JS,
   slugified ("High Priority" → "high-priority"). */
.dot.status-live           { background: var(--status-live); }
.dot.status-pending        { background: var(--status-pending); }
.dot.status-complete       { background: var(--status-complete); }
.dot.status-high-priority  { background: var(--status-high-priority); }
.tag.status-live           { color: var(--status-live);          border-color: var(--status-live); }
.tag.status-pending        { color: var(--status-pending);       border-color: var(--status-pending); }
.tag.status-complete       { color: var(--status-complete);      border-color: var(--status-complete); }
.tag.status-high-priority  { color: var(--status-high-priority); border-color: var(--status-high-priority); }
/* High Priority projects rely on the in-tile status indicator (red dot +
   "HIGH PRIORITY" label) for visual flagging — no full-tile outline.
   Earlier versions had `.card.status-high-priority { outline: ... }` but
   it read as too aggressive next to the refined Hunt aesthetic. */

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--hunt-ivory);
  color:var(--hunt-charcoal);
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
hr { border:0; border-top:1px solid var(--rule); margin:24px 0; }

/* ----------------------------------------------------------- 2. generic UI */

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  border:1px solid var(--hunt-charcoal);
  background:var(--hunt-charcoal);
  color:var(--hunt-ivory);
  font-family:var(--font-sans);
  font-size:11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  padding:11px 20px;
  cursor:pointer;
  transition:opacity 160ms var(--ease-out);
}
.btn:hover { opacity:0.85; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn-primary { /* default */ }
.btn-ghost {
  background:transparent;
  color:var(--hunt-charcoal);
  border-color:var(--rule);
}
.btn-ghost:hover { border-color:var(--hunt-charcoal); opacity:1; }
.btn-danger {
  background:var(--hunt-red);
  border-color:var(--hunt-red);
  color:var(--hunt-white);
}
.btn-link {
  background:transparent; border:0; color:var(--hunt-charcoal);
  text-decoration:underline; padding:0;
  font-size:12px; font-weight:500; letter-spacing:0; text-transform:none;
  cursor:pointer;
}
.btn-link:hover { opacity:0.6; }
.btn-sm { padding:7px 14px; font-size:10px; }

/* forms */
.field { display:block; margin-bottom:18px; }
.field label,
.label {
  display:block;
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--charcoal-60);
  margin-bottom:8px;
}
.field input,
.field select,
.field textarea,
input.input,
select.input,
textarea.input {
  width:100%;
  border:1px solid var(--rule);
  background:var(--hunt-white);
  font-family:var(--font-sans);
  font-size:14px;
  color:var(--hunt-charcoal);
  padding:11px 14px;
  outline:none;
  transition:border-color 160ms var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
input.input:focus,
select.input:focus,
textarea.input:focus {
  border-color:var(--hunt-charcoal);
}
.field textarea { min-height:100px; resize:vertical; }
.field-row {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
@media (max-width:600px) { .field-row { grid-template-columns:1fr; } }
.field-help {
  font-size:11px; color:var(--charcoal-60); margin-top:6px;
}
.field-error {
  font-size:11px; color:var(--hunt-red); margin-top:6px;
}

/* v2.0 — bulk-edit projects grid (admin Projects → + Bulk upload) */
.bulk-grid-wrap { overflow-x:auto; border:1px solid var(--rule); background:#fff; }
.bulk-grid { border-collapse:collapse; width:max-content; min-width:100%; font-size:12px; }
.bulk-grid thead th {
  position:sticky; top:0; z-index:1; background:var(--ivory);
  font-size:9px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--charcoal-60); padding:7px 8px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--hunt-charcoal);
}
.bulk-grid tbody td { border-bottom:1px solid var(--rule); padding:0; }
.bulk-grid tbody td input,
.bulk-grid tbody td select {
  border:0; background:transparent; width:100%; padding:6px 8px;
  font:inherit; font-size:12px; color:var(--hunt-charcoal);
}
.bulk-grid tbody td input:focus,
.bulk-grid tbody td select:focus {
  outline:2px solid var(--hunt-red); outline-offset:-2px; background:#fff;
}
.bulk-grid .bulk-rownum {
  padding:6px 8px; color:var(--charcoal-40); font-size:10px;
  text-align:right; white-space:nowrap;
}
.bulk-grid .bulk-actions { padding:4px 8px; white-space:nowrap; }
.bulk-grid tr.bulk-row-error td { background:rgba(239,62,35,0.07); }

.checkbox-row {
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  font-size:13px; color:var(--hunt-charcoal);
}
.checkbox-row input { width:auto; }

/* OTP / 6-digit code input — large, centred, monospace, letter-spaced so
   each digit is clearly separated. Used on accept-invite + reset-password. */
.otp-input {
  font-family:"Courier New",Courier,monospace !important;
  font-size:22px !important;
  font-weight:600 !important;
  letter-spacing:8px !important;
  text-align:center;
  padding:14px 14px !important;
}

/* modals */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(13,13,13,0.45);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  z-index:1000;
  animation:overlayIn 180ms var(--ease-out);
}
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
.modal {
  background:var(--hunt-white);
  border:1px solid var(--rule);
  padding:32px;
  width:100%; max-width:520px;
  max-height:calc(100vh - 64px);
  overflow:auto;
  box-shadow:var(--shadow-lg);
  animation:modalIn 220ms var(--ease-out);
}
.modal-wide { max-width:720px; }
@keyframes modalIn {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
.modal-confirm .modal-message {
  font-family:var(--font-serif); font-size:18px; line-height:1.4;
  margin:0 0 24px;
}
.modal-actions {
  display:flex; gap:12px; justify-content:flex-end;
  margin-top:24px;
}
.modal h2 {
  font-family:var(--font-serif); font-size:24px; font-weight:400;
  letter-spacing:-0.01em;
  margin:0 0 6px;
}
.modal .modal-eyebrow {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--charcoal-60);
  margin-bottom:6px;
}
.modal-divider { border-top:1px solid var(--rule); margin:20px 0; }

/* toasts */
#toast-host {
  position:fixed; top:24px; right:24px;
  display:flex; flex-direction:column; gap:8px;
  z-index:2000; pointer-events:none;
}
.toast {
  background:var(--hunt-charcoal);
  color:var(--hunt-ivory);
  padding:14px 20px;
  font-size:13px; font-weight:500;
  min-width:240px; max-width:380px;
  opacity:0; transform:translateX(20px);
  transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  pointer-events:auto;
  box-shadow:var(--shadow-md);
}
.toast.show { opacity:1; transform:translateX(0); }
.toast-error { background:var(--hunt-red); color:var(--hunt-white); }
.toast-success { background:#1f6f3e; color:var(--hunt-white); }

/* tables */
.table-wrap {
  background:var(--hunt-white);
  border:1px solid var(--rule);
}
.table {
  width:100%; border-collapse:collapse;
  font-size:13px;
}
.table thead {
  background:var(--ivory-80);
  border-bottom:1px solid var(--rule);
}
.table th {
  text-align:left;
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--charcoal-60);
  padding:14px 16px;
  vertical-align:middle;
}
.table td {
  padding:14px 16px;
  border-top:1px solid var(--rule);
  vertical-align:middle;
}
.table tr:first-child td { border-top:0; }
.table .row-actions {
  display:flex; gap:6px; justify-content:flex-end;
}
.table .truncate {
  max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tag {
  display:inline-block;
  font-size:10px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase;
  padding:3px 8px;
  border:1px solid var(--rule);
  color:var(--charcoal-80);
}
.tag-admin { color:var(--hunt-red); border-color:var(--hunt-red); }
/* Legacy status-tag classes — kept for backward compat with any v1.0 cached
   pages. New code uses .tag.status-* from the status colour system block. */
.empty-state {
  padding:48px 24px;
  text-align:center;
  color:var(--charcoal-60);
  border:1px dashed var(--rule);
}

/* loading skeleton */
.skeleton {
  background:linear-gradient(90deg, var(--ivory-80) 25%, var(--charcoal-20) 50%, var(--ivory-80) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s infinite;
}
@keyframes skeletonShimmer {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.loading-screen {
  display:flex; align-items:center; justify-content:center;
  min-height:50vh;
  color:var(--charcoal-60);
  font-size:11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
}

/* ------------------------------------------------------------- 3. app header */
.app-header {
  background:var(--hunt-ivory);
  border-bottom:1px solid var(--rule);
  padding:20px 32px;
  display:flex;
  align-items:center;
  gap:24px;
  position:sticky;
  top:0;
  z-index:10;
}
.brand-lockup { display:flex; align-items:center; gap:20px; min-width:0; }
.brand-lockup .logo-link {
  display:flex; align-items:center;
  flex-shrink:0;
  transition:opacity 160ms var(--ease-out);
}
.brand-lockup .logo-link:hover { opacity:0.7; }
.brand-lockup .logo { height:56px; width:auto; display:block; flex-shrink:0; }
.brand-divider { width:1px; height:44px; background:var(--charcoal-20); }
.brand-meta { display:flex; flex-direction:column; gap:2px; line-height:1.1; }
.brand-meta .eyebrow {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
}
.brand-meta .label {
  font-family:var(--font-serif); font-size:18px; font-weight:400;
  letter-spacing:-0.01em; color:var(--hunt-charcoal);
}
.header-spacer { flex:1; }
.header-filters {
  display:flex; gap:0; align-items:center;
  border:1px solid var(--rule); background:var(--hunt-white);
}
.filter-group {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  border-right:1px solid var(--rule);
}
.filter-group:last-child { border-right:0; }
.filter-group label {
  font-size:9px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
}
.filter-group select {
  border:0; background:transparent;
  font-family:var(--font-sans); font-size:13px; font-weight:500;
  color:var(--hunt-charcoal);
  cursor:pointer; padding:0; min-width:80px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%230D0D0D' stroke-width='1' fill='none'/></svg>");
  background-repeat:no-repeat;
  background-position:right center;
  padding-right:16px;
}
.filter-group select:focus { outline:none; }

.user-menu {
  position:relative;
}
.user-menu-btn {
  display:flex; align-items:center; gap:10px;
  background:transparent; border:1px solid var(--rule);
  padding:8px 12px;
  cursor:pointer; font-family:inherit;
  transition:border-color 160ms var(--ease-out);
}
.user-menu-btn:hover { border-color:var(--hunt-charcoal); }
.user-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--hunt-charcoal); color:var(--hunt-ivory);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600;
}
.user-menu-btn .user-name {
  font-size:12px; font-weight:500;
  text-align:left; line-height:1.2;
}
.user-menu-btn .user-role {
  font-size:9px; color:var(--charcoal-60);
  letter-spacing:0.12em; text-transform:uppercase;
}
.user-menu-dropdown {
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--hunt-white); border:1px solid var(--rule);
  min-width:200px; padding:8px 0;
  box-shadow:var(--shadow-md);
  z-index:50;
  display:none;
}
.user-menu.open .user-menu-dropdown { display:block; }
.user-menu-dropdown a, .user-menu-dropdown button {
  display:block; width:100%; text-align:left;
  border:0; background:transparent;
  padding:10px 16px;
  font-family:inherit; font-size:13px;
  color:var(--hunt-charcoal);
  cursor:pointer;
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background:var(--ivory-80); }
.user-menu-dropdown .menu-divider { border-top:1px solid var(--rule); margin:8px 0; }
.user-menu-dropdown .menu-item-meta {
  padding:10px 16px;
  font-size:11px; color:var(--charcoal-60);
  cursor:default; border-bottom:1px solid var(--rule);
}

/* admin tab pill in header */
.header-mode {
  display:flex; align-items:center;
  border:1px solid var(--rule);
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  background:var(--hunt-white);
}
.header-mode a {
  padding:8px 14px;
  color:var(--charcoal-60);
  cursor:pointer;
  border-right:1px solid var(--rule);
  transition:color 160ms var(--ease-out);
}
.header-mode a:last-child { border-right:0; }
.header-mode a.active { color:var(--hunt-charcoal); background:var(--ivory-80); }

/* --------------------------------------------------------- 4. login pages */
.auth-page {
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--hunt-ivory);
}
.auth-page .app-header { background:transparent; border-bottom:0; }
.auth-shell {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
}
.auth-card {
  width:100%; max-width:420px;
  background:var(--hunt-white);
  border:1px solid var(--rule);
  padding:48px 40px;
}
.auth-card h1 {
  font-family:var(--font-serif);
  font-size:32px; font-weight:400;
  letter-spacing:-0.02em;
  margin:0 0 8px;
}
.auth-card .auth-eyebrow {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin-bottom:14px;
}
.auth-card .auth-intro {
  color:var(--charcoal-80);
  margin:0 0 28px;
  font-size:14px;
}
.auth-card .btn { width:100%; padding:13px 20px; }
.auth-card .auth-aux {
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--rule);
  display:flex; justify-content:space-between;
  font-size:12px;
}
.auth-card .auth-aux a { color:var(--charcoal-80); border-bottom:1px solid var(--rule); padding-bottom:1px; }
.auth-card .auth-aux a:hover { border-color:var(--hunt-charcoal); color:var(--hunt-charcoal); }
.auth-success {
  background:var(--ivory-80); border-left:3px solid var(--hunt-charcoal);
  padding:14px 18px; margin-bottom:20px;
  font-size:13px;
}
.auth-error {
  background:#fdebe7; border-left:3px solid var(--hunt-red);
  padding:14px 18px; margin-bottom:20px;
  font-size:13px; color:var(--hunt-charcoal);
}

/* ------------------------------------------------------- 5. app shell + sidebar */
.app-shell {
  display:grid;
  grid-template-columns:340px 1fr;
  min-height:calc(100vh - 69px);
}
@media (max-width:1100px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
}

.sidebar {
  background:var(--hunt-white);
  border-right:1px solid var(--rule);
  padding:32px 24px 48px;
  position:sticky;
  top:69px;
  align-self:start;
  max-height:calc(100vh - 69px);
  overflow-y:auto;
}
.sidebar-eyebrow {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin:0 0 12px;
}

/* ----- map (Leaflet) ----- */
.map-wrap {
  position:relative;
  width:100%;
  aspect-ratio: 1000 / 850;
  background:var(--hunt-ivory);
  border:1px solid var(--rule);
  margin-bottom:32px;
  overflow:hidden;
}

/* Leaflet container — neutralise its default font + bg so the map doesn't
   look out of place against the Hunt design. */
.leaflet-container {
  background:var(--hunt-ivory);
  font-family:var(--font-sans);
  font-size:11px;
  outline:none;
}
.leaflet-container a { color:var(--hunt-charcoal); }

/* Subdued attribution */
.leaflet-control-attribution {
  background:rgba(239, 238, 235, 0.85);
  font-size:9px;
  font-weight:400;
  padding:2px 6px;
  color:var(--charcoal-60);
}
.leaflet-control-attribution a { color:var(--charcoal-80); }

/* Zoom controls — squared, monochrome to match Hunt's UI */
.leaflet-bar a, .leaflet-bar a:hover {
  background:var(--hunt-white);
  border:1px solid var(--rule);
  color:var(--hunt-charcoal);
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  width:26px; height:26px;
  line-height:24px;
  border-radius:0;
}
.leaflet-bar a:hover { background:var(--ivory-80); }
.leaflet-bar a:first-child { border-bottom:0; }
.leaflet-touch .leaflet-bar a { width:30px; height:30px; line-height:28px; }
.leaflet-control-zoom { margin:8px !important; box-shadow:var(--shadow-sm); }

/* Custom Hunt-styled marker (used via L.divIcon).
   Note: do NOT set `position` here — Leaflet's `.leaflet-marker-icon` rule sets
   `position: absolute` and our markers must keep that for Leaflet's transform-based
   positioning to render at the correct lat/lng on screen. */
.hunt-marker {
  background:transparent !important;
  border:0 !important;
}
.hunt-marker .dot {
  display:block;
  width:10px; height:10px;
  /* Default fallback colour; status-specific colours apply via the
     .hunt-marker.status-* class on the parent (set in australia-map.js). */
  background:var(--status-live);
  border:1.5px solid var(--hunt-ivory);
  border-radius:50%;
  box-shadow:0 0 0 1px var(--hunt-charcoal);
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  transition:transform 200ms var(--ease-out);
}
/* Per-status colours for map pins — the .hunt-marker root carries the
   status-* class, but .dot is the visible element so we target it here. */
.hunt-marker.status-live           .dot { background: var(--status-live); }
.hunt-marker.status-pending        .dot { background: var(--status-pending); }
.hunt-marker.status-complete       .dot { background: var(--status-complete); }
.hunt-marker.status-high-priority  .dot { background: var(--status-high-priority); }
.hunt-marker:hover .dot,
.hunt-marker.is-active .dot {
  transform:translate(-50%,-50%) scale(1.4);
}
.hunt-marker .pulse {
  position:absolute;
  left:50%; top:50%;
  width:24px; height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  /* Pulse matches the marker's status colour. Default to the live colour;
     specific statuses override below. */
  background:var(--status-live);
  opacity:0;
  pointer-events:none;
}
.hunt-marker.status-pending        .pulse { background: var(--status-pending); }
.hunt-marker.status-complete       .pulse { background: var(--status-complete); }
.hunt-marker.status-high-priority  .pulse { background: var(--status-high-priority); }
.hunt-marker.is-active .pulse {
  animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform:translate(-50%,-50%) scale(0.6); opacity:0.6; }
  100% { transform:translate(-50%,-50%) scale(2.4); opacity:0; }
}

/* Hunt-styled tooltip (used via marker.bindTooltip with className: "hunt-tooltip") */
.leaflet-tooltip.hunt-tooltip {
  background:var(--hunt-charcoal);
  color:var(--hunt-ivory);
  border:0;
  border-radius:0;
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:500;
  padding:6px 10px;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.leaflet-tooltip.hunt-tooltip:before { border-top-color:var(--hunt-charcoal); }
.leaflet-tooltip-top.hunt-tooltip:before { border-top-color:var(--hunt-charcoal); }
.leaflet-tooltip-bottom.hunt-tooltip:before { border-bottom-color:var(--hunt-charcoal); }

/* ----- state list ----- */
.state-block { margin-bottom:24px; }
.state-block:last-child { margin-bottom:0; }
.state-header {
  display:flex; align-items:baseline; gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
  margin-bottom:8px;
}
.state-header .name {
  font-size:11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--hunt-charcoal);
}
.state-header .count {
  font-size:10px; font-weight:500; color:var(--charcoal-60);
  margin-left:auto;
}
.state-list { list-style:none; margin:0; padding:0; }
.state-list li button {
  display:block; width:100%;
  text-align:left;
  border:0; background:transparent;
  padding:8px 0;
  cursor:pointer;
  font-family:inherit;
  border-bottom:1px solid transparent;
  transition:opacity 160ms var(--ease-out);
}
.state-list li button:hover { opacity:0.6; }
.state-list li button .pname {
  font-size:13px; font-weight:500; color:var(--hunt-charcoal);
  display:block;
}
.state-list li button .ploc {
  font-size:11px; color:var(--charcoal-60);
  display:block; margin-top:2px;
}

/* --------------------------------------------------------------- 6. main + dashboard */
.main {
  padding:48px 56px 96px;
  max-width:1280px;
  width:100%;
}
@media (max-width:900px) { .main { padding:32px 24px 64px; } }

.intro {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px;
  margin-bottom:48px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
}
.intro h1 {
  font-family:var(--font-serif);
  font-size:clamp(36px, 4vw, 52px);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 8px;
  color:var(--hunt-charcoal);
}
.intro .eyebrow {
  font-size:11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin-bottom:14px; display:block;
}
.intro p {
  margin:0;
  max-width:52ch;
  font-size:14px; color:var(--charcoal-80);
}
.intro .summary {
  text-align:right;
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:18px;
}
.intro .summary .summary-stat { text-align:right; }
.intro .summary .num {
  font-family:var(--font-serif); font-size:64px; font-weight:400;
  line-height:1; letter-spacing:-0.02em;
}
/* Beds total runs across two numbers — slimmer than the headline project
   count so it doesn't dominate. */
.intro .summary .num--beds {
  font-size:36px;
  letter-spacing:-0.01em;
}
.intro .summary .num--beds .num-sep {
  color:var(--charcoal-40);
  margin:0 4px;
  font-size:0.7em;
  vertical-align:0.15em;
}
/* v2.1 — separator in the "live / total" projects count */
.intro .summary .num .num-sep {
  color:var(--charcoal-40);
  margin:0 6px;
  font-size:0.5em;
  vertical-align:0.22em;
  font-weight:400;
}
.intro .summary .lbl {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin-top:4px;
}

/* state group */
.state-group { margin-bottom:36px; }
.state-group-header {
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:18px;
}
.state-group-header h2 {
  font-family:var(--font-serif);
  font-size:24px; font-weight:400;
  letter-spacing:-0.01em;
  margin:0;
}
.state-group-header .meta {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
}
.state-group-header .rule {
  flex:1; height:1px; background:var(--rule); align-self:center;
}

/* ----- v1.1 PROJECT CARDS / TILES -------------------------------------------
   Tiles are self-contained: REF · STATE eyebrow at the top, project name +
   status + scope + beds at the bottom, all over the image OR coloured
   placeholder background. Only [STATE] · [TOWN] sits below the tile.
   The text overlay is permanent — when an image is present, a gradient
   backdrop keeps the text legible. */
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:24px 20px;
}
.card {
  border:0; padding:0; background:transparent;
  text-align:left; cursor:pointer;
  font-family:inherit;
  display:flex; flex-direction:column;
  transition:opacity 200ms var(--ease-out);
}
.card:hover { opacity:0.85; }
.card-image {
  width:100%;
  aspect-ratio:4/3;
  background:var(--hunt-charcoal);
  position:relative;
  overflow:hidden;
}
.card-image img {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Tone variants — set the placeholder background colour when no image is
   uploaded. Subtle texture pseudos add interest without competing with
   the overlay text. */
.card-image.tone-charcoal { background:var(--hunt-charcoal); }
.card-image.tone-charcoal::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06), transparent 50%);
  pointer-events:none; z-index:1;
}
.card-image.tone-warm { background:var(--hunt-warm-grey); }
.card-image.tone-warm::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none; z-index:1;
}
.card-image.tone-ivory { background:var(--ivory-80); border:1px solid var(--rule); }
.card-image.tone-ivory::after {
  content:""; position:absolute; top:0; left:0; right:0; height:60%;
  background:linear-gradient(180deg, rgba(13,13,13,0.04), transparent);
  pointer-events:none; z-index:1;
}

/* When an image is present we need a gradient backdrop so the overlay text
   stays legible over arbitrary photo content. Heavier at the bottom where
   the title sits, lighter at the top behind the eyebrow.
   Bottom stop bumped to 0.85 from 0.80 so even bright/light-bottom photos
   keep enough contrast for the serif title. */
.card-image.has-image::before {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0.50) 0%,
    rgba(0,0,0,0.10) 28%,
    rgba(0,0,0,0.10) 48%,
    rgba(0,0,0,0.85) 100%);
  z-index:1;
  pointer-events:none;
}
/* Belt-and-braces: subtle text shadow on overlay text when over an image.
   Invisible on plain photos (text is already legible from the gradient),
   but adds a halo on edge cases (bright/busy mid-photo backgrounds). Not
   applied on no-image tones — would look odd on solid charcoal/warm/ivory. */
.card-image.has-image .card-overlay__top,
.card-image.has-image .card-overlay__status,
.card-image.has-image .card-overlay__name,
.card-image.has-image .card-overlay__meta {
  text-shadow: 0 1px 3px rgba(0,0,0,0.40);
}

/* The text overlay — always rendered, sits above any backdrop or image. */
.card-image .card-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:16px 18px;
  color:var(--hunt-ivory);
  z-index:2;
  pointer-events:none; /* parent .card button handles the click */
}
.card-image .card-overlay__top {
  font-size:9px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--hunt-warm-grey);
}
/* v2.1 — Hunt project number under the ref on the dashboard tile */
.card-image .card-overlay__huntno {
  display:block; margin-top:3px;
  font-size:8px; letter-spacing:0.12em; opacity:0.85;
}
.card-image .card-overlay__bottom {
  display:flex; flex-direction:column; gap:6px;
  min-width:0;
}
.card-image .card-overlay__status {
  display:inline-flex; align-items:center; gap:6px;
  font-size:9px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--hunt-ivory);
  align-self:flex-start;
}
.card-image .card-overlay__status .dot {
  width:7px; height:7px; border-radius:50%;
  flex-shrink:0;
}
.card-image .card-overlay__name {
  font-family:var(--font-serif);
  font-size:20px; font-weight:400;
  letter-spacing:-0.01em; line-height:1.15;
  margin:0;
  color:var(--hunt-ivory);
}
.card-image .card-overlay__meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:11px;
  color:var(--hunt-ivory);
  opacity:0.9;
}
.card-image .card-overlay__sep { opacity:0.5; }

/* Tone-ivory uses dark text on a light placeholder. Only applies when no
   image — image-cards always use the default ivory text on dark gradient. */
.card-image.tone-ivory.no-image .card-overlay { color:var(--hunt-charcoal); }
.card-image.tone-ivory.no-image .card-overlay__top { color:var(--charcoal-60); }
.card-image.tone-ivory.no-image .card-overlay__status { color:var(--hunt-charcoal); }
.card-image.tone-ivory.no-image .card-overlay__name { color:var(--hunt-charcoal); }
.card-image.tone-ivory.no-image .card-overlay__meta { color:var(--charcoal-80); opacity:1; }
/* Warm tone: the default eyebrow colour (--hunt-warm-grey) is identical to
   the warm tile background, making the REF eyebrow invisible. Override to
   a darker grey that contrasts with the warm-grey fill. */
.card-image.tone-warm.no-image .card-overlay__top { color:var(--charcoal-60); }

/* Admin Documents project-picker tile placeholder. Uses simpler .pid/.pname
   markup than the dashboard tile (no .card-overlay__* structure). Sits above
   the tone-* ::after texture overlay (z-index:1) so it stays readable. */
.card-image .placeholder {
  position:absolute; inset:0;
  padding:14px 16px;
  display:flex; flex-direction:column; justify-content:flex-start;
  z-index:2;
  color:#fff;
}
.card-image .placeholder .pid {
  font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  opacity:0.85;
  margin-bottom:8px;
}
.card-image .placeholder .pname {
  font-family:'Lora', Georgia, serif;
  font-size:18px; font-weight:500;
  line-height:1.2;
}
.card-image.tone-warm .placeholder            { color:var(--hunt-charcoal); }
.card-image.tone-warm .placeholder .pid       { color:var(--charcoal-60); opacity:1; }
.card-image.tone-ivory .placeholder           { color:var(--hunt-charcoal); }
.card-image.tone-ivory .placeholder .pid      { color:var(--charcoal-60); opacity:1; }

/* Red-flag indicator — sits in the top-right of the tile when set. Separate
   from the High Priority status (which paints the whole tile outline). */
.card-image .card-overlay__redflag {
  position:absolute;
  top:14px; right:14px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--hunt-red);
  box-shadow:0 0 0 1.5px rgba(255,255,255,0.4);
  z-index:3;
}

/* Below the tile — only the state and town, uppercase, compact. */
.card-meta-line {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin-top:10px;
  line-height:1.3;
}

/* --------------------------------------------------------- 7. project page */
.project-page { display:none; }
.project-page.active { display:block; }
.dashboard-page.hidden { display:none; }

.project-back {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  border:0; background:transparent; cursor:pointer;
  padding:0; margin-bottom:32px;
  font-family:inherit;
  transition:opacity 160ms var(--ease-out);
}
.project-back:hover { opacity:0.6; }
.project-back svg { width:14px; height:14px; }

/* v1.1 — header row at the top of a project page. Back button on the left,
   Download PDF button on the right. */
.project-header-actions {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  margin-bottom:32px;
}
.project-header-actions .project-back { margin-bottom:0; }

.project-hero {
  width:100%;
  aspect-ratio:21/9;
  background:var(--hunt-charcoal);
  position:relative;
  margin-bottom:48px;
  overflow:hidden;
}
.project-hero img {
  width:100%; height:100%; object-fit:cover; display:block;
  position:absolute; inset:0;
}
/* Tone variants — control the background when no image is uploaded.
   When an image IS present, the image covers any tone. */
.project-hero.tone-charcoal { background:var(--hunt-charcoal); }
.project-hero.tone-warm     { background:var(--hunt-warm-grey); }
.project-hero.tone-ivory    { background:var(--ivory-80); }
/* Gradient backdrop for image case — keeps the caption legible against
   arbitrary photo content. Same logic as the tile's .has-image overlay
   but tuned for the wider 21:9 hero. */
.project-hero.has-image::before {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.05) 30%,
    rgba(0,0,0,0.05) 55%,
    rgba(0,0,0,0.70) 100%);
  z-index:1;
  pointer-events:none;
}
.project-hero .hero-caption {
  position:absolute; left:32px; bottom:24px; right:32px;
  color:var(--hunt-ivory);
  z-index:2;
}
.project-hero .hero-caption .id {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--hunt-warm-grey);
  margin-bottom:8px;
}
.project-hero .hero-caption .name {
  font-family:var(--font-serif); font-size:36px; font-weight:400;
  letter-spacing:-0.02em; line-height:1.05;
  max-width:24ch;
  margin:0;
}
/* Ivory tone uses dark text — only applies when no image is uploaded,
   since image-cards always use the dark-gradient + ivory-text treatment. */
.project-hero.tone-ivory.no-image .hero-caption        { color:var(--hunt-charcoal); }
.project-hero.tone-ivory.no-image .hero-caption .id    { color:var(--charcoal-60); }
.project-hero.tone-ivory.no-image .hero-caption .name  { color:var(--hunt-charcoal); }
/* Warm tone: the default eyebrow colour (--hunt-warm-grey) is identical to
   the warm tile background, so the eyebrow would vanish. Bump it darker. */
.project-hero.tone-warm.no-image .hero-caption .id     { color:var(--charcoal-60); }
/* Text shadow on image case for an extra legibility safety net against
   very bright or busy photo backgrounds. */
.project-hero.has-image .hero-caption .id,
.project-hero.has-image .hero-caption .name {
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}

.project-grid {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:64px;
  align-items:start;
}
@media (max-width:900px) {
  .project-grid { grid-template-columns:1fr; gap:32px; }
}

.project-side {
  border-top:1px solid var(--hunt-charcoal);
  padding-top:24px;
}
.side-block {
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.side-block:last-child { border-bottom:0; }
.side-block .lbl {
  font-size:9px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin-bottom:6px;
  display:block;
}
.side-block .val {
  font-size:13px; color:var(--hunt-charcoal); line-height:1.4;
}
.side-block .val.serif {
  font-family:var(--font-serif); font-size:18px;
  letter-spacing:-0.01em;
}
.side-block .pill {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase;
}
.side-block .pill .dot {
  width:8px; height:8px; border-radius:50%;
}
/* Legacy ok/warn/done variants kept for any straggling references; the
   .dot.status-* classes from the status colour system are the canonical
   way to set dot colour. */
.side-block .pill .dot.ok { background:var(--status-live); }
.side-block .pill .dot.warn { background:var(--status-high-priority); }
.side-block .pill .dot.done { background:var(--status-complete); }
.side-block a.maps-link {
  font-size:12px;
  border-bottom:1px solid var(--hunt-charcoal);
  display:inline-block;
  padding-bottom:1px;
  transition:opacity 160ms var(--ease-out);
}
.side-block a.maps-link:hover { opacity:0.6; }

.project-main { min-width:0; }

/* tabs */
.tabs {
  display:flex; gap:0;
  border-bottom:1px solid var(--rule);
  margin-bottom:32px;
}
.tab {
  border:0; background:transparent;
  padding:14px 24px 14px 0;
  margin-right:24px;
  font-family:inherit;
  font-size:11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--charcoal-60);
  cursor:pointer;
  position:relative;
  transition:color 160ms var(--ease-out);
}
.tab:hover { color:var(--hunt-charcoal); }
.tab.active { color:var(--hunt-charcoal); }
.tab.active::after {
  content:""; position:absolute;
  left:0; right:24px; bottom:-1px; height:1px;
  background:var(--hunt-red);
}
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* overview */
.overview-block { margin-bottom:40px; }
.overview-block:last-child { margin-bottom:0; }
.overview-block h3 {
  font-family:var(--font-sans);
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--charcoal-60);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}
.overview-block p {
  font-family:var(--font-serif); font-size:18px; font-weight:400;
  line-height:1.45; letter-spacing:-0.005em;
  color:var(--hunt-charcoal);
  margin:0; max-width:64ch;
}
.overview-block.compact p {
  font-family:var(--font-sans); font-size:14px;
  line-height:1.6; color:var(--charcoal-80);
  letter-spacing:0;
}
.snapshot-callout {
  border-left:2px solid var(--hunt-red);
  padding:0 0 0 20px;
  margin-bottom:40px;
}
.snapshot-callout .lbl {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin-bottom:8px;
}
.snapshot-callout p {
  font-family:var(--font-serif); font-size:22px; font-weight:400;
  line-height:1.35; letter-spacing:-0.01em;
  margin:0;
}
/* v2.1 — Scope now leads the Overview tab (replaces the old snapshot callout) */
.overview-block.scope-lead p { font-size:20px; }

.contacts-row {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:8px;
}
@media (max-width:700px) { .contacts-row { grid-template-columns:1fr; } }
.contact .role {
  font-size:9px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin-bottom:6px;
}
.contact .who { font-size:13px; font-weight:600; color:var(--hunt-charcoal); }
.contact .email {
  font-size:12px; color:var(--charcoal-80);
  display:block; margin-top:2px;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  width:fit-content;
}
/* v2.0 — contact phone line (matches email treatment, no underline) */
.contact .phone {
  font-size:12px; color:var(--charcoal-80);
  display:block; margin-top:3px;
  width:fit-content;
}

/* v2.0 — bulleted Background / Proposed Works (replaces the <p> paragraphs) */
.overview-block .bullet-list {
  margin:0; padding-left:1.1em;
  font-family:var(--font-serif); font-size:18px; font-weight:400;
  line-height:1.45; letter-spacing:-0.005em;
  color:var(--hunt-charcoal); max-width:64ch;
}
.overview-block .bullet-list li { margin:0 0 8px; padding-left:4px; }
.overview-block .bullet-list li:last-child { margin-bottom:0; }

/* v2.0 — project sidebar beds, one line per category */
.side-block .beds-line {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:5px;
}
.side-block .beds-line:last-child { margin-bottom:0; }
.side-block .beds-line-lbl { font-size:11px; color:var(--charcoal-60); }
.side-block .beds-line-val.serif {
  font-family:var(--font-serif); font-size:16px; letter-spacing:-0.01em;
}

/* v2.2 — DOHDA care-minutes sub-rows (Target / Actual indented under each %) */
.side-block .beds-line.sub { padding-left:14px; }
.side-block .beds-line.sub .beds-line-val.serif { font-size:13px; }

/* v2.0 — dashboard portfolio beds, split by category */
.intro .summary .beds-breakdown {
  display:flex; flex-direction:column; gap:6px; align-items:flex-end;
}
.intro .summary .beds-cat { display:flex; align-items:baseline; gap:10px; }
.intro .summary .beds-cat-lbl {
  font-size:9px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--charcoal-60);
}
.intro .summary .beds-cat-val {
  font-family:var(--font-serif); font-size:26px; line-height:1; letter-spacing:-0.01em;
}
.intro .summary .beds-cat-val i {
  font-style:normal; color:var(--charcoal-40);
  margin:0 4px; font-size:0.7em; vertical-align:0.15em;
}
@media (max-width:768px) {
  .intro .summary .beds-breakdown { align-items:flex-start; }
  .side-block .beds-line { justify-content:flex-start; }
}

/* file list */
.file-list { list-style:none; margin:0; padding:0; }
.file-group { margin-bottom:32px; }
.file-group:last-child { margin-bottom:0; }
.file-group-head {
  font-family:var(--font-sans);
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--charcoal-60);
  margin:0 0 4px;
  padding-bottom:8px;
  border-bottom:1px solid var(--hunt-charcoal);
}
.file-row {
  display:grid;
  grid-template-columns:160px 1fr auto;
  align-items:center;
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.file-row.file-row--simple {
  grid-template-columns:1fr auto;
  padding:12px 0;
}
.file-row:first-child { border-top:1px solid var(--hunt-charcoal); }
.file-row.file-row--simple:first-child { border-top:0; }
.file-row .cat {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
}
.file-row .name {
  font-family:var(--font-serif); font-size:18px; font-weight:400;
  letter-spacing:-0.005em;
  color:var(--hunt-charcoal);
  display:flex; align-items:center; gap:10px;
}
.file-row .open-link {
  font-size:11px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--hunt-charcoal);
  border:0; background:transparent;
  border-bottom:1px solid var(--hunt-charcoal);
  padding:0 0 1px 0;
  cursor:pointer; font-family:inherit;
  transition:opacity 160ms var(--ease-out);
}
.file-row .open-link:hover { opacity:0.6; }
.file-row .file-actions {
  display:flex;
  gap:18px;
  align-items:center;
  justify-self:end;
}
@media (max-width:700px) {
  .file-row { grid-template-columns:1fr; gap:6px; padding:16px 0; }
  .file-row .open-link { justify-self:start; }
  .file-row .file-actions { justify-self:start; }
}

/* ---------------------------------------------------------------- 8. admin */
.admin-shell {
  display:grid;
  grid-template-columns:240px 1fr;
  min-height:calc(100vh - 69px);
}
@media (max-width:900px) {
  .admin-shell { grid-template-columns:1fr; }
  .admin-nav { border-right:0; border-bottom:1px solid var(--rule); }
}
.admin-nav {
  background:var(--hunt-white);
  border-right:1px solid var(--rule);
  padding:32px 0;
  position:sticky; top:69px;
  align-self:start;
  max-height:calc(100vh - 69px);
  overflow-y:auto;
}
.admin-nav-title {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--charcoal-60);
  padding:0 24px 16px;
  margin:0 0 8px;
  border-bottom:1px solid var(--rule);
}
.admin-nav a {
  display:flex; align-items:center; gap:10px;
  padding:12px 24px;
  font-size:13px; color:var(--charcoal-80);
  cursor:pointer;
  border-left:2px solid transparent;
  transition:background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.admin-nav a:hover { color:var(--hunt-charcoal); background:var(--ivory-80); }
.admin-nav a.active {
  color:var(--hunt-charcoal);
  background:var(--ivory-80);
  border-left-color:var(--hunt-red);
  font-weight:600;
}
/* v2.1 — external link to the standalone admin form guide (opens a new tab) */
.admin-nav-guide {
  margin-top:12px;
  padding-top:20px;
  border-top:1px solid var(--rule);
  color:var(--charcoal-60);
  font-size:12px;
}

.admin-main { padding:48px 56px 96px; max-width:1280px; }
@media (max-width:900px) { .admin-main { padding:32px 24px 64px; } }

.admin-page-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px;
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
}
.admin-page-header h1 {
  font-family:var(--font-serif);
  font-size:36px; font-weight:400;
  letter-spacing:-0.02em;
  margin:0 0 6px;
}
.admin-page-header .eyebrow {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  display:block; margin-bottom:8px;
}
.admin-page-header p {
  margin:6px 0 0; max-width:60ch;
  color:var(--charcoal-80);
}
.admin-page-actions { display:flex; gap:10px; flex-shrink:0; }

.metric-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin-bottom:32px;
}
.metric-card {
  background:var(--hunt-white);
  padding:20px 24px;
}
.metric-card .lbl {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
  margin-bottom:8px;
}
.metric-card .num {
  font-family:var(--font-serif); font-size:36px; font-weight:400;
  letter-spacing:-0.02em; line-height:1;
}
.metric-card .delta { font-size:11px; color:var(--charcoal-60); margin-top:6px; }

.section-heading {
  display:flex; align-items:baseline; gap:16px;
  margin:32px 0 16px;
}
.section-heading h2 {
  font-family:var(--font-serif); font-size:22px; font-weight:400;
  letter-spacing:-0.01em; margin:0;
}
.section-heading .meta {
  font-size:10px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--charcoal-60);
}
.section-heading .rule {
  flex:1; height:1px; background:var(--rule); align-self:center;
}

/* doc upload zone */
.upload-zone {
  border:2px dashed var(--rule);
  padding:32px 24px;
  text-align:center;
  background:var(--ivory-80);
  cursor:pointer;
  transition:border-color 160ms var(--ease-out), background 160ms var(--ease-out);
  margin-bottom:16px;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color:var(--hunt-charcoal);
  background:var(--hunt-white);
}
.upload-zone .upload-prompt { font-size:13px; color:var(--charcoal-80); }
.upload-zone strong { color:var(--hunt-charcoal); }

/* events log */
.events-list {
  list-style:none; margin:0; padding:0;
  background:var(--hunt-white); border:1px solid var(--rule);
}
.events-list li {
  padding:14px 20px;
  border-bottom:1px solid var(--rule);
  font-size:13px;
  display:grid; grid-template-columns:160px 1fr auto; gap:16px;
  align-items:center;
}
.events-list li:last-child { border-bottom:0; }
.events-list .ev-time {
  font-size:11px; color:var(--charcoal-60);
}
.events-list .ev-actor {
  font-weight:500;
}
.events-list .ev-detail {
  font-family:var(--font-serif); font-size:15px;
  text-align:right;
  color:var(--charcoal-80);
}

/* ---------------------------------------------------------------- 9. footer */
.app-footer {
  border-top:1px solid var(--rule);
  padding:32px 56px 48px;
  margin-top:64px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px;
  font-size:11px; color:var(--charcoal-60);
}
.app-footer .left {
  font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
}
.app-footer .right { text-align:right; max-width:60ch; line-height:1.5; }
@media (max-width:900px) {
  .app-footer { padding:32px 24px; flex-direction:column; align-items:flex-start; }
  .app-footer .right { text-align:left; }
}

/* -------------------------------------------------------- 10. utilities */
.muted { color:var(--charcoal-60); }
.text-sm { font-size:12px; }
.text-xs { font-size:11px; }
.text-right { text-align:right; }
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.gap-2 { gap:8px; } .gap-4 { gap:16px; }
.mb-2 { margin-bottom:8px; } .mb-4 { margin-bottom:16px; } .mb-6 { margin-bottom:24px; }
.mt-2 { margin-top:8px; } .mt-4 { margin-top:16px; } .mt-6 { margin-top:24px; }
.hidden { display:none !important; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* -------------------------------------------------- 11. mobile responsive
   Standard mobile-friendly overrides. Targets phones (<=768px) and very
   small phones (<=480px). The desktop layout above is preserved unchanged
   above this breakpoint. */
@media (max-width:768px) {
  /* App header — allow wrap, two-row layout: brand+user on row 1, filters
     full-width on row 2. Smaller logo + paddings to fit narrow screens. */
  .app-header {
    padding:12px 16px;
    gap:12px;
    flex-wrap:wrap;
  }
  .brand-lockup { gap:14px; min-width:0; flex:1; }
  .brand-lockup .logo { height:40px; }
  .brand-divider { height:32px; }
  .brand-meta .label { font-size:15px; }
  .brand-meta .eyebrow { font-size:9px; }
  .header-spacer { display:none; }

  .header-filters {
    order:3;
    flex-basis:100%;
    overflow-x:auto;
  }
  .filter-group { padding:8px 12px; }
  .filter-group select { font-size:12px; min-width:60px; }

  .header-mode { font-size:9px; }
  .header-mode a { padding:6px 10px; }

  .user-menu-btn { padding:6px 8px; gap:6px; }
  .user-menu-btn .user-name,
  .user-menu-btn .user-role { display:none; }

  /* Auth pages */
  .auth-shell { padding:20px 16px; }
  .auth-card { padding:32px 24px; }
  .auth-card h1 { font-size:26px; }

  /* Main content padding */
  .main { padding:24px 16px 48px; }
  .admin-main { padding:24px 16px 48px; }

  /* Dashboard intro */
  .intro {
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    margin-bottom:32px;
  }
  .intro .summary { text-align:left; }
  .intro .summary .num { font-size:48px; }

  /* Project cards — single column with smaller gap */
  .cards {
    grid-template-columns:1fr;
    gap:24px;
  }

  /* Project page */
  .project-hero { aspect-ratio:16/9; margin-bottom:32px; }
  .project-hero .hero-caption { left:16px; bottom:16px; right:16px; }
  .project-hero .hero-caption .name { font-size:22px; }

  /* Admin page header */
  .admin-page-header {
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .admin-page-header h1 { font-size:28px; }
  .admin-page-actions { width:100%; flex-wrap:wrap; }

  /* Tables — wrap in horizontal scroll so they don't overflow the page */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table { min-width:560px; }

  /* Events list — stack columns */
  .events-list li {
    grid-template-columns:1fr;
    gap:4px;
    padding:12px 16px;
  }
  .events-list .ev-detail { text-align:left; }

  /* Tabs — horizontal scroll instead of wrap */
  .tabs {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
  }
  .tab { white-space:nowrap; flex-shrink:0; }

  /* Modals — fit small screens */
  .modal-overlay { padding:16px; }
  .modal { padding:24px 20px; }
  .modal h2 { font-size:20px; }

  /* Section headings */
  .section-heading h2 { font-size:18px; }

  /* Footer */
  .app-footer { padding:24px 16px; }

  /* Snapshot/overview text */
  .snapshot-callout p { font-size:18px; }
  .overview-block p { font-size:16px; }
}

@media (max-width:480px) {
  /* Very small phones */
  .brand-meta .label { font-size:13px; }
  .brand-meta .eyebrow { display:none; }
  .auth-card { padding:28px 20px; }
  .auth-card h1 { font-size:22px; }
  .project-hero .hero-caption .name { font-size:18px; }
  .intro .summary .num { font-size:40px; }
}