/* The app shell (sidebar, page header, phone tab bar) and the workbench.
   Colours and type come from theme.css. */

.app-shell { min-height: 100vh; }

/* ---- Sidebar ---- */
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  width: var(--sidebar-w);
  height: 100dvh;
  padding: 22px 14px 18px;
  border-right: 1px solid var(--separator);
  background: var(--sidebar-bg);
}

.sidebar-brand {
  display: block;
  padding: 6px 12px 0;
  color: var(--label);
  font: 600 19px/1.2 var(--font-display);
  letter-spacing: -.02em;
  text-decoration: none;
}

.app-nav,
.sidebar-account { display: grid; gap: 2px; }
.app-nav { gap: 4px; margin-top: 30px; }
.sidebar-account { position: relative; margin-top: auto; }

.app-nav a,
.sidebar-account a,
.sidebar-account button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--label-2);
  font: 15px/1.4 var(--font);
  text-align: left;
  text-decoration: none;
}

.app-nav .nav-icon,
.sidebar-account .nav-icon,
.mobile-nav .nav-icon { flex: 0 0 auto; width: 20px; height: 20px; color: currentColor; }
.app-nav .nav-icon { color: var(--accent); }

.app-nav a:hover,
.sidebar-account a:hover,
.sidebar-account button:hover { background: var(--fill-hover); color: var(--label); }
.app-nav a.is-active { background: var(--fill-strong); color: var(--label); font-weight: 500; }
.app-content { min-width: 0; margin-left: var(--sidebar-w); }
.app-sidebar[hidden] + .app-content { margin-left: 0; }
html.public-guest .app-nav [data-route]:not([data-route="journal"]),
html.public-guest .mobile-nav [data-route]:not([data-route="journal"]),
html.public-guest .sidebar-account-trigger,
html.public-page-pending .app-nav [data-route]:not([data-route="journal"]),
html.public-page-pending .mobile-nav [data-route]:not([data-route="journal"]),
html.public-page-pending .sidebar-account-trigger { display: none !important; pointer-events: none; }

.sidebar-account-trigger {
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--label);
}
.sidebar-account-trigger:hover,
.sidebar-account-trigger[aria-expanded="true"] { background: var(--fill-hover); }
.sidebar-account-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.sidebar-account-copy { display: grid; width: auto !important; min-width: 0; flex: 1; gap: 0; text-align: left; }
.sidebar-account-copy strong { overflow: hidden; color: var(--label); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-copy small { overflow: hidden; color: var(--label-4); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-chevron { width: auto !important; margin-left: auto; color: var(--label-4) !important; font-size: 14px !important; transition: transform .15s ease; }
.sidebar-account-trigger[aria-expanded="true"] .sidebar-account-chevron { transform: rotate(180deg); }
.sidebar-account-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 0;
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 96%);
  box-shadow: var(--shadow-pop);
  backdrop-filter: blur(20px);
}
.sidebar-account-menu a,
.sidebar-account-menu button {
  min-height: 34px;
  padding: 6px 9px;
  border-radius: 6px;
  color: var(--label);
  font-size: 13px;
}
.sidebar-account-menu a:hover,
.sidebar-account-menu button:hover { background: var(--fill); }
.sidebar-login-button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  color: var(--label-2);
  font-size: 14px;
  text-decoration: none;
}
.sidebar-login-button:hover { background: var(--fill-hover); color: var(--label); }

/* ---- Page header ---- */
.app-content .site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: none;
  min-height: var(--header-h);
  margin: 0;
  padding: 8px clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--separator);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
}
.app-content .site-header .header-controls { gap: 6px; margin-left: auto; }
.app-content .site-header .primary { min-height: 34px; padding: 6px 15px; font-size: 13px; }
.app-content .search-toggle,
.app-content .header-search { width: 36px; height: 36px; flex-basis: 36px; }
.app-content .search-toggle { color: var(--label-3); }
.app-content .search-toggle:hover { background: var(--fill); color: var(--label); }
html[data-route="home"] .app-content .site-header { border-bottom-color: transparent; background: transparent; backdrop-filter: none; }
html[data-route="home"] .header-page-context { display: none; }

.header-page-context { display: grid; gap: 2px; }
.header-page-context strong { color: var(--label); font: 700 22px/1.25 var(--font-display); letter-spacing: -.015em; }
.header-action-link { padding: 6px 8px; color: var(--label-3); font-size: 13px; text-decoration: none; white-space: nowrap; }
.header-action-link:hover { color: var(--accent); }

/* On the workbench the header starts with the AI's face and the chat list
   (named after the open chat in "对话"), and ends with the switch between
   "记录" and "对话". The face only keeps company. */
.header-ai { display: none; align-items: center; gap: 2px; min-width: 0; margin-left: -4px; }
html[data-route="home"] .header-ai:not([hidden]) { display: flex; }
.header-ai-face { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--label); cursor: pointer; }
.header-ai-face:hover { background: var(--fill); }
.header-ai-wrap { min-width: 0; }
.header-ai-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: min(420px, 46vw);
  height: 32px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--label);
  font-size: 14px;
  font-weight: 500;
}
.header-ai-button span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.header-ai-button i { display: grid; flex: none; color: var(--label-3); font-style: normal; }
.header-ai-button:hover, .header-ai-button.is-active { background: var(--fill); }
.header-history { right: auto; left: 0; z-index: 40; }

/* 记录 / 对话 sits in the box's tool row, next to ＋, only on the workbench
   (under the greeting, or under the chat there); the side panel on other
   pages has no switch. */
.home-mode-switch, .header-icon-button { display: none; }
html[data-route="home"] .home-composer .home-mode-switch,
html[data-route="home"] .ai-panel[data-mode="home"] .home-mode-switch { display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; flex: none; margin: 0 6px 0 4px; padding: 2px; border-radius: 9px; background: var(--fill); }
/* One white thumb slides under the chosen side instead of jumping. */
.home-mode-switch { position: relative; isolation: isolate; }
.home-mode-switch::before { content: ""; position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 7px; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 10%); transition: transform .28s var(--ease-spring); }
.home-mode-switch:has([data-home-state="chat"][aria-pressed="true"])::before { transform: translateX(100%); }
.home-mode-switch button { min-width: 44px; padding: 3px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--label-3); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; cursor: pointer; transition: color .2s ease, transform .12s ease; }
.home-mode-switch button:hover, .home-mode-switch button[aria-pressed="true"] { color: var(--label); }
.home-mode-switch button:active { transform: scale(.94); }
html[data-route="home"] .header-icon-button:not([hidden]) { display: grid; }
.header-icon-button { place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--label-3); }
.header-icon-button:hover { background: var(--fill); color: var(--label); }

.app-content main { max-width: none; padding: 0 clamp(20px, 4vw, 56px); }
.page-view[hidden] { display: none !important; }
/* Soft entrances: a page, or a part of the workbench, eases in when it
   appears (animations replay whenever an element starts showing). The
   system's "reduce motion" setting turns all of this off (style.css). */
:root { --ease-spring: cubic-bezier(.22, 1, .36, 1); }
@keyframes soft-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes soft-fade { from { opacity: 0; } }
.page-view:not([hidden]) { animation: soft-fade .22s ease-out; }
.home-chat-hint:not([hidden]), .home-today, .home-memories { animation: soft-in .32s var(--ease-spring) both; }
.home-memories { animation-delay: .03s; }
/* Switching 记录 / 对话 swaps the box's wording: let it cross over
   (two names for one animation so each switch replays it). */
@keyframes swap-a { from { opacity: .2; transform: translateY(3px); } }
@keyframes swap-b { from { opacity: .2; transform: translateY(3px); } }
html[data-home-view="record"] .home-composer .ai-input textarea { animation: swap-a .26s var(--ease-spring); }
html[data-home-view="chat"] .home-composer .ai-input textarea { animation: swap-b .26s var(--ease-spring); }
html[data-route="home"] .ai-model-wrap:not([hidden]) { animation: soft-fade .22s ease-out; }

.review-view {
  width: min(var(--record-column), 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) 0 clamp(56px, 10vh, 120px);
}

.review-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.review-actions button { white-space: nowrap; }
.review-letter-notice:has(button:not([hidden])) { margin-top: 18px; }
.review-periods { position: relative; isolation: isolate; display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: 3px; border: 1px solid var(--separator); border-radius: 9px; background: var(--surface); }
.review-periods::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 6px; background: var(--label); transition: transform .28s var(--ease-spring); }
.review-periods:has([data-review-period="month"][aria-pressed="true"])::before { transform: translateX(100%); }
.review-periods button { min-width: 46px; padding: 6px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--label-3); font-size: 13px; cursor: pointer; transition: color .2s ease, transform .12s ease; }
.review-periods button:active { transform: scale(.94); }
.review-periods button[aria-pressed="true"] { color: var(--label-inverse); }
.review-nav { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; }
.review-step { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--separator); border-radius: 50%; background: transparent; color: var(--label); cursor: pointer; }
.review-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.review-step:disabled { cursor: default; opacity: .35; }
.review-heading { display: grid; gap: 1px; min-width: 0; text-align: center; flex: 0 1 auto; padding: 0 6px; }
.review-heading strong { color: var(--label); font: 500 21px/1.35 var(--font-display); }
.review-heading span { color: var(--label-3); font-size: 12px; white-space: nowrap; }
.review-today { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--label-3); font-size: 12px; cursor: pointer; }
.review-today:hover { color: var(--accent); }
.review-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 1px; margin: 26px 0 0; overflow: hidden; border: 0; border-radius: var(--radius-l); background: var(--separator); box-shadow: var(--shadow-card); }
.review-stat { display: grid; align-content: start; gap: 6px; padding: 18px 22px; background: var(--surface); }
.review-stat dt { color: var(--label-3); font-size: 12px; }
.review-stat dd { margin: 0; color: var(--label); font-size: 26px; font-weight: 600; line-height: 1.2; }
.review-stat dd small { margin-left: 4px; color: var(--label-3); font-size: 12px; font-weight: 400; }
.review-stat.review-stat-tags dd { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; font-weight: 500; line-height: 1.6; }
.review-tag { color: var(--accent); }
.review-tag small { margin-left: 3px; }
.review-days { display: grid; gap: 26px; margin-top: 34px; }
.review-day-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 0 4px; color: var(--label-2); font: 600 15px/1.5 var(--font-display); }
.review-day-heading small { color: var(--label-4); font: 400 12px/1.5 var(--font); }
/* A day's records sit together on one white card, a line between them. */
.review-day-list { padding: 0 20px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card); }
.review-day-list .record-row { padding: 15px 0; }
.review-day-list .record-row:last-child { border-bottom: 0; }
.review-empty { margin-top: 34px; }
.record-row-photos { color: var(--label-3); }
.mobile-nav { display: none; }

/* ---- Workbench ---- */
.home-view {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  min-height: calc(100dvh - var(--header-h));
  margin: 0 auto;
  padding: max(32px, calc(30vh - var(--header-h))) 0 28px;
}
.home-focus { text-align: center; }
/* The workbench is one screen: greeting, box and the site footer
   fit the window, so nothing moves under the
   pointer. It scrolls only when the content needs more room (a small
   window, "那年今日" opened). */
html[data-route="home"] .app-shell { min-height: calc(100dvh - var(--footer-h)); }
html[data-route="home"] .home-view { min-height: calc(100dvh - var(--header-h) - var(--footer-h)); padding-bottom: 8px; }
.site-footer { opacity: .18; transition: opacity .2s ease; }
.site-footer:hover, .site-footer:focus-within { opacity: 1; }
html[data-route="home"] .site-footer {
  box-sizing: border-box;
  max-width: none;
  min-height: var(--footer-h);
  margin: 0 0 0 var(--sidebar-w);
  padding: 8px 24px 12px;
  border-top: 0;
  align-items: center;
  color: var(--label-4);
}
.home-date { margin: 0; color: var(--label-3); font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.home-view h1.home-title {
  margin: 6px 0 0;
  color: var(--label);
  font: 700 40px/1.15 var(--font-display);
  letter-spacing: -.025em;
}
.home-focus .backup-warning { margin: 0 0 22px; text-align: left; }

/* The box on the workbench (the same box the chat uses): bigger, with a
   soft shadow, under the greeting. */
.home-composer { margin-top: 32px; text-align: left; }
.home-composer .ai-panel-foot { padding: 0; }
.home-composer .ai-input { padding: 16px 14px 10px 20px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-raised); transition: box-shadow .2s ease; }
.home-composer .ai-input:focus-within { box-shadow: 0 0 0 1px rgb(0 113 227 / 35%), 0 10px 40px rgb(0 0 0 / 8%); }
.home-composer .ai-input textarea { min-height: 52px; max-height: 36vh; padding: 2px 6px 2px 0; font-size: 17px; line-height: 1.55; }
.home-composer .ai-input-row { margin: 8px 0 0 -6px; }
.home-composer .ai-image-thumb { width: 64px; height: 64px; }
.home-composer .ai-send { width: 36px; height: 36px; }
.home-composer .ai-status { margin: 0 4px 10px; }
.home-composer .ai-note { margin-top: 10px; }
.home-chat-hint { display: flex; flex-direction: column; align-items: center; margin-top: 18px; }
.home-chat-hint[hidden] { display: none; }
.home-chat-hint .ai-suggestions { max-width: none; margin-top: 0; }
.home-chat-setup { margin: 0; color: var(--label-3); font-size: 14px; }
/* In "对话" the workbench shows only the greeting and the box. */
html[data-home-view="chat"] .home-today,
html[data-home-view="chat"] .home-memories { display: none !important; }
.form-status { margin: 9px 0 0; color: var(--label-3); font-size: 12px; }
.form-status.is-error { color: #9a443c; }
.record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 18px; width: 100%; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--separator); background: transparent; color: var(--label); font: inherit; text-align: left; cursor: pointer; }
.record-row:hover .record-row-title { color: var(--accent); }
.record-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.record-row-body { display: grid; gap: 4px; min-width: 0; }
.record-row-title { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.record-row-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--label-3); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.record-row-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 9px; color: var(--label-3); font-size: 11px; white-space: nowrap; }
.record-row-tag { color: var(--accent); }
.section-empty { padding: 28px 0; color: var(--label-3); font-size: 13px; }


/* "Today" pills: a letter that is ready, this day in earlier years, and the
   way to write to the future. */
.home-today { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.home-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 980px;
  background: rgb(255 255 255 / 80%);
  box-shadow: 0 0 0 1px var(--separator);
  color: var(--label);
  font-size: 14px;
  white-space: nowrap;
}
.home-pill[hidden] { display: none; }
.home-today:not(:has(button:not([hidden]))) { display: none; }
.home-pill svg { flex: 0 0 auto; color: var(--accent); }
.home-pill small { color: var(--label-3); font-size: 13px; }
.home-pill:hover { background: var(--surface); box-shadow: 0 0 0 1px var(--separator-strong), 0 2px 8px rgb(0 0 0 / 5%); }
.home-pill.is-active { background: var(--accent-soft); box-shadow: 0 0 0 1px rgb(0 113 227 / 25%); color: var(--accent); }
.home-pill.is-letter { background: var(--orange-soft); box-shadow: 0 0 0 1px var(--orange-line); color: var(--orange-label); font-weight: 500; }
.home-pill.is-letter svg { color: var(--orange); }
.home-pill.is-letter:hover { background: var(--orange-soft-hover); }
.home-pill.is-quiet { background: transparent; box-shadow: none; color: var(--label-3); }
.home-pill.is-quiet svg { color: var(--label-4); }
.home-pill.is-quiet:hover { background: var(--fill); color: var(--label); }

/* "On this day": one card at a time, swiped sideways. */
.home-memories { margin-top: 18px; text-align: left; }
.home-memories[hidden] { display: none; }
.memory-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: -6px -10px -14px;
  padding: 6px 10px 14px;
  scroll-padding-inline: 10px;
  scrollbar-width: none;
}
.memory-list::-webkit-scrollbar { display: none; }
.memory-card {
  display: flex;
  flex: 0 0 100%;
  align-items: stretch;
  min-height: 120px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--label);
  font: inherit;
  text-align: left;
  scroll-snap-align: start;
}
.memory-card:hover .memory-title { color: var(--accent); }
.memory-thumb { flex: 0 0 180px; width: 180px; height: auto; min-height: 120px; object-fit: cover; background: var(--fill); }
.memory-body { display: grid; flex: 1; align-content: center; min-width: 0; gap: 4px; padding: 18px 22px; }
.memory-years { color: var(--accent); font-size: 13px; font-weight: 600; }
.memory-title { overflow: hidden; font: 600 19px/1.35 var(--font-display); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.memory-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--label-2); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.memory-dots { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
.memory-dots[hidden] { display: none; }
.memory-dots button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; }
.memory-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--separator-strong); }
.memory-dots button.is-active::before { background: var(--label); }

/* The latest record, one quiet line at the bottom. */

@media (max-width: 760px) {
  .app-shell { min-height: calc(100vh - 62px); }
  .app-sidebar { display: none; }
  .app-content { margin-left: 0; }
  .app-content .site-header { flex-wrap: nowrap; gap: 10px; padding: 8px 12px 8px 18px; }
  .app-content .site-header .header-controls { width: auto; gap: 2px; }
  .app-content .site-header .primary { min-height: 32px; padding: 5px 12px 5px 10px; }
  .app-content main { padding: 0 18px; }
  .header-page-context strong { font-size: 20px; }
  .review-view { padding: 22px 0 92px; }
  .review-toolbar { gap: 12px; }
  .review-periods { order: 0; }
  .review-today { order: 1; }
  .review-nav { order: 2; flex-basis: 100%; justify-content: space-between; }
  .review-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-stat { padding: 13px 14px; }
  .review-stat dd { font-size: 22px; }
  .review-stat-tags { grid-column: 1 / -1; }
  .home-view { min-height: calc(100dvh - var(--header-h) - 62px); padding: 18px 0 20px; }
  /* Above the tab bar on phones; the two filing numbers may take two lines. */
  html[data-route="home"] { --footer-h: 52px; }
  html[data-route="home"] .app-shell { min-height: calc(100dvh - var(--footer-h) - 62px); }
  html[data-route="home"] .home-view { min-height: calc(100dvh - var(--header-h) - var(--footer-h) - 62px); padding-bottom: 4px; }
  html[data-route="home"] .site-footer { margin: 0 0 62px; padding: 4px 16px 8px; gap: 2px 14px; font-size: 10px; letter-spacing: .5px; }
  .home-view h1.home-title { font-size: 30px; }
  .home-date { font-size: 13px; }
  .home-composer { margin-top: 22px; }
  .home-composer .ai-input { padding: 14px 12px 8px 16px; border-radius: 20px; }
  .home-composer .ai-input textarea { font-size: 16px; }
  .ai-input-hint { display: none; }
  .header-ai-button { max-width: 40vw; }
  .home-mode-switch button { min-width: 0; padding: 3px 9px; }
  .home-today { margin-top: 18px; gap: 8px; }
  .home-pill { height: 34px; padding: 0 13px; font-size: 13px; }
  .memory-thumb { flex-basis: 110px; width: 110px; }
  .memory-body { padding: 14px 16px; }
  .memory-title { font-size: 17px; }
  .memory-summary { font-size: 14px; }
  .record-row { grid-template-columns: 1fr; }
  .record-row-meta { justify-content: flex-start; }
  .mobile-nav {
    position: fixed;
    z-index: var(--z-nav);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--separator);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
  }
  .mobile-nav a,
  .mobile-nav button {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--label-3);
    text-decoration: none;
  }
  .mobile-nav [hidden] { display: none; }
  .mobile-nav [aria-current] { color: var(--accent); }
  .mobile-nav .nav-icon { width: 21px; height: 21px; }
  .mobile-nav small { font-size: 10px; }
  .site-footer { margin-bottom: 68px; }
}