/* ===========================================================================
   CLAVIS — "Vault / brass-foil"
   ---------------------------------------------------------------------------
   A precision instrument for prospecting. Gunmetal steel, machined brass foil,
   editorial serif display (Fraunces) over a Scandinavian grotesque (Schibsted),
   tabular mono (Spline Sans Mono) for the figures. Dark, tactile, confident.

   Fonts are loaded in base.html. The palette, atmosphere and motion all serve
   one metaphor: Clavis is the key, every prospect a tumbler in the lock.
   ======================================================================== */

:root {
  /* ---- Steel: deep gunmetal, cool with a faint warm undertone ---- */
  --steel-980: #0c0d10;   /* page floor */
  --steel-950: #0f1115;   /* base background */
  --steel-900: #131620;   /* sunken */
  --steel-850: #161922;   /* panel base */
  --steel-800: #1a1e28;   /* panels */
  --steel-750: #20242f;   /* raised panels / cards */
  --steel-700: #272c38;   /* lanes, chip beds */
  --steel-650: #2e3441;
  --steel-600: #353c4a;   /* borders */
  --steel-500: #454d5e;   /* hover borders */
  --steel-400: #5a6376;   /* faint rules */

  /* ---- Brass: warm metal, polished highlight → deep shadow ---- */
  --brass:        #cda85f;   /* primary accent */
  --brass-bright: #e9d199;   /* polished highlight */
  --brass-pale:   #f4e6c4;   /* foil glint */
  --brass-dim:    #a07f43;   /* mid */
  --brass-deep:   #7c6234;   /* shadowed brass / borders */
  --brass-glow:   rgba(205, 168, 95, 0.16);
  --brass-glow-2: rgba(205, 168, 95, 0.30);
  /* The foil gradient — machined, slightly anisotropic sheen */
  --foil: linear-gradient(135deg, #f4e6c4 0%, #dcbd7c 26%, #cda85f 48%, #9c7c3f 70%, #e0c282 100%);
  --foil-soft: linear-gradient(180deg, #dcbd7c, #a07f43);

  /* ---- Ink ---- */
  --text:     #ece6d8;   /* warm parchment off-white */
  --text-mut: #969aa6;   /* steel grey */
  --text-dim: #6b7180;   /* faint */
  --ink-on-brass: #20180b;

  /* ---- Stage / signal hues (enamel against brass) ---- */
  --c-identified: #757e8e;
  --c-researched: #6e96c0;
  --c-contacted:  #9384c9;
  --c-meeting:    #cda85f;
  --c-pilot:      #e3ad6b;
  --c-customer:   #5fb083;
  --c-lost:       #c87a6a;

  --patina:   #6fb088;
  --patina-2: #9bdcb6;
  --danger:   #db8a6c;
  --steelblue:#94bbe2;

  --radius: 9px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --maxw: 1240px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset,
                 0 2px 6px rgba(0,0,0,0.35),
                 0 14px 34px -18px rgba(0,0,0,0.7);
  --shadow-lift: 0 1px 0 rgba(255,255,255,0.05) inset,
                 0 10px 22px -6px rgba(0,0,0,0.55),
                 0 26px 50px -22px rgba(0,0,0,0.8);
  --hair-top: inset 0 1px 0 rgba(255,255,255,0.045);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--steel-950);
  /* Atmosphere: a soft brass aurora top-center, a cool depth pool bottom,
     and a faint vignette — depth without a single flat fill. */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(205,168,95,0.10), transparent 55%),
    radial-gradient(90% 60% at 85% 8%, rgba(110,150,192,0.06), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(180deg, var(--steel-950), var(--steel-980));
  background-attachment: fixed;
}

/* Fine film grain over everything — barely there, but it kills the flatness. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Everything sits above the grain. */
.topbar, .content, .footer { position: relative; z-index: 1; }

::selection { background: var(--brass-glow-2); color: var(--text); }

a { color: var(--brass); }

/* ===========================================================================
   Top bar / navigation
   ======================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.75rem;
  background: linear-gradient(180deg, rgba(26,30,40,0.92), rgba(19,22,32,0.82));
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--steel-600);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* A hairline of brass foil under the bar — the "machined edge". */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-deep) 18%, var(--brass-bright) 50%, var(--brass-deep) 82%, transparent);
  opacity: 0.55;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
}
.brand-mark {
  font-size: 1.6rem;
  line-height: 1;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 4px rgba(205,168,95,0.35));
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s;
}
.brand:hover .brand-mark { transform: rotate(-18deg) scale(1.06); filter: drop-shadow(0 1px 8px rgba(233,209,153,0.6)); }
.brand-name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.topnav { display: flex; align-items: center; gap: 0.35rem; }
.nav-link {
  position: relative;
  color: var(--text-mut);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: color 0.18s ease, background 0.18s ease;
}
/* A foil underline that wipes in on hover / active. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.18rem;
  height: 1.5px;
  background: var(--foil);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--brass-bright); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta {
  margin-left: 0.4rem;
  border: 1px solid var(--brass-deep);
  color: var(--brass-bright);
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(205,168,95,0.14), rgba(205,168,95,0.05));
  box-shadow: var(--hair-top);
  transition: all 0.18s ease;
}
.nav-cta::after { display: none; }
.nav-cta:hover { color: var(--ink-on-brass); background: var(--foil); border-color: transparent; }
.nav-muted { color: var(--text-dim); }
.nav-muted:hover { color: var(--danger); }
.nav-muted::after { display: none; }

.nav-icon { font-size: 1.1rem; line-height: 1; }
.nav-icon::after { display: none; }

/* ---- Grouped dropdown menus ---- */
.nav-group { position: relative; }
.nav-group-btn {
  background: transparent;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-caret { font-size: 0.6rem; opacity: 0.7; transition: transform 0.18s ease; }
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem;
  background: linear-gradient(180deg, var(--steel-800), var(--steel-850));
  border: 1px solid var(--steel-600);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
.nav-menu::before {
  /* hover bridge so the menu doesn't vanish in the gap above it */
  content: ""; position: absolute; left: 0; right: 0; top: -0.5rem; height: 0.5rem;
}
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav-menu .nav-sub {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-menu .nav-sub::after { display: none; }
.nav-menu .nav-sub:hover { background: var(--brass-glow); color: var(--brass-bright); }

/* ---- Mobile-only chrome (bottom bar + menu sheet). Hidden on desktop. ---- */
.bottomnav { display: none; }
.nav-backdrop { display: none; }
.nav-sheet-head { display: none; }
.nav-sheet-label { display: none; }  /* settings label — shown only in the mobile sheet */

/* ===========================================================================
   Content shell / footer
   ======================================================================== */
.content {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.4rem 1.75rem 3rem;
  animation: page-in 0.5s ease both;
}
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.footer {
  padding: 1.4rem 1.5rem;
  border-top: 1px solid var(--steel-700);
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: center;
  letter-spacing: 0.04em;
}
.footer span { position: relative; }

/* ===========================================================================
   Page heading + eyebrow kicker
   ======================================================================== */
.page-head { margin-bottom: 1.9rem; }
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.55rem;
}
.page-eyebrow::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: linear-gradient(90deg, var(--brass), transparent);
}
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.page-sub { margin: 0.5rem 0 0; color: var(--text-mut); font-size: 1rem; }

/* ===========================================================================
   Buttons
   ======================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.68rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;          /* explicit so <a> and <button> render the same height */
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--foil);
  background-size: 160% 160%;
  color: var(--ink-on-brass);
  box-shadow: var(--hair-top), 0 6px 18px -8px rgba(205,168,95,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: var(--hair-top), 0 10px 26px -8px rgba(205,168,95,0.7); }

.btn-inline { width: auto; }
.btn-ghost {
  background: rgba(255,255,255,0.015);
  border-color: var(--steel-600);
  color: var(--text-mut);
  box-shadow: var(--hair-top);
}
.btn-ghost:hover { border-color: var(--brass-deep); color: var(--brass-bright); background: var(--brass-glow); }

.btn-danger {
  background: transparent;
  border-color: #6e3c38;
  color: #d59a8c;
}
.btn-danger:hover { background: rgba(200,122,106,0.14); border-color: var(--danger); color: #eab3a4; }

/* ===========================================================================
   Form elements
   ======================================================================== */
.field { display: block; text-align: left; margin-bottom: 1.05rem; }
.field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mut);
}
.field-input {
  width: 100%;
  padding: 0.62rem 0.75rem;
  background: var(--steel-900);
  border: 1px solid var(--steel-600);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.98rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.field-input::placeholder { color: var(--text-dim); }
.field-input:hover { border-color: var(--steel-500); }
.field-input:focus {
  outline: none;
  border-color: var(--brass-dim);
  background: var(--steel-850);
  box-shadow: 0 0 0 3px var(--brass-glow);
}
select.field-input { cursor: pointer; }
textarea.field-input { resize: vertical; font-family: inherit; line-height: 1.5; }

.form-error {
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(219,138,108,0.1);
  border: 1px solid var(--danger);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  color: #eab3a4;
  font-size: 0.9rem;
}

/* ===========================================================================
   Login — the vault door
   ======================================================================== */
.login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding: 2rem 1.25rem;
  position: relative;
  z-index: 1;
}
.login-card {
  width: 100%;
  max-width: 370px;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(205,168,95,0.12), transparent 60%),
    linear-gradient(180deg, var(--steel-800), var(--steel-850));
  border: 1px solid var(--steel-600);
  border-radius: var(--radius-lg);
  padding: 2.6rem 2.1rem 2.3rem;
  text-align: center;
  box-shadow: var(--hair-top), 0 30px 70px -28px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  animation: vault-in 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes vault-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.login-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-bright), transparent);
  opacity: 0.6;
}
.login-mark {
  font-size: 3rem;
  line-height: 1;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(205,168,95,0.45));
  animation: key-glow 4s ease-in-out infinite;
}
@keyframes key-glow {
  0%, 100% { filter: drop-shadow(0 2px 8px rgba(205,168,95,0.35)); }
  50%      { filter: drop-shadow(0 2px 16px rgba(233,209,153,0.65)); }
}
.login-title {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.login-sub {
  margin: 0.35rem 0 1.8rem;
  color: var(--text-mut);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* ===========================================================================
   Page head with action on the right
   ======================================================================== */
.page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* ===========================================================================
   Panels
   ======================================================================== */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--steel-800), var(--steel-850));
  border: 1px solid var(--steel-600);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.panel-title {
  margin: 0 0 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.panel-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--steel-600), transparent);
}
.panel-wide { margin-top: 1.4rem; }

/* ===========================================================================
   Forms (sections)
   ======================================================================== */
.form { max-width: 880px; }
.form-section {
  position: relative;
  border: 1px solid var(--steel-600);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--steel-800), var(--steel-850));
  padding: 1.3rem 1.4rem 1.5rem;
  margin: 0 0 1.3rem;
  box-shadow: var(--shadow-card);
}
.form-section legend {
  padding: 0 0.6rem;
  margin-left: -0.2rem;
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.legend-hint { color: var(--text-dim); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: none; }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.1rem;
}
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ===========================================================================
   Data table
   ======================================================================== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(180deg, var(--steel-800), var(--steel-850));
  border: 1px solid var(--steel-600);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.72rem 0.95rem;
  border-bottom: 1px solid var(--steel-700);
}
.data-table th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mut);
  background: var(--steel-750);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.14s ease; }
.data-table tbody tr:hover { background: var(--brass-glow); }
.cell-name { font-weight: 600; color: var(--text); }
.data-table tbody tr:hover .cell-name { color: var(--brass-bright); }

/* ===========================================================================
   Status chips (one enamel tint per pipeline stage)
   ======================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--steel-500);
  color: var(--text);
  white-space: nowrap;
  background: rgba(255,255,255,0.02);
}
.chip::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.chip-identified { border-color: color-mix(in srgb, var(--c-identified) 55%, transparent); color: #aab2bf; }
.chip-researched { border-color: color-mix(in srgb, var(--c-researched) 55%, transparent); color: #a7c6e6; }
.chip-contacted  { border-color: color-mix(in srgb, var(--c-contacted) 55%, transparent); color: #c4b6ec; }
.chip-meeting    { border-color: color-mix(in srgb, var(--brass) 60%, transparent); color: var(--brass-bright); }
.chip-pilot      { border-color: color-mix(in srgb, var(--c-pilot) 55%, transparent); color: #ecbd87; }
.chip-customer   { border-color: color-mix(in srgb, var(--c-customer) 55%, transparent); color: var(--patina-2); }
.chip-lost       { border-color: color-mix(in srgb, var(--c-lost) 55%, transparent); color: #e0a99c; }

/* ===========================================================================
   Yes/no/unknown badges
   ======================================================================== */
.badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.badge-yes { background: rgba(95,176,131,0.14); color: var(--patina-2); border-color: rgba(95,176,131,0.35); }
.badge-no { background: rgba(200,122,106,0.14); color: #e0a99c; border-color: rgba(200,122,106,0.35); }
.badge-unknown { background: var(--steel-700); color: var(--text-mut); border-color: var(--steel-600); }
.badge-soft { background: rgba(110,150,192,0.16); color: #a7c6e6; border-color: rgba(110,150,192,0.35); }

/* ===========================================================================
   Empty state
   ======================================================================== */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-mut);
}
.empty-mark {
  font-size: 3rem;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.8;
}
.empty-state p { margin: 0.75rem 0 1.5rem; }
.empty-state.small { padding: 2.5rem 1rem; }

/* ===========================================================================
   Shared text bits
   ======================================================================== */
.mono { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-mut); }
.muted-note { color: var(--text-mut); font-size: 0.9rem; margin: 0.5rem 0; }
.back-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--text-mut); text-decoration: none; font-size: 0.82rem;
  letter-spacing: 0.04em;
  transition: color 0.16s, gap 0.16s;
}
.back-link:hover { color: var(--brass); gap: 0.55rem; }

/* Fade-in for HTMX-swapped content */
.htmx-added { animation: fadein 0.28s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* ===========================================================================
   Pipeline / Kanban
   ======================================================================== */
.content-wide { max-width: 1640px; }

.kanban {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.8rem;
}
@media (max-width: 1024px) {
  .kanban { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.lane {
  background: linear-gradient(180deg, rgba(20,23,32,0.6), rgba(15,17,23,0.5));
  border: 1px solid var(--steel-700);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.lane-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--steel-700);
  background: linear-gradient(180deg, var(--steel-750), var(--steel-800));
  border-radius: var(--radius) var(--radius) 0 0;
}
.lane-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--steel-500);
  box-shadow: 0 0 7px currentColor;
}
.lane-count {
  margin-left: auto;
  font-family: var(--font-mono);
  background: var(--steel-900);
  color: var(--text-mut);
  border: 1px solid var(--steel-700);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
}
.lane-body {
  flex: 1;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 80px;
}

.dot-identified { background: var(--c-identified); color: var(--c-identified); }
.dot-researched { background: var(--c-researched); color: var(--c-researched); }
.dot-contacted  { background: var(--c-contacted);  color: var(--c-contacted); }
.dot-meeting    { background: var(--brass);        color: var(--brass); }
.dot-pilot      { background: var(--c-pilot);      color: var(--c-pilot); }
.dot-customer   { background: var(--c-customer);   color: var(--c-customer); }
.dot-lost       { background: var(--c-lost);       color: var(--c-lost); }

.kanban-card {
  position: relative;
  background: linear-gradient(180deg, var(--steel-750), var(--steel-800));
  border: 1px solid var(--steel-600);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem 0.65rem 1.55rem;
  cursor: default;
  box-shadow: var(--hair-top), 0 2px 5px rgba(0,0,0,0.25);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  /* Staggered reveal on load */
  animation: card-in 0.4s ease both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lane-body .kanban-card:nth-child(1) { animation-delay: 0.02s; }
.lane-body .kanban-card:nth-child(2) { animation-delay: 0.06s; }
.lane-body .kanban-card:nth-child(3) { animation-delay: 0.10s; }
.lane-body .kanban-card:nth-child(4) { animation-delay: 0.14s; }
.lane-body .kanban-card:nth-child(n+5) { animation-delay: 0.18s; }
/* Brass tumbler-strip down the left edge, colored per stage via the lane dot. */
.kanban-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--foil-soft);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.kanban-card:hover {
  border-color: var(--steel-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.drag-handle {
  position: absolute;
  left: 0.4rem; top: 0.6rem;
  color: var(--text-dim);
  cursor: grab;
  font-size: 0.85rem;
  line-height: 1;
  transition: color 0.16s;
}
.kanban-card:hover .drag-handle { color: var(--brass); }
.drag-handle:active { cursor: grabbing; }
.kanban-card-link { display: block; text-decoration: none; color: var(--text); }
.kc-name { display: block; font-weight: 600; font-size: 0.94rem; letter-spacing: -0.005em; }
.kc-meta { display: block; color: var(--text-mut); font-size: 0.78rem; margin-top: 0.15rem; }
.kc-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }
.kc-badges .badge { font-size: 0.66rem; }
.kc-ghost { opacity: 0.35; }
.kc-drag { transform: rotate(1.5deg); box-shadow: var(--shadow-lift); }
.kc-saved { border-color: var(--patina); }
.kc-saved::before { background: linear-gradient(180deg, var(--patina-2), var(--patina)); }

/* ===========================================================================
   Detail / dossier
   ======================================================================== */
.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--steel-700);
  position: relative;
}
.detail-head::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; width: 120px; height: 1px;
  background: linear-gradient(90deg, var(--brass), transparent);
}
.detail-head .page-title { margin-top: 0.5rem; }
.detail-subline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.7rem; }
.detail-meta { color: var(--text-mut); font-size: 0.88rem; }
.detail-meta + .detail-meta::before { content: "·"; margin-right: 0.7rem; color: var(--text-dim); }
.detail-actions { display: flex; gap: 0.6rem; align-items: flex-start; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-col { display: flex; flex-direction: column; gap: 1.4rem; }

.facts { margin: 0; display: grid; gap: 0.1rem; }
.facts > div {
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--steel-700);
}
.facts > div:last-child { border-bottom: none; }
.facts dt { color: var(--text-mut); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.03em; }
.facts dd { margin: 0; font-size: 0.95rem; }
.facts a { color: var(--brass); text-decoration: none; }
.facts a:hover { color: var(--brass-bright); text-decoration: underline; }

.angle-box {
  margin-top: 1.1rem;
  padding: 0.8rem 0.95rem;
  background: linear-gradient(180deg, var(--brass-glow), transparent);
  border: 1px solid var(--brass-deep);
  border-left-width: 3px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.angle-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--brass); font-weight: 700; }
.angle-box p { margin: 0.3rem 0 0; }
.free-note { margin: 1.1rem 0 0; color: var(--text); white-space: pre-wrap; font-size: 0.95rem; }

/* Contacts / entity list */
.entity-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.entity-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  background: var(--steel-750);
  border: 1px solid var(--steel-700);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s;
}
.entity-row:hover { border-color: var(--steel-500); }
.entity-name { font-weight: 600; }
.entity-sub { color: var(--text-mut); font-size: 0.82rem; margin-left: 0.4rem; }
.entity-meta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.25rem; font-size: 0.82rem; color: var(--text-mut); }
.entity-meta a { color: var(--brass); text-decoration: none; }
.entity-meta a:hover { color: var(--brass-bright); }
.entity-actions { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
.icon-btn {
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 0.85rem; padding: 0.15rem 0.35rem; border-radius: 4px;
  transition: color 0.16s, background 0.16s;
}
.icon-btn:hover { color: #e0a99c; background: rgba(200,122,106,0.14); }
/* Edit (pencil) reads as a neutral action — brass hover, not danger-red. */
.icon-btn--edit:hover { color: var(--brass-bright); background: var(--brass-glow); }

.inline-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.6rem; }
.inline-form button { grid-column: 1 / -1; justify-self: start; }

/* Inline contact edit form (replaces the row while editing). */
.contact-edit-form { flex: 1; min-width: 0; }
.contact-edit-form .inline-form { margin-top: 0; }
.contact-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.contact-edit-actions .btn { padding: 0.45rem 0.9rem; font-size: 0.88rem; }
.entity-row:has(.contact-edit-form) { display: block; }

/* Collapsible "add" — the form stays hidden behind a minimal + until pressed. */
.add-collapse { margin-top: 0.7rem; }
.add-collapse > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  cursor: pointer;
  padding: 0.34rem 0.7rem 0.34rem 0.45rem;
  border: 1px dashed var(--steel-500);
  border-radius: 999px;
  color: var(--text-mut);
  font-size: 0.82rem;
  font-weight: 600;
  user-select: none;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.add-collapse > summary::-webkit-details-marker { display: none; }
.add-collapse > summary::marker { content: ""; }
.add-collapse > summary:hover {
  color: var(--brass-bright);
  border-color: var(--brass-deep);
  background: var(--brass-glow);
}
.add-plus {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  font-size: 1.15rem; line-height: 1;
  color: var(--brass);
  transition: transform 0.22s ease;
}
.add-collapse[open] > summary { border-style: solid; border-color: var(--brass-deep); color: var(--brass-bright); }
.add-collapse[open] .add-plus { transform: rotate(45deg); }   /* + morphs into × */
/* The toggle is the separator now — drop the forms' own top dividers. */
.add-collapse .inline-form,
.add-collapse .activity-form,
.add-collapse .quote-form { margin-top: 0.8rem; border-top: none; padding-top: 0; }

/* Activity timeline */
.followup-banner {
  padding: 0.6rem 0.8rem;
  background: rgba(110,150,192,0.12);
  border: 1px solid rgba(110,150,192,0.4);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.followup-banner.overdue { background: rgba(219,138,108,0.12); border-color: var(--danger); }
.tag-overdue, .tag-today {
  margin-left: 0.5rem; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.tag-overdue { background: var(--danger); color: var(--ink-on-brass); }
.tag-today { background: var(--foil); color: var(--ink-on-brass); }

.timeline { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0; }
.timeline-row {
  display: flex; gap: 0.8rem;
  padding: 0.7rem 0;
  position: relative;
  border-bottom: 1px solid var(--steel-700);
}
.timeline-row:last-child { border-bottom: none; }
.tl-type {
  flex-shrink: 0; align-self: flex-start;
  padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--steel-700); color: var(--text-mut); border: 1px solid var(--steel-600);
}
.tl-email { color: #a7c6e6; border-color: rgba(110,150,192,0.45); }
.tl-call { color: var(--patina-2); border-color: rgba(95,176,131,0.45); }
.tl-meeting { color: var(--brass-bright); border-color: var(--brass-deep); }
.tl-body { flex: 1; }
.tl-head { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--text-mut); }
.tl-date { font-family: var(--font-mono); font-size: 0.76rem; }
.tl-followup { color: var(--brass); }
.tl-head .icon-btn { margin-left: auto; }
.tl-note { margin: 0.3rem 0 0; white-space: pre-wrap; font-size: 0.92rem; }

.activity-form { border-top: 1px solid var(--steel-700); padding-top: 1rem; margin-top: 0.4rem; }
.grid-activity { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.55rem; }
@media (max-width: 560px) { .grid-activity { grid-template-columns: 1fr; } }

/* ===========================================================================
   Enrichment
   ======================================================================== */
.enrich-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1.1rem; }
.enrich-domain { max-width: 300px; }
.enrich-hint { color: var(--text-mut); font-size: 0.85rem; flex: 1; }
.enrich-hint strong { color: var(--brass); }
.spinner { color: var(--brass); font-size: 0.85rem; font-family: var(--font-mono); }
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.enrich-notes {
  background: linear-gradient(180deg, var(--brass-glow), transparent);
  border: 1px solid var(--brass-deep);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.86rem;
}
.enrich-notes strong { color: var(--brass-bright); }
.enrich-notes ul { margin: 0.45rem 0 0; padding-left: 1.1rem; color: var(--text-mut); }

/* ===========================================================================
   Filter bar + clickable rows
   ======================================================================== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: flex-end;
  background: linear-gradient(180deg, var(--steel-800), var(--steel-850));
  border: 1px solid var(--steel-600);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.4rem;
  box-shadow: var(--shadow-card);
}
.filter-field { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-field > span {
  font-size: 0.68rem; color: var(--text-mut); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.filter-field .field-input { min-width: 140px; padding: 0.48rem 0.6rem; }
.clickable-row { cursor: pointer; }
.result-count {
  color: var(--text-mut); font-size: 0.8rem; margin-top: 0.85rem;
  font-family: var(--font-mono); letter-spacing: 0.02em;
}
.date-overdue { color: var(--danger); font-weight: 600; }

/* ===========================================================================
   Follow-up dashboard
   ======================================================================== */
.followup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 860px) { .followup-grid { grid-template-columns: 1fr; } }
.followup-bucket { border-top: 3px solid var(--steel-500); }
.followup-bucket .panel-title { color: var(--text); }
.tone-overdue { border-top-color: var(--danger); }
.tone-overdue .panel-title { color: var(--danger); }
.tone-today { border-top-color: var(--brass); }
.tone-today .panel-title { color: var(--brass); }
.tone-week { border-top-color: var(--steelblue); }
.tone-week .panel-title { color: var(--steelblue); }
.bucket-count {
  font-family: var(--font-mono);
  background: var(--steel-900); color: var(--text-mut);
  border: 1px solid var(--steel-700);
  border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.74rem; margin-left: auto;
}
.followup-bucket .panel-title::after { display: none; }
.followup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.followup-item {
  display: grid; gap: 0.18rem; text-decoration: none; color: var(--text);
  padding: 0.65rem 0.75rem; background: var(--steel-750);
  border: 1px solid var(--steel-700);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s, transform 0.16s, background 0.16s;
}
.followup-item:hover { border-color: var(--brass-deep); background: var(--steel-700); transform: translateX(2px); }
.fu-date { font-family: var(--font-mono); font-size: 0.76rem; color: var(--brass); font-weight: 600; }
.fu-company { font-weight: 600; }
.fu-type { font-size: 0.76rem; color: var(--text-mut); }
.fu-note { font-size: 0.82rem; color: var(--text-mut); }

/* ===========================================================================
   Quotes / contracts
   ======================================================================== */
.quote-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.quote-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; background: var(--steel-750);
  border: 1px solid var(--steel-700);
  border-radius: var(--radius-sm);
}
.quote-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.quote-title { font-weight: 600; }
.quote-amounts { font-size: 0.85rem; color: var(--text); }
.quote-amounts strong { font-family: var(--font-mono); font-weight: 600; color: var(--brass-bright); }
.quote-rate { font-family: var(--font-mono); color: var(--text-mut); margin-left: 0.45rem; font-size: 0.82rem; }
.quote-side { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.quote-status-sel {
  background: var(--steel-900); color: var(--text);
  border: 1px solid var(--steel-600); border-radius: 999px;
  padding: 0.2rem 0.55rem; font-size: 0.76rem; font-weight: 600; cursor: pointer;
  font-family: var(--font);
}
.quote-status-sel.qs-accepted { border-color: rgba(95,176,131,0.5); color: var(--patina-2); }
.quote-status-sel.qs-sent { border-color: var(--brass-deep); color: var(--brass-bright); }
.quote-status-sel.qs-declined { border-color: rgba(200,122,106,0.5); color: #e0a99c; }
.quote-form { border-top: 1px solid var(--steel-700); padding-top: 0.95rem; }
.grid-quote { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.55rem; margin-bottom: 0.65rem; }
@media (max-width: 640px) { .grid-quote { grid-template-columns: 1fr 1fr; } }

/* ===========================================================================
   Economy: stat cards + milestones
   ======================================================================== */
.stat-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.7rem;
}
@media (max-width: 720px) { .stat-cards { grid-template-columns: 1fr 1fr; } }
.stat-card {
  position: relative;
  background: linear-gradient(180deg, var(--steel-800), var(--steel-850));
  border: 1px solid var(--steel-600);
  border-radius: var(--radius); padding: 1.15rem 1.25rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  animation: card-in 0.45s ease both;
}
.stat-cards .stat-card:nth-child(2) { animation-delay: 0.06s; }
.stat-cards .stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-cards .stat-card:nth-child(4) { animation-delay: 0.18s; }
.stat-accent::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--foil-soft);
}
.stat-label {
  color: var(--text-mut); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.85rem; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-accent .stat-value {
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-foot {
  margin-top: 0.15rem; font-size: 0.76rem; text-decoration: none;
  color: var(--text-mut); transition: color 0.16s;
}
.stat-foot:hover { color: var(--brass-bright); }
.stat-foot-warn { color: var(--danger); }
.stat-foot-warn:hover { color: #eab3a4; }

.mini-task-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mini-task {
  position: relative; display: flex; justify-content: space-between; gap: 0.7rem; align-items: baseline;
  padding: 0.45rem 0.6rem 0.45rem 0.8rem;
  background: var(--steel-750); border: 1px solid var(--steel-700);
  border-radius: var(--radius-sm); font-size: 0.88rem;
}
.mini-task::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--steel-500); }
.mini-task.prio-edge-high::before { background: var(--danger); }
.mini-task.prio-edge-normal::before { background: var(--brass-deep); }
.mini-task-title { min-width: 0; overflow-wrap: anywhere; }
.mini-task-due { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-mut); flex-shrink: 0; }
.mini-task-overdue .mini-task-due { color: var(--danger); font-weight: 600; }

.milestones { display: flex; flex-direction: column; gap: 1.3rem; margin-bottom: 1.4rem; }
.milestone-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.milestone-name { font-weight: 600; font-size: 1.02rem; }
.milestone-figures { margin-left: auto; color: var(--text-mut); font-size: 0.84rem; font-family: var(--font-mono); }
.milestone-pct { color: var(--brass-bright); font-weight: 600; margin-left: 0.35rem; }
.milestone-head form { display: inline; }
.progress {
  display: block;          /* so the inner bar's % width resolves against a real box
                              (the funnel uses a <span> here, which is inline by default) */
  width: 100%;
  height: 12px; background: var(--steel-900); border: 1px solid var(--steel-700);
  border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.progress-bar {
  display: block;          /* the funnel uses a <span> here — inline spans ignore
                              width/height, so the fill rendered at 0px wide */
  height: 100%;
  background: var(--foil);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 12px rgba(205,168,95,0.4);
}
.progress-done { background: linear-gradient(90deg, var(--patina), var(--patina-2)); box-shadow: 0 0 12px rgba(95,176,131,0.45); }
.milestone-left { font-size: 0.8rem; color: var(--text-mut); margin-top: 0.4rem; display: inline-block; font-family: var(--font-mono); }
.milestone-reached { color: var(--patina-2); }
.milestone-form { display: flex; gap: 0.55rem; flex-wrap: wrap; border-top: 1px solid var(--steel-700); padding-top: 1rem; }
.milestone-form .field-input { flex: 1; min-width: 170px; }

/* ===========================================================================
   Overview dashboard
   =========================================================================== */
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 860px) { .overview-grid { grid-template-columns: 1fr; } }

.funnel { display: flex; flex-direction: column; gap: 0.7rem; }
.funnel-row {
  display: grid; grid-template-columns: 7.5rem 1fr 2rem;
  align-items: center; gap: 0.7rem;
  text-decoration: none; color: inherit;
}
.funnel-label { font-size: 0.85rem; color: var(--text); }
.funnel-count { text-align: right; font-family: var(--font-mono); color: var(--text-mut); }
.funnel-row:hover .funnel-label { color: var(--brass-bright); }

.timeline-feed { display: flex; flex-direction: column; }
.timeline-item {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.7rem;
  padding: 0.55rem 0.3rem; border-bottom: 1px solid var(--steel-700);
  text-decoration: none; color: inherit; border-radius: 6px;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item:hover { background: var(--steel-750); }
.tl-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }
.tl-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tl-company { font-weight: 600; font-size: 0.9rem; }
.tl-text { font-size: 0.82rem; color: var(--text-mut); }
.tl-kind-win .tl-company { color: var(--patina-2); }
.tl-alert { display: flex; gap: 0.9rem; margin-bottom: 0.8rem; }
.tl-alert a { font-size: 0.85rem; color: var(--brass-bright); text-decoration: none; }
.tl-alert a:hover { text-decoration: underline; }

.sub-ended { opacity: 0.55; }

.export-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.grid-time { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; }
@media (max-width: 720px) { .grid-time { grid-template-columns: 1fr 1fr; } }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: flex-end; width: 100%; }
.grid-expense { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.55rem; }
@media (max-width: 720px) { .grid-expense { grid-template-columns: 1fr 1fr; } }

/* ===========================================================================
   Tasks / to-do
   ======================================================================== */
.task-group { margin-bottom: 1.3rem; }
.task-group-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.6rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mut);
}
.task-group.tone-overdue .task-group-head { color: var(--danger); }
.task-group.tone-today .task-group-head { color: var(--brass); }
.task-group.tone-week .task-group-head { color: var(--steelblue); }
.task-group-head .bucket-count { margin-left: 0; }

.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.task-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.6rem 0.7rem 0.6rem 0.95rem;
  background: var(--steel-750);
  border: 1px solid var(--steel-700);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s;
}
.task-item:hover { border-color: var(--steel-500); }
.task-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--steel-500);
}
.prio-edge-high::before { background: var(--danger); }
.prio-edge-normal::before { background: var(--brass-deep); }
.prio-edge-low::before { background: var(--steel-500); }

.task-check {
  flex-shrink: 0; margin-top: 0.1rem;
  width: 20px; height: 20px; border-radius: 5px;
  border: 1.5px solid var(--steel-500); background: var(--steel-900);
  color: var(--ink-on-brass); cursor: pointer;
  display: grid; place-items: center; font-size: 0.8rem; line-height: 1;
  transition: background 0.16s, border-color 0.16s;
}
.task-check:hover { border-color: var(--brass); }
.task-check.is-done { background: var(--foil); border-color: transparent; }

.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 600; }
.task-done .task-title { text-decoration: line-through; color: var(--text-mut); }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.2rem; font-size: 0.8rem; color: var(--text-mut); }
.task-due { font-family: var(--font-mono); }
.task-company { color: var(--brass); text-decoration: none; }
.task-company:hover { color: var(--brass-bright); }
.task-notes { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--text-mut); white-space: pre-wrap; }
.prio-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.prio-high { color: var(--danger); }
.prio-normal { color: var(--text-dim); }
.prio-low { color: var(--text-dim); }
.task-item > .icon-btn { flex-shrink: 0; }

.task-done-wrap { margin-top: 1rem; border-top: 1px solid var(--steel-700); padding-top: 0.8rem; }
.task-done-wrap > summary { cursor: pointer; color: var(--text-mut); font-size: 0.82rem; font-weight: 600; }
.task-done-wrap > summary:hover { color: var(--brass); }
.task-done-wrap .task-list { margin-top: 0.7rem; }

/* ===========================================================================
   Calendar
   ======================================================================== */
.cal-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; font-size: 0.78rem; color: var(--text-mut); }
.cal-key { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.cal-key-followup::before { background: var(--steelblue); }
.cal-key-task::before { background: var(--brass); }
.cal-key-invoice::before { background: var(--c-lost); }
.cal-key-avtal::before { background: var(--c-customer); }

.calendar {
  border: 1px solid var(--steel-600);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--steel-850);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays { background: var(--steel-750); border-bottom: 1px solid var(--steel-600); }
.cal-weekday {
  padding: 0.55rem 0.7rem; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mut);
}
.cal-cell {
  min-height: 7.5rem;
  padding: 0.4rem 0.45rem;
  border-right: 1px solid var(--steel-700);
  border-bottom: 1px solid var(--steel-700);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.cal-grid > .cal-cell:nth-child(7n) { border-right: none; }
.cal-out { background: rgba(0,0,0,0.18); }
.cal-out .cal-daynum { color: var(--text-dim); }
.cal-today { background: var(--brass-glow); }
.cal-today .cal-daynum {
  background: var(--foil); color: var(--ink-on-brass);
  border-radius: 999px; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-weight: 700;
}
.cal-daynum { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-mut); }
.cal-events { display: flex; flex-direction: column; gap: 0.2rem; }
.cal-event {
  display: block; padding: 0.18rem 0.4rem; border-radius: 4px;
  font-size: 0.72rem; text-decoration: none; color: var(--text);
  border-left: 3px solid var(--steel-500);
  background: var(--steel-750);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.14s;
}
.cal-event:hover { background: var(--steel-700); }
.cal-ev-followup { border-left-color: var(--steelblue); }
.cal-ev-task { border-left-color: var(--brass); }
.cal-ev-invoice { border-left-color: var(--c-lost); }
.cal-ev-avtal { border-left-color: var(--c-customer); }

@media (max-width: 760px) {
  .cal-cell { min-height: 5rem; padding: 0.3rem; }
  .cal-event { font-size: 0.62rem; padding: 0.1rem 0.25rem; }
  .cal-weekday { padding: 0.4rem 0.3rem; font-size: 0.6rem; }
}

/* ===========================================================================
   Reports: monthly bar chart
   ======================================================================== */
.month-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 180px; padding-top: 0.5rem; }
.month-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; height: 100%; }
.month-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; }
.month-bar { width: 42%; border-radius: 3px 3px 0 0; min-height: 1px; transition: height 0.5s cubic-bezier(0.22,1,0.36,1); }
.month-bar-rev { background: var(--foil); box-shadow: 0 0 8px rgba(205,168,95,0.3); }
.month-bar-exp { background: linear-gradient(180deg, var(--c-lost), #9c5a4d); }
.month-label { font-size: 0.66rem; color: var(--text-mut); font-family: var(--font-mono); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.swatch-rev { background: var(--brass); }
.swatch-exp { background: var(--c-lost); }

/* ===========================================================================
   Invoicing
   ======================================================================== */
/* Status chips (reuse .chip; one tint per invoice state) */
.inv-draft     { border-color: var(--steel-500); color: var(--text-mut); }
.inv-sent      { border-color: var(--brass-deep); color: var(--brass-bright); }
.inv-paid      { border-color: color-mix(in srgb, var(--c-customer) 55%, transparent); color: var(--patina-2); }
.inv-cancelled { border-color: color-mix(in srgb, var(--c-lost) 55%, transparent); color: #e0a99c; }

/* Line-item editor */
.invoice-lines th.num, .invoice-lines td.num { text-align: right; }
.invoice-lines .field-input { padding: 0.45rem 0.55rem; font-size: 0.92rem; }
.invoice-lines td { vertical-align: middle; }
.line-sum { white-space: nowrap; text-align: right; color: var(--text-mut); }
.invoice-totals {
  margin-top: 1.1rem; margin-left: auto; max-width: 22rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.invoice-totals > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-mut); font-size: 0.9rem; }
.invoice-totals strong { color: var(--text); }
.invoice-total-gross { border-top: 1px solid var(--steel-600); padding-top: 0.4rem; margin-top: 0.2rem; font-size: 1.05rem; }
.invoice-total-gross span { color: var(--text); font-weight: 600; }
.invoice-total-gross strong { color: var(--brass-bright); }

.add-row-btn { margin-top: 0.85rem; }
.invoice-vat-pick { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.55rem; }
.invoice-vat-pick > span { color: var(--text-mut); font-size: 0.85rem; }
.invoice-vat-pick select { max-width: 7rem; padding: 0.4rem 0.55rem; }

.invoice-actionbar { margin-bottom: 1.4rem; }
.status-form { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.status-form .field-input { max-width: 14rem; }

/* The printable invoice sheet — light "paper" against the dark app. */
.invoice-sheet {
  background: #fbf8f1;
  color: #21242b;
  border-radius: var(--radius);
  padding: 2.6rem 2.6rem 2.2rem;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: var(--shadow-lift);
  font-size: 0.95rem;
  line-height: 1.5;
}
.invoice-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: 2rem; }
.invoice-from { font-size: 0.86rem; color: #3a3f49; }
.invoice-from-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: #1a1d23; margin-bottom: 0.3rem; }
.invoice-title-block { text-align: right; }
.invoice-doc-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: 0.04em; color: #1a1d23; }
.invoice-doc-number { font-family: var(--font-mono); color: #6b7180; margin-top: 0.2rem; }
.invoice-block-label { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: #8a8f9a; font-weight: 700; margin-bottom: 0.4rem; }
.invoice-meta-grid { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.invoice-cust-name { font-weight: 600; font-size: 1.05rem; }
.invoice-meta { margin: 0; }
.invoice-meta > div { display: flex; gap: 0.8rem; justify-content: flex-end; }
.invoice-meta dt { color: #6b7180; }
.invoice-meta dd { margin: 0; font-family: var(--font-mono); min-width: 6.5rem; text-align: right; }
.invoice-lines-print { background: transparent; border: none; box-shadow: none; color: inherit; }
.invoice-lines-print th { background: #efe9dc; color: #5a5f6a; border-bottom: 1px solid #d8d0bf; }
.invoice-lines-print th.num, .invoice-lines-print td.num { text-align: right; font-family: var(--font-mono); }
.invoice-lines-print td { border-bottom: 1px solid #e6dfce; }
.invoice-summary { display: flex; justify-content: space-between; gap: 2rem; margin-top: 1.6rem; flex-wrap: wrap; }
.invoice-vat-spec { font-size: 0.85rem; color: #5a5f6a; min-width: 14rem; }
.invoice-vat-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.1rem 0; }
.invoice-totals-print { margin: 0 0 0 auto; min-width: 16rem; }
.invoice-totals-print > div { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.invoice-totals-print dt { color: #6b7180; }
.invoice-totals-print dd { margin: 0; font-family: var(--font-mono); }
.invoice-totals-print .grand { border-top: 2px solid #1a1d23; margin-top: 0.3rem; padding-top: 0.5rem; font-size: 1.2rem; font-weight: 700; }
.invoice-totals-print .grand dt { color: #1a1d23; }
.invoice-notes { margin-top: 1.6rem; padding: 0.8rem 1rem; background: #efe9dc; border-radius: var(--radius-sm); white-space: pre-wrap; }
.invoice-pay-info { margin-top: 2rem; border-top: 1px solid #d8d0bf; padding-top: 1rem; }
.invoice-pay-grid { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; }
.invoice-pay-grid > div { display: flex; gap: 0.5rem; font-size: 0.88rem; }
.invoice-pay-grid dt { color: #6b7180; }
.invoice-pay-grid dd { margin: 0; font-weight: 600; }
.invoice-fskatt, .invoice-footer-text { margin: 0.6rem 0 0; font-size: 0.82rem; color: #6b7180; }

/* Zero page margin = the browser has nowhere to print its URL/date header &
   footer, so they disappear. We put the whitespace back as sheet padding. */
@page { margin: 0; }
@media print {
  .topbar, .footer, .no-print, .invoice-actionbar { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
  .content { padding: 0; max-width: none; animation: none; }
  .invoice-sheet { box-shadow: none; border-radius: 0; max-width: none; margin: 0; padding: 16mm 15mm; }
}

/* ===========================================================================
   Responsive / mobile
   ===========================================================================
   Desktop-first. Two main breakpoints: 760px (nav → hamburger), 640px
   (single-column content, tables → cards). */

.kc-name, .entity-name, .quote-title, .fu-company, .fu-note, .cell-name,
.facts dd, .mono, .tl-note, .free-note, .entity-meta a { overflow-wrap: anywhere; }

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Hamburger toggle ---- */
.nav-toggle-cb { display: none; }
.nav-toggle { display: none; }
.nav-toggle-bar {
  display: block; width: 22px; height: 2px;
  background: var(--brass);
  border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }

@media (max-width: 760px) {
  /* No backdrop-filter here on mobile: it would create a containing block and
     trap the fixed bottom bar / menu sheet inside the header. */
  .topbar { padding: 0.7rem 1.1rem; justify-content: flex-start; backdrop-filter: none; }

  /* The old top hamburger is retired in favour of the bottom bar. */
  .nav-toggle { display: none; }

  /* Keep the page content clear of the fixed bottom bar. */
  .content { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .footer { margin-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }

  /* ---- The full menu becomes a slide-up, scrollable bottom sheet ---- */
  .topnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, var(--steel-800), var(--steel-850));
    border-top: 1px solid var(--brass-deep);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -18px 40px rgba(0,0,0,0.45);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s;
  }
  .nav-toggle-cb:checked ~ .topnav { transform: none; visibility: visible; }

  /* Sticky sheet header with a grab handle + close button. */
  .nav-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1;
    padding: 0.95rem 1.1rem 0.7rem;
    background: linear-gradient(180deg, var(--steel-800), rgba(30,34,46,0.96));
    border-bottom: 1px solid var(--steel-700);
  }
  .nav-sheet-head::before {
    content: ""; position: absolute; top: 0.4rem; left: 50%; transform: translateX(-50%);
    width: 2.4rem; height: 0.28rem; border-radius: 999px; background: var(--steel-600);
  }
  .nav-sheet-title {
    font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
    letter-spacing: 0.04em; color: var(--text);
  }
  .nav-sheet-close {
    display: flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; cursor: pointer;
    color: var(--text-mut); font-size: 1.1rem;
    border: 1px solid var(--steel-600); border-radius: 50%;
  }
  .nav-sheet-close:active { color: var(--brass-bright); border-color: var(--brass-dim); }

  .topnav .nav-link {
    display: block;
    padding: 0.95rem 1.1rem;
    font-size: 1.04rem;
    border-top: 1px solid var(--steel-700);
    border-radius: 0;
  }
  .topnav > .nav-link:first-of-type { border-top: none; }
  .topnav .nav-link::after { display: none; }
  .nav-icon { font-size: 1.04rem; }
  .nav-sheet-label { display: inline; }

  /* Groups flatten into always-open, labelled sections inside the sheet. */
  .nav-group { width: 100%; }
  .nav-group-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1.1rem 1.1rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mut);
    pointer-events: none;
  }
  .nav-group-btn .nav-caret { display: none; }
  .nav-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    display: flex;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  .nav-menu::before { display: none; }
  .nav-menu .nav-sub { padding: 0.9rem 1.1rem 0.9rem 1.5rem; border-top: 1px solid var(--steel-700); border-radius: 0; }

  /* ---- Dimmed backdrop behind the sheet ---- */
  .nav-backdrop {
    display: block;
    position: fixed; inset: 0;
    z-index: 65;
    background: rgba(8,10,16,0.55);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  .nav-toggle-cb:checked ~ .nav-backdrop { opacity: 1; visibility: visible; }

  /* ---- Fixed thumb-reachable bottom bar ---- */
  .bottomnav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, rgba(26,30,40,0.96), rgba(17,20,29,0.98));
    backdrop-filter: blur(12px) saturate(120%);
    border-top: 1px solid var(--steel-600);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
  }
  .bottomnav::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass-deep) 18%, var(--brass-bright) 50%, var(--brass-deep) 82%, transparent);
    opacity: 0.5;
  }
  .bottomnav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.18rem;
    min-height: 3.6rem;
    padding: 0.5rem 0.2rem;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }
  .bottomnav-item::after { display: none; }
  .bottomnav-ico { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .bottomnav-item:active { color: var(--brass); }
  .bottomnav-item[aria-current="page"] { color: var(--brass-bright); }
  .nav-toggle-cb:checked ~ .bottomnav .bottomnav-more { color: var(--brass-bright); }
}

@media (max-width: 640px) {
  .content { padding: 1.5rem 1.1rem 2.2rem; }
  .page-head-row { flex-direction: column; gap: 0.5rem; }

  .data-table--cards { border: none; background: transparent; border-radius: 0; box-shadow: none; }
  .data-table--cards thead { display: none; }
  .data-table--cards tbody, .data-table--cards tr, .data-table--cards td { display: block; }
  .data-table--cards tr {
    background: linear-gradient(180deg, var(--steel-800), var(--steel-850));
    border: 1px solid var(--steel-600);
    border-radius: var(--radius);
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.95rem;
    box-shadow: var(--shadow-card);
  }
  .data-table--cards td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--steel-700);
    text-align: right;
  }
  .data-table--cards tr td:last-child { border-bottom: none; }
  .data-table--cards td::before {
    content: attr(data-label);
    color: var(--text-mut);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    flex-shrink: 0;
  }
  .data-table--cards .cell-name {
    font-size: 1.08rem; text-align: left;
    padding-top: 0.55rem; border-bottom: none;
    font-family: var(--font-display); font-weight: 600;
  }
  .data-table--cards .cell-name::before { display: none; }
  .data-table--cards tbody tr:hover { background: linear-gradient(180deg, var(--steel-800), var(--steel-850)); }

  .detail-head { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .detail-actions { width: 100%; }
  .detail-actions > .btn { flex: 1; text-align: center; }
  .detail-actions > form { flex: 1; display: flex; }
  .detail-actions > form > .btn { width: 100%; }
  .facts > div { grid-template-columns: 110px 1fr; }

  .enrich-bar { flex-wrap: wrap; }
  .enrich-domain { max-width: none; flex: 1 1 100%; }
  .enrich-bar > .btn { flex: 1; }
  .filter-bar { padding: 0.9rem; gap: 0.65rem; }
  .filter-field { flex: 1 1 calc(50% - 0.35rem); }
  .filter-field .field-input { min-width: 0; width: 100%; }

  .kanban { grid-template-columns: 1fr; gap: 0.65rem; }
  .lane { min-height: 0; }
  .lane-body { min-height: 40px; }

  .icon-btn { padding: 0.4rem 0.55rem; font-size: 1rem; }

  .milestone-head { flex-wrap: wrap; }
  .milestone-name { order: 1; }
  .milestone-head form { order: 2; margin-left: auto; }
  .milestone-figures { order: 3; flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 480px) {
  .form-actions { flex-direction: column-reverse; }
  .form-actions > .btn { width: 100%; text-align: center; }
  .inline-form { grid-template-columns: 1fr; }
  .filter-field { flex-basis: 100%; }
}

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}