/* ============================================================
   Systamesh design system — plugin stylesheet (single entry).
   Ported from design/design_handoff_systamesh_console/design-system
   (tokens/fonts.css · colors.css · typography.css · spacing.css ·
   base.css) plus the console app styles from prototype.html.
   Token variable names are CANONICAL — both the foundation and the
   console agent consume the same names; do not rename them.
   ============================================================ */

/* ---- Webfonts: Geist + Geist Mono (tokens/fonts.css) ----
   Self-hosted since IA v2 Phase 1: the @font-face faces + woff2 binaries live
   in sm-ia-v2.css / assets/fonts/ (enqueued right after this file on every
   page). The former Google Fonts @import was removed — it shadowed the
   self-hosted faces and added an external dependency. */

/* ============================================================
   Tokens — colors (tokens/colors.css)
   ============================================================ */
:root {
  /* Base neutral scale (warm stone) */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F4F2;
  --stone-150: #EFEEEB;
  --stone-200: #E7E5E1;
  --stone-300: #D7D3CE;
  --stone-400: #B0ABA3;
  --stone-500: #847E75;
  --stone-600: #5F5A52;
  --stone-700: #45413B;
  --stone-800: #2A2723;
  --stone-900: #1A1815;
  --stone-950: #0E0D0B;

  /* Accent — indigo (single brand hue) */
  --indigo-50:  #EEF1FD;
  --indigo-100: #DEE4FB;
  --indigo-200: #C2CDF7;
  --indigo-300: #9DAEF1;
  --indigo-400: #6E84E6;
  --indigo-500: #3D63DD;
  --indigo-600: #2E4FC6;
  --indigo-700: #2740A1;
  --indigo-800: #243a82;
  --indigo-900: #1F2F63;

  /* Semantic hues (quiet, desaturated) */
  --green-500:  #11936B;
  --green-50:   #E7F4EF;
  --amber-500:  #C77E1B;
  --amber-50:   #FAF0DD;
  --red-500:    #CE4A3A;
  --red-50:     #FAE9E6;

  /* Surfaces */
  --bg-base:     var(--stone-50);
  --bg-subtle:   var(--stone-100);
  --bg-inset:    var(--stone-150);
  --surface-card: #FFFFFF;
  --surface-overlay: #FFFFFF;
  --surface-inverse: var(--stone-950);

  /* Text */
  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-tertiary:  var(--stone-500);
  --text-disabled:  var(--stone-400);
  --text-inverse:   var(--stone-50);
  --text-accent:    var(--indigo-600);
  --text-on-accent: #FFFFFF;

  /* Borders — hairlines, low contrast */
  --border-subtle:  rgba(14, 13, 11, 0.06);
  --border-default: rgba(14, 13, 11, 0.10);
  --border-strong:  rgba(14, 13, 11, 0.16);
  --border-accent:  var(--indigo-500);

  /* Accent roles */
  --accent:         var(--indigo-500);
  --accent-hover:   var(--indigo-600);
  --accent-active:  var(--indigo-700);
  --accent-subtle:  var(--indigo-50);
  --accent-muted:   var(--indigo-100);

  /* Status */
  --success:    var(--green-500);
  --success-bg: var(--green-50);
  --warning:    var(--amber-500);
  --warning-bg: var(--amber-50);
  --danger:     var(--red-500);
  --danger-bg:  var(--red-50);

  /* Focus ring */
  --focus-ring: rgba(61, 99, 221, 0.40);
}

/* ============================================================
   Tokens — typography (tokens/typography.css)
   ============================================================ */
:root {
  --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono",
               Menlo, Consolas, monospace;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;
  --text-4xl:  3rem;
  --text-5xl:  3.875rem;
  --text-6xl:  4.75rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  --display-font:   var(--font-sans);
  --display-weight: var(--weight-semibold);
  --heading-font:   var(--font-sans);
  --body-font:      var(--font-sans);
  --label-font:     var(--font-mono);
  --code-font:      var(--font-mono);
}

/* ============================================================
   Tokens — spacing, radii, shadows, motion (tokens/spacing.css)
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 22px;
  --radius-full: 999px;

  --border-width: 1px;
  --border-hairline: 0.5px;

  --shadow-xs: 0 1px 2px rgba(14, 13, 11, 0.04);
  --shadow-sm: 0 1px 2px rgba(14, 13, 11, 0.05),
               0 1px 1px rgba(14, 13, 11, 0.03);
  --shadow-md: 0 2px 4px rgba(14, 13, 11, 0.05),
               0 4px 12px rgba(14, 13, 11, 0.05);
  --shadow-lg: 0 8px 24px rgba(14, 13, 11, 0.08),
               0 2px 6px rgba(14, 13, 11, 0.04);
  --shadow-xl: 0 16px 48px rgba(14, 13, 11, 0.12),
               0 4px 12px rgba(14, 13, 11, 0.06);
  --ring-hairline: inset 0 0 0 1px var(--border-default);

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* ============================================================
   Base utilities (tokens/base.css — scoped where it must beat the
   block theme's global styles; the theme files are never edited)
   ============================================================ */
body.sm-console, body.sm-visitor {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background-color: var(--bg-base);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01", "cv03";
}
body.sm-console h1, body.sm-console h2, body.sm-console h3, body.sm-console h4,
body.sm-visitor h1, body.sm-visitor h2, body.sm-visitor h3, body.sm-visitor h4 {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
body.sm-console ::selection, body.sm-visitor ::selection { background: var(--accent-muted); color: var(--accent-active); }
body.sm-console button, body.sm-visitor button { font-family: inherit; }

.mono { font-family: var(--font-mono); font-feature-settings: "ss01","cv01"; }

.sm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.sm-dotfield {
  background-image: radial-gradient(circle at center, var(--border-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}
.sm-grid-bg {
  background-image:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
}
.sm-fade-paper {
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 100%);
}
.sm-rule { height: 1px; background: var(--border-default); border: 0; }
.sm-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ============================================================
   Components — ported from the design-system bundle
   (Button, Input, Select, Switch, Checkbox, Badge)
   ============================================================ */

/* ---- Button ---- */
.sm-btn{
  --_h:36px; --_px:14px; --_fs:var(--text-base);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--_h); padding:0 var(--_px); font-family:var(--font-sans);
  font-size:var(--_fs); font-weight:var(--weight-medium); line-height:1;
  border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer;
  white-space:nowrap; text-decoration:none; letter-spacing:-0.005em;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.sm-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.sm-btn:active{ transform:translateY(0.5px); }
.sm-btn[disabled],.sm-btn[aria-disabled="true"]{ opacity:0.5; pointer-events:none; }
.sm-btn--sm{ --_h:28px; --_px:10px; --_fs:var(--text-sm); border-radius:var(--radius-sm); }
.sm-btn--lg{ --_h:44px; --_px:20px; --_fs:var(--text-md); }
.sm-btn--full{ width:100%; }
.sm-btn--primary, a.sm-btn--primary{ background:var(--accent); color:var(--text-on-accent); box-shadow:var(--shadow-xs); }
.sm-btn--primary:hover{ background:var(--accent-hover); color:var(--text-on-accent); }
.sm-btn--primary:active{ background:var(--accent-active); }
.sm-btn--secondary, a.sm-btn--secondary{ background:var(--surface-card); color:var(--text-primary); border-color:var(--border-default); box-shadow:var(--shadow-xs); }
.sm-btn--secondary:hover{ background:var(--bg-subtle); border-color:var(--border-strong); color:var(--text-primary); }
.sm-btn--ghost{ background:transparent; color:var(--text-secondary); }
.sm-btn--ghost:hover{ background:var(--bg-subtle); color:var(--text-primary); }
.sm-btn--danger{ background:var(--danger); color:#fff; box-shadow:var(--shadow-xs); }
.sm-btn--danger:hover{ filter:brightness(0.94); }
.sm-btn .sm-icon{ flex:none; }

/* ---- Input ---- */
.sm-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.sm-field__label{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-primary); }
.sm-field__hint{ font-size:var(--text-xs); color:var(--text-tertiary); }
.sm-input{
  --_h:36px;
  display:flex; align-items:center; gap:8px; height:var(--_h);
  padding:0 12px; background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.sm-input:hover{ border-color:var(--border-strong); }
.sm-input:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.sm-input--sm{ --_h:28px; padding:0 9px; border-radius:var(--radius-sm); }
.sm-input input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font-family:inherit; font-size:var(--text-base); color:var(--text-primary);
  height:auto; padding:0; box-shadow:none;
}
.sm-input--sm input{ font-size:var(--text-sm); }
.sm-input input::placeholder{ color:var(--text-tertiary); }
.sm-input__ico{ display:inline-flex; color:var(--text-tertiary); flex:none; }

/* ---- Select ---- */
.sm-select__wrap{ position:relative; display:flex; align-items:center; }
.sm-select__wrap select{
  appearance:none; -webkit-appearance:none; width:100%; height:36px;
  padding:0 34px 0 12px; font-family:inherit; font-size:var(--text-base);
  color:var(--text-primary); background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sm-select__wrap--sm select{ height:28px; font-size:var(--text-sm); border-radius:var(--radius-sm); padding-left:9px; }
.sm-select__wrap select:hover{ border-color:var(--border-strong); }
.sm-select__wrap select:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.sm-select__chev{ position:absolute; right:11px; pointer-events:none; color:var(--text-tertiary); display:inline-flex; }

/* ---- Switch ----
   The input is sized to the track (not 0x0) so it stays clickable and
   "visible" to e2e drivers; opacity:0 keeps the visual identical. */
.sm-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary); user-select:none; position:relative; }
.sm-switch__track{
  position:relative; width:36px; height:20px; flex:none; border-radius:999px;
  background:var(--stone-300); transition:background var(--dur-base) var(--ease-out);
}
.sm-switch__thumb{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out);
}
.sm-switch input{ position:absolute; left:0; top:0; width:36px; height:20px; opacity:0; margin:0; cursor:pointer; z-index:1; }
.sm-switch input:checked ~ .sm-switch__track{ background:var(--accent); }
.sm-switch input:checked ~ .sm-switch__track .sm-switch__thumb{ transform:translateX(16px); }
.sm-switch input:focus-visible ~ .sm-switch__track{ box-shadow:0 0 0 3px var(--focus-ring); }

/* ---- Checkbox ---- */
.sm-check{ display:inline-flex; align-items:flex-start; gap:9px; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary); user-select:none; line-height:1.3; }
.sm-check input{ position:absolute; opacity:0; width:0; height:0; }
.sm-check__box{
  width:17px; height:17px; flex:none; margin-top:1px; border-radius:5px;
  border:1px solid var(--border-strong); background:var(--surface-card);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sm-check__box svg{ width:12px; height:12px; opacity:0; transform:scale(0.6); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.sm-check input:checked + .sm-check__box{ background:var(--accent); border-color:var(--accent); }
.sm-check input:checked + .sm-check__box svg{ opacity:1; transform:scale(1); }
.sm-check input:focus-visible + .sm-check__box{ box-shadow:0 0 0 3px var(--focus-ring); }

/* ---- Badge ---- */
.sm-badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-sans);
  font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:1;
  padding:3px 8px; border-radius:var(--radius-full); border:1px solid transparent;
  white-space:nowrap;
}
.sm-badge--sm{ font-size:var(--text-2xs); padding:2px 6px; }
.sm-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.sm-badge--neutral{ background:var(--bg-inset); color:var(--text-secondary); border-color:var(--border-subtle); }
.sm-badge--accent{ background:var(--accent-subtle); color:var(--accent-active); }
.sm-badge--success{ background:var(--success-bg); color:var(--success); }
.sm-badge--warning{ background:var(--warning-bg); color:var(--warning); }
.sm-badge--danger{ background:var(--danger-bg); color:var(--danger); }

/* ============================================================
   Console app styles (prototype.html — verbatim where possible)
   ============================================================ */

/* ---- Sidebar ---- */
.cs-sb { display: flex; flex-direction: column; background: var(--bg-subtle); border-right: 1px solid var(--border-subtle); padding: 12px 10px; gap: 3px; overflow-y: auto; }
.cs-ws-wrap { position: relative; }
.cs-ws { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; margin-bottom: 4px; text-decoration: none; color: inherit; font: inherit; text-align: left; -webkit-appearance: none; appearance: none; }
.cs-ws:hover { background: var(--bg-inset); }
/* Inert brand row (logo no longer toggles or links). */
.cs-ws--static { cursor: default; }
.cs-ws--static:hover { background: transparent; }
/* Workspaces nav row carrying the switch caret + dropdown. */
.cs-navrow { position: relative; }
.cs-navrow__caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: transparent; border: 0; border-radius: var(--radius-xs); color: var(--text-tertiary); cursor: pointer; z-index: 2; }
.cs-navrow__caret:hover { background: var(--bg-inset); color: var(--text-primary); }
/* Indented active-workspace name under "Workspaces": its label lines up with the
   nav labels that have an icon (10px pad + 17px icon + 10px gap = 37px), i.e.
   with the "R" in Runs. Compound selector beats .cs-nav's shorthand padding. */
.cs-nav.cs-subnav { padding: 5px 10px 5px 37px; font-size: 13px; color: var(--text-secondary); }
.cs-subnav .cs-nav__label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ws__mark { width: 22px; height: 22px; flex: none; }
.cs-ws__name { font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; color: var(--text-primary); }
.cs-ws__tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border: 1px solid var(--border-default); padding: 1px 5px; border-radius: 5px; }
.cs-ws__chev { margin-left: auto; color: var(--text-tertiary); }
.cs-ws__brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; color: inherit; }
.cs-ws__caretbtn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; padding: 3px; background: transparent; border: 0; border-radius: var(--radius-xs); color: var(--text-tertiary); cursor: pointer; }
.cs-ws__caretbtn:hover { background: var(--bg-inset); color: var(--text-primary); }
.cs-menu__check { margin-left: auto; color: var(--accent); }
.cs-menu__item.is-current { display: flex; align-items: center; gap: 9px; padding: 8px 9px; font-size: 13px; }


.cs-sb__group { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cs-sb__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); padding: 12px 10px 5px; }
.cs-nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); text-align: left; width: 100%; text-decoration: none; }
.cs-nav svg { color: var(--text-tertiary); flex: none; }
.cs-nav:hover { background: var(--bg-inset); color: var(--text-primary); }
.cs-nav.is-active { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.cs-nav.is-active svg { color: var(--accent); }
.cs-nav__pill { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

.cs-sb__spacer { flex: 1; }

/* User chip + menus */
.cs-user { position: relative; margin-top: 8px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.cs-user__btn { display: flex; align-items: center; gap: 9px; padding: 7px 8px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-align: left; }
.cs-user__btn:hover { background: var(--bg-inset); }
.cs-user__btn.is-active { background: var(--surface-card); box-shadow: var(--shadow-xs); }
.cs-user__ava { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--stone-700); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.cs-user__info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cs-user__name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-user__sub { font-size: 11px; color: var(--text-tertiary); }
.cs-user__chev { margin-left: auto; color: var(--text-tertiary); }
.cs-menu { position: absolute; left: 4px; right: 4px; bottom: calc(100% + 4px); background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 5px; z-index: 99992; }
.cs-menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); cursor: pointer; text-align: left; text-decoration: none; }
.cs-menu__item svg { color: var(--text-tertiary); }
.cs-menu__item:hover { background: var(--bg-subtle); color: var(--text-primary); }
.cs-menu__sep { height: 1px; background: var(--border-subtle); margin: 5px 4px; }
.cs-menu--ws { top: calc(100% + 4px); bottom: auto; }
.cs-menu__head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); padding: 6px 9px 4px; }
.cs-menu__item.is-current { font-weight: 500; color: var(--text-primary); }
.cs-ws__chip { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-subtle); color: var(--accent-active); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; flex: none; }
/* disabled menu item (e.g. "New workspace" until multi-workspace ships):
   muted, inert, with a quiet mono "soon" pill on the right. */
.cs-menu__item.is-disabled { color: var(--text-disabled); cursor: default; pointer-events: none; }
.cs-menu__item.is-disabled:hover { background: transparent; color: var(--text-disabled); }
/* Content planning is a Pro/Scale area, but its nav item stays CLICKABLE on
   PAYG — the page sells itself with a demo dataset + upgrade banner. So it
   is dimmed only; never pointer-events:none, and never .is-disabled. */
.cs-nav.is-locked { opacity: .55; }
.cs-menu__soon { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border: 1px solid var(--border-default); padding: 1px 5px; border-radius: 5px; }
.cs-menu__env { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; font-size: 12px; color: var(--text-tertiary); }
.cs-menu__envtag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

/* collapse toggle — an icon button at the right end of the brand row (owner
   2026-10-01; replaces the bottom "Collapse" button). Collapsed, the brand
   row wraps and it stacks centered under the mark. */
.cs-collapse { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto; padding: 5px; background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; color: var(--text-tertiary); }
.cs-collapse:hover { background: var(--bg-inset); color: var(--text-primary); }

/* ---- Top bar ---- */
.cs-topbar { display: flex; align-items: center; gap: 14px; padding: 0 24px; height: 56px; border-bottom: 1px solid var(--border-subtle); flex: none; background: var(--bg-base); }
.cs-topbar__title { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.cs-topbar__spacer { flex: 1; }
/* Active-workspace pill (Runs page): a bold accent chip so it's unmistakable
   which workspace you're in. The small mono label reads "WORKSPACE", the name pops. */
.cs-topbar__ws { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px; background: var(--accent-subtle); border: 1px solid transparent; color: var(--accent-active); text-decoration: none; flex: none; }
.cs-topbar__ws:hover { border-color: var(--accent); }
.cs-topbar__ws svg { color: var(--accent); flex: none; }
.cs-topbar__ws-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); opacity: .8; }
.cs-topbar__ws-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--accent-active); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-topbar__sep { width: 1px; height: 20px; background: var(--border-default); flex: none; }
.cs-credpill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-xs); text-decoration: none; }
.cs-credpill:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.cs-credpill svg { color: var(--accent); }
.cs-credpill b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 600; }
/* "~N reputation checks left" BESIDE the balance (/reputation/ only): one row,
   numbers enlarged out of the sentence, hairline divider between the two —
   stacking read as cramped inside the fixed 56px topbar (owner review) */
.cs-credpill.has-sub { padding: 5px 12px 5px 10px; }
.cs-credpill.has-sub b { font-size: 15px; }
.cs-credpill.has-sub .sm-credits-label { font-size: 11.5px; }
.cs-credpill__col { display: inline-flex; align-items: baseline; gap: 8px; line-height: 1.2; }
.cs-credpill__row { display: inline-flex; align-items: baseline; gap: 4px; }
.cs-credpill__sub { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.cs-credpill__sub::before { content: ''; align-self: center; width: 1px; height: 13px; background: var(--border-default); }
.cs-credpill__sub[hidden] { display: none; }
.cs-credpill__subnum { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.cs-credpill__sub.is-low, .cs-credpill__sub.is-low .cs-credpill__subnum { color: var(--warning, #C77E1B); }
.cs-credpill.is-negative .cs-credpill__sub, .cs-credpill.is-negative .cs-credpill__subnum { color: var(--danger); }
/* long sub-labels (the /recommendation/ range) trade their full noun for room
   on narrower viewports rather than clipping mid-word */
.cs-credpill__subw--short { display: none; }
@media (max-width: 1400px) {
	.cs-credpill__subw--full { display: none; }
	.cs-credpill__subw--short { display: inline; }
}

/* ---- Page scaffolding ---- */
.cs-scroll { flex: 1; overflow-y: auto; }
.cs-page { max-width: 920px; margin: 0 auto; padding: 36px 28px 80px; }
.cs-page--wide { max-width: 1080px; }
.cs-page__head { margin-bottom: 26px; }
.cs-page__title { font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.cs-page__sub { margin-top: 7px; font-size: 14.5px; color: var(--text-secondary); max-width: 60ch; }

.cs-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cs-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--border-strong); }

.cs-section { margin-top: 40px; }
.cs-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cs-section__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cs-section__hint { font-size: 13px; color: var(--text-tertiary); }

/* ---- Generic primitives ---- */
.cs-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cs-divider { height: 1px; background: var(--border-subtle); border: 0; }
.cs-row { display: flex; align-items: center; gap: 10px; }
.cs-muted { color: var(--text-tertiary); }
.cs-link { color: var(--text-accent); text-decoration: none; cursor: pointer; font-weight: 500; }
.cs-link:hover { text-decoration: underline; }

/* engine tag */
.cs-eng { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.cs-eng__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cs-eng__dot--perplexity { background: #11936B; }
.cs-eng__dot--anthropic { background: #C77E1B; }
.cs-eng__dot--openai { background: #8AB4F8; }
.cs-eng__dot--gemini { background: #3D63DD; }
.cs-eng__dot--grok { background: #1A1A1A; }
.cs-eng__dot--google_aio { background: #EA4335; }

/* status dots */
.cs-sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.cs-sdot--complete { background: var(--success); }
.cs-sdot--running { background: var(--accent); }
.cs-sdot--queued { background: var(--warning); }
.cs-sdot--failed { background: var(--danger); }
.cs-sdot--dry { background: var(--stone-400); }

/* tables */
.cs-tablecard { margin-top: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); box-shadow: var(--shadow-sm); }
.cs-tablecard__head { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.cs-table th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); padding: 9px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-subtle); white-space: nowrap; }
.cs-table td { padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.cs-table tr:last-child td { border-bottom: 0; }
.cs-table td.num, .cs-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.cs-table .strong { color: var(--text-primary); font-weight: 500; }
/* finished lots (/credits/ "Used up & expired" group) — visible but quiet */
.cs-table tr.is-spent td { opacity: .5; }
.cs-table tr.is-spent td .sm-badge { opacity: 1; }
.cs-table tr.cs-subhead td { padding: 10px 16px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-disabled); border-bottom: 1px solid var(--border-subtle); }
.cs-table tfoot .cs-total td { border-top: 2px solid var(--border-default); border-bottom: 0; font-size: 12px; color: var(--text-secondary); }

/* collapsible lot-history card (/credits/ bottom) */
.cs-collapsecard__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; text-align: left; }
.cs-collapsecard__head:hover { background: var(--bg-subtle); }
.cs-collapsecard__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
.cs-collapsecard__meta svg { transition: transform .15s ease; }
.cs-collapsecard__head.is-open .cs-collapsecard__meta svg { transform: rotate(180deg); }
.cs-collapsecard__body { border-top: 1px solid var(--border-subtle); }
.cs-spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-default); border-top-color: var(--accent); animation: sm-spin .65s linear infinite; vertical-align: -2px; }

/* misc */
.cs-iconbtn { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cs-iconbtn:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-subtle); }
.cs-textbtn { font-size: 12.5px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; }
.cs-textbtn:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-strong); }
.cs-textbtn--danger:hover { color: var(--danger); border-color: var(--danger); }
.cs-empty { text-align: center; padding: 60px 20px; color: var(--text-tertiary); }

/* ---- Credits ---- */
.cs-balance { display: flex; align-items: center; gap: 22px; padding: 24px 26px; }
.cs-balance__v { font-size: 44px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cs-balance__k { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.cs-balance__spacer { flex: 1; }
.cs-balance__refill { text-align: right; }
.cs-balance__refillrow { justify-content: flex-end; gap: 10px; }
.cs-balance__summary { font-size: 13px; font-weight: 500; }
.cs-balance__summary.is-on { color: var(--success); }
.cs-balance__summary.is-off { color: var(--text-tertiary); }

.cs-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cs-pack { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.cs-pack.is-best { border-color: var(--accent-muted); box-shadow: 0 0 0 1px var(--accent-muted), var(--shadow-sm); }
.cs-pack__badge { position: absolute; top: -9px; left: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-on-accent); background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.cs-pack__name { font-size: 14px; font-weight: 600; }
.cs-pack__credits { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cs-pack__credits small { font-size: 13px; font-weight: 500; color: var(--text-tertiary); }
.cs-pack__note { font-size: 12px; color: var(--text-tertiary); }
.cs-pack__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.cs-pack__price { font-size: 16px; font-weight: 600; }

.cs-grid2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-top: 40px; }
.cs-grid2col .cs-tablecard { margin-top: 0; }

.cs-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cs-delta--pos { color: var(--success); }
.cs-delta--neg { color: var(--text-secondary); }
.cs-delta--zero { color: var(--text-tertiary); }

.cs-typebadge { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; text-transform: capitalize; }
.cs-typebadge--capture { background: var(--bg-inset); color: var(--text-secondary); }
.cs-typebadge--debit { background: var(--bg-inset); color: var(--text-secondary); }
.cs-typebadge--hold { background: var(--warning-bg); color: var(--warning); }
.cs-typebadge--release { background: var(--bg-inset); color: var(--text-secondary); }
.cs-typebadge--bonus { background: var(--success-bg); color: var(--success); }
.cs-typebadge--purchase { background: var(--success-bg); color: var(--success); }
.cs-typebadge--refill { background: var(--success-bg); color: var(--success); }
.cs-typebadge--expiry { background: var(--danger-bg); color: var(--danger); }

.cs-refill { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }
.cs-field { display: flex; flex-direction: column; gap: 6px; }
.cs-field__label { font-size: 13px; font-weight: 500; }
.cs-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border-subtle); }
.cs-toggle-row--first { border-top: 0; padding-top: 0; }
.cs-toggle-row__main { flex: 1; }
.cs-toggle-row__t { font-size: 13.5px; font-weight: 500; }
.cs-toggle-row__d { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.cs-status { font-size: 13px; color: var(--text-secondary); margin: 8px 0 0; min-height: 1em; }
.cs-status.is-err { color: var(--danger); }

/* Admin area ([sm_admin], /admin/) — tool cards + reservations table. */
.cs-admin-tool { display: block; padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease-out); }
.cs-admin-tool + .cs-admin-tool { margin-top: 10px; }
.cs-admin-tool:hover { border-color: var(--accent); }
.cs-admin-tool__t { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--text-primary); }
.cs-admin-tool__d { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.cs-admin-tablewrap { overflow-x: auto; padding: 0; }
.cs-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-admin-table th, .cs-admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.cs-admin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; }
.cs-admin-table tbody tr:last-child td { border-bottom: 0; }
.cs-admin-table td.mono, .cs-admin-table .mono { font-family: var(--font-mono); }
.cs-admin-basis { display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; }
.cs-admin-basis--history { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cs-admin-basis--fallback { background: var(--bg-inset); color: var(--text-tertiary); }
/* Admin Accounts tool — search + account card. */
.cs-admin-input { height: 36px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-base); color: var(--text-primary); font-size: 14px; min-width: 240px; }
.cs-admin-input:focus { outline: none; border-color: var(--accent); }
.cs-admin-input--sm { min-width: 120px; }
/* Plain .cs-card has no padding by design; the admin search + account cards
   need their own (the table card stays flush — its cells carry the padding). */
#sm-admin-accounts > .cs-card, #sm-admin-acct > .cs-card { padding: 18px; }
.cs-admin-search { gap: 8px; align-items: center; }
.cs-admin-acct__head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.cs-admin-acct__bal { margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
.cs-admin-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.cs-admin-sort.is-active { color: var(--text-primary); }
.cs-admin-sort:hover { color: var(--text-primary); text-decoration: underline; }
.cs-admin-sort:not(.is-active) .cs-admin-sort__dir { opacity: .45; }
.cs-admin-accts__row { cursor: pointer; }
.cs-admin-accts td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; min-width: 160px; }
.cs-admin-accts td:nth-child(1), .cs-admin-accts td:nth-child(3), .cs-admin-accts td:nth-child(6) { white-space: normal; overflow-wrap: break-word; min-width: 120px; }
.cs-admin-accts__row:hover td, .cs-admin-accts__row:focus td { background: var(--bg-subtle); }
.cs-admin-pager { gap: 12px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.cs-admin-acct__actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cs-admin-acct__actions .cs-row { gap: 8px; align-items: center; flex-wrap: wrap; }
.sm-input--threshold { width: 130px; }
.sm-mt0 { margin-top: 0; }
.cs-notice { font-size: 12.5px; color: var(--warning); margin: 0; }
.cs-notice:empty { display: none; }
/* Warning banner card (e.g. the past_due dunning notice on /billing/): a normal
   padded card (cs-card cs-acctcard) with a warning left-accent. Readable body
   text (not the small inline-note style) + spacing for its action button. */
.cs-notice--warn { border-left: 4px solid var(--warning); margin-bottom: 18px; }
.cs-notice--warn > p:first-child { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.cs-notice--warn > .sm-btn { margin-top: 14px; }
/* Danger banner (A9 negative-balance / "settle your balance"). */
.cs-notice--danger { border-left: 4px solid var(--danger); margin-bottom: 18px; }
.cs-notice--danger > p:first-child { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.cs-notice--danger > .sm-btn { margin-top: 14px; }
.cs-notice--ok { border-left: 4px solid var(--success); margin-bottom: 18px; }
.cs-notice--ok > p:first-child { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
/* A9 negative-balance: show the real negative figure in an alert (red) style in
   the top-bar pill, the sidebar count, and the credits balance card. */
.cs-credpill.is-negative { background: var(--danger-bg); }
.cs-credpill.is-negative, .cs-credpill.is-negative b { color: var(--danger); }
.cs-nav__pill.is-negative { background: var(--danger-bg); color: var(--danger); }
.cs-balance.is-negative .cs-balance__v { color: var(--danger); }

/* ---- Account / Billing ---- */
.cs-acct { display: grid; gap: 18px; }
.cs-row--between { justify-content: space-between; }
.cs-balance-mini { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cs-text-13 { font-size: 13px; }
.cs-acctcard { padding: 20px 22px; }
.cs-acctcard__t { font-size: 15px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 9px; }
.cs-acctcard__t svg { color: var(--text-tertiary); }
.cs-deflist { display: grid; grid-template-columns: 150px 1fr; gap: 12px 18px; font-size: 13.5px; margin: 0; }
.cs-deflist dt { color: var(--text-tertiary); }
.cs-deflist dd { margin: 0; color: var(--text-primary); }
.cs-cardrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.cs-cardrow:last-of-type { border-bottom: 0; }
.cs-cardchip { width: 38px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, var(--stone-700), var(--stone-900)); flex: none; display: flex; align-items: center; justify-content: center; }
.cs-cardchip::after { content: ""; width: 14px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.22); }
.cs-cardrow__main { flex: 1; min-width: 0; }
.cs-cardnum { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-primary); }
.cs-cardexp { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
/* LIFT-130 — "Email preferences" card: list rows + the shared switch look (scoped). */
.cs-newsrow { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; align-items: center; }
.cs-newsrow:last-of-type { border-bottom: 0; }
.cs-newsrow { gap: 16px; }
.cs-newsrow__l { display: block; font-weight: 500; color: var(--text-primary); }
.cs-newsrow__d { display: block; margin-top: 2px; line-height: 1.45; }
.cs-newsrow--all { margin-top: 4px; border-top: 1px solid var(--border-default); }
/* LIFT-143: Direct Assistance stands out as a tinted panel in the card and the signup block. */
/* Direct Assistance (LIFT-143): success-green panel; the switch stays the accent blue. Text is darkened on the tinted panel to keep its contrast. */
.cs-newsrow.cs-newsrow--highlight { margin: 6px 0 8px; padding: 14px 16px; background: var(--success-bg); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); border-radius: var(--radius-md, 8px); }
.cs-newsrow--highlight .cs-newsrow__l, .cs-signup-lists .cs-newsrow.cs-newsrow--highlight .cs-newsrow__l { color: color-mix(in srgb, var(--success) 75%, #000); font-weight: 600; }
.cs-newsrow--highlight .cs-newsrow__d, .cs-signup-lists .cs-newsrow.cs-newsrow--highlight .cs-newsrow__d { margin-top: 6px; color: var(--text-secondary); }
.cs-signup-lists .cs-newsrow.cs-newsrow--highlight:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
/* LIFT-144: the same switches on the three account-creation forms. */
.cs-signup-lists { display: flex; flex-direction: column; text-align: left; margin: 4px 0; }
/* host forms style bare labels (e.g. .sm-bc label): keep the card's row look */
.cs-signup-lists .cs-newsrow label { display: block; margin: 0; font-size: 13.5px; font-weight: 400; color: inherit; }
.cs-signup-lists .cs-newsrow label.cs-switch { display: inline-flex; flex: none; }
.cs-signup-lists .cs-newsrow .cs-newsrow__l { font-weight: 500; color: var(--text-primary); }
.cs-signup-lists .cs-newsrow .cs-newsrow__d { color: var(--text-tertiary); font-size: 13px; }
.cs-signup-lists__t { font-family: var(--heading-font); font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 6px; }
.cs-signup-lists .cs-newsrow:last-of-type { border-bottom: 1px solid var(--border-subtle); }
.cs-signup-lists__foot { margin: 8px 0 0; }
#sm-account-newsletters .cs-inline { margin-top: 12px; }
#sm-account-newsletters .cs-switch, .cs-signup-lists .cs-switch { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
#sm-account-newsletters .cs-switch input, .cs-signup-lists .cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
#sm-account-newsletters .cs-switch__track, .cs-signup-lists .cs-switch__track { position: relative; width: 36px; height: 20px; flex: none; border-radius: 999px; background: var(--stone-300); transition: background var(--dur-base) var(--ease-out); }
#sm-account-newsletters .cs-switch__thumb, .cs-signup-lists .cs-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out); }
#sm-account-newsletters .cs-switch input:checked + .cs-switch__track, .cs-signup-lists .cs-switch input:checked + .cs-switch__track { background: var(--accent); }
#sm-account-newsletters .cs-switch input:checked + .cs-switch__track .cs-switch__thumb, .cs-signup-lists .cs-switch input:checked + .cs-switch__track .cs-switch__thumb { transform: translateX(16px); }
#sm-account-newsletters .cs-switch input:focus-visible + .cs-switch__track, .cs-signup-lists .cs-switch input:focus-visible + .cs-switch__track { box-shadow: 0 0 0 3px var(--focus-ring); }
#sm-account-newsletters .cs-switch input:disabled + .cs-switch__track, .cs-signup-lists .cs-switch input:disabled + .cs-switch__track { opacity: .55; cursor: default; }
.cs-acct .cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
#sm-card-element { padding: 9px 12px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }

/* ============================================================
   Shell wiring — WordPress integration (plugin-owned chrome).
   The block theme's own header/footer template parts stay hidden;
   the theme itself is never edited.
   ============================================================ */
.wp-site-blocks > header.wp-block-template-part { display: none; }
.wp-site-blocks > footer.wp-block-template-part { display: none; }

/* Box-sizing reset, scoped to OUR surfaces (the package's base.css does
   *{border-box} globally; we must not impose that on the theme). Without
   it every width:100% + padding element overflows its rail — UAT finding:
   the active nav chip ran past the sidebar divider. */
#sm-shell-sidebar, #sm-shell-sidebar *, #sm-shell-sidebar *::before, #sm-shell-sidebar *::after,
#sm-shell-topbar, #sm-shell-topbar *, #sm-shell-topbar *::before, #sm-shell-topbar *::after,
#sm-site-footer, #sm-site-footer *,
.sm-csroot, .sm-csroot *, .sm-csroot *::before, .sm-csroot *::after { box-sizing: border-box; }

/* ---- Logged-in console: full-viewport grid (sidebar · main) ---- */
body.sm-console {
  display: grid;
  grid-template-columns: 248px 1fr;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  /* No min-width floor: the tracks are fluid (1fr) and every page section has
     its own media queries, so the console squeezes cleanly below the old
     1200px pin instead of forcing a horizontal page scroll (owner UAT: the
     scroll appeared on every console page at <1200px viewport). */
  overflow: hidden;
}
html.sm-sb-collapsed body.sm-console { grid-template-columns: 66px 1fr; }
#sm-shell-sidebar { grid-row: 1 / 3; grid-column: 1; min-height: 0; }
#sm-shell-topbar { grid-row: 1; grid-column: 2; min-width: 0; }
#sm-shell-main { grid-row: 2; grid-column: 2; overflow-y: auto; min-width: 0; background: var(--bg-base); display: block; }
/* #sm-shell-main is the shell's ONLY scroller. The design kit's .cs-scroll
   wrapper (its own scroller inside the kit's fixed-header .cs-main) must NOT
   be a scroll container here: an overflow:auto ancestor that never itself
   scrolls silently neuters every position:sticky descendant — UAT finding:
   the /reputation/ result tabs (.rp-tabwrap) never stuck. */
body.sm-console .cs-scroll, body.sm-app-page .cs-scroll { overflow: visible; }
body.sm-console .wp-site-blocks { padding: 0; }
body.sm-console .wp-site-blocks > main { margin-top: 0 !important; }

/* Pages whose view renders its own heading: hide the theme's post-title
   block (it would double the title above the view's eyebrow + h1). */
body.sm-own-title #sm-shell-main .wp-block-post-title { display: none; }

/* App pages own their layout — lift the theme's constrained content
   width inside the shell main region (terms/privacy keep theirs). */
body.sm-app-page #sm-shell-main .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: none; }
/* …but centered page columns (Library/Credits/Account) keep their measure:
   this must outrank the constraint-killer above (it did not — UAT finding:
   Library rendered full-bleed and left-glued). */
body.sm-app-page #sm-shell-main .cs-page { max-width: 920px; margin-left: auto; margin-right: auto; }
body.sm-app-page #sm-shell-main .cs-page--wide { max-width: 1080px; }
body.sm-app-page #sm-shell-main .entry-content { padding-left: 0; padding-right: 0; margin: 0; }
body.sm-app-page #sm-shell-main .wp-site-blocks > main { padding: 0; }
/* The theme renders content groups with an INLINE padding-top/bottom of
   var(--wp--preset--spacing--60) (~70px) — dead space above every app page.
   Inline styles need !important to override; scoped to app pages only so the
   page's own .cs-page padding is the single source of top space. */
body.sm-app-page #sm-shell-main .wp-block-group.has-global-padding { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Tighten the app-page top gap (was 36px + 70px theme = 106px of dead space). */
body.sm-app-page #sm-shell-main .cs-page { padding-top: 22px; }

/* admin-bar offsets (editors/admins only; customers never see it) */
body.admin-bar.sm-console { height: calc(100vh - 32px); margin-top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar.sm-console { height: calc(100vh - 46px); margin-top: 46px; } }

/* ---- Collapsed sidebar (icon-only rail) ---- */
html.sm-sb-collapsed .cs-sb { padding: 12px 9px; }
html.sm-sb-collapsed .cs-ws { justify-content: center; padding: 7px; }
html.sm-sb-collapsed .cs-ws__name,
html.sm-sb-collapsed .cs-ws__tag,
html.sm-sb-collapsed .cs-ws__chev,
html.sm-sb-collapsed .cs-ws__caretbtn { display: none; }
html.sm-sb-collapsed .cs-sb__label,
html.sm-sb-collapsed .cs-sb__sublabel { display: none; }
html.sm-sb-collapsed .cs-navrow__caret { display: none; }
html.sm-sb-collapsed .cs-sb__group { margin-top: 8px; }
html.sm-sb-collapsed .cs-nav { justify-content: center; padding: 9px; }
html.sm-sb-collapsed .cs-nav__label,
html.sm-sb-collapsed .cs-nav__pill { display: none; }
html.sm-sb-collapsed .cs-ws--static { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html.sm-sb-collapsed .cs-ws__brand { width: 100%; justify-content: center; }
html.sm-sb-collapsed .cs-collapse { margin-left: 0; }
html.sm-sb-collapsed .cs-user__btn { justify-content: center; padding: 7px; }
html.sm-sb-collapsed .cs-user__info,
html.sm-sb-collapsed .cs-user__chev { display: none; }
html.sm-sb-collapsed .cs-sb__legal { display: none; }

/* quiet legal line at the sidebar bottom is NOT used — terms/privacy
   live in the minimal footer inside main (see .sm-site-footer). */

/* ---- Visitor chrome (logged out): minimal top bar, paper page ---- */
body.sm-visitor { min-height: 100vh; }
.sm-visitor-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-base); }
.sm-visitor-header__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text-primary); }
.sm-visitor-header__brand svg { width: 22px; height: 22px; }
.sm-visitor-header__word { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.sm-visitor-header__nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sm-visitor-header__nav a { text-decoration: none; }
.sm-visitor-header__links { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.sm-visitor-header__link { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.sm-visitor-header__link:hover { background: var(--bg-subtle); color: var(--text-primary); }
.sm-visitor-header__link.is-current { color: var(--text-primary); }
.sm-visitor-header__auth { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sm-visitor-header__login { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); padding: 6px 10px; border-radius: var(--radius-sm); }
.sm-visitor-header__login:hover { background: var(--bg-subtle); color: var(--text-primary); }
@media (max-width: 480px) { .sm-visitor-header__links { display: none; } }

/* visitor main column (register/terms/privacy keep the theme column) */
body.sm-visitor #sm-shell-main { display: block; }

/* ---- Landing ---- */
.sm-landing { text-align: center; padding: 14vh 24px 80px; position: relative; }
.sm-landing__mark { width: 44px; height: 44px; margin: 0 auto 22px; }
.sm-landing__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.sm-landing__eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--border-strong); }
.sm-landing__title { font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; max-width: 22ch; margin: 0 auto; }
.sm-landing__sub { margin: 14px auto 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 52ch; }
.sm-landing__cta { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.sm-landing__register { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-sm); }
.sm-landing__register:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* ---- Plugin footer: quiet line inside main ---- */
.sm-site-footer { margin-top: 48px; padding: 18px 24px 26px; border-top: 1px solid var(--border-subtle); text-align: center; font-size: 12px; color: var(--text-tertiary); }
.sm-site-footer a { color: var(--text-tertiary); text-decoration: none; }
.sm-site-footer a:hover { color: var(--text-secondary); }
.sm-footer-sep { margin: 0 8px; }

/* ---- Visitor footer: grouped site map + brand line ---- */
.sm-site-footer--visitor { text-align: left; padding: 40px 24px 32px; }
.sm-footer-inner { max-width: 1080px; margin: 0 auto; }
.sm-footer-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
/* id-qualified: the visitor/console heading reset (body.sm-visitor h2 { margin:0 }) outranks a bare class */
#sm-site-footer .sm-footer-group__title { margin: 0 0 14px; padding: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
#sm-site-footer .sm-footer-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
#sm-site-footer .sm-footer-group__list li { margin: 0; padding: 0; line-height: 1; }
#sm-site-footer .sm-footer-group__list a { display: inline-block; padding: 2px 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.sm-footer-group__list a:hover { color: var(--text-primary); }
.sm-footer-bottom { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-tertiary); }
.sm-footer-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--text-secondary); }
.sm-footer-brand:hover { color: var(--text-primary); }
.sm-footer-brand svg { width: 18px; height: 18px; }
@media (max-width: 720px) { .sm-footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Forms (register / login-link paragraphs) ---- */
.sm-form { max-width: 420px; }
.sm-form input[type="email"], .sm-form input[type="password"], .sm-form input[type="text"] {
  width: 100%; height: 36px; padding: 0 12px; background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); font-family: inherit; font-size: var(--text-base);
  color: var(--text-primary);
}
.sm-form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.sm-register-form { display: flex; flex-direction: column; gap: 16px; margin: 32px auto 64px; }
.sm-register-form .cs-eyebrow, .sm-register-form .cs-page__title { margin-bottom: 0; }
.sm-register-form .cs-page__sub { margin-top: -6px; }
.sm-register-tos a { color: var(--text-accent); text-decoration: none; }
.sm-register-tos a:hover { text-decoration: underline; }

/* ---- Motion discipline ---- */
@media (prefers-reduced-motion: reduce) {
  .sm-btn, .sm-switch__track, .sm-switch__thumb, .sm-input, .cs-engopt { transition: none; }
}

/* ============================================================
   Credits + Plans redesign (Phase 1/2) — new component classes.
   Reuses the existing console tokens; pairs with the classes
   already in this file (.cs-card .cs-balance .cs-tablecard .cs-table
   .cs-typebadge .cs-delta .cs-section .cs-grid2col .cs-field .cs-refill
   .cs-toggle-row .cs-row). See design_handoff_credits_plans.
   ============================================================ */

/* plan reference strip (Credits page) + usage strip (Plan page) */
.cs-strip { display: flex; align-items: center; gap: 26px; padding: 16px 22px; flex-wrap: wrap; margin-top: 18px; }
.cs-strip__plan { display: flex; align-items: baseline; gap: 10px; }
.cs-strip__name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cs-strip__price { font-size: 13px; color: var(--text-tertiary); font-family: var(--font-mono); }
.cs-strip__divider { width: 1px; align-self: stretch; background: var(--border-subtle); }
.cs-strip__facts { display: flex; gap: 28px; flex: 1; flex-wrap: wrap; }
.cs-fact__k { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.cs-fact__v { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cs-fact__v em { font-style: normal; color: var(--accent); }
.cs-usage { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-secondary); }
/* The workspace meter is a link to the Workspaces page: whole label turns blue on hover. */
.cs-usage--link { text-decoration: none; cursor: pointer; border-radius: var(--radius-sm); }
.cs-usage--link:hover, .cs-usage--link:hover span, .cs-usage--link:hover strong { color: var(--accent); }
.cs-usage__extra { color: var(--text-tertiary); }
/* Extra workspaces card (Plan page, LIFT-92) */
.cs-extras { display: flex; align-items: center; gap: 20px; padding: 16px 22px; margin-top: 12px; flex-wrap: wrap; }
.cs-extras__body { flex: 1; min-width: 260px; }
.cs-extras__title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.cs-extras__count { font-size: 13px; color: var(--text-secondary); }
.cs-extras__count strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cs-extras__note { font-size: 12.5px; color: var(--text-tertiary); margin: 6px 0 0; }
.cs-extras__note--danger { color: var(--danger); font-weight: 500; }
.cs-extras__note--danger a { color: inherit; text-decoration: underline; }
.cs-extras__ctas { display: flex; gap: 8px; }
.cs-meter { width: 120px; height: 6px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; }
.cs-meter__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.cs-meter--over .cs-meter__fill { background: var(--danger); }
.cs-meter__over { color: var(--danger); }

/* Workspace management (/plan) + name-typed delete modal (Phase 3). */
.cs-ws-list { padding: 0; }
.cs-ws-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); }
.cs-ws-row:last-child { border-bottom: 0; }
.cs-ws-row__name { font-weight: 500; }
.cs-ws-row__active { font-size: 11px; font-weight: 600; color: var(--success); background: var(--success-bg); padding: 1px 7px; border-radius: var(--radius-sm); margin-left: 6px; }
.cs-ws-row__actions { display: flex; gap: 14px; }
.cs-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.cs-modal[hidden] { display: none; }
.cs-modal__box { background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; padding: 22px; }
.cs-modal__t { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.cs-modal__d { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px; }
.cs-modal__box .cs-admin-input { width: 100%; box-sizing: border-box; min-width: 0; }
/* Defect 3 fix: flex-wrap so a 3-child footer (the goal-category three-way
   prompt -- Skip link with margin-right:auto, Clone, Generate) wraps to a
   second line instead of overflowing the modal's ~416px content area. The
   skip link's margin-right:auto still resolves per-line when wrapped, so it
   stays flush-left rather than spilling past the modal's left edge onto the
   backdrop (confirmed via Playwright measurement). Other cs-modal footers
   (mostly 1-2 buttons) are unaffected -- gap already supplies row+column
   spacing either way. */
.cs-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cs-btn--danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.cs-btn--danger:hover:not(:disabled) { filter: brightness(0.94); }
.cs-btn--danger:disabled { opacity: .5; cursor: not-allowed; }

/* Workspace context bar (Library page, IA v2): identity chip + the workspace
   NAME as the switcher (dropdown, filterable past 6) + inline rename + delete.
   Complements the global topbar switcher — replaces the Phase-3 pill strip,
   which could not scale past a handful of workspaces. */
.cs-wsbar-wrap { position: relative; margin: 0 0 18px; }
.cs-wsbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.cs-wsbar__chip { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; flex: none; }
.cs-wsbar__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs-wsbar__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); font-weight: 600; }
.cs-wsbar__namewrap { display: flex; align-items: center; }
.cs-wsbar__name { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; padding: 2px 4px; margin-left: -4px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; color: var(--text-primary); cursor: pointer; max-width: 320px; }
.cs-wsbar__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-wsbar__name:hover { background: var(--bg-subtle); }
.cs-wsbar__name svg { color: var(--text-tertiary); flex: none; }
.cs-wsbar__rename { font-size: 14.5px; font-weight: 600; padding: 2px 6px; margin-left: -4px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); min-width: 220px; }
.cs-wsbar__rename:focus { outline: none; }
.cs-wsbar__spacer { flex: 1; }
.cs-wsbar__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-tertiary); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.cs-wsbar__icon:hover { background: var(--bg-subtle); color: var(--text-primary); }
.cs-wsbar__icon--danger:hover { color: var(--danger); background: var(--danger-bg); }
.cs-wsbar__menu { position: absolute; top: calc(100% + 6px); left: 12px; z-index: 60; min-width: 260px; max-width: 340px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; }
.cs-wsbar__filterwrap { padding: 4px 4px 8px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; }
.cs-wsbar__filter { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); font-size: 13px; }
.cs-wsbar__filter:focus { outline: none; border-color: var(--accent); }
.cs-wsbar__list { max-height: 280px; overflow-y: auto; }
.cs-wsbar__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: 0; background: transparent; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-primary); cursor: pointer; text-align: left; text-decoration: none; }
.cs-wsbar__item:hover { background: var(--bg-subtle); }
.cs-wsbar__item.is-current { font-weight: 600; cursor: default; }
.cs-wsbar__item.is-hidden { display: none; }
.cs-wsbar__check { width: 16px; flex: none; color: var(--accent); display: inline-flex; align-items: center; }
.cs-wsbar__itemname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-wsbar__item--new { border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 4px; color: var(--text-secondary); }
.cs-wsbar__item--new.is-disabled { opacity: .6; }
/* Delete-confirmation panel (opened from the bar's trash icon). */
.cs-ws-del { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-subtle); padding: 14px 16px; margin: 0 0 18px; max-width: 640px; }
.cs-ws-del__warn { font-size: 13px; color: var(--text-secondary); margin: 0 0 10px; }
.cs-ws-del__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-wsbar__delinput { padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary); font-size: 13.5px; min-width: 220px; }
.cs-wsbar__delinput:focus { outline: none; border-color: var(--accent); }

/* Recommendations marker: a gray lightbulb in a fixed gutter LEFT of the avatar
   (slot reserved on every row so avatars stay aligned). */
.cs-batch__bulbslot { flex: none; width: 18px; display: inline-flex; align-items: center; justify-content: center; }
.cs-batch__bulb { display: inline-flex; align-items: center; color: var(--text-tertiary); }
.cs-batch__bulb svg { width: 17px; height: 17px; }

/* flexible refill control */
.cs-refillctl { display: flex; gap: 34px; padding: 24px 26px; align-items: stretch; flex-wrap: wrap; }
.cs-refillctl__main { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 14px; }
.cs-amt { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 8px 16px; width: fit-content; background: var(--surface-card); }
.cs-amt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.cs-amt__cur { font-size: 30px; font-weight: 600; color: var(--text-tertiary); letter-spacing: -.02em; }
.cs-amt__in { font: inherit; font-size: 36px; font-weight: 600; letter-spacing: -.03em; border: 0; outline: 0; width: 140px; background: transparent; color: var(--text-primary); font-variant-numeric: tabular-nums; padding: 0; }
.cs-amt__in::-webkit-outer-spin-button, .cs-amt__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-amt__in { -moz-appearance: textfield; }
.cs-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-chip { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; font-variant-numeric: tabular-nums; }
.cs-chip.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); }
.cs-minnote { font-size: 12px; color: var(--text-tertiary); }
.cs-minnote.is-err { color: var(--danger); }
.cs-refillctl__side { width: 280px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; border-left: 1px solid var(--border-subtle); padding-left: 30px; }
.cs-get__v { font-size: 34px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.cs-get__v small { font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.cs-get__rate { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; }
.cs-get__rate em { font-style: normal; color: var(--accent); font-weight: 500; }
@media (max-width: 720px) { .cs-refillctl__side { width: 100%; border-left: 0; border-top: 1px solid var(--border-subtle); padding-left: 0; padding-top: 18px; } }

/* small $ prefix for the auto-refill amount input */
.sm-input--dollar { display: inline-flex; align-items: center; }
.sm-input__pre { color: var(--text-tertiary); padding-left: 8px; }

/* plan tiers (Plan page — Phase 2) */
.cs-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; margin-top: 26px; }
.cs-plan { position: relative; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.cs-plan.is-current { border-color: var(--accent-muted); box-shadow: 0 0 0 1px var(--accent-muted), var(--shadow-sm); }
.cs-plan__badge { position: absolute; top: -9px; left: 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-on-accent); background: var(--accent); border-radius: 6px; padding: 3px 8px; }
.cs-plan__cur { position: absolute; top: -9px; right: 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--surface-card); border: 1px solid var(--accent-muted); border-radius: 6px; padding: 3px 8px; }
.cs-plan__name { font-size: 15px; font-weight: 600; }
.cs-plan__priceline { display: flex; align-items: baseline; gap: 4px; }
.cs-plan__price { font-size: 36px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cs-plan__per { font-size: 14px; color: var(--text-tertiary); font-weight: 500; }
.cs-plan__tag { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; min-height: 36px; }
.cs-feats { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 11px; }
.cs-feat { display: flex; gap: 10px; font-size: 13px; align-items: flex-start; line-height: 1.4; }
.cs-feat svg { color: var(--accent); margin-top: 1px; flex: none; }
.cs-feat strong { font-weight: 600; }
.cs-feat__sub { color: var(--text-tertiary); }
.cs-plan__cta { margin-top: auto; }
.cs-plan__cta button, .cs-plan__cta .sm-btn { width: 100%; justify-content: center; }

@media (max-width: 920px) { .cs-plans { grid-template-columns: 1fr; } }

/* Plan page — current-plan rate badge + the "how the rate works" copy */
.cs-ratebadge { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--accent); background: var(--accent-subtle); border: 1px solid var(--accent-muted); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.cs-ratecopy { padding: 18px 22px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.cs-ratecopy strong { color: var(--text-primary); }

/* In-flight purchase: spinner + disabled Refill button */
.sm-btn.is-loading { pointer-events: none; opacity: .85; }
.sm-btn.is-loading::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sm-spin .6s linear infinite; }
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* Blog posts (LIFT-170): show the whole featured image instead of the theme's
   3:2 cover crop (screenshots lose their edges), and left-align table headers
   so they line up with the cells under them. */
body.single-post .wp-block-post-featured-image img { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; }
body.single-post .wp-block-table th { text-align: left; }

/* Blog posts (LIFT-170 review): one reading width for everything in a post
   (text, images, wide tables) — wider than the theme's 645px text column,
   narrower than its 1340px wide size. */
body.single-post main { --wp--style--global--content-size: 860px; --wp--style--global--wide-size: 860px; }
body.single-post .wp-block-post-content h2 { margin-top: 3rem; }
body.single-post .wp-block-post-content h3 { margin-top: 2rem; }
body.single-post .wp-block-post-title { margin-top: 1.75rem; }
body.single-post .wp-block-quote { font-size: 1em; line-height: 1.6; }
body.single-post .wp-block-pullquote { font-size: 1.15em; line-height: 1.5; }
body.single-post .wp-block-quote p,
body.single-post .wp-block-pullquote p { font-size: inherit; line-height: inherit; }
body.single-post .wp-block-pullquote { padding: 1.25rem 1.5rem; margin-top: 2rem; margin-bottom: 2rem; font-style: italic; }
/* Blog index (SM_Blog::home_markup): two-column cards, one column on phones. */
.sm-blog-grid { gap: 2rem; }
.sm-blog-grid > li { border: 1px solid var(--sm-border, #e3e5ea); border-radius: 12px; overflow: hidden; background: #fff; }
.sm-blog-grid .sm-blog-card__image { margin: 0; }
.sm-blog-grid .sm-blog-card__body { padding: 1rem 1.25rem 1.25rem; }
.sm-blog-grid .sm-blog-card__title { font-size: 1.25rem; line-height: 1.35; margin: 0 0 .5rem; }
.sm-blog-grid .sm-blog-card__title a { text-decoration: none; }
.sm-blog-grid .wp-block-post-excerpt { font-size: .95rem; margin: 0; }
@media (max-width: 781px) { .sm-blog-grid.is-layout-grid { grid-template-columns: 1fr !important; } }