/* PlanFlow Internal - SHARED design system (FROZEN 2026-06-16).
   Tokens + shared primitives. Referenced by every module, never copied (Rule 15).
   Values locked from the approved prototype - do not change without Sarge's go. */

:root{
  --bg:#ffffff;
  --strip:#f8fafc;
  --ink:#0f172a;          /* near-black body text - NO grey font */
  --line:#e2e8f0;         /* hairline borders, not boxes */
  --teal:#0d9488;
  --teal-bright:#14b8a6;
  --teal-wash:#ecfdf9;
  --up:#16a34a;
  --warn:#d97706;
  --down:#dc2626;
  --idle:#94a3b8;         /* status DOTS only, never text */
  --r:8px;
  --pad:28px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* --- status dot --- */
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.dot.up{background:var(--up);}
.dot.warn{background:var(--warn);}
.dot.down{background:var(--down);}
.dot.idle{background:var(--idle);}

/* --- status pill (shared component: see shared/status-pill.js) --- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;}
.pill .dot{width:8px;height:8px;}
.tier{font-size:11px;font-weight:800;color:var(--teal);}

/* --- tables (flat) --- */
table{width:100%;border-collapse:collapse;font-size:14px;}
thead th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:8px 10px;border-bottom:2px solid var(--teal);}
tbody td{padding:10px;border-bottom:1px solid var(--line);font-weight:600;vertical-align:middle;}
tbody tr:hover{background:var(--strip);}

/* --- buttons --- */
.btn{appearance:none;border:2px solid var(--teal);background:var(--teal);color:#fff;font:700 13px system-ui;
  padding:8px 16px;border-radius:var(--r);cursor:pointer;}
.btn.ghost{background:#fff;color:var(--teal);}
.btn.mini{padding:5px 11px;font-size:12px;}
.row-actions{display:flex;gap:8px;}

/* --- health strip (shared: Core, Marketing, Backup) --- */
.health{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.h-item{flex:1 1 0;min-width:150px;padding:13px 15px;border-right:1px solid var(--line);}
.h-item:last-child{border-right:0;}
.h-item .svc{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.h-item .state{display:flex;align-items:center;gap:8px;margin-top:7px;font-weight:700;}
.h-item .meta{margin-top:4px;font-size:12px;font-weight:600;}

/* --- footnote --- */
.note{font-size:12px;font-weight:600;margin-top:10px;}
.note b{color:var(--teal);}

/* --- metric tiles (shared: Analytics, Financial) --- */
.tiles{display:flex;flex-wrap:wrap;gap:14px;}
.tile{flex:1 1 150px;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;}
.tile .k{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.tile .v{font-size:26px;font-weight:800;margin-top:6px;}
.tile .d{font-size:12px;font-weight:700;margin-top:3px;}
.d.up{color:var(--up);}
.d.down{color:var(--down);}

/* --- two-column layout (shared: Support, Marketing) --- */
.twocol{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;}

/* --- approval card (shared primitive: Support, Marketing) - PROPOSE-ONLY --- */
.approval{border:2px solid var(--teal);background:var(--teal-wash);border-radius:var(--r);padding:14px;margin-top:14px;}
.approval .flag{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--teal);text-transform:uppercase;}
.approval .what{font-weight:700;margin:8px 0 4px;}
.approval textarea{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:8px;font:inherit;margin-top:8px;resize:vertical;}
.approval .acts{display:flex;gap:8px;margin-top:10px;}