:root {
  --canvas: #F6EDE4;
  --card: #FFFBF7;
  --ink: #2E2723;
  --muted: #6F6055;
  --muted2: #8A7566;
  --muted3: #A08A79;
  --line: #E6D6C6;
  --tagbg: #F3E1D3;
  --lowrun: #EBD3B9;
  --s0: #D9614C;
  --s1: #E68A50;
  --s2: #E3B75F;
  --s3: #93BC86;
  --s4: #5AA396;
  --tag-health: #93BC86;
  --tag-social: #E68A50;
  --tag-discipline: #E3B75F;
  --tag-general: #BCA694;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: 'DM Sans', Helvetica, sans-serif; }
h1, h2, h3, .heading { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.mono { font-family: 'DM Mono', monospace; }
a { color: #C4633F; text-decoration: none; }
a:hover { color: #8E4527; }
button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; }

.app-shell { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--card); display: flex; flex-direction: column; }

@media (min-width: 860px) {
  .app-shell { max-width: none; flex-direction: row; min-height: 100vh; }
  .sidebar { width: 220px; flex: none; border-right: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; padding: 28px 0; }
  .main-panel { flex: 1; max-width: 640px; margin: 0 auto; width: 100%; }
  .bottom-nav { display: none !important; }
}
.sidebar { display: none; }
@media (min-width: 860px) { .sidebar { display: flex; } }

.main-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.screen { flex: 1; display: flex; flex-direction: column; padding-bottom: 90px; }
@media (min-width: 860px) { .screen { padding: 24px 32px 60px; } }

.top-bar { padding: 26px 22px 12px; }
.mono-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted3); }

.pill-group { display: flex; gap: 6px; padding: 5px; background: var(--canvas); border-radius: 999px; }
.pill { flex: 1; text-align: center; padding: 9px 0; border-radius: 999px; font-size: 14px; cursor: pointer; color: var(--muted3); }
.pill.active { background: var(--card); font-weight: 700; color: var(--ink); box-shadow: 0 1px 4px rgba(150,110,80,.18); }

.chip { padding: 8px 14px; border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--canvas); color: var(--muted2); }
.chip.active { background: var(--ink); color: #FFF9F3; }

.section-card { background: var(--canvas); border-radius: 24px; padding: 14px 16px; margin: 0 22px 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.section-head-left { display: flex; align-items: center; gap: 10px; }
.tag-dot { width: 12px; height: 12px; border-radius: 999px; flex: none; }
.chev { font-size: 20px; color: #BCA694; transition: transform .18s; display: inline-block; }
.chev.closed { transform: rotate(-90deg); }

.tracker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border-radius: 18px; padding: 10px 14px; margin-top: 6px; }
.tracker-row.lowrun { box-shadow: inset 0 0 0 1.5px var(--lowrun); }
.tracker-name { font-size: 15px; font-weight: 500; white-space: nowrap; }
.tracker-cue { font-family: 'DM Mono', monospace; font-size: 10px; color: #BCA694; }
.tracker-cue.alert { color: #B4886A; }

.dots { display: flex; gap: 7px; align-items: center; }
.dot { width: 18px; height: 18px; border-radius: 999px; cursor: pointer; transition: all .16s; background: #F1E4D8; }
.dot.on { }
.dot.current { width: 22px; height: 22px; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px rgba(0,0,0,.15); }

.toggle-track { width: 56px; height: 32px; border-radius: 999px; padding: 4px; display: flex; cursor: pointer; transition: background .2s; flex: none; background: #F1E4D8; }
.toggle-track.on { background: linear-gradient(100deg, var(--s3), var(--s4)); }
.toggle-knob { width: 24px; height: 24px; border-radius: 999px; background: var(--card); box-shadow: 0 2px 5px rgba(120,90,60,.25); transition: transform .2s; }
.toggle-track.on .toggle-knob { transform: translateX(24px); }

.composite-bar-wrap { padding: 0 22px 18px; }
.composite-bar { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--s0), var(--s1), var(--s2), var(--s3), var(--s4)); opacity: .4; }
.composite-dot { position: relative; margin-top: -19px; width: 26px; height: 26px; border-radius: 999px; box-shadow: 0 0 0 4px var(--card), 0 4px 12px rgba(150,110,80,.3); transition: margin-left .25s, background .25s; }

.note-box { background: var(--canvas); border-radius: 24px; padding: 14px 16px; margin: 0 22px 12px; }
.note-save-status { font-size: 10px; color: var(--muted3); min-height: 14px; }
.note-text { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--muted); border: none; background: transparent; width: 100%; resize: vertical; font-family: inherit; min-height: 60px; }

.photo-area { margin-top: 12px; }
.photo-add-btn { height: 48px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--muted2); cursor: pointer; background: var(--card); }
.moment-photo { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; }
.photo-actions { display: flex; gap: 16px; margin-top: 9px; }
.photo-actions span:first-child { font-size: 13px; font-weight: 500; color: #C4633F; cursor: pointer; }
.photo-actions span:last-child { font-size: 13px; font-weight: 500; color: var(--muted3); cursor: pointer; }

.bottom-nav { height: 84px; border-top: 1px solid #F0E2D4; display: flex; align-items: center; padding: 0 4px 10px; background: var(--card); position: sticky; bottom: 0; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.nav-icon { width: 26px; height: 26px; border-radius: 9px; background: #EFE2D5; }
.nav-icon.active { background: linear-gradient(135deg, var(--s1), var(--s2)); }
.nav-label { font-size: 10px; color: var(--muted3); }
.nav-label.active { font-weight: 700; color: #C4633F; }

.sidebar .nav-item { flex-direction: row; justify-content: flex-start; padding: 12px 24px; gap: 12px; }
.sidebar .nav-icon { width: 22px; height: 22px; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.field label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted3); }
.field input, .field select { height: 48px; border-radius: 16px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); border: none; padding: 0 16px; font-size: 15px; color: var(--ink); font-family: inherit; }

.btn-primary { height: 56px; border-radius: 18px; background: linear-gradient(100deg, var(--s0), var(--s1) 60%, var(--s2)); color: #FFF9F3; font-size: 16px; font-weight: 500; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(190,110,70,.3); cursor: pointer; border: none; width: 100%; }
.btn-small { height: 38px; padding: 0 16px; border-radius: 999px; background: linear-gradient(100deg, var(--s0), var(--s1)); color: #FFF9F3; font-size: 14px; font-weight: 500; display: flex; align-items: center; cursor: pointer; }

.error-text { color: #B4423A; font-size: 14px; margin-top: 8px; min-height: 18px; }

/* Login "Welcome" screen -- full-height scale wash, cream card floats at
   thumb height. The wash gets a one-time subtle hue drift on load (per the
   Claude Design handoff's motion note), then holds. */
.login-wash {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 22px 26px;
  background: linear-gradient(168deg, #D9614C 0%, #E68A50 22%, #E3B75F 44%, #93BC86 72%, #5AA396 100%);
  animation: login-drift 4s ease-out forwards;
}
@keyframes login-drift { from { filter: hue-rotate(-8deg); } to { filter: hue-rotate(0deg); } }
.login-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,237,228,.30), rgba(246,237,228,.06) 40%, rgba(46,39,35,.10)); }
.login-content { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 12px; max-width: 420px; width: 100%; }
.login-ring { width: 60px; height: 60px; border-radius: 999px; background: rgba(255,249,243,.94); mask: radial-gradient(circle, transparent 56%, #000 57%); -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); }
.login-wordmark { font-family: 'Bricolage Grotesque', sans-serif; font-size: 54px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #FFF9F3; }
.login-tagline { margin: 0; max-width: 290px; font-size: 17px; line-height: 1.5; color: rgba(255,249,243,.92); }

.login-card { position: relative; width: 100%; max-width: 420px; background: var(--card); border-radius: 32px; padding: 24px 22px; box-shadow: 0 18px 44px rgba(120,70,40,.28); }
.login-dots { display: flex; align-items: center; gap: 8px; }
.login-dot { width: 26px; height: 10px; border-radius: 999px; }
.login-dots-caption { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .06em; color: var(--muted3); margin-top: 10px; }
.login-google-btn { height: 60px; width: 100%; border-radius: 20px; margin-top: 20px; background: var(--ink); display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; border: none; }
.login-google-g { width: 26px; height: 26px; border-radius: 999px; background: #FFF9F3; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--ink); }
.login-google-btn span:last-child { font-size: 17px; font-weight: 500; color: #FFF9F3; }
.login-footer { position: relative; text-align: center; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .06em; color: rgba(255,249,243,.85); margin-top: 16px; }

@media (min-width: 860px) { .login-content, .login-card, .login-footer { max-width: 420px; } }

.heatmap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.heatmap-cell { height: 38px; border-radius: 14px; cursor: pointer; transition: transform .15s; opacity: .9; }
.heatmap-cell.selected { transform: scale(1.06); box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4px rgba(46,39,35,.2); opacity: 1; }
.heatmap-cell.empty { background: transparent; cursor: default; }
.weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.weekday-label { text-align: center; font-size: 11px; color: var(--muted3); }

.selected-day-card { margin-top: 18px; background: var(--canvas); border-radius: 22px; padding: 16px; }
.selected-day-top { display: flex; align-items: center; gap: 12px; }
.blob { border-radius: 16px; flex: none; }

.list-day { display: flex; align-items: center; gap: 14px; background: var(--canvas); border-radius: 20px; padding: 13px 16px; margin-bottom: 8px; cursor: pointer; }
.list-day-blob { width: 36px; height: 36px; border-radius: 13px; flex: none; }
.list-day-title { font-size: 15px; font-weight: 500; }
.list-day-note { font-size: 13px; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trend-chart { background: var(--canvas); border-radius: 28px; padding: 20px 16px; margin: 0 22px; }
.trend-bars { height: 210px; display: flex; align-items: flex-end; gap: 3px; }
.trend-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.trend-bar { width: 100%; border-radius: 999px; opacity: .92; }
.trend-bar.exceptional { background: transparent; opacity: 1; }
.trend-axis { display: flex; justify-content: space-between; margin-top: 14px; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted3); }
.trend-scale-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted2); margin: 10px 22px 0; }
.trend-legend { margin: 10px 22px 0; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--s0), var(--s1), var(--s2), var(--s3), var(--s4)); }
.trend-caption { background: var(--canvas); border-radius: 24px; padding: 16px; font-size: 14px; line-height: 1.55; color: var(--muted); margin: 18px 22px 0; }

.tracker-card { display: flex; align-items: center; gap: 12px; background: var(--canvas); border-radius: 22px; padding: 11px 16px; margin: 0 22px 8px; }
.tracker-card.archived { opacity: .62; }
.tracker-card-name.archived { text-decoration: line-through; text-decoration-color: #C9B4A2; }
.badge { font-family: 'DM Mono', monospace; font-size: 10px; padding: 4px 8px; border-radius: 999px; background: var(--card); color: var(--muted2); }
.badge.anchor { background: #EFDCC6; }

.add-form { background: var(--canvas); border-radius: 26px; padding: 18px; margin: 0 22px 12px; display: flex; flex-direction: column; gap: 12px; }
.option-row { display: flex; gap: 8px; }
.option-btn { flex: 1; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; text-align: center; color: var(--muted2); cursor: pointer; }
.option-btn.selected { box-shadow: inset 0 0 0 2px var(--s3); font-weight: 500; color: var(--ink); }

.center-message { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; color: var(--muted2); font-size: 15px; }
.day-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 4px; }
.day-nav button { font-size: 20px; color: var(--muted3); padding: 6px 10px; }

/* ---------- Sheets & overlays (exceptional-day marking, tracker edit, profile) ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(46,39,35,.30); display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop.center { align-items: center; padding: 0 20px; }
.bottom-sheet { width: 100%; max-width: 480px; background: var(--card); border: 1px solid #E4D3C2; border-radius: 34px 34px 44px 44px; padding: 14px 22px 26px; box-shadow: 0 -14px 44px rgba(90,55,30,.28); }
.sheet-grabber { width: 44px; height: 5px; border-radius: 999px; background: #EADCCD; margin: 0 auto 16px; }

/* Today screen's marking sheet centres rather than docking to the bottom,
   matching the Claude Design handoff (floats over Today, not a nav-stack page). */
.ex-sheet { width: 100%; max-width: 440px; background: var(--card); border: 1px solid #E4D3C2; border-radius: 30px; padding: 24px 22px 22px; box-shadow: 0 26px 60px rgba(90,55,30,.32); }
.ex-options { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.ex-option { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 20px; cursor: pointer; transition: all .15s; box-shadow: inset 0 0 0 1px #F0E2D4; }
.ex-option.selected { background: var(--canvas); box-shadow: inset 0 0 0 1.5px var(--s2); }
.ex-option span { flex: 1; font-size: 15px; color: var(--ink); }
.ex-option.selected span { font-weight: 700; }
.ex-option-icon { width: 38px; height: 38px; flex: none; border-radius: 13px; background-color: #F1E4D8; background-repeat: no-repeat; background-position: center; background-size: 21px 21px; }
.ex-option.selected .ex-option-icon { background-color: var(--card); }
.ex-option-check { width: 14px; height: 14px; flex: none; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; }

/* background-image is set inline per-instance (icon, or icon+gradient
   layered together as a comma-separated list) since the icon URL always
   needs to win over a class-level background-image -- see app.js's
   diamondIconUrl() call sites, which include the gradient layer for the
   marked state directly rather than relying on this class for it. */
.ex-btn { width: 38px; height: 38px; border-radius: 999px; flex: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .18s; background-color: var(--canvas); background-repeat: no-repeat; background-position: center; background-size: 17px 17px; box-shadow: inset 0 0 0 1px var(--line); }
.ex-btn.marked { box-shadow: 0 6px 14px rgba(190,130,80,.28); }

.ex-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; border-radius: 999px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.ex-chip span { font-size: 13px; font-weight: 500; color: var(--muted); }
.ex-chip-icon { width: 22px; height: 22px; flex: none; border-radius: 8px; background-color: var(--card); background-repeat: no-repeat; background-position: center; background-size: 15px 15px; }
.ex-popover { position: absolute; top: 34px; left: 22px; width: 264px; background: var(--card); border: 1px solid #E4D3C2; border-radius: 20px; padding: 14px 16px; box-shadow: 0 16px 36px rgba(90,55,30,.22); z-index: 5; }
.ex-popover > div:first-child { font-size: 13px; line-height: 1.5; color: var(--muted); }
.ex-popover-actions { display: flex; gap: 16px; margin-top: 11px; }
.ex-popover-actions span:first-child { font-size: 13px; font-weight: 500; color: #C4633F; cursor: pointer; }
.ex-popover-actions span:last-child { font-size: 13px; font-weight: 500; color: var(--muted3); cursor: pointer; }

.tracker-row.resting { background: #FBF3EA; box-shadow: inset 0 0 0 1px #EFDFCF; }
.tracker-row.resting .tracker-name { color: var(--muted); }
.dots.resting, .toggle-track.resting { opacity: .55; }

/* ---------- History: retroactive exceptional-day marking ---------- */
.ex-selected-badge { margin-top: 14px; background: var(--card); border-radius: 18px; padding: 13px 15px; display: flex; align-items: center; gap: 11px; }
.ex-selected-icon { width: 34px; height: 34px; flex: none; border-radius: 12px; background-color: var(--canvas); background-repeat: no-repeat; background-position: center; background-size: 19px 19px; }
.ex-selected-badge span { font-size: 13px; font-weight: 500; color: var(--muted3); cursor: pointer; }
.mark-exceptional-btn { margin-top: 14px; height: 48px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 500; color: #C4633F; }
.ex-outline-diamond { width: 16px; height: 16px; flex: none; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; }
.ex-hist-picker { display: flex; gap: 8px; }
.ex-hist-picker-chip { flex: 1; height: 52px; border-radius: 18px; cursor: pointer; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; }
.ex-hist-picker-icon { width: 21px; height: 21px; background-repeat: no-repeat; background-position: center; background-size: 21px 21px; }

.list-day-mark-icon { width: 12px; height: 12px; flex: none; background-repeat: no-repeat; background-position: center; background-size: 12px 12px; background-color: var(--canvas); border-radius: 6px; padding: 4px; background-origin: content-box; }

/* ---------- Profile sheet & static (non-editable) tracker-edit tiles ---------- */
.avatar-btn { width: 38px; height: 38px; border-radius: 999px; flex: none; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--muted2); cursor: pointer; }

.profile-row { background: var(--canvas); border-radius: 18px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.profile-save { font-size: 13px; font-weight: 500; color: #C4633F; cursor: pointer; padding-left: 10px; }
.profile-action { border-radius: 18px; padding: 12px 16px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 500; cursor: pointer; }
.profile-action.danger { box-shadow: none; color: #B4886A; }

.tile-static { flex: 1; padding: 11px 12px 12px; border-radius: 16px; background: var(--card); text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.tile-static.plain { padding: 12px; font-size: 14px; color: var(--muted2); }
.tile-static.on { box-shadow: inset 0 0 0 2px var(--s1); }
.tile-static.plain.on { color: var(--ink); font-weight: 500; }
.tile-label { font-size: 14px; font-weight: 500; }
.tile-cap { font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.45; color: var(--muted3); margin-top: 5px; }

.tile-option { flex: 1; padding: 11px 12px 12px; border-radius: 16px; background: var(--card); text-align: center; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.tile-option.selected { box-shadow: inset 0 0 0 2px var(--s1); }
.day-nav button:disabled { opacity: .3; cursor: default; }

/* ---------- Edit-window lock (days older than today minus EDIT_WINDOW_DAYS) ---------- */
.dot.locked, .toggle-track.locked, .ex-btn.locked { cursor: default; opacity: .55; }
.note-text.locked { cursor: default; opacity: .7; }

/* ---------- Moments timeline ---------- */
.moments-subtitle { font-size: 15px; color: var(--muted2); margin-top: 6px; }
.moments-list { padding: 10px 22px 4px; }
.moments-month-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted3); padding: 2px 0 12px 40px; }

.moment-row { display: flex; gap: 14px; }
.moment-spine-col { width: 26px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.moment-dot { width: 20px; height: 20px; border-radius: 999px; flex: none; background-repeat: no-repeat; }
.moment-line { width: 2px; flex: 1; min-height: 20px; border-radius: 999px; }
.moment-body { flex: 1; min-width: 0; padding-bottom: 20px; cursor: pointer; }
.moment-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.moment-date { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.moment-word { font-size: 10px; letter-spacing: .06em; color: var(--muted3); }
.moment-mark-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border-radius: 999px; background: var(--canvas); }
.moment-mark-pill-icon { width: 13px; height: 13px; flex: none; background-repeat: no-repeat; background-position: center; background-size: 13px 13px; }
.moment-mark-pill span { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted2); }
.moment-note { margin-top: 7px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.moment-note.empty { font-size: 11px; color: #C9B4A2; }
.moment-photo-frame { margin-top: 12px; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--canvas); }
.moment-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.moments-empty { padding: 24px 22px 0; display: flex; flex-direction: column; justify-content: center; min-height: 360px; }
.moments-empty-title { font-size: 15px; font-weight: 700; color: #C9B4A2; }
.moments-empty-copy { margin-top: 7px; font-size: 11px; line-height: 1.6; color: #C9B4A2; }
.moments-empty-photo { margin-top: 12px; height: 150px; border-radius: 22px; background: repeating-linear-gradient(135deg, var(--canvas) 0 9px, #F1E4D8 9px 18px); box-shadow: inset 0 0 0 1px #EFE0D2; display: flex; align-items: center; justify-content: center; }
.moments-empty-photo span { font-size: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(255,251,247,.92); color: var(--muted3); }

.moments-sentinel { height: 30px; display: flex; align-items: center; justify-content: center; }
.moments-loading-text { font-size: 11px; color: var(--muted3); }

/* Bottom sheet opened by tapping a moment row -- reuses .sheet-backdrop /
   .bottom-sheet / .sheet-grabber from the shared sheets block above. */
.moment-sheet-photo { height: 216px; border-radius: 22px; overflow: hidden; background: var(--canvas); }
.moment-sheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.moment-sheet-head { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.moment-sheet-date { font-size: 23px; }
.moment-sheet-sub { font-size: 13px; color: var(--muted2); margin-top: 2px; }
.moment-sheet-badge { margin-top: 14px; background: var(--canvas); border-radius: 18px; padding: 12px 15px; display: flex; align-items: center; gap: 11px; }
.moment-sheet-badge-icon { width: 34px; height: 34px; flex: none; border-radius: 12px; background-color: var(--card); background-repeat: no-repeat; background-position: center; background-size: 19px 19px; }
.moment-sheet-note { margin-top: 14px; font-size: 15px; line-height: 1.55; color: #4A4038; }
.moment-sheet-actions { display: flex; gap: 8px; margin-top: 18px; }
.moment-sheet-open-btn { flex: 1; height: 50px; border-radius: 18px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: #C4633F; cursor: pointer; }
.moment-sheet-close-btn { width: 50px; height: 50px; border-radius: 18px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; color: var(--muted2); }