/* ==========================================================================
   Time Tracker – app.css  ("Pier")
   Requires: fonts.css, tokens.css (load in that order).
   Plain CSS, no build step. Class names are BEM-ish and map 1:1 to the
   reference mockups in ./mockups/.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.5;
  font-stretch: var(--stretch-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Key numerals: condensed, tabular – the "timecode" voice of the UI */
.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-stretch: var(--stretch-num);
  font-weight: 600;
  letter-spacing: -.005em;
}
.num small { font-size: .6em; font-weight: 500; color: var(--ink-3); margin-left: .15em; }

.muted { color: var(--ink-3); }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Clip-label dot (company colour) ---------- */
.dot {
  width: 10px; height: 10px; flex: none;
  border-radius: 3px;
  background: var(--c, var(--ink-3));
}

/* ==========================================================================
   Shell
   ========================================================================== */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-5) var(--s-4);
  background: var(--rail);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--s-2);
  font-size: var(--fs-l); font-weight: 650; letter-spacing: -.01em;
  text-decoration: none;
}
.brand__mark { width: 28px; height: 28px; flex: none; }

.rail-cta { width: 100%; }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.nav a[aria-current="page"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}
.nav a[aria-current="page"] .icon { color: var(--accent); }

.rail-tracks { display: grid; gap: 2px; margin-top: calc(var(--s-2) * -1); padding-left: 10px; }
.rail-tracks a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: var(--r-s);
  color: var(--ink-2); font-size: var(--fs-s); text-decoration: none;
}
.rail-tracks a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.rail-tracks .num { margin-left: auto; font-size: var(--fs-s); color: var(--ink-3); font-weight: 500; }

.rail-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-2) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-s); color: var(--ink-2);
}
.rail-foot form, .rail-foot a.logout { margin-left: auto; }
.logout {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 8px; border-radius: var(--r-s);
  color: var(--ink-2); font-size: var(--fs-s); font-weight: 500; text-decoration: none; cursor: pointer;
}
.logout:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

.main { padding: var(--s-6) var(--s-6) var(--s-8); }
.container { max-width: var(--content-max); margin: 0 auto; }
.container--narrow { max-width: 640px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.page-head h1 { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.page-head .sub { margin-top: var(--s-1); color: var(--ink-3); font-size: var(--fs-m); }
.page-head__actions { display: flex; gap: var(--s-2); align-items: center; }

.stats { display: flex; gap: var(--s-6); }
.stat { display: grid; gap: 0; }
.stat__label { font-size: var(--fs-xs); color: var(--ink-3); }
.stat__value { font-size: 30px; line-height: 1.15; }

.section { margin-top: var(--s-7); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.section__head h2 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.section__head a { font-size: var(--fs-s); font-weight: 600; color: var(--accent); text-decoration: none; }
.section__head a:hover { text-decoration: underline; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-s);
  font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink-3); }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--sunken); color: var(--ink); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger-quiet { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.btn--danger-quiet:hover { background: var(--danger-soft); }
.btn--small { height: 32px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
.icon-btn--danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form__actions { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }

.field { display: grid; gap: 6px; align-content: start; }
.field > label, .field > .label { font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }

.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  font-size: var(--fs-m);
  transition: border-color var(--dur) var(--ease);
}
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: .85; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.input--num { font-variant-numeric: tabular-nums; font-stretch: var(--stretch-num); font-weight: 600; font-size: var(--fs-l); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238796A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.select--inline { width: auto; height: 36px; font-size: var(--fs-s); font-weight: 500; }

/* Radio chips: company choice */
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice__body {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  font-size: 14px; font-weight: 500;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.choice:hover .choice__body { border-color: var(--ink-3); }
.choice input:checked + .choice__body {
  border-color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 13%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--c, var(--accent));
  font-weight: 600;
}
.choice input:focus-visible + .choice__body { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Quick amounts */
.quick { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 32px; padding: 0 12px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-s);
  font-size: 13px; cursor: pointer;
  font-variant-numeric: tabular-nums; font-weight: 600;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Segmented control */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 10px;
}
.segmented a, .segmented button {
  padding: 6px 16px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.segmented a:hover, .segmented button:hover { color: var(--ink); }
.segmented [aria-current="true"], .segmented [aria-pressed="true"] {
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line);
}

/* Colour swatches (company colour picker) */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch span {
  display: block; width: 30px; height: 30px; border-radius: 8px; background: var(--c);
  transition: transform var(--dur) var(--ease);
}
.swatch:hover span { transform: scale(1.06); }
.swatch input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ==========================================================================
   Panels, flash, empty
   ========================================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--s-5);
}
.panel + .panel { margin-top: var(--s-5); }
.panel__title { font-size: var(--fs-l); font-weight: 650; letter-spacing: -.005em; }
.panel__intro { margin-top: var(--s-1); margin-bottom: var(--s-5); color: var(--ink-3); font-size: var(--fs-s); max-width: 60ch; }
.panel__title + .form { margin-top: var(--s-5); }

.flash {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: 12px 14px; margin-bottom: var(--s-5);
  border-radius: var(--r-m); font-size: 14px;
}
.flash .icon { margin-top: 2px; }
.flash--ok { background: var(--ok-soft); color: var(--ok); }
.flash--error { background: var(--danger-soft); color: var(--danger); }
.flash--warn { background: var(--warn-soft); color: var(--warn); }
.flash strong { color: var(--ink); font-weight: 600; }

.empty {
  display: grid; justify-items: center; gap: var(--s-2);
  padding: var(--s-7) var(--s-5); text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-m);
  color: var(--ink-2);
}
.empty h3 { font-size: var(--fs-l); font-weight: 650; color: var(--ink); }
.empty p { max-width: 40ch; font-size: var(--fs-s); }
.empty .btn { margin-top: var(--s-3); }

/* ==========================================================================
   Ruler – the signature element.
   A progress bar drawn like an NLE timeline ruler: fill in company colour,
   ticks every 10 % (long tick at 0/50/100 %), optional "pace" marker.
   Usage:
     <div class="ruler" style="--c:#F2A33A; --p:50%; --pace:40%" role="img" aria-label="…">
       <div class="ruler__track"><div class="ruler__fill"></div></div>
       <div class="ruler__ticks"></div>
       <div class="ruler__pace" title="Expected by tonight: 16 h"></div>   <!-- optional -->
     </div>
   --p is clamped in CSS; compute min(100, hours/target*100) server-side or with calc().
   ========================================================================== */
.ruler { --h: 8px; position: relative; height: calc(var(--h) + 7px); margin-top: var(--s-3); }
.ruler__track {
  position: absolute; inset: 0 0 auto 0; height: var(--h);
  background: var(--sunken); border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.ruler__fill { height: 100%; width: min(var(--p), 100%); background: var(--c); border-radius: var(--r-xs); }
.ruler__ticks {
  position: absolute; left: 0; right: 0; top: var(--h); height: 7px;
  background:
    linear-gradient(90deg, var(--tick) 1px, transparent 1px) 0 0 / 50% 7px repeat-x,
    linear-gradient(90deg, var(--tick) 1px, transparent 1px) 0 0 / 10% 4px repeat-x;
}
.ruler__ticks::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 7px; background: var(--tick); }
.ruler__pace {
  position: absolute; left: var(--pace); top: -4px; width: 2px; height: calc(var(--h) + 8px);
  background: var(--ink); border-radius: 1px; transform: translateX(-1px);
}
.ruler--sm { --h: 6px; height: 12px; margin-top: var(--s-2); }
.ruler--sm .ruler__ticks { height: 5px; background:
    linear-gradient(90deg, var(--tick) 1px, transparent 1px) 0 0 / 50% 5px repeat-x; }
.ruler--sm .ruler__ticks::after { height: 5px; }

/* the one orchestrated moment: rulers fill in when the dashboard loads */
@keyframes ruler-grow { from { width: 0; } }
.ruler--animate .ruler__fill { animation: ruler-grow 700ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .ruler--animate .ruler__fill { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* Tracks: one block per company, ruler-led */
.tracks { border-top: 1px solid var(--line-strong); }
.track { padding: var(--s-5) 0 var(--s-4); border-bottom: 1px solid var(--line); }
.track__head { display: flex; align-items: baseline; gap: 10px; }
.track__head .dot { align-self: center; width: 12px; height: 12px; }
.track__name { font-size: var(--fs-l); font-weight: 600; letter-spacing: -.005em; text-decoration: none; }
.track__name:hover { text-decoration: underline; }
.track__hours { margin-left: auto; font-size: 26px; line-height: 1; }
.track__hours small { font-size: 15px; }
.track__meta { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); }
.track__meta .is-ahead { color: var(--ok); font-weight: 600; }
.track__meta .is-behind { color: var(--warn); font-weight: 600; }
.legend-pace { display: inline-flex; align-items: center; gap: 6px; }
.legend-pace::before { content: ""; width: 2px; height: 10px; background: var(--ink); border-radius: 1px; }

/* ==========================================================================
   Ledger – entries grouped by day, ruled rows directly on the page
   ========================================================================== */
.ledger { border-top: 1px solid var(--line-strong); }
.day {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-5);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.day__label { font-size: var(--fs-s); font-weight: 600; padding-top: 10px; }
.day__label > small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); }
.day__label .num { display: block; margin-top: var(--s-1); font-size: 18px; color: var(--ink-2); }
.day__label .num small { font-size: 13px; }

.entry {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.entry:last-child { border-bottom: 0; }
.entry__company { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-s); font-weight: 600; }
.entry__note { color: var(--ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry__note.is-empty { color: var(--ink-3); }
.entry__hours { font-size: 18px; text-align: right; min-width: 64px; }
.entry__actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur) var(--ease); }
.entry:hover .entry__actions, .entry:focus-within .entry__actions { opacity: 1; }
@media (hover: none) { .entry__actions { opacity: 1; } }

.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end;
  margin-bottom: var(--s-5);
}
.filters .field { min-width: 150px; }
.filters .input, .filters .select { height: 36px; font-size: var(--fs-s); }

.ledger-foot {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; color: var(--ink-2); font-size: var(--fs-s);
}
.ledger-foot .num { font-size: 20px; color: var(--ink); }

/* ==========================================================================
   Companies
   ========================================================================== */
.company {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 6px solid var(--c); border-radius: var(--r-s);
}
.company + .company { margin-top: var(--s-3); }
.company__name { font-size: var(--fs-l); font-weight: 650; }
.company__targets { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: 2px; font-size: var(--fs-s); color: var(--ink-3); }
.company__targets .num { font-size: var(--fs-m); color: var(--ink-2); font-weight: 600; }
.company__side { display: flex; align-items: center; gap: var(--s-4); }
.company__total { text-align: right; font-size: var(--fs-xs); color: var(--ink-3); }
.company__total .num { display: block; font-size: 22px; color: var(--ink); line-height: 1.1; }

/* ==========================================================================
   Summary
   ========================================================================== */
.period { padding: var(--s-5) 0 var(--s-2); }
.period__head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-1); }
.period__title { font-size: var(--fs-l); font-weight: 650; }
.period__range { color: var(--ink-3); font-size: var(--fs-s); }
.period + .period { border-top: 1px solid var(--line); }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-3); }
.stat-row .stat__value { font-size: 22px; }

.totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line-strong); }
.totals .stat__value { font-size: 34px; }

/* ==========================================================================
   Tables (API tokens)
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-weight: 500; font-size: var(--fs-xs); color: var(--ink-3); padding: 0 var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line-strong); }
.table td { padding: 12px var(--s-3) 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td:last-child, .table th:last-child { text-align: right; padding-right: 0; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--sunken); color: var(--ink-2);
}
.tag--warn { background: var(--warn-soft); color: var(--warn); }
.tag--ok { background: var(--ok-soft); color: var(--ok); }

.code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; padding: 10px 12px; background: var(--sunken);
  border: 1px solid var(--line); border-radius: var(--r-s); word-break: break-all;
}
.reveal { display: grid; gap: var(--s-3); }
.reveal__row { display: flex; gap: var(--s-2); align-items: stretch; }
.reveal__row .code { flex: 1; }

/* ==========================================================================
   Auth
   ========================================================================== */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s-5); background: var(--rail); }
.auth__panel {
  width: min(400px, 100%); padding: var(--s-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-float);
}
.auth__panel .brand { padding: 0; margin-bottom: var(--s-6); }
.auth__panel h1 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; margin-bottom: var(--s-1); }
.auth__panel .lead { color: var(--ink-3); font-size: var(--fs-s); margin-bottom: var(--s-5); }
.auth__panel .btn { width: 100%; height: 42px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4);
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .rail-cta { width: auto; order: 2; height: 34px; }
  .nav { display: flex; order: 3; width: 100%; gap: 2px; overflow-x: auto; padding-bottom: 2px; }
  .nav a { white-space: nowrap; }
  .rail-tracks { display: none; }
  .rail-foot { order: 2; margin: 0 0 0 auto; padding: 0; border: 0; }
  .rail-foot .who, .logout__label { display: none; }
  .main { padding: var(--s-5) var(--s-4) var(--s-7); }
  .page-head h1 { font-size: 28px; }
  .stats { gap: var(--s-5); }
  .day { grid-template-columns: 1fr; gap: 0; }
  .day__label { padding-top: 0; display: flex; align-items: baseline; gap: var(--s-3); }
  .day__label > small { display: inline; }
  .day__label .num { margin: 0 0 0 auto; }
  .entry { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 2px; }
  .entry__company { grid-column: 1; }
  .entry__hours { grid-column: 2; grid-row: 1; }
  .entry__actions { grid-column: 3; grid-row: 1; opacity: 1; }
  .entry__note { grid-column: 1 / -1; }
  .form__row { grid-template-columns: 1fr; }
  .company { grid-template-columns: 1fr; }
  .company__side { justify-content: space-between; }
  .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   Additions for the Flask app (not part of the design handoff)
   ========================================================================== */
.entry__actions form { display: contents; }
.table td form { display: inline; margin: 0; }
.company-edit { margin: var(--s-3) 0 var(--s-5); }

/* Checkbox row (login "keep me logged in") */
.check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-s); color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

/* Free colour picker as the last swatch: rainbow until a custom colour is chosen */
.swatch--custom span { background: conic-gradient(#D63FE0, #F2A33A, #8DBB3A, #1FB5A3, #4C8DF6, #8B6CF0, #D63FE0); }
.swatch--custom.is-set span { background: var(--c); }
.swatch__picker { z-index: 1; }

/* Categories and monthly balance */
.entry__note .tag { margin-right: 8px; vertical-align: 1px; }
.track__cats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--ink-3); }
.track__cats .num { color: var(--ink-2); font-size: var(--fs-s); }
.field .hint { font-weight: 400; }
.balance { font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.balance.is-ahead { color: var(--ok); }
.balance.is-behind { color: var(--warn); }
[hidden] { display: none !important; }