/* ============================================================================
   Hours — "Terracotta" design system (Oura/Apple-caliber, warm & premium)
   Gradient terracotta base (--grad). Light + dark, both warm.
   Signature: aurora ring hero, animated shimmer bars, gradient CTAs.
   Type: Plus Jakarta Sans (UI) + JetBrains Mono (live timer). Token-driven via [data-theme].
   ========================================================================== */

/* ============================================================================
   "Terracotta" — warm, premium, Oura-caliber. Gradient terracotta base.
   Signature: --grad (terracotta gradient) for CTAs, rings, hero cards.
   ========================================================================== */
:root {
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --r-xs: 9px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-xl: 30px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --sp: 220ms;

  --nav-w: 232px;

  /* Signature gradients — same in both themes so the brand reads consistently */
  --grad: linear-gradient(135deg, #fb8b3d 0%, #ea580c 52%, #b93c10 100%);
  --grad-hot: linear-gradient(135deg, #fca85c 0%, #f97316 40%, #c2410c 100%);
  --grad-ring: linear-gradient(120deg, #ffb27a, #f97316 45%, #c2410c);
  --grad-text: linear-gradient(90deg, #fb923c, #ea580c);
}

/* ---------- Dark theme (default) — warm charcoal with real elevation ---------- */
[data-theme="dark"] {
  --bg: #0b0705;
  --bg-2: #140d09;
  --bg-tint-a: rgba(234, 88, 12, .16);
  --bg-tint-b: rgba(245, 158, 11, .08);
  --surface: #1f150e;
  --surface-2: #2a1d14;
  --surface-3: #38271b;
  --elevated: #241811;          /* cards — clearly lighter than --bg for figure-ground */
  --border: rgba(255, 214, 178, .12);
  --border-2: rgba(255, 214, 178, .2);
  --hairline: rgba(255, 214, 178, .08);

  --text: #fbf1ea;
  --text-2: #c6b3a6;
  --text-3: #8f7d6f;

  --brand: #ff9a5a;
  --brand-strong: #ea580c;
  --brand-weak: rgba(234, 88, 12, .2);
  --brand-border: rgba(255, 154, 90, .45);
  --on-brand: #fff;

  --time: #ffc46b;
  --time-weak: rgba(255, 196, 107, .18);

  --green: #58e08b;
  --green-strong: #16a34a;
  --green-weak: rgba(88, 224, 139, .16);
  --red: #ff9781;
  --red-strong: #ef5a3c;
  --red-weak: rgba(255, 151, 129, .18);
  --amber: #ffc46b;
  --amber-weak: rgba(255, 196, 107, .16);

  --ring: rgba(255, 154, 90, .6);
  /* layered warm shadow so cards visibly float */
  --shadow: 0 1px 1px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.4);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .68);
  --glow: 0 10px 34px rgba(234, 88, 12, .5);
  --scrim: rgba(6, 3, 1, .74);
  --card-top: rgba(255, 200, 150, .08);
  --edge: inset 0 1px 0 rgba(255, 224, 190, .1);   /* top highlight so cards catch light */
  --grain: .035;
}

/* ---------- Light theme — warm cream ---------- */
[data-theme="light"] {
  --bg: #f7ede4;
  --bg-2: #fdf8f3;
  --bg-tint-a: rgba(234, 88, 12, .1);
  --bg-tint-b: rgba(245, 158, 11, .08);
  --surface: #ffffff;
  --surface-2: #f8f0e9;
  --surface-3: #f0e4d9;
  --elevated: #fffdfb;
  --border: #eaddd0;
  --border-2: #ddccbc;
  --hairline: #f2e8df;

  --text: #26190f;
  --text-2: #6f5e51;
  --text-3: #9d8b7d;

  --brand: #c2410c;
  --brand-strong: #ea580c;
  --brand-weak: #fdeadd;
  --brand-border: rgba(194, 65, 12, .32);
  --on-brand: #fff;

  --time: #b45309;
  --time-weak: #fbeecd;

  --green: #15803d;
  --green-strong: #16a34a;
  --green-weak: #e4f5e8;
  --red: #d9503a;
  --red-strong: #c2410c;
  --red-weak: #fce9e2;
  --amber: #b45309;
  --amber-weak: #fbeecd;

  --ring: rgba(194, 65, 12, .38);
  --shadow: 0 1px 2px rgba(120, 60, 20, .05), 0 8px 24px rgba(120, 60, 20, .08);
  --shadow-lg: 0 26px 60px rgba(120, 60, 20, .16);
  --glow: 0 10px 28px rgba(234, 88, 12, .28);
  --scrim: rgba(60, 30, 12, .4);
  --card-top: rgba(255, 252, 248, .9);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .85);
  --grain: .02;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;   /* don't let iOS resize text on rotate */
  touch-action: pan-x pan-y;        /* allow scrolling, disable pinch / double-tap zoom */
}
body {
  font-family: var(--sans);
  background: var(--bg);
  background-image:
    radial-gradient(760px 460px at 8% -6%, var(--bg-tint-a), transparent 62%),
    radial-gradient(680px 520px at 104% 4%, var(--bg-tint-b), transparent 60%),
    radial-gradient(700px 700px at 50% 118%, var(--bg-tint-a), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Fine film grain over the whole app — adds tactile, premium depth (very subtle) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: var(--grain, .03); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::before { display: none; } }
/* Oura-style uppercase tracked section label */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

#app { display: flex; min-height: 100dvh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--nav-w);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
  padding: 20px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100dvh;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 10px 22px;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  background: var(--grad); box-shadow: var(--glow);
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.03em; }

.nav-btn {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer;
  font-family: inherit;
  transition: background var(--sp) var(--ease), color var(--sp) var(--ease);
}
.nav-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-btn.active { background: var(--brand-weak); color: var(--text); font-weight: 600; }
.nav-btn.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.nav-ico { width: 22px; height: 22px; display: grid; place-items: center; color: currentColor; }
.nav-ico svg { width: 20px; height: 20px; }
.nav-btn.active .nav-ico { color: var(--brand); }

/* Fixed to the bottom of the sidebar column (it lives outside .sidebar now). */
/* Count badge on a nav item (overdue / due-soon invoices) */
.nav-ico { position: relative; }
.nav-badge {
  position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; box-sizing: border-box;
  background: var(--time); color: #1a1200;
  font-size: 10px; font-weight: 800; line-height: 1; border-radius: 9px;
  border: 2px solid var(--surface);
  animation: badgePop .28s var(--ease-spring);
}
.nav-badge.urgent { background: var(--red-strong); color: #fff; }
@keyframes badgePop { from { transform: scale(0); } }

.sidebar-foot { position: fixed; left: 14px; bottom: 16px; width: calc(var(--nav-w) - 28px); display: flex; flex-direction: column; gap: 10px; z-index: 5; }
/* Meeting world clock — sits above the live Eastern clock, same surface. */
.meet-clock {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 9px 12px 8px;
}
.meet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.meet-title { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.meet-now {
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand); background: transparent; border: 0; padding: 0; cursor: pointer;
}
.meet-now.hidden { display: none; }
.meet-rows { display: flex; flex-direction: column; gap: 3px; }
.meet-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; cursor: text; }
.meet-city { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.meet-day { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.meet-time {
  width: 72px; padding: 2px 4px; text-align: right;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; background: transparent; border: 1px solid transparent; border-radius: 6px;
}
.meet-time:hover { border-color: var(--border); }
.meet-time:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.meet-time::-webkit-calendar-picker-indicator { display: none; }

/* Live US Eastern clock */
.est-clock {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 9px 12px;
}
.est-clock-ic { display: grid; place-items: center; color: var(--brand); flex-shrink: 0; }
.est-clock-ic svg { width: 18px; height: 18px; }
.est-clock-body { min-width: 0; line-height: 1.15; }
.est-clock-zone { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.est-clock-time { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 1px; }
.mini-timer {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(180deg, var(--time-weak), transparent);
  border: 1px solid var(--brand-border);
  border-color: color-mix(in srgb, var(--time) 40%, transparent);
  border-radius: var(--r); padding: 11px 13px;
}
.mini-timer.hidden { display: none; }
.mini-pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--time); flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--time-weak); animation: pulse 1.7s var(--ease) infinite;
}
.mini-timer-body { flex: 1; min-width: 0; }
.mini-timer-time { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--time); font-variant-numeric: tabular-nums; }
.mini-timer-label { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.theme-toggle {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer; align-self: flex-start;
  transition: background var(--sp) var(--ease), color var(--sp) var(--ease);
}
.theme-toggle:hover { background: var(--surface-3); color: var(--text); }
.theme-toggle svg { width: 18px; height: 18px; }

.foot-row { display: flex; align-items: center; gap: 8px; }
.sync-badge {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  border-radius: var(--r-sm); padding: 8px 11px; cursor: pointer; font: inherit; font-size: 12px;
  overflow: hidden; text-align: left;
}
.sync-badge:hover { background: var(--surface-3); color: var(--text); }
.sync-badge span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.sync-badge.ok .sync-dot { background: var(--green); }
.sync-badge.busy .sync-dot { background: var(--time); animation: pulse 1.2s var(--ease) infinite; }
.sync-badge.err .sync-dot { background: var(--red); }

/* ---------- Main ---------- */
.main { flex: 1; padding: 34px 40px; max-width: 1120px; }
@media (prefers-reduced-motion: no-preference) {
  .main.render-anim { animation: viewIn .3s var(--ease); }
  /* Directional slide when moving between tabs (swipe / tab tap) */
  .main.render-anim.anim-fwd { animation: slideFwd .32s var(--ease); }
  .main.render-anim.anim-back { animation: slideBack .32s var(--ease); }
}
@keyframes slideFwd { from { opacity: 0; transform: translateX(26px); } }
@keyframes slideBack { from { opacity: 0; transform: translateX(-26px); } }
.view-head { display: flex; align-items: center; gap: 10px 16px; margin-bottom: 20px; min-height: 42px; }
.view-head-titles { flex: 1 1 auto; min-width: 0; }
.view-title { font-size: 25px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.view-sub { color: var(--text-2); margin: 5px 0 0; font-size: 13.5px; }
.view-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.view-head-actions .seg { margin: 0 !important; }
.head-date { color: var(--text-2); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
/* Demo-data banner (persistent while example data is loaded) */
.demo-bar {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 9px 12px 9px 10px; border-radius: var(--r);
  background: linear-gradient(180deg, var(--time-weak), transparent 70%), var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--time) 42%, transparent);
}
.demo-tag { flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #1a1200; background: var(--time); padding: 3px 8px; border-radius: 6px; }
.demo-msg { flex: 1; min-width: 150px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.demo-clear { flex-shrink: 0; }
/* Eastern time shown as plain text next to the date — mobile Timer tab only */
.head-est { display: none; color: var(--brand); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Compact dropdown pill for header-level options (e.g. Finance period) */
.head-pill { width: auto; border-radius: 999px; padding: 8px 34px 8px 15px; font-size: 13px; font-weight: 600; background-color: var(--surface-2); }
/* Seven tabs don't fit a phone. Let the strip scroll on its own rather than push
   the whole page sideways — `.seg` sets overflow:hidden, which clipped it instead. */
.finance-tabs { margin-bottom: 16px; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.finance-tabs::-webkit-scrollbar { display: none; }
.finance-tabs button { flex: 0 0 auto; white-space: nowrap; }
/* Billing sub-nav: segmented control on desktop, compact dropdown on phones */
.bill-tab-select { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--text); padding: 9px 15px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  letter-spacing: -.01em;
  transition: background var(--sp) var(--ease), border-color var(--sp) var(--ease),
              transform .12s var(--ease), box-shadow var(--sp) var(--ease), color var(--sp) var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--surface-3); border-color: var(--border-2); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn-primary { background: var(--grad); background-size: 140% 140%; border-color: transparent; color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { background-position: 100% 100%; }
.btn-start { background: var(--grad-hot); background-size: 140% 140%; border-color: transparent; color: #fff; box-shadow: var(--glow); }
.btn-start:hover { background-position: 100% 100%; }
.btn-stop { background: linear-gradient(135deg, #f98b73, #ef5a3c 55%, #c2410c); border-color: transparent; color: #fff; box-shadow: 0 8px 26px rgba(239, 90, 60, .4); }
.btn-stop:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--red); box-shadow: none; }
.btn-danger-ghost:hover { background: var(--red-weak); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-xs); }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: var(--r); }
.btn-lg svg { width: 18px; height: 18px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Cards / panels ---------- */
.card {
  background: linear-gradient(180deg, var(--card-top), transparent 42%), var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow), var(--edge);
}
.card-pad { padding: 20px; }

/* ---------- Timer view ---------- */
.timer-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--card-top), transparent 42%), var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow), var(--edge);
  padding: 26px; margin-bottom: 20px;
}

/* ---------- Gradient ring hero (Oura-style) ---------- */
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); margin-bottom: 20px; padding: 22px 22px 24px; color: #fff; box-shadow: var(--glow), var(--shadow); isolation: isolate; }
.hero-aurora { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 6%, #ffc48f, transparent 52%),
    radial-gradient(110% 90% at 94% 4%, rgba(244, 63, 94, .5), transparent 55%),
    radial-gradient(150% 130% at 74% 120%, #b93c10, transparent 60%),
    linear-gradient(140deg, #f2711c, #a5370f);
  animation: auroraShift 16s ease-in-out infinite alternate;
}
@keyframes auroraShift { to { transform: scale(1.08) translateY(-2%); } }
.hero-content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: space-between; min-height: 24px; }
.hero-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .2); padding: 4px 11px; border-radius: 20px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: livePulse 1.5s var(--ease) infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero-ring { position: relative; --ring-track: rgba(255, 255, 255, .22); }
.ring { display: block; }
.ring-prog { animation: ringGrow 1.15s var(--ease) both; filter: drop-shadow(0 2px 8px rgba(0,0,0,.2)); }
.ring-prog.no-anim { animation: none; }
@keyframes ringGrow { from { stroke-dashoffset: var(--c); } }
/* Composition donut — segments fade in, staggered (opacity only; never touch
   transform on the circles or it overrides the SVG rotate presentation attr) */
.comp-seg { animation: compIn .5s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes compIn { from { opacity: 0; } }

/* Overview hero: dark warm canvas (both themes) so the multi-colour ring pops */
.overview-hero { box-shadow: var(--shadow-lg), var(--edge); color: #fff; }
.overview-hero .hero-aurora {
  animation: none;
  background:
    radial-gradient(120% 85% at 50% -12%, rgba(234, 88, 12, .26), transparent 60%),
    radial-gradient(130% 120% at 86% 122%, rgba(120, 58, 26, .4), transparent 62%),
    linear-gradient(180deg, #241812, #150e09);
}

/* Project-tinted hero (uses --hc = client colour) */
.project-hero .hero-aurora {
  animation: none;
  background:
    radial-gradient(120% 90% at 16% 4%, color-mix(in srgb, var(--hc) 60%, #fff 10%), transparent 55%),
    radial-gradient(150% 125% at 82% 120%, color-mix(in srgb, var(--hc) 55%, #000), transparent 62%),
    linear-gradient(142deg, color-mix(in srgb, var(--hc) 60%, #140c06), color-mix(in srgb, var(--hc) 34%, #000));
}
.hero-complete {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: #fff; font-family: inherit;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .28);
  padding: 4px 11px 4px 9px; border-radius: 20px;
  transition: background .16s var(--ease), transform .12s var(--ease);
}
.hero-complete svg { width: 14px; height: 14px; }
.hero-complete:hover { background: rgba(0, 0, 0, .34); }
.hero-complete:active { transform: scale(.94); }

/* Featured-hero swap animation (rail tap / dropdown change) */
.hero-swap { animation: heroSwap .34s var(--ease); }
@keyframes heroSwap { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* Project navigator rail */
.hero-rail {
  display: flex; gap: 8px; margin-bottom: 20px; padding: 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hero-rail::-webkit-scrollbar { display: none; }
.hero-rail-item {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 74px; padding: 9px 4px 8px; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, var(--card-top), transparent 60%), var(--elevated);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow), var(--edge);
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.hero-rail-item:hover { transform: translateY(-2px); }
.hero-rail-item:active { transform: scale(.96); }
.hero-rail-item.active { border-color: color-mix(in srgb, var(--hc, var(--brand)) 70%, transparent); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--hc, var(--brand)) 45%, transparent); }
.hero-rail-ring { width: 46px; height: 46px; display: grid; place-items: center; position: relative; }
.hero-rail-ring .ring { width: 46px; height: 46px; }
.hero-rail-name { font-size: 10.5px; font-weight: 600; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-rail-item.active .hero-rail-name { color: var(--text); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.ring-num span { font-size: 20px; font-weight: 700; opacity: .82; margin-left: 2px; }
.ring-cap { font-size: 12px; opacity: .82; margin-top: 7px; }
.hero-stats { display: flex; gap: 10px; width: 100%; max-width: 360px; }
.hero-stats > div { flex: 1; text-align: center; background: rgba(255, 255, 255, .13); border-radius: var(--r-sm); padding: 10px 6px; backdrop-filter: blur(2px); }
.hero-stat-v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hero-stat-l { font-size: 10px; opacity: .85; text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; }

/* ---------- Horizontal hero band (Finance / Invoices / Timesheet) ---------- */
.hero-band { padding: 22px 22px; }
/* Eyebrow pinned top-left (tag top-right) — same spot as the Timer hero's "Today" */
.hero-band-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-bottom: 14px; }
.hero-band-inner { display: flex; align-items: center; gap: 26px; }
.hero-ring-sm { flex-shrink: 0; position: relative; }
.hero-ring-sm .ring-num { font-size: 29px; }
.hero-ring-sm .ring-num span { font-size: 14px; }
.hero-ring-sm .ring-cap { font-size: 10px; margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; opacity: .78; }
.hero-band-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.hero-headline { font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-sub { font-size: 13px; opacity: .9; margin-top: -5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hero-stats-band { max-width: 360px; margin-top: 3px; }   /* identical pill dimensions to the Timer hero */
.hero-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .2); padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.hero-tag.alarm { background: rgba(10, 4, 2, .28); }
@media (max-width: 640px) {
  .hero-band-inner { flex-direction: column; text-align: center; gap: 16px; }
  /* full-width body so the stat row can span the hero like the Timer tab
     (otherwise the column centers the body to its content width and the pills shrink) */
  .hero-band-body { align-items: center; width: 100%; }
  .hero-headline { font-size: 33px; }
  .hero-stats-band { width: 100%; }
}
.timer-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.timer-display {
  font-family: var(--mono); font-size: 46px; font-weight: 700;
  letter-spacing: -.03em; min-width: 210px; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.05;
  transition: color var(--sp) var(--ease);
}
.timer-display.running { color: var(--time); text-shadow: 0 0 26px color-mix(in srgb, var(--time) 45%, transparent); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: -.005em; }
.field-grow { flex: 1; min-width: 170px; }
input, select, textarea {
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 10px 12px; width: 100%;
  transition: border-color var(--sp) var(--ease), box-shadow var(--sp) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
/* iOS Safari renders date/time inputs as a native control that ignores width:100%
   and has its own intrinsic min-width (so it overflows wider than sibling selects)
   and centers its value via ::-webkit-date-and-time-value. Strip the native
   appearance so it sizes and aligns like every other field. */
input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none; min-width: 0; box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa2b1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px;
}
textarea { resize: vertical; min-height: 64px; }

.timer-extras { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
.quick-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.backdate-row { flex-wrap: nowrap; }
.backdate-row .hint { white-space: nowrap; }
.backdate-row .btn { flex: 1; }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3); padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; font-size: 13.5px; letter-spacing: -.01em; }
.tbl tbody td:first-child { font-weight: 600; color: var(--text); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--sp) var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text); letter-spacing: 0; }
.tbl th.num { font-family: var(--sans); }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity var(--sp) var(--ease); }
.tbl tbody tr:hover .row-actions { opacity: 1; }
.icon-btn {
  background: transparent; border: none; cursor: pointer; padding: 6px;
  border-radius: var(--r-xs); color: var(--text-3);
  display: inline-grid; place-items: center;
  transition: background var(--sp) var(--ease), color var(--sp) var(--ease);
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn.danger:hover { background: var(--red-weak); color: var(--red); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Nothing was sizing icons inside a chip, so they rendered at their intrinsic
   size and blew the pill up to two lines. */
.chip svg { width: 13px; height: 13px; flex-shrink: 0; }

/* A marker that rides along with the text it annotates, at text size — used where
   a full pill would shout louder than the information deserves. */
.line-mark { display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 7px; }
.line-mark svg { width: 14px; height: 14px; }
.line-mark.pass { color: var(--time); }
.line-mark.missing { color: var(--red); }
.badge-billable { background: var(--green-weak); color: var(--green); border-color: transparent; }
.badge-nonbill { background: var(--surface-2); color: var(--text-3); }
.badge-manual { background: var(--brand-weak); color: var(--brand); border-color: transparent; }
.badge-timer { background: var(--time-weak); color: var(--time); border-color: transparent; }
.chip-btn { cursor: pointer; font-family: inherit; transition: background var(--sp) var(--ease), border-color var(--sp) var(--ease), color var(--sp) var(--ease); }
.chip-btn:hover { background: var(--brand-weak); border-color: var(--brand-border); color: var(--brand); }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--card-top), transparent 42%), var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow), var(--edge);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
/* subtle brand wash bleeding from the top-right corner of each stat */
.stat::after {
  content: ""; position: absolute; top: -40%; right: -30%; width: 160px; height: 160px;
  background: radial-gradient(circle, var(--brand-weak), transparent 68%);
  pointer-events: none;
}
.stat-label { font-size: 12px; color: var(--text-2); font-weight: 600; position: relative; }
.stat-value { font-size: 30px; font-weight: 800; letter-spacing: -.035em; margin-top: 6px; font-variant-numeric: tabular-nums; font-family: var(--sans); position: relative; }
.stat-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; position: relative; }

/* ---------- Timesheet week grid ---------- */
.week-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.week-label { font-weight: 700; font-size: 16px; min-width: 220px; letter-spacing: -.02em; }
.day-group { margin-bottom: 8px; }
.day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 14px; margin-top: 14px;
}
.day-head-date { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.day-head-total { font-family: var(--mono); font-weight: 600; color: var(--text-2); }
.day-head.today .day-head-date { color: var(--brand); }

/* ---------- Timesheet period controls (day / week / month / range) ---------- */
.ts-controls { gap: 8px; }
.ts-period-label { font-weight: 700; font-size: 14.5px; letter-spacing: -.02em; white-space: nowrap; }
.ts-range-inputs input { width: auto; min-width: 140px; }
@media (max-width: 640px) {
  .ts-controls { gap: 8px 6px; }
  .ts-controls .seg { flex: 1 1 100%; display: flex; }
  .ts-controls .seg button { flex: 1; }
  .ts-period-label { flex: 1 1 100%; order: -1; font-size: 14px; }
  .ts-range-inputs { flex: 1 1 100%; }
  .ts-range-inputs input { flex: 1; min-width: 0; }
}

/* ---------- Toolbar ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.toolbar .spacer, .week-nav .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.seg button {
  background: transparent; border: none; padding: 8px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; color: var(--text-2); border-right: 1px solid var(--border);
  font-family: inherit; transition: background var(--sp) var(--ease), color var(--sp) var(--ease);
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(234, 88, 12, .3); }

/* ---------- Dropdown menu ---------- */
.menu-wrap { position: relative; display: inline-flex; }
.menu-btn { gap: 6px; }
.menu-caret { font-size: 10px; opacity: .8; margin-left: 1px; }
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 214px;
  background: linear-gradient(180deg, var(--card-top), transparent 40%), var(--elevated);
  border: 1px solid var(--border-2); border-radius: var(--r); padding: 6px;
  box-shadow: var(--shadow-lg), var(--edge);
  animation: menuIn .16s var(--ease);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  color: var(--text); font-size: 13.5px; font-weight: 500;
  padding: 9px 11px; border-radius: var(--r-sm);
  transition: background .14s var(--ease);
}
.menu button:hover, .menu button:focus-visible { background: var(--surface-2); outline: none; }
.menu button svg { width: 15px; height: 15px; color: var(--text-2); flex-shrink: 0; }
.menu-sep { height: 1px; background: var(--hairline); margin: 5px 6px; }
@media (max-width: 640px) {
  /* Toolbars wrap on phones, so the trigger is usually near the LEFT edge —
     align the panel to the left and cap its width to stay on screen. */
  .menu { right: auto; left: 0; min-width: 0; width: max-content; max-width: calc(100vw - 40px); }
}

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 54px 20px; color: var(--text-3); }
.empty-ico { font-size: 30px; opacity: .6; display: inline-grid; }
.empty-ico svg { width: 40px; height: 40px; }
.empty-title { font-weight: 700; color: var(--text-2); margin: 12px 0 4px; font-size: 15px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  .modal-backdrop:not(.hidden) { animation: fade .18s var(--ease); }
  .modal-backdrop:not(.hidden) .modal { animation: modalIn .24s var(--ease); }
}
.modal {
  background: linear-gradient(180deg, var(--card-top), transparent 30%), var(--elevated);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg), var(--edge);
  width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto;
}
.modal.wide { max-width: 620px; }
.modal-head { padding: 20px 22px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 15px; }
.modal-foot {
  padding: 15px 22px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
}
/* Fields share a row until they can't: `min-width: 0` lets an input shrink below
   its intrinsic width (date pickers are the worst offenders), and the 150px basis
   makes the row wrap instead of pushing the modal wider than the screen. */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > * { flex: 1 1 150px; min-width: 0; }

/* ---------- Toast ---------- */
.toast-host {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 200; align-items: center;
}
.toast {
  background: var(--surface-3); color: var(--text); padding: 11px 18px; border-radius: 22px;
  font-size: 13.5px; font-weight: 500; border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg); animation: toastIn .22s var(--ease);
}
.toast.warn { background: var(--time); color: #1a1200; border-color: transparent; }
.toast.err { background: var(--red-strong); color: #fff; border-color: transparent; }

/* ---------- Idle prompt ---------- */
.idle-card { text-align: center; }
.idle-mins { font-size: 42px; font-weight: 800; color: var(--time); font-family: var(--mono); }

/* ---------- Gap rows (untracked time) ---------- */
.gap-row td {
  background:
    repeating-linear-gradient(45deg, var(--time-weak), var(--time-weak) 9px, transparent 9px, transparent 18px);
}
.gap-row:hover td { background: var(--time-weak); }
.gap-flag { color: var(--time); font-weight: 700; }
.gap-flag svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.gap-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.gap-confirm { border-color: var(--border-2); color: var(--text-2); }
.gap-confirm:hover { color: var(--text); }
.gap-fill { border-color: color-mix(in srgb, var(--time) 55%, transparent); color: var(--time); background: transparent; }
.gap-fill:hover { background: var(--time); color: #1a1200; border-color: transparent; }

/* ---------- Quick-start / kbd ---------- */
kbd {
  font-family: var(--mono); font-size: 11px; background: var(--surface-3);
  border: 1px solid var(--border-2); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 6px; color: var(--text-2);
}

/* ---------- Nudge bar ---------- */
.nudge-bar {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 14px;
  background: var(--surface-3); color: var(--text); padding: 11px 14px 11px 18px;
  border: 1px solid var(--border-2);
  border-radius: 30px; box-shadow: var(--shadow-lg); max-width: 92vw;
  animation: nudgeIn .28s var(--ease);
}
.nudge-bar.warn { background: linear-gradient(180deg, color-mix(in srgb, var(--time) 22%, var(--surface-3)), var(--surface-3)); border-color: var(--brand-border); border-color: color-mix(in srgb, var(--time) 45%, transparent); }
.nudge-bar .nudge-msg { font-size: 13.5px; }
.nudge-bar .nudge-msg svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; color: var(--time); }
.nudge-bar .nudge-actions { display: flex; gap: 6px; }
.nudge-bar .n-close { display: inline-grid; place-items: center; }
.nudge-bar .n-close svg { width: 15px; height: 15px; }
.nudge-bar .n-btn {
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text); cursor: pointer;
  padding: 6px 13px; border-radius: 16px; font-size: 12.5px; font-weight: 600; font-family: inherit;
  transition: background var(--sp) var(--ease);
}
.nudge-bar .n-btn:hover { background: var(--surface-2); }
.nudge-bar .n-btn.primary { background: var(--time); color: #1a1200; border-color: transparent; }
.nudge-bar .n-close { background: transparent; border: none; color: var(--text-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.nudge-bar .n-close:hover { color: var(--text); }

/* ---------- Finance lines ---------- */
.fin-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; }
.fin-line:last-child { border-bottom: none; }
.fin-line strong { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }

/* ---------- Finance dashboard: monthly column chart ----------
   Two series (income / expenses). Palette CVD-validated in both themes. */
:root { --c-income: #ea580c; --c-expense: #2aa198; }
[data-theme="light"] { --c-expense: #0d8f86; }
.fin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mchart { display: flex; align-items: flex-end; gap: 4px; height: calc(var(--h) + 22px); }
.mcol { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: default; }
.mcol-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: var(--h); }  /* 2px surface gap */
.mbar { width: 9px; max-width: 24px; border-radius: 4px 4px 0 0; display: block; transform-origin: bottom; animation: barRise .5s var(--ease) both; }
.mbar-income { background: var(--c-income); }
.mbar-exp { background: var(--c-expense); }
@keyframes barRise { from { transform: scaleY(0); } }
.mcol-label { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.mtip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2);
  padding: 6px 10px; border-radius: var(--r-sm); font-size: 11.5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .14s var(--ease); z-index: 4; box-shadow: var(--shadow);
}
.mcol:hover .mtip, .mcol:focus .mtip { opacity: 1; }
/* Keep edge tooltips inside the chart instead of pushing the page wide */
.mchart .mcol:first-child .mtip { left: 0; transform: none; }
.mchart .mcol:last-child .mtip { left: auto; right: 0; transform: none; }
.mchart { overflow: visible; }
.mcol:hover .mbar, .mcol:focus .mbar { filter: brightness(1.15); }
@media (max-width: 640px) {
  .fin-cols { grid-template-columns: 1fr; }
  .mbar { width: 6px; }
  .mcol-label { font-size: 9px; }
  .mtip { font-size: 11px; }
}

/* ---------- Reports bars (animated + shimmer) ---------- */
.bar-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.bar-name { width: 170px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 26px; background: var(--surface-2); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.bar-fill { position: relative; height: 100%; border-radius: 999px; min-width: 8px; overflow: hidden; transform-origin: left center; animation: barGrow .9s var(--ease-spring) both; background: var(--grad); }
.bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 28%, rgba(255,255,255,.4) 50%, transparent 72%); transform: translateX(-130%); animation: shimmer 2.8s ease-in-out .5s infinite; }
.bar-val { width: 140px; text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
@keyframes barGrow { from { transform: scaleX(0); } }
@keyframes shimmer { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Invoice preview (always paper-white, for print + client-facing) ---------- */
.invoice-sheet {
  background: #fff; color: #14171f; padding: 44px 46px; max-width: 720px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow);
  --inv-muted: #6b7280; --inv-line: #e5e7eb; --inv-ink: #14171f;
}
.invoice-sheet .muted { color: var(--inv-muted); }
.inv-head { display: flex; justify-content: space-between; margin-bottom: 32px; }
.inv-h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 4px; color: var(--inv-ink); }
.inv-meta { text-align: right; font-size: 13px; color: var(--inv-muted); }
.inv-parties { display: flex; justify-content: space-between; margin-bottom: 28px; gap: 30px; }
.inv-party-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: 5px; font-weight: 600; }
.inv-tbl { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.inv-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; padding: 9px 6px; border-bottom: 2px solid var(--inv-ink); font-weight: 600; }
.inv-tbl td { padding: 10px 6px; border-bottom: 1px solid var(--inv-line); font-size: 13px; color: var(--inv-ink); }
.inv-tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.inv-tbl .muted { color: var(--inv-muted); }
.inv-totals { margin-left: auto; width: 270px; }
.inv-total-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; color: var(--inv-ink); }
.inv-total-row.grand { border-top: 2px solid var(--inv-ink); margin-top: 6px; padding-top: 13px; font-size: 19px; font-weight: 800; }
.inv-logo { max-height: 60px; max-width: 220px; margin-bottom: 12px; display: block; }
.inv-meta-k { color: var(--inv-muted); }
.inv-payment { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--inv-line); font-size: 13px; color: var(--inv-ink); line-height: 1.7; }
.inv-payment .inv-party-label { margin-bottom: 6px; }
.inv-notes { margin-top: 20px; font-size: 12.5px; color: var(--inv-muted); white-space: pre-wrap; }

/* Work-detail block on the invoice sheet (stays paper-white for printing) */
.inv-workdetail { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--inv-line); }
.inv-workref { display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  font-size: 13.5px; color: var(--inv-ink); padding: 6px 0 10px; }
.inv-worktbl { margin-top: 6px; }
.inv-worktbl th, .inv-worktbl td { font-size: 12px; padding: 6px 6px; }
.inv-worktbl tfoot td { border-top: 2px solid var(--inv-ink); border-bottom: none; padding-top: 8px; }
/* Work-detail tick boxes in the editor */
.wd-opt { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; }
.wd-opt input { width: auto; margin-top: 2px; flex-shrink: 0; }
.wd-opt input:disabled + span { opacity: .5; }

/* Invoice tab controls */
.inv-toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.inv-toggles .seg { display: flex; flex: 1 1 220px; min-width: 0; }
.inv-toggles .seg button { flex: 1; white-space: nowrap; }
.inv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: start; }
.inv-fields .field-wide { grid-column: 1 / -1; }   /* Invoice date spans the row so From/To pair evenly */
.inv-fields .field { min-width: 0; }
.inv-fields input, .inv-fields select { min-width: 0; max-width: 100%; }
.inv-fields input[type="date"] { text-align: left; }   /* match the left-aligned selects */
.inv-item-row { display: grid; grid-template-columns: 1fr 86px 104px 38px; gap: 8px; margin-bottom: 8px; align-items: center; }
/* Billing editor: one line-item row */
.doc-line { display: grid; grid-template-columns: 1fr 76px 96px 68px 96px 34px 34px; gap: 8px; margin-bottom: 8px; align-items: center; }
.doc-line input { min-width: 0; }
.dl-pass { opacity: .45; }
.dl-pass:hover { opacity: .8; }
.dl-pass.on { opacity: 1; color: var(--time); background: var(--time-weak); }
.dl-amt { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bill-badge-overdue { background: var(--red-weak); color: var(--red); border-color: transparent; }
/* Template picker rows */
.tpl-row { display: flex; align-items: center; gap: 8px; }
.tpl-pick {
  flex: 1; min-width: 0; text-align: left; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; margin-bottom: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.tpl-pick:hover { background: var(--surface-3); border-color: var(--brand-border); }
.tpl-name { font-weight: 600; font-size: 13.5px; }
@media (max-width: 640px) {
  .doc-line { grid-template-columns: 1fr 1fr 34px 34px; row-gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
  .doc-line .dl-desc { grid-column: 1 / -1; }
  .doc-line .dl-pass { grid-column: 3; }
  .doc-line .dl-vat { grid-column: 1; }
  .doc-line .dl-amt { grid-column: 2; }
  .doc-line .dl-del { grid-column: 4; }
}
.logo-slot { width: 90px; height: 56px; border: 1px dashed var(--border-2); border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; background: var(--surface); }
.logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Invoices export as real PDFs (jsPDF), so no special print styling is needed. */

/* ---------- Utility ---------- */
.hidden { display: none !important; }
.muted { color: var(--text-3); }
.right { text-align: right; }
.flex { display: flex; }
.gap { gap: 10px; }
.mt { margin-top: 14px; }
.nowrap { white-space: nowrap; }
.hint { font-size: 12px; color: var(--text-3); }
.hint svg { width: 14px; height: 14px; vertical-align: -2px; }
.divider { height: 1px; background: var(--border); margin: 4px 0; }
.color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---------- Keyframes ---------- */
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes nudgeIn { from { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .mini-pulse { animation: none; }
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 960px) {
  :root { --nav-w: 210px; }
  .main { padding: 26px 22px; }
}

/* ---------- Responsive: phone (bottom nav) ---------- */
@media (max-width: 640px) {
  #app { flex-direction: column; }
  /* Floating glass nav — detached pill hovering above the home indicator */
  .sidebar {
    position: fixed; left: 12px; right: 12px; top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto; height: auto; flex-direction: row; gap: 2px;
    padding: 8px 8px; border-radius: 26px;
    border: 1px solid var(--border-2); border-right: 1px solid var(--border-2);
    background: color-mix(in srgb, var(--elevated) 82%, transparent);
    backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: var(--shadow-lg), var(--edge);
    z-index: 80; justify-content: space-around;
  }
  .brand { display: none; }
  .nav-btn {
    position: relative; flex-direction: column; gap: 4px; padding: 8px 3px 7px; flex: 1;
    align-items: center; border-radius: 18px; white-space: nowrap; font-weight: 500;
    transition: color .2s var(--ease), transform .2s var(--ease-spring);
  }
  .nav-btn:hover { background: transparent; }
  /* Active tab: gradient pill glowing behind the icon + label */
  .nav-btn.active { background: transparent; color: var(--on-brand); }
  .nav-btn.active::before {
    content: ""; display: block; position: absolute;
    top: 3px; bottom: 3px; left: 2px; right: 2px;
    width: auto; height: auto; transform: none;
    background: var(--grad); border-radius: 15px; box-shadow: var(--glow);
    z-index: 0; animation: navPop .28s var(--ease-spring);
  }
  .nav-btn.active .nav-ico { color: var(--on-brand); }
  .nav-ico, .nav-label { position: relative; z-index: 1; }
  @keyframes navPop { from { opacity: 0; transform: scale(.6); } }
  .nav-label { font-size: 9.5px; }
  .nav-ico { width: 24px; height: 24px; }
  .nav-badge { border-color: color-mix(in srgb, var(--elevated) 82%, transparent); top: -3px; right: -5px; }
  .nav-ico svg { width: 22px; height: 22px; }

  /* Sync badge + theme toggle live in Settings on mobile — don't float them */
  .foot-row { display: none; }
  /* Running mini-timer floats at the TOP of the viewport (below the notch) */
  .sidebar-foot { position: fixed; left: 12px; right: 12px; width: auto; top: calc(8px + env(safe-area-inset-top)); bottom: auto; margin: 0; z-index: 82; }
  .mini-timer { box-shadow: var(--shadow-lg); }

  /* Clear the status bar / notch + the floating top clock at the top, and leave a
     comfortable gap below the last content so it scrolls clear above the bottom nav. */
  .main { padding: calc(16px + env(safe-area-inset-top)) 15px calc(116px + env(safe-area-inset-bottom)); max-width: none; }
  /* When tracking, push content down so the top mini-timer doesn't cover the title */
  body.timer-running .main { padding-top: calc(74px + env(safe-area-inset-top)); }
  /* On mobile the Eastern time is shown as text in the Timer header, not a floating pill */
  .est-clock { display: none; }
  .meet-clock { display: none; }   /* the sidebar footer is not shown on phones */
  .head-est { display: inline; }
  .view-title { font-size: 21px; }
  /* Header stays a single row on mobile too (title left, compact control right)
     so every tab's header is the same height and heroes never bounce between tabs. */
  .view-head { gap: 8px 10px; }
  .view-head-actions { gap: 6px; }
  .view-head-actions .seg button { padding: 7px 10px; font-size: 12.5px; }
  .head-pill { padding: 8px 30px 8px 12px; }   /* stays 16px to avoid iOS zoom */
  .head-date { font-size: 12.5px; }
  .bill-tab-seg { display: none; }
  .bill-tab-select { display: block; }
  .view-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 16px inputs so iOS doesn't auto-zoom when a field gains focus */
  input, select, textarea { font-size: 16px; }

  .timer-row { flex-direction: column; align-items: stretch; }
  .timer-display { min-width: 0; text-align: center; font-size: 52px; padding: 6px 0; }
  .field-grow { min-width: 0; }
  .timer-row .btn-lg { width: 100%; }

  /* Stack form rows on a phone. The desktop rule gives each child
     `flex: 1 1 150px`, and once the row is a column that 150px basis becomes a
     *height* — every field in every modal was forced to 150px tall, which is
     what made them look padded out and half-empty. Reset the basis so fields
     take the height their contents need. */
  .form-row { flex-direction: column; align-items: stretch !important; }
  .form-row > * { flex: 0 0 auto; }

  /* Stat tiles ask for 170px columns, which do not fit inside a modal on a
     phone once the modal's own padding is taken off — the tiles overflowed
     their card. One per row instead. */
  .modal .stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .modal .stat-value { font-size: 20px; }

  /* Entry tables reflow into stacked cards — no horizontal scroll on phones. */
  .card { overflow-x: auto; }            /* safety for any non-reflowed wide table */
  .tbl { min-width: 0; }
  .tbl-entries, .tbl-entries tbody { display: block; }
  .tbl-entries thead { display: none; }
  .tbl-entries tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px;
    padding: 13px 14px; border-bottom: 1px solid var(--hairline); align-items: center;
  }
  .tbl-entries tr:last-child { border-bottom: none; }
  .tbl-entries td { display: block; padding: 0; border: none; }
  .tbl-entries td:nth-child(1) { grid-column: 1; grid-row: 1; min-width: 0; }
  .tbl-entries td:nth-child(1) .chip { background: transparent; border: none; padding: 0; font-weight: 600; color: var(--text); }
  .tbl-entries td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--text-2); font-size: 13px; }
  .tbl-entries td:nth-child(3) { grid-column: 1; grid-row: 3; font-size: 12px; }
  .tbl-entries td:nth-child(4) { grid-column: 2; grid-row: 3; text-align: right; }
  .tbl-entries td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  .tbl-entries td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
  .tbl-entries .row-actions { opacity: 1; justify-content: flex-end; }
  /* Untracked-gap row stays a single line */
  .tbl-entries tr.gap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tbl-entries tr.gap-row td { display: inline-flex; align-items: center; }
  .tbl-entries tr.gap-row td:nth-child(2), .tbl-entries tr.gap-row td:nth-child(3) { display: none; }
  .tbl-entries tr.gap-row td:nth-child(1) { flex: 1; }

  .week-nav { flex-wrap: wrap; gap: 8px; }
  .week-label { order: -1; flex-basis: 100%; font-size: 16px; min-width: 0; }
  .week-nav .spacer { display: none; }
  .seg button { padding: 8px 11px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 24px; }

  .modal { max-width: none; }
  .modal-foot { flex-wrap: wrap; }

  .invoice-sheet { padding: 24px 18px; }
  .inv-head, .inv-parties { flex-direction: column; gap: 12px; }
  .inv-meta, .inv-parties > div { text-align: left !important; }
  .inv-totals { width: 100%; }
  .inv-item-row { grid-template-columns: 1fr 1fr 38px; }
  .inv-item-row .ci-desc { grid-column: 1 / -1; }
  /* Finance tables (expenses, sent invoices) reflow to cards on phones */
  .tbl-exp, .tbl-exp tbody, .tbl-sent, .tbl-sent tbody { display: block; }
  .tbl-exp thead, .tbl-sent thead { display: none; }
  .tbl-exp tr, .tbl-sent tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--hairline); align-items: center; }
  .tbl-exp tr:last-child, .tbl-sent tr:last-child { border-bottom: none; }
  .tbl-exp td, .tbl-sent td { display: block; padding: 0; border: none; }
  /* expenses: Item + Gross / Category + VAT / actions */
  .tbl-exp td:nth-child(1) { display: none; }                          /* date hidden (period-scoped) */
  .tbl-exp td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 500; }
  .tbl-exp td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  .tbl-exp td:nth-child(3) { grid-column: 1; grid-row: 2; color: var(--text-2); font-size: 13px; }
  .tbl-exp td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .tbl-exp td:nth-child(6) { grid-column: 1 / -1; grid-row: 3; }
  .tbl-exp .row-actions { opacity: 1; justify-content: flex-end; }
  /* sent invoices: Invoice + Total / Client + Status / Due + actions */
  .tbl-sent td:nth-child(3) { display: none; }                         /* issued date hidden */
  .tbl-sent td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
  .tbl-sent td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  .tbl-sent td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--text-2); font-size: 13px; }
  .tbl-sent td:nth-child(6) { grid-column: 2; grid-row: 2; text-align: right; }
  .tbl-sent td:nth-child(4) { grid-column: 1; grid-row: 3; font-size: 12px; }
  .tbl-sent td:nth-child(7) { grid-column: 2; grid-row: 3; }
  .tbl-sent .row-actions { opacity: 1; justify-content: flex-end; }

  /* invoice fields + toggles + actions stack full-width on phones */
  .inv-fields { grid-template-columns: 1fr; }
  .inv-toggles { flex-direction: column; }
  .inv-toggles .seg { flex: 1 1 auto; }
  .inv-actions { flex-wrap: wrap; }
  .inv-actions .spacer { display: none; }
  .inv-actions .btn { white-space: nowrap; }

  /* Clients: header wraps so buttons don't overflow */
  .client-head { flex-wrap: wrap; gap: 10px; }
  .client-title { flex-wrap: wrap; min-width: 0; }
  .client-actions { flex-shrink: 0; }
  /* Client project rows reflow: name + edit on line 1, badge + rate on line 2 */
  .tbl-cprojects, .tbl-cprojects tbody { display: block; }
  .tbl-cprojects tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px;
    padding: 11px 2px; border-bottom: 1px solid var(--hairline); align-items: center;
  }
  .tbl-cprojects tr:last-child { border-bottom: none; }
  .tbl-cprojects td { display: block; padding: 0; border: none; }
  .tbl-cprojects td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 500; }
  .tbl-cprojects td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .tbl-cprojects td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tbl-cprojects td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }

  /* Client bars stack: full name on top, wider bar + value below */
  .bar-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 6px; padding: 10px 0; }
  .bar-name { width: auto; grid-column: 1 / -1; }
  .bar-track { grid-column: 1; align-self: center; }
  .bar-val { width: auto; grid-column: 2; align-self: center; white-space: nowrap; }

  .nudge-bar {
    top: auto; bottom: calc(88px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none;
    max-width: none; border-radius: var(--r); padding: 10px 12px; gap: 8px;
  }
  .nudge-bar .nudge-msg { font-size: 12.5px; }
  .nudge-bar .n-btn { white-space: nowrap; }
}

/* Touch devices: always show row actions (no hover to reveal them) */
@media (hover: none) {
  .row-actions { opacity: 1; }
}

/* ---- Talous panel + embed ---------------------------------------------- */
/* .card carries no bottom margin (elsewhere a .stat-grid supplies the gap),
   so stacked cards would touch. Space them here rather than changing .card
   globally and shifting every other view. */
.tal-stack { display: grid; gap: 16px; }
.tal-stack .card { margin: 0; }
.tal-stack .card > .stat-grid:last-child,
.tal-stack .card .stat-grid { margin-bottom: 0; }
.tal-stack .card .stat-grid + * { margin-top: 16px; }
.tal-stack .fin-cols { margin-bottom: 0; gap: 16px; }
.tal-stack .bar-row + .bar-row { margin-top: 6px; }

.tal-frame-wrap { position: relative; height: calc(100vh - 190px); min-height: 420px; }
.tal-frame {
  width: 100%; height: 100%; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--elevated); display: block;
}

@media (max-width: 780px) { .tal-frame-wrap { height: calc(100vh - 240px); } }

/* ---- App switcher (Hours ⇄ Talous) ------------------------------------- */
.app-switch { display: flex; gap: 4px; align-items: center; padding: 0; }
.app-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); font: inherit; font-weight: 650; font-size: 13px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.app-btn:hover { color: var(--text); background: var(--hover, rgba(255,255,255,.05)); }
.app-btn.active { color: var(--text); background: var(--elevated); border-color: var(--border); }
.app-btn .app-mark { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; }
.app-btn .app-mark svg { width: 20px; height: 20px; }
.app-btn.active .app-mark { color: var(--accent); }
/* On a narrow sidebar the labels are the first thing to go, not the icons. */
@media (max-width: 1080px) { .app-btn .app-name { display: none; } .app-btn { padding: 7px; } }

/* ---- Talous, full surface ---------------------------------------------- */
.talous-shell { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); }
.talous-shell.hidden { display: none; }
.talous-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface, var(--elevated));
}
.talous-body { flex: 1; min-height: 0; }
.talous-full { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.talous-wait { height: 100%; display: grid; place-items: center; padding: 32px; }

/* Hours' floating furniture must not hang over the Talous surface — the nudge
   bar lives outside #app so hiding #app does not take it with it. */
body[data-app="talous"] .nudge-bar { display: none !important; }

/* ---- Sync review ------------------------------------------------------- */
.review-list { display: flex; flex-direction: column; gap: 10px; }
.review-item { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; background: var(--surface-2); }
.review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.review-line { font-size: 13px; padding: 2px 0; }
.review-line .hint { display: inline-block; min-width: 46px; }

/* A timer running on another device: shown, but not stoppable from here. */
.mini-timer.remote { opacity: .85; }
.mini-timer.remote .mini-pulse { background: var(--text-3); }
.mini-timer.remote .btn-stop { opacity: .4; cursor: not-allowed; }

/* ---- World time grid --------------------------------------------------- */
.meet-actions { display: flex; align-items: center; gap: 8px; }
.meet-open {
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); background: transparent; border: 0; padding: 0; cursor: pointer;
}
.meet-open:hover { color: var(--text); }

.wt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wt-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.wt-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.wt-city {
  position: sticky; left: 0; z-index: 2; text-align: left; padding: 7px 12px 7px 10px;
  min-width: 148px; background: var(--surface-2); border-right: 1px solid var(--border);
}
.wt-city-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.wt-city-sub { font-size: 11px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 1px; }
.wt-cell {
  width: 34px; min-width: 34px; padding: 8px 0; text-align: center; cursor: pointer;
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  border-right: 1px solid rgba(255,255,255,.05); user-select: none;
}
.wt-cell.night { background: rgba(255,255,255,.015); color: var(--text-3); }
.wt-cell.late  { background: rgba(255,255,255,.045); color: var(--text-3); }
.wt-cell.early,
.wt-cell.eve   { background: rgba(234,88,12,.16); }
.wt-cell.work  { background: rgba(16,185,129,.17); color: var(--text); }
.wt-cell.bound { border-left: 2px solid var(--brand); }
.wt-cell.sel   { outline: 2px solid var(--brand); outline-offset: -2px; font-weight: 700; color: var(--text); }
.wt-cell:hover { filter: brightness(1.4); }
.wt-daymark { font-size: 10px; font-weight: 700; }
.wt-add { display: flex; gap: 8px; margin-top: 12px; }
.wt-add input { flex: 1; }
.wt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wt-x { background: transparent; border: 0; color: var(--text-3); cursor: pointer; font-size: 12px; padding: 0 1px; }
.wt-x:hover { color: var(--text); }
/* 24 columns need the room; the grid scrolls inside it. */
.modal.wide:has(.wt-grid) { max-width: 1040px; }

/* ---------- Receipt image viewer ---------- */
.receipt-thumb { all: unset; display: grid; place-items: center; width: 100%; height: 100%; cursor: zoom-in; }
.receipt-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.img-viewer {
  position: fixed; inset: 0; z-index: 200; background: var(--scrim); backdrop-filter: blur(6px);
  display: grid; grid-template-rows: auto 1fr; cursor: zoom-out;
}
@media (prefers-reduced-motion: no-preference) { .img-viewer { animation: fade .18s var(--ease); } }
.img-viewer-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: default; }
.img-viewer-title { flex: 1; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-viewer img { place-self: center; max-width: calc(100vw - 32px); max-height: calc(100dvh - 72px); object-fit: contain; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); cursor: default; }
/* An expense whose date no period can show (future, or not a date at all). */
.exp-date-odd { color: var(--red); }