/**
 * css/agent.css — shared design tokens + components for the Royal LePage
 * Turner Realty AGENT backend (Agent Hub review, Wave B, 2026-09-11).
 *
 * Converges three drifted dark palettes (dashboard --bg:#0a0a0a/--r:8px vs.
 * deals+office+audit+market+talking-points+explainer --bg:#0e0e10/--r:10px)
 * plus the hub/CMA/Registry light theme onto ONE set -- the dashboard's,
 * per Mike's pick on the review's design canvas. Do NOT load this alongside
 * css/main.css on an agent page: main.css's bare `.section` rules collide
 * with this file's tool content (see pages/agent-deals.html's own note on
 * why it never loads main.css). This file only ever defines `--tokens` and
 * `.ag-*`/`.dd-*` prefixed classes -- no bare element selectors beyond the
 * one html/body reset below, so it is always safe to add to a page that
 * already has its own component CSS.
 *
 * js/agent-shell.js's own nav CSS stays JS-injected (Tier-2, since Avalon
 * and Goose Bay's CMA/Registry pages don't load this file yet) but reads
 * the SAME custom-property names with literal fallbacks, so the shell
 * renders correctly with or without this stylesheet present.
 */
:root {
  --bg:#0a0a0a; --panel:#18181b; --panel-2:#212126; --border:#2a2a2e; --border-hi:#3a3a41;
  --text:#e6e6e6; --text-dim:#a0a0a8;
  --accent:#EA002A; --accent-soft:rgba(234,0,42,.16); --accent-2:#1976d2;
  --good:#2e9e5b; --bad:#c62828; --warn:#ed6c02;
  --amber:#e0a95f; --purple:#a889e8; --blue:#7db3e8;
  --r:8px; --r-sm:6px; --r-pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-hover:0 2px 8px rgba(0,0,0,.45);
  --t:120ms ease;
  --font-head:Raleway,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html, body {
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.5;
}
h1, h2, h3, h4 { font-family:var(--font-head); }
a { color:var(--accent); }
input, select, textarea, button { font-family:inherit; }
.ag-hidden { display:none !important; }
/* Visually-hidden but screen-reader-accessible -- for the one semantic <h1>
   every page still needs (Wave B, 2026-09-11: removing each tool's own
   second brand bar also removed its only <h1>; the shared shell's brand
   link is deliberately NOT an h1, since the same brand appears on every
   page). */
.ag-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── generic tile / card primitives (agent.html's hub-grid family, Wave C) ── */
.ag-tile {
  display:flex; flex-direction:column; gap:10px; background:var(--panel);
  border:1px solid var(--border); border-radius:12px; padding:20px;
  text-decoration:none; color:inherit; transition:border-color var(--t), transform var(--t);
}
.ag-tile:hover { border-color:var(--accent); transform:translateY(-2px); }
.ag-tile .ag-ic { width:26px; height:26px; color:var(--text-dim); }
.ag-tile:hover .ag-ic { color:var(--accent); }
.ag-tile h3 { font-size:16px; color:#fff; margin:0; }
.ag-tile p { margin:0; color:var(--text-dim); font-size:13px; line-height:1.45; }
.ag-tile .ag-go { margin-top:auto; color:var(--accent); font-weight:700; font-size:12.5px; padding-top:2px; }
.ag-tiles-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }

/* ── shared KPI strip + tile-grid vocabulary (Turner Deals dashboard,
   2026-09-10) -- lifted verbatim out of pages/agent-deals.html and
   pages/office.html, which both defined this block inline; ONE copy now. ── */
.dd-strip {
  display:flex; flex-wrap:wrap; gap:16px 30px; align-items:baseline;
  background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r);
  padding:14px 18px; margin:0 0 18px; font-size:13.5px; color:var(--text-dim);
}
.dd-strip b { font-family:var(--font-head); font-size:18px; color:var(--text); }
.dd-warn { color:#ff5468; font-weight:600; }
.dd-degraded { font-size:12px; color:var(--text-dim); margin:0 0 10px; cursor:help; }
.dd-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin:0 0 18px; }
.dd-tile {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px;
  min-height:64px; padding:12px 14px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); text-decoration:none; color:var(--text);
}
.dd-tile:hover, .dd-tile:active { border-color:var(--accent); }
.dd-tile-count { font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--text); }
.dd-tile-label { font-size:13px; color:var(--text-dim); }
.dd-office-link { display:block; margin:0 0 18px; font-size:13px; color:var(--text-dim); }
.dd-office-link a { color:var(--accent); }