:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-brand: 32px;
  --font-weight-strong: 800;
  --font-weight-medium: 700;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  /* Design v3 (owner-approved Arc/Notion/Apple-Photos mock): a pale ground with a pure-white pane
     floating on it. --color-bg is the GROUND you see around the pane; --color-pane is the pane; the
     old --color-surface stays the inset (search field / waveform / body preview) only. */
  --color-bg: #efeff3;
  --color-pane: #ffffff;
  --color-bg-soft: #eef0fb;
  --color-surface: #f7f8fa;
  --color-surface-subtle: #f2f4f7;
  --color-surface-tint: #f2f3fb;
  --color-border: #ececf1;
  --color-border-strong: #d7dbe6;
  --color-text: #0d1117;
  --color-muted: #6b7280;
  --color-muted-strong: #374151;
  /* Weak text (times / counts / placeholders) -- one step past muted. */
  --color-faint: #9aa1ac;
  /* Design v3: the accent is a low-saturation indigo, used on <3% of the surface (the current
     location, a just-saved highlight, the active nav item). theme.js's default option re-tunes to the
     same value at runtime; the picker's other options still work. */
  --color-primary: #4c5bd4;
  --color-primary-strong: #3d4bc0;
  --color-primary-soft: #eef0fb;
  --color-accent: #0891b2;
  --color-accent-soft: #cffafe;
  --color-warning: #f97316;
  --color-warning-soft: #fff7ed;
  /* The pinned/starred affordance. A distinct semantic from warning -- it marks something the
     user chose to keep, not something wrong. Values unchanged from the screens that used them. */
  --color-pin: #f59e0b;
  --color-pin-border: #fcd34d;
  --color-pin-soft: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-success: #047857;
  --color-success-soft: #ecfdf5;
  --color-focus-ring: rgba(76, 91, 212, 0.16);
  /* Phase 13.5: the soft two-layer shadow first used on Home's page-record
     cards and Life Map's lens cards is now THE card shadow app-wide --
     Settings, record-create, record-card, record-detail, search-hero all
     read it through this one token, so unifying it here unifies them. */
  /* Design System V2 (Phase 31): shadows are极小 -- premium calm reads as almost-flat with one
     soft, wide, low-alpha lift, never a hard drop. */
  /* Phase 32: モック実値の極小シャドウ。派手な影は禁止 -- 面はほぼ平ら。 */
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.04);
  --shadow-input: 0 2px 16px rgba(0, 0, 0, 0.04);
  --shadow-button-primary: 0 10px 24px rgba(76, 91, 212, 0.2);
  --shadow-add-record-nav: 0 10px 22px rgba(76, 91, 212, 0.22);
  --shadow-floating: 0 8px 40px rgba(0, 0, 0, 0.08);
  --shadow-nav: 0 8px 40px rgba(0, 0, 0, 0.08);
  --motion-duration-quick: 120ms;
  --motion-duration-fast: 160ms;
  --motion-duration-base: 220ms;
  --motion-ease-standard: ease;
  --motion-ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
  /* Phase 31: the future is expressed in MOTION, not colour. A gentle overshoot ("軽い反発") on
     press/enter, and the press scale used by every button. Durations stay in the 100-180ms band. */
  --motion-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  /* モックのモーションガイド実値: 押下 スケール0.97 / 120ms */
  --motion-press-scale: 0.97;
  /* 大きな面は同じ 0.965 だと過剰に沈む。マジックナンバーではなくトークンとして分ける。 */
  --motion-press-scale-large: 0.99;
  --motion-duration-press: 120ms;
  /* 画面遷移 120-180ms / カード表示 120-200ms / 画像表示 180-280ms */
  --motion-duration-screen: 160ms;
  --motion-duration-card: 180ms;
  --motion-duration-image: 240ms;
  /* BottomSheet はモーションの帯（120-280ms）の上限。画面の中で一番大きく動くものが一番長い。 */
  --motion-duration-sheet: 280ms;
  --motion-duration-scrim: 180ms;
  /* カードが一枚ずつ起き上がるための刻み。積み重ねすぎると「待たされる」ので極小。 */
  --motion-stagger: 26ms;
  --button-radius: var(--radius-md);
  --button-padding: 11px 14px;
  --button-padding-compact: 8px 12px;
  --button-min-height: 44px;
  --input-radius: var(--radius-md);
  --input-padding: 10px 12px;
  --input-min-height: 44px;
  --chip-radius: var(--radius-pill);
  --chip-padding: 4px 8px;
  --chip-font-size: var(--font-size-xs);
  --nav-item-radius: var(--radius-lg);
  --nav-item-min-height: 52px;
  --card-radius: var(--radius-md);
  --card-padding: 14px;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

/* Phase 31 — Design System V2 dark mode.
   The app was light-only. Because everything reads design tokens (Phase 27 unification), a dark
   theme is a token REMAP, not a rewrite. Neutrals (bg/surface/text/border/muted/shadow) are remapped
   here directly. The accent tokens theme.js sets inline (--color-primary-soft / --color-focus-ring)
   are re-declared with !important so a stylesheet rule beats theme.js's normal-priority inline value
   -- otherwise a very light chip tint would survive onto dark surfaces.
   Calm dark: soft near-black (never pure #000), the same quiet indigo accent. */
@media (prefers-color-scheme: dark) and (min-width: 100000px) /* Light-only release: dark は未実装なので止めている。再開はこの and(...) を消すだけ */ {
  :root {
    color-scheme: dark;
    --color-bg: #0f1116;
    /* Design v3: the ground is a touch darker than the pane, so the pane still reads as floating. */
    --color-pane: #171a20;
    --color-bg-soft: #141722;
    --color-surface: #181b22;
    --color-surface-subtle: #12151b;
    --color-surface-tint: #1a1d2b;
    --color-border: #272c38;
    --color-border-strong: #3b4152;
    --color-text: #e9eaee;
    --color-muted: #9aa0ab;
    --color-muted-strong: #c4c8d1;
    --color-faint: #7f8794;
    --color-warning-soft: #2a2113;
    --color-danger-soft: #2c1618;
    --color-success-soft: #12241d;
    --color-pin-soft: #241d0b;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.42);
    --shadow-input: 0 6px 20px rgba(0, 0, 0, 0.4);
    --shadow-floating: 0 20px 48px rgba(0, 0, 0, 0.55);
    --shadow-nav: 0 16px 40px rgba(0, 0, 0, 0.5);
    --color-primary-soft: rgba(129, 140, 248, 0.16) !important;
    --color-focus-ring: rgba(129, 140, 248, 0.3) !important;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  /* Device polish (behaviour only, no visual/layout change):
     - kill the grey/blue tap flash on iOS/Android taps;
     - keep scroll from chaining to the browser (no accidental pull-to-refresh / rubber-band). */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}

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

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

a {
  color: var(--color-primary-strong);
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(88px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
}

/* ============================================================================================
   Design v3 shell (owner-approved Arc/Notion/Apple-Photos mock).
   Mobile default: the ground is the body, the bottom nav rules, the desktop rail is hidden.
   Desktop (>=861px): a 216px rail dissolves into the pale ground, and the content sits on ONE
   pure-white pane with a 20px radius. Never a dark sidebar. The rail reuses the same set-tab /
   open-settings actions as the bottom nav, so routing is untouched.
   ============================================================================================ */
/* The desktop rail's default is hidden (mobile). All its desktop rules live at the END of the file
   so they win on source order over the many later .bottom-nav / .layout restatements. */
.desktop-rail { display: none; }

.boot-screen,
.fatal-screen {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-content: center;
  text-align: center;
}

.brand {
  margin: 0;
  font-size: var(--font-size-brand);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
}

.brand-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.brand-button:focus-visible {
  border-radius: var(--radius-sm);
  outline: 3px solid var(--color-focus-ring);
}

.eyebrow {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-md);
}

/* Slim single-line screen title for 思い出/設定 -- Home is the only screen
   with a brand moment; utility screens lead with their content. */
.screen-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  padding: 2px 2px 0;
}

.screen-title h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.screen-title span {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.search-form {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.search-form input {
  order: 1;
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-input);
}

.search-submit {
  display: inline-flex;
  order: 2;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 18px;
  white-space: nowrap;
}

.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.record-search-form {
  margin-top: 12px;
}

/* Phase 32 — Search は人生探索画面。器は .screen が持つので、ここは中身の呼吸だけ。 */
.search-screen {
  gap: var(--space-8);
}

/* 巨大検索。箱に入れない -- 画面の名乗りがそのまま入力欄になる。 */
.search-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) 0 var(--space-2);
}

.search-hero-title {
  margin: 0;
}

.search-hero .record-search-form {
  margin-top: 0;
  position: relative;
}

.search-field-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  color: var(--color-muted);
  pointer-events: none;
}

.search-hero .search-form input {
  min-height: 60px;
  border-radius: var(--radius-xl);
  padding: 16px 18px 16px 50px;
  font-size: 17px;
}

/* 検索ボタンは控えめに。Enter が主で、ボタンは保険。 */
.search-hero .search-submit {
  min-height: 60px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-xl);
  background: none;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--space-8);
  max-width: 1180px;
  margin: 0 auto;
}

/* No Record selected: the detail panel has no content, so collapse the
   layout to a single column and remove the empty panel entirely -- no
   placeholder box, no trailing gap. */
.layout:not(.layout-has-detail) {
  grid-template-columns: 1fr;
}

.layout:not(.layout-has-detail) .detail-panel {
  display: none;
}

.primary-panel,
.detail-panel {
  min-width: 0;
}

.record-capture,
.record-detail,
.empty-detail,
.record-placeholder,
.course-card,
.record-card,
.task-card {
  border-radius: var(--card-radius);
  /* Phase 32: 純白のページの上では白いカードは見えない。面は極薄グレーへ。 */
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.record-capture,
.record-detail,
.empty-detail,
.record-placeholder {
  padding: var(--space-8);
}

.home-screen {
  display: grid;
  gap: var(--space-4);
}

/* Phase 12.3 Step1 (今日のページ): the lavender hero is gone. Brand and
   tagline shrink to one quiet line so the 今日 masthead is the first big
   element on screen. */
.home-topline {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: 2px 2px 0;
}

.home-topline .brand {
  font-size: var(--font-size-xl);
}

.home-topline-tagline {
  margin: 0;
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.section-heading {
  margin-bottom: 16px;
}

.section-heading h1,
.section-heading h2,
.record-detail h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.section-heading p,
.record-card p,
.task-card p,
.course-card p,
.record-detail p {
  margin: 4px 0 0;
  color: var(--color-muted);
}

.compact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 20px;
}

.compact > div {
  min-width: 0;
}

.capture-form,
.inline-form {
  display: grid;
  gap: var(--space-5);
}

.record-create {
  display: grid;
  gap: var(--space-4);
}

.record-create-heading {
  gap: var(--space-2);
  margin-bottom: 0;
}

.record-create-heading p {
  max-width: 560px;
}

.record-create-form {
  gap: var(--space-4);
}

.record-create-fields {
  display: grid;
  gap: var(--space-3);
}

.capture-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.record-create-field,
.record-create-card {
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.record-create-card-header {
  display: grid;
  gap: var(--space-1);
}

.record-create-card-header h2,
.recorder-action-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.25;
}

.record-create-card-header p,
.recorder-action-header p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.record-create-basics {
  display: grid;
  gap: var(--space-4);
}

.record-create-basics .record-create-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.record-create-basics .record-create-field {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.record-create-basics .record-create-note-input {
  grid-column: 1 / -1;
}

.record-create-collapsible > summary {
  cursor: pointer;
  color: var(--color-muted-strong);
  font-weight: var(--font-weight-strong);
}

.record-create-collapsible[open] > summary {
  margin-bottom: var(--space-3);
}

.search-form input,
.capture-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.capture-form textarea,
.capture-form select,
.audio-device-panel select,
.inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  width: 100%;
  min-height: var(--input-min-height);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  background: var(--color-surface);
  color: var(--color-text);
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.search-form input:focus,
.capture-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
.capture-form textarea:focus,
.capture-form select:focus,
.audio-device-panel select:focus,
.inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus-ring);
}

.search-form input::placeholder,
.capture-form input::placeholder,
.capture-form textarea::placeholder,
.inline-form input::placeholder {
  color: var(--color-muted);
  opacity: 0.78;
}

.record-create-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.record-create-field textarea,
.record-create-field select {
  background: var(--color-surface-subtle);
}

.record-create-field textarea {
  min-height: 92px;
  resize: vertical;
}

.record-create-note-body textarea {
  min-height: 176px;
}

.photo-source-card {
  display: grid;
  gap: var(--space-3);
}

.photo-source-menu {
  margin-top: 0;
}

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

.photo-selection-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* An author display value would otherwise override the [hidden] attribute,
   leaving an empty box on screen before a photo is picked. */
.photo-selection-preview[hidden] {
  display: none;
}

.photo-selection-preview img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.photo-selection-preview p {
  margin: 0;
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
}

/* Simplified photo composer: the picked photo is the subject, shown large
   at the top; there is no source-choice card or heading anymore. */
.photo-capture-stage {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.record-create-photo .photo-selection-preview {
  display: grid;
  gap: var(--space-2);
}

.record-create-photo .photo-selection-preview[hidden] {
  display: none;
}

.record-create-photo .photo-selection-preview img {
  width: 100%;
  height: auto;
  max-height: 340px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.record-create-photo .photo-selection-preview p {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.photo-title-field {
  gap: var(--space-2);
}

.inline-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  margin-bottom: 16px;
}

.optional-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--color-surface-subtle);
}

.record-create .optional-input {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface-subtle);
}

.optional-input summary {
  cursor: pointer;
  color: var(--color-muted-strong);
  font-weight: 800;
}

.optional-input label {
  margin-top: 10px;
}

.location-capture {
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-surface-subtle);
}

.record-create .location-capture {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface);
}

.location-capture p {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
}

.checkbox-row {
  display: flex;
  gap: 9px;
  align-items: center;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.primary,
.secondary,
.danger,
.ghost,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-min-height);
  border: 0;
  border-radius: var(--button-radius);
  padding: var(--button-padding);
  font-weight: var(--font-weight-strong);
  line-height: 1.15;
  text-decoration: none;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-decelerate),
    color var(--motion-duration-fast) var(--motion-ease-decelerate),
    border-color var(--motion-duration-fast) var(--motion-ease-decelerate),
    box-shadow var(--motion-duration-fast) var(--motion-ease-decelerate),
    transform var(--motion-duration-press) var(--motion-ease-spring);
}

.primary:hover:not(:disabled),
.secondary:hover:not(:disabled),
.danger:hover:not(:disabled),
.ghost:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.primary:active:not(:disabled),
.secondary:active:not(:disabled),
.danger:active:not(:disabled),
.ghost:active:not(:disabled),
.icon-button:active:not(:disabled) {
  transform: translateY(0) scale(var(--motion-press-scale));
}

.primary:focus-visible,
.secondary:focus-visible,
.danger:focus-visible,
.ghost:focus-visible,
.icon-button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.primary:disabled,
.secondary:disabled,
.danger:disabled,
.ghost:disabled,
.icon-button:disabled {
  box-shadow: none;
}

.primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: var(--shadow-button-primary);
}

.secondary {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.ghost {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-muted-strong);
  box-shadow: none;
}

.ghost:hover:not(:disabled),
.ghost:focus-visible {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.icon-button {
  min-width: 44px;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: var(--font-size-xl);
}

.back-button {
  justify-self: start;
}

.recorder-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.record-create .recorder-strip {
  border-radius: var(--radius-xl);
}

.recorder-action-card {
  display: grid;
  gap: var(--space-3);
}

.recorder-action-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
}

.record-create .recorder-strip .primary,
.record-create .recorder-strip .danger {
  min-height: 52px;
  padding-inline: var(--space-5);
}

.record-create .recorder-strip .record-save-button {
  min-width: min(100%, 180px);
}

.record-create-support {
  display: grid;
  gap: 0;
  padding: var(--space-4);
}

.record-create-support > summary {
  cursor: pointer;
  color: var(--color-muted-strong);
  font-weight: var(--font-weight-strong);
}

.record-create-support-body {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.record-create-support .location-capture,
.record-create-support .optional-input,
.record-create-support .audio-device-panel {
  box-shadow: none;
}

.record-create-support .location-capture,
.record-create-support .audio-device-panel {
  background: var(--color-surface-subtle);
}

.recorder-status {
  border-radius: var(--chip-radius);
  padding: var(--chip-padding);
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-medium);
}

.recorder-strip-recording .recorder-status,
.recorder-strip-stopping .recorder-status {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.recorder-strip-saved .recorder-status {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.recorder-strip-failed .recorder-status {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.recorder-help {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.audio-device-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}

.record-create .audio-device-panel {
  gap: var(--space-4);
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.audio-device-panel .audio-input-diagnostics {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.selected-audio-device {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.selected-audio-device span {
  font-size: 12px;
  color: var(--color-primary-strong);
  font-weight: 700;
}

.selected-audio-device strong {
  color: var(--color-text);
  font-size: 14px;
}

.selected-audio-device small {
  color: var(--color-muted-strong);
}

.volume-meter {
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface-tint);
}

.volume-meter-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-muted-strong);
  font-size: 12px;
  font-weight: 800;
}

.volume-meter-track {
  overflow: hidden;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.volume-meter-bar {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: var(--color-accent);
}

.volume-meter p {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
}

.recorder-preview audio {
  display: block;
  width: 100%;
}

.record-create .recorder-preview {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.record-create .recorder-preview h3 {
  margin: 0;
  color: var(--color-muted-strong);
  font-size: var(--font-size-md);
}

.record-save-actions {
  display: grid;
  justify-items: start;
}

.record-save-actions .primary {
  min-width: min(100%, 240px);
  min-height: 52px;
}

.recorder-download {
  display: inline-flex;
  justify-self: start;
  text-decoration: none;
}

.record-type-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5);
  margin-top: 14px;
}

.record-type-menu button {
  display: grid;
  gap: var(--space-3);
  min-height: 132px;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: 18px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  box-shadow: var(--shadow-input);
}

.record-type-menu button:hover,
.record-type-menu button:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus-ring);
  transform: translateY(-1px);
}

.record-type-menu strong {
  font-size: 16px;
}

.record-type-menu small {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.45;
}

.record-menu-icon {
  font-size: 28px;
}

.capture-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 10, 25, 0.44);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  /* Phase 32: 数字ではなくトークン。BottomSheet も 5画面と同じモーションの言語で動く。 */
  animation: capture-scrim-in var(--motion-duration-scrim) var(--motion-ease-decelerate);
}

.capture-sheet-scrim.is-closing {
  animation: capture-scrim-out 200ms var(--motion-ease-decelerate) forwards;
}

.capture-sheet {
  position: fixed;
  z-index: 201;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-3) var(--space-8) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: var(--color-surface);
  box-shadow: 0 -8px 16px rgba(30, 23, 48, 0.05), 0 -24px 48px rgba(30, 23, 48, 0.16);
  /* Phase 15.1: a touch longer + decelerate so the sheet glides up with a
     little inertia instead of snapping; the close mirrors it.
     Phase 32: the same decelerate, now expressed in the shared token band -- the sheet is the
     longest move in the app because it is the biggest, not because it is a different idea. */
  animation: capture-sheet-in var(--motion-duration-sheet) var(--motion-ease-decelerate);
}

.capture-sheet.is-closing {
  /* 閉じるときは開くときより短い -- 去るものを待たされたくない。 */
  animation: capture-sheet-out var(--motion-duration-base) var(--motion-ease-decelerate) forwards;
}

.capture-sheet-handle {
  width: 36px;
  height: 4px;
  margin: 2px auto var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.capture-sheet h2 {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
}

.capture-sheet-options {
  display: grid;
  gap: var(--space-4);
}

.capture-sheet-primary {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-primary-soft);
  color: var(--color-text);
  text-align: left;
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-decelerate),
    box-shadow var(--motion-duration-fast) var(--motion-ease-decelerate);
}

.capture-sheet-primary:hover,
.capture-sheet-primary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  transform: translateY(-1px);
}

.capture-sheet-primary:active {
  transform: scale(var(--motion-press-scale));
  box-shadow: none;
}

.capture-sheet-primary .camera-icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary-strong);
  flex: none;
}

.capture-sheet-primary strong {
  display: block;
  font-size: var(--font-size-lg);
}

.capture-sheet-primary small {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.capture-sheet-row {
  display: flex;
  gap: var(--space-4);
}

.capture-sheet-secondary {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  min-height: 84px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface-subtle);
  color: var(--color-text);
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-decelerate),
    border-color var(--motion-duration-fast) var(--motion-ease-decelerate);
}

.capture-sheet-secondary:hover,
.capture-sheet-secondary:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus-ring);
}

.capture-sheet-secondary:active {
  transform: scale(var(--motion-press-scale));
  background: var(--color-primary-soft);
}

.capture-sheet-secondary svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary-strong);
}

.capture-sheet-secondary strong {
  font-size: var(--font-size-sm);
}

@keyframes capture-scrim-in {
  from {
    opacity: 0;
  }
}

@keyframes capture-scrim-out {
  to {
    opacity: 0;
  }
}

@keyframes capture-sheet-in {
  from {
    transform: translateY(100%);
  }
}

@keyframes capture-sheet-out {
  to {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capture-sheet-scrim,
  .capture-sheet,
  .capture-sheet-primary,
  .capture-sheet-secondary,
  .page-record-new,
  .page-record,
  .record-card,
  .record-detail.detail-enter,
  .toast,
  .life-map-lenses,
  .life-map-lens,
  .life-map-month,
  .search-prompt-chip,
  .location-suggestion-chip,
  .calendar-suggestion-chip,
  .primary,
  .secondary,
  .danger,
  .ghost,
  .icon-button,
  .bottom-nav button {
    animation: none;
    transition: none;
  }

  .record-card:hover,
  .record-card:active,
  .page-record:active,
  .life-map-lens:hover,
  .life-map-lens:active,
  .life-map-month:hover,
  .life-map-month:active,
  .search-prompt-chip:active,
  .location-suggestion-chip:active,
  .calendar-suggestion-chip:active,
  .primary:active:not(:disabled),
  .secondary:active:not(:disabled),
  .danger:active:not(:disabled),
  .ghost:active:not(:disabled),
  .icon-button:active:not(:disabled),
  .capture-sheet-primary:active,
  .capture-sheet-secondary:active,
  .bottom-nav .capture-fab:active:not(:disabled),
  .bottom-nav button:active:not(:disabled):not(.capture-fab),
  .bottom-nav .capture-fab:hover:not(:disabled),
  .bottom-nav .capture-fab:focus-visible {
    transform: none;
  }
}

.record-placeholder {
  margin-top: 14px;
}

.record-list,
.course-grid,
.task-list,
.calendar-event-list {
  display: grid;
  gap: var(--space-5);
}

.course-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.calendar-import-card {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.calendar-connect-card {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.calendar-connection-account,
.calendar-connection-synced-at {
  margin: 0;
  color: var(--color-muted-strong);
  font-size: 13px;
}

.calendar-selection {
  display: grid;
  gap: var(--space-2);
}

.calendar-selection-heading {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted-strong);
}

.calendar-event-cancelled {
  color: var(--color-muted-strong);
}

/* Graceful without :has(): the カレンダー側でキャンセル marker text still
   labels the card even when the strikethrough doesn't apply. */
.calendar-event-card:has(.calendar-event-cancelled) h3 {
  text-decoration: line-through;
  color: var(--color-muted-strong);
}

.calendar-event-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--card-padding);
}

.calendar-event-card.is-promoted {
  opacity: 0.7;
}

.calendar-event-meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-muted);
}

.calendar-event-recurring {
  color: var(--color-muted-strong);
}

.calendar-event-location,
.calendar-event-description {
  margin: 0;
  color: var(--color-muted-strong);
  font-size: 14px;
}

.memories-screen {
  display: grid;
  gap: var(--space-4);
}

/* Phase 12.3 Step1 (今日のページ × 縁なし実メディア): Home is a stack of
   life pages -- one per day, led by a big date masthead. No cards, no
   borders: the photo, the memo text, and the waveform ARE the elements.
   思い出/検索 keep the existing .record-card look untouched. */
/* Phase 32 — Timeline は「人生のアルバム」。年月 → 日付 → 大きな写真 → 思い出 → その日の出来事。
   スクロールするほど「めくる」感覚になるよう、月の切り替わりだけを大きく取る。 */
.life-pages {
  display: grid;
  gap: var(--space-9);
  width: 100%;
  margin: var(--space-4) auto 0;
}

/* 年月。ページの最上位の区切りで、ここだけがアルバムの「章」になる。 */
.album-month {
  display: grid;
  gap: var(--space-7);
}
.album-month-title {
  margin: 0;
  font-size: 30px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--color-text);
}
.album-month + .album-month {
  margin-top: var(--space-8);
}

.life-page {
  display: grid;
  gap: var(--space-5);
}

/* 日付。章（年月）より一段静か -- 主役は下の写真。 */
.life-page-masthead h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
}

.life-page-masthead p {
  margin: 3px 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.life-page-body {
  display: grid;
  gap: var(--space-4);
}

/* Phase 13.6: a horizontal "collectible card" -- a ~76px thumbnail on the
   left, text content on the right -- shared by photo/audio/memo. Card
   height target 92-112px, driven organically by whichever of the fixed
   76px thumbnail or the text column ends up taller. */
.page-record {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  cursor: pointer;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(24, 14, 44, 0.05), 0 6px 16px rgba(24, 14, 44, 0.06);
  padding: var(--space-3);
  transition: transform var(--motion-duration-fast) var(--motion-ease-decelerate);
}

.page-record:active {
  /* A hair more give than the shared 0.99 -- a small, native-feeling press,
     nothing flashy (transition + reduced-motion opt-out already above). */
  transform: scale(var(--motion-press-scale));
}

.page-thumb {
  position: relative;
  flex: none;
  /* The photo thumb is a <figure> -- resets its UA default margin (~1em
     block, 40px inline), which was otherwise inflating the flex row and
     pushing photo cards ~30px taller than audio/note (plain <div> thumbs,
     unaffected by the same default). */
  margin: 0;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* Photo: the real thumbnail (thumbnailService, unchanged) -- a small inset
   square now, never full-width. */
.page-thumb-photo {
  background: linear-gradient(150deg, var(--color-primary-soft), var(--color-surface-tint));
}

.page-thumb-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-primary-strong);
}

.page-thumb-photo img[hidden],
.page-thumb-fallback[hidden] {
  display: none;
}

.page-thumb-fallback .ui-icon,
.page-thumb-note .ui-icon {
  width: 26px;
  height: 26px;
}

/* Memo: a warm icon tile -- no thumbnail data to show, so the icon carries
   the "this is a memo" signal at a glance. */
.page-thumb-note {
  display: grid;
  place-items: center;
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

/* Audio: a quiet waveform texture behind a small centered play button --
   never a full player row. Tap anywhere off the button bubbles to the
   card's select-record (data-audio-seek="none" on the shell). */
.page-thumb-audio {
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
}

.page-thumb-audio-wave {
  position: absolute;
  inset: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0.4;
  pointer-events: none;
}

.page-thumb-audio-wave .record-audio-waveform-bar {
  background: var(--color-primary);
}

/* Phase 32: 指の下限は 44px。見えている丸は 32px のまま（音声サムネの中で主張させない）で、
   当たり判定だけを 44px へ広げる -- 押しにくい再生ボタンは、無いのとほとんど同じ。
   Phase 13.6 の設計（小さな再生ボタンだけが toggle / 波形は Detail のタップへ抜ける）は保つので、
   広げるのは透明な枠だけで、見た目も抜け方も変わらない。 */
.page-thumb-audio-toggle {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #ffffff;
}

/* 見えている丸。ボタン本体は透明な 44px の枠で、色を持つのはこちら。 */
.page-thumb-audio-toggle::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: var(--shadow-button-primary);
}

.page-thumb-audio-toggle:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: -4px;
  border-radius: var(--radius-pill);
}

.page-thumb-audio.is-playing .page-thumb-audio-toggle::before {
  background: var(--color-primary-strong);
}

.page-thumb-audio-icon {
  position: relative;
  margin-left: 1px;
  font-size: 12px;
  line-height: 1;
}

/* Kept in the DOM for bindAudioPlayerControls/updateAudioProgress, but
   Home's info design has no room for a duration readout. */
.page-thumb-audio-status,
.page-thumb-audio-error {
  display: none;
}

/* Right column: 種類バッジ+タイトル+お気に入り / 時間 / 本文2行 / タグ最大2個. */
.page-record-content {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.page-record-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.page-record-badge {
  flex: none;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: var(--font-weight-strong);
}

.page-record-badge-photo {
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
}

.page-record-badge-audio {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.page-record-badge-note {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.page-record-title {
  overflow: hidden;
  min-width: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  /* Semibold (600), not the 800 heavy weight -- a softer, Apple-native
     title. Literal to match this block's existing per-element sizing. */
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-record-favorite {
  flex: none;
  margin-left: auto;
  color: var(--color-pin);
  font-size: 12px;
}

.page-record-time {
  /* Quieter than the body: smaller and lighter so the timestamp recedes
     behind the preview text. */
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.page-record-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  color: var(--color-muted-strong);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.page-record-tags {
  display: flex;
  gap: var(--space-2);
  overflow: hidden;
}

/* A little more room so the chips don't read as cramped -- breathing room
   comes mostly from horizontal padding + inter-chip gap, keeping the
   vertical growth to ~1px so the card height stays put. */
.page-record-tags span {
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  padding: 2px 9px;
  color: var(--color-muted-strong);
  font-size: 10.5px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Plays once for the Record that was just saved -- targeted at a single
   page element via justAddedRecordId, never a blanket replay. */
.page-record-new {
  animation: page-record-in 480ms var(--motion-ease-decelerate);
}

@keyframes page-record-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.record-feed-more {
  justify-self: center;
  margin-top: var(--space-2);
}

.search-results-section {
  margin-top: 0;
}

.search-results-section .section-heading.compact {
  align-items: center;
  margin-top: 0;
}

.search-results-section .section-heading h2 {
  font-size: var(--font-size-xl);
}

.search-results-section .section-heading p {
  font-size: var(--font-size-sm);
}

.search-results-section .record-list {
  gap: var(--space-5);
}

.search-results-section .record-card {
  background: var(--color-surface);
}

.search-results-section .ai-status {
  opacity: 0.72;
}

.search-results-section .match-reasons {
  padding-top: var(--space-1);
}

.memories-list-section {
  margin-top: 0;
}

.memories-list-section .section-heading.compact {
  align-items: center;
  margin-top: 0;
}

.memories-list-section .section-heading p {
  font-size: var(--font-size-sm);
}

.memories-list-section .record-list {
  /* Phase 31: 人生のアルバム -- records breathe like photographs on a page. */
  gap: var(--space-6);
}

.memories-list-section .record-card {
  background: var(--color-surface);
}

.memories-list-section .ai-status {
  opacity: 0.68;
}

.memories-list-section .record-meta time {
  color: var(--color-muted-strong);
  font-weight: var(--font-weight-strong);
}

.search-results-section .rich-empty {
  display: grid;
  min-height: 156px;
  gap: var(--space-3);
  align-content: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.74);
  padding: var(--space-8);
  color: var(--color-muted);
}

.search-results-section .rich-empty strong {
  color: var(--color-muted-strong);
  font-size: var(--font-size-lg);
}

.search-results-section .rich-empty span {
  max-width: 520px;
}

.rich-empty-actions {
  margin-top: var(--space-2);
}

/* Life Map: 受動的に思い出す場所. The top level is a grid of lenses, not
   a Record list -- the same soft-shadow card language as Home's page
   records, so it reads as part of the same app, not a bolted-on screen.
   Phase 15.0: denser and more browsable -- bigger icons, quieter text,
   tighter spacing -- so the grid reads as a collection to wander, not a
   settings page. dense auto-flow backfills the top-right cell when the
   conditional 場所ごと lens is absent. */
.life-map-lenses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap: var(--space-2);
  animation: life-map-in 320ms var(--motion-ease-decelerate);
}

@keyframes life-map-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.life-map-lens {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(24, 14, 44, 0.05), 0 6px 16px rgba(24, 14, 44, 0.06);
  padding: var(--space-5);
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-decelerate),
    box-shadow var(--motion-duration-fast) var(--motion-ease-decelerate);
}

.life-map-lens:hover,
.life-map-lens:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(24, 14, 44, 0.06), 0 10px 22px rgba(24, 14, 44, 0.09);
}

.life-map-lens:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.life-map-lens:active {
  transform: scale(var(--motion-press-scale));
}

.life-map-lens-wide {
  grid-column: 1 / -1;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
}

.life-map-lens-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--color-primary);
}

.life-map-lens-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.life-map-lens-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.life-map-lens-count {
  color: var(--color-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.life-map-detail-header {
  display: grid;
  gap: var(--space-1);
}

.life-map-back {
  justify-self: start;
  min-height: 32px;
  padding: 4px 10px;
  font-size: var(--font-size-sm);
}

.life-map-month-list {
  display: grid;
  gap: var(--space-3);
}

.life-map-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(24, 14, 44, 0.05), 0 6px 16px rgba(24, 14, 44, 0.06);
  padding: var(--space-5) var(--space-6);
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-decelerate),
    box-shadow var(--motion-duration-fast) var(--motion-ease-decelerate);
}

.life-map-month:hover,
.life-map-month:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(24, 14, 44, 0.06), 0 10px 22px rgba(24, 14, 44, 0.09);
}

.life-map-month:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.life-map-month:active {
  transform: scale(var(--motion-press-scale));
}

.life-map-month span:last-child {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* Search empty state (no query yet): a quiet prompt, not a full Record
   list -- chips are real tag frequencies, never fabricated examples. */
.search-prompt {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--space-6);
  text-align: center;
}

.search-prompt-text {
  margin: 0;
  color: var(--color-muted-strong);
  font-size: var(--font-size-md);
}

.search-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.search-prompt-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  padding: 8px 16px;
  color: var(--color-primary-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  /* Phase 15.1: a firmer press than the other chips -- Search is the most
     tapped surface. */
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-decelerate),
    background var(--motion-duration-fast) var(--motion-ease-decelerate),
    transform var(--motion-duration-quick) var(--motion-ease-decelerate);
}

.search-prompt-chip:hover,
.search-prompt-chip:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: 3px solid var(--color-focus-ring);
}

.search-prompt-chip:active {
  transform: scale(var(--motion-press-scale));
}

/* Composer place-memo suggestions: the user's own past place memos, one
   tap to reuse. Quieter than the search chips (they sit inside a form,
   not as the main content). */
.location-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 2px;
}

.location-suggestion-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  padding: 5px 12px;
  color: var(--color-primary-strong);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-decelerate),
    background var(--motion-duration-fast) var(--motion-ease-decelerate),
    transform var(--motion-duration-quick) var(--motion-ease-decelerate);
}

.location-suggestion-chip:hover,
.location-suggestion-chip:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: 3px solid var(--color-focus-ring);
}

.location-suggestion-chip:active {
  transform: scale(var(--motion-press-scale));
}

/* Phase 14.2: nearby-calendar-event suggestions in the composer. One tap
   links this Record to the event as context; tapping the selected chip
   again clears it. */
.calendar-suggestions-prompt {
  margin: 0 0 var(--space-3);
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.calendar-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.calendar-suggestion-chip {
  display: grid;
  gap: 1px;
  justify-items: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 8px 14px;
  color: var(--color-text);
  text-align: left;
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-decelerate),
    background var(--motion-duration-fast) var(--motion-ease-decelerate),
    transform var(--motion-duration-quick) var(--motion-ease-decelerate);
}

.calendar-suggestion-chip:hover,
.calendar-suggestion-chip:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus-ring);
}

.calendar-suggestion-chip:active {
  transform: scale(var(--motion-press-scale));
}

.calendar-suggestion-chip.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.calendar-suggestion-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.calendar-suggestion-time {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.calendar-suggestion-chip.is-selected .calendar-suggestion-time {
  color: var(--color-primary-strong);
}

.more-records-button {
  min-height: 40px;
  padding: var(--button-padding-compact);
  white-space: nowrap;
}

.record-card,
.task-card,
.course-card {
  padding: var(--card-padding);
}

.record-card {
  display: grid;
  gap: var(--space-5);
  cursor: pointer;
  /* Transparent at rest (the shared card rule dropped its visible border
     for the borderless-card look) -- still gives :hover a color to
     transition into instead of an instant snap. */
  border: 1px solid transparent;
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-decelerate),
    box-shadow var(--motion-duration-fast) var(--motion-ease-decelerate),
    transform var(--motion-duration-fast) var(--motion-ease-decelerate);
}

.record-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-floating);
  transform: translateY(-1px);
}

.record-card:active {
  transform: translateY(0);
}

.record-card-header,
.record-card-body,
.record-card-tags {
  min-width: 0;
}

.record-card-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}

.record-card-type {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.record-type-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.record-card-photo .record-type-icon,
.record-card-note .record-type-icon {
  background: var(--color-surface-subtle);
}

.record-card-audio .record-type-icon {
  color: var(--color-primary-strong);
}

.record-card-note .record-card-body p {
  color: var(--color-muted-strong);
}

.record-card-media {
  display: grid;
  min-height: 74px;
  margin: var(--space-4) 0;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.record-card-media-photo {
  /* Phase 31: 検索結果カードは写真を大きく -- the photo is the memory, it leads rather than thumbnails. */
  min-height: 160px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.7)),
    var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.record-card-media-audio {
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary-strong);
}

.record-audio-player {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  color: var(--color-primary-strong);
}

.record-audio-toggle,
.record-card-audio-button {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-primary-strong);
  padding: var(--space-2) 0;
  font-weight: var(--font-weight-strong);
  text-align: left;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.record-audio-toggle:hover,
.record-audio-toggle:focus-visible,
.record-card-audio-button:hover,
.record-card-audio-button:focus-visible {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  transform: none;
}

.record-audio-player.is-playing .record-audio-toggle {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--color-primary-strong);
}

.record-audio-play,
.record-card-play {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: var(--shadow-button-primary);
  color: #ffffff;
  font-size: var(--font-size-sm);
}

.record-audio-player.is-playing .record-audio-play {
  background: var(--color-primary-strong);
  color: #fff;
}

.record-audio-waveform,
.record-card-wave {
  position: relative;
  display: flex;
  width: 100%;
  height: 48px;
  gap: 3px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.record-audio-waveform-bar {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 0;
  min-width: 1px;
  max-width: 3px;
  height: var(--wave-level);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  opacity: 0.54;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.record-audio-waveform-bar.is-played {
  background: var(--color-primary);
  opacity: 0.88;
}

.record-audio-player.is-playing .record-audio-waveform-bar:not(.is-played) {
  opacity: 0.34;
}

.record-audio-time {
  min-width: 94px;
  color: var(--color-muted-strong);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  text-align: right;
  white-space: nowrap;
}

.record-audio-seek {
  display: none;
}

.record-audio-error,
.record-card-audio-error {
  min-height: 18px;
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.record-audio-player-detail .record-audio-toggle {
  min-height: 76px;
  padding: var(--space-2) 0;
}

.record-audio-player-detail .record-audio-waveform {
  height: 52px;
}

.record-card-media-note {
  /* The card header already shows the "メモ" record type label with an
     icon, so this box only duplicated it inside an otherwise-empty area
     between the title and preview text. Hide it instead of showing an
     empty placeholder audio/photo cards don't need. */
  display: none;
}

.record-card-body p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.record-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.record-card-tags span {
  border-radius: var(--chip-radius);
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
  padding: var(--chip-padding);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-medium);
}

.record-card h3,
.task-card h3,
.course-card h2,
.record-detail h3 {
  margin: 0;
  font-size: 16px;
}

.record-type {
  display: inline-flex;
  align-items: center;
  border-radius: var(--chip-radius);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  padding: var(--chip-padding);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-medium);
  vertical-align: middle;
}

.record-meta,
.tag-row,
.fact-list,
.match-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.record-meta span,
.record-meta time,
.tag-row span,
.match-reasons span {
  border-radius: var(--chip-radius);
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
  padding: var(--chip-padding);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-medium);
}

.match-reasons span {
  background: var(--color-accent-soft);
  color: var(--color-success);
}

.suggested-title {
  color: var(--color-muted-strong);
  font-size: 13px;
}

.ai-status {
  display: inline-block;
  border-radius: var(--chip-radius);
  padding: var(--chip-padding);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-medium);
}

.ai-status-completed {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.ai-status-not-required,
.ai-status-deferred {
  background: var(--color-surface-subtle);
  color: var(--color-muted);
}

.ai-status-pending,
.ai-status-processing,
.ai-status-setup-required {
  background: var(--color-warning-soft);
  color: #c2410c;
}

.ai-status-failed {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.detail-disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface-subtle);
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.detail-disclosure summary {
  cursor: pointer;
  color: var(--color-muted-strong);
  font-weight: 800;
}

.detail-disclosure[open] {
  background: var(--color-surface);
}

.transcript-disclosure {
  overflow: hidden;
}

.transcript-disclosure .transcript-body,
.transcript-disclosure .empty {
  animation: detailDisclosureReveal var(--motion-duration-base) var(--motion-ease-standard);
}

.detail-header,
.task-card {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
}

.detail-header {
  align-items: start;
}

.detail-actions,
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.record-detail {
  display: grid;
  gap: var(--space-4);
  position: sticky;
  top: 20px;
}

.record-detail section {
  display: grid;
  gap: var(--space-2);
}

.detail-meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: var(--space-3);
}

.detail-meta-list div,
.detail-memory-section,
.record-media-section,
.developer-info-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4);
}

.detail-meta-list div {
  display: grid;
  gap: var(--space-1);
  background: var(--color-surface-subtle);
}

.detail-meta-list .ai-status {
  opacity: 0.78;
}

.detail-memory-section p,
.summary-section p,
.transcript-body {
  color: var(--color-muted-strong);
  line-height: 1.72;
}

.detail-date {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.detail-primary-text {
  border-left: 3px solid var(--color-primary);
}

.detail-primary-text p {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: 1.78;
  white-space: pre-wrap;
}

.summary-section {
  background: var(--color-surface-subtle);
}

.record-media-section {
  gap: var(--space-3);
}

.record-audio-section {
  background: var(--color-surface-subtle);
}

.location-section,
.detail-tags-section {
  background: var(--color-surface);
}

.transcript-body {
  max-height: 42vh;
  overflow: auto;
}

.detail-context-section {
  background: var(--color-surface-subtle);
}

.photo-understanding-section {
  background: var(--color-surface-subtle);
}

@keyframes detailDisclosureReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.developer-info-group {
  gap: var(--space-4);
  background: var(--color-surface-subtle);
}

.developer-info-group h3 {
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
}

.fact-list {
  margin: 0;
}

.fact-list div {
  min-width: 120px;
}

.fact-list dt {
  color: var(--color-muted);
  font-size: 12px;
}

.fact-list dd {
  margin: 0;
  font-weight: 800;
}

.settings-screen {
  display: grid;
  /* Phase 31: Apple設定アプリのような安心感 -- generous, quiet grouping. */
  gap: var(--space-7);
}

.settings-card,
.settings-group {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.settings-card h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.25;
}

.settings-card p {
  margin: 0;
  color: var(--color-muted);
}

.settings-card-header {
  display: flex;
  gap: var(--space-4);
  align-items: start;
  justify-content: space-between;
}

.settings-group legend {
  padding: 0 6px;
  color: var(--color-text);
  font-weight: var(--font-weight-strong);
}

.settings-group p {
  margin: 0;
  color: var(--color-muted);
}

.settings-copy-stack {
  display: grid;
  gap: var(--space-3);
}

.settings-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.settings-list div {
  display: grid;
  gap: 3px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.settings-list dt {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
}

.settings-list dd {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--font-weight-strong);
}

.settings-list small {
  color: var(--color-muted);
}

.settings-list-compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.settings-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: var(--chip-radius);
  padding: var(--chip-padding);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.settings-status-pill.is-ready {
  background: var(--color-success-soft);
  color: var(--color-success);
}

/* Connector のファイル選択。<input type=file> の既定の見た目は画面から隠し、
   ラベルが既存の .secondary ボタンとして振る舞う。押せる範囲はラベル全体。 */
.connector-file-pick { display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; cursor: pointer; }
.connector-file-pick input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.connector-file-pick:has(input:disabled) { opacity: 0.6; cursor: default; }
.settings-status-pill.is-muted {
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
}

/* Phase 22.1: AI Brain (Foundation) settings status readout. */
.settings-brain-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 8px 0 0;
  min-width: 0;
}

.settings-brain-status > div {
  min-width: 0;
}

.settings-brain-status dt {
  font-size: 12px;
  color: var(--color-muted);
}

.settings-brain-status dd {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

/* Phase 22.6: AI Brain の同意カードと説明シート。
   状態を色だけで伝えないので、ピルの文字と .ai-brain-consent-note の一文が必ず対になる。 */
.ai-brain-consent-note {
  color: var(--color-text);
}

.ai-brain-consent-since {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.ai-brain-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ai-brain-consent-actions > button {
  flex: 1 1 auto;
  /* 375px で2つ並べても文字が潰れない下限。入らなければ折り返す。 */
  min-width: 140px;
  min-height: 44px;
}

/* 説明シートは長い。読み切れるように、シートの中だけを縦スクロールさせる
   （背面は is-sheet-open で止めてある）。 */
.ai-brain-consent-sheet {
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-brain-consent-sheet p,
.ai-brain-revoke-sheet p {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  line-height: 1.6;
}

.ai-brain-consent-sheet .semantic-consent-lists {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.ai-brain-consent-sheet .semantic-consent-lists h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
}

.ai-brain-consent-sheet .semantic-consent-lists ul {
  margin: 0;
  padding-left: 1.25em;
  display: grid;
  gap: var(--space-2);
  color: var(--color-text);
}

.ai-brain-consent-fact {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface-subtle);
}

/* 縦に積む。375px で横並びにすると、どちらの文字も読めない幅になる。 */
.ai-brain-sheet-actions,
.ai-brain-revoke-actions {
  display: grid;
  gap: var(--space-3);
}

.ai-brain-sheet-actions > button,
.ai-brain-revoke-actions > button {
  width: 100%;
  min-height: 44px;
}

/* シートを開いているあいだ、背面を動かさない。開いた場所を見失わせないため。 */
body.is-sheet-open {
  overflow: hidden;
}

/* Phase 22.7: 記録にきく。
   縦は「本文だけが伸びて、入力欄は必ず下に残る」。答えが長くても、次の質問を書く場所を
   探させない。iOS でキーボードが出ると visualViewport が縮み、fixed の下端はキーボードの
   上へ来る -- そのとき本文が潰れないよう、本文側にだけ最小の高さを与える。 */
.brain-chat-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 88dvh;
  padding-top: var(--space-3);
}

.brain-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brain-chat-head h2 {
  margin: 0;
}

.brain-chat-close {
  display: grid;
  place-items: center;
  /* 指で押せる下限。アイコンだけのボタンなので、見た目より広く取る。 */
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-muted-strong);
}

.brain-chat-body {
  flex: 1 1 auto;
  min-height: 104px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.brain-chat-lead,
.brain-chat-note,
.brain-chat-status,
.brain-chat-answer-text {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  line-height: 1.7;
}

.brain-chat-note {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* 送った質問。答えの上に置いて、「何への答えか」が分かるようにする。 */
.brain-chat-question {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.brain-chat-answer-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.brain-chat-examples {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.brain-chat-example {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
}

.brain-chat-sources-title {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  color: var(--color-muted-strong);
}

.brain-chat-source-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.brain-chat-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
}

/* 消えた記録・端末に無い情報源。押せないことを、薄さだけでなく形（枠線を破線）でも示す。 */
.brain-chat-source.is-inactive {
  border-style: dashed;
  color: var(--color-muted);
}

.brain-chat-warnings {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.brain-chat-error {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface-subtle);
}

.brain-chat-error p {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  line-height: 1.6;
}

.brain-chat-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.brain-chat-error-actions > button {
  flex: 1 1 auto;
  min-width: 140px;
  min-height: 44px;
}

.brain-chat-form {
  display: grid;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.brain-chat-input {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  /* iOS Safari は 16px 未満の入力欄で必ずズームする。ズームすると、シートの下端も
     入力欄も画面の外へ出てしまうので、ここだけは 16px を下回らせない。 */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.6;
  resize: none;
}

.brain-chat-formfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brain-chat-hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.brain-chat-send,
.brain-chat-cancel {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 44px;
}

.theme-current-preview {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  width: fit-content;
  border-radius: var(--radius-pill);
  padding: 7px 10px;
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--space-4);
}

.theme-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-muted-strong);
  /* Was an instant snap on hover/selection -- now matches every other
     interactive surface's motion language. */
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-decelerate),
    background var(--motion-duration-fast) var(--motion-ease-decelerate),
    color var(--motion-duration-fast) var(--motion-ease-decelerate);
  font-weight: var(--font-weight-strong);
}

.theme-option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.theme-option:focus-within,
.theme-option.is-selected {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus-ring);
}

.theme-option:hover {
  border-color: var(--color-primary);
}

.theme-option.is-selected {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.theme-option.is-selected::after {
  margin-left: auto;
  color: var(--color-primary-strong);
  content: "✓";
}

.theme-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(135deg, var(--theme-swatch) 0 50%, var(--theme-swatch-soft) 50% 100%);
}

.settings-developer-info {
  margin-top: var(--space-2);
  background: var(--color-surface-subtle);
}

.audio-slot audio {
  display: block;
  width: 100%;
}

.photo-slot {
  display: grid;
  gap: var(--space-3);
}

.photo-slot img {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.note-body p {
  white-space: pre-wrap;
}

.media-meta {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: 12px;
}

.media-diagnostics {
  color: var(--color-muted);
  font-size: 12px;
}

.media-diagnostics summary {
  cursor: pointer;
  font-weight: 700;
}

.fact-list.compact {
  gap: var(--space-3);
  margin-top: 8px;
}

.record-edit-screen {
  gap: var(--space-6);
}

.record-edit-heading {
  gap: var(--space-2);
}

.record-edit-form {
  gap: var(--space-5);
}

.record-edit-fields {
  display: grid;
  gap: var(--space-4);
}

.record-edit-field {
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.record-edit-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.record-edit-field textarea {
  background: var(--color-surface-subtle);
}

.record-edit-field textarea {
  min-height: 132px;
  resize: vertical;
}

.record-edit-ai-note {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
}

.record-edit-ai-note summary {
  cursor: pointer;
  color: var(--color-muted-strong);
  font-weight: var(--font-weight-strong);
}

.edit-preserved {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: 13px;
}

.blocked-box,
.setup-box,
.ai-status-panel {
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-warning-soft);
}

.ai-status-panel {
  display: grid;
  gap: var(--space-4);
}

.ai-communication-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-surface-subtle);
}

.developer-info summary,
.media-diagnostics summary {
  cursor: pointer;
  color: var(--color-muted-strong);
  font-weight: 800;
}

.ai-communication-panel ol {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 20px;
}

.ai-communication-panel li {
  display: grid;
  gap: 3px;
  color: var(--color-muted-strong);
  font-size: 12px;
}

.ai-status-panel-completed {
  border-left-color: var(--color-accent);
  background: var(--color-success-soft);
}

.ai-status-panel-failed {
  border-left-color: var(--color-danger);
  background: #fef2f2;
}

.ai-status-panel-deferred {
  border-left-color: var(--color-border);
  background: var(--color-surface-subtle);
}

.setup-box {
  margin-bottom: 16px;
}

.setup-box h2,
.setup-box h3,
.ai-status-panel h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.course-dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.toast {
  max-width: 1180px;
  margin: 0 auto 16px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--color-success-soft);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-input);
  /* Phase 15.1: a quiet fade+drop in so a toast arrives softly. */
  animation: toast-in var(--motion-duration-base) var(--motion-ease-decelerate);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.field-error {
  margin: 6px 0 0;
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
}

.field-warning {
  margin: 6px 0 0;
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--color-warning-soft);
  color: #b45309;
  font-weight: var(--font-weight-medium);
}

.empty {
  color: var(--color-muted);
}

.bottom-nav {
  position: fixed;
  z-index: 100;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  display: grid;
  /* Phase 31: five tabs + the Record FAB. The FAB column is `auto` so it keeps its natural 56px --
     with six equal columns it would be 47px at 320px and bleed over its neighbours. The five tabs
     split what remains, which keeps every tab >= the 44px touch-target floor even at 320px. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto repeat(3, minmax(0, 1fr));
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-nav);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.bottom-nav button {
  display: grid;
  min-height: var(--nav-item-min-height);
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: var(--nav-item-radius);
  padding: 8px 6px;
  background: transparent;
  color: var(--color-muted);
  font-weight: 800;
  letter-spacing: 0;
  /* Phase 15.1: decelerate easing so tab hover/active state changes settle
     naturally rather than snapping (matches the rest of the app). */
  transition:
    background var(--motion-duration-fast) var(--motion-ease-decelerate),
    color var(--motion-duration-fast) var(--motion-ease-decelerate),
    transform var(--motion-duration-quick) var(--motion-ease-decelerate);
}

.bottom-nav button:hover:not(:disabled),
.bottom-nav button:focus-visible {
  background: var(--color-surface-subtle);
  color: var(--color-muted-strong);
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.bottom-nav .active {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.nav-icon {
  display: grid;
  width: 24px;
  height: 22px;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.nav-label {
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.bottom-nav .capture-fab {
  justify-self: center;
  align-self: center;
  width: 56px;
  height: 56px;
  padding: 0;
  margin: 0 2px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-strong));
  color: #ffffff;
  box-shadow: var(--shadow-add-record-nav);
  transform: none;
}

.bottom-nav .capture-fab:hover:not(:disabled),
.bottom-nav .capture-fab:focus-visible {
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-strong));
  color: #ffffff;
  transform: translateY(-1px);
}

.bottom-nav .capture-fab .camera-icon {
  width: 24px;
  height: 24px;
}

/* Phase 9 UI polish: Record-first readability, calmer whitespace, +Record as the clear hero. */

/* Bottom navigation: make the centered +Record the visual hero of the bar. */
.bottom-nav .capture-fab {
  transform: translateY(-6px);
  box-shadow: var(--shadow-floating), var(--shadow-add-record-nav);
}

.bottom-nav .capture-fab:hover:not(:disabled),
.bottom-nav .capture-fab:focus-visible {
  transform: translateY(-8px);
}

.bottom-nav .capture-fab:active:not(:disabled) {
  /* Phase 15.1: a gentler, more native press than the old 0.93 -- the FAB
     dips slightly and eases back via the nav button transition. */
  transform: translateY(-6px) scale(var(--motion-press-scale));
}

.bottom-nav button:active:not(:disabled):not(.capture-fab) {
  transform: scale(var(--motion-press-scale));
}

/* +Record choice cards (audio / photo / memo) and photo source cards: icon in a soft rounded badge, roomier layout. */
.record-menu-icon {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  font-size: 26px;
  line-height: 1;
}

.record-type-menu button {
  gap: var(--space-4);
  padding: var(--space-8);
  align-content: start;
}

.record-type-menu small {
  line-height: 1.5;
}

/* Phase 9 Step 2: Record Detail = "revisit the original Record" first; Search = "find and remember" first. AI stays a quiet helper. */

/* Detail: give the record a little more reading rhythm between sections. */
.record-detail {
  gap: var(--space-5);
}

/* Phase 15.1: the Detail eases in (soft fade + short slide) only on an
   actual card->Detail open -- the .detail-enter class is time-gated in
   render.js so favorite/edit re-renders never replay it. */
.record-detail.detail-enter {
  animation: detail-enter var(--motion-duration-base) var(--motion-ease-decelerate);
}

@keyframes detail-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.record-detail section {
  gap: var(--space-3);
}

/* Detail header: title is the hero; the record-type eyebrow is a small quiet label above it. */
.detail-header h2 {
  font-size: 26px;
  letter-spacing: -0.01em;
}

.detail-header .eyebrow {
  color: var(--color-primary-strong);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.02em;
}

/* Original data (photo / audio) and the user's own memo are the main content — give them a touch more presence. */
.record-media-section {
  border-color: var(--color-border-strong);
  padding: var(--space-5);
  box-shadow: var(--shadow-input);
}

.record-media-section h3 {
  color: var(--color-text);
}

.detail-primary-text {
  border-left-width: 4px;
  background: var(--color-surface-tint);
}

/* AI-derived / supporting sections (要点 summary, 思い出の手がかり, Record情報) read quieter than the original data. */
.summary-section h3,
.photo-understanding-section h3,
.detail-context-section h3 {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Phase 32: この Hero を「面 + 影の箱」に戻す宣言がここにあった。基底 (.search-hero) は
   箱を持たないと決めているのに、後ろのこの規則が背景と影を足し返していて、Search の巨大検索だけ
   グレーの箱の中に沈んでいた（実測で発覚）。Hero はタイポと余白で立たせる、が Phase 32 の決定なので
   規則ごと削除する。値を上書きし合う二重帳簿を残さない。 */

/* Result cards: make the Record type instantly scannable with a calm per-type tint on the icon badge. */
.record-card-audio .record-type-icon {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.record-card-photo .record-type-icon {
  background: var(--color-accent-soft);
}

.record-card-note .record-type-icon {
  background: var(--color-warning-soft);
}

/* Phase 9 Step 3: slimmer Home, calmer Settings, warmer Memories. Display-only — every string stays in the DOM. */

/* Settings: supporting copy reads a little smaller and softer; status pills stay informative but quiet. */
.settings-card p {
  line-height: 1.65;
}

.settings-list small {
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.settings-status-pill {
  font-weight: var(--font-weight-medium);
}

/* Settings: developer-only info is visually separated from everyday settings (dashed, muted, compact). */
.settings-developer-info {
  border-style: dashed;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.settings-developer-info summary {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Phase 9 design polish: white base with a pale lavender wash, rounder cards, pill-shaped navigation.
   Additive token-only overrides — every original Design System rule stays untouched for the token tests. */

/* Record cards and the 3-choice / photo-source cards: rounder corners for
   the reference card look. Phase 13.5: bumped to --radius-xl (22px) to
   match the outer radius already used by Home's page-record cards and
   Life Map's lens cards -- one corner language across the app. */
.record-card,
.task-card,
.course-card,
.record-type-menu button {
  border-radius: var(--radius-xl);
}

.record-capture,
.record-detail,
.empty-detail,
.record-placeholder {
  border-radius: var(--radius-xl);
}

/* Bottom navigation: a light pill bar; the centered +Record stays the lifted gradient hero. */
.bottom-nav {
  border-radius: var(--radius-pill);
  border-color: rgba(226, 232, 240, 0.72);
  background: rgba(255, 255, 255, 0.9);
}

.bottom-nav button {
  border-radius: var(--radius-pill);
}

/* Phase 9 final visual polish (reference direction): icon-left choice rows, slimmer previews. */

/* Record-create choices (音声/写真/メモ) and photo-source cards: icon on the left, title + short
   description on the right — one calm row per choice, like the reference sheet. */
.record-type-menu button {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
  align-items: center;
  column-gap: var(--space-6);
  row-gap: var(--space-1);
  padding: var(--space-7);
}

.record-type-menu .record-menu-icon {
  grid-row: 1 / span 2;
}

/* Record cards everywhere: previews stay to two calm lines so long memos never crowd the list. */
.record-card-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Bottom navigation: a touch whiter for the clean floating-card look. */
.bottom-nav {
  /* Phase 32 -- visionOS のガラス。色を乗せず、ぼかしと透過だけで浮かせる。 */
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(13, 17, 23, 0.06);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* Memories: give the empty state the same warm, inviting card treatment Search's empty state already has. */
.memories-list-section .rich-empty {
  display: grid;
  min-height: 156px;
  gap: var(--space-3);
  align-content: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.74);
  padding: var(--space-8);
  text-align: center;
  justify-items: center;
}

.memories-list-section .rich-empty strong {
  color: var(--color-muted-strong);
  font-size: var(--font-size-lg);
}

.memories-list-section .rich-empty span {
  max-width: 520px;
}

@media (max-width: 860px) {
  .app-shell {
    padding: calc(14px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(92px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .layout-has-detail .detail-panel {
    order: -1;
  }

  .life-page-masthead h2 {
    font-size: 28px;
  }

  .record-detail {
    position: static;
  }

  .record-audio-toggle {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* Card mode only -- the compact page-mode player (Home) keeps its
     single-row layout at every width, so it's excluded here. */
  .record-audio-time:not(.record-audio-player-page .record-audio-time) {
    grid-column: 1 / -1;
    text-align: left;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }

  /* Phase 32: mobile の .search-hero padding 上書きも削除。Hero の余白は基底が持つ
     (var(--space-8) 0 var(--space-2))。ここで詰め直すと、一番見られる幅でだけ Hero が縮む。 */

  .search-hero .record-search-form {
    display: grid;
  }

  .search-hero .search-form input {
    min-height: 52px;
    font-size: 16px;
  }

  .search-hero .search-submit {
    min-height: 48px;
  }

  .record-type-menu {
    grid-template-columns: 1fr;
  }

  .record-create-field,
  .record-create-card,
  .record-create .optional-input,
  .record-create .audio-device-panel,
  .record-create .recorder-preview {
    padding: var(--space-4);
  }

  .record-create-basics .record-create-fields {
    grid-template-columns: 1fr;
  }

  .recorder-action-header {
    display: grid;
  }

  .record-create .audio-device-panel {
    grid-template-columns: 1fr;
  }

  .record-create .recorder-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .record-save-actions,
  .record-save-actions .primary {
    justify-items: stretch;
    width: 100%;
  }

  .detail-header {
    display: grid;
  }

  .detail-actions {
    justify-content: start;
  }

  .detail-memory-section,
  .record-media-section,
  .developer-info-group,
  .detail-disclosure {
    padding: var(--space-4);
  }

  .settings-card,
  .settings-group {
    padding: var(--space-4);
  }

  .settings-card-header {
    display: grid;
  }

  .bottom-nav {
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    max-width: none;
    padding: 7px;
  }

  .bottom-nav button {
    min-height: 50px;
    padding: 7px 4px;
  }

  .bottom-nav .capture-fab {
    width: 50px;
    height: 50px;
    margin: 0 1px;
  }

  .nav-label {
    font-size: 12px;
  }
}

/* Phase 16.4b: Related Records ("関連する記録") -- minimal, Detail-only, must stay
   quieter than the current Record. No large photo, no audio player, no thumbnail. */
.related-records-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.related-card {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface-subtle);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.related-card-type {
  font-size: 12px;
  color: var(--color-muted);
}

.related-card-title {
  font-weight: 600;
}

.related-card-meta {
  font-size: 12px;
  color: var(--color-muted);
}

.related-card:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.related-card:active {
  transform: scale(var(--motion-press-scale));
}

.related-enter {
  animation: related-fade-in 180ms ease-out;
}

@keyframes related-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .related-enter {
    animation: none;
  }

  .related-card:active {
    transform: none;
  }
}

/* Phase 16.5b: Themes ("よく残しているテーマ") -- a quiet "look back" entry in the Search
   empty state. A DISTINCT section (heading + counted chips) so it never reads as the
   search-suggestion chips or as search results. */
.themes-section {
  margin-top: 20px;
}

.themes-heading {
  font-size: 15px;
  margin: 0;
}

.themes-desc {
  margin: 2px 0 10px;
  font-size: 13px;
  color: var(--color-muted);
}

.themes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.theme-chip-name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.theme-chip-count {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.theme-chip:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.theme-chip:active {
  transform: scale(var(--motion-press-scale));
}

.themes-enter {
  animation: themes-fade-in 180ms ease-out;
}

@keyframes themes-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .themes-enter {
    animation: none;
  }

  .theme-chip:active {
    transform: none;
  }
}

/* Phase 17.2a: Life Map abstract "地図" lens -- an on-device positional map (no tiles,
   no street data). Fixed height so it never causes layout jump; pins are absolutely
   positioned by projected percentage; the list below is the reliable/SR/overlap path. */
/* Phase 17.4: the Life Map screen inherits display:grid from .memories-screen. Pin
   its single column to minmax(0, 1fr) — scoped to .life-map-screen only, so Home and
   other memories-screens are untouched — so a long place name or latest-activity line
   inside a cluster card ellipsizes instead of widening the column (no horizontal
   scroll). */
.life-map-screen {
  grid-template-columns: minmax(0, 1fr);
}

.life-map-map-note {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--color-muted);
}

.life-map-map {
  position: relative;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  overflow: hidden;
}

/* Owner QA 用の位置情報診断（Preview / local だけ）。通常のユーザーには存在しない。
   共有用の1枚は長い行を持つので、折り返して外へはみ出させない -- ここが広がると
   ページごと横へずれる（地図で直したのと同じ失敗を、診断で作らない）。 */
/* Owner が探さずに見つけられる見た目にする（Preview にしか出ないので、通常の画面設計は
   これに引きずられない）。閉じたままでも、そこに在ることが分かる枠と見出しを持たせる。 */
.life-map-diag {
  margin: var(--space-3, 12px) var(--space-4, 16px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface-subtle);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
.life-map-diag > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--color-text);
}
.life-map-diag-list { margin: var(--space-2, 8px) 0; display: grid; gap: 2px; }
.life-map-diag-row { display: flex; gap: var(--space-2, 8px); justify-content: space-between; }
.life-map-diag-row dt { flex: 0 0 auto; }
.life-map-diag-row dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.life-map-diag-report {
  margin: var(--space-2, 8px) 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.6;
  user-select: text;
}

/* 「現在地」が取れなかったことを伝える一行。長い文でも折り返して、横へはみ出させない。 */
.life-map-here-note {
  margin: var(--space-2, 8px) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.life-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  justify-content: center;
}

.life-map-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-surface);
  flex-shrink: 0;
}

/* Phase 17.4: a cluster (2+ Records) reads as heavier than a single pin via a
   quiet outer ring — minimal, not a Mapbox-style marker. */
.life-map-pin-cluster .life-map-pin-dot {
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-primary-soft);
}

.life-map-pin-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(2px);
  min-width: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  /* Phase 17.4: a thin surface ring keeps the count legible over a place label. */
  box-shadow: 0 0 0 2px var(--color-surface);
}

.life-map-pin-label {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.life-map-pin:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.life-map-pin:active {
  transform: translate(-50%, -50%) scale(var(--motion-press-scale));
}

.life-map-cluster-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.life-map-cluster-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

/* Phase 17.4: the place name (line 1) stacked over the latest activity (line 2);
   min-width:0 lets both lines ellipsize instead of pushing the count off-screen. */
.life-map-cluster-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden; /* stop a long name/latest line from forcing the card wider */
  flex: 1 1 auto;
}

.life-map-cluster-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.life-map-cluster-item-sub {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  color: var(--color-muted);
}

.life-map-cluster-item-kind {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}

.life-map-cluster-item-latest {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.life-map-cluster-item-count {
  flex-shrink: 0;
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}

.life-map-cluster-item:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.life-map-cluster-item:active {
  transform: scale(var(--motion-press-scale));
}

.life-map-map-enter {
  animation: life-map-map-fade-in 180ms ease-out;
}

/* Phase 17.2b-3: an automatic place name fading onto an existing pin. The pin's
   position and size never change (the label slot is inside the pin button), so
   there is no layout jump -- only the text fades in. */
.life-map-pin-label-enter {
  animation: life-map-map-fade-in 180ms ease-out;
}

/* Phase 17.2b-3: static Mapbox attribution shown only while automatic names are
   displayed. Plain readable text (screen-reader friendly), quiet styling. */
.life-map-attribution {
  /* Phase 17.4: a quiet separator + breathing room lifts the required attribution
     out of the list without changing the logo; it wraps on narrow screens. */
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Phase 17.3: the REQUIRED official Mapbox logo (88x23 asset, unmodified). The
   badge background is placement styling only — the white-fill logo asset is
   designed for a contrasting surface. Never hidden, shrunk below legibility, or
   collapsed away. */
.mapbox-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: #64748b;
}
.mapbox-logo svg {
  display: block;
  width: 66px;
  height: auto;
}

@keyframes life-map-map-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .life-map-map-enter,
  .life-map-pin-label-enter {
    animation: none;
  }

  .life-map-pin:active,
  .life-map-cluster-item:active {
    transform: translate(-50%, -50%);
  }

  .life-map-cluster-item:active {
    transform: none;
  }
}

/* Phase 21.3c: Marketplace Discovery read UI. Reuses the existing card / chip / button
   tokens so it sits visually with the rest of @me and never looks like an SNS feed.
   The screen inherits display:grid from .memories-screen -- pin its single column to
   minmax(0, 1fr) (scoped) so a long title / summary / tag can ellipsize or wrap instead
   of widening the column (no horizontal scroll). */
.marketplace-screen {
  grid-template-columns: minmax(0, 1fr);
}

.mkt-note {
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--color-muted);
}

.mkt-search {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.mkt-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 15px;
}

.mkt-search-button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
}

.mkt-status {
  margin: 12px 0;
  font-size: 13px;
  color: var(--color-muted);
}

.mkt-error {
  margin: 12px 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.mkt-retry,
.mkt-more {
  min-height: 44px;
}

.mkt-more {
  width: 100%;
  margin-top: 12px;
}

.mkt-section {
  margin-top: 20px;
  min-width: 0;
}

.mkt-section > h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.mkt-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mkt-chip-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  cursor: pointer;
}

.mkt-chip-count {
  color: var(--color-muted);
  font-size: 12px;
}

.mkt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.mkt-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
}

.mkt-card-title {
  margin: 0;
  font-size: 16px;
  min-width: 0;
}

.mkt-card-open {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.mkt-card-summary,
.mkt-detail-summary {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.mkt-card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: 12px;
  color: var(--color-muted);
  min-width: 0;
}

.mkt-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  font-size: 12px;
}

.mkt-chip-featured {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  color: var(--color-text);
}

.mkt-card-tags {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.mkt-tag {
  font-size: 12px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.mkt-save {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-save.is-saved {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
}

.mkt-save[disabled] {
  opacity: 0.6;
  cursor: default;
}

.mkt-save-detail {
  margin-top: 4px;
}

/* Phase 21: 保存者の private Life Map 配置（ライブラリ詳細の中）。
   座標は本人だけのもの。プライバシー文言と「ここに置く」の確定をひとまとめにする。 */
.mkt-map-place {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mkt-map-place-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.mkt-map-place-privacy {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-muted);
}
.mkt-map-place-ref {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}
.mkt-map-place-locate {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mkt-map-place-chosen {
  margin: 0;
  font-size: 13px;
  color: var(--color-primary);
}
.mkt-map-place-error {
  margin: 0;
  font-size: 13px;
  color: var(--color-danger);
}
.mkt-map-place-note-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--color-muted);
}
.mkt-map-place-note {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
}
.mkt-map-place-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mkt-map-place-confirm {
  background: var(--color-primary);
  color: var(--color-pane);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 40px;
  cursor: pointer;
}
.mkt-map-place-confirm[disabled] {
  opacity: 0.6;
  cursor: default;
}
.mkt-map-place-status {
  margin: 0;
  font-size: 14px;
}
.mkt-map-place-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.mkt-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.mkt-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.mkt-detail-heading {
  margin: 8px 0 0;
  font-size: 15px;
}

.mkt-detail-paragraph {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.mkt-detail-checklist,
.mkt-detail-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.mkt-search-button:focus-visible,
.mkt-chip-button:focus-visible,
.mkt-card-open:focus-visible,
.mkt-save:focus-visible,
.mkt-more:focus-visible,
.mkt-retry:focus-visible,
.mkt-back:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.mkt-chip-button:active,
.mkt-save:active {
  transform: scale(var(--motion-press-scale));
}

@media (prefers-reduced-motion: reduce) {
  .mkt-chip-button:active,
  .mkt-save:active {
    transform: none;
  }
}

/* Phase 21.3d: the Library (saved Knowledge). A Marketplace-internal segmented control
   plus the saved-item card. The bottom navigation is untouched. */
.mkt-tabs {
  display: flex;
  gap: var(--space-3);
  min-width: 0;
  flex-wrap: wrap;
}

.mkt-tab {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-tab.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  color: var(--color-text);
}

.mkt-tab:focus-visible,
.mkt-remove:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.mkt-tab:active {
  transform: scale(var(--motion-press-scale));
}

@media (prefers-reduced-motion: reduce) {
  .mkt-tab:active {
    transform: none;
  }
}

.mkt-saved-at {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.mkt-lib-gone {
  margin: 0;
  font-size: 14px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.mkt-remove {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-remove[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Phase 21.3e: Authoring (自分の知識 / 下書き / プレビュー / 公開確認). Structured input
   only -- no rich-text editor. Every control is a 44px target and wraps on a narrow screen. */
.mkt-mine-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.mkt-mine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}

.mkt-mine-actions button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-publish {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-publish[disabled] {
  opacity: 0.55;
  cursor: default;
}

.mkt-mine-title {
  overflow-wrap: anywhere;
}

.mkt-status-pill {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.mkt-status-published {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  color: var(--color-text);
}

.mkt-card-version,
.mkt-mine-note {
  font-size: 12px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.mkt-mine-note {
  margin: 0;
}

.mkt-confirm-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface);
  min-width: 0;
}

.mkt-confirm-inline p {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mkt-inline-error {
  margin: 0;
  font-size: 13px;
  color: var(--color-danger);
  overflow-wrap: anywhere;
}

/* Phase 21.6: Version History (auxiliary, opened from the Knowledge detail). */
.mkt-version-entry {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.mkt-version-link {
  font-size: 13px;
  min-height: 44px;
}

.mkt-version-of {
  margin: 0 0 8px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mkt-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.mkt-version-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.mkt-version-no {
  font-weight: 700;
  flex: 0 0 auto;
}

.mkt-version-current {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft, rgba(0, 122, 255, 0.12));
  color: var(--color-accent);
  flex: 0 0 auto;
}

.mkt-version-date {
  font-size: 12px;
  color: var(--color-muted);
  margin-left: auto;
  flex: 0 0 auto;
}

.mkt-version-title {
  margin: 0 0 4px;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.mkt-version-diff {
  margin: 12px 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface);
  min-width: 0;
}

.mkt-version-diff-head {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.mkt-version-diff ul {
  margin: 0;
  padding-left: 18px;
}

.mkt-version-diff li {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mkt-version-diff-current {
  font-size: 13px;
  color: var(--color-muted);
}

/* Phase 21.5f: author pricing (販売設定) inside the 自分の知識 card. */
.mkt-pricing-mine {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  min-width: 0;
}

.mkt-pricing-current {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.mkt-pricing-current strong {
  color: var(--color-text, inherit);
}

.mkt-pricing-editor {
  margin-top: 4px;
}

.mkt-price-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.mkt-price-input-yen {
  font-size: 16px;
  color: var(--color-muted);
  flex: 0 0 auto;
}

.mkt-price-input {
  flex: 1 1 auto;
  min-width: 0;
}

.mkt-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.mkt-editor-heading {
  margin: 8px 0 0;
  font-size: 15px;
}

.mkt-editor-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.mkt-editor-input,
.mkt-editor-textarea,
.mkt-editor-select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.mkt-editor-textarea {
  resize: vertical;
  line-height: 1.5;
}

.mkt-editor-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.mkt-editor-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  min-width: 0;
}

.mkt-editor-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.mkt-editor-section-head .mkt-editor-select {
  flex: 1 1 120px;
  min-width: 0;
}

.mkt-editor-move {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  cursor: pointer;
}

.mkt-editor-move[disabled] {
  opacity: 0.5;
  cursor: default;
}

.mkt-editor-add,
.mkt-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}

.mkt-editor-add button,
.mkt-editor-actions button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-editor-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.mkt-editor-blockers {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  font-size: 13px;
  color: var(--color-muted);
}

.mkt-editor-blockers p {
  margin: 0 0 6px;
}

.mkt-editor-blockers ul,
.mkt-not-published ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-wrap: anywhere;
}

.mkt-preview-title {
  margin: 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.mkt-not-published {
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 12px);
  font-size: 13px;
  color: var(--color-muted);
  min-width: 0;
}

.mkt-not-published h2 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--color-text);
}

.mkt-attest {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  min-width: 0;
}

.mkt-attest legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.mkt-attest-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 44px;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.mkt-attest-item input {
  width: 22px;
  height: 22px;
  margin-top: 10px;
  flex: none;
}

.mkt-publish:focus-visible,
.mkt-editor-input:focus-visible,
.mkt-editor-textarea:focus-visible,
.mkt-editor-select:focus-visible,
.mkt-editor-move:focus-visible,
.mkt-attest-item input:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.mkt-publish:active {
  transform: scale(var(--motion-press-scale));
}

@media (prefers-reduced-motion: reduce) {
  .mkt-publish:active {
    transform: none;
  }
}

/* Phase 21.3g: Record -> Knowledge. A quiet secondary action on the Record Detail, and the
   owner-only source panel inside the Authoring editor. The Record stays the star of its screen. */
.record-knowledge-section button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.record-knowledge-note {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* Phase 21.3h: the quiet suggestion line and the small state badge on a Record card. */
.record-knowledge-suggest {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.record-knowledge-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.record-knowledge-badge:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.mkt-source-record {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 12px);
  min-width: 0;
}

.mkt-source-record h2 {
  margin: 0;
  font-size: 14px;
}

.mkt-source-record-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Phase 21.5d: paid pricing / purchase on the Knowledge detail. No card form ever lives here. */
.mkt-purchase {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  min-width: 0;
}

.mkt-price-row,
.mkt-price-owned {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  min-width: 0;
}

.mkt-price {
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mkt-price-note {
  font-size: 12px;
  color: var(--color-muted);
}

.mkt-buy {
  align-self: flex-start;
}

.mkt-order-status,
.mkt-purchase-notice,
.mkt-preview-more {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.mkt-preview-more {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
}

.mkt-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.45);
}

.mkt-dialog {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  border-radius: var(--radius-lg, 16px);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.mkt-dialog-title {
  margin: 0;
  font-size: 17px;
}

.mkt-dialog-item {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mkt-dialog-notes {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 13px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.mkt-buy:focus-visible,
.mkt-dialog :focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.mkt-buy:active {
  transform: scale(var(--motion-press-scale));
}

@media (prefers-reduced-motion: reduce) {
  .mkt-buy:active {
    transform: none;
  }
}

/* Phase 21.4c: the Review section on the Knowledge detail. It sits below the body; the
   Knowledge stays the star. No star rating, no average, no ranking -- just words. */
.mkt-reviews {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  min-width: 0;
}

.mkt-reviews-heading {
  margin: 0;
  font-size: 16px;
}

.mkt-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.mkt-review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  min-width: 0;
}

.mkt-review-mine {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
}

.mkt-review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
  min-width: 0;
}

.mkt-review-author {
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.mkt-review-you {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-weight: 600;
}

.mkt-review-edited {
  font-style: italic;
}

.mkt-review-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mkt-review-helpful {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-muted);
}

.mkt-review-actions,
.mkt-review-compose {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}

.mkt-review-actions button,
.mkt-review-report {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-review-hint {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.mkt-review-form,
.mkt-review-report-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  min-width: 0;
}

.mkt-review-report-form :focus-visible,
.mkt-review-report:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Phase 21.3f: 「自分の知識」 inside the Search screen. It sits BELOW the Record results as a
   separate section -- never merged into the Record ranking. */
.mkt-search-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.mkt-search-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  font-size: 15px;
  min-width: 0;
}

.mkt-search-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
}

/* Phase 19: Shared Timeline. Reuses the existing card/pill/field tokens so the
   Timeline screens sit visually with the rest of the app. */
.timeline-screen,
.timeline-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-8);
}

.timeline-header h1,
.timeline-detail-header h1 {
  margin: 0;
  font-size: 1.35rem;
}

.timeline-lead,
.timeline-detail-desc,
.timeline-card-desc,
.timeline-detail-meta,
.timeline-card-meta {
  color: var(--color-muted);
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
}

.timeline-create-button {
  align-self: flex-start;
}

.timeline-list,
.timeline-events,
.timeline-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.timeline-card,
.timeline-pick {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  text-align: left;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
}

.timeline-card-title,
.timeline-pick-title {
  font-weight: 600;
  color: var(--color-text);
}

.timeline-pick {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.timeline-pick.is-done {
  opacity: 0.6;
  cursor: default;
}

.timeline-empty,
.timeline-events-empty,
.timeline-add-empty {
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-8);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.timeline-empty-title {
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.timeline-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.timeline-composer-actions,
.timeline-delete-actions {
  display: flex;
  gap: var(--space-4);
}

.timeline-event {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.timeline-event-icon {
  font-size: 1.2rem;
  line-height: 1.6;
}

.timeline-event-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.timeline-event-when {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.timeline-event-title {
  font-weight: 600;
  color: var(--color-text);
}

.timeline-event-sub {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.timeline-event-remove {
  flex: 0 0 auto;
}

.timeline-delete-confirm {
  padding: var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
}

.timeline-add-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 10, 25, 0.44);
}

.timeline-add-sheet {
  position: fixed;
  z-index: 201;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-8) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: var(--color-surface);
  box-shadow: 0 -24px 48px rgba(30, 23, 48, 0.16);
}

.timeline-add-create {
  display: flex;
  gap: var(--space-4);
}

.timeline-add-create input {
  flex: 1;
}

/* Phase 19.4: Timeline promoted to a core screen + redesigned list/detail. */
.settings-access {
  position: fixed;
  top: calc(var(--space-5) + env(safe-area-inset-top, 0px));
  right: var(--space-6);
  z-index: 60;
  /* An icon-only control has no text to aim at, so it carries the full 44px touch floor. It was
     40px, which is a real miss on a phone -- and this is the only way into Settings. */
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted-strong);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(30, 23, 48, 0.08);
  cursor: pointer;
}

.settings-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.timeline-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

.timeline-top-heading h1 {
  margin: 0;
  font-size: 1.4rem;
}

.timeline-new-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.timeline-sort {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.timeline-sort-option {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-size: 0.85rem;
  cursor: pointer;
}

.timeline-sort-option.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
}

.timeline-card-item {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}

.timeline-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
  text-align: left;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
}

.timeline-card-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-tint);
  color: var(--color-muted);
  position: relative;
}

.timeline-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-card-thumb.has-image .timeline-card-thumb-fallback {
  display: none;
}

.timeline-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.timeline-card-title {
  font-weight: 600;
  color: var(--color-text);
}

.timeline-pin {
  flex: 0 0 auto;
  align-self: center;
  width: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.timeline-pin.is-pinned {
  color: var(--color-pin);
  border-color: var(--color-pin-border);
  background: var(--color-pin-soft);
}

.timeline-composer input[name="title"] {
  width: 100%;
}

.timeline-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.timeline-group-label {
  margin: var(--space-4) 0 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.timeline-event-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-tint);
  position: relative;
}

.timeline-event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-event-thumb.has-image .timeline-event-thumb-fallback {
  display: none;
}

.timeline-event-icon-audio {
  color: var(--color-primary-strong);
}

.timeline-fab {
  position: fixed;
  right: var(--space-6);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(76, 91, 212, 0.35);
  cursor: pointer;
}

.add-record-modal {
  position: fixed;
  z-index: 201;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-7) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: var(--color-surface);
  box-shadow: 0 -24px 48px rgba(30, 23, 48, 0.16);
}

.add-record-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.add-record-check {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.add-record-check.is-done {
  opacity: 0.6;
  cursor: default;
}

.add-record-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-record-done {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.add-record-actions {
  display: flex;
  gap: var(--space-4);
}

/* Phase 19.6: Sharing UI (gated). Reuses the timeline modal scrim + tokens. */
.timeline-share-message {
  color: var(--color-primary-strong);
  font-size: 0.9rem;
  margin: 0;
}

.timeline-event-share {
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.75rem;
  padding: 2px var(--space-4);
  cursor: pointer;
}

.timeline-event-share.is-shared {
  color: var(--color-primary-strong);
  border-color: var(--color-border-strong);
  background: var(--color-primary-soft);
}

.share-panel {
  position: fixed;
  z-index: 202;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-7) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: var(--color-surface);
  box-shadow: 0 -24px 48px rgba(30, 23, 48, 0.16);
}

.share-panel h3 {
  margin: 0;
}

.share-panel-note {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0;
}

.share-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.share-panel-back {
  align-self: flex-start;
}

.share-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.share-member {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.share-member-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.share-member-role {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.share-invite-url {
  word-break: break-all;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-size: 0.85rem;
}

.share-fixed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.share-fixed-item {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: 0.8rem;
  padding: 2px var(--space-4);
}

.share-fixed-note {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.share-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.share-field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Phase 20.2: Record Audience (公開範囲) control + bottom sheet. */
.record-audience-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.85rem;
}
.record-audience-caption {
  color: var(--color-muted);
}
.record-audience-value {
  font-weight: 600;
}
.record-audience-message {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-danger);
}
.audience-sheet .audience-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.audience-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 1rem;
  text-align: left;
}
.audience-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-surface-raised, var(--color-surface));
}
.audience-radio {
  font-size: 1.1rem;
}
.audience-sheet-note {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Phase 20.3: Home 自分/友達 tabs + Friends Feed. */
.home-tabs {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}
.home-tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-muted);
}
.home-tab.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.friends-feed {
  padding: 0 var(--space-4) var(--space-6);
}
.friends-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.friends-feed-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface);
}
.friends-feed-owner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.friends-feed-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.friends-feed-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-raised, var(--color-border));
  color: var(--color-muted);
  font-weight: 700;
}
.friends-feed-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.friends-feed-title {
  margin: 0;
  font-size: 1.05rem;
}
.friends-feed-date {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}
.friends-feed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.friends-feed-tags span {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised, var(--color-border));
  font-size: 0.75rem;
}
.friends-feed-empty,
.friends-feed-error {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.friends-feed-empty-title {
  font-weight: 600;
}
.friends-feed-empty-note,
.friends-feed-status {
  color: var(--color-muted);
}
.friends-feed-more {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
}

/* Phase 20.4: Likes & Comments. */
.friends-feed-reactions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.feed-reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 8px 14px;
  min-height: var(--button-min-height); /* 44px tap target (a11y) */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform var(--motion-duration-fast) var(--motion-ease-decelerate),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.feed-reaction:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.feed-reaction:active {
  transform: scale(var(--motion-press-scale)); /* press feedback */
}
.feed-reaction.is-liked {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.feed-reaction-count {
  font-variant-numeric: tabular-nums;
}
.comment-sheet {
  max-height: 80vh;
  overflow-y: auto;
}
.comment-list {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.comment-row {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}
.comment-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-raised, var(--color-border));
  color: var(--color-muted);
  font-weight: 700;
  font-size: 0.75rem;
}
.comment-author {
  font-weight: 600;
  font-size: 0.85rem;
}
.comment-date {
  color: var(--color-muted);
  font-size: 0.75rem;
}
.comment-delete {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.8rem;
  min-height: var(--button-min-height); /* 44px tap target (a11y) */
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
}
.comment-delete:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 1px;
}
.comment-text {
  margin: var(--space-1) 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.comment-empty,
.comment-sheet-status {
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-4) 0;
}
.comment-sheet-message {
  color: var(--color-danger);
  font-size: 0.8rem;
}
.comment-compose {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  margin-top: var(--space-3);
}
.comment-input {
  flex: 1;
  resize: vertical;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
}
.comment-sheet-close {
  width: 100%;
  margin-top: var(--space-3);
}

/* Phase 20.7/20.8: the poster's own "友達からの反応" section on Record Detail. */
.record-reaction-counts {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-3);
}
.record-reaction-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.record-reaction-open {
  min-height: var(--button-min-height); /* 44px tap target */
}

/* Phase 20.5: Friend management screen. */
.friends-feed-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 var(--space-2);
}
.friend-manage {
  padding: var(--space-3) var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.friend-manage-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.friend-manage-head h1 {
  margin: 0;
  font-size: 1.4rem;
}
.friend-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface);
}
.friend-card h2 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}
.friend-profile-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.friend-avatar-lg {
  width: 56px;
  height: 56px;
}
.friend-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-raised, var(--color-border));
  color: var(--color-muted);
  font-weight: 700;
}
.friend-profile-name {
  margin: 0;
  font-weight: 600;
}
.friend-profile-stats {
  margin: 2px 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}
.friend-code-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.friend-code {
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  background: var(--color-surface-raised, var(--color-border));
  padding: 2px 8px;
  border-radius: var(--radius-md);
}
.friend-code-label {
  color: var(--color-muted);
  font-size: 0.8rem;
}
.friend-code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.friend-add-form {
  display: flex;
  gap: var(--space-2);
}
.friend-add-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  text-transform: uppercase;
}
.friend-add-message {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.friend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.friend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.friend-row-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.friend-row-state {
  color: var(--color-muted);
  font-size: 0.8rem;
}
.friend-empty {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: var(--space-2) 0 0;
}
.friend-invite-url {
  word-break: break-all;
  background: var(--color-surface-raised, var(--color-border));
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
}
.friend-invite-note {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin: var(--space-2) 0 0;
}
.friend-error,
.friend-status {
  color: var(--color-muted);
}
.link-button {
  border: none;
  background: none;
  color: var(--color-accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.friend-confirm-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.report-categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.report-details {
  width: 100%;
  resize: vertical;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
}
.friend-qr-holder {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
  background: #fff;
  border-radius: var(--radius-md);
}
.qr-svg {
  max-width: 100%;
  height: auto;
}
.invite-accept-inviter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

/* ==========================================================================
   AI Workspace (Phase 25.7) — mobile-first.
   The Workspace shipped its markup across 25.2–25.6 with no styles of its own; this is that stylesheet.
   Phone is the primary target (iPhone Safari / Android Chrome / installed PWA): a single column, tap
   targets that clear 44px, text that wraps instead of overflowing, and safe-area padding so the actions
   never sit under the home indicator. Wider screens only get a comfortable max width. All colour comes
   from the shared tokens -- @me has one theme, and the Workspace follows it rather than inventing its own.
   ========================================================================== */

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

.workspace-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-5) calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.workspace-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.workspace-title {
  font-size: var(--font-size-xl);
  margin: 0;
}

/* The header actions wrap on a narrow phone rather than squeezing into unreachable targets. */
.workspace-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.workspace-header-actions button {
  min-height: 44px;
}

.workspace-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.workspace-step-lead {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.workspace-note {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.6;
}

.workspace-status {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text);
}

/* Actions stack full-width on a phone, so the primary action is always thumb-reachable. */
.workspace-step-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.workspace-step-actions button {
  min-height: 44px;
  width: 100%;
}

@media (min-width: 600px) {
  .workspace-step-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .workspace-step-actions button {
    width: auto;
    min-width: 140px;
  }
}

/* ---- Progress (Phase 25.7): where this run actually is --------------------------------------- */

.workspace-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  list-style: none;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.workspace-progress-step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.workspace-progress-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.workspace-progress-step.is-done .workspace-progress-dot {
  background: var(--color-success);
}

.workspace-progress-step.is-current {
  color: var(--color-text);
  font-weight: 600;
}

/* The current stage is marked with colour + weight + a ring, deliberately WITHOUT animation: every
   other animation in @me is a one-shot transition, and a perpetual pulse would run for the whole
   request on the phone this is built for. The live region already announces the stage. */
.workspace-progress-step.is-current .workspace-progress-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.workspace-running .workspace-status {
  font-weight: 600;
}

/* ---- Cancelled / error / blocked ------------------------------------------------------------- */

.workspace-cancelled,
.workspace-error,
.workspace-entitlement-blocked {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.workspace-error {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.workspace-error p,
.workspace-cancelled p,
.workspace-entitlement-blocked p {
  margin: 0;
}

/* ---- Usage / plan line (25.6) ---------------------------------------------------------------- */

.workspace-usage-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--font-size-sm);
}

.workspace-plan-name {
  font-weight: 600;
  padding: 2px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.workspace-usage-remaining {
  color: var(--color-muted);
}

/* ---- What gets sent (25.4) ------------------------------------------------------------------- */

.workspace-send-summary {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.workspace-send-title {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  font-size: var(--font-size-md);
}

.workspace-send-list {
  margin: 0;
  padding-left: var(--space-8);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.7;
}

.workspace-context-list,
.workspace-candidate-list,
.workspace-related-list,
.workspace-cite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.workspace-context-item {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.workspace-context-item.is-blocked {
  background: var(--color-surface-subtle);
  border-style: dashed;
}

.workspace-context-title {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.workspace-context-blocked,
.workspace-context-excluded {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Each checkbox row is its own 44px tap target: a mis-tap must never change what is sent. */
.workspace-context-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.workspace-context-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.workspace-question-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* 16px keeps iOS Safari from zooming the whole page when the field takes focus. */
.workspace-question-input {
  width: 100%;
  min-height: 72px;
  padding: var(--space-4);
  font-family: inherit;
  font-size: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
}

/* ---- Result + citations (25.5 / 25.7) -------------------------------------------------------- */

.workspace-skill-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
}

.workspace-skill-summary p {
  margin: 0;
}

.workspace-skill-name {
  font-weight: 700;
}

.workspace-skill-purpose,
.workspace-skill-count,
.workspace-skill-draft {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.workspace-result-title {
  margin: 0;
  font-size: var(--font-size-xl);
  overflow-wrap: anywhere;
}

.workspace-result-summary {
  margin: 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.workspace-result-note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: 1.6;
}

.workspace-result-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.workspace-result-heading {
  margin: 0;
  font-size: var(--font-size-lg);
}

.workspace-result-body {
  margin: 0;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* The citation block stays quiet next to the body text but is never hidden: it is how the user
   checks a draft against their own record. */
.workspace-result-refs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-left: 3px solid var(--color-primary-soft);
  background: var(--color-surface-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.workspace-cite-label {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.workspace-cite-item.is-missing {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  padding: var(--space-3) 0;
}

/* Each citation is a full-width row: easy to hit with a thumb, and obviously something that opens. */
.workspace-ref-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.workspace-ref-open:hover {
  border-color: var(--color-primary);
}

.workspace-ref-title,
.workspace-related-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.workspace-ref-open-hint,
.workspace-related-date {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

.workspace-ref-missing {
  color: var(--color-muted);
}

/* A warning is never buried: it sits with the result it belongs to. */
.workspace-warning-box {
  padding: var(--space-5);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--color-warning-soft);
}

.workspace-result-warnings {
  margin: 0;
  padding-left: var(--space-8);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

/* ---- Read-only source view ------------------------------------------------------------------- */

.workspace-source-view {
  gap: var(--space-4);
}

.workspace-source-title {
  margin: 0;
  font-size: var(--font-size-lg);
  overflow-wrap: anywhere;
}

.workspace-source-date {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.workspace-source-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.workspace-source-tag {
  font-size: var(--font-size-xs);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-muted);
}

.workspace-source-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workspace-source-block h3 {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.workspace-source-block p {
  margin: 0;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* Keyboard focus stays obvious on every Workspace control. */
.workspace-ref-open:focus-visible,
.workspace-context-field:focus-within,
.workspace-question-input:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Record location chooser (Phase 26a) — mobile-first.
   The place is a quiet helper under the Record's own content, never the subject of the screen.
   Colour comes only from the shared tokens, so it sits with the rest of the composer.
   ========================================================================== */

.location-chosen,
.location-candidate {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

/* A place being OFFERED is visually distinct from one already chosen, so "not yet added" is
   never mistaken for "added" -- and not by colour alone: the wording says so too. */
.location-candidate {
  border-style: dashed;
  border-color: var(--color-primary);
}

.location-chosen p,
.location-candidate p {
  margin: 0;
}

/* 「追加済み」であることを、場所の名前より先に伝える一行。名前が取れなかった現在地でも、
   位置情報が記録に付いたことが分かるようにするため。 */
.location-chosen-state {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent, var(--color-text));
}

.location-chosen-label,
.location-candidate-label {
  font-weight: 600;
  overflow-wrap: anywhere; /* a long place name wraps instead of overflowing */
}

.location-chosen-note,
.location-candidate-note,
.location-candidate-hint,
.location-privacy-note {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.6;
}

.location-status {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* Actions stack full-width on a phone so the primary one is always thumb-reachable. */
.location-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.location-actions button,
.location-request {
  min-height: 44px;
  width: 100%;
}

@media (min-width: 600px) {
  .location-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .location-actions button,
  .location-request {
    width: auto;
    min-width: 132px;
  }
}

.location-request:focus-visible,
.location-actions button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Life Map screen (Phase 26b) — mobile-first.
   Filters, the summary line, the selected-pin preview and the accessible pin list. The map is
   never the only way to a Record, so the list below it is a first-class path, not a leftover.
   ========================================================================== */

.life-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.life-map-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.life-map-filter {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

/* Selected is marked by weight + fill + aria-pressed, never by colour alone. */
.life-map-filter.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  font-weight: 700;
}

.life-map-filter:focus-visible,
.life-map-pin-row:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.life-map-filter-clear {
  min-height: 44px;
}

.life-map-summary {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.6;
}

.life-map-pin-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.life-map-pin-preview p {
  margin: 0;
}

.life-map-preview-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.life-map-preview-place,
.life-map-preview-date {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.life-map-preview-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.life-map-preview-actions button {
  min-height: 44px;
  width: 100%;
}

@media (min-width: 600px) {
  .life-map-preview-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .life-map-preview-actions button {
    width: auto;
    min-width: 132px;
  }
}

/* The accessible list: every place-bearing Record, reachable without the map canvas. */
.life-map-pin-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.life-map-pin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.life-map-pin-row:hover {
  border-color: var(--color-primary);
}

.life-map-pin-row-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.life-map-pin-row-place,
.life-map-pin-row-date {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* ============================================================================================
   Phase 32 — 画面共通のデザインシステム。
   5画面（Home / Search / Life Map / Timeline / Profile）は「別画面」に見えてよいが、
   呼吸・余白・タイポ・モーションは同じでなければならない。Homeだけ新しい、を防ぐための土台。
   ここに無いものを各画面が勝手に決めない。
   ============================================================================================ */

/* 画面の器。横幅は大胆に、しかし読み幅は保つ。 */
.screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-7) 0;
}

/* 画面の名乗り。箱を置かない -- タイポと余白だけ。Hero と同じ思想。 */
.screen-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) 0 var(--space-4);
}
.screen-hero-title {
  margin: 0;
  font-size: clamp(30px, 8vw, 40px);
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--color-text);
}
.screen-hero-lead {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-muted);
}

/* 節。見出しは小さく、内容が主役。 */
.screen-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.screen-section-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.screen-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.screen-section-link {
  border: 0;
  background: none;
  padding: 0;
  min-height: 44px;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  cursor: pointer;
}

/* 何も無い日は、代替イラストではなく余白とタイポで成立させる。 */
.screen-blank {
  margin: 0;
  padding: var(--space-9) 0;
  font-size: var(--font-size-lg);
  line-height: 2;
  color: var(--color-muted);
}

/* 横スクロールの帯。swipeNavigation が横スクロール可能な祖先を自動で避けるので
   data-no-swipe は不要（タブ移動と競合しない）。 */
.screen-strip {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--space-7));
  padding: var(--space-2) var(--space-7) var(--space-3);
}
.screen-strip::-webkit-scrollbar {
  display: none;
}
.screen-strip > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* 写真の器。写真は常に主役なので、器は黙っている。 */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像表示: スケール + フェード 180-280ms（モックのモーションガイド） */
  animation: photo-in var(--motion-duration-image) var(--motion-ease-decelerate) both;
}
.photo-blank {
  position: absolute;
  inset: 0;
  background: var(--color-surface);
}
@keyframes photo-in {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

/* 写真の上に載る文字は、色ではなく黒のグラデで沈める。装飾しない。 */
.photo-caption {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-7) var(--space-5) var(--space-5);
  background: linear-gradient(180deg, rgba(13, 17, 23, 0), rgba(13, 17, 23, 0.66));
  color: #ffffff;
}
.photo-caption-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}
.photo-caption-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 押せる面。全画面で同じ手触り。 */
.tappable {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: transform var(--motion-duration-press) var(--motion-ease-spring);
}
.tappable:active {
  transform: scale(var(--motion-press-scale));
}
.tappable-large:active {
  transform: scale(var(--motion-press-scale-large));
}
.tappable:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

/* 画面遷移とカード表示: 速いが静か。フェード + わずかに浮く。 */
.screen {
  animation: screen-in var(--motion-duration-screen) var(--motion-ease-decelerate) both;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.card-in {
  animation: card-in var(--motion-duration-card) var(--motion-ease-decelerate) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Hero は画面の一拍あと。タイトルが先に立ち、中身が続く -- 全部同時に現れると「表示」に見える。
   5画面それぞれの名乗り（Life Map/Timeline の .screen-hero、Search の巨大検索、Profile の
   アバター＋名前）は形が違ってよいが、立ち上がり方は同じでなければならない。 */
.screen-hero,
.search-hero,
.profile-identity {
  animation: card-in var(--motion-duration-card) var(--motion-ease-decelerate) both;
  animation-delay: var(--motion-stagger);
}

/* 一枚ずつ起き上がる。5枚で止める -- それ以上は「待ち」になるし、下は画面の外にいる。 */
.card-in:nth-child(2) { animation-delay: var(--motion-stagger); }
.card-in:nth-child(3) { animation-delay: calc(var(--motion-stagger) * 2); }
.card-in:nth-child(4) { animation-delay: calc(var(--motion-stagger) * 3); }
.card-in:nth-child(n + 5) { animation-delay: calc(var(--motion-stagger) * 4); }
/* 横スクロールの帯は listitem 越しなので、親の側で刻む。 */
.screen-strip > *:nth-child(2) .card-in { animation-delay: var(--motion-stagger); }
.screen-strip > *:nth-child(3) .card-in { animation-delay: calc(var(--motion-stagger) * 2); }
.screen-strip > *:nth-child(4) .card-in { animation-delay: calc(var(--motion-stagger) * 3); }
.screen-strip > *:nth-child(n + 5) .card-in { animation-delay: calc(var(--motion-stagger) * 4); }

@media (prefers-reduced-motion: reduce) {
  .screen,
  .screen-hero,
  .search-hero,
  .profile-identity,
  .card-in,
  .photo img {
    animation: none;
  }
  /* 遅延だけ残ると「何も起きないのに遅い」になる。 */
  .card-in,
  .screen-hero,
  .search-hero,
  .profile-identity,
  .screen-strip > * .card-in {
    animation-delay: 0s;
  }
  .tappable:active,
  .tappable-large:active {
    transform: none;
  }
}

/* Phase 32 — Timeline のアルバム面。**必ず .photo より後**に置くこと:
   .photo { position: relative } と .album-hero-photo { position: absolute } は詳細度が同じなので、
   先に書くと .photo が勝ち、写真の器が高さ0に潰れて「大きな写真」が消える（実際に一度消した）。 */
/* その日の大きな写真。飛び込んでくる大きさ -- ここが「めくる」の手応え。 */
.album-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.album-hero-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
/* 写真が背景なので、器の側が高さを持つ。 */
.album-hero {
  aspect-ratio: 4 / 3;
}
.album-hero-caption {
  position: relative;
}

/* 思い出。その日の残りの写真。均等格子だが「一覧」ではない -- 文字が無く、写真だけ。 */
.album-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.album-tile {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface-subtle);
}
.album-tile-photo {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* その日の出来事。カードの一覧ではなく、写真の下に続く静かな行。 */
.album-events {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.album-events-label {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
/* 写真の下では、Record カードの箱を降ろす -- 主役は上の写真。 */
.album-events .page-record {
  border-color: transparent;
  background: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.life-page-empty {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-md);
}

.life-page-add {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 13px;
  background: transparent;
  color: var(--color-primary-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.life-page-add:hover,
.life-page-add:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: 3px solid var(--color-focus-ring);
}

/* Phase 32 — Search（人生探索画面）。共通システムの上に立つ。
   検索欄の下は空白ではなく、自分の人生で埋まっている。写真が主役。 */
.search-explore {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}
.search-section {
  gap: var(--space-4);
}

/* chip 群（最近検索 / タグ）。面ではなく輪郭で -- アクセントの面積を増やさない。 */
.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.search-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 指の下限。chip は小さく見せたいが、押せない大きさにはしない。 */
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: transform var(--motion-duration-press) var(--motion-ease-spring);
}
.search-chip:active {
  transform: scale(var(--motion-press-scale));
}
.search-chip-icon {
  display: inline-grid;
  place-items: center;
  color: var(--color-muted);
}
/* 数字は重みであって主役ではない。 */
.search-chip-count {
  font-size: 11px;
  color: var(--color-muted);
}

/* おすすめの思い出。Search で一番大きい写真 -- ここが「眺めたくなる」を担う。 */
.search-memory {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 200px;
  height: 260px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.search-memory-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
/* 写真の無い思い出（お気に入りのメモなど）は、代替イラストではなく余白とタイポで立つ。 */
.search-memory-plain {
  border: 1px solid var(--color-border);
  box-shadow: none;
  justify-content: flex-start;
}
.search-memory-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}
.search-memory-when {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.search-memory-title {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 17px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--color-text);
}

/* 音声から探す。音には見た目が無いので、行にする -- 波形の絵を敷き詰めない。 */
.search-audio {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.search-audio-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-3) 0;
}
.search-audio-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted-strong);
}
.search-audio-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.search-audio-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-audio-when {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* 場所。丸い写真が場所の顔。 */
.search-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 92px;
}
.search-place-photo {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
}
.search-place-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-place-count {
  font-size: 11px;
  color: var(--color-muted);
}

/* 写真。均等格子ではなく、先頭が大きいモザイク。 */
.search-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.search-photo {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface-subtle);
}
.search-photo-hero {
  grid-column: span 2;
  grid-row: span 2;
  border-radius: var(--radius-lg);
}
.search-photo-media {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Phase 32 — Life Map（人生の場所）。共通システムの上に立つ。
   地図が無いことを感じさせない: 写真が場所の顔になり、余白が距離になる。
   均等な格子・表・ダッシュボードは置かない。 */

/* 公開境界の入口。gate が開いた時だけ現れるので、閉じている間はこの CSS も使われない。 */
.geo-map-entry {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  min-height: 44px;
}
.geo-map-entry-icon {
  display: inline-grid;
  place-items: center;
  color: var(--color-primary);
}
.geo-map-entry-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.geo-map-entry-label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
}
.geo-map-entry-note {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* 場所カード。先頭だけ大きい -- 均等に並べない。 */
.geo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 168px;
  height: 224px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.geo-card-lead {
  width: 232px;
  height: 264px;
}
.geo-card-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.geo-card-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
}
/* 写真の無い場所は、名前と余白だけで立つ。イラストで埋めない。 */
.geo-card-plain {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}
.geo-card-plain-name {
  font-size: 21px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-text);
}
.geo-card-plain-meta {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* 今月よく行った場所。丸い写真で「顔」として並ぶ -- 数字の表ではない。 */
.geo-month-row {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.geo-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 84px;
  min-height: 44px;
}
.geo-month-photo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
}
.geo-month-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.geo-month-count {
  font-size: 11px;
  color: var(--color-muted);
}

/* 最近訪れた場所。行だが、表ではない -- 罫線を引かず、余白で分ける。 */
.geo-recent {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.geo-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 44px;
}
.geo-recent-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.geo-recent-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.geo-recent-when {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}
.geo-recent-photos {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.geo-recent-photo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-surface-subtle);
}

/* 場所別アルバム。先頭が大きく、残りが寄り添うモザイク（均等格子の禁止）。 */
.geo-albums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.geo-album {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 148px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
}
.geo-album-hero {
  grid-column: 1 / -1;
  height: 260px;
}
.geo-album-photo {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

/* 月ごとの軌跡。表ではなく、歩いた跡。線が月をつなぐ。 */
.geo-trail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.geo-trail-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding-left: var(--space-2);
}
.geo-trail-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  opacity: 0.4;
}
/* 点と点をつなぐ線。最後の月からは伸ばさない。 */
.geo-trail-item:not(:last-child) .geo-trail-dot::after {
  content: "";
  position: absolute;
  left: calc(var(--space-2) + 3px);
  top: 14px;
  bottom: calc(-1 * var(--space-6));
  width: 1px;
  background: var(--color-border);
}
.geo-trail-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.geo-trail-month {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
}
.geo-trail-places {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

@media (min-width: 720px) {
  .geo-albums {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .geo-album-hero {
    grid-column: span 2;
  }
}

/* Phase 32 — Home。Apple Photos の空気を目指す。
   Hero（大胆な余白とタイポ）→ 思い出カード → 写真主役の Record カード。
   色は 95% White / 5% Accent: アクセントは「今」を指す一点にだけ使い、面は白のまま。
   未来感は色ではなく Motion で出す。 */
.home-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding: var(--space-4) var(--space-7) 0;
  /* 横幅を大胆に。管理画面のように中央へ詰めない -- 画面が広ければ呼吸させる。 */
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
}
.home-brand {
  font-size: 20px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.home-avatar {
  display: inline-grid;
  place-items: center;
  /* 指の下限。見た目は小さな丸のままでいいが、当たり判定は 44px を切らない。 */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted-strong);
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--motion-duration-press) var(--motion-ease-spring);
}
.home-avatar:active {
  transform: scale(var(--motion-press-scale));
}

/* Hero -- ここだけで「このアプリ好き」と思わせる。情報を足さず、余白と大きさで語る。 */
.home-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-9) 0 var(--space-7);
  min-height: 190px;
  justify-content: center;
}
.home-hero-title {
  margin: 0;
  font-size: clamp(38px, 11vw, 60px);
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--color-text);
}
.home-hero-line {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-muted);
}
/* ブランドは小さく、しかし必ずここに在る。 */
.home-hero-brand {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  opacity: 0.75;
}

/* 思い出カード。数字ではなく写真と言葉。data-no-swipe は不要 --
   swipeNavigation が横スクロール可能な祖先を自動で避ける。 */
.home-memories {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--space-7));
  padding: var(--space-2) var(--space-7) var(--space-3);
}
.home-memories::-webkit-scrollbar {
  display: none;
}
.home-memory-cell {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.home-memory {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 148px;
  height: 196px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-surface-subtle);
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
  transition: transform var(--motion-duration-press) var(--motion-ease-spring);
}
.home-memory:active {
  transform: scale(var(--motion-press-scale));
}
.home-memory:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.home-memory-media {
  position: absolute;
  inset: 0;
  margin: 0;
  background: var(--color-surface-subtle);
}
.home-memory-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真の無い思い出は、静かな面のまま。色で飾らない。 */
.home-memory-media-plain {
  background: linear-gradient(180deg, var(--color-surface-subtle), var(--color-surface-tint));
}
.home-memory-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-6) var(--space-5) var(--space-5);
  /* 写真の上でも必ず読める。色ではなく黒のグラデで沈める。 */
  background: linear-gradient(180deg, rgba(12, 14, 20, 0), rgba(12, 14, 20, 0.62));
}
.home-memory-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}
.home-memory-caption {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 写真が無いカードは白面に黒文字へ戻す（白いグラデの上の白文字は読めない）。 */
.home-memory:has(.home-memory-media-plain) .home-memory-body {
  background: none;
}
.home-memory:has(.home-memory-media-plain) .home-memory-label {
  color: var(--color-muted);
}
.home-memory:has(.home-memory-media-plain) .home-memory-caption {
  color: var(--color-text);
}

.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.home-section-title {
  margin: 0;
  font-size: 22px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.home-section-link {
  border: 0;
  background: none;
  padding: 0;
  min-height: 44px;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  cursor: pointer;
}
.home-recent {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.home-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Record カード -- 写真 → タイトル → 本文 → タグ。写真が主役。 */
.home-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
  transition: transform var(--motion-duration-press) var(--motion-ease-spring);
}
.home-card:active {
  transform: scale(var(--motion-press-scale-large));
}
.home-card:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
/* 思い出が飛び込んでくる大きさ。 */
.home-card-media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-subtle);
  overflow: hidden;
}
.home-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-card-media-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-muted);
}
.home-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
}
.home-card-title {
  font-size: 19px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--color-text);
}
/* 本文は2行まで -- カードは読ませる場所ではなく、思い出させる場所。 */
.home-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-muted);
}
.home-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.home-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
/* タグは面ではなく輪郭で。アクセントの面積を増やさない（95% White）。 */
.home-card-chip {
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-muted-strong);
  font-size: 11px;
}
/* 時刻は補助情報。主役から降ろす。 */
.home-card-time {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  opacity: 0.8;
}
/* 写真の無い記録は、静かな縦書きカードのまま。 */
.home-card-note .home-card-body,
.home-card-audio .home-card-body {
  padding: var(--space-8) var(--space-7);
}

@media (min-width: 720px) {
  .home-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

/* Phase 32 — Timeline は「人生のアルバム」。器は .screen が持つので、ここは中身の呼吸だけ。 */
.timeline-album {
  gap: var(--space-5);
}

/* Phase 31 — Home「あなたへの提案」. Quiet cards that offer, never shout. Nothing here reads as a
   feature or a robot: no badge, no sparkle, no "AI" -- just a title and the thing itself. */
.home-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-5) 0;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.home-suggestions-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
}
.home-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.suggestion-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 64px;
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-decelerate),
    transform var(--motion-duration-press) var(--motion-ease-spring);
}
.suggestion-card:active {
  transform: scale(var(--motion-press-scale));
}
.suggestion-card:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.suggestion-card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  color: var(--color-primary-strong);
}
.suggestion-card-body {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  line-height: 1.4;
}

/* Phase 32 — Profile は「自分の人生を見せる画面」。統計画面でも管理画面でもない。
   アバター → 名前 → 人生サマリー → 最近のテーマ → 好きな場所 → 活動 → 統計。
   数字は最後に、小さく。器は .screen が持つ。 */
.profile-screen {
  gap: var(--space-8);
  padding-bottom: 120px;
}

/* アバター → 名前 → 人生サマリー。箱を置かない -- 中央に、静かに。 */
.profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-9) 0 var(--space-5);
  text-align: center;
}
.profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted-strong);
  font-size: 32px;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.02em;
}
.profile-name {
  margin: var(--space-2) 0 0;
  font-size: clamp(28px, 7vw, 36px);
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--color-text);
}
/* 人生サマリー。数字の羅列ではなく、読める文。 */
.profile-summary {
  margin: 0;
  max-width: 34ch;
  font-size: var(--font-size-md);
  line-height: 1.8;
  color: var(--color-muted);
}

.profile-section {
  gap: var(--space-4);
}

/* 好きな場所。丸い写真が場所の顔。 */
.profile-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 92px;
}
.profile-place-photo {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
}
.profile-place-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-place-count {
  font-size: 11px;
  color: var(--color-muted);
}

/* 活動。数字ではなく形 -- 30日ぶんの「残した日」。 */
.profile-activity {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 5px;
}
.profile-activity-day {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--color-surface);
}
/* 残した日だけがアクセント。95% White / 5% Accent の 5% はここに使う。 */
.profile-activity-day.is-active {
  background: var(--color-primary);
  opacity: 0.85;
}
.profile-activity-note {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* 統計。最後に、小さく。行であって、カードのダッシュボードではない。 */
.profile-stat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.profile-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.profile-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
.profile-stat-value {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Phase 31 — per-screen redesign. The token layer already carries the world-view; these are the
   screen-specific intents from the brief. Placed after the base rules so they win, and before the
   dark block so the dark restatements still come last. */

/* Phase 32: Search の器・Hero は基底の宣言（.search-screen / .search-hero）へ移した。ここに同じ
   宣言を重ねると「上書きされて死んだ宣言」をテストが検証してしまう -- 一つの値に一つの出所。 */

/* Life Map: カードを浮かせる、情報は最小限。A lifted, rounder lens card reads as floating over the
   map rather than sitting in a list. */
.life-map-lens {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.life-map-lens:active {
  transform: scale(var(--motion-press-scale));
}

/* Phase 31 — Design System V2 dark mode: surface overrides.
   These MUST live at the end of the file. Surfaces hardcoded as translucent-white (.bottom-nav,
   .record-card, ...) are redefined by later light rules, so a dark override earlier in the cascade
   loses on source order. Placed last, equal specificity wins by being last. Semantic classes, never
   line numbers, so edits above cannot silently un-dark a surface. */
@media (prefers-color-scheme: dark) and (min-width: 100000px) /* Light-only release: dark は未実装なので止めている。再開はこの and(...) を消すだけ */ {
  .record-capture,
  .record-card,
  .task-card,
  .course-card,
  .page-record,
  .search-hero,
  .memories-list-section .record-card,
  .settings-card,
  .settings-group,
  .settings-screen .settings-group,
  .life-map-card,
  .timeline-card,
  .rich-empty,
  .ai-status-panel,
  .audio-device-panel,
  .record-create-field,
  .record-create-card,
  .profile-stat-card,
  .profile-card {
    background: rgba(255, 255, 255, 0.045);
  }
  .search-form input,
  .inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .inline-form textarea {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
  }
  .settings-list div {
    background: rgba(255, 255, 255, 0.03);
  }
  .bottom-nav {
    background: rgba(22, 25, 33, 0.86);
    border-color: rgba(80, 88, 110, 0.3);
  }
  .friend-qr-holder {
    background: #e9eaee;
  }
}

/* Phase 31: each tab button fills its grid column so the whole cell is tappable. Without this the
   buttons are content-sized (as narrow as 32px for 検索), which is below the 44px touch-target floor
   this app has held since Phase 27.
   The FAB must be excluded EXPLICITLY: it carries `nav-item capture-fab` too, and width:100% inside
   its `auto` column collapses the circle to 26px -- verified in a browser, that is exactly what
   happened before this :not() was added. */
.bottom-nav .nav-item:not(.capture-fab) {
  width: 100%;
}

/* Phase 31: with six slots the longest labels (Life Map / Timeline / プロフィール) no longer fit their
   column at 320px. The column must be allowed to shrink below content (minmax(0,1fr) above) and the
   label must degrade gracefully rather than push the grid wider than the screen. */
.bottom-nav .nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .bottom-nav .nav-label {
    font-size: 10px;
  }
}

/* ============================================================================================
   Design v3 component system (owner-approved Arc/Notion/Apple-Photos mock).
   Everything is scoped under `.v3` so it never collides with the legacy CSS, and every colour is a
   token so dark mode follows for free. The six screens emit this markup; photos still hydrate via the
   existing data-page-photo path, audio/records still route through the existing data-action hooks.
   ============================================================================================ */
.v3 { display: flex; flex-direction: column; min-width: 0; }
.v3 * { box-sizing: border-box; }

/* The white pane, per width. Desktop pane is .layout (see the shell block); on mobile the
   primary/detail panel itself becomes the pane so the ground shows at the edges. */
@media (max-width: 860px) {
  .primary-panel, .detail-panel {
    background: var(--color-pane);
    border-radius: 16px;
    min-height: calc(100dvh - 116px);
  }
}

/* Record Detail is its own screen: when it is open, the list behind it is hidden at every width
   (the back button returns to it). */
.layout-has-detail .primary-panel { display: none; }

/* Header: screen name + find + add. Sticky and compact on mobile, quiet on desktop. */
.v3-top { display: flex; align-items: center; gap: 12px; padding: 4px 24px 0; min-height: 56px; }
.v3-top .v3-h1 { flex: 1; min-width: 0; }
.v3-body { display: flex; flex-direction: column; gap: 24px; padding: 4px 24px 32px; }
@media (max-width: 860px) {
  .v3-top { position: sticky; top: 0; z-index: 5; background: var(--color-pane); height: 52px; min-height: 52px; padding: 0 16px; border-radius: 16px 16px 0 0; }
  .v3-body { padding: 14px 16px 28px; gap: 20px; }
}

/* Typography — max is the 19px screen name; there is no 24px+ numeral anywhere. */
.v3 .v3-h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); }
.v3 .t-sec { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
.v3 .t-item { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--color-text); }
.v3 .t-body { font-size: 12.5px; font-weight: 400; color: var(--color-text); line-height: 1.5; }
.v3 .t-cap { font-size: 11px; font-weight: 500; color: var(--color-muted); }
.v3 .t-n { font-size: 11.5px; font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.v3 .mu { color: var(--color-muted); }
.v3 .fa { color: var(--color-faint); }

/* Layout helpers */
.v3 .row { display: flex; align-items: center; gap: 10px; }
.v3 .col { display: flex; flex-direction: column; }
.v3 .grow { flex: 1; min-width: 0; }
.v3 .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3 .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3 .sec { display: flex; flex-direction: column; gap: 12px; }
.v3 .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.v3 .link { border: 0; background: none; padding: 0; font-size: 11.5px; color: var(--color-muted); cursor: pointer; min-height: 24px; }
.v3 .link:hover { color: var(--color-text); }
.v3 .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.v3 .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v3 .g21 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
@media (max-width: 860px) {
  .v3 .g21, .v3 .g2 { grid-template-columns: 1fr; gap: 20px; }
}

/* Header controls */
.v3 .find { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border-radius: 999px; background: var(--color-surface); color: var(--color-faint); font-size: 12.5px; border: 0; width: 100%; }
.v3 .find input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--color-text); padding: 0; }
.v3 .find input::placeholder { color: var(--color-faint); }
.v3 .add { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; border-radius: 999px; background: var(--color-text); color: var(--color-pane); font-size: 12px; font-weight: 600; border: 0; cursor: pointer; white-space: nowrap; }
.v3 .ibtn { width: 34px; height: 34px; min-height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--color-muted); background: none; border: 0; cursor: pointer; flex: 0 0 auto; }
.v3 .ibtn:hover { background: var(--color-surface); }
.v3 .add:active, .v3 .ibtn:active, .v3 .link:active { transform: scale(var(--motion-press-scale)); }
.v3 .ico { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Rows list — a bordered container whose items are separated by hairlines, not boxes. */
.v3 .rows { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-pane); padding: 0 var(--space-7); }
.v3 .rows > * + * { border-top: 1px solid var(--color-border); }
.v3 .r { display: flex; align-items: center; gap: 11px; padding: 10px 0; min-height: 44px; text-align: left; width: 100%; border: 0; background: none; cursor: pointer; color: inherit; }
.v3 .r:active { transform: scale(var(--motion-press-scale-large)); }

/* Photo — the shared hydration figure, made a quiet rounded surface here. */
.v3 .ph { position: relative; overflow: hidden; flex: 0 0 auto; margin: 0; border-radius: 8px; background: var(--color-surface); }
.v3 .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3 .ph-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-faint); background: var(--color-surface); }
.v3 .ph.is-round { border-radius: 999px; }

/* Audio waveform — a token-coloured, non-interactive preview inside cards; real playback is in the
   record detail via the existing player. */
.v3 .wave { display: flex; align-items: flex-end; gap: 2px; height: 100%; flex: 1 1 auto; min-width: 0; }
.v3 .wave i { flex: 1; background: var(--color-border-strong); border-radius: 1px; }
.v3 .block { background: var(--color-surface); border-radius: 8px; overflow: hidden; }
.v3 .quote { font-size: 12px; line-height: 1.7; color: var(--color-muted); padding: 12px 13px; overflow: hidden; }

/* Chips / tags / kind label */
.v3 .chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 11px; border-radius: 999px; background: var(--color-surface); font-size: 11.5px; color: var(--color-muted); white-space: nowrap; border: 0; cursor: pointer; }
.v3 .chip:active { transform: scale(var(--motion-press-scale)); }
.v3 .chip.on { background: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: 600; }
.v3 .tag { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; background: var(--color-surface); font-size: 10.5px; color: var(--color-muted); white-space: nowrap; }
.v3 .kind { font-size: 10.5px; color: var(--color-faint); white-space: nowrap; }
.v3 .chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* A tappable media card (photo lead, text below) — Home/Timeline. */
.v3 .mediacard { display: flex; flex-direction: column; gap: 9px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; min-width: 0; }
.v3 .mediacard:active { transform: scale(var(--motion-press-scale-large)); }
.v3 .mediacard .ph { width: 100%; }
/* The lead media is capped so a single photo never dominates (owner: 写真を大きくしすぎない). */
.v3 .mediacard-lead { height: 150px; }
@media (max-width: 860px) { .v3 .mediacard-lead { height: 160px; } }

/* Place tile variants — one Location component, three looks (Home strip / Life Map hero / Profile row). */
.v3 .placecard { display: flex; flex-direction: column; gap: 6px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; min-width: 0; }
.v3 .placecard:active { transform: scale(var(--motion-press-scale-large)); }
.v3 .placecard .ph { width: 100%; }

/* Home + shared sizing */
.v3 .v3-brand { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.v3 .v3-find-nav { max-width: 240px; cursor: pointer; }
.v3 .thumb44 { width: 44px; height: 44px; border-radius: 8px; }
.v3 .wave-thumb { display: grid; place-items: center; padding: 0 6px; }
.v3 .wave-thumb .wave { height: 18px; width: 26px; }
.v3 .quote-thumb { padding: 5px; font-size: 7px; line-height: 1.35; color: var(--color-muted); }
.v3 .media-audio { display: flex; align-items: center; padding: 0 18px; }
.v3 .media-audio .wave { height: 46px; }
.v3 .media-quote { padding: 14px; font-size: 12px; line-height: 1.7; color: var(--color-muted); }
.v3 .today-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v3 .place-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.v3 .placecard-cover { height: var(--ph-h, 96px); }
.v3 .placecard-blank { display: block; }
.v3 .v3-photo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.v3 .v3-photo-cell { border: 0; background: none; padding: 0; cursor: pointer; }
.v3 .v3-photo-cell .ph { aspect-ratio: 1; width: 100%; }
.v3 .v3-photo-cell:active { transform: scale(var(--motion-press-scale)); }
.v3 .v3-empty { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 44px 0; }
.v3 .v3-empty-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text); }
.v3 .v3-empty-note { margin: 0; font-size: 13px; color: var(--color-muted); }
.v3 .v3-empty-add { margin-top: 8px; }
@media (max-width: 860px) {
  .v3 .today-grid { grid-template-columns: 1fr; }
  .v3 .v3-photo-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .v3 .v3-find-label { display: none; }
  .v3 .v3-find-nav { width: 34px; max-width: 34px; padding: 0; justify-content: center; }
}

/* Search */
.v3 .v3-search-field { max-width: 420px; }
.v3 .search-explore { display: flex; flex-direction: column; gap: 24px; }
.v3 .search-section { gap: 10px; }
.v3 .explore-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
.v3 .explore-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.v3 .explore-photos .v3-photo-cell .ph { aspect-ratio: 1; }
.v3 .explore-places .placecard-cover { height: 84px; }
/* Search results reuse the shared record card; give it the pane's quiet card look. */
.v3 .record-list-section { display: flex; flex-direction: column; gap: 12px; }
.v3 .record-list { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) {
  .v3 .explore-photos { grid-template-columns: repeat(4, 1fr); }
  .v3 .explore-places { grid-template-columns: repeat(3, 1fr); }
}

/* Life Map */
.v3 .geo-places { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.v3 .geo-album-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.v3 .geo-album-row .v3-photo-cell .ph { aspect-ratio: 1; }
.v3 .geo-trail { display: flex; flex-direction: column; gap: 14px; }
.v3 .geo-trail-month { display: flex; flex-direction: column; gap: 2px; }
.v3 .geo-map-entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-pane); cursor: pointer; text-align: left; color: inherit; }
.v3 .geo-map-entry:active { transform: scale(var(--motion-press-scale-large)); }
.v3 .geo-map-entry-icon { display: inline-grid; place-items: center; color: var(--color-primary); }
@media (max-width: 860px) {
  .v3 .geo-places { grid-template-columns: repeat(2, 1fr); }
}

/* Timeline album */
.v3 .life-pages { display: flex; flex-direction: column; gap: 32px; }
.v3 .album-month { display: flex; flex-direction: column; gap: 16px; }
.v3 .album-month-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); }
.v3 .life-page { display: flex; flex-direction: column; gap: 12px; }
.v3 .life-page-masthead { display: flex; align-items: baseline; gap: 10px; }
.v3 .life-page-masthead h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text); }
.v3 .life-page-masthead p { margin: 0; font-size: 11.5px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.v3 .day-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v3 .day-media { height: 132px; }
.v3 .page-record-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3 .page-record-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.v3 .page-record-new { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 12px; }
.v3 .life-page-empty { margin: 0; font-size: 12.5px; color: var(--color-muted); }
.v3 .life-page-add { align-self: flex-start; min-height: 36px; padding: 0 14px; border: 1px dashed var(--color-border-strong); border-radius: 10px; background: none; color: var(--color-primary-strong); font-size: 12px; font-weight: 600; cursor: pointer; }
.v3 .record-feed-more { align-self: center; min-height: 40px; }
@media (max-width: 860px) {
  .v3 .day-grid { grid-template-columns: 1fr; }
}

/* Profile */
.v3 .profile-identity { display: flex; align-items: center; gap: 16px; padding: 8px 0 4px; }
.v3 .profile-avatar { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 999px; background: var(--color-surface); color: var(--color-muted-strong); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.v3 .profile-name { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); }
.v3 .profile-summary { margin: 0; max-width: 62ch; font-size: 12.5px; line-height: 1.7; color: var(--color-muted); }
.v3 .profile-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v3 .profile-activity { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.v3 .profile-activity-day { aspect-ratio: 1; border-radius: 3px; background: var(--color-surface); }
.v3 .profile-activity-day.is-active { background: var(--color-primary); opacity: 0.85; }
.v3 .profile-activity-note { margin: 0; font-size: 11px; color: var(--color-muted); }
@media (max-width: 860px) {
  .v3 .profile-places { grid-template-columns: repeat(3, 1fr); }
  .v3 .profile-activity { grid-template-columns: repeat(15, 1fr); }
}

/* Record Detail — a two-column article/aside inside the pane. The article carries title/photo/body/
   tags; the aside carries audio/要点/全文/場所. Secondary controls run full width below. */
.v3-detail.record-detail { padding: 0; background: none; box-shadow: none; }
.v3 .detail-cols { align-items: start; }
.v3 .detail-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); text-wrap: balance; }
.v3 .detail-head { display: flex; flex-direction: column; gap: 6px; }
.v3 .detail-head .detail-date { margin: 0; font-size: 11.5px; color: var(--color-muted); }
.v3 .detail-head .suggested-title { margin: 0; font-size: 11px; color: var(--color-faint); }
/* The photo is medium, never a wall: capped so the body is reachable without scrolling far. */
.v3 .detail-article .photo-slot, .v3 .detail-article figure { max-height: 200px; }
.v3 .detail-article .photo-slot img, .v3 .detail-article figure img { max-height: 200px; object-fit: cover; }
.v3 .detail-article .note-body p { font-size: 13px; line-height: 1.9; color: var(--color-text); }
.v3 .detail-cols h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-muted); }
.v3 .tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
.v3 .tag-row span { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; background: var(--color-surface); font-size: 10.5px; color: var(--color-muted); }
/* Ensure the audio player's waveform never collapses to zero width. */
.v3 .detail-aside [data-audio-waveform] { min-width: 40px; }

/* The curated-Timeline (collections) sub-section sits below the auto date album, clearly separated. */
.v3 .timeline-screen { border-top: 1px solid var(--color-border); padding-top: 24px; margin-top: 12px; }
.v3 .timeline-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v3 .timeline-lead { margin: 2px 0 0; font-size: 11.5px; color: var(--color-muted); }

/* Touch-target floor (owner requirement: 44px). On mobile every discrete control clears 44px; the
   compact desktop sizes (mouse) stay as the mock draws them. */
@media (max-width: 860px) {
  .v3 .chip, .v3 .add, .v3 .life-page-add, .v3 .timeline-new-button, .v3 .find { min-height: 44px; }
  .v3 .link { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; }
  .v3 .ibtn, .v3 .v3-find-nav { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .v3 .r { min-height: 48px; }
}

.v3 :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }
.v3 .card-in { animation: card-in var(--motion-duration-card) var(--motion-ease-decelerate) both; }
@media (prefers-reduced-motion: reduce) {
  .v3 .card-in { animation: none; }
  .v3 .mediacard:active, .v3 .placecard:active, .v3 .r:active, .v3 .chip:active, .v3 .add:active, .v3 .ibtn:active { transform: none; }
}

/* ============================================================================================
   Design v3 desktop shell — placed LAST so it beats every earlier .bottom-nav / .layout rule on
   source order (the app has many). Ground grid + 216px rail + one white pane. Never a dark sidebar.
   ============================================================================================ */
@media (min-width: 861px) {
  .app-shell {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 0;
    padding: 12px 12px 12px 6px;
    background: var(--color-bg);
  }

  .desktop-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 12px 12px 14px;
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100dvh - 24px);
  }
  .rail-mark { padding: 2px 10px 18px; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); }
  .rail-i {
    display: flex; align-items: center; gap: 10px; width: 100%;
    /* IA Phase 2: Rail の項目もクリック領域を 44px 以上に揃える（Bottom Navigation と同じ床）。 */
    min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px;
    background: none; color: var(--color-muted); font-size: 13px; text-align: left; cursor: pointer;
    transition: background var(--motion-duration-press) var(--motion-ease-spring), color var(--motion-duration-press) var(--motion-ease-spring);
  }
  .rail-i:hover { background: rgba(13, 17, 23, 0.045); color: var(--color-muted-strong); }
  .rail-i.on { background: var(--color-pane); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-card); }
  .rail-i:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
  .rail-ico { width: 17px; height: 17px; flex: 0 0 auto; }
  .rail-spacer { flex: 1; }

  /* The pane. Screens bring their own padding; the pane owns only the surface, radius and scroll. */
  .layout {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
    margin: 0;
    background: var(--color-pane);
    border-radius: 20px;
    overflow: hidden auto;
    overscroll-behavior: contain;
    min-height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
  }
  /* Record Detail is a full pane on desktop (not a side panel) -- it replaces the screen. */
  .layout-has-detail { grid-template-columns: 1fr; }
  .layout-has-detail .primary-panel { display: none; }
  .layout-has-detail .detail-panel { display: block; }

  /* On the pale ground the floating settings button and the bottom nav are redundant -- the rail
     carries both. */
  .bottom-nav { display: none; }
  .settings-access { display: none; }
}