:root{
  --bg:#030912; --bg2:#071324; --blue:#0070f3; --purple:#7c3aed; --cyan:#00d4ff;
  --ink:#e8eef7; --muted:#8aa0bd; --line:rgba(255,255,255,.09);
  --ok:#1fbf75; --bad:#ff4d6d; --warn:#f5a623; --cf:#f6821f;
  --glass:rgba(255,255,255,.045);
}
*{box-sizing:border-box}
body{
  margin:0;background:
    radial-gradient(900px 500px at 12% -8%,rgba(124,58,237,.20),transparent),
    radial-gradient(900px 500px at 100% 0,rgba(0,212,255,.14),transparent),
    var(--bg);
  color:var(--ink);font-family:Manrope,system-ui,sans-serif;min-height:100vh;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:600;margin:.2em 0}
h1{font-size:1.7rem}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.86em}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.center{text-align:center}
.trunc{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;border-bottom:1px solid var(--line);
  background:rgba(3,9,18,.7);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.brand a,.brand{color:var(--ink);font-family:Fraunces,serif;font-size:1.25rem}
.brand b{color:var(--cyan)}
.logo{color:var(--purple)}
.topbar nav a{margin-left:20px;color:var(--ink);font-weight:600;font-size:.95rem}
.topbar nav a.muted{color:var(--muted)}

.container{max-width:1080px;margin:28px auto;padding:0 24px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;margin-bottom:18px}

/* cards / glass */
.card{border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:20px}
.glass{background:var(--glass);backdrop-filter:blur(12px);
  box-shadow:0 10px 40px rgba(0,0,0,.35)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--ink);font-weight:600;
  padding:9px 15px;border-radius:10px;cursor:pointer;font-size:.9rem;font-family:Manrope}
.btn:hover{border-color:var(--cyan)}
.btn.small{padding:6px 11px;font-size:.82rem}
.btn.primary{background:linear-gradient(120deg,var(--blue),var(--purple));border:none}
.btn.primary:hover{filter:brightness(1.1)}

/* tables */
.table{width:100%;border-collapse:collapse}
.table th{ text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table.compact td,.table.compact th{padding:7px 9px;font-size:.86rem}
.table tr:last-child td{border-bottom:none}
.table-foot{padding-top:10px}

/* pills */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem;
  font-weight:700;border:1px solid transparent}
.pill.ok{background:rgba(31,191,117,.14);color:#5be3a6;border-color:rgba(31,191,117,.4)}
.pill.bad{background:rgba(255,77,109,.14);color:#ff8197;border-color:rgba(255,77,109,.4)}
.pill.warn{background:rgba(245,166,35,.14);color:#ffc870;border-color:rgba(245,166,35,.4)}
.pill.cf{background:rgba(246,130,31,.14);color:#ffb877;border-color:rgba(246,130,31,.4)}

/* score */
.score{font-family:Fraunces,serif;font-size:1.3rem;font-weight:600}
.score span{font-size:.8rem;color:var(--muted)}
.score-Excellent{color:#5be3a6}.score-Good{color:var(--cyan)}
.score-Fair{color:#ffc870}.score-Needs{color:#ff8197}

/* key-value */
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;margin:0}
.kv dt{color:var(--muted);font-size:.85rem}
.kv dd{margin:0}

/* stats */
.stat-row{display:flex;gap:14px;margin:14px 0}
.stat{flex:1;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.stat b{display:block;font-family:Fraunces,serif;font-size:1.6rem}
.stat span{color:var(--muted);font-size:.8rem}
.stat-ok b{color:#5be3a6}.stat-bad b{color:#ff8197}

/* tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab{background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:600;font-size:.88rem;font-family:Manrope}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-color:var(--cyan);background:rgba(0,212,255,.08)}
.loading,.panel .loading{color:var(--muted);padding:20px}

/* alerts */
.alert{padding:11px 14px;border-radius:10px;margin-bottom:14px;border:1px solid var(--line)}
.alert.ok{background:rgba(31,191,117,.1);border-color:rgba(31,191,117,.4)}
.alert.err{background:rgba(255,77,109,.1);border-color:rgba(255,77,109,.4)}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:380px}
.form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;color:var(--muted)}
.form input{padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--ink);font-size:.95rem;font-family:Manrope}
.form input:focus{outline:none;border-color:var(--cyan)}
.form textarea{padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--ink);font-size:.92rem;font-family:Manrope;resize:vertical}
.form textarea:focus{outline:none;border-color:var(--cyan)}
.form .form-actions{flex-direction:row;gap:10px;align-items:center;margin-top:4px}
.page-actions{display:flex;gap:10px;align-items:center}
.btn.ghost{background:transparent}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.alert.ok{border-color:rgba(31,191,117,.4);background:rgba(31,191,117,.08);color:#9ff0c8}
.checkrow{flex-direction:row;align-items:center;gap:8px;font-size:.9rem;color:var(--ink)}
.form input[type=file]{padding:8px;font-size:.85rem}

.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:30px 0}

/* htmx indicator */
.htmx-indicator{display:none}
.htmx-request .htmx-indicator{display:inline}
.htmx-request.htmx-indicator{display:inline}

/* ── Light theme ─────────────────────────────────────────────────────────────
   Additive. Nothing above this comment is modified, so the dark default is
   byte-for-byte unchanged unless <html data-theme="light"> is set.

   Token redefinition alone is NOT enough here. These rules use literal colors
   and would break on a light background:
     .topbar        rgba(3,9,18,.7)      -> a dark bar floating on a white page
     .btn           rgba(255,255,255,.05)-> invisible
     .form input    rgba(0,0,0,.25)      -> black boxes
     .pill/.score/.stat  pastels (#5be3a6 #ff8197 #ffc870 #ffb877 #9ff0c8)
                                          -> tuned for dark, unreadable on light
   Brand cyan #00d4ff also fails contrast on white, so light mode darkens it. */

:root{ color-scheme:dark; }

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f7fb; --bg2:#e9eef6;
  --blue:#0057bf; --purple:#6127c4; --cyan:#00758d;
  --ink:#0e1626; --muted:#55617a;
  --line:rgba(14,22,38,.14);
  --ok:#0b7a58; --bad:#c0392b; --warn:#9a6200; --cf:#c25c0a;
  --glass:#ffffff;
}

[data-theme="light"] body{
  background:
    radial-gradient(900px 500px at 12% -8%,rgba(97,39,196,.07),transparent),
    radial-gradient(900px 500px at 100% 0,rgba(0,117,141,.07),transparent),
    var(--bg);
}
[data-theme="light"] a:hover{ text-decoration:underline }

/* surfaces */
[data-theme="light"] .topbar{ background:rgba(255,255,255,.88) }
[data-theme="light"] .card{
  background:#fff;
  box-shadow:0 1px 2px rgba(14,22,38,.06),0 6px 20px rgba(14,22,38,.05);
}

/* controls */
[data-theme="light"] .btn{ background:#fff }
[data-theme="light"] .btn:hover{ background:#f2f6fc }
[data-theme="light"] .btn.ghost{ background:transparent }
[data-theme="light"] .btn.danger{ background:transparent }
[data-theme="light"] .form input,
[data-theme="light"] .form textarea{ background:#fff }

/* status pills — dark text on a light tint */
[data-theme="light"] .pill.ok  { background:rgba(11,122,88,.12); color:#0b7a58; border-color:rgba(11,122,88,.45) }
[data-theme="light"] .pill.bad { background:rgba(192,57,43,.10); color:#a5301f; border-color:rgba(192,57,43,.45) }
[data-theme="light"] .pill.warn{ background:rgba(154,98,0,.12);  color:#8a5800; border-color:rgba(154,98,0,.45) }
[data-theme="light"] .pill.cf  { background:rgba(194,92,10,.12); color:#a34f08; border-color:rgba(194,92,10,.45) }

/* scores + stats */
[data-theme="light"] .score-Excellent{ color:#0b7a58 }
[data-theme="light"] .score-Fair     { color:#8a5800 }
[data-theme="light"] .score-Needs    { color:#a5301f }
[data-theme="light"] .stat-ok b { color:#0b7a58 }
[data-theme="light"] .stat-bad b{ color:#a5301f }

/* tabs + alerts */
[data-theme="light"] .tab.active{ background:rgba(0,117,141,.08) }
[data-theme="light"] .alert.ok { background:rgba(11,122,88,.09); border-color:rgba(11,122,88,.40); color:#0b6a4d }
[data-theme="light"] .alert.err{ background:rgba(192,57,43,.08); border-color:rgba(192,57,43,.40); color:#a5301f }

/* theme toggle button in the topbar */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:20px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;
  background:transparent;color:var(--muted);cursor:pointer;line-height:0;
}
.theme-toggle:hover{ color:var(--ink);border-color:var(--cyan) }
.theme-toggle svg{ width:16px;height:16px }

/* ═══════════════════════════════════════════════════════════════════════════
   ARGOS SUITE CHROME (2026-08-20)
   Icon rail + flyouts, topbar with the IA shield and app switcher, and the
   shared company footer — matching Service / Compass / Concierge / Counsel /
   Verify / Endorse.

   Layout is a grid keyed on `body:has(> .rail)` rather than a wrapper div.
   That is deliberate: login, mfa, enroll and recovery invoke the "foot"
   template WITHOUT invoking "nav", so any opening tag emitted by "nav" would
   leave those pages with an unbalanced closing tag. Grid areas need no
   wrapper, and the pre-auth pages simply do not match the selector and stay on
   normal flow.
   ═══════════════════════════════════════════════════════════════════════════ */

body:has(> .rail) {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-areas:
    "rail topbar"
    "rail main"
    "rail footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
body:has(> .rail) > .rail    { grid-area: rail; }
body:has(> .rail) > .topbar  { grid-area: topbar; }
body:has(> .rail) > main     { grid-area: main; min-width: 0; }
body:has(> .rail) > .ia-footer { grid-area: footer; }

/* ── Icon rail ───────────────────────────────────────────────────────────────
   No overflow property here on purpose. .rail-tip is absolutely positioned and
   escapes sideways via left:calc(100% + 10px); CSS coerces overflow-x to a
   clipping value whenever overflow-y is anything but visible, which silently
   makes every hover tooltip invisible. Five fixed controls never need to
   scroll. */
.rail {
  width: 68px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  background: rgba(0, 0, 0, .25);
  border-right: 1px solid var(--line);
  z-index: 60;
}
.rail-mark {
  width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 8px; text-decoration: none;
}
.rail-mark img { width: 34px; height: 34px; display: block; border-radius: 5px; }
.rail-mark:hover { text-decoration: none; }
.rail-btn {
  position: relative;
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; padding: 0;
  transition: color .12s, background .12s;
}
.rail-btn:hover, .rail-btn.on, .rail-btn[aria-expanded="true"] {
  color: var(--ink); background: var(--glass); text-decoration: none;
}
.rail-btn.on { box-shadow: inset 2px 0 0 var(--blue); }
.rail-btn svg { width: 20px; height: 20px; }
.rail-spacer { flex: 1; }
.rail-tip {
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%); white-space: nowrap;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, visibility .12s;
  transition-delay: .35s; z-index: 100;
}
.rail-btn:hover .rail-tip { opacity: 1; visibility: visible; }

/* ── Rail flyout ─────────────────────────────────────────────────────────── */
.flyouts { position: fixed; top: 0; left: 68px; height: 100vh; z-index: 100; pointer-events: none; }
.flyout {
  position: absolute; bottom: 12px; left: 0;
  width: 236px; padding: 14px 10px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 12px 0 32px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.flyout.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.flyout-eyebrow {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: 2px 10px 8px;
}
.flyout-user { padding: 0 10px 10px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.flyout a {
  display: block; padding: 8px 10px; color: var(--ink);
  border-radius: 8px; font-size: .9rem; text-decoration: none;
}
.flyout a:hover { background: var(--glass); text-decoration: none; }

/* ── Topbar ──────────────────────────────────────────────────────────────────
   64px bar / 40px badge / 1.4rem wordmark / 44px controls with 22px glyphs —
   the suite standard. */
.topbar {
  height: 64px;
  /* justify-content is reset explicitly: the pre-existing .topbar rule earlier
     in this file sets space-between, which fights the margin-left:auto used to
     group the controls at the right edge. */
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  padding: 0 clamp(16px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 9, 18, .7);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 55;
}
.topbar-badge { width: 40px; height: 40px; flex: none; border-radius: 6px; display: block; }
.topbar-brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.topbar-brand:hover { text-decoration: none; }
.topbar-brand-word {
  font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 1.4rem;
  line-height: 1; color: var(--ink); letter-spacing: -.01em;
}
.topbar-brand-suffix {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
/* margin-left:auto on the FIRST control only — on every one it spreads them
   apart instead of grouping them at the right edge. */
.topbar-icon-btn {
  width: 44px; height: 44px; flex: none; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.topbar-icon-btn:hover, .topbar-icon-btn[aria-expanded="true"] {
  color: var(--ink); background: var(--glass); border-color: var(--line);
}
.topbar-icon-btn svg { width: 22px; height: 22px; }
.topbar-icon-btn:first-of-type { margin-left: auto; }

/* ── App switcher ────────────────────────────────────────────────────────────
   A child of <body>, never of .topbar — .topbar sets backdrop-filter, which per
   spec establishes a containing block for position:fixed descendants, so a
   panel nested inside it would anchor to the bar instead of the viewport. */
.waffle-panel {
  position: fixed; top: 70px; right: 14px;
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  padding: 14px; z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.waffle-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.waffle-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px 10px; border-bottom: 1px solid var(--line);
  margin-bottom: 10px; font-size: 13px;
}
.waffle-hdr strong { color: var(--ink); font-weight: 600; }
.waffle-hdr span { color: var(--muted); font-size: 11px; }
.waffle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.waffle-tile {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px;
  border-radius: 8px; text-decoration: none; color: var(--ink);
  border: 1px solid transparent; transition: background .12s ease;
}
.waffle-tile:hover { background: rgba(0, 112, 243, .10); border-color: rgba(0, 112, 243, .32); text-decoration: none; }
.waffle-tile.current { background: rgba(124, 58, 237, .14); border-color: rgba(124, 58, 237, .40); }
.waffle-tile-ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.waffle-tile-name { font-weight: 600; font-size: 13px; }
.waffle-tile-tag { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.waffle-ftr {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 10px; display: flex; justify-content: space-between;
}
.waffle-ftr span { color: var(--muted); }

/* ── Company footer ──────────────────────────────────────────────────────── */
.ia-footer {
  margin-top: auto;
  padding: clamp(24px, 4vw, 40px) 0 clamp(20px, 3vw, 28px);
  background: rgba(0, 0, 0, .25);
  border-top: 1px solid var(--line);
  color: #71717A; font-size: .85rem;
}
.ia-footer-inner {
  max-width: 1480px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px);
  display: grid; gap: clamp(24px, 3vw, 36px);
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
}
@media (max-width: 1024px) {
  .ia-footer-inner { grid-template-columns: 1fr 1fr; }
  .ia-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 539px) { .ia-footer-inner { grid-template-columns: 1fr; } }
.ia-footer-mark {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; margin-bottom: 10px;
}
.ia-footer-mark:hover { text-decoration: none; }
.ia-footer-mark img { flex-shrink: 0; border-radius: 5px; opacity: .75; }
.ia-footer-mark small {
  display: block; font-size: .68rem; font-weight: 600; color: #52525B;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px;
}
.ia-footer-mark strong {
  display: block; font-family: Fraunces, Georgia, serif; font-size: 1rem;
  font-weight: 700; color: #D4D4D8; letter-spacing: -.01em;
}
.ia-footer-tagline { font-size: .8rem; line-height: 1.6; color: #52525B; max-width: 44ch; margin: 0; }
.ia-footer-col h4 {
  font-family: Manrope, sans-serif; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #A1A1AA; margin: 0 0 10px 0;
}
.ia-footer-col a {
  display: block; font-size: .8rem; color: #71717A; padding: 3px 0;
  text-decoration: none; transition: color .12s;
}
.ia-footer-col a:hover { color: #D4D4D8; text-decoration: none; }
.ia-footer-bottom {
  position: relative;
  max-width: 1480px; margin: clamp(18px, 3vw, 28px) auto 0;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 3vw, 40px) 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; font-size: .76rem; color: #3F3F46;
}
/* Inset rule rather than a border-top on the padded box, so the divider lines
   up with the columns above instead of overhanging them. */
.ia-footer-bottom::before {
  content: ""; position: absolute; top: 0;
  left: clamp(16px, 3vw, 40px); right: clamp(16px, 3vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.ia-footer-social { display: inline-flex; gap: 6px; }
.ia-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  color: #52525B; transition: all .15s;
}
.ia-footer-social a:hover { background: rgba(255, 255, 255, .06); color: #A1A1AA; text-decoration: none; }
.ia-footer address { font-style: normal; color: #52525B; line-height: 1.55; font-size: .78rem; }

/* ── Light theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] .rail { background: rgba(255, 255, 255, .86); }
[data-theme="light"] .flyout,
[data-theme="light"] .waffle-panel { background: #ffffff; }
[data-theme="light"] .rail-tip { background: #ffffff; color: #0a1628; }
[data-theme="light"] .ia-footer { background: rgba(255, 255, 255, .86); color: var(--muted); }
[data-theme="light"] .ia-footer-mark strong { color: var(--ink); }
[data-theme="light"] .ia-footer-mark small,
[data-theme="light"] .ia-footer-tagline,
[data-theme="light"] .ia-footer-col a,
[data-theme="light"] .ia-footer address { color: var(--muted); }
[data-theme="light"] .ia-footer-col h4 { color: var(--ink); }
[data-theme="light"] .ia-footer-col a:hover { color: var(--blue); }
[data-theme="light"] .ia-footer-bottom { color: var(--muted); }
[data-theme="light"] .ia-footer-bottom::before { border-top-color: var(--line); }
[data-theme="light"] .ia-footer-social a { background: rgba(14, 22, 38, .04); color: var(--muted); }
[data-theme="light"] .ia-footer-mark img { opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────────────────────
   Tablet keeps the 68px rail. Phone converts it to a bottom tab bar, the same
   pattern already shipped on Concierge, Counsel and Compass. The rail is a
   GRID ITEM here, so the column has to be collapsed explicitly — a
   position:fixed item still occupies its track otherwise. */
@media (max-width: 640px) {
  body:has(> .rail) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topbar" "main" "footer";
  }
  .rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: 58px; align-self: auto;
    flex-direction: row; justify-content: space-around;
    gap: 0; padding: 0 8px;
    border-right: none; border-top: 1px solid var(--line);
    /* Opaque: as a fixed bar it sits over scrolling content, unlike the
       translucent column it is on desktop. */
    background: var(--bg);
  }
  [data-theme="light"] .rail { background: #fff; }
  .rail-mark, .rail-spacer { display: none; }
  .rail-tip { display: none; }                 /* no hover on touch */
  .rail-btn.on { box-shadow: inset 0 2px 0 var(--blue); }
  body:has(> .rail) > .ia-footer { margin-bottom: 58px; }

  .topbar { height: 56px; padding: 0 14px; gap: 8px; }
  .topbar-badge { width: 34px; height: 34px; }
  .topbar-brand-word { font-size: 1.15rem; }
  .topbar-icon-btn { width: 40px; height: 40px; }
  .topbar-icon-btn svg { width: 20px; height: 20px; }

  .flyouts { top: auto; bottom: 58px; left: 0; right: 0; height: auto; }
  .flyout { position: fixed; left: 10px; right: 10px; bottom: 66px; width: auto; }
  .waffle-panel { top: 62px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 130px); }
  .container { margin: 16px auto; padding: 0 14px; }
}
@media (max-width: 400px) {
  .topbar-brand-suffix { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TABLE CONTAINMENT (2026-08-20)

   Found while fixing the same bug in Argos Service, where a 10-column table
   with nothing bounding its width set the whole page width and forced
   left/right scrolling on an iPhone (390px viewport, 848px document).

   This app has the same exposure: many tables and no rule that makes their
   container a horizontal scroll box. The selector is deliberately
   container-agnostic — these tables sit in a dozen differently-named wrappers
   across the templates, so matching on any block element that DIRECTLY holds a
   table is more reliable than trying to enumerate class names.

   The table keeps its normal layout and simply scrolls inside its own
   container, so the page never grows past the viewport.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :is(div, section, main, article, form, td):has(> table) { overflow-x: auto; }
}
@media (max-width: 640px) {
  /* .container caps at 1080px and centres, which is right on a desktop but
     leaves the table free to set the width on a phone. */
  .container { max-width: 100%; min-width: 0; }
}