:root {
  --argos-bg: #030912;
  --argos-blue: #0070f3;
  --argos-purple: #7c3aed;
  --argos-cyan: #00d4ff;
  --argos-fg: #e8eef7;
  --argos-fg-muted: #93a1b3;
  --argos-glass: rgba(255, 255, 255, 0.04);
  --argos-glass-border: rgba(255, 255, 255, 0.08);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--argos-bg);
  color: var(--argos-fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--argos-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; }

.layout {
  display: grid;
  /* Must match .rail's width. The rail was widened 60 -> 68px in the
     2026-08-20 standardization pass but this track was left at 60, so the rail
     overhung its own column by 8px and .main started 8px underneath it. */
  grid-template-columns: 68px 1fr;
  min-height: 100vh;
}

/* ── .sidebar/.brand rules below are now dead — replaced by the icon rail
   (nav.rail) 2026-08-19, Phase 5 of the suite-wide icon-rail rollout. Left
   in place rather than removed since nothing else required touching this
   CSS and no other template references these classes anymore. ────────── */
.sidebar {
  background: var(--argos-glass);
  border-right: 1px solid var(--argos-glass-border);
  padding: 24px 16px;
}
.sidebar .brand {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 32px;
  background: linear-gradient(90deg, var(--argos-blue), var(--argos-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sidebar nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--argos-fg);
  margin-bottom: 4px;
}
.sidebar nav a.active, .sidebar nav a:hover {
  background: var(--argos-glass);
  text-decoration: none;
}

/* ── Icon rail + flyout nav (2026-08-19, Phase 5) ─────────────────────── */

.rail {
  width: 68px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  background: var(--argos-glass);
  border-right: 1px solid var(--argos-glass-border);
  /* No overflow here. .rail-tip is position:absolute and escapes sideways via
     left:calc(100% + 10px), well outside this 68px box, and CSS coerces
     overflow-x to a clipping value whenever overflow-y is not visible - which
     made every hover tooltip invisible. Seven fixed controls never need to
     scroll. */
}
.rail::-webkit-scrollbar { display: none; }

.rail-mark img { width: 34px; height: 34px; display: block; border-radius: 6px; }
.rail-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(90deg, var(--argos-blue), var(--argos-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid var(--argos-glass-border);
  text-decoration: none;
}

.rail-btn {
  position: relative;
  /* 46x46 with a 20px glyph matches Service/Compass/GRC exactly; Counsel
     shipped 40x40 with 17px icons, noticeably smaller than the rest. */
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--argos-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
}
.rail-btn:hover, .rail-btn.on, .rail-btn[aria-expanded="true"] {
  color: var(--argos-fg);
  background: var(--argos-glass);
}
.rail-btn.on { box-shadow: inset 2px 0 0 var(--argos-blue); }

.rail-spacer { flex: 1; }

.rail-tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--argos-bg);
  border: 1px solid var(--argos-glass-border);
  color: var(--argos-fg);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s;
  transition-delay: 0.35s;
  z-index: 100;
}
.rail-btn:hover .rail-tip { opacity: 1; visibility: visible; }
/* Size in CSS, not via the svg width attribute the templ icon components set
   (17px) - an attribute is trivially overridden and easy to miss. */
.rail-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.flyouts {
  position: fixed;
  top: 0;
  left: 68px;
  height: 100vh;
  z-index: 100;
  pointer-events: none;
}

.flyout {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 236px;
  background: var(--argos-glass);
  border-right: 1px solid var(--argos-glass-border);
  box-shadow: 12px 0 32px rgba(0,0,0,0.35);
  overflow-y: auto;
  padding: 16px 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.flyout.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }

.flyout-eyebrow {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--argos-fg-muted);
  padding: 4px 10px 10px;
}

/* Waffle app-switcher panel — reuses .flyout's positioning (viewport-fixed
   wrapper + absolute panel), just wider and with its own grid content. */
.waffle-panel { width: 320px; padding: 14px; }
/* The waffle opens from the topbar (top-right), so it must not inherit
   .flyout's rail geometry - a full-height 236px panel pinned at left:0 beside
   the rail, which is what made it open down the left of the screen in every
   other app in this rollout. Anchored to the viewport under the 64px bar,
   flush right, content-sized, animating downward. */
.flyout.waffle-panel {
  position: fixed;
  top: 68px; right: 14px; left: auto;
  height: auto; max-height: calc(100vh - 92px);
  border-right: none;
  border: 1px solid var(--argos-glass-border);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
  transform: translateY(-8px);
}
.flyout.waffle-panel.open { transform: translateY(0); }
@media (max-width: 720px) { .flyout.waffle-panel { right: 8px; left: auto; width: min(92vw,320px); } }

/* ── Topbar (64px bar / 44px controls / 22px glyphs / 1.4rem wordmark are the
   values Service and Compass use verbatim). Full-bleed via negative margins
   that cancel .main's 32px padding. ─────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  margin: -32px -32px 24px; padding: 0 24px; height: 64px;
  background: var(--argos-glass);
  border-bottom: 1px solid var(--argos-glass-border);
  backdrop-filter: blur(12px);
}
.topbar-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.topbar-brand img { display: block; border-radius: 6px; }
.topbar-brand-word { font-weight: 600; font-size: 1.4rem; color: var(--argos-fg); letter-spacing: -.01em; }
.topbar-brand-suffix { font-weight: 700; font-size: .74rem; letter-spacing: .14em; color: var(--argos-fg-muted); }
.topbar-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 9px; background: transparent;
  border: 1px solid var(--argos-glass-border);
  color: var(--argos-fg-muted); cursor: pointer; line-height: 1;
  transition: background .12s, border-color .12s, color .12s;
}
.topbar-icon-btn:hover { background: var(--argos-glass); color: var(--argos-fg); }
.topbar-icon-btn svg { display: block; width: 22px; height: 22px; }
.topbar-theme-glyph { font-size: 1.2rem; line-height: 1; }
/* Only the FIRST control takes the auto margin; putting it on every button
   gives each its own and splits them apart. That first control is now the
   back-to-Service link, so the margin moved there -- leaving it on
   .topbar-theme-btn as well would reintroduce exactly the split this comment
   warns about. */
.topbar-back-btn { margin-left: auto; }

/* Back to Argos Service. Labelled rather than icon-only: it leaves the product,
   and an unlabelled arrow next to a theme toggle and a waffle reads as "back a
   page". Sized to match .topbar-icon-btn's height so the row stays even. */
.topbar-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px; flex-shrink: 0;
  border-radius: 9px; background: transparent;
  border: 1px solid var(--argos-glass-border);
  color: var(--argos-fg-muted); cursor: pointer; line-height: 1;
  font-size: 0.82rem; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.topbar-back-btn:hover { background: var(--argos-glass); color: var(--argos-fg); }
/* Narrow screens keep the arrow and drop the words -- the control stays
   reachable instead of pushing the waffle and profile chip off the row. */
@media (max-width: 720px) { .topbar-back-label { display: none; } .topbar-back-btn { padding: 0 12px; } }
@media (max-width: 720px) { .topbar { margin: -16px -16px 16px; padding: 0 12px; } }
.waffle-panel-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--argos-glass-border);
  margin-bottom: 10px;
}
.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(--argos-fg);
  border: 1px solid transparent;
  transition: background 0.12s ease;
}
.waffle-tile:hover { background: rgba(0, 112, 243, 0.10); border-color: rgba(0, 112, 243, 0.32); }
.waffle-tile.current { background: rgba(124, 58, 237, 0.14); border-color: rgba(124, 58, 237, 0.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(--argos-fg-muted); margin-top: 2px; }
.waffle-panel-ftr {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--argos-glass-border);
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}

/* min-width:0 is required, not cosmetic. A grid item defaults to
   min-width:auto, which refuses to shrink the 1fr track below the item's
   min-content width — so on a 390px phone the track grew to 338px, pushing the
   page 8px into horizontal scroll. Same failure mode as flex items defaulting
   to min-width:auto. */
.main { padding: 32px; min-width: 0; }

.card {
  background: var(--argos-glass);
  border: 1px solid var(--argos-glass-border);
  border-radius: 12px;
  padding: 20px;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--argos-blue); color: #fff;
  border: 0; border-radius: 8px; padding: 8px 14px;
  font-family: var(--font-body); font-size: 14px; cursor: pointer;
}
.btn.secondary { background: var(--argos-glass); border: 1px solid var(--argos-glass-border); }
.btn.danger    { background: #b91c1c; }

input, select, textarea {
  width: 100%;
  background: rgba(0,0,0,0.25);
  color: var(--argos-fg);
  border: 1px solid var(--argos-glass-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
}
label { display: block; margin: 12px 0 4px; color: var(--argos-fg-muted); font-size: 13px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--argos-glass-border); }
th { color: var(--argos-fg-muted); font-weight: 600; font-size: 13px; }

/* Agreement status + attorney badges */
.ag-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.ag-badge--neutral { background: rgba(150,150,160,0.15); color: #aab; }
.ag-badge--purple  { background: rgba(124,58,237,0.15); color: #a78bfa; }
.ag-badge--amber   { background: rgba(255,180,80,0.15); color: #ffb450; }
.ag-badge--blue    { background: rgba(0,112,243,0.15); color: #7cb7ff; }
.ag-badge--green   { background: rgba(0,200,150,0.15); color: #00c896; }
.ag-badge--orange  { background: rgba(255,140,0,0.2);  color: #ffa040; }
.ag-badge--red     { background: rgba(185,28,28,0.15); color: #fca5a5; }
.ag-badge--cyan    { background: rgba(0,200,255,0.15); color: #00d4ff; }

/* ── Light theme: token override set + badge-text darkening. The badge
   colors above are light pastel text tuned for a dark canvas — on a light
   background those same pastels lose most of their contrast, so this also
   darkens each badge's text (same hue, not a semantic change) rather than
   leaving them illegible. ────────────────────────────────────────────── */
:root[data-theme="light"] {
  --argos-bg: #f4f7fb;
  --argos-fg: #18243b;
  --argos-fg-muted: #51607a;
  --argos-glass: rgba(255, 255, 255, 0.7);
  --argos-glass-border: rgba(0, 112, 243, 0.16);
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #ffffff;
  border-color: var(--argos-glass-border);
}
:root[data-theme="light"] .ag-badge--neutral { color: #5b6472; }
:root[data-theme="light"] .ag-badge--purple  { color: #6d28d9; }
:root[data-theme="light"] .ag-badge--amber   { color: #b45309; }
:root[data-theme="light"] .ag-badge--blue    { color: #0058c4; }
:root[data-theme="light"] .ag-badge--green   { color: #047857; }
:root[data-theme="light"] .ag-badge--orange  { color: #c2410c; }
:root[data-theme="light"] .ag-badge--red     { color: #b91c1c; }
:root[data-theme="light"] .ag-badge--cyan    { color: #0e7490; }

/* ── Responsive (2026-08-20) ─────────────────────────────────────────────────
   Counsel had only two breakpoints, both of them narrow fixes for the waffle
   panel and topbar margins — nothing that addressed the 68px rail eating 17%
   of a phone screen. Same treatment already proven on Concierge: keep the side
   rail on tablets, convert it to a bottom tab bar on phones.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .main { padding: 24px; }
  /* .topbar full-bleeds by cancelling .main's padding with negative margins,
     so the two MUST stay in step. Leaving this at -32px against 24px padding
     made the bar overhang main by 8px a side and put the page into horizontal
     scroll at 1024 and 820. */
  .topbar { margin: -24px -24px 24px; padding: 0 18px; }
}

@media (max-width: 640px) {
  /* The rail is a grid item here (not a flex child as in Concierge), so the
     column has to be collapsed explicitly — a fixed-position item still
     occupies its grid track otherwise. */
  .layout { grid-template-columns: 1fr; }
  .rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: 58px;
    flex-direction: row; justify-content: space-around; gap: 0;
    padding: 0 8px;
    border-right: none;
    border-top: 1px solid var(--argos-glass-border);
    background: var(--argos-bg, #030912);
    z-index: 70;
  }
  /* The rail is translucent glass as a column against the page background; as
     a fixed bar over scrolling content it has to be opaque. */
  :root[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(--argos-blue, #0070f3); }

  .main { padding: 16px; padding-bottom: 74px; }  /* clear the fixed bar */
  /* .topbar bleeds via negative margins matched to .main's padding. */
  .topbar { margin: -16px -16px 16px; padding: 0 12px; }

  /* Flyouts become bottom sheets above the tab bar. */
  .flyouts { top: auto; bottom: 58px; left: 0; right: 0; height: auto; }
  .flyout {
    position: fixed; left: 0; right: 0; bottom: 58px; top: auto;
    width: auto; height: auto; max-height: 56vh;
    border-right: none; border-top: 1px solid var(--argos-glass-border);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,0.4);
  }
  .flyout.waffle-panel {
    top: 66px; bottom: auto; left: 10px; right: 10px; width: auto;
    max-height: calc(100vh - 140px); border-radius: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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; }
}