/* ============================================================
   ResearchGrants AI — App Redesign Component Library
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* inlined styles/redesign/source/tokens.css */
/* ============================================================
   ResearchGrants AI — App Redesign Tokens
   Derived from researchgrants.ai/grant-match marketing site
   ============================================================ */

:root {
  /* Color — core brand (from marketing site) */
  --ink: #0a0a0a;                 /* near-black: dark nav, primary text */
  --paper: #ffffff;
  --surface: #fafafa;             /* 0 0% 98% — page background */
  --surface-2: #f4f4f5;
  /* Borders. --border and --border-soft are decorative (card walls, table
     rules, dividers) and are exempt from WCAG 1.4.11. --border-strong is for
     anything that *is* a control — its edge is the only thing identifying the
     component, so it must clear 3:1 against every surface it sits on. */
  --border: #e0e0e0;              /* 0 0% 88% */
  --border-soft: #b5b5b5;
  --border-strong: #848484;       /* 3.4:1 on paper, 3.05:1 on surface-2 */

  /* Text greys. Both clear 4.5:1 on paper, --surface and --surface-2. */
  --muted: #4d4d4d;               /* 8.45:1 on paper */
  --muted-2: #6e6e6e;             /* 5.10:1 on paper, 4.64:1 on --surface-2 */

  /* Orange-red stays exactly as specified. White on it is only 3.62:1, so
     filled primary buttons carry --ink text instead: 5.47:1. */
  --primary: #FF3700;             /* orange-red — CTAs. hsl(13 100% 50%) */
  --primary-hover: #F03400;       /* 4.90:1 with --ink */
  --primary-soft: #FFF1EC;        /* same hue, 96% lightness — tinted backgrounds */
  --primary-ink: var(--ink);      /* label colour on a filled primary button */
  /* #FF3700 as *text* is only 3.62:1 on paper. --primary is kept for fills,
     rules and borders (3:1 is enough there); anything that renders as type
     uses --primary-text: 4.98:1 on paper, 4.51:1 on --primary-soft. */
  --primary-text: #d52e00;

  /* ---- Filled primary button (.btn-primary) ----
     Swap this block to change every primary CTA in the app at once; nothing
     else reads --action. Both options below are AA.

     ACTIVE — the exact brand hex with a pure-black label.
       label 5.80:1 · boundary 3.47:1 on --surface, so no rim is needed.
     (--ink #0a0a0a also passes here, at 5.47:1, if you would rather the label
     matched body copy than be pure black.)

     Watch the direction of the hover. With a BLACK label, darkening the fill
     *loses* contrast — the opposite of the white-label case. #c62b00 would put
     the label at 3.75:1 and fail, so the hover only steps down as far as
     #F03400: 5.20:1 on the label, 3.87:1 on the boundary. */
  --action: #FF3700;
  --action-hover: #F03400;                /* 5.20:1 with the label */
  --action-edge: transparent;
  --action-ink: #000000;

  /* ALTERNATIVE A — orange-red deepened just enough to carry a WHITE label.
     White on #FF3700 is only 3.62:1; #de3000 is the smallest step that clears
     AA — a luminance shift of 0.06 that reads as the same colour side by side.
       --action: #de3000;
       --action-hover: #c62b00;
       --action-edge: transparent;
       --action-ink: #ffffff;                 label 4.64:1 · boundary 4.44:1

     ALTERNATIVE B — brand lime, near-black label. Strongest pairing in the
     system at 10.7:1, but the fill is only 1.77:1 against the page, so it
     needs the rim to give its boundary the 3:1 that 1.4.11 asks of a control.
       --action: #a3cd39;
       --action-hover: #93bd2b;
       --action-edge: #6d8f1a;
       --action-ink: var(--ink);                                          */

  --indigo: rgb(72 94 216);       /* display headlines, links, data accents — 5.43:1 */
  --indigo-strong: rgb(56 76 190);
  --indigo-soft: rgb(72 94 216 / 0.08);

  /* --lime is the logo asterisk and is used as a graphic fill only; logotypes
     are exempt from contrast minimums. --lime-strong is the text-safe form. */
  --lime: #a3cd39;
  --lime-strong: #5d7b17;         /* 4.87:1 on paper, 4.52:1 on --lime-soft */
  --lime-soft: #f3f9e4;

  --success: #327d41;             /* 5.07:1 on paper, 4.55:1 on --success-soft */
  --success-soft: #e9f6ec;
  --warning: #9c6700;             /* 4.82:1 on paper, 4.52:1 on --warning-soft */
  --warning-soft: #fff7e6;
  --danger: #c81e1e;              /* 5.74:1 on paper, 5.02:1 on --danger-soft */
  --danger-soft: #fdecec;

  /* Focus ring — 5.43:1 on paper, so it clears the 3:1 that 1.4.11 asks of a
     focus indicator on every light surface in the system. */
  --focus: rgb(72 94 216);
  --focus-on-dark: #ffffff;

  /* Dark header */
  --nav-bg: #0a0a0a;
  --nav-fg: #ffffff;
  --nav-fg-dim: rgb(255 255 255 / 0.64);

  /* Type */
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Radii & shadows */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 2px rgb(10 10 10 / 0.04), 0 4px 16px rgb(10 10 10 / 0.05);
  --shadow-pop: 0 8px 30px rgb(10 10 10 / 0.12);

  /* Layout */
  --header-h: 60px;
  --subnav-h: 49px;   /* admin sub-navigation, sticky under the header */
  --sidebar-w: 248px;
  --sidebar-rail: 52px;
  --content-max: 1360px;   /* matches .workspace so cards align across every screen */
  --control-h: 38px;   /* shared height for inputs, selects, and buttons in field rows */
}


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

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Selection controls are indigo everywhere. Orange-red is reserved for
   primary actions, so a checked box never reads as a call to action. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--indigo); }

/* ---------- Top navigation (dark, from marketing site) ---------- */
.app-header {
  height: var(--header-h);
  background: var(--nav-bg);
  color: var(--nav-fg);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Brand lockup — assets/logo-white.svg (white wordmark, green mark).
   Built for dark surfaces, which is every place .brand appears. */
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 22px; width: auto; display: block; }
.app-header .divider { width: 1px; height: 22px; background: rgb(255 255 255 / 0.18); }
.app-header nav { display: flex; gap: 4px; }
.app-header nav a {
  color: var(--nav-fg-dim); font-size: 13.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 6px;
}
.app-header nav a:hover { color: var(--nav-fg); text-decoration: none; background: rgb(255 255 255 / 0.07); }
.app-header nav a.active { color: var(--nav-fg); background: rgb(255 255 255 / 0.1); }
.header-spacer { flex: 1; }
.user-chip { display: flex; align-items: center; gap: 10px; text-align: right; }
.user-chip .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--indigo); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.user-chip { position: relative; }
.user-chip .avatar { border: 0; cursor: pointer; font-family: var(--font-mono); }

/* Account menu hung off the avatar */
.user-menu {
  position: absolute; right: 0; top: calc(100% + 12px);
  min-width: 224px; padding: 6px; z-index: 60;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  text-align: left; display: none;
}
.user-chip.open .user-menu { display: block; }
.user-menu .who { padding: 9px 12px 11px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; }
.user-menu .who .n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.user-menu .who .o { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); text-transform: uppercase; margin-top: 2px; }
.user-menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 4px;
  font-size: 13.5px; color: var(--muted);
}
.user-menu a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.user-menu a .i { width: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-2); }
.user-menu a:hover .i { color: var(--ink); }
.user-menu a svg { display: block; }
.user-menu .sep { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 0; }
.user-menu a.signout { color: var(--danger); }
.user-menu a.signout:hover { background: var(--danger-soft); color: var(--danger); }
.user-menu a.signout .i, .user-menu a.signout:hover .i { color: var(--danger); }

.user-chip .name { font-size: 13px; font-weight: 600; color: var(--nav-fg); line-height: 1.2; }
.user-chip .org { font-size: 10.5px; font-family: var(--font-mono); letter-spacing: 0em; color: var(--nav-fg-dim); text-transform: uppercase; }

/* Header on narrow screens: shed the label block, keep brand + nav + avatar */
@media (max-width: 780px) {
  .app-header { gap: 14px; padding: 0 16px; }
  .app-header .divider { display: none; }
  .brand img { height: 19px; }
  .app-header nav a { padding: 7px 9px; font-size: 12.5px; }
  .user-chip > div:first-child { display: none; }
}
@media (max-width: 460px) {
  .app-header { padding: 0 12px; gap: 10px; }
  .brand img { height: 16px; }
  .app-header nav a { padding: 6px 7px; font-size: 12px; }
}
/* Phone: a third nav item (Admin) no longer fits — let the row scroll
   rather than pushing the avatar past the viewport edge. */
@media (max-width: 400px) {
  .app-header { gap: 8px; }
  .app-header nav { overflow-x: auto; min-width: 0; scrollbar-width: none; }
  .app-header nav::-webkit-scrollbar { display: none; }
  .app-header nav a { padding: 6px 6px; font-size: 11.5px; white-space: nowrap; }
  .header-spacer { min-width: 0; }
  .user-chip { flex: none; }
  .brand img { height: 15px; }
}

/* ---------- Typographic primitives ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0em; text-transform: uppercase;
  color: var(--muted-2);
}
.display {
  font-family: var(--font-heading);
  font-weight: 300; letter-spacing: -0.02em;
  color: var(--indigo);
}
h1.display { font-size: 34px; line-height: 1.15; margin: 6px 0 8px; }
.page-sub { color: var(--muted); font-size: 14.5px; max-width: 640px; }
.section-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em; margin: 0 0 4px;
}
.num { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0em; }

/* Lead block at the top of a proposal screen: linked eyebrow + project title */
.page-lead { margin-bottom: 20px; }
.page-lead a.eyebrow { display: inline-block; }
.page-lead a.eyebrow:hover { color: var(--ink); text-decoration: none; }
.project-title {
  font-family: var(--font-body);
  font-size: 20px; font-weight: 600; line-height: 1.25;
  letter-spacing: 0em; text-transform: none;
  color: #000;
  margin: 7px 0 0;
}
@media (max-width: 620px) { .project-title { font-size: 17px; } }

/* ---------- Layout ---------- */
.page { max-width: var(--content-max); margin: 0 auto; padding: 36px 28px 80px; }
.page-head { margin-bottom: 26px; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) { .page { padding: 26px 20px 72px; } h1.display { font-size: 27px; } }
@media (max-width: 620px) { .page { padding: 20px 14px 64px; } h1.display { font-size: 23px; } }

.workspace {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 32px;
  max-width: 1360px; margin: 0 auto; padding: 30px 28px 80px;
  transition: grid-template-columns 0.18s ease;
}
/* Collapsed rail: numbers only */
.workspace.nav-collapsed { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); gap: 22px; }
.workspace > main { min-width: 0; }
/* Scrim and mobile opener are drawer-only; never occupy a grid row */
.nav-scrim { display: none; }
.nav-toggle-bar { display: none; }

@media (max-width: 1180px) { .workspace { gap: 24px; padding: 26px 20px 72px; } }
@media (max-width: 620px) { .workspace { padding: 20px 14px 64px; } }

/* ---------- Proposal sidebar ---------- */
.side-nav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; min-width: 0; }
.side-nav .group { margin-bottom: 4px; }
.side-nav a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 6px; color: var(--muted); font-size: 13.5px; }
.side-nav a { justify-content: flex-start; }

/* Collapse toggle — icon only; its name is carried by aria-label */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: 0 0 12px;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  cursor: pointer; color: var(--muted-2);
  font-size: 13px; line-height: 0;
}
.nav-toggle:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
.nav-toggle .icon { line-height: 0; flex: none; display: inline-flex; color: inherit; }
.nav-toggle .icon svg { display: block; }
/* The panel toggle reads as the primary affordance when railed */
.nav-collapsed .nav-toggle { border-color: var(--border); background: var(--paper); color: var(--ink); }

/* Collapsed rail behavior */
.nav-collapsed .side-nav a { justify-content: center; padding: 8px 0; gap: 0; }
.nav-collapsed .side-nav a .n { min-width: 0; }
.nav-collapsed .side-nav a .label { display: none; }
.nav-collapsed .side-nav a.lvl-2 { padding-left: 0; font-size: 10px; opacity: 0.75; }
.nav-collapsed .side-nav a.done::after { display: none; }
.side-nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.side-nav a .n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0em; color: var(--muted-2); min-width: 24px; }
.side-nav a.lvl-1 { font-weight: 600; color: var(--ink); margin-top: 10px; }
.side-nav a.lvl-2 { padding-left: 22px; }
.side-nav a.active { background: var(--indigo-soft); color: var(--indigo-strong); font-weight: 600; }
.side-nav a.active .n { color: var(--indigo); }
.side-nav a.done::after { content: "✓" / ""; margin-left: auto; color: var(--lime-strong); font-weight: 700; }
.side-nav a.locked { opacity: 0.45; pointer-events: none; }

/* ---------- Sidebar → drawer (must follow all .side-nav rules) ---------- */
@media (max-width: 900px) {
  .workspace, .workspace.nav-collapsed { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .workspace .side-nav {
    position: fixed; top: var(--header-h); left: 0; bottom: 0; width: 264px; z-index: 60;
    background: var(--paper); border-right: 1px solid var(--border);
    padding: 18px 14px; overflow-y: auto;
    transform: translateX(-100%); transition: transform 0.2s ease, visibility 0.2s;
    box-shadow: var(--shadow-pop);
    visibility: hidden;
  }
  .workspace.nav-open .side-nav { transform: translateX(0); visibility: visible; }

  .nav-scrim { display: block; position: fixed; inset: var(--header-h) 0 0 0; background: rgb(10 10 10 / 0.34); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  .workspace.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  /* The panel's own toggle is off-canvas — use the inline opener instead */
  .side-nav > .nav-toggle { display: none; }
  .nav-toggle-bar { display: flex; margin-bottom: 16px; }
  .nav-toggle-bar .nav-toggle {
    width: 34px; height: 34px; margin: 0;
    border-color: var(--border); background: var(--paper); color: var(--ink);
  }

  /* Some workspaces carry an inline grid-template-columns; override it */
  .workspace[style] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Rail styling never applies inside the drawer — always full labels */
  .workspace.nav-collapsed .side-nav a { justify-content: flex-start; padding: 7px 10px; gap: 10px; }
  .workspace.nav-collapsed .side-nav a .label { display: revert; }
  .workspace.nav-collapsed .side-nav a.lvl-2 { padding-left: 22px; font-size: 13.5px; opacity: 1; }
  .workspace.nav-collapsed .side-nav a.done::after { display: revert; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 28px 32px; }
.card + .card { margin-top: 20px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.card-rule { border: 0; border-top: 1px solid var(--border-soft); margin: 24px 0; }

/* Wide tables scroll in their own wrapper. This must NOT live on .card —
   an overflow value there clips absolutely-positioned children such as the
   step-tabs dropdown. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[tabindex="-1"]:focus { outline: none; }
@media (max-width: 900px) { .card-pad { padding: 22px 20px; } }
@media (max-width: 620px) { .card-pad { padding: 18px 15px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  border-radius: 4px; border: 1px solid transparent;
  padding: 9px 18px; cursor: pointer; text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--action); color: var(--action-ink); border-color: var(--action-edge); }
.btn-primary:hover { background: var(--action-hover); border-color: var(--action-edge); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #262626; }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost-indigo { background: transparent; color: var(--indigo-strong); border-color: rgb(72 94 216 / 0.7); }
.btn-ghost-indigo:hover { background: var(--indigo-soft); border-color: var(--indigo); }
.btn-disabled, .btn[disabled] { background: var(--surface-2); color: var(--muted-2); border-color: var(--border-soft); cursor: not-allowed; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 4px; }
.btn-lg { padding: 13px 26px; font-size: 15px; }

/* ---------- Badges & status ---------- */
.badge {
  display: inline-flex; align-items: flex-start; justify-content: flex-start; gap: 6px;
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: left;
  border-radius: 4px; padding: 8px 12px;
}
/* The icon is its own flex item so wrapped text lines align with each other,
   not under the icon — "0 OF 12" and "ATTACHMENTS" share a left edge. */
.badge > .ico { flex: none; }
.badge > .txt { min-width: 0; }
.badge-agency { background: var(--ink); color: #fff; }
.badge-match { background: var(--lime-soft); color: var(--lime-strong); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-neutral { background: var(--surface-2); color: var(--muted); }
.badge-indigo { background: var(--indigo-soft); color: var(--indigo-strong); }

/* ---------- Progress ---------- */
.progress { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
.progress.indigo > span { background: var(--indigo); }
.progress-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0em; color: var(--muted-2); }

/* ---------- Stats (marketing-style stat cards) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
/* Vertical variant, parked in the right-hand column of a page head */
.stat-stack { grid-template-columns: 1fr; width: 252px; flex: none; }
.stat-stack .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 14px; }
.stat-stack .stat .v { font-size: 20px; line-height: 1.1; }
.stat-stack .stat .k { margin-top: 0; text-align: right; }

/* Right-hand column of a page head. Top-aligned with the title block, so a
   stat stack sits level with the eyebrow rather than the baseline. */
.head-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; align-self: flex-start; }
/* A button row is its own component — it was previously only styled inside
   .head-aside, so the one row that sits under a page title got no flex and no
   gap: the buttons were separated by an HTML whitespace character, and by
   nothing at all once they wrapped. `gap` covers both axes, so the stacked
   state keeps the same 10px. */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.head-aside .btn-row { justify-content: flex-end; }
/* The title block absorbs the slack so the aside stays on the head's row and
   pinned right — otherwise the two blocks' natural widths force a wrap. */
.page-head-row > :first-child { flex: 1 1 320px; min-width: 0; }

@media (max-width: 900px) {
  .head-aside { width: 100%; align-items: stretch; }
  .head-aside .btn-row { justify-content: flex-start; }
  .stat-stack { width: 100%; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .stat-stack .stat { display: block; }
  .stat-stack .stat .k { text-align: left; margin-top: 2px; }
}

/* Inline min-width on some stat rows must not force overflow */
@media (max-width: 720px) {
  .stat-row { min-width: 0 !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .stat { padding: 13px 15px; }
  .stat .v { font-size: 22px; }
}
.stat { background: var(--paper); padding: 16px 20px; }
.stat .v { font-family: var(--font-heading); font-weight: 600; font-size: 26px; color: var(--indigo); letter-spacing: -0.02em; }
.stat .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0em; text-transform: uppercase; color: var(--muted-2); margin-top: 2px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0em; text-transform: uppercase; color: var(--muted-2);
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface); }
.table .r { text-align: right; }
.table td.num-cell { font-family: var(--font-mono); font-size: 12.5px; color: var(--indigo); }
.table td.num-cell.total { font-weight: 600; }

/* Edge gutter for tables that sit flush against the card wall — 32px on all
   four sides, so the table breathes evenly inside the card. */
.table-gutter th:first-child,
.table-gutter td:first-child { padding-left: 32px; }
.table-gutter th:last-child,
.table-gutter td:last-child { padding-right: 32px; }
.table-gutter thead th { padding-top: 32px; }
.table-gutter tbody tr:last-child td { padding-bottom: 32px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label, .field .lbl {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.field .hint { font-size: 12px; color: var(--muted-2); margin-top: 5px; }

/* A field label paired with an inline action ("Add organization +"). The
   action is a *sibling* of the label, never a child — an interactive element
   nested inside a <label> has its clicks forwarded to the labelled control,
   so the select would open instead of the dialog. */
.field-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field-label-row > label { margin-bottom: 6px; }
.link-btn {
  flex: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  color: var(--indigo-strong); text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--ink); }
.input, .select, textarea.input {
  width: 100%; font-family: var(--font-body); font-size: 13.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 0 12px; outline: none;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Single-line controls share one height. A native select computes its own
   line-height and lands ~2px taller than an input at identical padding, so
   both are pinned to --control-h and the select's native chrome is replaced. */
.input, .select { min-height: var(--control-h); line-height: calc(var(--control-h) - 2px); }
.select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236e6e6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.select::-ms-expand { display: none; }
.select:hover { border-color: var(--ink); }

.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--indigo); box-shadow: 0 0 0 3px rgb(72 94 216 / 0.14);
}
.input::placeholder { color: var(--muted-2); }
/* Inline width attributes must never push a control past its container */
.input, .select { max-width: 100%; }

/* Multi-line and non-text inputs opt out of the fixed height */
textarea.input {
  height: auto; line-height: 1.6; padding: 10px 12px;
  resize: vertical; min-height: 120px;
}
input.input[type="date"] { line-height: normal; }
.input-mono { font-family: var(--font-mono); font-size: 12.5px; }
.field-row { display: grid; gap: 16px; }
.field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.field-row.cols-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 980px) { .field-row.cols-3 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 720px) {
  /* !important is required: several instances carry inline grid-template-columns */
  .field-row.cols-2, .field-row.cols-3 { grid-template-columns: 1fr !important; }
}

/* Segmented control */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 4px; padding: 3px; gap: 3px; }
.segmented button, .segmented a {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--muted);
  background: transparent; border: 0; border-radius: 4px; padding: 7px 16px; cursor: pointer; text-decoration: none;
}
.segmented .on { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--border-strong), 0 1px 2px rgb(10 10 10 / 0.08); }

/* Radio pills (timeline years etc.) */
/* Radius matches the other pills; type stays legible — this is a tappable control, not a label */
.pill-radio { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 12px 20px; cursor: pointer; background: var(--paper); font-weight: 500; }

/* Selectable topic pill: toggles on click, carries a count */
.pill-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--paper); color: var(--muted);
  padding: 7px 11px; margin: 0 7px 7px 0;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.pill-toggle:hover { border-color: var(--ink); color: var(--ink); }
.pill-toggle .tick {
  width: 13px; height: 13px; flex: none; border-radius: 3px;
  border: 1px solid var(--border-strong); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; color: transparent;
}
.pill-toggle .count {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted-2);
  letter-spacing: 0em;
}
.pill-toggle.on {
  border-color: var(--indigo); background: var(--indigo-soft); color: var(--indigo-strong);
}
.pill-toggle.on .tick { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pill-toggle.on .count { color: var(--indigo-strong); }

/* ---------- Modals & alerts ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(10 10 10 / 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px; overflow-y: auto;
  opacity: 0; pointer-events: none; transition: opacity 0.16s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgb(10 10 10 / 0.3);
  width: 100%; max-width: 640px; margin: auto 0;
  transform: translateY(-10px); transition: transform 0.16s ease;
}
.modal-overlay.open .modal { transform: none; }
.modal-sm { max-width: 440px; }
.modal-lg { max-width: 900px; }

.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 28px 18px; border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-heading); font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
/* Second half of the "Budget | Equipment" lockup */
.modal-title em { font-style: normal; font-weight: 500; color: var(--primary-text); }
.modal-sub { font-size: 13px; color: var(--muted); margin: 5px 0 0; }
.modal-close {
  width: 30px; height: 30px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--muted-2); cursor: pointer; font-size: 15px; line-height: 0;
}
.modal-close:hover { background: var(--surface-2); border-color: var(--border); color: var(--ink); }

.modal-body { padding: 24px 28px; }
.modal-foot {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  padding: 16px 28px; border-top: 1px solid var(--border-soft);
}
.modal-foot .spacer { flex: 1; }
@media (max-width: 620px) {
  .modal-overlay { padding: 20px 12px; }
  .modal-head, .modal-body, .modal-foot { padding-left: 18px; padding-right: 18px; }
  .modal-foot .btn { flex: 1 1 auto; }
}

/* Period grid inside the budget modals */
.period-grid { display: grid; grid-template-columns: 150px repeat(3, 1fr); gap: 10px 12px; align-items: center; }
.period-grid .hd { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0em; text-transform: uppercase; color: var(--muted-2); }
.period-grid .lbl { font-size: 13px; color: var(--ink); font-weight: 500; }
.period-grid .suffixed { position: relative; }
.period-grid .suffixed .sfx { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); pointer-events: none; }
.period-grid .suffixed .input { padding-right: 26px; }
@media (max-width: 620px) {
  .period-grid { grid-template-columns: 1fr; }
  .period-grid .hd:not(:first-child) { display: none; }
}

/* Alert dialog — icon column beside the message */
.alert-body { display: flex; gap: 16px; align-items: flex-start; }
.alert-icon {
  width: 38px; height: 38px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.alert-icon svg { display: block; }
.alert-icon.danger { background: var(--danger-soft); color: var(--danger); }
.alert-icon.warning { background: var(--warning-soft); color: var(--warning); }
.alert-icon.info { background: var(--indigo-soft); color: var(--indigo-strong); }
.alert-icon.success { background: var(--success-soft); color: var(--success); }
.alert-body .t { font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin: 2px 0 6px; }
.alert-body p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.6; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a81919; }

/* Per-row edit / delete, revealed on hover */
.row-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity 0.12s ease; }
tr:hover .row-actions, .row-actions:focus-within { opacity: 1; }
.icon-btn {
  width: 28px; height: 28px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--muted-2); cursor: pointer; font-size: 13px; line-height: 0;
}
.icon-btn:hover { background: var(--paper); border-color: var(--border); color: var(--ink); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
/* assets/icon-trash.svg is inlined so its stroke follows the button colour */
.icon-btn svg { display: block; }
/* Touch devices have no hover — keep the controls visible */
@media (hover: none) { .row-actions { opacity: 1; } }

/* Row actions menu (scripts/rowmenu.js). Positioned `fixed` against the
   toggle and parented to <body>, because the table sits inside
   .table-scroll — an overflow container that would clip it. */
.row-menu-list {
  position: fixed; z-index: 90; min-width: 232px; padding: 6px;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
}
.row-menu-list [role="menuitem"] {
  display: block; width: 100%; text-align: left;
  padding: 8px 11px; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-size: 13px; color: var(--muted);
}
.row-menu-list [role="menuitem"]:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.row-menu-list [role="menuitem"].danger { color: var(--danger); }
.row-menu-list [role="menuitem"].danger:hover { background: var(--danger-soft); color: var(--danger); }
.row-menu-list .sep { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 0; width: 100%; }
/* The toggle is a persistent control, not a hover affordance */
.row-menu-toggle { width: 32px; height: 28px; font-size: 15px; letter-spacing: 0.06em; }
.row-menu-toggle[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }

/* ---------- Funding reports ---------- */
/* Ranked list — agencies, institutions */
.rank-row { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.rank-row:last-child { border-bottom: 0; }
.rank-row .r { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); min-width: 22px; flex: none; }
.rank-row .nm { flex: 1; font-size: 13.5px; color: var(--ink); min-width: 0; }
.rank-row .val { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); white-space: nowrap; flex: none; }
.rank-row .val strong { color: var(--indigo); font-weight: 600; }

/* Award row — recently funded */
.award-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.award-row:last-child { border-bottom: 0; }
.award-row .t { font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.award-row .m { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); margin-top: 3px; letter-spacing: 0em; }
.award-row .fig { text-align: right; flex: none; }
.award-row .fig .amt { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--indigo); }
.award-row .fig .dt { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }

/* Two-column report layout: a tall list beside stacked panels */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } }
.report-grid .col { display: flex; flex-direction: column; gap: 20px; }

/* History event — a past search, with the query rendered as its facets */
.event-row { padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.event-row:last-child { border-bottom: 0; }
.event-row .q { font-size: 13.5px; color: var(--ink); line-height: 1.5; margin: 8px 0 0; }
.event-row .q .k { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0em; text-transform: uppercase; }
.event-row .m { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); margin-top: 6px; letter-spacing: 0em; }
.event-row .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

/* Saved opportunity row */
.saved-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border-soft); }
.saved-row:last-child { border-bottom: 0; }
.saved-row .t { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.saved-row .m { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.saved-row .m .src { font-size: 12.5px; color: var(--muted); }
.saved-row .acts { display: flex; gap: 8px; flex: none; }
/* Bookmark toggle — a filled bookmark means saved. One SVG for both states:
   the fill is driven by [aria-pressed], so the button's visual state and its
   programmatic state can never drift apart. */
.btn-bookmark {
  width: 32px; height: 32px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 4px; background: var(--paper);
  color: var(--muted-2); cursor: pointer; line-height: 0;
}
.btn-bookmark svg { display: block; }
.btn-bookmark svg path {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round;
}
.btn-bookmark:hover { border-color: var(--primary); color: var(--primary-text); }
.btn-bookmark[aria-pressed="true"] {
  border-color: var(--primary); color: var(--primary-text); background: var(--primary-soft);
}
.btn-bookmark[aria-pressed="true"] svg path { fill: currentColor; }

/* Researcher profile candidate — disambiguation before topics are derived */
.profile-pick {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--paper); padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer;
}
.profile-pick:hover { border-color: var(--ink); }
.profile-pick.on { border-color: var(--indigo); background: var(--indigo-soft); }
.profile-pick input[type="checkbox"] { margin-top: 2px; accent-color: var(--indigo); flex: none; }
.profile-pick .nm { font-weight: 600; font-size: 14px; color: var(--indigo-strong); }
.profile-pick .aff { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.profile-pick .aff .n { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }
.profile-pick .topics { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.profile-pick .links { margin-top: 7px; display: flex; gap: 14px; font-size: 12.5px; }

/* Share — invite row and the people-with-access list */
.invite-row { display: grid; grid-template-columns: 1fr 150px auto; gap: 10px; align-items: center; }
@media (max-width: 620px) { .invite-row { grid-template-columns: 1fr; } }

.person-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.person-row:last-child { border-bottom: 0; }
.person-row .pfp {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--indigo); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.person-row .pfp.muted { background: var(--surface-2); color: var(--muted-2); }
.person-row .who { flex: 1; min-width: 0; }
.person-row .who .n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.person-row .who .e { font-size: 12.5px; color: var(--muted-2); }
.person-row .role { flex: none; }
.person-row .role .select { width: auto; min-width: 132px; }
.person-row .owner-tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); text-transform: uppercase; }

/* Publication result row */
.pub-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.pub-row:last-child { border-bottom: 0; }
.pub-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--indigo); flex: none; }
.pub-row .t { font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.pub-row .m { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); margin-top: 3px; }
.pill-radio input { accent-color: var(--indigo); }
.pill-radio.on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); background: var(--indigo-soft); color: var(--indigo-strong); }

/* Attached file — the "complete" state of an attachment requirement.
   The requirement name stays the primary line; the uploaded file is
   secondary, so a scan down the column still reads as a list of
   requirements rather than a list of filenames. */
.file-done { display: flex; gap: 11px; align-items: flex-start; }
.file-done .ftype {
  flex: none; width: 34px; height: 34px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--success-soft); color: var(--success);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0em;
}
.file-done .fmeta { min-width: 0; }
.file-done .fname { font-weight: 600; color: var(--ink); }
.file-done .fsub {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  overflow-wrap: anywhere;
}
.file-done .fsub a { color: var(--indigo); }

/* Upload dropzone */
.dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); padding: 34px 24px; text-align: center; color: var(--muted);
}
.dropzone strong { color: var(--indigo); font-weight: 600; }
.dropzone .icon { font-size: 22px; color: var(--muted-2); display: block; margin-bottom: 8px; }

/* ---------- Callouts ---------- */
.callout { border-radius: var(--radius); padding: 14px 18px; font-size: 13.5px; display: flex; gap: 12px; align-items: flex-start; }
.callout .t { font-weight: 600; }
.callout-info { background: var(--indigo-soft); color: var(--indigo-strong); }
.callout-warning { background: var(--warning-soft); color: var(--warning); border-left: 3px solid var(--warning); }
.callout-brand { background: var(--surface-2); border-left: 3px solid var(--primary); color: var(--ink); }
.callout-lime { background: var(--lime-soft); color: var(--lime-strong); }

/* ---------- Sub-nav tabs (within-section stepper) ---------- */
/* nowrap + scroll: the row must never drop below the title, so its placement
   stays identical across every section regardless of title or item count. */
.step-tabs {
  display: flex; flex-wrap: nowrap; gap: 0; align-items: center; font-size: 12px;
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.step-tabs::-webkit-scrollbar { display: none; }
.step-tabs a { white-space: nowrap; flex: none; }
.step-tabs .sep { flex: none; }
.step-tabs a { color: var(--muted-2); padding: 5px 7px; border-bottom: 2px solid transparent; font-weight: 500; }
.step-tabs a:hover { color: var(--ink); text-decoration: none; }
.step-tabs a.on { color: var(--ink); border-bottom-color: var(--primary); font-weight: 600; }
.step-tabs .sep { color: var(--muted-2); margin: 0 2px; }

/* Collapses to a hamburger menu when the row no longer fits */
.step-tabs-wrap {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  margin-left: auto; min-width: 0;
}
/* Above the drawer breakpoint the strip stays on the title's row. It shrinks
   (and scrolls internally) rather than wrapping, so its position is identical
   on every section no matter how long the title is. */
@media (min-width: 901px) {
  .card-head.has-steps { flex-wrap: nowrap; }
  .card-head.has-steps > :first-child { min-width: 0; }
}
.step-tabs-toggle {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  cursor: pointer; color: var(--muted-2); line-height: 0;
}
.step-tabs-toggle:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
.step-tabs-toggle svg { display: block; }
.step-tabs-wrap.open .step-tabs-toggle { background: var(--paper); border-color: var(--border); color: var(--ink); }

@media (max-width: 900px) {
  .step-tabs-toggle { display: inline-flex; }
  .step-tabs {
    display: none;
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    min-width: 210px; padding: 6px; gap: 1px;
    background: var(--paper); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-pop);
  }
  .step-tabs-wrap.open .step-tabs { display: flex; }
  .step-tabs .sep { display: none; }
  .step-tabs a {
    padding: 8px 10px; border-bottom: 0; border-radius: 6px;
    font-size: 13px; color: var(--muted); white-space: nowrap;
  }
  .step-tabs a:hover { background: var(--surface); }
  .step-tabs a.on { background: var(--indigo-soft); color: var(--indigo-strong); border-bottom: 0; }
}

/* ---------- Footer nav (prev / save / next) ---------- */
.wizard-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.wizard-footer .nav-link { font-family: var(--font-heading); font-size: 15px; font-weight: 500; color: var(--ink); }
.wizard-footer .nav-link span { color: var(--muted-2); }
.wizard-footer .nav-link:hover { color: var(--indigo); text-decoration: none; }

/* ---------- Dashboard section cards ---------- */
.board { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
/* Grid gap handles the spacing here. The generic `.card + .card` margin would
   otherwise offset every card after the first, so rows never line up. */
.board .card + .card { margin-top: 0; }
.board > .sp-2  { grid-column: span 2; }
.board > .sp-3  { grid-column: span 3; }
.board > .sp-4  { grid-column: span 4; }
.board > .sp-6  { grid-column: span 6; }
.board .stack { display: flex; flex-direction: column; gap: 18px; }
.board .stack > .b-card { min-height: 0; flex: 1; }

/* Two-up (equal cells, no gaps), then single column */
@media (max-width: 1180px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board > .sp-2, .board > .sp-3, .board > .sp-4, .board > .sp-6 { grid-column: span 1; }
  .board .b-card .items { columns: 1 !important; }
}
@media (max-width: 760px) {
  .board { grid-template-columns: 1fr; gap: 14px; }
  .board > .sp-2, .board > .sp-3, .board > .sp-4, .board > .sp-6 { grid-column: 1 / -1; }
  .board .b-card { min-height: 0; }
  .board .b-card .items { columns: 1 !important; }
  .board .stack { gap: 14px; }
}
.board .b-card { display: flex; flex-direction: column; padding: 20px 22px 16px; min-height: 210px; }
.board .b-card .items { margin: 14px 0 auto; display: flex; flex-direction: column; gap: 2px; }
.board .b-card .items a { font-size: 13px; color: var(--muted); padding: 4px 6px; margin: 0 -6px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
.board .b-card .items a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.board .b-card .items a.done { color: var(--ink); }
.board .b-card .items a.done::after { content: "✓" / ""; color: var(--lime-strong); font-weight: 700; }
.board .b-card .items a.locked { opacity: 0.4; pointer-events: none; }
.board .b-card .foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.board .b-card .foot .progress { flex: 1; }

/* ---------- Misc ---------- */
.mono-list { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.doc-preview {
  background: var(--paper); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: var(--shadow-pop); padding: 48px 56px; max-width: 720px; margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif; font-size: 12.5px; line-height: 1.5; color: #1a1a1a;
}
.doc-preview h3 { font-family: Arial, sans-serif; font-size: 14px; margin: 18px 0 6px; }
.doc-preview h3:first-child { margin-top: 0; }
.doc-surface { background: #3f3f46; border-radius: var(--radius); padding: 36px 20px; }
@media (max-width: 900px) {
  .doc-surface { padding: 20px 12px; }
  .doc-preview { padding: 30px 26px; }
}
@media (max-width: 620px) {
  .doc-surface { padding: 12px 8px; }
  .doc-preview { padding: 22px 18px; }
}
.kv { display: grid; grid-template-columns: 220px 1fr; gap: 10px 24px; font-size: 13.5px; }
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; gap: 3px; } .kv dd { margin-bottom: 12px; } }
.kv dt { color: var(--muted-2); font-weight: 500; }
.kv dd { margin: 0; color: var(--ink); }
/* In normal flow — fixed positioning made this overlay the content column */
.footer-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); line-height: 1.7;
  max-width: 1360px; margin: 0 auto;
  padding: 20px 28px 30px;
  border-top: 1px solid var(--border-soft);
}
.footer-meta a { color: var(--indigo-strong); }
@media (max-width: 900px) { .footer-meta { padding: 18px 20px 26px; } }
@media (max-width: 620px) { .footer-meta { padding: 16px 14px 24px; } }

/* Accordion */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.accordion + .accordion { margin-top: 10px; }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 13px 18px; font-weight: 600; font-size: 13.5px; background: var(--paper);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "↓" / ""; font-family: var(--font-mono); color: var(--muted-2); }
.accordion[open] summary::after { content: "↑" / ""; }
.accordion summary:hover { background: var(--surface); }
.accordion .body { padding: 4px 18px 18px; border-top: 1px solid var(--border-soft); }