/* quiet-glass.css: King of Names' Quiet Glass in Emerald OS. Loaded last, so it wins over the
   older files with the same selectors. Source: docs/design/quiet-glass-handoff.md, section 13. */

/* ---- tokens, dark (the default) ---- */
:root {
  --bg: #0e0f12; --text: #f2f3f5; --muted: #a7abb4; --line: rgb(255 255 255 / 0.1); --input: #7d818b;
  --surface: rgb(30 32 38 / 0.72); --surface-solid: #1e2026;    /* sheets, menus, top bar: blur 44 */
  --raised: rgb(255 255 255 / 0.07);                            /* strips, chips, rows */
  --glass: rgb(255 255 255 / 0.06); --glass-strong: var(--surface); --glass-edge: rgb(255 255 255 / 0.08);
  --elevation: inset 0 0 0 1px var(--glass-edge), 0 10px 30px rgb(0 0 0 / 0.4);
  --elevation-sheet: inset 0 0 0 1px var(--glass-edge), 0 -12px 40px rgb(0 0 0 / 0.55);
  --blur: blur(30px) saturate(1.2); --blur-sheet: blur(44px) saturate(1.5);
  --primary: #f2f3f5; --on-primary: #16181d;
  --accent: var(--primary); --accent-hover: color-mix(in srgb, var(--primary) 88%, var(--bg)); --on-accent: var(--on-primary);
  --ring: rgb(242 243 245 / 0.2);
  --brand: #34d399;                                             /* the dot in the wordmark, nothing else */
  --ok: #86d0a6; --danger: #ff8a7a; --on-danger: #0e0f12; --amber: #e8c26a; --sky: #5ab0ff;
  --ok-soft: rgb(30 90 60 / 0.32); --danger-soft: rgb(120 40 30 / 0.35); --amber-soft: rgb(110 80 20 / 0.32);
  --wash-1: #1a2233; --wash-2: #2a241c;
  --sheet-scrim: rgb(0 0 0 / 0.5);
  --r: 14px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-row: 16px; --r-sheet: 28px; --r-chip: 8px;
  --btn-r: 14px; --btn-h: 44px; --btn-h-lg: 52px; --btn-border: var(--input);
  --field-h: 52px; --field-bg: var(--glass); --field-border: var(--input); --field-border-hover: var(--text);
  --fs-cap: 12px; --fs-meta: 14px; --fs-body: 16px; --fs-item: 17px; --fs-lead: 20px; --label-fs: 14px;
  --ease-calm: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* ---- tokens, light ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f3; --text: #16181d; --muted: #626670; --line: rgb(22 24 29 / 0.08); --input: #8b8f98;
  --surface: rgb(255 255 255 / 0.55); --surface-solid: #ffffff;
  --raised: rgb(255 255 255 / 0.45);
  --glass: rgb(255 255 255 / 0.5); --glass-strong: var(--surface); --glass-edge: rgb(255 255 255 / 0.85);
  --elevation: inset 0 0 0 1px var(--glass-edge), 0 6px 24px rgb(22 24 29 / 0.05);
  --elevation-sheet: inset 0 0 0 1px var(--glass-edge), 0 -10px 40px rgb(22 24 29 / 0.1);
  --primary: #16181d; --on-primary: #ffffff;
  --ring: rgb(22 24 29 / 0.2);
  /* theme-light.css sets these on html[data-theme=light]; point them at ink here too */
  --accent: var(--primary); --accent-hover: #2a2d33; --on-accent: var(--on-primary);
  --brand: #0a7f57;
  --ok: #1f6b4a; --danger: #c0392b; --on-danger: #ffffff; --amber: #8a5a12; --sky: #1f6fd1;
  --ok-soft: rgb(214 238 224 / 0.7); --danger-soft: rgb(255 220 214 / 0.7); --amber-soft: rgb(246 230 196 / 0.6);
  --wash-1: #dfe6f3; --wash-2: #ece6dc;
  --sheet-scrim: rgb(22 24 29 / 0.18);
  --pill-bg: var(--surface-solid);
}
/* Reduce transparency: solid surfaces, no blur, no washes. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface-solid); --surface: var(--surface-solid); --raised: #22242a; --blur: none; --blur-sheet: none; --wash-1: transparent; --wash-2: transparent; }
  :root[data-theme="light"] { --raised: #efefed; }
}

/* ---- page: the two washes, drawn once on the fixed layer Emerald already has ---- */
body { background: var(--bg); color: var(--text); font-size: var(--fs-body); line-height: 1.45; font-synthesis-style: none; }
body::before { background: radial-gradient(60% 45% at 85% 12%, var(--wash-1), transparent 70%), radial-gradient(60% 45% at 10% 92%, var(--wash-2), transparent 70%); }
h1, h2, h3 { text-wrap: balance; }

/* ---- type styles (section 5), for the new views to use by class ---- */
.type-display     { font-weight: 500; font-size: 2.625rem;  line-height: 1.05; letter-spacing: -0.03em; }
.type-heading     { font-weight: 500; font-size: 2.1875rem; line-height: 1.1;  letter-spacing: -0.03em; }
.type-sheet-title { font-weight: 500; font-size: 1.8125rem; line-height: 1.17; letter-spacing: -0.03em; }
.type-section     { font-size: 0.8125rem; line-height: 1.385; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.main.pm .pm-head h1 { font-weight: 500; letter-spacing: -0.03em; }
.main.pm .pm-head h1 em { color: var(--text); }                /* no second colour in a title */
.main.pm .pm-alt { font-size: var(--fs-cap); letter-spacing: 0.14em; }

/* ---- glass: cards and light fills blur what's behind them; sheets and menus blur more ---- */
.card, .panel, .menu, .pm-compose, .pm-lanes-wrap, .more-sheet, dialog.panel { border: 0; background: var(--glass); box-shadow: var(--elevation); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.card, .pm-compose, .pm-lanes-wrap { border-radius: var(--r-lg); }
.panel, dialog.panel, .menu { border-radius: var(--r-lg); background: var(--surface); -webkit-backdrop-filter: var(--blur-sheet); backdrop-filter: var(--blur-sheet); }
.topbar { background: var(--surface); -webkit-backdrop-filter: var(--blur-sheet); backdrop-filter: var(--blur-sheet); }
.dock { background: var(--surface); }

/* ---- buttons: 44 and 52, radius 14, ink primary, outlined secondary, press scale ---- */
.btn { height: var(--btn-h); padding: 0 16px; border: 1px solid transparent; border-radius: var(--btn-r); font-size: 15px; font-weight: 600; transition: transform 120ms ease-out, background-color 120ms, filter 120ms; }
.btn:not(.primary):not(.danger) { border-color: var(--input); background: transparent; color: var(--text); }
.btn:not(.primary):not(.danger):hover { background: var(--raised); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover { filter: brightness(0.95); }
.btn.danger { background: var(--danger); color: var(--on-danger); }
.btn.big, .wide-btn, .auth .btn.primary { height: var(--btn-h-lg); padding: 0 20px; font-size: 16px; }
.btn.small { height: 36px; padding: 0 12px; border-radius: var(--r-sm); font-size: 14px; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:focus-visible, .tb-item:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.link-btn { min-height: 44px; color: var(--primary); font-weight: 600; }

/* ---- fields: 52 tall, radius 14, glass, 17 px, a 4 px ink ring ---- */
input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color])), select { height: var(--field-h); }
input, textarea, select { border: 1px solid var(--input); border-radius: var(--r); background-color: var(--glass); font-size: var(--fs-item); }
/* the dropdown arrow is a background image (app.css): one arrow, on the right, never tiled */
select { background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px; }
textarea { min-height: 96px; padding: 12px 14px; line-height: 1.6; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); outline: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field label { color: var(--text); font-size: var(--label-fs); font-weight: 500; }

/* ---- what was green: tints of ink, the brand mark keeps the green ---- */
.brand svg, .wordmark svg, .logo { color: var(--brand); }
.user-btn, .avatar-lg, .pm-mic, .fab-talk { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); border-color: var(--line); }
.user-btn:hover, .user-btn[aria-expanded="true"], .pm-mic:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.pm-mic.on { background: var(--primary); color: var(--on-primary); animation: none; }
.tb-item::before { display: none; }                            /* no highlight shape behind the active tab */
.tb-item.active { color: var(--primary); }       /* the icons' stroke widths are attributes in the symbols; colour alone marks the active tab, plus aria-current */
.status.ok .dot { background: var(--ok); }
.pmv-vt-health.green { --sc: var(--ok); }

/* ---- the phone shell: a floating glass pill, the main action in it ---- */
@media (max-width: 760px) {
  :root { --tabbar-h: calc(84px + env(safe-area-inset-bottom, 0px)); --dock-clear: calc(var(--tabbar-h) + 16px); }
  .tabbar {
    right: 14px; left: 14px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); height: 64px; padding: 0 4px;
    border: 0; border-radius: 32px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 10px 30px rgb(22 24 29 / 0.08);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  }
  .tb-item { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; gap: 3px; border-radius: 10px; }
  .tb-item svg { width: 24px; height: 24px; stroke-width: 1.8; }
  .fab-add { width: 44px; height: 44px; background: var(--primary); color: var(--on-primary); box-shadow: none; }
  .fab-talk { width: 44px; height: 44px; border: 0; background: var(--surface); color: var(--primary); box-shadow: var(--elevation); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
  body:has(#app-screen:not([hidden])) > .toast { bottom: calc(var(--tabbar-h) + 14px); }
  /* sheets from the bottom, radius 28, a handle, a close button of 44 */
  .more-sheet, dialog.panel:not(.em-ask) { border: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; max-height: 90dvh; background: var(--surface); box-shadow: var(--elevation-sheet); -webkit-backdrop-filter: var(--blur-sheet); backdrop-filter: var(--blur-sheet); }
  .more-sheet::backdrop, dialog.panel::backdrop { background: var(--sheet-scrim); }
  .more-head::before { width: 36px; height: 5px; border-radius: 3px; background: var(--line); }
  .more-head h2 { font-size: 1.8125rem; line-height: 1.17; font-weight: 500; letter-spacing: -0.03em; }
  .more-close { width: 44px; height: 44px; border-radius: 999px; }
  .more-list :is(a, button) { height: 56px; border-radius: var(--r-row); font-size: var(--fs-item); font-weight: 400; }
  .more-list a.active { background: var(--raised); color: var(--primary); font-weight: 600; }
}

/* ---- toast: inverted, radius 14, 15 px, no dot ---- */
.toast { height: auto; padding: 10px 16px; border: 0; border-radius: 14px; background: var(--text); color: var(--bg); font-size: 15px; line-height: 20px; font-weight: 500; box-shadow: var(--elevation); }
.toast::before { display: none; }

/* ---- confirm box (confirm.js): the verb on the right, in red only for what can't be undone ---- */
.em-ask-title { font-weight: 500; font-size: 1.375rem; letter-spacing: -0.02em; }
.em-ask-btns .btn { height: var(--btn-h); }

/* ---- status words: a word in a soft pill, never colour alone ---- */
.pill-status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.pill-status.ok { background: var(--ok-soft); color: var(--ok); }
.pill-status.late { background: var(--danger-soft); color: var(--danger); }
.pill-status.soon { background: var(--amber-soft); color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- Emerald additions ---- */
/* The version number stays on the sign-in screen and in Settings, not in the signed-in top bar. */
.topbar .brand .os-ver { display: none; }
/* "Match system" sits under the light/dark row only once someone has picked one. */
.menu-theme-system[hidden] { display: none; }

/* A blur (backdrop-filter) makes an element the frame for its position:fixed children, so the
   dropdowns inside the task popup (.pm-menu-list, .pm-assign-pop) and the board's other fixed
   pop-ups would sit inside the dialog instead of on the page. Dialogs get the solid sheet
   colour instead of glass; the dimmed, blurred page behind them comes from ::backdrop. */
dialog.panel, dialog.panel:not(.em-ask) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-solid); }
dialog.panel::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- Simple view (html[data-view="simple"], the default): only what Cameron asked for ---- */
/* ---- UX-C: the five places. Horizons, Roadmap and the run-sheet Board wait behind "Show everything" ---- */
:root[data-view="simple"] .tabs .tab:is([data-page="horizons"], [data-page="roadmap"], [data-page="board"]) { display: none !important; }
:root[data-view="simple"] :is(#people-view-tab, #notify-wrap, #pm-comments-btn, #pm-attach, #pm-kind, #pm-playbooks-btn, #more-checkin, .pmv-pp-checkin) { display: none !important; }

/* ---- Home: the one main action, a big mic ---- */
.home-talk { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 560px; margin: 8px 0 28px; padding: 14px 20px 14px 14px; border: 0; border-radius: 999px; background: var(--glass); box-shadow: var(--elevation); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 120ms ease-out; }
.home-talk[hidden] { display: none; }
.home-talk:active { transform: scale(0.98); }
.home-talk:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.home-orb { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.home-orb svg { width: 28px; height: 28px; }
.home-talk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-talk-text b { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.home-talk-text small { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  /* within thumb reach: just above the floating tab bar */
  .home-talk { position: fixed; left: 14px; right: 14px; bottom: calc(var(--tabbar-h, 84px) + 12px); z-index: 20; width: auto; max-width: none; margin: 0; padding: 10px 18px 10px 10px; gap: 14px; }
  .home-orb { width: 56px; height: 56px; }
  .home-talk-text b { font-size: 1.125rem; }
  .home-talk-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .main.home { padding-bottom: 110px; }
}

/* ---- Vault: the same header, list and actions as the rest of Emerald OS ---- */
.vault-eyebrow { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
#vaults-page .main-head h2 { font-size: clamp(2rem, 4vw, 2.625rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
#vaults-page .main-head .muted { margin-top: 6px; font-size: var(--fs-meta); }
/* one main action: Add, 52 px ink, top right on desktop (the + in the bar stays too) */
@media (min-width: 761px) {
  #app-screen:has(#nav-add:not([hidden])) #vaults-page .head-actions #add-item-btn:not([hidden]) { display: inline-flex; }
  #vaults-page .head-actions { align-items: center; gap: 10px; }
}
/* search with its icon everywhere, 52 px glass */
#vaults-page .search {
  height: var(--field-h); padding-left: 44px; border-radius: var(--r);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7abb4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 15px center; background-size: 18px;
}
/* the list: a glass card of 64 px rows, a 17 px name, quiet meta, no heavy column chrome */
#vaults-page .table-wrap { border: 0; border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--elevation); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); overflow: hidden; }
@media (min-width: 761px) {
  #items-table th { padding-top: 14px; padding-bottom: 12px; color: var(--muted); font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.14em; background: transparent; }
  #items-table td { padding-top: 12px; padding-bottom: 12px; border-color: var(--line); font-size: var(--fs-meta); }
}
#items-table tbody tr { transition: background-color 150ms; }
@media (hover: hover) { #items-table tbody tr.clickable:hover { background: var(--raised); } }
#items-table .cell-main b { font-size: var(--fs-item); font-weight: 500; letter-spacing: -0.01em; }
#items-table .cell-main small, #items-table .sub2 { color: var(--muted); font-size: 13px; }
#items-table .avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
#items-table .tag-mini { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12px; font-weight: 600; }
#items-table .actions .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
/* sidebar: the active vault or folder is a soft raised row in ink, never green */
#vaults-page .sidebar .side-label { font-size: var(--fs-cap); letter-spacing: 0.14em; }
#vault-nav :is(a, button).active, #folder-nav :is(a, button).active { background: var(--raised); color: var(--text); font-weight: 600; }
/* the edit / new popups: footer buttons one height, Delete quiet red text */
.panel-foot .btn { height: var(--btn-h); }
.panel-foot .btn.danger-text { border-color: var(--input); background: transparent; color: var(--danger); }
.panel-foot { background: var(--surface-solid); }

/* ---- Performance: live blur only where it shows and costs little ----
   Blurring the whole page behind a popup, and giving every card its own backdrop blur, made
   opening popups and scrolling slow. Now: a plain dim layer behind popups; cards are slightly
   more solid frosted colours (over the soft washes they read the same); real blur stays only on
   the top bar and the phone tab bar (small, fixed). */
body.modal-open #app-screen > * { filter: none !important; }
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
dialog::backdrop { background: var(--sheet-scrim, rgb(0 0 0 / 0.45)); }
:root:not([data-theme="light"]) dialog::backdrop { background: rgb(8 9 11 / 0.6); }
.topbar, .tabbar { -webkit-backdrop-filter: blur(12px) saturate(1.3) !important; backdrop-filter: blur(12px) saturate(1.3) !important; }
:root { --glass: rgb(32 34 40 / 0.62); --surface: rgb(30 32 38 / 0.94); }
:root[data-theme="light"] { --glass: rgb(255 255 255 / 0.68); --surface: rgb(255 255 255 / 0.94); }

/* ---- UI: page-header buttons are one family. Same height (44 px), radius, type and padding;
   the main action is ink with a + icon, not a bigger button. */
.head-actions { align-items: center; gap: 10px; }
.head-actions .btn, .head-actions .btn.small, #contacts-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); min-height: var(--btn-h); padding: 0 18px;
  border-radius: var(--btn-r); font-size: 15px; font-weight: 600; line-height: 1;
}
.head-actions .btn svg, #contacts-add svg { width: 18px; height: 18px; flex: none; margin-left: -4px; }

/* ---- UI: the Vault follows the page's width like every other page: the page column (max 1440 px,
   or the whole screen with the width toggle), edges lined up with the top bar. No narrower cap. */
:root[data-view="simple"] #app-screen #vaults-page > .main { max-width: none; margin-left: 0; margin-right: 0; }
/* ---- UI: the Vault search in the header, before Share / Add (vault-head-search.js), on a computer */
@media (min-width: 761px) {
  #vaults-page .head-actions .vh-in-head { flex: 0 1 300px; width: 300px; min-width: 200px; margin: 0; }
  #vaults-page .head-actions .vh-in-head .search, #vaults-page .head-actions input.vh-in-head { height: var(--btn-h); margin: 0; font-size: 15px; background-position: 14px center; padding-left: 40px; }
  #vaults-page .head-actions .vh-in-head .vv-search-mic { right: 0; } /* stays a 44 px target */
  #vaults-page .main-head { align-items: center; }
  #vaults-page .head-actions { flex-wrap: wrap; justify-content: flex-end; }
}
/* ---- UI: the search popup's box has no border of its own (the panel is the frame) */
.pm-search-bar input, .pm-search-bar input:focus, .pm-search-bar input:focus-visible { height: 56px; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; outline: none; }

/* ---- UI: the + card after the division tiles (vault-overview.js) */
.vd-add-tile {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 88px; padding: 14px;
  border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: none;
  color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: color 120ms, border-color 120ms, background-color 120ms;
}
.vd-add-tile svg { width: 20px; height: 20px; flex: none; }
.vd-add-tile:hover { color: var(--text); border-color: var(--muted); background: var(--glass); }
.vd-add-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .vd-add-tile { min-height: 104px; } }

/* ---- UI: the Add menu in two columns on a computer; section labels span the row */
@media (min-width: 761px) {
  dialog.panel.add-choice#add-choice { width: min(820px, calc(100vw - 48px)); }
  #add-choice .add-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #add-choice .add-opts > .add-opts-label { grid-column: 1 / -1; margin: 10px 2px 0; }
  #add-choice .add-opt { height: 100%; }
}

/* ---- UI: the login panel in two columns on a computer (vault-panel-cols.js groups the fields).
   Vault across the top; left: what you sign in with (name, website, username, password, 2FA and
   their helpers); right: where it's filed (division, folder, tags, notes). Each column stacks on its
   own, so a tall box on one side leaves no gaps on the other. On a phone: one column, as before. */
.ip-col { display: contents; }
@media (min-width: 761px) {
  dialog.panel#item-panel { width: min(880px, calc(100vw - 48px)); }
  #item-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; align-items: start; }
  #item-form > * { grid-column: 1 / -1; }
  #item-form > .ip-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; grid-column: auto; }
  #item-form > .ip-left { grid-column: 1; }
  #item-form > .ip-right { grid-column: 2; }
  #item-form .ip-right .field:has(#it-notes) textarea { min-height: 160px; }
}

/* ---- UI: the buttons along the bottom of the edit panels: one row, one height, Save on the
   right; the bar stays at the bottom while the panel scrolls and covers what's behind it. */
@media (min-width: 761px) {
  :is(#item-panel, #kind-panel, #doc-panel) .panel-foot {
    position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
    margin: 4px -24px -24px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-solid);
  }
  :is(#item-panel, #kind-panel, #doc-panel) .panel-foot .btn { flex: none; height: var(--btn-h); padding: 0 18px; white-space: nowrap; }
  :is(#item-panel, #kind-panel, #doc-panel) .panel-foot .btn.primary { margin-left: auto; min-width: 120px; }
}

/* ---- UI: the vault picker (vault-switch.js), Simple view only; Show everything has the sidebar */
.vd-scope { height: var(--btn-h); min-width: 160px; max-width: 240px; padding-left: 14px; font-size: 15px; font-weight: 600; }
:root[data-view="full"] .vd-scope { display: none; }
@media (max-width: 760px) {
  :root[data-view="simple"] #vaults-page > .main > .vd-scope { order: 1; width: 100%; max-width: none; margin: 0 0 10px; }
}

/* ---- UI: deleting a category. On a computer a trash icon shows on the tile on hover (it takes the
   health ring's place for that moment); everywhere, the category's own page has Delete category. */
.vd-tile-wrap { position: relative; display: grid; min-width: 0; }
.vd-tile-wrap > .vd-tile { width: 100%; height: 100%; }
.vd-tile-del {
  position: absolute; top: 50%; right: 14px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 12px; background: var(--raised); color: var(--muted); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity 120ms, color 120ms;
}
.vd-tile-del svg { width: 18px; height: 18px; }
.vd-tile-wrap:hover .vd-tile-del, .vd-tile-del:focus-visible { opacity: 1; pointer-events: auto; }
.vd-tile-wrap:hover .vd-ring, .vd-tile-wrap:has(.vd-tile-del:focus-visible) .vd-ring { opacity: 0; }
.vd-tile-del:hover, .vd-tile-del:focus-visible { color: var(--danger); outline: none; box-shadow: inset 0 0 0 1.5px var(--danger); }
@media (max-width: 760px), (hover: none) { .vd-tile-del { display: none; } }
.vd-drill-del { display: inline-flex; align-items: center; gap: 8px; color: var(--danger); }
.vd-drill-del svg { width: 18px; height: 18px; }