/*
 * The look every back-office screen shares.
 *
 * Frank, 23 Sep 2026, on the Master Hub: "The Plans page looks better." So the
 * Plans palette is the one palette: a light grey ground, white cards, a dark
 * band across the top, and it follows the phone's dark mode rather than
 * throwing a sheet of white at him at night.
 *
 * Atkinson Hyperlegible Next throughout (Frank, 17 Sep 2026). Form controls do
 * not inherit a font on their own, so they are told to.
 *
 * This file carries no numbers, no prices and no names. It is a stylesheet, so
 * it is a plain file; the pages that carry figures are served from behind the
 * password instead.
 */
/*
 * TWO THEMES, AND NEITHER OF THEM IS WHITE.
 *
 * Frank, 24 Sep 2026: "Can I get a light and dark mode for the EZ Voice hub?
 * Doesn't have to be one-tone dark, it can be lighter and darker colors - I
 * told you I am just not a fan of white or off white."
 *
 * So the light theme is TINTED, not white. The ground is a cool blue-grey and
 * a card is lighter than the ground without ever reaching #FFFFFF. The dark
 * theme is layered rather than one flat black: three surface depths, blue-cast
 * rather than neutral charcoal, so a card reads as a card.
 *
 * Auto follows the phone. Day and Night override it. The override is written
 * as data-theme on <html> by theme.js, which every back-office page loads, so
 * a choice made in the hub follows into the widget inside its frame.
 */
:root, :root[data-theme="light"]{
  --bg:#E6ECF5; --card-bg:#F2F6FC; --card-2:#DDE5F1;
  --border:#C3D1E6; --border-soft:#D6E0EF;
  --text:#141B2B; --text-muted:#465169;
  --band:#14213D; --band-ink:#F2F5FA; --band-ink-2:#B9C3D6;
  --accent:#1F5FD0; --accent-soft:#D7E5FB; --accent-green:#127A48;
  --neg:#B3261E; --warn:#8A5A00; --warn-soft:#F7E9CE;
  --grid:#CFDBEC; --axis:#6B7789; --bar-1:#2a78d6; --bar-2:#eb6834;
}
:root[data-theme="dark"]{
  --bg:#0B1220; --card-bg:#141D2E; --card-2:#1B2536;
  --border:#2C3A50; --border-soft:#222D40;
  --text:#EAEEF5; --text-muted:#AAB4C6;
  --band:#081426; --band-ink:#EAEEF5; --band-ink-2:#9FB0CC;
  --accent:#5B8EEB; --accent-soft:#1B2B47; --accent-green:#3FB67C;
  --neg:#E2685E; --warn:#E3B05A; --warn-soft:#2A2314;
  --grid:#25324A; --axis:#7C879B; --bar-1:#3987e5; --bar-2:#d95926;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220; --card-bg:#141D2E; --card-2:#1B2536;
    --border:#2C3A50; --border-soft:#222D40;
    --text:#EAEEF5; --text-muted:#AAB4C6;
    --band:#081426; --band-ink:#EAEEF5; --band-ink-2:#9FB0CC;
    --accent:#5B8EEB; --accent-soft:#1B2B47; --accent-green:#3FB67C;
    --neg:#E2685E; --warn:#E3B05A; --warn-soft:#2A2314;
    --grid:#25324A; --axis:#7C879B; --bar-1:#3987e5; --bar-2:#d95926;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text); padding:12px; line-height:1.5;
}
button,input,select,textarea{font-family:inherit}

/* Use the canvas. A wide monitor gets a wide layout, not a phone column
   floating in margins (Frank, three times). */
.wrap{max-width:1600px;margin:0 auto}

.header{background:var(--band);color:var(--band-ink);padding:16px 20px 18px;border-radius:10px;margin:-4px 0 16px}
.header h1{font-size:21px;margin:0 0 3px;color:var(--band-ink);letter-spacing:-.01em}
.header .subhead{font-size:11.5px;color:var(--band-ink-2);margin:0}

.card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin:0 0 14px}
.card h2{font-size:15px;margin:0 0 3px;color:var(--accent)}
.card h3{font-size:13px;margin:16px 0 6px}
.card .cap{font-size:11.5px;color:var(--text-muted);margin:0 0 12px;line-height:1.5}

/* One box per button: one border, one radius, nothing inset. */
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.pills button{background:var(--card-2);border:1px solid var(--border);color:var(--text-muted);
  border-radius:8px;font-size:12px;font-weight:700;padding:8px 13px;cursor:pointer}
.pills button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pills button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 16px}
.stat{background:var(--card-2);border:1px solid var(--border);border-radius:8px;padding:13px 15px}
.stat.key{background:var(--accent-soft);border-color:var(--accent)}
.stat .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.stat .n{font-size:26px;font-weight:800;margin:5px 0 3px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat.key .n{color:var(--accent-green)}
.stat .s{font-size:11px;color:var(--text-muted);line-height:1.45}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-soft)}
th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}

.pw{display:flex;gap:10px;max-width:460px;margin:0 0 12px}
.pw input{flex:1;background:var(--card-2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:16px;padding:11px 13px;min-width:0}
.pw button,.go{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:8px;
  font-size:14px;font-weight:800;padding:10px 16px;cursor:pointer}
.quiet{background:var(--card-2);color:var(--text);border:1px solid var(--border);border-radius:8px;
  font-size:12px;font-weight:700;padding:8px 13px;cursor:pointer}
.msg{font-size:14px;color:var(--neg);min-height:21px;margin:0 0 8px}

.note{font-size:11.5px;color:var(--text-muted);line-height:1.55;margin:10px 0 0}
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--card-2);border:1px solid var(--border);color:var(--text-muted)}
.tag.hot{background:var(--neg);border-color:var(--neg);color:#fff}
.tag.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.tag.ok{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.empty{font-size:13px;color:var(--text-muted);padding:18px 0}