/* Interior-only design system. Never loaded by the landing page.
   Keep post artwork on its own palette; these rules style the workspace. */
body.studio-page {
  --bg: #151618;
  --surface: #1e2023;
  --surface-2: #282b2f;
  --line: #34373c;
  --line-2: #50555e;
  --ink: #f5f5f1;
  --ink-2: #d1d4d9;
  --muted: #a0a6af;
  --signal: #f5db58;
  --signal-hi: #ffe887;
  --signal-soft: #353222;
  --signal-line: #8f803d;
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--muted);
  --border: var(--line);
  --cta: var(--signal);
  --font: 'Archivo', 'Segoe UI', sans-serif;
  --radius: 16px;
  --radius-m: 16px;
  --radius-s: 9px;
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.studio-page *, .studio-page *::before, .studio-page *::after { box-sizing: border-box; }
.studio-page ::selection { background: var(--signal); color: #191a1c; }
.studio-page :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.studio-page :is(button, input, textarea, select) { font-family: var(--font); }
.studio-page :is(button, a) { -webkit-tap-highlight-color: transparent; }
.studio-page :is(.btn, .app-button) { min-height: 44px; padding: 10px 17px; border-radius: 9px; font-size: 14px; font-weight: 650; line-height: 1.35; box-shadow: none; }
html .studio-page :is(.btn-primary, .btn-signal, .app-button-primary) { background: var(--signal); border-color: var(--signal); color: #191a1c; }
html .studio-page :is(.btn-primary, .btn-signal, .app-button-primary):hover { background: var(--signal-hi); border-color: var(--signal-hi); color: #191a1c; }
html .studio-page :is(.btn-ghost, .app-button:not(.app-button-primary)) { background: transparent; border-color: var(--line-2); color: var(--ink); }
html .studio-page :is(.btn-ghost, .app-button:not(.app-button-primary)):hover { background: var(--surface-2); }
.studio-page :is(.btn, .app-button):disabled { opacity: .45; cursor: not-allowed; }
.studio-page .btn-sm { min-height: 38px; padding: 8px 12px; font-size: 13px; }
.studio-page :is(.hint, .hint-line, .card-sub, .empty, .gen-note) { line-height: 1.6; }

/* A quiet, permanent navigation rail and a clear working canvas. */
body.studio-page.workspace-mounted .tg-ws .postmaxx-app-shell { grid-template-columns: 232px minmax(0, 1fr); }
html .studio-page .app-sidebar { padding: 26px 16px 18px; background: #101113; border-color: #2b2e32; height: 100dvh; overflow-y: auto; }
.studio-page .app-brand { padding: 3px 12px 30px; font-size: 23px; letter-spacing: -.055em; }
.studio-page .app-brand::after { width: 15px; height: 5px; margin-top: 17px; border-radius: 1px; }
.studio-page .app-sidebar-create { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; margin: 0 0 20px; padding: 10px; border: 1px solid var(--signal); border-radius: 9px; background: var(--signal); color: #191a1c; font-size: 14px; font-weight: 700; text-decoration: none; }
.studio-page .app-sidebar-create:hover { background: var(--signal-hi); }
html .studio-page .app-nav-label { margin: 19px 12px 10px; color: #8f969f; font-size: 12px; font-weight: 500; letter-spacing: .055em; }
.studio-page .app-side-nav { gap: 5px; }
html .studio-page .app-side-nav a { min-height: 46px; gap: 13px; padding: 10px 12px; color: #aeb4bd; font-size: 14px; border-radius: 8px; }
html .studio-page .app-side-icon { width: 20px; height: 20px; color: inherit; }
html .studio-page .app-side-nav a.active { background: #26292d; color: #fff; box-shadow: inset 3px 0 var(--signal); }
html .studio-page .app-side-nav a:hover { background: #202226; color: #fff; }
.studio-page .app-sidebar-foot { margin-top: auto; padding-top: 22px; border-color: #2b2e32; }
.studio-page .app-usage { margin: 0 12px 20px; font-size: 12px; }
.studio-page .app-usage-line { margin-top: 12px; height: 5px; }
.studio-page .app-account-link { min-height: 58px; gap: 12px; }
.studio-page .app-account-avatar { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; font-size: 14px; }
.studio-page .app-account-link b { font-size: 14px; }
.studio-page .app-account-link small { font-size: 12px; }
.studio-page .app-main { height: 100dvh; scrollbar-gutter: stable; }
html .studio-page .app-topbar { display: flex; min-height: 68px; padding: 0 36px; background: #151618f2; border-color: #2b2e32; }
.studio-page .app-crumb { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.studio-page .app-crumb > span:nth-child(2) { color: #626974; }
.studio-page .app-help-link { color: var(--muted); font-size: 13px; text-decoration: none; margin-left: auto; }
.studio-page .app-help-link span { margin-left: 8px; }
.studio-page .app-help-link:hover { color: var(--ink); }
.studio-page .app-content { width: min(1280px, calc(100% - 72px)); padding: 38px 0 64px; min-height: calc(100dvh - 68px); }
.studio-page :is(.app-view-head, .dashboard-welcome) { margin-bottom: 30px; }
.studio-page .app-view-eyebrow { font-size: 12px; letter-spacing: .08em; margin-bottom: 13px; }
.studio-page .app-view-eyebrow::before { display: none; }
.studio-page :is(.app-view-head h1, .dashboard-welcome h1) { font-size: clamp(30px, 3vw, 42px); font-weight: 600; letter-spacing: -.045em; line-height: 1.13; }
.studio-page :is(.app-view-head p, .dashboard-welcome p) { margin-top: 12px; color: var(--muted); font-size: 16px; max-width: 60ch; }
body.studio-page.workspace-mounted .tg-ws .card { padding: 26px; border-radius: 14px; background: var(--surface); border-color: var(--line); }
body.studio-page.workspace-mounted .tg-ws :is(.card-head h2, .card > h2) { font-size: 20px; font-weight: 600; }
body.studio-page.workspace-mounted .tg-ws :is(.card-head p, .card > .card-sub) { font-size: 14px; }

/* Overview: one metric band, an editorial main column, useful side actions. */
.studio-page .dashboard-welcome { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; align-items: center; overflow: visible; }
.studio-page .dashboard-stats { gap: 0; margin: 0 0 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.studio-page .dashboard-stat { padding: 25px 26px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; }
.studio-page .dashboard-stat:last-child { border-right: 0; }
.studio-page .dashboard-stat > span { font-size: 14px; font-weight: 500; }
.studio-page .dashboard-stat strong { margin-top: 18px; font-size: clamp(30px, 3vw, 40px); font-weight: 550; }
.studio-page .dashboard-stat small { margin-top: 12px; font-size: 12px; white-space: normal; }
.studio-page .dashboard-grid { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 24px; margin-top: 0; }
.studio-page .dashboard-panel { border-radius: 14px; }
.studio-page .dashboard-panel-head { min-height: 86px; padding: 22px 24px; }
.studio-page .dashboard-panel-head h2 { font-size: 20px; font-weight: 600; }
.studio-page .dashboard-kicker { font-size: 12px; font-weight: 500; letter-spacing: .065em; margin-bottom: 8px; }
.studio-page .dashboard-panel-head > a { font-size: 13px; color: var(--ink-2); }
.studio-page .dashboard-next { border-top: 3px solid var(--signal); }
.studio-page .dashboard-next-post { padding: 24px; }
.studio-page .dashboard-next-post h3 { font-size: 27px; max-width: 28ch; line-height: 1.25; }
.studio-page .dashboard-next-post p { font-size: 14px; margin: 14px 0 22px; }
.studio-page .dashboard-next-date :is(span, b) { font-size: 12px; }
.studio-page .dashboard-empty { min-height: 170px; padding: 28px; font-size: 14px; line-height: 1.7; }
.studio-page .dashboard-action-list { padding: 6px 20px; }
.studio-page .dashboard-action-list a { padding: 19px 0; }
.studio-page .dashboard-action-list b { font-size: 14px; }
.studio-page .dashboard-action-list small { font-size: 13px; line-height: 1.5; margin-top: 5px; }
.studio-page .dashboard-action-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--signal); }
.studio-page .dashboard-checks { padding: 14px 24px; }
.studio-page :is(.dashboard-check, .dashboard-performance-row) { padding-block: 15px; font-size: 14px; }
.studio-page .dashboard-performance-row :is(b, strong) { font-size: 14px; }
.studio-page .dashboard-performance-row small { font-size: 12px; }

/* Content studio: generous format previews and a separate saved-work shelf. */
body.studio-page.workspace-mounted .tg-ws #posts-composer { margin: 0 0 36px; padding: 28px; border-color: var(--line); border-radius: 16px; }
.studio-page .posts-composer-head { align-items: center; padding-bottom: 24px; }
.studio-page .posts-composer-head .eyebrow { color: var(--signal); font-size: 12px; letter-spacing: .1em; }
.studio-page .posts-composer-head h2 { font-size: 25px; font-weight: 600; margin-top: 8px; }
.studio-page .posts-composer-head p { font-size: 14px; margin-top: 8px; }
.studio-page .posts-composer .in-workspace { margin-top: 24px; }
.studio-page .posts-composer .gen-topline { display: none; }
.studio-page .posts-composer .gen-zone { margin-bottom: 0; }
.studio-page .posts-composer .recipe-panel { border: 0; padding: 0; background: none; }
.studio-page .rp-head h3 { font-size: 18px; }
.studio-page .rp-head .hint { font-size: 14px; max-width: 70ch; }
.studio-page .recipe-filters { gap: 8px; padding-block: 16px; flex-wrap: wrap; }
.studio-page .recipe-filters button { min-height: 40px; padding: 8px 16px; border-radius: 8px; font-size: 14px; }
.studio-page .recipe-gallery { gap: 16px; }
.studio-page .make-panel { margin-top: 24px; padding: 24px; border: 1px solid var(--signal-line); border-radius: 12px; background: #24241e; }
.studio-page .make-row { gap: 18px; }
.studio-page .rd-head { gap: 12px; }
.studio-page .rd-head strong { font-size: 18px; }
.studio-page .gen-note { font-family: var(--font); font-size: 14px; }
body.studio-page.workspace-mounted .in-workspace .output-zone { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.studio-page .output-head h2 { font-size: 24px; }
.studio-page .output-head p { font-size: 14px; }
.studio-page .empty-state { min-height: 170px; padding: 28px; border-radius: 12px; }
.studio-page .empty-state h3 { font-size: 18px; }
.studio-page .empty-state p { font-size: 14px; }
body.studio-page.workspace-mounted .tg-ws #posts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
body.studio-page.workspace-mounted .tg-ws #posts-list .group-label { padding: 0 0 12px; font: 600 18px var(--font); text-transform: none; letter-spacing: -.015em; border-bottom: 1px solid var(--line); }
html body.studio-page.workspace-mounted .tg-ws #posts-list :is(.post, .post-body) { background: var(--surface) !important; }
body.studio-page.workspace-mounted .tg-ws #posts-list .post { border-radius: 13px; transition: border-color .18s, transform .18s; }
body.studio-page.workspace-mounted .tg-ws #posts-list .post:hover { border-color: #727985; transform: translateY(-3px); }
body.studio-page.workspace-mounted .tg-ws #posts-list :is(.post-when, .post-kind) { font-size: 12px; }
body.studio-page.workspace-mounted .tg-ws #posts-list .post-actions .btn { min-height: 38px; font-size: 13px; }
body.studio-page.workspace-mounted .tg-ws #posts-list .post-caption { font-size: 14px; line-height: 1.55; }
.studio-page .post-viewer-panel { border-radius: 16px; }
.studio-page .post-viewer-foot p { font-size: 14px; max-height: 88px; }

/* Product and publishing share a settings rhythm, not a stack of tiny cards. */
body.studio-page.workspace-mounted .tg-ws #pane-brand { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 1060px; }
body.studio-page.workspace-mounted .tg-ws #pane-brand .app-view-head { margin-bottom: 6px; }
body.studio-page.workspace-mounted .in-workspace-product .profile-card { padding: 28px; border-radius: 14px; }
.studio-page .profile-card h2 { font-size: 22px; font-weight: 600; }
.studio-page .profile-card .hint-line { font-size: 14px; }
.studio-page .profile-card .ps-name { font-size: 22px; }
.studio-page .profile-card .ps-what { font-size: 16px; }
.studio-page .profile-card .ps-meta { font-size: 12px; }
body.studio-page.workspace-mounted .tg-ws :is(.field label, .setting-copy strong) { font-family: var(--font); font-size: 14px; }
body.studio-page.workspace-mounted .tg-ws .setting-copy span { font-size: 14px; line-height: 1.6; }
body.studio-page.workspace-mounted .tg-ws .setting-row { padding-block: 22px; }
.studio-page :is(.field input, .field textarea, .field select) { font-size: 16px; line-height: 1.5; padding: 12px 14px; border-radius: 9px; }
body.studio-page.workspace-mounted .tg-ws #pane-publishing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
body.studio-page.workspace-mounted .tg-ws #pane-publishing > .app-view-head { grid-column: 1 / -1; margin-bottom: 6px; }
body.studio-page.workspace-mounted .tg-ws #pane-publishing > .card { margin: 0; }
.studio-page .manual-publish-card .card-head { margin-bottom: 24px; }
.studio-page .manual-publish-card select { font-size: 16px; min-height: 48px; }
body.studio-page.workspace-mounted .tg-ws #pane-account { max-width: 960px; }
body.studio-page.workspace-mounted .tg-ws .plan-summary { padding: 28px 0; }
body.studio-page.workspace-mounted .tg-ws .plan-price { font-size: 36px; }

/* Standalone editor: preview on a recessed stage, writing on a clean panel. */
.studio-edit .ed-wrap { max-width: 1380px; padding: 38px 36px 80px; }
.studio-edit .ed-top { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); align-items: center; }
.studio-edit .ed-top h1 { font-size: 32px; font-weight: 600; letter-spacing: -.04em; }
.studio-edit .ed-when { font-size: 12px; }
.studio-edit .ed-cols { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 40px; }
.studio-edit .ed-stage { top: calc(var(--suite-nav-height, 64px) + 24px); padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #101113; }
.studio-edit .ed-canvas-box { max-width: 420px; margin: auto; box-shadow: 0 16px 36px #0005; }
.studio-edit .ed-fmt { min-height: 40px; font-family: var(--font); font-size: 13px; text-transform: none; letter-spacing: 0; }
.studio-edit .ed-fmt[aria-pressed="true"] { background: var(--surface-2); border-color: var(--signal); }
.studio-edit .ed-strip { padding-top: 20px; gap: 10px; }
.studio-edit .ed-thumb { width: 72px; }
.studio-edit .ed-panel { padding: 24px; margin-bottom: 20px; background: var(--surface); }
.studio-edit .ed-panel h2 { font-size: 18px; font-weight: 600; }
.studio-edit .ed-lab { font-family: var(--font); font-size: 14px; letter-spacing: 0; text-transform: none; margin: 18px 0 8px; }
.studio-edit .ed-panel :is(input, textarea, select) { padding: 12px 14px; font-size: 16px; }
.studio-edit :is(.ed-note, .ed-cta-note) { font-size: 14px; }
.studio-edit .ed-count { font-size: 12px; }

/* Secondary pages use the same typography and measured spacing. */
.studio-account .settings-shell { max-width: 1200px; grid-template-columns: 220px minmax(0, 780px); gap: 48px; padding-top: 42px; }
.studio-account .rail-label { font: 500 12px var(--font); letter-spacing: .06em; }
.studio-account .rail-link { min-height: 46px; }
.studio-account :is(.card, .settings-card) { background: var(--surface); border-color: var(--line); border-radius: 14px; }
.studio-page:is(.studio-privacy, .studio-terms) main { max-width: 850px; padding: 72px 40px 96px; }
.studio-page:is(.studio-privacy, .studio-terms) h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -.045em; font-weight: 600; }
.studio-page:is(.studio-privacy, .studio-terms) h2 { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 23px; }
.studio-page:is(.studio-privacy, .studio-terms) .lead { padding: 24px; border-left: 3px solid var(--signal); border-radius: 0 12px 12px 0; }
.studio-page:is(.studio-privacy, .studio-terms) .updated { margin-top: 16px; font-size: 13px; }
.studio-404 main { max-width: 760px; }
.studio-404 h1 { font-size: clamp(52px, 9vw, 88px); font-weight: 600; letter-spacing: -.06em; }
.studio-404 .code { color: var(--signal); font-size: 14px; }
.studio-404 .pastebar { border-color: var(--line-2); background: var(--surface); border-radius: 12px; }
.studio-404 .sub { font-size: 18px; }
/* .studio-admin's own layout lives entirely in admin.html's own <style>
   block now (see its THESIS comment) — this file used to also carry a
   parallel set of .studio-admin rules and, because two-class selectors like
   `.studio-admin .kpi` out-specify admin.html's single-class `.kpi`, they
   silently won regardless of source order: a 2026-09-17 admin redesign
   shipped and visually did almost nothing until this was found. Don't add
   `.studio-admin` rules back here — admin.html is the one place that page's
   look is decided. */

@media (min-width: 1500px) {
  .studio-page .app-content { padding-top: 48px; }
}
@media (max-width: 1100px) {
  body.studio-page.workspace-mounted .tg-ws .postmaxx-app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .studio-page .app-content { width: calc(100% - 44px); }
  html .studio-page .app-topbar { padding-inline: 22px; }
  .studio-page .dashboard-grid { grid-template-columns: 1fr; }
  .studio-page .dashboard-stat { padding: 20px 16px; }
  body.studio-page.workspace-mounted .tg-ws #posts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.studio-page.workspace-mounted .tg-ws #pane-publishing { grid-template-columns: 1fr; }
  .studio-edit .ed-cols { gap: 24px; }
}
@media (max-width: 860px) {
  .studio-edit .ed-cols { grid-template-columns: 1fr; }
  .studio-edit .ed-stage { position: static; }
}
@media (max-width: 760px) {
  body.studio-page.workspace-mounted .tg-ws .postmaxx-app-shell { display: block; }
  html .studio-page .app-sidebar { position: fixed; width: 256px; height: 100dvh; max-height: 100dvh; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .studio-page .app-menu-button { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; }
  html .studio-page .app-topbar { min-height: 64px; gap: 14px; padding-inline: 16px; }
  .studio-page .app-crumb > span { display: none; }
  .studio-page .app-help-link { font-size: 12px; }
  .studio-page .app-content { width: calc(100% - 32px); padding-top: 28px; }
  .studio-page .app-view-head p { font-size: 15px; }
  .studio-page .dashboard-welcome { align-items: flex-start; gap: 20px; flex-direction: column; }
  .studio-page .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-page .dashboard-stat { border-bottom: 1px solid var(--line); }
  .studio-page .dashboard-stat:nth-child(2) { border-right: 0; }
  .studio-page .dashboard-stat:nth-child(n+3) { border-bottom: 0; }
  .studio-page .dashboard-grid { gap: 18px; }
  .studio-page .dashboard-panel-head { padding: 20px; }
  body.studio-page.workspace-mounted .tg-ws :is(.card, #posts-composer) { padding: 20px; }
  .studio-page .posts-composer-head { gap: 14px; align-items: flex-start; }
  .studio-page .posts-composer-head h2 { font-size: 22px; }
  .studio-page .make-panel { padding: 18px; }
  .studio-edit .ed-wrap { padding: 24px 16px 64px; }
  .studio-edit .ed-stage { padding: 16px; }
  .studio-edit .ed-panel { padding: 20px; }
  .studio-account .settings-shell { display: block; padding: 28px 18px 64px; }
  .studio-page:is(.studio-privacy, .studio-terms) main { padding: 40px 22px 64px; }
}
@media (max-width: 540px) {
  body.studio-page.workspace-mounted .tg-ws #posts-list { grid-template-columns: 1fr; }
  .studio-page .app-help-link { display: none; }
  .studio-page .dashboard-panel-head { flex-wrap: wrap; gap: 10px; }
  .studio-page .posts-composer-head .btn { padding-inline: 10px; }
  .studio-page .recipe-filters { gap: 6px; }
  .studio-page .recipe-filters button { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-page *, .studio-page *::before, .studio-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}