/*
 * Layout rule for the gutters: every entry is ONE grid row that contains its
 * signifier gutter (left), its text and its date gutter (right). Marks and
 * dates are never positioned with JavaScript or absolute offsets, so they
 * cannot drift away from their entry when text wraps, the window resizes,
 * fonts load or entries are inserted.
 *
 * Text, slots and dates share --line-h, so each is exactly one text line
 * tall and sits on the entry's first line.
 */

/* Marks are drawn from one bundled symbol font (a DejaVu Sans subset, see
   fonts/README.md), so similar glyphs such as ○ ⊘ ⊗ or ☐ ☑ have matching
   sizes on every device. Characters outside it (letters, emoji) fall back
   to the fonts in --sig-font. */
@font-face {
  font-family: "Peggo Symbols";
  src: url("/fonts/peggo-symbols.woff2") format("woff2");
  font-display: block;
  unicode-range: U+00D7, U+2013-2014, U+2022, U+2190-21FF, U+2200-22FF, U+25A0-25FF, U+2600-26FF,
    U+2700-2704, U+2706-2707, U+2709-2763, U+2765-27BF;
}

:root {
  --font: ui-serif, Georgia, "Iowan Old Style", "Noto Serif", serif;
  /* Emoji fonts are listed explicitly so emoji signifiers always have a glyph. */
  --sig-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --mark-font: "Peggo Symbols", var(--sig-font);
  --font-size: 1.0625rem;
  --line-h: 1.75rem;
  --slot-w: 1.75rem;
  --slot-gap: 0.125rem;
  --gutter-pad: 0.5rem;
  --sig-w: calc(2 * var(--slot-w) + var(--slot-gap) + var(--gutter-pad));
  --date-w: 5.75rem;
  --date-size: 0.8125rem;

  --paper: #fbf8f1;
  --ink: #26241f;
  --muted: #8a857a;
  --rule: #d9d2c3;
  --focus-wash: #f2ecdf;
  --accent: #2f6f5e;
  --panel: #ffffff;
  --danger: #b03a2e;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1d1c1a;
    --ink: #e9e5dc;
    --muted: #8f897d;
    --rule: #3b3833;
    --focus-wash: #272521;
    --accent: #7cc4ad;
    --panel: #262522;
    --danger: #e0766b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* `hidden` always hides, even where a rule sets display (e.g. labels). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--font-size);
}

button { font: inherit; color: inherit; }

/* ---- top bar ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.page-heading { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.125rem; font-weight: 600; }
/* Theme › Page; click to rename (typed as Theme/Page). */
.page-title {
  display: block;
  max-width: 100%;
  padding: 0.25rem 0.375rem;
  margin-left: -0.375rem;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
.page-title:hover { background: var(--focus-wash); }
.page-title:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.page-theme { color: var(--muted); font-weight: 400; }
.page-sep { margin: 0 0.375rem; color: var(--muted); font-weight: 400; }
.page-title.no-theme .page-theme, .page-title.no-theme .page-sep { display: none; }
.page-title-input {
  width: 100%;
  padding: 0.25rem 0.375rem;
  margin-left: -0.375rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.save-status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sig-font); font-size: 0.8125rem; color: var(--muted); }
.save-status.error { color: var(--danger); }
.topbar-button {
  font-family: var(--sig-font);
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
}

/* ---- page index (Ctrl+O) ---- */

.page-index {
  width: min(32rem, calc(100vw - 32px));
  max-height: min(34rem, calc(100vh - 6rem));
  margin-top: 12vh;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sig-font);
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}
.page-index[open] { display: flex; flex-direction: column; }
.page-index::backdrop { background: rgb(0 0 0 / 0.3); }
.page-index-input {
  flex: none;
  padding: 0.875rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.page-index-list { flex: 1 1 auto; overflow-y: auto; list-style: none; margin: 0; padding: 0.375rem; }
.index-group {
  padding: 0.5rem 0.625rem 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.index-item {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.625rem;
  border-radius: 6px;
  cursor: pointer;
}
.index-item[aria-selected="true"], .index-item:hover { background: var(--focus-wash); }
.index-item.current::after { content: "current"; margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.index-item.create { color: var(--accent); }
.index-empty { padding: 0.75rem 0.625rem; color: var(--muted); }
.page-index .hint { flex: none; margin: 0; padding: 0.5rem 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.75rem; }

/* ---- page ---- */

.page {
  max-width: 50rem;
  margin: 0 auto;
  padding: var(--line-h) 16px 40vh;
  cursor: text;
}

.entry {
  display: grid;
  grid-template-columns: var(--sig-w) minmax(0, 1fr) var(--date-w);
  column-gap: 0.625rem;
  align-items: start;
  margin: 0;
  border-radius: 4px;
}
.entry:focus-within { background: var(--focus-wash); }

.entry-text {
  display: block;
  width: 100%;
  min-height: var(--line-h);
  margin: 0;
  padding: 0 0 0 0.25rem;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: var(--line-h);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  field-sizing: content;
}

/* Both gutters stretch over the whole entry so their rules are continuous
   lines down the page; their contents stay at the top (first line). */
.sig-gutter {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: var(--slot-gap);
  padding-right: var(--gutter-pad);
  border-right: 1px solid var(--rule);
}
.date-gutter {
  align-self: stretch;
  padding-left: 0.5rem;
  border-left: 1px solid var(--rule);
}

.slot {
  position: relative;
  flex: none;
  width: var(--slot-w);
  height: var(--line-h);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: var(--mark-font);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: var(--line-h);
  text-align: center;
  white-space: nowrap;
  overflow: clip;
  cursor: pointer;
  touch-action: manipulation;
}
/* Bigger tap target without changing layout. */
.slot::before { content: ""; position: absolute; inset: -0.375rem -0.0625rem; }
.slot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.slot:hover { background: var(--rule); }

/* An empty slot is a faint + on the entry being hovered or edited only;
   marks are mostly added by typing // . */
.slot.empty { color: var(--muted); font-weight: 400; }
.slot.empty .dot { visibility: hidden; }
.slot.empty:focus-visible .dot,
.entry:hover .slot.empty .dot,
.entry:focus-within .slot.empty .dot { visibility: visible; }

.sig-gutter.flash { animation: flash 0.5s ease-in-out 2; }
@keyframes flash { 50% { background: color-mix(in srgb, var(--danger) 25%, transparent); } }

/* ---- dates ---- */

.date {
  display: block;
  width: 100%;
  height: var(--line-h);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font-family: var(--sig-font);
  font-size: var(--date-size);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-h);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.date:hover { background: var(--rule); }
.date:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Empty date: a faint + only on the entry being hovered or edited. */
.date.empty .dot { visibility: hidden; padding-left: 0.25rem; }
.date.empty:focus-visible .dot,
.entry:hover .date.empty .dot,
.entry:focus-within .date.empty .dot { visibility: visible; }

.date-picker {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sig-font);
  font-size: 0.9375rem;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
}
.date-picker label { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.8125rem; }
.date-picker input {
  min-height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.date-picker-actions { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.date-picker-actions button {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}
#date-clear { color: var(--danger); }

/* ---- signifier picker ---- */

.sig-picker {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 13rem;
  max-width: calc(100vw - 32px);
  padding: 0.375rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sig-font);
  font-size: 0.9375rem;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
}
.sig-picker-list { list-style: none; margin: 0; padding: 0; }
.sig-picker-list button,
.sig-picker-actions button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.sig-picker-list button:hover, .sig-picker-actions button:hover,
.sig-picker-list button:focus-visible, .sig-picker-actions button:focus-visible { background: var(--focus-wash); outline: none; }
.sig-picker-list button[aria-pressed="true"] { background: var(--focus-wash); font-weight: 600; }
.sig-picker-list .sym { font-family: var(--mark-font); width: 1.5rem; text-align: center; font-weight: 700; font-size: 1.125rem; }
.sig-picker-list .key { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.sig-picker-actions { border-top: 1px solid var(--rule); margin-top: 0.25rem; padding-top: 0.25rem; }
#sig-picker-remove { color: var(--danger); }

/* The // menu: same look as the picker; items are highlighted by keyboard. */
.mark-menu { min-width: 14rem; max-height: min(20rem, 60vh); overflow-y: auto; }
.mark-menu-list { list-style: none; margin: 0; padding: 0; }
.mark-menu-group {
  padding: 0.375rem 0.5rem 0.125rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mark-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}
.mark-menu-item[aria-selected="true"], .mark-menu-item:hover { background: var(--focus-wash); }
.mark-menu-item .sym { font-family: var(--mark-font); width: 1.5rem; text-align: center; font-weight: 700; font-size: 1.125rem; }
.mark-menu-item .key { margin-left: auto; color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.75rem; }

/* ---- signifier manager ---- */

.sig-dialog {
  width: min(40rem, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sig-font);
}
.sig-dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.sig-dialog-inner { padding: 1rem; }
.sig-dialog h2 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.sig-dialog .hint { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.8125rem; }
.sig-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.sig-group {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sig-row {
  display: grid;
  grid-template-columns: 1.25rem 2.75rem 2.75rem minmax(0, 1fr) 2.5rem auto;
  align-items: center;
  gap: 0.375rem;
}
.sig-add button {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.sig-add button:hover { background: var(--focus-wash); }
.sig-row .num { color: var(--muted); font-size: 0.75rem; text-align: right; }
.sig-row input[type="text"] {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.sig-row input.symbol { padding: 0; text-align: center; font-weight: 700; font-size: 1.125rem; }
.glyph-choice {
  width: 100%;
  min-height: 2.25rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mark-font);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
}
.glyph-choice:hover { border-color: var(--accent); }
.glyph-choice .as-typed { color: var(--muted); font-size: 0.5625rem; font-weight: 400; white-space: nowrap; }

/* ---- glyph picker (inside the marks dialog) ---- */

.glyph-picker {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(22rem, calc(100vw - 16px));
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sig-font);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
}
.glyph-picker:popover-open { display: flex; flex-direction: column; }
.glyph-search {
  margin: 0.5rem 0.5rem 0;
  min-height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.glyph-picker-grid { max-height: min(20rem, 50vh); overflow-y: auto; padding: 0.25rem 0.5rem 0.5rem; }
/* ~800 symbols: groups below the fold are only laid out when scrolled to. */
.glyph-block.lazy { content-visibility: auto; contain-intrinsic-size: auto 12rem; }
.glyph-all {
  margin: 0.75rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
}
.glyph-none { margin: 0.75rem 0.25rem; color: var(--muted); }
.glyph-group {
  margin: 0.5rem 0 0.25rem;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, 2.25rem); gap: 0.125rem; }
.glyph {
  width: 2.25rem;
  color: var(--ink);
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: var(--mark-font);
  font-size: 1.25rem;
  line-height: 2.25rem;
  cursor: pointer;
}
.glyph:hover, .glyph:focus-visible { background: var(--focus-wash); outline: none; }
.glyph[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.glyph-picker-footer { display: flex; gap: 0.5rem; padding: 0.5rem; border-top: 1px solid var(--rule); }
.glyph-other {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.glyph-picker-footer button {
  flex: none;
  white-space: nowrap;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}
.sig-dialog .hint kbd { font-family: ui-monospace, monospace; font-size: 0.75rem; padding: 0 0.25rem; border: 1px solid var(--rule); border-radius: 3px; }
.sig-row input[type="color"] { width: 2.5rem; height: 2.25rem; padding: 0.125rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.sig-row .row-actions { display: flex; gap: 0.125rem; }
.sig-row .row-actions button {
  min-width: 2rem;
  min-height: 2.25rem;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.sig-row .row-actions button:hover { background: var(--focus-wash); }
.sig-row .row-actions .delete { color: var(--danger); }
.sig-dialog-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.sig-dialog-actions button {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}

@media (max-width: 30rem) {
  :root { --slot-w: 1.5rem; --gutter-pad: 0.25rem; --date-w: 4.75rem; --date-size: 0.6875rem; }
  .topbar { gap: 0.375rem; }
  .topbar-button { flex: none; padding: 0.375rem 0.5rem; }
  .page-heading { font-size: 1rem; }
  .page-index { width: calc(100vw - 16px); margin-top: 8px; max-height: calc(100vh - 16px); }
  .entry { column-gap: 0.375rem; }
  /* Everything on one line, a bit tighter. */
  .sig-dialog-inner { padding: 0.75rem; }
  .sig-row { grid-template-columns: 2.25rem 2.25rem minmax(0, 1fr) 2.25rem auto; gap: 0.25rem; }
  .sig-row .num { display: none; }
  .sig-row input[type="color"] { width: 2.25rem; }
  .glyph-choice .as-typed { font-size: 0.5rem; }
  .sig-row .row-actions button { min-width: 1.75rem; padding: 0; }
}

/* ---- sign-in page ---- */

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 16px; }
.login-card {
  width: min(24rem, 100%);
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--panel);
  font-family: var(--sig-font);
}
.login-card h1 { margin: 0 0 1rem; font-family: var(--font); font-size: 1.5rem; }
.login-card p { margin: 0 0 1rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.login-card label { display: block; margin-bottom: 0.75rem; font-size: 0.875rem; }
.login-card input {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  margin-top: 0.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.login-card #code { font-family: ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.login-primary {
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--panel);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.login-link { margin-top: 0.75rem; padding: 0.25rem 0; border: 0; background: none; color: var(--accent); cursor: pointer; }
.login-error { min-height: 1.25rem; margin: 1rem 0 0; color: var(--danger) !important; }

/* ---- account menu and devices ---- */

.topbar-more { padding-inline: 0.625rem; font-weight: 700; }
.account-menu { min-width: 11rem; }
.account-menu .sig-picker-actions { border: 0; margin: 0; padding: 0; }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.device-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.125rem 0.5rem; }
.device-row input {
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.device-row .device-meta { grid-column: 1; color: var(--muted); font-size: 0.75rem; }
.device-row .delete { grid-column: 2; grid-row: 1; min-width: 2rem; min-height: 2.25rem; border: 0; border-radius: 6px; background: none; color: var(--danger); cursor: pointer; }
.device-row .delete:disabled { color: var(--rule); cursor: not-allowed; }
.device-code { margin-top: 1rem; padding: 0.75rem; border: 1px dashed var(--accent); border-radius: 8px; }
.device-code p { margin: 0 0 0.25rem; font-size: 0.875rem; }
.device-code-value { font-family: ui-monospace, monospace; font-size: 1.75rem !important; font-weight: 700; letter-spacing: 0.12em; }
.device-actions { flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start !important; }
.device-actions button[value="close"] { margin-left: auto; }

/* ---- encryption: set up, recovery key, unlock ---- */

.vault {
  width: min(28rem, calc(100vw - 32px));
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sig-font);
}
.vault::backdrop { background: var(--paper); }
.vault h2 { margin: 0 0 0.75rem; font-family: var(--font); font-size: 1.375rem; }
.vault p { margin: 0 0 1rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.vault p b { color: var(--ink); }
.vault label, .vault-form label { display: block; margin-bottom: 0.75rem; font-size: 0.875rem; }
.vault input[type="password"], .vault input:not([type]), .vault-form input[type="password"] {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  margin-top: 0.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.vault #vault-recovery-input { font-family: ui-monospace, monospace; }
.vault-key {
  padding: 0.75rem;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  color: var(--ink) !important;
  font-family: ui-monospace, monospace;
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.7 !important;
  word-spacing: 0.25em;
  user-select: all;
}
.vault-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.vault-row button {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}
.vault-check { display: flex !important; align-items: center; gap: 0.5rem; }
.vault .login-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.vault .hint { margin-top: 0.75rem; }
.vault-form input[type="file"] { margin-bottom: 0.75rem; }