@font-face {
  font-family: 'Familjen Grotesk';
  src: url('/fonts/familjen.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --paper: #EDF1EA;
  --raised: #F8FAF6;
  --ink: #14312A;
  --soft: #55695F;
  --line: #CDD8CE;
  --mark: #1C6B58;
  --mark-quiet: #A5C4B6;
  --flag: #8A4B00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10231E;
    --raised: #183029;
    --ink: #E9F0EA;
    --soft: #A0B4A9;
    --line: #2C463D;
    --mark: #6FCBB0;
    --mark-quiet: #36574C;
    --flag: #F0B566;
  }
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.4 'Familjen Grotesk', system-ui, sans-serif;
  font-feature-settings: 'tnum';
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: 3px; }

#app {
  max-width: 460px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 24px calc(env(safe-area-inset-bottom) + 112px);
}

.dayline { display: flex; align-items: center; justify-content: space-between; height: 44px; margin: 0 -12px; }
.dayline h1 { font-size: 17px; font-weight: 500; }
.step { width: 44px; height: 44px; font-size: 22px; color: var(--soft); }
.step:disabled { opacity: .3; cursor: default; }

.total { margin-top: 36px; display: flex; align-items: flex-start; font-weight: 500; letter-spacing: -.03em; line-height: .86; }
.total .rm { font-size: 26px; margin: 9px 6px 0 0; letter-spacing: 0; }
.total .whole { font-size: clamp(96px, 32vw, 136px); font-weight: 600; }
.total .sen { font-size: 34px; margin: 7px 0 0 4px; letter-spacing: -.01em; }
.verdict { margin-top: 18px; font-size: 20px; line-height: 1.3; max-width: 22em; }
.verdict span { display: block; color: var(--soft); }

.ribbon { margin-top: 44px; }
.ribbon-track { position: relative; height: 72px; border-bottom: 1.5px solid var(--ink); }
.tick { position: absolute; bottom: 0; width: 28px; height: 100%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; }
.tick i { display: block; width: 4px; border-radius: 3px 3px 0 0; background: var(--mark); }
.tick[aria-pressed="true"] i { background: var(--ink); width: 6px; }
.hours { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--soft); }
.readout { margin-top: 12px; font-size: 15px; min-height: 21px; }

section { margin-top: 44px; }
h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; }
h2 small { font-size: 15px; font-weight: 400; color: var(--soft); }

.bar-row { padding: 7px 0; }
.bar-row div { display: flex; justify-content: space-between; }
.bar-row b { font-weight: 400; }
.bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--mark); }

.paid { display: flex; gap: 32px; }
.paid div span { display: block; font-size: 15px; color: var(--soft); }
.paid div b { font-size: 20px; font-weight: 500; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; position: relative; }
.day { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 118px; }
.day i { width: 100%; max-width: 30px; border-radius: 4px 4px 0 0; background: var(--mark-quiet); min-height: 2px; }
.day.on i { background: var(--mark); }
.day span { margin-top: 6px; font-size: 13px; color: var(--soft); }
.day.on span { color: var(--ink); font-weight: 600; }

.buy { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; width: 100%; text-align: left; padding: 12px 0; border-top: 1px solid var(--line); }
.buy.lit { background: linear-gradient(var(--raised), var(--raised)); box-shadow: -10px 0 var(--raised), 10px 0 var(--raised); }
.buy strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy small { grid-column: 1; font-size: 14px; color: var(--soft); }
.buy em { font-style: normal; color: var(--flag); }
.empty { color: var(--soft); margin-top: 8px; }

.add {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  height: 52px; padding: 0 26px; border-radius: 26px;
  background: var(--ink); color: var(--paper); font-weight: 500;
}

dialog { margin: auto auto 0; width: 100%; max-width: 460px; border: 0; border-radius: 20px 20px 0 0; background: var(--raised); color: var(--ink); padding: 24px 24px calc(env(safe-area-inset-bottom) + 24px); }
dialog::backdrop { background: rgb(10 25 20 / .45); }
dialog h2 { font-size: 20px; }
label { display: block; margin-top: 16px; font-size: 15px; color: var(--soft); }
input, select { display: block; width: 100%; height: 48px; margin-top: 4px; padding: 0 12px; font-size: 17px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; appearance: none; }
.actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.primary { height: 48px; padding: 0 24px; border-radius: 24px; background: var(--ink); color: var(--paper); font-weight: 500; }
.quiet { height: 48px; color: var(--soft); }
.error { color: var(--flag); margin-top: 12px; font-size: 15px; }

.gate { margin-top: 18vh; }
.gate h1 { font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.gate p { margin-top: 8px; color: var(--soft); }
.gate button { margin-top: 20px; }

.tip { margin-top: 32px; padding: 14px 16px; background: var(--raised); border-radius: 12px; font-size: 15px; display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.tip button { color: var(--soft); white-space: nowrap; }