/* Theme studies share one layout. Only semantic surface and ink tokens change. */
:root,
html[data-theme="ivory"] {
  color-scheme: light;
  --page:#f7f5ef;
  --paper:#fffdf8;
  --ink:#242622;
  --muted:#6b6e65;
  --accent:#41463e;
  --green:var(--accent);
  --mint:var(--subtle);
  --subtle:#eeece4;
  --line:#ddded4;
  --input-border:#92988a;
  --disabled-surface:#e8e8df;
  --disabled-text:#777c70;
  --primary:#ffd65a;
  --primary-hover:#f0c643;
  --on-primary:#242622;
  --error:#a13c32;
  --focus:#9d5525;
  --calendar-background:var(--paper);
  --calendar-text:var(--ink);
  --calendar-subtext:var(--muted);
  --calendar-line:var(--line);
  --calendar-border:#a6ac9d;
  --calendar-future:#9a9e93;
  --calendar-focus:var(--focus);
  --star-main:#967443;
  --star-highlight:#a88b57;
  --calendar-star:var(--star-highlight);
  --calendar-star-secondary:var(--star-main);
  --calendar-hover:#eeece4;
  --calendar-selected:#eae7dc;
  --nav-surface:#f7f5ef;
  --dialog-backdrop:#24262266;
}
html[data-theme="black"] {
  color-scheme: dark;
  --page:#191b1a;
  --paper:#222523;
  --ink:#f0eee6;
  --muted:#adb1a6;
  --accent:#d3d4c9;
  --subtle:#2c302b;
  --line:#3b4038;
  --input-border:#7c8575;
  --disabled-surface:#30352e;
  --disabled-text:#a0a794;
  --primary:#ffd65a;
  --primary-hover:#f0c643;
  --on-primary:#242622;
  --error:#f6ac9d;
  --focus:#edbc79;
  --calendar-background:var(--paper);
  --calendar-text:var(--ink);
  --calendar-subtext:var(--muted);
  --calendar-line:var(--line);
  --calendar-border:#707a67;
  --calendar-future:#7d8577;
  --calendar-focus:var(--focus);
  --star-main:#ecd8a2;
  --star-highlight:#fff7db;
  --calendar-star:var(--star-highlight);
  --calendar-star-secondary:var(--star-main);
  --calendar-hover:#2c302b;
  --calendar-selected:#353b30;
  --nav-surface:#191b1a;
  --dialog-backdrop:#080a09a6;
}

html:has(.main-jenga-app),
body:has(.main-jenga-app) { background:var(--page); color:var(--ink) }
.main-jenga-app { background:var(--page); padding-bottom:calc(108px + env(safe-area-inset-bottom)) }
.main-jenga-app .top { height:88px; padding:16px 24px; border-bottom:1px solid var(--line); gap:12px }
.main-jenga-app .wordmark { gap:9px; font-size:19px; letter-spacing:-.65px }
.main-jenga-app .stack-mark { width:38px; height:44px; overflow:visible }
.main-jenga-app .badge { max-width:115px; font-size:10px; line-height:1.5; letter-spacing:.02em; text-align:right; white-space:normal }
.main-jenga-app .pieces-main { padding:30px 24px 0 }

/* Large intervals separate the message, related metrics, and direct manipulation. */
.main-jenga-app .daily-message { margin:0 0 30px }
.main-jenga-app .daily-message-label { font-size:12px; font-weight:550; letter-spacing:.01em; margin:0 0 10px; color:var(--muted) }
.main-jenga-app .daily-message-text { max-width:580px; font-size:30px; line-height:1.35; text-wrap:balance; font-weight:750 }
.main-jenga-app .pieces-layout { gap:36px }
.main-jenga-app .pieces-record { padding:24px 0 0; border-top:1px solid var(--line) }
.main-jenga-app .pieces-totals { --metric-size:40px; --metric-unit-size:16px; --metric-row-height:48px; position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto; gap:6px 20px; align-items:stretch; margin:0 }
.main-jenga-app .pieces-totals::before { content:""; position:absolute; inset-block:0; left:50%; border-left:1px solid var(--line); pointer-events:none }
.main-jenga-app .metric-summary { min-width:0; display:grid; grid-template-rows:subgrid; grid-row:span 2 }
.main-jenga-app .metric-value-row { display:flex; align-items:flex-start; justify-content:flex-start; gap:8px; min-width:0; min-height:var(--metric-row-height) }
.main-jenga-app .pieces-total,
.main-jenga-app .today-value { min-width:0; margin:0; font-size:var(--metric-size); font-weight:700; line-height:1.1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.main-jenga-app .pieces-total>.metric-unit,
.main-jenga-app .today-value>.metric-unit { font-size:var(--metric-unit-size); font-weight:450; margin-left:4px; letter-spacing:0 }
.main-jenga-app .metric-caption { min-width:0; font-size:12px; line-height:1.5; color:var(--muted) }
.main-jenga-app .cumulative-caption { display:block; min-height:0; margin:0; font-size:12px; line-height:1.5 }
.main-jenga-app .cumulative-caption>span { display:block }
.main-jenga-app .range-button { display:inline-flex; margin:0; min-height:44px; padding:0; gap:2px; font-size:12px; line-height:1.4 }
.main-jenga-app .pieces-today { border:0; padding:0; text-align:left; align-self:stretch }
.main-jenga-app .metric-caption .pieces-label { margin:0; font-size:12px; font-weight:400; line-height:1.5 }
.main-jenga-app .edit-today { min-width:44px; min-height:44px; padding:8px 2px; gap:3px; color:var(--muted); font-size:12px }
.main-jenga-app .pieces-scene { margin-top:8px; background:transparent; border:0; border-radius:0; box-shadow:none; padding:0 }
.main-jenga-app .pieces-stage { height:356px }
.main-jenga-app .pieces-stage.is-empty { height:280px }
.main-jenga-app .pieces-empty { top:18px }
.main-jenga-app .range-status { color:var(--muted); font-size:12px; margin:4px 0 0 }
.main-jenga-app .prototype-info { margin-top:32px; border-color:var(--line) }
.main-jenga-app .prototype-info summary { color:var(--muted); font-size:11px }

/* One common region joins the period tools, statistics, calendar, and day detail. */
.main-jenga-app .history-message { display:none }
.main-jenga-app .history-layout { display:block; margin-top:0; padding:20px 16px 0; border:1px solid var(--line); border-radius:20px; background:var(--paper) }
.main-jenga-app .history-calendar { display:flex; flex-direction:column; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--ink) }
.main-jenga-app .history-calendar :focus-visible { outline-color:var(--focus) }
.main-jenga-app .history-toolbar { display:flex; flex-direction:column; gap:16px; margin-bottom:24px }
.main-jenga-app .history-top { order:0; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 }
.main-jenga-app .history-top h2 { font-size:21px; line-height:1.4; letter-spacing:-.6px; font-weight:700 }
.main-jenga-app .history-calendar[data-mode="week"] .history-top h2 { font-size:18px }
.main-jenga-app .history-calendar[data-mode="day"] .history-top h2 { font-size:20px }
.main-jenga-app .month-buttons { gap:6px }
.main-jenga-app .month-buttons button { width:44px; height:44px; min-width:44px; min-height:44px; border:0; border-radius:10px; color:var(--ink); background:var(--subtle) }
.main-jenga-app .month-buttons button:disabled { color:var(--disabled-text); background:var(--subtle); opacity:.55 }
.main-jenga-app .month-buttons svg { width:18px; height:18px }
.main-jenga-app .history-modes { order:1; align-self:flex-start; display:grid; grid-template-columns:repeat(3,1fr); width:168px; padding:3px; gap:2px; margin:0; border:0; border-radius:11px; background:var(--subtle) }
.main-jenga-app .history-modes button { min-height:44px; border-radius:8px; font-size:12px; font-weight:600; color:var(--muted) }
.main-jenga-app .history-modes button[aria-pressed="true"] { background:var(--ink); color:var(--page); box-shadow:none }
.main-jenga-app .month-stats { gap:8px; margin:0 0 22px; padding:0 0 20px; border-bottom:1px solid var(--line) }
.main-jenga-app .month-stats div+div { border-left:1px solid var(--line); padding-left:10px }
.main-jenga-app .month-stats dt { color:var(--muted); font-size:12px; line-height:1.6; white-space:nowrap }
.main-jenga-app .month-stats dd { margin:6px 0 0; font-size:25px; line-height:1.2; color:var(--ink); font-weight:650; letter-spacing:-.035em }
.main-jenga-app .month-stats dd small { font-size:12px; margin-left:3px }
.main-jenga-app .calendar { row-gap:6px; margin:0 }
.main-jenga-app .weekday { padding:0 0 12px; margin:0 0 2px; font-size:12px; border:0; color:var(--muted) }
.main-jenga-app .history-calendar .day { height:68px; padding:3px 0 0; gap:4px; color:var(--ink); border-radius:11px }
.main-jenga-app .history-calendar .date-number { line-height:16px; font-size:12px }
.main-jenga-app .history-calendar .day.today .date-number { text-underline-offset:3px }
.main-jenga-app .history-calendar .day[aria-pressed="true"] { background:var(--calendar-selected); border-color:var(--calendar-border) }
.main-jenga-app .history-calendar .day.future { color:var(--calendar-future); opacity:1 }
.main-jenga-app .history-calendar .day:disabled:not(.future) { opacity:.55 }

/* Keep the original point geometry; warm bronze reads directly on ivory. */
.main-jenga-app .star-picture { height:42px; width:42px; max-width:100%; align-self:center; border-radius:50%; background:transparent }
.main-jenga-app .star-cluster { filter:none; opacity:1 }
.main-jenga-app .star-example .star-cluster { background:transparent; width:25px; height:25px }
html[data-theme="ivory"] .main-jenga-app .star-cluster { color:var(--star-main) }
html[data-theme="ivory"] .main-jenga-app .star-cluster circle[fill="#ecd8a2"] { fill:var(--star-main) }
html[data-theme="ivory"] .main-jenga-app .star-cluster circle[fill="#fff7db"] { fill:var(--star-highlight) }
.main-jenga-app .legend { margin:18px 0 0; padding:14px 0 0; gap:8px 10px; color:var(--muted); border-color:var(--line); font-size:12px; line-height:1.6 }
.main-jenga-app .star-examples { gap:6px }
.main-jenga-app .star-example { gap:2px }
.main-jenga-app #today-label { width:100%; margin:1px 0 0!important; font-size:12px; color:var(--muted) }
.main-jenga-app .star-limit { margin:5px 0 0; font-size:12px; line-height:1.7; color:var(--muted) }
.main-jenga-app .day-detail { margin:22px 0 0; padding:20px 0 24px; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); box-shadow:none }
.main-jenga-app .detail-caption { margin:0 0 6px; font-size:12px; line-height:1.6; color:var(--muted) }
.main-jenga-app .day-detail h2 { margin:0; font-size:16px; line-height:1.5; font-weight:650; letter-spacing:-.35px }
.main-jenga-app .day-count { margin:14px 0 7px; font-size:32px; line-height:1.2; letter-spacing:-.05em; color:var(--ink) }
.main-jenga-app .day-count small { font-size:13px }
.main-jenga-app .day-copy { font-size:12px; line-height:1.7; color:var(--muted) }
.main-jenga-app .day-overview { margin:0; padding:22px 0 26px; border:0; border-top:1px solid var(--line) }
.main-jenga-app .day-weekday { color:var(--muted) }
.main-jenga-app .day-stars { margin:20px 0; height:144px }
.main-jenga-app .day-stars .star-cluster { background:transparent }
.main-jenga-app .day-overview-count { color:var(--ink); font-size:36px }
.main-jenga-app .day-overview-copy { color:var(--muted) }

.main-jenga-app .nav { padding:9px 24px calc(10px + env(safe-area-inset-bottom)); gap:12px; background:var(--nav-surface); border-color:var(--line); box-shadow:none }
.main-jenga-app .nav a { min-height:52px; color:var(--muted); font-size:12px }
.main-jenga-app .nav a[aria-current="page"] { background:var(--primary); color:var(--on-primary) }
body:has(.main-jenga-app) .record-submit,
body:has(.main-jenga-app) .dialog-actions .save-start { color:var(--on-primary) }
body:has(.main-jenga-app) .record-submit:disabled { color:var(--disabled-text) }
body:has(.main-jenga-app) dialog { background:var(--paper); color:var(--ink); box-shadow:0 12px 44px #00000014 }
body:has(.main-jenga-app) dialog::backdrop { background:var(--dialog-backdrop) }
body:has(.main-jenga-app) dialog input { color:var(--ink); background:var(--page); border-color:var(--input-border) }
body:has(.main-jenga-app) dialog input::placeholder { color:var(--muted) }
/* WebKit's segmented date field keeps focus inside its native shadow controls. */
body:has(.main-jenga-app) dialog input[type="date"]:focus-within { outline:3px solid var(--focus) }
body:has(.main-jenga-app) input { caret-color:var(--ink) }
body:has(.main-jenga-app) ::selection { background:var(--primary); color:var(--on-primary) }
html[data-theme="black"] .jenga-record-piece { color:#d5c39f }
html[data-theme="black"] .jenga-record-outline { stroke:#d1bd96; opacity:.8 }

@media(hover:hover) {
  .main-jenga-app .month-buttons button:hover:enabled,
  .main-jenga-app .history-calendar .day:hover:enabled { background:var(--calendar-hover) }
  .main-jenga-app .history-modes button[aria-pressed="false"]:hover { color:var(--ink) }
  .main-jenga-app .history-calendar .day[aria-pressed="true"]:hover { background:var(--calendar-selected) }
  html[data-theme="black"] .jenga-record-piece:not(:disabled):hover .jenga-record-outline { stroke:#eddbb6 }
}
@media(max-width:374px) {
  .main-jenga-app .top { padding-inline:18px }
  .main-jenga-app .wordmark { gap:6px; font-size:17px }
  .main-jenga-app .stack-mark { width:34px; height:40px }
  .main-jenga-app .badge { max-width:92px; font-size:10px }
  .main-jenga-app .pieces-main { padding:24px 18px 0 }
  .main-jenga-app .daily-message-text { font-size:28px }
  .main-jenga-app .daily-message { margin-bottom:26px }
  .main-jenga-app .pieces-totals { --metric-size:34px; --metric-unit-size:14px; --metric-row-height:44px; column-gap:16px }
  .main-jenga-app .pieces-stage { height:328px }
  .main-jenga-app .history-layout { padding:18px 12px 0; border-radius:18px }
  .main-jenga-app .history-top h2 { font-size:20px }
  .main-jenga-app .month-stats dd { font-size:23px }
  .main-jenga-app .month-stats div+div { padding-left:8px }
  .main-jenga-app .month-stats dt { font-size:12px }
  .main-jenga-app .history-calendar .day { height:65px }
  .main-jenga-app .legend { gap:7px }
  .main-jenga-app .star-examples { gap:4px }
}
@media(min-width:768px) {
  .main-jenga-app { width:min(100% - 64px,1000px); padding-bottom:124px }
  .main-jenga-app .top { height:104px; padding:24px 0 }
  .main-jenga-app .wordmark { font-size:23px; gap:10px }
  .main-jenga-app .stack-mark { width:43px; height:50px }
  .main-jenga-app .badge { max-width:none; font-size:11px }
  .main-jenga-app .pieces-main { padding:42px 0 0 }
  .main-jenga-app .daily-message { margin:0 0 36px }
  .main-jenga-app .daily-message-label { margin-bottom:12px }
  .main-jenga-app .daily-message-text { max-width:740px; font-size:42px; line-height:1.25 }
  .main-jenga-app .pieces-layout { grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr); gap:48px }
  .main-jenga-app .pieces-record { padding-top:28px; margin-top:18px }
  .main-jenga-app .pieces-totals { --metric-size:44px; --metric-row-height:52px; column-gap:24px }
  .main-jenga-app .pieces-scene { margin:0 }
  .main-jenga-app .pieces-stage { height:460px }
  .main-jenga-app .history-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:32px; padding:28px; border-radius:24px; align-items:start }
  .main-jenga-app .history-calendar { grid-column:1; grid-row:1; padding:0; margin:0; max-width:none; justify-self:stretch; width:100% }
  .main-jenga-app .history-toolbar { gap:16px; margin-bottom:28px }
  .main-jenga-app .history-top h2 { font-size:24px }
  .main-jenga-app .history-calendar[data-mode="week"] .history-top h2 { font-size:20px }
  .main-jenga-app .history-calendar[data-mode="day"] .history-top h2 { font-size:24px }
  .main-jenga-app .month-stats { gap:16px; margin-bottom:24px; padding-bottom:24px }
  .main-jenga-app .month-stats dt { font-size:12px }
  .main-jenga-app .month-stats dd { font-size:30px; margin-top:8px }
  .main-jenga-app .month-stats div+div { padding-left:18px }
  .main-jenga-app .weekday { padding-bottom:14px; font-size:12px }
  .main-jenga-app .history-calendar .day { height:74px; gap:5px; font-size:12px }
  .main-jenga-app .history-calendar .date-number { font-size:12px }
  .main-jenga-app .legend { font-size:12px; margin-top:22px; padding-top:16px }
  .main-jenga-app #today-label,
  .main-jenga-app .star-limit { font-size:12px }
  .main-jenga-app .day-detail { grid-column:2; grid-row:1; margin:0; padding:0 0 0 28px; border-top:0; border-left:1px solid var(--line); min-height:160px; position:sticky; top:28px }
  .main-jenga-app .day-detail h2 { font-size:18px }
  .main-jenga-app .day-count { margin:24px 0 10px; font-size:44px }
  .main-jenga-app .day-copy { font-size:13px }
  .main-jenga-app .history-layout:has(.history-calendar[data-mode="day"]) { grid-template-columns:1fr }
  .main-jenga-app .history-calendar[data-mode="day"] { width:100%; max-width:620px; justify-self:center; grid-column:1 }
  .main-jenga-app .nav { bottom:20px; width:340px; padding:8px; gap:8px; border:1px solid var(--line); border-radius:18px; box-shadow:0 4px 20px #00000008 }
  .main-jenga-app .nav a { min-height:48px; font-size:14px }
}
@media(min-width:768px) and (max-width:900px) {
  .main-jenga-app { width:calc(100% - 48px) }
  .main-jenga-app .pieces-layout { gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) }
  .main-jenga-app .pieces-totals { --metric-size:36px; --metric-row-height:44px; column-gap:16px }
  .main-jenga-app .pieces-stage { height:400px }
  .main-jenga-app .history-layout { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); padding:24px 20px; gap:24px }
  .main-jenga-app .day-detail { padding-left:22px }
  .main-jenga-app .month-stats dd { font-size:27px }
  .main-jenga-app .month-stats dt { font-size:12px }
  .main-jenga-app .month-stats div+div { padding-left:12px }
}