pandorga 1.3.11 → 1.4.2

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

@@ -31,12 +31,18 @@
    * 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-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);
@@ -150,11 +156,16 @@ a {
 .studio-shell {
   display: grid;
   grid-template-columns: 16.5rem minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   min-height: 100vh;
   height: 100%;
   background: transparent;
 }
 
+.studio-shell>.studio-toolbar {
+  grid-column: 1 / -1;
+}
+
 .studio-nav {
   background: var(--panel);
   border-right: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
@@ -233,7 +244,7 @@ a {
 
 .studio-brand {
   display: grid;
-  grid-template-columns: 2.5rem minmax(0, 1fr);
+  grid-template-columns: 1.35rem 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);
@@ -241,6 +252,38 @@ a {
   border-bottom: 1px solid var(--outline-variant);
 }
 
+.studio-brand-toolbar {
+  flex: 0 0 auto;
+  width: auto;
+  height: var(--studio-toolbar-control-h, 2.35rem);
+  min-height: 0;
+  padding: 0 0.55rem;
+  margin: 0;
+  border-bottom: 0;
+  column-gap: 0.55rem;
+  --studio-brand-mark: 1.35rem;
+  grid-template-columns: var(--studio-brand-mark) auto;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.studio-brand-toolbar .studio-mark {
+  width: var(--studio-brand-mark);
+  height: var(--studio-brand-mark);
+}
+
+.studio-brand-toolbar .studio-brand-name {
+  font-family: var(--font-title);
+  /* Cinzel Decorative cap height is ~0.83em; size so the first S matches the mark. */
+  font-size: calc(var(--studio-brand-mark) / 0.83);
+  font-weight: 400;
+  font-synthesis: none;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  color: var(--on-surface);
+}
+
 .studio-brand-copy {
   display: flex;
   flex-direction: column;
@@ -250,12 +293,12 @@ a {
 }
 
 .studio-brand-name {
-  font-family: var(--font-title);
-  font-size: var(--studio-brand-title);
+  font-family: var(--font-label);
+  font-size: var(--studio-type-ui);
   font-weight: 400;
   font-synthesis: none;
   line-height: 1.15;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.04em;
 }
 
 .studio-brand strong {
@@ -279,15 +322,26 @@ button.studio-brand-home {
   font: inherit;
 }
 
+button.studio-brand-home.studio-brand-toolbar {
+  width: auto;
+  flex: 0 0 auto;
+}
+
 button.studio-brand-home:hover,
 button.studio-brand-home[aria-current="page"] {
   background: var(--surface-high);
 }
 
+/* Toolbar brand stays flush — no filled plate. */
+button.studio-brand-home.studio-brand-toolbar:hover,
+button.studio-brand-home.studio-brand-toolbar[aria-current="page"] {
+  background: transparent;
+}
+
 .studio-brand .studio-mark {
   display: block;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 1.35rem;
+  height: 1.35rem;
   justify-self: center;
   /* Optical nudge: logo glyph sits a hair high in its viewBox. */
   transform: translateY(0.5px);
@@ -438,7 +492,7 @@ button.studio-brand-home[aria-current="page"] {
 
 .studio-main {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   min-width: 0;
   min-height: 0;
   height: 100%;
@@ -472,26 +526,61 @@ button.studio-brand-home[aria-current="page"] {
 }
 
 .studio-toolbar {
+  --studio-toolbar-control-h: 2.35rem;
   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-height: 3.25rem;
+  padding: 0.55rem 1rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
+  background: var(--panel);
+  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--outline) 8%, transparent);
   min-width: 0;
+  font-family: var(--font-label);
+  position: relative;
+  z-index: 30;
+  flex-wrap: nowrap;
 }
 
-.studio-toolbar .status-pill {
-  flex: 1 1 auto;
+.studio-toolbar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--studio-space-sm);
   min-width: 0;
+  flex: 0 1 auto;
+}
+
+.studio-toolbar-status {
+  display: none;
+  max-width: 18rem;
+  padding: 0.2rem 0.55rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+  background: var(--background);
+  color: var(--on-surface-variant);
+  font-family: var(--font-mono);
+  font-size: var(--studio-type-micro);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.studio-toolbar-status.error {
+  color: var(--error);
+  border-color: color-mix(in srgb, var(--error) 40%, var(--outline-variant));
+  background: color-mix(in srgb, var(--error) 8%, var(--background));
+}
+
+@media (min-width: 720px) {
+  .studio-toolbar-status {
+    display: inline-block;
+  }
+}
+
 .studio-toolbar .spacer {
   flex: 1 1 auto;
-  min-width: 0;
+  min-width: 0.75rem;
 }
 
 .studio-toolbar .btn {
@@ -500,6 +589,136 @@ button.studio-brand-home[aria-current="page"] {
   z-index: 1;
 }
 
+/* Equal desktop tools — one locked box for Theme + Revert + Save + Export.
+   Theme lives in a wrapper; its button must use the same fixed height as
+   siblings (not height:100%), or filled vs outline buttons look uneven. */
+.studio-toolbar>.studio-theme-menu,
+.studio-toolbar>.btn-tool {
+  flex: 0 0 6rem;
+  width: 6rem;
+  height: var(--studio-toolbar-control-h);
+  min-height: var(--studio-toolbar-control-h);
+  max-height: var(--studio-toolbar-control-h);
+  box-sizing: border-box;
+  align-self: center;
+}
+
+.studio-toolbar>.studio-theme-menu {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+}
+
+.studio-toolbar>.studio-theme-menu .btn-tool,
+.studio-toolbar>.btn-tool {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--studio-toolbar-control-h);
+  min-height: var(--studio-toolbar-control-h);
+  max-height: var(--studio-toolbar-control-h);
+  margin: 0;
+  padding: 0 0.45rem;
+  border-width: 1px;
+  border-style: solid;
+  line-height: 1;
+  overflow: hidden;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.studio-toolbar .studio-nav-menu-toggle {
+  display: none;
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  margin-left: 0.15rem;
+  padding: 0.35rem 0.45rem;
+  gap: 0.35rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+}
+
+.studio-toolbar .studio-nav-menu-toggle .studio-mark {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.btn-tool {
+  gap: 0.35rem;
+  min-height: var(--studio-toolbar-control-h, 2.35rem);
+  padding: 0 0.55rem;
+  font-family: var(--font-label);
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  box-sizing: border-box;
+  line-height: 1;
+}
+
+.btn-tool:hover:not(:disabled) {
+  background: var(--surface-high);
+}
+
+.btn-tool .btn-label {
+  font-family: var(--font-label);
+  font-size: var(--studio-type-ui);
+  letter-spacing: 0.05em;
+  line-height: 1;
+}
+
+.btn-tool .material-symbols-outlined {
+  font-size: 1.2rem;
+  line-height: 1;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
+}
+
+.studio-toolbar>.btn-primary,
+.studio-toolbar .btn-primary {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+
+[data-theme="dark"] .studio-toolbar>.btn-primary,
+[data-theme="dark"] .studio-toolbar .btn-primary {
+  color: #0f1a22;
+}
+
+.studio-toolbar>.btn-primary:hover:not(:disabled),
+.studio-toolbar .btn-primary:hover:not(:disabled) {
+  filter: brightness(1.06);
+  background: var(--primary);
+}
+
+.btn-danger {
+  color: var(--error);
+  border-color: color-mix(in srgb, var(--error) 45%, var(--outline-variant));
+}
+
+.btn-danger:hover {
+  background: color-mix(in srgb, var(--error) 12%, var(--background));
+}
+
+.btn-reexport {
+  color: #5c4b00;
+  border-color: color-mix(in srgb, #c9a227 55%, var(--outline-variant));
+  background: color-mix(in srgb, #f5d76e 55%, var(--background));
+}
+
+.btn-reexport:hover {
+  background: color-mix(in srgb, #f5d76e 75%, var(--background));
+}
+
+[data-theme="dark"] .btn-reexport {
+  color: #f5e6a3;
+  border-color: color-mix(in srgb, #c9a227 50%, var(--outline-variant));
+  background: color-mix(in srgb, #746f30 45%, var(--panel));
+}
+
 .studio-icon-bar .btn-icon {
   width: var(--studio-list-control-height);
   min-width: var(--studio-list-control-height);
@@ -640,6 +859,27 @@ button.studio-brand-home[aria-current="page"] {
   cursor: not-allowed;
 }
 
+/* Toolbar tools keep full opacity when disabled — fading the whole control
+   makes Revert look shorter than Theme/Save/Export even at equal box height. */
+.studio-toolbar>.btn-tool:disabled,
+.studio-toolbar>.studio-theme-menu .btn-tool:disabled {
+  opacity: 1;
+  color: color-mix(in srgb, var(--on-surface-variant) 70%, transparent);
+  border-color: color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  background: var(--background);
+  cursor: not-allowed;
+}
+
+.studio-toolbar>.btn-tool.btn-primary:disabled {
+  color: color-mix(in srgb, #fff 55%, var(--primary));
+  background: color-mix(in srgb, var(--primary) 45%, var(--background));
+  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant));
+}
+
+[data-theme="dark"] .studio-toolbar>.btn-tool.btn-primary:disabled {
+  color: color-mix(in srgb, #0f1a22 55%, var(--primary));
+}
+
 .studio-body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -705,7 +945,8 @@ button.studio-brand-home[aria-current="page"] {
 }
 
 .ledger-row--writing {
-  grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr);
+  grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr) auto;
+  align-items: center;
 }
 
 .ledger-row:hover {
@@ -771,51 +1012,57 @@ button.studio-brand-home[aria-current="page"] {
   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;
+  display: inline-flex;
   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);
+  gap: 0.35rem;
   white-space: nowrap;
   padding-top: 0.1rem;
 }
 
-.ledger-ops-icon {
-  font-size: 0.95rem !important;
+.ledger-op-btn {
+  width: 2.35rem;
+  min-width: 2.35rem;
+  min-height: 2.35rem;
+  padding: 0.3rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  color: var(--on-surface);
+}
+
+.ledger-op-btn .material-symbols-outlined {
+  font-size: 1.15rem;
   line-height: 1;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
 }
 
-.ledger-row--writing:hover .ledger-ops {
-  color: var(--on-surface);
+.ledger-edit-btn:hover {
+  background: var(--surface-high);
+  border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-variant));
+  color: var(--primary);
+}
+
+.ledger-delete-btn {
+  color: var(--error);
+  border-color: color-mix(in srgb, var(--error) 45%, var(--outline-variant));
+  background: color-mix(in srgb, var(--error) 6%, var(--background));
+}
+
+.ledger-delete-btn:hover {
+  background: color-mix(in srgb, var(--error) 14%, var(--background));
+  border-color: color-mix(in srgb, var(--error) 60%, var(--outline-variant));
+}
+
+.ledger-row--plain {
+  grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr) auto;
+  align-items: center;
 }
 
 @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;
+    grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr) 6.25rem;
     gap: var(--studio-space-sm);
     align-items: end;
     padding: var(--studio-space-xs) var(--studio-space-md);
@@ -835,17 +1082,9 @@ button.studio-brand-home[aria-current="page"] {
   }
 
   .ledger-row--writing {
-    grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr) minmax(6.5rem, 10rem) 4.75rem;
+    grid-template-columns: var(--studio-ledger-thumb-w) minmax(0, 1fr) auto;
     align-items: center;
   }
-
-  .ledger-row--writing .ledger-taxonomy {
-    display: flex;
-  }
-
-  .ledger-row--writing .ledger-ops {
-    display: inline-flex;
-  }
 }
 
 .ledger-status--published {
@@ -987,7 +1226,7 @@ button.studio-brand-home[aria-current="page"] {
   text-align: center;
 }
 
-.pane-editor > .btn {
+.pane-editor>.btn {
   flex-shrink: 0;
   align-self: flex-start;
   margin-bottom: var(--studio-space-sm);
@@ -1042,11 +1281,15 @@ button.studio-brand-home[aria-current="page"] {
 .list-register-title-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
+  align-items: center;
   gap: var(--studio-space-xs) var(--studio-space-md);
   margin-top: var(--studio-space-2xs);
 }
 
+.list-new-btn {
+  margin-left: auto;
+}
+
 .list-pane-count {
   font-family: var(--font-mono);
   font-size: var(--studio-type-meta);
@@ -1054,40 +1297,6 @@ button.studio-brand-home[aria-current="page"] {
   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);
@@ -1124,11 +1333,11 @@ button.studio-brand-home[aria-current="page"] {
   color: var(--outline-variant);
 }
 
-.front-matter[open] > .front-matter-summary::before {
+.front-matter[open]>.front-matter-summary::before {
   content: "▾";
 }
 
-.front-matter[open] > .front-matter-summary {
+.front-matter[open]>.front-matter-summary {
   border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
 }
 
@@ -1142,7 +1351,7 @@ button.studio-brand-home[aria-current="page"] {
   letter-spacing: 0.04em;
 }
 
-.front-matter > .form-grid {
+.front-matter>.form-grid {
   padding: 0.15rem 0.65rem 0.75rem;
   max-width: none;
 }
@@ -1174,21 +1383,21 @@ button.studio-brand-home[aria-current="page"] {
   gap: 0.35rem;
 }
 
-.editor-mast > .btn,
-.editor-mast-lead > .btn {
+.editor-mast>.btn,
+.editor-mast-lead>.btn {
   flex: 0 0 auto;
   align-self: center;
   margin-bottom: 0;
 }
 
-.editor-mast-lead > .btn-back {
+.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 {
+.editor-mast-lead>.btn-back .btn-nav-icon {
   font-size: 1.35rem !important;
 }
 
@@ -1249,7 +1458,7 @@ button.studio-brand-home[aria-current="page"] {
   border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
 }
 
-.preview-folio > .preview-frame {
+.preview-folio>.preview-frame {
   flex: 1 1 auto;
   min-height: 12rem;
   border-color: color-mix(in srgb, var(--outline-variant) 40%, transparent);
@@ -1309,7 +1518,7 @@ button.studio-brand-home[aria-current="page"] {
 
 .studio-map {
   gap: var(--studio-space-lg);
-  max-width: 72rem;
+  max-width: none;
   position: relative;
 }
 
@@ -1330,14 +1539,14 @@ button.studio-brand-home[aria-current="page"] {
   opacity: var(--cubist-shard-opacity-strong);
 }
 
-.studio-map > .studio-shard--lead {
+.studio-map>.studio-shard--lead {
   width: min(18rem, 42vw);
   height: min(14rem, 32vw);
   top: -1rem;
   right: 4%;
 }
 
-.studio-map > .studio-shard--trail {
+.studio-map>.studio-shard--trail {
   width: min(12rem, 28vw);
   height: min(10rem, 22vw);
   bottom: 8%;
@@ -1350,56 +1559,28 @@ button.studio-brand-home[aria-current="page"] {
   }
 }
 
-.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);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--studio-space-lg) var(--studio-space-md);
+  align-items: start;
   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;
+/* Two group columns on medium screens. */
+@media (min-width: 48rem) {
+  .studio-map-board {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-.studio-map-col {
-  display: flex;
-  flex-direction: column;
-  gap: var(--studio-space-lg);
-  min-width: 0;
+/* Three group columns on wide screens (max). */
+@media (min-width: 72rem) {
+  .studio-map-board {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 
 .studio-map-group {
@@ -1409,6 +1590,7 @@ button.studio-brand-home[aria-current="page"] {
   padding: var(--studio-space-md);
   background: var(--background);
   border: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+  min-width: 0;
 }
 
 .studio-map-group-head {
@@ -1489,40 +1671,6 @@ button.studio-brand-home[aria-current="page"] {
   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;
@@ -1684,7 +1832,7 @@ button.studio-brand-home[aria-current="page"] {
   font-size: 0.92rem;
 }
 
-.editor-mode-tab + .editor-mode-tab {
+.editor-mode-tab+.editor-mode-tab {
   border-left: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
 }
 
@@ -1970,7 +2118,7 @@ textarea.body-source.editor-surface {
 /* Side-preview code only: −2pt vs inherited preview body size. */
 .preview-frame pre,
 .preview-frame pre code,
-.preview-frame :not(pre) > code {
+.preview-frame :not(pre)>code {
   font-size: 0.8019rem;
 }
 
@@ -1988,7 +2136,7 @@ textarea.body-source.editor-surface {
   padding: 0;
 }
 
-.preview-frame :not(pre) > code {
+.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);
@@ -2052,11 +2200,11 @@ textarea.body-source.editor-surface {
   font-size: 0.9em;
 }
 
-.preview-frame .article-note > :first-child {
+.preview-frame .article-note> :first-child {
   margin-top: 0;
 }
 
-.preview-frame .article-note > :last-child {
+.preview-frame .article-note> :last-child {
   margin-bottom: 0;
 }
 
@@ -2337,6 +2485,7 @@ textarea.body-source.editor-surface {
 }
 
 @media (max-width: 719px) {
+
   /* Writing lists: status | title | meta as three stacked lines. */
   .ledger-row--writing .ledger-title-row {
     flex-direction: column;
@@ -2349,11 +2498,6 @@ textarea.body-source.editor-surface {
     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;
@@ -2367,50 +2511,100 @@ textarea.body-source.editor-surface {
 @media (max-width: 960px) {
   .studio-shell {
     grid-template-columns: 1fr;
+    grid-template-rows: auto auto minmax(0, 1fr);
     height: auto;
     min-height: 100vh;
+    padding-top: 3.25rem;
   }
 
   .ledger-row {
     align-items: start;
   }
 
-  .studio-nav {
-    border-right: 0;
+  .studio-shell>.studio-toolbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 40;
+    min-height: 3.25rem;
+    padding: 0.45rem 0.7rem;
+    gap: 0.45rem;
     border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
-    overflow: visible;
-    gap: 0.35rem;
-    padding: 0.65rem 0.75rem;
+    background: color-mix(in srgb, var(--panel) 94%, transparent);
+    backdrop-filter: blur(10px);
   }
 
-  .studio-nav-bar {
-    flex-direction: row;
-    align-items: center;
-    gap: 0.5rem;
+  .studio-toolbar .spacer::before {
+    display: none;
   }
 
-  .studio-nav-bar .studio-brand {
-    flex: 0 0 auto;
-    width: auto;
-    padding: 0.2rem 0.35rem;
-    border-bottom: 0;
+  .studio-toolbar>.studio-theme-menu,
+  .studio-toolbar>.btn-tool {
+    flex: 0 0 var(--studio-toolbar-control-h);
+    width: var(--studio-toolbar-control-h);
+    height: var(--studio-toolbar-control-h);
+    min-height: var(--studio-toolbar-control-h);
+    max-height: var(--studio-toolbar-control-h);
   }
 
-  button.studio-brand-home {
-    width: auto;
+  .studio-toolbar .btn-tool .btn-label {
+    display: none;
   }
 
-  .studio-nav-menu-toggle {
-    display: inline-flex;
-    flex: 1 1 auto;
+  .studio-toolbar>.studio-theme-menu .btn-tool,
+  .studio-toolbar>.btn-tool {
+    width: 100%;
     min-width: 0;
+    padding: 0;
+  }
+
+  .studio-toolbar-status {
+    display: none;
+  }
+
+  .studio-toolbar .studio-nav-menu-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Mobile top bar: mark only — wordmark is desktop. */
+  .studio-toolbar .studio-brand-toolbar {
+    width: var(--studio-toolbar-control-h);
+    min-width: var(--studio-toolbar-control-h);
+    padding: 0;
+    column-gap: 0;
+    grid-template-columns: var(--studio-brand-mark);
+    justify-items: center;
+  }
+
+  .studio-toolbar .studio-brand-toolbar .studio-brand-copy,
+  .studio-toolbar .studio-brand-toolbar .studio-brand-name {
+    display: none;
+  }
+
+  .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:not(.is-open) {
+    display: none;
+  }
+
+  .studio-nav-bar {
+    display: none;
   }
 
   .studio-nav-panel {
     display: none;
-    margin-top: 0.35rem;
+    margin-top: 0;
     padding-top: 0.35rem;
-    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
+    border-top: 0;
     max-height: min(70vh, 28rem);
     overflow: auto;
   }
@@ -2435,14 +2629,14 @@ textarea.body-source.editor-surface {
     display: inline-flex;
   }
 
-  .studio-body.view-preview .pane-editor > .btn,
+  .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 {
+  .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;
   }
 
@@ -2659,13 +2853,6 @@ textarea.yaml-source.editor-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;
@@ -2696,35 +2883,46 @@ textarea.yaml-source.editor-surface {
 
 .media-row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.5rem;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--studio-space-md);
   align-items: center;
-  padding: 0.25rem 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
+  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(--surface-card);
+  text-align: left;
+  width: 100%;
+  font: inherit;
+  color: inherit;
+  box-sizing: border-box;
 }
 
 .media-row:last-child {
-  border-bottom: none;
+  margin-bottom: 0;
 }
 
-.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: var(--surface-card);
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
+.media-row:hover {
+  background: var(--surface-high);
 }
 
-.media-row-main:hover {
-  background: var(--surface-high);
+.media-row[aria-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.media-row--dir {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.media-row--preview {
+  cursor: zoom-in;
+}
+
+.media-row--preview:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 3px;
 }
 
 .media-thumb {
@@ -2777,18 +2975,47 @@ textarea.yaml-source.editor-surface {
   white-space: nowrap;
 }
 
-.media-copy-btn {
+.media-ops {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.35rem;
   flex-shrink: 0;
   white-space: nowrap;
+  padding-top: 0.1rem;
 }
 
-.media-row-main--preview {
-  cursor: zoom-in;
+.media-op-btn {
+  width: 2.35rem;
+  min-width: 2.35rem;
+  min-height: 2.35rem;
+  padding: 0.3rem;
+  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
+  background: var(--background);
+  color: var(--on-surface);
 }
 
-.media-row-main--preview:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 3px;
+.media-op-btn .material-symbols-outlined {
+  font-size: 1.15rem;
+  line-height: 1;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
+}
+
+.media-copy-btn:hover {
+  background: var(--surface-high);
+  border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-variant));
+  color: var(--primary);
+}
+
+.media-delete-btn {
+  color: var(--error);
+  border-color: color-mix(in srgb, var(--error) 45%, var(--outline-variant));
+  background: color-mix(in srgb, var(--error) 6%, var(--background));
+}
+
+.media-delete-btn:hover {
+  background: color-mix(in srgb, var(--error) 14%, var(--background));
+  border-color: color-mix(in srgb, var(--error) 60%, var(--outline-variant));
 }
 
 /* Same overlay as the public figure lightbox (`assets/css/article.css`).
@@ -2936,9 +3163,9 @@ body.figure-lightbox-open {
 }
 
 @media (prefers-reduced-motion: reduce) {
+
   .figure-lightbox-backdrop,
   .figure-lightbox-panel {
     animation: none;
   }
 }
-