:root {
  color-scheme: light;
  /* Theme tokens. The default here is METALLIC; every theme overrides these via
     [data-theme=...] below, and production's pastel palette lives verbatim in
     [data-theme="pastel"] so the two apps can still be compared colour by
     colour. Values are static hex on purpose — no colour maths at runtime. */
  --bg: #eef1f5;
  --surface: #ffffff;
  --ink: #1f2733;
  --muted: #5f6b7a;
  --line: #d7dee6;
  --accent: #4d7093;
  --accent-dark: #395978;
  --grad-1: #566f8b;
  --grad-2: #9fb0bd;
  /* Text placed ON the accent / accent-dark fills. Separate tokens because a
     pale accent needs dark text while its darker hover state still wants
     white. */
  --on-accent: #ffffff;
  --on-accent-dark: #ffffff;
  /* One step in from --bg, in the theme's own hue. Every theme overrides this
     below; production's #eaf7ff lives on in [data-theme="pastel"]. */
  --soft: #e3eaf0;
  /* Sample text must read as a sample, never as content already typed. */
  --placeholder: #b6b0c2;
  --error-ink: #a5485c;
  /* Frosted fills. Translucent so the themed --bg tints them; the dark set
     lifts off the dark ground instead of laying white over it. */
  --veil: rgba(255,255,255,.9);
  --veil-soft: rgba(255,255,255,.78);
  --veil-chip: rgba(255,255,255,.72);
  --warm: #fff8df;
  --warn: #bd6477;
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  /* (--blue is gone: a single sky-blue token cannot belong to twelve palettes.
     Everything that used it now takes --accent-dark on --soft, which follows
     the theme and is contrast-fitted per theme.) */
  --success: #2e7654;
  --warning: #96651d;
  font-family: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing: 0.01em;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  min-height: 100vh;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-header, main, footer {
  margin-inline: auto;
  max-width: 760px;
  width: calc(100% - 28px);
}

.app-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 2px 14px;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
}

.dev-badge {
  background: #35205c;
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  letter-spacing: 0.08em;
  margin-left: 4px;
  padding: 3px 7px;
}

h1, h2 { margin: 0; }
h1 { font-size: clamp(26px, 6vw, 38px); }
h2 { font-size: 22px; }

.header-actions { align-items: flex-end; display: flex; flex-direction: column; gap: 8px; }
.status-pill, .count-badge {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}
.status-pill.online { color: var(--success); }
.status-pill.offline { background: #fff7e7; color: var(--warning); }

main { display: grid; gap: 16px; padding-bottom: calc(94px + env(safe-area-inset-bottom)); }

.notice, .memo-form, .queue-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
}

.notice {
  border-color: var(--line);
  display: grid;
  font-size: 13px;
  gap: 4px;
  padding: 13px 16px;
}
.notice span { color: var(--muted); }

.memo-form { display: grid; gap: 16px; padding: clamp(18px, 5vw, 28px); }
.memo-form label { display: grid; font-weight: 700; gap: 7px; }
.memo-form small, .queue-note { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.6; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-assist { align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-wrap: wrap; gap: 8px; margin-top: -5px; padding: 10px; } .theme-assist[hidden] { display: none; } .theme-assist-label { color: var(--accent-dark); font-size: 12px; font-weight: 800; } .theme-chip-list { display: flex; flex: 1 1 220px; flex-wrap: wrap; gap: 7px; } .theme-chip, .theme-refresh-button { border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.25; min-height: 34px; padding: 7px 10px; } .theme-chip { background: var(--surface); border: 1px solid var(--line); color: var(--accent-dark); } .theme-chip:focus-visible, .theme-refresh-button:focus-visible { outline: 3px solid rgba(0, 0, 0, 0.22); outline-offset: 2px; } .theme-refresh-button { background: transparent; border: 1px solid transparent; color: var(--accent-dark); text-decoration: underline; } .theme-category-hint { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.5; margin: -8px 0 0; }

input, select, textarea {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  min-height: 48px;
  padding: 11px 13px;
  width: 100%;
}
textarea { line-height: 1.65; resize: vertical; }
/* The new-memo screen shows a full sample theme and body as placeholder text.
   At the browser default (#757575) it reads as content the user already wrote,
   so it is deliberately lighter than --muted. opacity:1 is for Firefox, which
   otherwise dims placeholders a second time. */
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.10);
  outline: none;
}

.photo-preview {
  align-items: flex-start;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  padding: 10px;
}
.photo-preview[hidden] { display: none; }
.photo-preview img { border-radius: 10px; height: 96px; object-fit: cover; width: 96px; }

.form-actions { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; }
.primary-button, .secondary-button, .text-button {
  border-radius: 12px;
  font-weight: 800;
  min-height: 46px;
  padding: 10px 15px;
}
.primary-button { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); }
.secondary-button { background: var(--surface); border: 1px solid var(--line); color: var(--accent-dark); }
.text-button { background: transparent; border: 1px solid var(--line); color: var(--accent-dark); min-height: 36px; padding: 6px 10px; }
.primary-button:disabled { cursor: wait; opacity: 0.65; }
.form-message { color: var(--success); font-size: 13px; font-weight: 700; margin: 0; min-height: 20px; }
.form-message.error, .status-error { color: var(--error-ink); }

.queue-section { padding: clamp(18px, 5vw, 26px); }
.section-heading { align-items: center; display: flex; justify-content: space-between; }
.queue-note { margin: 9px 0 16px; }
.sync-panel { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; margin: 14px 0; padding: 14px; }
.sync-panel .queue-note { margin: 5px 0 0; }
.sync-actions { display: grid; gap: 9px; grid-template-columns: 1fr 1.35fr; margin-top: 12px; }
.sync-actions button:disabled { cursor: not-allowed; opacity: 0.55; }
.auth-secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.auth-secondary-actions .text-button { font-size: 12px; min-height: 34px; }
.memo-list { display: grid; gap: 11px; }
.empty-state { background: var(--soft); border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); margin: 0; padding: 22px; text-align: center; }
.memo-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.memo-card h3 { font-size: 16px; margin: 0; }
.memo-photo { border-radius: 10px; display: block; margin-top: 10px; max-height: 180px; max-width: 100%; object-fit: cover; }
.memo-card-actions { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; }

footer {
  color: var(--muted);
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  padding: 0 2px max(20px, env(safe-area-inset-bottom));
}

@media (max-width: 520px) {
  .field-row, .form-actions, .sync-actions { grid-template-columns: 1fr; }
  .app-header { align-items: flex-start; }
}

@media (display-mode: standalone) {
  .dev-badge { background: #7a3d95; }
}

.main-tabs { background: var(--veil-soft); border-top: 1px solid var(--line); bottom: 0; display: grid; gap: 2px; grid-template-columns: repeat(5, minmax(0, 1fr)); left: 0; padding: 7px max(8px, env(safe-area-inset-left)) max(7px, env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 20; }
.main-tab { align-items: center; background: transparent; border: 0; color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 2px; justify-items: center; min-height: 51px; padding: 4px 2px; }
.main-tab > span:first-child { font-size: 16px; line-height: 1; }
.main-tab.active { color: var(--accent-dark); }
.tab-panel[hidden] { display: none; }
.tab-panel.active { display: grid; gap: 16px; }
.journal-calendar { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; padding: 12px; }
.calendar-nav { align-items: center; display: grid; gap: 7px; grid-template-columns: auto 1fr auto auto; margin-bottom: 10px; }
.calendar-nav strong { font-size: 15px; text-align: center; }
.calendar-nav .text-button { min-height: 34px; padding: 5px 9px; }
.calendar-weekdays, .calendar-grid { display: grid; gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.calendar-grid { margin-top: 5px; }
.calendar-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); min-height: 50px; padding: 5px; text-align: left; }
.calendar-cell.other-month { opacity: .42; }
.calendar-cell.today { border-color: var(--accent); }
.calendar-cell.selected { background: var(--soft); border-color: var(--accent); }
.calendar-day-panel { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.calendar-day-title { color: var(--accent-dark); font-size: 13px; font-weight: 800; margin: 0 0 9px; }
.static-panel { min-height: 180px; }
.help-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.help-switch .text-button.active { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent-dark); }
.help-view[hidden] { display: none; }
.settings-summary { display: grid; gap: 8px; margin: 0; }
.settings-summary div { align-items: baseline; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; display: flex; justify-content: space-between; padding: 10px 12px; }
.settings-summary dt { color: var(--muted); font-size: 12px; font-weight: 800; }
.settings-summary dd { font-size: 13px; font-weight: 800; margin: 0; text-align: right; }
.trash-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.trash-toolbar .queue-note { margin: 0; }
.danger-button { background: var(--surface); border: 1px solid #bd4c61; border-radius: 9px; color: #a5485c; font: inherit; font-size: 12px; font-weight: 800; min-height: 36px; padding: 6px 10px; }
@media (max-width: 520px) { .main-tab { font-size: 9px; } .calendar-cell { min-height: 44px; } }
/* PRODUCTION UI PARITY v38 — Dev keeps its independent offline/sync model while using the current production layout language. */
:root { font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", "Rounded Mplus 1c", sans-serif; }
body { background: var(--bg); }
.app-header, main, footer { max-width: 1080px; width: calc(100% - 32px); }
.app-header.topbar { align-items: center; display: flex; justify-content: flex-end; margin: 0 auto 8px; padding: max(12px, env(safe-area-inset-top)) 0 0; }
/* Wraps because the row is not fixed-width: iOS also shows the install button,
   and the sync state can read 「同期待ち」. Without wrapping that
   combination runs off the right edge of a 375px phone. */
.topbar-actions { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.status-pill { align-items: center; background: var(--veil-soft); border: 1px solid var(--line); color: var(--muted); display: inline-flex; font-size: 13px; font-weight: 700; gap: 8px; min-height: 36px; padding: 8px 12px; }
.status-dot { background: #d7a46b; border-radius: 50%; flex: 0 0 auto; height: 8px; width: 8px; }
.status-pill.online .status-dot { background: #75b7d8; }
.status-pill.online, .status-pill.offline { background: var(--veil-soft); color: var(--muted); }
.network-status-icon { gap: 0; justify-content: center; min-width: 36px; padding: 8px; }
.network-status-icon .network-icon { display: block; fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 20px; }
.network-status-icon .network-icon-offline { display: none; }
.network-status-icon.offline .network-icon-online { display: none; }
.network-status-icon.offline .network-icon-offline { display: block; }
.network-status-icon.online { color: var(--success); }
.network-status-icon.offline { color: var(--warning); }
.visually-hidden { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
/* The three sync states (plan §15.4). Waiting for the batch window is the normal
   resting state of a local-first app, so it stays in the quiet muted palette —
   only a real failure earns the warning colour. */
.sync-pill { align-items: center; appearance: none; background: var(--veil-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: default; display: inline-flex; font-family: inherit; font-size: 12px; font-weight: 700; min-height: 36px; padding: 8px 12px; white-space: nowrap; }
.sync-pill[data-sync-state="synced"] { color: var(--muted); }
.sync-pill[data-sync-state="failed"] { background: #fff7e7; color: var(--warning); }
.sync-pill[data-sync-action="review"] { cursor: pointer; }
.sync-pill[data-sync-action="review"]:hover { border-color: currentColor; }
.sync-pill[data-sync-action="review"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--warning) 35%, transparent); outline-offset: 2px; }
[data-mode="dark"] .sync-pill[data-sync-state="failed"] { background: #3a2f16; color: #e8c877; }
.language-button { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dark); flex: 0 0 auto; font-size: 12px; min-height: 36px; padding: 8px 12px; white-space: nowrap; }
.install-button { background: var(--soft); color: var(--accent-dark); }
/* Deliberately the loudest thing in the bar: it only appears when the app has
   no Google session, and at that moment it is the one action worth taking. */
.topbar-connect-button { background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; color: var(--on-accent); flex: 0 0 auto; font-size: 12px; font-weight: 800; min-height: 36px; padding: 8px 14px; white-space: nowrap; }
.topbar-connect-button:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent-dark); }
.topbar-connect-button[hidden] { display: none; }
.connect-hint { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; color: var(--accent-dark); font-size: 13px; line-height: 1.6; margin: 0 auto 12px; max-width: 720px; padding: 10px 14px; width: calc(100% - 24px); }
.connect-hint[hidden] { display: none; }
main { display: block; padding-bottom: 92px; }
.tab-panel.active { display: block; }
.panel, .queue-section, .journal-calendar { background: var(--veil); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.panel, .queue-section { padding: 18px; }
.notice, .calendar-intro, .brand, .dev-badge { display: none !important; }
footer { display: none; }
h2 { font-size: 18px; line-height: 1.3; }
h3 { font-size: 15px; margin: 0; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; min-height: 44px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,120,168,.16); }
.primary-button, .secondary-button, .text-button { border-radius: 12px; min-height: 44px; }
.primary-button { background: var(--accent); border-color: var(--accent); }
.primary-button:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent-dark); }
.secondary-button, .text-button { background: var(--soft); color: var(--accent-dark); }
.memo-form-panel { padding: 18px; }
.memo-form { background: transparent; border: 0; border-radius: 0; box-shadow: none; gap: 12px; padding: 0; }
.memo-form label { gap: 6px; }
.memo-form > label > span, .memo-details label > span { color: var(--accent-dark); font-size: 13px; }
#memoText { min-height: 300px; }
.quick-help-toggle > summary, .memo-details > summary, .sync-drawer > summary { color: var(--ink); cursor: pointer; font-size: 18px; font-weight: 700; list-style: none; }
.quick-help-toggle > summary::-webkit-details-marker, .memo-details > summary::-webkit-details-marker, .sync-drawer > summary::-webkit-details-marker { display: none; }
.quick-help-toggle > summary::before, .memo-details > summary::before, .sync-drawer > summary::before { color: var(--muted); content: "▸"; display: inline-block; margin-right: 7px; }
.quick-help-toggle[open] > summary::before, .memo-details[open] > summary::before, .sync-drawer[open] > summary::before { transform: rotate(90deg); }
.quick-help { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; margin: 10px 0 14px; padding: 12px; }
.quick-help h3 { margin: 0 0 8px; }
.quick-help ul { color: var(--muted); line-height: 1.65; margin: 0; padding-left: 1.2em; }
.theme-assist { border-radius: 8px; margin-top: 0; padding: 8px; }
.memo-details { border-top: 1px solid var(--line); padding-top: 12px; }
.memo-details[open] { display: grid; gap: 12px; }
.photo-actions.new-memo-tools { display: grid; gap: 8px; grid-template-columns: minmax(90px,.85fr) minmax(116px,1fr) minmax(76px,.8fr); }
.photo-add-button { align-items: center; cursor: pointer; display: inline-flex; justify-content: center; margin: 0; }
.memo-date-input { color: var(--ink); font-weight: 700; min-width: 0; }
.location-badge { min-width: 0; }
.photo-preview { background: var(--soft); border-radius: 8px; margin-bottom: 8px; }
.form-actions.save-actions { display: block; margin-top: 4px; }
.form-actions.save-actions .primary-button { width: 100%; }
.form-message { min-height: 0; text-align: center; }
.summary-grid { display: grid; gap: 6px; grid-template-columns: repeat(3,minmax(0,116px)); margin-bottom: 12px; max-width: 366px; }
.summary { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 0; padding: 8px; }
.summary span { color: var(--muted); display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary strong { display: block; font-size: 14px; line-height: 1.2; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-search-row { display: grid; gap: 12px; grid-template-columns: minmax(0,1fr) minmax(132px,.8fr); margin: 12px 0; }
.journal-toolbar { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin: 0 0 12px; }
.journal-toolbar .queue-note { margin: 0; }
.journal-coverage-note { margin: -4px 0 12px; }
.journal-toolbar .secondary-button { flex: 0 0 auto; }
.memo-card { border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.07); padding: 12px 14px; }
.memo-card h3 { font-size: 16px; }
.journal-more-button { margin-top: 12px; }
.sync-drawer { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.sync-drawer .queue-section { box-shadow: none; margin-top: 12px; padding: 0; }
.sync-drawer .section-heading { margin-bottom: 8px; }
.sync-panel { border-radius: 8px; padding: 12px; }
.sync-actions { grid-template-columns: 1fr 1.35fr; }
.auth-secondary-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.auth-secondary-actions .text-button { min-width: 0; padding-inline: 6px; white-space: nowrap; }
/* overflow-x: clip, not hidden: hidden would turn this into a scroll container
   on the other axis too, and the month slide only needs the horizontal spill
   trimmed. Sideways swipes page the month (see shiftCalendarMonth), so the
   browser must not claim them as a horizontal pan first. */
.calendar-shell { margin: 0; overflow-x: clip; touch-action: pan-y pinch-zoom; }
@keyframes calendarSlideFromRight { from { opacity: 0; transform: translateX(12%); } to { opacity: 1; transform: none; } }
@keyframes calendarSlideFromLeft { from { opacity: 0; transform: translateX(-12%); } to { opacity: 1; transform: none; } }
.calendar-grid.slide-from-right { animation: calendarSlideFromRight .18s ease-out; }
.calendar-grid.slide-from-left { animation: calendarSlideFromLeft .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .calendar-grid.slide-from-right, .calendar-grid.slide-from-left { animation: none; }
}
#tabCalendar .journal-calendar { margin: 0; }
.calendar-nav { align-items: center; display: grid; gap: 7px; grid-template-columns: auto minmax(0,1fr) auto auto; margin-bottom: 10px; }
.calendar-nav strong { font-size: 15px; text-align: center; }
.calendar-nav .text-button { min-height: 34px; padding: 5px 9px; }
.calendar-weekdays, .calendar-grid { display: grid; gap: 4px; grid-template-columns: 22px repeat(7,minmax(0,1fr)); }
.calendar-weekdays { color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.calendar-grid { margin-top: 5px; }
.calendar-cell { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; min-height: 54px; padding: 5px; }
.calendar-cell.selected { background: var(--soft); border-color: var(--accent); }
.calendar-week-button { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dark); cursor: pointer; font: inherit; font-size: 13px; margin: 0; min-height: 0; padding: 0; }
.ai-panel, .static-panel { min-height: 0; }
.ai-switch, .help-switch { background: var(--veil-soft); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px; padding: 4px; }
.ai-switch { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 14px 0; max-width: 420px; }
.help-switch { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 14px 0; }
.ai-switch .text-button, .help-switch .text-button { border: 0; border-radius: 12px; color: var(--muted); min-height: 40px; }
.ai-switch .text-button.active, .help-switch .text-button.active, .main-tab:hover, .main-tab.active { background: linear-gradient(135deg,var(--grad-text-1) 0%,var(--grad-text-2) 100%); color: var(--on-accent); }
.main-tabs { background: var(--veil-soft); border: 1px solid var(--line); border-radius: 22px; bottom: max(8px,env(safe-area-inset-bottom)); box-shadow: 0 14px 36px rgba(104,79,93,.20); gap: 4px; left: 50%; max-width: 720px; padding: 4px; right: auto; transform: translateX(-50%); width: calc(100% - 20px); }
.main-tab { border-radius: 16px; font-size: 11px; min-height: 58px; padding: 8px 4px; }
.main-tab > span:first-child { font-size: 19px; }
@media (max-width:520px) { .app-header, main, footer { width: calc(100% - 24px); } .memo-form-panel, .panel, .queue-section { padding: 18px; } #memoText { min-height: 300px; } .memo-search-row { grid-template-columns: 1fr; } .journal-toolbar { align-items: stretch; flex-direction: column; } .journal-toolbar .secondary-button { width: 100%; } .calendar-cell { min-height: 50px; } .calendar-weekdays, .calendar-grid { gap: 3px; grid-template-columns: 20px repeat(7,minmax(0,1fr)); } .calendar-week-button { font-size: 11px; } .auth-secondary-actions .text-button { font-size: 10px; } }

/* PRODUCTION UI PARITY v40 — geometry copied from Index.html so the dev screens
   read as the same app. Dev-only affordances stay, but they inherit production's
   spacing, type scale and control sizes instead of inventing their own. */
.panel + .panel { margin-top: 12px; }
.topbar-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 8px; text-align: right; }
.topbar-note[hidden] { display: none; }
.help-text { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inline-actions > * { flex: 1 1 145px; }
.button-link { align-items: center; background: var(--accent); border-radius: 12px; color: var(--on-accent); display: inline-flex; font-weight: 700; justify-content: center; min-height: 44px; padding: 10px 16px; text-decoration: none; }
.button-link.secondary-link { background: var(--soft); border: 1px solid var(--line); color: var(--accent-dark); }

/* 新規メモ: production puts the field label above the control in muted text and
   reveals the category select only once a theme exists. */
.memo-form > label > span, .memo-details label > span { color: var(--muted); font-size: 13px; }
.theme-category-row[hidden] { display: none; }
.theme-category-row { max-width: 420px; }
.photo-actions.new-memo-tools { grid-template-columns: minmax(68px,.8fr) minmax(108px,1fr) minmax(72px,.85fr) minmax(62px,.75fr); gap: 4px; max-width: 460px; }
.new-memo-tools > button, .new-memo-tools > .photo-add-button { border-radius: 8px; font-size: 12px; min-height: 36px; overflow: hidden; padding: 7px 4px; text-overflow: ellipsis; white-space: nowrap; }
/* The sibling buttons in this row are already 12px, but that rule only targets
   buttons — the date input kept inheriting 16px and its native yyyy/mm/dd text
   overflowed its grid column, hiding the day. */
.memo-date-input { border-radius: 8px; font-size: 12px; font-weight: 400; min-height: 36px; padding: 7px 4px; }
.weather-badge:disabled { cursor: not-allowed; opacity: .6; }
.memo-details > summary { font-size: 15px; }

/* メモ一覧: single-column search plus production's 4-way display control. */
.memo-search-row { display: block; margin: 12px 0; max-width: 420px; }
.mode-switch { background: var(--veil-soft); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px; padding: 4px; }
.display-control { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 12px; max-width: 640px; }
.mode-button { align-items: center; background: transparent; border: 0; border-radius: 12px; color: var(--muted); display: flex; font-weight: 800; justify-content: center; min-height: 40px; padding: 8px 10px; text-align: center; }
.mode-button.active, .mode-button:hover { background: linear-gradient(135deg,var(--grad-text-1) 0%,var(--grad-text-2) 100%); color: var(--on-accent); }
.filter-row { margin-bottom: 12px; max-width: 420px; }
.filter-row[hidden] { display: none; }
.filter-row label { color: var(--muted); display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.summary-grid-history { grid-template-columns: repeat(3,minmax(0,116px)); }
.facet-combobox { position: relative; }
.facet-combobox > input[role="combobox"] { width: 100%; }
.facet-option-list { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.16); left: 0; max-height: min(46vh,320px); overflow-y: auto; padding: 5px; position: absolute; right: 0; top: calc(100% + 4px); z-index: 35; }
.facet-option-list[hidden] { display: none; }
.facet-option { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--ink); cursor: pointer; display: flex; font: inherit; gap: 8px; justify-content: space-between; min-height: 44px; padding: 8px 10px; text-align: left; width: 100%; }
.facet-option:hover, .facet-option[aria-selected="true"] { background: var(--soft); }
.facet-option-count { color: var(--muted); flex: 0 0 auto; font-size: 12px; }
.field-hint { color: var(--muted); display: block; font-size: 11px; margin-top: 4px; }
.coverage-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.coverage-actions .journal-coverage-note { flex: 1 1 260px; margin: 0; }
.coverage-actions .secondary-button { flex: 0 0 auto; }
.backfill-notice { margin: 0 0 12px; width: 100%; }
.calendar-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.calendar-detail-actions > button { flex: 1 1 150px; }
#journalCalendarDetailStatus { margin: 0 0 10px; }
@media (max-width:520px) { .summary-grid-history { grid-template-columns: repeat(2,minmax(0,1fr)); } .coverage-actions { align-items: stretch; flex-direction: column; } /* flex-basis follows the MAIN axis. The row layout uses 1 1 260px to mean "at least 260px wide"; once this turns into a column that same 260px becomes a HEIGHT, so a one-line notice rendered as a card-sized blank block above the list. */ .coverage-actions .journal-coverage-note { flex: 0 0 auto; } .coverage-actions .secondary-button { width: 100%; } }
.sync-drawer > summary { align-items: center; display: flex; gap: 8px; }
.sync-drawer .count-badge { font-size: 11px; font-weight: 800; padding: 4px 9px; }

/* カレンダー: production's nav row, weekday tint and one category icon per day. */
.calendar-nav { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.calendar-nav button { margin: 0; min-height: 36px; min-width: 42px; padding: 7px 10px; }
.calendar-title { background: transparent; border: 1.5px solid transparent; border-radius: 12px; color: var(--ink); flex: 1 1 auto; font-size: 16px; font-weight: 700; min-width: 0; padding: 5px 12px; text-align: center; }
.calendar-title:hover, .calendar-title:focus-visible { background: var(--soft); border-color: var(--line); }
.calendar-weekdays { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.calendar-weekdays .cal-sun { color: #b04a4a; }
.calendar-weekdays .cal-sat { color: #3f6c94; }
.calendar-week-button { align-self: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 50%; color: var(--accent-dark); font-size: 10px; height: 20px; justify-self: center; line-height: 1; width: 20px; }
.calendar-cell { display: flex; flex-direction: column; font-size: 11px; padding: 4px 5px; }
.calendar-day-head { align-items: baseline; display: flex; gap: 2px; justify-content: space-between; }
.cal-more-mark { color: var(--muted); font-size: 9px; }
.cal-icons { align-items: center; display: flex; flex: 1 1 auto; justify-content: center; margin-top: 2px; }
.cal-icon { align-items: center; background: var(--cat-bg); border: 1px solid var(--cat-line); border-radius: 10px; color: var(--cat-ink); display: inline-flex; flex: 0 0 auto; height: 30px; justify-content: center; width: 30px; }
.cal-icon svg { display: block; height: 20px; width: 20px; }
/* Light category set. --cat-ink is darkened from production's value along its
   own hue until it clears AA on --cat-bg: v51 puts the chip and the calendar
   icon ON --cat-bg, and production's inks were only ever fitted against white
   (family 3.19, living 2.99, money 3.06 on their own backgrounds). The hue is
   what carries the meaning and it is untouched; every new ink also scores
   higher on white than the one it replaces, so nothing regressed. */
[data-category="work"]     { --cat-bg:#eef4ff; --cat-line:#d3e0f5; --cat-ink:#486dae; }
[data-category="family"]   { --cat-bg:#eefaf1; --cat-line:#d0ead9; --cat-ink:#3d7b56; }
[data-category="friends"]  { --cat-bg:#fff0f3; --cat-line:#f5d4dc; --cat-ink:#ba4264; }
[data-category="health"]   { --cat-bg:#eafaf4; --cat-line:#ccedde; --cat-ink:#2f7a68; }
[data-category="beauty"]   { --cat-bg:#fdeef7; --cat-line:#f4d3e6; --cat-ink:#b2458b; }
[data-category="food"]     { --cat-bg:#fff3e9; --cat-line:#f6dbc2; --cat-ink:#9b6236; }
[data-category="travel"]   { --cat-bg:#eaf6fc; --cat-line:#cee6f3; --cat-ink:#31708f; }
[data-category="hobby"]    { --cat-bg:#f3eefc; --cat-line:#ded1f2; --cat-ink:#795bba; }
[data-category="money"]    { --cat-bg:#fdf6e3; --cat-line:#eee1b6; --cat-ink:#866d29; }
[data-category="living"]   { --cat-bg:#f0f6ec; --cat-line:#dbe9ce; --cat-ink:#55793f; }
[data-category="feelings"] { --cat-bg:#f0eefb; --cat-line:#dad4f2; --cat-ink:#6a5fbf; }
[data-category="other"]    { --cat-bg:#f6f5f9; --cat-line:#e6e3ee; --cat-ink:#716d82; }

/* AI連携: production's NotebookLM walkthrough, including the mock screenshots
   it hides on phones. */
.ai-note-links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.ai-note-links a { color: var(--accent-dark); font-size: 13px; font-weight: 700; }
.notebook-guide { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.notebook-guide h3 { font-size: 15px; margin: 0 0 12px; }
.notebook-flow { display: grid; gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.flow-step { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.step-number { align-items: center; background: var(--accent); border-radius: 50%; color: var(--on-accent); display: inline-flex; font-size: 13px; font-weight: 700; height: 28px; justify-content: center; margin-bottom: 10px; width: 28px; }
.flow-step strong { display: block; font-size: 14px; line-height: 1.35; margin-bottom: 6px; }
.flow-step small { color: var(--muted); display: block; line-height: 1.55; }
.mock-screen { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 6px; margin-top: 10px; padding: 8px; }
.mock-bar { background: var(--soft); border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 700; padding: 5px 7px; }
.mock-button { background: var(--soft); border: 1px solid var(--line); border-radius: 5px; color: var(--accent-dark); font-size: 12px; font-weight: 700; padding: 7px; }
.mock-file { border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font-size: 12px; padding: 7px; }

/* 使い方/設定/ゴミ箱 */
.help-list { margin: 0; padding-left: 1.3em; }
.help-list li { line-height: 1.7; margin: 7px 0; }
.help-view h3 { font-size: 15px; margin: 16px 0 8px; }
.help-view > h3:first-child { margin-top: 0; }
.help-guide { display: grid; gap: 0; }
.guide-section { border-top: 1px solid var(--line); padding: 16px 0; }
.guide-section:first-child { border-top: 0; padding-top: 0; }
.guide-section:last-child { padding-bottom: 0; }
.guide-section h3 { font-size: 15px; margin: 0 0 8px; }
.guide-section .help-list { list-style: disc; margin: 0; padding-left: 1.3em; }
.ai-prompt { font-size: 13px; min-height: 320px; }

@media (max-width:760px) {
  /* Production narrows .app to 10px side padding below 760px; matching it keeps
     every card the same width on a phone. */
  .app-header, main, footer { width: calc(100% - 20px); }
  .summary-grid { gap: 6px; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: none; }
  .summary { padding: 7px 5px; }
  .summary strong { font-size: 12px; }
  .notebook-flow { grid-template-columns: 1fr; }
  .notebook-guide { margin-top: 14px; }
  .flow-step { min-height: 0; padding: 10px; }
  .step-number { height: 24px; margin-bottom: 7px; width: 24px; }
  .mock-screen { display: none; }
}

/* PRODUCTION UI PARITY v41 — memo-card composition, subtle theme chips and the
   rounder control shapes, all lifted from Index.html rather than approximated. */

/* 新規: the theme prompt is a quiet hint line, not a boxed callout. */
.theme-assist { background: none; border: 0; border-radius: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 0; }
.theme-assist-label { color: var(--muted); font-size: 12px; font-weight: 400; margin-right: 2px; }
.theme-chip-list { display: contents; }
.theme-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dark); font-size: 12px; font-weight: 600; height: 26px; line-height: 1; min-height: 26px; padding: 0 10px; }
.theme-chip:hover, .theme-chip:focus-visible { background: var(--soft); border-color: var(--accent); color: var(--accent-dark); }
.theme-refresh-button { background: transparent; border: 0; color: var(--muted); font-size: 14px; height: 26px; line-height: 1; min-height: 26px; padding: 0 6px; text-decoration: none; }
.theme-refresh-button:hover, .theme-refresh-button:focus-visible { color: #b4576d; }
/* The pink bullet production puts in front of テーマ / 本文. */
.memo-form > label > span::before { background: var(--accent); border-radius: 999px; content: ''; display: inline-block; height: 8px; margin-right: 6px; vertical-align: middle; width: 8px; }
.memo-form > label > span { color: var(--accent-dark); font-weight: 700; }
.memo-details label > span::before { content: none; }
#memoTheme, #memoText { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; }
#memoTheme:focus, #memoText:focus { background: var(--surface); }
.theme-category-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: none; }
.theme-category-row > label { align-items: center; display: flex; gap: 8px; }
.theme-category-row label > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.theme-category-row select { font-size: 13px; min-height: 34px; padding: 4px 8px; width: auto; }
.form-message { margin-top: 12px; min-height: 24px; text-align: center; }
/* --error-ink, not a hardcoded #b4576d: the literal was a lighter shade of the
   token and measured 3.82-4.25 on the themed --soft. The token already clears
   4.70 everywhere and dark mode already overrides it. */
.form-message.error { color: var(--error-ink); font-weight: 700; }

/* Rounder controls across every tab, matching production's 12px/999px shapes. */
.primary-button, .secondary-button, .text-button, .button-link { border-radius: 12px; }
.mode-button, .ai-switch .text-button, .help-switch .text-button { border-radius: 999px; }
.mode-switch, .ai-switch, .help-switch { border-radius: 999px; }
.display-control .mode-button { font-size: 12px; padding: 8px 2px; }

/* メモカード: production's date pill + category chip + tinted card body. */
.memo-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.07); padding: 12px 14px; }
.memo-card[data-category] { background: var(--surface); border-color: var(--line); border-left: 4px solid var(--cat-ink); }
.memo-head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.memo-head h3 { flex: 1 1 auto; font-size: 16px; line-height: 1.35; margin: 0; min-width: 40%; overflow-wrap: anywhere; }
.date-pill { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dark); flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 5px 8px; white-space: nowrap; }
/* The card ground is the theme colour (v50) and the category shows as the left
   band plus this chip, so the chip carries its own category ground rather than
   a translucent white that reads the same in all twelve palettes. */
.cat-chip { background: var(--cat-bg, var(--veil-chip)); border: 1px solid var(--cat-line, var(--line)); border-radius: 999px; color: var(--cat-ink, var(--muted)); display: inline-block; flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 9px; white-space: nowrap; }
/* The body text is content, not metadata: same --ink as the headings above it. */
.memo-preview { color: var(--ink); line-height: 1.65; margin: 10px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.memo-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; margin-top: 10px; }
.memo-actions > button { border: 1px solid var(--line); border-radius: 8px; font-size: 11px; font-weight: 700; min-height: 30px; padding: 4px 7px; }
.memo-actions .memo-toggle, .memo-actions .memo-edit, .memo-actions .trash-restore { background: var(--soft); color: var(--accent-dark); }
/* 削除 is the one irreversible control on the card, so it is the smallest tap
   target in the row and 編集 — the one that gets pressed constantly — is the
   widest. Both keep min-height 26/30px, so neither becomes hard to hit on
   purpose; only the horizontal padding differs. `white-space: nowrap` on both
   is what stops the narrower 削除 from wrapping its label and pushing the row
   onto a second line. */
.memo-actions .memo-delete { background: #b0416b; border-color: #96355a; border-radius: 7px; color: #fff; flex: 0 0 auto; font-size: 10px; line-height: 1; min-height: 26px; padding: 3px 3px; white-space: nowrap; }
.memo-actions .memo-edit { flex: 0 0 auto; padding-inline: 18px; white-space: nowrap; }
/* Card controls may use a second row. Keeping every chip readable is more
   important than forcing a single line on narrow phones. */
.memo-actions { flex-wrap: wrap; min-width: 0; overflow: visible; }
.memo-actions > * { flex: 0 0 auto; }
.memo-card { min-width: 0; }
/* Stands in for cards released from the top of a long list, so removing them
   cannot make the page jump under the reader's finger. */
.journal-spacer { flex: 0 0 auto; pointer-events: none; width: 100%; }
.journal-spacer[hidden] { display: none; }
.memo-list .memo-card { contain-intrinsic-size: auto 260px; content-visibility: auto; }
.memo-photo { aspect-ratio: 16 / 9; background: var(--veil-soft); height: auto; width: 100%; }
.memo-actions .location-badge { flex: 0 1 auto; max-width: 100%; min-width: 0; overflow: visible; }
.memo-actions .location-badge span { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; }
.memo-actions .memo-delete:hover, .memo-actions .memo-delete:focus-visible { background: var(--accent); }
.memo-actions .memo-delete:disabled { cursor: not-allowed; opacity: .45; pointer-events: none; }
.memo-actions .memo-offline-delete { background: #fff7fb; border-color: #efc5d8; color: #a54874; }
.memo-actions .memo-offline-delete:hover { background: #ffe9f4; color: #8d3c63; }
.memo-actions .trash-delete { background: #fff2f5; border-color: #efc5cf; color: #a5485c; }
.weather-badge, .location-badge { align-items: center; background: var(--veil-chip); border: 1px solid var(--cat-line, var(--line)); border-radius: 999px; color: var(--cat-ink, var(--muted)); display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 700; gap: 4px; line-height: 1; min-height: 30px; padding: 4px 8px; white-space: nowrap; }
.weather-icon, .location-icon { display: block; height: 16px; width: 16px; }
/* color one step down from production's #9a6a19, which measured 4.41 on its own
   #fff7df ground. Same hue, same badge, now 4.62. */
.sync-badge { align-items: center; background: #fff7df; border: 1px solid #efd28d; border-radius: 999px; color: #966718; display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 700; line-height: 1; min-height: 26px; padding: 4px 8px; white-space: nowrap; }
.sync-badge.failed { background: #fff2f5; border-color: #efc5cf; color: #a5485c; }
.memo-card.offline-pending { background: #fffdf7; border-color: #f2d59d; }
.memo-photo { border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; display: block; margin-top: 10px; max-height: 180px; max-width: 100%; object-fit: cover; }
/* The new-memo weather/location controls keep the button geometry of the tool
   row, not the memo-card badge geometry. */
.new-memo-tools .weather-badge, .new-memo-tools .location-badge { background: var(--soft); border-color: var(--line); border-radius: 8px; color: var(--accent-dark); justify-content: center; min-height: 36px; }

.calendar-cell.week-selected { background: var(--soft); border-color: var(--accent); }
.calendar-week-button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

@media (max-width:400px) {
  /* 4-way display control must stay on one line on the narrowest phones. */
  .display-control .mode-button { font-size: 11px; padding: 8px 0; }
}

/* v44 interaction parity */
.form-actions.save-actions { align-items: stretch; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
.form-actions.save-actions .edit-cancel-button { font-size: 12px; min-height: 40px; padding: 7px 12px; width: auto; }
.doc-list { display: grid; gap: 12px; margin: 12px 0; }
.doc-row { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: block; padding: 14px; }
.doc-row strong { display: block; overflow-wrap: anywhere; }
.doc-row small { color: var(--muted); display: block; margin-top: 4px; overflow-wrap: anywhere; }
.doc-summary { color: var(--muted); font-size: 0.9rem; margin: 0; }
.doc-toggle { justify-self: start; min-height: 44px; }
.photo-lightbox { align-items: center; background: rgba(18, 16, 24, .88); bottom: 0; display: flex; justify-content: center; left: 0; padding: 24px; position: fixed; right: 0; top: 0; z-index: 1000; }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox img { border-radius: 8px; max-height: 92vh; max-width: 94vw; object-fit: contain; }
.photo-lightbox-close { border-radius: 999px; min-height: 38px; min-width: 38px; padding: 0; position: fixed; right: 14px; top: 14px; }


/* v45 unified entries and settings */
/* v47 hashtag chips, iOS install guidance, collapsed analytics opt-out */
.hashtag-assist { align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; padding: 8px 10px; }
.hashtag-assist[hidden] { display: none; }
.hashtag-assist-label { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.hashtag-chip-list { display: flex; flex: 1 1 200px; flex-wrap: wrap; gap: 6px; }
.hashtag-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dark); font-size: 12px; font-weight: 700; line-height: 1.2; min-height: 30px; padding: 6px 10px; }
.hashtag-chip:focus-visible { outline: 3px solid rgba(0, 0, 0, 0.22); outline-offset: 2px; }
/* Lifted out of flow to sit on the keyboard's top edge; `bottom` is set in JS
   from visualViewport because CSS cannot see the keyboard. */
.hashtag-assist.floating { border-radius: 14px; box-shadow: 0 -6px 20px rgba(31,39,51,.16); left: 8px; margin: 0; max-height: 96px; overflow-y: auto; position: fixed; right: 8px; z-index: 40; }

.ios-install-sheet { align-items: center; background: rgba(20,14,24,.55); display: flex; inset: 0; justify-content: center; padding: 16px; position: fixed; z-index: 60; }
.ios-install-sheet[hidden] { display: none; }
.ios-install-card { background: var(--surface); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.24); display: grid; gap: 10px; max-height: 88vh; max-width: 420px; overflow-y: auto; padding: 20px; width: 100%; }
.ios-install-card h3 { margin: 0; }
.ios-install-steps { color: var(--muted); display: grid; font-size: 13px; gap: 8px; line-height: 1.6; margin: 0; padding-left: 20px; }
.ios-install-steps strong { color: var(--ink); }

/* Opt-out, not a feature to advertise: collapsed and quiet, matching production.
   Note: production sets NO display on .analytics-optout-body on purpose. Giving
   a <details> child an explicit display value stops the browser hiding it while
   the element is closed, which left the whole panel permanently expanded. */
.analytics-optout-details { margin-top: 16px; }
.analytics-optout-details > summary { color: var(--muted); cursor: pointer; display: inline-block; font-size: 12px; list-style: none; text-decoration: underline; text-underline-offset: 2px; }
.analytics-optout-details > summary::-webkit-details-marker { display: none; }
.analytics-optout-details > summary::before { content: 'ⓘ '; text-decoration: none; }
.analytics-optout-body { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; padding: 12px; }
.analytics-optout-body .help-text { font-size: 12px; }
.analytics-optout__control, .auto-backup__control { align-items: flex-start; color: var(--muted); cursor: pointer; display: flex; font-size: 12px; font-weight: 600; gap: 8px; margin-top: 10px; }
.analytics-optout__control input, .auto-backup__control input { flex: none; height: 18px; margin-top: 2px; min-height: 0; width: 18px; }
.settings-note { color: var(--muted); font-size: 12px; font-weight: 700; margin: 6px 0 0; }
.recovery-section { scroll-margin-top: 88px; }
.recovery-section:focus { outline: 3px solid color-mix(in srgb, var(--warning) 35%, transparent); outline-offset: 3px; }
.recovery-section[hidden] { display: none; }
.recovery-heading { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.recovery-heading h3 { margin: 0; }
.recovery-list { display: grid; gap: 12px; margin-top: 12px; }
.recovery-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #b56a34; border-radius: 12px; display: grid; gap: 10px; padding: 12px; }
.recovery-card h4 { font-size: 14px; margin: 0; }
.recovery-reason { color: var(--muted); font-size: 12px; margin: 0; }
.recovery-compare { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recovery-copy { background: var(--soft); border: 1px solid var(--line); border-radius: 9px; min-width: 0; padding: 9px; }
.recovery-copy strong { display: block; font-size: 11px; margin-bottom: 5px; }
.recovery-copy p { font-size: 12px; line-height: 1.55; margin: 0; max-height: 7.75em; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.recovery-actions button { font-size: 12px; min-height: 34px; padding: 6px 10px; }
@media (max-width: 520px) { .recovery-compare { grid-template-columns: 1fr; } }

.memo-edit-host { margin: 0 0 16px; }
.memo-edit-host[hidden] { display: none; }
.memo-edit-host .memo-form-panel { border: 2px solid var(--accent); box-shadow: 0 10px 24px rgba(185,92,145,.12); margin: 0; }
.memo-head .sync-badge { margin-left: auto; }
.connection-summary dd { overflow-wrap: anywhere; text-align: right; }
.connection-note { margin: 12px 0 0; }
.connection-action { display: flex; justify-content: flex-start; margin-top: 10px; }
.connection-action [hidden] { display: none; }
.settings-version { color: var(--accent-dark); font-size: 13px; font-weight: 800; margin: 0; }
.folder-settings-section .hint { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); margin-top: 10px; padding: 10px; overflow-wrap: anywhere; }
.settings-folder-browser { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; margin-top: 12px; padding: 12px; }
.settings-folder-browser[hidden] { display: none; }
.folder-search-row { display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) auto; }
.folder-search-row input { min-width: 0; }
.current-folder { color: var(--ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.folder-breadcrumbs { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 4px; }
.folder-breadcrumb { background: transparent; border: 0; color: var(--accent-dark); min-height: 28px; padding: 2px 4px; text-decoration: underline; }
.folder-result-list { display: grid; gap: 8px; }
.folder-result { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) auto; padding: 8px; }
.folder-open-button { background: transparent; border: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; padding: 6px; text-align: left; }
.folder-select-button { min-height: 34px; padding: 5px 10px; }
.folder-picker-actions > * { min-width: 0; }
.backup-section label { display: grid; gap: 6px; margin-top: 12px; }
.backup-section .inline-actions button { font-size: 12px; padding-inline: 9px; white-space: nowrap; }
.backup-section > .inline-actions:first-of-type { flex-wrap: nowrap; }
.backup-section > .inline-actions:first-of-type > * { flex: 1 1 0; min-width: 0; }
.danger-button { background: #fff2f5; border-color: #efc5cf; color: #a5485c; }
.danger-button:hover, .danger-button:focus-visible { background: #a5485c; color: #fff; }
.gemini-actions { flex-wrap: nowrap; }
.gemini-actions #geminiCopyButton { flex: 1.28 1 0; min-width: 0; padding-inline: 8px; }
.gemini-actions .secondary-link { flex: .72 1 0; min-width: 0; padding-inline: 6px; }
.gemini-actions > * { font-size: 12px; white-space: nowrap; }

/* ===== v49 theme system =========================================
   12 palettes, one dark set, one gradient toggle. All values are static hex:
   the app never computes a colour at runtime. The six "spec-given" palettes are
   used verbatim from prompt_theme_system_20260727.md; the six derived ones were
   produced once with that file's derive(), then adjusted so every colour that
   carries text clears WCAG AA 4.5:1 (derive's accent-dark is only 12% darker
   than the accent, which is unreadable as text for the pale bases).
   ================================================================ */
[data-theme="metallic"]{--bg:#eef1f5;--surface:#ffffff;--ink:#1f2733;--muted:#5f6b7a;--line:#d7dee6;--accent:#4d7093;--accent-dark:#395978;--grad-1:#566f8b;--grad-2:#9fb0bd;--on-accent:#ffffff;--on-accent-dark:#ffffff;--soft:#e3eaf0;}
[data-theme="pastel"]{--bg:#fbf7ff;--surface:#ffffff;--ink:#2f2c42;--muted:#746f86;--line:#eadfec;--accent:#d978a8;--accent-dark:#b95c91;--grad-1:#d978a8;--grad-2:#8bc7df;--on-accent:#ffffff;--on-accent-dark:#ffffff;--soft:#eaf7ff;}
[data-theme="lavender"]{--bg:#f6f4fb;--surface:#ffffff;--ink:#2e2a3d;--muted:#706b82;--line:#e7e2f0;--accent:#8b7bc4;--accent-dark:#6b5aa5;--grad-1:#8b7bc4;--grad-2:#c3a9dd;--on-accent:#ffffff;--on-accent-dark:#ffffff;--soft:#edeaf6;}
[data-theme="navy"]{--bg:#f2f4f8;--surface:#fcfcfd;--ink:#18233a;--muted:#576c94;--line:#dfe3ec;--accent:#1a2b4c;--accent-dark:#0a111f;--grad-1:#1a2b4c;--grad-2:#315290;--on-accent:#ffffff;--on-accent-dark:#ffffff;--soft:#e6ebf4;}
[data-theme="slate"]{--bg:#f3f4f7;--surface:#fcfcfd;--ink:#222730;--muted:#627089;--line:#e1e4ea;--accent:#4a5568;--accent-dark:#303845;--grad-1:#4a5568;--grad-2:#73829b;--on-accent:#ffffff;--on-accent-dark:#ffffff;--soft:#eaedf0;}
[data-theme="khaki"]{--bg:#f5f6f4;--surface:#fcfdfc;--ink:#282c26;--muted:#737e6d;--line:#e5e7e4;--accent:#5b6356;--accent-dark:#3d4239;--grad-1:#5b6356;--grad-2:#899382;--on-accent:#ffffff;--on-accent-dark:#ffffff;--soft:#edefec;}
[data-theme="powder"]{--bg:#f2f8f8;--surface:#fcfdfd;--ink:#18393a;--muted:#4a7b7e;--line:#dfecec;--accent:#a8dadc;--accent-dark:#317e81;--grad-1:#a8dadc;--grad-2:#bee3e5;--on-accent:#286062;--on-accent-dark:#ffffff;--soft:#e6f4f4;}
[data-theme="smoky"]{--bg:#f2f6f8;--surface:#fcfdfd;--ink:#1b2e36;--muted:#517a8a;--line:#dfe8ec;--accent:#c0d6df;--accent-dark:#477b92;--grad-1:#c0d6df;--grad-2:#c2d7e0;--on-accent:#396070;--on-accent-dark:#ffffff;--soft:#e8f0f3;}
[data-theme="olive"]{--bg:#f5f7f3;--surface:#fdfdfc;--ink:#2b3121;--muted:#697850;--line:#e7ebe0;--accent:#a3b18a;--accent-dark:#6b7b50;--grad-1:#a3b18a;--grad-2:#ced6c1;--on-accent:#3b432d;--on-accent-dark:#ffffff;--soft:#eef1ea;}
[data-theme="taupe"]{--bg:#f7f3f2;--surface:#fdfcfc;--ink:#33221f;--muted:#916359;--line:#ece2df;--accent:#c9ada7;--accent-dark:#9a675c;--grad-1:#c9ada7;--grad-2:#dccac6;--on-accent:#5c3e38;--on-accent-dark:#ffffff;--soft:#f1eae9;}
[data-theme="dusty"]{--bg:#f8f3f2;--surface:#fdfcfc;--ink:#3a2118;--muted:#946757;--line:#ece2df;--accent:#e29578;--accent-dark:#c04f25;--grad-1:#e29578;--grad-2:#efc4b3;--on-accent:#5f2e1c;--on-accent-dark:#ffffff;--soft:#f4eae6;}
[data-theme="cafe"]{--bg:#f8f5f2;--surface:#fdfcfc;--ink:#3a2a18;--muted:#8a6f51;--line:#ece6df;--accent:#dda15e;--accent-dark:#a2641e;--grad-1:#dda15e;--grad-2:#edcdaa;--on-accent:#573a19;--on-accent-dark:#ffffff;--soft:#f4eee6;}

/* Dark is one shared surface for every theme; the accent and its gradient are
   left alone so each theme still reads as itself. */
[data-mode="dark"]{color-scheme:dark;--bg:#14161d;--surface:#1e212b;--ink:#e8eaf0;--muted:#a2a8b8;--line:#333846;--soft:#232735;--warm:#2c2a1f;--shadow:0 14px 36px rgba(0,0,0,.45);}
/* Surfaces, borders and chips are all tokens now, so they follow --surface /
   --soft / --line automatically. Only genuinely fixed colours are patched here:
   the semantic badges (error / warning / offline) and the shadows. */
[data-mode="dark"]{--placeholder:#6d7385;}
[data-mode="dark"] .notice,[data-mode="dark"] .memo-form,[data-mode="dark"] .queue-section,[data-mode="dark"] .memo-card{box-shadow:0 18px 48px rgba(0,0,0,.45);}
[data-mode="dark"] .secondary-button,[data-mode="dark"] .text-button,[data-mode="dark"] .memo-actions .memo-toggle,[data-mode="dark"] .memo-actions .memo-edit,[data-mode="dark"] .memo-actions .trash-restore,[data-mode="dark"] .new-memo-tools .weather-badge,[data-mode="dark"] .new-memo-tools .location-badge,[data-mode="dark"] .date-pill,[data-mode="dark"] .hashtag-chip,[data-mode="dark"] .theme-chip{color:var(--ink);}
[data-mode="dark"]{--veil:rgba(255,255,255,.05);--veil-soft:rgba(255,255,255,.07);--veil-chip:rgba(255,255,255,.08);}
[data-mode="dark"] .status-pill.offline{background:#3a2f16;color:#e8c877;}
[data-mode="dark"] .status-pill.online{color:#7fc9a3;}
[data-mode="dark"] .form-message{color:#7fc9a3;}
[data-mode="dark"] .form-message.error{color:#f0a0b0;}
[data-mode="dark"] .sync-badge{background:#3a3116;border-color:#6b5a24;color:#e8cf8a;}
[data-mode="dark"] .sync-badge.failed,[data-mode="dark"] .memo-actions .trash-delete,[data-mode="dark"] .danger-button{background:#3d1f27;border-color:#7a3b48;color:#f0a0b0;}
[data-mode="dark"] .danger-button:hover,[data-mode="dark"] .danger-button:focus-visible{background:#f0a0b0;color:#2a1015;}
[data-mode="dark"] .memo-card.offline-pending{background:#2a2519;border-color:#5c4d24;}
[data-mode="dark"] .memo-actions .memo-delete{background:#a34b70;border-color:#8d3c5d;color:#fff;}
[data-mode="dark"] .dev-badge{background:#4a3577;}

/* One dark category set for all 12 themes: these are meaning colours, so they
   do not vary per theme (spec 2). */
[data-mode="dark"] [data-category="work"]{--cat-bg:#1f2f4c;--cat-line:#304873;--cat-ink:#9cb3dd;}
[data-mode="dark"] [data-category="family"]{--cat-bg:#234832;--cat-line:#366d4d;--cat-ink:#a1d8b8;}
[data-mode="dark"] [data-category="friends"]{--cat-bg:#4c1f2c;--cat-line:#742f43;--cat-ink:#e198ad;}
[data-mode="dark"] [data-category="health"]{--cat-bg:#1f4c41;--cat-line:#2f7463;--cat-ink:#9bdece;}
[data-mode="dark"] [data-category="beauty"]{--cat-bg:#4c1f3c;--cat-line:#742f5b;--cat-ink:#df9ac7;}
[data-mode="dark"] [data-category="food"]{--cat-bg:#4c331f;--cat-line:#744d2f;--cat-ink:#e2b897;}
[data-mode="dark"] [data-category="travel"]{--cat-bg:#1f3d4c;--cat-line:#2f5d74;--cat-ink:#98c9e2;}
[data-mode="dark"] [data-category="hobby"]{--cat-bg:#2d204c;--cat-line:#453073;--cat-ink:#b19cdd;}
[data-mode="dark"] [data-category="money"]{--cat-bg:#4c401f;--cat-line:#74622f;--cat-ink:#e5d094;}
[data-mode="dark"] [data-category="living"]{--cat-bg:#324625;--cat-line:#4c6b38;--cat-ink:#b7d7a3;}
[data-mode="dark"] [data-category="feelings"]{--cat-bg:#241f4c;--cat-line:#372f74;--cat-ink:#a29bde;}
[data-mode="dark"] [data-category="other"]{--cat-bg:#33313a;--cat-line:#4d4b59;--cat-ink:#b6b2c8;}

/* Gradient off: every gradient fill collapses to the flat accent. */
[data-grad="off"] .ai-switch .text-button.active,
[data-grad="off"] .help-switch .text-button.active,
[data-grad="off"] .main-tab:hover,
[data-grad="off"] .main-tab.active,
[data-grad="off"] .mode-button.active,
[data-grad="off"] .mode-button:hover{background:var(--accent);color:var(--on-accent);}
[data-grad="off"] .theme-assist{background:var(--soft);}
[data-grad="off"] .theme-chip{background:var(--surface);}

/* Theme picker (settings) */
.theme-settings{display:grid;gap:10px;}
.theme-swatch-row{display:grid;gap:6px;grid-template-columns:repeat(4,minmax(0,1fr));}
.theme-swatch{align-items:center;background:transparent;border:0;border-radius:10px;display:grid;gap:3px;justify-items:center;padding:4px 2px;}
.theme-swatch .dot{border:2px solid transparent;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.18);height:30px;width:30px;}
.theme-swatch[aria-pressed="true"] .dot{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink);}
.theme-swatch .label{color:var(--muted);font-size:10px;font-weight:700;line-height:1.2;text-align:center;}
.theme-swatch[aria-pressed="true"] .label{color:var(--ink);}
.theme-group-label{color:var(--muted);font-size:11px;font-weight:800;margin:0;}
.theme-segment{display:grid;gap:4px;grid-template-columns:repeat(3,minmax(0,1fr));}
.theme-segment button{background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:12px;font-weight:700;min-height:34px;padding:6px 4px;}
.theme-segment button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.theme-toggle-row{align-items:center;display:flex;gap:8px;justify-content:space-between;}
.theme-toggle-row span{color:var(--muted);font-size:12px;font-weight:700;}
/* One row, however many buttons the group has. The old repeat(2,...) wrapped the
   three dark-mode buttons onto a second line; auto-flow sizes to the count, so
   the same rule serves the 3-button dark group and the 2-button gradient one. */
.theme-toggle-row .theme-segment{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;grid-template-columns:none;justify-content:end;}
.theme-toggle-row .theme-segment button{min-width:52px;padding:6px 2px;}
.theme-toggle-row .theme-unit-select{max-width:150px;min-height:34px;padding:5px 8px;width:auto;}
/* The whole picker has to fit one phone screen, so the card is tightened rather
   than letting 12 swatches plus three rows of controls push the fold. */
.theme-settings{padding:14px;}
.theme-settings h3{margin-bottom:2px;}
/* Text-bearing gradients and dark-mode accent text ------------------------
   Two problems the rendered-colour audit exposed:
   1) --accent-dark is used as a TEXT colour in 16 rules. Its light-mode value is
      near-black, so on the dark surface it measured 1.18:1 — invisible. In dark
      mode it becomes a light tint of the same accent, and anything sitting ON it
      flips to the dark ground colour.
   2) The tab/switch gradient ran to a pale stop, leaving white text at 1.85:1 at
      that end. --grad-text-* is a separate, contrast-fitted pair; the decorative
      --grad-1/--grad-2 pair is untouched and still drives the swatch preview.
   v51: clamping the sweep to a safe lightness band left several themes with two
   stops a couple of points apart (metallic 2.2, lavender 1.0, smoky 0.6), so
   gradient on and off looked identical. The pair now moves on BOTH axes — 26 deg
   of hue plus ~18 points of lightness, in whichever direction AA has room —
   which is visible on a 70px tab where a lightness-only ramp was not. Stop 1 is
   still the theme's own colour, so the identity does not move; every stop is
   listed with its measured ratio against that theme's --on-accent:
     metallic 5.20/8.82  pastel  4.62/4.52  lavender 4.56/7.87  navy  14.06/4.81
     slate    7.53/13.05 khaki   6.24/13.16 powder   4.67/6.00  smoky  4.52/5.68
     olive    4.55/6.79  taupe   4.55/7.37  dusty    4.65/7.15  cafe   4.61/5.63 */
[data-theme="metallic"]{--grad-text-1:#566f8b;--grad-text-2:#334f52;}
[data-theme="pastel"]{--grad-text-1:#c94084;--grad-text-2:#2c7fa0;}
[data-theme="lavender"]{--grad-text-1:#7c69bc;--grad-text-2:#3e4e8b;}
[data-theme="navy"]{--grad-text-1:#1a2b4c;--grad-text-2:#317b90;}
[data-theme="slate"]{--grad-text-1:#4a5568;--grad-text-2:#263336;}
[data-theme="khaki"]{--grad-text-1:#5b6356;--grad-text-2:#2b322c;}
[data-theme="powder"]{--grad-text-1:#a8dadc;--grad-text-2:#dbf0e8;}
[data-theme="smoky"]{--grad-text-1:#c0d6df;--grad-text-2:#ddeeeb;}
[data-theme="olive"]{--grad-text-1:#a3b18a;--grad-text-2:#c5d6c1;}
[data-theme="taupe"]{--grad-text-1:#c9ada7;--grad-text-2:#ecdfe3;}
[data-theme="dusty"]{--grad-text-1:#e29578;--grad-text-2:#f2c4cb;}
[data-theme="cafe"]{--grad-text-1:#dda15e;--grad-text-2:#edb0aa;}
[data-mode="dark"][data-theme="metallic"]{--accent-dark:#809ebc;--on-accent-dark:#14161d;--soft:#232b34;}
[data-mode="dark"][data-theme="pastel"]{--accent-dark:#d56da0;--on-accent-dark:#14161d;--soft:#34232b;}
[data-mode="dark"][data-theme="lavender"]{--accent-dark:#9384c8;--on-accent-dark:#14161d;--soft:#262334;}
[data-mode="dark"][data-theme="navy"]{--accent-dark:#6f8fce;--on-accent-dark:#14161d;--soft:#232934;}
[data-mode="dark"][data-theme="slate"]{--accent-dark:#8e9aae;--on-accent-dark:#14161d;--soft:#242933;}
[data-mode="dark"][data-theme="khaki"]{--accent-dark:#9da597;--on-accent-dark:#14161d;--soft:#2b2e28;}
[data-mode="dark"][data-theme="powder"]{--accent-dark:#75c4c7;--on-accent-dark:#14161d;--soft:#233334;}
[data-mode="dark"][data-theme="smoky"]{--accent-dark:#7eabbe;--on-accent-dark:#14161d;--soft:#232f34;}
[data-mode="dark"][data-theme="olive"]{--accent-dark:#a4b18b;--on-accent-dark:#14161d;--soft:#2e3423;}
[data-mode="dark"][data-theme="taupe"]{--accent-dark:#b58f87;--on-accent-dark:#14161d;--soft:#342623;}
[data-mode="dark"][data-theme="dusty"]{--accent-dark:#d38669;--on-accent-dark:#14161d;--soft:#342723;}
[data-mode="dark"][data-theme="cafe"]{--accent-dark:#d3a169;--on-accent-dark:#14161d;--soft:#342c23;}
[data-mode="dark"]{--error-ink:#f0a0b0;}
[data-mode="dark"] .calendar-weekdays .cal-sun{color:#e79a9a;}
[data-mode="dark"] .calendar-weekdays .cal-sat{color:#8fb6da;}

/* The new-memo theme and body fields sit on the panel's own tinted background,
   so a 1px border alone left them barely distinguishable from it. They carry
   the memo card's lift instead — the same shadow, so a field the user types
   into and a card the user reads read as the same kind of object. Only these
   two: the tool row's controls are buttons, and giving those a raised edge as
   well would flatten the distinction again. */
.memo-form > label > input, .memo-form > label > textarea {
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
}
/* Focus must still win over the resting shadow rather than sit behind it. */
.memo-form > label > input:focus, .memo-form > label > textarea:focus {
  box-shadow: 0 0 0 3px rgba(217, 120, 168, .16), 0 6px 16px rgba(0, 0, 0, .07);
}
[data-mode="dark"] .memo-form > label > input, [data-mode="dark"] .memo-form > label > textarea {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .34);
}
[data-mode="dark"] .memo-form > label > input:focus, [data-mode="dark"] .memo-form > label > textarea:focus {
  box-shadow: 0 0 0 3px rgba(217, 120, 168, .16), 0 6px 16px rgba(0, 0, 0, .34);
}

/* The search field and the boxes the カテゴリ別 / # / 場所別 switches reveal sit
   on the same tinted panel as the new-memo fields did, and were just as flat
   against it. Same lift as the memo card, for the same reason. The suggestion
   dropdown already carries its own, heavier shadow — it floats over content
   rather than sitting in the flow — so it is deliberately left alone. */
.memo-search-row input,
.filter-row select,
.filter-row .facet-combobox > input[type="search"] {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
}
.memo-search-row input:focus,
.filter-row select:focus,
.filter-row .facet-combobox > input[type="search"]:focus {
  box-shadow: 0 0 0 3px rgba(217, 120, 168, .16), 0 6px 16px rgba(0, 0, 0, .07);
}
[data-mode="dark"] .memo-search-row input,
[data-mode="dark"] .filter-row select,
[data-mode="dark"] .filter-row .facet-combobox > input[type="search"] {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .34);
}
[data-mode="dark"] .memo-search-row input:focus,
[data-mode="dark"] .filter-row select:focus,
[data-mode="dark"] .filter-row .facet-combobox > input[type="search"]:focus {
  box-shadow: 0 0 0 3px rgba(217, 120, 168, .16), 0 6px 16px rgba(0, 0, 0, .34);
}

/* Collapsed entry counters. The heading stays the visual h2 it was; it just
   became the control that opens them. */
.memo-summary-toggle > summary { align-items: center; cursor: pointer; display: flex; gap: 8px; list-style: none; }
.memo-summary-toggle > summary::-webkit-details-marker { display: none; }
.memo-summary-toggle > summary > h2 { margin: 0; }
.memo-summary-toggle > summary::after {
  border: solid var(--muted); border-width: 0 2px 2px 0; content: ""; display: inline-block;
  height: 7px; transform: rotate(45deg); transform-origin: center; width: 7px;
}
.memo-summary-toggle[open] > summary::after { transform: rotate(-135deg); }
/* A closed <details> hides its content through the slot, which an explicit
   `display` on a direct child overrides — and .summary-grid sets display:grid,
   so the counters stayed on screen with the arrow pointing "closed". */
.memo-summary-toggle:not([open]) > .summary-grid { display: none; }
.memo-summary-toggle > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.memo-summary-toggle .summary-grid { margin-top: 12px; }

/* Restore, kept behind its own disclosure. */
.restore-panel { border-left: 3px solid var(--line); display: grid; gap: 10px; margin-top: 12px; padding-left: 12px; }
.restore-panel[hidden] { display: none; }

/* Final AA tightening. --muted and --accent-dark are rendered on whichever of
   {surface, soft, veil-over-bg} is darkest, not on --surface alone, so they are
   refitted against that worst case — which from v51 is the per-theme --soft,
   three lightness points below --bg. Written as [data-mode="light"] so the
   refit cannot leak into dark mode, where these tokens have their own values.
   pastel is deliberately NOT here: it is production's exact palette (--soft
   included) and parity outranks the ~0.6 it is short by. */
[data-mode="light"][data-theme="metallic"]{--muted:#5d6877;}
[data-mode="light"][data-theme="lavender"]{--muted:#6b667c;}
[data-mode="light"][data-theme="navy"]{--muted:#556a91;}
[data-mode="light"][data-theme="slate"]{--muted:#5e6b83;}
[data-mode="light"][data-theme="khaki"]{--muted:#646e5f;}
[data-mode="light"][data-theme="powder"]{--muted:#467578;--accent-dark:#2f7679;}
[data-mode="light"][data-theme="smoky"]{--muted:#4b7181;--accent-dark:#427288;}
[data-mode="light"][data-theme="olive"]{--muted:#63724c;--accent-dark:#63724a;}
[data-mode="light"][data-theme="taupe"]{--muted:#8b5f55;--accent-dark:#8a5d52;}
[data-mode="light"][data-theme="dusty"]{--muted:#875e4f;--accent-dark:#b34922;}
[data-mode="light"][data-theme="cafe"]{--muted:#81674b;--accent-dark:#9a5e1c;}