:root {
  color-scheme: light;
  --bg: #f5f3ee;
  --paper: #fffdf8;
  --ink: #171717;
  --muted: #68635b;
  --line: #ddd6ca;
  --accent: #1f6feb;
  --danger: #c2410c;
  --ok: #15803d;
  --radius: 10px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;
  /* Note text size (default 14px) for both the composer (#entryInput) and
     saved block bodies (.entry-body); /font overrides it inline on <html>,
     and /font reset removes that override so this default applies again.
     Chrome and metadata never read this. */
  --note-font-size: 14px;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212;
  --paper: #1b1b1b;
  --ink: #f3f0e8;
  --muted: #b0a89d;
  --line: #2b2b2b;
  --accent: #7fb2ff;
  --danger: #f59e7a;
  --ok: #6fcf97;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* iOS Safari: 100vh is the *large* viewport (toolbar collapsed), so a 100vh
   layout overflows the screen by one toolbar on load and the bottom row hides
   behind it. 100dvh tracks the toolbar as it collapses/expands; browsers
   without dvh keep the 100vh fallback. On desktop they're equal. */
body {
  min-height: 100vh;
  min-height: 100dvh;
}

textarea,
button {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(280px, 1fr) auto auto;
  /* Notch clearance in landscape (viewport-fit=cover); 0 everywhere else. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.topbar {
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 8px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.current-datetime {
  font-size: 0.8125rem; /* 13px chrome baseline (mono reads larger than sans); fixed, not --note-font-size */
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.theme-toggle {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 1rem;
  font-family: var(--font-sans);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--accent);
  outline: none;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}

.theme-toggle.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
}

.word-count-badge {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.word-count-badge.is-near-target {
  color: var(--accent);
}

.word-count-badge.is-over-target {
  color: #d1242f;
}

.find-replace-bar {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  flex-wrap: wrap;
}

.find-replace-bar[hidden] {
  display: none;
}

.find-replace-input {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  outline: none;
  min-width: 140px;
}

.find-replace-input:focus {
  border-color: var(--accent);
}

.find-replace-count {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 68px;
}

.find-replace-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-sans);
}

.find-replace-button:hover,
.find-replace-button:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  outline: none;
}

.find-replace-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  margin-left: auto;
}

.find-replace-close:hover,
.find-replace-close:focus-visible {
  color: var(--accent);
  outline: none;
}

.editor-wrap {
  grid-row: 3;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

#entryInput {
  width: 100%;
  height: 100%;
  min-height: 48vh;
  border: 0;
  outline: none;
  resize: none;
  padding: 12px 20px 20px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--note-font-size);
  line-height: 1.6;
  caret-color: var(--accent);
}

/* Touch devices: with the soft keyboard up the visual viewport is roughly
   half the screen, and a textarea taller than that makes WebKit reveal it by
   aligning its top edge — scrolling the top bar off-screen. A smaller
   minimum (in small-viewport units) keeps the composer inside the visible
   area; the 1fr grid row still lets it grow when the keyboard is closed. */
@media (pointer: coarse) {
  #entryInput {
    min-height: 40vh;
    min-height: 40svh;
  }
}

#entryInput::placeholder {
  color: #9a948a;
}

.editor-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 14px;
}

.command-palette[hidden],
.editor-suggestions[hidden] {
  display: none;
}

.command-palette {
  display: flex;
  flex-direction: column;
  margin: 0 20px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%);
  max-height: calc(6 * 38px);
  overflow-y: auto;
}

.command-palette-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.command-palette-item:last-child {
  border-bottom: 0;
}

.command-palette-item:hover,
.command-palette-item.is-selected {
  background: color-mix(in srgb, var(--paper) 92%, var(--accent) 12%);
  color: var(--accent);
  outline: none;
}

.command-palette-name {
  font-weight: 600;
  white-space: nowrap;
}

.command-palette-desc {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-align: right;
}

.command-palette-item:hover .command-palette-desc,
.command-palette-item.is-selected .command-palette-desc {
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}

.command-bar {
  grid-row: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 24px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  /* Footer chrome (Saved count, sync status, composer hint) is mono to match
     the editor; .saved-count / .composer-hint / .sync-indicator inherit this. */
  font-family: var(--font-mono);
}

.composer-hint {
  color: var(--ink);
  opacity: 0.78;
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.saved-count {
  color: var(--muted);
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  /* Horizontal padding enlarges the tap target; negative margin cancels the
     visual growth so the desktop footer spacing is unchanged. */
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 7px;
  transition: color 120ms ease, background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.saved-count:hover,
.saved-count:focus-visible {
  color: var(--accent);
  background: var(--line);
  outline: none;
}

.saved-count:active {
  background: var(--line);
  filter: brightness(0.96);
}

/* Persistent ambient sync indicator. Lives next to "Saved (N)". Steady-state
   success is passive (a quiet dot); a failure stays visible with its reason
   until the next successful sync clears it. */
.sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  position: relative;
}

.sync-indicator[hidden] {
  display: none;
}

.sync-indicator .sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.sync-indicator .sync-label {
  white-space: nowrap;
}

/* Synced: passive, no text — just a quiet dot in the ok colour. */
.sync-indicator.is-ok {
  color: var(--ok);
}

.sync-indicator.is-ok .sync-label {
  display: none; /* drop the empty label so it doesn't leave a trailing gap */
}

/* Syncing: muted, pulsing dot. */
.sync-indicator.is-syncing {
  color: var(--muted);
}

.sync-indicator.is-syncing .sync-dot {
  animation: sync-pulse 1.1s ease-in-out infinite;
}

@keyframes sync-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sync-indicator.is-syncing .sync-dot {
    animation: none;
    opacity: 0.6;
  }
}

/* Failed: standing signal in the danger colour, with a short reason. */
.sync-indicator.is-failed {
  color: var(--danger);
  cursor: default;
}

/* Full reason on hover, reusing the footer tooltip pattern. */
.sync-indicator[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease 0ms;
  z-index: 10;
}

.sync-indicator[data-tooltip]:hover::after {
  opacity: 1;
  transition-delay: 400ms;
}

.undo-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: 0.88rem;
  font-family: var(--font-sans);
}

.undo-button:hover,
.undo-button:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Persistent "Save block" action. Sits at the right of the footer on every
   platform; on mobile it detaches to float above the on-screen keyboard (see
   .save-dock.is-floating below). */
.save-dock {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.save-block-btn {
  border: 0.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 10px 20px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: border-color 120ms ease, background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.save-block-btn:hover,
.save-block-btn:focus-visible {
  border-color: color-mix(in srgb, var(--line) 45%, var(--muted));
  background: color-mix(in srgb, var(--paper) 92%, var(--ink));
  outline: none;
}

.save-block-btn:active {
  background: color-mix(in srgb, var(--paper) 86%, var(--ink));
}

/* Floated above the keyboard: the dock becomes a minimal full-width bar pinned
   to the bottom of the layout viewport, then translated up onto the keyboard's
   top edge by JS. Opaque app surface + top border so editor text never shows
   through. Only the Save button floats — the status cluster stays in the footer
   (off-screen behind the keyboard, which is fine). */
.save-dock.is-floating {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 8px 14px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--line);
  will-change: transform;
}

.more-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.88rem;
  font-family: var(--font-mono);
  opacity: 0.78;
  display: inline-flex;
  align-items: center;
}

.more-link:hover,
.more-link:focus-visible {
  color: var(--accent);
  outline: none;
}

.more-link[data-tooltip] {
  position: relative;
}

.more-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease 0ms;
  z-index: 10;
}

.more-link[data-tooltip]:hover::after,
.more-link[data-tooltip]:focus-visible::after {
  opacity: 1;
  transition-delay: 400ms;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  padding: 0 0.42rem;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--ink) 12%);
  border-bottom-width: 2px;
  border-radius: 0.42rem;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(23, 23, 23, 0.03);
}

.status-toast {
  position: fixed;
  left: 50%;
  bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(-50%) translateY(100%);
  z-index: 30;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  color: var(--ink);
  box-shadow: 0 -4px 16px rgba(23, 23, 23, 0.06);
  font-size: 0.88rem;
  font-family: var(--font-mono);
  text-align: center;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}

.status-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.status-toast.is-hint {
  max-width: min(420px, calc(100vw - 32px));
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--paper) 98%, var(--accent) 4%);
}

.search-mode {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  /* Opaque: the editor's placeholder and text must not ghost through
     behind results or the /about and /q sheets. */
  background: var(--bg);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.search-mode[hidden] {
  display: none;
}

.search-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px 8px;
}

.search-mode-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-mode-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem; /* 13px chrome baseline; fixed, not --note-font-size */
  letter-spacing: -0.01em;
}

.search-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem; /* 13px chrome baseline; fixed, not --note-font-size */
}

.search-close:hover,
.search-close:focus-visible {
  color: var(--accent);
  outline: none;
}

.search-mode-input-wrap {
  padding: 0 20px;
}

.search-input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 14px 16px;
  outline: none;
  font-size: 0.875rem; /* 14px — matches the editor's default typing size; 1rem mono read oversized next to 13px chrome */
  font-family: var(--font-mono);
}

.search-input:focus {
  border-color: var(--accent);
}

.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
}

.search-suggestion {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.8125rem; /* 13px chrome baseline; fixed, not --note-font-size */
  font-family: var(--font-mono);
}

.search-suggestion:hover,
.search-suggestion:focus-visible,
.search-suggestion.is-selected {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  outline: none;
  background: color-mix(in srgb, var(--paper) 98%, var(--accent) 8%);
}

.editor-suggestions .search-suggestion {
  font-size: 0.78rem;
}

.entry-list {
  padding: 10px 20px 28px;
  overflow: auto;
}

.entry-card {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  padding: 14px 8px 16px;
  cursor: pointer;
  border-radius: 8px;
}

.entry-card:first-child {
  padding-top: 18px;
}

.entry-card.is-selected {
  background: color-mix(in srgb, var(--paper) 92%, var(--accent) 12%);
}

.entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.entry-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.entry-meta-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.entry-timestamp {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Word count for long blocks, visible only while the block is expanded. */
.entry-stats {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.entry-card.collapsed .entry-stats {
  display: none;
}

.copy-button,
.delete-button,
.edit-button,
.pin-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 2px 0;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--font-sans);
}

.copy-button:hover,
.copy-button:focus-visible,
.edit-button:hover,
.edit-button:focus-visible,
.delete-button:hover,
.delete-button:focus-visible,
.pin-button:hover,
.pin-button:focus-visible {
  color: var(--accent);
  outline: none;
}

.pin-button[aria-pressed="true"] {
  color: var(--accent);
}

.delete-button.is-confirming {
  color: #d1242f;
  font-weight: 600;
}

.entry-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: var(--note-font-size); /* scales with /font, like the composer */
  line-height: 1.6;
  opacity: 0.96;
}

.entry-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
}

.entry-link:hover,
.entry-link:focus-visible {
  text-decoration-color: var(--accent);
}

.entry-body mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag-chip {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: var(--font-sans);
}

.tag-chip:hover,
.tag-chip:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  outline: none;
}

.mention-chip {
  border-style: dashed;
}

/* /inbox full-view triage — composer stays visible (compacted) above the list */
.inbox-view {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 20px 16px;
}

.editor-wrap.is-inbox #entryInput,
.editor-wrap.is-inbox .sym-palette {
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
  padding-bottom: 12px;
}

.editor-wrap.is-inbox .inbox-view {
  display: flex;
}

.inbox-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.inbox-view-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.inbox-view-subtitle {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.inbox-empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 16px 8px;
}

.inbox-entry {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  padding: 14px 8px 16px;
}

.inbox-entry.is-undecryptable {
  opacity: 0.8;
}

.inbox-entry-meta {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.inbox-entry-text {
  margin: 0 0 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

.inbox-entry-text.inbox-entry-error {
  font-family: var(--font-sans);
  color: var(--muted);
  font-style: italic;
}

.inbox-entry-actions {
  display: flex;
  gap: 10px;
}

.inbox-entry-actions button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-sans);
}

.inbox-entry-actions button:hover,
.inbox-entry-actions button:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  outline: none;
}

.inbox-entry-actions button.inbox-action-primary {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.inbox-entry-actions button.inbox-action-primary:hover,
.inbox-entry-actions button.inbox-action-primary:focus-visible {
  color: var(--paper);
  opacity: 0.88;
}

.entry-card.collapsed .entry-body {
  max-height: 6.35em;
  overflow: hidden;
}

.entry-card.collapsed .entry-body::after {
  content: "";
  display: block;
  pointer-events: none;
  height: 1.8em;
  margin-top: -1.8em;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg) 86%, transparent));
}

.expand-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 0 0;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-sans);
}

.expand-button:hover,
.expand-button:focus-visible {
  color: var(--accent);
  outline: none;
}

.date-group-label {
  /* Stays pinned to the top of the scrolling list so long views keep their
     place ("This week", "Older") visible while scrolling. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  margin: 0;
  padding: 14px 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.empty-state {
  padding: 18px 0 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.quick-reference {
  padding: 10px 20px 8px;
  color: var(--ink);
  columns: 2;
  column-gap: 32px;
}

.qr-group {
  break-inside: avoid;
}

.quick-reference p {
  margin: 0 0 10px;
}

@media (max-width: 600px) {
  .quick-reference {
    columns: 1;
  }
}

/* /about guide: one narrow prose column with the same mono headings as /q. */
.qr-guide[hidden],
.qr-sheet[hidden] {
  display: none;
}

.qr-guide {
  columns: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
  padding-bottom: 20px;
}

.qr-guide p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.qr-guide p:last-child {
  margin-bottom: 0;
}

/* /q reference sheet: a grid of task groups, each a key -> description table.
   /about keeps the prose .quick-reference layout above; only #quickReference
   carries .qr-sheet. */
.qr-sheet {
  columns: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  align-items: start;
  padding-bottom: 20px;
}

.qr-col {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.qr-title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.qr-title-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.qr-rows {
  display: grid;
  grid-template-columns: fit-content(48%) 1fr;
  column-gap: 14px;
  row-gap: 7px;
  align-items: baseline;
  font-size: 0.9rem;
}

.qr-key {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink);
}

.qr-key kbd {
  vertical-align: baseline;
}

.qr-sep {
  margin: 0 3px;
  color: var(--muted);
}

.qr-desc {
  line-height: 1.5;
  color: var(--ink);
}

.qr-sheet .qr-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  .qr-sheet {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .qr-col {
    gap: 20px;
  }
  .qr-rows {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .qr-desc {
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--line);
  }
}

.search-shortcuts {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--line);
  opacity: 0.82;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lock-toggle[data-state="locked"],
.lock-toggle[data-state="unlocked"] {
  color: var(--accent);
}

.vault-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

.vault-overlay[hidden] {
  display: none;
}

.vault-card {
  width: min(360px, 100%);
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(23, 23, 23, 0.06);
  font-family: var(--font-sans);
}

.vault-icon {
  display: block;
  margin: 0 auto 16px;
  color: var(--muted);
}

.vault-title {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin: 0 0 4px;
  color: var(--ink);
}

.vault-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.45;
}

.vault-input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  font-size: 0.95rem;
  font-family: var(--font-mono);
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: 0.15em;
}

.vault-input:focus {
  border-color: var(--accent);
}

.vault-input::placeholder {
  letter-spacing: normal;
  font-family: var(--font-sans);
  color: #9a948a;
}

.vault-textarea {
  text-align: left;
  letter-spacing: normal;
  font-size: 0.8rem;
  line-height: 1.4;
  resize: vertical;
  word-break: break-all;
}

.vault-strength {
  font-size: 0.85rem;
  text-align: center;
  margin: 4px 0 10px;
  font-family: var(--font-sans);
  color: var(--muted);
  min-height: 1.1em;
}

.vault-strength[data-state="weak"] {
  color: #b8404a;
}

.vault-strength[data-state="medium"] {
  color: #b87830;
}

.vault-strength[data-state="strong"] {
  color: #4a8a4a;
}

.vault-button {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9rem;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
}

.vault-button:hover,
.vault-button:focus-visible {
  opacity: 0.88;
  outline: none;
}

.vault-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vault-button:disabled:hover,
.vault-button:disabled:focus-visible {
  opacity: 0.4;
}

.vault-button.danger {
  background: #d1242f;
  color: #fff;
}

.wipe-warning {
  font-size: 0.85rem;
  color: #d1242f;
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.45;
}

.vault-button.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
  margin-top: 8px;
}

.vault-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  font-family: var(--font-sans);
  padding: 4px 0;
}

.vault-link:hover,
.vault-link:focus-visible {
  color: var(--accent);
  outline: none;
}

.recovery-key {
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
  text-align: center;
}

.recovery-key code {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  word-break: break-all;
  line-height: 1.6;
  color: var(--ink);
}

.recovery-warning {
  font-size: 0.8rem;
  color: #d1242f;
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.45;
}

.vault-error {
  font-size: 0.82rem;
  color: #d1242f;
  text-align: center;
  margin: 0 0 12px;
}

.encrypting-status {
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 12px 0;
}

.encrypting-status .dot {
  display: inline-block;
  animation: vault-pulse 1.2s infinite;
}

@keyframes vault-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Search-result cards are shift-click multi-selectable. Without this, a
   shift-click extends the browser's native text selection on mousedown
   (before our click handler can preventDefault), painting ragged highlight
   runs over the card on top of .is-multi-selected. Blocks are the selection
   unit here; users expand/copy a block to get at its text. */
.search-mode .entry-card {
  -webkit-user-select: none;
  user-select: none;
}

/* ...but the note text itself stays selectable so a word or line can be
   drag-selected and copied without opening the block in the editor. */
.search-mode .entry-card .entry-body {
  -webkit-user-select: text;
  user-select: text;
}

.entry-card.is-multi-selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

.modal-card {
  position: relative;
  width: min(380px, 100%);
  padding: 26px 26px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--ink) 16%, transparent);
  font-family: var(--font-sans);
}

.modal-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ink);
}

.modal-warning {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 18px;
}

.modal-input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 10px;
  padding: 11px 13px;
  outline: none;
  font-size: 0.92rem;
  font-family: var(--font-sans);
  margin-bottom: 6px;
}

.modal-input:focus {
  border-color: var(--accent);
}

.modal-input::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.modal-input-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 16px 2px;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.modal-button {
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}

.modal-button-primary {
  background: var(--ink);
  color: var(--paper);
}

.modal-button-primary:hover,
.modal-button-primary:focus-visible {
  opacity: 0.88;
  outline: none;
}

.modal-button-secondary {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

.modal-button-secondary:hover,
.modal-button-secondary:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  outline: none;
}

@media (max-width: 700px) {
  .topbar,
  .command-bar,
  .search-mode-header,
  .search-mode-input-wrap,
  .search-shortcuts,
  .entry-list,
  #entryInput,
  .editor-suggestions,
  .find-replace-bar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar {
    align-items: flex-start;
    gap: 10px;
    flex-direction: column;
  }

  .status-toast {
    left: 50%;
    right: auto;
    bottom: 0;
  }

  .command-bar {
    flex-direction: column;
  }

  .footer-actions {
    width: 100%;
    justify-content: space-between;
  }

  /* Docked in the footer (keyboard closed): full-width, finger-friendly. */
  .save-dock {
    width: 100%;
  }

  .save-block-btn {
    width: 100%;
    min-height: 44px;
  }

  /* Floated above the keyboard: shrink back to an auto-width, right-aligned
     button on the minimal bar. */
  .save-dock.is-floating .save-block-btn {
    width: auto;
    min-width: 120px;
  }

  /* Keep the last editor line clear of the floating Save bar. */
  body.keyboard-open #entryInput {
    padding-bottom: 64px;
    scroll-padding-bottom: 64px;
  }

  /* Finger-friendly tap target for "Saved (N)" on mobile, where ⌘K is
     unavailable. Desktop stays compact. */
  .saved-count {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .command-palette {
    order: -1;
    margin: 14px 14px 0;
    max-height: calc(6 * 56px);
  }

  .command-palette-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .command-palette-desc {
    text-align: left;
  }
}

/* Sync setup + /mirror pairing */
.vault-input[data-field="url"],
.vault-input[data-field="token"] {
  text-align: left;
  letter-spacing: normal;
}

.mirror-card {
  width: min(420px, 100%);
  text-align: center;
}

.vault-warning {
  font-size: 0.8rem;
  color: var(--accent);
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.45;
}

.mirror-qr {
  display: block;
  width: 260px;
  height: 260px;
  max-width: 100%;
  margin: 0 auto 16px;
  image-rendering: pixelated;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mirror-fields {
  margin: 0 0 20px;
  text-align: left;
  font-size: 0.78rem;
}

.mirror-fields dt {
  color: var(--muted);
  font-family: var(--font-sans);
  margin-top: 8px;
}

.mirror-fields dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--font-mono);
  word-break: break-all;
}

/* ============================================================
   FIRST-VISIT INTRO OVERLAY — redesigned with a consistent
   type scale and spacing rhythm. All sizes/spaces derive from
   the scales below so nothing is arbitrary.

   TYPE SCALE (mono display + sans body):
     --intro-display : clamp(1.2rem,2vw,1.45rem)    hero headline (largest)
     --intro-section : clamp(1.05rem,1.6vw,1.2rem)  section titles (a step down)
     --intro-lead    : 1.0625rem (17px)   proof + section lead
     --intro-body    : 0.9375rem (15px)   descriptive copy (strip values, tier copy)
     --intro-label   : 0.8125rem (13px)   mono eyebrows / kickers / prices / footer
     --intro-tiny    : 0.75rem (12px)      tier numbers

   SPACING RHYTHM (vertical):
     --intro-s1: 8px  --intro-s2: 16px  --intro-s3: 24px
     --intro-s4: 40px --intro-s5: 64px
   Sections separate by s5, elements within by s2/s3, tight pairs by s1.
   ============================================================ */

.intro-overlay {
  --intro-display: clamp(1.2rem, 2vw, 1.45rem);
  --intro-section: clamp(1.05rem, 1.6vw, 1.2rem);
  --intro-lead: 1.0625rem;
  --intro-body: 0.9375rem;
  --intro-label: 0.8125rem;
  --intro-tiny: 0.75rem;

  --intro-s1: 8px;
  --intro-s2: 16px;
  --intro-s3: 24px;
  --intro-s4: 40px;
  --intro-s5: 64px;

  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  transition: opacity 0.22s ease;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

html.show-intro .intro-overlay,
.intro-overlay.is-open {
  display: block;
}

.intro-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}

.intro-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--intro-s3) var(--intro-s3) var(--intro-s5);
}

/* --- brand --- */
.intro-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--intro-lead);
  letter-spacing: -0.01em;
}

.intro-brand img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

/* --- hero --- */
.intro-hero {
  padding-top: var(--intro-s5);
}

.intro-headline {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--intro-display);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.intro-caret {
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-left: 3px;
  vertical-align: -0.06em;
  border-radius: 1px;
  background: var(--accent);
  animation: intro-blink 1.15s steps(1) infinite;
}

@keyframes intro-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.intro-proof {
  margin: var(--intro-s2) 0 0;
  max-width: 52ch;
  font-size: var(--intro-lead);
  line-height: 1.5;
  color: var(--muted);
}

.intro-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--intro-s2);
  margin-top: var(--intro-s3);
}

.intro-start {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--intro-body);
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.intro-start:hover {
  transform: translateY(-1px);
}

.intro-arr {
  transition: transform 0.15s ease;
}

.intro-start:hover .intro-arr {
  transform: translateX(3px);
}

.intro-ghost {
  font-family: var(--font-mono);
  font-size: var(--intro-label);
  color: var(--muted);
}

/* --- proof strip --- */
.intro-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--intro-s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.intro-strip-cell {
  padding: var(--intro-s3);
}

.intro-strip-cell:not(:last-child) {
  border-right: 1px solid var(--line);
}

.intro-k {
  margin: 0 0 var(--intro-s1);
  font-family: var(--font-mono);
  font-size: var(--intro-label);
  letter-spacing: 0.03em;
  color: var(--muted);
}

.intro-v {
  margin: 0;
  font-size: var(--intro-body);
  line-height: 1.55;
  color: var(--ink);
}

/* --- how it works --- */
.intro-how {
  padding-top: var(--intro-s5);
}

.intro-sec-eyebrow {
  margin: 0 0 var(--intro-s2);
  font-family: var(--font-mono);
  font-size: var(--intro-label);
  letter-spacing: 0.04em;
  color: var(--accent);
}

.intro-sec-title {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-mono);
  font-size: var(--intro-section);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.intro-sec-lead {
  margin: var(--intro-s2) 0 0;
  max-width: 56ch;
  font-size: var(--intro-lead);
  line-height: 1.5;
  color: var(--muted);
}

.intro-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--intro-s2);
  margin-top: var(--intro-s3);
}

.intro-tier {
  display: flex;
  flex-direction: column;
  padding: var(--intro-s3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.intro-tier-num {
  margin-bottom: var(--intro-s2);
  font-family: var(--font-mono);
  font-size: var(--intro-tiny);
  color: var(--muted);
}

.intro-tier h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--intro-body);
  font-weight: 600;
}

.intro-tier p {
  margin: var(--intro-s1) 0 0;
  font-size: var(--intro-body);
  line-height: 1.55;
  color: var(--muted);
}

.intro-tier-price {
  margin-top: auto;
  padding-top: var(--intro-s2);
  font-family: var(--font-mono);
  font-size: var(--intro-label);
  color: var(--ink);
}

.intro-soon {
  color: var(--muted);
}

/* --- footer --- */
.intro-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--intro-s5);
  padding-top: var(--intro-s3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--intro-label);
  color: var(--muted);
}

.intro-footer-brand {
  font-family: var(--font-mono);
}

.intro-footer-credit {
  color: var(--muted);
}

.intro-heart {
  color: var(--ink);
}

.intro-links {
  display: flex;
  gap: 20px;
}

.intro-links a {
  color: var(--muted);
  text-decoration: none;
}

.intro-links a:hover {
  color: var(--ink);
}

.intro-replay-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 680px) {
  .intro-strip {
    grid-template-columns: 1fr;
  }
  .intro-strip-cell:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .intro-tiers {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay,
  .intro-start,
  .intro-arr {
    transition: none;
  }
  .intro-caret {
    animation: none;
  }
}

/* /sym symbol palette — sits below the composer like the command palette so
   the text being built stays visible while symbols are inserted. */
.sym-palette {
  margin: 0 20px 14px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%);
  font-family: var(--font-sans);
  max-height: 44vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sym-palette[hidden] {
  display: none;
}

.sym-palette-header,
.sym-palette-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sym-palette-header {
  margin-bottom: 10px;
}

.sym-palette-footer {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.sym-palette-title {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.sym-palette-hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.sym-palette-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.82rem;
  font-family: var(--font-sans);
}

.sym-palette-close:hover,
.sym-palette-close:focus-visible {
  color: var(--accent);
  outline: none;
}

.sym-section {
  margin-bottom: 10px;
}

.sym-section-label {
  margin: 0 0 6px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.sym-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  align-items: center;
}

.sym-key {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.sym-key:hover,
.sym-key:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--paper) 92%, var(--accent) 12%);
  outline: none;
}

.sym-key:active {
  background: color-mix(in srgb, var(--paper) 80%, var(--accent) 20%);
}

.sym-palette-status {
  font-size: 0.78rem;
  color: var(--accent);
}

.sym-palette-status:empty {
  display: none;
}

/* The status toast is fixed to the viewport bottom and text-only; while the
   palette is open it must not swallow clicks meant for the lowest key row. */
body:has(.sym-palette:not([hidden])) .status-toast {
  pointer-events: none;
}

.sym-recent-empty {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

.sym-convert {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-sans);
}

.sym-convert:hover,
.sym-convert:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  outline: none;
}

@media (max-width: 600px) {
  .sym-palette {
    margin: 0 12px 12px;
    max-height: 40vh;
  }

  .sym-key {
    min-width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }
}

/* Pinned-blocks panel: opened by the ★ in the top bar, drops in directly
   under it at the top of the editor area (not below the textarea like /sym)
   so it stays visible on phones with the keyboard up. Same card treatment
   as the command palette; rows reuse its two-column name/desc layout. */
.pinned-panel {
  margin: 6px 20px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%);
  font-family: var(--font-sans);
}

.pinned-panel[hidden] {
  display: none;
}

.pinned-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px 8px;
}

.pinned-panel-title {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.pinned-panel-hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.pinned-panel-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.82rem;
  font-family: var(--font-sans);
}

.pinned-panel-close:hover,
.pinned-panel-close:focus-visible {
  color: var(--accent);
  outline: none;
}

.pinned-list {
  display: flex;
  flex-direction: column;
  max-height: calc(7 * 38px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.pinned-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.pinned-item:last-child {
  border-bottom: 0;
}

.pinned-item:hover,
.pinned-item:focus-visible {
  background: color-mix(in srgb, var(--paper) 92%, var(--accent) 12%);
  color: var(--accent);
  outline: none;
}

.pinned-item-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-item-when {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.pinned-item:hover .pinned-item-when,
.pinned-item:focus-visible .pinned-item-when {
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}

.pinned-panel .empty-state {
  margin: 0;
  padding: 4px 12px 12px;
}

.pinned-panel-footer {
  padding: 8px 12px 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.pinned-panel-all {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.82rem;
  font-family: var(--font-sans);
}

.pinned-panel-all:hover,
.pinned-panel-all:focus-visible {
  color: var(--accent);
  outline: none;
}

@media (pointer: coarse) {
  .pinned-item {
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 600px) {
  .pinned-panel {
    margin: 4px 12px 0;
  }

  .pinned-list {
    max-height: 40vh;
  }
}

/* Quick start — first-run hint bar (grid row 4, between the composer and the
   footer) and the 4-card walkthrough overlay. The bar is plain flow layout so
   it never touches the keyboard-float math; the overlay reuses the modal
   shell (backdrop + paper card) and the intro's opacity fade. */
.quick-start-hint {
  grid-row: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
}

.quick-start-hint[hidden] {
  display: none;
}

.quick-start-hint-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.quick-start-hint-link:hover,
.quick-start-hint-link:focus-visible {
  color: var(--ink);
  outline: none;
}

.quick-start-hint-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  line-height: 1;
}

.quick-start-hint-close:hover,
.quick-start-hint-close:focus-visible {
  color: var(--accent);
  outline: none;
}

@media (max-width: 700px) {
  .quick-start-hint {
    padding-left: 14px;
    padding-right: 14px;
    flex-wrap: wrap;
  }
  .quick-start-hint-close {
    padding: 8px 10px;
  }
}

/* Above modals and the floating save dock (40), below the intro (60). */
.quick-start {
  z-index: 50;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.quick-start.is-open {
  opacity: 1;
}

.quick-start.is-closing {
  opacity: 0;
  pointer-events: none;
}

.quick-start-card {
  width: min(440px, 100%);
  padding: 22px 26px 20px;
}

.quick-start-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.quick-start-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.quick-start-body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
}

.quick-start-body p {
  margin: 0 0 10px;
}

.quick-start-body p:last-child {
  margin-bottom: 0;
}

.quick-start-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.quick-start-note {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.quick-start-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.quick-start-dots {
  display: flex;
  gap: 6px;
}

.quick-start-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}

.quick-start-dot.is-active {
  background: var(--accent);
}

.quick-start-actions {
  display: flex;
  gap: 8px;
}

.quick-start-actions .modal-button {
  font-family: var(--font-mono);
  min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .quick-start {
    transition: none;
  }
}

/* Pull-conflict card: per-side block previews */
.pull-diff-label {
  margin: 0 0 6px;
  text-align: left;
}

.pull-diff-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.45;
  text-align: left;
}

.pull-diff-list li {
  padding: 4px 10px;
  border-left: 2px solid var(--line);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pull-diff-list .pull-diff-more {
  color: var(--muted);
  border-left-color: transparent;
}

.pull-diff-detail {
  font-size: 0.75rem;
}

/* Txtshell account cards (central mode) — reuse .vault-card; these are the extras. */
.phrase-words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin: 12px 0;
  padding: 12px 16px;
  list-style: none;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.35));
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  text-align: left;
  user-select: all;
}
.phrase-words li {
  padding: 2px 0;
}
.phrase-check {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.phrase-input {
  min-height: 72px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.devices-list {
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 13px;
}
.devices-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border, rgba(127, 127, 127, 0.25));
}
.devices-list li:first-child {
  border-top: 0;
}
.vault-link.inline {
  display: inline;
  margin: 0;
  padding: 0;
}