/* ============================================================
   SmrtBoard Design System v1 — "Warm Monarch"
   Approved 2026-07-03 (rendering v8). Spec: design/DESIGN.md
   Source of truth for look & feel. Pages link THIS file;
   per-page CSS may add layout, never redefine tokens.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Light — Monarch-style: neutral light-gray ground, navy-slate ink,
     monarch orange accent, deep teal secondary */
  --bg:        #F4F4F2;
  --surface:   #FFFFFF;
  --surface-2: #EBEBE8;
  --ink:       #1E2D36;
  --ink-soft:  #5F6E76;
  --ink-faint: #96A0A4;
  --line:      #E4E4E0;
  --line-soft: #ECECE9;

  --accent:      #EB5E28;  /* monarch butterfly orange — the ONE brand accent */
  --accent-deep: #C74C1E;
  --accent-tint: #FCEAE0;
  --teal:      #377870;    /* supporting hue: trend lines, secondary icons */
  --teal-tint: #E3EFEC;

  /* semantic status — separate from the accent, never decorative */
  --good:      #2F9E68;
  --good-tint: #E3F3EA;
  --warn:      #C98A1D;
  --warn-tint: #F9EFD9;
  --crit:      #D6453A;
  --crit-tint: #FAE5E1;

  --shadow:      0 1px 2px rgba(30,45,54,.05);
  --shadow-lift: 0 4px 16px rgba(30,45,54,.10);
  --radius:    16px;
  --radius-sm: 11px;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* back-compat alias (rendering v8 used --brass for the teal role) */
  --brass: var(--teal);
  --brass-tint: var(--teal-tint);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark — Claude-style warm charcoal, soft parchment ink */
    --bg:        #262624;
    --surface:   #30302E;
    --surface-2: #3A3A37;
    --ink:       #E3E0D6;
    --ink-soft:  #A8A599;
    --ink-faint: #83817A;
    --line:      #3E3E3A;
    --line-soft: #383836;
    --accent:      #F97F45;
    --accent-deep: #FF9563;
    --accent-tint: #3D2E23;
    --teal:      #63B3A4;
    --teal-tint: #2B3835;
    --good:      #5CBE8E;
    --good-tint: #29372E;
    --warn:      #E0AC5C;
    --warn-tint: #3B3323;
    --crit:      #EE8168;
    --crit-tint: #3E2B25;
    --shadow:      0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.30);
    --shadow-lift: 0 2px 8px rgba(0,0,0,.30), 0 18px 44px rgba(0,0,0,.42);
  }
}

/* explicit user toggle beats the OS preference, both directions */
:root[data-theme="light"] {
  --bg:#F4F4F2; --surface:#FFFFFF; --surface-2:#EBEBE8; --ink:#1E2D36;
  --ink-soft:#5F6E76; --ink-faint:#96A0A4; --line:#E4E4E0; --line-soft:#ECECE9;
  --accent:#EB5E28; --accent-deep:#C74C1E; --accent-tint:#FCEAE0;
  --teal:#377870; --teal-tint:#E3EFEC;
  --good:#2F9E68; --good-tint:#E3F3EA; --warn:#C98A1D; --warn-tint:#F9EFD9;
  --crit:#D6453A; --crit-tint:#FAE5E1;
  --shadow:0 1px 2px rgba(30,45,54,.05);
  --shadow-lift:0 4px 16px rgba(30,45,54,.10);
}
:root[data-theme="dark"] {
  --bg:#262624; --surface:#30302E; --surface-2:#3A3A37; --ink:#E3E0D6;
  --ink-soft:#A8A599; --ink-faint:#83817A; --line:#3E3E3A; --line-soft:#383836;
  --accent:#F97F45; --accent-deep:#FF9563; --accent-tint:#3D2E23;
  --teal:#63B3A4; --teal-tint:#2B3835;
  --good:#5CBE8E; --good-tint:#29372E; --warn:#E0AC5C; --warn-tint:#3B3323;
  --crit:#EE8168; --crit-tint:#3E2B25;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.30);
  --shadow-lift:0 2px 8px rgba(0,0,0,.30),0 18px 44px rgba(0,0,0,.42);
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; color: inherit; } /* buttons must inherit ink (dark mode!) */
a { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.eyebrow {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; color: var(--ink-faint);
}

/* ---------- APP SHELL: left sidebar + content ---------- */
.app { display: flex; align-items: stretch; min-height: 100vh; font-family: var(--font-sans); background: var(--bg); color: var(--ink); }
.sidebar {
  width: 240px; flex: none;
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
  display: flex; flex-direction: column;
  padding: 20px 14px 16px;
  border-right: 1px solid var(--line);
  background: var(--bg); /* Monarch: sidebar sits on page gray, no separate panel */
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  display: grid; place-items: center; color: #fff; flex: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.brand-name b { color: var(--accent); font-weight: 600; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--ink-soft); text-decoration: none;
  padding: 9px 12px; border-radius: 10px; font-size: .94rem; font-weight: 500;
  transition: background .16s, color .16s;
}
.nav a svg, .nav button svg { width: 18px; height: 18px; opacity: .85; flex: none; }
.nav a:hover, .nav button:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--ink); }
.nav .active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); } /* white pill, icon-only tinted */
.nav .active svg { opacity: 1; color: var(--accent); }
/* modules on the roadmap but not built yet */
.nav .soon { opacity: .45; cursor: default; }
.nav .soon:hover { background: transparent; color: var(--ink-soft); }
.soon-tag { margin-left: auto; font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; background: linear-gradient(150deg, var(--teal), var(--accent)); }
.uwrap { display: flex; flex-direction: column; line-height: 1.2; }
.uwrap .uname { font-size: .87rem; font-weight: 600; }
.uwrap .urole { font-size: .74rem; color: var(--ink-soft); }
.uwrap .signout { font-size: .74rem; color: var(--ink-soft); text-decoration: none; }
.uwrap .signout:hover { color: var(--accent); text-decoration: underline; }

/* Guest demo mode — pinned pill so sample data is never mistaken for real */
.demo-banner {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; font-size: .84rem;
  background: var(--accent-tint); color: var(--ink);
  border: 1px solid var(--accent); box-shadow: var(--shadow);
  white-space: nowrap; max-width: calc(100vw - 24px);
}
.demo-banner svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.demo-banner b { color: var(--accent); }

.theme-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  width: 100%; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .82rem; font-weight: 600;
  transition: color .18s, border-color .18s;
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }
.theme-btn svg { width: 16px; height: 16px; }

.content { flex: 1; min-width: 0; }
main { max-width: 1120px; margin: 0 auto; padding: clamp(22px, 4vw, 40px) clamp(18px, 4vw, 44px) 72px; }

/* sidebar folds into a top strip on small screens */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar {
    position: sticky; top: 0; z-index: 20; width: auto; height: auto;
    align-self: stretch; max-width: 100%; /* desktop's flex-start would size it max-content and push the page wide */
    flex-direction: row; align-items: center; gap: 12px;
    padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.3) blur(12px);
  }
  .brand { padding: 0; }
  .brand-name { display: none; }
  .nav { flex-direction: row; overflow-x: auto; flex: 1; min-width: 0; gap: 2px; -webkit-overflow-scrolling: touch; } /* min-width:0 or the strip pushes the page wide */
  .nav a, .nav button { width: auto; white-space: nowrap; padding: 8px 12px; }
  .side-foot { margin: 0; border-top: none; padding: 0; flex-direction: row; align-items: center; }
  .user-chip { display: none; }
  .theme-btn { width: 40px; padding: 0; }
  .theme-btn .tlbl { display: none; }
}

/* ---------- SURFACES ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 40px 2px 15px; }
.section-head h2 { font-family: var(--font-display); font-size: 1.35rem; }
.section-head .meta { font-size: .85rem; color: var(--ink-soft); }

.view { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- HERO / GREETING (Home) ---------- */
.hero { padding: clamp(24px, 4vw, 40px); overflow: hidden; position: relative; }
.hero .eyebrow { margin-bottom: 12px; }
.greeting { font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.015em; }
.greeting .amp { color: var(--accent); font-style: italic; }
.hero-sub { margin-top: 14px; color: var(--ink-soft); font-size: 1.02rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-sub .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); }
.hero-attn { color: var(--ink); font-weight: 600; }
.hero-attn b { color: var(--crit); }

/* ---------- ATTENTION FEED (shared primitive) ---------- */
.attn-list { display: flex; flex-direction: column; }
.attn {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px;
  padding: 15px 20px; border-top: 1px solid var(--line-soft);
  animation: fade .5s both; text-align: left; width: 100%;
  background: transparent; border-left: none; border-right: none; border-bottom: none;
  transition: background .16s; text-decoration: none; color: inherit;
}
.attn:first-child { border-top: none; }
.attn:hover { background: var(--surface-2); }
@keyframes fade { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.sev { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sev.crit { background: var(--crit); box-shadow: 0 0 0 4px var(--crit-tint); }
.sev.warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-tint); }
.sev.info { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.attn-body .t { font-weight: 600; font-size: .98rem; display: block; }
.attn-body .d { font-size: .85rem; color: var(--ink-soft); margin-top: 2px; display: block; }
.tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 5px;
}
.tag svg { width: 12px; height: 12px; }
.attn-more { padding: 13px 20px; color: var(--accent); font-weight: 600; font-size: .88rem; background: transparent; border: none; border-top: 1px solid var(--line-soft); width: 100%; text-align: left; }
.attn-more:hover { background: var(--surface-2); }

/* ---------- MODULE TILES (Home board) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.tile { padding: 20px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s; text-decoration: none; color: inherit; display: block; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tile-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.tile-icon.teal { background: var(--teal-tint); color: var(--teal); }
.tile-icon svg { width: 20px; height: 20px; }
.tile h3 { font-family: var(--font-display); font-size: 1.08rem; }
.tile .big { font-size: 1.7rem; font-weight: 600; margin: 9px 0 3px; letter-spacing: -.02em; }
.tile .sub { font-size: .86rem; color: var(--ink-soft); }
.tile.soon { opacity: .55; }
.tile.soon:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }

/* ---------- STATUS CHIPS & BADGES ---------- */
.badge { font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.badge.crit { background: var(--crit-tint); color: var(--crit); }
.badge.warn { background: var(--warn-tint); color: var(--warn); }
.badge.good { background: var(--good-tint); color: var(--good); }
.chip { font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chip.crit { background: var(--crit-tint); color: var(--crit); }
.chip.warn { background: var(--warn-tint); color: var(--warn); }
.chip.ok { background: var(--good-tint); color: var(--good); }
.delta { font-size: .86rem; font-weight: 600; }
.delta.up { color: var(--good); }
.delta.down { color: var(--crit); }
.auto { font-size: .72rem; color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.auto svg { width: 12px; height: 12px; }

/* ---------- TABS (views within a module) ---------- */
.tabs { display: flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--line-soft); padding: 3px; border-radius: 11px; width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 4px; }
.tabs button, .tabs a { border: none; background: transparent; color: var(--ink-soft); padding: 7px 15px; border-radius: 8px; font-size: .88rem; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .16s, color .16s; }
.tabs button:hover, .tabs a:hover { color: var(--ink); }
.tabs .active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.mtab { display: none; animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
.mtab.show { display: block; }

/* ---------- LAYOUT GRIDS ---------- */
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.grid-2.even { grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 780px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- DATA DISPLAY ---------- */
.stat-row { display: flex; flex-direction: column; }
.stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line-soft); }
.stat:first-child { border-top: none; }
.stat .k { color: var(--ink-soft); font-size: .9rem; }
.stat .v { font-weight: 600; }
.bar { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); }
.kpi { padding: 18px 20px; border-right: 1px solid var(--line-soft); }
.kpi:last-child { border-right: none; }
.kpi .k { font-size: .76rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.kpi .v { font-size: 1.5rem; font-weight: 600; margin-top: 5px; letter-spacing: -.01em; }
@media (max-width:600px){ .kpi { border-right: none; border-bottom: 1px solid var(--line-soft); } }

/* big figure (net worth) — serif, like the rendering */
.nw { padding: 26px; display: flex; flex-direction: column; gap: 4px; }
.nw .big { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; margin: 6px 0; }
.nw .row { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .92rem; }
.spark { margin-top: 16px; width: 100%; height: 62px; display: block; }

/* ---------- CATEGORY / ENTITY CARDS ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
.cat { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s; text-align: left; color: inherit; }
.cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.cat .ci { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; margin-bottom: 12px; }
.cat .ci.teal { background: var(--teal-tint); color: var(--teal); }
.cat .ci svg { width: 18px; height: 18px; }
.cat h3 { font-size: .98rem; font-family: var(--font-display); }
.cat .n { font-size: .84rem; color: var(--ink-soft); margin-top: 4px; }
.cat .flag { margin-top: 11px; font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.cat .flag.warn { color: var(--warn); }
.cat .flag.crit { color: var(--crit); }
.cat .flag.ok { color: var(--good); }
.cat .flag svg { width: 13px; height: 13px; }
button.cat { border: 1px solid var(--line); }

/* ---------- ASSET / TASK LISTS (Upkeep) ---------- */
.asset { padding: 0; overflow: hidden; }
.asset-head { display: flex; align-items: center; gap: 13px; padding: 17px 20px; border-bottom: 1px solid var(--line-soft); }
.asset-head .ci { width: 36px; height: 36px; border-radius: 10px; background: var(--teal-tint); color: var(--teal); display: grid; place-items: center; flex: none; }
.asset-head .ci svg { width: 19px; height: 19px; }
.asset-head h3 { font-family: var(--font-display); font-size: 1.05rem; }
.asset-head .m { font-size: .82rem; color: var(--ink-soft); }
.task { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.task:first-of-type { border-top: none; }
.task .tk { font-weight: 600; font-size: .93rem; }
.task .tc { font-size: .82rem; color: var(--ink-soft); margin-top: 1px; }

/* ---------- CHECKLISTS / TABLES (Rhythm) ---------- */
.todo { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--line-soft); }
.todo:first-child { border-top: none; }
.box { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; }
.box.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.box svg { width: 12px; height: 12px; }
.todo.done .tt { color: var(--ink-faint); text-decoration: line-through; }
.tt { font-size: .93rem; }
.score-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.score-tab th, .score-tab td { text-align: right; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.score-tab th:first-child, .score-tab td:first-child { text-align: left; }
.score-tab thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; }
.score-tab tbody tr:last-child td { border-bottom: none; }
.hit { color: var(--good); font-weight: 600; }
.miss { color: var(--crit); font-weight: 600; }

/* ---------- GOALS ---------- */
.vision { padding: 30px clamp(24px,4vw,42px); background: linear-gradient(140deg, var(--accent-tint), color-mix(in srgb, var(--teal-tint) 60%, var(--surface))); border: 1px solid var(--line); border-radius: var(--radius); }
.vision .eyebrow { color: var(--accent-deep); }
.vision p { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.85rem); line-height: 1.3; margin-top: 12px; letter-spacing: -.01em; }
.goal { padding: 18px 20px; border-top: 1px solid var(--line-soft); }
.goal:first-child { border-top: none; }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.goal h3 { font-size: 1rem; font-family: var(--font-display); }
.goal .pct { font-weight: 600; color: var(--accent); font-size: .92rem; }
.goal .by { font-size: .8rem; color: var(--ink-soft); margin-top: 3px; }
.bucket { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px,1fr)); gap: 11px; }
.bkt { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .92rem; }
.bkt.done { color: var(--ink-faint); }
.bkt.done .bt { text-decoration: line-through; }
.bkt .star { color: var(--teal); flex: none; display: grid; place-items: center; }
.bkt.done .star { color: var(--good); }
.bkt .star svg { width: 16px; height: 16px; }

/* ---------- MEETING TEMPLATES (Rhythm) ---------- */
.meet-grid { padding: 6px 20px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 11px; }

/* ---------- FOOTER ---------- */
.foot { max-width: 1120px; margin: 0 auto; padding: 24px clamp(18px,4vw,44px) 48px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ink-faint); font-size: .82rem; border-top: 1px solid var(--line); }
.pill-note { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-weight: 600; font-size: .76rem; }
.pill-note .sev { width: 7px; height: 7px; }