/* Argos Endorse — shared suite chrome (2026-08-20).
 *
 * Endorse has 21 templates, each with its own <head> and its own inline <style>
 * carrying its own copy of the palette. There is no shared layout to hook into,
 * so this file supplies the topbar, footer and responsive rules for all of them
 * without touching any page's own CSS.
 *
 * Load order matters and is deliberate:
 *   1. the page's own inline <style>   (declares :root dark tokens)
 *   2. this file                        (chrome; consumes those tokens)
 *   3. /theme.css                       (dynamic; overrides :root when light)
 * All three declare :root at equal specificity, so the last one wins — which is
 * how the theme flips with no JavaScript. Endorse serves script-src 'none' on
 * every normal page, so a scripted toggle is not an option and the CSP must not
 * be loosened for one.
 *
 * All classes are .e- prefixed: .brand, .nav-links, .card, .wrap and friends
 * are already taken across these templates, with different meanings on
 * different pages.
 */

:root {
  --e-max: 1480px;
  --e-pad: clamp(16px, 3vw, 40px);
  --e-bar: rgba(0, 0, 0, 0.25);
}

/* ── Topbar ──────────────────────────────────────────────────────────────────
   64px bar / 40px badge / 1.4rem wordmark / 44px controls with 22px glyphs —
   the same measurements as Service, Compass, Concierge, Counsel and Verify. */
.e-topbar {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--e-pad);
  background: var(--e-bar);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08));
  position: relative;
  z-index: 60;
}
.e-topbar-badge { width: 40px; height: 40px; flex: none; border-radius: 6px; display: block; }
.e-topbar-brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.e-topbar-word {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700; font-size: 1.4rem; line-height: 1;
  color: var(--text, #e8edf5); letter-spacing: -0.01em;
}
.e-topbar-suffix {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted, #8aa0bf);
}
/* margin-left:auto on the FIRST control only; on every one it spreads them
   apart instead of grouping them at the right edge. */
.e-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.e-topbar-btn {
  width: 44px; height: 44px; flex: none; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted, #8aa0bf);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; text-decoration: none;
  transition: color .12s, background .12s, border-color .12s;
}
.e-topbar-btn:hover {
  color: var(--text, #e8edf5);
  background: rgba(255, 255, 255, .05);
  border-color: var(--border, rgba(255, 255, 255, .08));
}
.e-topbar-btn svg { width: 22px; height: 22px; }

/* The toggle renders BOTH glyphs and CSS decides which is visible — no script
   may run to swap an icon. Default here is dark (moon shown); /theme.css
   inverts it when the cookie says light. */
.et-sun { display: none; }
.et-moon { display: block; }

/* ── Footer ──────────────────────────────────────────────────────────────────
   Same company block as the rest of the suite. The literal greys are the shared
   brand values; the light ramp below fixes the ones that go unreadable. */
.e-footer {
  margin-top: 48px;
  padding: clamp(24px, 4vw, 40px) 0 clamp(20px, 3vw, 28px);
  background: var(--e-bar);
  border-top: 1px solid var(--border, rgba(255, 255, 255, .08));
  color: #71717A;
  font-size: .85rem;
  font-family: Manrope, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.e-footer-inner {
  max-width: var(--e-max); margin-inline: auto; padding-inline: var(--e-pad);
  display: grid; gap: clamp(24px, 3vw, 36px);
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
}
@media (max-width: 1024px) {
  .e-footer-inner { grid-template-columns: 1fr 1fr; }
  .e-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 539px) { .e-footer-inner { grid-template-columns: 1fr; } }
.e-footer-mark {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; margin-bottom: 10px;
}
.e-footer-mark img { flex-shrink: 0; border-radius: 5px; opacity: .75; }
.e-footer-mark small {
  display: block; font-size: .68rem; font-weight: 600; color: #52525B;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px;
}
.e-footer-mark strong {
  display: block; font-family: Fraunces, Georgia, serif; font-size: 1rem;
  font-weight: 700; color: #D4D4D8; letter-spacing: -.01em;
}
.e-footer-tagline { font-size: .8rem; line-height: 1.6; color: #52525B; max-width: 44ch; margin: 0; }
.e-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;
}
.e-footer-col a {
  display: block; font-size: .8rem; color: #71717A; padding: 3px 0;
  text-decoration: none; transition: color .12s;
}
.e-footer-col a:hover { color: #D4D4D8; }
.e-footer-bottom {
  position: relative;
  max-width: var(--e-max); margin: clamp(18px, 3vw, 28px) auto 0;
  padding: clamp(14px, 2vw, 20px) var(--e-pad) 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 by --e-pad a side. */
.e-footer-bottom::before {
  content: ""; position: absolute; top: 0;
  left: var(--e-pad); right: var(--e-pad);
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.e-footer-social { display: inline-flex; gap: 6px; }
.e-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(--border, rgba(255, 255, 255, .08));
  color: #52525B; transition: all .15s;
}
.e-footer-social a:hover { background: rgba(255, 255, 255, .06); color: #A1A1AA; }
.e-footer address { font-style: normal; color: #52525B; line-height: 1.55; font-size: .78rem; }

/* The footer's light-mode ramp lives in /theme.css rather than here, because
   that endpoint is the only thing that knows which theme is active and it can
   emit arbitrary rules, not just :root tokens. */


/* ── Centring pages ──────────────────────────────────────────────────────────
   Six templates (the five signer steps and staff login) set <body> to a flex
   container with align-items/justify-content:center, to float a single card in
   the middle of the screen. Dropping a topbar and footer in as body children
   made them flex ITEMS in that row: the topbar came out 171px wide at x=-63
   and the footer 172px at x=281, pushing the page 63px past the viewport.

   Those pages now wrap their own content in .e-body, so <body> can be a plain
   column with the chrome full-bleed at top and bottom, and .e-body reproduces
   exactly the centring <body> used to do — including the gutter that body's
   own padding provided, which is why padding moves here rather than being
   dropped. */
/* Scoped to :has(> .e-body), NOT :has(> .e-topbar). Nineteen templates carry
   the topbar; only these six wrap their content, and the other thirteen have
   ordinary block bodies whose own padding they rely on — forcing flex and
   padding:0 on those would strip it. */
body:has(> .e-body) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}
body:has(> .e-body) > .e-topbar,
body:has(> .e-body) > .e-footer { flex: none; }
.e-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  width: 100%;
}
@media (max-width: 640px) { .e-body { padding: 1rem; } }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .e-topbar { height: 56px; padding: 0 14px; gap: 8px; }
  .e-topbar-badge { width: 34px; height: 34px; }
  .e-topbar-word { font-size: 1.15rem; }
  .e-topbar-btn { width: 40px; height: 40px; }
  .e-topbar-btn svg { width: 20px; height: 20px; }
  .e-footer { margin-top: 32px; }
  .e-footer-bottom { justify-content: flex-start; }
}
@media (max-width: 400px) {
  .e-topbar-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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE BOTTOM TAB BAR (2026-08-22) — staff pages only

   Endorse had no rail and no drawer at all, only a topbar, so on a phone the
   staff surface had no navigation beyond whatever links a page happened to
   render. This is the estate's standard phone affordance.

   Hidden by default and switched on inside the phone block. That default MUST
   stay above the media block: both rules are specificity 0,1,0, so source order
   is what decides, and putting the default afterwards silently hides the bar at
   every width.

   Pure CSS and plain anchors — Endorse serves script-src 'none' on every normal
   page and that is a real hardening control on a non-repudiation product, not
   an inconvenience to work around.
   ═══════════════════════════════════════════════════════════════════════════ */
.e-tabbar { display: none; }

@media (max-width: 640px) {
  .e-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 58px;
    z-index: 60;
    align-items: stretch;
    justify-content: space-around;
    padding: 0 4px;
    /* Opaque, and theme-aware without a token. endorse-suite.css defines only
       layout tokens (--e-max/--e-pad/--e-bar); the palette lives in each page's
       own <style>, so there is no surface token to reuse — and --e-bar is
       rgba(0,0,0,.25), transparent, which is wrong for a bar over scrolling
       content. `Canvas` is the UA surface for the active color-scheme, which
       /theme.css already sets per the theme cookie, so this follows the theme
       with no script and no token. Literal first for anything that predates
       system colors. */
    background: #0b1220;
    background: Canvas;
    border-top: 1px solid var(--border, rgba(255,255,255,0.12));
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .e-tabbar-btn {
    flex: 1 1 0;
    min-width: 0;              /* five equal columns, no min-content floor */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--muted, #9aa3b2);
    /* CanvasText would be full-contrast; muted is the resting tab colour. */
    border-top: 2px solid transparent;
  }
  .e-tabbar-ico { font-size: 17px; line-height: 1; }
  .e-tabbar-lbl {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Clear the bar so the last row of content and the footer stay reachable. */
  body { padding-bottom: 74px; }
}