/* Design tokens. Tailwind maps its colours onto these (see layout.php). */
:root {
  --paper: #f3f1ea;
  --surface: #fbfaf6;
  --ink: #16150f;
  --ink-2: #57544a;
  --ink-3: #8b877b;
  --line: #e1ddd1;
  --line-strong: #cbc6b7;
  --accent: #2c46d6;
  --accent-soft: rgba(44, 70, 214, 0.07);
  --behind: #b42318;
  --on_track: #1d6a46;
  --ahead: #9a6400;
  --over: #16150f;
  --none: #b9b4a6;
  --danger-soft: rgba(180, 35, 24, 0.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #11100d;
    --surface: #191814;
    --ink: #ece9df;
    --ink-2: #a7a294;
    --ink-3: #6e6a5f;
    --line: #29271f;
    --line-strong: #3a372e;
    --accent: #8197ff;
    --accent-soft: rgba(129, 151, 255, 0.09);
    --behind: #f2806f;
    --on_track: #5cbb8b;
    --ahead: #e1b04c;
    --over: #ece9df;
    --none: #4a473e;
    --danger-soft: rgba(242, 128, 111, 0.12);
    color-scheme: dark;
  }
}

html { background: var(--paper); }
body { font-feature-settings: "ss01", "cv11"; }
.num { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.label { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }

/* Brand mark: a clock face with one quarter filled — quarter hours. */
.mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: conic-gradient(var(--ink) 0 25%, transparent 25% 100%); }

/* Progress bar with an "expected by today" tick. */
.bar { position: relative; height: 6px; background: var(--line); border-radius: 3px; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--c, var(--ink)); transition: width .15s ease; }
.bar > b { position: absolute; top: -4px; bottom: -4px; width: 1.5px; background: var(--ink); opacity: .55; transform: translateX(-50%); }
.bar.is-over > i { background: repeating-linear-gradient(-45deg, var(--over) 0 3px, transparent 3px 6px), var(--line-strong); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--none)); }
.dot.is-over { background: repeating-linear-gradient(-45deg, var(--over) 0 1.5px, transparent 1.5px 3px); box-shadow: inset 0 0 0 1px var(--over); }

/* Entry cells look like plain numbers until hovered or focused. */
.cell { width: 100%; min-width: 3.5rem; background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 6px 8px; text-align: right; outline: none; color: var(--ink); transition: border-color .15s, background .15s; }
.cell::placeholder { color: var(--ink-3); opacity: .35; }
.cell:hover { border-color: var(--line-strong); }
.cell:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.cell.is-invalid { border-color: var(--behind); background: var(--danger-soft); box-shadow: none; animation: nudge .25s; }
.cell.is-saved { animation: saved .9s ease-out; }
.cell:disabled { opacity: .35; }
@keyframes nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes saved { 0% { background: var(--accent-soft); } 100% { background: transparent; } }

.col-today { background: var(--accent-soft); }
.col-off { background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--line) 6px 7px); }

.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.seg a { padding: 4px 12px; border-radius: 6px; font-size: 13px; color: var(--ink-2); }
.seg a[aria-current="page"] { background: var(--ink); color: var(--paper); }

.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 7px; font-size: 13px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--ink-3); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { opacity: .9; }
.btn-icon { width: 32px; padding: 0; justify-content: center; }

.field { height: 36px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); outline: none; }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.toggle-off { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-radius: 4px; padding: 1px 5px; }
.toggle-off:hover { color: var(--ink); background: var(--line); }
.toggle-off[aria-pressed="true"] { color: var(--paper); background: var(--ink-2); }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; font-size: 13px; transition: all .15s; z-index: 50; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--behind); color: #fff; }

/* Sticky first column on narrow screens. */
.sheet th:first-child, .sheet td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.sheet tbody tr:hover td { background-color: color-mix(in srgb, var(--surface) 70%, transparent); }
.sheet tbody tr:hover td:first-child { background: var(--surface); }

input[type="checkbox"] { accent-color: var(--ink); width: 14px; height: 14px; }
input[type="date"] { color-scheme: inherit; }