/* App shell — Cohere-inspired design tokens.
   See forntend/DESIGN.md for the source-of-truth brand system.
   Proprietary CohereText / Unica77 / CohereMono are not bundled,
   so we use the documented fallbacks: Space Grotesk + Inter + ui-monospace. */

:root {
  /* Brand & accent */
  --co-black: #000000;
  --co-near-black: #17171c;
  --co-deep-green: #003c33;
  --co-dark-navy: #071829;
  --co-action-blue: #1863dc;
  --co-coral: #ff7759;
  --co-soft-coral: #ffad9b;

  /* Surface & background */
  --co-canvas: #ffffff;
  --co-stone: #eeece7;
  --co-pale-green: #edfce9;
  --co-pale-blue: #f1f5ff;
  --co-card-border: #f2f2f2;

  /* Text & rules */
  --co-ink: #212121;
  --co-muted-slate: #93939f;
  --co-slate: #75758a;
  --co-hairline: #d9d9dd;
  --co-border-light: #e5e7eb;

  /* Semantic */
  --co-focus-blue: #4c6ee6;
  --co-focus-violet: #9b60aa;
  --co-error-red: #b30000;

  /* Radius scale */
  --co-radius-xs: 4px;
  --co-radius-sm: 8px;
  --co-radius-md: 16px;
  --co-radius-lg: 22px;
  --co-radius-xl: 30px;
  --co-radius-pill: 32px;

  /* Type stacks */
  --co-font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --co-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --co-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------- *
 * Base
 * --------------------------------------------------------------------- */

html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--co-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--co-canvas);
  color: var(--co-ink);
}

::selection {
  background: var(--co-soft-coral);
  color: var(--co-near-black);
}

/* --------------------------------------------------------------------- *
 * Typography — Cohere display/body split
 * --------------------------------------------------------------------- */

.co-display-hero {
  font-family: var(--co-font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--co-near-black);
}

.co-display-product {
  font-family: var(--co-font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--co-near-black);
}

.co-display-section {
  font-family: var(--co-font-body);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--co-near-black);
}

.co-h-section {
  font-family: var(--co-font-body);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--co-near-black);
}

.co-h-card {
  font-family: var(--co-font-body);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--co-near-black);
}

.co-h-feature {
  font-family: var(--co-font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--co-near-black);
}

.co-body-large {
  font-family: var(--co-font-body);
  font-size: 18px;
  line-height: 1.45;
  color: var(--co-ink);
}

.co-body {
  font-family: var(--co-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--co-ink);
}

.co-caption {
  font-family: var(--co-font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--co-slate);
}

.co-mono-label {
  font-family: var(--co-font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-slate);
}

.co-micro {
  font-family: var(--co-font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--co-muted-slate);
}

/* --------------------------------------------------------------------- *
 * Buttons
 * --------------------------------------------------------------------- */

.co-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--co-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--co-canvas);
  background: var(--co-near-black);
  border: 1px solid var(--co-near-black);
  border-radius: var(--co-radius-pill);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease, opacity 150ms ease;
  text-decoration: none;
}
.co-btn-primary:hover { background: #000; }
.co-btn-primary:focus-visible {
  outline: 2px solid var(--co-focus-blue);
  outline-offset: 2px;
}
.co-btn-primary[disabled],
.co-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.co-btn-on-dark {
  color: var(--co-near-black);
  background: var(--co-canvas);
  border-color: var(--co-canvas);
}
.co-btn-on-dark:hover { background: #f5f5f5; }

.co-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  font-family: var(--co-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--co-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--co-near-black);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}
.co-btn-secondary:hover { color: var(--co-near-black); }

.co-btn-pill-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--co-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--co-near-black);
  background: transparent;
  border: 1px solid var(--co-near-black);
  border-radius: var(--co-radius-xl);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.co-btn-pill-outline:hover {
  background: var(--co-near-black);
  color: var(--co-canvas);
}

/* --------------------------------------------------------------------- *
 * Announcement bar + Nav
 * --------------------------------------------------------------------- */

.co-announcement {
  background: var(--co-black);
  color: var(--co-canvas);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-family: var(--co-font-body);
  font-size: 13px;
  letter-spacing: 0.005em;
}
.co-announcement a {
  color: var(--co-canvas);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 8px;
}

.co-nav {
  background: var(--co-canvas);
  border-bottom: 1px solid var(--co-hairline);
}
.co-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.co-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--co-near-black);
}
.co-nav-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--co-near-black);
  color: var(--co-canvas);
  border-radius: var(--co-radius-sm);
}
.co-nav-wordmark {
  font-family: var(--co-font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--co-near-black);
}
.co-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  justify-self: center;
}
.co-nav-links a {
  font-family: var(--co-font-body);
  font-size: 14px;
  color: var(--co-ink);
  text-decoration: none;
}
.co-nav-links a:hover { color: var(--co-near-black); }
.co-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

/* --------------------------------------------------------------------- *
 * Surfaces
 * --------------------------------------------------------------------- */

.co-canvas { background: var(--co-canvas); }
.co-surface-stone { background: var(--co-stone); }
.co-surface-pale-green { background: var(--co-pale-green); }
.co-surface-pale-blue { background: var(--co-pale-blue); }

.co-band-dark {
  background: var(--co-deep-green);
  color: var(--co-canvas);
}
.co-band-navy {
  background: var(--co-dark-navy);
  color: var(--co-canvas);
}

.co-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.co-section {
  padding: 80px 0;
}
@media (max-width: 768px) {
  .co-section { padding: 56px 0; }
}

/* --------------------------------------------------------------------- *
 * Cards
 * --------------------------------------------------------------------- */

.co-card-stone {
  background: var(--co-stone);
  border-radius: var(--co-radius-sm);
  padding: 28px;
  border: 1px solid transparent;
  transition: border-color 150ms ease, transform 150ms ease;
}
.co-card-stone:hover { border-color: var(--co-hairline); }

.co-card-light {
  background: var(--co-canvas);
  border: 1px solid var(--co-card-border);
  border-radius: var(--co-radius-sm);
  padding: 28px;
}

.co-card-media {
  border-radius: var(--co-radius-lg);
  overflow: hidden;
  background: var(--co-stone);
}

.co-capability {
  padding: 28px 0;
  border-top: 1px solid var(--co-hairline);
}
.co-capability:last-child { border-bottom: 1px solid var(--co-hairline); }

/* --------------------------------------------------------------------- *
 * Surface tiles — used on the home page to advertise each tool surface
 * (Battlecards, Sales Collateral, Outreach, Creatives, etc.)
 * --------------------------------------------------------------------- */

.co-surface-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 768px) {
  .co-surface-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1100px) {
  .co-surface-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}

.co-tile {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease, transform 150ms ease, background-color 150ms ease;
  min-height: 260px;
}
.co-tile:hover { border-color: var(--co-near-black); }

.co-tile.is-stone { background: var(--co-stone); border-color: transparent; }
.co-tile.is-stone:hover { border-color: var(--co-near-black); }

.co-tile.is-dark {
  background: var(--co-deep-green);
  border-color: var(--co-deep-green);
  color: var(--co-canvas);
}
.co-tile.is-dark .co-mono-label,
.co-tile.is-dark .co-tile-body { color: rgba(255, 255, 255, 0.78); }
.co-tile.is-dark:hover { border-color: var(--co-canvas); }

.co-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.co-tile-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--co-near-black);
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-sm);
}
.co-tile.is-stone .co-tile-icon { background: var(--co-canvas); }
.co-tile.is-dark .co-tile-icon {
  color: var(--co-canvas);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.co-tile-title {
  font-family: var(--co-font-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: inherit;
}
.co-tile-body {
  font-family: var(--co-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--co-slate);
  flex: 1;
}
.co-tile-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.co-tile-list li {
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--co-slate);
  padding: 4px 10px;
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-xl);
  background: var(--co-canvas);
}
.co-tile.is-dark .co-tile-list li {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.co-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.co-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--co-font-body);
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}

/* Status chip — "Live" / "Coming soon" / "Beta" */
.co-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--co-radius-xl);
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  color: var(--co-slate);
}
.co-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--co-muted-slate);
}
.co-status.is-live { color: var(--co-deep-green); border-color: #b8e8b3; background: var(--co-pale-green); }
.co-status.is-live::before { background: var(--co-deep-green); }
.co-status.is-soon { color: var(--co-near-black); border-color: var(--co-soft-coral); background: var(--co-canvas); }
.co-status.is-soon::before { background: var(--co-coral); }
.co-status.is-beta { color: var(--co-action-blue); border-color: #c0d4f4; background: var(--co-pale-blue); }
.co-status.is-beta::before { background: var(--co-action-blue); }
.co-tile.is-dark .co-status {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--co-canvas);
}
.co-tile.is-dark .co-status.is-live { background: rgba(176, 232, 179, 0.18); border-color: rgba(176, 232, 179, 0.3); color: #b8e8b3; }
.co-tile.is-dark .co-status.is-live::before { background: #b8e8b3; }

/* --------------------------------------------------------------------- *
 * Chips
 * --------------------------------------------------------------------- */

.co-chip-coral {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--co-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--co-near-black);
  background: var(--co-canvas);
  border: 1px solid var(--co-coral);
  border-radius: var(--co-radius-xl);
}
.co-chip-coral.is-active {
  background: var(--co-coral);
  color: var(--co-near-black);
}

.co-chip-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-near-black);
  background: var(--co-canvas);
  border: 1px solid var(--co-soft-coral);
  border-radius: var(--co-radius-xl);
}

/* --------------------------------------------------------------------- *
 * Brand chip — visible pill on every new-form telling the user what
 * brand context the LLM will receive on this generation. Two states:
 *   .co-brand-chip            — brand is set; shows mark + name + summary
 *   .co-brand-chip.is-empty   — no brand set yet; nudge to /settings/brand
 * --------------------------------------------------------------------- */

.co-brand-chip {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease;
}
.co-brand-chip:hover { border-color: var(--co-near-black); }
.co-brand-chip.is-empty {
  background: linear-gradient(180deg, var(--co-canvas) 0%, var(--co-stone) 200%);
  border-style: dashed;
}

.co-brand-chip-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--co-near-black);
  color: var(--co-canvas);
  border-radius: var(--co-radius-sm);
  flex-shrink: 0;
}
.co-brand-chip.is-empty .co-brand-chip-mark {
  background: var(--co-stone);
  color: var(--co-near-black);
  border: 1px dashed var(--co-hairline);
}

.co-brand-chip-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.co-brand-chip-eyebrow {
  font-family: var(--co-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-coral);
}
.co-brand-chip.is-empty .co-brand-chip-eyebrow { color: var(--co-slate); }

.co-brand-chip-title {
  font-family: var(--co-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--co-near-black);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-brand-chip-summary {
  font-family: var(--co-font-body);
  font-size: 12.5px;
  color: var(--co-slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.co-brand-chip-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--co-font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--co-near-black);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--co-radius-xl);
  border: 1px solid var(--co-hairline);
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
.co-brand-chip-action:hover {
  background: var(--co-near-black);
  color: var(--co-canvas);
  border-color: var(--co-near-black);
}

/* --------------------------------------------------------------------- *
 * Brand settings form — sectioned layout with character counters,
 * helper copy, and a sticky save bar.
 * --------------------------------------------------------------------- */

.co-section-card {
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-md);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .co-section-card { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
}

.co-section-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.co-section-eyebrow {
  font-family: var(--co-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-slate);
}
.co-section-title {
  font-family: var(--co-font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--co-near-black);
  letter-spacing: -0.01em;
}
.co-section-help {
  font-family: var(--co-font-body);
  font-size: 13px;
  color: var(--co-slate);
  line-height: 1.5;
}

.co-section-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.co-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.co-counter {
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--co-muted-slate);
  flex-shrink: 0;
}
.co-counter.is-warn { color: var(--co-coral); }
.co-counter.is-over { color: var(--co-error-red); }

.co-savebar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin: 32px -40px -80px;
  padding: 16px 40px;
  background: var(--co-canvas);
  border-top: 1px solid var(--co-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  backdrop-filter: blur(8px);
}
@media (max-width: 720px) {
  .co-savebar { margin: 24px -20px -56px; padding: 12px 20px; }
}
.co-savebar-status {
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-slate);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------- *
 * App shell — persistent left sidebar + main content area.
 * Used by every authenticated surface (Dashboard, Content Creation,
 * Content Library, Settings). The editor (`/card/{id}`) opts out via
 * its own full-screen `{% block layout %}` override.
 * --------------------------------------------------------------------- */

.co-app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--co-canvas);
}
@media (max-width: 900px) {
  .co-app { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .co-app { grid-template-columns: 1fr; }
  .co-sidebar { display: none; }
}

.co-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--co-hairline);
  background: var(--co-canvas);
  overflow-y: auto;
}

.co-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--co-hairline);
  text-decoration: none;
  color: var(--co-near-black);
}
.co-sidebar-brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--co-radius-sm);
  background: var(--co-near-black);
  color: var(--co-canvas);
  flex-shrink: 0;
}
/* Inner mark image — sized down so the purple/green accent has a
   thin near-black padding ring on the chip rather than touching the
   edges. The mark's natural ratio is ~1.13:1; we constrain on both
   axes so it never warps. */
.co-sidebar-brand-mark-img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.co-sidebar-brand-name {
  font-family: var(--co-font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--co-near-black);
}

.co-sidebar-nav {
  flex: 1;
  padding: 18px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.co-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.co-sidebar-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 6px;
  font-family: var(--co-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-muted-slate);
}

.co-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--co-radius-xs);
  font-family: var(--co-font-body);
  font-size: 13.5px;
  color: var(--co-ink);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.co-sidebar-item:hover { background: var(--co-stone); }
.co-sidebar-item.is-active {
  background: var(--co-near-black);
  color: var(--co-canvas);
}
.co-sidebar-item.is-active .co-status { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: var(--co-canvas); }
.co-sidebar-item .co-status { font-size: 9px; padding: 2px 7px; }
.co-sidebar-item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.co-sidebar-foot {
  border-top: 1px solid var(--co-hairline);
  padding: 16px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.co-sidebar-foot-name {
  font-family: var(--co-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--co-near-black);
}
.co-sidebar-foot-meta {
  font-family: var(--co-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-muted-slate);
}

.co-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.co-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--co-hairline);
  background: var(--co-canvas);
  position: sticky;
  top: 0;
  z-index: 20;
}
.co-topbar-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-slate);
}
.co-topbar-crumbs a { color: var(--co-muted-slate); text-decoration: none; }
.co-topbar-crumbs a:hover { color: var(--co-near-black); }
.co-topbar-crumbs-sep::before {
  content: "/";
  margin: 0 2px;
  color: var(--co-hairline);
}

.co-page {
  padding: 56px 40px 80px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .co-page { padding: 32px 20px 56px; }
}

.co-page-head {
  margin-bottom: 40px;
}

/* Dashboard-specific tiles (smaller, denser than co-tile) */
.co-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 900px) {
  .co-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.co-quick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-md);
  text-decoration: none;
  color: inherit;
  min-height: 140px;
  transition: border-color 150ms ease, transform 150ms ease;
}
.co-quick:hover { border-color: var(--co-near-black); }
.co-quick-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--co-stone);
  border-radius: var(--co-radius-sm);
  color: var(--co-near-black);
}
.co-quick-title {
  font-family: var(--co-font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--co-near-black);
  margin-top: auto;
}
.co-quick-sub {
  font-family: var(--co-font-body);
  font-size: 12.5px;
  color: var(--co-slate);
}

/* KPI tiles for the Overview Panel. */
.co-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 900px) {
  .co-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.co-kpi {
  padding: 22px;
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-md);
}
.co-kpi-label {
  font-family: var(--co-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-slate);
}
.co-kpi-value {
  font-family: var(--co-font-display);
  font-size: 36px;
  letter-spacing: -0.015em;
  color: var(--co-near-black);
  margin-top: 6px;
  line-height: 1;
}
.co-kpi-delta {
  font-family: var(--co-font-body);
  font-size: 12px;
  color: var(--co-slate);
  margin-top: 8px;
}

/* Dashboard variants — hero quick-actions + slim KPI strip.
   The dashboard treats quick-actions as the page hero (the daily verb)
   and KPIs as supporting context. `--hero` and `--slim` modifiers keep
   the base classes available for other pages (e.g. /create) that want
   the original 1:1 sizing. */
.co-quick-grid--hero .co-quick {
  min-height: 180px;
  padding: 24px;
  position: relative;
}
.co-quick-grid--hero .co-quick-icon {
  width: 36px;
  height: 36px;
}
.co-quick-grid--hero .co-quick-title {
  font-size: 19px;
  letter-spacing: -0.005em;
}
.co-quick-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  font-size: 18px;
  line-height: 1;
  color: var(--co-slate);
  opacity: 0.7;
  transition: transform 180ms ease, opacity 180ms ease;
}
.co-quick-grid--hero .co-quick:hover .co-quick-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.co-kpi-grid--slim .co-kpi {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: end;
}
.co-kpi-grid--slim .co-kpi-label {
  grid-column: 1 / -1;
  grid-row: 1;
}
.co-kpi-grid--slim .co-kpi-value {
  grid-column: 2;
  grid-row: 2;
  font-size: 30px;
  margin-top: 4px;
}
.co-kpi-grid--slim .co-kpi-delta {
  grid-column: 1;
  grid-row: 2;
  margin-top: 4px;
  align-self: end;
}

/* Tabbed segmented control (Library: All / Drafts / Ready / Published) */
.co-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--co-stone);
  border-radius: var(--co-radius-pill);
}
.co-tab {
  padding: 7px 14px;
  font-family: var(--co-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--co-slate);
  background: transparent;
  border: 0;
  border-radius: var(--co-radius-pill);
  cursor: pointer;
  text-decoration: none;
}
.co-tab:hover { color: var(--co-near-black); }
.co-tab.is-active {
  background: var(--co-canvas);
  color: var(--co-near-black);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Coming-soon stub centered card */
.co-stub {
  background: var(--co-canvas);
  border: 1px dashed var(--co-hairline);
  border-radius: var(--co-radius-md);
  padding: 64px 40px;
  text-align: center;
  max-width: 640px;
  margin: 40px auto 0;
}
.co-stub-mono {
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-coral);
}
.co-stub-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  list-style: none;
  padding: 0;
}
.co-stub-list li {
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--co-slate);
  padding: 4px 10px;
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-xl);
  background: var(--co-canvas);
}

/* --------------------------------------------------------------------- *
 * Theme dial — scrollable knob in the editor top bar.
 * Mouse-wheel over the dial cycles to next/prev theme; the hidden
 * native <select> is what HTMX listens to (`change from:select`).
 * --------------------------------------------------------------------- */

.co-theme-dial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 14px;
  border: 1px solid var(--co-near-black);
  border-radius: var(--co-radius-xl);
  background: var(--co-canvas);
  font-family: var(--co-font-body);
  user-select: none;
  cursor: ns-resize;
  position: relative;
}
.co-theme-dial:hover { background: var(--co-stone); }

.co-theme-dial-label {
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-slate);
}

.co-theme-dial-face {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 116px;
  padding: 4px 4px 4px 8px;
  background: var(--co-stone);
  border-radius: var(--co-radius-xl);
  color: var(--co-near-black);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background-color 120ms ease;
}
.co-theme-dial:hover .co-theme-dial-face { background: var(--co-canvas); }

.co-theme-dial-name {
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Color swatch — reads `--color-brand-accent` (not brand-primary) from the
   theme block by carrying `data-theme="..."` on the swatch element. Accent
   gives more diversity at 14px: gold for fintech, red for monochrome,
   coral for cohere, etc. — primary clusters around dark blues/blacks/greens. */
.co-theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--color-brand-accent, var(--co-near-black));
  flex-shrink: 0;
}

.co-theme-dial-steps {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}
.co-theme-dial-step {
  display: grid;
  place-items: center;
  width: 18px;
  height: 14px;
  background: transparent;
  border: 0;
  color: var(--co-slate);
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
}
.co-theme-dial-step:hover {
  background: var(--co-near-black);
  color: var(--co-canvas);
}
.co-theme-dial-step svg {
  width: 10px;
  height: 10px;
}

/* The native <select> stays in the form for HTMX, but is visually
   hidden — it still carries a11y semantics and focus management. */
.co-theme-dial-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------- *
 * Forms — rectangular, thin gray borders, violet focus
 * --------------------------------------------------------------------- */

.co-input,
.bc-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--co-font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--co-ink);
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-xs);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.co-input::placeholder,
.bc-input::placeholder {
  color: var(--co-muted-slate);
}
.co-input:focus,
.bc-input:focus {
  outline: none;
  border-color: var(--co-focus-violet);
  box-shadow: 0 0 0 3px rgba(155, 96, 170, 0.15);
}

.co-label {
  display: block;
  font-family: var(--co-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--co-near-black);
  margin-bottom: 6px;
}
.co-helper {
  font-family: var(--co-font-body);
  font-size: 12px;
  color: var(--co-slate);
  margin-top: 6px;
}

.co-form-card {
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-md);
  padding: 32px;
}

/* --------------------------------------------------------------------- *
 * Research-style row list (for the home battlecard list)
 * --------------------------------------------------------------------- */

.co-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 22px 4px;
  border-top: 1px solid var(--co-hairline);
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
}
.co-row:last-child { border-bottom: 1px solid var(--co-hairline); }
.co-row:hover { background: var(--co-stone); }
.co-row-title {
  font-family: var(--co-font-body);
  font-size: 18px;
  line-height: 1.4;
  color: var(--co-near-black);
  font-weight: 500;
}
.co-row-meta {
  font-family: var(--co-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--co-slate);
}

/* --------------------------------------------------------------------- *
 * Trust strip
 * --------------------------------------------------------------------- */

.co-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 24px 0;
}
.co-trust span {
  font-family: var(--co-font-body);
  font-size: 14px;
  color: var(--co-muted-slate);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------- *
 * Editor pane
 * --------------------------------------------------------------------- */

.editor-textarea {
  font-family: var(--co-font-mono);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
}

/* --------------------------------------------------------------------- *
 * Spinner + HTMX indicator
 * --------------------------------------------------------------------- */

@keyframes bc-spin { to { transform: rotate(360deg); } }
.bc-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bc-spin 0.7s linear infinite;
  vertical-align: middle;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* --------------------------------------------------------------------- *
 * Status pill (kept for backwards compatibility with editor.html)
 * --------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--co-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid;
}
.pill-ok {
  background: var(--co-pale-green);
  color: var(--co-deep-green);
  border-color: #b8e8b3;
}
.pill-bad {
  background: #fff1f1;
  color: var(--co-error-red);
  border-color: #f4cccc;
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}
.pill-ok .pill-dot { background: var(--co-deep-green); }
.pill-bad .pill-dot { background: var(--co-error-red); }

/* ─── Spirited mode (May 2026) ────────────────────────────────────────────
 *
 * Targeted colour injection across the app shell (NOT the battlecard
 * print surface — those keep their per-theme aesthetic). The intent is
 * "punchy and fun" without painting every element: signature gradient
 * accents on heroes, alternating brand-tinted KPIs / quick-action
 * icons, colored mono-labels on numbered tile grids, a coloured rail
 * on the active sidebar item, and a search-pill component used on
 * library landings.
 *
 * Klypup brand palette (see DESIGN.md + the `klypup` battlecard theme):
 *   Purple #7F70FF, Coral #FF7759, Green #6CE2A1, Action blue #1863DC.
 * All applied via existing `--co-*` tokens where one already exists;
 * a small set of pale-tints below cover the rest.
 */
:root {
  --co-pale-purple: #f3f0ff;
  --co-pale-coral: #fff1ec;
  --co-purple-deep: #5a4be0;
  --co-brand-purple: #7f70ff;
  --co-brand-green: #6ce2a1;
}

/* Dashboard KPI tiles — four-stop colour cycle. Each tile gets a
   pale-tint background, a saturated value-color, and a matching
   border. The content semantics don't change; this is purely visual
   differentiation so the bar reads at a glance. */
.co-kpi-grid > .co-kpi:nth-child(1) {
  background: var(--co-pale-green);
  border-color: #b8e8b3;
}
.co-kpi-grid > .co-kpi:nth-child(1) .co-kpi-value { color: var(--co-deep-green); }
.co-kpi-grid > .co-kpi:nth-child(2) {
  background: var(--co-pale-purple);
  border-color: #d9d0ff;
}
.co-kpi-grid > .co-kpi:nth-child(2) .co-kpi-value { color: var(--co-purple-deep); }
.co-kpi-grid > .co-kpi:nth-child(3) {
  background: var(--co-pale-coral);
  border-color: var(--co-soft-coral);
}
.co-kpi-grid > .co-kpi:nth-child(3) .co-kpi-value { color: var(--co-coral); }
.co-kpi-grid > .co-kpi:nth-child(4) {
  background: var(--co-pale-blue);
  border-color: #c0d4f4;
}
.co-kpi-grid > .co-kpi:nth-child(4) .co-kpi-value { color: var(--co-action-blue); }

/* Quick-action icons — same four-stop cycle so the dashboard's two
   horizontal rows (KPIs and Quick actions) rhyme visually. */
.co-quick-grid > .co-quick:nth-child(1) .co-quick-icon {
  background: var(--co-pale-coral);
  color: var(--co-coral);
}
.co-quick-grid > .co-quick:nth-child(2) .co-quick-icon {
  background: var(--co-pale-purple);
  color: var(--co-purple-deep);
}
.co-quick-grid > .co-quick:nth-child(3) .co-quick-icon {
  background: var(--co-pale-green);
  color: var(--co-deep-green);
}
.co-quick-grid > .co-quick:nth-child(4) .co-quick-icon {
  background: var(--co-pale-blue);
  color: var(--co-action-blue);
}

/* Numbered tile grid (`/create`) — rotate the mono-label colour by
   position so "2.1 / 2.2 / 2.3 / 2.4 / 2.5 / 2.6" reads as a colour
   wheel down the grid. Skip dark tiles (battlecards anchor) so its
   white label stays correct. */
.co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+1) > div .co-mono-label,
.co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+1) .co-mono-label { color: var(--co-coral); }
.co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+2) .co-mono-label { color: var(--co-purple-deep); }
.co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+3) .co-mono-label { color: var(--co-deep-green); }
.co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+4) .co-mono-label { color: var(--co-action-blue); }
.co-surface-grid > .co-tile:not(.is-dark):nth-child(6n+5) .co-mono-label { color: var(--co-focus-violet); }

/* Coming-soon pill — was a near-grey "soft coral border + canvas bg"
   that read as "disabled." Now reads as "in flight" — pale-coral fill
   + coral text. Same coral-dot indicator. */
.co-status.is-soon {
  color: var(--co-coral);
  border-color: var(--co-soft-coral);
  background: var(--co-pale-coral);
}

/* Empty-library variant — the "No cards yet / No campaigns yet"
   stone block was visually inert. `.is-spirited` swaps it to
   pale-green + a green border + a coral-tinted hover. Templates opt
   in by adding the class alongside `co-card-stone`. */
.co-card-stone.is-spirited {
  background: var(--co-pale-green);
  border-color: #b8e8b3;
}
.co-card-stone.is-spirited:hover { border-color: var(--co-deep-green); }

/* ── Search pill ─────────────────────────────────────────────────────────
 * Drop-in inline component used on Dashboard / Email / Blog landings
 * to filter the on-page library list as the user types. The wrapper
 * label gives the whole thing a click target; focus-within promotes
 * the pill from stone to canvas with an ink hairline. The actual
 * input is borderless and inherits the body family.
 *
 * Filtering is wired by the `data-search-target="<selector>"` attr on
 * the input: a small once-per-page script in `base.html` finds every
 * input with that attribute and hides any `<li>` inside the target
 * whose text doesn't include the query. No HTMX, no endpoint.
 */
.co-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--co-stone);
  border: 1px solid transparent;
  border-radius: var(--co-radius-pill);
  min-width: 240px;
  transition: background 150ms ease, border-color 150ms ease;
}
.co-search:focus-within {
  background: var(--co-canvas);
  border-color: var(--co-near-black);
}
.co-search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--co-slate);
}
.co-search input {
  /* `appearance: none` strips WebKit's native chrome on
     `<input type="search">`. Without it, Safari and Chrome paint the
     input's own light-grey background and rounded inset *inside* the
     pill — visible as a darker rectangle within the rounded outer
     pill on themes whose pill background isn't pure white (cohere
     in particular). The reset has to live on the input rule, not
     just on the pill, because the native paint is the input's own. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--co-font-body);
  font-size: 14px;
  color: var(--co-near-black);
  width: 100%;
  min-width: 0;
}
.co-search input::placeholder { color: var(--co-slate); }
/* Hide WebKit's built-in search clear "x" — we don't use it, and on
   some themes it shows up as a faint glyph overlapping the placeholder. */
.co-search input::-webkit-search-decoration,
.co-search input::-webkit-search-cancel-button,
.co-search input::-webkit-search-results-button,
.co-search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.co-search.is-empty-results {
  background: var(--co-pale-coral);
  border-color: var(--co-soft-coral);
}

/* "No results" hint shown when every <li> in the target is hidden.
   Inserted by the search script as a sibling after the list. */
.co-search-empty {
  display: none;
  margin-top: 16px;
  padding: 14px 18px;
  color: var(--co-slate);
  font-size: 13px;
  background: var(--co-pale-coral);
  border: 1px dashed var(--co-soft-coral);
  border-radius: var(--co-radius-sm);
}
.co-search-empty.is-shown { display: block; }

/* ─── Feedback chatbot modal ─────────────────────────────────────────── */

.co-sidebar-feedback {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--co-hairline, rgba(0, 0, 0, 0.1));
  border-radius: 9999px;
  background: var(--co-surface, transparent);
  color: var(--co-ink, #111);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.co-sidebar-feedback:hover {
  background: var(--co-surface-hover, rgba(0, 0, 0, 0.04));
}

.co-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.co-modal {
  width: 100%;
  max-width: 560px;
  height: 640px;
  max-height: calc(100vh - 2rem);
  background: var(--co-canvas, #fff);
  color: var(--co-ink, #111);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.co-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--co-hairline, rgba(0, 0, 0, 0.08));
}
.co-modal-title { font-size: 1rem; font-weight: 600; margin: 0; }
.co-modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--co-ink-muted, #555);
}

.co-feedback-transcript {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.co-feedback-bubble {
  max-width: 80%;
  padding: 0.625rem 0.875rem;
  border-radius: 14px;
  line-height: 1.4;
  font-size: 0.9375rem;
  word-wrap: break-word;
}
.co-feedback-bubble-bot {
  align-self: flex-start;
  background: var(--co-surface, rgba(0, 0, 0, 0.04));
  color: var(--co-ink, #111);
}
.co-feedback-bubble-user {
  align-self: flex-end;
  background: var(--co-accent, #2563eb);
  color: var(--co-on-accent, #fff);
}

/* Typing-dots placeholder shown between the user's optimistic bubble
   and the bot's eventual reply. Painted client-side in before-request,
   removed in before-swap. Reduced-motion users see static dots. */
.co-feedback-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 1.4em;
}
.co-feedback-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: co-feedback-typing-pulse 1.2s ease-in-out infinite;
}
.co-feedback-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.co-feedback-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes co-feedback-typing-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 0.85; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .co-feedback-typing-dot { animation: none; opacity: 0.6; }
}

.co-feedback-disambig-q { margin: 0 0 0.5rem 0; }
.co-feedback-disambig-chips {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
}
.co-feedback-chip { font-size: 0.85rem; padding: 0.375rem 0.75rem; }

.co-feedback-other { width: 100%; }
.co-feedback-other > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
.co-feedback-other > summary::-webkit-details-marker { display: none; }
.co-feedback-other-form {
  display: flex; gap: 0.5rem; align-items: center;
  margin-top: 0.5rem;
}
.co-feedback-other-input {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--co-hairline, rgba(0, 0, 0, 0.15));
  border-radius: 9999px;
  font: inherit;
  font-size: 0.875rem;
  background: var(--co-canvas, #fff);
  color: var(--co-ink, #111);
}

.co-feedback-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--co-hairline, rgba(0, 0, 0, 0.08));
}
.co-feedback-input {
  flex: 1;
  resize: none;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--co-hairline, rgba(0, 0, 0, 0.15));
  border-radius: 12px;
  font: inherit;
  font-size: 0.9375rem;
  background: var(--co-canvas, #fff);
  color: var(--co-ink, #111);
  max-height: 6rem;
  overflow-y: auto;
}
.co-feedback-send {
  background: var(--co-accent, #2563eb);
  color: var(--co-on-accent, #fff);
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
.co-feedback-send:disabled { opacity: 0.5; cursor: not-allowed; }

.co-feedback-done-row {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--co-hairline, rgba(0, 0, 0, 0.08));
}

/* ─── Newsletter editor + preview ────────────────────────────────────────────
   Email-frame chrome that visually distinguishes the newsletter preview
   from blog/email previews. Outer card is white-on-slate-canvas; the
   header strip carries sender + subject; the body uses item-cards with
   stone backgrounds so each item reads as a discrete unit. */

.co-newsletter-frame {
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: 14px;
  box-shadow: 0 24px 48px -28px rgba(15, 17, 26, 0.18);
  overflow: hidden;
  max-width: 640px;
}

.co-newsletter-header {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--co-hairline);
  background: var(--co-canvas);
}

.co-newsletter-header-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.5;
}

.co-newsletter-header-row + .co-newsletter-header-row {
  margin-top: 4px;
}

.co-newsletter-header-key {
  width: 56px;
  flex-shrink: 0;
  color: var(--co-slate);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.co-newsletter-header-val {
  color: var(--co-ink);
  word-break: break-word;
}

.co-newsletter-subject {
  font-weight: 600;
}

.co-newsletter-pretext {
  margin: 8px 0 0 68px;
  color: var(--co-slate);
  font-size: 12.5px;
}

.co-newsletter-body {
  padding: 28px 28px 32px;
  background: var(--co-canvas);
}

.co-newsletter-masthead {
  display: inline-block;
  padding: 6px 10px;
  margin: 0 0 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--co-near-black);
  background: var(--co-stone);
  border: 1px solid var(--co-hairline);
  border-radius: 999px;
}

.co-newsletter-prose p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--co-ink);
  margin: 0 0 14px;
}

.co-newsletter-prose ul,
.co-newsletter-prose ol {
  font-size: 15px;
  line-height: 1.65;
  padding-left: 22px;
  margin: 0 0 14px;
}

.co-newsletter-items {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px;
  display: grid;
  gap: 14px;
}

.co-newsletter-item {
  background: var(--co-stone);
  border: 1px solid var(--co-hairline);
  border-radius: 10px;
  padding: 16px 18px;
}

.co-newsletter-item-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--co-near-black);
  margin: 6px 0 8px;
  letter-spacing: -0.01em;
}

.co-newsletter-item-link {
  color: var(--co-action-blue);
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
}

.co-newsletter-item-link:hover {
  text-decoration: underline;
}

.co-item-edit {
  background: var(--co-canvas);
  border: 1px solid var(--co-hairline);
  border-radius: 10px;
  padding: 14px 16px;
}

.co-item-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* --------------------------------------------------------------------- *
 * Sidebar icons + collapsible state.
 *
 * Every nav item now leads with an inline SVG (.co-sidebar-item-icon).
 * The expanded sidebar renders icon + label side by side; the collapsed
 * sidebar (`.co-app.is-sidebar-collapsed`) narrows the grid column,
 * hides label/heading/status text, and centers the icon. State is
 * persisted in `localStorage["sidebar-collapsed"]` and applied pre-
 * paint by the FOUC-guard script in base.html.
 * --------------------------------------------------------------------- */

.co-sidebar-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.co-sidebar-item-icon svg { width: 18px; height: 18px; display: block; }
.co-sidebar-item-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Top row of the sidebar — brand on the left, collapse toggle on the
   right. Replaces the old standalone .co-sidebar-brand row. */
.co-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 14px 22px;
  border-bottom: 1px solid var(--co-hairline);
}
.co-sidebar-top .co-sidebar-brand {
  padding: 0;
  border-bottom: 0;
  flex: 1;
  min-width: 0;
}

.co-sidebar-collapse {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--co-hairline);
  border-radius: var(--co-radius-xs);
  background: var(--co-canvas);
  color: var(--co-slate);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 120ms ease, color 120ms ease;
}
.co-sidebar-collapse:hover {
  background: var(--co-stone);
  color: var(--co-near-black);
}
.co-sidebar-collapse-icon { width: 14px; height: 14px; display: block; }

/* Library tabs — icon + label, side by side. */
.co-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.co-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}
.co-tab-icon svg { width: 15px; height: 15px; display: block; }

/* ─── Collapsed sidebar ─────────────────────────────────────────────── */

/* `data-sidebar-collapsed` is set by the FOUC-guard in <head> *before*
   first paint; it applies the same narrow grid as the JS-applied class
   so the user never sees a wide sidebar flash. The JS toggle then
   toggles `.is-sidebar-collapsed` on `.co-app` (and rewrites the
   attribute) for subsequent flips. */
html[data-sidebar-collapsed="1"] .co-app,
.co-app.is-sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-top {
  padding: 14px 8px;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-brand {
  padding: 0;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-collapse-icon {
  transform: rotate(180deg);
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-nav {
  padding: 12px 8px 18px;
  gap: 14px;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-heading { display: none; }
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-section {
  align-items: center;
  gap: 4px;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-section + .co-sidebar-section {
  border-top: 1px solid var(--co-hairline);
  padding-top: 14px;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-item {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-item-text,
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-item .co-status {
  display: none;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-item-label {
  gap: 0;
  justify-content: center;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-foot {
  padding: 12px 8px 18px;
  align-items: center;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-foot-name,
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-foot-meta,
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-foot-label {
  display: none;
}
html[data-sidebar-collapsed="1"] .co-app .co-sidebar-feedback {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}
@media (max-width: 900px) {
  .co-app.is-sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
}

.co-app.is-sidebar-collapsed .co-sidebar-top {
  padding: 14px 8px;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.co-app.is-sidebar-collapsed .co-sidebar-brand-name { display: none; }
.co-app.is-sidebar-collapsed .co-sidebar-brand {
  padding: 0;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
}
.co-app.is-sidebar-collapsed .co-sidebar-collapse-icon {
  transform: rotate(180deg);
}

.co-app.is-sidebar-collapsed .co-sidebar-nav {
  padding: 12px 8px 18px;
  gap: 14px;
}
.co-app.is-sidebar-collapsed .co-sidebar-heading { display: none; }
.co-app.is-sidebar-collapsed .co-sidebar-section {
  align-items: center;
  gap: 4px;
}
.co-app.is-sidebar-collapsed .co-sidebar-section + .co-sidebar-section {
  border-top: 1px solid var(--co-hairline);
  padding-top: 14px;
}

.co-app.is-sidebar-collapsed .co-sidebar-item {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}

/* ──────────────────────────────────────────────────────────
   Editor v2 — "Colorful redesign" shape
   Used by blog/email/newsletter editors. Reference design:
   Klypup Colorful (V1 · Grid Dashboard editor variant).

   Layout: two columns (1fr 320px) — article on the left,
   right rail with metadata / tags / publish-targets / tone
   suggestions. Top of the article column has a frosted
   formatting toolbar with H1/H2/B/I/Quote/Code + a Cohere
   pill on the left, a DRAFT chip + Edit/Preview toggle on
   the right.

   Edit mode shows the textarea body; Preview swaps it for
   rendered prose. The kicker pill, title, summary, byline,
   and right rail are visible in both modes.
   ────────────────────────────────────────────────────────── */

.co-editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 960px) {
  .co-editor-shell {
    grid-template-columns: 1fr;
  }
}

.co-editor-article {
  min-width: 0;
}

/* ── Formatting toolbar ──────────────────────────────────── */
.co-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  background: var(--co-canvas, #fff);
  border: 1px solid var(--co-hairline);
  border-radius: 999px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.co-editor-toolbar-group {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  background: var(--co-near-black, #111);
  border-radius: 999px;
  color: var(--co-canvas, #fff);
  gap: 0;
}
.co-editor-tool {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease;
  line-height: 1;
}
.co-editor-tool:hover {
  background: rgba(255,255,255,0.10);
}
.co-editor-tool b, .co-editor-tool i {
  font-style: italic;
}
.co-editor-tool[data-md-wrap="`"] {
  font-family: var(--co-font-mono, ui-monospace, monospace);
  font-size: 11px;
}
.co-editor-tool sub {
  font-size: 0.7em;
  vertical-align: baseline;
  position: relative;
  bottom: -0.3em;
  margin-left: 1px;
}
.co-editor-tool-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.20);
  margin: 0 4px;
}

.co-editor-cohere-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--co-hairline);
  color: var(--co-ink, #111);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease;
}
.co-editor-cohere-pill:hover {
  background: var(--co-hover-wash, rgba(0,0,0,0.04));
}
.co-editor-cohere-pill svg {
  color: #E040C0; /* magenta from the palette */
}

.co-editor-toolbar-spacer {
  flex: 1;
}

.co-editor-draft-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 78, 138, 0.10);
  color: #D63365;
  border: 1px solid rgba(255, 78, 138, 0.30);
  font-family: var(--co-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ── Mode toggle ─────────────────────────────────────────── */
.co-mode-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--co-hover-wash, rgba(0,0,0,0.05));
  border: 1px solid var(--co-hairline);
  border-radius: 999px;
  gap: 2px;
}
.co-mode-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--co-slate, #666);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.co-mode-toggle-btn:hover { color: var(--co-near-black, #111); }
.co-mode-toggle-btn.is-active {
  background: var(--co-canvas, #fff);
  color: var(--co-near-black, #111);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

/* ── Article column inline title / summary / byline ───────── */
.co-editor-kicker {
  margin-bottom: 18px;
}
.co-editor-kicker-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(138, 77, 255, 0.14);
  color: #5C2DA8;
  font-family: var(--co-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.co-editor-kicker-pill[data-glow="violet"] { background: rgba(138, 77, 255, 0.14); color: #5C2DA8; }
.co-editor-kicker-pill[data-glow="indigo"] { background: rgba(53, 82, 242, 0.12);  color: #1E2E8F; }
.co-editor-kicker-pill[data-glow="rose"]   { background: rgba(255, 78, 138, 0.14); color: #8A1A4A; }
.co-editor-kicker-pill[data-glow="sage"]   { background: rgba(46, 199, 158, 0.14); color: #0E4B3A; }
.co-editor-kicker-pill[data-glow="amber"]  { background: rgba(255, 138, 46, 0.14); color: #6A2A0A; }
.co-editor-kicker-pill[data-glow="teal"]   { background: rgba(20, 184, 196, 0.14); color: #0C3940; }

.co-editor-title-input,
.co-editor-summary-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--co-font-body);
  color: var(--co-near-black, #111);
  outline: 0;
  resize: none;
  overflow: hidden; /* hide scrollbar — JS auto-grows the box on input */
  overflow-wrap: break-word;
}
.co-editor-title-input {
  /* Caps at 40px so a long title ("Deploy Production-Ready Cloud in
     72 Hours—Not Months") wraps to two lines instead of overflowing.
     The element is a <textarea> with rows="1" + JS auto-grow. */
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.co-editor-title-input::placeholder { color: var(--co-ink-dim); }

.co-editor-summary-input {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--co-slate, #555);
  margin-bottom: 24px;
}
.co-editor-summary-input::placeholder { color: var(--co-ink-dim); }

.co-editor-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--co-hairline);
  color: var(--co-slate, #777);
  font-size: 13px;
}
.co-editor-byline-avatar {
  width: 26px; height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  background: radial-gradient(circle at 30% 30%, #8A4DFF, #2E1466 80%);
  flex-shrink: 0;
}
.co-editor-byline-avatar[data-glow="violet"] { background: radial-gradient(circle at 30% 30%, #8A4DFF, #2E1466 80%); }
.co-editor-byline-avatar[data-glow="indigo"] { background: radial-gradient(circle at 30% 30%, #3552F2, #0E1A55 80%); }
.co-editor-byline-avatar[data-glow="rose"]   { background: radial-gradient(circle at 30% 30%, #FF4E8A, #8A1A4A 80%); }
.co-editor-byline-name { font-weight: 500; color: var(--co-ink, #111); }
.co-editor-byline-sep  { color: var(--co-ink-dim, #aaa); }

/* ── Body editor pane (Edit vs Preview) ──────────────────── */
.co-editor-pane--edit,
.co-editor-pane--preview { display: none; }
.co-editor-shell[data-mode="edit"]    .co-editor-pane--edit    { display: block; }
.co-editor-shell[data-mode="preview"] .co-editor-pane--preview { display: block; }

.co-editor-body-textarea {
  width: 100%;
  min-height: 480px;
  border: 1px solid var(--co-hairline);
  border-radius: 16px;
  padding: 22px;
  background: var(--co-surface, #fff);
  font-family: var(--co-font-mono, ui-monospace, monospace);
  font-size: 14px;
  line-height: 1.65;
  color: var(--co-ink);
  outline: 0;
  resize: vertical;
}
.co-editor-body-textarea:focus {
  border-color: var(--co-near-black, #111);
}

.co-editor-pane--preview { padding-top: 4px; }

.co-editor-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--co-hairline);
}
@media (max-width: 720px) {
  .co-editor-cta-row { grid-template-columns: 1fr; }
}

/* ── Right rail ──────────────────────────────────────────── */
.co-editor-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
}
@media (max-width: 960px) {
  .co-editor-rail { position: static; }
}

.co-editor-rail-card {
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--co-surface, #fff);
  border: 1px solid var(--co-hairline);
}
.co-editor-rail-card.is-tighten {
  background: linear-gradient(160deg, #FF4E8A 0%, #B62352 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 16px 40px -22px rgba(255, 78, 138, 0.45);
}
.co-editor-rail-title {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
}
.co-editor-rail-body {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}
.co-editor-rail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.co-editor-chip {
  appearance: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.30);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease;
}
.co-editor-chip:hover { background: rgba(255,255,255,0.30); }
.co-editor-chip.is-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.40);
}

.co-editor-rail-label {
  margin: 0 0 12px;
  font-family: var(--co-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--co-muted-slate, #888);
}

.co-editor-rail-rows {
  display: grid;
  gap: 10px;
  margin: 0;
}
.co-editor-rail-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.co-editor-rail-rows dt {
  font-family: var(--co-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--co-muted-slate, #888);
}
.co-editor-rail-rows dd {
  margin: 0;
  font-size: 13px;
  color: var(--co-ink, #111);
  text-align: right;
}
.co-editor-rail-score {
  font-family: var(--co-font-mono, ui-monospace, monospace);
  color: #1F9D6C;
  font-weight: 600;
}

.co-editor-rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.co-editor-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--co-hover-wash, rgba(0,0,0,0.05));
  color: var(--co-ink, #111);
  border: 1px solid transparent;
}
.co-editor-tag[data-glow="indigo"]  { background: rgba(53,82,242,0.10);   color: #1E2E8F; }
.co-editor-tag[data-glow="sage"]    { background: rgba(46,199,158,0.12);  color: #0E4B3A; }
.co-editor-tag[data-glow="teal"]    { background: rgba(20,184,196,0.12);  color: #0C3940; }
.co-editor-tag[data-glow="rose"]    { background: rgba(255,78,138,0.12);  color: #8A1A4A; }
.co-editor-tag[data-glow="amber"]   { background: rgba(255,138,46,0.14);  color: #6A2A0A; }
.co-editor-tag[data-glow="violet"]  { background: rgba(138,77,255,0.12);  color: #5C2DA8; }
.co-editor-tag[data-glow="magenta"] { background: rgba(224,64,192,0.12);  color: #5C1448; }
.co-editor-tag[data-glow="citrine"] { background: rgba(232,197,58,0.20);  color: #5A4810; }
.co-editor-tag.is-add {
  background: transparent;
  border: 1px dashed var(--co-hairline);
  color: var(--co-slate, #777);
  cursor: pointer;
}
.co-editor-tag-input {
  /* Inline tag-naming input that swaps in for the + add button when
     clicked. Matches the chip's pill shape so the row keeps its rhythm. */
  appearance: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--co-near-black, #111);
  background: var(--co-canvas, #fff);
  color: var(--co-ink, #111);
  font: inherit;
  font-size: 12px;
  outline: 0;
  min-width: 80px;
  max-width: 140px;
}

.co-editor-rail-targets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.co-editor-rail-targets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.co-editor-target-swatch {
  width: 18px; height: 14px;
  border-radius: 4px;
  display: inline-block;
  flex-shrink: 0;
}
.co-editor-target-swatch[data-glow="violet"]  { background: linear-gradient(135deg,#8A4DFF,#2E1466); }
.co-editor-target-swatch[data-glow="rose"]    { background: linear-gradient(135deg,#FF4E8A,#8A1A4A); }
.co-editor-target-swatch[data-glow="indigo"]  { background: linear-gradient(135deg,#3552F2,#0E1A55); }
.co-editor-target-swatch[data-glow="citrine"] { background: linear-gradient(135deg,#E8C53A,#5A4810); }
.co-editor-target-swatch[data-glow="amber"]   { background: linear-gradient(135deg,#FF8A2E,#6A2A0A); }
.co-editor-target-swatch[data-glow="sage"]    { background: linear-gradient(135deg,#2EC79E,#0E4B3A); }
.co-editor-target-swatch[data-glow="teal"]    { background: linear-gradient(135deg,#14B8C4,#0C3940); }
.co-editor-target-swatch[data-glow="magenta"] { background: linear-gradient(135deg,#E040C0,#5C1448); }
.co-editor-target-name { flex: 1; }

/* iOS-style toggle */
.co-editor-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
}
.co-editor-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.co-editor-toggle span {
  position: absolute;
  inset: 0;
  background: var(--co-hover-wash, rgba(0,0,0,0.18));
  border-radius: 999px;
  transition: background 160ms ease;
  cursor: pointer;
}
.co-editor-toggle span::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: #fff;
  top: 2px; left: 2px;
  transition: left 160ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.20);
}
.co-editor-toggle input:checked + span {
  background: linear-gradient(135deg, #2EC79E 0%, #1F9D6C 100%);
}
.co-editor-toggle input:checked + span::after {
  left: 16px;
}

/* Aurora overrides — rail cards lean on the glass fill so they
   read as frosted on the bloom canvas. */
[data-web-theme^="aurora-"] .co-editor-rail-card:not(.is-tighten) {
  background: var(--aurora-glass-fill);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
[data-web-theme^="aurora-"] .co-editor-toolbar {
  background: var(--aurora-glass-fill);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
[data-web-theme^="aurora-"] .co-editor-body-textarea {
  background: var(--aurora-glass-fill);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.co-app.is-sidebar-collapsed .co-sidebar-item-text,
.co-app.is-sidebar-collapsed .co-sidebar-item .co-status {
  display: none;
}
.co-app.is-sidebar-collapsed .co-sidebar-item-label {
  gap: 0;
  justify-content: center;
}

.co-app.is-sidebar-collapsed .co-sidebar-foot {
  padding: 12px 8px 18px;
  align-items: center;
}
.co-app.is-sidebar-collapsed .co-sidebar-foot-name,
.co-app.is-sidebar-collapsed .co-sidebar-foot-meta,
.co-app.is-sidebar-collapsed .co-sidebar-foot-label {
  display: none;
}
.co-app.is-sidebar-collapsed .co-sidebar-feedback {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}