/* Our Spacetime — presentation layer. Existing feature styles own behavior,
   animation and media privacy. This layer needs no shell.js to navigate. */

:root {
  --reading-width: 760px;
  --rail-width: 216px;
  --bar-height: 76px;
  --radius: 20px;
  --sayu: #7aa2ff;
  --dizz: #ff8ec8;
  --serif: 'Lora', Georgia, serif;
}

[data-mode="dark"] {
  color-scheme: dark;
  --bg-base: #090c19;
  --text: #edf0fa;
  --muted: #a9b0cb;
  --line: rgba(173, 187, 231, .15);
  --glass: rgba(20, 26, 47, .88);
  --glass-solid: #171e34;
  --surface: rgba(32, 40, 66, .78);
  --field: rgba(8, 13, 29, .34);
  --chrome: #101626;
  --shadow: 0 6px 24px rgba(2, 5, 15, .13);
  --shadow-lg: 0 24px 80px rgba(2, 5, 15, .42);
  --ink-accent: color-mix(in srgb, var(--accent) 78%, var(--text));
  --ink-rose: #f4b3d3;
}

[data-mode="light"] {
  color-scheme: light;
  --bg-base: #f3f2f8;
  --text: #252b45;
  --muted: #626b83;
  --line: rgba(60, 73, 112, .16);
  --glass: rgba(255, 255, 255, .88);
  --glass-solid: #fff;
  --surface: rgba(241, 243, 251, .9);
  --field: rgba(231, 234, 246, .56);
  --chrome: #f9f9fd;
  --shadow: 0 6px 24px rgba(38, 44, 81, .045);
  --shadow-lg: 0 24px 80px rgba(38, 44, 81, .16);
  --ink-accent: color-mix(in srgb, var(--accent) 40%, #26355e);
  --ink-rose: #963764;
}

/* Theme surfaces switch immediately via variables. Match inherited text and
   the page backdrop to that same frame, avoiding pale text on light cards
   during the old body color transition. Scene/feature animations are untouched. */
body { line-height: 1.6; transition: none; }
button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select, audio { max-width: 100%; }
input, textarea, select { min-width: 0; accent-color: var(--accent); }
button { touch-action: manipulation; }
::selection { color: var(--text); background: color-mix(in srgb, var(--accent) 28%, var(--glass-solid)); }
:is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ink-accent);
  outline-offset: 3px;
}
:is(input, textarea, select):focus-visible { border-color: var(--ink-accent); }
button:disabled { cursor: default; }

/* Keep all of the existing sky/weather animations, with quieter ambient light. */
.bg-gradient { opacity: .66; }
[data-mode="light"] .bg-gradient { opacity: .38; }
[data-mode="light"][data-bg="stars"] .bg-gradient::after {
  background: radial-gradient(125% 95% at 50% 35%, transparent 60%, rgba(70, 70, 120, .08));
}

/* Compact horizontal navigation is the baseline; the wide layout becomes a rail. */
.topbar {
  gap: 12px 20px;
  padding: 12px 24px 0;
  background: var(--chrome);
  border-color: var(--line);
  box-shadow: 0 3px 18px rgba(0, 0, 0, .025);
  /* A backdrop filter would make the fixed desktop rail relative to this bar. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.brand { order: 0; gap: 10px; flex-shrink: 0; }
.brand-heart { font-size: 23px; filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 30%, transparent)); }
.brand-name { font-size: 29px; white-space: nowrap; }
.brand-day { font-size: 11px; letter-spacing: .01em; }
.search-wrap { order: 1; margin-left: auto; max-width: 340px; min-width: 160px; }
#search { min-height: 42px; border-radius: 12px; padding: 9px 14px; background: var(--field); }
.topbar-right { order: 2; margin-left: 0; gap: 12px; }
.menu-trigger { min-width: 42px; min-height: 42px; border-radius: 12px; }
.menu { padding: 8px; border-radius: 16px; min-width: 238px; }
.menu-item { min-height: 44px; font-size: 13px; }
.app-version { display: block; margin: 5px 6px 0; padding: 12px 6px 5px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .025em; }
.sync-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.sync-status::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #9aa2bb; }
.sync-status[data-state="connected"]::before { background: #81cbb0; box-shadow: 0 0 0 3px #81cbb010; }
.sync-status[data-state="reconnecting"] { color: #edc78e; }
.sync-status[data-state="reconnecting"]::before { background: currentColor; }
.sync-status[data-state="offline"] { color: #f4a7b8; }
.sync-status[data-state="offline"]::before { background: currentColor; }
[data-mode="light"] .sync-status[data-state="reconnecting"] { color: #825b23; }
[data-mode="light"] .sync-status[data-state="offline"] { color: #9b3955; }
.togetherness { padding: 5px 9px; border: 0; font-size: 11px; gap: 8px; }
.togetherness.together {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--chrome));
}
.avatar { width: 25px; height: 25px; font-size: 10px; box-shadow: none; }
.tabs {
  order: 3;
  flex: 1 0 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  gap: 5px;
  padding: 5px 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.tabs::-webkit-scrollbar { display: block; height: 3px; width: 4px; }
.tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.tab {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  transition: background .18s, color .18s, border-color .18s;
}
.tab:hover { color: var(--text); background: var(--field); }
.tab.active, .tab-anniv.active {
  color: var(--text);
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 18%, var(--chrome)), color-mix(in srgb, var(--accent-2) 9%, var(--chrome)));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
  box-shadow: inset 3px 0 var(--accent);
  font-weight: 600;
}
.tab-anniv { background: color-mix(in srgb, var(--accent-2) 6%, transparent); }
.nav-section-heading { display: none; }

/* A shared reading measure aligns headings, forms and the memories below. */
.container { max-width: 1080px; padding: 36px 32px 100px; min-width: 0; }
:is(.section-title, .section-sub, .section-kicker, .songs-title, .day-nav, .composer,
  .day-feed, .feed-pager, .on-this-day, .ai-panel, .ai-scan-row, .bucket-tabs,
  .bucket-add, .bucket-list, .song-add, .song-list, .row-add, .timeline,
  .letter-form, .letter-list, .vault-recorder, .voice-list, .journal-tonight,
  .diary-heading, .diary-feed, .story-grid, .us-card) { max-width: var(--reading-width); }
.section-title, .songs-title {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.035em;
  margin-bottom: 10px;
}
.section-sub { font-size: 14px; line-height: 1.7; margin-bottom: 26px; }
.section-kicker {
  margin: 0 auto 10px;
  color: var(--ink-accent);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.moments-heading {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--reading-width);
  margin: 0 auto 24px;
  padding: 30px 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(115deg, var(--glass), color-mix(in srgb, var(--accent) 7%, var(--glass)) 65%, color-mix(in srgb, var(--accent-2) 9%, var(--glass)));
  box-shadow: var(--shadow);
}
.moments-heading::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  right: -100px;
  top: -160px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 20%, transparent);
  border-radius: 50%;
}
.moments-heading .section-title { font-size: clamp(33px, 3.6vw, 46px); line-height: 1.15; margin: 12px 0; }
.moments-heading .section-title em { font-weight: 400; color: var(--ink-rose); }
.moments-heading .section-sub { margin: 0; font-size: 13px; }
.moments-orbit {
  position: relative;
  display: block;
  flex: 0 0 174px;
  height: 174px;
  margin-right: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%);
}
.moments-orbit::before, .moments-orbit::after {
  content: '';
  position: absolute;
  inset: 36px -14px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, transparent);
  border-radius: 50%;
  transform: rotate(-35deg);
}
.moments-orbit::after { inset: 16px 55px; transform: rotate(-35deg); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.moments-orbit i { position: absolute; z-index: 1; width: 13px; height: 13px; border-radius: 50%; }
.moments-orbit i:first-child { left: 13px; top: 105px; background: var(--sayu); box-shadow: 0 0 0 6px #7aa2ff12, 0 0 22px #7aa2ff77; }
.moments-orbit i:last-child { right: 13px; top: 37px; width: 10px; height: 10px; background: var(--dizz); box-shadow: 0 0 0 6px #ff8ec812, 0 0 22px #ff8ec877; }

/* Compact navigation that still exposes the date field and every day action. */
.day-nav {
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px 7px;
  border-radius: 14px;
  background: var(--glass);
  scroll-margin-top: 150px;
}
.day-nav-label { min-width: 0; font-size: 13px; line-height: 1.4; }
.day-nav .icon-btn { flex: 0 0 38px; width: 38px; height: 38px; font-size: 22px; }
.day-nav .ghost-btn { flex-shrink: 0; font-size: 12px; padding: 8px 10px; }
#day-picker, #diary-picker { min-width: 0; width: 137px; padding: 8px; border-radius: 9px; font-size: 12px; }
.feed-pager { gap: 8px; padding: 4px 0; border: 0; background: transparent; border-radius: 0; }
.feed-pager .pager-btn { min-height: 38px; padding: 7px 12px; border-radius: 10px; font-size: 12px; font-weight: 500; background: var(--glass); }
.feed-pager .pager-info { font-size: 11px; font-variant-numeric: tabular-nums; }
.feed-pager .pager-btn:disabled { opacity: .5; }
.day-feed { gap: 16px; }
.day-card { border-radius: 18px; }
.day-head { padding: 14px 20px; background: color-mix(in srgb, var(--accent) 3%, transparent); }
.day-head > div:first-child { min-width: 0; }
.day-head h2 { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.day-head .day-sub, .day-count { font-size: 11px; }
.day-people { flex-shrink: 0; }
.moment { padding: 18px 20px; gap: 14px; }
.moment-time { font-size: 11px; width: 56px; font-variant-numeric: tabular-nums; }
.moment-by { margin-bottom: 7px; }
.moment-text, .diary-a { line-height: 1.75; }
.mini-avatar { box-shadow: none; }

/* Composer/editor: deliberately quieter than a day card. */
.composer { padding: 18px 20px 14px; margin-bottom: 22px; box-shadow: var(--shadow); }
.composer-label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-accent); margin-bottom: 8px; letter-spacing: .02em; }
.composer-body { font-size: 14px; line-height: 1.7; }
.composer-bar { gap: 10px; margin-top: 12px; }
.composer-actions { gap: 3px; min-width: 0; }
.composer-bar > .primary-btn { flex-shrink: 0; }
.composer-time, .edit-time-row { justify-content: flex-start; gap: 12px; font-size: 11px; flex-wrap: wrap; margin-top: 8px; }
#new-time, #edit-time { min-width: 0; padding: 6px 9px; font-size: 12px; }
.color-dots { gap: 8px; }
.color-dot { width: 17px; height: 17px; }
.color-dot.selected { box-shadow: 0 0 0 2px var(--glass-solid), 0 0 0 3px var(--ink-accent); }
.primary-btn { color: #151b30; font-weight: 700; box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 11px; }
.primary-btn.small { min-height: 38px; font-size: 12px; padding: 9px 14px; }
.ghost-btn { border-radius: 10px; }
.modal { border-radius: 22px; }
#edit-modal { max-width: 740px; padding: 22px 24px; }
.editor-heading { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.editor-heading h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 500; font-size: 24px; }
.editor-heading > span { font-size: 12px; color: var(--muted); }
#edit-body { min-height: 110px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); font-size: 15px; }
.edit-resizer { height: 24px; background: transparent; border-color: transparent; margin-top: 4px; }
.edit-resizer .er-hint { color: var(--muted); font-size: 10px; }
.modal-meta { font-size: 11px; }

/* Shared panels and complete, aligned forms, including previously bare inputs. */
.bucket-add, .song-add, .row-add, .vault-recorder {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--glass);
  box-shadow: var(--shadow);
}
:is(.bucket-add, .song-add, .row-add, .vault-recorder) > input:not([type="file"]):not(.emoji-field) {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--field);
  font-size: 14px;
  box-shadow: none;
}
.bucket-add > .icon-btn, .bucket-add > .primary-btn { flex-shrink: 0; }
.bucket-tabs { justify-content: flex-start; margin-top: 20px; }
:is(.bucket-item, .letter-card, .voice-item, .song-item, .place-card, .us-card,
  .stat-card, .letter-form, .journal-tonight, .game-card) { border-radius: 18px; box-shadow: var(--shadow); }
.bucket-item { padding: 18px; }
.bucket-controls { gap: 8px; margin-top: 12px; }
.bucket-by, .prio { min-height: 28px; display: inline-flex; align-items: center; }
.bucket-by { color: color-mix(in srgb, var(--by, var(--muted)) 75%, var(--text)); }
.bucket-text, .letter-bodytext { line-height: 1.7; }
.song-item { flex-wrap: wrap; }
.song-play { color: var(--text); }
.empty-state { max-width: var(--reading-width); margin: 28px auto; padding: 30px 20px; border: 1px dashed var(--line); border-radius: 20px; background: color-mix(in srgb, var(--glass) 65%, transparent); }
.empty-state p { font-size: 13px; max-width: 38ch; margin: 12px auto 0; }
.empty-emoji { font-size: 38px; filter: none; }
.daily-reminder { background: var(--glass-solid); padding: 10px 24px; }
.dr-btn { color: #151b30; }

/* Cycle has its own readable measure; scope shared cc-/cs- names so the
   contract celebration typography never spills into the daily check-in. */
#view-cycle { max-width: calc(var(--reading-width) + 64px); }
:is(.cycle-status, .cycle-checkin, .cycle-patterns, .cycle-cal, .cycle-chart, .cycle-ai, .cycle-form) {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.cycle-form { background: var(--glass); gap: 14px; }
.cycle-status { border-color: color-mix(in srgb, var(--phase) 25%, var(--line)); }
.cycle-status .cs-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.6; }
.cycle-status .cs-fact { padding: 14px 6px; }
.cycle-status .cf-n { font-variant-numeric: tabular-nums; }
.cycle-status .cs-fact .cf-l { font-size: 11px; }
.cycle-checkin .cc-title {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
.cycle-checkin .cc-sub { margin: 0; font-size: 11px; color: var(--muted); font-weight: 400; }
.cycle-patterns .cc-sub { margin: 0; font-size: 11px; color: var(--muted); font-weight: 400; }
:is(.cycle-status, .cycle-checkin, .cycle-cal, .cycle-chart, .cycle-patterns):empty { display: none; }
.cycle-checkin .cc-row { margin-bottom: 13px; gap: 12px; }
.cycle-checkin .cc-label { flex-basis: 48px; padding-top: 9px; }
.cc-chip, .cai-chip { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.cc-note { min-height: 44px; }
.cf-dates { gap: 14px; }
.cf-dates label { gap: 6px; font-size: 12px; }
.cf-dates input, #cy-note { min-height: 44px; }
.cycle-section-head { margin: 30px 0 18px; padding-top: 24px; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.cal-head { margin-bottom: 16px; }
.cal-grid { gap: 6px; }
.cal-day { aspect-ratio: auto; min-height: 44px; }
.cal-legend { margin-top: 16px; line-height: 1.8; }
.cai-head { flex-wrap: wrap; }
.cycle-item { padding: 16px; }
#view-fantasy .section-title { color: var(--text); }
#view-fantasy .section-kicker { color: var(--ink-rose); }
#view-fantasy .primary-btn { background: linear-gradient(100deg, #ffabbc, #ffc3a7); color: #392030; }

/* Our Day retains its reveal sequence, floating hearts, music and signing. */
.anniv-hero { padding: 42px 24px 32px; border: 1px solid var(--line); border-radius: 26px; background: color-mix(in srgb, var(--glass) 75%, transparent); margin-bottom: 22px; }
.anniv-kicker { font-size: 10px; letter-spacing: .17em; padding: 0 32px; }
.anniv-title { font-family: var(--serif); font-size: clamp(30px, 4.8vw, 52px); font-weight: 500; line-height: 1.2; color: var(--text); background: none; -webkit-text-fill-color: currentColor; }
.anniv-date { font-size: 13px; line-height: 1.7; }
.anniv-counter { padding: 18px 28px; border-radius: 18px; }
.anniv-days { font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 6vw, 66px); }
.anniv-days-label { font-size: 11px; }
.anniv-timeline, .anniv-memories { max-width: var(--reading-width); padding-left: 0; padding-right: 0; }
.anniv-chapter { padding: 26px; border-radius: 20px; box-shadow: var(--shadow); }
.anniv-chapter-title { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.35; }
.anniv-bubble { line-height: 1.75; }
.anniv-music-toggle { width: 44px; height: 44px; box-shadow: var(--shadow); }
.anniv-outro-line { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.contract-sign { border-radius: 20px; }

/* Light mode uses darker accent ink while retaining the chosen accent theme. */
[data-mode="light"] :is(.stat-num, .anniv-days, .anniv-chapter-num) { color: var(--ink-accent); background: none; -webkit-text-fill-color: currentColor; }
[data-mode="light"] .p-high { color: #a12e43; background: #fae2e7; }
[data-mode="light"] .p-med { color: #81540c; background: #f8edcc; }
[data-mode="light"] .p-low { color: #345b9d; background: #e6edfc; }
[data-mode="light"] .bucket-by { color: color-mix(in srgb, var(--by, var(--muted)) 40%, #273552); }
[data-mode="light"] :is(.cs-fact .cf-n, .cs-reg, .cycle-status.is-late .cs-title) { color: color-mix(in srgb, var(--phase) 35%, #51324c); }
[data-mode="light"] :is(.cp-note, .ci-gap) { color: var(--ink-accent); }
[data-mode="light"] :is(.cc-saved, .jt-saved) { color: #26734e; }
[data-mode="light"] .brand-name { background: none; color: var(--ink-accent); -webkit-text-fill-color: currentColor; }
.login-card { max-width: 410px; padding: 38px 32px; border-radius: 26px; }
.login-card h1 { margin-top: 16px; }
[data-mode="light"] .login-card h1 { background: none; color: var(--ink-accent); -webkit-text-fill-color: currentColor; }
.who-btn.active, .who-btn[data-user="dizz"].active { box-shadow: none; }

@media screen and (min-width: 1100px) {
  .app { padding-left: var(--rail-width); }
  .topbar { height: var(--bar-height); flex-wrap: nowrap; margin-left: calc(-1 * var(--rail-width)); padding: 10px 28px; gap: 24px; }
  .brand { flex: 0 0 calc(var(--rail-width) - 28px); display: grid; grid-template-columns: 24px 1fr; gap: 0 9px; }
  .brand-heart { grid-row: 1 / 3; }
  .brand-name { font-size: 25px; line-height: 1.1; }
  .brand-day { grid-column: 2; margin-top: 4px; line-height: 1.3; }
  .brand-day:empty { display: none; }
  .search-wrap { margin-left: 0; max-width: 360px; }
  .topbar-right { margin-left: auto; }
  .tabs {
    position: fixed;
    inset: var(--bar-height) auto 0 0;
    width: var(--rail-width);
    height: calc(100vh - var(--bar-height));
    height: calc(100dvh - var(--bar-height));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 12px 14px 28px;
    background: var(--chrome);
    border-right: 1px solid var(--line);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .tab { min-height: 36px; padding: 7px 13px; line-height: 1.4; }
  .nav-section-heading { display: block; flex: 0 0 auto; padding: 17px 13px 7px; color: var(--muted); font-size: 9px; line-height: 1.4; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
  .nav-section-heading:first-child { padding-top: 6px; }
  .day-nav { scroll-margin-top: calc(var(--bar-height) + 18px); }
  body.test-mode .app { padding-left: 0; }
}

@media screen and (min-width: 761px) and (max-width: 1099px) {
  .brand-day { display: none; }
  .togetherness .label { display: none; }
  .container { padding-top: 28px; }
}

/* Match the existing app's actual sheet breakpoint (760px). */
@media screen and (max-width: 760px) {
  .topbar { gap: 8px; padding: calc(9px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .brand { order: 0; min-width: 0; gap: 7px; }
  .brand-name { font-size: 26px; }
  .brand-heart { font-size: 19px; }
  .brand-day { display: none; }
  .topbar-right { order: 1; margin-left: auto; gap: 5px; }
  .sync-status { font-size: 9px; gap: 4px; }
  .sync-status[data-state="connected"] { font-size: 0; gap: 0; }
  .sync-status[data-state="connected"]::before { width: 5px; height: 5px; margin-right: 4px; }
  .togetherness { padding: 0; background: transparent; gap: 0; }
  .togetherness span.label, .togetherness.together span.label { display: none; }
  .togetherness .avatar { width: 23px; height: 23px; font-size: 9px; }
  .menu-trigger { width: 40px; min-width: 40px; min-height: 40px; padding: 6px; }
  .tabs { order: 3; flex-basis: 100%; width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 4px; padding: 4px 0 7px; border-radius: 0; }
  .tab { padding: 9px 13px; min-height: 42px; font-size: 12px; }
  .tab.active { box-shadow: inset 0 -2px var(--accent); }
  .search-wrap { order: 2; flex: 1 0 100%; min-width: 0; max-width: none; margin: 0; }
  #search { min-height: 38px; padding: 7px 12px; font-size: 16px; }
  /* app.js already sets on-bucket for every other section. Avoid an empty row. */
  body.on-bucket .search-wrap { display: none; }
  .container { padding: 20px max(14px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .section-title, .songs-title { font-size: 28px; margin-bottom: 8px; }
  .section-sub { font-size: 13px; line-height: 1.7; margin-bottom: 20px; }
  .section-kicker { font-size: 9px; letter-spacing: .13em; }
  .moments-heading { margin-bottom: 16px; padding: 24px 22px; border-radius: 20px; min-height: 184px; }
  .moments-heading > div { position: relative; z-index: 1; }
  .moments-heading .section-title { font-size: clamp(31px, 7.5vw, 40px); margin: 10px 0 12px; }
  .moments-heading .section-sub { max-width: 25ch; font-size: 12px; }
  .moments-orbit { position: absolute; right: -42px; top: 22px; margin: 0; width: 150px; height: 150px; opacity: .32; z-index: -1; }
  .day-nav { flex-wrap: wrap; padding: 5px; gap: 4px; border-radius: 13px; scroll-margin-top: calc(164px + env(safe-area-inset-top)); }
  .day-nav .icon-btn { width: 40px; height: 40px; flex-basis: 40px; }
  .day-nav-label { flex: 1 1 calc(100% - 100px); font-size: 13px; }
  #day-picker, #diary-picker { flex: 1 1 120px; width: auto; min-height: 38px; font-size: 16px; padding: 5px 9px; }
  .day-nav .ghost-btn { min-height: 38px; padding: 7px 13px; font-size: 12px; }
  .day-feed { gap: 13px; }
  .feed-pager { margin-top: 2px; }
  .feed-pager .pager-btn { min-height: 40px; padding: 7px 11px; }
  .day-head { padding: 13px 14px; gap: 8px; }
  .day-head h2 { font-size: 16px; }
  .moment { padding: 15px 14px; gap: 9px; }
  .moment-time { width: 43px; font-size: 10px; }
  .moment-text { font-size: 14px; line-height: 1.7; }
  #view-moments .composer { background: var(--glass-solid); padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 90dvh; }
  .composer-label { display: none; }
  .composer-body { font-size: 16px; min-height: 110px; }
  .composer-time, .edit-time-row { row-gap: 6px; font-size: 11px; }
  #new-time, #edit-time { font-size: 16px; min-height: 40px; max-width: 100%; }
  .composer-bar { align-items: flex-end; }
  .composer-actions { flex: 1; gap: 2px; }
  .composer-actions .icon-btn { width: 40px; height: 40px; }
  .composer-actions .color-dots { flex-basis: 100%; min-height: 28px; margin: 4px 4px 0; gap: 11px; }
  .color-dot { width: 20px; height: 20px; }
  .primary-btn.small { min-height: 42px; }
  .fab { width: 56px; height: 56px; right: max(20px, env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); color: #151b30; box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 28%, transparent); }
  #edit-modal { max-width: none; max-height: 94dvh; border-radius: 22px 22px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .editor-heading { margin-bottom: 12px; padding-bottom: 10px; }
  .editor-heading h2 { font-size: 22px; }
  .editor-heading > span { font-size: 11px; }
  #edit-body { font-size: 16px; min-height: 110px; }
  .bucket-add, .song-add, .row-add, .vault-recorder { padding: 10px; gap: 8px; }
  :is(.bucket-add, .song-add, .row-add, .vault-recorder) > input:not([type="file"]):not(.emoji-field) { font-size: 16px; flex-basis: 140px; }
  :is(.letter-form, .cycle-form, .cycle-checkin, .cycle-ai) :is(input, textarea, select) { font-size: 16px; }
  .bucket-item { padding: 15px 14px; }
  .bucket-controls, .bucket-media { margin-left: 0; }
  .bucket-text { font-size: 14px; }
  .bucket-by, .prio { min-height: 32px; }
  #view-cycle { max-width: none; }
  :is(.cycle-status, .cycle-checkin, .cycle-patterns, .cycle-cal, .cycle-chart, .cycle-ai, .cycle-form) { padding: 16px; border-radius: 16px; }
  .cycle-checkin .cc-row { flex-direction: column; gap: 6px; }
  .cycle-checkin .cc-label { flex-basis: auto; padding: 0; }
  .cc-chip, .cai-chip { min-height: 40px; }
  .cf-dates { gap: 12px; }
  .cf-dates label { min-width: 120px; }
  .cal-grid { gap: 4px; }
  .cal-day { min-height: 36px; font-size: 12px; }
  .cs-facts { gap: 6px; }
  .cycle-status .cs-fact { padding: 12px 4px; }
  .cycle-status .cs-fact .cf-l { font-size: 10px; }
  .cp-row { flex-wrap: wrap; }
  .anniv-hero { padding: 50px 16px 26px; border-radius: 22px; }
  .anniv-kicker { padding: 0; font-size: 9px; }
  .anniv-title { font-size: clamp(29px, 7.5vw, 40px); }
  .anniv-chapter { padding: 20px 16px; }
  .anniv-chapter-title { font-size: 19px; }
  .anniv-chapter-head { gap: 10px; }
  .anniv-bubble { font-size: 13px; }
  .anniv-outro-line { font-size: 21px; }
  .daily-reminder { padding: 9px 14px; gap: 8px; }
  .dr-text { font-size: 12px; }
  .dr-btn { padding: 8px 11px; font-size: 12px; }
}

@media screen and (max-width: 360px) {
  .brand-name { font-size: 24px; }
  .brand-heart { display: none; }
  .sync-status { max-width: 74px; white-space: normal; line-height: 1.35; }
  .moments-heading { padding: 22px 18px; }
  .moments-heading .section-title { font-size: 31px; }
  .day-head { flex-wrap: wrap; }
  .day-count { margin-left: auto; }
}

/* A network warning stays readable without making a second app-bar row. */
@media screen and (max-width: 420px) {
  .topbar:has(.sync-status:not([data-state="connected"])) .brand-name { font-size: 22px; }
  .topbar:has(.sync-status:not([data-state="connected"])) .brand-heart { display: none; }
  .topbar:has(.sync-status:not([data-state="connected"])) .togetherness { display: none; }
}

/* Presentation-only additions should never appear on the printed contract. */
@media print {
  .moments-heading, .nav-section-heading, .composer-label, .editor-heading { display: none; }
}

/* ---- Polish pass: navigation clarity, touch targets, phone legibility ---- */

/* "Our Day" keeps its pink ink but no longer looks like a second selected tab. */
.tab-anniv:not(.active) {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--accent-2) 7%, transparent);
  color: color-mix(in srgb, var(--accent-2) 55%, var(--text));
  box-shadow: none;
}
[data-mode="light"] .tab-anniv:not(.active) { color: var(--ink-rose); }
.tab-mend:not(.active) { background: color-mix(in srgb, var(--mend-coral, #ff9d8a) 8%, transparent); color: color-mix(in srgb, var(--mend-coral, #ff9d8a) 60%, var(--text)); }
[data-mode="light"] .tab-mend:not(.active) { color: color-mix(in srgb, #d8674f 60%, var(--text)); }

/* The sideways tab strip fades at whichever edge still hides more tabs (shell.js sets the flags). */
@media screen and (max-width: 1099px) {
  .tabs {
    --fade-l: 0px;
    --fade-r: 30px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .tabs[data-at-start="false"] { --fade-l: 26px; }
  .tabs[data-at-end="true"] { --fade-r: 0px; }
}
@media screen and (min-width: 1100px) {
  .nav-section-heading { font-size: 10px; }
}

/* 🎙️ Voice typing: pulses while listening, dims while Whisper types it out. */
.vt-btn.vt-rec { background: color-mix(in srgb, #ff5a6e 22%, transparent); animation: vtPulse 1.2s ease-in-out infinite; }
.vt-btn.vt-busy { opacity: .7; cursor: progress; }
@keyframes vtPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 110, .45); } 50% { box-shadow: 0 0 0 7px rgba(255, 90, 110, 0); } }
@media (prefers-reduced-motion: reduce) { .vt-btn.vt-rec { animation: none; box-shadow: 0 0 0 2px rgba(255, 90, 110, .6); } }
.journal-q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journal-q-head label { flex: 1; min-width: 0; }
.journal-q-head .vt-btn { flex-shrink: 0; width: 38px; height: 38px; font-size: 16px; }

/* Comfortable hit areas without changing how the controls look. */
.ig-like, .ig-react-btn { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; margin-block: -7px; }
.ig-actions > .ig-like:first-child { margin-left: -8px; }
.place-map {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.asc-link { min-height: 40px; padding: 10px 14px; }

/* Times never break into "11:50 / am". */
.moment-time { white-space: nowrap; }

/* An empty date field reads as a hint, not as a value. */
:is(#day-picker, #diary-picker):invalid::-webkit-datetime-edit { color: var(--muted); }

/* A story without a cover gets a little night sky instead of an empty box. */
.story-cover-ph {
  background:
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--accent-2) 32%, transparent), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 38%, #0d1022), #0a0712);
}

.story-card-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Reader + editor sheets size to the visible screen on phones (Safari's toolbar included). */
.story-edit-card, .story-read-card { max-height: 92dvh; }
.reader-overlay .story-read-card { height: 100dvh; max-height: 100dvh; }
@media (min-width: 880px) { .reader-overlay .story-read-card { height: auto; max-height: 92dvh; } }

/* Touch feedback: a quick, subtle press on buttons. */
@media (hover: none) {
  :is(.primary-btn, .ghost-btn, .icon-btn, .tab, .us-btn, .btab, .game-card, .song-play):active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.primary-btn, .ghost-btn, .icon-btn, .tab, .us-btn, .btab, .game-card, .song-play):active { transform: none; }
}

@media screen and (max-width: 760px) {
  /* Nothing a person reads on a phone is smaller than ~10.5px. */
  .section-kicker, .anniv-kicker { font-size: 10.5px; letter-spacing: .12em; }
  .moment-time { width: 50px; font-size: 11px; }
  .prio { font-size: 11px; }
  .cycle-status .cs-fact .cf-l, .cal-dow, .cai-badge { font-size: 11px; }

  /* Two-field forms stack instead of truncating both placeholders. */
  #place-add > input:not([type="file"]), #song-add > input { flex-basis: 100%; }
  #place-add > .primary-btn, #song-add > .primary-btn { margin-left: auto; }

  /* Stories read as a shelf of books, two across. */
  .stories-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---- 🏞️ Nature photo mode: let the landscape breathe, keep every word readable ----
   Cards become frosted glass (the photo's colour glows through, detail is blurred away),
   text that sits straight on the photo gets a soft halo, and the chrome turns translucent.
   Modals and menus keep their solid surfaces. */
/* iOS-style material: blur 22px + saturate 180% (colour stays vivid, detail melts away),
   a light readability tint, a 1px specular edge on top and a soft two-layer drop shadow. */
[data-mode="dark"].photo-bg-on {
  --glass: rgba(8, 11, 26, .42); --line: rgba(255, 255, 255, .12);
  --glass-hl: rgba(255, 255, 255, .14);
  --glass-drop: 0 20px 44px -14px rgba(0, 0, 0, .6), 0 4px 14px -4px rgba(0, 0, 0, .35);
  --glass-text: 0 1px 2px rgba(0, 0, 0, .35);
}
[data-mode="light"].photo-bg-on {
  --glass: rgba(255, 255, 255, .55); --line: rgba(255, 255, 255, .5);
  --glass-hl: rgba(255, 255, 255, .6);
  --glass-drop: 0 18px 40px -14px rgba(20, 24, 40, .32), 0 4px 12px -4px rgba(20, 24, 40, .16);
  --glass-text: 0 1px 0 rgba(255, 255, 255, .45);
}
.photo-bg-on :is(.moments-heading, .day-nav, .composer, .day-card, .us-card, .bucket-item, .bucket-add, .song-item, .song-add,
  .place-card, .letter-card, .letter-form, .voice-item, .stat-card, .row-add, .vault-recorder, .empty-state, .journal-tonight,
  .diary-feed > *, .timeline > *, .story-card, .contract-mount > *, .contract-sign, .cycle-status, .cycle-checkin,
  .cycle-cal, .cycle-chart, .cycle-patterns, .cycle-form, .cycle-ai, .game-card, .movie-picker,
  .anniv-hero, .anniv-chapter, .anniv-memories > *, .mend-readiness, .mend-act, .mend-snapshot, .mend-moment, .mend-agree,
  .care-card, .rule-card, .rules-promise) {
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-hl), var(--glass-drop);
  text-shadow: var(--glass-text);
}
/* gradient-filled text is transparent, so a shadow would show *through* the letters */
.photo-bg-on :is(.brand-name, .contract-title, .ct-hm, .stat-num, .welcome-title, .anniv-title, .anniv-days,
  .anniv-chapter-num, .anniv-outro-sub, .anniv-mem-title, .cs-head h3, .asc-card h3, .cc-title, .login-card h1) { text-shadow: none; }
/* small controls on the photo: same material, lighter shadow */
.photo-bg-on :is(.feed-pager .pager-btn, .ai-scan-row .ghost-btn, .bucket-tabs .btab, .gallery-grid) {
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
}
.photo-bg-on :is(.feed-pager .pager-btn, .ai-scan-row .ghost-btn, .bucket-tabs .btab:not(.active)) {
  box-shadow: inset 0 1px 0 var(--glass-hl), 0 2px 8px -2px rgba(0, 0, 0, .2);
}
.photo-bg-on .empty-state { background: var(--glass); border-style: solid; }
.photo-bg-on :is(.feed-pager .pager-btn, .ai-scan-row .ghost-btn, .bucket-tabs .btab:not(.active)) { background: var(--glass); }
.photo-bg-on :is(.section-title, .songs-title, .section-sub, .section-kicker, .diary-heading, .mend-h, .mend-hint,
  .rules-intro p, .pager-info, .dr-text) {
  text-shadow: 0 1px 2px rgba(4, 7, 18, .6), 0 0 22px rgba(4, 7, 18, .7);
}
[data-mode="light"].photo-bg-on :is(.section-title, .songs-title, .section-sub, .section-kicker, .diary-heading, .mend-h,
  .mend-hint, .rules-intro p, .pager-info, .dr-text) {
  text-shadow: 0 1px 1px rgba(255, 255, 255, .8), 0 0 20px rgba(255, 255, 255, .95);
}
.photo-bg-on .topbar { background: color-mix(in srgb, var(--chrome) 84%, transparent); border-color: var(--line); }
@media screen and (max-width: 1099px) {
  /* (a backdrop filter on the bar would break the fixed desktop rail, so phones/tablets only) */
  .photo-bg-on .topbar { background: color-mix(in srgb, var(--chrome) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
}
@media screen and (min-width: 1100px) {
  .photo-bg-on .tabs { background: color-mix(in srgb, var(--chrome) 76%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
}