/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   Zero Human Company — Editorial Atelier
   --------------------------------------------------------------
   A print-inspired system. Warm greige paper, high-contrast
   display italic for editorial drama, a workhorse serif body
   with optical sizing, tabular-figure mono for technical columns.
   Quiet hairlines. Sparing vermillion accent. Generous rhythm.
   ============================================================ */

:root {
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --font-body: "Baskerville", "Iowan Old Style", "Georgia", "Times New Roman", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", "Menlo", "Monaco", "Courier New", monospace;

  /* Surfaces */
  --paper:        #ebe7dd;
  --paper-2:      #e3dfd2;
  --paper-sunk:   #d9d4c3;
  --paper-hi:     #f3f0e6;

  /* Ink */
  --ink:          #151410;
  --ink-2:        #413e35;
  --ink-3:        #7b776b;
  --ink-faint:    #9e9a8c;

  /* Rules */
  --rule:         #b8b4a6;
  --rule-soft:    #cdc9bc;
  --rule-strong:  #1a1914;

  /* Accent — editorial vermillion, used sparingly */
  --accent:       #8a3828;
  --accent-ink:   #6a2b1f;
  --accent-soft:  #ead9c8;

  /* Status */
  --ok:           #3c6c3a;
  --warn:         #8a6b1e;
  --err:          #8f2a22;

  /* Type stacks */
  --ff-display: var(--font-display), 'Cormorant Garamond', 'Times New Roman', 'Songti SC', 'STSong', serif;
  --ff-body:    var(--font-body), 'Cormorant', 'Georgia', 'Source Han Serif SC', 'Noto Serif CJK SC', serif;
  --ff-mono:    var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
  --ff-cjk:     'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', sans-serif;

  /* Scale — semi-geometric 1.28 ish */
  --t-00: 10.5px;
  --t-0:  11.5px;
  --t-1:  13px;
  --t-2:  15px;        /* body */
  --t-3:  17px;
  --t-4:  22px;
  --t-5:  29px;
  --t-6:  42px;
  --t-7:  64px;
  --t-8:  92px;
  --t-9:  124px;

  /* Rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 26px;
  --sp-6: 38px;
  --sp-7: 56px;
  --sp-8: 84px;

  /* Motion */
  --easing: cubic-bezier(0.2, 0.7, 0.1, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--ff-body);
  font-size: var(--t-2);
  line-height: 1.55;
  font-feature-settings: "liga", "clig", "onum", "kern";
  font-variation-settings: "opsz" 12, "SOFT" 30;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Very faint paper grain via layered linear gradients */
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(0,0,0,0.025), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-blend-mode: normal, normal, multiply;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: rgba(138,56,40,0.18); color: var(--ink); }

/* ------------------------------------------------------------
   Shell + masthead + topbar (editorial console)
------------------------------------------------------------ */
.shell { min-height: 100vh; }

/* Running head above the console strip (wired into existing dashboard topbar) */
.topbar-wrap {
  position: relative;
  height: 64px;
  z-index: 35;
}
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  --topbar-open-height: 260px;
  background: #15120c;
  color: #e2dcc8;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  /* Collapsed state: header strip + a single latest log line. The whole
     strip is the affordance, so it opens on single click instead of
     relying on a small control inside the bar. */
  height: 64px;
  overflow: hidden;
  border-bottom: 1px solid #0b0906;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  transition:
    height 320ms cubic-bezier(0.22, 0.74, 0.2, 1),
    background 220ms var(--easing),
    box-shadow 320ms var(--easing);
  will-change: height;
}
.topbar.is-collapsed {
  cursor: pointer;
}
.topbar.is-collapsed:hover {
  background: #19150e;
}
.topbar.is-collapsed:focus-visible {
  outline: 1px solid #8a8268;
  outline-offset: -1px;
}
.topbar.is-expanded {
  height: var(--topbar-open-height);
  cursor: default;
  box-shadow: inset 0 -12px 22px rgba(0, 0, 0, 0.16);
  z-index: 36;
}
.topbar::before {
  content: "CONSOLE / EVENTS";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: block;
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: #8a8268;
  text-transform: uppercase;
  padding: 8px 28px 7px;
  background: linear-gradient(#120f09, #15120c);
  border-bottom: 1px solid #2a2519;
  font-variation-settings: "opsz" 9, "SOFT" 10;
  pointer-events: none;
}
.topbar-log {
  padding: 32px 28px 8px;
  box-sizing: border-box;
  transition:
    padding 320ms cubic-bezier(0.22, 0.74, 0.2, 1),
    opacity 220ms var(--easing),
    transform 320ms cubic-bezier(0.22, 0.74, 0.2, 1);
  contain: layout paint style;
}
.topbar-log.is-collapsed {
  height: 64px;
  overflow: hidden;
  opacity: 0.96;
}
.topbar-log::-webkit-scrollbar { width: 10px; height: 10px; }
.topbar-log::-webkit-scrollbar-thumb { background: #2f2a1c; border: 3px solid #15120c; border-radius: 0; }
.topbar-log::-webkit-scrollbar-track { background: #15120c; }
.topbar-log.is-expanded {
  height: var(--topbar-open-height);
  overflow-y: auto;
  padding: 38px 28px 14px;
  overscroll-behavior: contain;
}

.topbar-log-content {
  transition:
    opacity 260ms var(--easing),
    transform 320ms cubic-bezier(0.22, 0.74, 0.2, 1);
}
.topbar-log-content.is-collapsed {
  opacity: 0.94;
  transform: translateY(0);
}
.topbar-log-content.is-expanded {
  opacity: 1;
  transform: translateY(0);
  animation: zhc-topbar-reveal 260ms cubic-bezier(0.22, 0.74, 0.2, 1);
}

@keyframes zhc-topbar-reveal {
  from {
    opacity: 0.01;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.log-line {
  margin: 0 0 5px 0;
  white-space: pre-wrap;
  color: #d8d2bd;
  content-visibility: auto;
  contain-intrinsic-size: 20px;
}
.log-line::before {
  content: "·";
  color: #8a3828;
  margin-right: 10px;
}
/* When the line carries a semantic icon span, drop the ::before bullet
   so we don't show two marks before the time/text. */
.log-line:has(.log-icon)::before {
  content: none;
}
.log-icon {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  margin-right: 8px;
  color: #cbb97a;
  font-family: var(--ff-mono);
}
.log-time {
  color: #8a8268;
  font-size: 10.5px;
  margin-right: 8px;
}
.topbar-bar {
  position: absolute;
  top: 4px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: rgba(244, 240, 232, 0.92);
  color: #15120c;
  font-family: var(--ff-mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  margin: 0;
  transition: transform 160ms var(--easing), background 160ms var(--easing);
}
.topbar-close:hover {
  background: #fff;
  transform: scale(1.04);
}
.topbar-close:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 2px;
}
.app-error {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 28px;
  background: var(--accent);
  color: var(--paper-hi);
  font-family: var(--ff-body);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-variation-settings: "opsz" 11, "SOFT" 30;
  border-bottom: 1px solid var(--accent-ink);
  animation: zhc-lift 240ms var(--easing) both;
}
.app-error-close {
  flex: none;
  background: transparent;
  border: 0;
  color: var(--paper-hi);
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.8;
}
.app-error-close:hover { opacity: 1; }
@media (max-width: 860px) {
  .app-error { padding: 8px 16px; }
}

.briefing-card {
  padding: 18px 22px 20px;
}
/* Panel-header eyebrow — unified with .sub-title / .chat-log h3 / .eyebrow
   so every section/panel title across the dashboard reads in the same
   small-caps editorial register. Previously this h3 rendered as a 22-24px
   display-italic headline (via the generic .card h3 rule below), which
   clashed visually with the small-caps "Sites" / "Email" / "对话" headers.
   Selector is `.card.briefing-card h3` to win specificity against
   `.card h3` which is declared later in this file. */
.card.briefing-card h3 {
  font-family: var(--ff-body);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  font-variation-settings: "opsz" 9, "SOFT" 20;
  margin: 0;
}
.schedule-pill {
  display: inline-block;
  margin: 6px 0 4px;
  padding: 2px 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* Recurring tasks promote next_run to a primary metadata line — pill
   reads as accent-bordered + dark ink so it stands out against one-shot
   cards (which only show created_at). The visual contrast lets the user
   spot "this thing fires automatically" at a glance. */
.schedule-pill.is-prominent {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--accent);
  border-left-width: 2px;
}
/* A subtle left rail on recurring task cards, mirroring the prominent
   pill — reinforces "this fires forever" at the card level. */
.card.is-recurring {
  border-left: 2px solid var(--accent);
}
.tiny {
  font-size: 11px;
  letter-spacing: 0.02em;
}
.nudge-btn {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0;
  padding: 4px 14px;
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.nudge-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--paper-hi);
}
.nudge-btn:disabled {
  opacity: 0.55;
  cursor: progress;
}
/* Sits under the Tasks section title — keeps the Nudge button as a quiet
   secondary action below the masthead-style heading rather than crammed
   on the same row. */
.nudge-row {
  display: flex;
  justify-content: flex-start;
  margin: 8px 0 14px;
}
.task-viewall {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  padding: 14px 2px;
  margin: 8px 0 16px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variation-settings: "opsz" 11, "SOFT" 40;
  transition: color 120ms ease, border-color 120ms ease;
}
.task-viewall:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.task-viewall-arrow {
  font-family: var(--ff-mono);
  font-size: 16px;
  letter-spacing: 0;
}

/* ------------------------------------------------------------
   Documents tree
------------------------------------------------------------ */
.doc-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 14px;
}
.doc-group {
  display: flex;
  flex-direction: column;
}
.doc-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 10px 12px 11px;
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--rule);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.doc-row:hover {
  background: var(--paper-hi);
  border-bottom-color: var(--accent);
}
.doc-row.is-nested {
  padding-left: 26px;
  position: relative;
}
.doc-row.is-nested::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 8px;
  height: 1px;
  background: var(--rule-strong);
}
.doc-row-name {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.doc-row-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-folder {
  display: flex;
  flex-direction: column;
}
.doc-folder-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 10px 2px 10px;
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variation-settings: "opsz" 11, "SOFT" 30;
  text-align: left;
}
.doc-folder.is-open .doc-folder-head {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.doc-folder-caret {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0;
  width: 12px;
  display: inline-block;
}
.doc-folder-name {
  flex: 1 1;
}
.doc-folder-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.doc-folder.is-open .doc-folder-count {
  color: var(--accent);
}

/* Social rows (X / Bluesky / etc. accounts) */
.social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--rule);
}
.social-row-platform {
  font-size: 20px;
  width: 28px;
  text-align: center;
  color: var(--ink);
}
.social-row-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.social-row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.social-row-name {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.2;
}
.social-row-handle {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
/* Social content publishing panel */
.social-content-panel {
  padding: 16px;
  border-color: var(--rule);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 100%),
    var(--paper-hi);
}
.social-content-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.social-content-title {
  min-width: 0;
}
.social-content-title b {
  display: block;
  font-family: var(--ff-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}
.social-content-title p {
  margin: 6px 0 0;
}
.social-content-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.social-content-actions .button {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}
.social-content-actions .nudge-btn {
  font-family: var(--ff-body);
  font-style: normal;
  letter-spacing: 0.14em;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.social-content-actions .nudge-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-hi);
}
.social-platform-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
}
.social-platform-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.25);
}
.social-platform-card.is-connected {
  border-color: rgba(60, 108, 58, 0.34);
  background: rgba(60, 108, 58, 0.06);
}
.social-platform-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.social-platform-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.social-platform-name {
  font-size: 13px;
  line-height: 1.15;
  color: var(--ink);
}
.social-platform-handle {
  min-width: 0;
  color: var(--ink-3);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-platform-pill {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.24);
}
.social-platform-pill.is-connected {
  border-color: rgba(60, 108, 58, 0.3);
  color: var(--ok);
  background: rgba(60, 108, 58, 0.07);
}
/* New: one-row-per-platform social accounts card. Replaces the old
 * dual-action "立即生成 / 管理社媒连接" header — now each platform owns
 * its own row, with connect on the right when disconnected and disconnect
 * (dashed button) when connected.
 */
.social-accounts-card {
  padding: 10px 14px;
}
.social-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px dashed var(--rule-soft);
}
.social-account-row:last-child {
  border-bottom: none;
}
.social-account-row.is-connected .social-account-name {
  color: var(--ink);
}
.social-account-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.social-account-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.social-account-name {
  font-family: var(--ff-display);
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.social-account-handle {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.social-account-right .button {
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 8px 14px;
}

/* Per-platform auto-publish timeline (sits inside the special-auto-card,
 * below the schedule controls). Mirrors the editorial vibe of the rest of
 * the dashboard — no avatars, no heavy UI: dashed rules, mono metadata.
 */
.social-auto-empty {
  margin: 8px 0 0;
  padding: 10px 0;
  border-top: 1px dashed var(--rule-soft);
}
.social-auto-timeline {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px dashed var(--rule-soft);
}
.social-auto-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.social-auto-item:last-child {
  border-bottom: none;
}
.social-auto-item-media img,
.social-auto-item-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 16px;
}
.social-auto-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.social-auto-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.social-auto-pill {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.24);
}
.social-auto-pill.is-published {
  border-color: rgba(60, 108, 58, 0.36);
  color: var(--ok);
  background: rgba(60, 108, 58, 0.07);
}
.social-auto-pill.is-publishing {
  border-color: rgba(214, 152, 71, 0.36);
  color: var(--accent);
  background: rgba(214, 152, 71, 0.07);
}
.social-auto-pill.is-failed {
  border-color: rgba(208, 74, 74, 0.36);
  color: #a13a3a;
  background: rgba(208, 74, 74, 0.06);
}
/* Rejected — manual mode user clicked discard. Communicate "shelved,
 * not failed": gray + dashed border + faint strikethrough on the pill
 * label so it reads as "shelved" at a glance. */
.social-auto-pill.is-rejected {
  border-style: dashed;
  border-color: var(--rule);
  color: var(--ink-3);
  background: transparent;
  text-decoration: line-through;
  -webkit-text-decoration-color: var(--rule);
          text-decoration-color: var(--rule);
}
/* Pending review (manual mode, not yet approved) — dim accent. */
.social-auto-pill.is-idle {
  border-color: rgba(214, 152, 71, 0.28);
  color: var(--accent);
  background: rgba(214, 152, 71, 0.05);
}
.social-auto-item-text {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.social-auto-item-hashtags {
  margin: 2px 0 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-3);
  word-break: break-all;
}
.social-auto-item-link {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ok);
  text-decoration: none;
  border-bottom: 1px solid rgba(60, 108, 58, 0.4);
  align-self: flex-start;
  margin-top: 4px;
}
.social-auto-item-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.social-auto-item-error {
  margin: 4px 0 0;
  padding: 6px 10px;
  border-left: 3px solid #d04a4a;
  background: rgba(208, 74, 74, 0.06);
  color: #a13a3a;
  font-size: 12px;
  line-height: 1.5;
}

/* Inline preview is clickable (opens history modal). Hover + focus
 * styling indicates affordance without being noisy. */
.social-auto-timeline.is-clickable {
  cursor: pointer;
}
.social-auto-timeline.is-clickable:hover .social-auto-item {
  background: rgba(214, 152, 71, 0.04);
}

/* Editable draft inside the timeline modal: pending-review items
 * become inline-editable so the user can tweak text + image prompt
 * before clicking 保存并发布. Read-only items use the existing
 * .social-auto-item-text styling unchanged. */
.social-auto-item.is-editable {
  background: rgba(214, 152, 71, 0.04);
  border: 1px dashed rgba(214, 152, 71, 0.36);
  border-radius: 6px;
  padding: 10px;
  /* Override the dashed bottom rule the unedited variant provides — the
   * full border above already separates rows. */
  border-bottom: 1px dashed rgba(214, 152, 71, 0.36);
}
.social-auto-item-edit-text {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 8px 10px;
  resize: vertical;
}
.social-auto-item-edit-text:focus {
  outline: none;
  border-color: var(--accent);
}
.social-auto-item-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.social-run-summary {
  margin-top: 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--rule-soft);
  border-bottom: 1px dashed var(--rule-soft);
  color: var(--ink-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  line-height: 1.35;
}
.ig-draft-batches {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.ig-draft-batch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ig-draft-batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0 0;
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.ig-draft-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
  gap: 8px;
}
.ig-draft-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  padding: 10px;
  align-items: start;
  overflow: hidden;
}
.ig-draft-card.is-expanded {
  grid-template-columns: 1fr;
}
.ig-draft-card.is-failed {
  border-color: #d8a3a3;
  opacity: 0.85;
}
.ig-draft-media {
  position: relative;
  width: 84px;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
}
.ig-draft-card.is-expanded .ig-draft-media {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.ig-draft-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ig-draft-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  font-size: 13px;
}
.ig-draft-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(26, 127, 55, 0.85);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.ig-draft-badge.is-failed {
  background: rgba(176, 42, 55, 0.85);
}
.ig-draft-type-badge {
  display: none;
}
.ig-draft-body {
  min-width: 0;
}
.ig-draft-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  min-width: 0;
}
.ig-target-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.ig-target-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  max-width: 100%;
  padding: 0 7px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.24);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.ig-target-pill.is-published {
  border-color: rgba(26, 127, 55, 0.25);
  color: #1a7f37;
  background: rgba(26, 127, 55, 0.06);
}
.ig-target-pill.is-publishing {
  border-color: rgba(136, 98, 14, 0.28);
  color: #7a5406;
  background: rgba(136, 98, 14, 0.07);
}
.ig-target-pill.is-failed {
  border-color: rgba(176, 42, 55, 0.28);
  color: #b02a37;
  background: rgba(176, 42, 55, 0.06);
}
.ig-draft-copy-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}
.ig-copy-block {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--rule-soft);
  border-radius: 5px;
  background: rgba(235, 231, 221, 0.64);
}
.ig-draft-caption {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.ig-draft-card:not(.is-expanded) .ig-draft-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ig-draft-card:not(.is-expanded) .ig-copy-block.is-x .ig-draft-caption {
  -webkit-line-clamp: 2;
}
.ig-copy-label {
  display: block;
  margin: 0 0 4px;
  color: var(--ink-2);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  text-transform: uppercase;
}
.ig-draft-hashtags {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--ink-2);
  word-break: break-word;
}
.ig-draft-card:not(.is-expanded) .ig-draft-hashtags {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.ig-draft-error {
  margin: 6px 0 0;
  font-size: 11px;
  color: #b02a37;
  word-break: break-word;
}
.ig-draft-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ig-expand-btn {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}
.ig-expand-btn:hover {
  color: var(--ink);
}
.ig-publish-btn {
  padding: 7px 9px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.ig-post-link,
.ig-published-text {
  display: inline-flex;
  max-width: 100%;
  font-size: 11px;
  color: #1a7f37;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ig-post-link:hover {
  text-decoration: underline;
}
@media (max-width: 760px) {
  .ig-draft-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
  }
  .ig-draft-media {
    width: 78px;
  }
  .ig-draft-copy-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

/* Special automation cards (Email Outreach / Twitter Promotion) */
.special-auto-card {
  border-color: var(--rule-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.08) 100%),
    var(--paper-hi);
  padding: 14px 16px 12px;
}
.special-auto-card:hover {
  border-color: var(--rule-strong);
}
.special-auto-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* When the actions row + title together exceed available width
   * (typical for the 3-column dashboard at 1440 wide), wrap to a second
   * row so the title can stay single-line instead of breaking across
   * three lines like "INSTAGRAM / AUTO- / PUBLISH". */
  flex-wrap: wrap;
}
.special-auto-title {
  font-family: var(--ff-body);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  font-variation-settings: "opsz" 9, "SOFT" 20;
}
.special-auto-enabled {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.special-auto-enabled input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}
.special-auto-controls {
  margin-top: 8px;
}
.special-auto-controls input,
.special-auto-controls select {
  width: auto;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  border-color: var(--rule);
  border-bottom-color: var(--rule-strong);
  background: var(--paper);
}
.special-auto-controls input[type="time"] {
  min-width: 118px;
}
.special-auto-controls input[type="number"] {
  min-width: 76px;
}
.special-auto-controls .button {
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
}

/* ------------------------------------------------------------
   Special-automation card — labeled-form layout. The earlier flat
   row of bare inputs left users guessing what each field meant
   ("what's that 3?"). The grid below pairs every control with a
   left-column eyebrow label and an optional right-column hint —
   so each row reads as a sentence: "Schedule  [Daily ▾] at [09:00]".

   Title sits next to a small `?` icon. Hovering it surfaces a one-
   sentence explanation — keeps the card visually compact while still
   giving the user a "what does this thing actually do?" answer one
   pixel away. Long copy is no longer printed inline.
------------------------------------------------------------ */
.special-auto-titlewrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Stay on one line; whole row wraps via .special-auto-head's
   * flex-wrap when actions overflow available width. */
  flex-shrink: 0;
  white-space: nowrap;
}
.special-auto-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-3);
  cursor: help;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  transition: color 140ms var(--easing), border-color 140ms var(--easing);
}
.special-auto-help:hover,
.special-auto-help:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}
/* Custom tooltip — replaces the OS-default rendering of `title=` so the
   tip reads in the dashboard's editorial register (paper card, ink
   serif text, hairline border). Native `title` is preserved for
   accessibility / keyboard users; this one is the visual layer. */
.special-auto-help::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  width: max-content;
  max-width: 280px;
  padding: 8px 12px;
  background: var(--paper-hi);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  font-family: var(--ff-body);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms var(--easing), transform 140ms var(--easing);
  z-index: 5;
  box-shadow: 0 4px 18px rgba(21, 20, 16, 0.08);
}
.special-auto-help:hover::after,
.special-auto-help:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.special-auto-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-column-gap: 14px;
  column-gap: 14px;
  grid-row-gap: 10px;
  row-gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.special-auto-flabel {
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  font-variation-settings: "opsz" 9, "SOFT" 20;
  white-space: nowrap;
}
.special-auto-fcontrols {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.special-auto-fcontrols input,
.special-auto-fcontrols select {
  width: auto;
  margin: 0;
  padding: 7px 10px;
  font-size: 12.5px;
  border-color: var(--rule);
  border-bottom-color: var(--rule-strong);
  background: var(--paper);
}
.special-auto-fcontrols input[type="time"]   { min-width: 118px; }
.special-auto-fcontrols input[type="number"] { min-width: 72px; }
.special-auto-conj {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  font-family: var(--ff-display);
}
.special-auto-unit {
  font-size: 12.5px;
  color: var(--ink-2);
}
.special-auto-fhint {
  flex: 0 1 auto;
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  margin-left: 4px;
}
.special-auto-actions {
  display: flex;
  gap: 8px;
  margin: 4px 0 10px;
}
.special-auto-actions .button {
  padding: 8px 14px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
}
.special-auto-meta {
  margin-top: 10px !important;
  padding-top: 8px;
  border-top: 1px dashed var(--rule-soft);
  font-size: 11px;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Brand masthead / global header
------------------------------------------------------------ */
.masthead {
  position: relative;
  /* The shell-wide `zhc-lift` animation leaves a residual `transform` on
     every direct shell child, which silently turns each one into its own
     stacking context. Without an explicit z-index, .masthead and main
     both end up at z-auto and paint in DOM order — meaning the chat
     panel inside <main> covers the masthead's account dropdown.
     Bump masthead above main but stay below modals (z-40) + quota banner (z-50). */
  z-index: 30;
}
.title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 74px);
  letter-spacing: -0.012em;
  line-height: 0.94;
  margin: 10px 28px 0;
  color: var(--ink);
}

/* Branded masthead — once the user has a live deployment, the user's
   own brand becomes the headline and "Zero Human Company" drops to a
   small eyebrow beneath it, the way a magazine spine reads "Vogue /
   Condé Nast". The slug stays lowercase on purpose: a wordmark
   register, not a sentence. */
.title.title--branded {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 0; /* zero out the parent so children control sizing */
  line-height: 1;
}
.title-slug {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  /* Slightly smaller than the unbranded "Zero Human Company" headline so
     the imprint underneath has room and multi-segment slugs (e.g.
     `daypilot · ai`) don't run past the masthead's right edge. */
  font-size: clamp(32px, 4.6vw, 60px);
  letter-spacing: -0.012em;
  line-height: 0.96;
  color: var(--ink);
  text-transform: lowercase;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Imprint row — keeps the publishing-imprint label and the AI status
   pill on a single line beneath the slug, the way a magazine spine
   carries the imprint and the issue marker side by side. */
.title-imprint-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.title-imprint {
  font-family: var(--ff-body);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  font-variation-settings: "opsz" 9, "SOFT" 20;
  /* "─ ZERO HUMAN COMPANY" — short rule before the imprint reads like
     an editorial sign-off, matches the masthead aesthetic. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.title-imprint::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--ink-3);
}
/* When the status pill rides the imprint row, drop its standalone
   margin so it aligns to the imprint baseline. */
.title-imprint-row .masthead-status {
  margin: 0;
}

/* ------------------------------------------------------------
   AI status pill — live indicator under the masthead title showing
   whether the worker is actively running tasks. Replaces the previous
   "watch the topbar CLI log scroll" cue, which disappears when the
   topbar is collapsed.
------------------------------------------------------------ */
.masthead-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 28px 8px;
  padding: 2px 9px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  text-transform: lowercase;
}
.masthead-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ink-3);
}
.masthead-status.is-running {
  border-color: #1a7f37;
  color: #1a7f37;
}
.masthead-status.is-running .masthead-status-dot {
  background: #1a7f37;
  animation: zhc-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(26, 127, 55, 0.55);
}
@keyframes zhc-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(26, 127, 55, 0.55); }
  70%  { box-shadow: 0 0 0 8px  rgba(26, 127, 55, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(26, 127, 55, 0);    }
}
.title::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0 11px 10px;
  vertical-align: baseline;
  background: var(--accent);
  transform: rotate(45deg);
}
.masthead-meta {
  position: absolute;
  right: 28px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
/* Locale toggle in the masthead: same flat editorial treatment as the
   account chip — hairline-underlined, no fill, no border-box — so the
   two controls read as a paired settings cluster. */
.masthead-lang {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 4px 8px 5px;
  cursor: pointer;
  line-height: 1;
  transition: color 160ms var(--easing), border-color 160ms var(--easing);
}
.masthead-lang:hover,
.masthead-lang:focus-visible {
  color: var(--ink);
  border-color: var(--ink-2);
  outline: none;
}
/* The account chip — flat editorial: a hairline-underlined identifier
   with a slim chevron that flips when the dropdown is open. No fill, no
   filled hover, no border-box. Matches the masthead's print register. */
.masthead-account {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 4px 2px 5px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.masthead-account.is-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: color 160ms var(--easing), border-color 160ms var(--easing);
}
.masthead-account.is-button:hover,
.masthead-account.is-button.is-open,
.masthead-account.is-button:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
  outline: none;
}
.masthead-account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
/* Chevron drawn with two 1px hairlines + 45° rotation. Flips up when
   the dropdown is open. Uses currentColor so it inherits the chip's
   muted/active color shift automatically. */
.masthead-account-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px) translateX(-1px);
  transition: transform 160ms var(--easing);
  opacity: 0.7;
}
.masthead-account.is-button.is-open .masthead-account-caret,
.masthead-account.is-button:hover .masthead-account-caret {
  opacity: 1;
}
.masthead-account.is-button.is-open .masthead-account-caret {
  transform: rotate(-135deg) translateY(-1px) translateX(-1px);
}

/* Dropdown — flat panel, hairline rule, no shadow. Items render in the
   site's small-caps label register so they read as console actions, not
   form rows. Hover stays minimal (a left vermillion rule + ink color),
   no fill except the danger row which inverts on hover only. */
.masthead-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  z-index: 10;
  animation: zhc-lift 200ms var(--easing) both;
}
.masthead-menu-item {
  position: relative;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  font-variation-settings: "opsz" 9, "SOFT" 30;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  padding: 12px 16px 12px 18px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  transition: color 140ms var(--easing), padding-left 140ms var(--easing);
}
.masthead-menu-item:last-child {
  border-bottom: none;
}
.masthead-menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 160ms var(--easing);
}
.masthead-menu-item:hover,
.masthead-menu-item:focus-visible {
  color: var(--ink);
  padding-left: 22px;
  outline: none;
}
.masthead-menu-item:hover::before,
.masthead-menu-item:focus-visible::before {
  transform: scaleY(1);
}
.masthead-menu-item.is-danger {
  color: var(--accent);
}
.masthead-menu-item.is-danger:hover,
.masthead-menu-item.is-danger:focus-visible {
  color: var(--accent);
}
@media (max-width: 860px) {
  .masthead-meta {
    position: static;
    padding: 0 28px 18px;
    justify-content: flex-end;
  }
}

/* Small-caps editorial label */
.eyebrow,
.muted-label {
  font-family: var(--ff-body);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variation-settings: "opsz" 9, "SOFT" 20;
  font-weight: 500;
}

/* ------------------------------------------------------------
   Meta strip under the masthead (user + workspace + button)
------------------------------------------------------------ */
.shell > .row {
  padding: 0 28px 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
  gap: 14px;
  align-items: baseline;
}
.shell > .row > .muted {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ------------------------------------------------------------
   Grid — four editorial columns with hairline separators
------------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: 1.12fr 1.12fr 0.88fr 1.08fr;
  grid-gap: 0;
  gap: 0;
  padding: 0 28px 44px;
  transition: grid-template-columns 240ms var(--easing);
}
.grid.is-chat-collapsed {
  grid-template-columns: 1.18fr 1.08fr 1.1fr;
}
.grid > .col,
.grid > section,
.grid > aside {
  padding: 2px 18px 0;
  border-left: 1px solid var(--rule);
  min-width: 0;
}
.grid > :first-child { padding-left: 0; border-left: 0; }
.grid > :last-child { padding-right: 0; }

.col {
  border-top: none;
  position: relative;
}

.section-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1;
  letter-spacing: -0.005em;
  margin: 2px 0 18px;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-strong);
  position: relative;
}

.sub-title {
  font-family: var(--ff-body);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  font-variation-settings: "opsz" 9, "SOFT" 20;
  margin: 22px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
/* Nested-section letter (a/b/c/d) — appears at the right edge of the
   sub-title rule, mirroring how section-title's Roman numeral (Ⅰ/Ⅱ/Ⅲ)
   anchors the column. The two together make the hierarchy
   "column → sub-section" legible at a glance instead of leaving sub-titles
   visually flat against same-column section-titles. */
.sub-title::after {
  content: attr(data-sub);
  position: absolute;
  right: 0;
  bottom: 7px;
  font-family: var(--ff-body);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--ink-3);
  text-transform: lowercase;
  font-variation-settings: "opsz" 9, "SOFT" 20;
  opacity: 0.7;
}
.sub-title:not([data-sub])::after {
  content: none;
}
.section-title::after {
  content: attr(data-folio);
  position: absolute;
  right: 0;
  bottom: 11px;
  font-family: var(--ff-body);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-variation-settings: "opsz" 9, "SOFT" 20;
}

/* ------------------------------------------------------------
   Card — paper stock with a low-contrast frame
------------------------------------------------------------ */
.card {
  border: 1px solid var(--rule);
  background: var(--paper-hi);
  padding: 14px 16px;
  margin-bottom: 12px;
  position: relative;
  transition: border-color 180ms var(--easing), transform 180ms var(--easing);
}
.card:hover {
  border-color: var(--ink-2);
}
.card h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--t-4);
  line-height: 1.05;
  letter-spacing: -0.008em;
  margin: 0 0 8px;
  color: var(--ink);
}
.card p {
  margin: 0 0 6px;
  color: var(--ink-2);
  font-size: var(--t-2);
  line-height: 1.55;
}

/* ------------------------------------------------------------
   Muted / helper text
------------------------------------------------------------ */
.muted {
  color: var(--ink-3);
  font-size: var(--t-1);
  line-height: 1.55;
}

/* ------------------------------------------------------------
   Heading used on auth pages (e.g., auth-wrap h1) handled below
------------------------------------------------------------ */
.heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-7);
  line-height: 0.95;
  letter-spacing: -0.012em;
}

/* ------------------------------------------------------------
   Buttons
------------------------------------------------------------ */
.button {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 18px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  font-variation-settings: "opsz" 10, "SOFT" 30;
  transition: background 160ms var(--easing), color 160ms var(--easing), transform 120ms var(--easing);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.button:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-hi);
}
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Secondary / ghost button via borderStyle:dashed inline (mentor debug) */
button[style*="dashed"] {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px dashed var(--ink-2) !important;
  padding: 9px 16px !important;
  font-family: var(--ff-body);
  font-size: 11px !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 10, "SOFT" 20;
  transition: all 160ms var(--easing);
}
button[style*="dashed"]:hover:not(:disabled) {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* Anchor styled as button (Open your site ↗) */
a.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* ------------------------------------------------------------
   Row helper
------------------------------------------------------------ */
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------
   Inputs & textarea
------------------------------------------------------------ */
input, textarea, select, button {
  /* Browsers default form controls to the system UI font, breaking the
     editorial register on any control that doesn't carry a class with an
     explicit `font-family`. Inherit instead so `body { var(--ff-body) }`
     reaches every form element by default; classed controls (.button,
     .topbar-toggle, etc.) still override with their own choice. */
  font-family: inherit;
}
input, textarea, select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--ink);
  background: var(--paper-hi);
  font-family: var(--ff-body);
  font-size: var(--t-2);
  color: var(--ink);
  font-variation-settings: "opsz" 12, "SOFT" 30;
  outline: none;
  transition: border-color 160ms var(--easing), background 160ms var(--easing);
  margin: 8px 0 14px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ink);
  background: #fff;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); font-style: italic; }

label {
  font-family: var(--ff-body);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variation-settings: "opsz" 9, "SOFT" 20;
  font-weight: 500;
}

/* ------------------------------------------------------------
   Auth pages (login / signup) — editorial book cover feel
------------------------------------------------------------ */
.auth-wrap {
  max-width: 520px;
  margin: 9vh auto 6vh;
  padding: 52px 56px 44px;
  border: 1px solid var(--rule);
  background: var(--paper-hi);
  position: relative;
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.02), 0 30px 60px -40px rgba(20,16,10,0.2);
}
.auth-wrap::before {
  content: "ZERO · HUMAN · CO";
  position: absolute;
  top: 22px;
  left: 56px;
  right: 56px;
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variation-settings: "opsz" 9, "SOFT" 20;
}
.auth-wrap::after {
  content: "Ⅰ / Ⅲ";
  position: absolute;
  top: 22px;
  right: 56px;
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-3);
  font-variation-settings: "opsz" 9, "SOFT" 20;
}
/* Small language toggle pinned to the auth card's bottom-right corner.
   Hairline-bottom-rule style mirrors the masthead's account chip so the
   typography registers as a quiet metadata switch, not an action button. */
.auth-lang {
  position: absolute;
  bottom: 16px;
  right: 24px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 3px 4px 4px;
  cursor: pointer;
  line-height: 1;
  transition: color 160ms var(--easing), border-bottom-color 160ms var(--easing);
}
.auth-lang:hover,
.auth-lang:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
  outline: none;
}
.auth-wrap h1 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-7);
  line-height: 0.9;
  letter-spacing: -0.014em;
  margin: 22px 0 8px;
  color: var(--ink);
}
.auth-wrap h1::after {
  content: ".";
  color: var(--accent);
}
.auth-wrap > .muted {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 32px;
  font-variation-settings: "opsz" 9, "SOFT" 20;
}
.auth-wrap form { display: block; }
.auth-wrap form > button.button {
  margin-top: 10px;
  width: 100%;
  padding: 14px 18px;
  justify-content: center;
}
.auth-wrap > p:last-child {
  margin-top: 28px;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.auth-wrap > p:last-child a { color: var(--accent); font-style: italic; }
.auth-wrap > p:last-child a u { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ------------------------------------------------------------
   Onboarding — two-up editorial spread
   (page uses inline styles on buttons; we hook via attribute selectors)
------------------------------------------------------------ */
main[style*="860"] h1 {
  font-family: var(--ff-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 7vw, 76px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.012em !important;
  margin: 40px 0 14px !important;
  color: var(--ink);
}
main[style*="860"] h1::after {
  content: ".";
  color: var(--accent);
}
main[style*="860"] > p.muted {
  font-family: var(--ff-body);
  font-size: 11.5px !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2) !important;
  margin: 0 0 48px !important;
  font-variation-settings: "opsz" 9, "SOFT" 20;
}

main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] {
  gap: 0 !important;
}
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button {
  background: var(--paper-hi) !important;
  border: 1px solid var(--rule) !important;
  border-right: none !important;
  padding: 32px 28px 28px !important;
  min-height: 210px !important;
  position: relative;
  font-family: var(--ff-body);
  font-variation-settings: "opsz" 12, "SOFT" 30;
  transition: background 160ms var(--easing), border-color 160ms var(--easing);
}
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button:last-child {
  border-right: 1px solid var(--rule) !important;
}
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button:hover {
  background: var(--paper-2) !important;
  border-color: var(--ink-2) !important;
}
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button[style*="2px solid #111"],
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button[style*="2px solid rgb(17, 17, 17)"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button[style*="2px solid #111"] .muted,
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button[style*="2px solid rgb(17, 17, 17)"] .muted {
  color: var(--paper-sunk) !important;
}
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button > div:nth-child(1) {
  font-size: 34px !important;
  margin-bottom: 18px !important;
  filter: grayscale(0.15) contrast(0.92);
}
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button > div:nth-child(2) {
  font-family: var(--ff-display) !important;
  font-style: italic;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: -0.008em;
  margin-bottom: 8px;
  line-height: 1.1;
}
main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button > p {
  font-size: 12.5px !important;
  line-height: 1.55;
  margin: 8px 0 0 !important;
}

main[style*="860"] form > label {
  font-family: var(--ff-body);
  font-size: 10.5px !important;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px !important;
  font-variation-settings: "opsz" 9, "SOFT" 20;
}
main[style*="860"] form textarea {
  margin-top: 8px;
  min-height: 120px;
}

/* ------------------------------------------------------------
   Chat aside — "correspondence", not bubbles.
   Each message reads as a dated dispatch: small-caps eyebrow
   (sender + timestamp), a side hairline in the sender's tone,
   body in plain ink. Vermillion only appears on the user's side
   rule and the sender label — everything else stays muted.
------------------------------------------------------------ */
.chat-box {
  height: min(74vh, 820px);
  max-height: 74vh;
  border: 1px solid var(--rule);
  background: var(--paper-hi);
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 12px;
  overflow: hidden;
}
.chat-box-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #171717;
  color: #fff;
  font-family: var(--ff-mono);
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.5);
  transition: transform 160ms var(--easing), background 160ms var(--easing);
}
.chat-box-close:hover,
.chat-box-close:focus-visible {
  background: #000;
  transform: scale(1.04);
  outline: none;
}
.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 22px 18px;
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.62;
  scroll-behavior: smooth;
}
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }
.chat-log::-webkit-scrollbar-track { background: transparent; }
.chat-log h3 {
  font-family: var(--ff-body);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 56px 20px 0;
  font-weight: 500;
  font-variation-settings: "opsz" 9, "SOFT" 20;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: chat-status-pulse 1.4s ease-in-out infinite;
}
@keyframes chat-status-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

.chat-empty {
  margin: 24px 4px 0;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.chat-row {
  display: flex;
  margin: 0 0 18px;
}
.chat-row.is-user     { justify-content: flex-end; }
.chat-row.is-assistant { justify-content: flex-start; }

.chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 94%;
  min-width: 0;
}

.chat-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variation-settings: "opsz" 9, "SOFT" 20;
}
.chat-row.is-user .chat-eyebrow { justify-content: flex-end; }
.chat-sender {
  font-weight: 600;
  letter-spacing: 0.3em;
}
.chat-row.is-user .chat-sender { color: var(--accent); }
.chat-row.is-assistant .chat-sender { color: var(--ink-2); }
.chat-eyebrow-sep { opacity: 0.5; }
.chat-time-value {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.chat-line {
  margin: 0;
  padding: 2px 12px 2px 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: transparent;
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.62;
  border: 0;
}
.chat-line-user {
  border-right: 2px solid var(--accent);
  padding-right: 12px;
  padding-left: 14px;
  text-align: left;
}
.chat-line-assistant {
  border-left: 2px solid var(--ink-2);
  padding-left: 12px;
  padding-right: 14px;
}
.chat-line.is-streaming { color: var(--ink); }

.chat-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--accent);
  animation: chat-cursor-blink 0.9s steps(1, end) infinite;
}

/* Thinking trace — italic margin annotation, hairlines instead of a box. */
.chat-thinking {
  margin: 10px 0 18px;
  padding: 0 0 0 14px;
  border-left: 1px dashed var(--rule-strong);
  /* `flex` (not inline-flex) so the container fills the row width and the
     text child can shrink to apply ellipsis. */
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-family: var(--ff-body);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variation-settings: "opsz" 9, "SOFT" 20;
}
.chat-thinking-marker {
  flex: 0 0 auto;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--accent);
  margin-right: 2px;
}
.chat-thinking-text {
  /* Stays on one line; long thinking-trace strings get a trailing ellipsis
     instead of wrapping. Hover shows the full text via the parent's title. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-thinking-pulse {
  flex: 0 0 auto;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink-3);
  animation: chat-status-pulse 1.2s ease-in-out infinite;
}

.chat-input {
  border-top: 1px solid var(--rule-strong);
  padding: 16px 18px 18px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.chat-input-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.chat-attach-btn {
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: 16px;
  padding: 6px 12px;
  line-height: 1;
  color: var(--ink-2);
  transition: color 140ms var(--easing), border-color 140ms var(--easing);
}
.chat-attach-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
.chat-attach-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Counter pill rendered between the attach button and the send button when
 * the user has queued messages behind an in-flight reply. Mono digit, dim
 * accent — meant to be glanceable, not assertive. */
.chat-queue-indicator {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--accent);
  background: rgba(214, 152, 71, 0.10);
  border: 1px solid rgba(214, 152, 71, 0.36);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  margin-right: 4px;
  letter-spacing: 0.04em;
}

/* Inline text-link button in social-auto card heads — opens the brand
 * profile editor modal. Visually a text link with dashed underline (site
 * convention for editorial CTAs), behaves as a button. */
.brand-profile-link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px dashed var(--rule);
  line-height: 1.2;
}
.brand-profile-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* When the same link is repurposed as a "history with pending count"
 * indicator, color it accent + slightly heavier so the backlog is
 * obvious at a glance. */
.brand-profile-link.has-pending {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.chat-attachments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chat-attachment {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid var(--rule);
  background: var(--paper-hi);
  overflow: hidden;
}
.chat-attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-attachment.is-uploading::after,
.chat-attachment.is-error::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
}
.chat-attachment-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--ink-2);
  z-index: 2;
}
.chat-attachment-error {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #b02a37;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}
.chat-attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  z-index: 3;
  padding: 0;
}
.chat-attachment.is-error { border-color: #b02a37; }
.chat-input textarea {
  margin: 0;
  width: 100%;
  min-height: 76px;
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--ink-2);
  background: var(--paper-hi);
  padding: 12px 14px;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 140ms var(--easing), background 140ms var(--easing);
}
.chat-input textarea:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}
.chat-input textarea:disabled {
  background: var(--paper-sunk);
  color: var(--ink-3);
}
.chat-input .button {
  min-width: 180px;
  text-align: center;
  justify-content: center;
}

.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 34;
  width: 88px;
  height: 88px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.55);
  transition: transform 180ms var(--easing), box-shadow 180ms var(--easing), background 180ms var(--easing);
}
.chat-fab:hover,
.chat-fab:focus-visible {
  background: #000;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 22px 42px -18px rgba(0, 0, 0, 0.6);
  outline: none;
}
.chat-fab-icon {
  position: relative;
  width: 34px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-fab-bubble {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
}
.chat-fab-bubble::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: #fff;
  -webkit-clip-path: polygon(0 0, 100% 20%, 25% 100%);
          clip-path: polygon(0 0, 100% 20%, 25% 100%);
}

@keyframes chat-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ------------------------------------------------------------
   Task modal
------------------------------------------------------------ */
.task-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(21, 20, 16, 0.45);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.task-modal {
  width: min(1280px, 94vw);
  max-height: 90vh;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
}
.task-modal-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 36px 36px 20px;
  border-bottom: 1px solid var(--rule-strong);
}
.task-modal-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: -0.014em;
  line-height: 1;
  margin: 0;
}
.task-modal-title::after {
  content: ".";
  color: var(--accent);
}
.task-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  padding: 18px 36px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-hi);
}
.task-tab {
  border: 0;
  background: transparent;
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  padding: 0 0 8px;
  cursor: pointer;
  font-variation-settings: "opsz" 10, "SOFT" 20;
  transition: color 140ms var(--easing), border-color 140ms var(--easing);
}
.task-tab:hover { color: var(--ink); }
.task-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.task-modal-list {
  max-height: calc(90vh - 240px);
  overflow: auto;
  padding: 26px 36px 36px;
}
.task-modal-card {
  border: 1px solid var(--rule);
  background: var(--paper-hi);
  padding: 22px 24px 20px;
  margin-bottom: 16px;
}
.task-modal-card b {
  font-family: var(--ff-display) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 1.08;
  color: var(--ink);
}
.task-pill {
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 11px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--ff-body);
  color: var(--ink);
  font-variation-settings: "opsz" 9, "SOFT" 20;
  background: var(--paper);
}
/* Task kind eyebrow — small-caps vermillion mark before the task title.
   Replaces the previous emoji prefix; matches the editorial print register
   used elsewhere on the dashboard (eyebrows, section labels). */
.task-kind {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  font-variation-settings: "opsz" 9, "SOFT" 30;
  color: var(--accent);
  margin-right: 12px;
  vertical-align: 1px;
}
.task-kind-lg {
  font-size: 12px;
  letter-spacing: 0.28em;
  margin-right: 16px;
  vertical-align: 6px;
}

/* ------------------------------------------------------------
   Card content — unified across all grid columns
------------------------------------------------------------ */
/* Card title <b> — was previously only styled in the Tasks column
   (.grid section:nth-child(2) .card b), leaving briefing / sites /
   email card titles to render with the heavier default <b>. Apply
   to every .card so the dashboard reads as one editorial register. */
.grid .card b {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.4;
}
/* Inline status pill at the right edge of a Tasks-column card row.
   Scoped to Tasks because other columns' card rows use <span> for
   timestamps / online dots that shouldn't be pill-styled. */
.grid section:nth-child(2) .card > .row > span {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 2px 8px;
  border: 1px solid var(--rule);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Mono & tabular numbers — applied to log lines and tech columns
------------------------------------------------------------ */
[data-mono], .mono {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ------------------------------------------------------------
   Email panel
------------------------------------------------------------ */
.mailbox-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 2px 10px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--rule);
}
.mailbox-line-label {
  font-family: var(--ff-body);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variation-settings: "opsz" 9, "SOFT" 20;
}
.mailbox-line-addr {
  display: flex;
  align-items: baseline;
  gap: 1px;
  color: var(--ink);
  flex-wrap: wrap;
}
.mailbox-local {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.mailbox-at {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--accent);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.1;
  margin: 0 1px;
}
.mailbox-domain {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding-bottom: 2px;
  word-break: break-all;
}

/* ------------------------------------------------------------
   Per-site billing — compact inline row with balance + 2 buttons.
   Detailed views (filtered list, CSV export, payout request form,
   history) live in dedicated modals so the Sites column stays scannable.
------------------------------------------------------------ */
.site-billing-row {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.site-billing-balance b {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
}
.site-billing-actions {
  display: inline-flex;
  gap: 6px;
}
.site-billing-btn {
  padding: 5px 12px;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  transition: background 140ms var(--easing), color 140ms var(--easing);
}
.site-billing-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.site-billing-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.site-billing-btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.site-billing-btn-primary:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}

/* Modals */
.billing-modal { width: min(820px, 96vw); }
.payout-request-modal { width: min(560px, 96vw); }
.billing-modal-body,
.payout-request-body {
  padding: 18px 32px 28px;
  overflow: auto;
  max-height: 70vh;
}
.billing-modal-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.billing-modal-summary b {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 28px;
}
.billing-modal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.billing-modal-filters label { display: inline-flex; gap: 4px; align-items: center; margin: 0; font-size: 10px; }
.billing-modal-filters input[type="date"] {
  width: auto; padding: 5px 8px; font-size: 12px; margin: 0; background: var(--paper);
}
.billing-modal-filters button {
  padding: 5px 12px; font-size: 11px; background: var(--paper); border: 1px solid var(--rule); cursor: pointer;
}
.billing-modal-filters button.button { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.payout-request-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.payout-request-form input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  margin: 4px 0 0;
}

.site-billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.site-billing-table th,
.site-billing-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.site-billing-table th {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--ink-3);
}
.site-billing-payouts {
  font-size: 12px;
}
.site-billing-payout-row {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--rule);
}
.site-billing-payout-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--paper-hi);
  border: 1px dashed var(--rule);
}
.site-billing-payout-form input[type="number"] {
  width: 140px;
  padding: 6px 8px;
  font-size: 12px;
  margin: 0;
}

/* Payout-account modal — bank info form */
.payout-account-modal { width: min(640px, 94vw); }
.payout-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px 14px;
  gap: 12px 14px;
}
.payout-account-grid label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
}
.payout-account-grid label input,
.payout-account-grid label textarea {
  width: 100%;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: normal;
  color: var(--ink);
}
.payout-account-grid-wide { grid-column: 1 / -1; }

.email-row {
  border: 1px solid var(--rule);
  background: var(--paper-hi);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 120ms var(--easing), transform 120ms var(--easing), background 120ms var(--easing);
  position: relative;
}
.email-row::before {
  /* left stripe hint — vermillion for inbound, ink-soft for outbound */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
}
.email-row.is-in::before { background: var(--accent); }
.email-row.is-out::before { background: var(--ink-3); }
.email-row:hover {
  border-color: var(--ink-2);
  background: var(--paper);
}
.email-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.email-row-time {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.email-row-subject {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variation-settings: "opsz" 12, "SOFT" 30;
}
.email-row-peer {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-row-arrow {
  color: var(--ink-3);
  font-family: var(--ff-mono);
}
.email-row-peer-addr {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-row-failed {
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-family: var(--ff-body);
  font-variation-settings: "opsz" 9, "SOFT" 20;
}

.email-more {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px dashed var(--rule-strong);
  background: transparent;
  padding: 10px 14px;
  margin: 4px 0 8px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  font-variation-settings: "opsz" 10, "SOFT" 20;
  transition: border-color 140ms var(--easing), color 140ms var(--easing), background 140ms var(--easing);
}
.email-more:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper-hi);
}
.email-more-arrow {
  font-family: var(--ff-mono);
  font-size: 14px;
  transition: transform 140ms var(--easing);
}
.email-more:hover .email-more-arrow { transform: translateX(3px); }

/* ------------------------------------------------------------
   Markdown rendering (Documents panel)
------------------------------------------------------------ */
.zhc-md {
  font-family: var(--ff-body);
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink);
  font-variation-settings: "opsz" 12, "SOFT" 30;
}
.zhc-md > :first-child { margin-top: 0; }
.zhc-md > :last-child { margin-bottom: 0; }

.zhc-md h1,
.zhc-md h2,
.zhc-md h3,
.zhc-md h4 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 18px 0 6px;
}
.zhc-md h1 { font-size: 26px; }
.zhc-md h2 { font-size: 22px; }
.zhc-md h3 { font-size: 18px; }
.zhc-md h4 { font-size: 15px; }
.zhc-md h5,
.zhc-md h6 {
  font-family: var(--ff-body);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variation-settings: "opsz" 9, "SOFT" 20;
  margin: 16px 0 4px;
  font-weight: 500;
}

.zhc-md p {
  margin: 0 0 10px;
  color: var(--ink);
}
.zhc-md strong {
  font-weight: 600;
  color: var(--ink);
}
.zhc-md em {
  font-style: italic;
  color: var(--ink);
}

.zhc-md a {
  color: var(--accent);
  border-bottom: 1px solid rgba(138,56,40,0.35);
  padding-bottom: 1px;
}
.zhc-md a:hover {
  color: var(--accent-ink);
  border-bottom-color: currentColor;
}

.zhc-md ul,
.zhc-md ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.zhc-md li {
  margin: 0 0 4px;
}
.zhc-md ul > li::marker { color: var(--accent); }
.zhc-md ol > li::marker { color: var(--ink-3); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.zhc-md code {
  font-family: var(--ff-mono);
  font-size: 0.88em;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 0 5px;
  border-radius: 2px;
  color: var(--ink);
}
.zhc-md pre {
  background: #15120c;
  color: #e4dec9;
  padding: 12px 14px;
  margin: 10px 0;
  border: 1px solid #0b0906;
  overflow-x: auto;
  font-family: var(--ff-mono);
  font-size: 12px;
  line-height: 1.55;
}
.zhc-md pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 12px;
}

.zhc-md blockquote {
  margin: 10px 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-style: italic;
}

.zhc-md hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 18px 0;
}

.zhc-md table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 12.5px;
  width: 100%;
}
.zhc-md th,
.zhc-md td {
  border-bottom: 1px solid var(--rule);
  padding: 6px 10px;
  text-align: left;
}
.zhc-md th {
  font-family: var(--ff-body);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}

.zhc-md img {
  max-width: 100%;
  display: block;
  margin: 10px 0;
  border: 1px solid var(--rule);
}

.zhc-md input[type="checkbox"] {
  width: auto;
  margin: 0 6px 0 0;
  vertical-align: middle;
}

/* Compact mode for the small Documents card preview: tighter vertical rhythm */
.zhc-md.is-compact {
  font-size: 13px;
  line-height: 1.55;
  max-height: 420px;
  overflow: hidden;
  position: relative;
}
.zhc-md.is-compact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--paper-hi) 90%);
  pointer-events: none;
}
.zhc-md.is-compact h1 { font-size: 22px; margin: 0 0 6px; }
.zhc-md.is-compact h2 { font-size: 17px; margin: 12px 0 4px; }
.zhc-md.is-compact h3 { font-size: 14px; margin: 10px 0 4px; }
.zhc-md.is-compact p { margin: 0 0 8px; }
.zhc-md.is-compact ul,
.zhc-md.is-compact ol { margin: 0 0 8px; padding-left: 18px; }
.zhc-md.is-compact pre { font-size: 11.5px; padding: 8px 10px; }

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width: 1280px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .grid > :nth-child(3) { border-left: 0; padding-left: 0; }
  .grid > :nth-child(3),
  .grid > :nth-child(4) { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 28px; }
}
@media (max-width: 860px) {
  .grid {
    grid-template-columns: 1fr;
    padding: 0 16px 40px;
  }
  .grid > * { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 18px; }
  .grid > :first-child { border-top: 0; padding-top: 4px; margin-top: 0; }
  .title { font-size: clamp(32px, 8vw, 46px); margin: 10px 16px 4px; }
  .auth-wrap { padding: 40px 24px; margin: 6vh 16px; max-width: none; }
  .auth-wrap::before { left: 24px; right: 24px; }
  .auth-wrap::after { right: 24px; }

  /* Topbar: a hair taller when collapsed so the running head + 1 log line fit
     cleanly on narrow screens; keep full-screen when expanded. */
  .topbar-wrap { height: 88px; }
  .topbar { height: 88px; }
  .topbar-bar { top: 10px; right: 14px; }
  .topbar-close { width: 32px; height: 32px; font-size: 17px; }
  .topbar-log { padding: 46px 16px 12px; }
  .topbar-log.is-collapsed { height: 88px; }
  .topbar-log.is-expanded { height: var(--topbar-open-height); padding: 46px 16px 12px; }
  .topbar::before { padding-left: 16px; padding-right: 16px; }

  /* Masthead controls wrap below title on narrow screens. */
  .masthead-meta {
    position: static;
    padding: 0 16px 18px;
    justify-content: flex-end;
  }

  /* Chat aside must not be sticky on mobile — otherwise it pins and hides content. */
  .chat-box {
    position: static;
    height: auto;
    max-height: none;
  }
  .chat-box-close {
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px;
    font-size: 24px;
  }
  .chat-log {
    max-height: 52vh;
  }
  .chat-fab {
    right: 16px;
    bottom: 20px;
    width: 72px;
    height: 72px;
  }
  .chat-fab-icon {
    width: 28px;
    height: 24px;
  }
  .chat-fab-bubble {
    width: 22px;
    height: 15px;
  }

  /* Tighter modal chrome on mobile. */
  .task-modal {
    width: min(100vw - 16px, 96vw);
    max-height: 92vh;
  }
  .task-modal-header {
    padding: 22px 18px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .task-modal-title {
    font-size: clamp(28px, 8vw, 46px) !important;
    line-height: 1.05;
  }
  .task-tabs {
    padding: 14px 18px;
    gap: 14px;
  }
  .task-modal-list {
    padding: 18px 16px 22px;
  }
  .task-modal-card {
    padding: 16px 16px 14px;
  }

  /* Special-automation card: button row wraps cleanly; inputs stay full width. */
  .special-auto-controls input,
  .special-auto-controls select,
  .special-auto-controls .button {
    flex: 1 1 140px;
  }

  /* Onboarding: stack the two mode buttons vertically on narrow screens. */
  main[style*="860"] {
    padding: 16px !important;
  }
  main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button {
    border-right: 1px solid var(--rule) !important;
    border-bottom: none !important;
    min-height: 150px !important;
  }
  main[style*="860"] > div[style*="grid-template-columns: 1fr 1fr"] > button:last-child {
    border-bottom: 1px solid var(--rule) !important;
  }
}

/* ------------------------------------------------------------
   Page load choreography — a single quiet staggered reveal
------------------------------------------------------------ */
@keyframes zhc-lift {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.shell > * { animation: zhc-lift 540ms var(--easing) both; }
.shell > .topbar { animation-delay: 0ms; }
.shell > .masthead { animation-delay: 80ms; }
.shell > .row { animation-delay: 140ms; }
.shell > main { animation-delay: 200ms; }
.auth-wrap { animation: zhc-lift 560ms var(--easing) both; }
main[style*="860"] { animation: zhc-lift 560ms var(--easing) both; }

/* Quota-exhausted sticky banner — shown above the topbar when chat SSE
 * `done` event carries `error.code === 'insufficient_quota'`. Click the
 * upgrade CTA to land on /billing. Dismiss button hides it for the
 * session (resurfaces on next 402). */
.quota-banner {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: #f0e2c0;
  color: #6a4a08;
  border-bottom: 1px solid #d8b67a;
  font-size: 13px;
  font-weight: 500;
}
.quota-banner > span { flex: 1 1; }
.quota-banner .quota-cta {
  color: #6a4a08;
  text-decoration: underline;
  font-weight: 600;
}
.quota-banner .quota-close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.quota-banner .quota-close:hover { color: #2a261f; }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Instrument_Serif","arguments":[{"weight":"400","style":["normal","italic"],"subsets":["latin"],"variable":"--font-display","display":"swap"}],"variableName":"display"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/5ece437c7024c161-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/9cc5b37ab1350db7-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/35f3de0ebb1cfc70-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e6099e249fd938cc-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Instrument Serif Fallback';src: local("Times New Roman");ascent-override: 117.94%;descent-override: 36.93%;line-gap-override: 0.00%;size-adjust: 83.94%
}.__className_1f5468 {font-family: 'Instrument Serif', 'Instrument Serif Fallback';font-weight: 400
}.__variable_1f5468 {--font-display: 'Instrument Serif', 'Instrument Serif Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Fraunces","arguments":[{"subsets":["latin"],"variable":"--font-body","display":"swap","axes":["SOFT","opsz"]}],"variableName":"body"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e8c7e585bb5e69ba-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/d02d66744511ad29-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/26dc4a78f0c7af7f-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Fraunces Fallback';src: local("Times New Roman");ascent-override: 84.71%;descent-override: 22.09%;line-gap-override: 0.00%;size-adjust: 115.45%
}.__className_eaa818 {font-family: 'Fraunces', 'Fraunces Fallback';font-style: normal
}.__variable_eaa818 {--font-body: 'Fraunces', 'Fraunces Fallback'
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"JetBrains_Mono","arguments":[{"subsets":["latin"],"variable":"--font-mono","display":"swap"}],"variableName":"mono"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/886030b0b59bc5a7-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/0aa834ed78bf6d07-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/67957d42bae0796d-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/f911b923c6adde36-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/939c4f875ee75fbb-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/bb3ef058b751a6ad-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'JetBrains Mono Fallback';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_3c557b {font-family: 'JetBrains Mono', 'JetBrains Mono Fallback';font-style: normal
}.__variable_3c557b {--font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback'
}