:root {
  /* Hours Truly: Ink Navy #1B2A41 and Amber #D08418 (see static/brand). */
  --navy: #1B2A41;
  --amber: #D08418;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --ink: #1B2A41;
  --ink-2: #33415a;
  --muted: #66728a;
  --line: #e2e6ee;
  --accent: #1B2A41;          /* buttons and selected things */
  --accent-ink: #ffffff;
  --accent-soft: #e8ecf3;
  --accent-hover: #2a3d5c;
  --link: #22599b;
  --highlight: #D08418;       /* the amber: marks what's active or running */
  --highlight-soft: #fbf0e0;
  --highlight-ink: #965c0b;   /* amber dark enough for text on white */
  --sidebar: #1B2A41;
  --sidebar-ink: #c5cedc;
  --sidebar-ink-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, .07);
  --success: #05875f;
  --success-soft: #eaf7f1;
  --warn: #a35f08;
  --warn-soft: #fdf5e7;
  --danger: #cf2a2a;
  --danger-soft: #fdf1f1;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(27, 42, 65, .05), 0 1px 3px rgba(27, 42, 65, .07);
  --shadow-lg: 0 10px 30px rgba(27, 42, 65, .14);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head-font: "Outfit", var(--font);
  color-scheme: light;
}

/* Dark colours: when the device is in dark mode (unless Light was chosen), or when Dark was chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1320;
    --surface: #152035;
    --surface-2: #1b2840;
    --ink: #eef2f8;
    --ink-2: #cdd5e2;
    --muted: #93a0b6;
    --line: #26344d;
    --accent: #E39A34;
    --accent-ink: #1B2A41;
    --accent-soft: #2e2615;
    --accent-hover: #f0b25a;
    --link: #f0b25a;
    --highlight: #E39A34;
    --highlight-soft: #2e2615;
    --highlight-ink: #f0b25a;
    --sidebar: #0a101b;
    --sidebar-ink: #aab6c8;
    --sidebar-ink-strong: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, .06);
    --success: #34d399;
    --success-soft: #052e22;
    --warn: #fbbf24;
    --warn-soft: #2d2205;
    --danger: #f87171;
    --danger-soft: #2c1010;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1320;
  --surface: #152035;
  --surface-2: #1b2840;
  --ink: #eef2f8;
  --ink-2: #cdd5e2;
  --muted: #93a0b6;
  --line: #26344d;
  --accent: #E39A34;
  --accent-ink: #1B2A41;
  --accent-soft: #2e2615;
  --accent-hover: #f0b25a;
  --link: #f0b25a;
  --highlight: #E39A34;
  --highlight-soft: #2e2615;
  --highlight-ink: #f0b25a;
  --sidebar: #0a101b;
  --sidebar-ink: #aab6c8;
  --sidebar-ink-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, .06);
  --success: #34d399;
  --success-soft: #052e22;
  --warn: #fbbf24;
  --warn-soft: #2d2205;
  --danger: #f87171;
  --danger-soft: #2c1010;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; font-family: var(--head-font); }
h1 { font-size: 26px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 14.5px; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-line; }
.hidden { display: none !important; }
.icon { flex-shrink: 0; }

/* ---------- layout */
.layout { display: flex; min-height: 100vh; background: linear-gradient(to right, var(--sidebar) 232px, transparent 232px); }
@media (max-width: 820px) { .layout { background: none; } }
.sidebar {
  width: 232px; flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  padding: 22px 14px;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 8px 26px;
}
.brand-logo { display: block; width: 168px; height: auto; }
.brand-mark-only { display: none; width: 44px; height: auto; }
.brand:hover { text-decoration: none; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--sidebar-ink); font-weight: 500; position: relative;
}
.sidebar nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-ink-strong); text-decoration: none; }
.sidebar nav a.active { background: rgba(208, 132, 24, .16); color: var(--sidebar-ink-strong); }
.sidebar nav a.active .icon { color: var(--amber); }
.sidebar nav a.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); }

.main { flex: 1; min-width: 0; }
.content { max-width: 1120px; margin: 0 auto; padding: 32px 32px 64px; display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .brand { padding: 0; }
  .brand-logo { display: none; }
  .brand-mark-only { display: block; }
  .sidebar nav a.active::before { left: 6px; right: 6px; top: auto; bottom: -10px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  /* Seven sections: the row scrolls sideways if the phone is too narrow for all of them. */
  .sidebar { gap: 8px; }
  .sidebar nav { flex-direction: row; gap: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
  .sidebar nav a:first-child { margin-left: auto; }  /* right-aligned, but still scrollable */
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav a { padding: 8px 5px; flex-direction: column; gap: 2px; font-size: 10.5px; flex-shrink: 0; }
  .content { padding: 20px 16px 48px; }
}
@media (max-width: 400px) { .sidebar .brand { display: none; } }

/* ---------- page head */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head p { margin-top: 4px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

/* ---------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2.wide-left { grid-template-columns: 3fr 2fr; }
@media (max-width: 900px) { .grid-2, .grid-2.wide-left { grid-template-columns: 1fr; } }

.empty { text-align: center; padding: 28px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-small { padding: 12px 0; }

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  font: inherit; font-weight: 600; font-size: 14px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .chip-btn:focus-visible, .icon-btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 1px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); filter: brightness(.92); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-ghost.danger:hover { color: var(--danger); background: var(--danger-soft); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.icon-btn {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px;
  border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.icon-btn.danger:hover { color: var(--danger); background: var(--danger-soft); }

/* ---------- forms */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field.span-full { grid-column: 1 / -1; }
.field.align-end { justify-content: flex-end; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field.span-2 { grid-column: 1 / -1; }
}
label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
input, select, textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 12px; height: 40px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { padding: 10px 12px; height: auto; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled { background: var(--surface-2); color: var(--muted); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; height: 40px; cursor: pointer; font-weight: 500; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.form-actions.spread { justify-content: space-between; }
.form-actions.sticky { position: sticky; bottom: 16px; }
.row { display: flex; gap: 10px; }
.hint { margin-top: 10px; }

.input-prefix, .input-suffix {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.input-prefix:focus-within, .input-suffix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-prefix span, .input-suffix span { padding: 0 10px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.input-prefix span { padding-right: 0; }
.input-prefix input, .input-suffix input { border: 0; box-shadow: none !important; }
.input-prefix.sm input { height: 34px; }

.segmented { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; gap: 2px; align-self: flex-start; }
.segmented button, .segmented label span {
  display: inline-block; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); padding: 6px 14px; border-radius: 7px; cursor: pointer;
}
.segmented button.active, .segmented label input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.segmented.radio { height: 40px; align-items: center; }
.segmented.radio label { margin: 0; }
.segmented.radio input { position: absolute; opacity: 0; pointer-events: none; }

.quick-durations { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ---------- chips & badges */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip-btn.active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip-btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; margin-right: 6px;
}
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
  vertical-align: middle;
}
a.badge:hover { text-decoration: none; }
.badge-draft { background: var(--surface-2); color: var(--ink-2); }
.badge-sent { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-paid { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-overdue { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-cur { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-size: 11px; letter-spacing: .04em; }
h1 .badge { font-size: 12px; }

/* ---------- timer */
.timer-card.is-running { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.timer-start { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.timer-start .grow-1 { flex: 1 1 180px; }
.timer-start .grow-2 { flex: 2 1 240px; }
.btn-start { flex: 0 0 auto; }
@media (max-width: 720px) { .btn-start { width: 100%; } }
.timer-running { display: flex; justify-content: space-between; gap: 24px; align-items: center; flex-wrap: wrap; }
.timer-info { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.timer-info h2 { font-size: 22px; }
.timer-fields { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
@media (max-width: 600px) { .timer-fields { grid-template-columns: 1fr; } }
.timer-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.big-clock { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 rgba(220, 38, 38, .6); animation: pulse 1.6s infinite; flex-shrink: 0; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 70% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.timer-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 32px; background: var(--accent-soft); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.timer-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-clock { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .timer-bar { padding: 8px 16px; top: 57px; } }

/* ---------- stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stats.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; color: var(--ink); }
.stat-link:hover { border-color: var(--accent); text-decoration: none; }
.stat-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.2; }
.stat-value .money-line + .money-line { font-size: 17px; color: var(--ink-2); }
.stat-sub { font-size: 12px; }
.money-line { display: block; }

/* ---------- onboarding */
.onboarding { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); }
.steps { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps li a, .steps li > div > span { font-weight: 600; }
.steps li.done a, .steps li.done > div > span { color: var(--muted); text-decoration: line-through; }
.step-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent);
}
.done .step-dot, .status-step.done .step-dot, .status-step.current .step-dot { background: var(--accent); color: var(--accent-ink); }

/* ---------- week chart */
.week-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; height: 190px; align-items: end; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar { width: 100%; max-width: 44px; min-height: 3px; border-radius: 8px 8px 4px 4px; background: var(--accent-soft); transition: height .4s ease; }
.bar-col.today .bar { background: var(--accent); }
.bar-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.bar-col.today .bar-label { color: var(--accent); }
.bar-value { font-size: 11px; color: var(--muted); white-space: nowrap; min-height: 16px; }

/* ---------- lists */
.recent { list-style: none; margin: 0; padding: 0; }
.recent li + li { border-top: 1px solid var(--line); }
.recent > li > a:not(.btn) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 4px; color: var(--ink); }
.recent > li > a:not(.btn):hover { text-decoration: none; background: var(--surface-2); border-radius: 8px; }
.duration { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-wrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 10px; white-space: nowrap; }
td { padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }
tr.is-archived td, li.is-archived { opacity: .55; }
tfoot td { border-top: 2px solid var(--line); }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters select, .filters input { height: 34px; font-size: 14px; width: auto; }
.summary-strip { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; padding: 0 4px; }
.summary-strip strong { font-size: 17px; }
.summary-strip .money-line { display: inline; margin-right: 10px; }

.day { padding: 16px 18px; }
.day-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 8px; }
.entries td { border-top: 1px solid var(--line); }
.entries tr:first-child td { border-top: 0; }
.entries { table-layout: fixed; }
.entries .col-project { width: 20%; }
.entries .col-time { width: 104px; }
.entries .col-status { width: 112px; }
.entries .col-num.duration { width: 84px; }
.entries .col-num.muted { width: 104px; }
.entries .col-actions { width: 84px; }
.entries td { overflow-wrap: anywhere; }
.entries .col-time, .entries .col-status { white-space: nowrap; }
.col-actions { white-space: nowrap; text-align: right; width: 1%; }
.col-actions form { display: inline; }
.entries tr.is-locked .duration { color: var(--muted); }
@media (max-width: 720px) {
  /* On a phone each entry is a small card: project and hours, then the description, then the buttons. */
  .entries, .entries tbody { display: block; }
  .entries tr {
    display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; padding: 10px 6px;
    grid-template-areas: "check project hours" "check desc desc" "check actions actions";
    border-top: 1px solid var(--line);
  }
  .entries tr:first-child { border-top: 0; }
  .entries td { display: block; padding: 0; border: 0; width: auto !important; overflow-wrap: break-word; }
  .entries .col-check { grid-area: check; }
  .entries .col-project { grid-area: project; }
  .entries .col-desc { grid-area: desc; }
  .entries .col-desc:empty { display: none; }
  .entries .col-num.duration { grid-area: hours; text-align: right; }
  .entries .col-actions { grid-area: actions; text-align: left; margin-left: -8px; }
  .entries .col-time, .entries .col-num.muted, .entries .col-status { display: none; }
}

/* ---------- projects */
.projects { list-style: none; margin: 0 0 12px; padding: 0; }
.projects li + li { border-top: 1px solid var(--line); }
.project-row { display: grid; grid-template-columns: minmax(140px, 2fr) 116px 164px minmax(90px, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; }
.project-row.add { grid-template-columns: minmax(140px, 2fr) 116px 164px auto; padding-top: 14px; }
.project-row input { height: 34px; }
.project-hours { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .project-row, .project-row.add { grid-template-columns: 1fr 110px; }
  .project-hours { grid-column: 1 / -1; }
}

/* ---------- invoice */
.status-card { display: flex; flex-direction: column; gap: 12px; }
.status-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-step {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px;
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 6px;
  color: var(--ink-2); cursor: pointer;
}
.status-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.status-step.current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); cursor: default; }
.status-step .step-dot { width: 22px; height: 22px; font-size: 11px; border-width: 1.5px; }
.step-line { width: 28px; height: 2px; background: var(--line); }

.paper {
  --p-accent: #4f46e5; --p-text: #111827; --p-soft: #dbd9fa; --p-stripe: #f6f6fe; --p-muted-on: #d3d1f9;
  --p-font: 'Inter', Helvetica, Arial, sans-serif; --p-head-font: var(--p-font); --p-size: 13.5px;
  background: #fff; color: var(--p-text); border-radius: var(--radius); border: 1px solid var(--line);
  padding: 44px 48px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px;
  font-family: var(--p-font); font-size: var(--p-size);
}
.paper.size-compact { --p-size: 12.5px; }
.paper.size-large { --p-size: 15px; }
.paper .muted { color: #6b7280; }
.paper .small { font-size: calc(var(--p-size) - 1.5px); }
.paper-head { display: flex; justify-content: space-between; gap: 24px; }
.paper-head.centered { flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.paper-head.centered .paper-title { margin-top: 14px; }
.paper-biz { font-family: var(--p-head-font); font-size: calc(var(--p-size) * 1.65); font-weight: 700; line-height: 1.2; }
.paper-title { font-family: var(--p-head-font); font-size: calc(var(--p-size) * 1.65); font-weight: 700; color: var(--p-accent); letter-spacing: .03em; line-height: 1.2; }
.paper-banner {
  display: flex; align-items: center; gap: 18px; margin: -44px -48px 8px; padding: 26px 48px;
  background: var(--p-accent); color: #fff; border-radius: var(--radius) var(--radius) 0 0;
}
.paper-banner .banner-biz { flex: 1; min-width: 0; }
.paper-banner .paper-title { color: #fff; }
.paper-banner .banner-contact { color: var(--p-muted-on); }
.logo-tile { background: #fff; border-radius: 6px; padding: 8px; display: flex; }
.logo-tile .paper-logo { margin: 0; }
.paper-meta { display: flex; justify-content: space-between; gap: 24px; margin: 16px 0 8px; flex-wrap: wrap; }
.paper-meta dl { display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 0; }
.paper-meta dt, .paper .label { font-size: calc(var(--p-size) - 2.5px); font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
.paper-meta dt { align-self: center; }
.paper-meta dd { margin: 0; }
.paper-lines th { padding: 9px 10px; font-size: calc(var(--p-size) - 2px); color: var(--p-text); }
.paper.tbl-filled .paper-lines th { background: var(--p-accent); color: #fff; }
.paper.tbl-filled .paper-lines th:first-child, .paper.tbl-striped .paper-lines th:first-child { border-radius: 6px 0 0 6px; }
.paper.tbl-filled .paper-lines th:last-child, .paper.tbl-striped .paper-lines th:last-child { border-radius: 0 6px 6px 0; }
.paper.tbl-striped .paper-lines th { background: var(--p-soft); }
.paper.tbl-lines .paper-lines th { border-top: 2px solid var(--p-accent); border-bottom: 2px solid var(--p-accent); text-transform: none; letter-spacing: 0; }
.paper-lines td { font-size: calc(var(--p-size) - 0.5px); padding: 9px 10px; border-top: 0; border-bottom: 1px solid #e5e7eb; }
.paper.tbl-filled .paper-lines tbody tr:nth-child(even) td, .paper.tbl-striped .paper-lines tbody tr:nth-child(even) td { background: var(--p-stripe); }
.paper-totals { align-self: flex-end; min-width: 280px; display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.paper-totals div { display: flex; justify-content: space-between; gap: 24px; font-variant-numeric: tabular-nums; }
.paper-totals .grand { border-top: 2px solid var(--p-accent); padding-top: 8px; font-weight: 700; font-family: var(--p-head-font); font-size: calc(var(--p-size) * 1.3); color: var(--p-accent); }
.paper-logo { display: block; margin-bottom: 10px; object-fit: contain; }
.paper.logo-small .paper-logo { max-width: 140px; max-height: 55px; }
.paper.logo-medium .paper-logo { max-width: 210px; max-height: 76px; }
.paper.logo-large .paper-logo { max-width: 290px; max-height: 110px; }
.paper-head .right-logo { margin-left: auto; }
@media (max-width: 720px) {
  .paper { padding: 24px 18px; } .paper-head:not(.centered) { flex-direction: column; } .paper-totals { min-width: 0; align-self: stretch; }
  .paper-banner { margin: -24px -18px 8px; padding: 20px 18px; flex-wrap: wrap; }
}

.danger-zone { display: grid; grid-template-columns: 1fr auto; gap: 16px 20px; align-items: center; }
.notice { display: flex; gap: 14px; align-items: flex-start; background: var(--warn-soft); border-color: transparent; color: var(--ink); }
.notice .icon { color: var(--warn); margin-top: 2px; }
.notice .btn { margin-top: 10px; }
.details { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; margin: 0; }
.details dt { color: var(--muted); font-weight: 600; font-size: 13px; }
.details dd { margin: 0; }

/* ---------- toasts */
.toasts { position: fixed; top: 18px; right: 18px; z-index: 50; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 36px)); }
.toast {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 12px 14px 12px 16px; border-radius: 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500;
  animation: toast-in .25s ease;
}
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px; display: grid; }
.toast.leaving { opacity: 0; transform: translateX(16px); transition: all .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media print {
  .sidebar, .timer-bar, .toasts, .page-head, .status-card, .danger-zone { display: none !important; }
  .paper { box-shadow: none; border: 0; padding: 0; }
}
.time-mode-row { margin-bottom: -6px; }
.stats > * { min-width: 0; }
@media (max-width: 600px) {
  .stats { gap: 10px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 19px; overflow-wrap: anywhere; }
  .timer-controls { width: 100%; }
  .timer-controls .btn-lg { width: 100%; }
}

/* ---------- added: warnings, ready-to-invoice, restart, periods, draft edits, backup */
.toast-warning { border-left-color: var(--warn); }
.ready-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 4px; }
.row-end { display: flex; align-items: center; gap: 12px; }
.recent-row { display: flex; align-items: center; gap: 6px; }
.recent-row > a { flex: 1; min-width: 0; }
.icon-btn.play { color: var(--accent); }
.icon-btn.play:hover { background: var(--accent-soft); color: var(--accent); }
.period { display: inline-flex; align-items: center; gap: 4px; }
.edit-details { padding: 0; }
.edit-details summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 22px; cursor: pointer; font-weight: 600; list-style: none;
}
.edit-details summary::-webkit-details-marker { display: none; }
.edit-details summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.edit-details[open] summary { border-bottom: 1px solid var(--line); }
.edit-details form { padding: 20px 22px; }
.edit-details .form-actions { margin-top: 0; }
.backup { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.backup > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.entries .col-actions { width: 116px; }
.edit-details .field.form-actions { flex-direction: row; justify-content: flex-end; }
.error-message { max-width: 560px; }

/* ---------- payments, extra lines, logo, overdue */
.alert-card { border-color: transparent; background: var(--danger-soft); }
.alert-head { display: flex; align-items: center; gap: 8px; color: var(--danger); margin-bottom: 6px; }
.alert-card .recent li + li { border-top-color: rgba(220, 38, 38, .15); }
.payment-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.item-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.item-row { display: grid; grid-template-columns: 1fr 180px; gap: 8px; }
@media (max-width: 600px) { .item-row { grid-template-columns: 1fr 130px; } }
.invoice-total { font-size: 15px; }
.invoice-total strong { font-size: 20px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.hint-top { margin: -6px 0 10px; }
.rounded-mark { color: var(--accent); margin-left: 1px; }
.item-line td { font-style: italic; }
.inline-form { display: inline; }
.inline-form .icon-btn { min-width: 24px; height: 24px; vertical-align: middle; }
.paper td.pre .inline-form { white-space: normal; margin-left: 4px; }
.logo-card { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.logo-card > div:first-child { flex: 1 1 300px; display: flex; flex-direction: column; gap: 6px; }
.logo-controls { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.logo-preview { max-width: 220px; max-height: 80px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.logo-controls input[type=file] { height: auto; padding: 6px; font-size: 13px; }

/* ---------- view tabs (List / Week) */
.view-tabs a { display: inline-block; padding: 6px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.view-tabs a:hover { text-decoration: none; color: var(--ink); }
.view-tabs a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- weekly grid */
.week-card { padding: 16px 18px; }
.week-grid th, .week-grid td { padding: 8px 6px; }
.week-grid th.day { text-align: center; font-size: 12px; }
.week-grid th.day span { display: block; }
.week-grid th.day.today { color: var(--accent); }
.week-grid .row-label { min-width: 200px; width: 26%; }
.week-grid .row-label select, .week-grid .row-label input { height: 34px; font-size: 14px; margin-bottom: 4px; }
.week-grid td.cell { text-align: center; }
.week-grid td.cell input {
  width: 100%; min-width: 58px; max-width: 76px; height: 36px; padding: 0 6px; text-align: center;
  font-variant-numeric: tabular-nums; font-size: 14px;
}
.week-grid td.cell input:placeholder-shown { background: var(--surface-2); }
.week-grid td.cell input.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.week-grid .weekend { background: var(--surface-2); }
.week-grid tfoot td { font-weight: 650; font-variant-numeric: tabular-nums; }
.week-grid .row-total { font-weight: 650; }
.locked-cell { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.locked-cell:hover { text-decoration: none; color: var(--accent); }
.week-grid tr.new-row td { background: var(--accent-soft); }

/* ---------- search + bulk edit */
.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box .icon { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.search-box input { padding-left: 32px; width: 200px; }
.col-check { width: 32px; padding-right: 0 !important; }
.entries .col-check { width: 32px; }
tr.is-selected td { background: var(--accent-soft); }
.bulk-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px);
}
.bulk-bar select, .bulk-bar input:not([type=checkbox]) { height: 34px; font-size: 14px; width: auto; max-width: 220px; }
.bulk-bar .checkbox { height: 34px; }

/* ---------- switch task */
.switch-task { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: 12px; }
.switch-task summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.switch-fields { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 8px; margin: 10px 0 6px; }
.switch-fields select, .switch-fields input { height: 36px; font-size: 14px; }
@media (max-width: 720px) { .switch-fields { grid-template-columns: 1fr; } }

/* ---------- shortcuts */
.shortcut-hint {
  display: inline-flex; align-items: center; gap: 6px; margin: 18px 10px 0; padding: 6px 8px;
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; border-radius: 8px;
}
.shortcut-hint:hover { background: var(--sidebar-hover); color: var(--sidebar-ink-strong); }
a.shortcut-hint { margin-top: 2px; text-decoration: none; }

/* ---------- help */
.help-search { margin-bottom: 16px; }
.help-search input { flex: 1; min-width: 0; }
.help-list { columns: 2; column-gap: 32px; margin: 0; padding-left: 18px; }
.help-list li { margin: 0 0 10px; break-inside: avoid; }
.help-article { line-height: 1.6; max-width: 820px; }
.help-article > :first-child { margin-top: 0; }
.help-article li { margin: 6px 0; }
.help-article code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.help-more { margin: 16px 2px; line-height: 1.9; }
@media (max-width: 720px) { .help-list { columns: 1; } }
@media (max-width: 820px) { .shortcut-hint { display: none; } }
kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; background: var(--surface-2); font: 600 12px/1.5 var(--font); text-align: center; color: var(--ink);
}
dialog.shortcuts {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; width: min(440px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
}
dialog.shortcuts::backdrop { background: rgba(15, 23, 42, .45); }
dialog.shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; align-items: center; }
dialog.shortcuts dt { text-align: right; white-space: nowrap; }
dialog.shortcuts dd { margin: 0; color: var(--ink-2); }

/* ---------- undo toast */
.toast-undo { border-left-color: var(--ink-2); }
.toast form { margin-left: auto; }

/* ---------- reports */
.report td { padding: 10px; }
.report .money-line { display: block; }
.bar-cell { width: 30%; min-width: 80px; }
.hbar { height: 10px; min-width: 2px; border-radius: 5px; background: var(--accent); opacity: .75; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px;
  display: flex; flex-direction: column;
}
.menu-list a { padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; }
.menu-list a:hover { background: var(--surface-2); text-decoration: none; }
.backup-list { flex-basis: 100%; }
.backup-list summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.backup-list ul { list-style: none; padding: 0; margin: 10px 0 0; columns: 3 180px; }
.backup-list li { padding: 3px 0; }
@media (max-width: 720px) { .week-grid .row-label { min-width: 150px; } }

/* ---------- taxes */
.tax-row { display: grid; grid-template-columns: minmax(140px, 1fr) 120px auto auto; gap: 8px; align-items: center; padding: 8px 0; }
.tax-row.add { grid-template-columns: minmax(140px, 1fr) 120px auto; padding-top: 14px; }
.tax-row.add .small-check { grid-column: 1 / -1; height: auto; font-size: 13px; }
.tax-row input { height: 34px; }
.input-suffix.sm input { height: 34px; }
.tax-list { margin-top: 10px; }
.tax-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tax-checks .checkbox { height: 34px; }
.tax-field { margin: 0 0 16px; }
.item-row.with-tax { grid-template-columns: 1fr 180px 120px; }
@media (max-width: 600px) { .item-row.with-tax { grid-template-columns: 1fr 120px; } .item-row.with-tax select { grid-column: 1 / -1; } }
.item-row select { height: 40px; }
.invoice-total { text-align: right; }
.js-tax-breakdown:empty { display: none; }
.tax-panel { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.tax-pick { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tax-amount-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tax-amount-row > span:first-child { min-width: 200px; }
.tax-amount-row .input-prefix { width: 160px; }
@media (max-width: 600px) { .tax-row, .tax-row.add { grid-template-columns: 1fr 110px; } }

/* ---------- invoice designs */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.design-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.design-card.is-default { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.design-thumb { display: block; height: 300px; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #fff; position: relative; }
.design-thumb:hover { border-color: var(--accent); }
.thumb-scale { width: 820px; transform: scale(.27); transform-origin: top left; pointer-events: none; }
.thumb-scale .paper { box-shadow: none; border: 0; border-radius: 0; }
.design-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.swatch-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.design-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.design-actions form { display: inline; }
.design-editor { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .design-editor { grid-template-columns: 1fr; } }
.design-form { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.design-form fieldset { border: 0; border-top: 1px solid var(--line); padding: 14px 0 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.design-form legend { font-weight: 650; font-size: 14px; padding: 0 0 4px; }
.design-form .segmented.radio { height: auto; flex-wrap: wrap; }
.color-row { display: flex; gap: 10px; align-items: center; }
.color-row input[type=color] { width: 46px; height: 36px; padding: 2px; flex-shrink: 0; cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch:hover { transform: scale(1.12); }
.design-preview { min-width: 0; }
.preview-label { margin: 0 0 8px 4px; }
.design-select-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.design-select-row select { width: auto; min-width: 220px; height: 34px; font-size: 14px; }
.field.is-dim input { opacity: .5; }
.paper-lines th { text-transform: none; letter-spacing: 0; font-weight: 700; }
@media (max-width: 1000px) { .design-form { position: static; max-height: none; overflow: visible; } }
@media (max-width: 720px) {
  .paper-banner { flex-direction: column; align-items: flex-start; }
  .paper-banner .right { text-align: left; }
  .paper-banner .banner-biz { width: 100%; }
}

/* ---------- write descriptions */
.describe-form { padding-bottom: 80px; }
.describe-row {
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 16px;
  padding: 12px 6px; border-top: 1px solid var(--line);
}
.describe-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.describe-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.describe-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.describe-text textarea {
  width: 100%; min-height: 64px; resize: vertical; overflow: hidden; line-height: 1.45; font-size: 14px;
}
.describe-text textarea.is-unsaved:not(:focus) { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.describe-row.is-locked textarea { background: var(--surface-2); color: var(--muted); resize: none; }
.describe-text .js-copy-above { color: var(--muted); font-size: 12px; padding: 2px 6px; height: auto; }
.describe-text .js-copy-above:hover { color: var(--accent); }
.save-bar {
  position: sticky; bottom: 16px; z-index: 30; margin-top: 16px;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.save-bar .js-save-status { margin-right: auto; }
.save-bar .is-ok { color: var(--success); }
.save-bar .is-error { color: var(--danger); }
@media (max-width: 720px) {
  .describe-row { grid-template-columns: 1fr; gap: 8px; }
  .hide-narrow { display: none; }
}
.desc-more { white-space: nowrap; }

/* ---------- sign in */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 20% 0%, #2a3d5c 0, var(--navy) 55%) fixed; }
.login-card { width: min(380px, 100%); padding: 30px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-lg); }
.login-card .brand { padding: 0 0 6px; flex-direction: column; align-items: flex-start; gap: 10px; }
.login-card .brand-logo { width: 190px; }
.login-title { font-family: var(--head-font); }
.login-card .field { margin-bottom: 14px; }
.login-card input { width: 100%; }
.login-btn { width: 100%; justify-content: center; }
.login-note { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 14px; }
.login-note.is-error { background: var(--danger-soft); color: var(--danger); }
.sign-out { margin: 4px 10px 0; }
.sign-out button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; border-radius: 8px;
}
.sign-out button:hover { background: var(--sidebar-hover); color: var(--sidebar-ink-strong); }
@media (max-width: 820px) { .sign-out { display: none; } }
.backup-list.restore p { margin: 8px 0; }
.backup-list.restore form { flex-wrap: wrap; align-items: center; }
.backup-list.restore input[type=file] { width: auto; max-width: 100%; height: auto; padding: 6px; }
.bulk-bar.is-wide { width: min(760px, calc(100vw - 32px)); }
.bulk-adjust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulk-adjust .js-adjust-amount { width: 90px; }
.bulk-desc { order: 10; flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }
.bulk-bar .bulk-desc textarea { width: 100%; max-width: none; min-height: 64px; font-size: 14px; line-height: 1.45; resize: none; }
.segmented.radio.sm { height: 34px; }
.segmented.radio.sm label span { padding: 4px 10px; font-size: 13px; }

/* ---------- appearance switch */
.theme-switch { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.theme-switch button {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.sidebar .theme-switch { margin: 10px 10px 0; }
.sidebar .theme-switch span { display: none; }
@media (max-width: 820px) { .sidebar .theme-switch { display: none; } }

/* ---------- email */
.field.send-options { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.reminder-row { margin-top: 12px; align-items: center; flex-wrap: wrap; }
.email-log li { padding: 8px 4px; }
.email-log .icon { vertical-align: -2px; color: var(--muted); }
.setup-steps ol { margin: 8px 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.email-status { justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.email-templates details { margin-bottom: 14px; }
.email-templates summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.placeholders dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0 0; }
.placeholders dd { margin: 0; }
.error-text { color: var(--danger); }
.notice.is-error { background: var(--danger-soft); }
.notice.is-error .icon { color: var(--danger); }
.more-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.more-actions form { display: inline; }
.badge-credit { background: var(--accent-soft); color: var(--accent); }
.month-card .card-head form { margin: 0; }
.month-card .ready-row form { display: inline; }
.lock-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lock-card .icon { vertical-align: -3px; color: var(--muted); }
.lock-actions { flex-wrap: wrap; align-items: center; }
.lock-actions input[type=month] { height: 34px; width: auto; font-size: 14px; }

/* ---------- month calendar */
.month-cal { padding: 14px; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head span { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 6px; }
.cal-day {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 92px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.cal-day:hover { text-decoration: none; border-color: var(--accent); }
.cal-day.weekend { background: var(--surface-2); }
.cal-day.out { opacity: .35; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.level-1 { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cal-day.level-2 { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.cal-day.level-3 { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.cal-day.level-4 { background: color-mix(in srgb, var(--accent) 46%, var(--surface)); }
.cal-day.gap { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.cal-num { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.cal-hours { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-meta { font-size: 11.5px; color: var(--ink-2); }
.cal-add { font-size: 12px; color: var(--warn); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; margin-top: auto; }
.cal-lock { position: absolute; top: 8px; right: 8px; color: var(--muted); }
.gap-note { color: var(--warn); display: inline-flex; align-items: center; gap: 6px; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.cal-legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; vertical-align: -2px; }
.cal-legend .sw.level-1 { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cal-legend .sw.level-2 { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.cal-legend .sw.level-3 { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.cal-legend .sw.level-4 { background: color-mix(in srgb, var(--accent) 46%, var(--surface)); }
.cal-legend .sw.gap { background: var(--warn-soft); }
@media (max-width: 720px) {
  .month-cal { padding: 8px; }
  .cal-head, .cal-grid { gap: 3px; }
  .cal-day { min-height: 58px; padding: 4px 5px; border-radius: 7px; }
  .cal-hours { font-size: 13px; }
  .cal-meta, .cal-add, .cal-lock { display: none; }
  .cal-num { font-size: 11px; }
}

/* ---------- description suggestions */
.suggest-wrap { position: relative; width: 100%; }
.suggest-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg);
  max-height: 260px; overflow-y: auto;
}
.suggest-list li { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-list li:hover, .suggest-list li.active { background: var(--accent-soft); }
.bulk-bar .suggest-list { top: auto; bottom: calc(100% + 4px); }
.cad-line { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cad-edit summary { cursor: pointer; color: var(--accent); font-size: 12px; }
.cad-edit form { margin-top: 6px; align-items: center; flex-wrap: wrap; }
.cad-edit .rate-input { width: 90px; height: 32px; }
.input-prefix.sm input { height: 32px; }
.year-table tfoot td { font-weight: 650; border-top: 2px solid var(--line); }

/* ---------- project budgets */
.budget-field { display: inline-flex; gap: 4px; }
.budget-field input { width: 76px; min-width: 0; height: 34px; font-size: 14px; }
.budget-field select { width: auto; height: 34px; font-size: 13px; padding: 0 6px; }
.budget { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; flex-wrap: wrap; }
.budget-bar { flex: 0 1 220px; min-width: 120px; height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.budget-bar span { display: block; height: 100%; background: var(--success); border-radius: 99px; }
.budget-warn .budget-bar span { background: var(--warn); }
.budget-over .budget-bar span { background: var(--danger); }
.budget-over strong { color: var(--danger); }
.projects .budget { margin: -2px 0 8px; }
.auto-reminders { margin: 0 0 16px; border: 0; padding: 0; }
.auto-reminders legend { font-weight: 650; font-size: 14px; margin-bottom: 6px; padding: 0; }
.reminder-schedule { margin: 8px 0; line-height: 2.4; }
.reminder-schedule input { width: 52px; height: 30px; padding: 0 6px; text-align: center; display: inline-block; }
.recurring-list .row-end form { display: inline; }
.recurring-list li.is-archived { opacity: .6; }
.section-label { margin: 18px 0 8px; }
.recurring-more { margin-top: 16px; }

/* ---------- expenses and mileage */
.receipt-img { max-width: 100%; max-height: 520px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix input { padding-right: 38px; }
.input-suffix span { position: absolute; right: 12px; color: var(--muted); font-size: 14px; pointer-events: none; }
.expense-list td { vertical-align: top; }
.reminder-schedule input.wide { width: 72px; }
.bill-rate-label { margin-top: 12px; }

/* ---------- the client's view of an invoice */
.public-page { background: var(--bg); }
.public-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.public-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-row input { flex: 1 1 320px; font-size: 13px; height: 34px; }

/* ---------- two-step sign-in */
.two-step .qr { margin: 12px 0 6px; }
.two-step .qr svg { display: block; border-radius: 8px; }
.two-step .secret { font-size: 14px; letter-spacing: .04em; }
.code-row { align-items: center; flex-wrap: wrap; margin-top: 8px; }
.code-row input { width: 150px; height: 36px; font-size: 16px; letter-spacing: .1em; }
.recovery-codes { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 32px; }
.recovery-codes code { font-size: 17px; letter-spacing: .06em; }

/* ---------- US-dollar bank details */
.bank-where { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.bank-where legend { font-weight: 650; font-size: 14px; margin-bottom: 6px; padding: 0; }
.bank-where .checkbox { align-items: flex-start; height: auto; }
.pay-card h2 { margin-bottom: 4px; }
.bank-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0; align-items: center; }
.bank-details dt { color: var(--muted); font-size: 13px; }
.bank-details dd { margin: 0; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-weight: 600; flex-wrap: wrap; }
.bank-warning { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); margin-top: 8px; }
@media (max-width: 520px) { .bank-details { grid-template-columns: 1fr; } .bank-details dt { margin-top: 6px; } }
.bank-form > .span-full, .bank-form > fieldset, .bank-form > p { grid-column: 1 / -1; }

/* ---------- time reminders */
.nudge-card { border-left: 4px solid var(--warn); display: flex; flex-direction: column; gap: 10px; }
.nudge-card.is-urgent { border-left-color: var(--danger); }
.nudge-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nudge-head .icon { color: var(--warn); }
.nudge-head .muted { margin-left: auto; }
.nudge-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nudge-days li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--line); }
.nudge-days li:first-child { border-top: 0; }
.nudge-actions { display: inline-flex; gap: 6px; align-items: center; }
.nudge-actions form { display: inline; }
.nudge-desc { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--line); }
.nudge-days + .nudge-desc, .nudge-head + .nudge-desc { margin-top: 2px; }
.nudge-card > .nudge-desc:first-child { border-top: 0; padding-top: 0; }
.nudge-desc .icon { vertical-align: -3px; color: var(--muted); }
.eod-time { width: 132px; height: 30px; display: inline-block; margin: 0 4px; }
.day-off-form { flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.day-off-form input { width: auto; height: 34px; }
.form-grid > .form-actions.span-full, .form-grid > .span-full { grid-column: 1 / -1; }

/* Import */
.list tr.is-muted td { color: var(--muted); }
.text-danger { color: var(--danger); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list > li { padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.plain-list > li:first-child { border-top: 0; }
.row.between { justify-content: space-between; align-items: center; }
.client-notes { margin-top: 4px; }
.client-notes p { margin: 4px 0 0; max-width: 60ch; }
.save-bar .js-import-count { margin-right: auto; }
.import-form { display: flex; flex-direction: column; gap: 20px; }

/* Timesheets */
.timesheet-form { display: flex; flex-direction: column; gap: 16px; }
.timesheet-form p { margin: 0; }
.ts-columns { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ts-columns legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.ts-attach { align-self: end; }
.row.wrap { flex-wrap: wrap; }
.ts-table td.pre { white-space: pre-line; min-width: 260px; }
.ts-table tfoot th { border-top: 2px solid var(--accent); }

/* Invoices grouped by year */
.year-group { border-top: 1px solid var(--line); }
.year-group:first-of-type { border-top: 0; }
.year-group > summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.year-group > summary::-webkit-details-marker { display: none; }
.year-group > summary::before { content: "▸"; color: var(--muted); font-size: 12px; width: 10px; }
.year-group[open] > summary::before { content: "▾"; }
.year-group .year-total { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.center { text-align: center; }

/* Insights */
.trend.up { color: var(--success); font-weight: 600; }
.trend.down { color: var(--danger); font-weight: 600; }
.list tr.is-current td { background: var(--accent-soft); }
.list.compact td, .list.compact th { padding-top: 6px; padding-bottom: 6px; }
.month-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 170px; margin: 8px 0 6px; }
.month-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.month-bar .bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.month-bar .bar { width: 40%; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 1px; }
.bar.hours, .key.hours { background: var(--accent); }
.bar.cad, .key.cad { background: var(--success); }
.legend { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 10px; }
.legend .key:first-child { margin-left: 0; }
.shares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.share-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.share-amount { margin-left: auto; font-variant-numeric: tabular-nums; }
.share-bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.share-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* Tax set-aside */
.tax-card { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; position: relative; }
.tax-card .tax-main, .tax-card .tax-next { display: flex; flex-direction: column; gap: 6px; }
.tax-card .tax-main { flex: 1 1 260px; }
.tax-card .tax-next { flex: 0 1 260px; padding-left: 24px; border-left: 1px solid var(--line); }
.tax-card.is-soon { border-color: var(--warn); }
.tax-change { position: absolute; top: 14px; right: 18px; }
.text-warn { color: var(--warn); font-weight: 600; }
@media (max-width: 600px) { .tax-card .tax-next { padding-left: 0; border-left: 0; } }

/* Change history */
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list > li { padding: 10px 0; border-top: 1px solid var(--line); }
.history-list > li:first-child { border-top: 0; }
.history-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.history-when { min-width: 130px; font-variant-numeric: tabular-nums; }
.history-changes { list-style: none; margin: 4px 0 0; padding-left: 142px; display: flex; flex-direction: column; gap: 2px; }
.history-changes del { color: var(--muted); }
@media (max-width: 600px) { .history-changes { padding-left: 0; } .history-when { min-width: 0; } }
.history-card > summary { cursor: pointer; list-style: none; } .history-card > summary::-webkit-details-marker { display: none; } .history-card[open] > summary { margin-bottom: 8px; }

/* Quick "Paid" */
.quick-paid { position: relative; display: inline-block; }
.quick-paid > summary { list-style: none; }
.quick-paid > summary::-webkit-details-marker { display: none; }
.quick-paid-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 250px; display: flex; flex-direction: column;
  gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); text-align: left; }
.quick-paid-form label { display: flex; flex-direction: column; gap: 4px; }
.projection-card { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.projection-card .tax-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; }
.projection-clients { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 1px solid var(--line); display: grid; gap: 6px; min-width: 260px; }
.projection-clients li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; }
@media (max-width: 600px) { .projection-clients { padding-left: 0; border-left: 0; } }
.row.wrap .grow { flex: 1 1 220px; } .statement-table tbody tr.muted td { color: var(--muted); } .statement-table tfoot th { border-top: 2px solid var(--accent); }
.public-logo { max-height: 40px; display: block; margin-bottom: 6px; }

/* Search everything */
.search-hint { display: inline-flex; align-items: center; gap: 6px; margin: 18px 10px 0; padding: 6px 8px; border: 0;
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; border-radius: 8px; }
.search-hint:hover { background: var(--sidebar-hover); color: var(--sidebar-ink-strong); }
.search-hint + .shortcut-hint { margin-top: 2px; }
.search-fab { display: none; }
@media (max-width: 820px) {
  .search-hint { display: none; }
  .search-fab { display: flex; position: fixed; right: 16px; bottom: 18px; z-index: 50; width: 52px; height: 52px;
    border-radius: 50%; border: 0; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink);
    box-shadow: var(--shadow-lg); cursor: pointer; }
}
dialog.search-dialog { width: min(640px, calc(100vw - 24px)); max-height: 80vh; padding: 0; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); margin-top: 10vh; }
dialog.search-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.search-dialog-box { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.search-dialog-box input { flex: 1; border: 0; box-shadow: none; background: transparent; font-size: 16px; padding: 4px 0; height: auto; color: var(--ink); }
.search-dialog-box input:focus { outline: none; box-shadow: none; }
.search-results { max-height: 55vh; overflow-y: auto; padding: 6px; }
.search-results h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 10px 4px; }
.search-results a { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.search-results a .detail { color: var(--muted); font-size: 13px; margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.search-results a.active, .search-results a:hover { background: var(--accent-soft); }
.search-results .empty-note { padding: 14px 10px; color: var(--muted); }
.search-foot { margin: 0; padding: 8px 16px 12px; border-top: 1px solid var(--line); }

/* Ticket suggestions under description boxes */
.ticket-wrap { position: relative; }
.ticket-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; list-style: none; margin: 4px 0 0; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); }
.ticket-list li { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.ticket-list li strong { margin-right: 6px; }
.ticket-list li.active, .ticket-list li:hover { background: var(--accent-soft); }
.ticket-list .hint { font-size: 11px; color: var(--muted); padding: 2px 8px 4px; cursor: default; }

/* Quick add */
.quick-add { display: flex; flex-direction: column; gap: 6px; }
.quick-add .row { gap: 8px; }
.quick-add input[name=line] { flex: 1; font-size: 15px; }
.quick-add .js-quick-preview { min-height: 1.2em; }
.quick-add .js-quick-preview.is-error { color: var(--danger); }

/* Close the month */
.close-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.close-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); }
.close-step-head { display: flex; align-items: center; gap: 12px; }
.close-step-head h2 { margin: 0; font-size: 16px; }
.close-step-mark { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; background: var(--surface-2); color: var(--muted); flex: none; }
.close-step.is-done .close-step-mark { background: var(--success); color: #fff; }
.close-step.is-done { opacity: .78; }
.close-step.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.close-step.is-current .close-step-mark { background: var(--accent); color: var(--accent-ink); }
.close-step-body { margin: 10px 0 0 38px; }
.close-step-body p { margin: 0 0 8px; }
@media (max-width: 600px) { .close-step-body { margin-left: 0; } }

/* Offline queue */
.offline-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60; max-width: calc(100vw - 100px);
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: 14px; box-shadow: var(--shadow-lg); }
.offline-banner.is-ok { background: var(--success); color: #fff; }
.offline-banner.is-error { background: var(--danger); color: #fff; }
.offline-page .public-wrap { max-width: 640px; }
.backup-check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.backup-check.is-ok { color: var(--success); }
.backup-check.is-error { color: var(--danger); }
.backup-check form { margin-left: auto; }
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 14px; }
.rate-grid > div { display: flex; flex-direction: column; gap: 4px; }
.rate-try { align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.backup > .backup-check { flex: 1 1 100%; flex-direction: row; align-items: center; order: 5; padding-top: 8px; border-top: 1px solid var(--line); }
.income-stat { border-color: var(--accent); }
.list th.income-col { color: var(--accent); }
.method-switch a { min-width: 72px; text-align: center; }

/* Rates over time (client page, rate check) */
.rate-list + .rate-list { margin-top: 10px; }
.rate-list h3 { margin: 6px 0 2px; }
#rates .project-row.add { margin-top: 12px; flex-wrap: wrap; }
#rates .project-row.add label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#rates .project-row.add select { flex: 0 1 240px; min-width: 0; }
.rate-changes { margin: 0 0 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.goal-card .budget { margin: 2px 0; }
.goal-card .stat-value .small, .gst-card .stat-value .small { font-weight: 400; }
.ticket-link { font-weight: 600; }
.ticket-open { margin-left: 4px; color: var(--muted); vertical-align: middle; }
.ticket-open:hover { color: var(--accent); }
.calendar-row { gap: 8px; }
.calendar-add { display: flex; flex: 1; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.calendar-add select { max-width: 260px; }
.calendar-rule { gap: 8px; align-items: center; margin-bottom: 6px; }
.calendar-rule input { flex: 0 1 200px; }
.calendar-rule select { flex: 1 1 220px; }
.goal-card .budget { width: 100%; max-width: 480px; }
.goal-card .budget-bar { width: 100%; }
.gst-card .stat-label, .goal-card .stat-label { padding-right: 56px; }
.login-title { font-size: 18px; margin: 0; }
.login-links { margin: 0; }

/* ---------- Hours Truly: things on the navy sidebar */
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("fonts/Outfit/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("fonts/Outfit/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("fonts/Outfit/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("fonts/Outfit/outfit-latin-700-normal.woff2") format("woff2"); }
.sidebar .search-hint, .sidebar .shortcut-hint, .sidebar .sign-out button { color: var(--sidebar-ink); }
.sidebar kbd { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: var(--sidebar-ink-strong); }
.sidebar .theme-switch { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.sidebar .theme-switch button { color: var(--sidebar-ink); }
.sidebar .theme-switch button:hover { color: var(--sidebar-ink-strong); }
.sidebar .theme-switch button.active { background: rgba(255, 255, 255, .14); color: var(--sidebar-ink-strong); box-shadow: none; }
.stat-value, .page-head h1, .login-title { font-family: var(--head-font); }
.stat-value { letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }

/* ---------- billing */
.billing-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 32px; font-size: 14px; border-bottom: 1px solid var(--line); background: var(--highlight-soft); color: var(--ink); }
.billing-bar.is-warn { background: var(--warn-soft); }
.billing-bar.is-error { background: var(--danger-soft); }
@media (max-width: 820px) { .billing-bar { padding: 10px 16px; } }
.plan-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.plan-price { font-family: var(--head-font); font-size: 30px; font-weight: 700; }
.plan-price small { font-size: 15px; font-weight: 500; color: var(--muted); }

/* ---------- public pages (home, terms, privacy) */
.site { background: var(--bg); }
.site-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px max(16px, calc(50vw - 540px));
  background: var(--navy); }
.site-head img { display: block; width: 168px; height: auto; }
.site-head nav { display: flex; align-items: center; gap: 18px; }
.site-head nav a:not(.btn) { color: #dfe5ee; font-weight: 500; }
.btn-amber { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.btn-amber:hover { background: #e39a34; border-color: #e39a34; text-decoration: none; }
.site-hero { background: radial-gradient(circle at 15% 0%, #2a3d5c 0, var(--navy) 60%); color: #fff; padding: 72px max(16px, calc(50vw - 540px)) 80px; }
.site-hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; max-width: 720px; display: block; }
.site-hero p { font-size: 19px; color: #cfd7e3; max-width: 640px; margin-top: 18px; }
.site-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.muted-on-navy { color: #aab6c8; font-size: 14px; }
.site-section { max-width: 1080px; margin: 0 auto; padding: 56px 16px 0; }
.site-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.site-features h3 { font-size: 18px; margin-bottom: 6px; }
.site-features h3::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--amber); margin-bottom: 12px; }
.site-features p { color: var(--ink-2); }
.site-price { max-width: 520px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px; }
.site-price ul { text-align: left; color: var(--ink-2); padding-left: 18px; margin: 0; }
.site-legal { max-width: 780px; padding: 36px; line-height: 1.65; margin-top: 40px; }
.site-legal h1 { display: block; }
.site-legal h2 { margin-top: 26px; margin-bottom: 6px; }
.site-legal li { margin: 6px 0; }
.site-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; max-width: 1080px; margin: 64px auto 0;
  padding: 24px 16px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
@media (max-width: 820px) { .site-features { grid-template-columns: 1fr; } .site-legal { padding: 22px; }
  .site-head nav { gap: 12px; } .site-head img { width: 130px; } }

/* ---------- made in Canada */
.leaf { display: inline-block; vertical-align: -2px; flex-shrink: 0; }
.made-in { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sidebar .made-in { margin: 14px 18px 0; color: var(--sidebar-ink); }
@media (max-width: 820px) { .sidebar .made-in { display: none; } }
.login-card .made-in { margin: 0; }
.site-foot .made-in { font-size: 14px; }
.site-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff !important;
  font-size: 14px !important; font-weight: 600; margin: 0 0 20px !important; }
.site-h2 { font-size: 28px; text-align: center; }
.site-lead { text-align: center; color: var(--ink-2); font-size: 17px; margin: 8px auto 36px; max-width: 620px; }

/* ---------- Settings tabs */
.settings-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 15;
  background: var(--bg); padding: 6px 0 10px; margin-bottom: -6px; }
.settings-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.settings-tabs a { padding: 7px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 14px;
  border: 1px solid transparent; white-space: nowrap; }
.settings-tabs a:hover { background: var(--surface); border-color: var(--line); text-decoration: none; }
.settings-tabs a.active { background: var(--accent); color: var(--accent-ink); }
.settings-find { width: 220px; }
.settings-panels { display: flex; flex-direction: column; gap: 20px; }
.settings-panel { display: flex; flex-direction: column; gap: 20px; }
.settings-panels.is-tabbed .settings-panel { display: none; }
.settings-panels.is-tabbed .settings-panel.is-active,
.settings-panels.is-tabbed.is-finding .settings-panel { display: flex; }
.settings-panels.is-finding .is-hidden-by-find { display: none !important; }
.settings-panel > section, .settings-panel > form > section { scroll-margin-top: 70px; }
.settings-none { margin: 4px 2px; }
@media (max-width: 820px) {
  .settings-bar { top: 57px; }
  .settings-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-find { width: 100%; }
}

/* ---------- dashboard: "on pace for" and "Coming in" share a row */
.pace-row { align-items: stretch; }
.pace-row > :only-child { grid-column: 1 / -1; }
.pace-row .projection-card { flex-direction: column; align-items: stretch; gap: 16px; }
.pace-row .projection-card .tax-main { flex: none; }
.pace-row .projection-clients { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); min-width: 0; }
.pace-row > :only-child.projection-card { flex-direction: row; align-items: center; }
.pace-row > :only-child.projection-card .tax-main { flex: 1 1 320px; }
.pace-row > :only-child .projection-clients { padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--line); min-width: 260px; }
.pace-row .coming-card .card-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.pace-row > :only-child.coming-card .card-head { flex-direction: row; align-items: center; }

/* ---------- plan picker */
.plan-picker { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; align-items: flex-start; }
.plan-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; width: 100%; }
.plan-option { cursor: pointer; }
.plan-option input { position: absolute; opacity: 0; }
.plan-option-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); height: 100%; }
.plan-option input:checked + .plan-option-body { border-color: var(--highlight); box-shadow: 0 0 0 3px var(--highlight-soft); }
.plan-option input:focus-visible + .plan-option-body { outline: 2px solid var(--highlight); outline-offset: 2px; }
.plan-option-price { font-family: var(--head-font); font-size: 22px; font-weight: 700; }
.plan-option-price small { font-size: 13px; font-weight: 500; color: var(--muted); }
.plan-save { color: var(--success); font-weight: 600; }

.site-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.site-plans > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.site-plans .plan-price { font-size: 26px; }
@media (max-width: 520px) { .site-plans { grid-template-columns: 1fr; } }

/* ---------- home page, the full version */
.site-head { position: sticky; top: 0; z-index: 30; transition: box-shadow .2s, background .2s; }
.site-head.is-scrolled { box-shadow: 0 6px 24px rgba(10, 16, 27, .35); background: rgba(27, 42, 65, .97); }
.site-head nav a:not(.btn):hover { color: #fff; text-decoration: none; }
.btn-on-navy { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-on-navy:hover { background: rgba(255, 255, 255, .08); border-color: #fff; text-decoration: none; }
.btn-lg { padding: 12px 22px; font-size: 16px; }
.site-hero { padding-top: 56px; padding-bottom: 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center;
  max-width: 1180px; margin: 0 auto; }
.hero-copy h1 { font-size: clamp(34px, 4.6vw, 54px); }
.hero-amber { color: var(--amber); }
.hero-lead { font-size: 18px; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 26px 0 0; color: #dfe5ee; font-size: 14px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .icon { color: var(--amber); }
.hero-shot { perspective: 1600px; }
.browser { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotateY(-8deg) rotateX(3deg); transform-origin: left center; transition: transform .6s ease; }
.hero-shot:hover .browser { transform: rotateY(-3deg) rotateX(1deg); }
.browser-bar { display: flex; gap: 6px; padding: 10px 12px; background: #e9edf3; }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #c5cdd9; }
.browser img, .tour-shot img { display: block; width: 100%; height: auto; }

.canada-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.canada-strip ul { list-style: none; margin: 0 auto; padding: 18px 16px; max-width: 1180px; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px 28px; }
.canada-strip li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); }
.canada-strip .icon { color: var(--amber); }

.feature { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.site-features h3::before { display: none; }
.feature-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--highlight-soft); color: var(--highlight-ink); margin-bottom: 14px; }

.site-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.site-steps::before { content: ""; position: absolute; top: 22px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.site-steps li { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.step-num { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-family: var(--head-font); font-weight: 700; font-size: 18px; margin-bottom: 12px;
  box-shadow: 0 0 0 6px var(--bg); }
.site-steps .feature-icon { display: none; }
.site-steps h3 { font-size: 18px; margin-bottom: 6px; }
.site-steps p { color: var(--ink-2); max-width: 300px; }

.site-tour { display: flex; flex-direction: column; gap: 56px; }
.tour-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.tour-row.is-flipped .tour-text { order: 2; }
.tour-text h2 { font-size: 26px; margin-bottom: 10px; }
.tour-text p { color: var(--ink-2); font-size: 17px; }
.tour-shot { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #fff; }
.tour-phone { background: none; border: 0; box-shadow: none; display: flex; justify-content: center; }
.phone-frame { width: 280px; border-radius: 36px; padding: 10px; background: #0d1320; box-shadow: var(--shadow-lg); }
.phone-frame img { border-radius: 26px; }

.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.price-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.price-card .btn { margin-top: 8px; width: 100%; justify-content: center; }
.price-card.is-best { border: 2px solid var(--amber); box-shadow: 0 12px 34px rgba(208, 132, 24, .18); }
.price-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--amber); color: var(--navy);
  font-weight: 700; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; }
.price-includes { list-style: none; padding: 0; margin: 28px auto 0; max-width: 760px; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 10px 28px; color: var(--ink-2); }
.price-includes li { display: flex; gap: 8px; align-items: flex-start; }
.price-includes .icon { color: var(--success); margin-top: 3px; }

.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px;
  cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform .2s; color: var(--muted); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 18px 16px; margin: 0; color: var(--ink-2); line-height: 1.6; }

.site-final { margin-top: 72px; background: radial-gradient(circle at 85% 100%, #2a3d5c 0, var(--navy) 60%); color: #fff;
  position: relative; overflow: hidden; }
.site-final::after { content: ""; position: absolute; right: -40px; bottom: -80px; width: 380px; height: 380px; opacity: .07;
  background: url("brand/maple-leaf.svg") no-repeat center / contain; filter: brightness(0) invert(1); }
.site-final-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 72px 16px; text-align: center; }
.site-final h2 { font-size: clamp(26px, 3.4vw, 38px); }
.site-final p { color: #cfd7e3; font-size: 18px; margin: 12px 0 26px; }

.site-foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; margin-top: 0; padding-top: 44px; border-top: 0; }
.foot-brand p { margin: 10px 0; max-width: 340px; }
.foot-logo { display: block; width: 150px; height: auto; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col h4 { margin: 0 0 4px; font-family: var(--head-font); color: var(--ink); font-size: 15px; }
.foot-copy { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; margin: 8px 0 0; }

/* Sections ease in once (site.js); without JavaScript, or asking for less motion, they're simply there. */
.reveal { transition: opacity .6s ease, transform .6s ease; }
.reveal.is-waiting { opacity: 0; transform: translateY(18px); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .browser-bar { background: #222c3d; }
  :root:not([data-theme="light"]) .browser-bar span { background: #3a465a; }
  :root:not([data-theme="light"]) .foot-logo { content: url("brand/logo-horizontal-reversed.svg"); }
}
@media (max-width: 900px) {
  .hero-grid, .tour-row { grid-template-columns: 1fr; gap: 32px; }
  .tour-row.is-flipped .tour-text { order: 0; }
  .browser { transform: none; }
  .site-steps, .price-cards { grid-template-columns: 1fr; }
  .site-steps::before { display: none; }
  .price-cards { max-width: 420px; gap: 26px; }
  .price-includes { grid-template-columns: 1fr; }
  .site-foot { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .site-nav-extra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .browser, .feature, .faq summary .icon { transition: none; }
}

.tour-row.is-wide { grid-template-columns: 1fr; gap: 22px; }
.tour-row.is-wide .tour-text { max-width: 680px; margin: 0 auto; text-align: center; }
.tour-row.is-wide .tour-shot { max-width: 980px; margin: 0 auto; width: 100%; }

/* Help with this page: a round "?" floating bottom right (above the search button on phones). */
.help-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font: 600 19px/1 var(--head-font);
}
.help-fab:hover, .help-fab:focus-visible { color: var(--highlight-ink); border-color: var(--highlight); }
body:has(.save-bar) .help-fab { bottom: 88px; }
@media (max-width: 820px) {
  .help-fab { right: 20px; bottom: 82px; }
  body:has(.save-bar) .help-fab { bottom: 146px; }
}
@media print { .help-fab { display: none; } }


.warn-text { color: var(--warn); }
.bank-rows select { max-width: 340px; }
.import-rows input, .import-rows select { min-width: 0; }
.import-rows input[name^="vendor_"] { min-width: 160px; }
.import-rows .num-input { width: 96px; text-align: right; }
.save-bar-start { margin-right: auto; }
.statement-check p { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.statement-check.is-ok { background: var(--success-soft); border-color: transparent; }
.statement-check.is-ok .icon { color: var(--success); align-self: center; }
.statement-check.is-off { background: var(--warn-soft); border-color: transparent; }

/* Draft time (entrydrafts.py) */
.drafts-card { border-left: 3px solid var(--highlight); }
.draft { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.draft:first-of-type { border-top: 0; padding-top: 4px; }
.draft-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.draft .draft-item { max-width: 260px; }
.draft textarea { width: 100%; min-height: 72px; resize: vertical; line-height: 1.45; }
.draft-line { display: flex; gap: 8px; }
.draft-line input { flex: 1; }
.draft-finish { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.draft-finish input[name=duration] { width: 120px; }
.draft-finish input { width: auto; flex: 0 0 auto; }
.draft-finish input[type=time] { width: 118px; }
.draft-finish input[type=date] { width: 160px; }
.draft-finish .btn-primary { margin-left: 4px; }
.draft-finish input[name=duration] { width: 150px; }

/* Snap a receipt (receiptscan.py) */
.snap-card { display: flex; }
.snap-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.snap-btn { position: relative; overflow: hidden; cursor: pointer; }
.snap-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.snap-form.is-busy .snap-btn { opacity: .6; pointer-events: none; }
@media (max-width: 820px) { .snap-btn { width: 100%; justify-content: center; } }
.scan-form .is-unsure input, .scan-form .is-unsure select { border-color: var(--highlight); background: var(--highlight-soft); }
.scan-text pre { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: var(--surface-2); padding: 10px; border-radius: 8px; }
.scan-form .field.form-actions { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
.scan-form .form-actions .btn-primary { width: auto; }
.scan-form .scan-text { grid-column: 1 / -1; }

/* ---------- card payments and quote answers on the client's link (cardpay.py, quotes.py) */
.notice.is-success { background: var(--success-soft); }
.public-page .notice { flex-direction: column; gap: 4px; margin-bottom: 16px; }
.card-pay { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.quote-answer .form-actions { gap: 10px; }
.card-waiting { gap: 10px; margin: 8px 0 4px; flex-wrap: wrap; }
.card-key-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.card-key-form .field { flex: 1 1 260px; }
.card-steps { margin: 8px 0 12px 18px; padding: 0; }
.card-steps li { margin: 4px 0; }
.quote-answer .form-grid > p, .quote-answer .form-actions { grid-column: 1 / -1; justify-content: flex-start; }
.quote-answer h2 { margin-bottom: 8px; }

/* ---------- T2125 worksheet (t2125.py) */
.t2125-lines td:first-child { font-variant-numeric: tabular-nums; color: var(--muted); width: 4.5em; }
.t2125-lines tr.total td { font-weight: 650; border-top: 1px solid var(--line); }
.t2125-lines thead + tbody + thead th { padding-top: 18px; }
.t2125-part { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.t2125-part summary { cursor: pointer; }
.t2125-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 16px; margin-top: 10px; }
.t2125-map .field span { font-size: 14px; }
.t2125-map .form-actions, .t2125-inputs .form-actions { grid-column: 1 / -1; }
.t2125-inputs { margin-top: 10px; }

/* ---------- accountants (accountants.py) */
.business-switch { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.business-switch select { width: 100%; }
.view-only-bar { gap: 12px; }
.copy-field { flex: 1 1 280px; min-width: 0; font-size: 13px; }
#accountant .row { gap: 8px; flex-wrap: wrap; }
#accountant input[type=email] { flex: 1 1 240px; }

/* ---------- home page: for accountants */
.accountants-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.accountants-card .site-h2, .accountants-card .site-lead { text-align: left; margin-left: 0; }
.accountant-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.accountant-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.accountant-points .icon { color: var(--highlight-ink); flex: none; margin-top: 3px; }
.accountants-card > p { grid-column: 1 / -1; margin: 0; }
.accountant-tip .row { gap: 8px; margin-top: 8px; }
@media (min-width: 821px) and (max-width: 1060px) { .site-steps { grid-template-columns: repeat(2, 1fr); } .site-steps::before { display: none; } }
@media (max-width: 820px) { .accountants-card { grid-template-columns: 1fr; padding: 22px; } }

/* ---------- help: pictures, diagrams and boxes (helpcentre.py) */
.help-figure { margin: 18px 0 22px; }
.help-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); background: #fff; }
.help-figure a { display: inline-block; max-width: 100%; cursor: zoom-in; }
.help-figure figcaption { color: var(--muted); font-size: 13.5px; margin-top: 8px; line-height: 1.45; }
.help-figure.is-diagram svg { display: block; width: 100%; height: auto; max-width: 760px; }
.help-box { display: block; margin: 14px 0; padding: 12px 14px; border-radius: 10px; border-left: 4px solid var(--highlight);
  background: var(--highlight-soft); line-height: 1.5; }
.help-box > strong { margin-right: 4px; }
.help-box.is-tip { border-left-color: var(--success); background: var(--success-soft); }
.help-box.is-watch-out { border-left-color: var(--danger); background: var(--danger-soft); }
.help-box.is-in-short { border-left-color: var(--ink-2); background: var(--surface-2); font-size: 1.04em; }
.help-article h3 { margin-top: 26px; }
.help-figure.is-diagram svg.narrow { display: none; max-width: 360px; }
@media (max-width: 640px) { .help-figure.is-diagram svg.wide { display: none; } .help-figure.is-diagram svg.narrow { display: block; } }

/* ---------- assets and CCA (cca.py) */
.cca-adjust { margin-top: 12px; }
.cca-row { gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.cca-row input { width: 9em; }
.export-list .ready-row { gap: 12px; }
.toolbar-form { gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }

/* ---------- dashboard: drafts not sent yet */
.stats.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .stats.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .stats.five { grid-template-columns: repeat(2, 1fr); } }
.stat.is-waiting { border-color: var(--highlight); background: var(--highlight-soft); }