/* Poop: phone first. Designed at 390px wide; wider screens only get more margin. */
:root{
  --bg:#FAF9F5; --surface:#FFFFFF; --ink:#232B26; --muted:#5C685F; --line:#E3E1D8;
  --accent:#7A4B2A; --accent-soft:#F1E7DF; --warn:#8A6215; --danger:#A33A3A;
  --tap-primary:56px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141815; --surface:#1C221E; --ink:#E6E9E2; --muted:#9AA79D; --line:#2C342E;
    --accent:#C9966B; --accent-soft:#2E251D; --warn:#D3A04C; --danger:#E07A7A;
  }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-wrap:anywhere;
  padding-bottom:calc(var(--tap-primary) + 24px + env(safe-area-inset-bottom));}
main{max-width:30rem;margin:0 auto;padding:1rem 1rem 2rem;
  padding-left:max(1rem, env(safe-area-inset-left));
  padding-right:max(1rem, env(safe-area-inset-right));}
a{color:var(--accent);text-decoration:none;}
h1{font-size:1.5rem;line-height:1.2;margin:.8rem 0 .4rem;}
.muted{color:var(--muted);}
.center{text-align:center;padding-top:3rem;}

/* Header stays put and clears the notch. */
.top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.2rem .5rem;padding-top:calc(.2rem + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);background:var(--surface);}
.sticky{position:sticky;top:0;z-index:5;}
.top nav{display:flex;gap:.2rem;align-items:center;font-size:.95rem;}
/* Header links and buttons are 48px tap targets too. */
.top a,.top button{display:inline-flex;align-items:center;min-height:48px;padding:0 .5rem;}
.brand{font-weight:700;color:var(--ink);font-size:1.1rem;}
.quiet,.who{color:var(--muted);}
.who{padding:0 .5rem;}
.inline{display:inline;margin:0;}
.linklike{background:none;border:0;font:inherit;cursor:pointer;}

/* Tap targets: every control is at least 48px tall. Inputs use 16px text so iOS does not zoom. */
.btn,.chip,input,select,textarea,button{min-height:48px;font-size:16px;font-family:inherit;}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:0 1.25rem;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:600;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);
  min-height:var(--tap-primary);font-size:1.1rem;}
.btn-danger{color:var(--danger);border-color:var(--danger);}

/* The primary action bar sits at the bottom, within thumb reach, above the home bar. */
.bar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:.75rem;
  padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line);}
.bar .btn{flex:1;}

/* Chips: big radio buttons with the real input hidden. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:.4rem 0 .9rem;}
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:0 1rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;}
.chip input{position:absolute;opacity:0;width:0;height:0;min-height:0;}
.chip:has(input:checked){background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent);font-weight:600;}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}

input[type=text],input[type=datetime-local],textarea,select{width:100%;
  padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);}
label{display:block;font-weight:600;margin-top:.8rem;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1rem;margin:.8rem 0;}
.errors{background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;
  padding:.6rem .9rem;margin:.6rem 0;}

/* Screen tabs under the header: five equal 48px cells. */
.tabs{display:flex;background:var(--surface);border-bottom:1px solid var(--line);}
.tabs a{flex:1;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;color:var(--muted);font-size:.9rem;}
.tabs a.current{color:var(--accent);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent);}

/* Home */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:.8rem .3rem;text-align:center;}
.stat b{display:block;font-size:1.6rem;line-height:1.1;}
.stat b.small{font-size:.95rem;line-height:1.3;padding-top:.2rem;}
.stat span{color:var(--muted);font-size:.85rem;}
.undo{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;
  padding:.3rem .3rem .3rem .9rem;margin:.6rem 0;}
.btn-small{width:auto;padding:0 1rem;}
.bar form.grow{flex:2;display:flex;}
.bar form.grow .btn{flex:1;}
.saved{color:var(--accent);font-weight:600;}

/* History */
h2.day{font-size:1rem;margin:1.2rem 0 .2rem;}
.rows{list-style:none;margin:0 0 1rem;padding:0;}
.rows li{border-bottom:1px solid var(--line);}
.row{display:flex;align-items:center;gap:.5rem;min-height:56px;padding:.4rem 0;
  color:var(--ink);flex-wrap:wrap;}
.row b{min-width:3.2rem;}
.flag{font-style:normal;font-size:.8rem;color:var(--warn);background:var(--accent-soft);
  border-radius:999px;padding:.1rem .5rem;}
.note{margin:-.3rem 0 .6rem;color:var(--muted);font-size:.9rem;}
.danger-zone{margin:1.5rem 0;}

/* Trends chart: inline SVG, scales to the screen width. */
.chart{width:100%;height:auto;display:block;margin:.6rem 0;}
.chart .col{fill:var(--accent);opacity:.55;}
.chart .col.blood{fill:var(--danger);opacity:.7;}
.chart .night{fill:var(--ink);opacity:.6;}
.chart .grid{stroke:var(--line);}
.chart .tick{fill:var(--muted);font-size:11px;}
.chart .dot{fill:var(--danger);}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:.4rem 0 1rem;}
.wday{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:.4rem 0;text-align:center;font-size:.8rem;color:var(--muted);}
.wday b{display:block;font-size:1.1rem;color:var(--ink);}
.wday small{display:block;font-size:.65rem;}
.wday.blood{border-color:var(--danger);}
.legend{font-size:.85rem;color:var(--muted);}
.key{display:inline-block;width:.9rem;height:.9rem;border-radius:3px;vertical-align:-2px;margin:0 .2rem 0 .6rem;}
.key-visits{background:var(--accent);opacity:.55;}
.key-night{background:var(--ink);opacity:.6;}
.key-blood{background:var(--danger);opacity:.7;}

/* Export */
.range{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:end;}
.range .btn{grid-column:1 / -1;}
input[type=date]{width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);}
textarea.csv{font:12px/1.4 ui-monospace,Menlo,monospace;}

/* Score badge: red at 1 through amber to green at 10. */
.score{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;
  min-height:2rem;padding:0 .4rem;border-radius:999px;color:#fff;font-weight:700;font-size:.95rem;
  line-height:1;vertical-align:middle;}
.score-1{background:hsl(0 65% 42%);}
.score-2{background:hsl(13 65% 42%);}
.score-3{background:hsl(27 65% 42%);}
.score-4{background:hsl(40 65% 42%);}
.score-5{background:hsl(53 60% 40%);}
.score-6{background:hsl(67 55% 38%);}
.score-7{background:hsl(80 55% 36%);}
.score-8{background:hsl(93 55% 35%);}
.score-9{background:hsl(107 55% 34%);}
.score-10{background:hsl(120 55% 33%);}
h1 .score{margin-left:.3rem;}
.stat span .score{margin-left:.2rem;height:1.4rem;min-height:1.4rem;min-width:1.4rem;font-size:.8rem;}
.about{margin:1rem 0;color:var(--muted);font-size:.9rem;}
.about summary{cursor:pointer;min-height:48px;display:flex;align-items:center;}