/* Standalone design preview. All assets stay local to the project. */
:root {
  --bg: #f3f4f7; --paper: #fff; --ink: #10131a; --muted: #626976; --line: #e1e4ea;
  --orange: #ff6a24; --orange-hover: #ff8549; --blue: #245bea; --gold: #956600; --radius: 10px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink); background: var(--bg); font-synthesis: none; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
button:disabled { cursor: default; opacity: .35; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 50; padding: 12px 20px; background: var(--orange); color: var(--ink); border-radius: 6px; }
.skip-link:focus { top: 16px; }

/* Shell */
.shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.rail { background: var(--ink); color: #fff; padding: 31px 20px 24px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 850; letter-spacing: -.7px; }
.brand-symbol { width: 28px; height: 30px; color: var(--orange); }
.brand-dot { color: var(--orange); }
.navigation { display: grid; gap: 8px; margin-top: 55px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 13px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #a3a9b5; }
.nav-link.active { color: #fff; background: #242832; }
.nav-link.active::before { content: ""; width: 3px; height: 22px; background: var(--orange); position: absolute; left: -20px; top: 13px; }
.nav-link.active > .icon:first-child { color: var(--orange); }
.nav-link:hover { background: #20242d; color: #fff; }
.nav-arrow { width: 14px; height: 14px; margin-left: auto; color: #a2a8b5; }
.nav-link:not(.active) > .nav-arrow { display: none; }
.rail a:focus-visible { outline-color: var(--orange); }
.account { display: flex; gap: 11px; align-items: center; margin-top: auto; padding-top: 22px; border-top: 1px solid #2a2f39; }
.avatar { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #3d434e; border-radius: 8px; display: grid; place-items: center; background: #282d37; color: #e2e5eb; font-size: 11px; font-weight: 750; }
.account strong, .account div > span { display: block; font-size: 12px; }
.account div > span { color: #9ba3b1; font-size: 10px; margin-top: 4px; }
.page-shell { min-width: 0; }
.topbar { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 5%; border-bottom: 1px solid var(--line); background: var(--paper); }
.topbar-location { display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.topbar-location > span:first-child { color: var(--muted); }
.location-divider { color: #9ba2af; font-size: 16px; font-weight: 400; }
.topbar-actions { display: flex; align-items: center; gap: 19px; }
.preview-badge { font-size: 9px; font-weight: 650; letter-spacing: 1px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 5px 7px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 19px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; font-weight: 750; transition: background .15s, transform .15s; }
.primary { background: var(--orange); color: var(--ink); }
.primary:hover { background: var(--orange-hover); }
.primary:active { transform: translateY(1px); }
.button .icon { width: 17px; height: 17px; stroke-width: 2.2; }
.mobile-brand, .mobile-nav { display: none; }

/* Today */
main { max-width: 1380px; margin: auto; padding: 44px 5% 22px; }
main:focus { outline: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.eyebrow { font-size: 10px; font-weight: 750; line-height: 1.5; letter-spacing: 1.3px; margin: 0 0 10px; color: var(--muted); }
h1 { font-size: clamp(40px, 4vw, 56px); font-weight: 820; line-height: 1.05; letter-spacing: -2.7px; margin: 0; }
h1 > span { color: var(--orange); }
.date-heading { min-width: 0; font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); font-weight: 750; line-height: 1.45; letter-spacing: -.02em; }
.completion-summary { text-align: right; padding-top: 3px; }
.completion-summary > strong { display: block; font-size: 37px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.completion-summary > strong > span { font-size: 20px; margin-left: 2px; }
.completion-summary > span { display: block; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: 1.8px; margin-top: 8px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 28px; align-items: start; }
.goals-column { min-width: 0; }
.intention { padding: 32px 8px 38px; margin-bottom: 20px; text-align: center; }
.reminder-label { margin: 0 0 17px; color: #bd460f; font-size: 15px; font-weight: 750; letter-spacing: .02em; }
.reminder-label::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 18px; background: var(--orange); }
.reminder, .success p { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 750; line-height: 1.45; letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance; }
.reminder { max-width: 32ch; margin: 0 auto; color: var(--ink); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.section-heading h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 750; letter-spacing: -.35px; margin: 0; }
.count-pill { display: grid; place-items: center; min-width: 24px; height: 24px; background: #e5e8ee; border-radius: 5px; font-size: 11px; font-weight: 750; color: #555e6e; }
.muted { color: var(--muted); font-size: 11px; }
.progress-track { height: 6px; border-radius: 2px; background: #dfe3eb; overflow: hidden; margin-bottom: 22px; }
.progress-track > span { display: block; height: 100%; width: 50%; background: var(--blue); transition: width .25s; }
.goals { display: grid; gap: 11px; }
.goal { display: flex; align-items: center; gap: 16px; min-height: 98px; padding: 22px 17px 22px 23px; background: var(--paper); border: 1px solid #dce1e9; border-radius: 8px; transition: background .15s, border-color .15s; }
.goal:hover { border-color: #adb7c8; }
.goal.done { background: #f8f9fc; }
.goal-check { appearance: none; -webkit-appearance: none; position: relative; margin: 0; width: 25px; height: 25px; flex-shrink: 0; display: grid; place-content: center; border: 2px solid #b7bfcc; border-radius: 5px; cursor: pointer; background: #fff; }
.goal-check::before { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); }
.goal-check::after { content: ""; position: absolute; inset: -10px; }
.goal-check:checked { background: var(--blue); border-color: var(--blue); }
.goal-check:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.goal-text { flex: 1; min-width: 0; }
.goal-title { display: block; cursor: pointer; font-size: 15px; font-weight: 650; line-height: 1.6; letter-spacing: -.15px; margin: 0; overflow-wrap: anywhere; }
.goal.done .goal-title { color: #687182; text-decoration: line-through; text-decoration-color: #a0acc1; text-decoration-thickness: 1px; }
.goal-description { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 5px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.icon-button { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: #727c8d; border-radius: 6px; }
.icon-button:hover { background: #edf1f8; border-color: #dae1ed; color: var(--ink); }
.icon-button .icon { width: 18px; height: 18px; }
.add-inline { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 54px; padding: 15px 20px; margin-top: 13px; border: 1px dashed #b8c1d0; border-radius: 6px; background: transparent; color: #424c5d; font-size: 12px; font-weight: 650; }
.add-inline:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.add-inline .icon { width: 17px; height: 17px; }

/* Streak and stats */
.streak-card { overflow: hidden; position: relative; background: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius); padding: 24px; color: #fff; }
.streak-card::after { content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 4px; background: var(--orange); }
.streak-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.streak-top .eyebrow { color: #bdc4d1; margin: 0; font-size: 9px; letter-spacing: 1.4px; }
.flame { width: 23px; height: 23px; color: var(--orange); }
.streak-number { display: flex; align-items: baseline; gap: 13px; margin: 18px 0 27px; }
.streak-number > span:first-child { color: var(--orange); font-size: 88px; font-weight: 850; line-height: 1; letter-spacing: -5px; font-variant-numeric: tabular-nums; }
.streak-number > span + span { color: #e2e6ee; font-size: 18px; font-weight: 650; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week-day { text-align: center; font-size: 9px; font-weight: 650; color: #aab2c2; }
.week-circle { width: 27px; height: 28px; margin: 9px auto 0; border-radius: 5px; background: #2b303b; color: #a5aebe; display: grid; place-items: center; }
.week-circle.complete { background: #2c60e9; color: #fff; }
.week-circle.current { border: 1px solid var(--orange); color: var(--orange); background: #35241f; }
.week-circle.current.complete { background: var(--orange); color: var(--ink); }
.week-circle .icon { width: 14px; height: 14px; stroke-width: 2; }
.streak-rule { padding-top: 18px; margin: 22px 0 0; border-top: 1px solid #353b46; color: #adb6c6; font-size: 10px; line-height: 1.9; }
.stats-card { margin-top: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.stats-card > .eyebrow { font-size: 9px; margin-bottom: 23px; }
.stat-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0; }
.stat-line > span { font-size: 11px; color: var(--muted); }
.stat-line strong { font-size: 21px; font-weight: 800; letter-spacing: -.6px; white-space: nowrap; }
.stat-line small { font-size: 10px; font-weight: 550; letter-spacing: 0; color: var(--muted); }
.text-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-top: 1px solid var(--line); padding-top: 13px; margin-top: 23px; color: var(--blue); font-size: 11px; font-weight: 700; }
.text-link .icon { width: 16px; height: 16px; }
.success { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 8px 38px; margin-bottom: 20px; text-align: center; animation: arrive .25s ease-out; }
.success-icon { width: 64px; height: 64px; flex-shrink: 0; color: var(--gold); display: grid; place-items: center; }
.success-icon .icon { width: 56px; height: 56px; stroke-width: 1.5; }
.success p { max-width: 32ch; margin: 0; color: var(--gold); }
.preview-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; margin-top: 42px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); line-height: 1.7; }
.preview-footer button { font-size: 10px; padding: 8px 4px; min-height: 44px; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* History */
.history-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 27px 8px; margin: 0 0 27px; }
.history-stats > div { padding: 0 26px; border-right: 1px solid var(--line); }
.history-stats > div:last-child { border: 0; }
.history-stats span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 13px; }
.history-stats strong { font-size: 38px; font-weight: 820; letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.history-stats > div:first-child strong { color: #c8450d; }
.history-stats small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.history-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 25px; }
.calendar-card, .history-day { padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.calendar-controls { display: flex; gap: 4px; }
.calendar-weekdays, .calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.calendar-weekdays { color: var(--muted); text-align: center; font-size: 10px; font-weight: 700; padding: 8px 0 16px; }
.calendar { row-gap: 8px; }
.calendar-day { display: grid; place-items: center; position: relative; width: 100%; min-height: 44px; aspect-ratio: 1; max-height: 62px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: #f3f5f9; font-size: 12px; font-weight: 600; }
.calendar-day.completed { color: #1646c2; background: #e4ebff; }
.calendar-day.completed::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 1px; background: var(--blue); }
.calendar-day.missed { background: #f2f3f5; color: #717988; }
.calendar-day.today { background: #fff1e9; border: 1px solid var(--orange); color: #a53d0b; }
.calendar-day.selected { outline: 2px solid var(--ink); outline-offset: 1px; }
.calendar-day.future { color: #78808e; background: transparent; }
.calendar-day:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--blue); }
.calendar-legend { display: flex; gap: 17px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 19px; margin-top: 22px; font-size: 10px; color: var(--muted); }
.calendar-legend > span { display: flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid #cbd2de; }
.legend-win { background: var(--blue); border-color: var(--blue) !important; }
.legend-miss { background: #e0e3e9; }
.legend-today { background: #ffe4d5; border-color: var(--orange) !important; }
.history-day .eyebrow { font-size: 9px; }
.history-day h2 { font-size: 23px; font-weight: 750; line-height: 1.4; letter-spacing: -.7px; margin: 0 0 13px; }
.history-day-status { color: var(--blue); font-size: 11px; font-weight: 600; line-height: 1.8; margin: 0 0 22px; }
.history-record { display: flex; align-items: start; gap: 11px; border-top: 1px solid var(--line); padding: 18px 0; font-size: 12px; font-weight: 650; line-height: 1.6; overflow-wrap: anywhere; }
.history-record > .icon { color: var(--blue); width: 17px; height: 17px; margin-top: 1px; }
.history-record p { color: var(--muted); font-size: 11px; font-weight: 400; margin: 5px 0 0; white-space: pre-line; }
.history-readonly { font-size: 10px; color: var(--muted); margin: 16px 0 0; line-height: 1.7; }

/* Goal editor */
dialog { width: min(500px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 29px; background: var(--paper); color: var(--ink); border: 1px solid #d2d7e1; border-top: 4px solid var(--orange); border-radius: 10px; box-shadow: 0 24px 90px #10131a38; }
dialog::backdrop { background: #080d177a; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 27px; }
.dialog-heading h2 { font-size: 27px; font-weight: 800; letter-spacing: -.8px; margin: 0; }
.dialog-heading .icon-button { margin: -7px -9px 0 0; }
label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 9px; }
label .muted { font-size: 10px; font-weight: 400; }
input[type=text], textarea { width: 100%; padding: 13px 14px; border: 1px solid #bbc4d2; border-radius: 6px; background: #fff; color: var(--ink); font-size: 13px; }
input::placeholder, textarea::placeholder { font-size: 12px; color: #737d8d; }
textarea { resize: vertical; min-height: 110px; }
.details-toggle { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 7px 0; margin: 17px 0; background: transparent; border: 0; color: var(--blue); font-size: 12px; font-weight: 600; text-align: left; }
.details-toggle > .muted { margin-left: auto; font-size: 10px; font-weight: 400; }
.details-toggle > .icon { width: 17px; height: 17px; }
.dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 20px; margin-top: 28px; border-top: 1px solid var(--line); }
.dialog-footer > .muted { font-size: 10px; }
.field-error { color: #b12a15; font-size: 11px; margin: 8px 0; }
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) {
  main { padding-top: 56px; }
  .content-grid { gap: 36px; grid-template-columns: minmax(0, 1fr) 310px; }
  .goal { min-height: 104px; }
}
@media (max-width: 1190px) {
  .shell { grid-template-columns: 198px minmax(0, 1fr); }
  .rail { padding: 30px 17px 22px; }
  .brand { gap: 8px; font-size: 15px; }
  .brand-symbol { width: 25px; }
  .nav-link.active::before { left: -17px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 253px; gap: 20px; }
  .streak-card, .stats-card { padding: 21px 18px; }
  .week { gap: 3px; }
  .goal { gap: 13px; padding: 21px 12px 21px 18px; }
  .goal-title { font-size: 14px; }
  .history-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: 180px minmax(0, 1fr); }
  .rail { padding: 27px 13px 20px; }
  .brand { font-size: 14px; gap: 7px; }
  .brand-symbol { width: 23px; }
  .nav-link { font-size: 12px; gap: 10px; }
  .nav-link.active::before { left: -13px; }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .insights { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 8px; }
  .streak-card, .stats-card { padding: 22px 18px; }
  .stats-card { margin-top: 0; }
  .stat-line { flex-wrap: wrap; row-gap: 7px; }
  .stat-line > span { font-size: 10px; }
  .streak-number { margin: 16px 0 22px; }
  .streak-number > span:first-child { font-size: 72px; }
  .streak-number > span + span { font-size: 16px; }
  .week { gap: 2px; }
  .week-circle { width: 23px; height: 25px; }
  .topbar-location { gap: 9px; font-size: 9px; }
  .preview-badge { display: none; }
  .history-stats > div { padding: 0 15px; }
  .history-stats span { font-size: 10px; }
}
@media (max-width: 680px) {
  .shell { display: block; }
  .rail { display: none; }
  .topbar { height: 72px; padding: 0 21px; position: sticky; top: 0; z-index: 5; }
  .topbar-location { display: none; }
  .mobile-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 850; letter-spacing: -.6px; }
  .mobile-brand > .icon { width: 23px; height: 25px; color: var(--orange); }
  .topbar-actions .button { padding: 11px 13px; font-size: 11px; }
  .topbar-actions .icon { width: 15px; height: 15px; }
  main { padding: 30px 21px 113px; }
  .page-heading { margin-bottom: 24px; gap: 12px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.1px; margin-bottom: 9px; }
  h1 { font-size: 44px; letter-spacing: -2.2px; }
  .completion-summary { padding-top: 10px; }
  .completion-summary > strong { font-size: 31px; }
  .completion-summary > strong > span { font-size: 16px; }
  .completion-summary > span { font-size: 7px; letter-spacing: 1.4px; margin-top: 7px; }
  .intention { padding: 22px 4px 32px; }
  .section-heading h2 { font-size: 16px; }
  .section-heading { margin-bottom: 15px; }
  .goal { min-height: 96px; padding: 19px 8px 19px 17px; gap: 13px; }
  .goal-title { font-size: 13px; line-height: 1.7; }
  .goal-description { font-size: 10px; }
  .goal-check { width: 24px; height: 24px; }
  .add-inline { min-height: 52px; font-size: 12px; }
  .insights { grid-template-columns: 1fr; gap: 15px; margin-top: 6px; }
  .streak-card { padding: 23px; }
  .streak-number { margin: 14px 0 23px; }
  .streak-number > span:first-child { font-size: 80px; }
  .streak-number > span + span { font-size: 18px; }
  .streak-top .eyebrow { font-size: 10px; }
  .week-circle { width: 31px; height: 31px; }
  .week-day { font-size: 10px; }
  .streak-rule { font-size: 11px; padding-top: 17px; margin-top: 21px; }
  .stats-card { padding: 23px; }
  .stats-card > .eyebrow { font-size: 10px; }
  .stat-line > span { font-size: 12px; }
  .text-link { font-size: 12px; }
  .success { padding: 8px 4px 32px; gap: 14px; }
  .preview-footer { margin-top: 29px; font-size: 9px; align-items: start; }
  .preview-footer > span { max-width: 210px; }
  .preview-footer button { margin-top: -9px; }
  .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 1px solid #303641; box-shadow: 0 -4px 20px #10131a0a; }
  .mobile-nav > a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 10px; border-radius: 6px; color: #b4bccb; font-size: 11px; font-weight: 550; }
  .mobile-nav > a.active { color: #fff; background: #292e39; }
  .mobile-nav > a.active > .icon { color: var(--orange); }
  .mobile-nav .icon { width: 18px; height: 18px; }
  .mobile-nav a:focus-visible { outline-color: var(--orange); }
  .mobile-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 15px; background: var(--orange); color: var(--ink); border: 0; border-radius: 6px; font-size: 11px; font-weight: 750; }
  .mobile-add:hover { background: var(--orange-hover); }
  .history-stats { padding: 21px 0; }
  .history-stats > div { padding: 0 12px; }
  .history-stats span { font-size: 9px; line-height: 1.7; min-height: 30px; margin-bottom: 9px; }
  .history-stats strong { font-size: 31px; }
  .history-stats small { display: block; font-size: 10px; margin-top: 7px; }
  .history-grid { gap: 18px; }
  .calendar-card, .history-day { padding: 20px; }
  .calendar { gap: 4px; row-gap: 7px; }
  .calendar-day { min-width: 0; min-height: 44px; aspect-ratio: auto; font-size: 11px; }
  .calendar-day::after { bottom: 5px !important; }
  .calendar-card .section-heading { margin-bottom: 8px; }
  .calendar-legend { font-size: 9px; gap: 13px; }
  .history-day h2 { font-size: 22px; }
  dialog { padding: 24px 21px; }
  .dialog-heading { margin-bottom: 24px; }
  .dialog-heading h2 { font-size: 25px; }
  .dialog-footer > .muted { font-size: 10px; }
  .dialog-footer > .button { font-size: 12px; }
}
@media (max-width: 359px) {
  main { padding-left: 15px; padding-right: 15px; }
  .topbar { padding: 0 15px; gap: 10px; }
  .mobile-brand { font-size: 13px; gap: 6px; }
  .mobile-brand > .icon { width: 21px; }
  .topbar-actions .button { padding: 11px; }
  .mobile-nav { padding-left: 10px; padding-right: 10px; gap: 5px; }
  .mobile-nav > a { padding: 8px; }
  .mobile-add { padding: 12px; }
  .eyebrow { font-size: 8px; }
  .history-stats > div { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Production forms, feedback, and authentication */
.signout-button { min-height: 30px; padding: 4px 0; border: 0; background: transparent; color: #b1bbcd; font-size: 11px; text-align: left; }
.signout-button:hover { color: var(--orange); }
.mobile-signout { display: none; }
.empty-state { padding: 28px 0; margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.loading-state { font-size: 14px; color: var(--muted); }
.form-error, .validation-errors { padding: 13px 16px; margin: 0 0 20px; background: #fff0ed; border-left: 3px solid #b32e19; color: #982511; font-size: 12px; line-height: 1.7; }
.validation-summary-valid { display: none; }
.validation-summary-errors ul, .validation-errors { padding-left: 23px; }
.validation-message { color: #a32a16; font-size: 12px; }
input:not([type=checkbox]), textarea { min-height: 44px; }
input[type=password], input:not([type]) { width: 100%; padding: 13px 14px; border: 1px solid #bbc4d2; border-radius: 6px; background: #fff; color: var(--ink); font-size: 14px; }
.danger-link, .text-button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; font-size: 12px; font-weight: 650; }
.danger-link { color: #ac2c16; }
.text-button { color: var(--blue); }
.toast { position: fixed; bottom: 28px; right: 28px; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 20px; max-width: calc(100% - 32px); background: var(--ink); color: #fff; box-shadow: 0 4px 24px #10131a33; border-radius: 8px; font-size: 13px; }
.toast > button:not(.icon-button) { background: transparent; color: var(--orange); border: 0; font-size: 13px; font-weight: 700; min-height: 44px; }
.toast .icon-button { color: #c6cfdf; }
.streak-paused { display: block; color: #ffb68f; font-size: 11px; margin: -12px 0 20px; }
.simple-page { max-width: 700px; margin: 10vh auto; }
.simple-page h1 { font-size: 32px; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; z-index: 100; padding: 20px; background: #fff1dc; color: #563b0c; font-size: 14px; }
#blazor-error-ui .reload { text-decoration: underline; margin-left: 10px; }
#blazor-error-ui .dismiss { float: right; border: 0; background: transparent; cursor: pointer; }
.login-body { min-height: 100vh; background: var(--ink); color: #fff; }
.login-main { width: min(450px, calc(100% - 40px)); margin: 0 auto; padding: 10vh 0 40px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 38px; font-size: 23px; font-weight: 850; letter-spacing: -.7px; }
.login-brand .icon { color: var(--orange); width: 32px; height: 32px; }
.login-brand > span { color: var(--orange); margin-left: -10px; }
.login-panel { padding: 32px; background: #fff; color: var(--ink); border-radius: 10px; border-top: 4px solid var(--orange); }
.login-panel h1 { font-size: 30px; letter-spacing: -1px; margin-bottom: 29px; }
.login-panel label { margin-top: 20px; }
.login-panel input[type=text] { font-size: 14px; }
.remember-login { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 44px; }
.remember-login input { accent-color: var(--blue); width: 18px; height: 18px; }
.login-submit { width: 100%; margin-top: 11px; }
.login-throttle { min-height: 18px; font-size: 11px; color: var(--muted); text-align: center; margin: 19px 0 0; }
@media (max-width: 680px) {
  .mobile-signout { display: block; }
  .mobile-signout .signout-button { color: var(--muted); font-size: 10px; min-height: 44px; }
  .topbar-actions { gap: 13px; }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); left: 16px; right: 16px; width: auto; }
  .login-main { padding-top: 7vh; }
  .login-panel { padding: 25px 22px; }
}