/* 1.6 shared visual tokens and independent navigation / input layers. */
:root { --text-light:#75616b; --text-muted:#75616b; --rose:#ad405e; --rose-dark:#96374f; --rose-light:#fbe4eb; --bg-card:#fff; --surface-soft:#fff0f3; --ime-space:0px; --navigation-clearance:100px; --native-font-scale:1; }
html { font-size:calc(16px * var(--native-font-scale)); overflow-y:scroll; scrollbar-gutter:stable; }
html[data-theme='dark'] { --bg:#211b20; --bg-card:#2e252d; --surface-soft:#3b2c37; --text:#f5edf1; --text-light:#cfbfc8; --text-muted:#b7a5af; --rose:#f5a2b7; --rose-dark:#ffbad0; --rose-light:#523544; --border:#654b59; --border-light:#42343d; --shadow:none; --shadow-hover:none; }
html,body { background:var(--bg); color:var(--text); }
body { font-size:1rem; }
html .app-container { padding-inline:0; padding-bottom:calc(var(--navigation-clearance) + var(--ime-space)); min-height:100vh; }
html .top-nav { background:var(--bg); border-color:var(--border); }
.top-nav a,.top-nav button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
.top-nav .notif-bell { min-width:48px; }
.page-container { padding:16px; }
.page-header { margin-bottom:12px; }
.page-header h2 { font-size:1.375rem; }
.page-header p { margin-top:2px; font-size:.875rem; }
.card,.post-card,.timeline-photo-card,.todo-item,.more-item,.stat-card,.countdown-card,.detail-pane,
.draft-discard,.section-toggle,.todo-options-toggle,.calendar-today,.detail-open,.detail-toolbar button { background:var(--bg-card); color:var(--text); border-color:var(--border); }
input,textarea,select { color:var(--text); background:var(--bg-card); font-size:1rem; }
input::placeholder,textarea::placeholder { color:var(--text-muted); opacity:1; }
button,select,input:not([type='checkbox']):not([type='radio']):not([type='color']) { min-height:48px; }
button { font-size:inherit; }
input[type='checkbox'],input[type='radio'] { accent-color:var(--rose); }
.post-content,.todo-title { font-size:1rem; }
.post-time,.timeline-photo-meta,.media-mode-help { font-size:.8125rem; }
.post-options,.btn-icon,.btn-action { min-width:48px; min-height:48px; }
/* The hit target and the visual mark have separate sizes: never stretch a circle. */
.todo-toggle-form { flex:0 0 48px; }
.todo-check,.todo-check.checked { width:48px; min-width:48px; height:48px; min-height:48px; padding:0; border:0; border-radius:12px; background:transparent; }
.todo-check-mark { width:24px; height:24px; flex:0 0 24px; border:2px solid var(--text-muted); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-card); color:#fff; font-size:14px; line-height:1; }
.todo-check.checked .todo-check-mark { background:var(--success-text); border-color:var(--success-text); color:var(--bg-card); }
.todo-check:hover { background:var(--surface-soft); }
.voice-play-button,.composer-media-remove { width:48px; min-width:48px; height:48px; min-height:48px; padding:0; display:flex; align-items:center; justify-content:center; }
.voice-play-button { flex:0 0 48px; }
.btn-primary { background:var(--rose); color:#fff; }
html[data-theme='dark'] .btn-primary { color:#29141e; }
.btn-secondary { background:var(--surface-soft); color:var(--rose-dark); }
.settings-card { padding:16px; margin-bottom:16px; border:1px solid var(--border); border-radius:16px; background:var(--bg-card); }
.settings-card h3 { font-size:1.0625rem; margin-bottom:12px; }
.setting-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,auto); gap:12px; align-items:center; padding:8px 0; }
.setting-row select { width:100%; max-width:220px; padding:8px; border:1px solid var(--border); border-radius:10px; }
.settings-card summary { min-height:48px; cursor:pointer; font-weight:600; padding:10px 0; }
.settings-card summary small { display:block; font-weight:400; color:var(--text-light); font-size:.875rem; }
.settings-card p { color:var(--text-light); overflow-wrap:anywhere; }
.more-couple-card { padding:12px; margin-bottom:16px; }
.more-avatars { display:none; }
.more-group-title { display:block; grid-column:1/-1; color:var(--text-light); font-size:1rem; margin:8px 0; }
.more-grid { gap:12px; }
.more-item { min-width:0; }
.more-item-name { font-size:1rem; }
.more-item-desc { font-size:.8125rem; }
/* Navigation is a sibling of the scrolling content, never an IME-padded descendant. */
.navigation-layer { position:fixed; top:0; left:0; width:100%; height:var(--nav-window-height,100%); z-index:101; pointer-events:none; }
html .navigation-layer .bottom-nav { position:absolute; pointer-events:auto; top:var(--nav-box-top,auto); bottom:8px; left:var(--nav-box-left,50%); right:auto; transform:none; width:var(--nav-box-width,min(calc(100% - 16px),372px)); max-width:none; height:var(--nav-box-height,64px); max-height:none; display:flex; flex-direction:row; justify-content:space-around; gap:2px; padding:4px; overflow:auto; border:1px solid var(--border); border-radius:18px; background:var(--bg-card); box-shadow:none; backdrop-filter:none; visibility:visible; }
html .navigation-layer .nav-item { flex:1 0 48px; min-width:48px; width:auto; min-height:48px; height:100%; padding:4px 2px; justify-content:center; gap:2px; color:var(--text-light); border-radius:12px; }
html .navigation-layer .nav-item.active { color:var(--rose-dark); background:var(--rose-light); }
html .navigation-layer .nav-label { font-size:.75rem; line-height:1.4; white-space:normal; }
html .navigation-layer .nav-icon svg { width:22px; height:22px; }
html[data-navigation='side'] .navigation-layer .bottom-nav { flex-direction:column; padding:3px 1px; gap:2px; }
html[data-navigation='side'] .navigation-layer .nav-item { flex:0 0 48px; width:48px; height:48px; }
html[data-nav-compact='true'] .navigation-layer .nav-item { flex-basis:var(--nav-item-min,48px); }
html[data-nav-compact='true'] .navigation-layer .bottom-nav {gap:0;}
html .navigation-layer .nav-item:focus-visible { outline-offset:-3px; }
/* Content is not clipped at the navigation edge. Scroll tail can expose an entire side rail. */
html { scroll-padding-bottom:calc(var(--navigation-clearance) + var(--ime-space)); }
.main-content :is(input,textarea,button,a) { scroll-margin-block:72px calc(var(--navigation-clearance) + var(--ime-space)); }
.post-actions,.form-row,.companion-device-row { flex-wrap:wrap; }
.post-media-item,.post-image,.timeline-photo-img { position:relative; }
html .post-media-item > img.bounded-long-image,html .post-image > img.bounded-long-image,html .timeline-photo-img > img.bounded-long-image { height:320px; max-height:320px; width:100%; object-fit:cover; object-position:top; }
.original-trigger { cursor:zoom-in; }
.original-trigger:focus-visible { outline:3px solid var(--rose-dark); outline-offset:-3px; }
.original-viewer { position:fixed; margin:auto; width:min(960px,100%); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); max-width:100%; padding:0; border:1px solid var(--border); border-radius:16px; background:var(--bg); color:var(--text); }
.original-viewer::backdrop { background:#000b; }
.original-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:8px 12px; min-height:64px; border-bottom:1px solid var(--border); }
.original-toolbar button,.original-toolbar a { padding:10px 14px; min-height:48px; background:var(--bg-card); color:var(--rose-dark); border:1px solid var(--border); border-radius:10px; }
.original-scroll { height:calc(100% - 72px); overflow:auto; }
.original-scroll img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; }
.original-error { padding:12px; }
@media(min-width:600px) and (min-height:540px) {
  .app-container,.top-nav { max-width:1280px; }
  .page-container { padding:16px 20px; }
  .feed-list,.timeline-photos { grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:16px; }
  .todo-list,.completed-todo-items,.countdown-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
  .more-grid,.wishes-grid,.badges-grid,.anniversary-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); }
  body[data-page='more'] .page-container { max-width:960px; margin-inline:auto; }
}
@media(max-width:359px) { .page-container {padding:12px;} .partner-tag {display:none;} .setting-row {grid-template-columns:1fr;} }
html[data-large-type='true'] .calendar-day-panel { grid-column:auto; grid-row:auto; }
html[data-large-type='true'] body[data-page='calendar'] .page-container { display:block; }
html[data-large-type='true'] .calendar-day-panel {display:none;}
html[data-large-type='true'] .user-name,html[data-large-type='true'] .partner-tag {display:none;}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(prefers-contrast:more) { :root { --border:currentColor; } }

:root { --success-bg:#ecfdf5; --success-text:#065f46; --success-border:#a7f3d0; --error-bg:#fef2f2; --error-text:#991b1b; --error-border:#fecaca; --info-bg:#eff6ff; --info-text:#1e40af; --info-border:#bfdbfe; --warning-bg:#fff5d9; --warning-text:#805314; --warning-border:#e6c583; }
html[data-theme='dark'] { --success-bg:#203b30; --success-text:#a5e6ca; --success-border:#4a876e; --error-bg:#4c242b; --error-text:#ffb6bf; --error-border:#a66571; --info-bg:#26354b; --info-text:#b5d0ff; --info-border:#6582af; --warning-bg:#403323; --warning-text:#edd19d; --warning-border:#8e7959; }
.cal-day.selected { color:var(--rose-dark); }
html[data-theme='dark'] .cal-day.today,html[data-theme='dark'] .pagination-link.active,html[data-theme='dark'] .medication-day-option input:checked+span { color:#29141e; }
.more-couple-card { background:var(--surface-soft); color:var(--text); }
.more-couple-info h3 { color:var(--text); }
.continuity-notice { background:var(--warning-bg); color:var(--warning-text); }
.motion-photo { background:var(--surface-soft); }
.composer-media-retry { background:var(--bg-card); color:var(--error-text); }
.appearance-shortcut {font-size:.8125rem; color:var(--rose-dark); padding-inline:8px;}
.nav-user {min-width:0; gap:6px;} .user-name {max-width:5em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.top-nav .btn-logout,.appearance-shortcut {white-space:nowrap; flex-shrink:0;}
.more-couple-card {box-shadow:none;} #appearance {scroll-margin-top:72px;}
@media(max-width:480px){.partner-tag{display:none;}.top-nav{padding-inline:12px;}.top-nav .nav-brand{gap:4px;}}
html[data-theme='dark'] .male-text {color:#96cafa!important;}
html[data-theme='dark'] .female-text {color:#ffbad0!important;}
.main-content details {scroll-margin-top:72px;}
.cal-days,.cal-weekdays {min-width:336px;} .calendar-card {overflow-x:auto;}
.cal-day {min-height:48px; height:48px;}
.motion-toggle,.motion-sound,.motion-download {min-height:48px; display:inline-flex; align-items:center;}

html:not([data-navigation]) .navigation-layer .bottom-nav {transform:translateX(-50%);}