/* Daylight reference recreation v4. Shared product tokens continue in index.html. */
:root {
  --v4-orbit: #758643; --v4-lime-soft: #dceaa6; --v4-silver: #d8dcda;
  --v4-metal-ink: #222622; --v4-stage: #222425; --v4-track: #353936;
  --v4-stat-size: 32px; --v4-display: clamp(64px, 22vw, 96px);
  --v4-wheel-size: clamp(80px, 28vw, 112px); --v4-wheel-row:112px;
  --v4-hero-size:144px; --v4-avatar-size:96px; --v4-day-width:44px;
  --v4-half:50%; --v4-hairline:1px; --v4-material-shadow:0 16px 32px #0005;
}
body { background:var(--v4-stage); }
.app.is-reference .app-head { padding:0 var(--s6); }
.app.is-reference .storage-message { margin:var(--s2) 0; }
.v4-page { gap:var(--s6); padding-top:var(--s2); }
.v4-topbar { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:var(--s2); align-items:center; min-height:44px; }
.v4-topbar .v4-bar-title { display:block; text-align:center; font-size:var(--text-sm); font-weight:600; color:var(--muted); }
.v4-topbar .v4-wordmark { font-size:var(--text-xl); font-weight:800; letter-spacing:-.06em; color:var(--ink); }
.v4-topbar .quiet-icon { min-width:44px; min-height:44px; border:var(--v4-hairline) solid var(--line); }
.v4-center { text-align:center; align-items:center; justify-items:center; }
.v4-title { font:400 var(--text-2xl)/1.15 var(--serif); letter-spacing:-.04em; text-wrap:balance; }
.v4-title-bold { font:800 var(--text-2xl)/1.1 var(--sans); letter-spacing:-.05em; text-wrap:balance; }
.v4-page h1 { scroll-margin-top:var(--s4); }
.v4-kicker { color:var(--muted); font-size:var(--text-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.v4-subcopy { color:var(--muted); font-size:var(--text-base); line-height:1.5; }
.v4-panel { display:grid; gap:var(--s4); background:var(--surface); padding:var(--s6); border-radius:var(--radius); }
.v4-panel h2 { font-size:var(--text-lg); }
.v4-rule { display:block; height:var(--v4-hairline); background:var(--line); border:0; margin:0; }
.v4-accent { color:var(--accent); }
.v4-big { display:block; font:400 var(--v4-display)/1 var(--serif); letter-spacing:-.065em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.v4-stat-number { font:400 var(--v4-stat-size)/1.15 var(--serif); letter-spacing:-.04em; white-space:nowrap; }
.v4-label { font-size:var(--text-sm); color:var(--muted); line-height:1.5; }
.v4-sun-stage { display:grid; place-items:center; padding:var(--s4) 0; }
.v4-sun { position:relative; display:grid; place-items:center; width:var(--v4-hero-size); height:var(--v4-hero-size); border-radius:50%; background:radial-gradient(circle at 28% 20%,#ffffe0,#e0eda1 22%,var(--accent) 47%,#56692e 76%,#bacb8b 91%); box-shadow:inset 0 0 0 1px #e2eca180,var(--v4-material-shadow); isolation:isolate; }
.v4-sun::before { content:''; position:absolute; width:72%; height:72%; border:1px solid #eef2d455; border-radius:50%; transform:rotate(-24deg) scaleX(.74); }
.v4-sun::after { content:''; position:absolute; top:var(--s6); left:var(--s6); width:var(--s6); height:var(--s6); border-radius:50%; background:#ffffd433; filter:blur(8px); }
.v4-sun .icon { width:48px; height:48px; color:var(--on-accent); stroke-width:1; }
.v4-sun-small { --v4-hero-size:64px; }
.v4-sun-small .icon { width:24px; height:24px; }
.v4-sun-small::after { display:none; }
.v4-home { gap:var(--s4); }
.v4-home .v4-sun-stage { padding-block:var(--s2); }
.v4-home-heading { --od-gap:var(--s2); }
.v4-home-progress { padding:var(--s4) var(--s6); gap:var(--s4); }
.v4-home-progress p { font-size:var(--text-base); color:var(--muted); }
.v4-progress-row { --od-gap:var(--s3); }
.v4-progress-row progress { height:var(--s2); }
.v4-progress-row .v4-count { display:block; font-weight:800; font-size:var(--text-sm); color:var(--accent); white-space:nowrap; }
.v4-stamp { display:grid; flex:none; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--raised); color:var(--accent); border:1px solid var(--line); }
.v4-home-next { padding:var(--s6); }
.v4-step-ring { display:grid; place-items:center; flex:none; width:64px; height:64px; border:2px solid var(--accent); border-radius:50%; color:var(--accent); font:400 var(--text-2xl)/1 var(--serif); }
.v4-home-next .od-row-top { --od-gap:var(--s4); }
.v4-home-next .od-field { --od-gap:var(--s2); }
.v4-home-next h2 { font-size:var(--text-lg); }
.v4-home-stats { --od-cols:2; --od-gap:var(--s3); }
.v4-stat-card { display:grid; align-content:start; gap:var(--s2); width:100%; padding:var(--s4); background:transparent; border:1px solid var(--line); border-radius:var(--radius); text-align:left; }
.v4-stat-card .od-row { --od-gap:var(--s3); }
.v4-stat-card .icon { color:var(--accent); }
.v4-stat-card .od-stat { --od-gap:var(--s1); }
.v4-section-link { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:52px; width:100%; text-align:left; }
.v4-section-link .icon { flex:none; color:var(--accent); }
.v4-podiums { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s2); align-items:end; padding-top:var(--s2); }
.v4-pillar { display:grid; gap:var(--s2); justify-items:center; align-content:end; min-width:0; text-align:center; }
.v4-medallion { display:grid; place-items:center; width:64px; height:64px; border:2px solid var(--line); border-radius:50%; background:var(--raised); box-shadow:inset 0 0 0 4px var(--bg); color:var(--muted); }
.v4-pillar:nth-child(2) .v4-medallion { width:80px; height:80px; }
.v4-medallion.is-done { border-color:var(--gold); color:var(--gold); }
.v4-medallion .icon { width:28px; height:28px; }
.v4-pillar-name { display:block; font-size:var(--text-base); font-weight:800; }
.v4-pillar-state { display:block; color:var(--muted); font-size:var(--text-xs); white-space:nowrap; }
.v4-column { position:relative; display:grid; place-items:center; align-content:start; width:100%; min-height:128px; padding:var(--s10) var(--s2); margin-top:var(--s6); background:linear-gradient(180deg,var(--raised),var(--bg)); color:var(--muted); }
.v4-column::before { content:''; display:block; position:absolute; top:-16px; left:0; width:100%; height:16px; clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); background:var(--v4-track); border-bottom:1px solid var(--line); }
.v4-pillar:nth-child(2) .v4-column { min-height:160px; }
.v4-column.is-done { color:var(--on-accent); background:linear-gradient(180deg,var(--accent),var(--v4-orbit) 60%,var(--bg)); }
.v4-column.is-done::before { background:var(--v4-lime-soft); border-color:var(--accent); }
.v4-column .icon { width:32px; height:32px; }
.v4-task-list { display:grid; gap:var(--s2); }
.v4-task-row { display:flex; align-items:center; gap:var(--s3); width:100%; min-height:64px; padding:var(--s2) 0; text-align:left; }
.v4-task-row .od-field { flex:1; --od-gap:var(--s1); }
.v4-task-row strong { font-weight:600; font-size:var(--text-base); }
.v4-task-row .icon { color:var(--accent); }
.v4-milestone-pill { display:flex; gap:var(--s2); align-items:center; justify-content:center; min-height:48px; padding:var(--s3) var(--s4); background:var(--raised); border:1px solid var(--line); border-radius:var(--pill); font-size:var(--text-sm); }
.v4-metal-card { display:grid; gap:var(--s6); border-radius:var(--radius); padding:var(--s6); color:var(--v4-metal-ink); background:linear-gradient(120deg,#a6aeac,#e9eeeb 44%,#bcc3c0 74%,#f1f4f0); box-shadow:inset 0 0 0 1px #fff9,var(--v4-material-shadow); }
.v4-metal-card .v4-metal-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.v4-metal-card .v4-metal-top span { display:block; font-size:var(--text-xs); font-weight:600; letter-spacing:.12em; }
.v4-metal-card .v4-metal-top .icon { width:24px; height:24px; }
.v4-card-age { font:400 80px/1 var(--serif); letter-spacing:-.07em; text-shadow:0 1px #fff8; }
.v4-metal-card .od-stat { --od-gap:var(--s2); }
.v4-metal-card .v4-label { color:var(--v4-metal-ink); }
.v4-metal-card .v4-card-value { display:block; font-weight:600; font-size:var(--text-lg); white-space:nowrap; }
.v4-card-copy { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s4); min-height:44px; border-radius:var(--pill); background:var(--light); color:var(--v4-metal-ink); font-size:var(--text-sm); font-weight:600; }
.v4-card-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.v4-card-foot>span { display:block; font-size:var(--text-xs); }
.v4-process { padding:var(--s4) var(--s6); }
.v4-process .v4-task-row { position:relative; align-items:flex-start; padding-block:var(--s3); }
.v4-process .v4-task-row .v4-stamp { margin-top:var(--s1); }
.v4-saved-stack { display:grid; gap:var(--s3); }
.v4-profile { gap:var(--s4); }
.v4-profile-identity { --od-gap:var(--s2); padding-block:var(--s2); }
.v4-avatar { display:grid; place-items:center; width:var(--v4-avatar-size); height:var(--v4-avatar-size); border:2px dashed var(--accent); border-radius:50%; }
.v4-profile-identity h1 { font:800 28px/1.2 var(--sans); letter-spacing:-.04em; }
.v4-profile-metrics { --od-cols:3; --od-gap:var(--s2); padding-block:var(--s3); }
.v4-profile-metrics .od-stat { --od-gap:var(--s2); text-align:center; padding:var(--s1); }
.v4-profile-metrics .od-stat+.od-stat { border-left:1px solid var(--line); }
.v4-profile-metrics strong { display:block; font-weight:600; font-size:var(--text-xl); letter-spacing:-.04em; white-space:nowrap; }
.v4-profile-metrics .v4-label { font-size:var(--text-xs); }
.v4-week { --od-gap:var(--s2); --od-rail-pad:0px; padding-block:var(--s1); }
.v4-day { display:grid; align-content:center; justify-items:center; gap:var(--s2); width:var(--v4-day-width); min-height:88px; padding:var(--s2) var(--s1); background:var(--surface); border:1px solid transparent; border-radius:var(--control-radius); text-align:center; }
.v4-day>span { display:block; }
.v4-day .v4-day-name { color:var(--muted); font-size:var(--text-xs); }
.v4-day .v4-day-number { font-size:var(--text-base); }
.v4-day.is-today { border-color:var(--accent); }
.v4-day.has-activity { color:var(--accent); }
.v4-day-dot { display:block; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.v4-day.has-activity .v4-day-dot { width:16px; height:16px; color:var(--on-accent); background:var(--accent); }
.v4-day-dot .icon { width:16px; height:16px; stroke-width:2; }
.v4-profile-tiles { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s3); }
.v4-profile-tile { display:grid; gap:var(--s2); align-content:center; min-height:176px; padding:var(--s4); background:var(--surface); border-radius:var(--radius); text-align:left; }
.v4-profile-tile strong { display:block; font-size:var(--text-lg); }
.v4-profile-tile .v4-stat-number { font-size:48px; color:var(--accent); }
.v4-profile-tile .v4-sun { justify-self:end; --v4-hero-size:64px; }
.v4-profile-tile .v4-sun .icon { width:24px; height:24px; }
.v4-banner { display:flex; align-items:center; gap:var(--s4); width:100%; min-height:120px; padding:var(--s4); background:var(--surface); border-radius:var(--radius); text-align:left; }
.v4-banner .od-field { --od-gap:var(--s2); }
.v4-banner strong { font-size:var(--text-lg); }
.v4-focus-page { min-height:100%; justify-content:space-between; gap:var(--s6); }
.v4-focus-body { display:grid; gap:var(--s6); }
.v4-trajectory { padding-block:var(--s8); }
.v4-trajectory .chart svg { min-height:176px; }
.v4-intro-title { font-size:var(--text-2xl); font-weight:800; line-height:1.2; letter-spacing:-.04em; text-wrap:balance; }
.v4-intro-title em { font-family:var(--serif); font-weight:400; color:var(--accent); }
.v4-story-step { display:flex; gap:var(--s2); align-items:center; }
.v4-story-step>span { display:block; height:2px; flex:1; background:var(--line); }
.v4-story-step>span.is-current { background:var(--accent); }
.v4-celebrate { display:grid; gap:var(--s4); justify-items:center; padding:var(--s6) 0; text-align:center; }
.v4-celebrate .v4-sun { --v4-hero-size:80px; }
.v4-celebrate .v4-sun .icon { width:32px; height:32px; }
.v4-celebrate .v4-big { font-size:clamp(96px,32vw,144px); color:var(--accent); }
.v4-celebrate h1 { font:600 var(--text-xl)/1.4 var(--sans); letter-spacing:-.03em; }
.v4-momentum .v4-celebrate { padding-block:var(--s4); }
.v4-momentum .v4-celebrate .v4-big { font-size:var(--v4-display); }
.v4-week-panel { padding:var(--s4); }
.v4-week-panel .v4-week { --v4-day-width:44px; }
.v4-reference-footer { display:grid; gap:var(--s2); padding-block:var(--s2); }
.v4-reference-footer .text-link { justify-content:center; }
.v4-age { gap:var(--s3); }
.v4-age .age-block { padding:0; border:0; background:none; gap:var(--s3); }
.v4-age .age-title { justify-content:center; }
.v4-age .age-title label { display:none; }
.v4-age .age-title button { color:var(--ink); font-size:var(--text-sm); }
.v4-age .age-wheel { height:calc(var(--v4-wheel-row)*3); padding-block:var(--v4-wheel-row); }
.v4-age .age-wheel-wrap::before { top:var(--v4-wheel-row); height:var(--v4-wheel-row); border-color:var(--accent); }
.v4-age .age-option { height:var(--v4-wheel-row); font-size:80px; color:var(--muted); }
.v4-age .age-option[aria-selected=true] { font-size:var(--v4-wheel-size); color:var(--ink); }
.v4-age #age-help { text-align:center; }
.v4-age .age-entry { padding:var(--s4); background:var(--surface); border-radius:var(--control-radius); }
.v4-year-header { display:flex; justify-content:center; align-items:center; gap:var(--s6); }
.v4-year-header .icon-btn { width:44px; height:44px; }
.v4-year-header strong { display:block; font-size:var(--text-base); font-weight:600; }
.v4-activity-title { display:grid; gap:var(--s3); text-align:center; }
.v4-activity-title h1 { font:800 var(--text-3xl)/1.05 var(--sans); letter-spacing:-.06em; text-transform:uppercase; }
.v4-activity-title .v4-stat-number { font-size:var(--text-3xl); color:var(--accent); }
.v4-heatmap { display:grid; gap:var(--s4); }
.v4-heatmap-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--s1); font-size:var(--text-xs); color:var(--muted); text-align:center; }
.v4-month { display:grid; width:100%; gap:var(--s2); text-align:left; border-radius:var(--s2); }
.v4-month-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--s2); min-height:44px; }
.v4-month-heading strong { font-size:var(--text-sm); font-weight:600; }
.v4-month-heading>span { display:block; font-size:var(--text-xs); color:var(--muted); }
.v4-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--s1); }
.v4-heat-cell { display:grid; place-items:center; height:24px; border:1px solid var(--line); background:var(--surface); font-size:var(--text-xs); color:var(--muted); }
.v4-heat-cell.is-empty { border-color:transparent; background:transparent; }
.v4-heat-cell.is-active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:800; }
.v4-heat-cell.is-future { background:var(--bg); border-style:dashed; }
.v4-legend { display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap; font-size:var(--text-xs); color:var(--muted); }
.v4-legend>span { display:flex; align-items:center; gap:var(--s2); }
.v4-legend i { display:block; width:12px; height:12px; background:var(--surface); border:1px solid var(--line); }
.v4-legend i.is-active { background:var(--accent); }
.v4-day-list { display:grid; gap:var(--s2); }
.v4-date-row { display:flex; gap:var(--s3); align-items:center; justify-content:space-between; width:100%; min-height:52px; border-bottom:1px solid var(--line); text-align:left; }
.v4-date-row .od-field { --od-gap:var(--s1); }
.v4-date-row .v4-label { font-size:var(--text-xs); }
.v4-event-list { display:grid; gap:var(--s4); margin:0; padding:0; list-style:none; }
.v4-event-list li { display:flex; gap:var(--s3); align-items:center; }
.v4-event-list .v4-stamp { color:var(--accent); }
.v4-outlook-title { display:grid; justify-items:center; gap:var(--s3); text-align:center; }
.v4-outlook-title .v4-big { font-size:clamp(56px,20vw,80px); }
.v4-outlook-title h1 { font-size:var(--text-xl); letter-spacing:-.03em; }
.v4-goal-line { color:var(--accent); font-weight:800; font-size:var(--text-lg); }
.v4-columns { display:block; width:100%; height:auto; }
.v4-columns text { font-family:var(--sans); font-size:12px; }
.v4-chart-info { display:flex; justify-content:center; align-items:center; gap:var(--s2); }
.v4-money-links { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.v4-money-links button { display:grid; align-content:start; gap:var(--s2); min-height:104px; padding:var(--s4); border:1px solid var(--line); border-radius:var(--control-radius); text-align:left; font-size:var(--text-base); }
.v4-money-links .icon { color:var(--accent); }
.v4-age-launch { margin-top:var(--s2); justify-content:center; }
.v4-example { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--pill); padding:var(--s1) var(--s2); font-size:var(--text-xs); color:var(--muted); }
.v4-copy-field { min-height:192px; }
.v4-entry-shortcuts { display:grid; gap:var(--s2); }
@media(hover:hover) {
  .v4-stat-card:hover,.v4-profile-tile:hover,.v4-banner:hover,.v4-money-links button:hover { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
  .v4-task-row:hover,.v4-date-row:hover,.v4-section-link:hover { color:var(--accent); }
  .v4-day:hover { border-color:var(--ink); }
  .v4-month:hover .v4-month-heading strong { text-decoration:underline; text-underline-offset:4px; }
  .v4-card-copy:hover { background:#fff; color:var(--v4-metal-ink); }
}
@media(max-width:375px) { .app.is-reference .app-head { padding-inline:var(--s4); } .v4-panel,.v4-metal-card { padding:var(--s4); } .v4-home-progress { padding:var(--s4); } }
@media(min-width:768px) { body { padding:var(--s8); } }
@media(min-width:1024px) { body { padding:var(--s12); background:var(--v4-stage); } }
@media(min-width:1440px) { body { padding:var(--s12); } }
@media(prefers-reduced-motion:reduce) { .v4-page,.v4-sun,button { animation:none!important; transition:none!important; } }