/* Tokens (M3-style roles) */
:root {
  --primary: #00696b;
  --on-primary: #ffffff;
  --primary-container: #9cf1f1;
  --on-primary-container: #002020;
  --secondary-container: #cce8e7;
  --on-secondary-container: #051f1f;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --warn-container: #ffe0b2;
  --on-warn-container: #3d2400;
  --surface: #f4fbfa;
  --surface-1: #eaf3f2;
  --surface-2: #e2ecec;
  --on-surface: #161d1d;
  --on-surface-variant: #3f4948;
  --outline: #6f7979;
  --outline-variant: #bec8c8;
  --scrim: rgba(0, 0, 0, .4);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 28px; --r-full: 999px;
  --target: 48px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --headline: 600 1.5rem/2rem var(--font);
  --title-l: 600 1.375rem/1.75rem var(--font);
  --title-m: 600 1rem/1.5rem var(--font);
  --body-l: 400 1rem/1.5rem var(--font);
  --body-m: 400 .875rem/1.25rem var(--font);
  --label-l: 500 .875rem/1.25rem var(--font);
  --label-s: 500 .75rem/1rem var(--font);
  --shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #80d5d4;
    --on-primary: #003737;
    --primary-container: #004f50;
    --on-primary-container: #9cf1f1;
    --secondary-container: #324b4b;
    --on-secondary-container: #cce8e7;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --warn-container: #5c3a00;
    --on-warn-container: #ffddb3;
    --surface: #0e1515;
    --surface-1: #161d1d;
    --surface-2: #1a2121;
    --on-surface: #dde4e3;
    --on-surface-variant: #bec8c8;
    --outline: #889392;
    --outline-variant: #3f4948;
    --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font: var(--body-l);
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
main { max-width: 640px; margin: 0 auto; padding: var(--s4); }
h1 { font: var(--headline); margin: var(--s2) 0 var(--s4); }
h2 { font: var(--title-m); margin: var(--s5) 0 var(--s2); color: var(--on-surface-variant); }
a { color: var(--primary); }
.muted { color: var(--on-surface-variant); font: var(--body-m); }
.row { display: flex; gap: var(--s2); align-items: center; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: var(--s3); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* Buttons */
button, .btn {
  font: var(--label-l);
  min-height: 40px;
  min-width: var(--target);
  padding: 0 var(--s5);
  border-radius: var(--r-full);
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  position: relative;
  touch-action: manipulation;
}
button::after { content: ""; position: absolute; inset: -4px; } /* 48px touch target */
button:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
button:active { background: color-mix(in srgb, var(--primary) 14%, transparent); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 2px;
}
button:disabled { opacity: .38; cursor: default; }
button.filled { background: var(--primary); color: var(--on-primary); border-color: transparent; }
button.filled:hover { background: color-mix(in srgb, var(--primary) 92%, var(--on-primary)); }
button.tonal { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
button.text { border-color: transparent; padding: 0 var(--s3); }
button.danger { color: var(--error); border-color: var(--error); }
button.big { min-height: 56px; font: var(--title-m); border-radius: var(--r-l); }
button.icon { padding: 0; width: var(--target); height: var(--target); border: none; font-size: 1.4rem; }

/* Inputs */
label.field { display: grid; gap: var(--s1); font: var(--label-l); color: var(--on-surface-variant); }
input, select, textarea {
  font: var(--body-l);
  color: var(--on-surface);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-s);
  min-height: var(--target);
  padding: 0 var(--s3);
  width: 100%;
}
textarea { padding: var(--s3); min-height: 72px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--on-surface-variant); opacity: .8; }
input.dur { font: var(--title-m); text-align: center; }

/* Cards */
.card { background: var(--surface-1); border-radius: var(--r-l); padding: var(--s4); }
.card + .card { margin-top: var(--s3); }

/* Day header */
.dayhead { display: flex; align-items: center; gap: var(--s1); margin-bottom: var(--s3); }
.dayhead .date-btn { flex: 1; flex-direction: column; font: var(--title-l); border: none; color: var(--on-surface); padding: 0 var(--s2); min-height: var(--target); }
.dayhead .date-btn small { display: block; font: var(--label-s); color: var(--on-surface-variant); }

/* Status */
.status { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-l); margin-bottom: var(--s3); }
.status.ok { background: var(--secondary-container); color: var(--on-secondary-container); }
.status.gap { background: var(--warn-container); color: var(--on-warn-container); }
.status.bad { background: var(--error-container); color: var(--on-error-container); }
.status b { font: var(--title-m); }
.status button { color: inherit; border-color: currentColor; padding: 0 var(--s3); }

/* Running */
.running { background: var(--primary-container); color: var(--on-primary-container); border-radius: var(--r-l); padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.running .pulse { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: pulse 1.5s infinite; flex: none; }
@keyframes pulse { 50% { opacity: .25; } }
.running button { background: var(--primary); color: var(--on-primary); border: none; }

/* Topic picker */
.picker { position: relative; }
.picker ul {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: var(--s1) 0;
  background: var(--surface-2); border-radius: var(--r-m); box-shadow: var(--shadow);
  max-height: 280px; overflow: auto;
}
.picker li { padding: var(--s3) var(--s4); cursor: pointer; min-height: var(--target); display: flex; align-items: center; gap: var(--s2); }
.picker li[aria-selected="true"], .picker li:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.picker li.new { color: var(--primary); font: var(--label-l); border-top: 1px solid var(--outline-variant); }
.picker li .muted { margin-left: auto; }
.recent { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: none; }
.recent button { flex: none; padding: 0 var(--s4); border-color: var(--outline-variant); color: var(--on-surface); }

/* Kind chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font: var(--label-l); min-height: 36px; padding: 0 var(--s3);
  border-radius: var(--r-s); border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant); background: transparent;
}
.chip[aria-pressed="true"] { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
.chip[aria-pressed="true"]::before { content: "✓"; }

/* Add form actions */
.add-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: stretch; }
.add-actions .or { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: center; grid-column: 1 / -1; color: var(--on-surface-variant); font: var(--label-s); }
.add-actions .or::before, .add-actions .or::after { content: ""; height: 1px; background: var(--outline-variant); }
.add-actions input[type="time"] { min-width: 0; }

/* Entry list */
.entries { list-style: none; margin: 0; padding: 0; }
.entry { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--outline-variant); cursor: pointer; border-radius: var(--r-s); }
.entry:hover { background: var(--surface-1); }
.entry .t { font: var(--label-s); color: var(--on-surface-variant); width: 48px; flex: none; padding-top: 3px; }
.entry .main { flex: 1; min-width: 0; }
.entry .title { font: var(--title-m); overflow-wrap: anywhere; }
.entry .comment { font: var(--body-m); color: var(--on-surface-variant); overflow-wrap: anywhere; }
.entry .dur { font: var(--title-m); white-space: nowrap; text-align: right; }
.entry .cut, table.rep tr.cut td, .cutsum { font: var(--body-m); color: var(--on-surface-variant); }
table.rep tr.cut td { border-bottom: none; padding-top: 0; }
table.rep tr:has(+ tr.cut) td { border-bottom: none; }
table.rep tr.cut.res td { border-bottom: 1px solid var(--outline-variant); color: var(--on-surface); }
.tag { display: inline-block; font: var(--label-s); padding: 2px var(--s2); border-radius: var(--r-s); background: var(--secondary-container); color: var(--on-secondary-container); margin-right: var(--s1); }
.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--on-surface-variant); }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal .wd { font: var(--label-s); color: var(--on-surface-variant); padding: var(--s2) 0; }
.cal button { min-width: 0; padding: 0; border: none; border-radius: var(--r-full); height: 44px; color: var(--on-surface); font: var(--body-l); flex-direction: column; gap: 0; }
.cal button.today { font-weight: 800; color: var(--primary); outline: 2px solid var(--primary); outline-offset: -2px; }
.cal button.sel { background: var(--primary); color: var(--on-primary); }
.cal button.other { visibility: hidden; }
.cal button .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--error); }
.cal button .dot.ok { background: var(--primary); }
.cal button.sel .dot { background: var(--on-primary); }

/* Dialog */
dialog { border: none; border-radius: var(--r-xl); padding: var(--s5); background: var(--surface-2); color: var(--on-surface); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
dialog::backdrop { background: var(--scrim); }
dialog h2 { font: var(--title-l); color: var(--on-surface); margin: 0 0 var(--s4); }
dialog .actions { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s5); flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.seg { display: flex; border: 1px solid var(--outline); border-radius: var(--r-full); overflow: hidden; }
.seg button { flex: 1; border: none; border-radius: 0; min-width: 0; padding: 0 var(--s2); color: var(--on-surface); }
.seg button + button { border-left: 1px solid var(--outline); }
.seg button[aria-pressed="true"] { background: var(--secondary-container); color: var(--on-secondary-container); }

/* Lists (topics, users) */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--outline-variant); min-height: 56px; }
.list li .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Report */
.report-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.report-sum div { background: var(--surface-1); border-radius: var(--r-m); padding: var(--s3); }
.report-sum b { display: block; font: var(--title-l); }
.report-sum label.ksum { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: center; cursor: pointer; background: var(--surface-1); border-radius: var(--r-m); padding: var(--s3); }
.report-sum label.ksum input { width: 20px; min-height: 20px; grid-row: span 2; }
.report-sum label.ksum.off { opacity: .45; }
.report-sum span { font: var(--label-s); color: var(--on-surface-variant); }
.table-wrap { overflow-x: auto; }
table.rep { width: 100%; border-collapse: collapse; font: var(--body-m); }
table.rep th, table.rep td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
table.rep td.num, table.rep th.num { text-align: right; white-space: nowrap; }
table.rep tr.off td { opacity: .4; text-decoration: line-through; }
table.rep input[type="checkbox"] { width: 22px; min-height: 22px; }
.print-only { display: none; }

/* Bottom nav */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center;
  background: var(--surface-2);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--outline-variant);
}
.nav a {
  flex: 1; max-width: 160px; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--on-surface-variant); font: var(--label-s);
}
.nav .nav-ico { font-size: 1.25rem; width: 56px; height: 30px; display: grid; place-items: center; border-radius: var(--r-full); }
.nav a.active { color: var(--on-surface); }
.nav a.active .nav-ico { background: var(--secondary-container); color: var(--on-secondary-container); }

/* Toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 30;
  background: var(--on-surface); color: var(--surface);
  padding: var(--s3) var(--s4); border-radius: var(--r-s); font: var(--body-m);
  max-width: calc(100vw - 32px); box-shadow: var(--shadow);
}

/* Login */
.login { max-width: 360px; margin: 12vh auto 0; }
.login .logo { width: 72px; height: 72px; margin-bottom: var(--s3); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Zero page margin removes the browser's own header/footer (date, title, URL, page number). */
@page { margin: 0; }
@media print {
  :root { --surface-1: #f3f3f3; --on-surface: #000; --on-surface-variant: #555; --outline-variant: #ccc; color-scheme: light; }
  body { padding: 15mm; background: #fff; color: #000; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .report-sum { display: flex; flex-wrap: wrap; gap: 2px var(--s5); margin: var(--s1) 0; }
  .report-sum div, .report-sum label.ksum { display: flex; align-items: baseline; gap: 6px; background: none; padding: 0; }
  .report-sum span { font: var(--body-m); }
  .report-sum b { display: inline; font: var(--title-m); }
  .nav, .toast, .no-print, button { display: none !important; }
  .print-only { display: block; }
  table.rep tr.off, .report-sum label.ksum.off { display: none; }
  .report-sum label.ksum input { display: none; }
  table.rep th, table.rep td { border-color: #ccc; }
  main { max-width: none; padding: 0; }
}

/* Calendar colours (Google's Basil, Blueberry, Grape, Tomato, Tangerine, Banana) */
.caldot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.cal-green { background: #0b8043; }
.cal-blue { background: #3f51b5; }
.cal-purple { background: #8e24aa; }
.cal-red { background: #d50000; }
.cal-orange { background: #f4511e; }
.cal-yellow { background: #f6bf26; }