/* Bunyad application layer.

   Built on assets/design-system.css. The Modernist system ships with zero
   radius and no elevation; this app deliberately softens that — rounded
   corners, layered shadows and motion throughout — so the radius and shadow
   tokens are overridden here rather than in the vendored design-system file,
   which stays byte-identical to the handoff in design-concept/.

   Everything else (colour, type, spacing) still comes from the system's tokens. */

:root {
  /* ── Accent ──────────────────────────────────────────────────────────────
     Deep steel blue in place of the system's red. Each step is generated in
     OKLCH at hue 246°, on a lightness ladder re-anchored for a dark accent:
     on the red ramp's scale #024c7d would land near the 800 step, so hover
     (600) would have *lightened* the button instead of darkening it. Here the
     base sits between 500 and 600, so hover and pressed still go darker, while
     100–300 stay pale enough to work as tinted fills. */
  --color-accent: #024c7d;
  --color-accent-100: #eef6fd;
  --color-accent-200: #d8e9f8;
  --color-accent-300: #b8d5f0;
  --color-accent-400: #78a3ca;
  --color-accent-500: #2f6897;
  --color-accent-600: #004471;
  --color-accent-700: #003356;
  --color-accent-800: #012540;
  --color-accent-900: #071928;

  /* The system's second accent is a stand-in for the same role — kept in the
     family so both sets resolve to something coherent. */
  --color-accent-2: #2c4974;
  --color-accent-2-100: #f0f5fc;
  --color-accent-2-200: #dde7f5;
  --color-accent-2-300: #c2d2ea;
  --color-accent-2-400: #89a0c3;
  --color-accent-2-500: #48648e;
  --color-accent-2-600: #26416a;
  --color-accent-2-700: #1a3051;
  --color-accent-2-800: #13233b;
  --color-accent-2-900: #0e1725;

  /* Corner radius — small enough to stay architectural, soft enough to breathe. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* Elevation ladder: xs rests, sm sits, md lifts on hover, lg floats over the page. */
  --shadow-xs: 0 1px 2px color-mix(in srgb, #2d2b2b 6%, transparent),
               0 1px 1px color-mix(in srgb, #2d2b2b 4%, transparent);
  --shadow-sm: 0 1px 3px color-mix(in srgb, #2d2b2b 8%, transparent),
               0 2px 8px color-mix(in srgb, #2d2b2b 5%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, #2d2b2b 9%, transparent),
               0 8px 20px color-mix(in srgb, #2d2b2b 9%, transparent);
  --shadow-lg: 0 8px 24px color-mix(in srgb, #2d2b2b 14%, transparent),
               0 24px 56px color-mix(in srgb, #2d2b2b 16%, transparent);
  /* Lighter than it was under the red accent — a dark blue at the same opacity
     reads as a heavy grey drop rather than a tint. */
  --shadow-accent: 0 2px 8px color-mix(in srgb, var(--color-accent) 22%, transparent);

  /* Raised surfaces sit lighter than the ground; inputs stay recessed and darker. */
  --color-raised: #ffffff;
  --hairline: color-mix(in srgb, var(--color-text) 9%, transparent);
  --hairline-strong: color-mix(in srgb, var(--color-text) 15%, transparent);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-fast: 120ms var(--ease);
  --t: 170ms var(--ease);
}

html, body { margin: 0; min-height: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }

[hidden] { display: none !important; }

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

/* Buttons, inputs, tags and the segmented control come from the design system;
   they read the radius tokens above, so they round automatically. These add the
   elevation and motion the flat system leaves out. */
.btn {
  transition: background var(--t-fast), color var(--t-fast),
              box-shadow var(--t), transform var(--t-fast), border-color var(--t-fast);
}
.btn-primary { box-shadow: var(--shadow-accent); }
.btn-primary:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--shadow-xs); }
.btn-secondary { background: var(--color-raised); box-shadow: var(--shadow-xs); border-color: var(--hairline-strong); }
.btn-secondary:hover { box-shadow: var(--shadow-sm); border-color: var(--hairline-strong); }
.btn-secondary:active { transform: translateY(1px); box-shadow: none; }
.btn-ghost:active { transform: translateY(1px); }

.input {
  background: var(--color-raised);
  border-color: var(--hairline-strong);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-text) 4%, transparent);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 28%, transparent); }
.input:focus, .input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
  outline: none;
}
.seg { overflow: hidden; box-shadow: var(--shadow-xs); background: var(--color-raised); }
.tag { border-radius: var(--radius-sm); }

/* ── boot splash ─────────────────────────────────────────────────────────── */

.boot {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
}
.boot-mark {
  width: 16px; height: 16px; background: var(--color-accent);
  border-radius: var(--radius-xs);
  animation: boot-pulse 1s ease-in-out infinite;
}
.boot-word {
  font-family: var(--font-heading); font-weight: 800; font-size: 18px;
  letter-spacing: -0.02em; opacity: 0.5;
}
@keyframes boot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── shell ───────────────────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  padding: 12px var(--space-6);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 3px color-mix(in srgb, #2d2b2b 5%, transparent);
  position: sticky; top: 0; z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 10px; margin-right: auto;
  cursor: pointer; background: none; border: 0; padding: 4px 6px; color: inherit;
  font: inherit; text-align: left; border-radius: var(--radius-md);
  transition: background var(--t-fast);
}
.brand:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.brand-mark {
  width: 16px; height: 16px; background: var(--color-accent); flex: none;
  border-radius: var(--radius-xs); box-shadow: var(--shadow-accent);
}
.brand-word {
  font-family: var(--font-heading); font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
}
.brand-sub {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5;
  padding-left: 10px; border-left: 1px solid var(--hairline-strong); white-space: nowrap;
}
.topbar-nav { display: flex; align-items: center; gap: 4px; }
.topbar-nav button {
  background: none; border: 0; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 14px;
  color: inherit; border-radius: var(--radius-md);
  transition: background var(--t-fast), color var(--t-fast);
}
.topbar-nav button:hover { color: var(--color-accent); background: var(--color-accent-100); }
.topbar-nav button[aria-current='page'] {
  color: var(--color-accent-800); background: var(--color-accent-100);
  font-family: var(--font-heading); font-weight: 800;
}

.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px var(--space-3); margin-left: var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: none; cursor: pointer; font: inherit; color: inherit; text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t);
}
.user-chip:hover {
  background: var(--color-raised); border-color: var(--hairline); box-shadow: var(--shadow-xs);
}
.avatar, .avatar-md, .avatar-lg {
  display: grid; place-items: center; flex: none;
  font-family: var(--font-heading); font-weight: 800;
  background: var(--color-neutral-200); color: var(--color-neutral-800);
  border-radius: var(--radius-sm);
}
.avatar { width: 22px; height: 22px; font-size: 9px; border-radius: var(--radius-xs); }
.avatar-md { width: 28px; height: 28px; font-size: 11px; border-radius: var(--radius-sm); }
.avatar-lg {
  width: 34px; height: 34px; font-size: 12px; border-radius: var(--radius-sm);
  background: var(--color-text); color: var(--color-bg);
  box-shadow: var(--shadow-xs);
}
.user-chip-name { line-height: 1.2; }
.user-chip-name b { font-size: 13px; font-family: var(--font-heading); font-weight: 800; display: block; }
.user-chip-name span { font-size: 11px; opacity: 0.55; }

.notice {
  display: flex; align-items: center; gap: var(--space-3);
  max-width: 1280px; margin: var(--space-4) auto -8px;
  padding: 12px var(--space-4);
  background: var(--color-accent-100);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  font-size: 13px;
}
.notice-dot {
  width: 8px; height: 8px; background: var(--color-accent); flex: none;
  border-radius: var(--radius-pill);
}
.notice strong { font-family: var(--font-heading); font-weight: 800; }

.page { max-width: 1280px; margin: 0 auto; padding: 36px var(--space-6) 80px; }
.page-narrow { max-width: 1100px; }

.back-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 13px; cursor: pointer; color: var(--color-accent);
  font-family: var(--font-heading); font-weight: 800;
  background: none; border: 0; padding: 6px 10px 6px 8px; margin-left: -8px;
  border-radius: var(--radius-md); transition: background var(--t-fast), color var(--t-fast);
}
.back-link:hover { color: var(--color-accent-700); background: var(--color-accent-100); }

.kicker {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.eyebrow {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55;
}
.section-head {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  margin: 52px 0 var(--space-4);
}
.section-head h3 { margin: 0; margin-right: auto; }
.section-note { font-size: 12px; opacity: 0.6; }

/* ── stat strip ──────────────────────────────────────────────────────────── */

.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3); margin-top: 32px;
}
.stat {
  padding: 18px var(--space-4);
  background: var(--color-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), transform var(--t);
}
.stat:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.stat-label { margin-bottom: 10px; }
.stat-value {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
}
.stat-value.accent { color: var(--color-accent); }

/* ── project list ────────────────────────────────────────────────────────── */

.rows { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.project-row {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; width: 100%;
  padding: 20px var(--space-4);
  background: var(--color-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  cursor: pointer; font: inherit; color: inherit; text-align: left;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.project-row:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
}
.project-row:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.project-main { flex: 1 1 300px; min-width: 0; }
.project-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px;
  line-height: 1.15; letter-spacing: -0.015em;
}
.project-meta {
  display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; opacity: 0.6; margin-top: var(--space-2);
}
.project-progress { flex: 1 1 260px; min-width: 0; padding-top: 4px; }
.dots { display: flex; gap: 4px; margin-bottom: var(--space-2); }
.dot {
  flex: 1; height: 8px; background: var(--color-neutral-200);
  border-radius: var(--radius-pill); transition: background var(--t);
}
.dot.complete { background: var(--color-accent); }
.dot.progress { background: var(--color-accent-300); }
.project-total {
  flex: 0 0 auto; padding-top: 2px; display: flex; align-items: center; gap: 18px;
}
.project-row .project-total svg { transition: transform var(--t); }
.project-row:hover .project-total svg { transform: translateX(3px); }
.amount-lg {
  font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
}
.amount-hero {
  font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1;
  letter-spacing: -0.025em; white-space: nowrap; color: var(--color-accent);
}

/* ── page headers ────────────────────────────────────────────────────────── */

.detail-head {
  display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-end;
  margin-top: var(--space-4); padding: var(--space-6);
  background: var(--color-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.detail-head-main { flex: 1 1 420px; min-width: 0; }
.title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.title-row h1 { margin: 0; }

.team-strip {
  display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center;
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--color-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.team-members { display: flex; gap: 20px; flex-wrap: wrap; flex: 1 1 auto; }
.team-member { display: flex; align-items: center; gap: 9px; }
.team-member-name { line-height: 1.25; }
.team-member-name b { font-size: 13px; font-weight: 400; display: block; }
.team-member-name span { font-size: 11px; opacity: 0.55; }

/* ── stage grid ──────────────────────────────────────────────────────────── */

.stage-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-3);
}
.stage-cell {
  padding: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
  background: var(--color-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  font: inherit; color: inherit; text-align: left;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.stage-cell:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
}
.stage-cell:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.stage-cell-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.stage-num {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.08em;
  /* 700 rather than 600: at 11px this needs to clear 4.5:1 on the tinted chip. */
  color: var(--color-neutral-700);
  background: var(--color-neutral-100); border-radius: var(--radius-xs);
  padding: 3px 6px; flex: none;
}
.stage-name {
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
  line-height: 1.15; letter-spacing: -0.015em;
}
.stage-dates { font-size: 12px; opacity: 0.6; margin-top: 5px; }
.stage-foot { margin-top: auto; }
.stage-total {
  font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
}
.stage-sub { font-size: 12px; opacity: 0.6; margin-top: 6px; }
.stage-add {
  padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  cursor: pointer; min-height: 180px;
  background: color-mix(in srgb, var(--color-raised) 55%, transparent);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-card);
  font: inherit; color: inherit; text-align: left;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.stage-add:hover {
  background: var(--color-accent-100); border-color: var(--color-accent);
  box-shadow: var(--shadow-sm); transform: translateY(-2px);
}
.stage-add-title { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.stage-add-note { font-size: 12px; opacity: 0.6; text-wrap: pretty; }

.meter {
  height: 6px; background: var(--color-neutral-200); margin-top: 10px;
  border-radius: var(--radius-pill); overflow: hidden;
}
.meter-fill {
  height: 100%; background: var(--color-accent);
  border-radius: var(--radius-pill); transition: width var(--t);
}
.meter-inline {
  flex: 1 1 auto; height: 8px; background: var(--color-neutral-200); max-width: 280px;
  border-radius: var(--radius-pill); overflow: hidden;
}

/* ── expense timeline ────────────────────────────────────────────────────── */

.timeline { display: flex; flex-direction: column; gap: var(--space-3); }
.expense-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 18px var(--space-4);
  background: var(--color-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  position: relative;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.expense-row:hover {
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
  border-color: var(--hairline-strong);
}
.expense-date {
  flex: 0 0 62px; align-self: flex-start;
  padding: 8px 0; text-align: center;
  background: var(--color-neutral-100); border-radius: var(--radius-sm);
}
.expense-day {
  font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 1;
  letter-spacing: -0.02em;
}
.expense-month { margin-top: 4px; font-size: 10px; }
.expense-body { flex: 1 1 320px; min-width: 0; }
.expense-title-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-2);
}
.expense-name { font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.2; }
.expense-facts { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.fact-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; margin-bottom: 2px;
}
.expense-notes {
  font-size: 13px; opacity: 0.75; margin-top: var(--space-3); max-width: 60ch; text-wrap: pretty;
  padding: 8px var(--space-3); background: var(--color-neutral-100);
  border-radius: var(--radius-sm); border-left: 3px solid var(--color-neutral-300);
}
.expense-side { flex: 0 0 auto; min-width: 150px; }
.expense-author { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.expense-author span { font-size: 11px; opacity: 0.6; }
.expense-actions {
  display: flex; gap: 6px; margin-top: var(--space-3);
  opacity: 0; transform: translateY(-2px);
  transition: opacity var(--t), transform var(--t);
}
.expense-row:hover .expense-actions,
.expense-row:focus-within .expense-actions { opacity: 1; transform: none; }
@media (hover: none) { .expense-actions { opacity: 1; transform: none; } }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.thumb {
  width: 46px; height: 46px; background: var(--color-neutral-200);
  display: grid; place-items: center; cursor: pointer; overflow: hidden;
  border: 1px solid var(--hairline); padding: 0;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.thumb:hover {
  transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-count { font-size: 11px; opacity: 0.5; padding-left: 4px; }

/* A PDF bill has no thumbnail to show, so the tile carries the mark instead. */
.thumb-doc {
  background: var(--color-accent-100); color: var(--color-accent-700);
  text-decoration: none;
}

.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 7px 13px; font-size: 12px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent-700); background: var(--color-raised);
  font-family: inherit; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast), color var(--t-fast),
              box-shadow var(--t), transform var(--t-fast), border-color var(--t-fast);
}
.chip:hover {
  background: var(--color-accent-100); border-color: var(--color-accent);
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.chip:active { transform: translateY(0); box-shadow: none; }
.chip[aria-pressed='true'] {
  background: var(--color-accent); color: var(--color-bg);
  border-color: var(--color-accent); box-shadow: var(--shadow-accent);
}
.chip-neutral {
  border-color: var(--hairline); background: var(--color-neutral-100); color: var(--color-neutral-800);
}
.chip-neutral:hover { background: var(--color-neutral-200); border-color: var(--hairline-strong); }

.suggestions {
  margin-top: var(--space-6); padding: var(--space-4);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
}
.suggestions .eyebrow { margin-bottom: var(--space-3); }

/* ── empty states ────────────────────────────────────────────────────────── */

.empty {
  padding: 40px var(--space-6); max-width: 660px; margin-top: var(--space-4);
  background: var(--color-raised);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; align-items: flex-start;
}
.empty h4 { margin: 0 0 var(--space-2); }
.empty p { opacity: 0.7; text-wrap: pretty; }

/* ── dialogs ─────────────────────────────────────────────────────────────── */

.sheet-backdrop {
  position: fixed; inset: 0; display: grid; place-items: start center;
  padding: var(--space-8) var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 42%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  overflow-y: auto; overflow-x: hidden; z-index: 50;
  animation: fade-in 140ms var(--ease);
}
.sheet {
  width: min(760px, 100%); display: flex; flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: sheet-in 200ms var(--ease);
}
.sheet-sm { width: min(460px, 100%); }
.sheet-md { width: min(600px, 100%); }
.sheet-head {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px var(--space-6); border-bottom: 1px solid var(--hairline);
  background: var(--color-raised);
}
.sheet-head-main { flex: 1 1 auto; min-width: 0; }
.sheet-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 25px; letter-spacing: -0.02em;
}
.sheet-title-sm { font-size: 20px; }
.sheet-body { padding: var(--space-6); display: flex; flex-direction: column; gap: 20px; }
.sheet-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 16px var(--space-6); border-top: 1px solid var(--hairline);
  background: var(--color-raised);
}
.sheet-foot-note { font-size: 12px; opacity: 0.6; margin-right: auto; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-10px) scale(0.99); } }

.field-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
}
.field-label {
  display: block; font-size: 12px; margin-bottom: 6px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.field-error { font-size: 12px; color: var(--color-accent-700); margin-top: 4px; }
.input.invalid {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.input-affix { display: flex; gap: var(--space-2); }
.input-affix .input { flex: 1 1 auto; }
select.input { appearance: auto; }

.dropzone {
  flex: 1 1 260px; min-height: 96px; padding: var(--space-4);
  border: 2px dashed var(--hairline-strong); background: var(--color-raised);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--color-accent); background: var(--color-accent-100);
  box-shadow: var(--shadow-sm);
}
.dropzone-title { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.dropzone-note { font-size: 12px; opacity: 0.6; }
.upload-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.upload-tile {
  width: 96px; height: 96px; background: var(--color-neutral-200);
  display: grid; place-items: center; position: relative; overflow: hidden;
  border-radius: var(--radius-card); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xs);
}
.upload-tile img { width: 100%; height: 100%; object-fit: cover; }
/* The PDF equivalent: the mark, and the filename a person is scanning for. */
.upload-tile-doc {
  width: 100%; height: 100%; padding: 8px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  background: var(--color-accent-100); color: var(--color-accent-800);
}
.upload-tile-doc span {
  font-size: 9px; line-height: 1.2; overflow: hidden; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.upload-tile .remove {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--color-text) 82%, transparent); color: var(--color-bg);
  border: 0; padding: 0; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); transition: background var(--t-fast), transform var(--t-fast);
}
.upload-tile .remove:hover { background: var(--color-accent); transform: scale(1.08); }
.upload-tile.busy::after {
  content: ''; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-bg) 60%, transparent);
}

.lightbox {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: var(--space-4); cursor: zoom-out;
  background: color-mix(in srgb, var(--color-neutral-900) 78%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade-in 140ms var(--ease);
}
.lightbox-frame {
  width: min(900px, 100%); cursor: default;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  animation: sheet-in 200ms var(--ease);
}
.lightbox img {
  width: 100%; max-height: 78vh; object-fit: contain; background: var(--color-neutral-900);
  display: block;
}
.lightbox-bar {
  display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center;
  background: var(--color-raised); padding: 14px var(--space-4);
}
.lightbox-caption {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; margin-right: auto;
}

/* ── login ───────────────────────────────────────────────────────────────── */

.login {
  min-height: 100vh; display: grid; grid-template-columns: 1fr;
  align-content: center; gap: var(--space-4);
  max-width: 1140px; margin: 0 auto; padding: var(--space-6);
}
@media (min-width: 900px) { .login { grid-template-columns: 1.05fr 1fr; } }
.login-poster {
  background: linear-gradient(155deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent) 88%, var(--color-accent-800)) 100%);
  color: var(--color-bg);
  padding: 44px var(--space-8); display: flex; flex-direction: column; gap: var(--space-6);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.login-poster h1 { margin: 0; font-size: clamp(34px, 4.4vw, 56px); text-wrap: balance; }
.login-poster p { font-size: 16px; max-width: 44ch; opacity: 0.94; text-wrap: pretty; }
.login-poster-mark { display: flex; align-items: center; gap: 10px; margin-bottom: auto; }
.login-poster-mark .brand-mark { background: var(--color-bg); box-shadow: none; }
.login-poster-list { display: grid; gap: var(--space-3); font-size: 14px; }
.login-poster-list div { padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.35); }
.login-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 40px var(--space-6);
  background: var(--color-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.login-form { width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--space-4); }
.login-error {
  padding: 11px var(--space-3); background: var(--color-accent-100);
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm); font-size: 13px;
}

/* ── admin ───────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  background: var(--color-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.table { border-collapse: separate; border-spacing: 0; }
.table th {
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--hairline-strong);
  padding: var(--space-3) var(--space-4);
}
.table th:first-child { border-top-left-radius: var(--radius-card); }
.table th:last-child { border-top-right-radius: var(--radius-card); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.table td .row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.table .num { text-align: right; white-space: nowrap; }
.credential {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 16px; letter-spacing: 0.06em;
  padding: var(--space-4); background: var(--color-surface);
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm); user-select: all;
}

/* ── member rows ─────────────────────────────────────────────────────────── */

.member-list { display: flex; flex-direction: column; gap: var(--space-2); }
.member-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3);
  background: var(--color-raised);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t);
}
.member-row:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-xs); }
.member-row-main { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.member-row-main b { font-size: 14px; font-weight: 400; display: block; }
.member-row-main span { font-size: 12px; opacity: 0.55; }

/* ── toasts ──────────────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed; left: var(--space-6); bottom: var(--space-6); z-index: 80;
  display: flex; flex-direction: column; gap: var(--space-2); max-width: min(420px, calc(100vw - 48px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-text); color: var(--color-bg);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg); font-size: 13px;
  animation: toast-in 200ms var(--ease);
}
.toast.error { background: var(--color-accent-700); }
.toast-bar {
  width: 3px; align-self: stretch; background: var(--color-accent); flex: none;
  border-radius: var(--radius-pill);
}
.toast.error .toast-bar { background: var(--color-bg); }
@keyframes toast-in { from { transform: translateY(10px) scale(0.98); opacity: 0; } }

/* ── misc ────────────────────────────────────────────────────────────────── */

.spinner {
  width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn[disabled] { pointer-events: none; }
.btn-danger { color: var(--color-accent-700); border-color: var(--hairline-strong); }
.btn-danger:hover { background: var(--color-accent-100); }

.inline-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 auto; }
.right { margin-left: auto; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.muted { opacity: 0.6; }
.nowrap { white-space: nowrap; }

@media (max-width: 720px) {
  .page { padding: 20px var(--space-4) 64px; }
  .topbar { padding: 10px var(--space-4); gap: var(--space-3); }
  .brand-sub { display: none; }
  .notice { margin: var(--space-3) var(--space-4) -4px; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .stat { padding: 14px var(--space-3); }
  .stat-value { font-size: 24px; }
  .amount-hero { font-size: 34px; }
  .detail-head { padding: var(--space-4); }
  .project-row, .expense-row { padding: var(--space-4) var(--space-3); }
  .expense-date {
    flex-basis: auto; display: inline-flex; align-items: baseline; gap: 6px;
    padding: 5px 10px;
  }
  .expense-month { margin-top: 0; }
  .toast-stack { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: none; }
  .sheet-backdrop { padding: 0; }
  .sheet, .sheet-sm, .sheet-md {
    width: 100%; min-height: 100vh; border-radius: 0;
  }
  .login { padding: var(--space-3); gap: var(--space-3); }
  .login-poster { padding: 32px var(--space-6); }
  .login-form-wrap { padding: 32px var(--space-4); }
}

/* Honour the system setting — every transition above is decoration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .project-row:hover, .stage-cell:hover, .stat:hover, .expense-row:hover,
  .thumb:hover, .chip:hover, .stage-add:hover { transform: none; }
}