/* Phone-first layout: large controls, safe-area spacing, and local light/dark colors. */
:root {
  color-scheme:light;
  --paper:#f4f0e8;
  --card:#fffdf8;
  --ink:#26352d;
  --muted:#6f7b72;
  --line:#e5e3d9;
  --green:#315c49;
  --green-soft:#e6eee8;
  --gold:#d49c55;
  --red:#bd7866;
  --shadow:0 12px 32px #2c423012;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  min-height:100vh
}
.app-shell {
  max-width:820px;
  margin:0 auto;
  padding:env(safe-area-inset-top) 18px calc(28px + env(safe-area-inset-bottom))
}
.topbar {
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand {
  display:flex;
  gap:12px;
  align-items:center
}
.brand-mark {
  font-size:34px;
  color:var(--green)
}
.brand h1 {
  font:500 22px Georgia,serif;
  margin:0
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  color:var(--muted);
  margin:0 0 6px
}
.account {
  display:flex;
  gap:10px;
  align-items:center
}
.sync-pill {
  font-size:11px;
  background:#e9e9dd;
  border-radius:99px;
  padding:7px 11px;
  color:var(--muted)
}
main {
  min-height:70vh
}
.login-card,.hero-card,.chart-card,.data-card,.note-card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow)
}
.login-card {
  max-width:440px;
  margin:50px auto;
  padding:28px
}
.login-card h2,.section-heading h2 {
  font:500 30px Georgia,serif;
  margin:4px 0 12px
}
.muted {
  color:var(--muted)
}
.small {
  font-size:12px
}
.login-card label {
  display:block;
  margin:18px 0 7px;
  font-size:13px
}
.login-card input {
  width:100%;
  height:48px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 12px;
  font:inherit;
  background:var(--card);
  color:var(--ink)
}
.primary-button,.secondary-button,.quiet-button,.icon-button,.tab {
  font:inherit;
  border:0;
  cursor:pointer;
  min-height:44px;
  border-radius:13px;
  padding:0 17px
}
.primary-button {
  background:var(--green);
  color:white;
  font-weight:600
}
.primary-button:disabled {
  opacity:.55
}
.secondary-button {
  background:var(--green-soft);
  color:var(--green);
  font-weight:600
}
.quiet-button {
  background:transparent;
  color:var(--muted);
  padding:0 10px
}
.icon-button {
  width:44px;
  padding:0;
  font-size:19px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink)
}
.full {
  width:100%;
  margin-top:22px
}
.form-message {
  min-height:20px;
  font-size:13px;
  color:var(--red)
}
.welcome-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:6px 2px 18px
}
.welcome-row strong {
  font-size:14px
}
.tabs {
  display:flex;
  gap:6px;
  background:#e9e7dc;
  padding:5px;
  border-radius:16px;
  margin:0 0 18px
}
.tab {
  flex:1;
  background:transparent;
  color:var(--muted);
  font-weight:600
}
.tab.active {
  background:var(--card);
  color:var(--ink);
  box-shadow:0 2px 8px #0000000b
}
.panel {
  animation:appear .18s ease
}
@keyframes appear {
  from {
    opacity:.6;
    transform:translateY(3px)
  }
  to {
    opacity:1;
    transform:none
  }
  
}
.hero-card {
  padding:30px 28px 24px;
  background:linear-gradient(135deg,#fffcf4,#edf2e9)
}
.hero-card h2 {
  font:500 34px Georgia,serif;
  margin:8px 0
}
.hero-card>p {
  margin-top:0
}
.track-row {
  display:flex;
  gap:9px;
  margin-top:22px
}
.track-row select {
  min-width:0;
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 12px;
  background:#fffdf8;
  color:var(--ink);
  font:inherit
}
.track-row button {
  white-space:nowrap
}
.track-hint {
  margin:8px 0
}
.player {
  text-align:center;
  border-top:1px solid #e2e5d9;
  margin-top:20px;
  padding-top:22px
}
.timer {
  font:400 45px Georgia,serif;
  font-variant-numeric:tabular-nums
}
.player-state {
  margin:2px 0 17px;
  font-size:13px
}
.player-actions {
  display:flex;
  justify-content:center;
  gap:8px
}
.player-actions button {
  min-width:100px
}
.metric-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:14px 0
}
.metric-card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:17px;
  padding:15px
}
.metric-card strong {
  display:block;
  font:500 24px Georgia,serif;
  margin-bottom:4px
}
.metric-card span {
  font-size:11px;
  color:var(--muted)
}
.note-card {
  display:flex;
  gap:12px;
  align-items:center;
  padding:15px 18px;
  margin-top:12px;
  color:var(--green);
  background:#edf2e9
}
.note-card p {
  margin:0;
  font:italic 15px Georgia,serif
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:18px 2px 14px
}
.section-heading h3 {
  font:500 18px Georgia,serif;
  margin:0 0 4px
}
.chart-card,.data-card {
  padding:19px;
  margin-bottom:12px
}
.chart {
  height:160px;
  display:flex;
  align-items:stretch;
  gap:6px;
  padding:12px 2px 0
}
.bar-group {
  flex:1;
  min-width:0;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:3px;
  position:relative;
  border-bottom:1px solid var(--line)
}
.bar {
  min-width:4px;
  max-width:17px;
  width:37%;
  border-radius:5px 5px 1px 1px;
  align-self:end
}
.bar.complete {
  background:var(--green)
}
.bar.broken {
  background:var(--gold)
}
.bar-label {
  position:absolute;
  bottom:-19px;
  font-size:9px;
  color:var(--muted)
}
.legend {
  display:flex;
  gap:18px;
  justify-content:center;
  margin-top:27px;
  font-size:11px;
  color:var(--muted)
}
.legend span {
  display:flex;
  align-items:center;
  gap:6px
}
.legend-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green)
}
.legend-dot.broken {
  background:var(--gold)
}
.table-scroll {
  overflow-x:auto
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:8px
}
th,td {
  text-align:left;
  padding:10px 5px;
  border-bottom:1px solid var(--line)
}
th {
  font-weight:500;
  color:var(--muted)
}
.daily-list {
  display:grid;
  gap:8px
}
.day-label {
  font-size:11px;
  color:var(--muted);
  margin:12px 0 2px
}
.sitting-row {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px
}
.sitting-main {
  min-width:0;
  flex:1
}
.sitting-main strong {
  display:block;
  font-size:13px;
  overflow-wrap:anywhere
}
.sitting-main span {
  font-size:11px;
  color:var(--muted)
}
.status-tag {
  font-size:10px;
  border-radius:99px;
  padding:5px 8px;
  background:var(--green-soft);
  color:var(--green)
}
.status-tag.broken {
  background:#f5e9df;
  color:#9a5b31
}
.delete-button {
  border:0;
  background:transparent;
  color:#9b7267;
  font-size:20px;
  min-width:36px;
  min-height:36px
}
.reminder {
  background:#fff0d6;
  color:#805b23;
  padding:12px 14px;
  border-radius:13px;
  margin-bottom:12px;
  font-size:13px
}
.data-card h3 {
  font:500 18px Georgia,serif;
  margin:0 0 7px
}
.data-card p {
  font-size:13px;
  line-height:1.5
}
.button-row {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.file-button {
  display:inline-flex;
  align-items:center
}
.track-list {
  display:grid;
  gap:8px
}
.track-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px;
  border:1px solid var(--line);
  border-radius:12px
}
.track-item span {
  overflow-wrap:anywhere
}
.track-item button {
  border:0;
  color:var(--red);
  background:transparent;
  padding:8px
}
.privacy-note {
  line-height:1.5;
  padding:5px 5px 15px
}
.toast {
  position:fixed;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,15px);
  opacity:0;
  pointer-events:none;
  background:#26352d;
  color:white;
  padding:11px 16px;
  border-radius:12px;
  font-size:13px;
  transition:.18s;
  max-width:calc(100% - 36px);
  text-align:center
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
footer {
  display:flex;
  justify-content:space-between;
  color:#92988c;
  font-size:11px;
  padding:18px 3px
}
.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
}
 [hidden] {
  display:none!important
}
:focus-visible {
  outline:3px solid #d49c55;
  outline-offset:3px
}
@media(min-width:650px) {
  .app-shell {
    padding-left:28px;
    padding-right:28px
  }
  .hero-card {
    padding:38px
  }
  .metric-grid {
    gap:14px
  }
  .metric-card {
    padding:20px
  }
  
}
@media(max-width:430px) {
  .app-shell {
    padding-left:13px;
    padding-right:13px
  }
  .topbar {
    height:78px
  }
  .brand h1 {
    font-size:19px
  }
  .sync-pill {
    font-size:10px;
    padding:6px 8px
  }
  .quiet-button {
    font-size:12px
  }
  .hero-card {
    padding:24px 17px 19px
  }
  .hero-card h2 {
    font-size:29px
  }
  .track-row {
    gap:6px
  }
  .track-row .secondary-button {
    padding:0 11px;
    font-size:13px
  }
  .metric-card {
    padding:12px 9px
  }
  .metric-card strong {
    font-size:20px
  }
  .metric-card span {
    font-size:10px
  }
  
}

[data-theme="dark"] {
  color-scheme:dark;
  --paper:#17221c;
  --card:#202d25;
  --ink:#e5ece5;
  --muted:#a5b1a6;
  --line:#344239;
  --green:#9cc5a9;
  --green-soft:#2b4034;
  --gold:#dbad6c;
  --red:#d99a89;
  --shadow:0 12px 32px #00000030
}
[data-theme="dark"] .hero-card {
  background:linear-gradient(135deg,#26372c,#29392e)
}
[data-theme="dark"] .track-row select {
  background:var(--card);
  color:var(--ink)
}
[data-theme="dark"] .tabs {
  background:#27342c
}
[data-theme="dark"] .tab.active {
  background:#202d25
}
[data-theme="dark"] .note-card {
  background:#26392d
}
[data-theme="dark"] .status-tag.broken {
  background:#49392b;
  color:#f0c291
}

.chart {
  height:178px;
  width:100%;
  display:block;
  margin-top:4px
}
.chart svg {
  width:100%;
  height:100%;
  overflow:visible
}
.chart .complete {
  fill:var(--green)
}
.chart .broken {
  fill:var(--gold)
}
.chart .month-label {
  font:10px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  fill:var(--muted)
}