sealkeep 0.9.0 → 0.11.1

package/web/style.css

@@ -1,5 +1,5 @@
 /*
- * Vaultline dashboard.
+ * Sealkeep dashboard.
  *
  * Two worlds, one rule between them. Above the line is what you can still read:
  * source paths, agent names, sizes. Below it is what only you can open. The
@@ -11,16 +11,16 @@
 
 :root {
   /* @tokens:start — generated from design-system/tokens.css, do not edit here */
-  --paper: #f4f4f3;
-  --card: #fbfbfa;
-  --ink: #111316;
-  --soft: #5e646c;
-  --rule: #dadcde;
-  --seal: #101a3d;
-  --seal-ink: #96a6e0;
-  --live: #2a3fb0;
-  --warn: #8c3220;
-  --warn-bg: #f4e6e2;
+  --paper: #161311;
+  --card: #1e1a17;
+  --ink: #f0ede6;
+  --soft: #9a948a;
+  --rule: #2e2a24;
+  --seal: #100e0b;
+  --seal-ink: #e8c793;
+  --live: #e3a455;
+  --warn: #e06c4f;
+  --warn-bg: #33201a;
   --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, "Helvetica Neue", sans-serif;
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "DejaVu Sans Mono", Consolas, monospace;
   /* @tokens:end */
@@ -29,20 +29,26 @@
      resolve to the system's colours rather than a second palette. Kept outside
      the generated block on purpose — the token file describes the design
      system, this describes one surface's history. */
+  color-scheme: dark;
+
   /* Layout constants for this surface, not part of the shared palette. */
   --rail: 264px;
   --gap: 20px;
   --panel: var(--card);
-  --rule-soft: #e6e7e9;
+  --rule-soft: #262220;
   --text: var(--ink);
   --text-2: var(--soft);
-  --text-3: #8b9099;
+  --text-3: #6e6960;
   --signal: var(--live);
-  --verified: var(--live);
-  --held: var(--soft);
+  /* v2: `ok` is terminal-green, distinct from the amber accent — a verified
+     state and an interactive affordance must never share a colour. */
+  --verified: #4cbf7a;
+  --held: #c7a16b;
   --alert: var(--warn);
   --ink-2: var(--ink);
   --ink-3: var(--soft);
+  --rail-active: #26211c;
+  --rail-glyph: #6e6960;
 }
 
 /* ── Dark ─────────────────────────────────────────────── */
@@ -59,35 +65,15 @@
  * The rail is already near-black in both themes, which is what lets the dark
  * palette stay a change of ground rather than a redesign.
  */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --paper: #0d0f11;
-    --card: #14171a;
-    --ink: #e7e9ec;
-    --soft: #8d949c;
-    --rule: #24282d;
-    --seal: #111c44;
-    --seal-ink: #a2b2ea;
-    --live: #8195f2;
-    --warn: #d97a62;
-    --warn-bg: #2b1a16;
-
-    --rule-soft: #1e2226;
-    --text-3: #6f757d;
-    --rail-active: #1c2024;
-    --rail-glyph: #7d838b;
-  }
-
-  /* Form fields take an explicit ground so they are not blind on a dark page. */
-  input[type="text"], input[type="number"], input[type="password"],
-  input[type="search"], textarea, select {
-    background: var(--card);
-    border-color: var(--rule);
-    color: var(--ink);
-  }
-  .check-fail { background: var(--warn-bg); }
-  tbody tr:hover { background: rgba(129, 149, 242, 0.08); }
+/* Sealkeep v2 is one committed dark look — no theme fork. Form fields take an
+   explicit ground so they never inherit a host colour. */
+input[type="text"], input[type="number"], input[type="password"],
+input[type="search"], textarea, select {
+  background: var(--card);
+  border-color: var(--rule);
+  color: var(--ink);
 }
+tbody tr:hover { background: color-mix(in srgb, var(--live) 7%, transparent); }
 
 * { box-sizing: border-box; }
 
@@ -95,7 +81,7 @@ body {
   margin: 0;
   display: flex;
   min-height: 100vh;
-  background: var(--paper);
+  background: radial-gradient(1100px 480px at 50% -120px, color-mix(in srgb, var(--live) 7%, var(--paper)) 0%, var(--paper) 62%) fixed, var(--paper);
   color: var(--text);
   font-family: var(--sans);
   font-size: 14px;
@@ -126,6 +112,8 @@ aside {
   font-weight: 700;
 }
 .brand span { color: var(--live); margin-right: 6px; }
+.brand-block { display: grid; gap: 8px; }
+.brand-block .surface-refresh { padding: 0 12px; }
 
 nav { display: grid; gap: 2px; }
 /* The Sessions entry is an anchor rather than a view button, so it inherits
@@ -184,6 +172,7 @@ main {
 }
 
 header { margin-bottom: 30px; }
+.headline-row { display: flex; align-items: center; gap: 14px; }
 
 h1 {
   font-family: var(--mono);
@@ -193,6 +182,12 @@ h1 {
   font-weight: 700;
   margin: 0 0 8px;
 }
+.headline-row h1 { margin-bottom: 8px; }
+.surface-refresh { display: inline-flex; align-items: center; gap: 7px; color: var(--soft); font: 500 11px var(--mono); white-space: nowrap; }
+.surface-refresh[hidden] { display: none; }
+.surface-spinner { width: 11px; height: 11px; border: 1.5px solid var(--rule); border-top-color: var(--live); border-radius: 50%; animation: surface-spin .75s linear infinite; }
+@keyframes surface-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .surface-spinner { animation: pulse 1.1s ease-in-out infinite; } }
 .lede { margin: 0; color: var(--text-2); max-width: 62ch; }
 
 /* Section labels are "a rule plus a word": a short hairline in the accent, then
@@ -255,7 +250,7 @@ h2::before, h3::before {
 
 .metrics {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: var(--gap);
 }
 .metric {
@@ -318,18 +313,19 @@ td.muted { color: var(--text-3); }
   white-space: nowrap;
   border: 1px solid transparent;
 }
-.badge-verified { color: var(--verified); background: #e9f4ec; border-color: #c6e3d0; }
-.badge-local { color: var(--text-3); background: #f1efec; border-color: var(--rule); }
-.badge-held { color: var(--held); background: #fbf3e2; border-color: #eddcb6; }
-.badge-free { color: var(--signal); background: #eaf0ff; border-color: #c6d6ff; }
-.badge-alert { color: var(--alert); background: #fbeeeb; border-color: #eecabf; }
+.badge-verified { color: color-mix(in srgb, var(--verified) 55%, var(--ink)); background: color-mix(in srgb, var(--verified) 10%, var(--card)); border-color: color-mix(in srgb, var(--verified) 26%, var(--card)); }
+.badge-local { color: var(--text-3); background: color-mix(in srgb, var(--soft) 8%, var(--card)); border-color: var(--rule); }
+.badge-held { color: var(--held); background: color-mix(in srgb, var(--held) 12%, var(--card)); border-color: color-mix(in srgb, var(--held) 30%, var(--card)); }
+.badge-free { color: var(--signal); background: color-mix(in srgb, var(--signal) 9%, var(--card)); border-color: color-mix(in srgb, var(--signal) 24%, var(--card)); }
+.badge-alert { color: var(--alert); background: color-mix(in srgb, var(--alert) 10%, var(--card)); border-color: color-mix(in srgb, var(--alert) 26%, var(--card)); }
 
 /* ── Checks ───────────────────────────────────────────── */
 
 .check {
   display: grid;
-  grid-template-columns: 160px 1fr;
+  grid-template-columns: 160px minmax(0, 1fr) auto;
   gap: 16px;
+  align-items: center;
   padding: 13px 18px;
   border-bottom: 1px solid var(--rule-soft);
   border-left: 3px solid transparent;
@@ -338,6 +334,22 @@ td.muted { color: var(--text-3); }
 .check:last-child { border-bottom: 0; }
 .check strong { font: 600 12.5px var(--mono); }
 .check span { color: var(--text-2); }
+.check .health-action {
+  justify-self: end;
+  white-space: nowrap;
+}
+.health-integrity-note {
+  display: block;
+  margin-top: 6px;
+  color: var(--text-3);
+  line-height: 1.5;
+}
+.health-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  flex-wrap: wrap;
+}
 .check-pass { border-left-color: var(--verified); }
 /* A warn is where inaction loses data — "if this machine is lost, the archives
    on it cannot be opened by anyone, including us". It was drawn in --held,
@@ -345,7 +357,7 @@ td.muted { color: var(--text-3); }
    needing attention looked like nothing was wrong. --warn is exactly what the
    design system reserves for this. */
 .check-warn { border-left-color: var(--warn); background: var(--warn-bg); }
-.check-fail { border-left-color: var(--alert); background: #fdf4f2; }
+.check-fail { border-left-color: var(--alert); background: var(--warn-bg); }
 
 /* A failed job is the row in the queue that needs a person. It was rendered
    with a class no rule matched, so it read as ordinary text beside states that
@@ -370,18 +382,18 @@ td.muted { color: var(--text-3); }
 
 button.action {
   appearance: none;
-  font: 600 13px var(--mono);
-  padding: 9px 16px;
-  border-radius: 3px;
-  border: 1px solid var(--signal);
-  background: transparent;
-  color: var(--signal);
+  font: 600 13px var(--sans);
+  padding: 9px 18px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: var(--signal);
+  color: var(--paper);
   cursor: pointer;
-  transition: background 120ms ease, color 120ms ease;
+  transition: filter 120ms ease;
 }
-button.action:hover { background: var(--signal); color: #fff; }
-button.action.danger { border-color: var(--alert); color: var(--alert); }
-button.action.danger:hover { background: var(--alert); color: #fff; }
+button.action:hover { filter: brightness(1.08); }
+button.action.danger { background: transparent; border-color: var(--alert); color: var(--alert); }
+button.action.danger:hover { background: var(--alert); color: var(--paper); filter: none; }
 button.action:disabled { border-color: var(--rule); color: var(--text-3); cursor: not-allowed; background: transparent; }
 
 .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@@ -389,19 +401,44 @@ button.action:disabled { border-color: var(--rule); color: var(--text-3); cursor
 .actions { display: flex; gap: 10px; flex-wrap: wrap; }
 .note { font-size: 12.5px; color: var(--text-3); margin: 0; line-height: 1.6; }
 .pad { padding: 20px; display: grid; gap: 14px; }
+.focus-target {
+  border-color: var(--signal) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 20%, transparent), 0 16px 44px #0005;
+  transition: border-color .2s, box-shadow .2s;
+}
 
 /* ── Form fields: the settings screen is the first editable surface,
    so text/number/select/textarea inherit the token input's own look
    rather than the browser default. ───────────────────────────────── */
 
 .field { display: grid; gap: 6px; }
+.automation-checks {
+  display: grid;
+  gap: 0;
+  margin: 4px 0 8px;
+  border-top: 1px solid var(--rule-soft);
+  border-bottom: 1px solid var(--rule-soft);
+}
+.automation-check {
+  display: grid;
+  grid-template-columns: minmax(140px, .7fr) minmax(210px, 1.3fr);
+  gap: 16px;
+  padding: 8px 0;
+  font: 12px/1.45 var(--mono);
+}
+.automation-check + .automation-check { border-top: 1px solid var(--rule-soft); }
+.automation-check .label { color: var(--ink); }
+.automation-check .value { color: var(--soft); }
+.automation-check.good .value { color: var(--verified); }
+.automation-check.warn .value { color: var(--warn); }
+@media (max-width: 720px) {
+  .automation-check { grid-template-columns: 1fr; gap: 2px; }
+}
 /* :not(.opt) rather than letting .opt override after the cascade: a checkbox
    row is a label too, and this keeps the two from fighting over specificity. */
 .field > label:not(.opt) {
   font-family: var(--mono);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  font-size: 12px;
   color: var(--text-3);
   font-weight: 600;
 }
@@ -411,8 +448,8 @@ input[type="text"], input[type="number"], input[type="password"], textarea, sele
   font: 13px var(--mono);
   padding: 9px 11px;
   border: 1px solid var(--rule);
-  border-radius: 3px;
-  background: #fff;
+  border-radius: 10px;
+  background: var(--card);
   color: var(--text);
   width: 100%;
 }
@@ -446,7 +483,7 @@ form h3:first-child { margin-top: 0; }
 .empty code, code {
   font-family: var(--mono);
   font-size: 12px;
-  background: #efece7;
+  background: color-mix(in srgb, var(--soft) 10%, var(--card));
   border: 1px solid var(--rule);
   border-radius: 3px;
   padding: 2px 6px;
@@ -456,17 +493,7 @@ form h3:first-child { margin-top: 0; }
 
 .gate { max-width: 640px; }
 #token-form { display: flex; gap: 10px; flex-wrap: wrap; }
-#token-input {
-  flex: 1;
-  min-width: 240px;
-  font: 13px var(--mono);
-  padding: 10px 12px;
-  border: 1px solid var(--rule);
-  border-radius: 3px;
-  background: #fff;
-  color: var(--text);
-}
-#token-input:focus-visible, button:focus-visible, nav button:focus-visible,
+button:focus-visible, nav button:focus-visible,
 input:focus-visible, textarea:focus-visible, select:focus-visible {
   outline: 2px solid var(--signal);
   outline-offset: 2px;
@@ -490,7 +517,7 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
   background: var(--text-3);
 }
 .pill.ok::before { background: var(--verified); }
-.pill.warn::before { background: var(--held); }
+.pill.warn::before { background: var(--warn); }
 .pill.busy::before { background: var(--signal); animation: pulse 1.1s ease-in-out infinite; }
 
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@@ -602,6 +629,102 @@ footer b { font: 600 12.5px var(--mono); color: var(--text-2); display: block; m
 .acct-facts li.warn .dot { background: var(--warn); }
 .acct-facts b { color: var(--ink); font-weight: 600; }
 
+/* ---- panel review pass (2026-08-24): both critics' directives ---- */
+
+/* A button label is a word, never a column of letters. */
+button.action { white-space: nowrap; }
+
+/* The vault's action cell: one primary action plus an overflow menu. */
+.actions-cell { white-space: nowrap; }
+.actions-cell .rowmenu { display: inline-block; position: relative; margin-left: 6px; vertical-align: middle; }
+.rowmenu > summary { list-style: none; cursor: pointer; border: 1px solid var(--rule); border-radius: 3px; padding: 4px 10px; font-family: var(--mono); font-size: 13px; user-select: none; }
+.rowmenu > summary::-webkit-details-marker { display: none; }
+.rowmenu[open] > summary { background: var(--panel); }
+.rowmenu-list { position: absolute; right: 0; z-index: 30; margin-top: 4px; background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 200px; box-shadow: 0 8px 24px rgba(20, 26, 34, 0.14); }
+.rowmenu-list .act-note { max-width: 260px; white-space: normal; }
+.archive-transfer { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px 12px; margin: 0 0 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--signal) 38%, var(--rule)); border-radius: 5px; background: color-mix(in srgb, var(--signal) 4%, var(--panel)); }
+.archive-transfer select { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--ink); font: 600 12px var(--mono); }
+.archive-transfer .action { margin: 0; }
+.transfer-heading { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
+.transfer-heading strong { font: 650 14px var(--sans); color: var(--ink); }
+.transfer-heading .note { text-align: right; }
+.transfer-field { display: grid; gap: 5px; color: var(--text-3); font: 600 11px var(--mono); }
+.archive-transfer > .note { grid-column: 1 / -1; }
+.transfer-maintenance { grid-column: 1 / -1; margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--rule); }
+.transfer-maintenance summary { cursor: pointer; color: var(--text-3); font: 600 11px var(--mono); }
+.transfer-maintenance[open] summary { color: var(--ink); }
+.transfer-maintenance p { margin: 8px 0; max-width: 74ch; }
+.transfer-maintenance .action { margin-right: 6px; }
+.vault-table td:nth-child(5) .badge { margin: 2px 3px 2px 0; }
+.vault-table td:nth-child(5) small { display: block; margin-top: 3px; }
+
+/* Seven columns need a budget, not an improvisation per render. */
+.vault-table { table-layout: fixed; width: 100%; }
+.vault-table td { overflow: hidden; }
+.vault-table .archive-size { white-space: nowrap; font-size: 12px; }
+.vault-table th { overflow: hidden; text-overflow: ellipsis; }
+/* The size column is deliberately two short lines. Letting its former long
+   label overflow a fixed 124px budget fused it with SESSION at laptop widths. */
+.vault-table th.vault-size-heading { line-height: 1.35; vertical-align: bottom; white-space: normal; }
+.vault-table th.vault-size-heading span { display: block; white-space: nowrap; }
+
+/* Search, location and ordering for a 1,035-row vault. The location choices
+   wrap as one compact control instead of turning the library into five tabs. */
+.vault-tools { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px 14px; align-items: center; padding: 12px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--panel) 74%, transparent); }
+.vault-find { margin: 0; }
+.vault-find input { width: 100%; font-family: var(--mono); font-size: 13px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); }
+.vault-locations { display: flex; flex-wrap: wrap; gap: 4px; }
+.vault-location { border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--text-2); padding: 6px 9px; font: 600 11px/1 var(--mono); cursor: pointer; white-space: nowrap; }
+.vault-location:hover { color: var(--ink); border-color: var(--text-3); }
+.vault-location.selected { color: var(--ink); border-color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, var(--panel)); }
+.vault-sort { color: var(--text-3); font: 600 11px var(--mono); white-space: nowrap; }
+.vault-sort select { margin-left: 5px; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--ink); padding: 7px 8px; font: 600 12px var(--mono); }
+@media (max-width: 900px) {
+  .vault-tools { grid-template-columns: 1fr; align-items: stretch; }
+  .vault-sort select { width: calc(100% - 42px); }
+  .archive-transfer { grid-template-columns: 1fr; }
+  .transfer-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
+  .transfer-heading .note { text-align: left; }
+}
+.vault-refresh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text-3); font: 500 12px var(--mono); }
+.vault-refresh::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--text-3); }
+.vault-refresh.loading::before, .vault-refresh.updating::before, .vault-refresh.cached::before { background: var(--signal); animation: pulse 1.1s ease-in-out infinite; }
+.vault-refresh.updated::before { background: var(--verified); }
+.vault-refresh.failed::before { background: var(--warn); }
+
+/* The card that says the truth about "off this machine" when nothing is. */
+.metric.warn-card { border-color: color-mix(in srgb, var(--warn) 42%, var(--card)); background: color-mix(in srgb, var(--warn) 6%, var(--card)); }
+.metric.warn-card b { color: var(--warn); }
+
+/* The boundary strip: numbers first, caption second. */
+.boundary b { color: var(--text-3); font-weight: 500; }
+.boundary .side { color: inherit; font-weight: 600; }
+
+/* Native fieldset chrome was the one stranger in the card language. */
+fieldset { min-width: 0; border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; margin: 0; }
+#view-rules pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
+#view-rules #copies-wrap { max-width: 100%; overflow-x: auto; }
+legend { font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 0 6px; }
+
+/* A two-line rail fact keeps its bullet at the top, not floating mid-air. */
+.acct-facts li { align-items: flex-start; }
+.acct-facts li .dot { margin-top: 5px; }
+
+/* Health's count means "things needing attention", not a neutral total. */
+#count-health:not(:empty) { color: var(--warn); font-weight: 700; }
+
+/* The ellipsis only engages when the name cannot wrap: the global td
+   word-break was breaking the filename INSIDE the truncating span. */
+td.path .short { white-space: nowrap; }
+/* Seven columns at ~700px cannot afford 18px side-padding per cell. */
+.vault-table td, .vault-table th { padding-left: 10px; padding-right: 10px; }
+/* The span's own cap must not exceed the column it lives in, or the cell
+   clips before the ellipsis can appear. */
+.vault-table td.path .short { max-width: 100%; }
+/* The overflow menu must escape its cell: td overflow-hidden was clipping the
+   open dropdown to a sliver. The actions column alone stays visible. */
+.vault-table td.actions-cell { overflow: visible; position: relative; }
+
 /* ══ First run ═══════════════════════════════════════════════════════
    setup.html. Same rail, same rules, same two typefaces — a wizard that
    looked like a different product would undo the trust it exists to build.
@@ -625,11 +748,11 @@ h1:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
 
 nav.steps .step .glyph { font-variant-numeric: tabular-nums; width: 1.15em; text-align: center; }
 nav.steps .step.done .glyph { color: var(--verified); }
-nav.steps .step.current { background: var(--ink-2); color: #fff; }
+nav.steps .step.current { background: var(--ink-2); color: var(--paper); }
 nav.steps .step.current .glyph { color: var(--signal); }
 nav.steps .step.locked { opacity: 0.42; cursor: default; }
 nav.steps .step.locked:hover { background: transparent; color: var(--soft); }
-nav.steps .step.locked.current:hover { background: var(--ink-2); color: #fff; }
+nav.steps .step.locked.current:hover { background: var(--ink-2); color: var(--paper); }
 
 /* ── Screen one: one file's life, across the line ─────────── */
 
@@ -702,20 +825,25 @@ ul.plain b { color: var(--text); }
 }
 .wizfoot .note { max-width: 46ch; }
 
+/* Every link is amber — the one interactive colour. Without this, anchors in
+   panel copy fall to the UA's dark blue, which vanishes on the v2 ground. */
+a { color: var(--live); }
+a:hover { color: color-mix(in srgb, var(--live) 80%, var(--ink)); }
+
 a.action {
   display: inline-block;
-  font: 600 13px var(--mono);
-  padding: 9px 16px;
-  border-radius: 3px;
-  border: 1px solid var(--signal);
-  background: transparent;
-  color: var(--signal);
+  font: 600 13px var(--sans);
+  padding: 9px 18px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: var(--signal);
+  color: var(--paper);
   text-decoration: none;
-  transition: background 120ms ease, color 120ms ease;
+  transition: filter 120ms ease;
 }
-a.action:hover { background: var(--signal); color: #fff; }
-.action.primary { background: var(--signal); color: #fff; }
-.action.primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
+a.action:hover { filter: brightness(1.08); color: var(--paper); }
+.action.primary { background: var(--signal); color: var(--paper); }
+.action.primary:hover { filter: brightness(1.08); }
 /* A locked "Finish setup" is on screen the whole time someone is transcribing
    24 words, so it stays readable rather than fading to a hint of itself. */
 button.action.primary:disabled { background: var(--rule-soft); border-color: var(--rule); color: var(--text-2); }
@@ -736,7 +864,7 @@ button.action.primary:disabled { background: var(--rule-soft); border-color: var
 .agent-row input[type="checkbox"] { accent-color: var(--signal); width: 15px; height: 15px; flex-shrink: 0; }
 .agent-row input[type="checkbox"]:disabled + .agent-name { cursor: default; color: var(--text-2); }
 .agent-row.state-missing { opacity: 0.6; }
-.agent-row.state-unwritable { border-left: 3px solid var(--alert); padding-left: 15px; background: #fdf4f2; }
+.agent-row.state-unwritable { border-left: 3px solid var(--alert); padding-left: 15px; background: var(--warn-bg); }
 
 /* ── Screen three: where archives go ──────────────────────── */
 
@@ -796,7 +924,8 @@ button.action.primary:disabled { background: var(--rule-soft); border-color: var
 
 @media print {
   aside, .wizfoot, .phrase-actions, #confirm-form, footer, main.wizard > .pill { display: none !important; }
-  body { display: block; background: #fff; }
+  /* Physical paper, not the palette: print flips to dark-on-white. */
+  body { display: block; background: white; color: black; }
   main.wizard { padding: 0; max-width: none; }
   .phrase { break-inside: avoid; }
 }
@@ -807,17 +936,57 @@ button.action.primary:disabled { background: var(--rule-soft); border-color: var
 
 @media (max-width: 900px) {
   body { flex-direction: column; }
-  aside { width: 100%; flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px; overflow-x: auto; }
+  /* Tablet and phone share a two-row masthead: identity on top, the complete
+     navigation in its own horizontal scroller below. Keeping the account card
+     in the first row prevents its long fact sentences from flex-shrinking into
+     hundreds of wrapped lines and pushing the page heading below the fold. */
+  aside {
+    width: 100%; max-width: 100vw; min-width: 0;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas: "brand account" "nav nav";
+    align-items: center;
+    gap: 8px 14px;
+    padding: 10px 16px 8px;
+    overflow: hidden;
+  }
+  aside > .brand, aside > .brand-block { grid-area: brand; min-width: 0; }
+  aside > .acct {
+    grid-area: account;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 0;
+    border-bottom: 0;
+  }
+  /* Plan and account identity are useful in a compact header; detailed quota
+     facts remain available in Settings and must not consume the first viewport. */
+  aside > .acct .acct-meter,
+  aside > .acct .acct-usage,
+  aside > .acct .acct-facts,
+  aside > .acct .acct-door-slot { display: none; }
+  aside > .acct .acct-plan { flex: 0 0 auto; padding: 4px 8px; }
+  aside > .acct .acct-email { min-width: 0; max-width: 28ch; }
+  aside > nav {
+    grid-area: nav;
+    min-width: 0;
+    width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
   aside .privacy { display: none; }
   .brand { padding: 0; font-size: 17px; }
   nav { display: flex; gap: 4px; }
-  nav button { padding: 8px 11px; font-size: 12.5px; }
+  nav button, nav a.navlink { flex: 0 0 auto; white-space: nowrap; padding: 8px 11px; font-size: 12.5px; }
   nav button .count { display: none; }
   main { padding: 26px 18px 40px; }
   h1 { font-size: 24px; }
   .boundary { font-size: 11px; gap: 8px; }
   .boundary .side { display: none; }
-  .check { grid-template-columns: 1fr; gap: 4px; }
+  .check { grid-template-columns: 1fr; gap: 8px; }
+  .check .health-action { justify-self: start; margin-top: 2px; }
+  .health-actions { justify-content: flex-start; }
   .agent { grid-template-columns: 1fr; gap: 6px; }
   table { font-size: 12.5px; }
   th, td { padding: 10px 12px; }
@@ -919,7 +1088,7 @@ td .queued { color: var(--live); font-weight: 600; }
   transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
 }
 .chip:hover { border-color: var(--signal); color: var(--text); }
-.chip.on { background: var(--signal); border-color: var(--signal); color: #fff; }
+.chip.on { background: var(--signal); border-color: var(--signal); color: var(--paper); }
 .chip-sep { width: 1px; height: 18px; background: var(--rule); margin: 0 4px; }
 .shown { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
 
@@ -999,3 +1168,249 @@ td .queued { color: var(--live); font-weight: 600; }
   color: var(--soft);
   white-space: nowrap;
 }
+
+/* Rail: a storage destination this machine cannot reach yet, with the fix inline. */
+.rail-connect { color: var(--warn); text-decoration: underline; cursor: pointer; }
+#acct-escrow-text .rail-connect { display: inline-block; padding-block: 3px; }
+
+/* Settings: storage destination rows — state, order, pins, connect. */
+.storage-target-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
+.storage-target-row:last-child { border-bottom: 0; }
+.storage-target-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+.storage-target-row .dot.ok { background: var(--verified); }
+.storage-target-row .dot.warn { background: var(--warn); }
+.storage-target-row .target-name { min-width: 200px; }
+.storage-target-row .target-location { display: block; max-width: 34rem; margin-top: 3px; color: var(--text-3); font: 11px/1.35 var(--mono); overflow-wrap: anywhere; }
+.storage-target-row .target-capacity + .target-cap-manage { display: inline-flex; width: fit-content; margin-top: 7px; padding: 5px 9px; font-size: 11px; }
+.target-order button { border: 1px solid var(--rule); background: none; cursor: pointer; padding: 1px 7px; border-radius: 4px; color: inherit; }
+.target-order button:disabled { opacity: .3; cursor: default; }
+.target-pins { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.pin-chip { border: 1px solid var(--rule); border-radius: 10px; padding: 1px 8px; font-size: 12px; }
+.pin-chip button { border: 0; background: none; cursor: pointer; padding: 0 0 0 4px; color: inherit; }
+.pin-add { border: 1px dashed var(--rule); background: none; border-radius: 10px; padding: 1px 8px; font-size: 12px; cursor: pointer; color: inherit; }
+.target-connect { margin-left: auto; }
+.target-connection { flex: 1 0 100%; margin-left: 18px; padding: 2px 0 8px; }
+.target-connection-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.target-connection-actions .target-connect { margin-left: 0; }
+.target-connection-form { margin-top: 10px; padding: 14px; border: 1px solid var(--rule); border-radius: 8px; background: color-mix(in srgb, var(--signal) 3%, var(--panel)); }
+.target-connection-form[hidden] { display: none; }
+.target-credential-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.target-credential-fields label { display: grid; gap: 5px; color: var(--text-2); font: 600 11px var(--mono); }
+.target-credential-fields .target-credential-wide, .target-credential-fields label:nth-child(3) { grid-column: 1 / -1; }
+.target-credential-fields input, .target-credential-fields textarea { width: 100%; }
+.target-connection-form .note { max-width: 72ch; margin: 10px 0; }
+@media (max-width: 720px) {
+  .target-connection { margin-left: 0; }
+  .target-credential-fields { grid-template-columns: 1fr; }
+  .target-credential-fields label { grid-column: 1 !important; }
+  .target-connection-actions { justify-content: flex-start; }
+}
+
+/* Copies must read in full — a clipped place name marks nothing. */
+td .badge { white-space: normal; }
+
+/* The revealed phrase: readable, selectable, visually distinct from inputs. */
+#reveal-phrase { width: 100%; font: 500 14px/1.6 var(--mono); padding: 10px 12px; border: 1px solid var(--warn); border-radius: 6px; background: var(--warn-bg); color: var(--ink); resize: none; }
+
+/* A held-reason that cannot be read holds nothing. */
+td .hold-chip { white-space: normal; }
+
+/* Live view: a session mirror growing in place. */
+.live-mirror { max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 12px/1.6 var(--mono); background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 14px; margin-top: 14px; color: var(--text); }
+
+/* Health check groups: a quiet header per meaning. */
+.check-group { margin: 18px 0 6px; font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
+.check-group:first-child { margin-top: 0; }
+
+/* Live: an active share row. */
+.share-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
+.share-row code { border: 1px solid var(--rule); border-radius: 6px; padding: 2px 8px; background: color-mix(in srgb, var(--signal) 8%, var(--card)); }
+.share-row button { border: 1px solid var(--rule); background: none; border-radius: 6px; padding: 4px 10px; cursor: pointer; color: inherit; }
+
+
+/* v2: section headings inside panels are mono kickers — the design's
+   SETUP / RECOVERY PHRASE voice — while page headlines stay bold sans. */
+.panel h3, #view-settings form h3 { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-2); }
+
+/* v2 radii: cards and fields soften to the design's 12px. */
+.panel, .metric { border-radius: 12px; }
+input[type="text"], input[type="number"], input[type="password"], input[type="search"], textarea, select { border-radius: 10px; }
+
+/* v2 terminal chrome for the live mirror: traffic dots and a sealed ground. */
+.live-mirror { background: var(--seal); color: var(--seal-ink); border-radius: 12px; border-color: color-mix(in srgb, var(--seal-ink) 14%, var(--seal)); padding-top: 40px; position: relative; }
+.live-mirror::before { content: "● ● ●"; position: absolute; top: 12px; left: 14px; font-size: 9px; letter-spacing: 2px; color: color-mix(in srgb, var(--seal-ink) 26%, var(--seal)); }
+
+/* Shared view: the team as a table — a round ground with seats on the rim.
+   Seats are positioned by script (percent offsets), so the circle scales. */
+.table-viz{position:relative;height:260px;margin:1.2rem auto .6rem;max-width:420px}
+.table-viz .table-top{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
+  width:150px;height:150px;border-radius:50%;background:var(--seal);
+  border:1px solid color-mix(in srgb, var(--seal-ink) 18%, var(--seal));
+  display:flex;align-items:center;justify-content:center;text-align:center;
+  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--seal-ink);padding:1rem}
+.table-viz .seat{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem;width:92px;text-align:center}
+.table-viz .seat .avatar{width:40px;height:40px;border-radius:50%;background:var(--card);
+  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
+  font-weight:650;font-size:.9rem;color:var(--ink)}
+.table-viz .seat.you .avatar{background:var(--live);color:var(--paper);border-color:transparent}
+.table-viz .seat .who{font-size:.72rem;color:var(--soft);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:92px}
+.table-viz .seat button{background:none;border:0;color:var(--warn);font-size:.66rem;cursor:pointer;padding:0}
+.table-viz .seat button:hover{text-decoration:underline}
+.copychip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--rule);border-radius:10px;
+  padding:.4rem .4rem .4rem .7rem;background:var(--seal)}
+.copychip code{background:none;color:var(--seal-ink);font-size:.78rem;padding:0}
+.copychip button{background:none;border:0;color:var(--live);font-family:var(--mono);font-size:.7rem;cursor:pointer;padding:.15rem .5rem;border-radius:8px}
+.copychip button:hover{background:color-mix(in srgb, var(--live) 14%, transparent)}
+
+/* Shared projects begin with work already found on this machine. A suggestion
+   is a local folder identity, not a cloud object; the selected outline is the
+   only strong colour until the user deliberately continues to the account. */
+.project-suggestions-panel{border-color:color-mix(in srgb,var(--live) 32%,var(--rule))}
+.project-suggestions-head{justify-content:space-between;align-items:flex-start;gap:1rem}
+.project-suggestions-head h3{margin:0 0 .35rem}.project-suggestions-head .note{margin:0;max-width:66ch}
+.project-local-badge{flex:none;border:1px solid var(--rule);border-radius:999px;padding:.28rem .6rem;color:var(--soft);font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}
+.project-suggestion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.65rem;margin-top:1rem}
+.project-suggestion{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;padding:.9rem;border:1px solid var(--rule);border-radius:10px;background:color-mix(in srgb,var(--seal) 56%,var(--card));cursor:pointer;transition:border-color 120ms ease,background 120ms ease}
+.project-suggestion:hover{border-color:color-mix(in srgb,var(--live) 55%,var(--rule))}
+.project-suggestion:has(input:checked){border-color:var(--live);background:color-mix(in srgb,var(--live) 7%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--live) 28%,transparent)}
+.project-suggestion input{width:15px;height:15px;margin:.15rem 0 0;accent-color:var(--live)}
+.project-suggestion strong{display:block;font:650 13px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.project-suggestion .project-path{display:block;margin-top:.3rem;color:var(--soft);font:11px/1.45 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.project-suggestion .project-facts{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.6rem;color:var(--soft);font-size:11px}
+.project-suggestion .project-facts span{border:1px solid var(--rule);border-radius:999px;padding:.15rem .45rem}
+.project-suggestion[data-state="connected"]{opacity:.58;cursor:default}.project-suggestion[data-state="connected"] input{visibility:hidden}
+.project-builder{display:grid;grid-template-columns:minmax(190px,1fr) minmax(210px,1fr) auto;align-items:end;gap:.8rem;margin-top:1rem;padding:1rem;border:1px solid var(--live);border-radius:10px;background:color-mix(in srgb,var(--live) 6%,var(--card))}
+.project-builder-copy strong,.project-builder-copy span{display:block}.project-builder-copy strong{font:650 13px var(--mono)}.project-builder-copy span{color:var(--soft);font-size:12px;margin-top:.25rem;line-height:1.45}
+.project-name-field{margin:0}.project-name-field input{margin-top:.35rem;width:100%}
+.project-builder>.action{white-space:nowrap}.project-builder>#team-project-result{grid-column:1/-1}
+.project-pending-list{display:grid;gap:.45rem;margin-top:.8rem}.project-pending-list:empty{display:none}
+.project-pending{display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-top:1px solid var(--rule);font-size:12px}.project-pending strong{font:600 12px var(--mono)}.project-pending span{color:var(--soft);flex:1}.project-pending button{background:none;border:0;color:var(--soft);font-size:11px;text-decoration:underline;cursor:pointer}
+.project-repair-controls{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:.65rem;align-items:center;margin:1rem 0 .75rem}
+.project-repair-controls[hidden]{display:none}
+.project-repair-controls input{width:100%;margin:0;font:500 12px var(--mono)}
+.project-repair-controls .note{margin:0;white-space:nowrap}
+.project-repair-group{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--seal) 44%,var(--card));margin-top:.65rem}
+.project-repair-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0;padding:.75rem .85rem;background:color-mix(in srgb,var(--seal) 72%,var(--card));border-bottom:1px solid var(--rule)}
+.project-repair-group-head strong{min-width:0;overflow-wrap:anywhere;font:650 13px/1.4 var(--mono)}
+.project-repair-group-head .note{flex:none;margin:0;text-align:right}
+.project-repair-row{padding:.8rem .85rem;border-top:1px solid var(--rule)}
+.project-repair-group-head+.project-repair-row{border-top:0}
+.project-repair-row>.note{margin:.1rem 0 .55rem}
+.project-repair-identity{display:block;margin-bottom:.25rem;color:var(--soft);font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}
+.project-repair-chooser-host:empty{display:none}
+.project-repair-chooser{display:grid;grid-template-columns:minmax(190px,1fr) minmax(240px,1.35fr) auto;gap:.55rem;align-items:center;margin-top:.6rem;padding:.7rem;border:1px solid var(--rule);border-radius:10px;background:var(--card)}
+.project-repair-chooser input,.project-repair-chooser select{width:100%;min-width:0;margin:0;font:500 12px var(--mono)}
+.project-repair-chooser .note{grid-column:1/3;margin:0}
+.project-repair-chooser .note+.action{justify-self:start}
+.project-repair-review{grid-column:3;grid-row:1;align-self:stretch}
+.project-repair-confirmation{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.55rem;flex-wrap:wrap}
+.project-repair-confirmation:empty{display:none}
+@media(max-width:820px){.project-builder{grid-template-columns:1fr}.project-builder>.action{width:100%}.project-local-badge{display:none}.project-repair-controls{grid-template-columns:1fr}.project-repair-controls .note{white-space:normal}.project-repair-group-head{align-items:flex-start;flex-direction:column;gap:.25rem}.project-repair-group-head .note{text-align:left}.project-repair-chooser{grid-template-columns:1fr}.project-repair-chooser .note,.project-repair-review,.project-repair-confirmation{grid-column:1;grid-row:auto}.project-repair-chooser .action{width:100%}}
+/* Task-focused local library: human-readable chrome, technical detail on demand. */
+.home-decisions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px; }
+.cleanup-summary { margin:20px 0; padding:24px; border:1px solid var(--live); border-radius:10px; background:var(--card); }
+.cleanup-summary[hidden] { display:none; }
+.cleanup-summary h2 { font:600 20px/1.4 var(--sans); margin:0; }
+.cleanup-summary p { max-width:85ch; color:var(--soft); line-height:1.6; }
+.cleanup-summary ul { padding:0; list-style:none; }
+.cleanup-summary li { display:grid; grid-template-columns:minmax(180px,1fr) 2fr auto; gap:18px; padding:14px 0; border-top:1px solid var(--rule); }
+.cleanup-summary li span { color:var(--soft); }
+.cleanup-summary details { margin-top:20px; }
+.cleanup-summary pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:220px; overflow:auto; font:12px/1.6 var(--mono); }
+@media(max-width:700px) { .cleanup-summary li { grid-template-columns:1fr; gap:8px; } }
+.home-decision { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; gap:12px; padding:20px; background:var(--card);border:1px solid var(--rule);border-radius:12px; }
+.home-value { display:block;font:600 28px/1.2 var(--sans);letter-spacing:-.03em;color:var(--ink);margin:10px 0;overflow-wrap:anywhere; }
+.home-decision .action { grid-column:2;justify-self:start;align-self:end; }
+.home-storage { grid-column:1/-1;padding:20px 24px;border:1px solid var(--rule);border-radius:12px; }
+.home-storage h2 { margin:0 0 12px;font:600 18px/1.4 var(--sans); }
+.home-storage h2::before { display:none; }
+.home-storage p { margin:8px 0;font:14px/1.5 var(--sans);color:var(--soft); }
+@media(max-width:1100px){.home-decisions{grid-template-columns:repeat(2,minmax(0,1fr));}}
+@media(max-width:650px){.home-decisions{grid-template-columns:1fr;}}
+.home-decision > .ui-icon { color:var(--live); }
+.home-decision h2, .page-journey h2 { font:600 18px/1.4 var(--sans); margin:0; color:var(--ink); }
+.home-decision h2::before, .page-journey h2::before { display:none; }
+.home-decision p, .page-journey p { max-width:76ch; margin:6px 0 0; font:14px/1.6 var(--sans); color:var(--soft); }
+.home-decision .action { min-width:170px; text-align:center; font:500 14px/1.5 var(--sans); }
+.home-decision .action { background:transparent; color:var(--ink); border:1px solid var(--rule); }
+.home-decision:first-child .action { background:var(--live); color:var(--paper); }
+.home-decision .action:hover { background:var(--rail-active); color:var(--ink); border-color:var(--live); filter:none; }
+.home-decision:first-child .action:hover { background:var(--live); color:var(--paper); filter:brightness(1.08); }
+.home-decision .action:focus-visible, .journey-actions a:focus-visible { outline:2px solid var(--live); outline-offset:3px; }
+.view h3, .view legend { font-family:var(--sans); font-size:16px; letter-spacing:0; text-transform:none; }
+.view h3::before { display:none; }
+.view input:not([type=checkbox]):not([type=radio]), .view select { font-family:var(--sans); font-size:14px; }
+#checks { padding:20px; }
+#settings-load-state { padding:12px 16px; background:var(--card); border-left:3px solid var(--live); }
+.page-details { margin:24px 0; border:1px solid var(--rule); border-radius:8px; padding:18px; }
+.page-details > summary { font:500 15px var(--sans); cursor:pointer; }
+.page-details[open] > summary { margin-bottom:20px; }
+.page-journey { margin:0 0 26px; padding:0 0 22px; border-bottom:1px solid var(--rule); }
+.journey-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
+.journey-actions a { padding:7px 12px; border:1px solid var(--rule); border-radius:6px; text-decoration:none; font:500 14px/1.5 var(--sans); color:var(--ink); }
+.journey-actions a:hover { border-color:var(--live); }
+.service-attention { display:block; width:fit-content; margin-top:12px; padding:10px 14px; background:var(--card); border:1px solid var(--live); border-radius:6px; color:var(--live); font:500 14px var(--sans); }
+.service-attention[hidden] { display:none; }
+.session-more-filters { flex-basis:100%; margin:10px 0; }
+.session-more-filters > summary { cursor:pointer; font:500 14px var(--sans); padding:8px 0; }
+.session-filter-options { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; }
+#settings-form h3 { scroll-margin-top:30px; font:600 18px/1.5 var(--sans); color:var(--ink); }
+#settings-form .note { max-width:80ch; }
+#settings-form > .panel > .row:last-child { position:sticky; bottom:0; background:var(--card); padding:16px 0; border-top:1px solid var(--rule); z-index:2; }
+@media(max-width:650px) { .home-decision { grid-template-columns:26px minmax(0,1fr); padding:20px; gap:12px; } .home-decision .action { grid-column:2; justify-self:start; min-width:0; } }
+body { background:var(--paper); font-size:15px; }
+h1 { font-family:var(--sans); font-weight:650; letter-spacing:-.025em; }
+nav button, nav a.navlink { font-family:var(--sans); font-size:15px; min-height:44px; }
+nav button .glyph svg { width:20px; height:20px; display:block; }
+.brand { font-family:var(--sans); }
+#archives-panel { background:transparent; border:0; overflow:visible; }
+#archives-panel table { border:1px solid var(--rule); border-radius:10px; }
+#archives-panel th { font:500 12px var(--sans); letter-spacing:0; text-transform:none; }
+.ui-icon { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
+.vault-overview { display:grid; grid-template-columns:1fr 1fr 1fr; margin:0 0 28px; border:1px solid var(--rule); border-radius:12px; background:var(--card); }
+.vault-overview-item { display:flex; align-items:center; gap:20px; padding:28px; }
+.vault-overview-item + .vault-overview-item { border-left:1px solid var(--rule); }
+.vault-overview-item > .ui-icon { width:42px; height:42px; color:var(--soft); }
+.vault-overview-item:last-child > .ui-icon { color:var(--live); }
+.vault-overview h2 { margin:0; font:600 20px/1.3 var(--sans); color:var(--ink); }
+.vault-overview h2::before { display:none; }
+#archives-panel .vault-project-toggle { background:transparent; color:var(--ink); border:1px solid var(--rule); font:500 14px var(--sans); }
+#archives-panel .vault-location.selected { background:var(--live); color:var(--paper); }
+.vault-overview p { margin:7px 0 12px; font:14px/1.5 var(--sans); color:var(--soft); }
+#archives-panel .vault-tools { display:block; padding:0 0 18px; border:0; }
+#archives-panel .vault-find { display:block; margin-bottom:18px; }
+#archives-panel .vault-find input { width:100%; max-width:none; min-height:48px; font:15px var(--sans); padding:12px 16px; }
+#archives-panel .vault-locations { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; }
+#archives-panel .vault-location { font:500 14px var(--sans); border-radius:7px; padding:11px 15px; }
+.vault-advanced { position:relative; }
+.vault-advanced > summary { cursor:pointer; padding:10px 16px; border:1px solid var(--rule); border-radius:7px; font:500 14px var(--sans); }
+.vault-advanced-body { display:flex; flex-wrap:wrap; gap:12px; padding:18px; margin-top:10px; border:1px solid var(--rule); border-radius:8px; }
+.vault-advanced[open] { flex-basis:100%; }
+.vault-project { display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(180px,1fr) minmax(180px,1fr) auto; gap:24px; align-items:center; }
+.vault-project-name { display:flex; align-items:center; gap:16px; border:0; background:none; color:var(--ink); padding:0; text-align:left; cursor:pointer; min-width:0; }
+.vault-project-name .ui-icon { color:var(--live); width:28px; height:28px; }
+#archives-panel .group-row b { font:600 17px/1.4 var(--sans); }
+.vault-project small { display:block; color:var(--soft); font:13px/1.5 var(--sans); margin-top:4px; }
+.vault-project-local strong { font:500 14px/1.5 var(--sans); }
+.vault-project-backup-cell { display:flex; align-items:center; gap:10px; }
+.vault-project-details { margin:10px 0 0 44px; font:13px/1.6 var(--sans); color:var(--soft); }
+.vault-project-details summary { cursor:pointer; width:fit-content; }
+.vault-project-details > span { display:block; max-width:85ch; padding:10px 0; }
+.vault-transfer-disclosure { margin:12px 0 20px; border:1px solid var(--rule); border-radius:8px; padding:16px; }
+.vault-transfer-disclosure > summary { cursor:pointer; font:600 15px var(--sans); }
+.vault-transfer-disclosure[open] > summary { margin-bottom:18px; }
+#archives-panel .group-row td { padding-top:22px; padding-bottom:22px; }
+#archives-panel .row > .actions[hidden], #archives-panel [hidden] { display:none !important; }
+@media (max-width:1100px) {
+  .vault-overview-item { padding:20px; gap:12px; }
+  .vault-overview-item > .ui-icon { width:30px; height:30px; }
+  .vault-project { grid-template-columns:1fr 1fr; gap:16px; }
+}
+@media (max-width:650px) {
+  #archives-panel table { display:block; overflow-x:auto; max-width:100%; }
+  .vault-overview { grid-template-columns:1fr; }
+  .vault-overview-item + .vault-overview-item { border-left:0; border-top:1px solid var(--rule); }
+  .vault-project { grid-template-columns:1fr; gap:10px; }
+  .vault-project-details { margin-left:0; }
+  .vault-project-toggle { justify-self:start; }
+}