/* WhatsApp Agent Bridge
   Implements DESIGN.md (Apple-design-analysis).

   The source documents apple.com's marketing surfaces, so its tile/photography
   grammar is translated, not transcribed: the alternating light/dark tile lives
   on the sign-in surface (the one screen with a hero), and the tile's role as
   "elevation through surface change" carries the admin cards. Tables, settings
   forms and dark mode are not in the source; they are built from the same
   tokens and follow the documented rules (hairline instead of shadow, pill for
   actions, rounded.sm for compact utility, scale(0.95) on press). */

/* ==========================================================================
   1. Tokens — DESIGN.md `colors`, `rounded`, `spacing`, `typography`
   ========================================================================== */

:root {
  /* Accent — the single interactive color. No second accent exists. */
  --primary:         #0066cc;   /* Action Blue */
  --primary-focus:   #0071e3;   /* focus ring, selected chip border */
  --primary-on-dark: #2997ff;   /* Sky Link Blue — dark surfaces only */

  /* Ink */
  --ink:             #1d1d1f;
  --ink-muted-80:    #333333;
  --ink-muted-48:    #7a7a7a;
  --tertiary-label:  #a1a1a6;
  --body-on-dark:    #ffffff;
  --body-muted:      #cccccc;

  /* Surface */
  --canvas:            #ffffff;
  --canvas-parchment:  #f5f5f7;
  --surface-pearl:     #fafafc;
  --surface-tile-1:    #272729;
  --surface-tile-2:    #2a2a2c;
  --surface-tile-3:    #252527;
  --surface-black:     #000000;
  --surface-chip:      rgba(210, 210, 215, 0.64);
  --fill-subtle:       rgba(0, 0, 0, 0.04);

  /* Hairlines */
  --hairline:     #e0e0e0;
  --divider-soft: #f0f0f0;

  /* Status — not in the source; the doc has no state palette. Kept muted so
     the Action Blue stays the only interactive signal. */
  --green: #248a3d;
  --red:   #d70015;
  --gray:  #86868b;

  --primary-tint: rgba(0, 102, 204, 0.08);
  --green-tint:   rgba(36, 138, 61, 0.10);
  --red-tint:     rgba(215, 0, 21, 0.08);
  --gray-tint:    rgba(134, 134, 139, 0.12);

  /* Radius */
  --r-none: 0px;
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:  11px;
  --r-lg:  18px;
  --r-pill: 9999px;

  /* Spacing */
  --s-xxs:  4px;
  --s-xs:   8px;
  --s-sm:  12px;
  --s-md:  17px;
  --s-lg:  24px;
  --s-xl:  32px;
  --s-xxl: 48px;
  --s-section: 80px;

  --hit-target: 44px;
  --nav-global-h: 44px;
  --nav-sub-h: 52px;

  /* ~980px on text-heavy surfaces, wider on the record grids. */
  --content-width: 980px;
  --content-width-wide: 1068px;
  --page-max: var(--content-width);

  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  system-ui, Inter, "Segoe UI", Roboto, sans-serif;
  --font: "SF Pro Text", -apple-system, BlinkMacSystemFont,
          system-ui, Inter, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --blur: saturate(180%) blur(20px);
}

/* The source is light-dominant and documents no dark counterparts. This is a
   considered extension: Sky Link Blue becomes the accent, as the doc
   prescribes for dark surfaces, and the tile greys become the canvases. */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:         #2997ff;
    --primary-focus:   #2997ff;

    --ink:             #f5f5f7;
    --ink-muted-80:    #d2d2d7;
    --ink-muted-48:    #a1a1a6;
    --tertiary-label:  #6e6e73;

    --canvas:            #1d1d1f;
    --canvas-parchment:  #000000;
    --surface-pearl:     #272729;
    --surface-chip:      rgba(72, 72, 74, 0.72);
    --fill-subtle:       rgba(255, 255, 255, 0.06);

    --hairline:     #3a3a3c;
    --divider-soft: #2a2a2c;

    --green: #30d158;
    --red:   #ff453a;

    --primary-tint: rgba(41, 151, 255, 0.16);
    --green-tint:   rgba(48, 209, 88, 0.16);
    --red-tint:     rgba(255, 69, 58, 0.16);
    --gray-tint:    rgba(134, 134, 139, 0.20);
  }
}

/* ==========================================================================
   2. Base — body 17px / 1.47 / -0.374px tracking (not 16px)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  font-weight: 400;
  color: var(--ink);
  background: var(--canvas-parchment);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Typography ladder — DESIGN.md `typography`. Weight 500 is deliberately
   absent: the ladder is 300 / 400 / 600 / 700. */
.hero-display { font-family: var(--font-display); font-size: 56px; line-height: 1.07; font-weight: 600; letter-spacing: -0.28px; }
.display-lg   { font-family: var(--font-display); font-size: 40px; line-height: 1.10; font-weight: 600; letter-spacing: 0; }
.display-md   { font-size: 34px; line-height: 1.47; font-weight: 600; letter-spacing: -0.374px; }
.lead         { font-family: var(--font-display); font-size: 28px; line-height: 1.14; font-weight: 400; letter-spacing: 0.196px; }
.lead-airy    { font-size: 24px; line-height: 1.5;  font-weight: 300; letter-spacing: 0; }
.tagline      { font-family: var(--font-display); font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: 0.231px; }
.body-strong  { font-size: 17px; line-height: 1.24; font-weight: 600; letter-spacing: -0.374px; }
.body         { font-size: 17px; line-height: 1.47; font-weight: 400; letter-spacing: -0.374px; }
.dense-link   { font-size: 17px; line-height: 2.41; font-weight: 400; letter-spacing: 0; }
.caption      { font-size: 14px; line-height: 1.43; font-weight: 400; letter-spacing: -0.224px; }
.caption-strong { font-size: 14px; line-height: 1.29; font-weight: 600; letter-spacing: -0.224px; }
.fine-print   { font-size: 12px; line-height: 1.0;  font-weight: 400; letter-spacing: -0.12px; }
.micro-legal  { font-size: 10px; line-height: 1.3;  font-weight: 400; letter-spacing: -0.08px; }

.secondary { color: var(--ink-muted-48); }
.tertiary  { color: var(--tertiary-label); }
.mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   3. Navigation — the documented two-row chassis
   ========================================================================== */

/* `global-nav` — ultra-thin true-black bar, 44px, nav-link 12px.
   True black appears here and nowhere else. */
.global-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  height: var(--nav-global-h);
  padding: 0 var(--s-lg);
  background: var(--surface-black);
  color: var(--body-on-dark);
}

.global-nav .brand {
  font-size: 12px;
  line-height: 1.0;
  letter-spacing: -0.12px;
  font-weight: 600;
  color: var(--body-on-dark);
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-nav .brand:hover { text-decoration: none; }

.global-nav .global-links {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  flex-shrink: 0;
}

.global-nav .global-link {
  font-size: 12px;
  line-height: 1.0;
  letter-spacing: -0.12px;
  color: var(--body-on-dark);
  opacity: 0.82;
  white-space: nowrap;
}
.global-nav .global-link:hover { opacity: 1; text-decoration: none; }
.global-nav .global-link.is-active { opacity: 1; font-weight: 600; }
.global-nav form { display: flex; }

/* `sub-nav-frosted` — parchment at 80% with backdrop blur, 52px, category
   name in tagline (21/600), persistent right-aligned primary CTA. */
.sub-nav {
  position: sticky;
  top: var(--nav-global-h);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  height: var(--nav-sub-h);
  padding: 0 var(--s-lg);
  background: color-mix(in srgb, var(--canvas-parchment) 80%, transparent);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline);
}

.sub-nav .sub-nav-title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.19;
  font-weight: 600;
  letter-spacing: 0.231px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-nav .sub-nav-title:hover { text-decoration: none; }

.sub-nav .sub-nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  margin-left: auto;
  min-width: 0;
}

.sub-nav .sub-nav-link {
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: -0.224px;
  color: var(--ink);
  white-space: nowrap;
}
.sub-nav .sub-nav-link:hover { color: var(--primary); text-decoration: none; }
.sub-nav .sub-nav-link.is-active { color: var(--primary); font-weight: 600; }
.sub-nav .sub-nav-cta { flex-shrink: 0; }

/* ==========================================================================
   4. Layout
   ========================================================================== */

/* Record grids run wider than text-heavy surfaces; the footer tracks whichever
   is in play so both share one gutter. */
body.wide { --page-max: var(--content-width-wide); }

.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-xxl) var(--s-lg) var(--s-section);
}
/* The sticky bar is the page's own bottom edge — it needs no trailing air. */
.page:has(.sticky-bar) { padding-bottom: 0; }

/* At least 48–64px of air above a headline; the whitespace is the pedestal. */
.page-header { margin-bottom: var(--s-xl); }
.page-header h1 { margin: 0; }
.page-header .subtitle {
  margin: var(--s-sm) 0 0;
  max-width: 34em;
  color: var(--ink-muted-48);
  font-size: 24px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0;
}

.section-label {
  margin: var(--s-xl) 0 var(--s-sm);
  font-size: 14px;
  line-height: 1.29;
  font-weight: 600;
  letter-spacing: -0.224px;
  color: var(--ink-muted-48);
}
.section-label:first-child { margin-top: 0; }

/* ==========================================================================
   5. Cards, lists, tables — `store-utility-card`: rounded.lg + 1px hairline,
   never a shadow. Shadow is reserved for product photography, of which this
   app has none.
   ========================================================================== */

.list-group,
.table-card,
.form-group,
.field-stack {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  min-height: var(--hit-target);
  padding: var(--s-md) var(--s-lg);
  position: relative;
  color: var(--ink);
}
.list-row + .list-row::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s-lg); right: 0;
  height: 1px;
  background: var(--divider-soft);
}
a.list-row:hover { background: var(--fill-subtle); text-decoration: none; }

.list-row .row-main { min-width: 0; flex: 1; }
.list-row .row-detail {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  flex-wrap: wrap;
}
.list-row .row-aside {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  flex-shrink: 0;
}

.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--gray); }
.status-dot.on  { background: var(--green); }
.status-dot.off { background: var(--red); }

/* Table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%;
  min-width: 340px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.47;
}

table.data th {
  text-align: left;
  padding: var(--s-sm) var(--s-lg);
  font-size: 12px;
  line-height: 1.0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted-48);
  white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}

table.data td {
  padding: var(--s-sm) var(--s-lg);
  height: 56px;
  vertical-align: middle;
  color: var(--ink);
}

table.data tbody tr + tr td { border-top: 1px solid var(--divider-soft); }
table.data tbody tr[data-href] { cursor: pointer; }
table.data tbody tr:hover { background: var(--fill-subtle); }

.col-status { width: 40px; text-align: center; padding-right: 0; }
.col-status .status-dot { display: inline-block; }

.col-name { overflow: hidden; }
.col-name a {
  display: block;
  font-size: 17px;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -0.374px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-name a:hover { color: var(--primary); }

.col-url { overflow: hidden; }
.col-url span {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-muted-48);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-number {
  width: 168px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-muted-48);
}

.col-action { width: 80px; text-align: right; white-space: nowrap; }
.col-action form { display: inline-flex; }

/* Activity table */
.col-pill { width: 116px; }
.col-who  { width: 188px; overflow: hidden; }
.col-who .who-name {
  display: block;
  font-size: 17px;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -0.374px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-who .who-number {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink-muted-48);
}

/* The flexible column: the message text the bridge stored for the row. */
.col-message { overflow: hidden; }
.col-message span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
}
.col-message span.is-empty { color: var(--tertiary-label); }

.col-when { width: 148px; overflow: hidden; }
.col-when span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
  color: var(--ink-muted-48);
}

.col-replay { width: 108px; text-align: right; padding-right: var(--s-xs) !important; }
.col-replay form { display: inline; }
/* Wide enough to hold the 32px chip plus the cell's right gutter. */
.col-info { width: 72px; text-align: right; padding-left: 0 !important; }

.detail-row td { background: var(--canvas-parchment); padding: var(--s-lg); }
.detail-row:hover td { background: var(--canvas-parchment); }

dl.detail { margin: 0; }
dl.detail dt {
  font-size: 12px;
  line-height: 1.0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted-48);
  margin-top: var(--s-md);
}
dl.detail dt:first-child { margin-top: 0; }
dl.detail dd {
  margin: var(--s-xs) 0 0;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
  word-break: break-all;
}
dl.detail dd.error-text { color: var(--red); }
dl.detail pre {
  margin: var(--s-xs) 0 0;
  padding: var(--s-md);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--canvas);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted-48);
  word-break: normal;
  max-height: 320px;
  letter-spacing: 0;
}

/* ==========================================================================
   6. Forms
   ========================================================================== */

.form-row {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  min-height: var(--hit-target);
  padding: var(--s-xs) var(--s-lg);
  position: relative;
}
.form-row + .form-row::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s-lg); right: 0;
  height: 1px;
  background: var(--divider-soft);
}

.form-row label {
  flex: 0 0 34%;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
}

.form-row input[type="text"],
.form-row input[type="url"],
.form-row input[type="password"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
  text-align: right;
  padding: var(--s-sm) 0;
  outline: none;
}
.form-row input::placeholder { color: var(--tertiary-label); }

.form-hint {
  margin: var(--s-sm) 0 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
  color: var(--ink-muted-48);
}

/* `search-input` grammar reused for the stacked sign-in fields. */
.field-stack input {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
  padding: var(--s-md) var(--s-lg);
  outline: none;
}
.field-stack input + input { border-top: 1px solid var(--divider-soft); }
.field-stack input::placeholder { color: var(--tertiary-label); }

/* Switch — hairline ring, no shadow. */
.switch { display: inline-flex; align-items: center; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch .track {
  position: relative;
  display: block;
  width: 51px;
  height: 31px;
  border-radius: var(--r-pill);
  background: var(--gray-tint);
  border: 1px solid var(--hairline);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  transition: transform 0.2s ease;
}
.switch input:checked + .track { background: var(--green); border-color: var(--green); }
.switch input:checked + .track::after { transform: translateX(20px); border-color: transparent; }
.switch input:focus-visible + .track { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

.form-row.switch-row { gap: var(--s-sm); }
.form-row label.switch { flex: 0 0 auto; }
.form-row.switch-row label.switch-label { flex: 1; font-size: 17px; color: var(--ink); }

/* ==========================================================================
   7. Buttons — pill for actions, rounded.sm for compact utility,
   scale(0.95) as the system-wide press.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  min-height: var(--hit-target);
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.47;
  font-weight: 400;
  letter-spacing: -0.374px;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  color: var(--primary);
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

/* `button-primary` — the signature Action Blue pill. */
.btn-filled { background: var(--primary); color: #ffffff; }
.btn-filled:hover { background: var(--primary-focus); }

/* `button-secondary-pill` — the ghost pill, second CTA of a pair. */
.btn-tinted { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-tinted:hover { background: var(--primary-tint); }

.btn-plain { padding: 11px 12px; }

.btn-destructive { color: var(--red); }
.btn-destructive.btn-tinted { border-color: var(--red); color: var(--red); }
.btn-destructive.btn-tinted:hover { background: var(--red-tint); }

/* `button-store-hero` — larger pill, button-large 18/300. Used once, on
   sign-in, where the doc uses it: a single hero surface. */
.btn-hero {
  padding: 14px 28px;
  font-size: 18px;
  line-height: 1.0;
  font-weight: 300;
  letter-spacing: 0;
}

/* `button-dark-utility` — ink fill, rounded.sm, button-utility label.
   Global-nav actions only. */
.btn-dark {
  min-height: 28px;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--body-on-dark);
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: -0.224px;
}
.global-nav .btn-dark { background: #1d1d1f; color: #ffffff; }
.global-nav .btn-dark:hover { background: #2a2a2c; }

/* `button-pearl-capsule` — rounded.md, pearl fill, soft ring. */
.btn-pearl {
  min-height: 32px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--surface-pearl);
  border: 3px solid var(--divider-soft);
  color: var(--ink-muted-80);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
}
.btn-pearl:hover { background: var(--canvas); }

/* Compact utility rect — rounded.sm, 14px label. */
.btn-small {
  min-height: 32px;
  padding: 8px 15px;
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: -0.224px;
  border-radius: var(--r-sm);
}
.btn-tinted.btn-small { border-radius: var(--r-sm); }

.btn-block { width: 100%; }

/* `button-icon-circular` — translucent chip gray, full radius. Sized to the
   44px touch target; the visible chip tightens inside a table row. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-chip);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.icon-btn:hover { background: var(--surface-chip); filter: brightness(0.95); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn.is-open { background: var(--primary); color: #ffffff; }
.icon-btn:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

/* ==========================================================================
   8. Chips, pills, banners, empty state
   ========================================================================== */

/* `configurator-option-chip` — white pill, hairline border; selected upgrades
   to a 2px Focus Blue border rather than a fill. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-bottom: var(--s-lg);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.chip:hover { text-decoration: none; border-color: var(--tertiary-label); }
.chip:active { transform: scale(0.95); }
.chip .chip-count { color: var(--ink-muted-48); font-variant-numeric: tabular-nums; }
.chip.is-active {
  border: 2px solid var(--primary-focus);
  padding: 11px 15px;
  font-weight: 600;
}
.chip.is-active .chip-count { color: var(--ink-muted-80); }

.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 1.0;
  font-weight: 600;
  letter-spacing: -0.12px;
  white-space: nowrap;
  background: var(--gray-tint);
  color: var(--ink-muted-48);
}
.pill.delivered { background: var(--green-tint); color: var(--green); }
.pill.failed    { background: var(--red-tint);   color: var(--red); }
.pill.unmatched { background: var(--gray-tint);  color: var(--gray); }
.pill.disabled  { background: var(--gray-tint);  color: var(--gray); }

.banner {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-lg);
  margin-bottom: var(--s-md);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
}
.banner.success { background: var(--green-tint); border-color: var(--green-tint); color: var(--green); }
.banner.error   { background: var(--red-tint);   border-color: var(--red-tint);   color: var(--red); }

/* Empty state carries the tile's whitespace rhythm: 80px of air. */
.empty-state {
  text-align: center;
  padding: var(--s-section) var(--s-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.empty-state .glyph { font-size: 48px; line-height: 1; margin-bottom: var(--s-lg); opacity: 0.4; }
.empty-state h2 { margin: 0; }
.empty-state p {
  margin: var(--s-sm) auto var(--s-lg);
  max-width: 42ch;
  color: var(--ink-muted-48);
}

/* ==========================================================================
   9. `floating-sticky-bar` — parchment at 80% + blur, 64px, running context
   on the left and the primary CTA on the right.
   ========================================================================== */

.sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  min-height: 64px;
  margin-top: var(--s-xl);
  padding: var(--s-sm) var(--s-xl);
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: color-mix(in srgb, var(--canvas-parchment) 80%, transparent);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.sticky-bar .bar-note {
  min-width: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
  color: var(--ink-muted-48);
}
.sticky-bar .bar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  flex-shrink: 0;
}

/* ==========================================================================
   10. Sign-in — the one hero surface. Dark tile, edge-to-edge, no rounding;
   the surface change is what lifts the card.
   ========================================================================== */

.tile-dark {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-xl);
  padding: var(--s-section) var(--s-lg);
  background: var(--surface-tile-1);
  color: var(--body-on-dark);
  border-radius: var(--r-none);
  text-align: center;
}
.tile-dark .tile-copy { max-width: 640px; }
.tile-dark h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.28px;
}
.tile-dark .tile-lead {
  margin: var(--s-md) 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: 0.196px;
  color: var(--body-muted);
}
.tile-dark a { color: var(--primary-on-dark); }

/* The status tints are tuned for parchment and vanish on the near-black tile,
   so the hero surface gets its own banner treatment. */
.tile-dark .banner {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--body-on-dark);
}
.tile-dark .banner.error   { color: #ff6b60; }
.tile-dark .banner.success { color: #4cd964; }

.login-card { width: 100%; max-width: 380px; text-align: left; }
.login-card .banner { text-align: left; }
.login-card .btn { margin-top: var(--s-lg); }
.login-card .field-stack { background: var(--canvas); }

/* ==========================================================================
   11. Footer — parchment, dense-link columns, fine-print legal row
   ========================================================================== */

.site-footer {
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  border-top: 1px solid var(--hairline);
  padding: 64px 0;
}
/* Padding lives on the inner box so the footer's content edge lands on the
   same gutter as `.page`, whose max-width also includes its padding. */
.site-footer .footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--s-lg);
}
.site-footer .footer-heading {
  margin: 0;
  font-size: 14px;
  line-height: 1.29;
  font-weight: 600;
  letter-spacing: -0.224px;
  color: var(--ink);
}
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-lg);
  margin: var(--s-xs) 0 0;
  padding: 0;
  list-style: none;
}
.site-footer .footer-links a {
  font-size: 17px;
  line-height: 2.41;
  letter-spacing: 0;
  color: var(--primary);
}
.site-footer .footer-legal {
  margin: var(--s-lg) 0 0;
  padding-top: var(--s-md);
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 1.0;
  letter-spacing: -0.12px;
  color: var(--ink-muted-48);
}
.site-footer .footer-note {
  margin: var(--s-sm) 0 0;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: -0.08px;
  color: var(--ink-muted-48);
}

/* ==========================================================================
   12. Responsive — 1068 / 834 / 640 / 480 are the structural breakpoints
   ========================================================================== */

@media (max-width: 1068px) {
  .hero-display, .tile-dark h1 { font-size: 40px; letter-spacing: 0; }
}

@media (max-width: 834px) {
  .page { padding: var(--s-xl) var(--s-md) var(--s-xxl); }
  .display-lg { font-size: 34px; }
  .page-header .subtitle { font-size: 21px; }
  .sub-nav .sub-nav-links { gap: var(--s-md); }
}

@media (max-width: 640px) {
  .display-lg { font-size: 28px; }
  .hero-display, .tile-dark h1 { font-size: 34px; }
  .tile-dark .tile-lead { font-size: 21px; }
  .page-header .subtitle { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; }

  .global-nav { padding: 0 var(--s-md); gap: var(--s-md); }
  .global-nav .global-links { gap: var(--s-sm); }

  .sub-nav { padding: 0 var(--s-md); gap: var(--s-sm); }
  .sub-nav .sub-nav-title { font-size: 17px; }
  /* Inline links drop out; the category name and the primary CTA remain. */
  .sub-nav .sub-nav-link { display: none; }

  .sticky-bar { padding: var(--s-sm) var(--s-md); }
  .sticky-bar .bar-note { display: none; }
  .sticky-bar .bar-actions { flex: 1; justify-content: space-between; }

  .chip { padding: 10px 14px; }
  .chip.is-active { padding: 9px 13px; }

  /* The mobile columns are all fixed widths, so the desktop min-width floor
     would only force a scrollbar the content doesn't need. The activity table
     still scrolls: the sum of its columns genuinely exceeds a phone. */
  table.data { min-width: 0; }
  table.data th, table.data td { padding: var(--s-sm) var(--s-xs); }
  .col-status  { width: 30px; }
  .col-number  { width: 128px; font-size: 12px; }
  .col-action  { width: 64px; }
  /* Name, number and the toggle are what matter on a phone; the webhook URL
     is too long to read here and lives on the row's edit page. */
  .col-url     { display: none; }
  .col-pill    { width: 92px; }
  .col-who     { width: 132px; }
  .col-when    { width: 108px; }
  .col-message { display: none; }
  .col-replay  { width: 84px; }
  .col-info    { width: 48px; }

  table.data .switch .track { width: 44px; height: 26px; }
  table.data .switch .track::after { width: 20px; height: 20px; }
  table.data .switch input:checked + .track::after { transform: translateX(18px); }

  .form-row { flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s-sm) var(--s-md); }
  .form-row label { flex: none; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--ink-muted-48); }
  .form-row input[type="text"],
  .form-row input[type="url"],
  .form-row input[type="password"] { text-align: left; padding: 2px 0 var(--s-xs); }
  .form-row.switch-row { flex-direction: row; align-items: center; }
  .form-row.switch-row label.switch-label { flex: 1; font-size: 17px; color: var(--ink); }

  .site-footer { padding: var(--s-xxl) 0; }
  .site-footer .footer-inner { padding: 0 var(--s-md); }
  .site-footer .footer-links { gap: 0 var(--s-md); }
}

@media (max-width: 480px) {
  .hero-display, .tile-dark h1 { font-size: 28px; }
  .empty-state { padding: var(--s-xxl) var(--s-md); }

  /* Give the name back the room the number doesn't need, so it stops
     truncating on a 360px phone. */
  .col-status { width: 24px; }
  .col-number { width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:active, .chip:active, .icon-btn:active { transform: none; }
}