/* partner.air3.com/carnegie/create — AIR-aesthetic page styles
 *
 * Bento-grid layout, oversized Poppins display headlines, pastel decorative
 * accents, pill buttons. Sourced from https://air3-design.figma.site/ tokens.
 */

/* iOS zoom-on-focus prevention — inputs/textareas/selects ≥16px.
   R7 of mobile UX rubric. .create-mono inputs in particular were
   inheriting 13px via --air-text-sm. */
.create-app input,
.create-app textarea,
.create-app select,
.create-mono input,
.create-mono textarea,
.create-mono select,
.create-app input.create-mono,
.create-app textarea.create-mono {
  font-size: max(16px, 1rem) !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--air-surface-cream);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  /* Defensive: decorative fixed orbs (`.create-app::before/::after`) use
     negative offsets which Safari iOS can occasionally promote to a
     horizontal scrollbar. Clip at the root. */
  overflow-x: hidden;
}

.create-app[hidden] { display: none; }

/* ---- Top nav (minimal, AIR-style) ----------------------------------- */

.create-header {
  background: var(--air-surface-cream);
  padding: var(--air-space-6) 0;
}
.create-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--air-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--air-space-4);
}
.create-brand { display: flex; align-items: center; gap: var(--air-space-3); }
/* Make the brand block a clickable home link with consistent styling across
   /carnegie/create, /carnegie/manage, /carnegie/admin (Kenneth 2026-05-23: "navigation
   amongst the pages on Carnegie platform also isn't consistent — back
   button, etc."). Stripping default anchor styling so it looks identical
   to the previous static div, plus visible focus ring for keyboard. */
.create-brand-home {
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background var(--air-dur-fast);
}
.create-brand-home:hover {
  background: var(--air-surface-soft);
}
.create-brand-home:focus-visible {
  outline: 2px solid var(--air-text);
  outline-offset: 2px;
}
.create-header-right {
  display: flex;
  align-items: center;
  gap: var(--air-space-3);
}
/* Header nav buttons are always ghost — they're navigation, not primary
   actions. The exception: an explicit .air-btn-primary in the slot (like
   "+ New page" on /manage) remains primary. (Kenneth audit 2026-05-23:
   "header buttons too heavy — two black blobs"; previously the ghost
   treatment only kicked in below 480px, leaving desktop heavy.) */
.create-header-right .air-btn:not(.air-btn-primary) {
  background: transparent;
  color: var(--air-text);
  border: 1px solid var(--air-divider);
  box-shadow: none;
}
.create-header-right .air-btn:not(.air-btn-primary):hover,
.create-header-right .air-btn:not(.air-btn-primary):focus-visible {
  background: var(--air-surface-soft);
  border-color: var(--air-border-strong);
}
/* Anchor elements styled as buttons (e.g. header Manage/Settings, manage's
   "+ New page") shouldn't carry the browser-default underline. .air-btn
   normally targets <button>; <a class="air-btn"> needs the explicit reset. */
a.air-btn,
a.air-btn:hover,
a.air-btn:focus,
a.air-btn:visited {
  text-decoration: none;
}
.create-brand-logo {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--air-text);
  color: var(--air-text-on-colour);
  border-radius: var(--air-radius-pill);
}
/* Photo variant: image fills the pill, no chrome.
   Higher specificity than .create-brand-logo so background/colour don't bleed. */
.create-brand-logo.create-brand-logo-photo {
  background: transparent;
  overflow: hidden;
  padding: 0;
}
.create-brand-logo.create-brand-logo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.create-brand-name {
  font: 700 22px/1 'Playfair Display', 'EB Garamond', Georgia, 'Times New Roman', serif;
  color: var(--air-text);
  letter-spacing: -0.005em;
  font-style: italic;
}
.create-brand-sub  {
  font: 600 var(--air-text-mono-sm)/1 var(--air-font-mono);
  color: var(--air-text-secondary);
  letter-spacing: var(--air-track-mono);
  text-transform: uppercase;
  margin-top: 2px;
}

.create-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: var(--air-surface);
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-pill);
}
.create-user::before {
  content: "";
  width: 24px; height: 24px;
  border-radius: var(--air-radius-pill);
  background: var(--air-decorative-green);
  flex: 0 0 24px;
}
.create-user-email {
  font: 500 var(--air-text-sm)/1 var(--air-font-body);
  color: var(--air-text);
}

/* ---- Hero (the big AIR-style headline) ------------------------------ */

.create-hero {
  max-width: 1120px;
  margin: 0 auto;
  /* Tightened desktop hero — Kenneth's audit flagged it as "too tall"
     pushing real content below the fold. Was space-10 32 56;
     now 7 8 10 = 28px / 32px / 40px which keeps breathing room
     without dominating the viewport. */
  padding: var(--air-space-7) var(--air-space-8) var(--air-space-10);
  text-align: center;
}
.create-hero-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--air-surface);
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-pill);
  font: 600 var(--air-text-mono-sm)/1 var(--air-font-mono);
  letter-spacing: var(--air-track-mono);
  color: var(--air-text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--air-space-5);
}
.create-hero h1 {
  /* Was clamp(40, 7vw, 72). 72px at 1120px width burns half the
     above-the-fold area. Cap at 56px on widescreen so step 1 form
     content peeks above the fold. */
  font: 700 clamp(36px, 6vw, 56px)/1.04 var(--air-font-display);
  letter-spacing: -0.025em;
  color: var(--air-text);
  margin: 0 auto;
  max-width: 820px;
}
/* `.air-app p { margin: 0 }` from air-design-tokens.css wins over plain
   `.create-hero-lede` (specificity 0,1,1 vs 0,1,0). Scope under .air-app to
   match specificity and let our margin (incl. `auto` horizontal centering)
   actually apply. */
.air-app .create-hero-lede {
  margin: var(--air-space-5) auto 0;
  max-width: 580px;
  font: 400 var(--air-text-md)/1.5 var(--air-font-body);
  color: var(--air-text-secondary);
  text-align: center;
}

/* ---- Hero four-step roadmap ----------------------------------------
   Centered, pill-shaped numbered steps under the lede. Layout-wise it's
   a flex row that wraps to 2x2 on tablet/phone. Mirrors the section
   titles 1:1 so users see the same wording in both places. */
.air-app .create-hero-steps {
  list-style: none;
  margin: var(--air-space-6) auto 0;
  padding: 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.create-hero-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: var(--air-surface);
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-pill);
  font: 500 var(--air-text-sm)/1 var(--air-font-body);
  color: var(--air-text);
  white-space: nowrap;
}
.create-hero-step-num {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--air-text);
  color: var(--air-text-on-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--air-font-mono);
  letter-spacing: 0;
}
.create-hero-step-label {
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .air-app .create-hero-steps {
    gap: 8px;
    margin-top: var(--air-space-5);
  }
  .create-hero-step {
    padding: 6px 12px 6px 6px;
    font-size: 12px;
  }
  .create-hero-step-num {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    font-size: 11px;
  }
}

/* ---- Main grid (bento) --------------------------------------------- */

.create-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--air-space-8) var(--air-space-8);
  display: flex;
  flex-direction: column;
  gap: 0;  /* sections handle their own spacing via padding + border-top */
}

.create-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--air-space-12) var(--air-space-8) var(--air-space-10);
  color: var(--air-text-tertiary);
  text-align: center;
  font: 600 var(--air-text-mono-sm)/1.4 var(--air-font-mono);
  letter-spacing: var(--air-track-mono);
  text-transform: uppercase;
}
/* Footer peer-nav links — give them a real tap target so mobile users
   can hit them. Padding effectively expands the hit area by 16px on
   each side without shifting visual layout. (Kenneth audit
   2026-05-23: "footer links tap targets too small".) */
.create-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
  display: inline-block;
  border-radius: 4px;
  transition: background var(--air-dur-fast), color var(--air-dur-fast);
}
.create-footer a:hover,
.create-footer a:focus-visible {
  color: var(--air-text);
  background: var(--air-surface-soft);
  outline: none;
}

/* ---- Section card (bento item) ------------------------------------- */

/* ---- Step section (FLAT: no card chrome, hairline dividers only) ---- *
 * Kenneth-locked 2026-05-23: "too many layers and boxes and buttons".
 * Replaced the bordered+shadowed card + decorative bubble + bordered
 * inner header + bordered action row with a single divider-on-top
 * treatment. Apple-Settings-flat: type does the hierarchy, not chrome.
 *
 * Decorative blob retained but moved to the LEFT of the section header
 * as a small (28px) tint dot — keeps the per-step color cue without the
 * "card has a giant pastel ear" effect.
 */
.create-section {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--air-divider);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: opacity var(--air-dur-base);
  position: relative;
  padding: var(--air-space-6) 0;
}
.create-section:first-of-type { border-top: 0; padding-top: var(--air-space-4); }

/* Decorative blob → small inline tint dot beside the section number. */
.create-section[data-section="1"]::before,
.create-section[data-section="2"]::before,
.create-section[data-section="3"]::before,
.create-section[data-section="4"]::before {
  content: none;
}

.create-section[data-state="closed"] { cursor: pointer; }
.create-section[data-state="closed"]:hover { opacity: 0.7; }
.create-section[data-state="closed"] .create-section-body { display: none; }
.create-section[data-state="closed"] .create-section-summary { display: flex; }
.create-section[data-state="complete"] { opacity: 0.65; }
.create-section[data-state="complete"]:hover { opacity: 1; cursor: pointer; }

.create-section-header {
  display: flex;
  /* flex-start so the numbered circle hugs the cap of the first line
     of the heading. With align-items:center, when the heading wraps
     to multiple lines the circle floats to the vertical middle of the
     whole text block which looks misaligned. Combined with the h2
     line-height matching the circle height (28px tall vs 1.15 lh on
     22-24px font = ~26-28px first line), the circle visually sits
     where the user expects: aligned with the heading's first line. */
  align-items: flex-start;
  gap: var(--air-space-4);
  padding: 0;
}
/* Nudge the circle down a few pixels to optical-center against the
   heading cap height (cap is ~70% of font-size, so the circle's
   geometric center should sit ~35% from the top). */
.create-section-num {
  margin-top: 2px;
}
.create-section[data-state="open"] .create-section-header {
  padding-bottom: var(--air-space-5);
}
.create-section-header > div:not(.create-section-num):not(.create-section-summary) {
  flex: 1;
  min-width: 0;
}
.create-section-num {
  width: 28px; height: 28px;
  border-radius: var(--r-pill, 9999px);
  background: var(--air-surface-soft);
  color: var(--air-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--air-font-mono);
  flex: 0 0 28px;
  transition: background var(--air-dur-base), color var(--air-dur-base);
}
.create-section[data-section="1"] .create-section-num { background: var(--air-decorative-green); color: #0e6b3a; }
.create-section[data-section="2"] .create-section-num { background: var(--air-decorative-blue); color: #1a4a6b; }
.create-section[data-section="3"] .create-section-num { background: var(--air-decorative-purple); color: #4a2a8a; }
.create-section[data-section="4"] .create-section-num { background: var(--air-decorative-orange); color: #8a3a1a; }
.create-section[data-state="open"] .create-section-num {
  background: var(--air-text);
  color: var(--air-text-on-colour);
}
.create-section[data-state="complete"] .create-section-num {
  background: var(--air-status-success);
  color: var(--air-text-on-colour);
}
.create-section[data-state="complete"] .create-section-num::before { content: "✓"; font-size: 13px; }
.create-section[data-state="complete"] .create-section-num-text { display: none; }

.create-section h2 {
  font: var(--text-h1-weight, 700) var(--text-h1, 24px)/var(--text-h1-lh, 1.15) var(--air-font-display);
  letter-spacing: var(--text-h1-track, -0.018em);
  color: var(--air-text);
  margin: 0;
}
.create-section .create-section-sublabel {
  display: none;  /* "STEP 01" eyebrow redundant with the numbered dot */
}

.create-section-summary {
  display: none;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  font: 500 var(--text-helper, 13px)/1.4 var(--air-font-body);
  color: var(--text-muted, var(--air-text-secondary));
  text-align: right;
}

.create-section-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--air-space-5);
}

.create-section-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--air-space-3);
  padding-top: var(--air-space-4);
  border-top: 0;
  margin-top: var(--air-space-2);
}

.create-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--air-space-5);
}
.create-grid-2-tight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--air-space-4);
}
@media (max-width: 720px) {
  .create-grid-2, .create-grid-2-tight { grid-template-columns: 1fr; }
  .create-hero { padding: var(--air-space-6) var(--air-space-5) var(--air-space-8); }
  .create-main { padding: 0 var(--air-space-4) var(--air-space-6); }
  .create-section { padding: var(--air-space-5) 0; }
  .create-section-header { padding: 0; gap: var(--air-space-3); }
  .create-section-body { padding: 0; }
  /* Mobile tighten: the 4-step hero roadmap pills duplicate the section
     headers a screen below and just push real content off the fold.
     Hide on phones; users still see the same labels as section titles.
     EXCEPT --team variant (6 AI agents showcase) which is the marquee
     hero element and MUST render on phones (uses 24px avatar sizing
     defined further below). [R6, R9] */
  .air-app .create-hero-steps:not(.create-hero-steps--team) { display: none; }
  /* Compress hero: shrink h1, smaller lede, less vertical room. */
  .create-hero h1 { font-size: clamp(32px, 8vw, 44px); letter-spacing: -0.02em; }
  .air-app .create-hero-lede { font-size: 15px; line-height: 1.45; margin-top: var(--air-space-4); }
  .create-hero-eyebrow { font-size: 10px; padding: 4px 10px; margin-bottom: var(--air-space-4); }
  /* Decorative bubble disabled globally now (flat redesign 2026-05-23). */
  .create-section h2 {
    font-size: 22px;
    /* Defensive: avoid word-by-word vertical stacking on narrow viewports
       when the parent flex track gets squeezed. overflow-wrap:anywhere is
       a last resort for very long single words. */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Continue/Back buttons across all 4 sections + Deploy/Back at §4:
     shrink to be visually quieter on mobile — Kenneth flagged them as
     "too massive and quite repetitive" 2026-05-23. Keeps 44px tap
     target via min-height but trims horizontal mass + visual weight. */
  .create-section-actions .air-btn,
  .create-deploy-actions .air-btn {
    padding: 10px 18px;
    font-size: 14px;
    min-height: 44px;
  }
  .create-section-actions .air-btn-ghost,
  .create-deploy-actions .air-btn-ghost {
    /* Ghost (Back) is the secondary action — soften further so it doesn't
       compete with the primary. */
    border-width: 1px;
    background: transparent;
  }
  /* Header: pull padding in from 32px → 16px so the brand block + action
     buttons fit on a 360-412px viewport without overflowing. */
  .create-header-inner { padding: 0 var(--air-space-4); gap: var(--air-space-2); }
  .create-brand { min-width: 0; flex: 1 1 auto; }
  .create-brand > div { min-width: 0; }
  .create-brand-name { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .create-brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .create-header-right { gap: 6px; flex: 0 0 auto; }
  .create-header-right .air-btn { padding: 10px 12px; }
}
@media (max-width: 480px) {
  /* Phone: collapse header action buttons to icon-only so Manage +
     Settings can both sit next to the brand without right-edge clipping.
     The button still keeps its accessible label via the inline svg + the
     anchor's title attribute; the visible text node is hidden. */
  /* Header icon buttons at < 480px: shrink to icon-only chips.
     Color/border are inherited from the always-on rule near the top
     of this file. Primary buttons (.air-btn-primary, e.g. "+ New page")
     keep their primary color but also collapse to icon size — actually
     they don't have icons, so they stay text. Hence the :not() guard. */
  /* Icon-only chips at phone width. We must:
     (1) zero the flex `gap` from the base `.air-btn` rule, otherwise
         flexbox still allocates the 8px gap BETWEEN the svg and the
         (collapsed) text node, pushing the svg left of geometric center.
     (2) hide the trailing text node entirely. `font-size: 0` is NOT
         enough on iOS Safari — it leaves a fractional width that
         visibly off-centers the icon. Make it a 0x0 absolutely-sized
         "hidden" node by collapsing all sizing on the text.
     (3) reset the inline `margin-right: 6px` on the svg (the icon
         markup has it as an inline style for the desktop text variant). */
  .create-header-right .air-btn:not(.air-btn-primary) {
    gap: 0 !important;
    padding: 10px;
    width: 44px;            /* perfect square chip — forces icon to true center */
    aspect-ratio: 1 / 1;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
  }
  .create-header-right .air-btn:not(.air-btn-primary) svg {
    margin: 0 !important;
    flex: 0 0 auto;
    display: block;
  }
}

.create-mono { font-family: var(--air-font-mono); font-size: var(--air-text-sm); letter-spacing: 0; }

/* ---- Custom combobox (replaces native <datalist>) -------------------- *
 * Used by the Partner field. Native <datalist> on Android Chrome flashes
 * the popup closed when the input lives inside an `overflow:hidden`
 * container (which every .create-section is). This custom combobox uses
 * <button> options that pointerdown-select cleanly on touch.
 */
.create-combo { position: relative; }
.create-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--air-surface);
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-lg);
  box-shadow: var(--air-shadow-elev);
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.create-combo-list[hidden] { display: none; }
.create-combo-list li { margin: 0; padding: 0; }
.create-combo-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--air-radius-md);
  font: 500 var(--air-text-md)/1.3 var(--air-font-body);
  color: var(--air-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.create-combo-option:hover,
.create-combo-option:focus-visible { background: var(--air-surface-soft); outline: none; }
.create-combo-option:active { background: var(--air-decorative-green); }

.create-pills {
  display: flex; flex-wrap: wrap; gap: var(--air-space-2); padding-top: 4px;
}

/* ---- URL preview ---------------------------------------------------- */

.create-url-preview {
  display: flex;
  align-items: center;
  gap: var(--air-space-3);
  padding: 18px 24px;
  border: 1px solid var(--air-text);
  border-radius: var(--air-radius-md);
  background: var(--air-surface-dark);
  color: var(--air-text-on-colour);
  font: 600 var(--air-text-sm)/1.3 var(--air-font-mono);
  word-break: break-all;
}
.create-url-host { color: rgba(255,255,255,0.5); font-weight: 500; }
.create-url-path em { color: rgba(255,255,255,0.4); font-style: italic; font-weight: 500; }
.create-url-path { color: var(--air-decorative-green); font-weight: 600; }
.create-url-copy { margin-left: auto; flex: 0 0 auto; }
.create-url-copy.air-btn-ghost {
  border-color: rgba(255,255,255,0.3);
  color: var(--air-text-on-colour);
}
.create-url-copy.air-btn-ghost:hover {
  background: var(--air-text-on-colour);
  color: var(--air-text);
  border-color: var(--air-text-on-colour);
}
.create-url-status {
  margin-top: 8px;
  font: 600 var(--air-text-xs)/1.4 var(--air-font-mono);
  letter-spacing: var(--air-track-mono);
  text-transform: uppercase;
  min-height: 1.2em;
}
.create-url-status.ok       { color: var(--air-status-success); }
.create-url-status.warn     { color: var(--air-status-pending); }
.create-url-status.error    { color: var(--air-status-error); }
.create-url-status.checking { color: var(--air-text-secondary); }

/* ---- Allowlist tag-input ------------------------------------------- */

/* Edit-mode access summary (rendered above "Manage access" button).
   Shows a compact at-rest description of the current sharing state so
   the user doesn't have to open the modal to see who has access. */
.create-access-summary {
  display: block;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius-md);
  background: var(--air-surface);
  color: var(--air-text-primary);
  font-size: 14px;
  line-height: 1.45;
}
.create-access-summary strong { font-weight: 600; }

/* `.create-access-actions` was removed when the Manage access / Comments
   buttons moved up into the floating Editing banner cluster. The Summary
   line is now read-only; actions live next to the slug at the top. */
.create-access-empty {
  color: var(--air-text-secondary);
  font-style: italic;
}

.create-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  min-height: 56px;
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius-md);
  background: var(--air-surface);
  cursor: text;
  align-items: center;
  box-shadow: var(--air-shadow-inset);
}
.create-tag-input:focus-within {
  border-color: var(--air-text);
  box-shadow: 0 0 0 3px rgba(13, 28, 36, 0.10);
}
.create-tag-input-field {
  flex: 1; min-width: 180px;
  border: 0; outline: 0; background: transparent;
  font: 500 var(--air-text-base)/1.4 var(--air-font-body);
  color: var(--air-text);
  padding: 4px 0;
}
.create-tag-input-field::placeholder { color: var(--air-text-placeholder); }

.create-allow-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 14px;
  background: var(--air-text);
  color: var(--air-text-on-colour);
  border-radius: var(--air-radius-pill);
  font: 600 var(--air-text-xs)/1.3 var(--air-font-mono);
  letter-spacing: 0;
}
.create-allow-tag.locked {
  background: var(--air-decorative-green);
  color: var(--air-text);
}
.create-allow-tag.locked::after { content: "🔒"; margin-left: 4px; font-size: 10px; opacity: 0.7; }
.create-allow-tag.wildcard {
  background: var(--air-decorative-purple);
  color: var(--air-text);
}
.create-allow-tag-remove {
  appearance: none;
  border: 0; background: transparent;
  width: 18px; height: 18px;
  border-radius: var(--air-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font: 700 13px/1 var(--air-font-body);
}
.create-allow-tag-remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); }

/* ---- Dropzone ------------------------------------------------------- */

.create-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--air-space-3);
  padding: var(--air-space-16) var(--air-space-6);
  border: 2px dashed var(--air-border-strong);
  border-radius: var(--air-radius-xl);
  background:
    radial-gradient(ellipse at top, var(--air-decorative-blue-soft) 0%, transparent 60%),
    var(--air-surface);
  color: var(--air-text-secondary);
  cursor: pointer;
  transition: all var(--air-dur-base);
  text-align: center;
}
.create-dropzone:hover, .create-dropzone.dragging {
  border-color: var(--air-text);
  background:
    radial-gradient(ellipse at top, var(--air-decorative-green-soft) 0%, transparent 60%),
    var(--air-surface);
  color: var(--air-text);
  transform: scale(1.005);
}
.create-dropzone-icon {
  width: 64px; height: 64px;
  border-radius: var(--air-radius-pill);
  background: var(--air-text);
  color: var(--air-text-on-colour);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--air-space-2);
}
.create-dropzone-text strong {
  display: block;
  font: 600 var(--air-text-lg)/1.2 var(--air-font-display);
  color: var(--air-text);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.create-file-card {
  display: flex;
  align-items: center;
  gap: var(--air-space-4);
  padding: var(--air-space-4) var(--air-space-5);
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-md);
  background: var(--air-surface);
  box-shadow: var(--air-shadow-card);
}
.create-file-card-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--air-decorative-purple-soft);
  color: var(--air-text);
  border-radius: var(--air-radius-md);
  flex: 0 0 48px;
}
.create-file-card-meta { flex: 1; min-width: 0; }
.create-file-card-bundler-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--air-text-muted, #6b7280);
  background: var(--air-tint-muted, rgba(0,0,0,0.04));
  border: 1px solid var(--air-border-subtle, rgba(0,0,0,0.08));
  border-radius: 10px;
  white-space: nowrap;
}
.create-file-card-name {
  font: 600 var(--air-text-base)/1.3 var(--air-font-body);
  color: var(--air-text);
  word-break: break-all;
  letter-spacing: -0.005em;
}

/* ---- HTML compatibility guidance ------------------------------------ */

.create-html-compat {
  margin-top: var(--air-space-4);
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-md);
  background: var(--air-surface);
  overflow: hidden;
}
.create-html-compat > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--air-space-3) var(--air-space-5);
  font: 600 var(--air-text-sm)/1.3 var(--air-font-body);
  color: var(--air-text);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: var(--air-space-2);
  user-select: none;
  transition: background var(--air-dur-base);
}
.create-html-compat > summary::-webkit-details-marker { display: none; }
.create-html-compat > summary::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: var(--air-radius-pill);
  background: var(--air-decorative-blue-soft);
  color: var(--air-text);
  font: 600 11px/1 var(--air-font-body);
  flex: 0 0 18px;
}
.create-html-compat > summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 10px;
  color: var(--air-text-secondary);
  transition: transform var(--air-dur-base);
}
.create-html-compat[open] > summary::after { transform: rotate(180deg); }
.create-html-compat > summary:hover { background: var(--air-surface-alt, rgba(0,0,0,0.02)); }

.create-html-compat-body {
  padding: var(--air-space-4) var(--air-space-5) var(--air-space-5);
  border-top: 1px solid var(--air-divider);
  font: 400 var(--air-text-sm)/1.5 var(--air-font-body);
  color: var(--air-text-secondary);
}
.create-html-compat-body > p:first-child { margin: 0 0 var(--air-space-4); }

.create-html-compat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--air-space-3);
  margin-bottom: var(--air-space-4);
}
@media (max-width: 720px) {
  .create-html-compat-row { grid-template-columns: 1fr; }
}

.create-html-compat-col {
  padding: var(--air-space-3) var(--air-space-4);
  border-radius: var(--air-radius-md);
  border: 1px solid var(--air-divider);
  background: var(--air-surface);
}
.create-html-compat-col strong {
  display: block;
  font: 600 var(--air-text-sm)/1.3 var(--air-font-body);
  margin-bottom: var(--air-space-2);
  letter-spacing: -0.005em;
}
.create-html-compat-col ul {
  margin: 0;
  padding-left: var(--air-space-4);
  font-size: 13px;
  line-height: 1.5;
}
.create-html-compat-col li { margin-bottom: 4px; color: var(--air-text); }
.create-html-compat-col li:last-child { margin-bottom: 0; }
.create-html-compat-col em { font-style: normal; color: var(--air-text); }

/* Per-category accent — green / amber / muted. Soft-tinted left border keeps
   the visual weight low while still distinguishing the three buckets. */
.create-html-compat-yes   { border-left: 3px solid var(--air-status-success, #0c8a3e); }
.create-html-compat-maybe { border-left: 3px solid var(--air-status-warning, #b8860b); }
.create-html-compat-no    { border-left: 3px solid var(--air-text-tertiary, #98a2b3); }
.create-html-compat-yes   strong { color: var(--air-status-success, #0c8a3e); }
.create-html-compat-maybe strong { color: var(--air-status-warning, #b8860b); }
.create-html-compat-no    strong { color: var(--air-text-tertiary, #98a2b3); }

.create-html-compat-note {
  margin-top: var(--air-space-2);
  padding-top: var(--air-space-2);
  border-top: 1px dashed var(--air-divider);
  font-size: 12px;
  font-style: italic;
}
.create-html-compat-tip {
  margin: 0;
  padding: var(--air-space-3) var(--air-space-4);
  background: var(--air-decorative-blue-soft);
  border-radius: var(--air-radius-md);
  color: var(--air-text);
  font-size: 13px;
}
.create-html-compat-tip strong { color: var(--air-text); }

/* ---- Preview -------------------------------------------------------- */

.create-preview {
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-lg);
  background: var(--air-surface);
  overflow: hidden;
}
.create-preview > summary {
  cursor: pointer;
  padding: 16px 22px;
  font: 600 var(--air-text-mono-sm)/1 var(--air-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--air-track-mono);
  color: var(--air-text);
  list-style: none;
  background: var(--air-surface-soft);
  border-bottom: 1px solid var(--air-divider);
}
.create-preview > summary::after {
  content: "▾";
  float: right;
  color: var(--air-text-secondary);
  transition: transform var(--air-dur-base);
}
.create-preview[open] > summary::after { transform: rotate(180deg); }
.create-preview-iframe {
  width: 100%;
  height: 500px;
  border: 0;
  background: var(--air-surface);
}

/* ---- Logo upload row ------------------------------------------------ */

.create-logo-row {
  display: flex;
  align-items: center;
  gap: var(--air-space-3);
}
.create-logo-row .air-input { flex: 1; min-width: 0; }
.create-logo-upload { flex: 0 0 auto; white-space: nowrap; }
.create-logo-or {
  font: 600 var(--air-text-xs)/1 var(--air-font-mono);
  letter-spacing: var(--air-track-mono);
  text-transform: uppercase;
  color: var(--air-text-tertiary);
  flex: 0 0 auto;
}
@media (max-width: 540px) {
  .create-logo-row { flex-wrap: wrap; }
  .create-logo-row .air-input { flex-basis: 100%; }
}

/* ---- Color picker --------------------------------------------------- */

.create-color-row { display: flex; gap: 10px; align-items: stretch; }
.create-color-pick {
  appearance: none;
  -webkit-appearance: none;
  width: 52px; height: 52px;
  border: 0;
  border-radius: var(--air-radius-md);
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex: 0 0 52px;
  overflow: hidden;
}
.create-color-pick::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: var(--air-radius-md);
}
.create-color-pick::-webkit-color-swatch {
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-md);
}
.create-color-pick::-moz-color-swatch {
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-md);
}

/* ---- Brand preview (mini AIR login overlay) ------------------------ */

.create-brand-fields { display: flex; flex-direction: column; gap: var(--air-space-4); }

.create-brand-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--air-space-2);
}
.create-brand-preview {
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: var(--air-radius-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 25%, var(--air-decorative-purple-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 75%, var(--air-decorative-blue-soft) 0%, transparent 55%),
    var(--air-surface-dark);
  /* Auto-size to card contents instead of forcing a 4:3 aspect ratio.
     The card can be tall (long product name + XL logo) and a fixed
     aspect ratio caused it to overflow vertically and visually "bleed"
     above/below the rounded preview frame. */
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Generous outer padding so the card never touches the frame edge.
     Was air-space-5 (≈20px); doubled for breathing room. */
  padding: var(--air-space-8) var(--air-space-6);
}
.create-brand-preview-overlay {
  /* No longer positioned absolutely — let the flex parent size to
     content. Kept as a hook in case we add an animated halo later. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.create-brand-preview-card {
  --brand-primary: #000000;
  --brand-accent:  #41a7d7;
  --brand-font:    "Poppins";
  width: min(300px, 100%);
  /* Was space-6 / space-5 (≈24/20). Bumped vertical padding so the
     logo never visually kisses the top of the card. */
  padding: var(--air-space-8) var(--air-space-6);
  background: var(--air-surface);
  border-radius: var(--air-radius-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--air-space-4);
  font-family: var(--brand-font);
  box-shadow: var(--air-shadow-elev);
}
.create-brand-preview-logo {
  width: 56px; height: 56px;
  /* Hard cap: never exceed 60% of card inner width, even at XL (128px).
     Guarantees breathing room from the card's left/right edges
     regardless of which logo size the user picks. */
  max-width: 60%;
  max-height: 160px;
  border-radius: var(--air-radius-pill);
  background: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--air-text-on-colour);
  font: 700 22px/1 var(--brand-font);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Tiny inner padding for image logos so the artwork doesn't kiss
     the rounded boundary of the chip. */
  padding: 4px;
  box-sizing: border-box;
}
.create-brand-preview-card h3 {
  font: 700 var(--air-text-lg)/1.18 var(--brand-font);
  letter-spacing: -0.015em;
  color: var(--brand-primary);
  margin: 0;
}
.create-brand-preview-card p {
  font: 400 var(--air-text-sm)/1.5 var(--brand-font);
  color: var(--air-text-secondary);
  margin: 0;
}
.create-brand-preview-btn {
  width: 100%;
  appearance: none;
  border: 0;
  padding: 12px 20px;
  background: var(--brand-accent);
  color: var(--air-text-on-colour);
  border-radius: var(--air-radius-pill);
  font: 600 var(--air-text-sm)/1 var(--brand-font);
  letter-spacing: -0.005em;
  cursor: pointer;
  margin-top: 6px;
}

/* ---- Review --------------------------------------------------------- */

.create-review {
  display: flex;
  flex-direction: column;
  gap: var(--air-space-4);
  padding: var(--air-space-7);
  background: var(--air-surface-cream);
  border: 1px solid var(--air-divider);
  border-radius: var(--air-radius-lg);
}
/* Don't render the empty container when §5 is closed (before the user
   continues to it from §4). Removes the visible empty pale-cream bar that
   sits above Back/Deploy. */
.create-review:empty {
  display: none;
}
.create-review-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--air-space-5);
  align-items: baseline;
  padding-bottom: var(--air-space-4);
  border-bottom: 1px solid var(--air-divider);
}
.create-review-row:last-child { border-bottom: 0; padding-bottom: 0; }
.create-review-label {
  font: 600 var(--air-text-mono-sm)/1.4 var(--air-font-mono);
  color: var(--air-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--air-track-mono);
}
.create-review-value {
  font: 500 var(--air-text-base)/1.5 var(--air-font-body);
  color: var(--air-text);
  word-break: break-word;
}
.create-review-value.create-mono { font-family: var(--air-font-mono); font-size: var(--air-text-sm); }
.create-review-value a { color: var(--air-text); text-decoration: underline; text-decoration-color: var(--air-divider); text-underline-offset: 3px; }
.create-review-value a:hover { text-decoration-color: var(--air-text); }
.create-review-swatches { display: inline-flex; gap: 6px; vertical-align: -3px; margin-right: 8px; }
.create-review-swatch {
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1px solid var(--air-divider);
  display: inline-block;
}

/* ---- Deploy ---------------------------------------------------------- */

.create-deploy-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--air-space-3);
  padding-top: var(--air-space-2);
}
.create-deploy-btn { min-width: 200px; position: relative; }
.create-deploy-btn-spin { display: none; }
.create-deploy-btn.loading .create-deploy-btn-label { opacity: 0.55; }
.create-deploy-btn.loading .create-deploy-btn-spin {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--air-text-on-colour);
  border-radius: 50%;
  animation: create-spin .8s linear infinite;
}
@keyframes create-spin { to { transform: rotate(360deg); } }

/* ---- Deployed state (flat, no chrome) ------------------------------ *
 * Kenneth-locked 2026-05-23: "simple smaller texts with a green tick".
 * No background, no border, no pill. Just ✓ + mono URL + ↗. Click URL to
 * copy. Click ↗ to open. Transitional loading is a streaming log block
 * BEFORE the result appears (see app.js wireSection5).
 */
.create-deploy-result {
  margin-top: var(--air-space-5);
  display: flex;
  align-items: center;
  gap: var(--air-space-2);
  font: 500 var(--text-meta, 12px)/var(--text-meta-lh, 1.3) var(--air-font-mono);
  color: var(--text-muted, var(--air-text-secondary));
}
.create-deploy-result-status {
  color: var(--air-status-success);
  font: 600 var(--text-meta, 12px)/1 var(--air-font-body);
  flex: 0 0 auto;
}
.create-deploy-result-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: var(--air-text);
  font: 500 var(--text-meta, 12px)/1.3 var(--air-font-mono);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.create-deploy-result-link:hover .create-deploy-result-url-text { text-decoration: underline; }
.create-deploy-result-url-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.create-deploy-result-open {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted, var(--air-text-secondary));
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 28px;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
}
.create-deploy-result-open:hover { color: var(--air-text); background: rgba(0,0,0,0.04); }
.create-deploy-result-toast {
  font: 600 11px/1 var(--air-font-mono);
  color: var(--air-status-success);
  pointer-events: none;
  flex: 0 0 auto;
}
.create-deploy-result-toast[hidden] { display: none; }
.create-deploy-manage {
  margin-left: auto; /* push to right end of the result strip */
}

/* Streaming progress lines shown WHILE deploying (mirrors LLM Flash UX). */
.create-deploy-log {
  margin-top: var(--air-space-4);
  display: none;
  flex-direction: column;
  gap: 4px;
  font: 500 var(--text-meta, 12px)/1.4 var(--air-font-mono);
  color: var(--text-muted, var(--air-text-secondary));
  max-height: 200px;
  overflow-y: auto;
}
.create-deploy-log.is-active { display: flex; }
.create-deploy-log-line { opacity: 0; animation: log-line-in 0.2s ease forwards; }
.create-deploy-log-line:last-child { color: var(--air-text); }
@keyframes log-line-in { to { opacity: 1; } }

/* ---- AIR floating decorative blobs (faint ambience only) ----------- *
 * Pulled further off-screen + opacity halved as part of the flat
 * redesign (2026-05-23). They were competing with the WhatsApp FAB.
 */
.create-app::before {
  content: "";
  position: fixed;
  bottom: -200px;
  right: -200px;
  width: 360px; height: 360px;
  background:
    radial-gradient(circle at 30% 30%, var(--air-decorative-purple) 0%, var(--air-decorative-purple-soft) 60%, transparent 75%);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.create-app::after {
  content: "";
  position: fixed;
  top: -160px;
  left: -160px;
  width: 280px; height: 280px;
  background:
    radial-gradient(circle at 60% 60%, var(--air-decorative-green) 0%, var(--air-decorative-green-soft) 60%, transparent 75%);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.create-app > * { position: relative; z-index: 1; }

/* ============================================================
   Edit mode (when /carnegie/create?slug=… loads an existing page)
   ============================================================ */

.create-edit-banner {
  margin: var(--air-space-3, 16px) 0 var(--air-space-4, 24px) 0;
  padding: 14px 18px;
  background: var(--air-color-surface, #ffffff);
  border: 1px solid var(--air-color-border, #e7e5dd);
  border-radius: 14px;
  font-size: 13px;
  color: var(--air-color-text-primary, #0b1020);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.create-edit-banner.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7a1d1d;
}
.create-edit-banner code {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--air-color-canvas, #fafaf7);
  color: var(--air-color-text-primary, #0b1020);
}
.create-edit-banner.error code {
  background: rgba(122, 29, 29, 0.08);
  color: #7a1d1d;
}
.create-edit-banner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.create-edit-banner-row strong {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.create-edit-banner-view,
.create-edit-banner-back {
  margin-left: auto;
  color: var(--air-color-text-secondary, #6b6b6b);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}
.create-edit-banner-back { margin-left: 0; }
.create-edit-banner-view:hover,
.create-edit-banner-back:hover {
  color: var(--air-color-text-primary, #0b1020);
}
.create-edit-banner-sub {
  font-size: 12px;
  color: var(--air-color-text-secondary, #6b6b6b);
}

/* Action cluster inside the Editing banner — 3 icon buttons (desktop) +
   1 `⋯` overflow (mobile, ≤480px). Visual language matches the
   /carnegie/manage card-corner buttons: 28×28 rounded squares with a soft
   shadow that flip dark on hover.

   The cluster sits between the slug `<code>` and the `View ↗` / `← All
   pages` text links. CSS toggles which sub-cluster is visible based on
   viewport — no JS resize listener needed. */
.create-edit-banner-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.create-edit-banner-action,
.create-edit-banner-overflow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--air-color-text-secondary, #6b6b6b);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
  padding: 0;
  font-family: inherit;
  position: relative;
}
.create-edit-banner-action:hover,
.create-edit-banner-action:focus-visible,
.create-edit-banner-overflow:hover,
.create-edit-banner-overflow:focus-visible {
  background: var(--air-color-text-primary, #0b1020);
  color: #ffffff;
  transform: scale(1.05);
  outline: none;
}

/* Danger variant for the Delete button — flips red on hover instead of
   dark, matching the destructive-intent treatment used on the
   /carnegie/manage card-corner delete. Resting state stays subtle so the
   cluster doesn't read as 3 angry red flags. */
.create-edit-banner-action-danger:hover,
.create-edit-banner-action-danger:focus-visible {
  background: var(--air-color-danger, #dc2626);
  color: #ffffff;
}

/* Comments badge — small pill that floats on the top-right of the bubble
   icon when there are unread/new comments. Hidden by default; the JS
   unhides + sets text content when count > 0. */
.create-edit-banner-action-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--air-color-danger, #dc2626);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  pointer-events: none;
  font-family: "Poppins", system-ui, sans-serif;
  box-shadow: 0 0 0 2px var(--air-color-surface, #ffffff);
}

/* Mobile (≤480px): hide the 3-icon cluster, show only the overflow `⋯`
   button. Also drop the `View ↗` link from the banner row — the bottom
   sheet's "Open in new tab" row covers that case. */
@media (min-width: 481px) {
  .create-edit-banner-overflow { display: none; }
}
@media (max-width: 480px) {
  .create-edit-banner-action { display: none; }
  .create-edit-banner-view { display: none; }
}

/* Locked inputs in edit mode — visually distinct from active fields */
.create-input-locked,
.air-input.create-input-locked,
.air-chip.create-input-locked {
  background: var(--air-color-canvas, #fafaf7) !important;
  color: var(--air-color-text-secondary, #6b6b6b) !important;
  cursor: not-allowed !important;
  opacity: 0.85;
  border-style: dashed;
}
.air-chip.create-input-locked.on {
  background: var(--air-color-text-primary, #0b1020) !important;
  color: var(--air-color-canvas, #fafaf7) !important;
  opacity: 1;
}

/* Extract-from-URL row at the top of Brand section */
.create-extract-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  margin-bottom: 4px;
}
.create-extract-btn {
  flex-shrink: 0;
}
.create-extract-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* AI Extract button — same chrome as Extract but with a subtle violet hint
   so the operator can tell which one they last clicked. The button stays
   flat by default; the violet glow comes in on hover and stays on while
   the request is in flight. */
.create-extract-ai-btn {
  border-color: rgba(120, 70, 220, 0.25);
}
.create-extract-ai-btn:hover:not([disabled]) {
  background: rgba(120, 70, 220, 0.06);
  border-color: rgba(120, 70, 220, 0.35);
}
.create-extract-ai-btn[disabled] {
  background: rgba(120, 70, 220, 0.05);
}

/* Recent-extractions panel */
.create-extract-log-toggle {
  /* On desktop, push the Recent button to the far right of the extract row.
     On mobile, the row already flex-wraps; we drop the auto-margin under 640px
     so Recent flows naturally instead of getting pinned off-screen. */
  margin-left: auto;
}
/* Recent toggle: strip the .air-btn pill chrome so it sits flat next to the
   helper copy instead of competing with the two primary extract buttons.
   Keep the hamburger icon + label, just shrink and de-emphasize.
   Kenneth 2026-05-23. */
.create-extract-log-toggle.air-btn.air-btn-sm.air-btn-ghost {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 6px !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--air-text-muted, #4b5266) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  gap: 6px;
}
.create-extract-log-toggle.air-btn.air-btn-sm.air-btn-ghost:hover {
  background: var(--air-surface, rgba(0,0,0,0.04)) !important;
  color: var(--air-text, #0b1020) !important;
}
.create-extract-log-toggle.air-btn.air-btn-sm.air-btn-ghost svg {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}
.create-extract-log-toggle.air-btn.air-btn-sm.air-btn-ghost:hover svg {
  opacity: 1;
}
@media (max-width: 640px) {
  .create-extract-log-toggle {
    margin-left: 0;
  }
  .create-extract-row {
    /* Already flex-wrap: wrap, but add a flex-basis hint so each button takes
       its natural width on a fresh line instead of squeezing on one row. */
    row-gap: 8px;
  }
  .create-extract-row .create-extract-btn {
    /* Keep Extract + AI extract on the same row when possible, but allow
       them to stack on very narrow screens (<360px). */
    flex: 0 1 auto;
  }
}
.create-extract-log {
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  font-size: 12px;
  max-height: 320px;
  overflow-y: auto;
}
.create-extract-log-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.create-extract-log-header strong { font-size: 12px; }
.create-extract-log-header small { color: rgba(0, 0, 0, 0.5); margin-right: auto; }
.create-extract-log-list { display: flex; flex-direction: column; gap: 6px; }
.create-extract-log-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.create-extract-log-entry.failed {
  background: rgba(220, 70, 70, 0.04);
  border-color: rgba(220, 70, 70, 0.18);
}
.create-extract-log-method {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.create-extract-log-method.heuristic { background: rgba(60, 130, 200, 0.12); color: rgb(40, 90, 150); }
.create-extract-log-method.ai        { background: rgba(120, 70, 220, 0.12); color: rgb(80, 50, 160); }
.create-extract-log-host { font-weight: 600; font-size: 12px; }
.create-extract-log-host small { font-weight: 400; color: rgba(0,0,0,0.5); margin-left: 4px; }
.create-extract-log-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.65);
}
.create-extract-log-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}
.create-extract-log-thumb {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0,0,0,0.04);
  vertical-align: middle;
  display: inline-block;
}
.create-extract-log-meta-col {
  text-align: right;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  font-family: ui-monospace, monospace;
}
.create-extract-log-empty {
  padding: 20px 0;
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
}
.create-extract-help {
  flex: 1 1 200px;
  margin: 0;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.4;
}

/* Suggestion chips — best-effort extract candidates */
.create-suggestion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  min-height: 0;
}
.create-suggestion-row:empty { display: none; }
/* Suggestion chips overflow on mobile when AI returns long source strings.
   max-width keeps each chip inside the parent grid track; the chip-source
   line-clamp above handles the text. */
.create-suggestion-chip {
  max-width: 100%;
  min-width: 0;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono, "Fira Code", ui-monospace, monospace);
  color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  transition: all 120ms ease;
}
.create-suggestion-chip:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}
.create-suggestion-chip.chip-active {
  background: var(--text, #0b1020);
  color: white;
  border-color: var(--text, #0b1020);
}
.create-suggestion-high {
  border-color: rgba(12, 138, 62, 0.4);
  background: rgba(12, 138, 62, 0.06);
}
.create-suggestion-high::after {
  content: "✓";
  color: rgba(12, 138, 62, 0.9);
  font-weight: bold;
  margin-left: 2px;
}
.create-suggestion-medium {
  /* unchanged from base */
}
.create-suggestion-low,
.create-suggestion-guess {
  opacity: 0.65;
  font-style: italic;
}
.chip-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.chip-thumb {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.04);
}
.chip-source {
  color: rgba(0, 0, 0, 0.45);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* AI extract produces verbose source strings (e.g. "HEADER <IMG> WITH ALT='LEDGER',
     PRIMARY LOGO IN <PICTURE> ELEMENT"). Clamp to 2 lines so chips stay rectangular
     and don't push siblings off-screen on mobile. Full text is still in the title= tooltip. */
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
}
.create-suggestion-chip.chip-active .chip-source {
  color: rgba(255, 255, 255, 0.7);
}

/* §4 — Refine with AI ------------------------------------------------- */
.create-llm-grid { display:flex; flex-direction:column; gap:20px; }
.create-llm-textarea { width:100%; font-family: var(--air-font-body, ui-sans-serif, system-ui); resize:vertical; min-height:120px; }
.create-llm-chips { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
/* Top row of category buttons + the ★ reference chip */
.create-llm-chips-cats { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
/* Panel below the category row — only the active category's chips are shown */
.create-llm-chips-panel {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--air-line, #e2e2e2);
  border-radius: 12px;
  background: #fafaf8;
}
.create-llm-chips-panel[hidden] { display: none; }
.create-llm-chips-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.create-llm-chips-row[hidden] { display: none; }
/* Category pill — same shape as a chip, slightly heavier so it reads as "a tab".
   [R5] padding tuned so computed height ≈ 36px → 44px tap target via line-height + parent gap. */
.create-llm-cat {
  appearance:none; border:1px solid var(--air-line, #e2e2e2); background:#fff;
  border-radius:999px; padding:10px 14px; font-size:13px; font-weight:500; cursor:pointer;
  font-family: inherit; color:#1a1a1a; min-height:36px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.create-llm-cat:hover { background:#f5f5f3; border-color:#cfcfcf; }
.create-llm-cat[aria-expanded="true"] {
  background:#1a1a1a; color:#fff; border-color:#1a1a1a;
}
.create-llm-chip {
  appearance:none; border:1px solid var(--air-line, #e2e2e2); background:#fff;
  border-radius:999px; padding:10px 14px; font-size:13px; cursor:pointer;
  font-family: inherit; color:#1a1a1a; min-height:36px; transition:background .12s ease, border-color .12s ease;
}
.create-llm-chip:hover { background:#f5f5f3; border-color:#cfcfcf; }
/* Reference chip — the canonical multi-edit prompt that exercises all five
   EditKind branches (replace + insert_after + transform/all_matches + delete).
   Tinted to stand out from the single-purpose chips around it. */
.create-llm-chip--ref {
  background: linear-gradient(135deg, #fff9e6 0%, #fff4d1 100%);
  border-color: #e8c44d;
  color: #6a4a00;
  font-weight: 600;
}
.create-llm-chip--ref:hover {
  background: linear-gradient(135deg, #fff4d1 0%, #ffeab3 100%);
  border-color: #d4a82a;
}
.create-llm-config-row { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
/* [R6, R9] 240→180 so Stage1/Stage2 picker row + Run/Abort buttons fit on
   the refine card's ~1056px column at 1280px viewport without orphaning
   the buttons to a second flex row. */
.create-llm-config-row > div { flex:1; min-width:180px; }
.create-llm-config-row .air-btn { flex:0 0 auto; }
.create-llm-result {
  border:1px solid #d6e9d6; background:#f3f9f3; border-radius:14px; padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.create-llm-result-summary { font-weight:600; font-size:15px; color:#0c5b2a; }
.create-llm-result-meta {
  display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:#4b5266;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.create-llm-result-actions { display:flex; gap:10px; justify-content:flex-end; }
.create-llm-error {
  border:1px solid #f1c4c4; background:#fdf3f3; color:#7a1d1d;
  border-radius:12px; padding:12px 14px; font-size:13px;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-height: 240px; overflow-y: auto;
}
.create-llm-error-text { display: block; }
.create-llm-error-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.create-llm-error-action-btn {
  font-family: var(--air-font-body, ui-sans-serif, system-ui);
  font-size: 12px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #d9b8b8;
  color: #5a1515;
}
.create-llm-error-action-btn:hover {
  background: #faebeb;
  border-color: #c79898;
}

/* §4 — Streaming refine UI ------------------------------------------- */
.create-llm-stream {
  border:1px solid #d6dceb; background:#f6f8fd; border-radius:14px; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.create-llm-stream-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-size:13px;
}
.create-llm-stream-header .create-llm-elapsed { margin-left:auto; }
.create-llm-elapsed {
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:999px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size:11px; font-weight:600;
  letter-spacing:.02em;
  color:#5a6273; background:rgba(0,0,0,0.05);
  transition: color 200ms ease, background 200ms ease;
}
.create-llm-elapsed[data-state="warn"]    { color:#7a4d00; background:rgba(217,119,6,0.16); }
.create-llm-elapsed[data-state="danger"]  { color:#7a1d1d; background:rgba(197,13,13,0.16); animation: create-llm-elapsed-pulse 1s ease-in-out infinite; }
.create-llm-elapsed[data-state="done"]    { color:#0c5b2a; background:rgba(12,138,62,0.14); }
.create-llm-elapsed[data-state="aborted"] { color:#5a6273; background:rgba(0,0,0,0.05); }
@keyframes create-llm-elapsed-pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.04); }
}
.create-llm-phase {
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px;
  font-weight:600; font-size:12px;
  color:#1a2138; background:#dde5fa;
  text-transform:uppercase; letter-spacing:.04em;
}
.create-llm-phase::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:#3530b6;
  animation: create-llm-pulse 1.2s ease-in-out infinite;
}
.create-llm-phase[data-phase="connecting"]   { background:#e6e9f5; color:#4b5266; }
.create-llm-phase[data-phase="connecting"]::before { background:#7a8298; }
.create-llm-phase[data-phase="thinking"]     { background:#fff4e0; color:#7a4d00; }
.create-llm-phase[data-phase="thinking"]::before { background:#d97706; }
.create-llm-phase[data-phase="writing"]      { background:#dcefe1; color:#0c5b2a; }
.create-llm-phase[data-phase="writing"]::before { background:#0c8a3e; }
.create-llm-phase[data-phase="finalizing"]   { background:#e6e9f5; color:#3530b6; }
.create-llm-phase[data-phase="finalizing"]::before { background:#3530b6; animation:none; }
@keyframes create-llm-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.45; transform:scale(.8); }
}
.create-llm-counter {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; color:#4b5266;
}
.create-llm-stream-bar {
  height:6px; background:#e1e5ef; border-radius:999px; overflow:hidden;
}
.create-llm-stream-bar-fill {
  height:100%; width:0%; background:linear-gradient(90deg,#3530b6,#0c8a3e);
  transition:width .25s ease-out;
}

/* Context registry pills — populated from SSE phase=context_ready.
   Each pill represents one source-kind; background tinted by bundle color. */
.create-llm-context-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
  align-items: center;
}
/* rule #10 — component class `display: flex` overrides the UA `[hidden] {display:none}`,
   so we MUST add an explicit guard or the empty pill container paints a 16px-tall gap
   on load and stays visible after resetContextPills(). */
.create-llm-context-pills[hidden] { display: none !important; }
.create-llm-context-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: #fff;
  /* background is set inline from bundle_color */
  white-space: nowrap;
  line-height: 1.4;
  transition: opacity 180ms ease, transform 180ms ease;
}
.create-llm-context-pill[data-wired="false"] {
  opacity: 0.45;
  font-style: italic;
}
.create-llm-context-pill[data-empty="true"] {
  opacity: 0.55;
}
.create-llm-context-pill[data-tier="off"] {
  display: none;  /* don't pollute the strip with sources turned off */
}
.create-llm-context-pill .ctx-pill-tier {
  font-size: 10px; font-weight: 500;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.create-llm-context-pill .ctx-pill-count {
  font-size: 10px; font-weight: 400;
  opacity: 0.85;
}
.create-llm-context-pill a {
  color: inherit; text-decoration: none;
}
.create-llm-context-pill a:hover { text-decoration: underline; }
.create-llm-context-pills-meta {
  font-size: 11px; color: #6b7180;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.create-llm-reasoning summary {
  cursor:pointer; font-size:12px; font-weight:600;
  color:#4b5266; user-select:none;
}
.create-llm-reasoning summary:hover { color:#1a2138; }
.create-llm-reasoning-text {
  margin:8px 0 0; padding:10px 12px;
  background:#fff; border:1px solid #e1e5ef; border-radius:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; line-height:1.55; color:#1a2138;
  white-space: pre-wrap; word-break: break-word;
  max-height:200px; overflow-y:auto;
}

/* ====================================================================== */
/* Refine-with-AI sub-panel (lives inside §2 Content, item 1)             */
/* ====================================================================== */

.refine-panel {
  margin-top: 20px;
  border: 1px solid var(--air-line, #e2e2e2);
  border-radius: 14px;
  background: #fbfbfa;
  overflow: hidden;
}
.refine-panel[open] { background: #fff; }
.refine-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  font-size: 15px;
  color: #1a2121;
}
.refine-summary::-webkit-details-marker { display: none; }
.refine-summary::after {
  content: "▾";
  font-size: 12px;
  color: #7a8298;
  transition: transform .15s ease;
}
.refine-panel[open] > .refine-summary::after { transform: rotate(180deg); }
.refine-summary-title { font-size: 15px; }
.refine-summary-hint { font-weight: 400; color: #7a8298; }
.refine-body {
  padding: 6px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid #efefee;
}
.refine-intro { margin: 12px 0 0; }

.refine-instruction .create-llm-textarea { min-height: 90px; }

/* Context sub-collapsible inside refine panel */
.refine-context {
  border: 1px solid #e8e8e6;
  border-radius: 10px;
  background: #fafafa;
  padding: 0;
}
.refine-context[open] { background: #fff; }
.refine-context-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: #1a2138;
  user-select: none;
  gap: 10px;
}
.refine-context-summary::-webkit-details-marker { display: none; }
.refine-context-summary::after {
  content: "▾";
  font-size: 11px;
  color: #7a8298;
  transition: transform .15s ease;
}
.refine-context[open] > .refine-context-summary::after { transform: rotate(180deg); }
.refine-context-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid #efefee;
}
.refine-dropzone {
  border: 1.5px dashed #cfcfcf;
  border-radius: 10px;
  padding: 16px;
  background: #fafaf8;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.refine-dropzone:hover,
.refine-dropzone.dragging {
  border-color: #3530b6;
  background: #f3f3fd;
}
.refine-dropzone-label { font-size: 13px; color: #4b5266; }
.refine-dropzone-browse {
  appearance: none; background: none; border: none; padding: 0;
  color: #3530b6; font: inherit; cursor: pointer; text-decoration: underline;
}

.refine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.refine-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: #f0f0ee;
  border: 1px solid #e2e2e0;
  font-size: 12px;
  color: #1a2138;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-width: 320px;
}
.refine-chip.error { background: #fdf3f3; border-color: #f1c4c4; color: #7a1d1d; }
.refine-chip.loading { background: #fff4e0; border-color: #f3d399; color: #7a4d00; }
.refine-chip.ok { background: #e8f7ec; border-color: #c8e6cf; color: #0c5b2a; }
.refine-chip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.refine-chip-remove {
  appearance: none; background: none; border: none; padding: 0 2px;
  font-size: 14px; line-height: 1; color: #7a8298; cursor: pointer;
}
.refine-chip-remove:hover { color: #c50d0d; }
.refine-chip-spin {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #f3d399; border-top-color: #d97706;
  animation: refine-spin .8s linear infinite;
}
@keyframes refine-spin { to { transform: rotate(360deg); } }

.refine-url-tags { min-height: 38px; }

/* ── Instruction header row: label + Online pill toggle ─────────────
   The "Online" affordance enables OpenRouter web search (model becomes
   :online). Was a checkbox buried under "Reference material"; promoted
   here as an Apple-style pill so it sits next to the prompt where the
   user actually decides whether the run needs live search. */
.refine-instruction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.refine-instruction-header .air-label { margin-bottom: 0; }

.refine-online-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font: 600 12px/1 'DM Sans', system-ui, sans-serif;
  color: var(--air-text-muted, rgba(11,16,32,0.62));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* [R5] WCAG 2.5.5 — label wraps input + 36×22 track; pad it out so the
     full click region is ≥44px tall without changing the visual track. */
  min-height: 44px;
  padding: 11px 0;
}
.refine-online-toggle input[type="checkbox"] {
  /* visually hidden but still focusable */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; overflow: hidden;
  clip: rect(0 0 0 0);
}
/* Partner-site URL row: help text on the left, auto-extract toggle on the right.
   Keeps the toggle visually adjacent to the URL field without breaking the
   existing Step 1 grid. */
.create-partner-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.create-partner-site-row .air-help { margin: 0; flex: 1 1 auto; }
.create-partner-site-row .create-auto-extract-toggle { flex: 0 0 auto; }
.create-auto-extract-toggle[data-busy="true"] .refine-online-label::after {
  content: " · running…";
  color: var(--air-accent, #4f7cff);
}
/* Post-run feedback: green ✓ on success, red ✗ on failure.
   Auto-cleared by JS after 3.5s (success) / 6s (error).
   data-busy takes precedence — if both are set during a fresh re-fire,
   the running-state shows. */
.create-auto-extract-toggle[data-state="done"]:not([data-busy="true"]) .refine-online-label::after {
  content: " · ✓ extracted";
  color: var(--air-success, #1ea672);
  font-weight: 700;
}
.create-auto-extract-toggle[data-state="error"]:not([data-busy="true"]) .refine-online-label::after {
  content: " · ✗ failed";
  color: var(--air-danger, #d6354c);
  font-weight: 700;
}
.refine-online-track {
  display: inline-block;
  position: relative;
  width: 36px; height: 22px;
  border-radius: 11px;
  background: rgba(11,16,32,0.12);
  transition: background 0.22s ease;
  flex: 0 0 36px;
}
.refine-online-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 1px 1px rgba(0,0,0,0.08);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.refine-online-toggle input:checked ~ .refine-online-track {
  background: #34c759; /* iOS green */
}
.refine-online-toggle input:checked ~ .refine-online-track .refine-online-thumb {
  transform: translateX(14px);
}
.refine-online-toggle input:focus-visible ~ .refine-online-track {
  outline: 2px solid var(--air-accent, #c0a062);
  outline-offset: 2px;
}
.refine-online-toggle input:checked ~ .refine-online-label {
  color: var(--air-text, #0b1020);
}

/* ── Reference URLs header row: label + Deep-crawl pill toggle ─────────
   Mirror of .refine-instruction-header. When toggled on, Pattern A
   crawls up to 5 same-domain sub-pages per Reference URL and distills
   the result into a ~4KB block injected as <ref_url_crawl>. */
.refine-url-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.refine-url-header .air-label { margin-bottom: 0; }

/* Run row: model picker on left, [Refine] / [Abort] on right */
.refine-run-row { align-items: flex-end; }
.refine-abort-btn {
  background: #fff;
  border: 1px solid #f1c4c4 !important;
  color: #c50d0d !important;
}
.refine-abort-btn:hover { background: #fdf3f3; }

/* Reasoning ticker — single-line ellipsis (item 2) */
.refine-reasoning-ticker {
  font-size: 12px;
  color: #4b5266;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 18px;
  line-height: 1.5;
}
.refine-reasoning-ticker:empty::before {
  content: "thinking…";
  opacity: .5;
  font-style: italic;
}
.refine-reasoning-full summary {
  cursor: pointer; font-size: 11px; font-weight: 600;
  color: #7a8298; user-select: none;
}

/* Applied banner (item 9) */
.refine-applied-banner {
  border: 1px solid #c8e6cf;
  background: #e8f7ec;
  color: #0c5b2a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Preview modal (item 8) */
.refine-preview-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.refine-preview-modal[hidden] { display: none !important; }

/* Belt-and-braces: any refine-* element with hidden attr stays hidden.
   CSS class rules like `display:flex` otherwise override the browser-default
   `[hidden] { display:none }` because they have equal specificity but win on
   source order. */
[id^="refine-"][hidden],
[id^="llm-"][hidden] { display: none !important; }
.refine-preview-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 18, 0.75);
}
.refine-preview-frame {
  position: relative;
  width: min(96vw, 1200px);
  height: min(94vh, 900px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.refine-preview-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--air-line, #e2e2e2);
  background: #fafafa;
}
.refine-preview-title { font-weight: 600; font-size: 14px; color: #1a2121; }
.refine-preview-iframe {
  flex: 1;
  width: 100%; border: 0;
  background: #fff;
}

/* ====================================================================== */
/* UI polish pass — alignment fixes                                       */
/* ====================================================================== */

/* §3 brand fields: color picker is 52px tall but the text input collapses
   to default ~42px, leaving the swatch hanging. Lock both to the same
   height and centre on the row. */
.create-color-row { align-items: center; }
.create-color-row .air-input { height: 52px; }

/* Refine run row: model select is taller than the buttons, which means
   the buttons baseline-drift below the select. align-items: stretch keeps
   button heights matched to the select. */
.refine-run-row {
  align-items: stretch;
}
.refine-run-row > div { display: flex; flex-direction: column; justify-content: flex-end; }
.refine-run-row .refine-run-btn,
.refine-run-row .refine-abort-btn {
  align-self: flex-end;
  min-height: 42px;
}

/* Inline 'Extended thinking' switch — pill label + iOS-style toggle. Lives
   between model picker and Refine button. Underlying control is still a real
   <input type="checkbox"> so click/keyboard/state binding all work as before;
   the visible knob+track are sibling spans positioned over the hidden input. */
/* Think mode toggle — iOS-style switch matching the Patch toggle. OFF=Stream
   (default, single-call refine). ON=Think (2-stage Opus plan + Sonnet execute).
   The whole label inherits .refine-thinking-inline so it sits inline with the
   other refine controls. Only the badge color differs — violet to signal this
   is a more expensive/slower mode that should be opt-in. */
.refine-think-inline .refine-think-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  background: linear-gradient(90deg, #7846dc 0%, #c026d3 100%);
  color: white;
  vertical-align: 1px;
}

.refine-thinking-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--air-surface-dim, #f1efe9);
  border: 1px solid var(--air-border-soft, rgba(0,0,0,0.08));
  border-radius: var(--air-radius-pill, 999px);
  font: 500 13px/1.2 var(--air-font-display, 'Poppins', sans-serif);
  color: var(--air-text);
  cursor: pointer;
  user-select: none;
  align-self: flex-end;
  min-height: 44px;
  white-space: nowrap;
  transition: background-color 120ms ease, opacity 120ms ease;
}
.refine-thinking-inline:hover { background: var(--air-surface, #e7e3d8); }
.refine-thinking-label { letter-spacing: -0.005em; }

.refine-thinking-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
}
.refine-thinking-switch input[type="checkbox"] {
  /* Visually hidden but still focusable and clickable via the parent <label>. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.refine-thinking-switch-track {
  position: absolute;
  inset: 0;
  background: #cfcdc6;
  border-radius: 999px;
  transition: background-color 180ms ease;
}
.refine-thinking-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), 0 1px 1px rgba(0,0,0,0.08);
  transition: transform 180ms cubic-bezier(.2,.7,.2,1), background-color 180ms ease;
}
/* ON state — track green, knob slides right.
   [R10] Use iOS green #34c759 to match .refine-online-toggle family. */
.refine-thinking-switch input[type="checkbox"]:checked ~ .refine-thinking-switch-track {
  background: #34c759;
}
.refine-thinking-switch input[type="checkbox"]:checked ~ .refine-thinking-switch-knob {
  transform: translateX(16px);
}
/* Reverse variant — used on the Flash/Think mode toggle where Think (= checked)
   sits on the LEFT. Knob rests on the right when unchecked (Flash), slides
   left to the Think side when checked. The track + knob start positions
   are flipped via right-anchored knob; transform direction is inverted. */
.refine-thinking-switch--reverse .refine-thinking-switch-knob {
  left: auto;
  right: 2px;
}
.refine-thinking-switch--reverse input[type="checkbox"]:checked ~ .refine-thinking-switch-knob {
  transform: translateX(-16px);
}

/* Think (green) ↔ Flash (orange) tint on the mode toggle.
   Default-state (unchecked = Flash) gets orange instead of the neutral grey
   used by other switches. Checked (= Think) keeps the success-green track. */
.refine-mode-block--flash .refine-thinking-switch--reverse .refine-thinking-switch-track {
  background: var(--air-status-warning-color, #f08a24);
}
.refine-mode-block--think .refine-thinking-switch--reverse .refine-thinking-switch-track,
.refine-mode-block--think .refine-thinking-switch--reverse input[type="checkbox"]:checked ~ .refine-thinking-switch-track {
  background: #34c759;
}
/* Side-label tint: dim the inactive side so the active mode is obvious. */
.refine-mode-block--flash .refine-mode-toggle-flash {
  color: var(--air-status-warning-color, #f08a24);
  font-weight: 600;
}
.refine-mode-block--think .refine-mode-toggle-think {
  color: var(--air-status-success-color, #1f8a4d);
  font-weight: 600;
}
.refine-mode-block--flash .refine-mode-toggle-think,
.refine-mode-block--think .refine-mode-toggle-flash {
  opacity: 0.45;
}

/* Disabled state for the Extended Thinking label when locked-on in Think mode */
.refine-thinking-inline.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.refine-thinking-inline.is-disabled .refine-thinking-switch {
  pointer-events: none;
}

/* Focus ring on keyboard nav (matches checkbox semantics) */
.refine-thinking-switch input[type="checkbox"]:focus-visible ~ .refine-thinking-switch-track {
  outline: 2px solid var(--air-accent, #4f46e5);
  outline-offset: 2px;
}

/* Streaming header: counter sat on the baseline of the phase chip's text
   instead of centered with the pill. */
.create-llm-stream-header { align-items: center; }
.refine-reasoning-ticker { padding-left: 2px; }

/* Result actions: mixed [ghost, ghost, ghost, primary] sometimes rendered
   different heights. Pin a min-height so they line up. */
.create-llm-result-actions { align-items: center; flex-wrap: wrap; }
.create-llm-result-actions .air-btn { min-height: 34px; }

/* [R6] At <480px the four actions (Preview / Download / Revert / Done) wrap
   unpredictably and the primary Done can land above destructive Revert.
   Stack column-reverse with full-width buttons so primary lands on top and
   destructive lands at the bottom (matches .agentrun-output-done-actions). */
@media (max-width: 480px) {
  .create-llm-result-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .create-llm-result-actions .air-btn { width: 100%; min-height: 44px; }
}

/* Refined-applied banner: ✓ icon needs an inline marker; align-items:center
   exists already, but if a caller injects an inline-svg the baseline drifts.
   Force consistent line-height. */
.refine-applied-banner { line-height: 1.4; }
.refine-applied-banner svg,
.refine-applied-banner .refine-applied-icon { flex: 0 0 auto; }

/* Doc upload chips and URL chips both use .refine-chip; ensure consistent
   height regardless of whether the chip wraps a spinner or plain label. */
.refine-chip { min-height: 26px; line-height: 1.3; }

/* ====================================================================== */
/* Super-admin /carnegie/create allowlist panel                                    */
/* ====================================================================== */

.create-admin-section {
  /* Amber accent border so the panel reads as 'elevated tool', not a step */
  border-color: rgba(217, 119, 6, 0.45) !important;
  background:
    linear-gradient(0deg, rgba(217, 119, 6, 0.025), rgba(217, 119, 6, 0.025)),
    var(--air-surface);
}
.create-admin-section::before { display: none; }
.create-admin-section .create-section-num.create-admin-num {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}
.create-admin-section .create-section-sublabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.create-admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font: 700 10px/1.4 var(--air-font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.create-admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* On narrow viewports the row [status · reset · save] overflows
     past the section's right edge. Allow wrapping so buttons drop to
     a new line under the status text instead of bleeding out. */
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.create-admin-actions > .create-admin-status {
  /* Status text takes whatever's left so the two buttons can sit
     together on the right; on narrow screens it lets buttons wrap
     cleanly underneath. */
  flex: 1 1 auto;
  min-width: 0;
}
.create-admin-actions > .air-btn {
  /* Buttons keep their natural width but stay contained — never wider
     than their container, no horizontal scroll. */
  max-width: 100%;
}
@media (max-width: 520px) {
  .create-admin-actions {
    /* On phones, stack actions full-width for tappability and to
       guarantee zero overflow regardless of label length. */
    flex-direction: column;
    align-items: stretch;
  }
  .create-admin-actions > .air-btn {
    width: 100%;
  }
  .create-admin-actions > .create-admin-status {
    text-align: center;
    flex: 0 0 auto;
  }
}
.create-admin-status {
  font-size: 13px;
  color: var(--air-text-secondary, #4b5266);
  min-height: 1.2em;
}
.create-admin-status.ok { color: #0c8a3e; font-weight: 600; }
.create-admin-status.err { color: #c50d0d; font-weight: 600; }
.create-admin-section[hidden] { display: none !important; }

/* Hairline divider between sibling sub-sections inside the same admin panel
   (e.g. /carnegie/create allowlist + Admin access list under Access control).
   Flat surface, no nested card — per design-principles rule #3. */
.create-admin-divider {
  height: 1px;
  background: var(--air-divider, #e6e3dc);
  margin: 28px 0 24px;
  border: 0;
}
[data-theme="dark"] .create-admin-divider {
  background: var(--c-divider, rgba(255, 255, 255, 0.08));
}

/* Sub-section heading inside an admin panel (sibling to the panel's <h2> —
   visually demoted via size only, no card chrome). */
.create-admin-subhead {
  margin: 4px 0 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--air-text-primary, #0b1020);
}
[data-theme="dark"] .create-admin-subhead {
  color: var(--c-text-primary, #f4ede0);
}

/* ──────────────────────────────────────────────────────────────────────
   Patch-mode UI (refine §4): "fast" badge on toggle + live diff cards
   ────────────────────────────────────────────────────────────────────── */

.refine-patch-inline .refine-patch-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  background: linear-gradient(90deg, #f7c948 0%, #fb8b24 100%);
  color: #1a1a1a;
  vertical-align: 1px;
}

.refine-edits {
  margin-top: 14px;
  padding: 14px 16px 12px;
  border: 1px solid var(--air-line, #e6e6e0);
  border-radius: 12px;
  background: var(--air-surface-sunken, #fafaf7);
}
.refine-edits-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.refine-edits-title {
  font-weight: 600;
  font-size: 14px;
}
.refine-edits-stats {
  font-size: 12px;
  color: var(--air-fg-mute, #5a6273);
  font-variant-numeric: tabular-nums;
}
.refine-edits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Active / Archive tabs (sit between the stats line and the lists) */
.refine-edits-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 12px;
  border-bottom: 1px solid var(--air-line, #e6e6e0);
}
.refine-edits-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #5a6273;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.refine-edits-tab:hover { color: #1c1c1c; }
.refine-edits-tab.is-active {
  color: var(--air-accent, #1c1c1c);
  border-bottom-color: var(--air-accent, #1c1c1c);
}
.refine-edits-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(0,0,0,0.06);
  font-size: 11px;
  font-weight: 600;
  color: inherit;
}
.refine-edits-tab.is-active .refine-edits-tab-count {
  background: rgba(0,0,0,0.10);
}

/* Caption — the one-line plain-English explanation above each diff. */
.refine-edit-card-caption {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #1c1c1c;
  font-weight: 500;
  margin: 6px 0 8px;
}
.refine-edit-card-caption-source {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a8a82;
  vertical-align: middle;
}

/* Collapsible diff (hidden by default in archive view to keep scan-density high) */
.refine-edit-diff-collapse {
  margin-top: 4px;
}
.refine-edit-diff-collapse > summary {
  cursor: pointer;
  font-size: 11px;
  color: #5a6273;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.refine-edit-diff-collapse > summary::-webkit-details-marker { display: none; }
.refine-edit-diff-collapse > summary::before {
  content: '▸';
  font-size: 9px;
  transition: transform 120ms ease;
  display: inline-block;
}
.refine-edit-diff-collapse[open] > summary::before { transform: rotate(90deg); }
.refine-edit-diff-collapse[open] > summary { margin-bottom: 6px; }

/* ─── Rounds history panel ──────────────────────────────────────────── */
.refine-rounds {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--air-line, #e6e6e0);
  border-radius: 12px;
  background: #fcfcfa;
}
.refine-rounds-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.refine-rounds-title {
  font-size: 13px;
  font-weight: 600;
  color: #1c1c1c;
  letter-spacing: 0.01em;
}
.refine-rounds-hint {
  font-size: 11px;
  color: #8a8a82;
}
.refine-rounds-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: round;
}
.refine-round {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.refine-round:hover {
  border-color: var(--air-line, #e6e6e0);
  background: #faf9f4;
}
.refine-round.is-active {
  border-color: var(--air-accent, #1c1c1c);
  background: #fff;
}
.refine-round.is-active::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--air-accent, #1c1c1c);
  border-radius: 8px 0 0 8px;
}
.refine-round-num {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #5a6273;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 3px 0;
  letter-spacing: 0.02em;
}
.refine-round.is-active .refine-round-num {
  color: #fff;
  background: var(--air-accent, #1c1c1c);
}
.refine-round-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.refine-round-instruction {
  font-size: 13px;
  color: #1c1c1c;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.refine-round-meta {
  font-size: 11px;
  color: #8a8a82;
  margin-top: 1px;
}
.refine-round-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6273;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
}
.refine-round.is-active .refine-round-tag {
  color: #0c8a3e;
  background: rgba(12, 138, 62, 0.10);
}
.refine-round-action {
  font-size: 11px;
  font-weight: 600;
  color: #5a6273;
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.refine-round:hover .refine-round-action {
  border-color: var(--air-line, #e6e6e0);
}
.refine-round.is-active .refine-round-action {
  opacity: 0;
  pointer-events: none;
}

/* Per-round LLM summary — owned by each round (Kenneth 2026-05-25).
   The active round gets the green tint (matches the old floating
   appliedBanner colour); inactive rounds use a muted grey so they're
   present but not shouty. */
.refine-round-summary {
  display: block;
  font-size: 12px;
  color: #5a6273;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.03);
  line-height: 1.45;
  white-space: normal;          /* override -instruction nowrap inheritance */
  overflow: visible;
  text-overflow: clip;
}
.refine-round.is-active .refine-round-summary {
  color: #0c6b35;
  background: rgba(12, 138, 62, 0.10);
}

/* "Versions" variant — positioned at top of refine block, more prominent
   than the bottom-of-block default. Removes the top-margin since the
   surrounding refine-run-row already provides spacing. */
.refine-rounds--versions {
  margin-top: 12px;
  margin-bottom: 12px;
}
.refine-rounds--versions .refine-rounds-title::before {
  content: '⌘';
  margin-right: 6px;
  opacity: 0.45;
}
.refine-rounds--versions .refine-round {
  grid-template-columns: 24px 1fr auto auto;
  align-items: start;           /* let the summary stack under meta cleanly */
}
.refine-rounds--versions .refine-round-num,
.refine-rounds--versions .refine-round-tag,
.refine-rounds--versions .refine-round-action {
  margin-top: 4px;              /* visually anchor to the instruction line */
}

/* Final summary recap — bulleted list of plain-English changes */
.refine-summary-bullets {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #1c1c1c;
}
.refine-summary-bullets li { margin: 2px 0; }

/* Per-edit card */
.refine-edit-card {
  position: relative;
  padding: 11px 12px 12px;
  border: 1px solid var(--air-line, #e6e6e0);
  border-radius: 10px;
  background: #fff;
  transition: border-color 180ms ease, opacity 180ms ease;
  overflow: hidden;
}
.refine-edit-card.is-approved {
  border-color: rgba(12, 138, 62, 0.4);
  background: linear-gradient(to right, rgba(12, 138, 62, 0.04), #fff);
}
.refine-edit-card.is-rejected {
  border-color: rgba(122, 122, 122, 0.4);
  background: rgba(0, 0, 0, 0.025);
  opacity: 0.7;
}
.refine-edit-card.is-no-match {
  border-color: rgba(197, 13, 13, 0.4);
  background: rgba(197, 13, 13, 0.03);
}

.refine-edit-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--air-fg-mute, #5a6273);
}
.refine-edit-card-id {
  font-weight: 600;
  color: var(--air-fg, #0b1020);
}
.refine-edit-card-status {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.refine-edit-card-status.ready    { background: rgba(0, 190, 201, 0.15); color: #007a83; }
.refine-edit-card-status.approved { background: rgba(12, 138, 62, 0.15); color: #0c8a3e; }
.refine-edit-card-status.rejected { background: rgba(122, 122, 122, 0.15); color: #5a6273; }
.refine-edit-card-status.no-match { background: rgba(197, 13, 13, 0.12); color: #c50d0d; }

.refine-edit-card-countdown {
  margin-left: auto;
  font-size: 11px;
  color: var(--air-fg-mute, #5a6273);
}
.refine-edit-card-countdown.is-counting {
  color: #c4811a;
  font-weight: 600;
}

.refine-edit-diff {
  font-family: 'Fira Code', 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fafaf7;
  border: 1px solid rgba(0, 0, 0, 0.04);
  max-height: 240px;
  overflow-y: auto;
}
.refine-edit-diff .seg-eq  { color: var(--air-fg-mute, #5a6273); }
.refine-edit-diff .seg-del { background: rgba(197, 13, 13, 0.10); color: #8b0a0a; text-decoration: line-through; padding: 0 2px; }
.refine-edit-diff .seg-ins { background: rgba(12, 138, 62, 0.10); color: #0c5b2a; padding: 0 2px; }

.refine-edit-card-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.refine-edit-card-actions .air-btn-sm { font-size: 12px; padding: 4px 10px; }

.refine-edit-card.is-pending::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: var(--countdown-fill, 100%);
  background: linear-gradient(90deg, #f7c948, #fb8b24);
  transition: width 200ms linear;
}

/* ────────────────────────────────────────────────────────────────────
   Refine mode block (Kenneth UAT redesign):
     [Stage 1 ▼]  [⚡ Flash ⇆ 🧠 Think]  [Stage 2 ▼]
   Standalone container (NOT a child of any flex-wrap parent — that was the
   bug causing the three slots to ladder/stack). Lives BETWEEN the refine
   <details> block above and the action row below.
   ──────────────────────────────────────────────────────────────────── */
.refine-mode-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
  width: 100%;
  margin: 14px 0 12px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}
/* Stage 1 (planner) + Stage 2 (executor/model) selectors are hidden per
   Kenneth 2026-05-28 — Flash/Think toggle stays; model picks fall back to
   the HTML-default option values (Opus 4.7 / Sonnet 4.6), which is what
   the admin-default-hydration code in app.js then refines further. */
.refine-mode-block .refine-stage-pick {
  display: none !important;
}
.refine-mode-block .refine-mode-toggle {
  flex: 0 0 auto;
}
.refine-stage-pick {
  flex: 1 1 200px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.refine-stage-pick .air-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
}
.refine-stage-pick-emoji { font-size: 14px; line-height: 1; }
.refine-stage-pick-hint {
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  margin-left: auto;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.refine-stage-pick .air-input {
  font-size: 13px;
  width: 100%;
}
.refine-stage-pick.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.refine-stage-pick.is-disabled .air-input { cursor: not-allowed; }

/* Mode toggle group — Flash (left) and Think (right) labels flank the
   iOS-style switch. Both labels always visible; active side bolded with
   the brand accent color. */
.refine-mode-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  cursor: pointer;
  height: 38px;
  align-self: flex-end;
  /* Vertical-align the toggle with the pickers (which include a label above).
     The label adds ~18px of height + 4px gap, so push the toggle down by
     matching the picker baseline. */
  margin-bottom: 0;
}
.refine-mode-toggle-side {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.14s ease, font-weight 0.14s ease;
  white-space: nowrap;
}
/* When toggle OFF (Flash active): Flash bolded blue, Think muted */
.refine-mode-toggle:has(input:not(:checked)) .refine-mode-toggle-flash {
  color: rgb(40, 90, 150);
  font-weight: 700;
}
/* When toggle ON (Think active): Think bolded violet, Flash muted */
.refine-mode-toggle:has(input:checked) .refine-mode-toggle-think {
  color: rgb(120, 70, 220);
  font-weight: 700;
}
/* Alpha badge — small uppercase pill next to "Think" label, signalling
   experimental status. Stays visible regardless of toggle state (on or off)
   so users see "alpha" even before they flip into Think mode. Uses amber
   so it reads as a caution but doesn't fight the green/violet active states. */
.refine-mode-alpha-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(140, 80, 10);
  background: rgba(245, 180, 60, 0.22);
  border: 1px solid rgba(200, 140, 30, 0.45);
  border-radius: 4px;
  line-height: 1.2;
  vertical-align: middle;
}
/* When Think is muted (Flash active), dim the badge with it so it doesn't
   shout from a faded label. */
.refine-mode-toggle:has(input:not(:checked)) .refine-mode-alpha-badge {
  opacity: 0.55;
}

@media (max-width: 720px) {
  .refine-mode-block {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .refine-mode-block .refine-stage-pick {
    flex: 1 1 100%;
    width: 100%;
  }
  .refine-mode-block .refine-mode-toggle {
    align-self: center;
    width: auto;
  }
}

/* Admin: Think defaults panel uses same grid as rate-limit row */
.admin-llm-think-group {
  margin-top: 12px;
}
.admin-llm-think-group select.air-input {
  font-size: 13px;
}

/* ────────────────────────────────────────────────────────────────────
   Plan-preview modal (Day 2) — Think mode operator approval surface
   Matches refine-preview-modal patterns for visual consistency.
   ──────────────────────────────────────────────────────────────────── */
.think-plan-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* [hidden] attribute MUST win over class display:flex.
   Browser default [hidden]{display:none} loses to any explicit display rule
   on a class — caught the modal opening on page-load.
   See references/ui-css-gotchas-and-verification.md for the rule. */
.think-plan-modal[hidden] { display: none !important; }
.think-plan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.think-plan-frame {
  position: relative;
  background: white;
  border-radius: 18px;
  width: 100%;
  max-width: 820px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.think-plan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.think-plan-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.think-plan-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.4;
}
.think-plan-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  background: rgba(120, 70, 220, 0.04);
  border-bottom: 1px solid rgba(120, 70, 220, 0.08);
}
.think-plan-meta-row { line-height: 1.4; }
.think-plan-meta-row strong { color: rgba(0, 0, 0, 0.85); }

.think-plan-warnings,
.think-plan-failures {
  padding: 10px 24px;
  font-size: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.think-plan-warnings {
  background: rgba(255, 200, 50, 0.08);
  color: rgb(140, 90, 0);
}
.think-plan-failures {
  background: rgba(220, 70, 70, 0.06);
  color: rgb(150, 30, 30);
}
.think-plan-warnings strong,
.think-plan-failures strong { font-weight: 700; }
.think-plan-warnings ul,
.think-plan-failures ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.think-plan-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.think-plan-edit {
  display: grid;
  grid-template-columns: 28px auto 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: white;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.think-plan-edit:hover {
  border-color: rgba(120, 70, 220, 0.3);
}
.think-plan-edit.is-disabled {
  background: rgba(220, 70, 70, 0.03);
  border-color: rgba(220, 70, 70, 0.15);
  opacity: 0.7;
}
.think-plan-edit .think-plan-edit-checkbox {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
}
.think-plan-edit-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 1px;
}
.think-plan-edit-kind.replace        { background: rgba(60, 130, 200, 0.12);  color: rgb(40, 90, 150); }
.think-plan-edit-kind.insert_before,
.think-plan-edit-kind.insert_after   { background: rgba(12, 138, 62, 0.12);   color: rgb(8, 100, 45); }
.think-plan-edit-kind.delete         { background: rgba(220, 70, 70, 0.12);   color: rgb(150, 30, 30); }
.think-plan-edit-kind.transform      { background: rgba(120, 70, 220, 0.12);  color: rgb(80, 50, 160); }
.think-plan-edit-body {
  min-width: 0;
}
.think-plan-edit-intent {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-word;
}
.think-plan-edit-rationale {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.45;
  margin-bottom: 6px;
}
.think-plan-edit-anchor {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.03);
  padding: 4px 8px;
  border-radius: 4px;
  word-break: break-all;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.think-plan-edit-constraints {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 4px;
}
.think-plan-edit-constraints ul {
  margin: 2px 0 0;
  padding-left: 16px;
}
.think-plan-edit-failure {
  font-size: 11px;
  color: rgb(180, 40, 40);
  margin-top: 4px;
  font-weight: 500;
}

.think-plan-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}
.think-plan-selectall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.think-plan-counts {
  flex: 1;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  text-align: right;
  margin-right: 8px;
}
@media (max-width: 640px) {
  .think-plan-modal { padding: 8px; }
  .think-plan-frame { max-height: calc(100dvh - 16px); border-radius: 12px; }
  .think-plan-header { padding: 14px 16px 10px; }
  .think-plan-meta, .think-plan-warnings, .think-plan-failures { padding: 8px 16px; }
  .think-plan-list { padding: 10px 12px; }
  .think-plan-footer {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .think-plan-counts {
    flex: 1 1 100%;
    order: -1;
    text-align: left;
    margin-right: 0;
  }
}

/* ─── Custom checkboxes inside the plan-preview modal ──────────────────
   Replace native (Windows 95 chrome) with a rounded box that matches the
   rest of the panel's visual language. Violet on check for Think-mode brand
   consistency. Disabled state (failed edits) reads as muted grey + line. */
.think-plan-modal input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  background: white;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
  flex-shrink: 0;
  vertical-align: middle;
}
.think-plan-modal input[type="checkbox"]:hover:not(:disabled) {
  border-color: rgba(120, 70, 220, 0.55);
}
.think-plan-modal input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(120, 70, 220, 0.4);
  outline-offset: 2px;
}
.think-plan-modal input[type="checkbox"]:checked {
  background: rgba(120, 70, 220, 0.95);
  border-color: rgba(120, 70, 220, 0.95);
}
.think-plan-modal input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.think-plan-modal input[type="checkbox"]:indeterminate {
  background: rgba(120, 70, 220, 0.95);
  border-color: rgba(120, 70, 220, 0.95);
}
.think-plan-modal input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 10px;
  height: 2px;
  background: white;
  border-radius: 1px;
}
.think-plan-modal input[type="checkbox"]:disabled {
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  opacity: 0.6;
}
.think-plan-modal input[type="checkbox"]:active:not(:disabled) {
  transform: scale(0.92);
}

/* ── Partner-page chrome toggles (Step 3 §Branding tail) ───────────────────
 * Three iOS-style switches: comments-pill / WhatsApp / LinkedIn-nudge.
 * Reuses the .refine-thinking-switch primitive (already shipped) so the
 * visuals match the Extended-thinking toggle pattern users already know.
 * Container styles below just give the group its own card + tidy spacing.
 * Wired in app.js → state.chrome → POST /api/carnegie/deploy { chrome }.
 * Kenneth 2026-05-23.
 */
.create-chrome-toggles {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--air-border, rgba(0,0,0,0.08));
  border-radius: 14px;
  background: var(--air-surface-soft, #f6f4ec);
}
.create-chrome-toggles-header {
  margin-bottom: 10px;
}
.create-chrome-toggles-header .air-label {
  margin: 0 0 2px;
  display: block;
}
.create-chrome-toggles-header .air-help {
  display: block;
  margin: 0;
}
.create-chrome-toggles-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Subfield under a chrome toggle — currently used by the WhatsApp number
 * input. Indented to match the visual alignment of the toggle label, and
 * given a tighter vertical rhythm so it reads as part of the toggle row. */
.create-chrome-subfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 8px 12px;
  padding: 0 12px;
  border-left: 2px solid var(--air-border, rgba(0,0,0,0.08));
  transition: opacity 0.15s ease;
}
.create-chrome-subfield .air-label {
  font-size: 12px;
  font-weight: 500;
  margin: 0;
}
.create-chrome-subfield .air-input {
  width: 100%;
  max-width: 320px;
  font-variant-numeric: tabular-nums;
}
.create-chrome-subfield .air-help {
  font-size: 11px;
  opacity: 0.7;
}
/* Override .refine-thinking-inline's pill-ish look — here each toggle is a
 * wide, full-width row, label left + switch right, like iOS Settings. */
.create-chrome-toggle.refine-thinking-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}
.create-chrome-toggle.refine-thinking-inline:hover {
  background: var(--air-surface, #efece2);
  border-color: var(--air-border, rgba(0,0,0,0.06));
}
.create-chrome-toggle .refine-thinking-label {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--air-text, #0b1020);
}

/* ─── Summary card (Section 1, always visible) ────────────────────────────
   Single panel that shows Attio deal context + previous Carnegie pages
   (always), with an extra Access Summary block on top in edit mode.
   See create/index.html#f-summary-card. */

.create-summary-card {
  display: block;
  margin-top: 4px;
  /* The card has no outer border — its children (.create-access-summary
     and .create-deal-summary) own the visual frame so the two sub-blocks
     can independently show/hide and adopt the proper data-state styling
     without leaving an empty bordered shell behind. */
}
.create-summary-card > .air-label {
  display: block;
  margin-bottom: 6px;
}

/* The access-summary sub-block already had its own card styling; keep it
   but trim the bottom margin when it sits above the deal-summary so the
   two read as one card with a divider rather than two stacked cards. */
.create-summary-card #f-allow-edit-mode:not([hidden]) + .create-deal-summary {
  margin-top: 8px;
}
.create-summary-card .create-access-help { display: block; margin-top: 4px; }

/* ─── Deal Summary card (Section 1, after partner-site URL) ──────────────
   Renders Attio deal context + Carnegie system signals once the user
   picks a partner. Empty/loading/filled/error states all share the same
   container (#f-deal-summary) and switch via data-state. */

.create-deal-summary {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius-md);
  background: var(--air-surface);
  color: var(--air-text-primary);
  font-size: 14px;
  line-height: 1.5;
  min-height: 56px;
}
.create-deal-summary[data-state="empty"],
.create-deal-summary[data-state="no-match"] {
  color: var(--air-text-secondary);
  font-style: italic;
  background: transparent;
  border-style: dashed;
}
.create-deal-summary[data-state="loading"] {
  color: var(--air-text-secondary);
  position: relative;
}
.create-deal-summary[data-state="loading"]::after {
  content: '';
  position: absolute; right: 14px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid var(--air-border);
  border-top-color: var(--air-text-primary);
  border-radius: 50%;
  animation: cds-spin 0.8s linear infinite;
}
@keyframes cds-spin { to { transform: rotate(360deg); } }

/* Header line: deal name + chips for stage/priority/vertical + link to Attio. */
.cds-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cds-head-name {
  font-weight: 600;
  font-size: 15px;
  margin-right: auto;
}
.cds-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--air-surface-alt, #f4f4f5);
  font-size: 12px;
  color: var(--air-text-secondary);
  white-space: nowrap;
}
.cds-chip--priority-high { background: #fee2e2; color: #991b1b; }
.cds-chip--priority-medium { background: #fef3c7; color: #92400e; }
.cds-chip--priority-low { background: #e0f2fe; color: #075985; }
.cds-link {
  font-size: 12px;
  color: var(--air-text-link, #2563eb);
  text-decoration: none;
  white-space: nowrap;
}
.cds-link:hover { text-decoration: underline; }

/* Meta row: owner, last-activity, etc. small grey line. */
.cds-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--air-text-secondary);
  margin-bottom: 12px;
}
.cds-meta-item strong { font-weight: 600; color: var(--air-text-primary); }

/* Section headings inside the summary card. */
.cds-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--air-border);
}
.cds-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.cds-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--air-text-secondary);
  margin: 0 0 8px;
}

/* Notes list. */
.cds-notes { list-style: none; padding: 0; margin: 0; }
.cds-note {
  padding: 8px 0;
  border-bottom: 1px dashed var(--air-border);
}
.cds-note:last-child { border-bottom: 0; }
.cds-note-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.cds-note-title {
  font-weight: 600;
  font-size: 13px;
}
.cds-note-title-empty { color: var(--air-text-secondary); font-style: italic; font-weight: 400; }
.cds-note-date { font-size: 11px; color: var(--air-text-secondary); margin-left: auto; }
.cds-note-snippet {
  font-size: 13px;
  color: var(--air-text-secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cds-note-title {
  /* Allow the title text to wrap when it's a long URL or no-space string */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  flex: 1 1 auto;
}
.cds-note-head {
  /* Lets the title shrink instead of pushing the date out of the row */
  min-width: 0;
}
.cds-note-meeting-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #075985;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Past pages list. */
.cds-pages { list-style: none; padding: 0; margin: 0; }
.cds-page {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
}
.cds-page-slug {
  font-family: var(--air-font-mono, ui-monospace, SFMono-Regular, monospace);
  color: var(--air-text-primary);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cds-page-slug:hover { text-decoration: underline; }
.cds-page-meta {
  font-size: 11px;
  color: var(--air-text-secondary);
  white-space: nowrap;
}

/* ─── Master Access additions (2026-05-30) ─────────────────────────── */
/* Tasks badge (in the meta row) */
.cds-meta-item--tasks {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #075985;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.cds-meta-item--tasks.cds-meta-item--overdue {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Company block */
.cds-company-bits {
  font-size: 13px;
  color: var(--air-text-primary);
  margin-bottom: 6px;
}
.cds-company-desc {
  font-size: 13px;
  color: var(--air-text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}
.cds-company-social {
  font-size: 12px;
  color: var(--air-text-secondary);
}

/* Contacts (People) block */
.cds-people { list-style: none; padding: 0; margin: 0; }
.cds-person {
  padding: 6px 0;
  border-bottom: 1px solid var(--air-border-subtle, #f1f5f9);
  font-size: 13px;
}
.cds-person:last-child { border-bottom: 0; }
.cds-person-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.cds-person-name {
  font-weight: 600;
  color: var(--air-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cds-person-title {
  font-size: 12px;
  color: var(--air-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.cds-person-link { margin-left: auto; font-size: 12px; opacity: 0.7; }
.cds-person-link:hover { opacity: 1; }
.cds-person-sub {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  color: var(--air-text-secondary);
  margin-top: 2px;
}
.cds-person-email {
  font-family: var(--air-font-mono, ui-monospace, SFMono-Regular, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cds-person-when { margin-left: auto; }
.cds-section-more {
  font-size: 11px;
  color: var(--air-text-secondary);
  font-style: italic;
  padding-top: 4px;
}
.cds-empty { color: var(--air-text-secondary); font-style: italic; }
/* ─── /Master Access additions ─────────────────────────────────────── */

/* Source / error hint shown next to the "Summary" label. */
.create-deal-summary-source {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  margin-left: 6px;
}
.create-deal-summary-source[data-tone="warning"] { color: #b45309; }

/* ─── Commercial sense-check ────────────────────────────────────────────────
   Section that sits at the bottom of Step 2's refine panel. Visible only for
   proposal / term-sheet pages where the user is owner or super-admin. Built
   to feel like a peer-section of refine (same surface, same spacing). */
.commercial-senscheck {
  margin-top: 20px;
  padding: 20px;
  background: var(--air-surface-cream, #faf8f3);
  border: 1px solid var(--air-border, #e2dccc);
  border-radius: 12px;
}
.commercial-senscheck-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.commercial-senscheck-head-text { flex: 1 1 auto; min-width: 0; }
.commercial-senscheck-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--air-text, #1a2121);
  display: flex; align-items: center; gap: 8px;
}
.commercial-senscheck-badge { font-size: 18px; }
.commercial-senscheck-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--air-text-muted, #5a5a52);
  line-height: 1.45;
}
.commercial-senscheck-sub a { color: inherit; text-decoration: underline; }

/* Partner constraints textarea (Kenneth 2026-05-24) — lives inside the
   sense-check block, NOT in Step 1. Only relevant when running sense-check.
   Persists to localStorage keyed by slug. */
.commercial-senscheck-prefs {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 10px;
}
.commercial-senscheck-prefs .air-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  margin-bottom: 6px;
}
.commercial-senscheck-prefs-input {
  width: 100%;
  resize: vertical;
  min-height: 70px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}

/* Run row — button + optional reasoning-included hint. */
.commercial-senscheck-run-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.commercial-senscheck-reasoning-hint {
  font-size: 12px;
  color: var(--air-text-muted, #5a5a52);
  background: rgba(91, 33, 182, 0.08);
  color: #5b21b6;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 500;
}
.commercial-senscheck-run {
  flex: 0 0 auto;
  position: relative;
  min-width: 160px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.commercial-senscheck-run.is-busy .commercial-senscheck-run-spin {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: csc-spin 0.8s linear infinite;
}
.commercial-senscheck-run-spin { display: none; }
@keyframes csc-spin { to { transform: rotate(360deg); } }

.commercial-senscheck-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fef1ec; border: 1px solid #f3c1ad; color: #8a3408;
  border-radius: 8px;
  font-size: 13px;
}

.commercial-senscheck-result { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }

.commercial-senscheck-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--air-text-muted, #5a5a52);
  font-family: var(--air-font-mono, "Fira Code", monospace);
}
.commercial-senscheck-meta-ok   { color: #15803d; font-weight: 600; }
.commercial-senscheck-meta-warn { color: #b45309; font-weight: 600; }

.commercial-senscheck-summary {
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--air-border, #e2dccc);
  border-radius: 10px;
}
.commercial-senscheck-summary-label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--air-text-muted, #5a5a52);
  margin-bottom: 4px;
}
.commercial-senscheck-summary p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--air-text, #1a2121); }

.commercial-senscheck-verdicts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px;
}
.commercial-senscheck-verdict-card {
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--air-border, #e2dccc);
  border-radius: 10px;
}
.commercial-senscheck-verdict-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.commercial-senscheck-verdict-head h4 {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--air-text, #1a2121);
}
.commercial-senscheck-verdict-card dl { margin: 0; display: grid; gap: 6px; font-size: 12px; }
.commercial-senscheck-verdict-card dt {
  font-weight: 600; color: var(--air-text-muted, #5a5a52);
  letter-spacing: 0.02em;
}
.commercial-senscheck-verdict-card dd {
  margin: 0 0 4px; color: var(--air-text, #1a2121); line-height: 1.4;
}
.commercial-senscheck-mismatch-list { margin: 4px 0 0; padding-left: 18px; }
.commercial-senscheck-mismatch-list li { margin-bottom: 2px; }

.commercial-senscheck-verdict {
  display: inline-block; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.commercial-senscheck-verdict--ok   { background: #e7f5ec; color: #15803d; }
.commercial-senscheck-verdict--warn { background: #fef5dc; color: #92560a; }
.commercial-senscheck-verdict--bad  { background: #fde8e1; color: #c0420f; }

.commercial-senscheck-section { display: flex; flex-direction: column; gap: 8px; }
.commercial-senscheck-section-title {
  margin: 4px 0 0; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--air-text-muted, #5a5a52);
}

.commercial-senscheck-risks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.commercial-senscheck-risk {
  padding: 10px 12px;
  background: #fff; border: 1px solid var(--air-border, #e2dccc);
  border-left: 4px solid var(--air-border, #e2dccc);
  border-radius: 8px;
  font-size: 13px;
}
.commercial-senscheck-risk--high   { border-left-color: #c0420f; }
.commercial-senscheck-risk--medium { border-left-color: #d97706; }
.commercial-senscheck-risk--low    { border-left-color: #4d7c0f; }
.commercial-senscheck-risk--empty  { text-align: center; color: var(--air-text-muted, #5a5a52); font-style: italic; }

.commercial-senscheck-risk-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.commercial-senscheck-risk-sev {
  display: inline-block; padding: 2px 7px;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.commercial-senscheck-risk-sev--high   { background: #fde8e1; color: #c0420f; }
.commercial-senscheck-risk-sev--medium { background: #fef0d2; color: #92560a; }
.commercial-senscheck-risk-sev--low    { background: #e9f3d4; color: #4d7c0f; }
.commercial-senscheck-risk-area {
  display: inline-block; padding: 2px 7px;
  background: #f1ede2; color: #4d4d44;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.commercial-senscheck-risk-finding { font-weight: 600; color: var(--air-text, #1a2121); margin-bottom: 2px; }
.commercial-senscheck-risk-why { color: var(--air-text-muted, #5a5a52); line-height: 1.4; }
.commercial-senscheck-risk-evidence { margin-top: 6px; font-size: 12px; }
.commercial-senscheck-risk-evidence summary { cursor: pointer; color: var(--air-text-muted, #5a5a52); }
.commercial-senscheck-risk-evidence blockquote {
  margin: 6px 0 0; padding: 6px 10px;
  border-left: 3px solid var(--air-border, #e2dccc);
  color: #555; font-style: italic; font-size: 12px;
}

.commercial-senscheck-revision {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--air-border, #e2dccc);
  border-radius: 10px;
}
.commercial-senscheck-revision-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.commercial-senscheck-revision-field-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--air-text-muted, #5a5a52); margin-bottom: 2px;
}
.commercial-senscheck-revision-field-value {
  font-size: 13px; color: var(--air-text, #1a2121); line-height: 1.4;
}
.commercial-senscheck-diff summary,
.commercial-senscheck-fullrewrite summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--air-text-muted, #5a5a52);
}
.commercial-senscheck-diff-table {
  width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px;
}
.commercial-senscheck-diff-table th,
.commercial-senscheck-diff-table td {
  border: 1px solid var(--air-border, #e2dccc);
  padding: 6px 8px; text-align: left; vertical-align: top;
}
.commercial-senscheck-diff-table th {
  background: #f7f4ea; font-weight: 600; color: var(--air-text-muted, #5a5a52);
}
.commercial-senscheck-fullrewrite-pre {
  margin: 8px 0 0; padding: 10px;
  background: #1a2121; color: #f0ead6;
  border-radius: 6px; max-height: 360px; overflow: auto;
  font-family: var(--air-font-mono, "Fira Code", monospace);
  font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

.commercial-senscheck-revision-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.commercial-senscheck-preview {
  padding: 14px 16px;
  background: #fffdf5; border: 1px dashed var(--air-border, #e2dccc);
  border-radius: 10px;
  font-size: 14px; line-height: 1.55; color: var(--air-text, #1a2121);
}
.commercial-senscheck-preview h2,
.commercial-senscheck-preview h3,
.commercial-senscheck-preview h4 { margin: 14px 0 6px; }
.commercial-senscheck-preview h2:first-child,
.commercial-senscheck-preview h3:first-child,
.commercial-senscheck-preview h4:first-child { margin-top: 0; }
.commercial-senscheck-preview ul,
.commercial-senscheck-preview ol { padding-left: 22px; }
.commercial-senscheck-preview p  { margin: 6px 0; }
.commercial-senscheck-md-table {
  width: 100%; border-collapse: collapse; margin: 8px 0;
  font-size: 13px;
}
.commercial-senscheck-md-table th,
.commercial-senscheck-md-table td {
  border: 1px solid var(--air-border, #e2dccc);
  padding: 6px 8px; text-align: left;
}
.commercial-senscheck-md-table th { background: #f7f4ea; font-weight: 600; }

@media (max-width: 640px) {
  .commercial-senscheck-head { flex-direction: column; }
  .commercial-senscheck-run { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Sense-check partner-constraints overlay modal (Kenneth 2026-05-25).
 *
 * Body-level overlay so it lifts above page chrome. Must declare its own
 * font-family because body-appended elements don't inherit from .air-app
 * (carnegie-design-principles rule #12). [hidden] guard with !important
 * beats the base `display: flex` declaration (rule #10). All surfaces
 * use var(--air-*) tokens so dark mode flips automatically (rule #11).
 * ════════════════════════════════════════════════════════════════════════ */

.csc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: var(--air-font-body, "DM Sans", system-ui, -apple-system, sans-serif);
  color: var(--air-color-text-primary, #0b1020);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.csc-modal[hidden] { display: none !important; }

.csc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 32, 0.55);
  cursor: pointer;
}

.csc-modal-sheet {
  position: relative;
  background: var(--c-surface, var(--air-surface-cream, #fbf8f3));
  border: 1px solid var(--air-divider, rgba(11, 16, 32, 0.1));
  border-radius: var(--r-card, 16px);
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(11, 16, 32, 0.25);
  overflow: hidden;
}

.csc-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--air-divider, rgba(11, 16, 32, 0.08));
}
.csc-modal-head-text { flex: 1; min-width: 0; }
.csc-modal-head h2 {
  margin: 0 0 6px;
  font-family: var(--air-font-display, "Playfair Display", "EB Garamond", Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--air-color-text-primary, #0b1020);
}
.csc-modal-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--air-color-text-muted, #5e6473);
}
.csc-modal-sub a {
  color: var(--air-color-text-primary, #0b1020);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.csc-modal-close {
  appearance: none;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--air-color-text-muted, #5e6473);
  padding: 8px 10px;
  margin: -8px -10px 0 0;
  border-radius: 8px;
  min-width: 36px;
  min-height: 36px;
}
.csc-modal-close:hover {
  background: var(--c-surface-soft, rgba(11, 16, 32, 0.05));
  color: var(--air-color-text-primary, #0b1020);
}

.csc-modal-body {
  padding: 16px 24px 8px;
  overflow-y: auto;
}
.csc-modal-textarea {
  /* rule #7: ≥16px font on inputs to prevent iOS Safari focus-zoom */
  font-size: 16px !important;
  width: 100%;
  /* Kenneth 2026-05-25: text was getting cut on the right edge.
   * Root cause: textarea has padding from .air-input but inherited
   * `box-sizing: content-box` from some ancestor (Air design tokens
   * doesn't force border-box globally). Force border-box + max-width
   * so the textarea respects the modal body padding. */
  box-sizing: border-box;
  max-width: 100%;
  display: block;
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
  margin-top: 6px;
}
.csc-modal-reasoning-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--air-color-text-muted, #5e6473);
  padding: 8px 10px;
  background: var(--c-surface-soft, rgba(192, 160, 98, 0.08));
  border-left: 2px solid var(--c-accent, #c0a062);
  border-radius: 4px;
}
.csc-modal-reasoning-hint[hidden] { display: none !important; }

.csc-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--air-divider, rgba(11, 16, 32, 0.08));
  background: var(--c-surface, var(--air-surface-cream, #fbf8f3));
}
.csc-modal-actions .air-btn { min-height: 44px; }
.csc-modal-run-spin { display: none; }
.csc-modal-run[data-busy="true"] .csc-modal-run-label { opacity: 0.6; }
.csc-modal-run[data-busy="true"] .csc-modal-run-spin {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: csc-modal-spin 0.7s linear infinite;
  margin-left: 8px;
}
@keyframes csc-modal-spin { to { transform: rotate(360deg); } }

/* Sense-check trigger button inline with Run (action row) */
.refine-csc-btn { gap: 6px; display: inline-flex; align-items: center; }
.refine-csc-btn[hidden] { display: none !important; }

@media (max-width: 480px) {
  .csc-modal { padding: 0; align-items: stretch; }
  .csc-modal-sheet {
    border-radius: 0;
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
  }
  .csc-modal-actions { flex-direction: column-reverse; }
  .csc-modal-actions .air-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Sense-check legacy inline UI → hidden in favour of overlay modal +
 * AgentRun shell (Kenneth 2026-05-25).
 *
 * The #csc-block container itself stays mounted because the result-render
 * code (renderResult in app.js) still writes summary/verdicts/risks/revision
 * into child nodes. Phase 2.3 will move that rendering into AgentRun
 * Component 2 and then we can delete the block entirely. Until then:
 *   - Hide the duplicate header (intro text matches the modal)
 *   - Hide the inline prefs textarea (lives in the modal now)
 *   - Hide the legacy run-row (button is in the action row next to Run)
 *   - Hide the outer container chrome so the AgentRun panel stands alone
 *   - Result blocks stay visible: they render below the AgentRun and
 *     show the final summary + risks + revision when CFO completes.
 * ════════════════════════════════════════════════════════════════════════ */

.commercial-senscheck > .commercial-senscheck-head,
.commercial-senscheck > .commercial-senscheck-prefs,
.commercial-senscheck > .commercial-senscheck-run-row {
  display: none !important;
}

/* Strip the rounded card chrome from #csc-block — let the AgentRun panel
 * own the visual surface, and the result blocks below render inline. */
#csc-block.commercial-senscheck {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* The result section was nested inside the old card; without the card it
 * needs its own top spacing to breathe under the AgentRun panel. */
.commercial-senscheck-result {
  margin-top: 16px;
}

/* Phase 2.3.1 (Kenneth 2026-05-25 "carbon copy" pass):
 * Hide #csc-result ENTIRELY — every render path now lives inside AgentRun:
 *   - Risks → CFO step OUTPUT (renderStructuredValidator)
 *   - Suggested revision → AgentRun Download / patch-mode edits (Phase C)
 *   - Meta strip → AgentRun byline (tokens/cost/elapsed)
 * Previous `:first-of-type` selector was tag-based not class-based and
 * missed the section divs. This single rule kills the entire legacy block.
 *
 * Keep the DOM mounted so renderResult() can still write into the nodes
 * (avoids null-deref + keeps Copy markdown shortcut functional via JS).
 */
#csc-result {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * Phase 2.3.1 — kill legacy duplicate render surfaces (Kenneth 2026-05-25)
 *
 * Edits and reasoning stream now live INSIDE the AgentRun shell:
 *   - Edits  → executor step OUTPUT (patch mode, renderPatchLog)
 *   - Reasoning → executor step REASONING (<details> ticker)
 *   - Progress bar → AgentRun inline elapsed / token pills
 *
 * Hide the legacy chrome unconditionally. JS still writes into these
 * elements (renderEditCard, updateReasoning) — keep the DOM mounted so
 * we don't have to null-guard the entire flow during the cutover.
 * ════════════════════════════════════════════════════════════════════════ */
#refine-edits,
#llm-stream {
  display: none !important;
}

/* ─── Dropzone "or" divider + Web Designer CTA ─────────────────────────────
   The Generate-with-Web-Designer button sits BELOW the standard upload text,
   inside the dropzone. Clicking the button stops propagation (JS) so the
   dropzone's open-file-picker click doesn't also fire.
*/
.create-dropzone-or {
  display: flex;
  align-items: center;
  gap: var(--air-space-3);
  width: min(280px, 80%);
  margin-top: var(--air-space-2);
  color: var(--air-text-tertiary, var(--air-text-secondary));
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.create-dropzone-or-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--air-divider);
}
.create-dropzone-or-text {
  flex: 0 0 auto;
}
.create-dropzone-wd-btn {
  /* Inherits .air-btn-ghost base styles. We just need to make sure the
     click target is wide enough on mobile (44pt) and the gold ✨ leans in. */
  min-height: 44px;
  padding: 10px 18px;
  gap: 8px;
  font-weight: 600;
}
.create-dropzone-wd-btn:hover {
  background: rgba(192, 160, 98, 0.08);
  border-color: rgba(192, 160, 98, 0.4);
  color: var(--air-text);
}

/* ─── Web Designer Typeform-style modal ────────────────────────────────────
   Body-appended (rule #12 — font-family declared on root). 1 question at a
   time. Three actions: Skip and take out, Skip but keep, Confirm (primary).
*/
.wd-modal {
  position: fixed; inset: 0;
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  /* Rule #12: body-appended modals MUST declare font-family + color. */
  font-family: var(--air-font-body, "DM Sans", system-ui, -apple-system, sans-serif);
  color: var(--air-text, #0b1020);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wd-modal[hidden] { display: none !important; }
.wd-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 16, 32, 0.38);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.wd-modal-card {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  /* [Pass C2] Lock card to a FIXED height so it doesn't jiggle between
     steps (a chips-only step is much shorter than a blocks-grid step).
     Inner .wd-modal-step is the scroll container if any single step
     overflows. */
  height: min(640px, calc(100dvh - 64px));
  display: flex; flex-direction: column;
  background: var(--air-surface, #ffffff);
  border-radius: 18px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 24px 64px rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  /* iOS-style entrance: brief settle, no overshoot */
  transform: translateZ(0);
}
.wd-modal-close {
  position: absolute; top: 12px; right: 14px;
  /* [P1] 44×44 hit area per WCAG 2.5.5 / iOS HIG. Visual glyph stays
     28px via font-size; the box is what grows. */
  width: 44px; height: 44px;
  border: 0; background: transparent;
  font-size: 28px; line-height: 1;
  color: var(--air-text-secondary);
  cursor: pointer;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.wd-modal-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--air-text); }

/* [Pass C] Progress: thin completion bar above the dot row. */
.wd-modal-progress-wrap {
  padding: 18px 24px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.wd-progress-bar {
  position: relative;
  height: 3px;
  background: var(--air-divider);
  border-radius: 999px;
  overflow: hidden;
}
.wd-progress-bar-fill {
  position: absolute; inset: 0;
  width: 0%;
  background: var(--air-text, #0b1020);
  border-radius: 999px;
  transition: width 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.wd-modal-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.wd-progress-dot {
  /* [P1] Visual 28×28 stays the same via inner pseudo. Outer button is
     44×44 for hit-target; ::before paints the visible disc centred. */
  position: relative;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--air-text-tertiary, #8a93a8);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 160ms ease;
  padding: 0;
}
.wd-progress-dot::before {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--air-divider);
  background: transparent;
  transition: background 160ms ease, border-color 160ms ease;
  z-index: 0;
}
.wd-progress-dot > * { position: relative; z-index: 1; }
.wd-progress-dot.is-current {
  color: var(--air-text);
}
.wd-progress-dot.is-current::before {
  /* [P2] Bump amber tint so active dot reads on cream surface. */
  background: rgba(192, 160, 98, 0.22);
  border-color: rgba(192, 160, 98, 0.55);
}
.wd-progress-dot.is-done {
  color: var(--air-text-on-colour, #fff);
}
.wd-progress-dot.is-done::before {
  background: var(--air-text);
  border-color: var(--air-text);
}
.wd-progress-dot.is-skip-keep {
  color: #8a6f3a;
}
.wd-progress-dot.is-skip-keep::before {
  background: rgba(192, 160, 98, 0.18);
  border-color: rgba(192, 160, 98, 0.45);
}
.wd-progress-dot.is-skip-out {
  color: var(--air-text-tertiary);
  text-decoration: line-through;
}
.wd-progress-dot.is-skip-out::before {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--air-divider);
}
/* [P1] Dots 2–7 are nav-clickable (handler at _web-designer-modal.js:475).
   Telegraph that with subtle hover + focus-visible affordances so the
   user knows they can jump steps. */
.wd-progress-dot:hover::before {
  border-color: rgba(192, 160, 98, 0.55);
  background: rgba(192, 160, 98, 0.08);
}
.wd-progress-dot:focus-visible {
  outline: 2px solid rgba(192, 160, 98, 0.7);
  outline-offset: -10px;
  border-radius: 999px;
}

.wd-modal-step {
  position: relative; /* [P1] anchor for .wd-swipe-hint absolute positioning */
  flex: 1 1 auto;
  padding: 12px 32px 4px;
  overflow-y: auto;
  overflow-x: hidden; /* hide horizontal slide overflow during animations */
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
  overscroll-behavior: contain;
}
.wd-step-num {
  font-size: 12px;
  color: var(--air-text-tertiary, #8a93a8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 8px 0 4px;
}
.wd-step-title {
  font: 700 24px/1.2 var(--air-font-display, "Playfair Display", serif);
  letter-spacing: -0.015em;
  margin: 6px 0 8px;
  color: var(--air-text);
}
.wd-step-help {
  font-size: 14px;
  line-height: 1.5;
  color: var(--air-text-secondary);
  margin: 0 0 18px;
}
.wd-step-body { margin-bottom: 12px; }

.wd-input {
  /* Rule #7: 16px to prevent iOS Safari zoom-on-focus */
  font-size: 16px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--air-border-strong, var(--air-divider));
  border-radius: 10px;
  background: var(--air-surface);
  color: var(--air-text);
  font-family: inherit;
  box-sizing: border-box;
}
.wd-input:focus {
  outline: none;
  border-color: rgba(192, 160, 98, 0.55);
  box-shadow: 0 0 0 3px rgba(192, 160, 98, 0.15);
}
.wd-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.wd-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.wd-chip {
  font: 500 13px/1.2 inherit;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--air-divider);
  background: transparent;
  color: var(--air-text);
  cursor: pointer;
  transition: all 140ms ease;
}
.wd-chip:hover { background: rgba(0, 0, 0, 0.04); }
.wd-chip.is-on {
  background: var(--air-text);
  color: var(--air-text-on-colour, #fff);
  border-color: var(--air-text);
}

.wd-modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--air-divider);
  background: var(--air-surface);
}
.wd-modal-nav-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wd-modal-nav .air-btn { min-height: 40px; padding: 8px 14px; }
.wd-nav-prev:disabled { opacity: 0.45; cursor: not-allowed; }

/* [R2] "Skip and take out" is destructive (removes section from generated
   page) — render as red text link to match .ctxrules-reset-link pattern,
   breaking the prior 3-ghost-button visual tie. */
.wd-nav-skip-out {
  font: inherit; font-size: 14px; font-weight: 500;
  background: transparent; border: 0; padding: 8px 4px;
  color: var(--air-color-danger, #b3261e);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}
.wd-nav-skip-out:hover { opacity: 0.8; }
.wd-nav-skip-out:focus-visible { outline: 2px solid var(--air-accent, #c0a062); outline-offset: 2px; border-radius: 4px; }

/* Mobile: collapse to vertical, full-width buttons */
@media (max-width: 560px) {
  .wd-modal-card {
    height: calc(100dvh - 24px);
    width: calc(100vw - 16px);
    border-radius: 14px;
  }
  .wd-modal-step { padding: 8px 18px; }
  .wd-step-title { font-size: 20px; }
  .wd-modal-nav { flex-direction: column; align-items: stretch; padding: 12px 16px 16px; }
  /* [P0-5] Plain column — DOM source order already reads Confirm → Skip-keep → Skip-out,
     so visual order matches source order (a11y: SR/keyboard tab order matches paint). */
  .wd-modal-nav-actions { flex-direction: column; gap: 6px; }
  .wd-modal-nav-actions .air-btn { width: 100%; }
  .wd-modal-nav-actions .wd-nav-skip-out { width: 100%; text-align: center; }
  .wd-nav-prev { order: 99; width: 100%; }
}

/* Send-to-Web-Designer trigger button — sits next to Run/Sense-check. */
.refine-wd-btn[hidden] { display: none !important; }   /* rule #10 guard */
.refine-wd-btn:hover {
  background: rgba(192, 160, 98, 0.10);
  border-color: rgba(192, 160, 98, 0.4);
  color: var(--air-text);
}

/* ─── Web Designer agent-run output (custom render) ────────────────────── */
.agentrun-output-streaming {
  padding: 12px;
  font-size: 14px;
  color: var(--air-text-secondary);
}
.agentrun-output-streaming strong { color: var(--air-text); margin-right: 6px; }
.agentrun-output-done {
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.agentrun-output-done-row {
  font-size: 14px; color: var(--air-text-secondary);
}
.agentrun-output-done-row strong {
  color: var(--air-text);
  font-size: 15px;
  margin-right: 6px;
}
.agentrun-output-done-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 480px) {
  .agentrun-output-done-actions { flex-direction: column; }
  .agentrun-output-done-actions .air-btn { width: 100%; }
}

/* ─── Web Designer modal: Category banner ─────────────────────────────── */
.wd-modal-banner {
  padding: 10px 24px;
  border-bottom: 1px solid var(--air-divider);
  font-size: 13px;
  color: var(--air-text-secondary);
  background: rgba(26, 188, 156, 0.06);
}
.wd-banner-row {
  /* [P1] Allow wrap so 'Category: Foo · …' doesn't clip at the left edge
     on 360–375px viewports. word-break catches the long inline <code> too. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  word-break: break-word;
}
.wd-banner-row strong { color: var(--air-text); margin-right: 4px; }
.wd-banner-hint code {
  font: 500 12px/1.2 var(--air-font-mono, ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace);
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--air-text);
  margin-left: 4px;
}
.wd-banner-fallback {
  color: #c9831a;
  margin-left: 4px;
}

/* [P1] One-shot swipe affordance hint — appended to .wd-modal-step on first
   open, removed after ~2.2s. Sits centred under the title to telegraph that
   the body responds to horizontal swipes (gestures wired in JS). */
.wd-swipe-hint {
  position: absolute;
  top: 64px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(192, 160, 98, 0.14);
  color: var(--air-text-secondary, #5a6478);
  font: 500 11px/1 inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  animation: wd-swipe-hint-in 280ms cubic-bezier(0.32, 0.72, 0, 1) 80ms forwards;
  z-index: 3;
}
.wd-swipe-hint.is-fading {
  animation: wd-swipe-hint-out 560ms ease-out forwards;
}
.wd-swipe-hint-chev {
  font-size: 14px;
  line-height: 1;
  color: rgba(192, 160, 98, 0.85);
  animation: wd-swipe-hint-chev 1100ms ease-in-out infinite;
}
.wd-swipe-hint-chev:last-child {
  animation-delay: 180ms;
}
@keyframes wd-swipe-hint-in {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes wd-swipe-hint-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes wd-swipe-hint-chev {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}

/* ─── [Pass C2] iOS-style animations, gestures, action sheet ─────────────
   Apple's standard motion curve: cubic-bezier(0.32, 0.72, 0, 1) — settles
   without overshoot. Used for everything that should feel "platform-native".
*/

@keyframes wd-slide-in-right {
  from { transform: translate3d(40px, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes wd-slide-in-left {
  from { transform: translate3d(-40px, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes wd-card-pop-in {
  from { transform: scale(0.92) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes wd-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wd-sheet-in {
  from { transform: translate(-50%, -42%) scale(0.94); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.wd-modal:not([hidden]) .wd-modal-backdrop {
  animation: wd-backdrop-in 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.wd-modal:not([hidden]) .wd-modal-card {
  animation: wd-card-pop-in 360ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* Step slide animations — slightly slower, with proper easing. */
.wd-modal-step.is-anim-fwd {
  animation: wd-slide-in-right 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
  will-change: transform, opacity;
}
.wd-modal-step.is-anim-back {
  animation: wd-slide-in-left 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
  will-change: transform, opacity;
}

/* Swipe — finger-follow during drag, spring snap-back below threshold. */
.wd-modal-step.is-swiping {
  transform: translate3d(var(--wd-swipe-dx, 0px), 0, 0);
  transition: none;
  will-change: transform;
}
.wd-modal-step.is-swipe-snapback {
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  transform: translate3d(0, 0, 0);
}

/* iOS-style button tap feedback — scale + opacity on press. */
.wd-modal-nav .air-btn,
.wd-nav-skip-out,
.wd-modal-close,
.wd-progress-dot {
  transition: transform 120ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 120ms ease,
              background-color 140ms ease;
}
.wd-modal-nav .air-btn:active,
.wd-nav-skip-out:active,
.wd-modal-close:active,
.wd-progress-dot:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* Reduced-motion: strip everything. */
@media (prefers-reduced-motion: reduce) {
  .wd-modal:not([hidden]) .wd-modal-backdrop,
  .wd-modal:not([hidden]) .wd-modal-card,
  .wd-modal-step.is-anim-fwd,
  .wd-modal-step.is-anim-back,
  .wd-modal-step.is-swipe-snapback,
  .wd-progress-bar-fill,
  .wd-modal-nav .air-btn,
  .wd-nav-skip-out,
  .wd-modal-close,
  .wd-progress-dot,
  .wd-action-sheet,
  .wd-action-sheet-backdrop {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── iOS-style action sheet (replaces the old toast) ────────────────────
   Pattern: full overlay inside the modal card, centered "alert" card with
   title, message, then a stacked button list separated by 1px hairlines.
   Matches UIAlertController defaultStyle.
*/
.wd-action-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 10;
  animation: wd-backdrop-in 200ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.wd-action-sheet-backdrop[hidden] { display: none !important; }

.wd-action-sheet {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(280px, calc(100% - 48px));
  z-index: 11;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  animation: wd-sheet-in 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               var(--air-font-body, system-ui), sans-serif;
}
.wd-action-sheet[hidden] { display: none !important; }
.wd-action-sheet-body {
  padding: 18px 16px 14px;
  text-align: center;
}
.wd-action-sheet-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--air-text, #0b1020);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.wd-action-sheet-msg {
  font-size: 13px;
  line-height: 1.35;
  color: var(--air-text-secondary, rgba(0,0,0,0.6));
  margin: 0;
}
.wd-action-sheet-actions {
  display: flex; flex-direction: column;
  border-top: 0.5px solid rgba(0, 0, 0, 0.12);
}
.wd-action-sheet-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 13px 12px;
  font: 400 17px/1 inherit;
  color: var(--air-link, #007aff);
  cursor: pointer;
  text-align: center;
  border-top: 0.5px solid rgba(0, 0, 0, 0.12);
  transition: background-color 80ms ease;
}
.wd-action-sheet-btn:first-child { border-top: 0; }
.wd-action-sheet-btn:hover { background: rgba(0, 0, 0, 0.04); }
.wd-action-sheet-btn:active { background: rgba(0, 0, 0, 0.08); }
.wd-action-sheet-btn.is-destructive {
  color: #ff3b30; /* iOS systemRed */
}
.wd-action-sheet-btn.is-default {
  font-weight: 600;
}

/* Dark surface override — when --air-surface is dark, flip sheet colors. */
@media (prefers-color-scheme: dark) {
  .wd-action-sheet { background: rgba(36, 36, 38, 0.92); }
  .wd-action-sheet-title { color: #fff; }
  .wd-action-sheet-msg { color: rgba(255, 255, 255, 0.6); }
  .wd-action-sheet-actions,
  .wd-action-sheet-btn { border-top-color: rgba(255, 255, 255, 0.15); }
  .wd-action-sheet-btn:hover { background: rgba(255, 255, 255, 0.06); }
  .wd-action-sheet-btn:active { background: rgba(255, 255, 255, 0.10); }
}



/* ─── 2026-05-26 hero team-of-5 agents (replaces 4-step roadmap) ────
   "A team of:" paragraph + 5 agent pills with monogram avatars. */
.create-hero-team-intro {
  margin: var(--air-space-6) 0 var(--air-space-3);
  text-align: center;
  font: 500 var(--air-text-sm)/1.3 var(--air-font-body);
  color: var(--air-text-muted, rgba(11,16,32,0.6));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.air-app .create-hero-steps--team {
  margin-top: var(--air-space-2);
}
.create-hero-step--agent {
  padding: 6px 18px 6px 6px;
}
.create-hero-avatar {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.create-hero-avatar svg {
  width: 100%; height: 100%;
  display: block;
}
.create-hero-step--agent .create-hero-step-label {
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .create-hero-team-intro {
    margin-top: var(--air-space-5);
    font-size: 11px;
  }
  .create-hero-step--agent {
    padding: 4px 12px 4px 4px;
  }
  .create-hero-avatar {
    width: 24px; height: 24px; flex: 0 0 24px;
  }
}

/* ─── Reviewer annotations panel ──────────────────────────────────────
   Sits above the Versions panel in the refine column. Mirrors the
   refine-rounds visual rhythm but with per-row Approve/Reject buttons
   (replicating the agent-run csc-term-diff UX Kenneth approved). Each
   annotation has stable id so user selections survive re-fetches. */
.refine-annotations {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--air-line, #e6e6e0);
  border-radius: 12px;
  background: #fcfcfa;
}
.refine-annotations-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.refine-annotations-title {
  font-size: 13px;
  font-weight: 600;
  color: #1c1c1c;
  letter-spacing: 0.01em;
}
.refine-annotations-hint {
  font-size: 11px;
  color: #8a8a82;
  flex: 1 1 auto;
  text-align: right;
}
.refine-annotations-refresh {
  background: transparent;
  border: 0;
  color: #8a8a82;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}
.refine-annotations-refresh:hover { background: rgba(0,0,0,0.05); color: #1c1c1c; }
.refine-annotations-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.refine-annotations-empty {
  font-size: 12px;
  color: #8a8a82;
  text-align: center;
  padding: 14px 8px;
  font-style: italic;
}
.refine-annotation {
  border: 1px solid var(--air-line, #e6e6e0);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  transition: border-color 140ms ease, background 140ms ease;
}
.refine-annotation[data-status="approved"] {
  border-color: rgba(12, 138, 62, 0.40);
  background: rgba(12, 138, 62, 0.04);
}
.refine-annotation[data-status="rejected"] {
  border-color: rgba(214, 53, 76, 0.30);
  background: rgba(214, 53, 76, 0.03);
  opacity: 0.65;
}
.refine-annotation[data-resolved="true"] {
  opacity: 0.55;
}
.refine-annotation[data-missing="true"] {
  border-color: rgba(214, 130, 53, 0.40);
  background: rgba(214, 130, 53, 0.05);
}
.refine-annotation-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: #5a6273;
}
.refine-annotation-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: #5a6273;
}
.refine-annotation[data-status="approved"] .refine-annotation-status {
  background: rgba(12, 138, 62, 0.12);
  color: #0c8a3e;
}
.refine-annotation[data-status="rejected"] .refine-annotation-status {
  background: rgba(214, 53, 76, 0.10);
  color: #d6354c;
}
.refine-annotation-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a8a82;
}
.refine-annotation-author {
  font-size: 11px;
  color: #8a8a82;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}
.refine-annotation-missing {
  font-size: 10px;
  font-weight: 700;
  color: #d68235;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.refine-annotation-anchor {
  font-size: 12px;
  color: #1c1c1c;
  background: rgba(255, 230, 0, 0.20);
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
  font-family: var(--air-mono, ui-monospace, SFMono-Regular, monospace);
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.refine-annotation-comment {
  font-size: 13px;
  color: #1c1c1c;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 8px;
}
.refine-annotation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.refine-annotations-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--air-line, #e6e6e0);
}
.refine-annotations-count {
  font-size: 12px;
  color: #5a6273;
}
.refine-annotations-send[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Comments modal: BD-Assistant picker ──────────────────────────────
   Decorates each .manage-comment-thread inside the Activity-log tab with
   Approve/Reject. Sticky footer with the primary CTA stays visible while
   the log scrolls. */
.manage-comment-thread[data-bda-status="approved"] {
  border-left: 3px solid #0c8a3e;
  background: rgba(12, 138, 62, 0.04);
}
.manage-comment-thread[data-bda-status="rejected"] {
  border-left: 3px solid #d6354c;
  background: rgba(214, 53, 76, 0.03);
  opacity: 0.65;
}
.manage-comment-thread[data-bda-status="resolved"] {
  opacity: 0.55;
}
.manage-comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--air-line, #e6e6e0);
}
.manage-comment-bda-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: #5a6273;
  margin-right: auto;
}
.manage-comment-actions [data-bda-status="approved"] {
  background: rgba(12, 138, 62, 0.12);
  color: #0c8a3e;
}
.manage-comment-actions [data-bda-status="rejected"] {
  background: rgba(214, 53, 76, 0.10);
  color: #d6354c;
}
.manage-comment-bda-missing {
  font-size: 10px;
  font-weight: 700;
  color: #d68235;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.manage-comments-bda-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #fcfcfa;
  border-top: 1px solid var(--air-line, #e6e6e0);
  border-radius: 0 0 12px 12px;
  z-index: 1;
}
.manage-comments-bda-count {
  font-size: 12px;
  color: #5a6273;
  font-weight: 500;
}
.manage-comments-bda-send[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── PR 6 Pass B — Web Designer modal: blocks step + select chip variant ─── */

.wd-blocks-empty {
  opacity: 0.65;
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}
.wd-blocks-loading {
  opacity: 0.65;
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}
.wd-blocks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.wd-blocks-head .wd-help {
  font-size: 12px;
  opacity: 0.7;
}
.wd-blocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.wd-block-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}
.wd-block-card:hover:not(.is-locked) {
  border-color: #00bec9;
}
.wd-block-card.is-on {
  border-color: #00bec9;
  background: rgba(0,190,201,0.06);
}
.wd-block-card.is-off {
  opacity: 0.55;
}
.wd-block-card.is-locked {
  cursor: not-allowed;
}
.wd-block-card.is-locked.is-on {
  border-color: rgba(0,190,201,0.8);
  background: rgba(0,190,201,0.10);
}
.wd-block-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wd-block-card-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}
.wd-block-card-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.wd-block-card-state {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  opacity: 0.7;
}
.wd-block-card.is-on .wd-block-card-state {
  background: #00bec9;
  border-color: #00bec9;
  opacity: 1;
}
.wd-block-card.is-on .wd-block-card-state::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wd-block-card-summary {
  font-size: 11.5px;
  line-height: 1.35;
  opacity: 0.72;
}
.wd-block-card-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
  border: 1px solid currentColor;
  color: #00bec9;
  border-color: rgba(0,190,201,0.6);
}

.wd-chip-grid-select .wd-chip {
  text-align: left;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .wd-blocks-grid { grid-template-columns: 1fr; }
  .wd-blocks-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   Context sub-section (§2 > details#refine-context) —
   black-gold gradient treatment.
   Per Kenneth pin (Discord 2026-05-28): scope is the Context
   panel only, NOT all of §2. Replaces earlier cheap pale-gold
   on the whole section.
   ============================================================ */
.refine-context,
.refine-context[open] {
  background: linear-gradient(135deg,
    #0a0a0a 0%,
    #1a1408 30%,
    #3a2a08 55%,
    #8a6510 80%,
    #d4a017 100%);
  border: 1px solid rgba(212, 160, 23, 0.55);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 215, 100, 0.18) inset,
    0 10px 28px -14px rgba(0, 0, 0, 0.55);
}
.refine-context > .refine-context-summary,
.refine-context[open] > .refine-context-summary {
  color: #f5d76e;
}
.refine-context > .refine-context-summary .air-label-hint {
  color: rgba(245, 215, 110, 0.72);
}
.refine-context > .refine-context-summary::after {
  color: #d4a017;
}
.refine-context > .refine-context-body {
  border-top: 1px solid rgba(212, 160, 23, 0.28);
  color: #f3ead0;
}
.refine-context > .refine-context-body .air-label {
  color: #f5d76e;
}
.refine-context > .refine-context-body .air-label-hint {
  color: rgba(245, 215, 110, 0.65);
}
.refine-context > .refine-context-body .refine-dropzone {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(212, 160, 23, 0.4);
  color: #f3ead0;
}
.refine-context > .refine-context-body .refine-dropzone:hover,
.refine-context > .refine-context-body .refine-dropzone:focus {
  border-color: #d4a017;
  background: rgba(212, 160, 23, 0.08);
}

/* AIR Kit chrome (WhatsApp FAB + annotations dock) needs bottom clearance
   so the last in-flow CTA (Deploy button) isn't covered. */
.create-app, body.create-page {
  padding-bottom: max(var(--bottom-safe-area, 96px), env(safe-area-inset-bottom, 0px));
}


/* /create — v2 category-templates Template picker (Step 5)
   Hidden via inline style when N≤1 templates exist for the category. */
.create-template-row .create-template-autopick {
  display: inline-block;
  background: #eef3ff;
  color: #2849a3;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  cursor: help;
}
.create-template-row select {
  width: 100%;
}