pandorga 1.2.1

data/studio-app/src/styles/studio.css

@@ -0,0 +1,2826 @@
+/* Brazilian Ledger tokens for Studio — mirrors _data/themes/{light,dark}.yml. */
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  --primary: #1c5a7a;
+  --secondary: #287445;
+  --tertiary: #746f30;
+  --background: #ffffff;
+  --panel: #f4f4f4;
+  --surface-high: #ebebeb;
+  --surface-card: #ffffff;
+  --on-surface: #000000;
+  --on-surface-variant: #5e5d59;
+  --outline: #5c5c5c;
+  --outline-variant: #b8b8b8;
+  --error: #ba1a1a;
+  --scrollbar-track: var(--panel);
+  --scrollbar-thumb: color-mix(in srgb, var(--outline-variant) 75%, var(--panel));
+  --scrollbar-thumb-hover: color-mix(in srgb, var(--outline) 70%, var(--panel));
+  --cubist-shard-opacity: 18%;
+  --cubist-shard-opacity-strong: 26%;
+  --shard-alpha: polygon(26% 0, 100% 0, 78% 100%, 0 68%);
+  --shard-beta: polygon(0 0, 74% 18%, 100% 100%, 18% 84%);
+  --font-body: "Newsreader", Georgia, serif;
+  --font-display: "Newsreader", Georgia, serif;
+  --font-title: "Cinzel Decorative", "Times New Roman", serif;
+  --font-label: "Marcellus SC", "Newsreader", Georgia, serif;
+  --font-mono: "Courier Prime", ui-monospace, monospace;
+  /*
+   * Type ladder (readable, not decorative). Body is the reading size;
+   * chrome sits one step under it; micro chrome stays legible but quiet.
+   */
+  --studio-font-size: 18px;
+  --studio-type-display: 1.55rem; /* page / collection title */
+  --studio-type-title: 1.15rem; /* brand, map section heads */
+  --studio-type-body: 1rem; /* entry titles, form values, nav entries */
+  --studio-type-ui: 0.9rem; /* control text */
+  --studio-type-meta: 0.8rem; /* meta lines, crumbs, counts */
+  --studio-type-micro: 0.72rem; /* pills, tags, captions */
+  --studio-brand-title: calc(var(--studio-type-title) + 3pt);
+  --studio-nav-label: calc(var(--studio-type-body) - 0.5pt);
+  --studio-nav-item: var(--studio-type-body);
+  --studio-ledger-title: var(--studio-type-body);
+  --studio-ledger-meta: var(--studio-type-meta);
+  --studio-list-control-height: 2.25rem;
+  --studio-ledger-thumb-w: 4rem;
+  --studio-ledger-thumb-h: 3rem;
+  /* Spacing rhythm — readable chrome, clearer list blocks. */
+  --studio-space-2xs: 0.25rem;
+  --studio-space-xs: 0.4rem;
+  --studio-space-sm: 0.65rem;
+  --studio-space-md: 0.95rem;
+  --studio-space-lg: 1.35rem;
+  --studio-pane-pad: 1.15rem 1.35rem;
+  /* Tall enough that pane-scroll-to-end shows editor + metrics only. */
+  --studio-editor-min-height: max(24rem, calc(100dvh - 7.5rem));
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --primary: #a4c8da;
+  --secondary: #95c8a6;
+  --tertiary: #ddd8a8;
+  --background: #0c0c0e;
+  --panel: #141418;
+  --surface-high: #26262b;
+  --surface-card: #0c0c0e;
+  --on-surface: #ffffff;
+  --on-surface-variant: #b8b7ae;
+  --outline: #93938d;
+  --outline-variant: #45454c;
+  --error: #ffb4ab;
+  --scrollbar-track: var(--panel);
+  --scrollbar-thumb: color-mix(in srgb, var(--outline-variant) 85%, var(--surface-high));
+  --scrollbar-thumb-hover: color-mix(in srgb, var(--outline) 55%, var(--surface-high));
+  --cubist-shard-opacity: 10%;
+  --cubist-shard-opacity-strong: 14%;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  height: 100%;
+  background-color: var(--background);
+  /* Quiet square grid — same apparatus as the public site (assets/css/base.css). */
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--outline) 4%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--outline) 4%, transparent) 1px, transparent 1px);
+  background-size: 1.25rem 1.25rem;
+  background-attachment: fixed;
+  color: var(--on-surface);
+  font-family: var(--font-body);
+  font-size: var(--studio-font-size);
+  line-height: 1.5;
+  /* Firefox + Chromium overlay scrollbars follow color-scheme + these. */
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* Theme-aware scrollbars for Studio chrome (nav, lists, editor, preview). */
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border: 2px solid var(--scrollbar-track);
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+  border: 2px solid var(--scrollbar-track);
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--scrollbar-track);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+a {
+  color: var(--primary);
+}
+
+#app {
+  min-height: 100vh;
+  height: 100%;
+}
+
+.studio-shell {
+  display: grid;
+  grid-template-columns: 16.5rem minmax(0, 1fr);
+  min-height: 100vh;
+  height: 100%;
+  background: transparent;
+}
+
+.studio-nav {
+  background: var(--panel);
+  border-right: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  padding: var(--studio-space-md) var(--studio-space-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--studio-space-sm);
+  overflow: auto;
+}
+
+.studio-nav-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.studio-nav-menu-toggle {
+  display: none;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  border-radius: 0;
+  background: var(--background);
+  cursor: pointer;
+  color: var(--on-surface);
+  font: inherit;
+  text-align: left;
+}
+
+.studio-nav-menu-toggle:hover {
+  background: var(--surface-high);
+}
+
+.studio-nav-menu-toggle .studio-nav-menu-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-label);
+  font-size: var(--studio-nav-label);
+  letter-spacing: 0.04em;
+  font-weight: 400;
+}
+
+.studio-nav-menu-toggle .material-symbols-outlined {
+  flex-shrink: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.studio-nav-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--studio-space-xs);
+  min-height: 0;
+}
+
+.studio-brand {
+  display: grid;
+  grid-template-columns: 2.5rem minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--studio-space-sm);
+  padding: var(--studio-space-sm) var(--studio-space-xs) var(--studio-space-md);
+  margin-bottom: var(--studio-space-xs);
+  border-bottom: 1px solid var(--outline-variant);
+}
+
+.studio-brand-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  min-width: 0;
+}
+
+.studio-brand-name {
+  font-family: var(--font-title);
+  font-size: var(--studio-brand-title);
+  font-weight: 400;
+  font-synthesis: none;
+  line-height: 1.15;
+  letter-spacing: 0.02em;
+}
+
+.studio-brand strong {
+  font-family: var(--font-title);
+  font-size: var(--studio-brand-title);
+  font-weight: 400;
+  font-synthesis: none;
+  line-height: 1.15;
+  letter-spacing: 0.02em;
+}
+
+button.studio-brand-home {
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+}
+
+button.studio-brand-home:hover,
+button.studio-brand-home[aria-current="page"] {
+  background: var(--surface-high);
+}
+
+.studio-brand .studio-mark {
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  justify-self: center;
+  /* Optical nudge: logo glyph sits a hair high in its viewBox. */
+  transform: translateY(0.5px);
+}
+
+.studio-mark-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/*
+ * Same theme swap as the public site stamp (assets/css/base.css):
+ * light page → pastel triad; dark page → production triad.
+ */
+:root .studio-mark-primary,
+[data-theme="light"] .studio-mark-primary {
+  fill: #a4c8da;
+}
+
+:root .studio-mark-secondary,
+[data-theme="light"] .studio-mark-secondary {
+  fill: #95c8a6;
+}
+
+:root .studio-mark-tertiary,
+[data-theme="light"] .studio-mark-tertiary {
+  fill: #ddd8a8;
+}
+
+[data-theme="dark"] .studio-mark-primary {
+  fill: #1c5a7a;
+}
+
+[data-theme="dark"] .studio-mark-secondary {
+  fill: #287445;
+}
+
+[data-theme="dark"] .studio-mark-tertiary {
+  fill: #746f30;
+}
+
+.studio-mark-frame {
+  fill: none;
+  stroke: var(--on-surface-variant);
+  stroke-width: 1;
+  stroke-linejoin: miter;
+  vector-effect: non-scaling-stroke;
+}
+
+.auth-gate .studio-mark {
+  width: 2rem;
+  height: 2rem;
+}
+
+.studio-nav-group {
+  margin-top: var(--studio-space-2xs);
+}
+
+.studio-nav-group-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--studio-space-xs);
+  margin: 0;
+  padding: var(--studio-space-sm) var(--studio-space-xs);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+  color: var(--on-surface-variant);
+  text-align: left;
+  font-family: var(--font-label);
+  font-size: var(--studio-nav-label);
+  text-transform: none;
+  letter-spacing: 0.04em;
+  font-weight: 400;
+}
+
+.studio-nav-group-toggle:hover {
+  background: var(--surface-high);
+  color: var(--on-surface);
+}
+
+.studio-nav-group-toggle .material-symbols-outlined {
+  font-size: 1.25rem;
+  line-height: 1;
+  flex-shrink: 0;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
+}
+
+.studio-nav-group-toggle .nav-group-label {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-label);
+  font-size: inherit;
+  letter-spacing: inherit;
+  border-bottom: 1px solid var(--outline-variant);
+  padding-bottom: 0.2rem;
+  text-align: left;
+}
+
+.studio-nav-group-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.2rem 0 var(--studio-space-sm);
+}
+
+.studio-nav-group-items[hidden] {
+  display: none;
+}
+
+.studio-nav button.nav-item {
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--studio-space-sm);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0.4rem 0.5rem 0.4rem 1.7rem;
+  cursor: pointer;
+  color: var(--on-surface);
+  font-family: var(--font-body);
+  font-size: var(--studio-nav-item);
+  line-height: 1.35;
+  letter-spacing: 0.01em;
+}
+
+.studio-nav button.nav-item:hover,
+.studio-nav button.nav-item[aria-current="page"] {
+  background: var(--surface-high);
+}
+
+.nav-item-label {
+  min-width: 0;
+}
+
+.nav-item-count {
+  flex: 0 0 auto;
+  font-family: var(--font-body);
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+}
+
+.studio-main {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: transparent;
+}
+
+.studio-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.4rem;
+  padding: var(--studio-space-xs) var(--studio-space-md);
+  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--on-surface-variant);
+  background: var(--background);
+}
+
+.studio-crumb-sep {
+  color: var(--outline-variant);
+}
+
+.studio-crumb.is-current {
+  color: var(--on-surface);
+  text-transform: none;
+  letter-spacing: 0.02em;
+}
+
+.studio-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--studio-space-sm);
+  padding: var(--studio-space-xs) var(--studio-space-md);
+  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  background: var(--background);
+  min-width: 0;
+}
+
+.studio-toolbar .status-pill {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-toolbar .spacer {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.studio-toolbar .btn {
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.btn {
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  padding: 0.25rem 0.6rem;
+  cursor: pointer;
+  min-height: var(--studio-list-control-height);
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-ui);
+  letter-spacing: 0.01em;
+}
+
+.btn-nav {
+  gap: 0.15rem;
+}
+
+.btn-nav-icon {
+  font-size: 1.25rem !important;
+  line-height: 1;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
+}
+
+.btn:hover {
+  background: var(--surface-high);
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+
+[data-theme="dark"] .btn-primary {
+  color: #0f1a22;
+}
+
+.btn-primary:hover {
+  filter: brightness(1.05);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.studio-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: transparent;
+}
+
+.studio-body.list-only {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--studio-pane-pad);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  background: transparent;
+}
+
+.pane-preview {
+  border-left: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  background: var(--panel);
+  min-height: 0;
+}
+
+.ledger-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.ledger-columns {
+  display: none;
+}
+
+.ledger-row {
+  display: grid;
+  grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr);
+  gap: var(--studio-space-md);
+  align-items: start;
+  padding: var(--studio-space-md) var(--studio-space-md);
+  margin: 0 0 var(--studio-space-xs);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
+  border-radius: 0;
+  cursor: pointer;
+  background: var(--background);
+  text-align: left;
+  width: 100%;
+  font: inherit;
+  color: inherit;
+}
+
+.ledger-row--writing {
+  grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr);
+}
+
+.ledger-row:hover {
+  background: var(--surface-high);
+}
+
+.ledger-copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding-top: 0.1rem;
+}
+
+.ledger-title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--studio-space-xs) var(--studio-space-sm);
+  min-width: 0;
+}
+
+.ledger-title {
+  font-family: var(--font-body);
+  font-size: var(--studio-ledger-title);
+  font-weight: 400;
+  line-height: 1.3;
+  min-width: 0;
+}
+
+/* Fixed-width so Published/Draft columns align across the list. */
+.ledger-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 5.25rem;
+  flex: 0 0 5.25rem;
+  padding: 0.1rem 0.3rem;
+  border: 1px solid transparent;
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.ledger-lang {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0.1rem 0.3rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--surface-high);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--on-surface-variant);
+  line-height: 1.2;
+}
+
+.ledger-taxonomy {
+  display: none;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-content: flex-start;
+  min-width: 0;
+}
+
+.ledger-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.08rem 0.35rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 65%, transparent);
+  background: var(--background);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  color: var(--on-surface-variant);
+  line-height: 1.25;
+}
+
+.ledger-ops {
+  display: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.2rem;
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+  white-space: nowrap;
+  padding-top: 0.1rem;
+}
+
+.ledger-ops-icon {
+  font-size: 0.95rem !important;
+  line-height: 1;
+}
+
+.ledger-row--writing:hover .ledger-ops {
+  color: var(--on-surface);
+}
+
+@media (min-width: 720px) {
+  .ledger-columns {
+    display: grid;
+    grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr) minmax(6.5rem, 10rem) 4.75rem;
+    gap: var(--studio-space-sm);
+    align-items: end;
+    padding: var(--studio-space-xs) var(--studio-space-md);
+    margin: 0 0 var(--studio-space-2xs);
+    font-family: var(--font-mono);
+    font-size: var(--studio-type-micro);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--on-surface-variant);
+    background: var(--background);
+    border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+    border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  }
+
+  .ledger-col-ops {
+    text-align: right;
+  }
+
+  .ledger-row--writing {
+    grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr) minmax(6.5rem, 10rem) 4.75rem;
+    align-items: center;
+  }
+
+  .ledger-row--writing .ledger-taxonomy {
+    display: flex;
+  }
+
+  .ledger-row--writing .ledger-ops {
+    display: inline-flex;
+  }
+}
+
+.ledger-status--published {
+  color: color-mix(in srgb, #1b6b3a 88%, var(--on-surface));
+  background: color-mix(in srgb, #1b6b3a 14%, transparent);
+  border-color: color-mix(in srgb, #1b6b3a 35%, transparent);
+}
+
+.ledger-status--draft {
+  color: color-mix(in srgb, #a12828 90%, var(--on-surface));
+  background: color-mix(in srgb, #a12828 14%, transparent);
+  border-color: color-mix(in srgb, #a12828 35%, transparent);
+}
+
+.ledger-thumb {
+  width: var(--studio-ledger-thumb-w);
+  height: var(--studio-ledger-thumb-h);
+  object-fit: cover;
+  background: var(--surface-high);
+  display: block;
+  flex-shrink: 0;
+}
+
+.ledger-thumb.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--on-surface-variant);
+  border: 1px dashed color-mix(in srgb, var(--outline-variant) 70%, transparent);
+}
+
+.ledger-thumb.placeholder .material-symbols-outlined {
+  font-size: 1.5rem;
+  line-height: 1;
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.ledger-meta {
+  margin-top: 0;
+  font-size: var(--studio-ledger-meta);
+  color: var(--on-surface-variant);
+  font-family: var(--font-mono);
+  letter-spacing: 0.015em;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.list-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--studio-space-xs);
+  margin: 0 0 var(--studio-space-sm);
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+}
+
+.list-search-input {
+  flex: 1 1 14rem;
+  min-width: 10rem;
+  height: var(--studio-list-control-height);
+  box-sizing: border-box;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  padding: 0 var(--studio-space-sm);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-ui);
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+}
+
+.list-sort-label {
+  display: flex;
+  align-items: center;
+  gap: var(--studio-space-xs);
+  flex: 0 1 auto;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-ui);
+  color: var(--on-surface-variant);
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.list-sort-caption {
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: var(--studio-type-micro);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.list-sort-select,
+.list-page-size-select {
+  height: var(--studio-list-control-height);
+  box-sizing: border-box;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  padding: 0 var(--studio-space-sm);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-ui);
+  min-width: 10rem;
+  max-width: 100%;
+}
+
+.list-page-size-select {
+  min-width: 4rem;
+}
+
+.list-count {
+  margin: 0 0 var(--studio-space-xs);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+  min-height: 1em;
+}
+
+.list-pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--studio-space-sm);
+  margin: var(--studio-space-md) 0 var(--studio-space-xs);
+  flex-wrap: wrap;
+}
+
+.list-pager-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.list-pager-status {
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+  min-width: 7rem;
+  text-align: center;
+}
+
+.pane-editor > .btn {
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-bottom: var(--studio-space-sm);
+}
+
+.list-register {
+  display: flex;
+  flex-direction: column;
+  gap: var(--studio-space-sm);
+  margin-bottom: var(--studio-space-lg);
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+}
+
+.list-register-kicker {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--studio-space-xs) var(--studio-space-sm);
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.list-register-mark {
+  width: 5px;
+  height: 5px;
+  background: var(--primary);
+  flex: 0 0 auto;
+}
+
+.list-register-sep {
+  color: var(--outline-variant);
+}
+
+.list-pane-title {
+  font-family: var(--font-display);
+  font-size: var(--studio-type-display);
+  font-weight: 600;
+  line-height: 1.15;
+  margin: 0 0 var(--studio-space-sm);
+}
+
+.list-register .list-pane-title {
+  margin: 0;
+}
+
+.list-register-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--studio-space-xs) var(--studio-space-md);
+  margin-top: var(--studio-space-2xs);
+}
+
+.list-pane-count {
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+  letter-spacing: 0.02em;
+}
+
+.list-tag-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--studio-space-2xs) var(--studio-space-xs);
+  margin: 0 0 var(--studio-space-sm);
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+}
+
+.list-tag-chip {
+  margin: 0;
+  padding: 0.15rem 0.45rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--on-surface-variant);
+  cursor: pointer;
+}
+
+.list-tag-chip:hover {
+  background: var(--surface-high);
+  color: var(--on-surface);
+}
+
+.list-tag-chip.is-active {
+  border-color: color-mix(in srgb, var(--primary) 55%, var(--outline-variant));
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+  color: var(--on-surface);
+}
+
+.front-matter {
+  flex: 0 0 auto;
+  margin: 0 0 var(--studio-space-sm);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  background: var(--background);
+  max-width: 52rem;
+}
+
+.front-matter-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--studio-space-xs) var(--studio-space-md);
+  margin: 0;
+  padding: 0.45rem 0.65rem;
+  cursor: pointer;
+  list-style: none;
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--on-surface-variant);
+  user-select: none;
+}
+
+.front-matter-summary::-webkit-details-marker {
+  display: none;
+}
+
+.front-matter-summary::before {
+  content: "▸";
+  margin-right: 0.45rem;
+  color: var(--outline-variant);
+}
+
+.front-matter[open] > .front-matter-summary::before {
+  content: "▾";
+}
+
+.front-matter[open] > .front-matter-summary {
+  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+}
+
+.front-matter-summary-label {
+  color: var(--on-surface);
+  font-weight: 600;
+}
+
+.front-matter-summary-hint {
+  color: var(--outline-variant);
+  letter-spacing: 0.04em;
+}
+
+.front-matter > .form-grid {
+  padding: 0.15rem 0.65rem 0.75rem;
+  max-width: none;
+}
+
+.editor-mast {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.65rem 1.25rem;
+  margin-bottom: 0.85rem;
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+}
+
+.editor-mast-lead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.55rem 0.75rem;
+  min-width: 0;
+}
+
+.editor-mast-pills {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.editor-mast > .btn,
+.editor-mast-lead > .btn {
+  flex: 0 0 auto;
+  align-self: center;
+  margin-bottom: 0;
+}
+
+.editor-mast-lead > .btn-back {
+  min-width: 2.25rem;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  gap: 0;
+}
+
+.editor-mast-lead > .btn-back .btn-nav-icon {
+  font-size: 1.35rem !important;
+}
+
+.editor-body-stats {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: var(--studio-space-xs) var(--studio-space-sm);
+  margin-top: var(--studio-space-sm);
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--on-surface-variant);
+}
+
+.editor-body-stats-sep {
+  color: var(--outline-variant);
+}
+
+.preview-pane-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--studio-space-xs) var(--studio-space-sm);
+  margin: 0 0 var(--studio-space-sm);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--on-surface-variant);
+}
+
+.preview-pane-label {
+  color: var(--on-surface-variant);
+}
+
+.preview-pane-sep {
+  color: var(--outline-variant);
+}
+
+.preview-pane-meta {
+  text-transform: none;
+  letter-spacing: 0.02em;
+}
+
+.preview-folio {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0.35rem;
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+}
+
+.preview-folio > .preview-frame {
+  flex: 1 1 auto;
+  min-height: 12rem;
+  border-color: color-mix(in srgb, var(--outline-variant) 40%, transparent);
+}
+
+.loading-msg {
+  margin: 1rem 0;
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  color: var(--on-surface-variant);
+  font-size: 1rem;
+}
+
+.list-empty {
+  margin: 1rem 0;
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  color: var(--on-surface-variant);
+}
+
+.list-error {
+  margin: 0.75rem 0;
+  padding: 0.85rem 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--error) 45%, transparent);
+  background: color-mix(in srgb, var(--error) 8%, var(--background));
+}
+
+.list-error-title {
+  margin: 0 0 0.35rem;
+  font-weight: 600;
+  color: var(--error);
+}
+
+.list-error-message {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  color: var(--on-surface);
+  word-break: break-word;
+}
+
+.list-error-detail {
+  margin: 0.65rem 0 0;
+  padding: 0.55rem 0.65rem;
+  max-height: 10rem;
+  overflow: auto;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  line-height: 1.4;
+  color: var(--on-surface-variant);
+  background: var(--panel);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  white-space: pre-wrap;
+}
+
+.studio-map {
+  gap: var(--studio-space-lg);
+  max-width: 72rem;
+  position: relative;
+}
+
+/* Decorative shards — same polygons/opacity as the public site. */
+.studio-shard {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
+  clip-path: var(--shard-alpha);
+  opacity: var(--cubist-shard-opacity);
+  background: color-mix(in srgb, var(--primary) 55%, var(--secondary));
+}
+
+.studio-shard--beta {
+  clip-path: var(--shard-beta);
+  background: color-mix(in srgb, var(--tertiary) 50%, var(--primary));
+  opacity: var(--cubist-shard-opacity-strong);
+}
+
+.studio-map > .studio-shard--lead {
+  width: min(18rem, 42vw);
+  height: min(14rem, 32vw);
+  top: -1rem;
+  right: 4%;
+}
+
+.studio-map > .studio-shard--trail {
+  width: min(12rem, 28vw);
+  height: min(10rem, 22vw);
+  bottom: 8%;
+  left: 2%;
+}
+
+@media (max-width: 639px) {
+  .studio-shard {
+    display: none;
+  }
+}
+
+.studio-map-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--studio-space-xs);
+  max-width: 28rem;
+  padding: var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  position: relative;
+  z-index: 1;
+}
+
+.studio-map-board {
+  display: flex;
+  flex-direction: column;
+  gap: var(--studio-space-lg);
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.studio-map-kicker {
+  margin: 0;
+  font-family: var(--font-label);
+  font-size: var(--studio-type-meta);
+  letter-spacing: 0.04em;
+  color: var(--on-surface-variant);
+}
+
+.studio-map-header h1 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: var(--studio-type-display);
+  margin: 0;
+  line-height: 1.15;
+}
+
+.studio-map-lede,
+.studio-map-header p {
+  margin: 0;
+  color: var(--on-surface-variant);
+  font-size: var(--studio-type-body);
+  line-height: 1.45;
+}
+
+.studio-map-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--studio-space-lg);
+  min-width: 0;
+}
+
+.studio-map-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--studio-space-sm);
+  padding: var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+}
+
+.studio-map-group-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--studio-space-sm);
+}
+
+.studio-map-group-icon {
+  position: relative;
+  top: 0.1rem;
+  color: var(--primary);
+  font-size: 1.15rem;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
+}
+
+.studio-map-group-label {
+  margin: 0;
+  font-family: var(--font-label);
+  font-size: var(--studio-type-title);
+  font-weight: 400;
+  letter-spacing: 0.03em;
+  line-height: 1.2;
+}
+
+.studio-map-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
+  gap: var(--studio-space-sm);
+}
+
+.studio-map-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--studio-space-sm);
+  text-align: left;
+  margin: 0;
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
+  background: var(--background);
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  min-height: 3.5rem;
+}
+
+.studio-map-card:hover {
+  background: var(--surface-high);
+  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant));
+}
+
+.studio-map-card-icon {
+  color: var(--on-surface-variant);
+  font-size: 1.25rem;
+  line-height: 1;
+  margin-top: 0.1rem;
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.studio-map-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.studio-map-card-title {
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: var(--studio-type-body);
+  line-height: 1.3;
+}
+
+.studio-map-card-meta {
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+  word-break: break-word;
+}
+
+/* Medium+: two collection columns fill the board. */
+@media (min-width: 56rem) {
+  .studio-map-board {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: var(--studio-space-lg) var(--studio-space-md);
+    align-items: start;
+  }
+}
+
+/* Wide: intro rail + board, so the home is a composition, not a thin stack. */
+@media (min-width: 72rem) {
+  .studio-map {
+    display: grid;
+    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
+    column-gap: clamp(1.5rem, 3vw, 2.75rem);
+    row-gap: var(--studio-space-lg);
+    align-items: start;
+    max-width: none;
+  }
+
+  .studio-map-header {
+    position: sticky;
+    top: var(--studio-space-md);
+    max-width: none;
+    padding-right: var(--studio-space-sm);
+  }
+
+  .studio-map-board {
+    padding-left: var(--studio-space-md);
+    border-left: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  }
+}
+
+.form-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--studio-space-md);
+  max-width: 52rem;
+  flex-shrink: 0;
+}
+
+.field label,
+.field .field-heading {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--on-surface-variant);
+  margin-bottom: var(--studio-space-2xs);
+}
+
+.field--title {
+  padding-bottom: var(--studio-space-md);
+  border-bottom: 1px solid var(--outline-variant);
+}
+
+/* Entry metadata controls: mono, one step under body. */
+.form-grid .field input:not([type="checkbox"]):not([type="radio"]),
+.form-grid .field select,
+.form-grid .field textarea {
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-ui);
+}
+
+.field input,
+.field select,
+.field textarea {
+  width: 100%;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  padding: 0.4rem 0.55rem;
+}
+
+/* Checkboxes must not inherit width:100% — that made a full-row box whose
+   clickable hit target was only the tiny native control (felt "broken"). */
+.field--boolean .field-checkbox,
+.field input.field-checkbox,
+.field input[type="checkbox"] {
+  width: auto;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  flex: 0 0 auto;
+  accent-color: var(--primary);
+}
+
+/* Boolean: section title on its own line; checkbox + help below, centered. */
+.field--boolean .field-check-row {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 0;
+  text-transform: none;
+  letter-spacing: normal;
+  font-size: 0.92rem;
+  color: var(--on-surface);
+  cursor: pointer;
+  user-select: none;
+  line-height: 1.35;
+}
+
+.field--boolean .field-check-text {
+  line-height: 1.35;
+}
+
+.field textarea {
+  min-height: 6rem;
+  line-height: 1.45;
+}
+
+.field .hint {
+  margin: var(--studio-space-2xs) 0 0;
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+  line-height: 1.35;
+}
+
+.body-editor-stack {
+  display: flex;
+  flex-direction: column;
+  /* Tall floor so pane-scroll-to-end is editor + metrics; overflow hidden
+     keeps TipTap inside the plate (it used to paint past the border when
+     the pane flexed this stack below chrome + surface). */
+  flex: 1 1 auto;
+  min-height: var(--studio-editor-min-height);
+  margin-top: 0.35rem;
+  padding: var(--studio-space-sm) var(--studio-space-md);
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  overflow: hidden;
+}
+
+.editor-chrome {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  margin-bottom: 0.5rem;
+  flex-shrink: 0;
+}
+
+.editor-chrome-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.editor-chrome-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.editor-ai-proof {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.ai-proof-hint {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  letter-spacing: 0.02em;
+  color: var(--on-surface-variant);
+}
+
+.ai-proof-hint[hidden] {
+  display: none !important;
+}
+
+.editor-mode-tabs {
+  display: inline-flex;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--panel);
+}
+
+.editor-mode-tab {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0.4rem 0.9rem;
+  cursor: pointer;
+  color: var(--on-surface-variant);
+  font: inherit;
+  font-size: 0.92rem;
+}
+
+.editor-mode-tab + .editor-mode-tab {
+  border-left: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+}
+
+.editor-mode-tab[aria-selected="true"] {
+  background: var(--background);
+  color: var(--on-surface);
+  font-weight: 600;
+}
+
+.editor-mode-tab:hover {
+  background: var(--surface-high);
+  color: var(--on-surface);
+}
+
+.editor-insert {
+  position: relative;
+}
+
+.editor-insert-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.editor-insert-btn .material-symbols-outlined {
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.editor-insert-caret {
+  font-size: 1rem !important;
+  opacity: 0.75;
+}
+
+.editor-insert-menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  z-index: 20;
+  min-width: 12rem;
+  max-height: 16rem;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0.25rem;
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  box-shadow: 0 8px 20px color-mix(in srgb, var(--on-surface) 12%, transparent);
+}
+
+.editor-insert-menu[hidden] {
+  display: none !important;
+}
+
+.editor-insert-item {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.45rem 0.55rem;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  font-size: 0.92rem;
+}
+
+.editor-insert-item:hover {
+  background: var(--surface-high);
+}
+
+.editor-insert-icon {
+  font-size: 1.15rem;
+  color: var(--on-surface-variant);
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.editor-format-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.35rem 0.4rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--panel);
+}
+
+.editor-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  margin: 0;
+  padding: 0 0.35rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+  color: var(--on-surface);
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.editor-toolbar-btn:hover {
+  background: var(--surface-high);
+}
+
+.editor-toolbar-btn .material-symbols-outlined {
+  font-size: 1.15rem;
+  line-height: 1;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
+}
+
+.editor-toolbar-sep {
+  width: 1px;
+  align-self: stretch;
+  margin: 0.2rem 0.3rem;
+  background: color-mix(in srgb, var(--outline-variant) 70%, transparent);
+}
+
+.editor-toolbar-select {
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  padding: 0.25rem 0.4rem;
+  font-size: 0.82rem;
+  max-width: 8.5rem;
+}
+
+.editor-pane-fill {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.editor-surface {
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  overflow: auto;
+}
+
+.tiptap.editor-surface {
+  padding: 0.85rem;
+}
+
+.tiptap .ProseMirror {
+  outline: none;
+  min-height: 12rem;
+}
+
+.tiptap .ProseMirror p {
+  margin: 0.4rem 0;
+}
+
+textarea.body-source.editor-surface {
+  display: block;
+  resize: none;
+  padding: 0.85rem;
+  font-family: var(--font-mono);
+  font-size: 0.8759rem;
+  line-height: 1.5;
+  color: inherit;
+  box-sizing: border-box;
+  min-height: 0;
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: auto;
+}
+
+.editor-surface[hidden] {
+  display: none !important;
+}
+
+.liquid-block {
+  border: 1px dashed color-mix(in srgb, var(--outline) 50%, transparent);
+  background: var(--panel);
+  padding: 0.5rem 0.65rem;
+  margin: 0.5rem 0;
+  font-family: var(--font-mono);
+  font-size: 0.86rem;
+}
+
+.liquid-block--inline {
+  display: inline;
+  margin: 0;
+  padding: 0.05rem 0.35rem;
+  white-space: normal;
+}
+
+.liquid-block strong {
+  font-family: var(--font-body);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.78rem;
+  color: var(--on-surface-variant);
+}
+
+.preview-frame {
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  padding: 1rem;
+  min-height: 12rem;
+  flex: 1;
+  overflow: auto;
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--on-surface);
+}
+
+.preview-frame figure {
+  margin: 1rem auto;
+  text-align: center;
+}
+
+.preview-frame img,
+.preview-frame video,
+.preview-frame iframe {
+  max-width: 100%;
+}
+
+.preview-frame .studio-embed-placeholder {
+  width: 100%;
+}
+
+.preview-frame .studio-embed-placeholder__box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: inherit;
+  height: 100%;
+  padding: 1rem 1.1rem;
+  border: 1px dashed color-mix(in srgb, var(--outline) 55%, transparent);
+  background: color-mix(in srgb, var(--surface-high) 88%, transparent);
+  color: var(--on-surface-variant);
+}
+
+.preview-frame .studio-embed-placeholder__label {
+  font-family: var(--font-mono);
+  font-size: 0.8759rem;
+  line-height: 1.35;
+  word-break: break-word;
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+
+.preview-frame .studio-mermaid,
+.preview-frame .mermaid {
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+
+.preview-frame .studio-mermaid-fallback {
+  margin: 1rem 0;
+}
+
+.preview-frame .studio-mermaid-fallback__pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono);
+  font-size: 0.8019rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  background: color-mix(in srgb, var(--surface-high) 90%, transparent);
+  color: var(--on-surface-variant);
+}
+
+/* Side-preview code only: −2pt vs inherited preview body size. */
+.preview-frame pre,
+.preview-frame pre code,
+.preview-frame :not(pre) > code {
+  font-size: 0.8019rem;
+}
+
+.preview-frame pre {
+  overflow-x: auto;
+  padding: 0.65rem 0.75rem;
+  background: color-mix(in srgb, var(--surface-high) 90%, transparent);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+}
+
+.preview-frame pre code {
+  font-size: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+
+.preview-frame :not(pre) > code {
+  font-family: var(--font-mono);
+  padding: 0.05em 0.3em;
+  background: color-mix(in srgb, var(--surface-high) 90%, transparent);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+}
+
+/* Shared pill shell for cite / xcite / latex — one box, variants only recolor. */
+.preview-frame .studio-ref-pill {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  max-width: 100%;
+  margin: 0 0.12em;
+  padding: 0.05em 0.4em;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--surface-high) 85%, transparent);
+  color: var(--on-surface-variant);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  line-height: 1.2;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
+}
+
+.preview-frame .studio-ref-pill--ok {
+  color: color-mix(in srgb, #1b6b3a 88%, var(--on-surface));
+  background: color-mix(in srgb, #1b6b3a 14%, transparent);
+  border-color: color-mix(in srgb, #1b6b3a 40%, transparent);
+}
+
+.preview-frame .studio-ref-pill--missing {
+  color: color-mix(in srgb, #a12828 90%, var(--on-surface));
+  background: color-mix(in srgb, #a12828 14%, transparent);
+  border-color: color-mix(in srgb, #a12828 40%, transparent);
+}
+
+.preview-frame .studio-ref-pill--latex {
+  color: var(--on-surface);
+  background: color-mix(in srgb, var(--surface-high) 90%, transparent);
+  border-color: color-mix(in srgb, var(--outline-variant) 65%, transparent);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.preview-frame .studio-ref-pill--display {
+  display: flex;
+  margin: 0.75rem auto;
+  padding: 0.55rem 0.75rem;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.preview-frame .article-note {
+  background: color-mix(in srgb, var(--surface-high) 88%, transparent);
+  border-left: 3px solid color-mix(in srgb, var(--outline-variant) 80%, transparent);
+  padding: 0.85rem 1.1rem;
+  margin: 1.1rem 0;
+  font-size: 0.9em;
+}
+
+.preview-frame .article-note > :first-child {
+  margin-top: 0;
+}
+
+.preview-frame .article-note > :last-child {
+  margin-bottom: 0;
+}
+
+.preview-frame :is(.sov-tweet, .article-tweet) {
+  max-width: 34rem;
+  margin: 1rem 0 1.25rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  background: color-mix(in srgb, var(--surface-high) 70%, transparent);
+}
+
+.preview-frame :is(.sov-tweet, .article-tweet) p {
+  margin: 0;
+}
+
+.preview-frame :is(.sov-tweet__head, .article-tweet__head) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.7rem;
+}
+
+.preview-frame :is(.sov-tweet__avatar, .article-tweet__avatar) {
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--outline-variant) 35%, transparent);
+  font-size: 1.1rem;
+}
+
+.preview-frame :is(.sov-tweet__id, .article-tweet__id) {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.preview-frame :is(.sov-tweet__name, .article-tweet__name) {
+  font-weight: 700;
+  font-size: 0.92rem;
+}
+
+.preview-frame :is(.sov-tweet__handle, .article-tweet__handle) {
+  font-size: 0.8rem;
+  opacity: 0.75;
+}
+
+.preview-frame :is(.sov-tweet__body, .article-tweet__body) {
+  margin: 0 0 0.45rem !important;
+  line-height: 1.55;
+}
+
+.preview-frame :is(.sov-tweet__cite, .article-tweet__cite) {
+  margin: 0 0 0.45rem !important;
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+
+.preview-frame :is(.sov-tweet__note, .article-tweet__note) {
+  margin: 0 !important;
+  font-size: 0.85rem;
+  opacity: 0.9;
+}
+
+.preview-frame .studio-unknown-include {
+  display: none;
+}
+
+/* GFM tables in side preview — gentle structure, preview-scoped only. */
+.preview-frame table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0 1.25rem;
+  font-size: 0.9em;
+  line-height: 1.45;
+  overflow-x: auto;
+  display: block;
+  max-width: 100%;
+}
+
+.preview-frame thead,
+.preview-frame tbody,
+.preview-frame tr {
+  display: table;
+  width: 100%;
+  table-layout: auto;
+}
+
+.preview-frame th,
+.preview-frame td {
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  padding: 0.4rem 0.55rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.preview-frame th {
+  font-weight: 600;
+  background: color-mix(in srgb, var(--surface-high) 88%, transparent);
+}
+
+.preview-frame .sov-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.85rem;
+  margin: 1rem 0 1.35rem;
+}
+
+@media (min-width: 720px) {
+  .preview-frame .sov-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.preview-frame .sov-card {
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  border-left: 3px solid var(--sov-accent, var(--primary));
+  background: color-mix(in srgb, var(--surface-high) 70%, transparent);
+  padding: 0.65rem 0.8rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.preview-frame .sov-card p {
+  margin: 0;
+}
+
+.preview-frame .sov-card__head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.preview-frame .sov-card__flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  padding: 0 0.35rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 65%, transparent);
+  line-height: 1;
+}
+
+.preview-frame .sov-card__flag .fi {
+  font-size: 1rem;
+}
+
+.preview-frame .sov-card__meta {
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.8;
+  font-weight: 600;
+}
+
+.preview-frame .sov-card__lemma {
+  font-style: italic;
+  font-size: 1.02rem;
+  color: var(--on-surface);
+}
+
+.preview-frame .sov-card__def {
+  margin: 0;
+  padding: 0.45rem 0.6rem;
+  border-left: 2px solid color-mix(in srgb, var(--sov-accent, var(--primary)) 55%, transparent);
+  background: color-mix(in srgb, var(--sov-accent, var(--primary)) 8%, transparent);
+  font-size: 0.86rem;
+  line-height: 1.6;
+}
+
+.preview-frame .sov-card__note {
+  font-size: 0.82rem;
+  line-height: 1.5;
+  opacity: 0.9;
+}
+
+.preview-frame .sov-card__cite {
+  font-size: 0.76rem;
+  line-height: 1.45;
+  opacity: 0.75;
+}
+
+.preview-frame .sov-card__cite a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.preview-frame .sov-card--us {
+  --sov-accent: #003494;
+}
+
+.preview-frame .sov-card--gb {
+  --sov-accent: #797300;
+}
+
+.preview-frame .sov-card--br {
+  --sov-accent: #118826;
+}
+
+.preview-frame .sov-card--fr {
+  --sov-accent: #9f020a;
+}
+
+/* Preview tab: hidden on wide layouts (side panel is always visible). */
+.editor-mode-tab--preview {
+  display: none;
+}
+
+.auth-gate {
+  max-width: 28rem;
+  margin: 4rem auto;
+  padding: 1.5rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  background: var(--background);
+}
+
+.auth-gate h1 {
+  font-family: var(--font-display);
+  font-size: 1.6rem;
+  margin: 0 0 0.5rem;
+}
+
+.auth-gate--pending .pending-copy {
+  font-family: var(--font-body);
+  line-height: 1.55;
+  color: var(--on-surface);
+  margin: 0 0 1rem;
+}
+
+.auth-gate--pending .pending-copy strong {
+  font-weight: 600;
+}
+
+.auth-gate--pending .pending-signoff {
+  font-family: var(--font-body);
+  margin: 0 0 1.25rem;
+  color: var(--on-surface-variant);
+}
+
+.status-pill {
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-meta);
+  color: var(--on-surface-variant);
+}
+
+.status-pill.error {
+  color: var(--error);
+}
+
+.studio-error-banner {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.55rem;
+  padding: 0.75rem var(--studio-space-md);
+  border-bottom: 1px solid color-mix(in srgb, var(--error) 45%, transparent);
+  background: color-mix(in srgb, var(--error) 8%, var(--background));
+}
+
+.studio-error-message {
+  margin: 0;
+  color: var(--on-surface);
+  font-size: var(--studio-type-body);
+  line-height: 1.45;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.studio-error-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+@media (max-width: 719px) {
+  /* Writing lists: status | title | meta as three stacked lines. */
+  .ledger-row--writing .ledger-title-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.2rem;
+  }
+
+  .ledger-row--writing .ledger-status {
+    width: auto;
+    flex: 0 0 auto;
+  }
+
+  .ledger-row--writing .ledger-taxonomy {
+    display: flex;
+    grid-column: 2 / -1;
+  }
+
+  .ledger-row--writing .ledger-ops {
+    display: inline-flex;
+    grid-column: 1 / -1;
+    justify-content: flex-end;
+    padding-top: 0.45rem;
+    margin-top: 0.15rem;
+    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
+  }
+}
+
+@media (max-width: 960px) {
+  .studio-shell {
+    grid-template-columns: 1fr;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .ledger-row {
+    align-items: start;
+  }
+
+  .studio-nav {
+    border-right: 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+    overflow: visible;
+    gap: 0.35rem;
+    padding: 0.65rem 0.75rem;
+  }
+
+  .studio-nav-bar {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .studio-nav-bar .studio-brand {
+    flex: 0 0 auto;
+    width: auto;
+    padding: 0.2rem 0.35rem;
+    border-bottom: 0;
+  }
+
+  button.studio-brand-home {
+    width: auto;
+  }
+
+  .studio-nav-menu-toggle {
+    display: inline-flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .studio-nav-panel {
+    display: none;
+    margin-top: 0.35rem;
+    padding-top: 0.35rem;
+    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+    max-height: min(70vh, 28rem);
+    overflow: auto;
+  }
+
+  .studio-nav.is-open .studio-nav-panel {
+    display: flex;
+  }
+
+  .studio-main {
+    height: auto;
+    overflow: visible;
+  }
+
+  .studio-body {
+    grid-template-columns: 1fr;
+    height: auto;
+    overflow: visible;
+  }
+
+  /* Third tab: Visual | Source | Preview — one pane at a time. */
+  .editor-mode-tab--preview {
+    display: inline-flex;
+  }
+
+  .studio-body.view-preview .pane-editor > .btn,
+  .studio-body.view-preview .pane-editor .editor-mast,
+  .studio-body.view-preview .pane-editor .front-matter,
+  .studio-body.view-preview .pane-editor .form-grid,
+  .studio-body.view-preview .pane-editor .editor-pane-fill,
+  .studio-body.view-preview .pane-editor .editor-format-toolbar,
+  .studio-body.view-preview .pane-editor .editor-chrome-row > :not(.editor-mode-tabs),
+  .studio-body.view-preview .pane-editor .body-editor-stack > label {
+    display: none;
+  }
+
+  .studio-body.view-preview .pane-editor {
+    padding-bottom: 0.35rem;
+    overflow: visible;
+    flex: 0 0 auto;
+  }
+
+  .studio-body.view-preview .pane-editor .editor-chrome {
+    margin-bottom: 0;
+  }
+
+  .studio-body:not(.view-preview) .pane-preview {
+    display: none;
+  }
+
+  .studio-body.view-preview .pane-preview {
+    display: flex;
+    border-left: 0;
+    border-top: 0;
+    flex: 1 1 auto;
+  }
+
+  .pane-preview {
+    border-left: 0;
+    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  }
+}
+
+/* —— YAML editor (dedicated; not TipTap) —— */
+.pane-yaml .yaml-editor-header {
+  margin: 0.65rem 0 0.35rem;
+}
+
+.yaml-editor-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 1.35rem;
+  font-weight: 500;
+  color: var(--on-surface);
+}
+
+.yaml-editor-path {
+  margin: 0.2rem 0 0;
+  font-size: 0.82rem;
+  color: var(--on-surface-variant);
+  word-break: break-word;
+}
+
+.yaml-chrome {
+  margin-bottom: 0.65rem;
+}
+
+.yaml-chrome-hint {
+  margin: 0.45rem 0 0;
+  font-size: 0.82rem;
+  color: var(--on-surface-variant);
+}
+
+.yaml-editor-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.yaml-list,
+.yaml-object-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.yaml-list-item {
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 65%, transparent);
+  background: var(--panel);
+  padding: 0.75rem 0.85rem;
+}
+
+.yaml-list-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.65rem;
+}
+
+.yaml-list-item-index {
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--on-surface-variant);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.yaml-list-item-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  flex-shrink: 0;
+}
+
+.yaml-list-btn {
+  padding: 0.25rem 0.45rem;
+  font-size: 0.78rem;
+}
+
+.yaml-list-item-fields {
+  max-width: none;
+}
+
+.yaml-empty {
+  margin: 0;
+  color: var(--on-surface-variant);
+  font-size: 0.92rem;
+}
+
+.yaml-source-stack {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: var(--studio-editor-min-height);
+}
+
+textarea.yaml-source.editor-surface {
+  display: block;
+  resize: none;
+  padding: 0.85rem;
+  font-family: var(--font-mono);
+  font-size: 0.95rem;
+  line-height: 1.45;
+  color: inherit;
+  box-sizing: border-box;
+  min-height: var(--studio-editor-min-height);
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: auto;
+  tab-size: 2;
+}
+
+.yaml-preview-pre {
+  margin: 0;
+  padding: 0.75rem 0.85rem;
+  font-family: var(--font-mono);
+  font-size: 0.86rem;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: color-mix(in srgb, var(--surface-high) 70%, transparent);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  overflow: auto;
+}
+
+.yaml-preview-error {
+  margin: 0;
+  color: var(--error);
+  font-size: 0.9rem;
+}
+
+/* —— Media library —— */
+
+.media-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  padding: 1rem 1.25rem 1.5rem;
+  overflow: auto;
+  min-height: 0;
+}
+
+.media-header h1.media-title {
+  margin: 0 0 0.35rem;
+  font-family: var(--font-display);
+  font-size: 1.55rem;
+  font-weight: 600;
+}
+
+.media-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  color: var(--on-surface-variant);
+}
+
+.media-breadcrumb-sep {
+  opacity: 0.55;
+}
+
+.media-breadcrumb-link {
+  margin: 0;
+  padding: 0.1rem 0.25rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--primary);
+  cursor: pointer;
+  font: inherit;
+}
+
+.media-breadcrumb-link:hover {
+  background: var(--surface-high);
+}
+
+.media-breadcrumb-current {
+  color: var(--on-surface);
+  font-weight: 600;
+}
+
+.media-hint {
+  margin: 0.55rem 0 0;
+  color: var(--on-surface-variant);
+  font-size: 0.9rem;
+  max-width: 42rem;
+}
+
+.media-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.media-toolbar .spacer {
+  flex: 1;
+}
+
+.media-file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.media-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  padding-top: 0.5rem;
+}
+
+.media-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.25rem 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
+}
+
+.media-row-main {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0.35rem 0.4rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.media-row-main:hover {
+  background: var(--surface-high);
+}
+
+.media-thumb {
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  background: var(--surface-high);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  overflow: hidden;
+}
+
+.media-thumb--image {
+  padding: 0;
+}
+
+.media-thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.media-thumb-icon {
+  font-size: 1.45rem;
+  color: var(--on-surface-variant);
+}
+
+.media-row-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.media-row-name {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.media-row-meta {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--on-surface-variant);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.media-copy-btn {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.media-row-main--preview {
+  cursor: zoom-in;
+}
+
+.media-row-main--preview:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 3px;
+}
+
+/* Same overlay as the public figure lightbox (`assets/css/article.css`).
+   Studio does not load that sheet, so the chrome is repeated here with
+   Studio tokens. Video and HTML use the same plate. */
+html.figure-lightbox-open,
+body.figure-lightbox-open {
+  overflow: hidden;
+}
+
+.figure-lightbox {
+  --motion-duration-fast: 0.15s;
+  --motion-ease-out: ease-out;
+  --motion-ease-default: ease;
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  box-sizing: border-box;
+}
+
+.figure-lightbox[hidden] {
+  display: none;
+}
+
+.figure-lightbox [hidden] {
+  display: none !important;
+}
+
+.figure-lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+  cursor: zoom-out;
+  animation: figure-lightbox-fade-in var(--motion-duration-fast) var(--motion-ease-out);
+}
+
+.figure-lightbox-panel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: min(92vw, 72rem);
+  max-height: 92vh;
+  animation: figure-lightbox-scale-in var(--motion-duration-fast) var(--motion-ease-out);
+}
+
+.figure-lightbox-img,
+.figure-lightbox-video {
+  display: block;
+  max-width: 92vw;
+  max-height: 85vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  background: var(--background);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
+  border-radius: 0;
+}
+
+.figure-lightbox-video {
+  background: #000;
+}
+
+.figure-lightbox-frame {
+  display: block;
+  width: min(92vw, 72rem);
+  height: min(78vh, 52rem);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
+  border-radius: 0;
+  background: var(--background);
+}
+
+.figure-lightbox-caption {
+  margin: 0.75rem 0 0;
+  max-width: min(40rem, 90vw);
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  line-height: 1.45;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.figure-lightbox-close {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
+  border-radius: 0;
+  background: var(--background);
+  color: var(--on-surface);
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-ease-default),
+    background-color var(--motion-duration-fast) var(--motion-ease-default);
+}
+
+.figure-lightbox-close:hover,
+.figure-lightbox-close:focus-visible {
+  color: var(--primary);
+  background: var(--surface-high);
+  outline: none;
+}
+
+.figure-lightbox-close:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.figure-lightbox-close .material-symbols-outlined {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+@keyframes figure-lightbox-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes figure-lightbox-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .figure-lightbox-backdrop,
+  .figure-lightbox-panel {
+    animation: none;
+  }
+}
+