/* Kizuki Z02 — Component primitives (subset for placeholder pages + A03)
 * Aligned to assets/from-claude-design-v1/Z02.html
 * Per docs/design/CLAUDE-DESIGN-ALIGNMENT-LEDGER.md row 2 (Z02)
 */

/* Page chrome */
.page { max-width: 1200px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-8); }
.doc-head {
  display: flex; align-items: flex-start; gap: var(--s-5);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-8);
}
.doc-head .mark { width: 44px; height: 44px; flex: 0 0 44px; }
.doc-head .h-row { flex: 1; min-width: 0; }
.doc-head .label {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600;
}
.doc-head h1 {
  margin: var(--s-2) 0 var(--s-3);
  font-size: var(--t-2xl); font-weight: 600;
  letter-spacing: -0.02em; line-height: var(--lh-tight);
}
.doc-head .sub {
  color: var(--ink-3); font-size: var(--t-md);
  max-width: 56ch; margin: 0;
}

/* The UA stylesheet's [hidden] { display: none } loses to any component rule
   that sets a display value (e.g. .btn below uses inline-flex), so toggling
   el.hidden = true from JS silently does nothing. Restore the intent globally
   — without this, the /settings/notifications push toggle shows a "Turn off"
   button to a merchant whose browser has BLOCKED notifications. */
[hidden] { display: none !important; }

/* Button */
.btn {
  font-family: inherit;
  font-size: var(--t-sm); font-weight: 500;
  line-height: 1;
  border-radius: var(--r-md);
  padding: 0 var(--s-4);
  height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
  white-space: nowrap;
  text-decoration: none;
}
.btn--lg { height: 44px; font-size: var(--t-base); padding: 0 var(--s-5); }
.btn--primary { background: var(--ink); color: var(--bg-2); border-color: var(--ink); }
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--secondary { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.btn--secondary:hover { background: var(--bg-3); border-color: var(--ink-3); }
.btn--ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn--ghost:hover { background: var(--bg-3); }
.btn--danger { background: var(--accent); color: var(--bg-2); border-color: var(--accent); }
.btn--danger:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn[disabled] { cursor: not-allowed; background: var(--bg-3); color: var(--ink-4); border-color: var(--line); }

/* Field / Input */
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 240px; }
.field-label {
  font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.input {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 var(--s-3);
  background: var(--bg-2);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-sm);
  line-height: 1.4;
  transition: border-color var(--motion), box-shadow var(--motion);
  width: 100%;
}
.input::placeholder { color: var(--ink-4); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.is-error { border-color: var(--accent); }

/* A11y-1 — global visible focus ring for keyboard users only.
   :focus-visible omits the ring on mouse-click but keeps it for tab. */
*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 8px !important;
  top: 8px !important;
}

/* A11y-2 — visually hidden but available to screen readers (sr-only pattern) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.field-help {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.4;
}
.input[disabled] { background: var(--bg-3); color: var(--ink-4); cursor: not-allowed; }
.field .helper { font-size: var(--t-xs); color: var(--ink-3); }
.field .helper.error { color: var(--accent); }

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 26px; padding: 0 var(--s-2) 0 var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-3);
  background: var(--bg-2);
  font-size: var(--t-xs); font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.chip .pre { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--t-xs); }
.chip--keyword { border-color: var(--success); background: var(--success-soft); color: #1F5E3C; }
.chip--exclude { border-color: var(--accent);  background: var(--accent-soft);  color: var(--accent-strong); }
.chip--hashtag { border-color: var(--info);    background: var(--info-soft);    color: #29349B; }
.chip--mention { border-color: var(--purple);  background: var(--purple-soft);  color: #3B2992; }
.chip--geo     { border-color: var(--warning); background: var(--warning-soft); color: #7A5C1E; }
.chip--lang    { border-color: var(--ink-3);   background: var(--bg-3);         color: var(--ink-2); }
.chip--url     { border-color: var(--ink);     background: var(--bg-2);         color: var(--ink); }

/* Badge */
.badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--accent); color: var(--bg-2);
  font-size: 10px; font-weight: 600; line-height: 1;
  font-family: var(--font-mono);
}
.badge-count.ink { background: var(--ink); }
.dot-unread {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--accent);
  display: inline-block;
}

/* Status */
.status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 22px; padding: 0 var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 500;
  line-height: 1;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; flex: 0 0 6px; }
.status--active    { background: var(--success-soft); color: #1F5E3C; }
.status--past_due  { background: var(--warning-soft); color: #7A5C1E; }
.status--suspended { background: var(--accent-soft);  color: var(--accent-strong); }

/* Avatar */
.avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--bg-3);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 600;
  position: relative;
  flex: 0 0 32px;
  border: 1px solid var(--line);
}
.avatar--lg { width: 40px; height: 40px; font-size: var(--t-sm); flex-basis: 40px; }

/* Account menu — K023: the topnav avatar is now a <details> dropdown (no JS)
   giving the signed-in shell a way out to Settings / Sign out. Not in the
   current A02.html canvas (static avatar) — flagged for re-dispatch to add
   an account-menu variant; this is an honest interim built from existing
   design tokens, same pattern as A11's honest-interim call. */
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu[open] > summary .avatar { border-color: var(--accent); }
.acct-dropdown {
  position: absolute; top: calc(100% + var(--s-2)); right: 0;
  min-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: var(--s-2);
  z-index: 50;
}
.acct-dropdown a, .acct-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm, 6px);
  font-size: var(--t-sm); color: var(--ink-2);
  text-decoration: none;
  background: none; border: none; cursor: pointer; font-family: var(--font-sans);
}
.acct-dropdown a:hover, .acct-dropdown button:hover { background: var(--bg-3); }
.acct-dropdown .div { height: 1px; background: var(--line); margin: var(--s-2) 0; }

/* ============ MOLECULES ============ */

/* Pill (used inside lead-card meta) */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 500;
  background: var(--bg-3); color: var(--ink-2);
  border: 1px solid var(--line);
  line-height: 1;
}
.pill--intent-pending {
  background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent);
}
.pill--platform { background: var(--bg-2); color: var(--ink-2); }

/* Lead card (A03 Inbox row) */
.lead-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.lead-meta {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xs); color: var(--ink-3);
  flex-wrap: wrap;
}
.lead-meta .handle { font-family: var(--font-mono); color: var(--ink); }
.lead-meta .time { margin-left: auto; }

.quote {
  margin: 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 2px solid var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--ink);
}

.ai-draft {
  background: var(--bg-3);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.ai-draft .label {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
  display: flex; align-items: center; gap: var(--s-2);
}
.ai-draft .body { font-size: var(--t-sm); line-height: 1.5; color: var(--ink); }
.ai-draft .actions {
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
}

/* Confidence band swatches (composite from @kizuki/confidence) */
.band {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.band--high   { background: var(--success-soft); color: #1F5E3C; border: 1px solid var(--success); }
.band--medium { background: var(--warning-soft); color: #7A5C1E; border: 1px solid var(--warning); }
.band--low    { background: var(--accent-soft);  color: var(--accent-strong); border: 1px solid var(--accent); }

/* Mono micro-caption — KZK-P-054.
   Exists so the 10px mono captions on the MARKETING surfaces stop being inline
   styles. An inline font-size cannot be reached by a media query, so every one of
   them shipped 10px to phones no matter what --t-xs did — which is exactly why the
   KZK-P-053 sweep had to hand-edit 13 inline styles instead of moving one token.
   Carries only family + size; colour / tracking / background stay at the call site
   because they differ per use. Desktop keeps the canvas's 10px; the mobile floor
   below lifts it via the KZK-P-053 list. */
.mono-cap { font-family: var(--font-mono); font-size: 10px; }

/* ============ A03 Inbox layout ============
   3-column shell: filter rail (left) / main feed / activity rail (right)
   Verbatim from assets/from-claude-design-v1/A03.html lines 70-540 */

.topnav {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.topnav-inner {
  max-width: 1480px; margin: 0 auto;
  padding: 0 var(--s-5);
  height: 56px;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: stretch;
  gap: var(--s-5);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  text-decoration: none; font-weight: 600; font-size: var(--t-md);
  letter-spacing: -0.01em; color: var(--ink);
}
/* .brand-mark SVG inline by consumer — see views/svg-icons.tsx KizukiBulb()
 * matches assets/from-claude-design-logo-v1/_raw/.../Kizuki Logo 10.html
 * symbol #sil-bulb (Bold Lightbulb 電球 + 朱 vermillion filament dot)
 */
.tabs {
  display: flex; justify-content: center;
  gap: var(--s-6); align-self: stretch;
}
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 4px;
  font-size: var(--t-sm); color: var(--ink-3); font-weight: 500;
  border-bottom: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: color var(--motion), border-color var(--motion);
  align-self: stretch;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tab .count {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3);
  padding: 1px 5px;
  background: var(--bg-3);
  border-radius: var(--r-sm);
}
.tab.is-active .count { color: var(--bg-2); background: var(--accent); }
.topnav-right { display: flex; align-items: center; gap: var(--s-3); }

/* KZK-F-005 — the merchant topnav grid (220px | 1fr | auto) + centered tabs
   overflowed a 375px phone viewport (horizontal scroll on every console page).
   At <=480px collapse to flex: brand + actions share the top row, the tabs wrap
   to their own full-width row that scrolls horizontally instead of widening the
   page. Mirrors the admin topnav @768 collapse; desktop layout untouched. */
@media (max-width: 480px) {
  .topnav-inner {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding: var(--s-2) var(--s-4);
    gap: var(--s-2) var(--s-4);
    align-items: center;
  }
  .topnav-inner .brand { order: 1; flex: 0 0 auto; }
  .topnav-inner .topnav-right { order: 2; margin-left: auto; }
  .topnav-inner .tabs {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: var(--s-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .topnav-inner .tab { white-space: nowrap; }
}

/* Page grid override for inbox layout (replaces .page rule from earlier) */
.page-inbox {
  max-width: 1480px; margin: 0 auto;
  padding: var(--s-5);
  display: grid;
  grid-template-columns: 240px minmax(0,1fr) 320px;
  gap: var(--s-5);
  align-items: flex-start;
}
/* KZK-P-052 — hidden by default, revealed inside the 1024px block below. This
   base rule MUST stay above that block: same specificity, so if it comes after,
   its display:none wins and the rail collapses on a phone with no way to open
   it — the filters vanish entirely. Measured at 390px before the reorder. */
.rail-mobile-toggle {
  display: none;
  width: 100%; height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-2);
  font-family: inherit; font-size: var(--t-sm); font-weight: 500;
  color: var(--ink);
  align-items: center; justify-content: space-between;
  padding: 0 var(--s-4); cursor: pointer;
}
/* KZK-P-052 — A03's own responsive ladder, adopted verbatim in structure.

   Production previously stacked at 1100px and had no intermediate step, which is
   why it needed the higher number: at 1024-1100 the 240/320 rails left the feed
   too narrow. The canvas solves that with a middle rung (220/1fr/280 below
   1280px) and only stacks at 1024px, so both rungs now exist here and the stack
   point matches the drawing. */
@media (max-width: 1280px) {
  .page-inbox { grid-template-columns: 220px minmax(0,1fr) 280px; }
}
@media (max-width: 1024px) {
  .page-inbox { grid-template-columns: 1fr; }
  .rail { position: static !important; }
  /* The canvas hides the activity rail once the columns stack rather than
     dropping it to the bottom of the page: it is ambient context, and below the
     lead list it is 2000px of scroll past the thing the merchant came for.
     Production kept it visible — the last A03 mobile deviation. */
  aside.right { display: none; }
  .rail-mobile-toggle { display: inline-flex; }
  .rail-collapse { display: none; }
  .rail.is-open .rail-collapse { display: contents; }
}

/* ---- Console shell responsive — verbatim from the prototypes ----
   assets/from-claude-design-v1/A03.html @media 1024/768 and A02.html @media 480.
   Production shipped the desktop .topnav-inner grid (220px 1fr auto) without
   these, so on a phone the 220px brand reservation pushed .tabs to 620px and
   .topnav-right to 676px on a 390px viewport — every authenticated page scrolled
   sideways and the account menu sat off-screen. Measured via a Playwright sweep
   at 390x844 before/after (docs: KZK-P-040).

   The min-width:0 + overflow-x:auto on .tabs is the one addition the prototype
   does not spell out: "auto 1fr auto" alone still overflows at 390px because a
   grid item's default min-width:auto refuses to shrink below its content.
   Containing the scroll inside .tabs keeps the *page* from scrolling, which is
   what the prototype's layout implies. */
@media (max-width: 1024px) {
  .topnav-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 768px) {
  .topnav-inner { padding: 0 var(--s-4); height: 52px; }
  .tabs {
    gap: var(--s-4);
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; }
  .tab .count { display: none; }
}
@media (max-width: 480px) {
  .tabs { gap: var(--s-3); }
  .tab { font-size: var(--t-xs); }
}

/* KZK-P-051 — WCAG 2.5.5 tap-target floor on touch devices.

   The design canvas specifies height:36px for .btn / .input at every width. That
   is a deliberate desktop density choice and it stays untouched: this block is
   gated on pointer:coarse, so every device the prototypes were drawn against
   (mouse) renders byte-identically. What the canvas never specified is a touch
   size — a finger contact patch is ~9mm, so 36px is a miss, not a style.

   Scoped to controls only: no colour, spacing, hierarchy or type change, so this
   completes the canvas rather than diverging from it. The type scale (--t-xs is
   11px, below the 12px legibility floor) IS a design decision and was sent back
   to the canvas rather than patched here —
   docs/design/design-requests/mobile-a11y-2026-07-26.md.

   The canvas answered (console-canon.css v1.1): it took the 44px floor into the
   design system and floored --t-xs at 12px on phones. Both now live in the
   console-canon block at the tail of this file, which widens this selector list
   rather than replacing it. This block stays because it reaches production-only
   classes the canvas never saw (.num-input, .pick, .tmpl-input, .mtx-save). */
@media (max-width: 768px) and (pointer: coarse) {
  .btn,
  .input,
  select.input,
  .acct-menu summary {
    min-height: 44px;
  }
  /* NB: do NOT widen .btn horizontally here. An earlier version added
     horizontal padding here and pushed /settings/platforms 12px past the 390px
     viewport — the long "Connect with Instagram Business" label grew, its card
     could not shrink, and the whole page scrolled sideways. Height is what the
     44px target needs; width comes free from the label. */
  /* Inline links inside a paragraph must NOT be stretched — only links that are
     standalone controls. A blanket rule on every <a> would wreck body copy. */
  .lead-actions a,
  .lead-actions button,
  .settings-layout .btn,
  nav.tabs .tab {
    min-height: 44px;
    /* short labels ("Inbox") measured 39px wide — the strip scrolls, so widening
       costs nothing */
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* The settings surfaces grew their own control classes (.num-input, .pick,
     .tmpl-input, .mtx-save, .nm-save) that never inherited .btn/.input, so the
     reply-rules matrix alone shipped 72 sub-44px targets — the densest and most
     fiddly screen in the product. Reach every real form control instead of
     chasing class names one at a time; checkbox/radio keep their native size
     because the label is the tap target. */
  .settings-layout input:not([type='checkbox']):not([type='radio']),
  .settings-layout select,
  .settings-layout button,
  .settings-layout .subnav-item {
    min-height: 44px;
  }
  /* KZK-P-053 — the Activity-log CSV export link. A styled bare <a> with no class,
     so it slipped past every rule here and measured 20px on a phone. */
  .export-link { min-height: 44px; display: inline-flex; align-items: center; }
  .filter-item { min-height: 44px; display: flex; align-items: center; }
  /* The account menu is a bare avatar, so height alone leaves it too narrow —
     and it is the only route to Settings / Billing / Sign out on a phone. */
  .acct-menu summary { min-width: 44px; justify-content: center; }
  .acct-dropdown a,
  .acct-dropdown button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Marketing chrome header (MarketingHeader — /signup, /pricing, /trust, legal).
   KZK-P-045 — this header is built from inline styles and carries none of the
   .site-nav classes the 760px block below targets, so none of that mobile
   treatment ever reached it. Measured on a 390px phone: the 定價 link laid out
   19px wide and 40px tall — CJK was breaking one character per line, and 進入應用
   wrapped onto three. Two rules fix it: never break a nav label, and let the row
   wrap as a whole when it genuinely runs out of room. */
/* There are several near-duplicate marketing header variants (marketing.tsx has
   a sticky one with .site-nav, marketing-pages.tsx a plain one, legal-pages.tsx
   its own). Rather than chase each, forbid mid-label breaks for every header nav
   link: a nav label is never long enough to need wrapping, and CJK has no spaces
   so the browser will otherwise break it between any two characters. */
header nav a,
.mkt-nav a { white-space: nowrap; }
@media (max-width: 760px) {
  /* Labels no longer break mid-word, so the row itself must be free to wrap —
     otherwise the longer ja labels (アプリを開く) push the header past the
     screen. Applies to every header variant, not just the tagged one. */
  header > div:not(.topnav-inner) { flex-wrap: wrap; row-gap: var(--s-3); }
  .mkt-header-inner { flex-wrap: wrap; row-gap: var(--s-3); }
  /* KZK-P-052 — :not(.tabs) / :not(.topnav-inner). These are marketing-header
     rules, but 'header nav' also matched the console's own nav.tabs, so the
     signed-in tab strip WRAPPED to two rows instead of scrolling. The canvas
     specifies a scrolling strip (.tab white-space:nowrap + .tabs overflow-x:auto),
     and the wrap only became visible once the pending count came back and
     widened the Inbox tab by ~22px. */
  header nav:not(.tabs), .mkt-nav, .site-nav { gap: var(--s-4); flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .mkt-nav { gap: var(--s-3); }
}

/* A14 Platforms — the 8 connection cards. This was two inline
   "grid-template-columns:repeat(2,1fr)" styles, which no media query can
   override, so on a 390px phone the two columns forced the document to 709px:
   the page scrolled sideways AND the position:fixed status bar stretched with
   the widened layout viewport. As a class it can collapse to one column.
   minmax(0,1fr) rather than 1fr so a long platform name cannot re-inflate the
   track past the viewport. */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 720px) {
  /* KZK-P-053 — minmax(0,1fr), not 1fr. The base rule above already learned this
     and its comment says so, but this override reintroduced the bug: 1fr is
     minmax(auto,1fr), and auto floors at min-content. The OAuth card's
     "Connect with Instagram Business" button is white-space: nowrap at 243px,
     so min-content came out at 372px inside a 278px container — the single-column
     mobile grid overflowed harder than the two-column desktop one. Measured at
     390px: document scrollWidth 428. */
  .platform-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Marketing hero — stack to one column on narrow viewports and hide the
   decorative product mockup on mobile. The mock uses position:absolute cards
   that otherwise overflow the viewport below ~760px (horizontal scroll). It is
   aria-hidden, so dropping it on mobile loses no content. */
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: var(--s-5) !important; }
  .hero-mock { display: none !important; }
  /* Keep top-nav labels on one line (CJK otherwise breaks char-by-char) and
     tighten the gap so the row fits a phone without stacking vertically. */
  .site-nav { gap: var(--s-3) !important; }
  .site-nav a { white-space: nowrap; }
  /* Header language switcher is desktop-only; the footer switcher covers mobile,
     where the header row has no room for three locale labels. */
  .nav-locale { display: none !important; }
  /* Footer collapses from 4 fixed columns to 2 on mobile (4 columns of English
     labels otherwise overflow the viewport by ~30px). */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: var(--s-5) !important; }
}

/* Left filter rail */
.rail {
  position: sticky; top: 76px;
  align-self: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.search-wrap { position: relative; }
.search-wrap input {
  width: 100%; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 var(--s-3) 0 30px;
  background: var(--bg);
  font-family: inherit; font-size: var(--t-sm);
  color: var(--ink);
  outline: none;
  transition: border-color var(--motion), box-shadow var(--motion);
}
.search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.search-wrap .ico {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ink-3);
  pointer-events: none;
}

.group { display: flex; flex-direction: column; gap: 2px; }
.group h3 {
  margin: var(--s-3) var(--s-2) var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
}
.group h3 .meta { color: var(--ink-4); font-weight: 400; }
.filter-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: 7px var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--motion);
  border-left: 2px solid transparent;
  background: transparent; border: none; border-left: 2px solid transparent;
  width: 100%; text-align: left; font-family: inherit;
}
.filter-item:hover { background: var(--bg-3); color: var(--ink); }
.filter-item.is-active {
  background: var(--bg-3); color: var(--ink); font-weight: 500;
  border-left-color: var(--accent);
}
.dot-mini {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
}
.filter-item.has-pending .dot-mini { background: var(--accent); }
.filter-item .lbl { flex: 1; min-width: 0; }
.filter-item .count {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-3);
  padding: 1px 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.filter-item.is-active .count {
  background: var(--ink); color: var(--bg-2); border-color: var(--ink);
}
.filter-item .count.accent {
  background: var(--accent); color: var(--bg-2); border-color: var(--accent);
}

/* Main panel */
main.main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.main-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-2) var(--s-1) var(--s-2);
}
.main-head h2 {
  margin: 0;
  font-size: var(--t-xl); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.1;
}
.main-head .sort {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--t-sm); color: var(--ink-3);
  margin: 4px 0 0;
}

/* Lead card (A03) */
.lead {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--motion);
}
.lead:hover { border-color: var(--ink-3); }
.lead.is-pending { border-left: 3px solid var(--accent); }
.lead.is-escalated { border-left: 3px solid var(--warning); }
.lead.no-reply { border-left: 3px solid var(--purple); }
.alert-strip {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  background: var(--warning-soft);
  color: #7A5C1E;
  font-size: var(--t-xs);
  border-bottom: 1px solid var(--warning);
}
/* KZK-B-049's .inbox-notice / .alert-strip--ok lived here: a page-level span
   of the per-card .alert-strip, which the canvas had never drawn. KZK-P-052
   replaced both with the canvas's real .notice component (console-canon block
   at the tail of this file), so they are gone rather than left as dead CSS.
   .alert-strip itself stays — it is the prototype's per-card escalation strip. */
.lead-body {
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 500;
  background: var(--bg-3); color: var(--ink-2);
  border: 1px solid var(--line); line-height: 1;
  font-family: var(--font-mono);
}
.pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--pre_sales_q { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.pill--complaint { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.pill--praise { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.pill--competitor { background: var(--purple-soft); color: #3B2992; border-color: var(--purple); }
.pill--recommendation { background: var(--info-soft); color: #29349B; border-color: var(--info); }
.pill--discovery { background: var(--warning-soft); color: #7A5C1E; border-color: var(--warning); }
.pill--question { background: var(--bg-3); color: var(--ink-2); border-color: var(--line); }

/* Lead body uses pre-existing .lead-meta + .quote + .ai-draft above */
.lead-actions {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
}
.lead-actions .spacer { flex: 1; min-width: 0; }
.lead-actions .btn { height: 34px; }
.btn--sm { height: 32px; padding: 0 var(--s-3); font-size: var(--t-xs); }
.btn--accent { background: var(--accent); color: var(--bg-2); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-link {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-3); font-size: var(--t-xs);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0 var(--s-2); font-family: inherit;
}

/* Empty state (no pending drafts) */
.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  background: var(--bg-2);
}
.empty .empty-label {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: var(--s-3);
}
.empty h3 {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--t-lg);
  font-weight: 400; color: var(--ink);
  margin: 0 0 var(--s-2);
}
.empty p {
  margin: 0 auto;
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 460px;
  line-height: 1.55;
}

/* Right activity rail */
aside.right {
  position: sticky; top: 76px;
  align-self: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
aside.right h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 500;
}

/* Ai-draft tweaks for A03 (overrides earlier defaults) */
.ai-draft .label .stars { color: var(--accent); letter-spacing: 1px; font-style: normal; }
.ai-draft .label .gate {
  font-family: var(--font-mono); font-style: normal;
  background: var(--warning-soft); color: #7A5C1E;
  padding: 1px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--warning);
  font-size: 10px; font-weight: 600;
  margin-left: auto;
}
.ai-draft .body em { font-style: normal; color: var(--ink); }

/* ============ A07/A0x Settings — subnav + intent-decision matrix ============
   Verbatim visual language from assets/from-claude-design-v1/A07.html <style>,
   scoped under .settings-layout so its .subnav / .matrix / .pick don't collide
   with other surfaces. The matrix "rows" are real per-intent <form>s (CSS-grid
   styled to align columns) that reuse POST /v1/reply-rules/upsert — no JS. */
.settings-layout { max-width: 1240px; margin: 0 auto; padding: var(--s-6) var(--s-5); display: grid; grid-template-columns: 220px minmax(0,1fr); gap: var(--s-6); align-items: start; }
.settings-layout .subnav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 2px; }
.settings-layout .subnav-head { padding: 0 var(--s-3) var(--s-3); }
.settings-layout .subnav-head .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.settings-layout .subnav-head .title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-top: 2px; }
.settings-layout .subnav-item { display: flex; align-items: center; padding: 8px var(--s-3); border-radius: var(--r-md); font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; text-decoration: none; border-left: 2px solid transparent; transition: background var(--motion); }
.settings-layout .subnav-item:hover { background: var(--bg-3); color: var(--ink); }
.settings-layout .subnav-item.is-active { background: var(--bg-3); color: var(--ink); font-weight: 500; border-left-color: var(--accent); padding-left: 10px; }
.settings-layout .subnav-item .count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.settings-layout .subnav-divider { height: 1px; background: var(--line-2); margin: var(--s-2) 0; }
.settings-layout .s-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.settings-layout .page-head .crumb { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: var(--s-2); }
.settings-layout .page-head .crumb .sep { color: var(--ink-4); padding: 0 var(--s-2); }
.settings-layout .page-head h1 { margin: 0; font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.settings-layout .page-head .sub { margin: 4px 0 0; font-family: var(--font-serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-3); max-width: 560px; }
.settings-layout .s-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.settings-layout .s-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.settings-layout .s-panel-head h2 { margin: 0; font-size: var(--t-md); font-weight: 500; letter-spacing: -0.005em; }
.settings-layout .s-panel-head .sub { margin: 4px 0 0; font-family: var(--font-serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-3); max-width: 480px; }
.settings-layout .s-panel-head .right-meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); }
.settings-layout .matrix-scroll { overflow-x: auto; }
/* Header + per-intent form rows share this 7-column grid so they read as a matrix. */
.settings-layout .mtx { min-width: 900px; }
.settings-layout .mtx-head, .settings-layout .mtx-row { display: grid; grid-template-columns: 168px 116px minmax(140px,1fr) 90px 96px 132px 72px 84px; gap: var(--s-3); align-items: center; }
.settings-layout .mtx-head { padding: var(--s-3); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.settings-layout .mtx-row { padding: var(--s-3); border: 1px solid var(--line); border-top: 0; margin: 0; }
.settings-layout .mtx-row:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
.settings-layout .mtx-row:hover { background: var(--bg); }
.settings-layout .mtx-intent { font-family: var(--font-mono); font-weight: 500; color: var(--ink); font-size: var(--t-xs); }
.settings-layout .mtx-intent .pri { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.settings-layout .mtx-intent .pri.high { background: var(--accent); }
.settings-layout .mtx-intent .pri.mid { background: var(--warning); }
.settings-layout .mtx-intent .pri.low { background: var(--ink-4); }
.settings-layout .mtx-intent .ja { display: block; color: var(--ink-3); font-family: var(--font-sans); font-size: 10px; margin-top: 1px; }
.settings-layout .pick, .settings-layout .num-input, .settings-layout .tmpl-input { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink); padding: 0 var(--s-2); outline: none; }
.settings-layout .tmpl-input { font-family: var(--font-sans); }
.settings-layout .pick:focus, .settings-layout .num-input:focus, .settings-layout .tmpl-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-layout .pick.dec-never { color: var(--danger); border-color: var(--danger); }
.settings-layout .pick.dec-maybe { color: #7A5C1E; }
.settings-layout .tw { display: flex; align-items: center; gap: 4px; }
.settings-layout .tw .num-input { width: 46px; text-align: center; padding: 0; }
.settings-layout .tw .dash { color: var(--ink-4); font-family: var(--font-mono); font-size: 10px; }
/* Escalate = a checkbox styled as a toggle (real, no JS). */
.settings-layout .esc { display: inline-flex; align-items: center; }
.settings-layout .esc input { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-layout .esc .track { width: 36px; height: 20px; border-radius: 999px; background: var(--line); border: 1px solid var(--line); position: relative; transition: background var(--motion); cursor: pointer; }
.settings-layout .esc .track::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-2); box-shadow: var(--shadow-sm); transition: transform var(--motion); }
.settings-layout .esc input:checked + .track { background: var(--accent); border-color: var(--accent); }
.settings-layout .esc input:checked + .track::after { transform: translateX(16px); }
.settings-layout .esc input:focus-visible + .track { box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-layout .mtx-save { height: 30px; padding: 0 var(--s-2); border-radius: var(--r-sm); border: 1px solid var(--ink); background: var(--ink); color: var(--bg-2); font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; }
.settings-layout .mtx-save:hover { background: var(--ink-2); border-color: var(--ink-2); }
.settings-layout .s-flash { background: var(--success-soft); border: 1px solid var(--success); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); color: var(--success); font-size: var(--t-sm); }
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-layout .subnav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* A08 CTA library — card grid (verbatim visual from A08.html, scoped). Text/URL/
   intents render as styled display (inline edit needs JS/endpoints that don't
   exist); the active toggle + delete are real POST forms. */
.settings-layout .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.settings-layout .cta-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); position: relative; display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); transition: border-color var(--motion); }
.settings-layout .cta-card:hover { border-color: var(--ink-3); }
.settings-layout .cta-card.is-top { border-left: 3px solid var(--accent); }
.settings-layout .cta-card.is-inactive { opacity: 0.55; }
.settings-layout .cta-card .drag { color: var(--ink-4); font-family: var(--font-mono); font-size: 14px; user-select: none; text-align: center; padding-top: 4px; line-height: 0.6; }
.settings-layout .cta-body { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.settings-layout .cta-top-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.settings-layout .cta-top-row .spacer { flex: 1; }
.settings-layout .top-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); padding: 1px var(--s-2); border-radius: var(--r-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.settings-layout .top-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.settings-layout .kind-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); background: var(--bg-3); border: 1px solid var(--line); padding: 1px var(--s-2); border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.settings-layout .cta-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 0; }
.settings-layout .cta-toggle .tk { width: 28px; height: 16px; background: var(--line); border-radius: var(--r-full); position: relative; flex: 0 0 28px; transition: background var(--motion); }
.settings-layout .cta-toggle .tk::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--bg-2); border-radius: 50%; transition: transform var(--motion); box-shadow: var(--shadow-sm); }
.settings-layout .cta-toggle.is-on { color: var(--success); }
.settings-layout .cta-toggle.is-on .tk { background: var(--success); }
.settings-layout .cta-toggle.is-on .tk::after { transform: translateX(12px); }
.settings-layout .cta-text { font-family: inherit; font-size: var(--t-sm); color: var(--ink); font-weight: 500; line-height: 1.45; padding: 6px var(--s-2); border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line-2); word-break: break-word; }
.settings-layout details.url-expand { border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 6px var(--s-3); }
.settings-layout details.url-expand summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 4px; }
.settings-layout details.url-expand summary::-webkit-details-marker { display: none; }
.settings-layout details.url-expand summary::before { content: '＋'; color: var(--ink-3); font-family: var(--font-sans); }
.settings-layout details.url-expand[open] summary::before { content: '－'; }
.settings-layout details.url-expand summary .url-preview { margin-left: var(--s-2); color: var(--info); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.settings-layout details.url-expand .url-full { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); word-break: break-all; }
.settings-layout .intent-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.settings-layout .intent-chips .label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-right: var(--s-2); }
.settings-layout .ic { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--s-2); border-radius: var(--r-full); border: 1px solid var(--line); background: var(--bg-2); font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); line-height: 1; font-weight: 500; }
.settings-layout .ic.is-on { background: var(--ink); color: var(--bg-2); border-color: var(--ink); }
.settings-layout .cta-stats { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-2); border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.settings-layout .cta-stats .stat { display: inline-flex; align-items: center; gap: 4px; }
.settings-layout .cta-stats .stat strong { color: var(--ink); font-weight: 600; }
.settings-layout .cta-stats .stat.ctr strong { color: var(--success); }
.settings-layout .cta-stats .spacer { flex: 1; }
.settings-layout .cta-stats .actions { display: inline-flex; gap: 2px; }
.settings-layout .icon-mini { width: 24px; height: 24px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: pointer; }
.settings-layout .icon-mini:hover { background: var(--bg-3); color: var(--ink); }
.settings-layout .icon-mini.danger:hover { color: var(--accent); }
@media (max-width: 900px) { .settings-layout .cta-grid { grid-template-columns: 1fr; } }

/* A10 Notifications — per-category x channel matrix (verbatim visual from A10.html,
   scoped). Honest: the web Save persists the channel via /v1/notification-prefs/upsert;
   silence_until is set by the Telegram /silence command and shown read-only here.
   Quiet-hours + role-defaults from the prototype are NOT stored — rendered as honest
   info, not fake controls. */
/* KZK-P-036 — two extra channel columns (Browser / All) landed with migration
   0022. Column count MUST match the nm-head spans + CHANNELS array in
   settings-pages.tsx. Widths tightened so the row still fits 1024px. */
.settings-layout .nm-head, .settings-layout .nm-row { display: grid; grid-template-columns: minmax(160px,1fr) 62px 62px 62px 70px 52px 62px 74px; gap: var(--s-2); align-items: center; }
.settings-layout .nm-head { padding: var(--s-3); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; }
.settings-layout .nm-head span:first-child { text-align: left; }
.settings-layout .nm-row { padding: var(--s-3); border: 1px solid var(--line); border-top: 0; }
.settings-layout .nm-row:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
.settings-layout .nm-row:hover { background: var(--bg); }
.settings-layout .nm-row.is-critical { background: rgba(220,50,47,0.025); }
.settings-layout .nm-event { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.settings-layout .nm-ico { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--r-sm); background: var(--bg-3); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.settings-layout .nm-row.is-critical .nm-ico { background: var(--accent-soft); border-color: var(--accent); }
.settings-layout .nm-body { min-width: 0; }
.settings-layout .nm-name { font-size: var(--t-sm); font-weight: 500; color: var(--ink); line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.settings-layout .nm-crit { font-family: var(--font-mono); font-size: 9px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.settings-layout .nm-desc { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.settings-layout .nm-cell { display: flex; justify-content: center; }
.settings-layout .nm-bullet-wrap { display: inline-flex; cursor: pointer; }
.settings-layout .nm-bullet-wrap input { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-layout .nm-bullet { width: 18px; height: 18px; border: 1.5px solid var(--ink-3); border-radius: 50%; background: var(--bg-2); display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--motion); }
.settings-layout .nm-bullet-wrap:hover .nm-bullet { border-color: var(--ink); }
.settings-layout .nm-bullet-wrap input:checked + .nm-bullet { border-color: var(--accent); }
.settings-layout .nm-bullet-wrap input:checked + .nm-bullet::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.settings-layout .nm-bullet-wrap input:focus-visible + .nm-bullet { box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-layout .nm-lock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); padding: 4px 6px; border: 1px dashed var(--line); border-radius: var(--r-sm); white-space: nowrap; }
.settings-layout .nm-save { height: 28px; width: 100%; padding: 0 var(--s-2); border-radius: var(--r-sm); border: 1px solid var(--ink); background: var(--ink); color: var(--bg-2); font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.settings-layout .nm-save:hover { background: var(--ink-2); }
.settings-layout .matrix-note { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--bg-3); border-left: 2px solid var(--ink-3); border-radius: 2px; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); line-height: 1.6; }
.settings-layout .matrix-note strong { color: var(--ink); }
.settings-layout .nm-silence { grid-column: 1 / -1; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: #7A5C1E; background: var(--warning-soft); border-radius: var(--r-sm); padding: 2px var(--s-2); }
/* Telegram / email honest info cards + quiet-hours note */
.settings-layout .info-card { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: center; padding: var(--s-4); border-radius: var(--r-md); }
.settings-layout .info-card.tg { background: var(--info-soft); border: 1px solid var(--info); }
.settings-layout .info-card.plain { background: var(--bg-3); border: 1px solid var(--line); }
.settings-layout .info-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.settings-layout .info-card.tg .info-ico { border-color: var(--info); }
.settings-layout .info-card .status { font-size: var(--t-sm); font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.settings-layout .info-card .status.ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.settings-layout .info-card .status.off::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.settings-layout .info-card .meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); margin-top: 4px; word-break: break-all; }
.settings-layout .info-card .meta strong { color: var(--ink); }
.settings-layout .quiet-note { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--warning-soft); border-left: 2px solid var(--warning); border-radius: 2px; font-size: var(--t-xs); color: #7A5C1E; line-height: 1.6; }
.settings-layout .quiet-note strong { color: #5A4310; }
@media (max-width: 760px) {
  .settings-layout .nm-head { display: none; }
  .settings-layout .nm-row { grid-template-columns: 1fr 1fr; }
  .settings-layout .nm-event { grid-column: 1 / -1; }
}

/* A09 Team & roles — members table + invite card + transfer + audit log
   (verbatim visual from A09.html, scoped). Roster + pending invites + audit are
   real D1 reads; invite/revoke/remove are real POST forms (team-handler.ts).
   Role-change select + ownership-transfer have no backend → rendered honest
   (read-only pill / disabled + note), not fake controls. */
.settings-layout .tm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.settings-layout .seat-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px var(--s-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-full); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); margin-top: 6px; }
.settings-layout .seat-pill strong { color: var(--ink); font-weight: 600; }
.settings-layout .members-scroll { overflow-x: auto; }
.settings-layout table.members { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; font-size: var(--t-sm); }
.settings-layout table.members thead th { text-align: left; padding: var(--s-3); background: var(--bg-3); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; white-space: nowrap; }
.settings-layout table.members thead th:first-child { border-top-left-radius: var(--r-md); }
.settings-layout table.members thead th:last-child { border-top-right-radius: var(--r-md); }
.settings-layout table.members tbody td { padding: var(--s-3); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.settings-layout table.members tbody tr:last-child td { border-bottom: 0; }
.settings-layout table.members tbody tr:hover td { background: var(--bg); }
.settings-layout table.members tbody tr.is-pending td { background: rgba(212, 162, 76, 0.05); }
.settings-layout .who { display: flex; align-items: center; gap: var(--s-3); }
.settings-layout .who .av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; position: relative; }
.settings-layout .who .av.owner { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.settings-layout .who .av.admin { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.settings-layout .who .av.pending { background: var(--warning-soft); color: #7A5C1E; border-color: var(--warning); border-style: dashed; font-size: 14px; }
.settings-layout .who .av.tg::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; background: var(--accent); border-radius: 50%; border: 2px solid var(--bg-2); }
.settings-layout .who .name { font-size: var(--t-sm); font-weight: 500; color: var(--ink); line-height: 1.3; }
.settings-layout .who .name.italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-3); }
.settings-layout .who .you { font-family: var(--font-mono); font-size: 10px; color: var(--accent); margin-left: var(--s-2); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.settings-layout td.email { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); }
.settings-layout td.last { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); }
.settings-layout td.last.now { color: var(--success); }
.settings-layout td.tg { text-align: center; }
.settings-layout td.tg .yes { color: var(--success); font-weight: 700; }
.settings-layout td.tg .no { color: var(--ink-4); font-family: var(--font-mono); font-size: var(--t-xs); }
.settings-layout td.act { white-space: nowrap; text-align: right; }
.settings-layout td.act .lock { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px var(--s-2); border: 1px dashed var(--line); border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 4px; }
.settings-layout .role-cell { position: relative; }
/* Read-only role pill styled like the prototype's role-pick (no role-change endpoint yet). */
.settings-layout .role-pill2 { display: inline-flex; height: 28px; align-items: center; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.settings-layout .role-pill2.owner { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.settings-layout .role-pill2.admin { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.settings-layout .role-pill2.va { background: var(--bg-3); color: var(--ink-2); }
.settings-layout .role-cell .tip { position: absolute; top: calc(100% + 6px); left: 0; width: 240px; background: var(--ink); color: var(--bg-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--t-xs); line-height: 1.55; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity var(--motion); z-index: 10; }
.settings-layout .role-cell:hover .tip { opacity: 1; }
.settings-layout .role-cell .tip strong { color: var(--bg-2); font-weight: 600; }
.settings-layout .role-cell .tip em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.settings-layout .invited-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: #7A5C1E; background: var(--warning-soft); border: 1px solid var(--warning); padding: 2px var(--s-2); border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; line-height: 1.4; }
.settings-layout .invited-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.settings-layout .tm-remove { background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: var(--t-xs); color: var(--ink-3); padding: 4px var(--s-2); border-radius: var(--r-sm); }
.settings-layout .tm-remove:hover { background: var(--bg-3); color: var(--ink); }
.settings-layout .tm-remove.danger:hover { color: var(--accent); background: var(--accent-soft); }
/* Invite card */
.settings-layout .invite-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.settings-layout .invite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.settings-layout .invite-card .field { display: flex; flex-direction: column; gap: var(--s-2); }
.settings-layout .invite-card .field-label { font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.settings-layout .invite-card .input { height: 40px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--s-4); background: var(--bg-2); color: var(--ink); font-family: inherit; font-size: var(--t-sm); outline: none; transition: border-color var(--motion), box-shadow var(--motion); }
.settings-layout .invite-card .input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-layout .invite-card .helper { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }
.settings-layout .invite-card .helper.warn { color: #7A5C1E; }
.settings-layout .radio-row { display: flex; gap: var(--s-2); }
.settings-layout .radio-card { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; background: var(--bg-2); transition: border-color var(--motion), background var(--motion); }
.settings-layout .radio-card:hover { border-color: var(--ink-3); }
.settings-layout .radio-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-layout .radio-card .head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.settings-layout .radio-card .knob { width: 14px; height: 14px; border: 1.5px solid var(--ink-3); border-radius: 50%; flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-2); }
.settings-layout .radio-card .desc { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; padding-left: 22px; }
.settings-layout .radio-card:has(input:checked) { background: var(--bg-3); border-color: var(--ink); }
.settings-layout .radio-card:has(input:checked) .knob { border-color: var(--ink); }
.settings-layout .radio-card:has(input:checked) .knob::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.settings-layout .radio-card:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-layout .tg-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-md); }
.settings-layout .tg-row .body { flex: 1; min-width: 0; }
.settings-layout .tg-row .label { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.settings-layout .tg-row .desc { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }
.settings-layout .tg-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.settings-layout .tg-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-layout .tg-toggle .track { width: 30px; height: 18px; background: var(--line); border-radius: var(--r-full); position: relative; flex: 0 0 30px; transition: background var(--motion); }
.settings-layout .tg-toggle .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--bg-2); border-radius: 50%; transition: transform var(--motion); box-shadow: var(--shadow-sm); }
.settings-layout .tg-toggle input:checked + .track { background: var(--accent); }
.settings-layout .tg-toggle input:checked + .track::after { transform: translateX(12px); }
.settings-layout .tg-toggle input:focus-visible + .track { box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-layout .seat-warn { background: var(--warning-soft); border-left: 2px solid var(--warning); border-radius: 2px; padding: var(--s-3) var(--s-4); font-size: var(--t-xs); color: #7A5C1E; line-height: 1.55; }
.settings-layout .seat-warn strong { color: #5A4310; }
.settings-layout .invite-foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--line-2); }
.settings-layout .invite-foot .spacer { flex: 1; }
/* Ownership transfer (danger-tint) + audit log */
.settings-layout .s-panel.danger-tint { border-color: var(--warning); position: relative; }
.settings-layout .s-panel.danger-tint::before { content: ''; display: block; height: 3px; background: var(--warning); border-radius: var(--r-lg) var(--r-lg) 0 0; margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4); }
.settings-layout .transfer-note { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; padding: var(--s-3) var(--s-4); background: var(--bg-3); border-left: 2px solid var(--ink-3); border-radius: 2px; }
.settings-layout .transfer-note strong { color: var(--ink); }
.settings-layout .log { display: flex; flex-direction: column; }
.settings-layout .log-row { display: grid; grid-template-columns: 96px 22px 1fr; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-xs); line-height: 1.45; }
.settings-layout .log-row:last-child { border-bottom: 0; }
.settings-layout .log-row .t { font-family: var(--font-mono); color: var(--ink-3); }
.settings-layout .log-row .ico { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--bg-3); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; font-size: 12px; }
.settings-layout .log-row .ico.ok { background: var(--success-soft); border-color: var(--success); }
.settings-layout .log-row .ico.add { background: var(--info-soft); border-color: var(--info); }
.settings-layout .log-row .ico.del { background: var(--accent-soft); border-color: var(--accent); }
.settings-layout .log-row .ico.warn { background: var(--warning-soft); border-color: var(--warning); }
.settings-layout .log-row .body strong { color: var(--ink); font-weight: 600; }
.settings-layout .log-row .body .meta-line { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; }
@media (max-width: 900px) { .settings-layout .invite-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .settings-layout table.members thead { display: none; }
  .settings-layout table.members, .settings-layout table.members tbody, .settings-layout table.members tr, .settings-layout table.members td { display: block; width: 100%; }
  .settings-layout table.members tbody tr { margin-bottom: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); }
  .settings-layout table.members tbody td { border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; }
}

/* A11 Billing — numbered card system (visual language from A11.html, scoped;
   classes bill-prefixed to avoid the global .card/.card-head). NOTE: A11.html is
   the superseded v0.5 "Claude subscription pass-through" design; the CONTENT here
   is the current 4-tier central-inference model (CLAUDE.md) — usage meter + plan
   badge + real Stripe invoices/plan-changes/failed-payments. All figures real D1. */
.settings-layout .bill-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); position: relative; }
.settings-layout .bill-eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-2); }
.settings-layout .bill-eyebrow .num { color: var(--accent); font-weight: 700; }
.settings-layout .bill-eyebrow.accent { color: var(--accent); }
.settings-layout .bill-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.settings-layout .bill-card-head .left { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.settings-layout .bill-card-head h2 { margin: 0; font-size: var(--t-md); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; }
.settings-layout .bill-body { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; max-width: 640px; }
.settings-layout .bill-body strong { color: var(--ink); font-weight: 600; }
/* Status pill */
.settings-layout .bill-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--s-3); border-radius: var(--r-full); font-family: var(--font-mono); font-size: 10px; font-weight: 700; border: 1px solid; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.06em; }
.settings-layout .bill-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.settings-layout .bill-status.ok { color: var(--success); background: var(--success-soft); border-color: var(--success); }
.settings-layout .bill-status.warn { color: #7A5C1E; background: var(--warning-soft); border-color: var(--warning); }
.settings-layout .bill-status.off { color: var(--ink-3); background: var(--bg-3); border-color: var(--line); }
.settings-layout .bill-status.accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
/* State row */
.settings-layout .bill-state { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-md); }
.settings-layout .bill-state.ok { background: var(--success-soft); border-color: var(--success); }
.settings-layout .bill-state.warn { background: var(--warning-soft); border-color: var(--warning); }
.settings-layout .bill-state.empty { background: var(--bg); border-style: dashed; }
.settings-layout .bill-state-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); flex: 0 0 40px; font-size: 18px; }
.settings-layout .bill-state.ok .bill-state-ico { border-color: var(--success); color: var(--success); }
.settings-layout .bill-state.warn .bill-state-ico { border-color: var(--warning); color: var(--warning); }
.settings-layout .bill-state .st-body { min-width: 0; }
.settings-layout .bill-state .st-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.settings-layout .bill-state .st-value { font-size: var(--t-sm); color: var(--ink); font-weight: 600; margin-top: 2px; display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.settings-layout .bill-state .st-value .meta { color: var(--ink-3); font-weight: 400; font-family: var(--font-mono); font-size: var(--t-xs); }
.settings-layout .bill-state .st-helper { font-size: var(--t-xs); color: var(--ink-3); margin-top: 4px; }
/* Usage progress bar */
.settings-layout .bill-usage-bar { background: var(--bg-3); border-radius: var(--r-md); height: 8px; overflow: hidden; }
.settings-layout .bill-usage-bar > span { display: block; height: 100%; transition: width 220ms ease; }
.settings-layout .bill-usage-legend { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-3); }
.settings-layout .bill-usage-legend strong { color: var(--ink); }
/* Plan badge */
.settings-layout .plan-badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-4); border-radius: var(--r-md); font-weight: 600; font-size: var(--t-sm); border: 1px solid; }
.settings-layout .plan-badge.demo { background: var(--bg-3); color: var(--ink-2); border-color: var(--line); }
.settings-layout .plan-badge.pro { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.settings-layout .plan-badge.business { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.settings-layout .plan-badge.enterprise { background: var(--ink); color: var(--bg-2); border-color: var(--ink); }
.settings-layout .plan-badge .price { font-family: var(--font-mono); font-weight: 700; margin-left: 4px; }
.settings-layout .plan-meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); }
.settings-layout .plan-meta strong { color: var(--ink); font-weight: 600; }
/* Upgrade plan-list */
.settings-layout .plan-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.settings-layout .plan-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.settings-layout .plan-card.is-rec { border-color: var(--accent); border-left: 3px solid var(--accent); }
.settings-layout .plan-card .pc-name { font-size: var(--t-sm); font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-2); }
.settings-layout .plan-card .pc-name .rec { font-family: var(--font-mono); font-size: 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.settings-layout .plan-card .pc-price { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.settings-layout .plan-card .pc-price .per { font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.settings-layout .plan-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.55; }
.settings-layout .plan-card li { padding-left: 14px; position: relative; }
.settings-layout .plan-card li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 700; }
.settings-layout .plan-card .pc-cta { margin-top: auto; padding-top: var(--s-2); }
/* Actions row */
.settings-layout .bill-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding-top: var(--s-3); border-top: 1px dashed var(--line); }
.settings-layout .bill-actions .spacer { flex: 1; }
/* Note */
.settings-layout .bill-note { background: var(--bg-3); border-left: 2px solid var(--info); border-radius: 2px; padding: var(--s-3) var(--s-4); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); line-height: 1.65; }
.settings-layout .bill-note strong { color: var(--ink); font-weight: 700; }
/* Invoice table + empty */
.settings-layout .invoice-empty { background: var(--bg); border: 1px dashed var(--line); border-radius: var(--r-md); padding: var(--s-5); text-align: center; color: var(--ink-3); font-size: var(--t-sm); line-height: 1.7; }
.settings-layout .invoice-empty strong { color: var(--ink); font-weight: 600; }
.settings-layout table.invoices { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.settings-layout table.invoices th { text-align: left; padding: var(--s-3); font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; }
.settings-layout table.invoices td { padding: var(--s-3); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.settings-layout table.invoices tr:last-child td { border-bottom: 0; }
.settings-layout table.invoices td.date { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }
.settings-layout table.invoices td.amt { font-family: var(--font-mono); font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
/* Plan-change log */
.settings-layout .pc-log { display: flex; flex-direction: column; }
.settings-layout .pc-log-row { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-sm); align-items: center; }
.settings-layout .pc-log-row:last-child { border-bottom: 0; }
.settings-layout .pc-log-row .t { font-family: var(--font-mono); color: var(--ink-3); font-size: var(--t-xs); }
.settings-layout .pc-log-row .amt { font-family: var(--font-mono); color: var(--ink-3); font-size: var(--t-xs); text-align: right; }
@media (max-width: 900px) { .settings-layout .plan-list { grid-template-columns: 1fr; } .settings-layout .bill-state { grid-template-columns: 40px 1fr; } .settings-layout .bill-state .btn, .settings-layout .bill-state a { grid-column: 1 / -1; } }

/* A06 Brand voice — Voice DNA card + sample paste (visual language from A06.html,
   scoped). Voice DNA = real tenants.brand_voice_fingerprint; the paste textarea =
   real POST /v1/brand-voice/extract. Per-locale overrides / connected-account
   auto-pull / CSV / live-test from the prototype are NOT backed → honest planned
   note, not fake controls. */
.settings-layout .dna-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.settings-layout .dna-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.settings-layout .dna-trait { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--s-3); background: var(--bg-2); border: 1px solid var(--ink); border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 500; color: var(--ink); line-height: 1; }
.settings-layout .dna-trait .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.settings-layout .dna-trait.taboo { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.settings-layout .dna-trait.taboo .dot { background: var(--accent-strong); }
.settings-layout .dna-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); }
.settings-layout .dna-meta strong { color: var(--ink); font-weight: 600; }
.settings-layout .voice-sample { margin-top: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--bg-2); border-left: 2px solid var(--accent); border-radius: 2px; font-family: var(--font-serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; }
.settings-layout .dna-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.settings-layout .dna-empty { background: var(--bg); border: 1px dashed var(--line); border-radius: var(--r-md); padding: var(--s-6) var(--s-4); text-align: center; color: var(--ink-3); font-size: var(--t-sm); line-height: 1.6; }
.settings-layout .dna-empty strong { color: var(--ink); font-weight: 600; }
.settings-layout .dna-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; }
/* Sample paste */
.settings-layout .sample-input { width: 100%; min-height: 180px; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: var(--bg-2); font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.55; color: var(--ink); resize: vertical; outline: none; transition: border-color var(--motion), box-shadow var(--motion); }
.settings-layout .sample-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-layout .sample-foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.settings-layout .sample-foot .counter { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-4); }
/* Planned (not-yet-wired) honest note */
.settings-layout .planned-note { background: var(--bg-3); border-left: 2px solid var(--info); border-radius: 2px; padding: var(--s-3) var(--s-4); font-size: var(--t-xs); color: var(--ink-2); line-height: 1.7; }
.settings-layout .planned-note strong { color: var(--ink); }
.settings-layout .planned-note ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); }
@media (max-width: 768px) { .settings-layout .dna-meta { grid-template-columns: 1fr; } }

/* ==============================================================
   console-canon — KZK-P-052
   Mirror of assets/from-claude-design-v1/console-canon.css v1.1, the
   canvas's answer to docs/design/design-requests/mobile-a11y-2026-07-26.md.

   In the prototypes this arrives as <link href="console-canon.css"> placed
   AFTER each surface's own <style>, so it wins the cascade. Production
   serves one stylesheet, so it lives at the tail of this file for the same
   reason — do NOT hoist it above the base rules or the count/type-scale
   overrides stop overriding.

   Four decisions the canvas made, replacing three omissions and one of our
   own additions:
     1 · pending count survives every width (was display:none below 768px)
     2 · --t-xs floors at 12px on phones (was 11px at every width)
     3 · touch targets 44px on coarse pointers (widened from KZK-P-051)
     4 · .notice = the page-level notice component (replaces .inbox-notice,
         which was our ad-hoc span of .alert-strip — see KZK-B-049)
   ============================================================== */

/* 4 · page-level notice. Distinct from .alert-strip, which stays per-card
   (the escalation warning inside a lead card). .notice speaks about the PAGE:
   the three ways approving a draft can end are three variants, not one strip.
     success → sent to the platform
     warning → adopted, platform not connected yet
     info    → adopted on a hostile platform, merchant submits by hand */
.notice { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-md); background: var(--bg-2); font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
.notice + .notice { margin-top: var(--s-2); }
.notice .n-ico { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; }
.notice .n-body { min-width: 0; }
.notice .n-body strong { color: var(--ink); font-weight: 600; }
/* .n-meta carries the operational payload ("1 reply queued · connect to
   release"). Uses var(--t-xs) — 11px desktop / 12px phone — so decision 2's
   floor governs it too, including elements introduced by decision 4. */
.notice .n-body .n-meta { display: block; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.notice .n-act { display: inline-flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.notice .n-dismiss { background: transparent; border: 0; cursor: pointer; color: var(--ink-3); font-size: 14px; line-height: 1; padding: var(--s-2); }
.notice .n-dismiss:hover { color: var(--ink); }
.notice--success { border-color: var(--success); border-left-color: var(--success); background: var(--success-soft); }
.notice--success .n-ico { background: var(--bg-2); color: var(--success); }
.notice--success .n-body, .notice--success .n-body strong { color: #1F5E3C; }
.notice--warning { border-color: var(--warning); border-left-color: var(--warning); background: var(--warning-soft); }
.notice--warning .n-ico { background: var(--bg-2); color: var(--warning); }
.notice--warning .n-body { color: #5A4310; }
.notice--warning .n-body strong { color: #2A2206; }
.notice--info { border-color: var(--info); border-left-color: var(--info); background: var(--info-soft); }
.notice--info .n-ico { background: var(--bg-2); color: var(--info); }
.notice--info .n-body, .notice--info .n-body strong { color: #29349B; }
.notice--danger { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.notice--danger .n-ico { background: var(--bg-2); color: var(--accent); }
.notice--danger .n-body, .notice--danger .n-body strong { color: var(--accent-strong); }

@media (max-width: 768px) {
  /* 2 · mobile legibility floor. --t-xs was 11px and load-bearing across 8
     recurring elements (.field-label .helper .pill .count .sort, mono
     captions, table headers, the Compose cost note). The canvas's ruling:
     legibility outranks pixel-parity with the desktop drawing, so the
     vertical rhythm shifting slightly on phones is correct, not a defect. */
  :root { --t-xs: 12px; }

  /* 1 · the pending count survives every width. It was dropped for tab-strip
     width, not for meaning — and it is why a merchant opens the console at
     all ("you have 12 replies waiting"). Width comes back from the tab gap. */
  .tab .count, .tab-top .count { display: inline-flex !important; font-size: var(--t-xs); }
  .tabs { gap: var(--s-4); }

  /* notice: the action wraps under the body on narrow screens */
  .notice { grid-template-columns: 22px 1fr; }
  .notice .n-act { grid-column: 2 / -1; justify-self: flex-start; }

  /* 2b · KZK-P-053 — the floor has to reach the captions that hardcode past it.
     Raising :root --t-xs only moves elements that READ the token. A 390px sweep
     of all 14 signed-in surfaces found 33 console rules with literal 9px/10px
     font-sizes, so the worst screens still shipped sub-floor text after the token
     moved: /settings/reply-rules 37 runs, /settings/notifications 34 (4 of them
     9px). The canvas's own canon rewrote its literals to var(--t-xs) for exactly
     this reason — "the floor governs every caption in the system".

     Mobile-only on purpose: the literals are the canvas's desktop values (the
     10px .tab .count and mono meta-lines are drawn that way), so overwriting them
     outright would drift from the drawing at every width. Below 768px the floor
     wins; above it, nothing changes. */
  .mono-cap,
  .badge-count,
  .ai-draft .label .gate,
  .settings-layout .subnav-head .lbl,
  .settings-layout .subnav-item .count,
  .settings-layout .mtx-head,
  .settings-layout .mtx-intent .ja,
  .settings-layout .tw .dash,
  .settings-layout .mtx-save,
  .settings-layout .top-badge,
  .settings-layout .kind-tag,
  .settings-layout .cta-toggle,
  .settings-layout details.url-expand summary,
  .settings-layout .intent-chips .label,
  .settings-layout .ic,
  .settings-layout .cta-stats,
  .settings-layout .nm-head,
  .settings-layout .nm-crit,
  .settings-layout .nm-desc,
  .settings-layout .nm-lock,
  .settings-layout .nm-save,
  .settings-layout .nm-silence,
  .settings-layout .who .you,
  .settings-layout td.act .lock,
  .settings-layout .role-cell .tip em,
  .settings-layout .invited-pill,
  .settings-layout .tg-toggle,
  .settings-layout .log-row .body .meta-line,
  .settings-layout .bill-status,
  .settings-layout .bill-state .st-label,
  .settings-layout .plan-card .pc-name .rec,
  .settings-layout table.invoices th,
  .settings-layout .dna-label,
  .topnav-right,
  .topnav-right .me .meta,
  .topnav-right .me .meta .name { font-size: var(--t-xs); }
}

/* 3 · touch sizing · WCAG 2.5.5. Supersedes nothing in the KZK-P-051 block
   above — it widens it to the canvas's selector list, which reaches control
   classes the settings surfaces invented (.chip-toggle, .oauth-btn, .rule,
   .src-card, .push-card, .auto-card, .tab-sub) and adds two tiers the
   original lacked: 40px for dense secondary controls, 32px hit boxes for
   things that must not grow visually. Still gated on pointer:coarse, so
   every mouse-driven device renders byte-identically. */
@media (max-width: 768px) and (pointer: coarse) {
  .btn, .input, .select, select.input, .textarea, .search, .page-btn, .icon-btn,
  .chip-toggle, .chip-cta, .oauth-btn, .oauth-btn-mini, .filter-item, .subnav-item,
  .radio-card, .rule, .src-card, .push-card, .auto-card, .tab-sub,
  details summary, .acct-menu summary { min-height: 44px; }
  .btn--sm, .btn--xs, .edit-btn, .icon-mini, .role-select, .refresh-btn { min-height: 40px; }
  .chip .x, .n-dismiss, .toggle { min-width: 32px; min-height: 32px; }
  .tab, .tab-top { min-height: 44px; }
}

/* 3b · KZK-P-055 — the same touch floor, for the MARKETING chrome.

   Measured at 390x844 with touch emulation on (scripts/audit-mobile-typography.mjs):
   the public home shipped 18 tap targets under 44px, every one of them a class-less
   <a> — brand, nav, locale switcher, use-case card CTAs, and the whole footer link
   set at 15-16px tall. The console got its floor in KZK-P-051/052; the marketing
   surfaces were never in that sweep, so the first page a merchant ever opens was
   also the least tappable one.

   Scoped to navigational / standalone links on purpose. A blanket a { min-height } rule
   would stretch inline prose links and wreck body copy — the same trap the console
   block calls out. Anything inside a <p> keeps its natural inline box.

   Gated on pointer:coarse, so mouse-driven rendering is byte-identical and the
   canvas is untouched at every width it was drawn against. */
@media (max-width: 768px) and (pointer: coarse) {
  .site-brand,
  .site-nav a,
  .nav-locale a,
  .footer-grid a,
  .foot-locale a,
  .card-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* The footer is a column list: without this the 44px boxes butt against each
     other and read as one block of text rather than separate targets. */
  .footer-grid a { padding-block: 2px; }
}

@media (max-width: 480px) {
  /* The count stays legible — 0 vs 12 readable at a glance. Tracks
     var(--t-xs) rather than a literal, so decision 2's floor is real. */
  .tab { font-size: var(--t-xs); gap: 5px; }
  .tab .count, .tab-top .count { font-size: var(--t-xs); padding: 1px 5px; }
  .tabs { gap: var(--s-3); }
}