/* Shared typography and surfaces for all pages and their dialogs. */
:root {
  --bg: #111318;
  --panel: #1a1d24;
  --panel2: #20242d;
  --ink: #15181f;
  --line: #303641;
  --line2: #414957;
  --text: #f1f3f7;
  --dim: #b5becd;
  --faint: #9aa6b8;
  --sun: #f3cc79;
  --sun2: #e9bd62;
  --accent-ink: #f3cc79;
  --teal: #80cbd9;
  --orange: #edb478;
  --green: #86cba9;
  --red: #f39a9f;
  --r: 20px;
  --accent-soft: #f3cc7914;
  --shadow: 0 4px 18px #0000000a;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
}
:root[data-theme=light] {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel2: #f1f4f8;
  --ink: #f8fafc;
  --line: #e0e6ee;
  --line2: #cbd4e1;
  --text: #1c2637;
  --dim: #53637a;
  --faint: #62728a;
  --sun: #f3cc79;
  --sun2: #edc268;
  --accent-ink: #805612;
  --teal: #217485;
  --orange: #955615;
  --green: #237348;
  --red: #b83e49;
  --accent-soft: #edc26826;
  --shadow: 0 4px 18px #23324a05;
}
:root[data-accent=ice] { --sun: #9bd6e6; --sun2: #83c4d7; --accent-ink: #9bd6e6; --accent-soft: #9bd6e614; }
:root[data-accent=ice][data-theme=light] { --accent-ink: #246579; --accent-soft: #83c4d726; }
:root[data-accent=amber] { --sun: #efba84; --sun2: #dfa36b; --accent-ink: #efba84; --accent-soft: #efba8414; }
:root[data-accent=amber][data-theme=light] { --accent-ink: #875022; --accent-soft: #dfa36b26; }
body { line-height: 1.6; }
button, input, select, textarea { font-family: var(--font-ui); letter-spacing: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
p { line-height: 1.7; }
.app-shell { grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; padding: 30px 18px 20px; gap: 32px; overflow-y: auto; }
.brand { gap: 11px; padding-inline: 6px; }
.brand-mark { border-radius: 13px; font-weight: 600; letter-spacing: -.03em; background: var(--sun); }
.brand-name { font-size: 18px; font-weight: 600; letter-spacing: .08em; }
.brand-sub { font-size: 11px; letter-spacing: .02em; margin-top: 2px; }
.nav { gap: 8px; }
.nav button { min-height: 54px; padding: 8px 12px; border-radius: 13px; }
.nav button .nav-text { gap: 3px; line-height: 1.35; }
.nav button .nav-text b { font-size: 14px; font-weight: 500; }
.nav button .nav-text i { font-size: 10px; letter-spacing: .08em; }
.nav svg { width: 20px; height: 20px; }
.sync-chip { padding: 13px; border-radius: 14px; background: transparent; }
.main { padding: 32px clamp(20px, 3vw, 44px) 56px; }
.page, .grid, .grid-12 { gap: 20px; }
.page-head { gap: 20px; margin-bottom: 24px; align-items: center; }
.page-head h1 { font-size: 32px; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.page-head .sub { font-size: 14px; line-height: 1.65; margin-top: 8px; max-width: 620px; }
.page-head .head-chips { gap: 8px; }
.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .12em; margin-bottom: 5px; }
.card, :root[data-theme=light] .card { background: var(--panel); padding: 24px; border-radius: var(--r); }
.card.compact { padding: 18px; }
.card-header { gap: 16px; margin-bottom: 18px; }
.card-header > div { min-width: 0; }
.card-header > .button, .card-header > .row { flex-shrink: 0; }
.card h3.card-title, .card-header h2, .card-header h3 { font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0; margin-bottom: 10px; text-transform: none; flex-wrap: wrap; }
.card-header .en, .card h3 .en { font-size: 10px; font-weight: 500; letter-spacing: .1em; }
.card-header p.dim { font-size: 13px !important; line-height: 1.7; margin: 0 !important; }
.button, .btn { min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 14px; line-height: 1.45; font-weight: 500; background: var(--panel2); border-color: var(--line); box-shadow: none; }
.button.primary { background: var(--sun); color: #30240b; box-shadow: none; border-color: transparent; font-weight: 600; }
.button.ghost { border-color: var(--line2); }
.button.small, .btn-sm { min-height: 38px; font-size: 13px; padding: 8px 12px; border-radius: 10px; }
.button:hover:not(:disabled), .btn:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary:hover:not(:disabled) { background: var(--sun2); }
.button.primary:disabled { opacity: 1; background: var(--panel2); color: var(--faint); border-color: var(--line); }
.icon-button { border-radius: 12px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.chip, :root[data-theme=light] .chip { background: var(--panel2); font-size: 12px; line-height: 1.5; padding: 6px 10px; border-color: transparent; }
.chip b { font-size: 12px; font-weight: 600; }
.pill { font-size: 12px; padding: 6px 11px; line-height: 1.5; background: transparent; }
.badge { font-weight: 500; font-size: 12px; line-height: 1.5; padding: 3px 9px; }
.live-clock, .meal-time, .metric-value, .tile .val, .wb-item .val, .day-pill-date, .time-hero-number, .time-category strong { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.035em; }
.live-clock { line-height: 1.15; }
.day-glance { gap: 12px; }
.day-glance > * { border-radius: 18px; padding: 18px; gap: 12px; }
.day-glance small { font-size: 12px; margin-bottom: 4px; }
.day-glance strong { font-size: 16px; font-weight: 500; line-height: 1.6; }
.day-glance em { font-size: 12px; line-height: 1.7; }
.glance-icon { font-size: 24px; }
.today-page .shift-card { border-radius: 22px; background: var(--panel); }
.shift-card::after { display: none; }
.personal-hero { padding: 2px 0 22px; gap: 14px; align-items: center; }
.personal-hero > div:first-child { min-width: 0; }
.hero-caption { font-size: 13px; letter-spacing: 0; }
.personal-hero .live-clock { font-size: clamp(38px, 4vw, 56px); margin: 8px 0; letter-spacing: -.04em; }
.personal-hero h2 { font-weight: 500; font-size: 18px; line-height: 1.6; margin: 10px 0 0; }
.day-orbit { width: 112px; height: 112px; box-shadow: none; }
.day-orbit span { font-size: 32px; }
.day-orbit small { font-size: 9px; letter-spacing: .08em; }
.shift-btns { gap: 10px; margin-bottom: 20px; }
.shift-meta { font-size: 13px; line-height: 1.7; margin-bottom: 14px; }
.today-page .route { margin: 0 0 24px; gap: 8px; }
.today-page .route-dot { width: 38px; height: 38px; font-size: 20px; border-width: 1px; }
.route-node.done .route-dot { background: color-mix(in srgb, var(--green) 12%, var(--panel)); }
.route-node.current .route-dot { background: var(--sun); box-shadow: 0 0 0 3px var(--accent-soft); }
.today-page .route-label { font-size: 12px; min-height: 2.8em; line-height: 1.4; }
.route-time { font-size: 12px; line-height: 1.5; }
.today-grid { gap: 12px; }
.tile { min-height: 112px; gap: 8px; }
.tile .lab, .metric-label, .wb-item .lab { font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.6; }
.tile .val { font-size: 30px; line-height: 1.35; }
.time-map-track-name { font-size: 12px; letter-spacing: 0; }
.time-map-block { font-weight: 500; }
.time-map-canvas { height: 38px; }
.time-map-ticks { font-size: 11px; line-height: 1.5; }
.time-map-commute-details > span { font-size: 12px; line-height: 1.6; }
.day-pill { border-radius: 12px; background: transparent; }
.day-pill.selected { background: var(--accent-soft); border-color: var(--sun); box-shadow: none; }
.day-pill-date { font-size: 20px; }
.day-pill-day, .day-pill-note { font-size: 12px; }
.list-item { border-radius: 14px; padding: 16px; background: var(--panel2); }
.list-item-title, .timeline-title { font-weight: 500; font-size: 15px; line-height: 1.6; }
.list-item-meta, .timeline-meta { font-size: 13px; line-height: 1.7; }
.empty { border: 0; border-radius: 14px; padding: 30px 20px; background: var(--panel2); font-size: 14px; line-height: 1.7; }
.empty .list-item-title { margin-bottom: 6px; font-weight: 500; }
.empty p { margin-bottom: 18px; }
.empty svg { display: block; margin: 0 auto 14px; }
.empty .button svg { display: inline; margin: 0; }
.form, .form-grid { gap: 18px; }
.field { gap: 8px; }
.field label { font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: 0; }
.field input, .field select, .field textarea, :root[data-theme=light] .field input, :root[data-theme=light] .field select, :root[data-theme=light] .field textarea { min-height: 46px; border-radius: 11px; padding: 11px 12px; background: var(--ink); font-size: 15px; line-height: 1.5; }
.field select, :root[data-theme=light] .field select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238191a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); opacity: 1; }
.checkbox { font-size: 14px; line-height: 1.6; }
.modal { border-radius: 24px; padding: 26px; box-shadow: 0 24px 80px #00000040; }
.modal-header { margin-bottom: 24px; }
.modal-header h2 { font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; }
.modal-header p { font-size: 13px !important; line-height: 1.7; margin-top: 6px !important; }
.modal-actions { padding-top: 18px; margin-top: 20px; }
.recording-field legend, .sleep-note > span { font-size: 14px; font-weight: 500; }
.recording-control-label, .sleep-date { font-size: 12px; line-height: 1.6; }
.sleep-date input { width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--ink); color: var(--text); font-size: 16px; line-height: 1.5; }
.sleep-date input:focus { outline: 0; border-color: var(--sun); box-shadow: 0 0 0 3px var(--accent-soft); }
.recording-date-time { gap: 10px; }
.sleep-editor, .sleep-time-pair { gap: 20px; }
.sleep-duration { border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.sleep-duration strong { font-size: 22px; font-weight: 600; }
.sleep-date-help, .sleep-extra summary { font-size: 13px; line-height: 1.7; }
.sleep-intro, .sleep-empty { font-size: 14px; line-height: 1.7; }
.sleep-entry { padding: 18px; background: var(--panel2); }
.sleep-entry-main strong { font-size: 15px; font-weight: 500; line-height: 1.6; }
.sleep-entry-main p, .sleep-entry-main small { font-size: 13px; }
.notice, .error-box { padding: 14px 16px; border-radius: 14px; line-height: 1.7; }
.table-wrap { border-radius: 12px; }
th { font-size: 12px; font-weight: 500; letter-spacing: 0; padding-block: 14px; background: var(--panel2); }
td { font-size: 14px; padding-block: 16px; font-variant-numeric: tabular-nums; }
.metric { min-height: 132px; gap: 10px; }
.metric-value { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.4; }
.metric-note { font-size: 12px; line-height: 1.6; }
.stats-chart { display: flex; align-items: flex-end; gap: 8px; height: 210px; padding: 8px 0 4px; overflow-x: auto; }
.stats-chart-day { flex: 1 0 30px; min-width: 0; display: grid; justify-items: center; gap: 10px; }
.stats-chart-day > span { font-size: 12px; line-height: 1.5; }
.conflict-options { display: grid; gap: 12px; }
.conflict-payload { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.time-studio { font-size: 15px; padding-top: 0; }
.time-heading { margin-top: 0; margin-bottom: 24px; }
.time-heading h1 { font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.4; margin-top: 5px; }
.time-heading p { font-size: 14px; }
.time-kicker { font-size: 11px; font-weight: 500; letter-spacing: .12em; }
.time-zone { font-size: 12px; line-height: 1.6; }
.time-hero { border-radius: 22px; padding: 34px; background: #1d3435; box-shadow: none; }
.time-hero h2 { font-size: 16px; font-weight: 400; }
.time-hero-number { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.45; }
.time-hero-copy > p { font-size: 14px; line-height: 1.8; }
.time-hero-foot { font-size: 13px; line-height: 1.7; }
.time-hero-aside strong { font-weight: 500; font-size: 24px; }
.time-estimate { font-size: 13px; padding-block: 16px; }
.time-panel { border-radius: 20px; }
.time-overview, .sleep-panel { padding: 28px; }
.time-section-heading h2 { font-size: 20px; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; }
.time-day-label { font-size: 12px; line-height: 1.6; }
.time-category h3 { font-size: 15px; font-weight: 500; }
.time-category p { font-size: 13px; }
.time-category strong { font-size: 20px; font-weight: 500; }
.time-donut strong { font-size: 22px; font-weight: 500; }
.time-note-card h2 { font-size: 16px; font-weight: 500; line-height: 1.6; }
.time-note-card p { font-size: 14px; line-height: 1.8; }
.time-method { font-size: 14px; }
.time-method summary { min-height: 58px; }
.toast { font-size: 14px; line-height: 1.6; border-radius: 14px; }
@media (max-width: 1100px) {
  .time-hero { padding: 28px; }
}
@media (max-width: 880px) {
  .app-shell { display: block; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .main { padding: 20px 16px 32px; }
  .mobile-brand { gap: 10px; margin: 0 2px 24px; }
  .mobile-brand .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .mobile-brand .brand-name { font-size: 16px; letter-spacing: .08em; }
  .bottom-nav { left: 12px; right: 12px; border-radius: 20px; padding: 7px 4px; background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 6px 30px #00000018; }
  .bottom-nav button { min-height: 56px; border-radius: 13px; gap: 4px; align-content: center; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
  .bottom-nav svg { width: 21px; height: 21px; }
  .bottom-nav button.active { font-weight: 500; }
}
@media (max-width: 620px) {
  .page, .grid, .grid-12 { gap: 16px; }
  .page-head { gap: 16px; margin-bottom: 20px; align-items: flex-start; }
  .page-head h1, .today-page .page-head h1 { font-size: 28px; }
  .page-head .sub { font-size: 13px; margin-top: 6px; }
  .page-head .head-chips { gap: 8px; }
  .page-head .head-chips > .button { flex: 1 1 auto; }
  .card, :root[data-theme=light] .card { padding: 20px; border-radius: 20px; }
  .card.compact { padding: 16px; }
  .card-header { gap: 10px; margin-bottom: 16px; }
  .card-header:has(> .row) { flex-direction: column; align-items: stretch; }
  .card-header .en, .card h3 .en { font-size: 9px; letter-spacing: .07em; }
  .day-glance { gap: 10px; }
  .today-page .day-glance > * { padding: 14px 12px; gap: 9px; }
  .day-glance strong { font-size: 14px; }
  .day-glance small { font-size: 12px; }
  .glance-icon { font-size: 22px; }
  .personal-hero { padding-bottom: 18px; align-items: flex-start; }
  .personal-hero .live-clock { font-size: 42px; }
  .personal-hero h2 { font-size: 17px; line-height: 1.6; }
  .day-orbit { width: 80px; height: 80px; margin-top: 14px; }
  .day-orbit span { font-size: 25px; }
  .day-orbit small { font-size: 8px; }
  .today-page .shift-card > .shift-btns { gap: 8px; margin-bottom: 24px; }
  .today-page .shift-btns .button { min-height: 46px; flex: 1 1 auto; padding-inline: 12px; }
  .today-page .route { gap: 16px 6px; margin-bottom: 20px; padding-block: 4px; }
  .today-page .route-dot { width: 36px; height: 36px; font-size: 19px; }
  .today-page .route-label { font-size: 11px; }
  .route-time { font-size: 12px; }
  .today-grid .tile { padding: 16px; min-height: 108px; }
  .tile .val { font-size: 25px; line-height: 1.5; }
  .today-week-strip .day-pill, .schedule-week-strip .day-pill { min-height: 74px; padding: 8px 2px; }
  .today-week-strip .day-pill-day, .schedule-week-strip .day-pill-day { font-size: 11px; }
  .today-week-strip .day-pill-date, .schedule-week-strip .day-pill-date { font-size: 18px; }
  .schedule-week-strip .day-pill-note { font-size: 11px; }
  .stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stats-summary .metric { min-height: 144px; padding: 16px; gap: 10px; }
  .metric-label { font-size: 12px; }
  .metric-value { font-size: 23px; line-height: 1.45; }
  .metric-note { font-size: 12px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .modal { padding: 22px 20px; border-radius: 22px; }
  .modal-header h2 { font-size: 21px; }
  .sleep-modal .modal-header { margin-bottom: 22px; }
  .sleep-modal .modal-actions .button { min-height: 46px; }
  .sleep-date-help { margin-top: -8px; }
  .time-heading { gap: 12px; margin-bottom: 24px; }
  .time-heading h1 { font-size: 28px; }
  .time-zone { font-size: 12px; }
  .time-hero { padding: 24px; gap: 22px; border-radius: 20px; }
  .time-hero-number { font-size: 34px; }
  .time-hero-copy > p { font-size: 13px; }
  .time-hero-aside strong { font-size: 20px; }
  .time-overview, .sleep-panel { padding: 22px 20px; }
  .time-section-heading { gap: 12px; }
  .time-section-heading h2 { font-size: 19px; }
  .sleep-date { width: 100%; }
  .sleep-date input { min-height: 44px; }
  .time-category { gap: 10px; padding-block: 18px; }
  .time-category h3 { font-size: 14px; }
  .time-category p { font-size: 12px; }
  .time-category strong { font-size: 18px; margin-left: auto; }
  .time-note-card { padding: 20px; }
  .time-note-card p { font-size: 13px; }
  .time-track-labels { font-size: 11px; }
}
@media (max-width: 360px) {
  .main { padding-inline: 12px; }
  .card, :root[data-theme=light] .card { padding: 16px; }
  .bottom-nav { left: 8px; right: 8px; }
  .bottom-nav button { font-size: 10px; }
  .day-glance > * { flex-direction: column; align-items: flex-start; }
  .day-glance > :last-child { flex-direction: row; }
  .stats-summary .metric { padding: 13px; }
  .metric-value { font-size: 21px; }
  .time-hero-number { font-size: 30px; }
  .time-hero-aside { grid-template-columns: 1fr; }
  .time-hero-aside strong { grid-column: 1; grid-row: auto; }
  .time-category strong { white-space: normal; }
}

/* Each secondary form starts with the task and reveals optional details on demand. */
.event-modal, .compact-form-modal { max-width: 480px; }
.event-context { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.field > span { font-size: 13px; font-weight: 500; line-height: 1.6; }
.form-extra { border-top: 1px solid var(--line); padding-top: 12px; }
.form-extra > summary { min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--dim); font-size: 13px; line-height: 1.6; }
.form-extra > summary::before { content: '›'; font-size: 20px; transform-origin: center; }
.form-extra[open] > summary::before { transform: rotate(90deg); }
.form-extra > summary::-webkit-details-marker { display: none; }
.form-extra > .form { margin-top: 14px; }
.form-extra:focus-within { border-color: var(--sun); }
.event-modal .modal-actions .primary, .compact-form-modal .modal-actions .primary { flex: 1; }
.event-form > .notice .button { margin-top: 10px; }
.compact-form-modal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-form-modal > .modal-body > .field + .form { margin-top: 20px; }

/* Income stays a short mobile form and a compact list. */
.earnings-session { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.earnings-session:last-of-type { border-bottom:0; }
.earnings-session > div:first-child { min-width:0; overflow-wrap:anywhere; }
.earnings-session p { margin:6px 0 0; }
.earnings-session > button { flex-shrink:0; }
@media(max-width:480px) {
 .earnings-session { flex-wrap:wrap; gap:12px; }
 .earnings-session strong { font-size:14px; }
}

/* Meal photos stay optional and bounded on narrow screens. */
.meal-photo-field { display:grid; gap:12px; min-width:0; }
.meal-photo-label { font-size:14px; font-weight:500; }
.meal-photo-preview { display:block; width:100%; height:auto; max-height:240px; object-fit:contain; border-radius:14px; background:var(--bg); }
.meal-photo-thumb { display:block; flex:0 0 64px; width:64px; height:64px; padding:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg); cursor:pointer; }
.meal-photo-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.meal-card-copy { min-width:0; flex:1; overflow-wrap:anywhere; }
.meal-photo-full { display:block; width:100%; max-height:65vh; height:auto; object-fit:contain; border-radius:12px; }
@media(max-width:480px) {
 .meal-card:has(.meal-photo-thumb) > .button { grid-column:2; justify-self:start; }
}

/* Install entry stays in normal flow above page content, clear of mobile navigation. */
.pwa-install { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 24px; padding:14px 18px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.pwa-install strong { font-size:14px; }
.pwa-install .dim { font-size:12px; margin-top:4px; }
.pwa-install p { flex-basis:100%; margin:0; font-size:13px; }
.pwa-guide p { line-height:1.8; }

/* Sleep journal: actual records first, plans remain secondary. */
.sleep-studio { max-width:1180px; margin:0 auto; gap:20px; --sleep-lilac:#c7b9fa; --sleep-muted:#a899cf; }
:root[data-theme=light] .sleep-studio { --sleep-lilac:#6750a1; --sleep-muted:#806caa; }
.sleep-studio .page-head { margin-bottom:0; }
.sleep-day-nav { display:flex; gap:10px; align-items:flex-end; }
.sleep-day-nav .sleep-date { width:200px; }
.sleep-day-nav .sleep-date>span { display:block; margin-bottom:5px; }
.sleep-day-nav .button { min-width:44px; min-height:46px; }
.sleep-hero { display:grid; grid-template-columns:minmax(0,1fr) 180px; align-items:center; gap:24px; padding:32px; border:1px solid #8572b54d; border-radius:26px; color:#f8f5ff; background:radial-gradient(ellipse at 100% 0%,#53416a88,transparent 70%),#252133; }
:root[data-theme=light] .sleep-hero { color:#302743; background:radial-gradient(ellipse at 100% 0%,#e6ddfc,transparent 70%),#f2edf9; border-color:#ddd3ee; }
.sleep-hero-label { font-size:13px; color:#d2c3ec; }
:root[data-theme=light] .sleep-hero-label { color:#705a92; }
.sleep-hero-duration { font-size:clamp(30px,4.2vw,52px); margin:8px 0 12px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.025em; }
.sleep-hero-copy>p { font-size:14px; margin:0 0 22px; color:#d2c9e1; }
:root[data-theme=light] .sleep-hero-copy>p { color:#6d607d; }
.sleep-actions { display:flex; gap:10px; flex-wrap:wrap; }
.sleep-hero .button.ghost { border-color:#8d7caa66; color:inherit; background:transparent; }
.sleep-hero .sleep-ongoing-note { margin:16px 0 0; font-size:12px; }
.sleep-night-art { position:relative; height:160px; display:grid; place-items:center; color:#e0cfb0; }
:root[data-theme=light] .sleep-night-art { color:#a88a51; }
.sleep-night-art::before { content:""; position:absolute; width:150px; height:150px; border:1px solid #aa97cc33; border-radius:50%; }
.sleep-star { position:absolute; font-size:24px; color:#c8b6e2; }
.sleep-star.one { top:14px; right:25px; }.sleep-star.two { top:60px; left:5px; }.sleep-star.three { bottom:7px; right:35px; font-size:19px; }
.sleep-calendar-note { font-size:12px; color:var(--dim); margin:-7px 0 0; line-height:1.8; }
.sleep-dashboard { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start; }
.sleep-actual-log { grid-column:1; grid-row:1; }
.sleep-plan-panel { grid-column:2; grid-row:1 / span 2; }
.sleep-week-panel { grid-column:1; grid-row:2; }
.sleep-studio .sleep-entry { display:block; border:1px solid var(--line); border-radius:16px; margin-top:14px; padding:18px; background:var(--panel2); }
.sleep-entry-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sleep-status { color:var(--sleep-lilac); font-size:12px; }
.sleep-entry-duration { display:block; font-size:24px; font-weight:600; line-height:1.3; margin-bottom:20px; font-variant-numeric:tabular-nums; }
.sleep-entry-times { display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); gap:8px; align-items:center; }
.sleep-entry-times>div { display:flex; flex-direction:column; gap:2px; }
.sleep-entry-times small,.sleep-entry-times span { font-size:12px; color:var(--dim); }
.sleep-entry-times strong { font-size:23px; font-weight:500; font-variant-numeric:tabular-nums; }
.sleep-entry-times .sleep-time-arrow { text-align:center; }
.sleep-entry-note { font-size:13px; margin:16px 0 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.sleep-plan-reference { border-top:1px solid var(--line); margin-top:16px; padding-top:12px; font-size:12px; color:var(--dim); }
.sleep-plan-reference summary { cursor:pointer; }
.sleep-plan-reference p { margin-bottom:0; }
.sleep-plan-copy,.sleep-plan-empty { color:var(--dim); font-size:13px; margin:0; }
.sleep-plan-panel .card-header { flex-wrap:wrap; }
.sleep-plan-panel .card-header .button { font-size:12px; }
.sleep-plan-entry>strong { display:block; font-size:20px; font-weight:500; margin-top:5px; }
.sleep-plan-entry>p { font-size:12px; line-height:1.8; }
.sleep-empty-state { color:var(--dim); padding:16px 0 8px; }
.sleep-empty-state svg { color:var(--sleep-lilac); }
.sleep-empty-state h3 { color:var(--text); font-size:15px; margin:10px 0 6px; }
.sleep-empty-state p { font-size:13px; margin:0; }
.sleep-week-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 0 20px; }
.sleep-week-stats span { display:block; color:var(--dim); font-size:12px; }
.sleep-week-stats strong { display:block; font-size:20px; font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums; }
.sleep-week-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.sleep-chart-day { min-width:0; padding:6px 4px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--dim); display:flex; flex-direction:column; align-items:center; gap:8px; font:inherit; cursor:pointer; }
.sleep-chart-day.selected { border-color:var(--line); background:var(--panel2); color:var(--text); }
.sleep-chart-value,.sleep-chart-date { font-size:11px; font-variant-numeric:tabular-nums; }
.sleep-chart-column { display:flex; align-items:flex-end; justify-content:center; height:106px; width:100%; }
.sleep-chart-bar { display:block; width:18px; max-width:100%; border-radius:5px 5px 2px 2px; background:var(--sleep-lilac); }
.sleep-chart-missing { display:block; width:14px; height:2px; background:var(--line2); border-radius:2px; }
.sleep-chart-note,.sleep-method { font-size:12px; color:var(--dim); line-height:1.8; }
.sleep-chart-note { margin:16px 0 0; }
.sleep-method summary { cursor:pointer; }
.sleep-method p { max-width:800px; }
@media(max-width:900px) {
  .bottom-nav { grid-template-columns:repeat(7,minmax(0,1fr)); left:5px; right:5px; padding-inline:0; }
  .bottom-nav button { min-width:0; padding-inline:1px; font-size:11px; }
  .bottom-nav button span { white-space:nowrap; }
}
@media(max-width:620px) {
  .sleep-studio { gap:16px; }
  .sleep-day-nav { gap:6px; }
  .sleep-day-nav .sleep-date { width:auto; min-width:0; flex:1; }
  .sleep-day-nav .button { min-width:42px; min-height:46px; padding-inline:10px; }
  .sleep-day-nav .sleep-date input { min-height:46px; }
  .sleep-hero { grid-template-columns:minmax(0,1fr); padding:24px 20px; gap:0; position:relative; }
  .sleep-hero-label { padding-right:80px; display:block; }
  .sleep-hero-duration { font-size:32px; margin-top:14px; padding-right:0; }
  .sleep-hero-copy>p { font-size:12px; margin-bottom:20px; }
  .sleep-night-art { position:absolute; right:15px; top:16px; width:64px; height:55px; }
  .sleep-night-art svg { width:38px; height:38px; }
  .sleep-night-art::before { width:52px; height:52px; }
  .sleep-star.one { font-size:14px; top:0; right:2px; }.sleep-star.two { display:none; }.sleep-star.three { font-size:12px; bottom:0; right:4px; }
  .sleep-dashboard { grid-template-columns:minmax(0,1fr); gap:16px; }
  .sleep-actual-log,.sleep-week-panel,.sleep-plan-panel { grid-column:1; grid-row:auto; }
  .sleep-actual-log { order:0; }.sleep-week-panel { order:1; }.sleep-plan-panel { order:2; }
  .sleep-studio .card { padding:20px 18px; }
  .sleep-studio .sleep-entry { padding:16px; }
  .sleep-week-stats strong { font-size:18px; }
}

/* Workdays follow the shift's start date; calendar weekdays stay visible. */
.recording-weekday,.sleep-workday-affiliation small { display:block; font-size:12px; color:var(--dim); margin-top:5px; line-height:1.6; }
.sleep-selected-day { color:var(--sleep-lilac); font-size:14px; font-weight:500; margin:0; }
.day-view-toggle { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.sleep-studio .day-view-toggle { margin:0; }
.day-view-toggle .button { min-height:44px; min-width:80px; }
.rest-context { padding:22px; }
.rest-context-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.rest-context-heading h2 { font-size:17px; margin:0; }
.rest-context-heading>span { font-size:12px; color:var(--dim); }
.rest-continuation { font-size:13px; color:var(--dim); margin:10px 0 18px; }
.rest-context-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:18px; }
.rest-context-steps li { padding:0 0 0 12px; border-left:2px solid var(--line2); min-width:0; display:flex; flex-direction:column; gap:6px; }
.rest-context-steps small,.rest-context-steps li>span { font-size:12px; color:var(--dim); line-height:1.7; }
.rest-context-steps strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.rest-countdown { display:flex; justify-content:space-between; align-items:baseline; gap:14px; border-top:1px solid var(--line); margin-top:20px; padding-top:16px; }
.rest-countdown>span { font-size:13px; color:var(--dim); }
.rest-countdown strong { font-size:20px; font-weight:500; font-variant-numeric:tabular-nums; }
.rest-context-note { font-size:12px; color:var(--dim); margin:8px 0 0; }
.sleep-shift-reference { font-size:12px; color:var(--dim); border-top:1px solid var(--line); margin:14px 0 0; padding-top:12px; line-height:1.9; }
.sleep-chart-weekday { font-size:11px; color:var(--dim); }
.sleep-chart-day { gap:6px; padding-inline:2px; }
.route-event-day { font-size:10px; color:var(--dim); line-height:1.5; }
.workday-studio { max-width:1180px; margin:0 auto; }
.workday-studio .page-head { margin-bottom:0; }
.workday-hero { border:1px solid #47645e; border-radius:24px; padding:30px; background:#1c3534; color:#f1f7f3; }
:root[data-theme=light] .workday-hero { background:#eaf3ee; border-color:#cdded4; color:#213a31; }
.workday-kicker,.workday-budget-label { display:block; font-size:13px; color:#bed6ca; }
:root[data-theme=light] .workday-kicker,:root[data-theme=light] .workday-budget-label { color:#4d6d5b; }
.workday-hero h2 { font-size:28px; margin:8px 0 12px; }
.workday-hero p { font-size:13px; line-height:1.8; }
.workday-budget-label { margin-top:24px; }
.workday-budget-number { display:block; font-size:clamp(32px,4vw,48px); font-weight:600; margin-top:6px; font-variant-numeric:tabular-nums; }
.workday-hero .workday-budget-note { font-size:12px; opacity:.85; margin-bottom:0; }
.workday-date-group+ .workday-date-group { margin-top:24px; border-top:1px solid var(--line); padding-top:22px; }
.workday-date-group h3 { font-size:15px; margin:0 0 18px; color:var(--accent-ink); }
.workday-date-group ol { list-style:none; margin:0; padding:0; }
.workday-date-group li { display:grid; grid-template-columns:60px minmax(0,1fr); gap:18px; padding:0 0 20px; }
.workday-date-group time { font-size:15px; font-variant-numeric:tabular-nums; color:var(--dim); }
.workday-date-group li>div { border-left:2px solid var(--line2); padding-left:16px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.workday-date-group strong { font-size:15px; font-weight:500; }
.workday-date-group small { font-size:12px; color:var(--dim); flex-basis:100%; }
.workday-date-group .badge { font-size:10px; }
.workday-explanation { font-size:13px; color:var(--dim); }
@media(max-width:620px) {
  .rest-context-steps { grid-template-columns:minmax(0,1fr); gap:16px; }
  .rest-context { padding:20px 18px; }
  .rest-countdown strong { font-size:18px; }
  .sleep-entry-times strong { font-size:21px; }
  .sleep-entry-times>div>span { font-size:11px; }
  .workday-hero { padding:24px 20px; }
  .workday-hero h2 { font-size:23px; }
  .workday-date-group li { grid-template-columns:48px minmax(0,1fr); gap:10px; }
}
.workday-date-group strong { overflow-wrap:anywhere; }
.meal-calendar-date { font-size:13px; color:var(--dim); margin-bottom:5px; }
.sleep-plan-shortcut { display:grid; gap:8px; justify-items:start; }
.sleep-plan-shortcut small { color:var(--dim); font-size:12px; line-height:1.7; }