/* Vault in the Pikel admin's design: the same cobalt signal and cool ink ramps, Hanken
   Grotesk for text, Space Grotesk for headings, JetBrains Mono for keys, the same sidebar,
   sticky page header, tab strips, toolbars, table cards and object editor. Values follow
   the Pikel admin theme tokens; the dark theme is Vault's own, built on the same ramps.
   Fonts are bundled (SIL OFL): the CSP allows only this site. */
@font-face { font-family: "Hanken Grotesk"; font-weight: 400 800; font-display: swap; src: url("/static/fonts/HankenGrotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400 800; font-display: swap; src: url("/static/fonts/HankenGrotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/SpaceGrotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/SpaceGrotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/JetBrainsMono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/JetBrainsMono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Canvas, surfaces and lines */
  --bg: #f4f6f8; --paper: #ffffff; --subtle: #fbfcfd; --chip: #edf0f3;
  --line: #e6eaef; --line-subtle: #edeff3; --field: #cfd6de; --field-soft: #dce2e9;
  /* Ink ramp */
  --ink: #11151d; --ink-700: #2a3340; --ink-600: #3d4858; --muted: #5a6675; --ink-400: #7c8896; --ink-300: #a4aebb; --disabled: #a1a7b0;
  /* Signal (cobalt primary) */
  --primary: #2e5bff; --primary-600: #1f45e0; --primary-50: #eef2ff; --primary-100: #dbe3ff; --primary-200: #bac8ff;
  --row-selected: #f5f8ff; --on-primary: #ffffff;
  /* States */
  --ok: #066845; --ok-bg: #e3fbf1; --ok-dot: #06a468; --ok-border: #bfe7cf;
  --draft: #8a6a1e; --draft-bg: #f4f1e6;
  --warn: #8a5807; --warn-bg: #fcf1dc; --warn-border: #f0d9a8;
  --danger: #c7363b; --danger-bg: #fdecec; --danger-border: #f3c6c6; --danger-icon: #e5484d; --danger-hover: #c93b40;
  --type-bg: #eef2ff; --type-fg: #1f45e0; --area-bg: #fff6e5; --area-fg: #8a6a1e;
  --dot-off: #d9dce3; --scrim: rgba(11, 14, 20, .55);
  /* Elevation */
  --shadow-card: 0 1px 2px rgba(11, 14, 20, .04);
  --shadow-menu: 0 14px 34px rgba(11, 14, 20, .14);
  --shadow-dialog: 0 24px 64px rgba(11, 14, 20, .3);
  --shadow-bar: 0 10px 28px rgba(11, 14, 20, .22);
  --shadow-primary: 0 4px 12px rgba(46, 91, 255, .28);
  --ring: 0 0 0 3px rgba(46, 91, 255, .14);
  /* Type and shape */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-card: 14px; --r-panel: 12px; --r-control: 9px; --r-toolbar: 12px; --r-menu: 13px; --r-icon: 10px; --r-modal: 18px;
  --side-w: 264px; --gutter: 36px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1016; --paper: #151a22; --subtle: #1a2029; --chip: #222a35;
    --line: #262d38; --line-subtle: #20262f; --field: #38414e; --field-soft: #303844;
    --ink: #e8ecf1; --ink-700: #d0d7e0; --ink-600: #bcc5d0; --muted: #9aa5b3; --ink-400: #808c9b; --ink-300: #5f6b7a; --disabled: #6b7584;
    --primary: #5b7cff; --primary-600: #9db0ff; --primary-50: #18213f; --primary-100: #212d57; --primary-200: #3a4c9e;
    --row-selected: #161f3a; --on-primary: #ffffff;
    --ok: #4fd39a; --ok-bg: #0f2a1f; --ok-dot: #2fbf7f; --ok-border: #1d4a37;
    --draft: #dcb664; --draft-bg: #2a2417;
    --warn: #e6b65a; --warn-bg: #2c2414; --warn-border: #4a3a1a;
    --danger: #ff7b7f; --danger-bg: #2e1517; --danger-border: #522428; --danger-icon: #ff6b70; --danger-hover: #e5484d;
    --type-bg: #18213f; --type-fg: #9db0ff; --area-bg: #2a2417; --area-fg: #dcb664;
    --dot-off: #3a4350; --scrim: rgba(0, 0, 0, .65);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-menu: 0 14px 34px rgba(0, 0, 0, .5);
    --shadow-dialog: 0 24px 64px rgba(0, 0, 0, .6);
    --shadow-bar: 0 10px 28px rgba(0, 0, 0, .5);
    --shadow-primary: 0 4px 12px rgba(91, 124, 255, .3);
    --ring: 0 0 0 3px rgba(91, 124, 255, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1016; --paper: #151a22; --subtle: #1a2029; --chip: #222a35;
  --line: #262d38; --line-subtle: #20262f; --field: #38414e; --field-soft: #303844;
  --ink: #e8ecf1; --ink-700: #d0d7e0; --ink-600: #bcc5d0; --muted: #9aa5b3; --ink-400: #808c9b; --ink-300: #5f6b7a; --disabled: #6b7584;
  --primary: #5b7cff; --primary-600: #9db0ff; --primary-50: #18213f; --primary-100: #212d57; --primary-200: #3a4c9e;
  --row-selected: #161f3a; --on-primary: #ffffff;
  --ok: #4fd39a; --ok-bg: #0f2a1f; --ok-dot: #2fbf7f; --ok-border: #1d4a37;
  --draft: #dcb664; --draft-bg: #2a2417;
  --warn: #e6b65a; --warn-bg: #2c2414; --warn-border: #4a3a1a;
  --danger: #ff7b7f; --danger-bg: #2e1517; --danger-border: #522428; --danger-icon: #ff6b70; --danger-hover: #e5484d;
  --type-bg: #18213f; --type-fg: #9db0ff; --area-bg: #2a2417; --area-fg: #dcb664;
  --dot-off: #3a4350; --scrim: rgba(0, 0, 0, .65);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-menu: 0 14px 34px rgba(0, 0, 0, .5);
  --shadow-dialog: 0 24px 64px rgba(0, 0, 0, .6);
  --shadow-bar: 0 10px 28px rgba(0, 0, 0, .5);
  --shadow-primary: 0 4px 12px rgba(91, 124, 255, .3);
  --ring: 0 0 0 3px rgba(91, 124, 255, .25);
  color-scheme: dark;
}

/* ─── Base ─────────────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--primary-100); color: var(--ink); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
img { max-width: 100%; }
code { font: 500 12.5px var(--font-mono); color: var(--type-fg); background: var(--type-bg); padding: 1px 6px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.15em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ─── Shell: sidebar, sticky page header, canvas ──────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }
.side { flex: none; width: var(--side-w); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; background: var(--paper); border-right: 1px solid var(--line); padding: 26px 14px 20px; transition: width .18s ease; z-index: 6; }
.side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 0 10px 20px; }
.brand { display: grid; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-name { font: 700 21px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.side-toggle { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -4px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.side-toggle:hover { background: var(--bg); }
.side-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.side-nav { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; display: grid; align-content: start; gap: 18px; }
.nav-group { display: grid; gap: 2px; }
.nav-head { margin: 0; padding: 0 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-300); }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: var(--ink-700); text-decoration: none; font-size: 14.5px; font-weight: 500; line-height: 1.43; }
.nav-item:hover { background: var(--bg); text-decoration: none; }
.nav-item .i { font-size: 20px; color: var(--muted); }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-count { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--chip); color: var(--muted); line-height: 1.43; }
.nav-count.due { background: var(--primary); color: var(--on-primary); }
/* Read out and copied with the number ("3 due"), but not drawn: the pill shows the number alone. */
.said { font-size: 0; }
.nav-item[aria-current="page"] { background: var(--primary-50); color: var(--primary-600); font-weight: 700; }
.nav-item[aria-current="page"]:hover { background: var(--primary-100); }
.nav-item[aria-current="page"] .i { color: var(--primary); }
.nav-item[aria-current="page"] .nav-count { background: var(--paper); color: var(--primary-600); }
/* Folded to its icons: the brand, headings, labels and counts go; a dot keeps reminders visible. */
.side-collapsed { --side-w: 76px; }
.side-collapsed .side { padding-left: 8px; padding-right: 8px; }
.side-collapsed .side-head { justify-content: center; padding: 0 0 20px; }
.side-collapsed .brand, .side-collapsed .nav-head, .side-collapsed .nav-label, .side-collapsed .nav-count:not(.due) { display: none; }
.side-collapsed .nav-item { justify-content: center; gap: 0; position: relative; }
.side-collapsed .nav-count.due { position: absolute; top: 6px; right: 12px; width: 8px; height: 8px; padding: 0; font-size: 0; }

/* Outside the house, on a work's page: three reaches to choose from, and what stays home. */
.reach-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reach-opt { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.reach-opt:hover { border-color: var(--primary-200); background: var(--subtle); }
.reach-opt .i { font-size: 20px; color: var(--muted); }
.reach-opt strong { font-size: 14.5px; }
.reach-opt span { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--muted); }
.reach-opt.on { border-color: var(--primary); background: var(--primary-50); box-shadow: var(--ring); cursor: default; }
.reach-opt.on .i, .reach-opt.on strong { color: var(--primary-600); }
.reach-opt:disabled { opacity: 1; }
.reach-rule { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.reach-says { margin: 16px 0 0; font-size: 14px; color: var(--ink-700); }
.reach-card .actions { margin: 16px 0 0; }
.keep-home { margin-top: 16px; border-top: 1px solid var(--line-subtle); padding-top: 14px; }
.keep-home > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.keep-home .badge { margin-left: 6px; }
.keep-list { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.keep-list label.check { align-items: center; }
.keep-list img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex: none; }
.keep-list .hint { display: block; font-size: 12px; }
label.check.always { color: var(--muted); }
@media (max-width: 760px) { .reach-choice { grid-template-columns: 1fr; } }

/* Works: a box on each row, and a bar to keep the chosen works home. */
.picks .list-head, .picks .grid.as-list > li { grid-template-columns: 18px var(--cols) 34px; }
.picks .grid.as-list > li { grid-template-columns: 18px minmax(0, 1fr) 34px; }
.list-head .c-pick, .row-pick { margin: 0; }
.row-pick, .list-head input { width: 16px; height: 16px; accent-color: var(--primary); }
.bulk-bar { position: sticky; bottom: 16px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-bar); }
.bulk-bar .bulk-count { font-weight: 700; }
.bulk-bar .hint { flex: 1 1 220px; }

/* Administration → Users. */
.users-page { display: grid; gap: 18px; }
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.users-table th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.users-table td { padding: 12px 10px; border-bottom: 1px solid var(--line-subtle); vertical-align: middle; }
.users-table tr.removed td { color: var(--muted); }
.user-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 50%; background: var(--primary-50); color: var(--primary-600); font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.user-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.user-form select { width: auto; padding: 7px 34px 7px 10px; font-size: 13.5px; }
.invite-link .link-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 0 0 12px; }
.invite-link .link-row .link-text { flex: 1 1 320px; min-width: 0; }
.copy-link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.copy-link.copied { background: var(--ok); }
.invite-link .link-text { display: block; padding: 12px 14px; border-radius: var(--r-control); background: var(--subtle); border: 1px solid var(--line); font: 13px/1.5 var(--font-mono); word-break: break-all; cursor: text; user-select: all; }
ul.invites { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
ul.invites li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
ul.invites form { margin: 0 0 0 auto; }

/* Configuration → Outside access. */
.outside-settings { display: grid; gap: 18px; }
.outside-settings .form { display: grid; gap: 18px; }
.door-card { display: flex; gap: 16px; align-items: flex-start; }
.door-card > .i { font-size: 28px; color: var(--primary); flex: none; }
.door-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.reach-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reach-count { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; }
.reach-count:hover { border-color: var(--primary-200); text-decoration: none; }
.reach-count .i { font-size: 20px; color: var(--primary); align-self: center; }
.reach-count strong { font: 700 26px/1 var(--font-display); }
.reach-count span { grid-column: 2; font-size: 13px; color: var(--muted); }
.home-fields { border: 0; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.home-fields legend { grid-column: 1 / -1; float: left; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; margin: 0 0 8px; font-weight: 700; font-size: 13px; color: var(--ink-600); }
.lock-all { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; text-transform: none; letter-spacing: normal; }
.lock-all .button.small { padding: 4px 10px; font-size: 12.5px; gap: 5px; }
.lock-all .button .i { font-size: 15px; }
.lock-count { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.lock-count.some { color: var(--primary); }
.badge .i { font-size: 1.1em; margin-right: 3px; }

/* A lock in place of a tick. The box underneath still carries the form's value and lies over
   the lock, so a click on the lock toggles it. Ticked is shut, except for what an anonymous
   work shows (.shows), where ticked is open. Shut is blue: it stays home. */
label.lock { position: relative; cursor: pointer; }
label.lock input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; opacity: 0; margin: 0; cursor: pointer; }
label.lock .lk { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--paper); color: var(--muted); transition: background .15s, color .15s, border-color .15s; }
label.lock .lk .i { grid-area: 1 / 1; font-size: 17px; }
label.lock .lk-shut { display: none; }
label.lock:not(.shows) input:checked + .lk, label.lock.shows input:not(:checked) + .lk { background: var(--primary-50); border-color: var(--primary); color: var(--primary); }
label.lock:not(.shows) input:checked + .lk .lk-shut, label.lock.shows input:not(:checked) + .lk .lk-shut { display: block; }
label.lock:not(.shows) input:checked + .lk .lk-open, label.lock.shows input:not(:checked) + .lk .lk-open { display: none; }
label.lock:hover input:not(:disabled) + .lk { border-color: var(--primary); }
label.lock input:focus-visible + .lk { box-shadow: var(--ring); }
label.lock input:disabled, label.lock.always { cursor: default; }
label.lock input:disabled + .lk { opacity: .6; }

/* Outside access is long: its Save stays in view, and says when the locks are not saved yet. */
.form > .actions.save-bar { justify-self: stretch; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 -4px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 -6px 20px rgba(15, 23, 42, .08); }
.save-bar { padding-right: 150px; } /* clear of the Chat button */
.save-bar .button { order: -2; }
.save-bar .unsaved { order: -1; font-size: 13px; font-weight: 600; color: var(--primary); }
.save-bar .reach-rule { margin: 0 0 0 auto; }
@media (max-width: 640px) { .save-bar { padding-right: 16px; } .save-bar .reach-rule { margin: 0; } }
@media (max-width: 640px) { .reach-counts { grid-template-columns: 1fr; } }

/* "See it from outside": the band above a work's page drawn as the outside door shows it. */
.outside-band { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-panel); background: var(--primary-50); border: 1px solid var(--primary-100); color: var(--ink-700); }
.outside-band > .i { font-size: 22px; color: var(--primary); }
.outside-band p { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) { .outside-band { flex-wrap: wrap; } }

/* The outside door: a note under its short menu, and a pill in the page header. */
.side-note { display: flex; gap: 10px; margin: 6px 0 0; padding: 12px; border-radius: var(--r-panel); background: var(--subtle); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.side-note .i { font-size: 18px; color: var(--primary); margin-top: 1px; }
.side-collapsed .side-note span { display: none; }
.door-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--primary-50); color: var(--primary-600); font-size: 13px; font-weight: 600; white-space: nowrap; }
.door-pill .i { font-size: 16px; }
.refused-note { display: flex; gap: 10px; align-items: flex-start; }
.refused-note .i { flex: none; margin-top: 4px; color: var(--muted); }
.entrance-card .door-pill { margin: 0 auto 4px; }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); }
.ph-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ph-title { font-size: 23px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-kicker { font-size: 15px; font-weight: 500; color: var(--disabled); white-space: nowrap; }
.account { position: relative; flex: none; }
.account > summary { list-style: none; }
.account > summary::-webkit-details-marker { display: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer; user-select: none; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 230px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-menu); box-shadow: var(--shadow-menu); display: grid; gap: 2px; }
.menu form { margin: 0; }
.menu-who { margin: 0 0 4px; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; display: grid; }
.menu-who span { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.menu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: var(--r-control); background: none; color: var(--ink-700); font: 500 14px var(--font-body); text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--bg); }
.menu-item .i { font-size: 19px; color: var(--muted); }
.theme-toggle .moon { display: none; }
.theme-toggle[data-next="dark"] .moon { display: inline-block; }
.theme-toggle[data-next="dark"] .sun { display: none; }

main { flex: 1; width: 100%; max-width: 1800px; margin: 0 auto; padding: 28px var(--gutter) 60px; min-width: 0; }

/* ─── Type ─────────────────────────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 14px; }
h3 { font-size: 15px; font-weight: 700; }
.script, .numeral { display: none; }
.display-title { display: block; }
.kicker { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.5; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
.prose { white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.empty { color: var(--muted); font-size: 14px; margin: 0; }
.warn { color: var(--warn); }
.page-head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 22px; }
.page-head h1 { order: 0; }
.page-head .kicker { order: 1; }
.page-head > :not(h1):not(.kicker) { order: 2; }
.vg-head { font: 700 15px/1.35 var(--font-display); letter-spacing: -.005em; color: var(--ink); margin: 22px 0 10px; }
.vg-head .hint { font: 400 13px var(--font-body); }
.panel-title { font: 700 12.5px/1.4 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.section-intro { margin: 0 0 14px; }
.section-intro h2 { font-size: 18px; margin: 0; }
.section-intro p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ref { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }

/* ─── Buttons ──────────────────────────────────────────────────────────────────────────────── */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--primary); border-radius: var(--r-toolbar); background: var(--primary); color: var(--on-primary); font: 600 14px/1.3 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-primary); transition: background-color .15s, border-color .15s, box-shadow .15s; }
.button:hover { background: var(--primary-600); border-color: var(--primary-600); text-decoration: none; }
:root[data-theme="dark"] .button:not(.secondary):not(.danger):hover { background: #4a69f0; border-color: #4a69f0; }
.button .i { font-size: 18px; }
.button.secondary { background: var(--paper); border-color: var(--line); color: var(--ink-700); box-shadow: none; }
.button.secondary:hover { background: var(--bg); border-color: var(--field); }
.button.danger { background: var(--danger-icon); border-color: var(--danger-icon); color: #fff; box-shadow: none; }
.button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.button.small { padding: 7px 13px; font-size: 13.5px; border-radius: var(--r-control); }
.button.block { width: 100%; }
.link { display: inline; padding: 0; border: 0; background: none; color: var(--primary); font: 600 13.5px var(--font-body); cursor: pointer; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: var(--danger); }
button:disabled, .button:disabled { opacity: .5; cursor: default; box-shadow: none; }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions form { margin: 0; }
.actions > a:not(.button) { font-weight: 600; font-size: 13.5px; }

/* ─── Forms ────────────────────────────────────────────────────────────────────────────────── */
input, textarea, select { width: 100%; min-width: 0; font: 400 13.5px/1.5 var(--font-body); color: var(--ink); background: var(--paper); border: 1px solid var(--field); border-radius: var(--r-control); padding: 9px 11px; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--ink-300); opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: var(--ink-300); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--ink-300); }
select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea { resize: vertical; }
input[type="file"] { padding: 7px; background: var(--subtle); font-size: 13px; }
input[type="file"]::file-selector-button { font: 600 13px var(--font-body); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink-700); padding: 6px 12px; margin-right: 10px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { appearance: none; width: 20px; height: 20px; padding: 0; flex: none; margin: 0; border: 2px solid var(--field); border-radius: 6px; background: var(--paper); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; box-shadow: none; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--primary); border-color: var(--primary); }
input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: translateY(-1px) rotate(45deg); }
input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--ring); }
.form { display: grid; gap: 14px; }
.form > .button, .form > button, .upload > .button, .form > .actions { justify-self: start; }
.form label, .upload label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 0; }
.form label.check, label.check { flex-direction: row; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-700); }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > label { flex: 1 1 120px; }
.row > label.grow { flex: 3 1 220px; }
fieldset { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 16px 16px; }
legend { font: 700 12.5px/1.4 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
fieldset.types, fieldset.ffield.choices { display: flex; flex-wrap: wrap; gap: 10px 20px; }
fieldset.ffield.choices { grid-column: 1 / -1; }
fieldset.costs, .owner-fields { display: grid; gap: 12px; background: var(--subtle); }
.flabel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.status { min-height: 1.5em; color: var(--muted); font-size: 13.5px; margin: 0; }

/* ─── Cards, notices, pills ────────────────────────────────────────────────────────────────── */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; box-shadow: var(--shadow-card); }
.card > h2:first-child { margin-bottom: 14px; }
section > .card + .card, .card + .card, main > .card { margin-top: 14px; }
.narrow { max-width: 720px; margin: 0 auto; }
.narrow .form.card { margin-top: 0; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; font-size: 13.5px; font-weight: 500; border: 1px solid transparent; }
.notice::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: currentColor; }
.notice.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.notice.error, .page-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.live-notice, .notice.live-notice { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.badge { display: inline-block; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12.5px/24px var(--font-body); background: var(--chip); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.badge:first-letter { text-transform: uppercase; }
.badge.active { background: var(--ok-bg); color: var(--ok); }
.badge.draft { background: var(--draft-bg); color: var(--draft); }
.badge.archived, .badge.gone, .badge.threat { background: var(--danger-bg); color: var(--danger); }
.badge.hidden { background: var(--warn-bg); color: var(--warn); }
.badge.standing { background: var(--chip); color: var(--ink-600); }
/* Reach: how far a work goes beyond the house. Public works carry no badge. */
.badge.reach-home { background: var(--type-bg); color: var(--type-fg); }
.badge.reach-anonymous { background: var(--area-bg); color: var(--area-fg); }
.lvl { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 11px/1 var(--font-body); vertical-align: middle; background: var(--chip); color: var(--muted); }
.lvl.level2 { background: var(--area-bg); color: var(--area-fg); }
.lvl.owner { background: var(--type-bg); color: var(--type-fg); }
.kv { display: inline-block; font-size: 12px; color: var(--muted); margin: 0 10px 0 0; }
.entered { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-400); }

/* ─── Tabs and toolbars (the Objects workspace) ────────────────────────────────────────────── */
.tabs { display: flex; gap: 28px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tabs a { display: flex; align-items: baseline; gap: 6px; padding: 12px 2px; margin-bottom: -1px; border-bottom: 2.5px solid transparent; color: var(--muted); font-size: 15.5px; font-weight: 600; text-decoration: none; transition: color .12s, border-color .12s; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--primary); }
/* How far works go beyond the house: small links at the tab strip's right end. */
.tabs .reach-filter { margin-left: auto; align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.reach-filter .i { font-size: 17px; color: var(--muted); margin-right: 4px; }
.tabs .reach-filter a.rf { padding: 5px 10px; margin: 0; border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tabs .reach-filter a.rf:hover { background: var(--chip); color: var(--ink); }
.tabs .reach-filter a.rf[aria-current="true"] { background: var(--primary-50); color: var(--primary-600); }
.tab-count { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.tabs a[aria-current="page"] .tab-count { color: var(--primary); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.tools .search { display: contents; }
.tools .spacer { flex: 1 1 auto; }
.tools .print-links { margin: 0; }
.search-field { position: relative; flex: 1 1 220px; min-width: 200px; display: flex; align-items: center; }
.search-field .i { position: absolute; left: 14px; font-size: 18px; color: var(--ink-300); pointer-events: none; }
.search-field input, .tools select, .people-search input, .people-search select { border-color: var(--line); border-radius: var(--r-toolbar); font-size: 14.5px; padding: 12px 14px; background-color: var(--paper); }
.search-field input { padding-left: 42px; }
.tools select { width: auto; flex: 0 1 auto; max-width: 12em; font-size: 14px; padding-right: 36px; }
.search-field input:hover, .tools select:hover { border-color: var(--field); }
.search-field input:focus, .tools select:focus { border-color: var(--primary-200); box-shadow: 0 0 0 3px rgba(46, 91, 255, .1); }
.tools .button { padding: 12px 18px; }
.tools .button.add { padding: 12px 20px; font-size: 14.5px; }
.view-switch { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-toolbar); background: var(--paper); }
.view-switch a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--muted); }
.view-switch a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.view-switch a.on { background: var(--primary-50); color: var(--primary); }
.view-switch .i { font-size: 20px; }
.bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.people-search { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.people-search input { flex: 3 1 260px; width: auto; }
.people-search select { flex: 1 1 160px; width: auto; }

/* The table card: the Objects table's grid rows inside one white card. */
.table-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.table-scroll { overflow-x: auto; }
.list-head, .grid.as-list > li { --cols: 96px 40px minmax(180px, 1fr) minmax(120px, 220px) 170px; min-width: 760px; }
.list-head { display: grid; grid-template-columns: var(--cols) 34px; gap: 14px; align-items: center; padding: 14px 22px; background: var(--subtle); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.list-head .c-act { text-align: right; }
.grid { list-style: none; margin: 0; padding: 0; position: relative; }
.grid.as-list > li { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 14px; align-items: center; padding: 16px 22px; border-top: 1px solid var(--line-subtle); background: var(--paper); }
.grid.as-list > li:first-child { border-top: 0; }
.grid.as-list > li:hover { background: var(--subtle); }
.as-list .tile { display: grid; grid-template-columns: var(--cols); gap: 14px; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
.as-list .tile:hover { text-decoration: none; }
.as-list .tile > * { min-width: 0; }
.as-list .tile .ref { font-size: 15px; font-weight: 600; }
.as-list .tile img, .as-list .tile .nophoto { width: 40px; height: 40px; border-radius: var(--r-control); object-fit: cover; background: var(--chip); display: grid; place-items: center; color: var(--ink-300); font-size: 17px; }
.c-work { display: grid; }
.c-work strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-list .tile:hover strong { color: var(--primary); }
.c-work .by { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-list .c-medium { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row-action { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper); color: var(--primary); transition: background-color .12s, border-color .12s; }
.row-action:hover { background: var(--primary-50); border-color: var(--primary-200); text-decoration: none; }
.row-action .i { font-size: 17px; }
.row-action.off { visibility: hidden; }
.empty-state { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--muted); }
.empty-state > .i { font-size: 60px; color: var(--field); margin-bottom: 6px; }
.empty-state h2 { font-size: 20px; margin: 0; }
.list-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 0 4px; }
.list-foot .hint { font-size: 14px; }
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; padding: 8px 12px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-icon); background: var(--paper); color: var(--ink-600); font-size: 14px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.pager a:hover { background: var(--bg); text-decoration: none; }
.pager a[rel], .pager .off { padding: 8px 18px; }
.pager [aria-current="page"] { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary-600); }
.pager .gap { border-color: transparent; background: none; min-width: 0; padding: 8px 4px; }
.pager .off { opacity: .5; }

/* Tiles: the same works as cards. */
.grid:not(.as-list) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.grid:not(.as-list) .tile { display: grid; height: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.grid:not(.as-list) .tile:hover { border-color: var(--primary-200); box-shadow: var(--shadow-menu); transform: translateY(-2px); }
.grid:not(.as-list) .tile img, .grid:not(.as-list) .tile .nophoto { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--subtle); border-bottom: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-300); font-size: 34px; }
.meta { display: grid; gap: 2px; padding: 14px 16px 16px; min-width: 0; }
.meta strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta .by { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.tile-foot .ref { font-size: 13px; margin-right: auto; }

/* ─── Data tables ──────────────────────────────────────────────────────────────────────────── */
main table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); font-size: 13.5px; overflow: hidden; }
main th { text-align: left; padding: 13px 16px; background: var(--subtle); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; vertical-align: middle; }
main td { padding: 13px 16px; border-top: 1px solid var(--line-subtle); vertical-align: top; }
main tbody tr:first-child td, main thead + tbody tr:first-child td { border-top: 0; }
main tbody tr:hover > td { background: var(--subtle); }
main td strong { font-weight: 600; }
.card table, .card main table { border: 0; box-shadow: none; border-radius: 0; background: none; }
.card th { background: none; padding: 8px 12px 8px 0; }
.card td { padding: 10px 12px 10px 0; }
.table-wrap, .loans-wrap, .quotes { overflow-x: auto; border-radius: var(--r-card); }
.events td:first-child { white-space: nowrap; color: var(--muted); }
.events td:nth-child(3) { font-weight: 600; color: var(--primary-600); }
.events tr.warn td:nth-child(3) { color: var(--danger); }
.field-table code { font-size: 12px; }
.field-table tr:target td { background: var(--primary-50); }
.field-table .flags span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin: 0 4px 4px 0; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: 12px; font-weight: 600; }
.field-table tr.overdue td:first-child { color: var(--danger); font-weight: 600; }
table .num, table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.compare td { vertical-align: middle; }
table.loans td.days { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.by-year { max-width: 34em; }
table.shipping-quotes tr.chosen td { font-weight: 600; background: var(--row-selected); }

/* ─── A work: the object editor laid out on the page ───────────────────────────────────────── */
.missing-banner { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border: 1px solid var(--danger-border); color: var(--danger); background: var(--danger-bg); padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; font-size: 13.5px; }
.missing-banner strong { font-weight: 700; }
.disposed-banner { border-color: var(--line); color: var(--ink-700); background: var(--paper); }
.work-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 26px; margin: 0 0 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.work-head:has(+ .editor) { margin-bottom: 0; border-radius: var(--r-modal) var(--r-modal) 0 0; box-shadow: none; }
.detail:not(.editor) .info > .fields { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 6px 22px; }
.wh-main { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 420px; }
.wh-thumb { flex: none; width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--line); background: var(--primary-50); object-fit: cover; display: grid; place-items: center; color: var(--ink-300); font-size: 20px; }
.work-title { min-width: 0; display: grid; gap: 2px; }
.work-title h1 { font-size: 19px; letter-spacing: -.01em; }
.work-title .kicker { font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.work-title .kicker .badge { height: 20px; line-height: 20px; font-size: 11.5px; padding: 0 8px; }
.work-title .sub { margin: 0; font-size: 13.5px; color: var(--ink-700); }
.work-head .actions { gap: 8px; }
.work-head .button { padding: 9px 16px; font-size: 13.5px; border-radius: var(--r-control); }
.editor { --rail-w: 246px; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); background: linear-gradient(to right, var(--subtle) calc(var(--rail-w) - 1px), var(--line) calc(var(--rail-w) - 1px), var(--line) var(--rail-w), var(--bg) var(--rail-w)); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-modal) var(--r-modal); overflow: clip; }
.rail { position: sticky; top: 79px; align-self: start; max-height: calc(100vh - 79px); overflow-y: auto; padding: 12px 8px; counter-reset: rail; }
.rail a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 2px; border-radius: 9px; color: var(--muted); font-size: 13px; text-decoration: none; }
.rail a::before { counter-increment: rail; content: counter(rail, decimal-leading-zero); width: 18px; flex: none; font: 10px var(--font-mono); color: var(--ink-300); }
.rail a:hover { background: var(--bg); text-decoration: none; }
.rail a.on { background: var(--primary-50); color: var(--primary-600); font-weight: 700; }
.rail a.on::before { color: var(--primary-600); }
.rail-label { flex: 1; min-width: 0; }
.rail-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dot-off); }
.rail-dot.filled { background: var(--ok-dot); }
.rail-dot.locked { background: var(--ink-300); }
.editor-body, .editor-body.info { padding: 24px 30px 60px; min-width: 0; display: grid; gap: 30px; }
.part { scroll-margin-top: 96px; min-width: 0; }
.part > .card + .card, .part > .card + details, .part > section + section, .part > section + details { margin-top: 14px; }
.editor .card { border-radius: var(--r-panel); }
.public-records, .related, .value-groups, .history { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 22px; }
.public-records > .vg-head:first-child, .related > .vg-head:first-child, .value-groups > .vg-head:first-child { margin-top: 0; }
.photos { display: grid; gap: 18px; }
.cover { margin: 0; }
.cover img { width: 100%; max-height: 560px; object-fit: contain; display: block; background: var(--subtle); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px; }
.cover img.steps { cursor: pointer; }
.cover.nophoto { aspect-ratio: 16 / 7; display: grid; place-items: center; border: 1px dashed var(--field); border-radius: var(--r-panel); color: var(--muted); }
figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.thumbs li { display: grid; gap: 6px; align-content: start; }
.thumbs .thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--subtle); transition: border-color .15s, box-shadow .15s; }
.thumbs .thumb:hover img { border-color: var(--primary-200); }
.thumbs li.is-viewing img { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); }
.kind { font-size: 12px; font-weight: 600; color: var(--muted); }
.photo-actions { display: flex; gap: 12px; }
.photo-actions form { margin: 0; }
.photo-actions .link { font-size: 12.5px; }
.ai { font-size: 12.5px; line-height: 1.45; margin: 0; color: var(--muted); }
.ai .badge { height: 20px; line-height: 20px; font-size: 11px; margin-right: 4px; background: var(--type-bg); color: var(--type-fg); }
.upload { display: grid; gap: 12px; }
.photos .upload { background: var(--subtle); border: 1px dashed var(--field); border-radius: var(--r-panel); box-shadow: none; padding: 16px 18px; }
.info { display: grid; gap: 14px; align-content: start; min-width: 0; }
.detail:not(.editor) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 22px; align-items: start; }
.fields { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); margin: 0; }
.fields dt, .fields dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line-subtle); }
.fields dt:first-of-type, .fields dt:first-of-type + dd { border-top: 0; }
.fields dt { padding-right: 22px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fields dd { font-size: 14px; }
.fields dd a { font-weight: 500; }
p.translations { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-subtle); }
.private { position: relative; }
.private.open { border-color: var(--primary-200); box-shadow: 0 0 0 3px var(--primary-50); }
.private > .panel-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--ink-300); vertical-align: 1px; }
.private.open > .panel-title { color: var(--primary-600); }
.private.open > .panel-title::after { background: var(--ok-dot); }
.private > p:not(.hint):not(.status) { font-size: 14px; margin: 0 0 14px; max-width: 62ch; }
.private .vg-head:first-of-type { margin-top: 18px; }
.private-facts { margin-bottom: 8px; }
details.card summary, details.add-record summary, .fgroup summary, .history details summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--ink); }
details > summary::-webkit-details-marker { display: none; }
details.card summary::before, details.add-record summary::before, .fgroup summary::before, .history details summary::before { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; margin: 0 4px 0 2px; flex: none; }
details[open] > summary::before { transform: rotate(45deg) !important; }
details.card[open] summary { margin-bottom: 16px; }
details[data-live="remove"] summary { color: var(--danger); }
details.add-record { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px 18px; }
details.add-record summary { color: var(--primary); }
details.add-record[open] summary { margin-bottom: 14px; }
.card details.add-record { background: var(--subtle); margin: 14px 0 0; }
.history .timeline { margin-bottom: 12px; }
.history details summary { color: var(--muted); padding: 6px 0; }

/* Lists of rows inside cards */
.timeline, .versions { margin: 0 0 14px; padding: 0; list-style: none; display: grid; font-size: 13.5px; }
.timeline li, .versions li { padding: 10px 0; border-top: 1px solid var(--line-subtle); }
.timeline li:first-child, .versions li:first-child { border-top: 0; }
.timeline time, .versions time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
.timeline strong { font-weight: 700; color: var(--primary-600); }
.timeline li.warn strong { color: var(--danger); }
ol.timeline.records { gap: 0; }
ol.timeline.records li { padding: 12px 0; }
ol.timeline.records strong { color: var(--ink); }
dl.record-values { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 3px 16px; margin: 8px 0 0; font-size: 13.5px; }
dl.record-values dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
dl.record-values dd { margin: 0; }
.rfields { display: grid; gap: 14px; }
.fgroup { border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px 18px; background: var(--paper); }
.fgroup summary .hint { font-weight: 400; margin-left: 4px; }
.fgroup[open] summary { margin-bottom: 14px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fgrid .ffield:has(textarea) { grid-column: 1 / -1; }
.value-groups .vg-head { margin-top: 18px; }
ul.cost-lines { list-style: none; padding: 0; margin: 0 0 16px; display: grid; font-size: 13.5px; }
ul.cost-lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--line-subtle); }
ul.cost-lines li:first-child { border-top: 0; }
ul.cost-lines .num { text-align: right; margin-left: auto; }
ul.cost-lines li.total { font-weight: 700; border-top: 1px solid var(--line); }
.sale-lines li.profit .num { font-weight: 700; color: var(--ok); }
ul.reminders, ul.related-list, ul.documents { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 0; }
ul.reminders li, ul.related-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line-subtle); }
ul.reminders li:first-child, ul.related-list li:first-child { border-top: 0; }
ul.reminders time { font-weight: 700; color: var(--primary-600); font-variant-numeric: tabular-nums; }
ul.reminders form, ul.related-list form { display: inline; margin: 0; }
ul.documents li { padding: 6px 0; }
ul.planned { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 12px; }
ol.chain { padding-left: 22px; margin: 0 0 16px; display: grid; gap: 10px; font-size: 13.5px; }
ol.chain li::marker { color: var(--ink-300); font-weight: 600; }
ol.chain.stays li.transit { color: var(--muted); }
ol.chain.stays li.on-show strong { color: var(--primary-600); }
.time-on-show { font-size: 13.5px; }

/* Waiting for approval: the bulk action bar, dark, floating above the page. */
.approvals { display: grid; gap: 10px; padding: 18px var(--gutter) 0; max-width: 1800px; width: 100%; margin: 0 auto; }
.approval { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #11151d; color: #fff; padding: 12px 14px 12px 20px; border-radius: var(--r-card); box-shadow: var(--shadow-bar); }
:root[data-theme="dark"] .approval { background: #262d3a; }
.approval p { margin: 0; font-size: 14px; }
.approval p strong { font-weight: 700; margin-right: 6px; }
.approval .hint { color: rgba(255, 255, 255, .6); }
.approval .link { color: #fff; padding: 7px 12px; border-radius: var(--r-control); background: rgba(255, 255, 255, .1); }
.approval .link:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.approval .button { box-shadow: none; }
.approval.sending { opacity: .6; transition: opacity .2s; }

/* ─── Sign in and set up ───────────────────────────────────────────────────────────────────── */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(46, 91, 255, .08) 0%, rgba(156, 39, 176, .05) 100%), var(--bg); }
.auth::before { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 50%; background: radial-gradient(circle at center, rgba(46, 91, 255, .1) 0%, transparent 70%); pointer-events: none; }
.auth::after { content: ""; position: absolute; bottom: 0; left: 0; width: 40%; height: 40%; background: radial-gradient(circle at center, rgba(156, 39, 176, .08) 0%, transparent 70%); pointer-events: none; }
.auth main { position: relative; z-index: 1; flex: none; width: 100%; max-width: 480px; padding: 0; }
.entrance-card, .auth .narrow { background: var(--paper); border: 1px solid rgba(46, 91, 255, .15); border-radius: 33px; padding: 40px; box-shadow: 0 8px 32px rgba(0, 0, 0, .1); transition: box-shadow .3s ease; display: grid; justify-items: center; text-align: center; }
.entrance-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, .15); }
.entrance-icon { width: 80px; height: 80px; border-radius: 33px; display: grid; place-items: center; margin-bottom: 24px; background: linear-gradient(135deg, var(--primary) 0%, rgba(46, 91, 255, .8) 100%); box-shadow: 0 8px 24px rgba(46, 91, 255, .3); color: #fff; }
.entrance-icon .i { font-size: 40px; }
.entrance-card h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.entrance-card .lead { margin: 0 0 32px; font-size: 15px; color: var(--muted); }
.entrance-card .button.block { padding: 12px; border-radius: 27.5px; font-size: 15px; box-shadow: 0 6px 20px rgba(46, 91, 255, .3); transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1); }
.entrance-card .button.block:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(46, 91, 255, .4); }
.entrance-card .status { margin-top: 14px; }
.status[data-tone="refused"], .status[data-tone="failed"] { color: var(--danger); font-weight: 600; }
.entrance-card .status[data-tone="refused"], .entrance-card .status[data-tone="failed"] { background: var(--danger-bg); border: 1px solid var(--danger-border);
  border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }
.entrance-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); max-width: 34ch; }
.auth .narrow { justify-items: stretch; text-align: left; }
.auth .narrow .actions { justify-content: flex-start; margin-top: 16px; }

/* ─── Live updates ─────────────────────────────────────────────────────────────────────────── */
.grid > li.leaving { position: absolute; margin: 0; z-index: 1; pointer-events: none; }
@keyframes emerge { 0% { opacity: 0; transform: translateY(12px) scale(.97); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes live-ring { 0% { box-shadow: 0 0 0 2px var(--primary), 0 0 24px rgba(46, 91, 255, .35); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; } }
.emerge { animation: emerge .8s cubic-bezier(.2, .8, .2, 1) both; }
.emerge > .tile { animation: live-ring 1.8s .5s ease-out both; }
.approval.emerge { animation: emerge .8s cubic-bezier(.2, .8, .2, 1) both, live-ring 1.8s .5s ease-out; }
@keyframes vaporize { 0% { opacity: 1; transform: none; filter: none; } 30% { opacity: 1; filter: saturate(.25) blur(1px); } 100% { opacity: 0; transform: translateY(-20px) scale(1.03); filter: saturate(0) blur(12px); } }
.vaporize > .tile { animation: vaporize 1s cubic-bezier(.5, 0, .75, 0) forwards; }
.mist { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.mist i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--primary); filter: blur(1px); opacity: 0; animation: mist 1.4s var(--d) ease-out forwards; }
@keyframes mist { 0% { opacity: 0; transform: none; } 20% { opacity: .6; } 100% { opacity: 0; transform: translate(var(--dx), -90px) scale(.2); } }
@keyframes fade-out { to { opacity: 0; transform: scale(.97); } }
.fade-out > .tile { animation: fade-out .6s ease forwards; }
.live-glow { position: relative; animation: live-ring 1.9s ease-out; }
.live-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(46, 91, 255, .12) 50%, transparent 62%) no-repeat; background-size: 300% 100%; animation: sweep 1.1s ease-out forwards; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes fresh-row { from { background: var(--primary-100); } to { background: transparent; } }
.fresh-row, .fresh-row > td { animation: fresh-row 2.4s ease-out; }
.toasts { position: fixed; left: 22px; bottom: 22px; z-index: 30; display: grid; gap: 10px; width: min(360px, calc(100vw - 44px)); pointer-events: none; }
.toast { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.45; box-shadow: var(--shadow-menu); animation: emerge .5s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .35s, transform .35s; }
.toast strong { display: block; font: 700 15px/1.3 var(--font-display); color: var(--ink); }
.toast.kind-created, .toast.kind-restored { border-left-color: var(--ok-dot); }
.toast.kind-archived { border-left-color: var(--danger-icon); }
.toast.kind-approval { border-left-color: #e0930b; }
.toast.out { opacity: 0; transform: translateY(8px); }
.toast-by { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .emerge, .approval.emerge, .toast { animation: none; }
  .emerge > .tile, .live-glow { animation: live-ring 1.2s ease-out; }
  .vaporize > .tile, .fade-out > .tile { animation: fade-out .3s ease forwards; }
  .live-glow::after, .mist { display: none; }
  .side, .grid:not(.as-list) .tile { transition: none; }
}

/* ─── Chat: a dialog in the editor's chrome ────────────────────────────────────────────────── */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 20; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; padding: 13px 20px 13px 16px; background: var(--primary); color: #fff; font: 600 14.5px/1 var(--font-body); cursor: pointer; box-shadow: 0 8px 24px rgba(46, 91, 255, .35); }
.chat-fab svg { width: 20px; height: 20px; fill: currentColor; }
.chat-fab:hover { background: var(--primary-600); }
.chat-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
.chat { position: fixed; right: 22px; bottom: 22px; z-index: 20; width: 410px; height: min(680px, calc(100vh - 44px)); display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-modal); box-shadow: var(--shadow-dialog); overflow: hidden; }
.chat.with-steps { width: min(1060px, calc(100vw - 44px)); }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); }
.chat-who { display: grid; min-width: 0; }
.chat-who strong { font: 700 17px/1.3 var(--font-display); letter-spacing: -.01em; }
.chat-status { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.chat-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-dot); }
.chat-tools { display: flex; gap: 6px; flex: none; }
.chat-tool { border: 1px solid var(--field); background: var(--paper); color: var(--ink-600); border-radius: var(--r-control); padding: 7px 12px; font: 600 13px var(--font-body); cursor: pointer; }
.chat-tool:hover { background: var(--bg); }
.chat-tool.close { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-color: var(--line); color: var(--muted); }
.chat-tool.close .i { font-size: 16px; }
.chat-tool[aria-pressed="true"] { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary-600); }
.chat-body { flex: 1; min-height: 0; display: flex; }
.chat-main { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.chat.with-steps .chat-main { flex: none; width: 410px; border-right: 1px solid var(--line); }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.chat-hello { color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; padding: 28px 18px; }
.chat-log .msg { display: flex; flex-direction: column; max-width: 86%; }
.chat-log .from-owner { align-self: flex-end; align-items: flex-end; }
.chat-log .from-vault { align-self: flex-start; align-items: flex-start; }
.chat-log .bubble { padding: 10px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; }
.chat-log .from-owner .bubble { background: var(--primary); border-color: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-log .from-vault .bubble { border-bottom-left-radius: 4px; }
.chat-log .kind-error .bubble { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.chat-log .bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-log .bubble p + p { margin-top: 4px; }
.chat-log .bubble img { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; }
.chat-log .bubble img + p { margin-top: 6px; }
.chat-log .file { font-size: 12.5px; font-weight: 600; }
.chat-log .msg time { font-size: 11px; color: var(--muted); margin: 4px 6px 0; }
.choices { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.choice { border: 1px solid var(--field); background: var(--paper); color: var(--ink-600); border-radius: 8px; padding: 8px 16px; font: 600 13px var(--font-body); cursor: pointer; }
.choice:hover { border-color: var(--primary); color: var(--primary); }
.choice:disabled { opacity: .5; cursor: default; }
.answered { font-size: 12px; color: var(--muted); }
.typing .bubble { display: flex; gap: 4px; padding: 13px 15px; }
.typing .bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: chat-typing 1.2s infinite ease-in-out; }
.typing .bubble span:nth-child(2) { animation-delay: .15s; }
.typing .bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing .bubble span { animation: none; opacity: .6; } }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--paper); }
.chat-form textarea { resize: none; min-height: 42px; max-height: 120px; font-size: 14px; border-radius: 12px; }
.chat-attach { position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--muted); cursor: pointer; }
.chat-attach:hover { color: var(--primary); background: var(--bg); }
.chat-attach:focus-within { outline: 2px solid var(--primary); }
.chat-attach:has(input:disabled) { opacity: .45; cursor: default; }
.chat-attach input { position: absolute; inset: 0; opacity: 0; width: 1px; height: 1px; }
.chat-attach svg, .chat-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--primary); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-primary); }
.chat-send:disabled { opacity: .45; cursor: default; box-shadow: none; }
/* The steps pane is a small terminal: dark in both themes, so the log colours read as they do there. */
.chat-steps { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #0d1014; color: #d0d4da; }
.chat-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #232933; font-size: 12px; color: #8b93a1; }
.chat-steps-head strong { color: #e6e8ec; font-size: 12.5px; font-weight: 700; }
#chat-steps-list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 8px 12px 16px; font: 12px/1.55 var(--font-mono); }
.step { display: grid; grid-template-columns: 12ch 10ch minmax(0, 1fr); column-gap: 8px; padding: 1px 0; }
.step time { color: #5f6672; }
.step-tag { color: var(--c); text-align: center; border-radius: 3px; align-self: start; }
.step-text { overflow-wrap: anywhere; }
.step-kv, .step-why { grid-column: 3; overflow-wrap: anywhere; }
.step-kv { color: #6b7380; }
.step-why { color: #9a9a9a; font-style: italic; }
.step.lvl-highlight .step-tag { background: var(--c); color: #0b0d10; font-weight: 700; }
.step.lvl-highlight .step-text { color: var(--c); font-weight: 700; }
.step.lvl-alert .step-tag { background: #d70000; color: #fff; font-weight: 700; }
.step.lvl-alert .step-text { color: #ff5f5f; font-weight: 700; }

/* ─── Pages ────────────────────────────────────────────────────────────────────────────────── */
/* Fields */
.fields-intro { max-width: 760px; margin-bottom: 18px; font-size: 13.5px; color: var(--muted); }
.add-field { margin-bottom: 18px; }
.add-field h2, .add-person h2 { margin: 0; }
.row.flags { gap: 8px 22px; }
.row.flags > label { flex: 0 1 auto; }
/* People */
.people-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.edit-person summary { color: var(--ink); }
/* Places: the category tree's rows */
ul.place-tree { list-style: none; padding: 16px; margin: 0 0 18px; display: grid; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
ul.place-tree li { padding: 12px 16px; background: var(--subtle); border: 1px solid var(--line); border-radius: 11px; }
ul.place-tree li[class*="depth-"]:not(.depth-0) { border-color: var(--line-subtle); border-radius: 10px; }
ul.place-tree li.depth-1 { margin-left: 28px; } ul.place-tree li.depth-2 { margin-left: 56px; }
ul.place-tree li.depth-3 { margin-left: 84px; } ul.place-tree li.depth-4 { margin-left: 112px; }
ul.place-tree li.depth-5 { margin-left: 140px; } ul.place-tree li.depth-6 { margin-left: 168px; }
ul.place-tree summary { cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
ul.place-tree summary::before { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.place-edit { margin-top: 12px; }
.place-value strong { font-weight: 600; }
.place-tree .check-schedule { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.place-tree details > [data-passkey] { margin-top: 12px; }
.place-tree .place-open { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; }
.place-tree .place-open > * { margin: 0; }
.place-tree .place-actions, .stock-check .place-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.threats { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; margin-left: 6px; }
.place-risk { margin-top: 12px; }
.threats-pick { margin-bottom: 10px; }
ul.contacts li { align-items: flex-start; }
.move-out { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
/* Explore */
.explore { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; margin-top: 6px; }
.facets { display: grid; gap: 18px; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; box-shadow: var(--shadow-card); }
.facet h3 { font: 700 11.5px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.facet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.facet li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.facet li a { color: var(--ink-700); }
.facet a.on { font-weight: 700; color: var(--primary-600); }
.facet a.on::after { content: " ×"; }
.facet .pick { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.facet .pick .box { flex: none; width: 15px; height: 15px; border: 1.5px solid var(--field); border-radius: 4px; background: var(--paper); display: grid; place-items: center; }
.facet .pick:hover .box { border-color: var(--primary-200); }
.facet .pick.on::after { content: none; }
.facet .pick.on .box { background: var(--primary); border-color: var(--primary); }
.facet .pick.on .box::after { content: ""; width: 4px; height: 8px; border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.years .row > label { flex: 1 1 80px; }
.explore-search .search-field { min-width: 0; }
.explore-search .search-field input { width: 100%; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
.sort-by li a { font-size: 13.5px; }
.sort-by a.on::after { content: none; }
.more-filters-row { margin: -4px 0 16px; display: grid; gap: 10px; }
.more-filters > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 600 14px/1 var(--font-body); color: var(--ink-700);
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-toolbar); background: var(--paper); list-style: none; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary:hover { border-color: var(--field); color: var(--primary); }
.more-filters > summary .i { font-size: 18px; color: var(--muted); }
.more-filters[open] > summary { border-color: var(--primary-200); color: var(--primary-600); }
.more-filters[open] { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px; }
.more-filters[open] > summary { margin-bottom: 14px; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.more-grid label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.more-grid select, .more-grid input { width: 100%; max-width: none; font-size: 14px; padding: 10px 12px; border-radius: var(--r-control); }
.more-grid .years-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.more-grid .pick-list { border: 0; padding: 0; margin: 0; min-width: 0; grid-row: span 2; }
.more-grid .pick-list legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 6px; }
.more-grid .pick-scroll { display: grid; gap: 2px; max-height: 168px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-control); padding: 6px; background: var(--paper); }
.more-grid .pick-scroll label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-700); padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.more-grid .pick-scroll label:hover { background: var(--subtle); }
.more-grid .pick-scroll input { width: 15px; height: 15px; margin: 0; padding: 0; accent-color: var(--primary); }
.more-grid .pick-scroll span:not(.hint) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-filters .actions { display: flex; gap: 10px; margin-top: 14px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.filter-chips .chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary-600); background: var(--primary-50);
  border: 1px solid var(--primary-100); border-radius: 999px; padding: 5px 8px 5px 12px; text-decoration: none; }
.filter-chips .chip span { font-size: 15px; line-height: 1; color: var(--primary); }
.filter-chips .chip:hover { border-color: var(--primary-200); }
ul.explore-grid { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
ul.explore-grid.strip { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
ul.explore-grid a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; padding-bottom: 12px; box-shadow: var(--shadow-card); transition: border-color .15s, box-shadow .15s; }
ul.explore-grid a:hover { border-color: var(--primary-200); box-shadow: var(--shadow-menu); }
ul.explore-grid img, ul.explore-grid .noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--subtle); border-bottom: 1px solid var(--line); margin-bottom: 8px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
ul.explore-grid strong, ul.explore-grid .hint { padding: 0 12px; }
ul.explore-grid strong { font-size: 14px; font-weight: 600; }
ul.explore-grid .hint { font-size: 12.5px; }
.print-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }
/* Translations */
.translate-row { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line-subtle); }
/* Stock checks */
ol.check-items { display: grid; gap: 8px; padding-left: 22px; margin: 0 0 22px; }
ol.check-items label { display: flex; flex-direction: row; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink); }
ol.check-items label strong { font-size: 15px; font-weight: 600; }
ul.not-seen { display: grid; gap: 12px; padding: 0; list-style: none; }
ul.not-seen .resolve { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 8px; }
ul.not-seen .resolve .form { display: flex; gap: 10px; align-items: end; flex: 1 1 22em; }
.check-summary { font-size: 15px; font-weight: 500; }
/* Labels: QR codes to cut out and stick on the back of a work or by a door. */
ul.label-sheet { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.print-label { background: #fff; color: #000; border: 1px dashed var(--field); border-radius: var(--r-panel); padding: 14px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.print-label img { width: 132px; height: 132px; image-rendering: pixelated; }
.print-label .label-kind { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #444; }
.print-label .label-name { font: 600 16px/1.25 var(--font-display); }
.print-label .label-detail { font-size: 11.5px; line-height: 1.35; color: #444; }
/* Costs, valuations, insurance */
.shared-costs article.shared { margin-top: 16px; }
.pick-works input[type="search"] { margin-bottom: 8px; }
ul.pick { list-style: none; padding: 6px 12px; margin: 0; max-height: 18em; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper); display: grid; gap: 2px; }
ul.pick label { display: flex; flex-direction: row; gap: 9px; align-items: center; flex-wrap: wrap; padding: 4px 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.value-overview { margin: 18px 0; }
.value-overview .worth-now { font: 600 18px/1.4 var(--font-display); margin: 0 0 12px; }
.value-overview .value-rule .row { align-items: center; gap: 10px; flex-wrap: wrap; }
.value-overview .value-rule label { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.value-overview .value-rule select { width: auto; min-width: 10em; }
.policy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.insurance article.policy, .insurance .card { margin-top: 14px; }
.insurance .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); gap: 14px; }
/* Risk: the salvage list */
.salvage-list { list-style: none; padding: 0; margin: 0; display: grid; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.salvage-list li { display: grid; grid-template-columns: 64px 96px minmax(0, 1fr); gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line-subtle); align-items: start; }
.salvage-list li:first-child { border-top: 0; }
.salvage-list .mark { font: 700 34px/1 var(--font-display); color: var(--primary); }
.salvage-list .mark small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.salvage-list img, .salvage-list .noimg { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; background: var(--subtle); border: 1px solid var(--line); }
.salvage-list dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 6px 0 0; font-size: 13.5px; }
.salvage-list dt { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.salvage-list dd { margin: 0; }
/* Loans */
.loan-panel .loan-where { margin: 0 0 14px; color: var(--muted); }
ol.loan-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
ol.loan-steps li { border-top: 3px solid var(--line); padding-top: 8px; display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
ol.loan-steps li span { font-weight: 600; }
ol.loan-steps li time { font-variant-numeric: tabular-nums; }
ol.loan-steps li.done { border-top-color: var(--primary); color: var(--ink); }
ol.loan-steps li.next { border-top-color: #e0930b; color: var(--ink); }
.loan-step .row, .shipment-actions .row, fieldset.show-works .row { align-items: end; }
.loan-condition { margin-top: 12px; }
section.loans > .card, section.shipments > .card, section.exhibitions > .card, section.disposals > .card { margin-top: 18px; }
/* Shipments */
.shipment-actions { display: grid; gap: 16px; }
article.crate { padding: 12px 0; border-top: 1px solid var(--line-subtle); }
form.add-quote, form.add-crate, form.packing { margin: 12px 0 20px; }
/* Exhibitions */
fieldset.show-works .ref-title { align-self: center; }
.card.research form + form { margin-top: 18px; }
.page-head .print-links { margin-top: 10px; }
.bar .print-links { margin-top: 10px; }
/* Parts, numbers, creators on the form */
.numbers .row > label, .creators .row > label { flex: 1 1 130px; }
.numbers .row > label:first-child { flex: 0 0 184px; }
.creators .row > label:first-child { flex: 0 0 160px; }
fieldset.parts .part { display: grid; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.parts .part > .row:first-child > label:first-child { flex: 0 0 150px; }
.public-records, .related { margin-top: 0; }
.relate-form .row > label:first-child { flex: 0 0 140px; }
.badge.standing + .badge.standing { margin-left: 2px; }

/* ─── Narrow screens ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .list-head, .grid.as-list > li { --cols: 96px 40px minmax(160px, 1fr) 160px; min-width: 0; }
  .list-head .c-medium, .as-list .c-medium { display: none; }
}
@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  .editor { --rail-w: 200px; }
  .editor-body { padding: 20px 20px 48px; }
}
@media (max-width: 900px) {
  .editor { grid-template-columns: minmax(0, 1fr); background: var(--bg); }
  .rail { position: sticky; top: 0; z-index: 4; display: flex; gap: 4px; overflow-x: auto; max-height: none; padding: 8px; background: var(--subtle); border-bottom: 1px solid var(--line); }
  .rail a { flex: none; margin: 0; white-space: nowrap; }
  .rail a::before { display: none; }
  .explore { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .shell { flex-direction: column; }
  .side, .side-collapsed .side { width: auto; height: auto; position: static; padding: 14px 16px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-head { padding: 0 0 10px; }
  .side-toggle { display: none; }
  .side-collapsed .brand { display: grid; }
  .side-nav { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
  .nav-group { display: contents; }
  .nav-head { display: none; }
  .nav-item, .side-collapsed .nav-item { flex: none; gap: 8px; font-size: 14px; padding: 8px 10px; }
  .side-collapsed .nav-label, .side-collapsed .nav-count:not(.due) { display: inline; }
  .page-header { position: static; padding: 14px var(--gutter); }
  .ph-title { font-size: 20px; }
  main { padding: 20px var(--gutter) 48px; }
  .approvals { padding-top: 14px; }
  .work-head { padding: 16px; }
  .editor-body { padding: 16px 14px 40px; }
  .card { padding: 16px; }
  .search-field { min-width: 0; flex-basis: 100%; }
  .tools select { flex: 1 1 0; max-width: none; }
  .tools .spacer { display: none; }
  .list-head, .grid.as-list > li { --cols: 40px minmax(0, 1fr) 110px; min-width: 0; }
  .list-head .c-ref, .list-head .c-medium, .as-list .c-ref, .as-list .c-medium { display: none; }
  .list-head, .grid.as-list > li { padding-left: 14px; padding-right: 14px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .fields dt { padding-bottom: 0; }
  .fields dd { border-top: 0; padding-top: 2px; }
  .chat, .chat.with-steps { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; }
  .chat-body { flex-direction: column; }
  .chat-main { flex: 1 1 auto; min-height: 0; }
  .chat.with-steps .chat-main { width: auto; flex: 1 1 55%; min-height: 0; border-right: 0; }
  .chat-steps { flex: 1 1 45%; min-height: 0; border-top: 1px solid #232933; }
  .step { grid-template-columns: 10ch minmax(0, 1fr); }
  .step time { display: none; }
  .step-kv, .step-why { grid-column: 2; }
  .chat-fab { right: 16px; bottom: 16px; }
  ol.loan-steps { grid-template-columns: minmax(0, 1fr); }
  main table { display: block; overflow-x: auto; }
  .salvage-list li { grid-template-columns: 48px minmax(0, 1fr); }
  .salvage-list img, .salvage-list .noimg { display: none; }
  .entrance-card { padding: 32px 24px; }
}

/* ─── Paper ────────────────────────────────────────────────────────────────────────────────── */
@media print {
  .side, .page-header, .chat-fab, .chat, .toasts, .no-print, .notice, .approvals, .rail { display: none !important; }
  html, body, main, .shell-main { background: #fff !important; color: #000 !important; }
  main { padding: 0; max-width: none; }
  .editor { display: block; border: 0; }
  ol.check-items * { color: #000 !important; }
  ol.check-items li, .salvage-list li { break-inside: avoid; }
  ul.label-sheet { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .print-label { border: 1px dashed #999; border-radius: 0; break-inside: avoid; }
}

/* Roles: one card per role, a row per area with Off · Look · Change. */
.roles-lead { max-width: 75ch; margin: 0 0 18px; color: var(--ink-700); }
.role-card { padding: 0; margin: 0 0 14px; }
.role-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; }
.role-card > summary::-webkit-details-marker { display: none; }
.role-title { display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1.2 var(--font-display); color: var(--ink); }
.role-title .i { color: var(--primary); }
.role-sum { font-size: 13px; color: var(--muted); min-width: 0; }
.role-meta { display: flex; gap: 6px; margin-left: auto; }
.role-card .role-form, .role-card .role-delete { padding: 0 20px 18px; }
.role-card[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.role-name { max-width: 420px; }
.access-table { width: 100%; border-collapse: collapse; }
.access-table tr + tr { border-top: 1px solid var(--line); }
.access-table th[scope="row"] { text-align: left; font-weight: 600; font-size: 14px; color: var(--ink); padding: 12px 18px 12px 0; vertical-align: top;
  text-transform: none; letter-spacing: normal; white-space: normal; background: none; width: 100%; }
.access-table th .hint { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 70ch; }
.access-table td { padding: 12px 0; vertical-align: middle; text-align: right; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
.seg > label, .seg > .na { position: relative; display: inline-flex; align-items: center; padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--muted); border-left: 1px solid var(--line); cursor: pointer; }
.seg > :first-child { border-left: 0; }
.seg > label input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; border: 0; cursor: pointer; }
.seg > label:has(input:checked) { background: var(--primary-50); color: var(--primary); }
.seg > label.off:has(input:checked) { background: var(--bg); color: var(--ink-700); }
.seg > label:has(input:focus-visible) { box-shadow: inset var(--ring); }
.seg > .na { color: var(--line); cursor: default; }
.role-delete { display: flex; align-items: center; gap: 10px; }
.never-card .panel-title { display: flex; align-items: center; gap: 8px; }
.never-card .panel-title .i { color: var(--primary); }
.never-list { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-700); }
@media (max-width: 640px) {
  .access-table tr { display: grid; }
  .access-table th[scope="row"] { padding-bottom: 6px; }
  .access-table td { text-align: left; padding-top: 0; }
}