/* Invoice walk. Tokens from the invoice design note (§4, §5, §9). */
:root {
  --bg: #0d1117;
  --tile: #161b22;
  --sel: #1c2a3b;
  --line: #30363d;
  --accent: #6cb6ff;
  --text: #e7ecf1;
  --muted: #a9b4c0;
  --meta: #97a4b2;
  --ctx: #5b6878;
  --green: #2ea043;
  --amber: #d29922;
  --blue-frame: #3d5a7a;
  --blue-bg: #172231;
  --violet: #8f7bd6;
  --violet-bg: #221d33;
  --violet-text: #d9ccff;
  --error: #ffb4a9;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: var(--text); }
button { background: var(--tile); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; min-height: 32px; cursor: pointer; }
button:disabled { color: var(--meta); cursor: not-allowed; }
button.primary { background: var(--accent); color: #0b1520; border-color: var(--accent); font-weight: 600; }
button.primary:disabled { background: var(--tile); color: var(--meta); border-color: var(--line); }
button.link { background: none; border: 0; color: var(--accent); padding: 0 4px; }
input, select, textarea { background: var(--tile); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
kbd { background: #2d333b; border-radius: 3px; padding: 0 4px; font-size: 11px; font-family: inherit; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--meta); }
.sr-only, .offscreen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tag { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px dashed var(--ctx); color: var(--muted); padding: 0 4px; border-radius: 3px; }
.chip { min-height: 30px; border-radius: 16px; padding: 0 10px; }
.chip--note { font-size: 12px; color: var(--meta); min-height: 0; border: 1px solid var(--line); }

/* header */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.top h1 { font-size: 18px; margin-right: auto; }
.home { color: var(--accent); text-decoration: none; }
.range { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #0b1520; font-weight: 600; }
.help-btn { border-radius: 50%; width: 32px; padding: 0; }
.help { background: var(--tile); margin: 8px 16px; padding: 10px 14px; border-radius: 6px; max-width: 760px; }
.help h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--meta); margin: 6px 0; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; }
.keys dt { font-family: ui-monospace, monospace; }
.keys dd { margin: 0; }
.help ul { margin: 0; padding-left: 18px; }

main { padding: 12px 16px 80px; }
.state { color: var(--meta); font-size: 15px; }
.state--error { color: var(--error); }
.error { color: var(--error); margin: 0; }
.warn { color: var(--amber); font-size: 12px; }
.warn summary { cursor: pointer; list-style: none; }
.warn summary::-webkit-details-marker { display: none; }
.warn summary span { text-decoration: underline; }
.warn[open] .show, .warn:not([open]) .hide { display: none; }
.warn p { margin: 4px 0 0; }
.toast { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); background: #2d333b; padding: 8px 14px; border-radius: 6px; z-index: 10; }

/* layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.rail { position: sticky; top: 8px; background: var(--tile); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rail h2 { font-size: 15px; }
.rail p { margin: 0; }
.rail-totals { font-weight: 600; }
.rail-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rail-foot .muted, .rail-totals .muted { white-space: nowrap; }
.lines { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 8px; white-space: pre-wrap; max-height: 50vh; overflow: auto; font-size: 12px; }

/* walk */
.walk-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.day-title { flex: 1 1 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.day-head h2 { font-size: 26px; white-space: nowrap; }
.day-pos { white-space: nowrap; }
.day-head h2:focus { outline: none; }
.day-head h2:focus-visible { text-decoration: underline 2px var(--accent); text-underline-offset: 6px; }
.steps { display: inline-flex; flex: none; gap: 6px; margin-left: auto; }
.steps button { min-height: 40px; white-space: nowrap; }
.strip { display: flex; gap: 4px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.cell { flex: 0 0 34px; height: 42px; padding: 0; border: 2px solid transparent; }
.cell[aria-current="date"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.cell--full { background: var(--green); color: #04130a; }
.cell--half { background: linear-gradient(to top, var(--green) 50%, var(--tile) 50%); }
.cell--hours { background: var(--sel); border-color: var(--green); }
.cell--none { border: 2px dashed var(--meta); }
.cell--not-marked { border-color: var(--amber); }
.cell--weekend { color: var(--meta); }
.cell--future { color: var(--ctx); }
.band { background: var(--tile); border-radius: 8px; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.marks { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.mark { white-space: nowrap; min-height: 48px; min-width: 76px; border: 0; border-radius: 0; border-right: 1px solid var(--line); background: transparent; }
.mark:last-child { border-right: 0; }
.mark[aria-pressed="true"] { background: var(--accent); color: #0b1520; font-weight: 700; }
.mark[aria-pressed="true"] kbd { background: #0b1520; color: var(--text); }
.bill { white-space: nowrap; border-radius: 12px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.bill--billable { background: var(--green); color: #04130a; }
.bill--not-billable { border: 1px dashed var(--meta); color: var(--muted); }
.bill--not-marked { border: 1px solid var(--amber); color: var(--amber); }
.also { color: var(--meta); font-size: 12px; }
.hours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hours input { width: 72px; text-align: center; min-height: 40px; }
.hours > button:not(.chip) { min-width: 40px; min-height: 40px; }
.blocks { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note { border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.note input, .note textarea { width: 100%; font-weight: normal; }
.note--invoice { border: 2px solid var(--blue-frame); background: var(--blue-bg); }
.note--private { border: 2px dashed var(--violet); background: var(--violet-bg); color: var(--violet-text); }
.note--private textarea { color: var(--violet-text); }
.note--private .muted { color: var(--violet-text); font-weight: normal; white-space: nowrap; }
.preview { font-size: 12px; font-weight: normal; color: var(--muted); min-height: 1em; }
.ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.timeline-empty { margin: 0; }
.day-rows { display: flex; flex-direction: column; gap: 8px; }

/* day strip: decorative, to scale */
.strip-day { padding: 0 2px; }
.strip-track { position: relative; height: 14px; background: var(--tile); border-radius: 3px; overflow: hidden; }
.strip-day--2 .strip-track { height: 24px; }
.sd-block { position: absolute; top: 2px; height: 10px; min-width: 2px; background: #4a5563; border-radius: 2px; text-decoration: none; }
.sd-block--client { background: var(--accent); }
.sd-block--open { background: none; border: 1px dashed var(--meta); }
.sd-block--client.sd-block--open { border-color: var(--accent); }
.sd-block--lane2 { top: 12px; }
.sd-block.is-hot { z-index: 2; box-shadow: 0 0 0 2px var(--text); }
.sd-idle { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, transparent 0 3px, #3a4350 3px 5px); }
.strip-ticks { position: relative; height: 14px; font-size: 10px; color: var(--meta); font-variant-numeric: tabular-nums; }
.tick { position: absolute; transform: translateX(-50%); }

/* rows table */
.rows { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-variant-numeric: tabular-nums; }
.rows thead th { text-align: left; font-weight: normal; font-size: 12px; color: var(--meta); padding: 0 8px; }
.rows td { padding: 6px 8px; vertical-align: baseline; }
.rows .c-dur, .rows .c-sum, .row-dur, .row-sum { text-align: right; white-space: nowrap; }
.row-time { white-space: nowrap; color: var(--meta); }
.row td:first-child { border-left: 4px solid transparent; }
.row.is-hot td { background: #243044; }
.row--mine td { background: var(--sel); }
.row--mine.is-hot td { background: #243044; }
.row--mine td:first-child { border-left-color: var(--accent); }
.row--mine .row-title-text, .row--mine .row-who { font-weight: 600; }
.row--mine .row-dur, .row--mine .row-sum { color: var(--text); }
.row--other td, .row--personal td, .row--loose td { background: var(--tile); color: var(--muted); }
.row--other td:first-child, .row--personal td:first-child, .row--loose td:first-child { border-left: 2px dashed var(--ctx); }
.row--personal td:first-child { border-left-color: var(--violet); }
.row-dur, .row-sum { color: var(--meta); }
.row-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
a.row-open { color: inherit; text-decoration: none; }
a.row-open:hover, .row.is-hot a.row-open { text-decoration: underline; }
.row-title { width: 100%; }
.row-title > * + * { margin-left: 8px; }
.row-next { color: var(--meta); font-size: 12px; }
.tag--state { margin-left: 6px; text-transform: none; letter-spacing: 0; }
.open { border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 12px; color: var(--muted); }
.spacer td { padding: 0 8px; height: 20px; font-size: 12px; color: var(--meta); text-align: center; position: relative; }
.spacer td::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line); }
.spacer td span { position: relative; background: var(--bg); padding: 0 8px; white-space: nowrap; }
.spacer--overlap td { color: var(--amber); }
.spacer--overlap td::before { border-top: 1px solid var(--amber); }

/* day totals */
.totals { background: var(--tile); border-radius: 6px; padding: 8px 10px; }
.totals summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; }
.totals summary h3 { font-size: 14px; }
.totals summary .muted { white-space: nowrap; font-variant-numeric: tabular-nums; }
.totals-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.totals-table th, .totals-table td { padding: 4px 8px; text-align: left; white-space: nowrap; font-weight: normal; border-bottom: 1px solid var(--line); }
.totals-table thead th { color: var(--meta); font-size: 12px; }
.totals-table .tot-dur, .totals-table .tot-n { text-align: right; }
.tot th { border-left: 4px solid transparent; }
.tot--account th, .tot--account .tot-dur { color: var(--text); }
.tot--realm th { padding-left: 26px; color: var(--muted); }
.tot--client { background: var(--sel); }
.tot--client.tot--account th { border-left-color: var(--accent); font-weight: 700; }
.tot--client .tot-dur { font-weight: 700; }
.tot--all th, .tot--all td { color: var(--muted); }
.tot--idle th, .tot--idle td { color: var(--meta); font-style: italic; border-bottom: 0; }
.chip-state { display: inline-block; margin-left: 6px; border: 1px solid var(--amber); color: var(--amber); border-radius: 10px; padding: 0 7px; font-size: 11px; white-space: nowrap; font-style: normal; }
.chip--suggest { border-color: var(--accent); color: var(--accent); }

/* month */
.month p { margin: 0 0 8px; }
.month-table { width: 100%; border-collapse: collapse; }
.month-table th, .month-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.month-table thead th { color: var(--meta); font-weight: normal; font-size: 12px; }
.mrow { cursor: pointer; }
.mrow:hover, .mrow:focus { background: var(--sel); outline: none; }
.mrow:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
.mrow[aria-current="date"] th { box-shadow: inset 3px 0 0 var(--accent); }
.mrow--weekend, .mrow--future { color: var(--meta); }
.mrow--not-marked td:nth-child(2) { color: var(--amber); }
.mrow--full td:nth-child(2), .mrow--half td:nth-child(2), .mrow--hours td:nth-child(2) { color: var(--green); font-weight: 600; }

/* clients */
.setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1100px; }
.setup-list { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.setup h2 { font-size: 16px; }
.clients { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.client { background: var(--tile); border-radius: 6px; padding: 10px 12px; border-left: 4px solid var(--accent); }
.client[aria-current="true"] { box-shadow: 0 0 0 1px var(--accent); }
.client--archived { border-left-color: var(--ctx); color: var(--muted); }
.client-head { display: flex; gap: 8px; align-items: center; }
.sources { margin: 4px 0 8px; padding-left: 18px; color: var(--meta); font-size: 13px; }
.client-actions { display: flex; gap: 6px; }
.client-form { background: var(--tile); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.client-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.client-form input, .client-form select, .client-form textarea { font-weight: normal; width: 100%; }
.client-form select { width: auto; }
.form-actions { display: flex; gap: 8px; }
.suggest h3 { font-size: 13px; color: var(--meta); margin-bottom: 4px; }
.suggest ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 1099px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
}

@media (max-width: 699px) {
  .top { padding: 8px; gap: 8px; }
  main { padding: 8px 8px 96px; }
  .day-head h2 { font-size: 20px; }
  .steps { margin-left: 0; }
  .band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; border-radius: 0; padding: 6px; gap: 6px; border-top: 1px solid var(--line); }
  .marks { display: flex; width: 100%; }
  .mark { flex: 1 1 0; min-width: 0; min-height: 48px; }
  .band > :not(.marks) { display: none; }
  .notes, .setup { grid-template-columns: 1fr; }
  .rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rows, .rows tbody { display: block; }
  .row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-top: 2px; padding: 6px 8px; }
  .row::after { content: ""; flex-basis: 100%; order: 4; }
  .row td { display: block; padding: 0; background: none !important; border: 0 !important; }
  .row--mine { background: var(--sel); border-left: 4px solid var(--accent); }
  .row.is-hot { background: #243044; }
  .row--other, .row--personal, .row--loose { background: var(--tile); border-left: 2px dashed var(--ctx); }
  .row--personal { border-left-color: var(--violet); }
  .row-time { order: 1; }
  .row-dur { order: 2; text-align: left; }
  .row-sum { order: 3; margin-left: auto; }
  .row-who { order: 5; max-width: none; }
  .row-title { order: 6; width: auto; flex: 1 1 0; min-width: 0; margin-left: -4px; }
  .row-title::before { content: "\00b7"; margin-right: 6px; color: var(--meta); font-weight: normal; }
  .spacer { display: block; }
  .spacer td { display: block; height: 18px; text-align: left; }
  .tick--3h { display: none; }
  kbd { display: none; }
  .month-table td:nth-child(5), .month-table th:nth-child(5) { display: none; }
}

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