/* Parker V3: an editorial theatre for discovery and continuous story reading. */

body.parker-app {
  --ws-canvas: #ffffff;
  --ws-canvas-subtle: #f7f8fa;
  --ws-surface: #ffffff;
  --ws-surface-raised: #ffffff;
  --ws-surface-strong: #f7f8fa;
  --ws-ink: #202124;
  --ws-ink-soft: #3c4043;
  --ws-muted: #667085;
  --ws-muted-strong: #52606d;
  --ws-line: #e8eaed;
  --ws-line-strong: #d0d5dd;
  --ws-accent: #2563eb;
  --ws-accent-hover: #1d4ed8;
  --ws-accent-strong: #1e40af;
  --ws-accent-soft: #dbeafe;
  --ws-accent-softer: #eff6ff;
  --ws-warning: #84671c;
  --ws-warning-soft: #f0e8cd;
  --ws-danger: #c73e2d;
  --ws-danger-soft: #f6e1dd;
  --ws-signal: #2563eb;
  --ws-signal-hover: #1d4ed8;
  --ws-signal-soft: #dbeafe;
  --ws-action-ink: #ffffff;
  --ws-backdrop: rgb(32 33 36 / 36%);
  --ws-shadow-overlay: 0 18px 48px rgb(32 33 36 / 16%);
  --ws-shadow-float: 0 8px 24px rgb(32 33 36 / 10%);
  --archive-spine: #ffffff;
  --archive-spine-raised: #f7f8fa;
  --archive-spine-ink: #202124;
  --archive-spine-muted: #667085;
  --sidebar: 212px;
  --topbar: 64px;
  --ws-font-display: "Arial", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --ws-font-sans: "Arial", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  background: var(--ws-canvas);
}

body.parker-app.dark {
  --ws-canvas: #111310;
  --ws-canvas-subtle: #1a1d19;
  --ws-surface: #171916;
  --ws-surface-raised: #1e211d;
  --ws-surface-strong: #262a24;
  --ws-ink: #f1f2ed;
  --ws-ink-soft: #d5d8d1;
  --ws-muted: #9a9f96;
  --ws-muted-strong: #bdc1b8;
  --ws-line: #30342e;
  --ws-line-strong: #4a5047;
  --ws-accent: #88a0ff;
  --ws-accent-hover: #a2b5ff;
  --ws-accent-strong: #c2ccff;
  --ws-accent-soft: #28345e;
  --ws-accent-softer: #202744;
  --ws-danger: #ff8c7b;
  --ws-danger-soft: #4a2b26;
  --ws-signal: #e98270;
  --ws-signal-hover: #ff8976;
  --ws-signal-soft: #452b27;
  --ws-action-ink: #111310;
  --archive-spine: #151714;
  --archive-spine-raised: #242722;
  --archive-spine-ink: #f1f2ed;
  --archive-spine-muted: #a3a89f;
  --ws-shadow-overlay: 0 30px 86px rgb(0 0 0 / 42%);
}

body.parker-app h1,
body.parker-app h2,
body.parker-app h3,
body.parker-app .brand strong {
  letter-spacing: 0;
}

body.parker-app .button,
body.parker-app .icon-button,
body.parker-app input,
body.parker-app textarea,
body.parker-app select {
  border-radius: 5px;
}

body.parker-app .button {
  box-shadow: none;
  font-weight: 650;
}

body.parker-app .button.primary {
  border-color: var(--ws-accent);
  background: var(--ws-accent);
  color: var(--ws-action-ink);
}

body.parker-app .button.primary:hover:not(:disabled) {
  border-color: var(--ws-accent-hover);
  background: var(--ws-accent-hover);
}

/* Shell */
body.parker-app .app-shell { padding-left: var(--sidebar); }

body.parker-app .sidebar {
  width: var(--sidebar);
  padding: 18px 14px 14px;
  border-right: 1px solid var(--ws-line);
  background: var(--archive-spine);
  color: var(--archive-spine-ink);
}

body.parker-app .sidebar-close,
body.parker-app .sidebar-collapse,
body.parker-app .site-navigation-scrim,
body.parker-app .workspace-navigation { display: none; }

body.parker-app .brand {
  min-height: 54px;
  gap: 11px;
  margin: 0 3px 25px;
  padding: 0 5px 17px;
  border: 0;
  border-bottom: 1px solid var(--ws-line);
  background: transparent;
  color: var(--archive-spine-ink);
}

body.parker-app .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: transparent;
}

body.parker-app .brand > span { display: grid; gap: 1px; text-align: left; }
body.parker-app .brand strong { color: var(--archive-spine-ink); font-size: 18px; font-weight: 760; }
body.parker-app .brand small { color: var(--ws-muted); font: 600 9px/1.2 var(--ws-font-mono); }
body.parker-app .nav-group { margin-bottom: 21px; }
body.parker-app .sidebar .nav-label { padding: 0 10px 7px; color: var(--ws-muted); font-size: 10px; font-weight: 700; }

body.parker-app .nav-button {
  min-height: 39px;
  gap: 10px;
  margin: 1px 0;
  padding: 0 10px;
  border-radius: 4px;
  color: var(--archive-spine-muted);
  font-size: 13px;
  font-weight: 570;
}

body.parker-app .nav-button svg { width: 17px; height: 17px; }
body.parker-app .nav-button:hover { background: var(--ws-canvas-subtle); color: var(--archive-spine-ink); }
body.parker-app .nav-button.active,
body.parker-app.dark .nav-button.active { background: var(--archive-spine-raised); color: var(--archive-spine-ink); }
body.parker-app .nav-button::before { inset-block: 9px; width: 2px; left: 0; }
body.parker-app .nav-button.active::before { background: var(--ws-signal); }

body.parker-app .nav-group-create {
  margin-top: 3px;
  padding-top: 14px;
  border-top: 1px solid var(--ws-line);
}

body.parker-app .nav-group-create .nav-button { color: var(--ws-signal); }
body.parker-app .sidebar-footer { gap: 8px; }
body.parker-app .sidebar-tools { padding: 0 0 9px; border-bottom: 1px solid var(--ws-line); }
body.parker-app .sidebar-tools .icon-button { min-height: 34px; border: 0; background: transparent; color: var(--ws-muted); }
body.parker-app .sidebar-tools .icon-button:hover { background: var(--ws-canvas-subtle); color: var(--ws-ink); }

body.parker-app .sidebar .account-strip {
  min-height: 50px;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  gap: 8px;
  padding: 7px 6px;
  border: 0;
  border-radius: 4px;
  color: var(--ws-ink);
}

body.parker-app .sidebar .account-strip:hover { background: var(--ws-canvas-subtle); }
body.parker-app .sidebar .avatar {
  width: 30px;
  height: 30px;
  border: 1px solid var(--ws-ink);
  border-radius: 50%;
  background: var(--ws-ink);
  color: var(--ws-surface);
  font-size: 12px;
}

body.parker-app .sidebar-nav {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.parker-app .sidebar .account-name { color: var(--ws-ink); font-size: 12px; }
body.parker-app .sidebar .account-points { color: var(--ws-muted); font-size: 10px; }

body.parker-app .topbar {
  min-height: var(--topbar);
  padding: 10px 34px;
  border-bottom: 1px solid var(--ws-line);
  background: rgb(248 248 245 / 94%);
  backdrop-filter: blur(16px);
}

body.parker-app.dark .topbar { background: rgb(23 25 22 / 94%); }
body.parker-app .search-box { width: min(680px, 62vw); }
body.parker-app .search-box input {
  height: 42px;
  padding-left: 42px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--ws-canvas-subtle);
}

body.parker-app .search-box input:focus { border-color: var(--ws-accent); box-shadow: none; }
body.parker-app .search-box svg { left: 14px; top: 12px; }
body.parker-app .top-points { border-color: transparent; background: transparent; }
body.parker-app .account-button-quiet .avatar { border: 1px solid var(--ws-ink); background: transparent; color: var(--ws-ink); }
body.parker-app .page { max-width: 1540px; padding: 24px 36px 84px; }

/* Discovery */
body.parker-app .explore-intro {
  min-height: 76px;
  align-items: flex-end;
  margin-bottom: 22px;
}

body.parker-app .page-kicker {
  margin-bottom: 7px;
  color: var(--ws-signal);
  font: 700 10px/1.3 var(--ws-font-mono);
}

body.parker-app .explore-intro h1 { font-size: 30px; font-weight: 720; line-height: 1.2; }
body.parker-app .explore-intro p { max-width: 52ch; margin-top: 8px; color: var(--ws-muted-strong); font-size: 14px; }
body.parker-app .explore-count { display: none; }

body.parker-app .featured-world { margin-bottom: 30px; }
body.parker-app .story-card.story-card-featured {
  height: min(400px, 46vh);
  min-height: 340px;
  border: 1px solid #111;
  border-radius: 5px;
  background: #171815;
}

body.parker-app .story-card-featured .story-cover::after { background: rgb(10 11 10 / 43%); }
body.parker-app .story-card-featured .story-body { width: min(760px, 74%); padding: 30px 34px 32px; }
body.parker-app .story-card-featured h3 { margin: 7px 0 8px; font-size: 34px; font-weight: 720; }
body.parker-app .story-card-featured p { color: rgb(255 255 255 / 86%); }
body.parker-app .featured-label {
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 22px;
  padding: 6px 9px;
  border-radius: 3px;
  background: var(--ws-signal);
  color: var(--ws-action-ink);
  font-size: 10px;
  font-weight: 750;
}

body.parker-app .story-enter {
  min-height: 38px;
  margin-top: 17px;
  padding: 0 12px;
  border-radius: 4px;
  background: #fff;
  color: #191a18;
}

body.parker-app .story-enter > span { width: auto; height: auto; background: transparent; }
body.parker-app .explore-filters { gap: 10px; margin-bottom: 25px; padding-bottom: 15px; }
body.parker-app .filter-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
body.parker-app .ranking-tabs { min-width: 0; gap: 18px; overflow-x: auto; }
body.parker-app .ranking-tabs .segment { flex: none; min-height: 34px; font-size: 12px; }
body.parker-app .ranking-tabs .segment.active { border-bottom-color: var(--ws-signal); }
body.parker-app .filter-toggle {
  min-height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
  background: transparent;
  color: var(--ws-muted-strong);
  font-size: 12px;
}

body.parker-app .filter-toggle:hover,
body.parker-app .filter-toggle.active { border-color: var(--ws-accent); color: var(--ws-accent); }
body.parker-app .filter-toggle b { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--ws-accent); color: var(--ws-action-ink); font-size: 9px; }
body.parker-app .category-row { display: flex; gap: 5px; overflow-x: auto; }
body.parker-app .chip { flex: none; min-height: 31px; border-radius: 3px; background: transparent; color: var(--ws-muted-strong); }
body.parker-app .chip:hover { background: var(--ws-canvas-subtle); }
body.parker-app .chip.active { background: var(--ws-ink); color: var(--ws-surface); }

body.parker-app .facet-drawer {
  padding: 18px 0 3px;
  border-top: 1px solid var(--ws-line);
}

body.parker-app .facet-drawer[hidden] { display: none; }
body.parker-app .facet-group { min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; margin: 0 0 12px; padding: 0; border: 0; }
body.parker-app .facet-group legend { float: left; width: 76px; padding: 7px 0 0; color: var(--ws-muted); font-size: 11px; }
body.parker-app .facet-options { display: flex; flex-wrap: wrap; gap: 5px; }
body.parker-app .facet-option { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--ws-line); border-radius: 3px; background: var(--ws-surface); color: var(--ws-muted-strong); font-size: 11px; }
body.parker-app .facet-option small { color: var(--ws-muted); font: 10px var(--ws-font-mono); }
body.parker-app .facet-option.active { border-color: var(--ws-accent); background: var(--ws-accent-softer); color: var(--ws-accent); }
body.parker-app .facet-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 7px; color: var(--ws-muted); font-size: 11px; }

body.parker-app .catalog-heading { margin-bottom: 14px; }
body.parker-app .catalog-heading h2 { font-size: 21px; }
body.parker-app .catalog-view-toggle { width: auto; gap: 6px; padding: 0 10px; }
body.parker-app .catalog-view-toggle span { font-size: 12px; white-space: nowrap; }
body.parker-app .story-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px 20px; }
body.parker-app .story-card:not(.story-card-featured) { content-visibility: auto; contain-intrinsic-block-size: auto 440px; }
body.parker-app img[data-story-cover-src]:not([src]) { visibility: hidden; }
body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) { grid-column: auto; display: block; }
body.parker-app .story-card:not(.story-card-featured) .story-cover { border-radius: 4px; }
body.parker-app .story-grid.covers-hidden .story-cover { display: none; }
body.parker-app .story-card:not(.story-card-featured) .story-body { padding: 11px 1px 0; }
body.parker-app .story-card-entry { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; text-decoration: none; }
body.parker-app .story-card-cover-entry { display: block; }
body.parker-app .story-card-body-entry { display: block; }
body.parker-app .story-author[type="button"],
body.parker-app .detail-author[type="button"] { padding: 0; border: 0; background: transparent; color: var(--ws-accent); cursor: pointer; font: inherit; text-align: left; }
body.parker-app .story-author[type="button"]:hover,
body.parker-app .detail-author[type="button"]:hover { text-decoration: underline; }
body.parker-app .story-card:not(.story-card-featured) h3 { min-height: 44px; margin: 5px 0; font-size: 17px; }
body.parker-app .story-card:not(.story-card-featured):hover h3 { color: var(--ws-accent); }
body.parker-app .story-card:not(.story-card-featured) .story-author { color: var(--ws-accent); }
body.parker-app .story-heat {
  min-height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid rgb(25 26 24 / 15%);
  border-radius: 5px;
  background: rgb(255 255 255 / 92%);
  color: var(--ws-signal);
  box-shadow: 0 2px 8px rgb(23 25 22 / 12%);
  font-variant-numeric: tabular-nums;
}
body.parker-app .story-heat b { color: var(--ws-ink); font: 750 12px/1 var(--ws-font-mono); }
body.parker-app .story-heat small { color: var(--ws-muted-strong); font-size: 10px; font-weight: 650; }
body.parker-app .story-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 11px 0;
  font-variant-numeric: tabular-nums;
}
body.parker-app .story-stat {
  min-width: 0;
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--ws-line);
  border-radius: 6px;
  background: var(--ws-surface);
}
body.parker-app .story-stat-label { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--ws-muted-strong); font-size: 11px; font-weight: 650; }
body.parker-app .story-stat-label svg { flex: none; color: var(--ws-muted); }
body.parker-app .story-stat strong { min-width: 0; color: var(--ws-ink); font: 750 16px/1 var(--ws-font-mono); }
body.parker-app .story-stat b { margin-left: 2px; color: var(--ws-muted); font: 650 9px/1 var(--ws-font-sans); }
body.parker-app .story-summary { margin: 0; }
body.parker-app .story-card-featured .story-heat { border-color: rgb(255 255 255 / 28%); background: rgb(12 13 12 / 72%); }
body.parker-app .story-card-featured .story-heat b { color: #fff; }
body.parker-app .story-card-featured .story-heat small { color: rgb(255 255 255 / 72%); }
body.parker-app .story-card-featured .story-stat-grid { width: min(420px, 100%); gap: 6px; margin: 10px 0; }
body.parker-app .story-card-featured .story-stat { min-height: 54px; gap: 4px; padding: 7px 9px; border-color: rgb(255 255 255 / 28%); background: rgb(12 13 12 / 62%); }
body.parker-app .story-card-featured .story-stat-label,
body.parker-app .story-card-featured .story-stat b { color: rgb(255 255 255 / 72%); }
body.parker-app .story-card-featured .story-stat-label svg { color: rgb(255 255 255 / 72%); }
body.parker-app .story-card-featured .story-stat strong { color: #fff; }

body.parker-app .chat-header-actions { display: flex; align-items: center; gap: 5px; }
body.parker-app .header-turns { color: var(--ws-muted); font: 10px var(--ws-font-mono); }
body.parker-app .older-messages { text-align: center; margin-bottom: 24px; }
body.parker-app .message-markup-chat { margin: 13px 0; }
body.parker-app .message-markup-avatar { border-color: var(--ws-line-strong); }
body.parker-app .message-markup-bubble { border-color: var(--ws-line); background: var(--ws-surface); }
body.parker-app .message-markup-chat--right .message-markup-bubble { background: var(--ws-signal); border-color: var(--ws-signal); color: var(--ws-action-ink); }

body.parker-app .prologue-cover { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--ws-line-strong); border-radius: 4px; background: var(--ws-canvas-subtle); }
body.parker-app .prologue-cover .story-cover,
body.parker-app .prologue-cover img,
body.parker-app .prologue-cover .cover-fallback { width: 100%; height: 100%; }
body.parker-app .prologue-copy > span { color: var(--ws-accent); font-size: 10px; font-weight: 700; }
body.parker-app .prologue-copy h1 { margin: 7px 0 12px; font-size: 31px; line-height: 1.15; }
body.parker-app .prologue-copy p { max-height: 9.5em; margin: 0; overflow: hidden; color: var(--ws-muted-strong); font-family: var(--ws-font-reading); font-size: 15px; line-height: 1.9; }
body.parker-app .opening-switch { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; padding: 0; border: 0; background: transparent; color: var(--ws-signal); font-size: 11px; font-weight: 700; }
body.parker-app .model-picker { min-width: 0; display: grid; grid-template-columns: minmax(64px,.8fr) minmax(80px,1.2fr); gap: 5px; }
body.parker-app .model-picker select { min-width: 0; width: 100%; }
body.parker-app .model-picker-mobile-trigger { display: none; }
body.parker-app .model-picker.has-price { row-gap: 3px; }
body.parker-app .model-picker-price { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 22px; display: flex; align-items: center; padding: 2px 7px; border-left: 2px solid var(--ws-signal); border-radius: 2px; background: var(--ws-canvas-subtle); color: var(--ws-muted-strong); font: 10px var(--ws-font-mono); font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }
body.parker-app .quick-actions .button { border-color: var(--ws-line); background: transparent; color: var(--ws-muted-strong); }
body.parker-app .quick-actions .button:hover { border-color: var(--ws-signal); color: var(--ws-signal); }
body.parker-app .panel-lead { margin: 0 0 14px; color: var(--ws-muted); font-size: 11px; }
body.parker-app .panel-empty { min-height: 130px; display: grid; align-content: center; justify-items: center; gap: 5px; color: var(--ws-muted); text-align: center; }
body.parker-app .panel-empty strong { color: var(--ws-ink); font-size: 13px; }
body.parker-app .panel-empty span { font-size: 11px; }
body.parker-app .panel-loading { min-height: 140px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ws-muted); font-size: 11px; }

body.parker-app .detail-cover { position: relative; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 18px; border-radius: 4px; background: var(--ws-canvas-subtle); }
body.parker-app .detail-cover .story-cover,
body.parker-app .detail-cover img,
body.parker-app .detail-cover .cover-fallback { width: 100%; height: 100%; }
body.parker-app .detail-author { color: var(--ws-accent); font-size: 10px; font-weight: 700; }
body.parker-app .author-page,
body.parker-app .following-page { max-width: 1460px; margin: 0 auto; }
body.parker-app .author-back { margin-bottom: 18px; }
body.parker-app .author-header { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--ws-line); }
body.parker-app .author-avatar { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--ws-line-strong); border-radius: 50%; background: var(--ws-canvas-subtle); color: var(--ws-ink); font-size: 20px; font-weight: 750; }
body.parker-app .author-identity { min-width: 0; }
body.parker-app .author-identity h1 { margin: 0; font-size: 25px; }
body.parker-app .author-identity p { margin: 5px 0 0; color: var(--ws-muted); font-size: 13px; }
body.parker-app .author-actions { display: flex; align-items: center; gap: 9px; }
body.parker-app .author-self { color: var(--ws-muted); font-size: 12px; }
body.parker-app .author-loading { min-height: 260px; }
body.parker-app .following-list { display: grid; border-top: 1px solid var(--ws-line); }
body.parker-app .following-row { min-height: 78px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ws-line); }
body.parker-app .following-row .author-avatar { width: 42px; height: 42px; font-size: 15px; }
body.parker-app .following-author-link { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
body.parker-app .following-author-link:hover strong { color: var(--ws-accent); }
body.parker-app .following-author-link strong,
body.parker-app .following-author-link span,
body.parker-app .following-author-unavailable strong,
body.parker-app .following-author-unavailable span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.parker-app .following-author-link span,
body.parker-app .following-author-unavailable span { margin-top: 4px; color: var(--ws-muted); font-size: 12px; }
body.parker-app .following-author-unavailable { min-width: 0; color: var(--ws-muted); }
body.parker-app .detail-summary { color: var(--ws-muted-strong); font-family: var(--ws-font-reading); line-height: 1.75; }
body.parker-app .detail-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin: 18px 0; border-block: 1px solid var(--ws-line); }
body.parker-app .detail-setting-metrics { grid-template-columns: repeat(2,1fr); margin-top: -18px; border-top: 0; }
body.parker-app .detail-metrics span { display: grid; gap: 3px; padding: 13px 8px; color: var(--ws-muted); font-size: 9px; }
body.parker-app .detail-metrics strong { color: var(--ws-ink); font: 700 17px var(--ws-font-mono); }
body.parker-app .detail-facet { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--ws-line); }
body.parker-app .detail-facet > span { color: var(--ws-muted); font-size: 10px; }
body.parker-app .detail-facet p { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
body.parker-app .detail-facet b { color: var(--ws-ink-soft); font-size: 10px; font-weight: 600; }
body.parker-app .panel-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
body.parker-app .rating-inline { display: flex; align-items: center; gap: 5px; color: var(--ws-muted); font-size: 10px; }
body.parker-app .rating-inline select { height: 36px; }

body.parker-app .panel-comment-form { display: grid; gap: 7px; margin-bottom: 19px; }
body.parker-app .panel-comment-form textarea { min-height: 86px; resize: vertical; }
body.parker-app .panel-comment-form .button { justify-self: end; }
body.parker-app .panel-submit-status,
body.parker-app .modal-submit-status { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ws-info); font-size: 11px; line-height: 1.5; }
body.parker-app .panel-submit-status svg,
body.parker-app .modal-submit-status svg { flex: none; }
body.parker-app .panel-comment-list { display: grid; gap: 0; }
body.parker-app .panel-comment-list .comment { padding: 15px 0; border-bottom: 1px solid var(--ws-line); }
body.parker-app .panel-comment-list .comment header { display: grid; grid-template-columns: 28px minmax(0,1fr) 32px; align-items: center; gap: 8px; }
body.parker-app .comment-avatar { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ws-line-strong); border-radius: 50%; font-size: 10px; }
body.parker-app .panel-comment-list .comment strong { display: block; font-size: 11px; }
body.parker-app .panel-comment-list .comment small { display: block; margin-top: 2px; color: var(--ws-muted); font-size: 8px; }
body.parker-app .panel-comment-list .comment p { margin: 9px 0 0 36px; color: var(--ws-ink-soft); font-size: 12px; line-height: 1.7; }
body.parker-app .panel-load-more { width: 100%; margin-top: 14px; }

body.parker-app .mod-toggle-list { margin-bottom: 15px; border-top: 1px solid var(--ws-line); }
body.parker-app .mod-toggle-row { min-height: 62px; display: grid; grid-template-columns: 18px minmax(0,1fr) 20px; align-items: center; gap: 9px; border-bottom: 1px solid var(--ws-line); }
body.parker-app .mod-toggle-row strong { display: block; font-size: 12px; }
body.parker-app .mod-toggle-row small { display: block; margin-top: 4px; color: var(--ws-muted); font-size: 9px; }
body.parker-app .mod-toggle-row i { color: var(--ws-muted); }
body.parker-app .opening-panel-list { display: grid; gap: 0; border-top: 1px solid var(--ws-line); }
body.parker-app .opening-panel-option { width: 100%; display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 9px; padding: 14px 3px; border: 0; border-bottom: 1px solid var(--ws-line); background: transparent; text-align: left; }
body.parker-app .opening-panel-option.active { color: var(--ws-signal); }
body.parker-app .opening-panel-option strong { font-size: 12px; }
body.parker-app .opening-panel-option p { margin: 5px 0 0; color: var(--ws-muted); font-size: 11px; line-height: 1.55; }
body.parker-app .advanced-settings { width: 100%; min-width: 0; height: 100%; flex: 1; display: flex; flex-direction: column; }
body.parker-app .settings-tabs { min-height: 46px; flex: none; display: flex; align-items: end; gap: 17px; padding: 0 18px; overflow-x: auto; border-bottom: 1px solid var(--ws-line); }
body.parker-app .settings-tabs button { min-height: 45px; flex: none; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ws-muted); font-size: 11px; }
body.parker-app .settings-tabs button.active { border-bottom-color: var(--ws-signal); color: var(--ws-ink); font-weight: 700; }
body.parker-app .settings-section { min-height: 0; flex: 1; padding: 18px; overflow-y: auto; }
body.parker-app .settings-section-head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--ws-muted); font-size: 10px; }
body.parker-app .setting-field { min-width: 0; display: grid; gap: 6px; margin-bottom: 13px; color: var(--ws-muted-strong); font-size: 10px; }
body.parker-app .setting-field > input,
body.parker-app .setting-field > select { height: 38px; padding-inline: 10px; border: 1px solid var(--ws-line); background: var(--ws-surface); }
body.parker-app .setting-field > textarea { padding: 10px; border: 1px solid var(--ws-line); background: var(--ws-surface); line-height: 1.55; resize: vertical; }
body.parker-app .setting-field > input:focus,
body.parker-app .setting-field > select:focus,
body.parker-app .setting-field > textarea:focus { border-color: var(--ws-accent); outline: 0; box-shadow: 0 0 0 2px var(--ws-accent-soft); }
body.parker-app .setting-field > .model-picker { width: 100%; }
body.parker-app .setting-field > .model-picker select { height: 38px; padding-inline: 10px; border: 1px solid var(--ws-line); background: var(--ws-surface); }
body.parker-app .setting-field > .model-picker select:focus { border-color: var(--ws-accent); outline: 0; box-shadow: 0 0 0 2px var(--ws-accent-soft); }
body.parker-app .panel-settings .model-picker-menu { top: calc(100% + 8px); right: auto; bottom: auto; left: 0; }
body.parker-app .settings-generation { display: grid; align-content: start; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
body.parker-app .setting-range { display: grid; gap: 7px; margin: 0 0 15px; }
body.parker-app .setting-range > span { display: flex; justify-content: space-between; color: var(--ws-muted-strong); font-size: 10px; }
body.parker-app .setting-range output { color: var(--ws-accent); font: 10px var(--ws-font-mono); }
body.parker-app .setting-range input { width: 100%; accent-color: var(--ws-signal); }
body.parker-app .setting-segment { min-width: 0; display: flex; align-items: end; gap: 4px; margin: 0 0 13px; padding: 0; border: 0; }
body.parker-app .setting-segment legend { width: 100%; margin-bottom: 6px; color: var(--ws-muted-strong); font-size: 10px; }
body.parker-app .setting-segment label { flex: 1; }
body.parker-app .setting-segment input { position: absolute; opacity: 0; pointer-events: none; }
body.parker-app .setting-segment span { min-height: 36px; display: grid; place-items: center; border: 1px solid var(--ws-line); border-radius: 4px; color: var(--ws-muted); font-size: 10px; }
body.parker-app .setting-segment input:checked + span { border-color: var(--ws-ink); background: var(--ws-ink); color: var(--ws-surface); }
body.parker-app .setting-inline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
body.parker-app .switch-line { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; color: var(--ws-muted-strong); font-size: 10px; }
body.parker-app .switch-line input { accent-color: var(--ws-signal); }
body.parker-app .world-entry-list,
body.parker-app .regex-rule-list { display: grid; gap: 10px; }
body.parker-app .world-entry,
body.parker-app .regex-rule { padding: 12px; border: 1px solid var(--ws-line); border-radius: 4px; background: var(--ws-surface); }
body.parker-app .world-entry > header,
body.parker-app .regex-rule > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
body.parker-app .world-entry .setting-field:last-child,
body.parker-app .regex-rule .setting-field:last-child { margin-bottom: 0; }
body.parker-app .player-worldbook { min-width: 0; }
body.parker-app .player-worldbook-entries { display: grid; gap: 12px; }
body.parker-app .player-worldbook-categories { border-bottom: 1px solid var(--ws-line); }
body.parker-app .player-worldbook-category { display: grid; grid-template-columns: minmax(0,1fr) 86px 36px; align-items: center; gap: 8px; }
body.parker-app .player-worldbook-actions,
body.parker-app .player-worldbook-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
body.parker-app .player-worldbook-sources { min-width: 0; margin: 0 0 13px; padding: 0; border: 0; }
body.parker-app .player-worldbook-sources legend { color: var(--ws-muted-strong); font-size: 10px; }
body.parker-app .player-worldbook-advanced { border-block: 1px solid var(--ws-line); }
body.parker-app .player-worldbook .player-worldbook-advanced > summary { min-height: 40px; display: list-item; align-content: center; color: var(--ws-ink); font-size: 12px; cursor: pointer; }
body.parker-app .player-worldbook-variant { padding-top: 12px; border-top: 1px solid var(--ws-line); }
body.parker-app .player-worldbook-variant-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
body.parker-app .player-worldbook-variant-actions .setting-field { width: 100px; }
body.parker-app .player-worldbook .settings-section-head { flex-wrap: wrap; gap: 8px; }
body.parker-app .player-worldbook :is(input:not([type="checkbox"]), select, textarea) { width: 100%; min-width: 0; }
body.parker-app .settings-style .style-preview { display: grid; gap: 12px; margin: 0 0 12px; padding: 18px; border: 1px solid var(--ws-line); background: var(--ws-canvas); }
body.parker-app .style-preview .parker-message { margin: 0; }
body.parker-app .style-preview .parker-message__bubble { padding: 10px 12px; border: 1px solid var(--ws-line); background: var(--ws-surface); font-size: 11px; }
body.parker-app .style-preview .parker-message--user { justify-content: flex-end; }
body.parker-app .style-preview .parker-message--user .parker-message__bubble { background: var(--ws-signal); color: var(--ws-action-ink); }
body.parker-app .settings-footer { min-height: 64px; flex: none; display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-top: 1px solid var(--ws-line); background: var(--ws-surface-raised); }
body.parker-app .settings-footer > label { min-width: 0; flex: 1; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; color: var(--ws-muted); font-size: 9px; }
body.parker-app .settings-footer select { min-width: 0; height: 36px; border: 1px solid var(--ws-line); background: var(--ws-surface); font-size: 10px; }

/* Player presets */
body.parker-app .preset-page-heading { align-items: end; }
body.parker-app .page-heading-actions { display: flex; gap: 7px; }
body.parker-app .preset-loading { min-height: 360px; display: grid; place-items: center; }
body.parker-app .preset-index-list { border-top: 1px solid var(--ws-line-strong); }
body.parker-app .preset-row { min-height: 92px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 14px 5px; border-bottom: 1px solid var(--ws-line); }
body.parker-app .preset-index { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ws-line); border-radius: 50%; color: var(--ws-muted); }
body.parker-app .preset-row.is-default .preset-index { border-color: var(--ws-signal); color: var(--ws-signal); }
body.parker-app .preset-summary > div { display: flex; align-items: center; gap: 8px; }
body.parker-app .preset-summary h2 { margin: 0; font-size: 15px; }
body.parker-app .preset-default { padding: 2px 5px; border-radius: 2px; background: var(--ws-signal-soft); color: var(--ws-signal); font-size: 8px; font-weight: 700; }
body.parker-app .preset-summary p { margin: 5px 0 0; color: var(--ws-muted-strong); font-size: 10px; }
body.parker-app .preset-summary small { display: block; margin-top: 4px; color: var(--ws-muted); font: 9px var(--ws-font-mono); }
body.parker-app .preset-actions { display: flex; gap: 3px; }
body.parker-app .preset-actions .icon-button { width: 34px; min-height: 34px; border-color: transparent; background: transparent; }
body.parker-app .preset-actions .icon-button:hover { border-color: var(--ws-line); background: var(--ws-surface); }

body.parker-app .modal:has(.preset-editor) { width: min(1080px,100%); }
body.parker-app .preset-editor-heading { padding-right: 42px; }
body.parker-app .preset-editor-heading h2 { margin-top: 4px; }
body.parker-app .preset-editor { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 22px; }
body.parker-app .preset-editor-core { padding-right: 20px; border-right: 1px solid var(--ws-line); }
body.parker-app .preset-number-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 9px; }
body.parker-app .preset-editor-package { min-width: 0; max-height: 67vh; overflow-y: auto; padding-right: 3px; }
body.parker-app .preset-editor-package details { border-bottom: 1px solid var(--ws-line); }
body.parker-app .preset-editor-package summary { min-height: 44px; display: flex; align-items: center; color: var(--ws-ink); font-size: 12px; font-weight: 700; cursor: pointer; }
body.parker-app .preset-editor-package details[open] { padding-bottom: 12px; }
body.parker-app .preset-editor .modal-actions { grid-column: 1/-1; margin: 0; padding-top: 13px; border-top: 1px solid var(--ws-line); }

/* Image studio */
body.parker-app .image-studio { width: min(1100px,100%); display: grid; gap: 30px; }
body.parker-app .image-studio-heading { align-items: end; }
body.parker-app .image-credit-cost { flex: none; padding: 7px 9px; border: 1px solid var(--ws-line-strong); border-radius: 4px; color: var(--ws-signal); font: 700 10px var(--ws-font-mono); white-space: nowrap; }
body.parker-app .image-generation-form { display: grid; grid-template-columns: minmax(0,1fr) 280px; border: 1px solid var(--ws-line-strong); border-radius: 5px; background: var(--ws-surface); }
body.parker-app .image-prompt-field { margin: 0; padding: 18px; border-right: 1px solid var(--ws-line); }
body.parker-app .image-reference-field { display: grid; gap: 10px; margin-top: 18px; font-size: 13px; }
body.parker-app .image-reference-field p { margin: 0; color: var(--ws-muted); line-height: 1.6; }
body.parker-app .image-reference-select { justify-self: start; }
body.parker-app .image-reference-preview { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.parker-app .image-reference-preview img { width: 80px; height: 80px; object-fit: contain; border: 1px solid var(--ws-line); border-radius: 5px; }
body.parker-app .image-reference-preview span { flex: 1; min-width: 100px; overflow-wrap: anywhere; }
body.parker-app #image-reference-status:empty { display: none; }
body.parker-app #image-reference-status { color: var(--ws-danger); }
body.parker-app .image-prompt-field textarea { min-height: 164px; max-height: 440px; resize: vertical; }
body.parker-app .image-generation-controls { min-width: 0; display: grid; align-content: start; gap: 13px; padding: 18px; background: var(--ws-surface-raised); }
body.parker-app .image-generation-controls .setting-field { margin: 0; }
body.parker-app .image-generation-controls .button { width: 100%; min-height: 40px; justify-content: center; }
body.parker-app .image-generation-cost { min-height: 35px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 0; border-top: 1px solid var(--ws-line); border-bottom: 1px solid var(--ws-line); color: var(--ws-muted-strong); font-size: 10px; }
body.parker-app .image-generation-cost > span { color: var(--ws-signal); }
body.parker-app .image-generation-cost strong { color: var(--ws-ink); font: 700 12px var(--ws-font-mono); }
body.parker-app .image-generation-status { grid-column: 1/-1; display: flex; align-items: flex-start; gap: 6px; margin: -2px 0 0; color: var(--ws-info); font-size: 11px; line-height: 1.5; }
body.parker-app .image-generation-status svg { flex: none; margin-top: 1px; }
body.parker-app .image-generation-status[data-state="complete"] { color: var(--ws-muted-strong); }
body.parker-app .image-generation-status[data-state="error"] { color: var(--ws-danger); }
body.parker-app .button .lucide-loader-circle,
body.parker-app .icon-button .lucide-loader-circle,
body.parker-app .generated-image-preview--pending .lucide-loader-circle { animation: image-generation-spin 850ms linear infinite; }
body.parker-app .image-gallery { display: grid; gap: 14px; }
body.parker-app .image-gallery .section-heading { margin: 0; }
body.parker-app .generated-image-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px; }
body.parker-app .generated-image-item { min-width: 0; display: grid; gap: 9px; }
body.parker-app .generated-image-preview { min-width: 0; display: block; overflow: hidden; border: 1px solid var(--ws-line-strong); border-radius: 4px; background: var(--ws-canvas-subtle); aspect-ratio: 1 / 1; }
body.parker-app .generated-image-preview:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
body.parker-app .generated-image-preview img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 180ms ease; }
body.parker-app .generated-image-preview:hover img { transform: scale(1.025); }
body.parker-app .generated-image-preview--pending { display: grid; place-items: center; border-style: dashed; color: var(--ws-info); background: linear-gradient(110deg, var(--ws-canvas-subtle) 30%, var(--ws-surface-raised) 48%, var(--ws-canvas-subtle) 66%); background-size: 220% 100%; animation: image-generation-pending 1.5s ease-in-out infinite; }
body.parker-app .generated-image-meta { min-width: 0; display: flex; align-items: start; justify-content: space-between; gap: 9px; }
body.parker-app .generated-image-meta > div:first-child { min-width: 0; display: grid; gap: 4px; }
body.parker-app .generated-image-meta strong { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; color: var(--ws-ink); font-size: 11px; line-height: 1.45; -webkit-line-clamp: 2; }
body.parker-app .generated-image-meta small { overflow: hidden; color: var(--ws-muted); font: 9px/1.4 var(--ws-font-mono); text-overflow: ellipsis; white-space: nowrap; }
body.parker-app .generated-image-actions { flex: none; display: flex; gap: 2px; }
body.parker-app .generated-image-actions .icon-button { width: 30px; min-height: 30px; border-color: transparent; background: transparent; color: var(--ws-muted); }
body.parker-app .generated-image-actions .icon-button:hover { border-color: var(--ws-line); background: var(--ws-canvas-subtle); color: var(--ws-ink); }
body.parker-app .generated-image-actions .icon-button.danger:hover { border-color: var(--ws-danger); color: var(--ws-danger); }
body.parker-app .image-gallery-empty { grid-column: 1/-1; min-height: 190px; }
@keyframes image-generation-spin { to { transform: rotate(360deg); } }
@keyframes image-generation-pending { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  body.parker-app .button .lucide-loader-circle,
  body.parker-app .icon-button .lucide-loader-circle,
  body.parker-app .generated-image-preview--pending .lucide-loader-circle,
  body.parker-app .generated-image-preview--pending { animation: none; }
}
body.parker-app .model-picker-mobile-dialog { display: grid; gap: 14px; }
body.parker-app .model-picker-mobile-dialog h2 { padding-right: 38px; }
body.parker-app .model-picker-mobile-options { max-height: min(440px,62dvh); overflow-y: auto; display: grid; border: 1px solid var(--ws-line); border-radius: 5px; }
body.parker-app .model-picker-mobile-option { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-ink); text-align: left; }
body.parker-app .model-picker-mobile-option:last-child { border-bottom: 0; }
body.parker-app .model-picker-mobile-option[aria-selected="true"] { background: var(--ws-accent-soft); color: var(--ws-accent); font-weight: 700; }
body.parker-app .model-picker-mobile-option span { min-width: 0; overflow-wrap: anywhere; }
body.parker-app .model-picker-mobile-option svg { flex: none; }
body.parker-app .modal-backdrop { background: var(--ws-backdrop); backdrop-filter: blur(3px); }
body.parker-app .modal { border: 1px solid var(--ws-line-strong); border-radius: 6px; background: var(--ws-surface-raised); box-shadow: var(--ws-shadow-overlay); }
body.parker-app .modal h2 { font-size: 20px; }
body.parker-app .toast { border-radius: 4px; background: var(--ws-ink); color: var(--ws-surface); box-shadow: var(--ws-shadow-overlay); }

@keyframes panel-enter {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Desktop reading scale: keep long-form chat comfortable at normal monitor distance. */
@media (min-width: 1021px) {
  body.parker-app .header-turns { font-size: 11px; }
  body.parker-app .message-markup-name { font-size: 12px; }
  body.parker-app .message-markup-bubble { font-size: 16px; line-height: 1.75; }
  body.parker-app .prologue-copy p { font-size: 16px; }

}

@media (max-width: 1180px) {
  body.parker-app { --sidebar: 196px; }
  body.parker-app .sidebar { padding-inline: 12px; }
  body.parker-app .sidebar .brand > span,
  body.parker-app .sidebar .nav-label,
  body.parker-app .sidebar .nav-button span,
  body.parker-app .sidebar .account-strip > span:not(.avatar),
  body.parker-app .sidebar .account-strip > svg { display: initial; }
  body.parker-app .page { padding-inline: 30px; }
  body.parker-app .story-grid { gap-inline: 18px; }

}

@media (max-width: 1020px) {
  body.parker-app .story-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.parker-app .story-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.parker-app .story-card-featured .story-body { width: 88%; }
  body.parker-app .generated-image-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

}

@media (max-width: 820px) {
  body.parker-app { --sidebar: 0px; --topbar: 62px; }
  body.parker-app .app-shell,
  body.parker-app.workspace-active .app-shell { padding-left: 0 !important; }
  body.parker-app .sidebar,
  body.parker-app.workspace-active .sidebar {
    width: min(300px,86vw);
    display: flex !important;
    padding: 18px 14px calc(14px + env(safe-area-inset-bottom));
    z-index: 92;
    transform: translateX(-102%);
    transition: transform 220ms cubic-bezier(.16,1,.3,1);
  }
  body.parker-app .sidebar.is-open,
  body.parker-app.workspace-active .sidebar.is-open { transform: translateX(0); box-shadow: 18px 0 48px rgb(23 25 22 / 18%); }
  body.parker-app .sidebar-close { position: absolute; top: 18px; right: 14px; width: 38px; min-height: 38px; display: grid; z-index: 1; }
  body.parker-app .sidebar .brand { padding-right: 46px; }
  body.parker-app .sidebar-nav { padding-right: 2px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  body.parker-app .sidebar .account-strip > span:not(.avatar) { display: grid; gap: 1px; text-align: left; }
  body.parker-app .site-navigation-scrim {
    position: fixed;
    z-index: 91;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    background: rgb(24 25 23 / 38%);
  }
  body.parker-app .site-navigation-scrim[hidden] { display: none; }
  body.parker-app.site-navigation-open { overflow: hidden; }
  body.parker-app .topbar { padding: 9px 12px; }
  body.parker-app .topbar .search-box { min-width: 0; width: auto; flex: 1; display: block; }
  body.parker-app .page { padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); }
  body.parker-app .image-generation-form { grid-template-columns: 1fr; }
  body.parker-app .image-prompt-field { border-right: 0; border-bottom: 1px solid var(--ws-line); }
  body.parker-app .image-generation-controls { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
  body.parker-app .image-generation-cost { min-height: 38px; border-bottom: 0; }
  body.parker-app .image-generation-controls .button { width: auto; min-width: 118px; }

}

@media (max-width: 760px) {
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) { border-top: 0; }
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) .story-cover { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) .story-body { padding: 14px 2px 0; background: transparent; }
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) h3 { min-height: 0; color: var(--ws-ink); font-size: 21px; }
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) .story-author { color: var(--ws-accent); }
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) p { color: var(--ws-muted-strong); }
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) .story-metrics,
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) .tag { background: transparent; color: var(--ws-muted); }

}

@media (max-width: 620px) {
  body.parker-app .author-header { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; margin-bottom: 24px; }
  body.parker-app .author-header > .author-actions { grid-column: 1 / -1; justify-content: space-between; }
  body.parker-app .author-avatar { width: 48px; height: 48px; font-size: 17px; }
  body.parker-app .author-identity h1 { font-size: 21px; overflow-wrap: anywhere; }
  body.parker-app .following-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; }
  body.parker-app .topbar { gap: 8px; }
  body.parker-app .mobile-brand { min-width: 38px; gap: 0; }
  body.parker-app .mobile-brand img { width: 32px; height: 32px; }
  body.parker-app .mobile-brand strong { display: none; }
  body.parker-app .search-box { width: auto; flex: 1; }
  body.parker-app .top-actions .top-points { display: none; }
  body.parker-app .explore-intro { min-height: 82px; margin-bottom: 17px; }
  body.parker-app .explore-intro h1 { font-size: 31px; }
  body.parker-app .explore-intro p { font-size: 13px; }
  body.parker-app .explore-count { display: none; }
  body.parker-app .featured-world { margin-inline: 0; margin-bottom: 26px; }
  body.parker-app .story-card.story-card-featured { height: 360px; min-height: 330px; border-radius: 14px; }
  body.parker-app .story-card-featured .story-body { width: 100%; padding: 22px 18px; }
  body.parker-app .story-card-featured h3 { font-size: 27px; }
  body.parker-app .story-card-featured p { font-size: 12px; -webkit-line-clamp: 2; }
  body.parker-app .featured-label { top: 14px; left: 15px; }
  body.parker-app .filter-line { align-items: flex-start; }
  body.parker-app .ranking-tabs { gap: 15px; }
  body.parker-app .ranking-tabs .segment { min-height: 40px; }
  body.parker-app .filter-toggle { min-height: 40px; }
  body.parker-app .chip { min-height: 38px; }
  body.parker-app .facet-group { grid-template-columns: 1fr; gap: 5px; }
  body.parker-app .facet-group legend { float: none; width: auto; padding-top: 0; }
  body.parker-app .facet-option { min-height: 34px; }
  body.parker-app .story-grid,
  body.parker-app .story-grid.compact { grid-template-columns: 1fr; gap: 28px; }
  body.parker-app .story-card:not(.story-card-featured),
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) {
    overflow: hidden;
    border: 1px solid var(--ws-line);
    border-radius: 14px;
    background: var(--ws-surface-raised);
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
  }
  body.parker-app .story-card:not(.story-card-featured) .story-cover { border-radius: 0; }
  body.parker-app .story-card:not(.story-card-featured) .story-body,
  body.parker-app .story-grid:not(.compact) .story-card:first-child:not(.story-card-featured) .story-body { padding: 16px; }
  body.parker-app .story-card:not(.story-card-featured) h3 { min-height: 0; }
  body.parker-app .image-studio { gap: 24px; }
  body.parker-app .image-studio-heading { align-items: start; gap: 10px; }
  body.parker-app .image-credit-cost { align-self: start; }
  body.parker-app .image-prompt-field,
  body.parker-app .image-generation-controls { padding: 14px; }
  body.parker-app .image-prompt-field textarea { min-height: 142px; font-size: 16px; }
  body.parker-app .image-generation-controls { grid-template-columns: 1fr; gap: 10px; }
  body.parker-app .image-generation-cost { border-bottom: 1px solid var(--ws-line); }
  body.parker-app .image-generation-controls .button { width: 100%; }
  body.parker-app .generated-image-grid { grid-template-columns: 1fr; gap: 22px; }
  body.parker-app .generated-image-preview { aspect-ratio: 4 / 3; }
  body.parker-app .header-turns { display: none; }
  body.parker-app .prologue-copy h1 { margin: 5px 0 7px; font-size: 21px; }
  body.parker-app .prologue-copy p { max-height: 6.9em; font-size: 13px; line-height: 1.72; }
  body.parker-app .opening-switch { min-height: 30px; margin-top: 8px; }
  body.parker-app .settings-generation { grid-template-columns: 1fr; }
  body.parker-app .settings-tabs { gap: 15px; padding-inline: 14px; }
  body.parker-app .settings-section { padding: 14px; }
  body.parker-app .settings-footer { flex-wrap: wrap; }
  body.parker-app .settings-footer > label { flex-basis: 100%; }
  body.parker-app .settings-footer .button { flex: 1; }
  body.parker-app .setting-inline { grid-template-columns: 1fr; gap: 0; }

  body.parker-app .preset-page-heading { gap: 13px; }
  body.parker-app .preset-page-heading .page-heading-actions { width: 100%; }
  body.parker-app .preset-page-heading .button { flex: 1; }
  body.parker-app .preset-row { grid-template-columns: 30px minmax(0,1fr); }
  body.parker-app .preset-actions { grid-column: 2; overflow-x: auto; }
  body.parker-app .modal:has(.preset-editor) { height: calc(100dvh - 16px); }
  body.parker-app .preset-editor { grid-template-columns: 1fr; }
  body.parker-app .preset-editor-core { padding-right: 0; border-right: 0; }
  body.parker-app .preset-editor-package { max-height: none; overflow: visible; }
  body.parker-app .preset-editor .modal-actions { position: sticky; bottom: -18px; margin-inline: -14px; padding: 11px 14px calc(2px + env(safe-area-inset-bottom)); background: var(--ws-surface-raised); }

}

@keyframes panel-enter-mobile {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 390px) {
  body.parker-app .prologue-copy p { max-height: 5.2em; }
  body.parker-app .preset-number-grid { grid-template-columns: 1fr; }

}

@media (max-width: 620px) and (max-height: 600px) {
  body.parker-app .explore-intro { min-height: 68px; margin-bottom: 12px; }
  body.parker-app .explore-intro h1 { font-size: 28px; }
  body.parker-app .explore-intro p { margin-top: 4px; font-size: 12px; }
  body.parker-app .story-card.story-card-featured {
    height: calc(100dvh - var(--topbar) - 156px);
    min-height: 210px;
  }
  body.parker-app .story-card-featured .story-body { padding: 16px 18px; }
  body.parker-app .story-card-featured h3 { font-size: 24px; }
  body.parker-app .story-card-featured p { display: none; }
  body.parker-app .story-enter { margin-top: 11px; }

}

@media (prefers-reduced-motion: reduce) {
  body.parker-app .sidebar { transition: none; }

}

/* Desktop sidebar collapse */
@media (min-width: 821px) {
  body.parker-app.sidebar-collapsed { --sidebar: 72px; }
  body.parker-app.sidebar-collapsed .sidebar { padding-inline: 10px; }
  body.parker-app.sidebar-collapsed .brand { justify-content: center; margin-inline: 0; margin-bottom: 48px; padding-inline: 0; }
  body.parker-app.sidebar-collapsed .brand > span,
  body.parker-app.sidebar-collapsed .sidebar .nav-label,
  body.parker-app.sidebar-collapsed .sidebar .nav-button > span,
  body.parker-app.sidebar-collapsed .sidebar .account-strip > span:not(.avatar),
  body.parker-app.sidebar-collapsed .sidebar .account-strip > svg { display: none; }
  body.parker-app.sidebar-collapsed .nav-button { justify-content: center; padding-inline: 0; }
  body.parker-app.sidebar-collapsed .sidebar-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.parker-app.sidebar-collapsed .sidebar .account-strip {
    min-height: 38px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 4px 0;
  }
  body.parker-app .sidebar-collapse {
    position: absolute;
    top: 19px;
    right: 14px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--archive-spine-muted);
  }
  body.parker-app .sidebar-collapse:hover { background: var(--archive-spine-raised); color: var(--archive-spine-ink); }
  body.parker-app .sidebar-collapse:focus-visible { outline: 2px solid var(--archive-spine-ink); outline-offset: 2px; }
  body.parker-app.sidebar-collapsed .sidebar-collapse { top: 80px; right: 19px; }

}

.tavern-editor { min-width: 0; margin-bottom: 20px; }
.tavern-editor-heading, .tavern-prompt-actions { display: flex; align-items: center; gap: 8px; }
.tavern-editor-heading { justify-content: space-between; margin-bottom: 12px; }
.tavern-editor h3, .tavern-warnings h3 { margin: 0; font-size: 15px; }
.tavern-prompt { border-bottom: 1px solid var(--border, #dedfe2); }
.tavern-prompt > summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; cursor: pointer; }
.tavern-prompt-index { width: 24px; flex: 0 0 24px; font-size: 12px; color: var(--muted, #65666b); }
.tavern-prompt-name { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 13px; }
.tavern-prompt-state { flex: 0 0 28px; font-size: 12px; color: var(--muted, #65666b); }
.tavern-prompt-fields { display: grid; gap: 12px; padding: 0 0 16px; min-width: 0; }
.tavern-prompt-actions .switch-line { margin-right: auto; }
.tavern-editor .setting-field { min-width: 0; }
.tavern-editor textarea { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.tavern-marker { font-family: monospace; font-size: 12px; overflow-wrap: anywhere; }
.tavern-prefill { margin-top: 16px; }
.tavern-warnings { padding: 12px 0; color: #75551c; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.tavern-warnings ul { margin: 8px 0 0; padding-left: 20px; }
.tavern-warnings li + li { margin-top: 6px; }
.preset-import-form { min-width: 0; }
.preset-import-summary { display: grid; gap: 8px; font-size: 13px; margin: 18px 0; }
.preset-import-summary > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
.preset-import-summary dd { margin: 0; overflow-wrap: anywhere; }
.preset-import-error { color: #ad3030; font-size: 13px; overflow-wrap: anywhere; }

@media (min-width: 821px) {
  body.parker-app .modal:has(.preset-editor .tavern-editor) { height: min(780px, 92dvh); display: flex; flex-direction: column; overflow: hidden; }
  body.parker-app .modal:has(.tavern-editor) .preset-editor { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  body.parker-app .modal:has(.tavern-editor) .preset-editor-core,
  body.parker-app .modal:has(.tavern-editor) .preset-editor-package { min-height: 0; max-height: none; overflow-y: auto; }

}

/* The entry trigger opens the family/price list outside clipped toolbars. */
body.parker-app .story-game-config-model .model-picker.entry-model,
body.parker-app .dock-model .model-picker.entry-model { display: flex; }
body.parker-app .model-picker.entry-model .model-picker-trigger { width: 100%; min-width: 0; flex: 1 1 auto; }
body.parker-app .model-picker.entry-model .model-picker-trigger > span { flex: 1 1 auto; }
body.parker-app .model-picker-mobile-dialog .model-picker-option small { white-space: normal; overflow-wrap: anywhere; }