/* ----- Slate — ONCE Films internal platform ----------------------------- */
/* Brand tokens from the ONCE Films brand guide:
   - Equator gold #E1AE05 (primary brand color)
   - Tussock gold #B68742 (secondary, warmer)
   - Deep black backgrounds, editorial/condensed display type
   - Confident, declarative all-caps headers; story-led aesthetic
*/

:root {
  /* ─── SURFACE + INK ─── core dark canvas */
  --slate-ink:        #0a0a0a;          /* near-black, neutral */
  --slate-ink-2:      #141413;          /* lifted, barely-warm */
  --slate-ink-3:      #1c1c1a;          /* most-lifted */
  --slate-ink-soft:   #1f2937;
  --slate-cream:      #f5efe3;          /* warm off-white accent */
  --slate-cream-soft: rgba(245, 239, 227, .08);
  --slate-paper:      #fafaf9;
  --slate-line:       #e5e5e3;
  --slate-line-soft:  #f0f0ee;
  --slate-line-dark:  #2a2a2a;

  /* ─── BRAND GOLDS ─── ONCE brand guide */
  --slate-gold:       #E1AE65;          /* Equator — primary */
  --slate-gold-deep:  #B68742;          /* Tussock — secondary */
  --slate-gold-soft:  rgba(225, 174, 101, .14);
  /* Vertical (180deg) gradient — same direction as the tier-gold scope
     card buttons so every gold button across the app reads identically.
     Older 135deg diagonal made plain .slate-btn-primary look flat next
     to the tier-card variants. */
  --slate-gold-gradient: linear-gradient(180deg, #E1AE65 0%, #B68742 100%);
  --slate-amber:      var(--slate-gold);  /* legacy alias */

  /* ─── SEMANTIC STATE COLORS ─── one source of truth for success/warn/danger.
     Audit found 4 shades of green, 3 shades of red — converge to these. */
  --color-success:      #7fb47f;        /* paid invoices, on-track, collected */
  --color-success-deep: #4a8a64;        /* darker variant for hover/border */
  --color-warning:      #d4a05a;        /* aging, paused, attention-needed */
  --color-danger:       #b56262;        /* overdue, lost, errors */
  --color-info:         var(--slate-gold);
  --color-muted:        #8a8a8a;        /* default secondary text */

  /* ─── PHASE COLORS ─── distinct hue per project lifecycle phase.
     Used everywhere a project's phase is shown: Projects list, Board,
     Project Doc, Dashboard. Same color across all pages so the producer
     learns the language once (blue = early, lavender = prepping,
     orange = active production, gold = refining, green = done). */
  --phase-development:     #5a8cd1;     /* calm blue — early */
  --phase-pre-production:  #9d7cc4;     /* lavender — preparation */
  --phase-production:      #d18a5a;     /* orange — active */
  --phase-post:            var(--slate-gold);    /* gold — refining */
  --phase-delivered:       var(--color-success); /* green — done */

  /* ─── TYPE SCALE ─── 5 steps + display variants.
     Audit found 30 distinct font-sizes; this collapses to a meaningful scale.
     Use --text-micro for eyebrows/labels, --text-data for table cells,
     --text-body for prose, --text-title for panel headers, --text-headline
     for page H1s. The -display sizes are for the Big Shoulders display
     font (amounts, hero numbers). */
  --text-micro:       10px;             /* uppercase eyebrows, table headers */
  --text-data:        13px;             /* table cells, dense data */
  --text-body:        14px;             /* prose, descriptions */
  --text-subtitle:    16px;             /* panel titles, secondary headlines */
  --text-title:       22px;             /* section/page titles */
  --text-headline:    32px;             /* page H1s, key hero numbers */
  --text-display-md:  28px;             /* big amounts (Cash strip, etc.) */
  --text-display-lg:  44px;             /* hero amounts (Projected, etc.) */

  /* Line heights paired with the scale above */
  --leading-tight:    1;                /* display numbers, single-line pills */
  --leading-snug:     1.2;              /* titles + headlines */
  --leading-normal:   1.4;              /* form inputs, dense data */
  --leading-relaxed:  1.55;             /* prose, body copy */

  /* Letter spacing — uppercase eyebrows want tracking; body wants none */
  --tracking-normal:  0;
  --tracking-wide:    .08em;            /* mid-tier emphasis */
  --tracking-wider:   .12em;            /* default eyebrow / table header */
  --tracking-widest:  .14em;            /* strong all-caps headers */

  /* Font weights — only these four. Audit had 7+ values; 500 was rare. */
  --weight-regular:   400;
  --weight-medium:    500;              /* buttons, secondary emphasis */
  --weight-bold:      700;              /* eyebrows, table headers */
  --weight-display:   800;              /* big numbers, hero titles */

  /* ─── SPACING SCALE ─── geometric, used for margins + padding.
     Top of the audit clustered around these values; one-offs go away. */
  --space-1:          0.25rem;          /* 4px  — sliver, label-to-input */
  --space-2:          0.5rem;           /* 8px  — small gap */
  --space-3:          0.75rem;          /* 12px — default tight gap */
  --space-4:          1rem;             /* 16px — default gap */
  --space-5:          1.5rem;           /* 24px — section internal */
  --space-6:          2rem;             /* 32px — section gap */
  --space-7:          2.5rem;           /* 40px — page section gap */
  --space-8:          4rem;             /* 64px — page-top breathing room */

  /* ─── MOTION ─── transition timing + easing */
  --duration-fast:    120ms;            /* hover, focus */
  --duration-normal:  150ms;            /* most state changes */
  --duration-slow:    350ms;            /* layout shifts, progress bars */
  --ease-soft:        ease;             /* default */
  --ease-snap:        cubic-bezier(.4, 0, .2, 1);  /* tighter UI feel */

  --slate-emerald:    #15803d;
  --slate-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(10,10,10,.05);

  /* Pico overrides */
  --pico-primary:                 var(--slate-gold);
  --pico-primary-hover:           var(--slate-gold-deep);
  --pico-primary-focus:           rgba(225, 174, 101, .25);
  --pico-primary-inverse:         #0a0a0a;
  --pico-font-family:             'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --pico-font-family-monospace:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pico-font-family-display:     'Big Shoulders Display', 'Inter', sans-serif;
  /* Editorial italic serif. Reserved for hero moments — amounts on the
     /development page, project titles, key invoice figures, Cash strip
     totals. Used in italic only; do not use for body copy. Same family
     STL.org uses for body, applied dark + dramatic here. */
  --pico-font-family-serif:       'cormorant', 'Cormorant Garamond', Georgia, serif;
  --pico-font-weight:             400;
  --pico-border-radius:           0;
}

/* The app is dark by design. Force dark-mode Pico tokens regardless of
   system preference so the look is consistent for every user; the only
   light-mode surface is .proposal-doc (client-facing proposal page),
   which scopes its own light vars. */
:root {
  --pico-background-color:                  var(--slate-ink);
  --pico-card-background-color:             var(--slate-ink-2);
  --pico-card-sectioning-background-color:  var(--slate-ink-2);
  --pico-muted-border-color:                var(--slate-line-dark);
  --pico-muted-color:                       #8a8a8a;
  --pico-form-element-background-color:     transparent;
  --pico-form-element-border-color:         var(--slate-line-dark);
  --pico-form-element-active-background-color: transparent;
  --pico-form-element-active-border-color:  var(--slate-gold);
  --pico-form-element-focus-color:          var(--slate-gold);
  --pico-table-row-stripped-background-color: transparent;
  --pico-table-border-color:                var(--slate-line-dark);
  --pico-color:                             var(--slate-cream);
  --pico-h1-color:                          var(--slate-cream);
  --pico-h2-color:                          var(--slate-cream);
  --pico-h3-color:                          var(--slate-cream);
  color-scheme: dark;
}
/* Set the background on <html> AND <body>. Without the html rule,
   short pages let Pico's default light/blue background show through
   at the bottom — the viewport "stripe" effect. min-height: 100vh
   on body also helps the slate-ink fill any leftover space. */
html, body { background: var(--slate-ink); }
html { min-height: 100%; }
body { min-height: 100vh; }


/* ============================================================ */
/*  PRIMITIVE COMPONENTS                                        */
/*  Canonical building blocks. Use these everywhere instead of  */
/*  inventing new ones per page.                                */
/* ============================================================ */

/* ─── Pill ─── replaces 9 ad-hoc pill systems (project status,
   value chip, tier pill, invoice status, test mode, post state badge,
   filter chip, freeform badge, development state pill). One base, six
   intent variants, two sizes, two styles. */
.pill {
  display: inline-block;
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
  vertical-align: middle;
}
.pill-md {
  font-size: 11px;
  padding: 4px 10px;
}
.pill-dashed { border-style: dashed; }

/* Intent variants — color is set via `currentColor` so border + text
   change together. The soft variant adds a tinted background. */
.pill-accent   { color: var(--slate-gold); }
.pill-success  { color: var(--color-success); }
.pill-warning  { color: var(--color-warning); }
.pill-danger   { color: var(--color-danger); }
.pill-neutral  { color: var(--slate-cream); }
.pill-muted    { color: var(--color-muted); opacity: .85; }

.pill-soft.pill-accent  { background: rgba(225, 174, 101, .10); }
.pill-soft.pill-success { background: rgba(127, 180, 127, .10); }
.pill-soft.pill-warning { background: rgba(212, 160, 90,  .10); }
.pill-soft.pill-danger  { background: rgba(181,  98, 98,  .10); }
.pill-soft.pill-neutral { background: rgba(245, 239, 227, .05); }
.pill-soft.pill-muted   { background: rgba(138, 138, 138, .08); }


/* ─── Figure ─── editorial italic serif treatment.
   Used at the moments where a number or title carries the page. The
   restraint is the move: a handful of italic serif moments against a
   default sans backdrop reads cinematic. Everywhere else stays
   utilitarian.
   The base sets typography only; size + color are inherited from the
   parent element so .text-figure can be applied to any size context
   (small chip amount, large hero amount) without re-declaring sizes. */
.text-figure {
  font-family: var(--pico-font-family-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.005em;
  /* Cormorant runs slightly tall — pull line-height in so it sits
     well next to neighboring sans elements on the same baseline. */
  line-height: .95;
}


/* ----- Defensive Pico overrides — kill leaked azure on legacy pages ---- */

/* <figure> wraps <table> in Pico's defaults and pulls in a card-bg.
   Strip it — figure is just a layout container. */
figure {
  background: transparent;
  background-color: transparent;
  padding: 0;
  margin: 0 0 1rem;
}

/* Pico paints tables with --pico-card-background-color via various
   selectors. Force every default table to neutral. Specific Slate tables
   (.slate-list-table, .post-table, etc.) inherit the same transparent
   base and add their own treatment on top. */
table,
table thead, table tbody, table tfoot,
table tr, table th, table td {
  background: transparent;
  background-color: transparent;
}

/* Any input/textarea/select Pico is styling unaided — replace its blue
   focus ring with a slate-gold one. */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--slate-gold) !important;
  box-shadow: 0 0 0 .125rem rgba(225, 174, 101, .25) !important;
  outline: none !important;
}

/* Pico's secondary/outline button variants still get a blue cast on
   some pages. Normalize to slate-line/cream with a gold hover. */
button.secondary, button.outline, button.contrast,
a[role="button"].secondary, a[role="button"].outline, a[role="button"].contrast {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
}
button.secondary:hover:not([disabled]),
button.outline:hover:not([disabled]),
button.contrast:hover:not([disabled]),
a[role="button"].secondary:hover,
a[role="button"].outline:hover,
a[role="button"].contrast:hover {
  border-color: var(--slate-gold);
  color: var(--slate-gold);
}

/* Checkboxes and radios — kill the system-blue check color, use slate-gold. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--slate-gold);
}

/* Pico applies a card-bg to <details>, <article>, <aside> — leaks azure
   on legacy pages. The card-bg var is already overridden to slate-ink-2,
   so detail containers read as faintly-lifted dark instead of blue. Belt-
   and-suspenders: explicit transparent on the bare elements so anything
   that wraps them stays neutral. Pages that want a card look opt in via
   their own scoped class. */
article, aside, details {
  background: transparent;
  background-color: transparent;
}
/* But Pico's default <details> open state has its own background — clear it. */
details[open] > summary { background: transparent; }

body {
  font-family: var(--pico-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Display face — Big Shoulders Display, used for section/phase titles and
   the project name. Echoes the geometric weight of the ONCE wordmark. */
.estimator-page .phase-title,
.estimator-page .phase-title-label,
.estimator-page .project-title {
  font-family: var(--pico-font-family-display);
}

/* Numbers throughout the app use the monospace stack */
.estimator-page .qty-input,
.estimator-page .unit-input,
.estimator-page .unit-display,
.estimator-page .cell-total,
.estimator-page .tier-total-value,
.estimator-page .totals-segment-row .segment-cell {
  font-family: var(--pico-font-family-monospace);
}

/* =========================================================================
   Nav — ONCE-brand cinematic header.
   Three-zone layout: brand (logo + SLATE wordmark) · nav links · user.
   The active page gets a gold underline. Inactive links sit muted; hover
   warms them to cream. The whole bar floats above a hairline gold accent
   that fades out at the page edges — gives the nav a sense of weight
   without a heavy background.
   ========================================================================= */

.slate-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: .85rem !important;
  padding-bottom: .85rem !important;
  margin-bottom: 0;
  min-height: 64px;
  position: relative;
  border-bottom: 1px solid var(--slate-line-dark);
}
/* The accent line: a thin gold gradient that fades out at the edges,
   sitting right under the nav border. Pure visual — no semantic role. */
.slate-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(225, 174, 101, .35) 18%,
    rgba(225, 174, 101, .55) 50%,
    rgba(225, 174, 101, .35) 82%,
    transparent 100%
  );
  pointer-events: none;
}
.slate-nav > * { display: inline-flex; align-items: center; }

/* ----- Brand: ONCE logo + SLATE wordmark with a vertical gold rule ----- */
.slate-brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--slate-gold);
  text-decoration: none;
  line-height: 1;
  transition: opacity .15s ease;
}
.slate-brand:hover { opacity: .85; }
.slate-brand-logo {
  height: 38px;
  width: auto;
  display: block;
}
.slate-brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  position: relative;
}
.slate-brand-wordmark-rule {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--slate-gold-deep) 30%,
    var(--slate-gold-deep) 70%,
    transparent 100%
  );
}
.slate-brand-wordmark-text {
  font-family: var(--pico-font-family-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--slate-cream);
  /* The text has just enough warmth to feel related to the gold logo
     without competing with it. */
  text-shadow: 0 0 12px rgba(225, 174, 101, .15);
}

/* ----- Nav links: display font, uppercase, with an active gold underline */
.slate-nav-links {
  display: flex;
  gap: .15rem;
  margin-left: .75rem;
  flex: 1;
  align-self: stretch;
}
.slate-nav-link {
  position: relative;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  color: var(--pico-muted-color);
  text-decoration: none;
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 0;
  transition: color .15s ease;
  height: 100%;
}
.slate-nav-link::after {
  /* The underline indicator — sits flush with the nav's bottom border,
     animates width from center on hover, fully extended on active. */
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;  /* sits ON the nav border, not below it */
  height: 2px;
  background: var(--slate-gold);
  transition: left .18s ease, right .18s ease;
}
.slate-nav-link:hover {
  color: var(--slate-cream);
}
.slate-nav-link:hover::after {
  left: 20%;
  right: 20%;
}
.slate-nav-link.is-active {
  color: var(--slate-cream);
}
.slate-nav-link.is-active::after {
  left: 0;
  right: 0;
  background: var(--slate-gold);
  /* A subtle glow lifts the active state — barely there, but enough that
     you feel oriented. */
  box-shadow: 0 0 8px rgba(225, 174, 101, .35);
}

/* Phase dropdown — "Post ▾" with hover menu of all phases */
.slate-nav-dropdown {
  position: relative;
  display: inline-block;
}
.slate-nav-dropdown-caret {
  font-size: .55rem;
  opacity: .55;
  margin-left: .25rem;
}
.slate-nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  display: none;
  flex-direction: column;
  z-index: 50;
  padding: .25rem 0;
}
.slate-nav-dropdown:hover .slate-nav-dropdown-menu,
.slate-nav-dropdown:focus-within .slate-nav-dropdown-menu {
  display: flex;
}
.slate-nav-dropdown-item {
  padding: .35rem .75rem;
  color: var(--pico-muted-color);
  text-decoration: none;
  font-size: .65rem;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.slate-nav-dropdown-item:hover {
  color: var(--slate-cream);
  background: var(--slate-ink-3);
}

/* Nav user area — name pill with a "logged in" dot + logout icon to the right.
   Pill is borderless until hover so it doesn't compete with the active-page
   underline; the dot is a small green vertical stripe that signals presence. */
.slate-nav-user {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  line-height: 1;
}
.slate-nav-email {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .75rem;
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.slate-nav-user-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6db887;
  box-shadow: 0 0 6px rgba(109, 184, 135, .65);
  flex-shrink: 0;
}
a.slate-nav-email:hover {
  color: var(--slate-cream);
  border-color: var(--slate-line-dark);
  background: rgba(245, 239, 227, .02);
}

/* Account page — saved confirmation banner. (Page wrapper styles live with
   the M5 block below; this older duplicate kept only the banner rule.) */
.account-saved-banner {
  background: rgba(74, 138, 100, .15);
  border-left: 3px solid #4a8a64;
  color: var(--slate-cream);
  padding: .65rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 13px;
}

.logout-form { display: inline; margin: 0; }
.slate-nav-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--pico-muted-color);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.slate-nav-logout:hover {
  color: var(--slate-gold);
  border-color: var(--slate-line-dark);
}

@media (prefers-color-scheme: dark) {
  .slate-nav {
    border-bottom-color: var(--slate-line-dark);
  }
  .slate-nav-link:hover {
    background: rgba(255,255,255,.04);
  }
}

/* ----- Layout helpers ----- */

.action-row {
  margin: 1.5rem 0;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.action-row a[role="button"] {
  margin: 0;
}

.centered-card {
  max-width: 26rem;
  margin: 4rem auto;
}
.form-narrow { max-width: 32rem; }
.form-medium { max-width: 38rem; }

.page-actions {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ----- Status pills (legacy classes — visual treatment matches .pill) -----
   Used on dashboard, projects list, board, project doc, company page,
   estimator, proposal builder. Same look as .pill, kept under their
   historical class names so we don't have to touch ~10 templates. */
.status {
  display: inline-block;
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--color-muted);
}
/* Per-phase color mapping. Uses the canonical phase tokens so the
   Projects list pill, Board phase pill, Dashboard status pill, and
   Company-page row pill all show the same color for the same phase.
   Producer learns the color language once and it holds everywhere. */
/* M33: pre-signing stages (Discussing / Proposed) use the same muted
   exploratory palette as the legacy 'development' bucket they replaced. */
.status-discussing      { color: var(--phase-development); }
.status-proposed        { color: #b8a87a; }   /* warmer hint than discussing */
.status-signed          { color: var(--slate-gold); }
.status-development     { color: var(--phase-development); }  /* legacy, retained */
.status-pre_production  { color: var(--phase-pre-production); }
.status-production      { color: var(--phase-production); }
.status-post_production { color: var(--phase-post); }
.status-delivered       { color: var(--phase-delivered); }
/* Terminal / pause states — semantic palette, not phase palette. */
.status-archived        { color: var(--color-muted); opacity: .6; }
.status-paused          { color: var(--color-warning); }
.status-lost            { color: var(--color-danger); }

/* M33: inline status select in the Project Doc key-facts row. Styled
   to look like a stage pill (small caps, color from .status-* above)
   but it's a real <select> the producer can change inline. */
.project-doc-status-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 2px;
  padding: 2px 22px 2px 8px !important;
  font-family: var(--pico-font-family-display);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  /* Custom chevron — slate-cream so it doesn't fight the status color. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238a8377' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
}
.project-doc-status-select:hover { filter: brightness(1.15); }
.project-doc-status-select:focus {
  outline: 1px solid var(--slate-gold);
  outline-offset: 1px;
}
/* Options render in the browser's native dropdown style; force dark bg
   so they don't appear as white-on-white on dark pages. */
.project-doc-status-select option {
  background: var(--slate-ink);
  color: var(--slate-cream);
}

/* =========================================================================
   Estimator — SPREADSHEET-DENSE grid. Scoped to .estimator-page so we can
   override Pico's defaults safely. Target row height: ~24px.
   ========================================================================= */

/* Squeeze Pico's <main> padding when it contains the estimator. */
main:has(.estimator-page) {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* Override Pico's spacing inside the estimator page. */
.estimator-page {
  --pico-font-size: 15px;
  --pico-line-height: 1.35;
  --pico-spacing: .5rem;
  --pico-form-element-spacing-vertical: .15rem;
  --pico-form-element-spacing-horizontal: .4rem;
  font-size: 15px;
  line-height: 1.35;
}
.estimator-page * { box-sizing: border-box; }
.estimator-page h2, .estimator-page h3, .estimator-page h6,
.estimator-page p, .estimator-page nav, .estimator-page article,
.estimator-page section, .estimator-page table, .estimator-page details,
.estimator-page header, .estimator-page footer {
  margin-top: 0;
  margin-bottom: 0;
}
/* Pico applies negative top/left/right margins to <header> inside <article>
   which pulls it outside the article's box. Reset that on our totals block. */
.estimator-page article.totals-block > header,
.estimator-page article.totals-block > .totals-tier-header {
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}


/* ---- Header area ------------------------------------------------------- */

/* Breadcrumb — global. Used on every detail/edit page (admin sub-pages,
   project doc, estimator, expenses, invoices, company-edit). De-scoped
   from .estimator-page so anchor links inherit muted slate styling
   everywhere instead of leaking through to Pico's link blue. The "/"
   separator is rendered by Pico's default nav[aria-label="breadcrumb"]
   styling — we only style colors + spacing on top. */
.breadcrumb-tight {
  margin: 0 0 .15rem;
  font-size: 12px;
}
.breadcrumb-tight ul { margin: 0; padding: 0; }
.breadcrumb-tight li { padding: 0 .35rem 0 0; color: var(--pico-muted-color); }
.breadcrumb-tight a {
  color: var(--pico-muted-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-soft);
}
.breadcrumb-tight a:hover {
  color: var(--slate-cream);
  border-bottom-color: currentColor;
}

.estimator-page .project-header {
  margin: 0 0 1rem;
}
.estimator-page .project-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}
.estimator-page .project-header-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.estimator-page .project-header-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Buttons — one consistent shape, two variants ----------------------
   All action buttons: 4px radius, 32px tall, identical box model so a
   ghost button + a primary button align perfectly side-by-side. */
.slate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  height: 32px;
  box-sizing: border-box;
  padding: 0 .95rem;
  margin: 0;
  border-radius: 0;
  font-family: var(--pico-font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  vertical-align: middle;
}
.slate-btn-primary {
  background: var(--slate-gold-gradient);
  color: var(--slate-ink);
  border: 1px solid var(--slate-gold-deep);
  font-weight: 600;
  /* Soft tactile lift — matches the inset highlight on tier-card buttons
     so the gradient direction + dimensionality stay consistent. */
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
.slate-btn-primary:hover:not([disabled]) { filter: brightness(1.08); }
.slate-btn-primary[disabled] { opacity: .35; cursor: not-allowed; }

.slate-btn-ghost {
  color: var(--slate-cream);
  border: 1px solid var(--slate-line-dark);
}
.slate-btn-ghost:hover {
  border-color: var(--slate-gold);
  color: var(--slate-gold);
}
@media (prefers-color-scheme: light) {
  .slate-btn-ghost {
    color: var(--slate-ink);
    border: 1px solid var(--slate-line);
  }
}
.estimator-page .project-title {
  margin: 0;
  font-family: var(--pico-font-family-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--slate-cream);
}
.estimator-page .project-meta {
  color: var(--pico-muted-color);
  font-size: 13px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.estimator-page .project-meta .meta-dot { color: var(--pico-muted-color); opacity: .5; }
.estimator-page .project-meta a { color: var(--pico-muted-color); text-decoration: none; border-bottom: 1px solid transparent; }
.estimator-page .project-meta a:hover { color: var(--slate-cream); border-bottom-color: currentColor; }

/* ---- Top totals block — the centerpiece of the page -------------------- */
/* This is one of three top-level zones (header / totals / line items).
   Treat it with reverence: real margin, real presence, real numbers. */

.totals-block {
  margin: 2.5rem 0 3rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--slate-ink-2);
  color: var(--slate-cream);
  overflow: hidden;
}

.totals-tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem 1.25rem;
  background: transparent;
  border-bottom: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
}
.totals-grand-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  flex-shrink: 0;
}
.tier-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  flex: 1;
  max-width: 38rem;
  margin-left: auto;
}
.tier-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .4rem .95rem;
  border-radius: 0;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  min-height: 36px;
}
.tier-total.tier-green {
  background: #122019;
  border-color: #1f4d36;
}
.tier-total.tier-gold {
  background: rgba(225, 174, 5, .14);
  border-color: rgba(225, 174, 5, .55);
}
.tier-total.tier-gold .tier-total-label { color: var(--slate-gold); }
.tier-total.tier-gold .tier-total-value { color: var(--slate-gold); }
.tier-total.tier-black {
  background: #1a1a1c;
  border-color: #3a3a40;
}
.tier-total-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.tier-total.tier-green .tier-total-label { color: #86c79f; }
.tier-total.tier-gold  .tier-total-label { color: var(--slate-gold); }
.tier-total.tier-black .tier-total-label { color: var(--slate-cream); }
.tier-total-value {
  font-family: var(--pico-font-family-monospace);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--slate-cream);
}
.tier-total.tier-gold .tier-total-value { color: var(--slate-gold); }

.totals-segments {
  margin: 0;
  padding: 1.25rem 1.5rem 1.4rem;
  color: rgba(245, 239, 227, .85);
}
.totals-segment-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .2rem 0;
  font-size: 13px;
}
.totals-segment-row + .totals-segment-row {
  border-top: 1px dashed rgba(255,255,255,.06);
}
.totals-segment-row .segment-label {
  color: rgba(255,255,255,.7);
  font-weight: 500;
  flex-shrink: 0;
}
/* Mirror the tier-totals layout above so segment values align under their
   matching tier cards. */
.totals-segment-row .segment-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  flex: 0 0 38rem;
  max-width: 38rem;
  margin-left: auto;
}
.totals-segment-row .segment-cell {
  text-align: right;
  padding: 0 .85rem;  /* match tier-total card horizontal padding */
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.7);
}
.totals-segment-row .segment-cell.segment-gold {
  color: var(--slate-gold);
  font-weight: 600;
}
.totals-reimbursable {
  margin: 0;
  padding: .5rem 1.1rem .55rem;
  border-top: 1px dashed rgba(255,255,255,.08);
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-style: italic;
  background: var(--slate-cream-soft);
}

/* ---- Phase sections — flat card surfaces on slate-ink-2 ---------------- */

.phase-block {
  margin: 0 0 2rem;          /* doubled — clearer breathing room */
  background: var(--slate-ink-2);
  border: none;              /* outer border removed; bg color does the framing */
  border-radius: 0;          /* flat corners */
  padding: 0 .9rem 2.85rem;
}
.phase-block:first-of-type {
  margin-top: 1.5rem;
}

/* Phase title — doubles as <summary> for the collapsible section.
   Big Shoulders Display, uppercase, with a thin neutral rule beneath. */
.phase-title {
  margin: 0 -.9rem;
  padding: .4rem .9rem .4rem;
  font-family: var(--pico-font-family-display);
  font-size: 22px;
  font-weight: 700;
  background: transparent;
  color: var(--slate-cream);
  border: none;
  border-bottom: 1px solid var(--slate-line-dark);
  border-radius: 0;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.category-details[open] > .phase-title { margin-bottom: .15rem; }
.phase-title::-webkit-details-marker { display: none; }
/* Subtle disclosure arrow — small, low-contrast, doesn't compete with title */
.phase-title::before {
  content: '▸';
  font-family: var(--pico-font-family);
  font-size: 11px;
  letter-spacing: 0;
  width: 16px;
  display: inline-block;
  color: var(--slate-cream);
  opacity: .35;
  transition: transform .15s ease, opacity .15s ease;
  position: relative;
  top: -3px;
}
.category-details[open] > .phase-title::before {
  transform: rotate(90deg);
  top: -1px;
}
.phase-title:hover::before { opacity: .6; }
.phase-title-label {
  flex: 1;
  font-family: var(--pico-font-family-display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate-cream);
}
.phase-title-subtotal {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  opacity: .6;
  font-weight: 500;
}
.phase-title:hover .phase-title-label {
  color: #fff;
}

.category-details > .estimator-table {
  margin-top: .15rem;
}
/* Slight spacing when section is collapsed */
.category-details:not([open]) {
  margin-bottom: .35rem;
}

/* ---- Estimator table — DENSE rows ------------------------------------- */

.estimator-table {
  margin: 0;
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
}
.estimator-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pico-muted-color);
  font-weight: 500;
  padding: .1rem .5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  background: transparent;
  line-height: 1.2;
}
.estimator-table td {
  padding: 0 .5rem;
  vertical-align: middle;
  border-top: 1px solid var(--pico-muted-border-color);
  line-height: 1.1;
  height: 26px;
}
.estimator-table tbody tr:first-child td { border-top: none; }
/* Nuke every possible source of row-level background variation. Pico applies
   striping + hover + focus-within via low-specificity selectors that have
   been beating our previous overrides — !important shuts that down. */
.estimator-page .estimator-table tbody tr,
.estimator-page .estimator-table tbody tr:hover,
.estimator-page .estimator-table tbody tr:focus-within,
.estimator-page .estimator-table tbody tr:nth-child(odd),
.estimator-page .estimator-table tbody tr:nth-child(even) {
  background: transparent !important;
  background-color: transparent !important;
}
.estimator-page .estimator-table tbody tr { height: 26px; }
.estimator-page .estimator-table td,
.estimator-page .estimator-table th {
  background: transparent !important;
  background-color: transparent !important;
}

/* Inactive (qty 0) template lines fade so they don't dominate, but stay
   readable enough that producers can scan available options. */
.line-row.template-line:not(.line-active) .cell-label,
.line-row.template-line:not(.line-active) .unit-display,
.line-row.template-line:not(.line-active) .cell-total {
  color: var(--pico-muted-color);
  opacity: .8;
}
.line-row.line-active .cell-total { font-weight: 600; }
.line-row.freeform-line {
  background: rgba(255, 220, 100, .08);
}

.cell-label    { width: auto;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-qty      { width: 140px; text-align: left; padding-left: .85rem !important; }
.cell-unit     { width: 85px;  text-align: right; font-variant-numeric: tabular-nums; }
.cell-total    { width: 95px;  text-align: right; font-variant-numeric: tabular-nums; }
.cell-actions  { width: 30px;  text-align: right; padding: 0 !important; }

.cell-label small,
.line-meta {
  color: var(--pico-muted-color);
  font-size: 11px;
  font-weight: normal;
  margin-left: .3rem;
  white-space: nowrap;
}

.freeform-badge {
  display: inline-block;
  background: transparent;
  color: var(--pico-muted-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 0;
  padding: 0 .35rem;
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: .03em;
  margin-left: .35rem;
  vertical-align: middle;
  font-style: italic;
}

/* ---- Inline inputs — no spinner arrows --------------------------------- */

.estimator-page .qty-input,
.estimator-page .unit-input {
  display: block;
  width: 100%;
  max-width: 100px;
  margin: 0 0 0 auto;
  padding: 1px 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
  height: 24px !important;
  min-height: 24px !important;
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  border-radius: 0;
  box-shadow: none !important;
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color .15s ease, background .15s ease;
}
.estimator-page .unit-input { max-width: 90px; }

/* Qty stepper — minus / number / plus, all on the bare surface. No
   borders on the input or the buttons; − + read in the same muted
   gray as the unit-price column so the row scans as data, not chrome.
   Hover bumps them to gold for affordance. */
.estimator-page .qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  line-height: 1;
}
.estimator-page .qty-stepper .qty-input {
  max-width: 44px;
  text-align: center;
  border: 1px solid transparent !important;
  background: transparent;
  padding: 0 2px !important;
  margin: 0 !important;
  font-weight: 600 !important;
  height: 18px !important;
  min-height: 18px !important;
  line-height: 18px !important;
}
.estimator-page .qty-stepper .qty-input:focus {
  border: 1px solid var(--slate-gold) !important;
}
.estimator-page .qty-step {
  background: transparent;
  border: 0;
  color: var(--pico-muted-color);
  width: 18px;
  height: 18px;
  padding: 3px 0 0 0;        /* extra top padding nudges the symbol down to the digit's eye-line */
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-family: system-ui, sans-serif;  /* round +/− glyphs that match the digit's optical center */
  transition: color .12s ease;
}
.estimator-page .qty-step:hover { color: var(--slate-gold); }
.estimator-page .qty-step:active { transform: translateY(1px); }
:root[data-theme] .estimator-page .qty-step { color: var(--paper-ink-mute); }
:root[data-theme] .estimator-page .qty-step:hover { color: var(--paper-gold); }
:root[data-theme] .estimator-page .qty-stepper .qty-input { color: var(--paper-ink); }
:root[data-theme] .estimator-page .qty-stepper .qty-input:focus { border-color: var(--paper-gold) !important; }

/* Hide the spinner buttons on WebKit browsers (Chrome/Safari/Edge) */
.estimator-page .qty-input::-webkit-inner-spin-button,
.estimator-page .qty-input::-webkit-outer-spin-button,
.estimator-page .unit-input::-webkit-inner-spin-button,
.estimator-page .unit-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  display: none;
}

.estimator-page .qty-input:focus,
.estimator-page .unit-input:focus {
  outline: none;
  border-color: var(--slate-ink) !important;
  background: var(--slate-paper);
}

/* Active line: just a slightly brighter border on the input — no tinted bg
   (cream-on-dark was reading as bluish). */
.line-row.line-active .qty-input {
  border-color: rgba(245, 239, 227, .35);
}
.estimator-page .qty-input:focus,
.estimator-page .unit-input:focus {
  outline: 1px solid var(--slate-gold);
  outline-offset: 0;
  border-color: var(--slate-gold);
}
.unit-display { font-variant-numeric: tabular-nums; }

.inline-form { display: inline; margin: 0; }
.header-inline-form { display: inline; margin: 0; }

/* Section-level "Clear" link, sits in the bottom-right of each open
   section. Visually quiet — text-only, no border, half-muted color. */
.section-reset-form {
  margin: .35rem 0 0;
  text-align: right;
}
.section-reset-btn {
  display: inline;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  color: var(--pico-muted-color);
  opacity: .5;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s ease, color .15s ease;
}
.section-reset-btn:hover {
  opacity: 1;
  color: #c47878;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================================
   Proposal builder — two-column layout (producer view, authenticated) yep
   ========================================================================= */

/* Single full-width column for the builder. The old 360px / 1fr two-column
   grid is gone — producers need breathing room for tables (deliverables,
   pillars, add-ons, scopes). Preview now lives in a separate tab via the
   Preview ↗ button in the header. Max-width keeps long textareas from
   stretching beyond readable width. */
.proposal-builder-wide {
  max-width: 980px;
  margin: 1.5rem auto 2rem;
}
.proposal-builder-wide .proposal-config {
  background: var(--slate-ink-2);
  padding: 1.5rem 1.75rem 1.25rem;
}
.proposal-builder-wide .proposal-scopes-panel {
  margin-top: 2rem;
}

/* Legacy grid class — keep an alias in case anything else references it */
.proposal-builder-grid {
  max-width: 980px;
  margin: 1.5rem auto 2rem;
}

.proposal-config {
  background: var(--slate-ink-2);
  padding: 1.25rem 1.25rem 1rem;
  align-self: start;
}
.proposal-config-section {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0 0 .6rem;
}
.proposal-config-section + .proposal-config-section,
.proposal-config-row + .proposal-config-section {
  margin-top: 1.5rem;
}

/* Narrative group divider — splits the long accordion list into Intro /
   Strategy / Scope & Pricing / Library Picks / Extras & Terms so the
   producer can scan the form structure at a glance. Small caps mono,
   gold rule below. */
.proposal-config-group {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--slate-gold);
  margin: 2rem 0 .85rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-gold-deep);
  opacity: .9;
}
.proposal-config-group:first-child { margin-top: 0; }
:root[data-theme] .proposal-config-group {
  color: var(--paper-gold);
  border-bottom-color: var(--paper-gold);
}
.proposal-config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.proposal-config-row:has(.radio-card:nth-child(3)) {
  grid-template-columns: 1fr 1fr 1fr;
}
.proposal-config textarea {
  width: 100%;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  border-radius: 0;
  color: var(--slate-cream);
  padding: .5rem .65rem;
  font-size: 13px;
  font-family: var(--pico-font-family);
  resize: vertical;
}
.proposal-config-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.radio-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem .75rem;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  cursor: pointer;
  transition: border-color .15s ease;
}
.radio-card input { display: none; }
.radio-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-cream);
}
.radio-card-hint {
  font-size: 11px;
  color: var(--pico-muted-color);
}
.radio-card:has(input:checked) {
  border-color: var(--slate-gold);
}
.radio-card:has(input:checked) .radio-card-label {
  color: var(--slate-gold);
}
.radio-tier-green:has(input:checked) { border-color: #86c79f; }
.radio-tier-green:has(input:checked) .radio-card-label { color: #86c79f; }
.radio-tier-black:has(input:checked) { border-color: var(--slate-cream); }
.radio-tier-black:has(input:checked) .radio-card-label { color: var(--slate-cream); }

.proposal-preview {
  position: relative;
}
.proposal-preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pico-muted-color);
  margin-bottom: .5rem;
}
.proposal-preview-frame {
  background: var(--slate-cream);
  color: #1c1818;
  padding: 1.5rem 1.5rem 2rem;
  max-height: 720px;
  overflow-y: auto;
  border: 1px solid var(--slate-line-dark);
}

/* Stats footer on builder page */
.proposal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  background: #f1ebd9;            /* matches the proposal builder paper */
  border: 1px solid #ece6d4;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.proposal-stat {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.proposal-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6e6657;
}
.proposal-stat-value {
  font-size: 13px;
  color: #2d2820;
  font-variant-numeric: tabular-nums;
}
.proposal-stat-value.share-url {
  font-family: var(--pico-font-family-monospace);
  font-size: 11px;
  word-break: break-all;
  user-select: all;
}

/* =========================================================================
   Proposal document — used by both preview AND public page
   ========================================================================= */

/* The proposal document is a self-contained light-mode "island" — even
   when embedded in the dark-mode builder preview, descendants must render
   on cream with dark text. Shadow Pico's dark variables locally. */
.proposal-doc {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--pico-font-family);
  color: #1c1818;

  --pico-background-color:                  var(--slate-cream);
  --pico-card-background-color:             #ffffff;
  --pico-card-sectioning-background-color:  #ffffff;
  --pico-muted-color:                       #6e6657;
  --pico-muted-border-color:                #d8d2c4;
  --pico-color:                             #1c1818;
  --pico-h1-color:                          #1c1818;
  --pico-h2-color:                          #1c1818;
  --pico-h3-color:                          #1c1818;
  --pico-table-row-stripped-background-color: transparent;
  --pico-table-border-color:                #d8d2c4;
  --pico-form-element-background-color:     #ffffff;
  --pico-form-element-border-color:         #d8d2c4;
}

/* Defeat any Pico table striping/hover/focus styling that could leak in,
   the same way we did inside the estimator. Light-mode equivalent. */
.proposal-doc table,
.proposal-doc thead,
.proposal-doc tbody,
.proposal-doc tr,
.proposal-doc th,
.proposal-doc td {
  background: transparent !important;
  background-color: transparent !important;
}
.proposal-doc tr:hover,
.proposal-doc tr:nth-child(odd),
.proposal-doc tr:nth-child(even) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Centered, cover-page-style masthead: logos on top, title centered below */
.proposal-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid #d8d2c4;
  margin-bottom: 2rem;
}
.proposal-masthead-logo {
  height: 52px;
  width: auto;
}
.proposal-masthead-meta {
  text-align: center;
  max-width: 640px;
}
.proposal-masthead-client {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #6e6657;
  margin-bottom: .5rem;
}
.proposal-masthead-project {
  font-family: var(--pico-font-family-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 .65rem;
  color: #1c1818;
}
.proposal-masthead-line {
  font-size: 12px;
  color: #6e6657;
  letter-spacing: .04em;
  margin-top: .25rem;
}

.proposal-cover-note {
  font-size: 15px;
  line-height: 1.55;
  color: #3a3530;
  margin: 0 0 2rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid #ece8dc;
}

/* Single tier hero */
.single-tier {
  text-align: center;
  padding: 2rem 1rem 2.25rem;
  background: #f8f3e6;
  border: 1px solid #ece6d4;
  margin-bottom: 2rem;
}
.single-tier-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #6e6657;
  margin-bottom: .5rem;
}
.single-tier-value {
  font-family: var(--pico-font-family-monospace);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #1c1818;
  margin-bottom: 1.25rem;
}
.single-tier-accept {
  min-width: 240px;
}

/* Good/Better/Best comparison */
.tier-comparison {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 600px) {
  .tier-comparison { grid-template-columns: 1fr; }
}
.tier-card {
  background: #f8f3e6;
  border: 1px solid #ece6d4;
  padding: 1.5rem 1rem 1.5rem;
  text-align: center;
}
.tier-card-label {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: .35rem;
  color: #6e6657;
}
.tier-card-value {
  font-family: var(--pico-font-family-monospace);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #1c1818;
  margin-bottom: 1rem;
}
.tier-card-accept { width: 100%; }
.tier-card.tier-card-gold {
  background: #f0e4c4;
  border-color: #d8c69a;
}
.tier-card.tier-card-gold .tier-card-label { color: #8c6f24; }
.tier-card.tier-card-black {
  background: #1c1818;
  border-color: #1c1818;
}
.tier-card.tier-card-black .tier-card-label { color: #d8d2c4; }
.tier-card.tier-card-black .tier-card-value { color: var(--slate-cream); }

/* Segments table */
.proposal-breakdown { margin-bottom: 2rem; }
.proposal-breakdown-title {
  font-family: var(--pico-font-family-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1c1818;
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #d8d2c4;
}
.proposal-segments-table,
.proposal-full-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  /* Fixed layout so every category's table uses the SAME column widths,
     and × n quantities + prices line up vertically across the whole
     breakdown rather than wandering with the label length. */
  table-layout: fixed;
}
.proposal-segments-table th,
.proposal-segments-table td,
.proposal-full-table td {
  padding: .55rem .5rem;
  font-size: 14px;
  border-bottom: 1px solid #ece8dc;
  color: #1c1818;
}
.proposal-segments-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6e6657;
  font-weight: 600;
  text-align: left;
}
.proposal-segments-table th.num,
.proposal-segments-table td.num,
.proposal-full-table td.num {
  text-align: right;
  font-family: var(--pico-font-family-monospace);
}

.proposal-full-category {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6e6657;
  margin: 1.25rem 0 .35rem;
}
/* Fixed column widths so every breakdown table aligns vertically:
   ~70% label / ~12% qty / ~18% price. With table-layout: fixed the
   browser honors these and lays out every <table> identically. */
.proposal-full-table td.line-label {
  color: #1c1818;
  width: 70%;
}
.proposal-full-table td.line-qty {
  width: 12%;
  text-align: right;
  color: #6e6657;
  font-variant-numeric: tabular-nums;
}
.proposal-full-table td.num {
  width: 18%;
}
/* Segments table uses two columns: category / total */
.proposal-segments-table td:first-child { width: 70%; }
.proposal-segments-table td.num         { width: 30%; }

.proposal-reimbursable-note {
  font-size: 13px;
  font-style: italic;
  color: #6e6657;
  margin: 1rem 0 0;
}

.proposal-signed-block {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: #f0e4c4;
  border-left: 4px solid var(--slate-gold-deep);
}
.proposal-signed-block h2 {
  font-family: var(--pico-font-family-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 0 0 .5rem;
}
.proposal-signature-preview {
  max-height: 80px;
  margin-top: .5rem;
  background: white;
  padding: .35rem .5rem;
  border: 1px solid #d8c69a;
}

/* =========================================================================
   Public proposal page wrapper (the page the client sees)
   ========================================================================= */

body.proposal-public-body {
  background: var(--slate-cream);
  color: #1c1818;
  font-family: var(--pico-font-family);
}
.proposal-public-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.proposal-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d8d2c4;
  text-align: center;
  font-size: 12px;
  color: #8a8378;
}
.proposal-not-found {
  text-align: center;
  padding: 4rem 1rem;
}
.proposal-not-found h1 {
  font-family: var(--pico-font-family-display);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1c1818;
}

/* =========================================================================
   Sign modal
   ========================================================================= */

.sign-modal[aria-hidden="true"] { display: none; }
.sign-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Log Time modal — shared partial mounted in footer.ejs. Same backdrop
   shape as sign-modal but its own card styling: tighter, form-first,
   with a stage radio grid + paired hours/date row. */
.log-modal[aria-hidden="true"] { display: none; }
.log-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.log-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 8, .7);
}
.log-modal-card {
  position: relative;
  background: var(--slate-ink-2);
  color: var(--slate-cream);
  padding: 1.5rem;
  max-width: 540px;
  width: calc(100% - 2rem);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  border: 1px solid var(--slate-line-dark);
}
.log-modal-title {
  font-family: var(--pico-font-family-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--slate-cream);
}
.log-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.log-modal-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.log-modal-field-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.log-modal-field-hint {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .08em;
  margin-left: .35rem;
  opacity: .65;
}
.log-modal-input,
.log-modal-input:focus {
  background: var(--slate-ink-3, var(--slate-ink-1));
  color: var(--slate-cream);
  border: 1px solid var(--slate-line-dark);
  padding: .55rem .65rem;
  font-size: 14px;
  outline: none;
  border-radius: 0;
  width: 100%;
}
.log-modal-input:focus { border-color: var(--slate-gold, var(--slate-cream)); }
.log-modal-stage-set { border: 0; padding: 0; margin: 0; }
.log-modal-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.log-modal-stage-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--slate-line-dark);
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  line-height: 1.2;
}
.log-modal-stage-opt:hover { background: rgba(245, 239, 227, .04); }
/* Custom-rendered radio so accent-color quirks (Safari sizing, Pico
   overrides on resized radios) can't make the dot blue. Plain dark
   circle with a gold dot when checked. */
.log-modal-stage-opt input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--slate-line-dark);
  border-radius: 50%;
  background: transparent;
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
}
.log-modal-stage-opt input[type="radio"]:checked {
  border-color: var(--slate-gold);
}
.log-modal-stage-opt input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--slate-gold);
  border-radius: 50%;
}
.log-modal-stage-opt:has(input[type="radio"]:checked) {
  border-color: var(--slate-gold);
}
.log-modal-stage-opt input[type="radio"]:checked + span { color: var(--slate-cream); font-weight: 600; }

/* Date input — hide the native spinner arrows that Safari/Chrome show
   on focus, keep just the calendar trigger. */
.log-modal-input[type="date"]::-webkit-inner-spin-button,
.log-modal-input[type="date"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
}
.log-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px) {
  .log-modal-row,
  .log-modal-stage-grid { grid-template-columns: 1fr; }
}
.log-modal-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
/* Spacer eats the gap between Delete (left edge) and Cancel/Save (right). */
.log-modal-actions-spacer { flex: 1; }
/* Delete button — muted red, quiet at rest so it doesn't pull focus from
   the primary Save action. */
.log-modal-delete {
  color: #d96860 !important;
  border-color: rgba(217, 104, 96, .35) !important;
}
.log-modal-delete:hover {
  color: #fff !important;
  background: #b8443d !important;
  border-color: #b8443d !important;
}
:root[data-theme="paper"] .log-modal-delete {
  color: var(--paper-red) !important;
  border-color: rgba(184, 68, 61, .35) !important;
}
:root[data-theme="paper"] .log-modal-delete:hover {
  color: var(--paper-bg) !important;
  background: var(--paper-red) !important;
  border-color: var(--paper-red) !important;
}
.sign-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 8, .7);
}
.sign-modal-card {
  position: relative;
  background: var(--slate-ink-2);
  color: var(--slate-cream);
  padding: 1.75rem;
  max-width: 540px;
  width: calc(100% - 2rem);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.sign-modal-card h2 {
  font-family: var(--pico-font-family-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .35rem;
  color: var(--slate-cream);
}
.sign-modal-summary {
  font-size: 14px;
  color: var(--pico-muted-color);
  margin: 0 0 1.25rem;
}
.sign-modal-card label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pico-muted-color);
  margin-bottom: 1rem;
}
.sign-modal-card input[type="text"] {
  width: 100%;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  border-radius: 0;
  color: var(--slate-cream);
  padding: .55rem .7rem;
  font-size: 15px;
  font-family: var(--pico-font-family);
  margin-top: .35rem;
}
.signature-pad-wrap {
  display: block;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  margin-top: .35rem;
}
.signature-pad-wrap canvas {
  width: 100%;
  height: 160px;
  display: block;
}
.signature-clear {
  margin-top: .5rem;
  font-size: 11px;
  height: 26px;
  padding: 0 .65rem;
}
.sign-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.5rem;
}

/* =========================================================================
   M2 v1.1 — narrative body, add-ons, discount, validity, terms, typed sig
   ========================================================================= */

/* Body section — producer-written HTML between masthead and pricing */
.proposal-body {
  margin: 0 0 2rem;
  font-size: 15px;
  line-height: 1.6;
  color: #2b2722;
}
.proposal-body h1,
.proposal-body h2,
.proposal-body h3 {
  font-family: var(--pico-font-family-display);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 1.5rem 0 .6rem;
}
.proposal-body h1 { font-size: 24px; }
.proposal-body h2 { font-size: 19px; }
.proposal-body h3 { font-size: 15px; letter-spacing: .08em; }
.proposal-body p { margin: 0 0 1rem; }
.proposal-body ul,
.proposal-body ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.proposal-body li { margin: 0 0 .35rem; }
.proposal-body blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: #f4ede0;
  border-left: 3px solid var(--slate-gold-deep);
  font-style: italic;
  font-size: 16px;
  color: #3a3530;
}
.proposal-body strong { font-weight: 600; }

/* Discount + total rows in the segments/full table */
.proposal-discount-row td {
  color: #6e6657 !important;
  font-style: italic;
}
.proposal-total-row td {
  border-top: 2px solid #c5bba8 !important;
  border-bottom: none !important;
  padding-top: .75rem !important;
}

/* Add-ons table */
.proposal-addons {
  margin: 2rem 0;
}
.proposal-addons-hint {
  font-size: 13px;
  font-style: italic;
  color: #6e6657;
  margin: 0 0 .75rem;
}
.proposal-addons-table {
  width: 100%;
  border-collapse: collapse;
}
.proposal-addons-table td {
  padding: .5rem .5rem;
  font-size: 14px;
  border-bottom: 1px dashed #d8d2c4;
  color: #1c1818;
}
.proposal-addons-table td.num {
  text-align: right;
  font-family: var(--pico-font-family-monospace);
  color: #3a3530;
  white-space: nowrap;
}
.addon-unit {
  font-size: 11px;
  font-style: italic;
  color: #8a8378;
  font-family: var(--pico-font-family);
}

/* Validity callout */
.proposal-validity {
  margin: 1.5rem 0 0;
  padding: .9rem 1.25rem;
  background: #f4ede0;
  border-left: 3px solid var(--slate-gold-deep);
  font-size: 14px;
  color: #3a3530;
}
.proposal-validity-expired {
  background: #f5d0c8;
  border-left-color: var(--color-danger);
  color: #6b2828;
}

/* M34: sign-callout above the tier cards. Big, gold, can't be missed. */
.proposal-sign-callout {
  margin: 2rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #f4ede0;
  border: 1px solid var(--slate-gold-deep);
  border-radius: 2px;
  text-align: center;
}
.proposal-sign-callout-heading {
  margin: 0;
  font-family: var(--pico-font-family-display);
  font-size: 16px;
  font-weight: 700;
  color: #2d2820;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.proposal-sign-callout-body {
  margin: .5rem 0 0;
  font-size: 14px;
  color: #3a3530;
  line-height: 1.5;
}
.proposal-sign-callout-validity {
  display: inline-block;
  margin-left: .35rem;
  color: #6e6657;
  font-size: 13px;
}

/* M34: selectable add-ons (replaces the old static table). Each row is
   a clickable label with a checkbox + qty input. */
.proposal-addons-selectable {
  margin: 2rem 0;
}
.proposal-addons-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .75rem;
}
.proposal-addon-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: .65rem;
  padding: .65rem .85rem;
  background: #faf5e9;
  border: 1px solid #ece6d4;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  color: #2d2820;
  transition: background .12s ease, border-color .12s ease;
}
.proposal-addon-row:hover:not(.is-on-request) {
  background: #f6ecd0;
  border-color: var(--slate-gold-deep);
}
.proposal-addon-row.is-selected {
  background: #f4ede0;
  border-color: var(--slate-gold-deep);
  box-shadow: inset 0 0 0 1px var(--slate-gold-deep);
}
.proposal-addon-row.is-on-request {
  cursor: default;
  opacity: .75;
}
.proposal-addon-check {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--slate-gold-deep);
  cursor: pointer;
}
.proposal-addon-row.is-on-request .proposal-addon-check {
  cursor: not-allowed;
}
.proposal-addon-label {
  font-weight: 500;
}
.proposal-addon-price {
  color: #6e6657;
  font-family: var(--pico-font-family-monospace);
  font-size: 13px;
  white-space: nowrap;
}
.proposal-addon-qty-wrap {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: #6e6657;
  font-size: 13px;
}
.proposal-addon-qty {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 28px !important;
  padding: 2px 6px !important;
  font-family: var(--pico-font-family-monospace);
  font-size: 13px !important;
  background: #fffbef !important;
  color: #2d2820 !important;
  border: 1px solid #d8d0bd !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-align: right;
}
.proposal-addon-line-total {
  font-family: var(--pico-font-family-monospace);
  font-size: 13px;
  font-weight: 600;
  color: #2d2820;
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}

/* M34: sign modal — show a breakdown when add-ons are selected. */
.sign-modal-addons-breakdown {
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: rgba(245, 239, 227, .03);
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
}
.sign-modal-addons-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--slate-cream);
  padding: .25rem 0;
}
.sign-modal-addons-row.sign-modal-addons-total {
  margin-top: .5rem;
  padding-top: .55rem;
  border-top: 1px solid var(--slate-line-dark);
  font-weight: 700;
  font-size: 15px;
  color: var(--slate-gold);
}

/* Terms & Conditions */
.proposal-terms {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid #d8d2c4;
}
.proposal-terms .proposal-terms-body {
  font-size: 13px;
  line-height: 1.55;
  color: #4a4540;
}
.proposal-terms-body h3 {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 1.25rem 0 .35rem;
}
.proposal-terms-body p { margin: 0 0 .75rem; }

/* Typed signature — script font, rendered as text not image */
.proposal-typed-signature {
  font-family: 'Caveat', cursive;
  font-size: 34px;
  font-weight: 600;
  color: #1c1818;
  margin-top: .5rem;
  padding: .5rem 1rem;
  background: white;
  border: 1px solid #d8c69a;
  display: inline-block;
}

/* Sign modal — type/draw tabs + typed preview */
.sig-mode-tabs {
  display: inline-flex;
  margin: .25rem 0 .75rem;
  border: 1px solid var(--slate-line-dark);
}
.sig-mode-tab {
  background: transparent;
  color: var(--pico-muted-color);
  border: none;
  padding: .35rem .85rem;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  height: auto;
  margin: 0;
}
.sig-mode-tab.active {
  background: var(--slate-ink-3);
  color: var(--slate-cream);
}
.sig-pane-typed {
  margin-top: .5rem;
}
.typed-signature-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: white;
  color: #1c1818;
  font-family: 'Caveat', cursive;
  font-size: 38px;
  font-weight: 600;
  padding: 0 1rem;
  border: 1px solid var(--slate-line-dark);
}
.typed-signature-placeholder {
  font-family: var(--pico-font-family);
  font-size: 13px;
  color: #9a9a9a;
  font-weight: 400;
}
.sig-pane-hint {
  font-size: 11px;
  color: var(--pico-muted-color);
  font-style: italic;
  margin: .5rem 0 0;
}

/* =========================================================================
   Builder additions — narrative textarea, add-ons editor, discount row
   ========================================================================= */

.config-optional {
  font-family: var(--pico-font-family);
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pico-muted-color);
  margin-left: .35rem;
}
.config-help {
  font-size: 11px;
  color: var(--pico-muted-color);
  margin: -.35rem 0 .5rem;
  line-height: 1.4;
}
.config-monoish {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  line-height: 1.5;
}
.config-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pico-muted-color);
  margin-bottom: .75rem;
}
.config-label input {
  display: block;
  width: 100%;
  margin-top: .3rem;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .45rem .6rem;
  font-size: 13px;
  font-family: var(--pico-font-family);
  border-radius: 0;
}
.proposal-config-row-2 {
  grid-template-columns: 1fr 140px;
}

/* Add-ons editor */
.addons-editor {
  margin: 0 0 .75rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.addons-row {
  display: grid;
  grid-template-columns: 1fr 90px 80px 28px;
  gap: .35rem;
  align-items: center;
}
.addons-row input {
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .35rem .5rem;
  font-size: 12px;
  font-family: var(--pico-font-family);
  border-radius: 0;
}
.addons-row-remove {
  background: transparent;
  color: var(--pico-muted-color);
  border: 1px solid transparent;
  padding: 0;
  height: 28px;
  width: 28px;
  font-size: 14px;
  cursor: pointer;
}
.addons-row-remove:hover {
  color: #c47878;
  border-color: var(--slate-line-dark);
}
.addons-add-btn {
  font-size: 11px;
  height: 26px;
  padding: 0 .65rem;
}

/* Mobile tweaks for the public page */
@media (max-width: 600px) {
  .proposal-public-main { padding: 1.5rem 1rem 3rem; }
  .proposal-masthead {
    gap: 1.25rem;
    padding: 1rem 0 1.5rem;
  }
  .proposal-masthead-project { font-size: 26px; }
  .proposal-masthead-logo,
  .proposal-masthead-logo-client { height: 40px; max-height: 40px; }
  .single-tier-value { font-size: 32px; }
  .tier-card-value { font-size: 24px; }
  .proposal-body h1 { font-size: 22px; }
  .proposal-body h2 { font-size: 17px; }
  .typed-signature-preview { font-size: 30px; height: 80px; }
}

/* =========================================================================
   M2 v2 — Structured sections (public page)
   ========================================================================= */

.proposal-section {
  margin: 2.5rem 0;
}
.proposal-section-title {
  font-family: var(--pico-font-family-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #d8d2c4;
}
.proposal-subsection-title {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6e6657;
  margin: 1.5rem 0 .5rem;
}

/* Hello / brand opening */
.proposal-hello h2 {
  font-family: var(--pico-font-family-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 0 0 1rem;
}
.proposal-hello p {
  font-size: 15px;
  line-height: 1.6;
  color: #2b2722;
  margin: 0 0 1rem;
}

/* Testimonial */
.proposal-testimonial blockquote {
  margin: 0;
  padding: 1.5rem 2rem;
  background: #f4ede0;
  border-left: 4px solid var(--slate-gold-deep);
}
.proposal-testimonial p {
  font-size: 19px;
  line-height: 1.5;
  font-style: italic;
  color: #2b2722;
  margin: 0 0 .75rem;
}
.proposal-testimonial cite {
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6e6657;
  font-weight: 600;
}

/* Project brief (definition list) */
.brief-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: .75rem 1.25rem;
}
.brief-dl dt {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6e6657;
  padding-top: .15rem;
}
.brief-dl dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #2b2722;
}

/* Approach
   Font-size + line-height + color live on the PARENT so they cascade to
   any block child — <p> (legacy HTML) and <div> (Trix-emitted) alike.
   Trix wraps paragraphs in <div>, so a `.proposal-approach p` rule alone
   would miss new content and fall through to the page default (~17px). */
.proposal-approach {
  font-size: 15px;
  line-height: 1.6;
  color: #2b2722;
}
.proposal-approach p,
.proposal-approach div { margin: 0 0 1rem; }
.proposal-approach em { font-style: italic; color: #6e6657; }

/* Executive summary — 4-line TL;DR rendered right under the masthead.
   Visually a quiet card (cream bg + gold left rule), so it reads as the
   "click here to skip the rest" anchor for time-starved readers without
   competing with the proposal's main narrative beats below. */
.proposal-exec-summary {
  background: #f8f3e6;
  border-left: 3px solid var(--slate-gold-deep);
  padding: 1.25rem 1.5rem 1.35rem;
  margin-bottom: 2rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.proposal-exec-summary-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-gold-deep);
  margin-bottom: .6rem;
}
.proposal-exec-summary-body {
  font-size: 15px;
  line-height: 1.55;
  color: #2b2722;
}
.proposal-exec-summary-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.proposal-exec-summary-body li {
  position: relative;
  padding-left: 1.1rem;
  margin: 0 0 .4rem;
}
.proposal-exec-summary-body li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--slate-gold-deep);
  font-weight: 700;
}
.proposal-exec-summary-body li:last-child { margin-bottom: 0; }
.proposal-exec-summary-body p { margin: 0 0 .5rem; }
.proposal-exec-summary-body strong { color: #1c1818; }

/* "Not included in this engagement" — guardrail list paired with the SoW.
   Quieter than the inclusions (smaller type, muted bullet color) so it
   reads as a clarification, not a refusal. */
/* Not-included — font-size + color on PARENT for Trix-emitted div compat. */
.proposal-scope-not-included {
  font-size: 13px;
  line-height: 1.55;
  color: #6e6657;
  margin-bottom: 2.5rem;     /* breathing room before the tier cards */
}
.proposal-scope-not-included ul {
  margin: .25rem 0 1rem;
  padding-left: 1.5rem;
}
.proposal-scope-not-included li { margin: 0 0 .35rem; }
.proposal-scope-not-included li::marker { color: #b8b0a0; }
.proposal-scope-not-included p,
.proposal-scope-not-included div { margin: 0 0 .75rem; }

/* Scope of work — phase headings (Pre / Pro / Post) under "Scope of work includes" */
.proposal-sow-phase {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-gold-deep);
  margin: 1.25rem 0 .5rem;
}
.proposal-sow-phase:first-child { margin-top: .5rem; }

/* Scope assumptions — font-size + color on the PARENT (see note on
   .proposal-approach above). Child rules only set spacing. */
.proposal-scope-assumptions {
  font-size: 14px;
  line-height: 1.55;
  color: #3a3530;
}
.proposal-scope-assumptions ul {
  margin: .25rem 0 1rem;
  padding-left: 1.5rem;
}
.proposal-scope-assumptions li { margin: 0 0 .35rem; }
.proposal-scope-assumptions p,
.proposal-scope-assumptions div { margin: 0 0 1rem; }

/* Multi-scope comparison — lower minmax so 3 cards reliably fit on
   wide screens (the proposal-public-main is ~700px wide; with 220px min
   we were just over the boundary and falling to 2 columns). 190px lets
   3 fit at ~600px container width too. */
.proposal-scope-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: stretch;        /* grid default; pin so cards match height */
}
/* Below this width, drop to a single column rather than awkward wrapping */
@media (max-width: 480px) {
  .proposal-scope-comparison {
    grid-template-columns: 1fr;
  }
}
.proposal-scope-card {
  position: relative;
  padding: 1.5rem 1.25rem;
  background: #f8f3e6;
  border: 1px solid #ece6d4;
  display: flex;
  flex-direction: column;
}
/* Push the Accept button to the bottom of the card so all three tier
   buttons land on the same baseline, regardless of how tall the price
   block / description is in each card. */
.proposal-scope-card > .slate-btn-primary {
  margin-top: auto;
}
.proposal-scope-card.is-recommended {
  background: #f0e4c4;
  border-color: var(--slate-gold-deep);
}

/* Tier-colored scope cards — cream card base; tier shows as a 3px top
   stripe + a tier-tinted gradient Accept button. Gradients give the
   buttons a refined, tactile feel without making any one card scream
   over the others. */
.proposal-scope-card.proposal-scope-card-tier-green {
  border-top: 3px solid #4a8a64;
}
.proposal-scope-card-tier-green .slate-btn-primary {
  background: linear-gradient(180deg, #5fa078 0%, #4a8a64 100%);
  border: 1px solid #3a7250;
  color: var(--slate-cream);
  box-shadow: 0 1px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.proposal-scope-card-tier-green .slate-btn-primary:hover {
  background: linear-gradient(180deg, #4a8a64 0%, #3a7250 100%);
}

.proposal-scope-card.proposal-scope-card-tier-gold {
  border-top: 3px solid var(--slate-gold-deep);
}
.proposal-scope-card-tier-gold .slate-btn-primary {
  background: linear-gradient(180deg, var(--slate-gold) 0%, var(--slate-gold-deep) 100%);
  border: 1px solid #946a30;
  color: #1c1818;
  box-shadow: 0 1px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.20);
}
.proposal-scope-card-tier-gold .slate-btn-primary:hover {
  background: linear-gradient(180deg, var(--slate-gold-deep) 0%, #946a30 100%);
}

.proposal-scope-card.proposal-scope-card-tier-black {
  border-top: 3px solid #1c1818;
}
.proposal-scope-card-tier-black .slate-btn-primary {
  background: linear-gradient(180deg, #3a3a3a 0%, #1c1818 100%);
  border: 1px solid #000;
  color: var(--slate-cream);
  box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.proposal-scope-card-tier-black .slate-btn-primary:hover {
  background: linear-gradient(180deg, #1c1818 0%, #000 100%);
}
.proposal-scope-recommended-flag {
  position: absolute;
  top: -10px;
  left: 1rem;
  background: var(--slate-gold-deep);
  color: white;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .2rem .55rem;
}
.proposal-scope-name {
  font-family: var(--pico-font-family-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 0 0 .75rem;
}
.proposal-scope-description {
  font-size: 13px;
  line-height: 1.5;
  color: #4a4540;
  margin-bottom: 1rem;
  flex: 1;
}
.proposal-scope-description p { margin: 0 0 .5rem; }
.proposal-scope-price {
  margin: 0 0 1rem;
  text-align: right;
}
.proposal-scope-gross {
  font-family: var(--pico-font-family-monospace);
  font-size: 13px;
  color: #8a8378;
  text-decoration: line-through;
}
.proposal-scope-discount {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  color: #6e6657;
  font-style: italic;
}
.proposal-scope-discount .discount-label {
  font-family: var(--pico-font-family);
  font-size: 11px;
  margin-left: .35rem;
}
.proposal-scope-net {
  font-family: var(--pico-font-family-monospace);
  font-size: 24px;
  font-weight: 700;
  color: #1c1818;
  margin-top: .15rem;
}

/* Per-unit display — used on multi-unit scopes (quantity > 1). The big
   number above is the per-unit price; this small line below carries the
   unit label + multiplied total so the client sees both at once. */
.proposal-scope-unit-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6e6657;
  margin-top: .15rem;
}
.proposal-scope-total-line {
  font-family: var(--pico-font-family);
  font-size: 12px;
  color: #4a4540;
  margin-top: .5rem;
  line-height: 1.45;
}
.proposal-scope-total-line strong {
  font-family: var(--pico-font-family-monospace);
  font-weight: 700;
  color: #1c1818;
}
.proposal-scope-discount-inline {
  font-size: 11px !important;
  font-style: italic;
  margin-top: .2rem !important;
}

/* Single scope */
.proposal-scope-single {
  margin-bottom: 1.5rem;
}
.proposal-scope-single .proposal-scope-description {
  font-size: 15px;
  color: #2b2722;
  margin-bottom: 1.5rem;
}
.proposal-single-price {
  text-align: center;
  padding: 2rem 1rem 2.25rem;
  background: #f8f3e6;
  border: 1px solid #ece6d4;
}
.proposal-single-price .proposal-scope-gross,
.proposal-single-price .proposal-scope-discount {
  text-align: center;
}

/* Deliverables table */
.proposal-deliverables-table {
  width: 100%;
  border-collapse: collapse;
  margin: .5rem 0 1.5rem;
  font-size: 13px;
}
.proposal-deliverables-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6e6657;
  font-weight: 600;
  padding: .5rem .5rem;
  border-bottom: 1px solid #d8d2c4;
  text-align: left;
}
.proposal-deliverables-table td {
  padding: .45rem .5rem;
  border-bottom: 1px solid #ece8dc;
  color: #2b2722;
}

/* Case studies */
.proposal-case {
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ece8dc;
}
.proposal-case:last-child { border-bottom: none; }
.proposal-case-thumb {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
.proposal-case-title {
  font-family: var(--pico-font-family-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 0 0 .5rem;
}
.proposal-case-description {
  font-size: 14px;
  line-height: 1.6;
  color: #3a3530;
  margin: 0 0 .75rem;
}
.proposal-case-relevance {
  font-size: 13px;
  line-height: 1.55;
  color: #6e6657;
  font-style: italic;
  margin: 0 0 .5rem;
}

/* Team grid */
.proposal-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.proposal-team-member {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.proposal-team-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  /* object-position is set inline per-team-member from photo_focal_y.
     The fallback below only applies when the inline style is absent
     (legacy data with no focal value, or pre-migration rows). */
  object-position: center 25%;
  margin-bottom: .5rem;
}

/* =========================================================================
   Team photo focal-point editor (admin libraries)
   ========================================================================= */

.photo-focal-editor {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: .5rem 0 .75rem;
  padding: .65rem .75rem;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
}
.photo-focal-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--slate-ink-2);
  flex-shrink: 0;
}
.photo-focal-controls {
  flex: 1;
}
.photo-focal-slider-row {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.photo-focal-slider {
  flex: 1;
  accent-color: var(--slate-gold);
  cursor: pointer;
}
.photo-focal-hint {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pico-muted-color);
  white-space: nowrap;
}
.photo-focal-value {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-gold);
  min-width: 36px;
  text-align: right;
}
.proposal-team-name {
  font-family: var(--pico-font-family-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 0;
}
.proposal-team-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6e6657;
  margin-bottom: .35rem;
}
.proposal-team-bio {
  font-size: 13px;
  line-height: 1.55;
  color: #3a3530;
  margin: 0 0 .35rem;
}
.proposal-team-email a {
  font-size: 12px;
  color: var(--slate-gold-deep);
  text-decoration: none;
}
.proposal-team-email a:hover { text-decoration: underline; }

/* Climate / footer line */
.proposal-climate {
  text-align: center;
  font-size: 12px;
  color: #6e6657;
  font-style: italic;
  padding-top: 1.5rem;
  border-top: 1px solid #d8d2c4;
}
.proposal-climate p { margin: 0; }

/* =========================================================================
   M2 v2 — Builder UI (8-section editor, library pickers, scope panel)
   ========================================================================= */

.proposal-preview-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Collapsible config sections */
details.config-section {
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  margin: 0 0 .75rem;
  padding: 0;
}
details.config-section > summary {
  list-style: none;
  cursor: pointer;
  padding: .65rem .85rem;
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-cream);
  user-select: none;
  position: relative;
  /* Pico's global `details > summary` (further down in this file) sets
     `background: var(--pico-card-background-color)` which is a light
     cream — making the proposal-builder accordion bars look bright
     white on the dark page. Force transparent so the parent's
     slate-ink-2 background reads through. Borders also stripped to
     match the dark card aesthetic. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
details.config-section > summary::-webkit-details-marker { display: none; }
details.config-section > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .5rem;
  color: var(--slate-gold);
  opacity: .65;
  font-size: 10px;
  transition: transform .15s ease;
}
details.config-section[open] > summary::before { transform: rotate(90deg); }
details.config-section[open] {
  padding: 0 .85rem 1rem;
}
details.config-section[open] > summary {
  padding-bottom: .5rem;
  margin: 0 -.85rem;
  border-bottom: 1px solid var(--slate-line-dark);
  margin-bottom: 1rem;
}

/* Radio cards stacked vertically (for testimonial picker) */
.radio-card-stack {
  flex-direction: column;
  align-items: flex-start;
  margin: .35rem 0;
}
.radio-card-stack .radio-card-label {
  white-space: normal;
  line-height: 1.4;
}

/* Checkbox-style picker card (team, cases) */
.checkbox-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem .75rem;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  cursor: pointer;
  margin: .35rem 0;
}
.checkbox-card input { display: none; }
.checkbox-card:has(input:checked) {
  border-color: var(--slate-gold);
  background: rgba(225, 174, 101, .08);
}

.case-pick { margin-bottom: .85rem; }
.case-relevance-textarea {
  margin-top: .25rem;
  width: 100%;
  background: var(--slate-ink-3);
  color: var(--slate-cream);
  border: 1px solid var(--slate-line-dark);
  padding: .35rem .55rem;
  font-size: 12px;
  font-family: var(--pico-font-family);
  border-radius: 0;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 12px;
  color: var(--pico-muted-color);
  align-self: flex-end;
  padding-bottom: .25rem;
}

/* Scope management panel */
.proposal-scopes-panel {
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1rem .75rem;
}
.panel-title {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0 0 .25rem;
}
/* Scopes panel head — title left, "Save all" button right. */
.proposal-scopes-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}

.scope-form {
  background: #f8f3e6;                 /* matches public proposal cards */
  border: 1px solid #ece6d4;
  border-left: 4px solid transparent;  /* tier color rides here */
  padding: 1.25rem 1.5rem 1rem;
  margin: 1rem 0;
  transition: border-color .12s ease;
  color: #2d2820;
}
/* Tier color stripes — match the public tier colors */
.scope-form.scope-form-tier-green { border-left-color: #86c79f; }
.scope-form.scope-form-tier-gold  { border-left-color: var(--slate-gold-deep); }
.scope-form.scope-form-tier-black { border-left-color: var(--slate-cream); }

/* Dirty state — yellow glow on cards with unsaved changes */
.scope-form.scope-form-dirty {
  border-color: var(--slate-gold);
  box-shadow: 0 0 0 1px var(--slate-gold) inset;
}
.scope-form.scope-form-dirty::after {
  content: "Unsaved changes";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-gold);
  margin-top: .35rem;
}

/* Insert-template button — small ghost button used next to templated
   textareas (exec summary, etc.). Discreet, doesn't shout. */
.insert-template-btn {
  font-size: 11px !important;
  padding: .35rem .6rem !important;
  margin-top: .35rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}
.insert-template-btn:hover { opacity: 1; }
.scope-form-head {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: .5rem;
}
/* Reorder up/down buttons — small, stacked vertically, left of the
   scope name. Disabled state when scope is at the top or bottom. */
.scope-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scope-reorder-btn {
  width: 22px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  background: #fffbef;
  color: #6e6657;
  border: 1px solid #d8d0bd;
  border-radius: 2px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.scope-reorder-btn:hover:not(:disabled) {
  color: #2d2820;
  border-color: var(--slate-gold-deep);
  background: #f6ecd0;
}
.scope-reorder-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.scope-name-input {
  flex: 1;
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #fffbef !important;
  color: #2d2820 !important;
  border: 1px solid #d8d0bd !important;
  padding: .35rem .55rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
}
.scope-recommended {
  font-size: 11px;
  color: #6e6657;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.scope-form textarea {
  width: 100%;
  background: #fffbef !important;
  color: #2d2820 !important;
  border: 1px solid #d8d0bd !important;
  border-radius: 0 !important;
  padding: .55rem .7rem !important;
  font-size: 13px !important;
  font-family: var(--pico-font-family) !important;
  margin-bottom: .75rem !important;
  box-shadow: none !important;
}
.scope-pricing-row, .scope-discount-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
  margin-bottom: .75rem;
}
.scope-pricing-row label, .scope-discount-row label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6e6657;                 /* readable on cream card */
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
/* All form controls inside a scope card share the cream/paper look,
   matching the public proposal aesthetic. Before this, the scope cards
   were dark slate which clashed with the rest of the cream-themed
   proposal builder page. Now: cream card + paper-white form fields
   + readable dark text. !important wins over Pico defaults. */
.scope-form select,
.scope-form input[type="text"],
.scope-form input[type="number"],
.scope-form input[type="date"],
.scope-form input[type="email"] {
  background: #fffbef !important;
  color: #2d2820 !important;
  border: 1px solid #d8d0bd !important;
  border-radius: 0 !important;
  padding: .45rem .55rem !important;
  font-size: 13px !important;
  font-family: var(--pico-font-family) !important;
  box-shadow: none !important;
  margin: 0;
}
.scope-form select:focus,
.scope-form input:focus,
.scope-form textarea:focus {
  border-color: var(--slate-gold-deep) !important;
  outline: none !important;
}
/* Multiplier row matches the pricing/discount rows visually. */
.scope-multiplier-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: .75rem;
  margin-bottom: .75rem;
}
.scope-multiplier-row label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6e6657;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.scope-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.scope-delete {
  color: #c47878;
  border-color: transparent !important;
}
.scope-delete:hover {
  background: rgba(196, 120, 120, .1);
}
.scope-add-form {
  margin: .75rem 0 0;
}

/* Deliverables editor */
.deliverables-editor {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .5rem;
}
/* Deliverables editor — now that the builder is full-width, the columns
   get their proper sizing instead of being pinched. Description gets the
   most room (1fr), short metadata columns 90-100px each. Last two columns
   are the action buttons: duplicate (⎘) and remove (×). */
.deliv-row {
  display: grid;
  grid-template-columns: 1fr 100px 90px 90px 130px 28px 28px;
  gap: .5rem;
  align-items: center;
  margin-bottom: .35rem;
}
.deliv-row input {
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .45rem .55rem;
  font-size: 13px;
  font-family: var(--pico-font-family);
  border-radius: 0;
}

/* Row-action button (duplicate, etc.) — same footprint as remove (×) but
   styled less alarmingly. Uses a cream tint instead of red on hover. */
.addons-row-action {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--pico-muted-color);
  font-size: 14px;
  line-height: 1;
  padding: .35rem 0;
  cursor: pointer;
  border-radius: 0;
  transition: color .12s ease, border-color .12s ease;
}
.addons-row-action:hover {
  color: var(--slate-cream);
  border-color: var(--slate-cream);
}

/* Admin libraries page */
.admin-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--slate-line-dark);
  padding-bottom: .5rem;
  margin-bottom: 2rem;
  font-size: 13px;
}
.admin-tabs a {
  color: var(--pico-muted-color);
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 2px solid transparent;
}
.admin-tabs a:hover { color: var(--slate-cream); }
.admin-section { margin-bottom: 3rem; }
.admin-section-title {
  font-family: var(--pico-font-family-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.library-item {
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.library-item h4 {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-gold);
  margin: 0 0 .75rem;
}
.library-item-new {
  border-style: dashed;
}
.library-row {
  display: flex;
  gap: .75rem;
  align-items: flex-end;
  margin-bottom: .25rem;
  flex-wrap: wrap;
}
.library-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .75rem;
}
/* Defeat Pico's `button { width: 100% }` so Save stays inline-sized.
   Matches the override on .company-edit-actions. */
.library-item-actions .slate-btn { width: auto; min-width: 7rem; }

/* ─── Admin home — tile grid for the /admin landing page.
   Each tile is a clickable card linking to a sub-page or anchor. Three
   columns on wide screens, two on tablets, one on mobile. */
.admin-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0 0 3rem;
}
@media (max-width: 1000px) { .admin-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .admin-tile-grid { grid-template-columns: 1fr; } }

.admin-tile {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.1rem 1.2rem 1.25rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--duration-fast) var(--ease-soft),
    background var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-soft);
}
.admin-tile:hover {
  border-color: var(--slate-gold);
  background: rgba(225, 174, 101, .03);
}
.admin-tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .65rem;
}
.admin-tile-title {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
}
.admin-tile:hover .admin-tile-title {
  color: var(--slate-gold);
}
.admin-tile-count {
  font-family: var(--pico-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border: 1px solid var(--slate-line-dark);
  border-radius: 999px;
  background: rgba(245, 239, 227, .03);
}
.admin-tile-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}
.admin-tile-maintenance {
  /* Subtle differentiation for non-content tiles — slightly different
     border so it reads as a tool, not a content library. */
  border-style: dashed;
}
.admin-tile-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dashboard tile grid — always 3 across on wide screens, 2 on
   tablets, 1 on phones. The 5 tiles flow as 3 + 2, which reads as
   intentionally weighted rather than a sparse fourth column. */
.dashboard-tile-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px) { .dashboard-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .dashboard-tile-grid { grid-template-columns: 1fr; } }
.dashboard-future-hint {
  margin: 3rem 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
  font-style: italic;
  opacity: .7;
}

/* ─── Feedback ────────────────────────────────────────────────────
   Nav link + submit form + admin triage cards. */
.slate-nav-feedback {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  padding: 4px 10px;
  margin-right: .9rem;
  border: 1px solid var(--slate-line-dark);
  border-radius: 999px;
  transition: color var(--duration-fast) var(--ease-soft),
              border-color var(--duration-fast) var(--ease-soft);
}
.slate-nav-feedback:hover {
  color: var(--slate-cream);
  border-color: var(--slate-gold);
}

/* Top-nav "+ Log" button — primary log-time trigger, surfaced on every
   authenticated page. Gold pill so it carries weight against the muted
   feedback/email links. line-height + vertical-align baseline match the
   sibling Feedback pill so the row sits flat. */
.slate-nav-log-btn {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-ink-1);
  background: var(--slate-gold);
  border: 1px solid var(--slate-gold);
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0 .9rem 0 0;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-soft);
}
.slate-nav-log-btn:hover { opacity: .8; }

/* Per-row clock icon — board rows + projects-list rows. Tight, unobtrusive,
   gold-tinted on hover so it reads as an action and not chrome. */
.post-log-btn {
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color var(--duration-fast) var(--ease-soft);
}
.post-log-btn:hover { color: var(--slate-gold, var(--slate-cream)); }
.post-th-log { width: 112px; }
.post-cell-log {
  width: 112px;
  padding: 0 4px;
  white-space: nowrap;
  /* Force a flex row so vimeo + eye + duplicate + clock sit on the same
     baseline at the same height regardless of their wrappers (form,
     button, anchor). justify-end pins the cluster to the right edge. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  height: 100%;
}
.post-row-vimeo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--color-muted);
  text-decoration: none;
  line-height: 0;
  transition: color var(--duration-fast) var(--ease-soft);
}
.post-row-vimeo-btn:hover { color: var(--slate-gold, var(--slate-cream)); }
.post-row-duplicate-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.post-row-duplicate-btn,
.post-row-eye-btn {
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: color var(--duration-fast) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft);
}
.post-row-duplicate-btn:hover,
.post-row-eye-btn:hover { color: var(--slate-gold, var(--slate-cream)); }
.post-row-eye-btn.is-hidden { color: var(--slate-gold); opacity: .85; }
.post-row-eye-btn.is-hidden:hover { color: var(--slate-cream); opacity: 1; }

/* Project Doc panel action — secondary button placed next to the panel
   title (Logged Hours head). Aligns the panel head to a row. */
.project-doc-panel-head-with-action {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
}
.project-doc-panel-action {
  margin-left: auto;
  font-size: 12px;
  padding: 4px 10px;
}

/* Inline editor for projects.budget_hours — sits inside the Logged Hours
   panel hint. Click the toggle, type a new number, hit Save. */
.project-doc-budget-hours-wrap {
  position: relative;
  display: inline-block;
}
.project-doc-budget-hours-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--slate-line-dark);
}
.project-doc-budget-hours-toggle:hover {
  color: var(--slate-cream);
  text-decoration-color: var(--slate-gold);
}
.project-doc-budget-hours-popover {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 10;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  /* Reset inherited typography from .project-doc-panel-hint context */
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.project-doc-budget-hours-form {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
/* Force a fixed height so Pico's vertical sizing can't blow it up,
   force caret + text to a visible color, kill the spin buttons. */
.project-doc-budget-hours-input,
.project-doc-budget-hours-input[type="number"] {
  background: var(--slate-ink-1) !important;
  color: var(--slate-cream) !important;
  -webkit-text-fill-color: var(--slate-cream) !important;
  caret-color: var(--slate-gold) !important;
  border: 1px solid var(--slate-line-dark) !important;
  padding: 0 .65rem !important;
  font-size: 15px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  width: 100px !important;
  height: 36px !important;
  line-height: 36px !important;
  border-radius: 0 !important;
  outline: none !important;
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-block !important;
}
.project-doc-budget-hours-input:focus { border-color: var(--slate-gold) !important; }
.project-doc-budget-hours-input::-webkit-inner-spin-button,
.project-doc-budget-hours-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  display: none;
  margin: 0;
}
.project-doc-budget-hours-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
}
.project-doc-budget-hours-save {
  font-size: 12px;
  padding: 8px 14px;
  height: 36px;
  line-height: 1;
}

/* /time report page — org-wide canvas replacement. Two big sections
   (Team Capacity, Project Health), each with a head + content block. */
.time-report-page { padding: 2rem 0 4rem; }
.time-section { margin: 3rem 0 0; }
.time-section:first-of-type { margin-top: 1.5rem; }
.time-section-head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.time-section { position: relative; }
.time-section-title {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
}
.time-section-hint {
  font-size: 12px;
  color: var(--color-muted);
}
.time-section-cta {
  position: absolute;
  top: -.4rem;
  right: 0;
  padding: .35rem .8rem;
  font-size: 12px;
  letter-spacing: .08em;
}

/* Team capacity hero — mirrors /development's hero shape: no card, no
   border, just vertical-stacked typography. Eyebrow → huge number →
   meta line → slim progress bar below. */
.time-hero {
  margin-bottom: 2rem;
}
.time-hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pico-muted-color, var(--color-muted));
  margin-bottom: .25rem;
}
.time-hero-amount {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: .9;
  color: var(--slate-cream);
  font-variant-numeric: tabular-nums;
}
.time-hero-unit {
  font-size: .45em;
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0;
  margin-left: .15rem;
}
.time-hero-meta {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 16px;
  color: var(--color-muted);
  margin-top: .75rem;
}
.time-hero-meta-sep { opacity: .5; }
.time-hero-verdict {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate-cream);
}
.time-hero-verdict-over { color: #6fd06f; }
.time-hero-bar {
  position: relative;
  height: 4px;
  background: var(--slate-ink-3, var(--slate-ink-1));
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1rem;
}
.time-hero-bar-fill {
  height: 100%;
  background: var(--slate-gold);
  transition: width var(--duration-fast) var(--ease-soft);
}
.time-hero.is-celebrating .time-hero-bar-fill {
  background: linear-gradient(90deg, var(--slate-gold), #ffd58a);
}
.time-hero-no-target { color: var(--color-muted); margin: 1rem 0 0; }
.time-hero-no-target a { color: var(--slate-gold); }
.time-hero-source-hint {
  color: var(--color-muted);
  font-size: 12px;
  margin: .35rem 0 0;
  opacity: .8;
}
.time-hero-source-hint a {
  color: var(--slate-gold);
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
:root[data-theme] .time-hero-source-hint { color: var(--paper-ink-mute); }
:root[data-theme] .time-hero-source-hint a { color: var(--paper-gold); }

/* ── Theme-aware overrides for /time ─────────────────────────────────
   The base rules above use --slate-* tokens that are dark-only. These
   overrides remap to --paper-* tokens which flip between paper and
   monitor, so cards and big numbers stay readable on cream too. */
:root[data-theme] .time-hero-eyebrow { color: var(--paper-ink-mute); }
:root[data-theme] .time-hero-amount  { color: var(--paper-ink); }
:root[data-theme] .time-hero-unit    { color: var(--paper-ink-mute); }
:root[data-theme] .time-hero-meta    { color: var(--paper-ink-soft); }
:root[data-theme] .time-hero-verdict { color: var(--paper-ink); }
:root[data-theme] .time-hero-verdict-over { color: var(--paper-gold); }
:root[data-theme] .time-hero-bar {
  background: var(--paper-bg-soft);
  border-color: var(--paper-rule);
}
:root[data-theme] .time-hero-bar-fill { background: var(--paper-gold); }
:root[data-theme] .time-hero.is-celebrating .time-hero-bar-fill {
  background: var(--paper-gold);
}
:root[data-theme] .time-hero-no-target { color: var(--paper-ink-mute); }
:root[data-theme] .time-hero-no-target a { color: var(--paper-gold); }

:root[data-theme] .time-history-stat,
:root[data-theme] .time-mytime-stat {
  background: var(--paper-bg-soft);
  border-color: var(--paper-rule);
}
:root[data-theme] .time-history-label,
:root[data-theme] .time-mytime-label  { color: var(--paper-ink-mute); }
:root[data-theme] .time-history-value,
:root[data-theme] .time-mytime-value  { color: var(--paper-ink); }
:root[data-theme] .time-history-pct   { color: var(--paper-ink-mute); }
:root[data-theme] .time-mytime-value.is-over { color: var(--paper-gold); }

:root[data-theme] .time-section-title { color: var(--paper-ink); }
:root[data-theme] .time-section-hint  { color: var(--paper-ink-mute); }
:root[data-theme] .time-section-head  { border-bottom-color: var(--paper-rule); }

:root[data-theme] .time-capacity-stat-sub-hint a { color: var(--paper-gold); }
:root[data-theme] .time-capacity-unmapped-hint   { color: var(--paper-ink-mute); }
:root[data-theme] .time-capacity-unmapped-hint a { color: var(--paper-gold); }

/* Project Health table — band colors keep their meaning across themes,
   but the row text + chevron need to remap. */
:root[data-theme] .slate-list-table tbody td.time-cell-client { color: var(--paper-gold) !important; }
:root[data-theme] .time-pct-ok     { color: var(--paper-ink); }
:root[data-theme] .time-pct-warn   { color: var(--paper-gold); }
:root[data-theme] .time-expand-toggle { color: var(--paper-ink-mute); }
:root[data-theme] .time-project-row:hover .time-expand-toggle { color: var(--paper-ink); }
:root[data-theme] .time-progress-bar {
  background: var(--paper-bg-soft);
  border-color: var(--paper-rule);
}
:root[data-theme] .time-progress-bar-ok .time-progress-bar-fill { background: var(--paper-ink); }

/* Expand-row stage strip + breakdown */
:root[data-theme] .time-stage-label,
:root[data-theme] .time-breakdown-label    { color: var(--paper-ink-mute); }
:root[data-theme] .time-stage-actual,
:root[data-theme] .time-breakdown-name     { color: var(--paper-ink); }
:root[data-theme] .time-stage-budget,
:root[data-theme] .time-breakdown-hours    { color: var(--paper-ink-mute); }
:root[data-theme] .time-stage-bar          {
  background: var(--paper-bg-soft);
  border-color: var(--paper-rule);
}
:root[data-theme] .time-stage-bar-ok .time-stage-bar-fill { background: var(--paper-ink); }

:root[data-theme] .time-dormant-summary { color: var(--paper-ink-mute); }
:root[data-theme] .time-dormant-summary:hover { color: var(--paper-ink); }
:root[data-theme] .time-dormant { border-top-color: var(--paper-rule); }

/* /time/users/:id surfaces — list table + project mix bar inherit dark-only
   tokens that render unreadably on cream paper. Remap to paper tokens. */
:root[data-theme] .slate-list-table thead th { border-bottom-color: var(--paper-rule); color: var(--paper-ink-mute); }
:root[data-theme] .slate-list-table tbody td { border-bottom-color: var(--paper-rule); color: var(--paper-ink); }
:root[data-theme] .slate-list-table tbody tr:hover { background: rgba(176, 138, 71, .06); }
:root[data-theme] .slate-list-link { color: var(--paper-ink); }
:root[data-theme] .slate-list-link:hover { color: var(--paper-gold); }
:root[data-theme] .slate-list-muted { color: var(--paper-ink-mute); }
:root[data-theme] .time-mix-bar {
  background: var(--paper-bg-soft);
  border-color: var(--paper-rule);
}
:root[data-theme] .time-mix-bar-fill { background: var(--paper-gold); }
:root[data-theme] .time-mix-pct { color: var(--paper-ink-mute); }

/* Project Doc mini-hero — same shape as /time's hero but scoped to one
   project. Vertical-stacked typography (eyebrow → big number → meta →
   bar) then a 4-tile stage strip beneath. */
.project-doc-hours-hero {
  margin: 0 0 2.5rem;
}
.project-doc-hours-hero .time-hero-amount {
  font-size: clamp(48px, 7vw, 96px);
  color: var(--paper-ink);  /* match the project title — the creamier tone */
}
.project-doc-hours-hero-stages {
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding-top: 1.25rem;
  padding-bottom: 0;
  border-bottom: 0;
  border-top: 1px solid var(--slate-line-dark);
}
:root[data-theme] .project-doc-hours-hero-stages { border-top-color: var(--paper-rule); }

/* History strip — last week, week before, 4-week average. */
.time-history-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  .time-history-grid { grid-template-columns: 1fr; }
}
.time-history-stat {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.25rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
}
.time-history-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.time-history-value {
  font-family: var(--pico-font-family-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--slate-cream);
}
.time-history-pct {
  font-size: 12px;
  color: var(--color-muted);
}

/* My Time — personal scoreboard + recent entries list. */
.time-mytime-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  .time-mytime-grid { grid-template-columns: repeat(2, 1fr); }
}
.time-mytime-stat {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1.1rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
}
.time-mytime-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.time-mytime-value {
  font-family: var(--pico-font-family-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--slate-cream);
}
.time-mytime-value.is-over { color: var(--slate-gold); }
.time-mytime-recent { margin-top: .5rem; }
/* Per-row edit + delete buttons. Tucked into a narrow right-edge cell
   so they don't reflow the data columns. Edit opens the log modal in
   edit mode; delete is a tiny × with a confirm. */
.time-recent-actions-head { width: 80px; }
.time-recent-actions {
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
}
.time-recent-edit {
  background: transparent;
  border: 0;
  padding: 0;
  margin-right: .65rem;
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--pico-font-family-monospace);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px dotted var(--color-muted);
  line-height: 1.2;
}
.time-recent-edit:hover {
  color: var(--slate-gold);
  border-bottom-color: var(--slate-gold);
}
.time-recent-delete-form { display: inline; margin: 0; padding: 0; }
.time-recent-delete {
  background: transparent;
  border: 0;
  padding: 0 .25rem;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: .5;
  transition: opacity .15s, color .15s;
}
.time-recent-delete:hover {
  color: #d96860;
  opacity: 1;
}
:root[data-theme] .time-recent-edit { color: var(--paper-ink-mute); border-bottom-color: var(--paper-ink-mute); }
:root[data-theme] .time-recent-edit:hover { color: var(--paper-gold); border-bottom-color: var(--paper-gold); }
:root[data-theme] .time-recent-delete { color: var(--paper-ink-mute); }
:root[data-theme="paper"] .time-recent-delete:hover { color: var(--paper-red); }

/* Pico applies background + border + padding to details > summary
   globally. We need to win that cascade with our own selector AND
   neutralize the native marker on both webkit and standard specs. */
details.time-mytime-recent > summary.time-mytime-recent-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  outline: none;
}
details.time-mytime-recent > summary.time-mytime-recent-summary::-webkit-details-marker { display: none; }
details.time-mytime-recent > summary.time-mytime-recent-summary::marker { content: ''; }
details.time-mytime-recent > summary.time-mytime-recent-summary::before {
  content: '▸';
  display: inline-block;
  width: .8em;
  transition: transform var(--duration-fast) var(--ease-soft);
}
details.time-mytime-recent[open] > summary.time-mytime-recent-summary::before { transform: rotate(90deg); }
details.time-mytime-recent > summary.time-mytime-recent-summary:hover { color: var(--slate-cream) !important; }
.time-mytime-recent-hint { font-weight: 400; opacity: .65; text-transform: none; letter-spacing: 0; }

/* Project mix bar on /time/users/:id — slim horizontal share indicator
   plus a tabular pct label next to it. */
.time-mix-bar {
  display: inline-block;
  width: 140px;
  height: 5px;
  background: var(--slate-ink-3, var(--slate-ink-1));
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: .5rem;
}
.time-mix-bar-fill {
  display: block;
  height: 100%;
  background: var(--slate-gold);
  transition: width var(--duration-fast) var(--ease-soft);
}
.time-mix-pct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  vertical-align: middle;
}

/* Legacy stat panel — kept for compatibility but the new hero owns
   the visual now. Empty rule so any leftover references don't 404. */
.time-capacity-hero { display: none; }
@media (max-width: 600px) {
  .time-capacity-hero { grid-template-columns: 1fr; }
}
.time-capacity-stat {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.time-capacity-stat-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.time-capacity-stat-value {
  font-family: var(--pico-font-family-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--slate-cream);
}
.time-capacity-stat-unit {
  font-size: 22px;
  color: var(--color-muted);
  margin-left: .15rem;
}
.time-capacity-stat-sub {
  font-size: 13px;
  color: var(--color-muted);
}
.time-capacity-stat-sub-hint a { color: var(--slate-gold); }
.time-capacity-unmapped-hint {
  display: block;
  font-size: 11px;
  color: var(--color-muted);
  margin-top: .2rem;
}
.time-capacity-unmapped-hint a { color: var(--slate-gold); }

/* % chips — color-graded by band. Same shape across capacity + projects. */
.time-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.time-pct-ok     { color: var(--slate-cream); }
.time-pct-warn   { color: var(--slate-gold); }
.time-pct-over   { color: #ff7f3f; }
.time-pct-cooked { color: #ff4d4d; }
.time-pct-unbudgeted { color: var(--color-muted); }

/* Project Health — per-company block with its own table. */
.time-company-block { margin: 2rem 0; }
.time-company-block:first-of-type { margin-top: 0; }
.time-company-name {
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0 0 .75rem;
}
.time-projects-table { font-size: 14px; }
.time-progress-cell {
  min-width: 200px;
}
.time-progress-inner {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.time-progress-bar {
  display: inline-block;
  position: relative;
  width: 140px;
  height: 6px;
  background: var(--slate-ink-3, var(--slate-ink-1));
  border: 1px solid var(--slate-line-dark);
  border-radius: 3px;
  overflow: hidden;
}
.time-progress-bar-fill {
  display: block;
  height: 100%;
  background: var(--slate-cream);
  transition: width var(--duration-fast) var(--ease-soft);
}
.time-progress-bar-ok     .time-progress-bar-fill { background: var(--slate-cream); }
.time-progress-bar-warn   .time-progress-bar-fill { background: var(--slate-gold); }
.time-progress-bar-over   .time-progress-bar-fill { background: #ff7f3f; }
.time-progress-bar-cooked .time-progress-bar-fill { background: #ff4d4d; }
.time-progress-pct { font-size: 13px; }
.slate-list-muted-italic { font-style: italic; }
/* Client + Project columns — bold for emphasis, client in gold to anchor
   the row's identity at a glance without the harshness of uppercase
   display type. !important on color because the generic .slate-list-table
   tbody td rule was beating earlier attempts and browser caches were
   muddying which version was actually live. */
.slate-list-table tbody td.time-cell-client {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-gold) !important;
}
/* Project link — softer than the client. Cream by default (inherited),
   regular weight so the client's gold reads as the leading anchor. */
.time-projects-table tbody .slate-list-link {
  font-weight: 500;
}

/* Project Health table — vertical-align middle on every cell so the
   progress bar + chevron + text all sit on the row centerline. */
.time-projects-table td,
.time-projects-table th {
  vertical-align: middle;
}

/* Dormant projects (zero hours) — collapsed at the bottom of Project
   Health. Same disclosure pattern as the inactive-projects details on
   /projects (consistency). */
.time-dormant {
  margin-top: 2rem;
  border-top: 1px solid var(--slate-line-dark);
  padding-top: 1.5rem;
}
.time-dormant-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.time-dormant-summary::-webkit-details-marker { display: none; }
.time-dormant-summary::before {
  content: '▸';
  display: inline-block;
  width: .8em;
  transition: transform var(--duration-fast) var(--ease-soft);
}
.time-dormant[open] .time-dormant-summary::before { transform: rotate(90deg); }
.time-dormant-summary:hover { color: var(--slate-cream); }
.time-dormant-label { letter-spacing: .14em; }

/* Expand row on /time Project Health — click the chevron to reveal the
   per-stage and per-person breakdown for that project. Same chevron
   pattern as the Status Board's post-doc-row. */
.time-th-expand,
.time-expand-cell { width: 28px; padding: 0 6px; }
/* Row-level click target — whole tr toggles the expand. cursor:pointer
   signals it; the existing tr:hover background gives the affordance. */
.time-project-row { cursor: pointer; }

.time-expand-toggle {
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
  transition: color var(--duration-fast) var(--ease-soft),
              transform var(--duration-fast) var(--ease-soft);
}
.time-project-row:hover .time-expand-toggle { color: var(--slate-cream); }
.time-expand-toggle svg { display: block; }
.time-expand-toggle:hover { color: var(--slate-cream); }
.time-expand-toggle.is-open { transform: rotate(90deg); color: var(--slate-cream); }
.time-project-expand {
  background: rgba(245, 239, 227, .02);
}
.time-project-expand-cell {
  padding: 1.25rem 1.5rem;
}

/* Team Capacity tabs — flat underline-style toggle between By Person and
   By Project panes. Same look as /development's view tabs. */
.time-capacity-tabs {
  display: flex;
  gap: 1.25rem;
  margin: 0 0 .85rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.time-capacity-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .5rem 0;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease-soft),
              border-color var(--duration-fast) var(--ease-soft);
}
.time-capacity-tab:hover { color: var(--slate-cream); }
.time-capacity-tab.is-active {
  color: var(--slate-gold);
  border-bottom-color: var(--slate-gold);
}
:root[data-theme] .time-capacity-tabs { border-bottom-color: var(--paper-rule); }
:root[data-theme] .time-capacity-tab { color: var(--paper-ink-mute); }
:root[data-theme] .time-capacity-tab:hover { color: var(--paper-ink); }
:root[data-theme] .time-capacity-tab.is-active {
  color: var(--paper-gold);
  border-bottom-color: var(--paper-gold);
}

/* Team Capacity row — same expand pattern as Project Health rows above.
   Click target is the full tr when there's a breakdown to show. */
.time-capacity-row.is-expandable { cursor: pointer; }
.time-capacity-row.is-expandable:hover .time-expand-toggle { color: var(--slate-cream); }
.time-capacity-expand {
  background: rgba(245, 239, 227, .02);
}
.time-capacity-expand-cell {
  padding: 1rem 1.5rem 1.25rem 2.5rem;
}
.time-capacity-expand-head {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: .75rem;
}
.time-capacity-project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.time-capacity-project {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 70px 48px;
  align-items: center;
  gap: .85rem;
  font-size: 13px;
}
.time-capacity-project-bar {
  position: relative;
  height: 5px;
  background: var(--slate-ink-3, var(--slate-ink-1));
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  overflow: hidden;
}
.time-capacity-project-bar-fill {
  display: block;
  height: 100%;
  background: var(--slate-gold);
  transition: width var(--duration-fast) var(--ease-soft);
}
.time-capacity-project-label { color: var(--slate-cream); min-width: 0; }
.time-capacity-project-hours {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--slate-cream);
  font-weight: 600;
}
.time-capacity-project-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  font-size: 12px;
}
:root[data-theme] .time-capacity-expand-head { color: var(--paper-ink-mute); }
:root[data-theme] .time-capacity-project-bar {
  background: var(--paper-bg-soft);
  border-color: var(--paper-rule);
}
:root[data-theme] .time-capacity-project-bar-fill { background: var(--paper-gold); }
:root[data-theme] .time-capacity-project-label { color: var(--paper-ink); }
:root[data-theme] .time-capacity-project-hours { color: var(--paper-ink); }
:root[data-theme] .time-capacity-project-pct { color: var(--paper-ink-mute); }
:root[data-theme] .time-capacity-row.is-expandable:hover .time-expand-toggle { color: var(--paper-ink); }
:root[data-theme] .time-capacity-expand { background: rgba(184, 133, 47, .03); }
:root[data-theme="monitor"] .time-capacity-expand { background: rgba(245, 239, 227, .02); }
/* Pace block — ported from the Slack canvas. Sits at the top of the
   expand row: monthly progress bar (retainers only), then a single
   slim line with YTD / budget / on-pace / remaining / period. */
.time-pace-block {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.time-pace-monthly {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .65rem;
}
.time-pace-monthly-bar {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 8px;
  background: var(--slate-ink-3, var(--slate-ink-1));
  border: 1px solid var(--slate-line-dark);
  border-radius: 4px;
  overflow: hidden;
}
.time-pace-monthly-fill {
  display: block;
  height: 100%;
  background: var(--slate-gold);
  transition: width var(--duration-fast) var(--ease-soft);
}
.time-pace-monthly-label {
  font-size: 13px;
  color: var(--slate-cream);
}
.time-pace-monthly-label strong {
  color: var(--slate-cream);
  font-weight: 700;
}
.time-pace-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: 13px;
  color: var(--slate-cream);
}
.time-pace-dot { color: var(--color-muted); }
.time-pace-period {
  font-style: italic;
  color: var(--color-muted);
}
.time-pace-status { font-weight: 600; }
.time-pace-status-on     { color: #6fd06f; }
.time-pace-status-ahead  { color: #ff7f3f; }
.time-pace-status-behind { color: var(--slate-gold); }

/* Stage strip — 4 fixed columns across the top of the expand row,
   matching production flow: Pre → Prod → Post → Other. Empty stages
   render dim so the layout stays stable but the eye focuses on used
   stages. */
.time-breakdown-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
@media (max-width: 600px) {
  .time-breakdown-stages { grid-template-columns: repeat(2, 1fr); }
}
.time-stage-stat {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.time-stage-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.time-stage-hours {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  font-family: var(--pico-font-family-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--slate-cream);
  line-height: 1;
}
.time-stage-actual { font-variant-numeric: tabular-nums; }
.time-stage-budget {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0;
}
.time-stage-stat.is-empty .time-stage-actual { color: var(--color-muted); opacity: .5; }

/* Per-stage progress bar — slim, sits below the hours number. Same band
   palette as the row-level progress bar so the page reads consistently. */
.time-stage-bar {
  height: 4px;
  background: var(--slate-ink-3, var(--slate-ink-1));
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .15rem;
}
.time-stage-bar-fill {
  display: block;
  height: 100%;
  background: var(--slate-cream);
  transition: width var(--duration-fast) var(--ease-soft);
}
.time-stage-bar-ok     .time-stage-bar-fill { background: var(--slate-cream); }
.time-stage-bar-warn   .time-stage-bar-fill { background: var(--slate-gold); }
.time-stage-bar-over   .time-stage-bar-fill { background: #ff7f3f; }
.time-stage-bar-cooked .time-stage-bar-fill { background: #ff4d4d; }
.time-stage-pct {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-top: .1rem;
}

/* Project edit form — per-stage budget grid. 4 rows on wide, single
   column on narrow. */
.project-form-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem 1.5rem;
  margin-top: .5rem;
}
@media (max-width: 600px) {
  .project-form-stage-grid { grid-template-columns: 1fr; }
}
.project-form-stage-row {
  display: grid;
  grid-template-columns: 1fr auto 1rem;
  align-items: center;
  gap: .5rem;
}
.project-form-stage-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.project-form-stage-input {
  width: 90px;
  margin: 0;
  text-align: right;
}
.project-form-stage-unit {
  font-size: 12px;
  color: var(--color-muted);
}

/* People block under the stages — two-column list when wide, single
   when narrow. Sorted desc by hours in the route. */
.time-breakdown-people {
  display: block;
}
.time-breakdown-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 .65rem;
}
.time-breakdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .4rem 2rem;
}
@media (max-width: 600px) {
  .time-breakdown-list { grid-template-columns: 1fr; }
}
.time-breakdown-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 13px;
}
.time-breakdown-name { color: var(--slate-cream); }
.time-breakdown-hours {
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Dashboard "Your Work" header — group the Log + Status-Board actions on
   the right so they share the column-link visual weight. inline-flex on
   the span + explicit inline-block + 0 width:auto on the button so Pico's
   default button styling can't force a stack. */
.paper-col-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  white-space: nowrap;
}
.paper-col-actions > * {
  display: inline-block;
  width: auto;
}
.paper-col-action-log {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* Submit form — two-column kind+title row, full-width body. */
.feedback-form {
  margin: 0 0 3rem;
  padding: 1.5rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
}
.feedback-form-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
@media (max-width: 540px) { .feedback-form-row { grid-template-columns: 1fr; } }
.feedback-form-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
}
.feedback-form-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.feedback-form-help {
  font-family: var(--pico-font-family);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
  margin-left: .35rem;
}
.feedback-form-body { min-height: 120px; resize: vertical; line-height: 1.5; }
.feedback-form-actions { margin-top: 1.25rem; display: flex; gap: .65rem; }

/* History pane below the form — quiet table of what this user filed. */
.feedback-history { margin: 0 0 3rem; }
.feedback-status {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.feedback-status-new        { color: var(--slate-gold); }
.feedback-status-in_review  { color: #7faec9; }
.feedback-status-planned    { color: var(--slate-cream); }
.feedback-status-shipped    { color: var(--color-success); }
.feedback-status-dismissed  { color: var(--color-muted); opacity: .7; }

/* Admin triage cards — one card per item with inline status+note form. */
.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.feedback-card {
  padding: 1.25rem 1.4rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
}
.feedback-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .75rem;
}
.feedback-card-meta {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  flex-wrap: wrap;
  min-width: 0;
}
.feedback-card-kind {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  flex-shrink: 0;
}
.feedback-card-kind-bug     { color: var(--color-danger); }
.feedback-card-kind-idea    { color: var(--slate-gold); }
.feedback-card-kind-praise  { color: var(--color-success); }
.feedback-card-kind-other   { color: var(--color-muted); }
.feedback-card-title {
  font-family: var(--pico-font-family-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
}
.feedback-card-who {
  font-size: 11px;
  color: var(--color-muted);
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}
.feedback-card-page {
  color: var(--color-muted);
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
.feedback-card-page:hover { color: var(--slate-gold); }
.feedback-card-body {
  margin: 0 0 1rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate-cream);
  white-space: pre-wrap;
}
.feedback-card-triage {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: .85rem;
  align-items: end;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--slate-line-dark);
}
@media (max-width: 700px) {
  .feedback-card-triage { grid-template-columns: 1fr; }
}
.feedback-triage-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0;
}
.feedback-triage-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
   Feedback v2 — compact compose form (title + kind one row, details optional),
   expandable history rows with vote buttons + critical flag.
   --------------------------------------------------------------------------- */

.feedback-form-v2 {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin: 0 0 2rem;
  padding: 1rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
}

/* Title (grows) + Kind (fixed) on one row. */
.feedback-form-top {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: .55rem;
  align-items: center;
}
@media (max-width: 540px) {
  .feedback-form-top { grid-template-columns: 1fr; }
}

/* Override the slate-form-input default block layout — these need to
   sit in the grid with consistent height. */
.feedback-form-title-input,
.feedback-form-kind-select {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 0 .7rem !important;
  font-size: 14px;
  line-height: 1.2;
}
.feedback-form-kind-select {
  /* native select arrow leaks Pico blue; reuse the slate chevron */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238a8377' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 1.8rem !important;
  cursor: pointer;
}

.feedback-form-body-input {
  min-height: 70px;
  resize: vertical;
  line-height: 1.5;
}

/* Footer row — attribution left, Submit right. Submit is auto-width
   (Pico tries to make submit buttons 100% wide). */
.feedback-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .25rem;
}
.feedback-form-attribution {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
}
.feedback-form-attribution strong {
  color: var(--slate-cream);
  font-weight: 600;
}
.feedback-form-footer .slate-btn {
  width: auto !important;
  min-width: 7rem;
}

/* History — list of expandable rows. */
.feedback-history-hint {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 1rem;
}
.feedback-list-rows {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* Done section — collapsed accordion under the open queue. Quiet header
   with a caret; expands to reveal a faded stack of shipped/dismissed
   items so the open list isn't drowned by history. */
.feedback-done-section {
  margin: 2rem 0 0;
  border-top: 1px solid var(--slate-line-dark);
  padding-top: 1.25rem;
}
.feedback-done-section-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .25rem 0;
  user-select: none;
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.feedback-done-section-summary::-webkit-details-marker { display: none; }
.feedback-done-section-summary::before {
  content: '▸';
  color: var(--slate-gold);
  opacity: .65;
  font-size: 10px;
  transition: transform .15s ease;
}
.feedback-done-section[open] > .feedback-done-section-summary::before {
  transform: rotate(90deg);
}
.feedback-done-section-label { color: inherit; }
.feedback-done-section-hint {
  font-family: var(--pico-font-family);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pico-muted-color);
  opacity: .65;
  margin-left: .35rem;
}
.feedback-done-section[open] > .feedback-done-section-summary .feedback-done-section-hint { display: none; }
.feedback-list-rows-done {
  margin-top: 1rem;
  opacity: .75;   /* dim the whole done pile so the open list reads as primary */
}
.feedback-list-rows-done:hover { opacity: 1; }

/* Paper-theme overrides for the same */
:root[data-theme] .feedback-done-section { border-top-color: var(--paper-rule); }
:root[data-theme] .feedback-done-section-summary { color: var(--paper-ink-mute); }
:root[data-theme] .feedback-done-section-summary::before { color: var(--paper-gold); }
:root[data-theme] .feedback-done-section-hint { color: var(--paper-ink-mute); }

/* Each row is a <details>. Closed by default; opens to show body + page. */
.feedback-row {
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  padding: .55rem .85rem .65rem;
  transition: border-color .15s ease;
}
.feedback-row:hover { border-color: rgba(245, 239, 227, .15); }

/* Top row — vote · kind · title · meta · status · done, on one line. */
.feedback-row-top {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.feedback-row-top > .feedback-row-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--slate-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-row-top .feedback-vote-form,
.feedback-row-top .feedback-done-form {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
/* Body row — sits flush under the title without a divider, indented to
   align with the title (past the vote button + kind chip). */
.feedback-row-body-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-top: .15rem;
  padding-left: 3.6rem;  /* aligns roughly under the title column */
}
.feedback-row-body-text,
.feedback-row-body-edit {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}
.feedback-row-body-text-empty { opacity: .5; font-style: italic; }
.feedback-row-body-form-inline { flex: 1 1 auto; margin: 0; }
.feedback-row-body-edit {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: .25rem .4rem;
  color: var(--slate-cream);
  font-family: var(--pico-font-family);
  resize: none;
  overflow: hidden;
  transition: border-color .12s ease, background .12s ease;
  box-shadow: none !important;
}
.feedback-row-body-edit::placeholder { color: var(--color-muted); font-style: italic; opacity: .55; }
.feedback-row-body-edit:hover { border-color: rgba(245, 239, 227, .12); }
.feedback-row-body-edit:focus {
  outline: none;
  border-color: var(--slate-gold);
  background: rgba(245, 239, 227, .04);
}
.feedback-row-page-link {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-muted);
  text-decoration: none;
  opacity: .7;
  font-family: 'JetBrains Mono', monospace;
  align-self: center;
}
.feedback-row-page-link:hover { color: var(--slate-gold); opacity: 1; }

/* Paper mode — flip slate-ink-2 + slate-cream to paper tokens. */
:root[data-theme] .feedback-row {
  background: var(--paper-bg-soft);
  border-color: var(--paper-rule);
}
:root[data-theme] .feedback-row:hover { border-color: var(--paper-ink-mute); }
:root[data-theme] .feedback-row-top > .feedback-row-title { color: var(--paper-ink); }
:root[data-theme] .feedback-row-body-text { color: var(--paper-ink-soft); }
:root[data-theme] .feedback-row-body-edit { color: var(--paper-ink); }
:root[data-theme] .feedback-row-body-edit::placeholder { color: var(--paper-ink-mute); }
:root[data-theme] .feedback-row-body-edit:focus { border-color: var(--paper-gold); background: rgba(180, 140, 60, .06); }
:root[data-theme] .feedback-row-page-link { color: var(--paper-ink-mute); }
:root[data-theme] .feedback-row-page-link:hover { color: var(--paper-gold); }
/* Kill the default details disclosure arrow (Pico/Chromium both render
   a chevron on the right of summary). */
.feedback-row-summary::-webkit-details-marker,
.feedback-row-summary::marker { display: none !important; content: "" !important; }
.feedback-row-summary::after { display: none !important; content: none !important; }

/* Done checkbox — same height as the vote button so they sit on one
   line. Brighter border so it's visible against the dark row bg. */
.feedback-done-form { margin: 0; display: inline-flex; align-items: center; }
.feedback-done-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0;
  background: rgba(245, 239, 227, .03);
  border: 1px solid rgba(245, 239, 227, .25);
  color: var(--color-success);
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: border-color .15s ease, background .15s ease;
}
.feedback-done-btn:hover {
  border-color: var(--slate-cream);
  background: rgba(245, 239, 227, .08);
}
.feedback-done-btn.is-done {
  background: rgba(127, 180, 127, .15);
  border-color: var(--color-success);
}
.feedback-done-placeholder {
  width: 0;
  height: 26px;
  display: none;
}

/* Status pill on shipped items already shows green via existing
   .feedback-status-shipped — combined with the filled checkbox that
   reads as "done" without extra row styling. */
.feedback-row[open] > .feedback-row-summary {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slate-line-dark) !important;
}
.feedback-row-summary::-webkit-details-marker { display: none; }
.feedback-row-summary::marker { display: none; content: ""; }

/* Vote button — compact pill with arrow + count side-by-side. Single-line
   so it stays the same height as the row. !important on width because
   Pico's button[type=submit] rule otherwise stretches it. */
.feedback-vote-form { margin: 0; display: inline-flex; }
.feedback-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  width: 44px !important;
  height: 26px !important;
  padding: 0 .35rem !important;
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--color-muted);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--pico-font-family);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  justify-content: center;
  margin: 0;
}
.feedback-vote-btn:hover {
  color: var(--slate-cream);
  border-color: rgba(245, 239, 227, .25);
}
.feedback-vote-btn.is-voted {
  color: var(--slate-gold);
  border-color: var(--slate-gold);
  background: rgba(225, 174, 101, .08);
}
.feedback-vote-icon {
  font-size: 10px;
  line-height: 1;
}
.feedback-vote-count {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

/* Kind pill — uses existing kind color tokens. Inline-flex so it sits
   on the same baseline as buttons in the grid. */
.feedback-row-kind {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* Critical chip — red, attention-grabbing without screaming. */
.feedback-row-critical {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 .45rem;
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d97570;
  background: rgba(181, 98, 98, .12);
  border: 1px solid rgba(181, 98, 98, .4);
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1;
}

.feedback-row-title {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-size: 14px;
  color: var(--slate-cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.feedback-row-meta {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
  line-height: 1;
}
/* Status pill in the row — same target height as everything else. */
.feedback-row-summary .feedback-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  line-height: 1;
}

/* Status pill in row — reuses existing .feedback-status colors. */

/* Expanded detail — body + page link. */
.feedback-row-detail {
  padding: .9rem 1rem 1rem;
  background: rgba(0, 0, 0, .15);
}
.feedback-row-body-form {
  margin: 0 0 .65rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.feedback-row-body-input {
  min-height: 70px;
  resize: vertical;
  line-height: 1.5;
}
.feedback-row-body-actions {
  display: flex;
  justify-content: flex-end;
}
.feedback-row-body {
  margin: 0 0 .5rem;
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate-cream);
  white-space: pre-wrap;
}
.feedback-row-body-empty {
  color: var(--color-muted);
  font-style: italic;
}
.feedback-row-page {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}
.feedback-row-page a {
  color: var(--slate-cream);
  border-bottom: 1px dotted var(--slate-line-dark);
  text-decoration: none;
}
.feedback-row-page a:hover {
  color: var(--slate-gold);
  border-bottom-color: var(--slate-gold);
}

@media (max-width: 800px) {
  /* Mobile: hide the kind/critical pills (they bloat the row) and let
     the title wrap. Flex order keeps the controls left, meta+status right. */
  .feedback-row-kind,
  .feedback-row-critical { display: none; }
  .feedback-row-summary > .feedback-row-title {
    white-space: normal;
    height: auto;
  }
}

/* Admin card — critical flag indicator + vote count. */
.feedback-card-critical {
  border-left: 3px solid #d97570;
}
.feedback-card-votes {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .45rem;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
}
.feedback-card-votes .feedback-vote-icon {
  color: var(--slate-gold);
  font-size: 9px;
}
.feedback-triage-critical {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 12px;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.feedback-triage-critical input[type="checkbox"] {
  margin: 0;
  width: auto;
}

/* Import result banners — sit at the top of the per-entity import page
   right after a Run. Three flavors: success (green), preview (gold),
   error (red). All share the same shape — left rail + body. */
.import-banner {
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--color-muted);
  background: rgba(245, 239, 227, .03);
  font-size: 13px;
  line-height: 1.5;
}
.import-banner-success {
  border-left-color: var(--color-success);
  background: rgba(127, 180, 127, .05);
}
.import-banner-info {
  border-left-color: var(--slate-gold);
  background: rgba(225, 174, 101, .05);
}
.import-banner-error {
  border-left-color: var(--color-danger);
  background: rgba(181, 98, 98, .06);
  color: #d97570;
}

/* CSV file-picker — restyle the native input to match the slate look. */
.import-file-input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  color: var(--slate-cream);
  background: var(--slate-ink-2);
  border: 1px dashed var(--slate-line-dark);
  padding: .55rem .7rem;
  margin: .25rem 0 0;
  width: 100%;
  border-radius: 0;
}
.import-file-input::-webkit-file-upload-button {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--color-muted);
  padding: .3rem .7rem;
  font-size: 11px;
  font-family: var(--pico-font-family-display);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: .65rem;
  transition: color .15s ease, border-color .15s ease;
}
.import-file-input::-webkit-file-upload-button:hover {
  color: var(--slate-cream);
  border-color: var(--slate-gold);
}

/* Unattached-contacts inline assign picker — slimmer than the default
   slate-form-input so it fits in a list-table row. */
.unattached-picker {
  height: 30px !important;
  padding: 0 .5rem !important;
  font-size: 12px !important;
  margin: 0 !important;
  background: var(--slate-ink-2) !important;
}
.unattached-picker:focus {
  border-color: var(--slate-gold);
  outline: none;
}
.unattached-delete {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--color-muted);
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.unattached-delete:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Contacts list — filter tabs (All / Attached / Unattached) + pagination.
   Tabs sit between the title and the search row. Same visual treatment as
   the Confrère / Client chips on the Status Board, but as text tabs not
   pills. */
.contacts-filter-tabs {
  display: flex;
  gap: 1.5rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.contacts-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 0;
  margin-bottom: -1px;
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-soft),
              border-color var(--duration-fast) var(--ease-soft);
}
.contacts-filter-tab:hover {
  color: var(--slate-cream);
}
.contacts-filter-tab.is-active {
  color: var(--slate-gold);
  border-bottom-color: var(--slate-gold);
}
.contacts-filter-count {
  font-family: var(--pico-font-family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.contacts-filter-tab.is-active .contacts-filter-count {
  color: var(--slate-cream);
}

/* Pagination row — prev / current / next, centered under the table. */
.contacts-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.75rem 0 0;
  font-size: 12px;
}
.contacts-pagination-link {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-soft);
}
.contacts-pagination-link:hover { color: var(--slate-cream); }
.contacts-pagination-link.is-disabled {
  opacity: .35;
  pointer-events: none;
}
.contacts-pagination-current {
  font-size: 12px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Historical time-tracking panel on the Project Doc — only renders for
   HubSpot-imported projects. Read-only reference table; the data is
   messy free text ("10 Hours", "1 Day", "$1,200 VO") preserved verbatim. */
.project-doc-historical-section {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--slate-line-dark);
}
.project-doc-historical-table td {
  vertical-align: top;
  line-height: 1.5;
  font-size: 13px;
}
.project-doc-historical-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  width: 160px;
}

/* Logged Hours panel — sources from time_entries. By-deliverable +
   by-person tables side-by-side; recent entries underneath full width. */
.project-doc-hours-section {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--slate-line-dark);
}
.project-doc-hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1rem 0;
}
@media (max-width: 720px) {
  .project-doc-hours-grid { grid-template-columns: 1fr; }
}
.project-doc-hours-recent {
  margin-top: 1.5rem;
}
.project-doc-hours-row-edit {
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-soft);
}
.project-doc-hours-row-edit:hover {
  background: rgba(245, 239, 227, .04);
}
:root[data-theme] .project-doc-hours-row-edit:hover {
  background: rgba(180, 140, 60, .06);
}
.project-doc-hours-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.project-doc-panel-subtitle {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

/* Inline mailto link in muted columns — keeps the cell quiet but
   clickable. */
.slate-list-muted-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-soft),
              color var(--duration-fast) var(--ease-soft);
}
.slate-list-muted-link:hover {
  color: var(--slate-cream);
  border-bottom-color: currentColor;
}


/* Maintenance section — one-shot admin operations (backfills, re-syncs).
   Each action is a two-column row: description on the left, run button
   on the right. Quiet styling — these aren't day-to-day. */
.maintenance-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  margin: 0 0 1rem;
}
@media (max-width: 600px) {
  .maintenance-action { grid-template-columns: 1fr; }
}
.maintenance-action-title {
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0 0 .35rem;
}
.maintenance-action-desc {
  font-size: 12.5px;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
}
.maintenance-action-desc code {
  background: rgba(245, 239, 227, .05);
  padding: 1px 5px;
  font-size: 11.5px;
  color: var(--slate-cream);
}
.library-item textarea {
  width: 100%;
  background: var(--slate-ink-3);
  color: var(--slate-cream);
  border: 1px solid var(--slate-line-dark);
  border-radius: 0;
  padding: .45rem .6rem;
  font-size: 13px;
  font-family: var(--pico-font-family);
}

/* =========================================================================
   M2 v3 — Hero/mid images, masthead, overview, reel, North Star/Pillars,
   testimonial reposition, group team photo, contact footer
   ========================================================================= */

/* Hero image at the very top.
   Taller (cover-page presence), with a soft bottom gradient that eases
   into the page background so the masthead has somewhere to land. */
/* Hero with overlaid logo + brand kicker — paired logos + "Once Films
   FOR [Client]" sit at the bottom of the hero on a soft dark gradient
   that fades into the page below. The image is the backdrop; the overlay
   carries the brand pairing. */
.proposal-hero {
  position: relative;
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center;
  background-color: #1c1818;
  margin: -1px 0 0;
  overflow: hidden;
}
/* Dark fade at the bottom — gives the overlaid logo + kicker enough
   contrast to read against any photograph, then eases into the page. */
.proposal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,.55) 78%,
    rgba(0,0,0,.85) 100%
  );
}
.proposal-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  justify-content: center;
  text-align: center;
}
.proposal-hero-kicker {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, .92);
  line-height: 1.2;
}
.proposal-hero-kicker-connector {
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  opacity: .7;
  margin: 0 .15rem;
  letter-spacing: .1em;
}
.proposal-hero-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.proposal-hero-logo {
  height: 58px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.proposal-hero-logo-divider {
  color: rgba(245, 239, 227, .55);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}
.proposal-hero-logo-client {
  max-height: 58px;
}
@media (max-width: 600px) {
  .proposal-hero { height: 280px; }
  .proposal-hero-logo, .proposal-hero-logo-client { height: 44px; max-height: 44px; }
  .proposal-hero-kicker { font-size: 11px; letter-spacing: .18em; }
}

/* Masthead-with-hero — the title block right below the hero. Tighter
   top padding because the hero already establishes the "above the fold"
   tone. */
.proposal-masthead-with-hero { padding-top: 2rem; }

/* Masthead with paired logos (centered cover-style) */
.proposal-masthead-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-shrink: 0;
}
.proposal-masthead-logo-divider {
  color: #c5bba8;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}
.proposal-masthead-logo-client {
  max-height: 52px;
  width: auto;
}
.proposal-masthead-subtitle {
  font-size: 15px;
  font-style: italic;
  color: #6e6657;
  margin: .35rem auto .25rem;
  max-width: 540px;
  line-height: 1.4;
}

/* Masthead kicker — small, dark, wide-tracked caps that sits right above
   the project title. Mirrors the "FILMS" treatment from the Once Films
   logo: light weight, wide letter-spacing, all caps. Same dark color as
   the body title (not gold) so it reads as quiet brand context rather
   than as a graphic element. When no client logo is on file, the kicker
   carries the brand pairing on its own:
       ONCE  FILMS  for  CATHOLIC  EXTENSION  SOCIETY
       Catholic Extension Society — 2026 Storytelling Series
   When a logo IS on file, it just names the client beneath the paired logos. */
/* Restored to the same treatment the original .proposal-masthead-client had —
   small, gray, wide-tracked caps. Font-family intentionally inherits from
   body so it matches the rest of the masthead's small type. Easy to dial
   from here. */
.proposal-masthead-kicker {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6e6657;
  margin-bottom: .35rem;
}
.proposal-masthead-kicker-connector {
  /* "for" — lowercase + italic visual connector, otherwise identical to surrounding type */
  text-transform: lowercase;
  font-style: italic;
}

/* Tiny meta-line separator between "Prepared by..." and "Valid through..." */
.proposal-masthead-line-sep {
  display: inline-block;
  padding: 0 .35rem;
  color: #b8b0a0;
}

/* Project Overview (single paragraph, top of body) — matches scope intro size
   so it reads as lead copy without shouting over the rest of the document. */
.proposal-overview p {
  font-size: 16px;
  line-height: 1.6;
  color: #2b2722;
  margin: 0;
  font-weight: 400;
  max-width: 640px;
}
/* Centered overview when masthead is in cover-page mode */
.proposal-overview {
  text-align: center;
  display: flex;
  justify-content: center;
}

/* Hello block (reel + trimmed text) */
.proposal-hello-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.proposal-reel-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1c1818;
}
.proposal-reel-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.proposal-hello {
  font-size: 15px;
  line-height: 1.6;
  color: #2b2722;
}
.proposal-hello h2 {
  font-family: var(--pico-font-family-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 0 0 .75rem;
}
.proposal-hello p { margin: 0 0 .75rem; }

/* North Star + Pillars */
.proposal-north-star-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.proposal-north-star {
  background: #1c1818;
  color: var(--slate-cream);
  padding: 1.5rem 1.75rem;
  text-align: center;
}
.proposal-north-star-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-gold);
  margin-bottom: .5rem;
}
.proposal-north-star-text {
  font-family: var(--pico-font-family-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  margin: 0;
  color: var(--slate-cream);
}
/* Locked to 3-up on desktop so 3/4/5/6 pillars all read intentional —
   4 wraps to 3+1, 5 wraps to 3+2, 6 fills two rows cleanly. */
.proposal-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 820px) {
  .proposal-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .proposal-pillars { grid-template-columns: 1fr; }
}
.proposal-pillar {
  padding: 1rem 1.25rem;
  background: #f4ede0;
  border-left: 3px solid var(--slate-gold-deep);
}
.proposal-pillar-label {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1c1818;
  margin: 0 0 .35rem;
}
.proposal-pillar-description {
  font-size: 13px;
  line-height: 1.5;
  color: #4a4540;
  margin: 0;
}

/* Mid-page texture image break */
.proposal-mid-image {
  width: calc(100% + 3rem);
  margin: 2.5rem -1.5rem;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: #1c1818;
}
@media (max-width: 600px) {
  .proposal-mid-image {
    width: calc(100% + 2rem);
    margin: 2rem -1rem;
    height: 160px;
  }
}

/* Scope intro — proper setup paragraph before the price card, not a caption */
.proposal-scope-intro {
  font-size: 16px;
  line-height: 1.6;
  color: #2b2722;
  max-width: 640px;
  margin: 0 0 2rem;
}
.proposal-scope-intro p { margin: 0 0 .9rem; }
.proposal-scope-intro p:last-child { margin-bottom: 0; }

/* Team group photo above bios */
.proposal-team-group-photo {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
  display: block;
}

/* Case study video embed */
.proposal-case-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1c1818;
  margin-bottom: 1rem;
}
.proposal-case-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Dedicated sign block — single-scope action lives here, below T&C.
   Visually a quiet card (cream bg + gold border) so it doesn't fight the
   T&C section above but still pulls the eye to the action. */
.proposal-sign-block {
  background: #f8f3e6;
  border-top: 3px solid var(--slate-gold-deep);
  padding: 1.75rem 1.75rem 2rem;
  margin-top: 2rem;
}
.proposal-sign-block .proposal-section-title {
  margin-top: 0;
}
.proposal-sign-intro {
  font-size: 14px;
  line-height: 1.55;
  color: #3a3530;
  margin: 0 0 1.25rem;
  max-width: 640px;
}
.proposal-sign-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 14px;
  align-items: baseline;
}
.proposal-sign-summary dt {
  color: #6e6657;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.proposal-sign-summary dd {
  margin: 0;
  color: #1c1818;
  font-weight: 500;
}
.proposal-sign-amount {
  font-family: var(--pico-font-family-monospace);
  font-size: 20px;
  font-weight: 700;
  color: #1c1818;
}
.proposal-sign-action {
  min-width: 240px;
}

/* Process & Notes — free-form, project-specific section between Our
   Approach and the mid-page image. Rendered as a normal section (no
   card, no left rule) so it visually matches the rest of the prose. */
.proposal-process-body {
  font-size: 15px;
  line-height: 1.6;
  color: #2b2722;
}
.proposal-process-body p,
.proposal-process-body div { margin: 0 0 .9rem; }
.proposal-process-body ul {
  margin: .25rem 0 1rem;
  padding-left: 1.5rem;
}
.proposal-process-body li {
  margin: 0 0 .4rem;
  line-height: 1.55;
}

/* Multi-scope breakdowns.
   Single-scope: rendered inline (no tabs needed).
   Multi-scope (.is-tabbed): tab strip across the top, one panel visible
   at a time. Clicking a tab switches the visible breakdown. Tab buttons
   are tinted by tier so the choice maps to the price cards above. */
.proposal-scope-breakdowns {
  margin-top: 1.5rem;
}
.proposal-scope-breakdown {
  margin-bottom: 1.5rem;
  /* M34: left bar removed — the tier color was pulling attention
     away from the actual offer / Accept buttons. The tab strip
     above already signals the active tier. */
}
.proposal-scope-breakdowns.is-tabbed .proposal-scope-breakdown {
  display: none;
  margin-bottom: 0;
}
.proposal-scope-breakdowns.is-tabbed .proposal-scope-breakdown.is-active {
  display: block;
}
.proposal-scope-breakdown .proposal-subsection-title { margin-top: 0; }

/* Tab strip */
.proposal-breakdown-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #d8d2c4;
}
.proposal-breakdown-tab {
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6e6657;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: .65rem 1.1rem;
  margin: 0;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.proposal-breakdown-tab:hover { color: #1c1818; }
.proposal-breakdown-tab.is-active {
  color: #1c1818;
}
/* Active-tab underline color follows the tier */
.proposal-breakdown-tab-tier-green.is-active  { border-bottom-color: #4a8a64; }
.proposal-breakdown-tab-tier-gold.is-active   { border-bottom-color: var(--slate-gold-deep); }
.proposal-breakdown-tab-tier-black.is-active  { border-bottom-color: #1c1818; }

/* =========================================================================
   Trix WYSIWYG editor — dark-mode skin
   Trix ships a light-mode default. We override to match the builder /
   admin's dark cream-on-ink palette. Toolbar is dark, content area is
   ink-3 with cream text, active button state is gold.
   ========================================================================= */

trix-toolbar {
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  border-bottom: none;
  padding: .35rem .5rem;
}
trix-toolbar .trix-button-row {
  flex-wrap: nowrap;     /* keep the bar one line — small icons fit fine */
  gap: 1px;
  overflow: hidden;
}
trix-toolbar .trix-button-group {
  border: none !important;
  margin: 0 .35rem 0 0 !important;
}
trix-toolbar .trix-button {
  background: transparent;
  border: none;
  color: var(--slate-cream);
  opacity: .65;
  padding: .1rem .35rem;
  min-width: 0;
  height: 22px;
  border-radius: 0;
}
trix-toolbar .trix-button::before {
  /* Trix's button glyphs are SVG masks rendered in the current color.
     Shrink them so the toolbar reads as a compact strip rather than
     a tall button bar that wraps onto a second row. */
  top: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
  left: 3px !important;
  filter: invert(95%) sepia(8%) saturate(180%) hue-rotate(8deg) brightness(95%);
}
trix-toolbar .trix-button:hover {
  background: var(--slate-ink-3);
  opacity: 1;
}
trix-toolbar .trix-button.trix-active {
  background: var(--slate-ink-3);
  color: var(--slate-gold);
  opacity: 1;
}
trix-toolbar .trix-button.trix-active::before {
  filter: invert(76%) sepia(48%) saturate(380%) hue-rotate(355deg) brightness(95%);
}
trix-toolbar .trix-button-group--file-tools {
  /* File uploads are disabled at the JS layer; hide the toolbar group too */
  display: none !important;
}
trix-toolbar .trix-dialog {
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
}
trix-toolbar .trix-input {
  background: var(--slate-ink-3);
  color: var(--slate-cream);
  border: 1px solid var(--slate-line-dark);
}
trix-toolbar .trix-dialog__link-fields .trix-button {
  background: var(--slate-gold-deep);
  color: #1c1818;
  opacity: 1;
}

trix-editor.rich-trix {
  /* Reset what the wrapping <label class="config-label"> tries to push
     down: uppercase text, tiny font-size, wide letter-spacing, muted
     color, weight overrides. Without these, what you type comes out
     11px all-caps tracked-out and unreadable. */
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--slate-cream) !important;
  display: block;
  width: 100%;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  padding: .65rem .8rem;
  font-family: var(--pico-font-family);
  line-height: 1.55;
  border-radius: 0;
  cursor: text;
}
/* And reset on every descendant the editor renders inside itself —
   paragraphs, lists, etc. — so cascade can't reach them either. */
trix-editor.rich-trix * {
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* Toolbar also lives inside .config-label; same resets so labels and
   tooltips render correctly. */
trix-toolbar {
  text-transform: none !important;
  letter-spacing: normal !important;
}
trix-editor.rich-trix:focus {
  outline: none;
  border-color: var(--slate-gold);
}
trix-editor.rich-trix:empty::before {
  color: #6e6657;
  font-style: italic;
}
/* Inner content styling — make rendered HTML readable inside the editor */
trix-editor.rich-trix h1 {
  font-family: var(--pico-font-family-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: .5rem 0;
}
trix-editor.rich-trix p { margin: 0 0 .5rem; }
trix-editor.rich-trix ul,
trix-editor.rich-trix ol { margin: .25rem 0 .5rem 1.25rem; padding: 0; }
trix-editor.rich-trix li { margin: 0 0 .2rem; }
trix-editor.rich-trix blockquote {
  border-left: 3px solid var(--slate-gold-deep);
  padding-left: .8rem;
  margin: .5rem 0;
  color: #d8d2c4;
  font-style: italic;
}
trix-editor.rich-trix a { color: var(--slate-gold); }
trix-editor.rich-trix strong { color: #f5efe3; }
trix-editor.rich-trix pre {
  background: var(--slate-ink-2);
  padding: .5rem .65rem;
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
}

/* Contact footer */
.proposal-contact-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d8d2c4;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.proposal-contact-block {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 13px;
  color: #4a4540;
}
.proposal-contact-block a {
  color: var(--slate-gold-deep);
  text-decoration: none;
}
.proposal-contact-block a:hover { text-decoration: underline; }
.proposal-climate-line {
  font-size: 11px;
  color: #6e6657;
  font-style: italic;
}
.proposal-climate-line p { margin: 0; }

/* Builder: Pillars editor (two-column rows) */
.pillars-editor {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .5rem;
}
/* Pillar library picker — sits above the editor, drops the chosen
   card's label + description into the next empty row. */
.pillar-library-row {
  margin: 0 0 .65rem;
}
.pillar-library-select {
  width: 100%;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .55rem .65rem;
  font-size: 13px;
  font-family: var(--pico-font-family);
  border-radius: 0;
  cursor: pointer;
}
.pillar-library-select:hover {
  border-color: var(--slate-gold);
}

/* Pillars editor — label + description side-by-side with proper room.
   Label gets fixed width so all labels align vertically across rows. */
.pillar-row {
  display: grid;
  grid-template-columns: 200px 1fr 32px;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}
.pillar-row input {
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .45rem .55rem;
  font-size: 13px;
  font-family: var(--pico-font-family);
  border-radius: 0;
}
.delete-btn {
  padding: 0 .35rem;
  margin: 0;
  height: 20px;
  font-size: 14px;
  line-height: 1;
  background: transparent;
  color: var(--pico-muted-color);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}
.delete-btn:hover {
  color: #ef4444;
  border-color: var(--pico-muted-border-color);
}

/* ---- Add custom line section ------------------------------------------- */

.add-line-section {
  margin-top: 1.25rem;
}
.add-line-section > summary {
  padding: .35rem .65rem;
  font-size: 13px;
}
.add-line-form {
  padding-top: .35rem;
}
.add-line-section summary small {
  color: var(--pico-muted-color);
  font-weight: normal;
  font-style: italic;
}

.estimator-page .page-actions {
  margin-top: 1.5rem;
}

/* =========================================================================
   Dark-mode tweaks for custom elements that don't auto-adapt via Pico vars.
   Pico handles theme via prefers-color-scheme when no data-theme is set.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --slate-paper: #0b0b0c;
    --slate-line:  #2a2a2c;
    --slate-line-soft: #1a1a1c;
    --pico-primary: #fff;
    --pico-primary-hover: #f3f4f6;
  }

  /* Totals block is intentionally always-dark — no separate dark-mode
     override needed; the base rules already do the right thing. */

  .phase-title {
    background: transparent;
  }
  /* Active line: subtle cream tint, no gold halo */
  .line-row.line-active .qty-input {
    background: var(--slate-cream-soft);
    border-color: rgba(245, 239, 227, .25);
  }

  .freeform-badge {
    background: transparent;
    color: var(--pico-muted-color);
    border-color: var(--slate-line-dark);
  }
  .line-row.freeform-line {
    background: var(--slate-cream-soft);
  }

  /* Dark-mode status colors — outline style, no filled bg, brand-aligned hues */
  .status-development     { color: rgba(245, 239, 227, .55); }
  .status-pre_production  { color: var(--color-warning); }
  .status-production      { color: #6db887; }
  .status-post_production { color: #87a3aa; }
  .status-delivered       { color: #6db887; }
  .status-archived        { color: rgba(245, 239, 227, .35); }
  .status-paused          { color: var(--color-warning); }
  .status-lost            { color: #c47878; }

  .delete-btn:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .08);
  }
}

/* ----- Details / collapsible sections ----- */

details {
  margin: 1rem 0;
}
details > summary {
  cursor: pointer;
  padding: .75rem 1rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  font-weight: 500;
  list-style-position: outside;
}
details[open] > summary {
  margin-bottom: 1rem;
  border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
}

details.danger-zone {
  margin-top: 2.5rem;
}
details.danger-zone > summary {
  color: var(--pico-color-red-500);
}

/* =========================================================================
   Post-Doc dashboard — sortable table of every project in post-production.
   Inline-editable cells autosave via HTMX; date cells get tinted backgrounds
   by urgency (yellow → orange → red as deadline approaches).
   ========================================================================= */

/* Page matches the parent container width (Pico's .container) so the
   board lines up with the top nav and section underline. */
.post-doc-page {
  max-width: none;
  margin: 1.5rem 0 3rem;
}

.post-section + .post-section { margin-top: 2.5rem; }

/* Filter bar — chips for each editor / client, click to filter the queue.
   Multiple bars stack with no border between them, single bottom border
   under the last bar. */
.post-filter-bar {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .25rem 0;
}
.post-filter-bar + .post-filter-bar {
  margin-bottom: 0;
}
.post-filter-bar:last-of-type {
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.post-filter-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-right: .25rem;
}
.post-filter-chip {
  display: inline-block;
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  padding: 4px 10px;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-soft),
              border-color var(--duration-fast) var(--ease-soft),
              background var(--duration-fast) var(--ease-soft);
  white-space: nowrap;
  vertical-align: middle;
}
.post-filter-chip:hover {
  color: var(--slate-cream);
  border-color: var(--pico-muted-color);
}
.post-filter-chip.is-active {
  background: var(--slate-gold-deep);
  border-color: var(--slate-gold-deep);
  color: #1c1818;
  font-weight: 600;
}

/* Phase chips — each phase gets a subtle accent color when active so
   producers can scan which phases are filtered at a glance. The accent
   only shows when the chip is active; inactive chips stay neutral. */
.post-filter-chip-phase-development.is-active     { background: var(--phase-development);     border-color: var(--phase-development);     color: var(--slate-ink); }
.post-filter-chip-phase-pre_production.is-active  { background: var(--phase-pre-production);  border-color: var(--phase-pre-production);  color: var(--slate-ink); }
.post-filter-chip-phase-production.is-active      { background: var(--phase-production);      border-color: var(--phase-production);      color: var(--slate-ink); }
.post-filter-chip-phase-post_production.is-active { background: var(--slate-gold-deep);       border-color: var(--slate-gold-deep);       color: var(--slate-ink); }
.post-filter-chip-phase-delivered.is-active       { background: var(--color-success-deep);   border-color: var(--color-success-deep);   color: var(--slate-cream); }

/* Sort links in column headers */
.post-sort-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color .12s ease;
}
.post-sort-link:hover { color: var(--slate-cream); }
.post-sort-link.is-active {
  color: var(--slate-gold);
}

.post-section-title {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
  display: flex;
  align-items: baseline;
  gap: .65rem;
}
.post-section-title-active   { border-bottom-color: #4a8a64; }
.post-section-title-waiting  { border-bottom-color: var(--slate-gold-deep); }
.post-section-title-done     { border-bottom-color: var(--pico-muted-color); color: var(--pico-muted-color); }

/* Active section head — flex container so the + button can sit opposite
   the section title. Only the Active section has this wrapper; Waiting
   and Done stay as bare titles. */
.post-section-head {
  position: relative;
}
.post-section-add {
  position: absolute;
  top: -.15rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.post-section-add:hover {
  color: var(--slate-cream);
  border-color: var(--slate-gold);
  background: rgba(204, 159, 80, .06);
}
.post-section-add-popover {
  position: absolute;
  top: -.15rem;
  right: 0;
}
.post-section-add-popover > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1;
  background: transparent;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.post-section-add-popover > summary::-webkit-details-marker { display: none; }
.post-section-add-popover > summary::marker { content: ''; }
.post-section-add-popover > summary:hover {
  color: var(--slate-cream);
  border-color: var(--slate-gold);
  background: rgba(204, 159, 80, .06);
}
.post-section-add-popover[open] > summary {
  color: var(--slate-cream);
  border-color: var(--slate-gold);
}
/* When the popover is open, hide the + button — the panel itself is the
   open-state indicator. Click-outside closes; clicking inside doesn't.
   Keeps the panel a clean rectangle instead of an awkward tabbed look. */
.post-section-add-popover[open] > summary {
  visibility: hidden;
  pointer-events: none;
}
.post-section-add-panel {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 10;
  min-width: 320px;
  background: var(--slate-ink-1);
  border: 1px solid var(--slate-gold);
  border-radius: 3px;
  padding: 1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.post-section-add-label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.post-section-add-label .slate-form-input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate-cream);
}
.post-section-add-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .25rem;
}
.post-section-add-newproj {
  font-size: 12px;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--slate-line-dark);
}
.post-section-add-newproj:hover {
  color: var(--slate-gold);
  border-bottom-color: var(--slate-gold);
}
/* Paper-mode overrides — the dark panel chrome flips to paper card. */
:root[data-theme] .post-section-add-popover > summary {
  border-color: var(--paper-rule);
  color: var(--paper-ink-mute);
}
:root[data-theme] .post-section-add-popover > summary:hover,
:root[data-theme] .post-section-add-popover[open] > summary {
  color: var(--paper-ink);
  border-color: var(--paper-gold);
  background: rgba(180, 140, 60, .08);
}
:root[data-theme] .post-section-add-panel {
  background: var(--paper-bg-soft);
  border-color: var(--paper-gold);
  box-shadow: 0 8px 24px rgba(60, 50, 30, .15);
}
:root[data-theme] .post-section-add-label { color: var(--paper-ink-mute); }
:root[data-theme] .post-section-add-label .slate-form-input { color: var(--paper-ink); }
:root[data-theme] .post-section-add-newproj { color: var(--paper-ink-mute); border-bottom-color: var(--paper-rule); }
:root[data-theme] .post-section-add-newproj:hover { color: var(--paper-gold); border-bottom-color: var(--paper-gold); }

/* Done section — collapsible <details>, dimmed by default */
.post-section-done {
  margin-top: 2.5rem;
  opacity: .75;
  transition: opacity .15s ease;
}
.post-section-done[open] { opacity: 1; }
.post-section-done > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.post-section-done > summary::-webkit-details-marker { display: none; }
.post-section-done > summary::marker { content: ''; }
/* Pico injects a chevron via summary::after (background-image). Kill it
   so the only disclosure marker on this row is our own ::before triangle. */
.post-section-done > summary::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}
.post-section-done > summary::before {
  content: '▸';
  color: var(--slate-gold);
  opacity: .65;
  font-size: 10px;
  margin-right: .5rem;
  transition: transform .15s ease;
  display: inline-block;
}
.post-section-done[open] > summary::before { transform: rotate(90deg); }
.post-section-hint {
  font-family: var(--pico-font-family);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pico-muted-color);
  margin-left: .5rem;
  font-style: italic;
}
.post-section-count {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--pico-muted-color);
}
.post-empty {
  font-size: 13px;
  color: var(--pico-muted-color);
  font-style: italic;
  padding: .75rem 0;
}

/* No overflow constraints — let the table grow naturally as rows are
   added. The CSS spec forces overflow-y to compute as 'auto' whenever
   overflow-x is non-visible (and vice versa), so even
   `overflow-x: auto; overflow-y: visible` produces a vertical scrollbar.
   We don't need horizontal scroll at the 1400px page max-width, so just
   omit overflow entirely. */
.post-table-wrap {
  /* intentionally empty — was creating an unwanted vertical scrollbar */
}
.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.post-table thead th {
  text-align: left;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  padding: .5rem .55rem;
  border-bottom: 1px solid var(--slate-line-dark);
  background: transparent;
}
/* Column widths. Phase pill column sits between Project and Status. */
.post-th-expand   { width: 44px;  }  /* priority + row-expand toggles */
.post-th-rough    { width: 70px;  }
.post-th-delivery { width: 70px;  }
.post-th-project  { width: 22%;   }  /* holds Client·Project + deliverable name */
.post-th-phase    { width: 130px; }  /* colored pill <select> */
.post-th-status   { width: auto;  }
.post-th-contact  { width: 70px;  }
.post-th-editor   { width: 150px; }
.post-th-state    { width: 70px;  }

.post-row { border-bottom: 1px solid var(--slate-line-dark); }
.post-row:hover { background: rgba(225, 174, 101, .04); }

/* Maximum density to match the spreadsheet — producers want 20+ rows
   visible. Aim for ~22px row height. */
.post-cell {
  padding: 5px 6px;  /* a touch of breathing room above/below content */
  color: var(--slate-cream);
  font-size: 11px;
  line-height: 1.2;
}
/* Force vertical centering with a higher-specificity selector chain that
   beats anything Pico has on tbody td. Also forces all inline-block children
   (badges, buttons, selects) to align to middle so they sit on the cell's
   mid-line when the row is tall (multi-line status notes). */
.post-doc-page .post-table tbody tr td.post-cell {
  vertical-align: middle !important;
}
.post-doc-page .post-table tbody tr td.post-cell > * {
  vertical-align: middle !important;
}

/* Project cell — Client·Project primary (larger, brighter, links to
   project doc), deliverable name secondary (smaller, muted). Producers
   scan for client/project first; deliverable is the supporting detail. */
.post-cell-project { line-height: 1.3; }
.post-cell-project-primary {
  display: block;
  color: var(--slate-cream);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
}
.post-cell-project-primary:hover {
  color: var(--slate-gold);
  text-decoration: underline;
}
.post-cell-deliverable-name {
  display: block;
  font-size: 10px;
  color: var(--pico-muted-color);
  font-style: italic;
  margin-top: 1px;
}

/* Inline inputs — minimal chrome so the table feels like a spreadsheet.
   Padding is intentionally tiny to keep row height ~22px. `margin: 0`
   beats Pico's default `margin-bottom: var(--pico-spacing)` on inputs/
   selects/textareas, which otherwise tacks ~21px of empty space below
   every form control in the table. */
.post-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  padding: 2px 5px;
  margin: 0 !important;
  font-size: 11px;
  font-family: var(--pico-font-family);
  border-radius: 0;
  line-height: 1.2;
}
/* Belt + suspenders: zero margin on EVERY form element inside post cells
   (not just .post-input) so badges and date-overlays don't stack space. */
.post-doc-page .post-cell input,
.post-doc-page .post-cell select,
.post-doc-page .post-cell textarea,
.post-doc-page .post-cell button {
  margin: 0 !important;
}
.post-input:hover  { border-color: var(--slate-line-dark); }
.post-input:focus  {
  outline: none;
  border-color: var(--slate-gold);
  background: var(--slate-ink-3);
}
/* Date cells use an overlay pattern. The <span> shows the formatted date
   text we want (e.g., "May 29" or "—"), and the <input type="date"> sits
   on top of it with opacity:0, filling the entire cell. The browser opens
   the native picker on click of any input area — which is the whole cell.
   No native date-input chrome ever renders, so no calendar icon and no
   stubborn trailing slash to fight. */
.post-cell-date { position: relative; }
.post-date-display {
  font-family: var(--pico-font-family-monospace);
  font-size: 11px;
  padding: 2px 5px;
  color: var(--slate-cream);
  pointer-events: none;
  display: block;
  white-space: nowrap;
}
.post-date-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  color-scheme: dark;
  font-size: 11px;
  z-index: 1;
}
/* Status textarea — auto-grow to fit content, no fixed min-height (so
   single-line notes don't get a tall empty box) and no scroll. Tight
   padding overrides Pico's ~16-20px default. */
.post-input-textarea {
  resize: none;
  overflow: hidden;
  padding: 5px !important;
  margin: 0 !important;
  font-family: var(--pico-font-family);
  font-size: 11px;
  line-height: 1.3;
  vertical-align: middle;
  min-height: 0 !important;
}
.post-input-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.1rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--pico-muted-color) 50%),
                    linear-gradient(135deg, var(--pico-muted-color) 50%, transparent 50%);
  background-position: calc(100% - 8px) center, calc(100% - 5px) center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Urgency tints on date cells. Set on the <td>; HTMX recomputes on save. */
/* Urgency tint — the colored block follows the date itself as a chip,
   not the whole cell. Gives the date breathing room and keeps tall rows
   (multi-line project names) from being overpowered by a wall of red. */
.post-cell-date.post-cell-yellow,
.post-cell-date.post-cell-orange,
.post-cell-date.post-cell-red { background: transparent; }

.post-cell-date.post-cell-yellow .post-date-display,
.post-cell-date.post-cell-orange .post-date-display,
.post-cell-date.post-cell-red    .post-date-display {
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
}
.post-cell-date.post-cell-yellow .post-date-display { background: rgba(225, 174, 101, .18); }
.post-cell-date.post-cell-orange .post-date-display { background: rgba(225, 130, 65, .25); }
.post-cell-date.post-cell-red    .post-date-display { background: rgba(180, 50, 50, .38); }

/* Editor cell — styled as a pill chip to mirror the filter chip
   vocabulary above the table. Assigned editor = quiet outlined chip;
   unassigned editor = red-tinted chip so producers can scan for them. */
.post-cell-editor .post-input-select {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  border-radius: 999px;
  padding: 2px 18px 2px 10px !important;
  font-size: 11px;
  color: var(--slate-cream);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.post-cell-editor .post-input-select:hover {
  border-color: var(--pico-muted-color);
}
.post-cell-editor .post-input-select:focus {
  border-color: var(--slate-gold);
  background: var(--slate-ink-3);
}
.post-cell-editor-unassigned .post-input-select {
  background: rgba(180, 50, 50, .12);
  border-color: rgba(180, 50, 50, .35);
  color: #ff8a7a;
  font-style: italic;
}
.post-cell-editor-unassigned .post-input-select:hover {
  background: rgba(180, 50, 50, .2);
  border-color: rgba(180, 50, 50, .5);
}

/* Row-expand toggle — tiny chevron in the first column. Rotates 90deg
   when its expand row is visible. */
.post-cell-expand {
  padding: 0 2px !important;
  text-align: center;
  white-space: nowrap;
}

/* Priority bang — gray when off, red when on. Click toggles via HTMX.
   inline-flex centers the "!" character cleanly in both axes regardless
   of the surrounding row height. */
.post-row-priority-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 0;
  color: var(--slate-line-dark);
  transition: color .12s ease;
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.post-row-priority-toggle:hover { color: #ff8a7a; }
.post-row-priority-toggle.is-priority {
  color: #ff5a4a;
  text-shadow: 0 0 6px rgba(255, 90, 74, .5);
}

/* Priority row — subtle red left rule + faint background tint */
.post-row.is-priority td:first-child {
  box-shadow: inset 3px 0 0 #ff5a4a;
}
.post-row.is-priority {
  background: rgba(255, 90, 74, .04);
}
/* Chevron — clean SVG V-shape that scales crisply. Color via currentColor
   so the SVG stroke inherits from the button. Rotates 180° when expanded.
   A small gold dot appears when the project has notes or external links. */
.post-row-expand-toggle {
  position: relative;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  color: var(--pico-muted-color);
  transition: transform .15s ease, color .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.post-row-expand-toggle svg {
  display: block;
}
.post-row-expand-toggle:hover { color: var(--slate-cream); }
.post-row-expand-toggle.is-open {
  transform: rotate(180deg);
  color: var(--slate-gold);
}
/* Has-expandable-content indicator — color the chevron itself gold so
   it stands out against the muted chevrons that have nothing to reveal.
   Replaces an earlier orange pip on the corner, which floated awkwardly
   in the gap between cells. */
.post-row-expand-toggle.has-content { color: var(--slate-gold); }
.post-row-expand-toggle.has-content:hover { color: var(--slate-cream); }

/* Expand row — hidden by default via [hidden] attribute. When open, has
   a darker background to clearly signal it's secondary/expanded content
   nested under the parent row. */
.post-row-expand {
  background: rgba(0, 0, 0, .28);
}
.post-row-expand[hidden] { display: none; }

/* Editable spec input — lives INSIDE the chip alongside the icon, so
   the chip is the single display+edit surface. Borderless, transparent
   bg, mono font; the chip wrapper provides the border + tint. */
.post-specs-strip-editable .post-spec-chip { cursor: text; padding-right: .35rem; }
.post-spec-input {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  font-family: var(--pico-font-family-monospace) !important;
  font-size: 11.5px !important;
  letter-spacing: .02em;
  padding: 0 !important;
  margin: 0 !important;
  height: 18px !important;
  min-height: 18px !important;
  width: 100%;
  min-width: 50px;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
.post-spec-input:focus { outline: none; }
.post-specs-strip-editable .post-spec-chip:focus-within {
  border-color: var(--slate-gold);
}
.post-spec-input::placeholder { color: var(--color-muted); opacity: .5; }
:root[data-theme] .post-specs-strip-editable .post-spec-chip:focus-within { border-color: var(--paper-gold); }
:root[data-theme] .post-spec-input::placeholder { color: var(--paper-ink-mute); }

/* Deliverable specs strip — runtime / aspect / resolution / format
   pulled from the proposal scope. Sits at the very top of the expand
   row above the Notes editor. Outlined chips with a small SVG glyph
   so producers can spot the format at a glance. */
.post-specs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: 0 0 .85rem;
  border-bottom: 1px dashed var(--slate-line-dark);
}
.post-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  border: 1px solid var(--slate-line-dark);
  background: rgba(245, 239, 227, .04);
  color: var(--slate-cream);
  font-family: var(--pico-font-family-monospace);
  font-size: 11.5px;
  letter-spacing: .02em;
  border-radius: 0;
}
.post-spec-icon {
  display: inline-flex;
  color: var(--slate-gold);
  line-height: 0;
}
.post-spec-label { font-variant-numeric: tabular-nums; }
:root[data-theme] .post-specs-strip { border-bottom-color: var(--paper-rule); }
:root[data-theme] .post-spec-chip {
  background: var(--paper-bg);
  border-color: var(--paper-rule);
  color: var(--paper-ink);
}
:root[data-theme] .post-spec-icon { color: var(--paper-gold); }
.post-cell-expand-content {
  padding: .85rem 1.5rem 1rem !important;
  border-bottom: 1px solid var(--slate-line-dark);
  border-top: 1px dashed var(--slate-line-dark);
}

/* Producer notes editor inside the expand row — freeform scratchpad
   above the links list. */
.post-notes-editor {
  margin-bottom: 1rem;
}
.post-notes-editor-header {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .35rem;
}
.post-notes-editor-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-cream);
}
.post-notes-editor-hint {
  font-size: 10px;
  color: var(--pico-muted-color);
  font-style: italic;
}
.post-notes-textarea {
  width: 100%;
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.45;
  font-family: var(--pico-font-family);
  border-radius: 0;
  resize: vertical;
  min-height: 60px;
}
.post-notes-textarea:focus {
  outline: none;
  border-color: var(--slate-gold);
}

/* Links editor inside the expand row */
.post-links-editor-header {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .5rem;
}
.post-links-editor-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-cream);
}
.post-links-editor-hint {
  font-size: 10px;
  color: var(--pico-muted-color);
  font-style: italic;
}
.post-links-rows {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .5rem;
}
.post-link-row {
  display: grid;
  grid-template-columns: 160px 1fr 22px 22px;
  gap: .4rem;
  align-items: center;
}
.post-link-input {
  background: var(--slate-ink-3);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: 3px 6px !important;
  font-size: 11px;
  font-family: var(--pico-font-family);
  border-radius: 0;
}
.post-link-input:focus {
  outline: none;
  border-color: var(--slate-gold);
}
.post-link-open {
  color: var(--slate-gold);
  text-decoration: none;
  font-size: 12px;
  text-align: center;
}
.post-link-open:hover { color: var(--slate-cream); }
.post-link-open-disabled {
  color: var(--slate-line-dark);
  cursor: default;
}
.post-link-remove {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--pico-muted-color);
  font-size: 12px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border-radius: 0;
  height: 22px;
}
.post-link-remove:hover {
  color: #ff8a7a;
  border-color: #ff8a7a;
}
.post-link-add {
  background: transparent;
  border: 1px dashed var(--slate-line-dark);
  color: var(--pico-muted-color);
  padding: 4px 10px;
  font-size: 10px;
  font-family: var(--pico-font-family-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.post-link-add:hover {
  color: var(--slate-gold);
  border-color: var(--slate-gold);
}

/* Visibility editor — checkbox to hide a deliverable from the Board.
   Sits below notes + links, above the footer. Small + muted because it's
   not the everyday action; producers rarely toggle this. */
.post-visibility-editor {
  margin-top: 1rem;
  padding: .65rem .75rem;
  border: 1px solid var(--slate-line-dark);
  background: rgba(245, 239, 227, .02);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.post-visibility-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--pico-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-cream);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}
.post-visibility-checkbox {
  margin: 0 !important;
  width: 14px;
  height: 14px;
  accent-color: var(--slate-gold);
  cursor: pointer;
}
.post-visibility-hint {
  font-size: 11px;
  color: var(--pico-muted-color);
  font-style: italic;
  line-height: 1.4;
}

/* (Old `.post-cell-hidden-badge` removed — replaced by the small inline
   eye-off icon `.post-cell-hidden-icon` styled near the deliverable-name
   input rules above.) */

/* Expand-row footer — "Open project →" on the left, Delete on the right. */
.post-expand-footer {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--slate-line-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* When the same action bar lives at the TOP of the expand row, flip
   the separator to the bottom and zero the top spacing so it tucks
   directly under the main row. */
.post-expand-actions-top {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--slate-line-dark);
}
.post-expand-footer-left {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
.post-expand-project-link {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-gold);
  text-decoration: none;
}
.post-expand-project-link:hover {
  color: var(--slate-cream);
}
/* Board-visibility eye toggle — replaces the old full-width "Show on
   Board" checkbox row. Eye-open: visible; eye-slash + muted: hidden. */
.post-visibility-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: var(--slate-cream);
  opacity: .55;
  transition: opacity .15s ease, color .15s ease;
}
.post-visibility-eye:hover { opacity: 1; color: var(--slate-gold); }
.post-visibility-eye.is-hidden { opacity: .9; color: var(--slate-gold); }
.post-visibility-eye.is-hidden:hover { color: var(--slate-cream); }
.post-expand-footer-right {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.post-expand-duplicate-form { margin: 0; }
.post-expand-duplicate-btn {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--color-muted);
  padding: .35rem .7rem;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.post-expand-duplicate-btn:hover {
  color: var(--slate-cream);
  border-color: var(--slate-gold);
  background: rgba(204, 159, 80, .06);
}
.post-expand-delete-form { margin: 0; }
.post-expand-delete-btn {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--color-muted);
  padding: .35rem .7rem;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.post-expand-delete-btn:hover {
  color: #d97570;
  border-color: rgba(181, 98, 98, .55);
  background: rgba(181, 98, 98, .06);
}

/* Vertical-align all the inline pill/button widgets so they sit in line
   with the dates and text in neighboring cells. */
.post-state-badge,
.post-row-priority-toggle,
.post-row-expand-toggle,
.post-cell-editor .post-input-select {
  vertical-align: middle;
}

/* Phase pill — colored <select> matching the filter chip color scheme.
   Each phase has its own accent so producers can scan the phase column
   at a glance (the one place where extra color is worth the tax). The
   rest of the visual language (shape, type, tracking) matches the
   canonical .pill so it doesn't read as a different design system. */
.post-phase-select {
  border-radius: 2px !important;
  padding: 3px 20px 3px 8px !important;
  font-family: var(--pico-font-family-display) !important;
  font-size: var(--text-micro) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase;
  line-height: var(--leading-tight) !important;
  border: 1px solid var(--slate-line-dark);
  background-color: transparent;
}
/* Board phase pills — filled-tinted variant. Same per-phase color as
   the .status-* outlined pills elsewhere; the fill is what makes the
   Board scan-readable at high row density. Lighter text colors are
   chosen for legibility on the tinted background. */
.post-cell-phase-development     .post-phase-select {
  background: rgba(90, 140, 209, .15);
  border-color: var(--phase-development);
  color: #9fbce0;
}
.post-cell-phase-pre_production  .post-phase-select {
  background: rgba(157, 124, 196, .15);
  border-color: var(--phase-pre-production);
  color: #c1afdc;
}
.post-cell-phase-production      .post-phase-select {
  background: rgba(209, 138, 90, .15);
  border-color: var(--phase-production);
  color: #e0b89f;
}
.post-cell-phase-post_production .post-phase-select {
  background: rgba(225, 174, 101, .15);
  border-color: var(--phase-post);
  color: var(--slate-gold);
}
.post-cell-phase-delivered       .post-phase-select {
  background: rgba(74, 138, 100, .15);
  border-color: var(--phase-delivered);
  color: #86c79f;
}

/* Refresh button — bottom-right of each table */
.post-table-refresh {
  display: flex;
  justify-content: flex-end;
  margin-top: .5rem;
  padding-right: .25rem;
}
.post-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 4px 10px;
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  color: var(--color-muted);
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-soft),
              border-color var(--duration-fast) var(--ease-soft);
}
.post-refresh-btn:hover {
  color: var(--slate-gold);
  border-color: var(--slate-gold);
}

/* State badge — colored pill that cycles Active → Waiting → Done on click.
   Replaces the dropdown for maximum density. Hover tooltip explains.
   Same shape language as .pill / .post-phase-select. */
.post-state-badge {
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 3px 8px;
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-soft),
              color var(--duration-fast) var(--ease-soft);
  white-space: nowrap;
  vertical-align: middle;
}
.post-state-badge-active {
  background: rgba(74, 138, 100, .25);
  color: #86c79f;
  border-color: rgba(74, 138, 100, .45);
}
.post-state-badge-active:hover {
  background: rgba(74, 138, 100, .4);
}
.post-state-badge-waiting {
  background: rgba(225, 174, 101, .25);
  color: var(--slate-gold);
  border-color: rgba(225, 174, 101, .45);
}
.post-state-badge-waiting:hover {
  background: rgba(225, 174, 101, .4);
}
.post-state-badge-done {
  background: rgba(160, 160, 160, .2);
  color: var(--pico-muted-color);
  border-color: rgba(160, 160, 160, .3);
}
.post-state-badge-done:hover {
  background: rgba(160, 160, 160, .35);
}

.post-footnote {
  margin-top: 2rem;
  font-size: 11px;
  color: var(--pico-muted-color);
  text-align: center;
}

/* ----- Forms ----- */

.form-error {
  color: #b91c1c;
  background: #fef2f2;
  padding: .65rem .9rem;
  border-radius: var(--pico-border-radius);
  border: 1px solid #fecaca;
  font-size: .9rem;
}

.otp-input {
  font-size: 1.75rem;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.login-sent-help {
  margin-top: 1.5rem;
  font-size: .9rem;
  color: var(--pico-muted-color);
}

label small {
  color: var(--pico-muted-color);
  font-weight: normal;
}

/* ----- Tables (general polish) ----- */

figure {
  overflow-x: auto;
}
table a {
  color: var(--pico-color);
  text-decoration: none;
}
table a:hover {
  text-decoration: underline;
}

/* =========================================================================
   Company-edit page — client info + inline contacts editor.
   ========================================================================= */

.company-edit-page {
  /* Left-aligned so the breadcrumb + title sit under the ONCE logo, not
     centered. Inner sections (form, contacts list, projects table) cap
     their own width when it benefits readability. */
  margin: 1.5rem 0 3rem;
}
.company-edit-form,
.company-contacts-section,
.company-projects-section {
  max-width: 900px;  /* keep the whole page column readable; left-aligned */
}
.company-edit-page .breadcrumb-tight {
  margin: 0 0 .35rem;
  font-size: 12px;
}
.company-edit-page .breadcrumb-tight ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap;
}
.company-edit-page .breadcrumb-tight li {
  padding: 0 .35rem 0 0;
  color: var(--pico-muted-color);
}
.company-edit-page .breadcrumb-tight li + li::before {
  content: '/';
  margin-right: .35rem;
  color: var(--pico-muted-color);
  opacity: .5;
}
.company-edit-page .breadcrumb-tight a {
  color: var(--pico-muted-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.company-edit-page .breadcrumb-tight a:hover {
  color: var(--slate-cream);
  border-bottom-color: currentColor;
}
/* .company-edit-title — styled via the shared page-title rule above.
   Only owns its bottom margin (the company-edit page wants more
   breathing room before the form than the other title pages). */
.company-edit-title {
  margin-bottom: var(--space-4);
}

/* ─── Compact head row ───────────────────────────────────────
   Logo (small square, ~80px) sits to the LEFT of the name + short
   inputs. Notes + actions flow under the whole thing. The two are
   siblings (logo block has its own HTMX form; can't nest). */
.company-edit-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  margin: 0 0 2rem;
}
@media (max-width: 700px) {
  .company-edit-head { grid-template-columns: 1fr; }
}

/* ─── v2 CRM layout (company-edit-v2) ─────────────────────────
   Sections, left-to-right + top-to-bottom:
     1. .company-co-info           form side (left) + financial tiles (right)
     2. .company-body-grid         main column (2fr) + contacts rail (1fr)
        ├ .company-body-main       Active projects → Notes → Archived → Invoices
        └ .company-body-aside      Contacts list

   Producers asked for HubSpot-style at-a-glance financials + a contacts
   sidebar. This is that layout, but tighter and Slate-dark. */
.company-co-info {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
@media (max-width: 1000px) {
  .company-co-info { grid-template-columns: 1fr; gap: 1.75rem; }
}
.company-co-info-form-side {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 540px) {
  .company-co-info-form-side { grid-template-columns: 1fr; }
}
.company-edit-form-co { margin: 0; }

/* Financial tiles — small uppercase label + amount. Six fit comfortably
   in a 3-col grid on the right side. Hover title spells out the math. */
.company-financials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1.25rem;
  align-self: stretch;
}
@media (max-width: 700px) {
  .company-financials { grid-template-columns: repeat(2, 1fr); }
}
.company-fin-tile {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  cursor: help;
  min-width: 0;
}
.company-fin-label {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.company-fin-value {
  font-family: var(--pico-font-family);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--slate-cream);
  font-variant-numeric: tabular-nums;
}
.company-fin-value-success { color: var(--color-success); }
.company-fin-value-gold    { color: var(--slate-gold); }
.company-fin-value-warn    { color: var(--slate-gold); }
.company-fin-sub {
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 400;
  margin-left: .15rem;
}

/* ─── Body grid: main column + contacts aside ─────────────── */
.company-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 2.5rem;
  margin: 0 0 3rem;
}
@media (max-width: 900px) {
  .company-body-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.company-body-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.company-body-aside {
  min-width: 0;
}

/* ─── Notes section — rich-text editor with collapsible toolbar.
   Trix's toolbar lives as a SIBLING to <trix-editor>, before it in the
   DOM. We hide it by default and reveal on :focus-within of the wrap
   so the closed state is a quiet text block, no busy button row. */
.company-notes-section {
  margin: 0;
}
.company-notes-wrap {
  position: relative;
}
.company-notes-wrap trix-toolbar {
  /* Default: hidden. Producer sees just the text area + placeholder. */
  display: none;
}
.company-notes-wrap:focus-within trix-toolbar,
.company-notes-wrap.is-expanded trix-toolbar {
  /* On focus, the toolbar appears above the editor as usual. */
  display: block;
}
.company-notes-actions {
  margin-top: .65rem;
  display: flex;
  gap: .65rem;
}

/* ─── Archived projects collapsible — uses .dev-collapsible from the
   dev page so the +/− indicator is consistent. Override the section
   title styling since it's living inside a <summary>. */
.company-archived-details > summary {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.company-archived-details[open] > summary {
  margin-bottom: 1rem;
  color: var(--slate-cream);
}

/* ─── Recent invoices list — link rows with status pill on the right.
   Mirrors the per-project Invoices panel so the visual language stays
   consistent. */
.company-invoices-section { margin: 0; }
.company-recent-invoices {
  list-style: none;
  margin: 0;
  padding: 0;
}
.company-recent-invoice-link {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap: .85rem;
  align-items: baseline;
  padding: .55rem 0;
  border-top: 1px solid var(--slate-line-dark);
  text-decoration: none;
  color: var(--slate-cream);
  font-size: 13px;
}
.company-recent-invoices li:first-child .company-recent-invoice-link {
  border-top: 0;
}
.company-recent-invoice-num {
  font-family: var(--pico-font-family-monospace);
  font-size: 11px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.company-recent-invoice-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-recent-invoice-link:hover .company-recent-invoice-desc {
  color: var(--slate-gold);
}
.company-recent-invoice-date {
  font-size: 11px;
  color: var(--color-muted);
}
.company-recent-invoice-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
@media (max-width: 700px) {
  .company-recent-invoice-link {
    grid-template-columns: 1fr auto;
    gap: .4rem;
    row-gap: .15rem;
  }
  .company-recent-invoice-num,
  .company-recent-invoice-date { grid-column: 1 / -1; font-size: 10px; }
}

.company-edit-form { margin: 0; }
.company-edit-fields {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: .85rem;
}
.company-edit-field { margin: 0; }
.company-edit-label {
  display: block;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-bottom: .2rem;
}

/* Name + Short on one row — name takes the bulk, short stays narrow.
   Short is typically 3–6 chars so it doesn't need full width. */
.company-edit-name-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: .75rem;
}
@media (max-width: 540px) {
  .company-edit-name-row { grid-template-columns: 1fr; }
}

/* Tighter form inputs throughout the company-edit page — less padding,
   shorter height. Pico's defaults waste vertical room. */
.company-edit-page .slate-form-input {
  height: 36px;
  padding: 0 .65rem;
  margin: 0;
}

.company-edit-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
/* Defeat Pico's `button { width: 100% }` so Save stays inline-sized. */
.company-edit-actions .slate-btn { width: auto; min-width: 7rem; }
/* Cancel as a quiet text link instead of a button — less visual weight,
   more obviously secondary. */
.slate-btn-link-cancel {
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0;
  border: 0;
  background: transparent;
  transition: color var(--duration-fast) var(--ease-soft);
}
.slate-btn-link-cancel:hover { color: var(--slate-cream); }

/* ---- Contacts list -------------------------------------------------- */
.company-contacts-section {
  margin: 0 0 2rem;
}
.company-contacts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.company-contacts-title {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .65rem;
}
.company-contacts-add-form { margin: 0; display: inline-flex; }
.company-contacts-add-form .slate-btn { font-size: 12px; height: 28px; padding: 0 .75rem; }

.company-contacts-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.company-contact-card {
  border: 1px solid var(--slate-line-dark);
  padding: .65rem .75rem;
  background: rgba(245, 239, 227, .02);
  transition: border-color .15s ease;
}
.company-contact-card:hover { border-color: var(--pico-muted-color); }
.company-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr 28px;
  grid-template-areas:
    "name  role  remove"
    "email phone remove";
  gap: .35rem .4rem;
  margin-bottom: .35rem;
}
.company-contact-name   { grid-area: name; }
.company-contact-role   { grid-area: role; }
.company-contact-email  { grid-area: email; }
.company-contact-phone  { grid-area: phone; }
.company-contact-remove { grid-area: remove; align-self: start; }
.company-contact-input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  color: var(--slate-cream);
  background: transparent;
  border: 1px solid transparent;
  padding: .3rem .45rem;
  margin: 0 !important;
  width: 100%;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
}
.company-contact-input::placeholder {
  color: var(--pico-muted-color);
  font-style: italic;
  opacity: .7;
}
.company-contact-input:hover {
  background: rgba(245, 239, 227, .03);
  border-color: var(--slate-line-dark);
}
.company-contact-input:focus {
  background: rgba(245, 239, 227, .05);
  border-color: var(--slate-gold);
  outline: none;
}
.company-contact-name { font-weight: 600; }
.company-contact-notes {
  resize: none;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.55;
  width: calc(100% - 28px - .4rem);
  padding: .65rem .6rem .8rem !important;
  min-height: 3.2rem;
  box-sizing: border-box;
}
.company-contact-remove {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--pico-muted-color);
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  width: 28px;
  height: 28px;
  align-self: center;
  transition: color .15s ease, border-color .15s ease;
}
.company-contact-remove:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ---- Logo block — compact preview + upload control --------------------
   Lives in the left column of .company-edit-head. Small 80px square so
   the name/short inputs to its right can dominate. Upload button sits
   directly below the preview, no surrounding card. */
.company-logo-block {
  margin: 0;
  padding-top: 1.05rem;
}
.company-logo-error {
  margin: 0 0 .5rem;
  padding: .4rem .6rem;
  background: rgba(181, 98, 98, .08);
  border-left: 3px solid var(--color-danger);
  color: #d97570;
  font-size: 12px;
  line-height: 1.4;
  max-width: 80px;
}
.company-logo-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
  width: 80px;
}
.company-logo-preview {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--slate-line-dark);
  overflow: hidden;
}
.company-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.company-logo-placeholder {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  opacity: .65;
}
.company-logo-controls {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.company-logo-upload-form,
.company-logo-clear-form { margin: 0; }
.company-logo-upload-btn {
  cursor: pointer;
  position: relative;
  font-size: 11px;
  height: 26px;
  padding: 0 .5rem;
  margin: 0;
  width: 100%;
  justify-content: center;
}
.company-logo-file-input {
  /* Visually hide but stay focusable + clickable via the wrapping label. */
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}
.company-logo-clear-btn {
  font-size: 10px;
  height: 22px;
  padding: 0 .4rem;
  width: 100%;
  color: var(--pico-muted-color);
}
.company-logo-clear-btn:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ---- Trix editor — Slate-themed override.
   Pico + Trix defaults render in light tones with blue accents on the
   toolbar. Force a dark, cream-on-near-black look that matches the rest
   of the company-edit page. Only applied inside .company-edit-page so
   the proposal builder's existing Trix instances are untouched. */
.company-edit-page trix-editor {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .5rem .65rem;
  font-family: var(--pico-font-family);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0;
}
.company-edit-page trix-editor:focus {
  border-color: var(--slate-gold);
  box-shadow: 0 0 0 .125rem rgba(225, 174, 101, .25);
  outline: none;
}
.company-edit-page trix-toolbar {
  background: rgba(245, 239, 227, .03);
  border: 1px solid var(--slate-line-dark);
  border-bottom: none;
  padding: .25rem;
}
.company-edit-page trix-toolbar .trix-button-group {
  border-color: var(--slate-line-dark);
  background: transparent;
}
.company-edit-page trix-toolbar .trix-button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--slate-cream);
  filter: brightness(.85);
}
.company-edit-page trix-toolbar .trix-button:hover:not([disabled]) {
  background: rgba(225, 174, 101, .1);
  border-color: var(--slate-line-dark);
  filter: brightness(1.1);
}
.company-edit-page trix-toolbar .trix-button.trix-active {
  background: var(--slate-gold-soft);
  border-color: var(--slate-gold);
  filter: brightness(1.2);
}
.company-edit-page trix-toolbar .trix-button[disabled] { opacity: .35; }
.company-edit-page trix-toolbar .trix-dialog {
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
}
.company-edit-page trix-toolbar .trix-dialog input {
  background: rgba(245, 239, 227, .03) !important;
  border: 1px solid var(--slate-line-dark) !important;
  color: var(--slate-cream) !important;
}
.company-edit-page .company-edit-help {
  font-size: 11px;
  font-weight: 400;
  color: var(--pico-muted-color);
  font-style: italic;
  letter-spacing: normal;
  text-transform: none;
}

.company-edit-danger {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--slate-line-dark);
}
.company-edit-danger > summary {
  font-size: 12px;
  color: var(--pico-muted-color) !important;
  cursor: pointer;
  list-style: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none;
}
.company-edit-danger > summary::-webkit-details-marker { display: none; }
.company-edit-danger > summary::marker { content: ''; }
.company-edit-danger > summary::before {
  content: '▸';
  margin-right: .4rem;
  opacity: .5;
}
.company-edit-danger[open] > summary::before { content: '▾'; }
.company-edit-danger-warning {
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
  margin: .5rem 0;
}
.company-edit-danger-btn { color: var(--color-danger) !important; border-color: var(--color-danger) !important; }

/* ---- Slate form inputs — used on the company edit form and any future
   structured-edit page that wants always-visible bordered fields (as
   opposed to the inline-edit pattern used on Project Doc and Board). */
.slate-form-input {
  display: block;
  width: 100%;
  font-family: var(--pico-font-family);
  font-size: 14px;
  line-height: 1.45;
  color: var(--slate-cream);
  background: rgba(245, 239, 227, .02);
  border: 1px solid var(--slate-line-dark);
  padding: .5rem .65rem;
  margin: 0 !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
  /* Suppress Pico's blue focus ring / spacing defaults */
  --pico-form-element-border-color: var(--slate-line-dark);
  --pico-form-element-focus-color: var(--slate-gold);
}
.slate-form-input::placeholder {
  color: var(--pico-muted-color);
  font-style: italic;
  opacity: .7;
}
.slate-form-input:hover {
  background: rgba(245, 239, 227, .04);
  border-color: var(--pico-muted-color);
}
.slate-form-input:focus {
  background: rgba(245, 239, 227, .05);
  border-color: var(--slate-gold);
  outline: none;
}
.slate-form-textarea { resize: vertical; min-height: 5rem; }

/* ---- Cross-referenced projects under a company --------------------- */
.company-projects-section { margin: 0 0 2rem; }
.company-projects-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.company-projects-title {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .65rem;
}
.company-projects-head .slate-btn { font-size: 12px; height: 28px; padding: 0 .75rem; }

/* =========================================================================
   Admin → Users page — per-user permission toggles.
   ========================================================================= */
.admin-users-page { margin: 1.5rem 0 3rem; }
.admin-users-page .breadcrumb-tight {
  margin: 0 0 .35rem;
  font-size: 12px;
}
.admin-users-page .breadcrumb-tight ul {
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
}
.admin-users-page .breadcrumb-tight li {
  padding: 0 .35rem 0 0;
  color: var(--pico-muted-color);
}
.admin-users-page .breadcrumb-tight li + li::before {
  content: '/';
  margin-right: .35rem;
  color: var(--pico-muted-color);
  opacity: .5;
}
.admin-users-page .breadcrumb-tight a {
  color: var(--pico-muted-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.admin-users-page .breadcrumb-tight a:hover {
  color: var(--slate-cream);
  border-bottom-color: currentColor;
}
.admin-users-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  max-width: 760px;
}
.admin-user-card {
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(245, 239, 227, .02);
  margin: 0;
}
.admin-user-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.admin-user-identity { flex: 1; }
.admin-user-name {
  font-family: var(--pico-font-family-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--slate-cream);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.admin-user-role {
  font-family: var(--pico-font-family);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-transform: uppercase;
}
.admin-user-role-owner    { color: var(--slate-gold); }
.admin-user-role-admin    { color: #7faec9; }
.admin-user-role-producer { color: var(--pico-muted-color); }
.admin-user-role-crew     { color: var(--pico-muted-color); }
.admin-user-email {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  color: var(--pico-muted-color);
  margin-top: .2rem;
}
.admin-user-save { font-size: 12px; height: 28px; padding: 0 .85rem; }

/* Identity edit row — display name + role selector. Compact two-column
   grid sitting between the header and the perms grid. Each field is a
   label + input pair so the save button up top operates on the whole
   form (perms, role, name) in one go. */
.admin-user-identity-edit {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .85rem;
  margin: 0 0 1rem;
}
@media (max-width: 600px) {
  .admin-user-identity-edit { grid-template-columns: 1fr; }
}
.admin-user-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.admin-user-field-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.admin-user-field-input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  color: var(--slate-cream);
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  padding: .4rem .55rem;
  height: 32px;
  margin: 0;
  width: 100%;
}
.admin-user-field-input:focus {
  outline: none;
  border-color: var(--slate-gold);
}

.admin-user-note {
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
  margin: 0;
}
.admin-user-perms {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.admin-user-perm {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center;
  gap: .55rem;
  padding: .35rem .45rem;
  cursor: pointer;
  transition: background .12s ease;
}
.admin-user-perm:hover { background: rgba(245, 239, 227, .03); }
.admin-user-perm input[type="checkbox"] {
  margin: 0 !important;
  width: 16px;
  height: 16px;
  accent-color: var(--slate-gold);
}
.admin-user-perm-label {
  font-family: var(--pico-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-cream);
  white-space: nowrap;
}
.admin-user-perm-desc {
  font-size: 11px;
  color: var(--pico-muted-color);
  font-style: italic;
  line-height: 1.4;
}

/* =========================================================================
   Slate list pages — Dashboard / Projects list / Companies list / etc.
   Shared aesthetic: big uppercase title, slate buttons, dark-theme table.
   ========================================================================= */

.slate-list-page {
  /* Tight top margin so the page title sits just below the nav —
     matches .post-doc-page (Status Board). Every list/index page now
     anchors its title in the same vertical slot. */
  margin: 1.5rem 0 6rem;
}
.slate-list-header {
  margin: 0 0 3rem;
}
/* Optional variant — title + sub on the left, primary action button(s)
   on the right, all on one row. Used wherever the page has a single
   primary action that belongs next to the title (Projects, Companies,
   any list with a + New button). */
.slate-list-header-with-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.slate-list-header-with-action .slate-list-header-text { min-width: 0; }
.slate-list-header-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .slate-list-header-with-action { flex-direction: column; align-items: flex-start; }
}
.slate-list-search-row {
  margin: 0 0 1.5rem;
  max-width: 360px;
}
/* ─── Canonical page title ─── shared by .slate-list-title (list/index
   pages), .project-title (detail pages: Board, Project Doc, Estimator,
   Proposal Builder, Admin Libraries), and the per-section title classes
   below. All page-level H2s look the same. The scoped overrides on
   .estimator-page / .project-doc-page are now redundant but harmless. */
.slate-list-title,
.project-title,
.project-form-title,
.company-edit-title {
  font-family: var(--pico-font-family-display);
  font-size: var(--text-headline);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--slate-cream);
  margin: 0 0 var(--space-1);
}
.slate-list-sub {
  color: var(--pico-muted-color);
  font-size: 13px;
  margin: 0;
}
.slate-list-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}

.slate-list-table-wrap { /* no overflow — let the table grow */ }
.slate-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.slate-list-table thead th {
  text-align: left;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  padding: .65rem .7rem;
  border-bottom: 1px solid var(--slate-line-dark);
  background: transparent;
}
.slate-list-table tbody td {
  padding: .8rem .7rem;
  border-bottom: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  vertical-align: middle;
}
.slate-list-table tbody tr:hover { background: rgba(225, 174, 101, .04); }
.slate-list-num { text-align: right; }
/* Override the thead default left-align when a column is numeric — the
   header must match its data column. Specificity bump needed because
   `.slate-list-table thead th` (0,1,2) beats plain `.slate-list-num` (0,1,0). */
.slate-list-table thead th.slate-list-num { text-align: right; }
.slate-list-muted { color: var(--pico-muted-color); }
.slate-list-link {
  color: var(--slate-cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-weight: 600;
}
.slate-list-link:hover {
  color: var(--slate-gold);
  border-bottom-color: currentColor;
}
.slate-list-edit {
  color: var(--slate-gold);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.slate-list-edit:hover { color: var(--slate-cream); }

/* Deliverable count after the project name — small muted aside. */
.slate-list-deliverable-count {
  font-family: var(--pico-font-family);
  font-size: 11px;
  color: var(--pico-muted-color);
  margin-left: .35rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Board-link button — small uppercase, lives in the right-most column.
   "Board ↗" — matches the tone of the other secondary nav links. */
.slate-list-board-link {
  display: inline-block;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid var(--slate-line-dark);
  border-radius: 0;
  transition: color .15s ease, border-color .15s ease;
}
.slate-list-board-link:hover {
  color: var(--slate-gold);
  border-color: var(--slate-gold);
}

/* Search input — square, sharp, no built-in browser chrome.
   Lives in its own row under the header now (not next to the action
   button). Slate look = square corners, no magnifying-glass icon, no
   X-clear button — just a quiet filter strip. */
.slate-list-search {
  width: 100%;
  font-family: var(--pico-font-family);
  font-size: 13px;
  background: rgba(245, 239, 227, .02);
  border: 1px solid var(--slate-line-dark);
  border-radius: 0;            /* defeat Pico's rounded default */
  color: var(--slate-cream);
  padding: .4rem .7rem;
  margin: 0 !important;
  box-shadow: none !important;
  height: 34px;
  -webkit-appearance: none;    /* kill the default macOS/iOS search pill */
  appearance: none;
}
/* Suppress the built-in search decorations (magnifying glass, X) so the
   input reads as a plain text field — the whole "bubble" look the user
   flagged comes from these browser defaults. */
.slate-list-search::-webkit-search-decoration,
.slate-list-search::-webkit-search-cancel-button,
.slate-list-search::-webkit-search-results-button,
.slate-list-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}
.slate-list-search::placeholder {
  color: var(--pico-muted-color);
  font-style: italic;
  opacity: .65;
}
.slate-list-search:focus {
  border-color: var(--slate-gold);
  outline: none;
  box-shadow: none !important;
}

/* Inline status select — same visual treatment as the static .status
   pill (font, size, tracking, border, radius) so the read-only pill
   and the editable dropdown read as the same family. The chevron is
   the only "I am editable" affordance. Color inherits via the
   .status-<value> class on the same element. */
.projects-list-status-select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  padding: 3px 22px 3px 8px;          /* extra right padding for chevron */
  border-radius: 2px;
  border: 1px solid currentColor;
  background-color: transparent;
  /* Chevron — small CSS triangle, no image needed. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) center, calc(100% - 6px) center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  margin: 0 !important;
  box-shadow: none !important;
  width: auto;
  max-width: 100%;
}
.projects-list-status-select:focus {
  outline: none;
  filter: brightness(1.1);
}
.projects-list-status-select option {
  background: var(--slate-ink-2);
  color: var(--slate-cream);
}

/* Short-name chip — sits next to the formal company name on the
   Companies list so producers can see both at a glance. Gray, not gold:
   the formal name is the headline; this is reference. Slightly larger
   than before so it reads cleanly without leaning on color for emphasis. */
.slate-list-shortname {
  display: inline-block;
  margin-left: .55rem;
  padding: 1px 6px;
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: rgba(245, 239, 227, .04);
  border: 1px solid var(--slate-line-dark);
  vertical-align: middle;
}

/* Active-project note — small italic muted line after the short-name pill
   on the Companies list. Reads as a sentence ("2 active projects"), no
   bubble, no chrome. */
.slate-list-active-note {
  margin-left: .65rem;
  font-size: 12px;
  font-style: italic;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* =========================================================================
   Development page — revenue projection + measure to goal.
   ========================================================================= */

/* Headline strip — projected vs goal, big numbers, in-line layout. */
/* Hero — open content on the page, no card chrome. Space below
   separates it from the next section. */
.development-headline {
  margin: 0 0 4rem;
  padding: 0;
  position: relative;
}
/* Linear hero — pacing block full-width on top, then a two-column
   row with Cash stats on the left + Needs Attention on the right.
   The pacing arc reads as the headline; the row below is the working
   board: how much money's in flight, what needs touching. */
.dev-hero {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* ─── Pacing block ─── the page's visual anchor. Big projected total,
   small uppercase mono eyebrow above, goal/verdict line + bar below,
   italic help text at the bottom. No tiles, no chrome — pure typography. */
.dev-hero-pacing {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.dev-pacing-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-bottom: .25rem;
}
.dev-pacing-amount {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: .9;
  color: var(--slate-cream);
  font-variant-numeric: tabular-nums;
}
.dev-pacing-help {
  font-family: 'cormorant', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--pico-muted-color);
  margin: .85rem 0 0;
  max-width: 56ch;
}
.dev-pacing-goal {
  font-size: 14px;
  color: var(--color-muted);
  letter-spacing: -.005em;
}
.dev-pacing-goal-edit {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--slate-cream);
  cursor: pointer;
  box-shadow: none !important;
  border-bottom: 1px dotted transparent;
  transition: border-color var(--duration-fast) var(--ease-soft);
}
.dev-pacing-goal-edit:hover { border-bottom-color: currentColor; }
.dev-pacing-sep { margin: 0 .35rem; opacity: .5; }
.dev-pacing-verdict {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dev-pacing-on     { color: var(--slate-cream); }
.dev-pacing-ahead  { color: var(--color-success); }
.dev-pacing-behind { color: var(--color-danger); }

/* Horizontal bar — thin, restrained. Fill = goal progress, tick = pace target.
   Full-width: spans the hero so the eye reads the year as a long line.
   The pace tick lands wherever today sits in the year. */
.dev-pacing-bar {
  position: relative;
  height: 4px;
  background: rgba(245, 239, 227, .06);
  margin-top: .35rem;
}
.dev-pacing-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--slate-gold);
  transition: width .35s ease;
}
.dev-pacing-bar-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--slate-cream);
  transform: translateX(-1px);
  cursor: help;
}
.development-headline.is-behind  .dev-pacing-bar-mark { background: var(--color-danger); }
.development-headline.is-ahead   .dev-pacing-bar-mark { background: var(--color-success); }

/* ─── Cash stats ─── five figures across the row. Same set + order as
   /invoices for parity. Responsive: collapses to 3 on tablet, 2 on
   mobile. Padded by a top rule so the row reads as separate from
   the pacing block above. */
.dev-hero-stats {
  /* M32: 7 tiles now — New Signed / Proposed / Invoiced / Paid /
     To Be Invoiced / Outstanding / Tax Incentives. */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--slate-line-dark);
}
@media (max-width: 1400px) {
  .dev-hero-stats { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
@media (max-width: 900px) {
  .dev-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media (max-width: 600px) {
  .dev-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
.dev-hero-stat-label {
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: .35rem;
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
}
.dev-hero-stat-value {
  font-family: var(--pico-font-family);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--slate-cream);
  font-variant-numeric: tabular-nums;
}
.dev-hero-stat-value-empty {
  color: var(--color-muted);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}
.dev-hero-stat-meta {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.5;
}
.dev-hero-stat-meta strong {
  color: var(--slate-cream);
  font-weight: 600;
}
/* Cash stat color variants — same vocabulary as elsewhere. */
.dev-hero-stat-signed      { color: var(--slate-cream); }
.dev-hero-stat-proposed    { color: #7faec9; }   /* cool blue for pending pipeline */
.dev-hero-stat-tax         { color: var(--slate-gold); opacity: .9; }
/* M32: tiles are now anchor tags — make them feel like buttons. Active
   state = currently filtering by this tile. */
.dev-hero-stat-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: .35rem .55rem;
  margin: -.35rem -.55rem;
  border-radius: 2px;
  transition: background .12s ease, box-shadow .12s ease;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.dev-hero-stat-link:hover {
  background: rgba(245, 239, 227, .04);
}
.dev-hero-stat-link.is-active {
  background: rgba(225, 174, 101, .08);
  box-shadow: inset 0 0 0 1px var(--slate-gold);
}

/* M32: state filter chips above the project table. */
.development-filter-chips {
  display: flex;
  gap: .5rem;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}
.development-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  border-radius: 2px;
  text-decoration: none;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.development-filter-chip:hover {
  color: var(--slate-cream);
  border-color: rgba(245, 239, 227, .3);
}
.development-filter-chip.is-active {
  color: var(--slate-ink);
  background: var(--slate-gold);
  border-color: var(--slate-gold);
}
.development-filter-chip-count {
  font-size: 10px;
  opacity: .7;
}
.development-filter-chip.is-active .development-filter-chip-count { opacity: .85; }

/* M32: active filter caption in the section head. */
.development-section-filter-active {
  margin-left: .5rem;
  font-family: var(--pico-font-family);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
}
.development-section-filter-active strong {
  color: var(--slate-cream);
  font-weight: 600;
}
.development-section-clear {
  margin-left: .35rem;
  color: var(--slate-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.development-section-clear:hover { color: var(--slate-cream); }

/* M32: sortable table headers. */
.dev-sortable-th {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color .12s ease;
}
.dev-sortable-th:hover { color: var(--slate-cream); }
.dev-sortable-th.dev-sort-asc::after,
.dev-sortable-th.dev-sort-desc::after {
  content: '';
  display: inline-block;
  margin-left: .35rem;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  vertical-align: middle;
}
.dev-sortable-th.dev-sort-asc::after  { border-bottom: 5px solid var(--slate-gold); }
.dev-sortable-th.dev-sort-desc::after { border-top: 5px solid var(--slate-gold); }
/* M29: subtitle under the New Signed value showing the supplementary
   streams baked into it (tax incentive + supporter funds). Muted so it
   reads as context, not a competing headline. */
.dev-hero-stat-sub {
  margin-top: .15rem;
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: .02em;
  white-space: nowrap;
}
.dev-hero-stat-collected   { color: var(--color-success); }
.dev-hero-stat-outstanding { color: var(--slate-gold); }
.dev-hero-stat-tbi         { color: var(--slate-cream); opacity: .9; }
/* Quiet reference line under the year tiles — lifetime collected. */
.dev-hero-lifetime {
  margin: .85rem 0 0;
  font-size: 12px;
  color: var(--color-muted);
  font-style: italic;
}
.dev-hero-lifetime strong {
  font-style: normal;
  color: var(--slate-cream);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Goal-edit form — when toggled visible by clicking the goal inside
   the arc, the form drops below the hero in its own little row. */
.dev-hero-goal-edit-wrap { margin-top: 1.5rem; }

/* Meta line below the hero — months in, signed, pipeline. Single
   quiet line, no chrome, separated by middots. */
.dev-hero-meta {
  margin: 2rem 0 0;
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.6;
}
.dev-hero-meta strong { color: var(--slate-cream); font-weight: 600; }
.dev-hero-meta-sep { margin: 0 .45rem; opacity: .5; }


/* ─── Collapsible section (<details>/<summary>) ───────────────
   Quarterly trajectory and other on-demand sections use this. The
   summary acts as the section title; a small +/− indicator on the
   right shows state. No default disclosure triangle.

   IMPORTANT defensive overrides: Pico's global `details > summary`
   styles add padding, card-bg, border, and a background-image chevron
   via `::after`. Pico also colors summary text with its link blue.
   We have to nuke all of that explicitly — otherwise the collapsed
   row reads bluish with a doubled-up chevron + plus indicator. */
.dev-collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: 0;
  /* Kill Pico's default chrome on summary. */
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--color-muted);
  transition: color var(--duration-fast) var(--ease-soft);
}
.dev-collapsible[open] > summary {
  background: transparent;
  border: 0;
  margin-bottom: 2rem;
}
.dev-collapsible > summary::-webkit-details-marker { display: none; }
.dev-collapsible > summary::marker { display: none; content: ""; }
.dev-collapsible > summary::after {
  content: "+";
  font-family: var(--pico-font-family-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: auto;
  /* Override Pico's chevron background-image + sizing on summary::after. */
  background-image: none !important;
  background: transparent;
  width: auto;
  height: auto;
  float: none;
  transform: none;
  display: inline-block;
  transition: none;
}
.dev-collapsible[open] > summary::after {
  content: "−";
  transform: none;
}
.dev-collapsible > summary:hover { color: var(--slate-cream); }


/* ─── Needs Attention — cleaned up ───────────────────────────
   Per-tile header is now a single muted label line with an inline
   count. No chip backgrounds, no oversized count number. Items list
   sits directly beneath; overdue gets the lone red rail. */
.dev-na-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
}
.dev-na-tile {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}
/* Overdue gets red text on the label + ages (below) instead of a
   left rail — the text alone reads loudly enough against the dark
   bg, and the rail felt detached from the content. */
.dev-na-tile-label {
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  cursor: help;
}
.dev-na-tile-overdue .dev-na-tile-label { color: var(--color-danger); }
.dev-na-tile-count {
  font-family: var(--pico-font-family);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.dev-na-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dev-na-list li { margin: 0; padding: 0; }
.dev-na-list li a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: baseline;
  padding: .65rem 0;
  border-top: 1px solid var(--slate-line-dark);
  font-size: 13px;
  color: var(--slate-cream);
  text-decoration: none;
}
.dev-na-list li:first-child a { border-top: 0; padding-top: 0; }
.dev-na-list li a:hover .dev-na-desc { color: var(--slate-gold); }
.dev-na-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-soft);
}
.dev-na-age {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--color-muted);
}
.dev-na-tile-overdue .dev-na-age {
  color: var(--color-danger);
}
.dev-na-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--color-muted);
}
.development-headline-amount,
.development-headline-goal {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.development-headline-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
/* Label row — pairs the GOAL caption with a small inline "edit" link so
   the closed-state height matches the Projected column exactly. */
.development-headline-label-row {
  display: inline-flex;
  align-items: baseline;
  gap: .65rem;
}
.development-headline-value {
  font-family: var(--pico-font-family);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--slate-gold);
  line-height: 1;
}
.development-headline-value-empty {
  color: var(--pico-muted-color);
  font-style: italic;
  font-size: 24px;
  font-weight: 600;
}
.development-headline-vs {
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  padding-bottom: .55rem;
}
.development-headline-goal { align-items: flex-start; }
.development-headline-goal .development-headline-value { color: var(--slate-cream); }

/* Goal-edit popover — same <details>-free pattern (just a plain dropdown). */
.development-goal-edit { margin-top: .4rem; }
.development-goal-edit-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 !important;
  box-shadow: none !important;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.development-goal-edit-toggle:hover { color: var(--slate-gold); }
.development-goal-form {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .35rem 0 0;
}
.development-goal-prefix { color: var(--pico-muted-color); font-size: 14px; }
.development-goal-input {
  font-family: var(--pico-font-family-monospace);
  font-size: 14px;
  background: rgba(245, 239, 227, .04);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .25rem .55rem;
  width: 140px;
  margin: 0 !important;
  box-shadow: none !important;
}
.development-goal-input:focus { border-color: var(--slate-gold); outline: none; }
.development-goal-form .slate-btn { height: 28px; font-size: 12px; padding: 0 .75rem; }

/* Progress bar — fills based on weighted/goal ratio, capped at 100%.
   The pace marker (vertical line) shows where you SHOULD be at this
   point in the year — gap between fill and marker reads as
   ahead/behind at a glance. */
.development-progress { margin-top: 1rem; }
.development-progress-track {
  position: relative;       /* anchor for the absolutely-positioned marker */
  height: 12px;
  background: rgba(245, 239, 227, .05);
  border: 1px solid var(--slate-line-dark);
  overflow: visible;        /* let the pace marker stick out top + bottom */
}
.development-progress-fill {
  height: 100%;
  background: var(--slate-gold-gradient);
  transition: width .35s ease;
}
/* Vertical pace marker. Sits inside the track at left:N%, extends a
   few px above + below to read as a tick mark rather than a "wall." */
.development-progress-pace-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--slate-cream);
  transform: translateX(-1px);  /* center the line on its position */
  pointer-events: none;
  cursor: help;
  pointer-events: auto;
}
/* Tint the marker by pace state so a glance reads "ahead/behind". */
.development-progress.is-behind  .development-progress-pace-marker { background: var(--color-danger); }
.development-progress.is-ahead   .development-progress-pace-marker { background: var(--color-success); }
.development-progress.is-on-pace .development-progress-pace-marker { background: var(--slate-cream); }

.development-progress-pct {
  margin-top: .55rem;
  font-size: 12px;
  color: var(--pico-muted-color);
  letter-spacing: .02em;
}
.development-progress-pct strong { color: var(--slate-cream); font-weight: 700; }
.development-progress-sep { margin: 0 .35rem; opacity: .5; }

/* Verbal pace verdict — picks up the same color as the marker. */
.development-pace-on     { color: var(--slate-cream)   !important; }
.development-pace-ahead  { color: var(--color-success)              !important; }
.development-pace-behind { color: var(--color-danger)              !important; }

.development-signed-line {
  margin: .85rem 0 0;
  font-size: 13px;
  color: var(--pico-muted-color);
}
.development-signed-line strong { color: var(--slate-cream); font-weight: 700; }

/* Cash strip — appears below the forecast headline. Three blocks: real
   money totals (Invoiced/Collected/Outstanding) so the dashboard answers
   "what's in the bank?" alongside "what will we make?". */
/* Cash strip — open composition, no card. Lots of space before and
   after; the figures stand on their own. Hairline divider below as
   section separator (handled by the section beneath it). */
.development-cash {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin: 0 0 5rem;
  padding: 0 0 4rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.development-cash-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-bottom: .35rem;
}
.development-cash-amount {
  font-family: var(--pico-font-family);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--slate-cream);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.development-cash-collected   { color: var(--color-success); }
.development-cash-outstanding { color: var(--slate-gold); }

/* Per-project table picked up four more columns (Invoiced/Collected/
   Remaining + the existing ones). Tighten cell padding so the table
   stays readable at typical widths. */
.development-projects-table th,
.development-projects-table td {
  padding-left: .55rem !important;
  padding-right: .55rem !important;
}
.development-projects-collected { color: var(--color-success); }


/* ─── Test-mode pill ─── shown on invoice surfaces when STRIPE_SECRET_KEY
   is a test key. Uses the warning intent (amber) — distinct from the
   gold accent color so the brain doesn't confuse "test mode" with
   "important action." */
.stripe-test-mode-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-2);
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  padding: 3px 8px;
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  background: rgba(212, 160, 90, .10);
  border-radius: 2px;
  cursor: help;
}
.slate-list-title-row {
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* Section titles within the page — quieter eyebrow style. The visual
   weight comes from spacing around the section, not from a heavy title
   with a bottom border. (Apple sub-headers: small, restrained, lots of
   space.) */
.development-section-title {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 2rem;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Breakdown table — same base as slate-list-table, with row tinting per state. */
.development-breakdown { margin-bottom: 2.5rem; }
.development-breakdown-table tbody tr:hover { background: transparent; }
.development-bucket-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.development-bucket-weighted { color: var(--slate-gold); font-weight: 700; }
.development-bucket-row-total td,
.development-bucket-total td {
  border-top: 2px solid var(--slate-line-dark);
  border-bottom: none;
  padding-top: 1rem;
}
.development-bucket-total .development-bucket-label { color: var(--slate-cream); }

/* ─── Quarterly trajectory grid (M18-2) ─────────────────────────
   Replaced the state-weighted breakdown table. Time on X (Q1-Q4 + Total),
   metric on Y (Signed / Forecast / Invoiced / Collected). Current quarter
   gets a subtle gold-tinted column so the producer's eye lands there. */
.development-quarterly { margin: 0 0 4rem; }
.development-quarterly-table tbody tr:hover { background: transparent; }
.development-quarterly-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: help;
}
/* Highlight the column for the current quarter — subtle vertical tint,
   not a hard border, so it reads "this is where we are" without
   shouting. Applied to both the th and every td in that column. */
.development-quarterly-table th.is-current-quarter,
.development-quarterly-table td.is-current-quarter {
  background: rgba(196, 154, 79, .06);    /* subtle gold wash */
}
.development-quarterly-table th.is-current-quarter {
  color: var(--slate-gold);
}
/* Total column gets its own treatment so it's distinct from the
   per-quarter cells. */
.development-quarterly-total-col {
  border-left: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  font-weight: 700;
}
/* Make the Collected row pop green (matches the M17-6 cash strip). */
.development-quarterly-collectedCents td { color: var(--color-success); }
.development-quarterly-collectedCents .development-quarterly-label { color: var(--color-success); }
.development-quarterly-unscheduled {
  margin: .9rem 0 0;
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
}
.development-quarterly-unscheduled strong { color: var(--slate-gold); font-weight: 700; }


/* ─── Needs Attention strip (M18-3) ─────────────────────────────
   Four tiles, auto-sized via auto-fit grid so 0/1/2/3/4 tiles all
   look intentional. Each tile is a small information card with a
   count, a label, and a top-N list of clickable items. Designed to
   be glanced at, not studied — bigger counts pull the eye, small
   text inside lets the producer drill in only if interested. */
.development-attention { margin: 0 0 5rem; padding-bottom: 4rem; border-bottom: 1px solid var(--slate-line-dark); }
.development-attention-total {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--slate-gold);
  margin-left: .35rem;
}
.development-attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3rem;
}
/* Tiles — no border, no background. Space separates them. Apple/
   Ammunition restraint: structure through composition, not chrome. */
.development-attention-tile {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  min-width: 0;
}
/* Overdue tile — the only one that gets a visual flag (left rail in
   danger color). Everything else stays open and quiet. */
.development-attention-overdue {
  padding-left: 1rem;
  border-left: 2px solid var(--color-danger);
}
/* Tile header — flat composition. Label + count + hint sit inline,
   minimal visual weight. The TILE chrome already disappeared; the
   header drops its dark backdrop too. Restraint everywhere. */
.development-attention-tile header {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
  background: transparent;
  padding: 0;
  margin: 0 0 .35rem;
}
.development-attention-tile-count {
  font-family: var(--pico-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-cream);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.development-attention-overdue .development-attention-tile-count {
  color: var(--color-danger);
}
.development-attention-tile-label {
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--slate-cream);
}
.development-attention-tile-hint {
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: .02em;
}
.development-attention-tile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--slate-line-dark);
}
.development-attention-tile li { margin: 0; padding: 0; }
.development-attention-tile li a {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: .5rem;
  align-items: center;
  padding: .4rem 0;
  border-bottom: 1px solid var(--slate-line-dark);
  font-size: 12px;
  color: var(--slate-cream);
  text-decoration: none;
}
.development-attention-tile li:last-child a { border-bottom: 0; }
.development-attention-tile li a:hover { background: rgba(245, 239, 227, .03); }
.development-attention-num {
  font-family: var(--pico-font-family-display);
  color: var(--slate-gold);
  font-size: 11px;
}
.development-attention-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.development-attention-age {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--pico-muted-color);
}
.development-attention-overdue .development-attention-age {
  color: var(--color-danger);
  font-weight: 700;
}
.development-attention-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--pico-muted-color);
}


/* ─── M18-4: section head with tab switcher + no-value collapse ── */
.development-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.development-section-head .development-section-title {
  margin: 0;
  padding: 0;
  border: 0;
}

.development-view-tabs {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--slate-line-dark);
}
.development-view-tab {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  padding: 6px 12px;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.development-view-tab + .development-view-tab {
  border-left: 1px solid var(--slate-line-dark);
}
.development-view-tab.is-active {
  background: var(--slate-gold-gradient);
  color: var(--slate-ink);
}
.development-view-tab:not(.is-active):hover {
  color: var(--slate-gold);
}

/* No-value rows — hidden by default, shown when .show-novalue is on
   the parent table (the toggle button below the table flips it). */
.development-projects-table .dev-novalue-row { display: none; }
.development-projects-table.show-novalue .dev-novalue-row { display: table-row; }

.dev-novalue-toggle {
  background: transparent;
  border: 0;
  color: var(--pico-muted-color);
  font-size: 12px;
  font-family: var(--pico-font-family);
  padding: .75rem 0 0;
  margin: 0;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: none !important;
}
.dev-novalue-toggle:hover { color: var(--slate-gold); }

.development-projects { margin-bottom: var(--space-6); }
/* Development per-project state pill — visual match to .pill, scoped
   to /development. Same 6-intent vocabulary, applied to value-state
   semantics (signed→accent, forecast/proposed→neutral, budget→muted-dashed). */
.development-state-pill {
  display: inline-block;
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
  vertical-align: middle;
}
.development-state-pill-signed    { color: var(--slate-gold);  background: var(--slate-gold-soft); }
.development-state-pill-forecast  { color: var(--slate-cream); }
.development-state-pill-proposed  { color: var(--slate-cream); }
.development-state-pill-estimated { color: var(--color-muted); }
.development-state-pill-budget    { color: var(--color-muted); border-style: dashed; }
.development-state-pill-excluded {
  font-style: italic;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--pico-muted-color);
}

.development-footnote {
  margin-top: 1rem;
  font-size: 11px;
  font-style: italic;
  color: var(--pico-muted-color);
  line-height: 1.5;
}

/* =========================================================================
   Login page — centered card with optional daily quote below.
   ========================================================================= */
.slate-login-page {
  max-width: 440px;
  margin: 4rem auto 3rem;
  padding: 0 1rem;
}
.slate-login-card {
  border: 1px solid var(--slate-line-dark);
  padding: 2rem 2.25rem 2.25rem;
  background: rgba(245, 239, 227, .02);
  position: relative;
}
.slate-login-card::before {
  /* Thin gold accent at the top of the card */
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--slate-gold) 30%,
    var(--slate-gold) 70%,
    transparent 100%);
}
.slate-login-title {
  font-family: var(--pico-font-family-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--slate-cream);
  margin: 0 0 .5rem;
}
.slate-login-sub {
  font-size: 13px;
  color: var(--pico-muted-color);
  margin: 0 0 1.5rem;
  line-height: 1.45;
}
.slate-login-error {
  font-size: 12.5px;
  color: var(--color-danger);
  background: rgba(181, 98, 98, .08);
  border-left: 3px solid var(--color-danger);
  padding: .55rem .75rem;
  margin: 0 0 1.25rem;
}
.slate-login-form { margin: 0; }
.slate-login-field { display: block; margin: 0 0 1rem; }
.slate-login-label {
  display: block;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0 0 .2rem;
}
.slate-login-submit { width: 100%; margin-top: .5rem; }

/* Google sign-in button — full width, white "G" icon, subtle hover.
   Sits above the email/password form as the primary path. */
.slate-login-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 0 0 1.25rem;
  height: 38px;
  font-size: 13px;
  font-weight: 500;
}
.slate-login-google svg { display: block; flex-shrink: 0; }
.slate-login-google:hover {
  border-color: var(--slate-cream);
  color: var(--slate-cream);
}

/* "or" divider — thin line on each side, faded "or" in the middle. Visual
   break between OAuth and email/password. */
.slate-login-divider {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1rem;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.slate-login-divider::before,
.slate-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--slate-line-dark);
}

/* Daily quote — small, italic, faded; sits below the login card. */
.slate-quote {
  margin: 2rem 0 0;
  padding: 0 .5rem;
  text-align: center;
}
.slate-quote-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--slate-cream);
  margin: 0 0 .35rem;
  opacity: .8;
}
.slate-quote-text::before { content: "“"; color: var(--slate-gold); margin-right: .1rem; }
.slate-quote-text::after  { content: "”"; color: var(--slate-gold); margin-left: .1rem; }
.slate-quote-author {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

/* Footer quote — a subtle nod at the bottom of every page. Italic
   muted text + small-caps author. Reads like an end credit. */
.slate-footer-quote {
  max-width: 720px;
  margin: 6rem auto 4rem;
  padding: 0 2rem;
  text-align: center;
}
.slate-footer-quote-text {
  font-family: var(--pico-font-family);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0 0 .5rem;
  opacity: .65;
}
.slate-footer-quote-author {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  opacity: .5;
}

/* =========================================================================
   Account page — small structured form
   ========================================================================= */
.account-page { margin: 1.5rem 0 3rem; }
.account-form { max-width: 600px; }
.account-form { margin: 0; }
.account-field { display: block; margin: 0 0 1.25rem; }
.account-label {
  display: block;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0 0 .25rem;
}
.account-help {
  display: block;
  font-size: 12px;
  color: var(--pico-muted-color);
  margin: .4rem 0 0;
  line-height: 1.45;
  font-style: italic;
}
.account-help a { color: var(--slate-gold); text-decoration: none; }
.account-help a:hover { color: var(--slate-cream); }

/* =========================================================================
   Project form (new/edit) — same layout family as company-edit.
   ========================================================================= */
.project-form-page { margin: 1.5rem 0 3rem; }
.project-form { max-width: 720px; }
.project-form-page .breadcrumb-tight {
  margin: 0 0 .35rem;
  font-size: 12px;
}
.project-form-page .breadcrumb-tight ul {
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
}
.project-form-page .breadcrumb-tight li {
  padding: 0 .35rem 0 0;
  color: var(--pico-muted-color);
}
.project-form-page .breadcrumb-tight li + li::before {
  content: '/';
  margin-right: .35rem;
  color: var(--pico-muted-color);
  opacity: .5;
}
.project-form-page .breadcrumb-tight a {
  color: var(--pico-muted-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.project-form-page .breadcrumb-tight a:hover {
  color: var(--slate-cream);
  border-bottom-color: currentColor;
}
/* .project-form-title — styled via the shared page-title rule. Owns
   only its bottom margin (form page wants room before fields start). */
.project-form-title {
  margin-bottom: var(--space-4);
}
.project-form { margin: 0 0 2rem; }
.project-form-field { display: block; margin: 0 0 1.25rem; }
/* Two-column field row — for engagement start + end on the project form. */
.project-form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 0 .35rem;
}
.project-form-field-row .project-form-field { margin-bottom: 0; }
@media (max-width: 540px) {
  .project-form-field-row { grid-template-columns: 1fr; }
}
.project-form-label {
  display: block;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0 0 .25rem;
}
.project-form-help {
  display: block;
  font-size: 12px;
  color: var(--pico-muted-color);
  margin: .4rem 0 0;
}
.project-form-help a { color: var(--slate-gold); text-decoration: none; }
.project-form-help a:hover { color: var(--slate-cream); }
.project-form-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.project-form-danger {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--slate-line-dark);
}
.project-form-danger > summary {
  font-size: 12px;
  color: var(--pico-muted-color);
  cursor: pointer;
  list-style: none;
}
.project-form-danger > summary::-webkit-details-marker { display: none; }
.project-form-danger > summary::before {
  content: '▸';
  margin-right: .4rem;
  opacity: .5;
}
.project-form-danger[open] > summary::before { content: '▾'; }
.project-form-danger-warning {
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
  margin: .5rem 0;
}
.project-form-danger-btn { color: var(--color-danger) !important; border-color: var(--color-danger) !important; }

/* =========================================================================
   404 / Error message pages
   ========================================================================= */
.slate-message-page {
  max-width: 640px;
  margin: 4rem auto 3rem;
  text-align: center;
  padding: 0 1rem;
}
.slate-message-title {
  font-family: var(--pico-font-family-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--slate-cream);
  margin: 0 0 .75rem;
}
.slate-message-body {
  color: var(--pico-muted-color);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.slate-message-body code {
  font-family: var(--pico-font-family-monospace);
  font-size: 13px;
  padding: 1px 6px;
  background: rgba(245, 239, 227, .04);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
}
.slate-message-stack {
  text-align: left;
  margin: 1.5rem 0;
  padding: .75rem;
  background: rgba(245, 239, 227, .02);
  border: 1px solid var(--slate-line-dark);
}
.slate-message-stack summary { cursor: pointer; font-size: 13px; color: var(--pico-muted-color); }
.slate-message-stack pre {
  font-size: 11px;
  overflow: auto;
  color: var(--slate-cream);
  margin: .5rem 0 0;
}

/* =========================================================================
   Project Doc — per-project landing page at /projects/:id.
   Header + breadcrumb + status pill, then a row of "connected tools" (Scope,
   Proposal, public link), then the deliverable list (reuses board partials).
   The existing .project-header / .breadcrumb / .project-title rules are
   scoped to .estimator-page, so we re-declare equivalents under
   .project-doc-page below.
   ========================================================================= */

.project-doc-page {
  max-width: none;
  margin: 1.5rem 0 3rem;
}

/* Header — same visual as estimator page header */
.project-doc-page .project-header { margin: 0 0 1.25rem; }
.project-doc-page .breadcrumb-tight {
  margin: 0 0 .15rem;
  font-size: 12px;
}
.project-doc-page .breadcrumb-tight ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.project-doc-page .breadcrumb-tight li {
  padding: 0 .35rem 0 0;
  color: var(--pico-muted-color);
}
.project-doc-page .breadcrumb-tight li + li::before {
  content: '/';
  margin-right: .35rem;
  color: var(--pico-muted-color);
  opacity: .5;
}
.project-doc-page .breadcrumb-tight a {
  color: var(--pico-muted-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.project-doc-page .breadcrumb-tight a:hover {
  color: var(--slate-cream);
  border-bottom-color: currentColor;
}
.project-doc-page .project-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}
.project-doc-page .project-header-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.project-doc-page .project-header-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Project Doc title — mixed case, refined sans, generous size.
   The project name is the page's hero; let it breathe. */
.project-doc-page .project-title {
  margin: 0;
  font-family: var(--pico-font-family);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.025em;
  text-transform: none;
  line-height: 1.05;
  color: var(--slate-cream);
}
.project-doc-page .project-meta {
  color: var(--pico-muted-color);
  font-size: 13px;
  margin: .25rem 0 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
/* Client kicker above the project title — small caps, gold, sets context.
   Clickable link to the company page; underline appears on hover. */
.project-doc-client {
  display: inline-block;
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-gold);
  margin-bottom: .1rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
a.project-doc-client:hover {
  color: var(--slate-cream);
  border-bottom-color: currentColor;
}

/* Project header right column — just the action buttons now; the value
   chip lives in the key-facts row below the title on the left side. */
.project-doc-page .project-header-actions {
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}
.project-header-action-buttons {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Make the right-side action buttons feel like peers of the key-facts
   chips on the left — same height, font size, letter-spacing, uppercase.
   Scoped to the project header so other slate-btn instances elsewhere
   keep their normal-case button treatment. */
.project-header-action-buttons .slate-btn {
  height: auto;
  padding: .12rem .55rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* =========================================================================
   Project key-facts row — horizontal strip below the title with status,
   value chip, deliverable count, etc. Middot-separated. Quietly cinematic.
   ========================================================================= */
.project-key-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .35rem 0 0;
  font-size: 13px;
  color: var(--slate-cream);
}
.project-key-facts-dot {
  color: var(--pico-muted-color);
  opacity: .5;
  margin: 0 .15rem;
}
/* Deliverable count — styled as a chip matching the .status and value
   chip dimensions exactly, so the whole row reads as one slate strip. */
.project-key-fact-count {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 0;
  font-family: var(--pico-font-family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  border: 1px solid currentColor;
  background: transparent;
  line-height: 1.4;
}

/* ---- Value chip — state-aware. Five visual variants. ---------------- */
.project-value-chip-group {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.project-value-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--pico-font-family);
  font-size: 11px;
  padding: .12rem .55rem;
  /* Match the .status pill exactly — same size, border, line-height, so
     the key-facts row reads as one consistent row of slate markers. */
  border-radius: 0;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.project-value-amount {
  font-family: var(--pico-font-family);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
}
.project-value-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .65;
}

/* Signed — confident gold, solid. */
.project-value-chip-signed {
  color: var(--slate-gold);
  background: rgba(225, 174, 101, .08);
  border-color: var(--slate-gold);
}

/* Estimated — cream + gold accent, solid border. Confident but not final. */
.project-value-chip-estimated {
  color: var(--slate-cream);
  background: rgba(225, 174, 101, .05);
  border-color: var(--slate-gold-deep);
}

/* Budget — softer, dashed. Reads as "early intel, not committed." */
.project-value-chip-budget {
  color: var(--slate-cream);
  background: rgba(245, 239, 227, .03);
  border-color: var(--pico-muted-color);
  border-style: dashed;
}

/* Proposed — special: three tier pips side by side, no single amount. */
.project-value-chip-proposed {
  color: var(--slate-cream);
  border-color: var(--slate-gold-deep);
  background: rgba(225, 174, 101, .04);
  padding: 2px 10px;
}
.project-value-multi {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.project-value-tier-pip {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.project-value-tier-pip-green { color: #6db887; }
.project-value-tier-pip-gold  { color: var(--slate-gold); }
.project-value-tier-pip-black { color: var(--slate-cream); }

/* Budget reference chip — small, muted, sits alongside higher-confidence
   chip so producers can compare "what they said" vs "what we calculated." */
.project-value-chip-budget-ref {
  font-size: 11px;
  color: var(--pico-muted-color);
  border-color: transparent;
  background: transparent;
  font-style: italic;
  padding: 2px 4px;
}
/* M29: "+ $X extras" hint next to the signed chip when tax incentive or
   supporter funds are populated. Muted gold so it reads as a related
   detail, not a competing chip. Tooltip on the span shows the breakdown. */
.project-value-extras {
  margin-left: .35rem;
  font-size: 11px;
  color: var(--slate-gold);
  opacity: .85;
  cursor: help;
  font-style: italic;
}
.project-value-extras:hover { opacity: 1; }
/* Inline "(optional)" hint inside popover labels. */
.project-value-note-optional {
  color: var(--pico-muted-color);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}
/* M30: two-cell row inside the signed-deal popover. Label on the left
   spanning the row top; Approved + Received inputs sit side-by-side. */
.project-value-stream-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-bottom: .55rem;
}
.project-value-stream-row > .project-value-note-label {
  grid-column: 1 / -1;
  margin-bottom: -.2rem;
}
.project-value-stream-cell {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
}
.project-value-stream-cell-label {
  font-family: var(--pico-font-family);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
/* M31: date input under the Received amount. Compact, slate-themed. */
.project-value-stream-date {
  margin-top: .25rem;
  width: 100%;
  font-family: var(--pico-font-family);
  font-size: 11px;
  color: var(--slate-cream);
  background: rgba(245, 239, 227, .03);
  border: 1px solid var(--slate-line-dark);
  padding: .25rem .4rem;
  margin-bottom: 0;
}
.project-value-stream-date:focus {
  border-color: var(--slate-gold);
  outline: none;
}

/* "None" state — a tiny <details> popover with a number input. Only
   shows when there's no scope / proposal / signed value yet. */
.project-value-chip-none { position: relative; }
.project-value-add-toggle {
  display: inline-flex;
  align-items: center;
  font-family: var(--pico-font-family);
  font-size: 11px;
  font-weight: 600;
  color: var(--pico-muted-color);
  border: 1px dashed var(--slate-line-dark);
  border-radius: 0;
  padding: .12rem .55rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.project-value-add-toggle::-webkit-details-marker { display: none; }
.project-value-add-toggle:hover { color: var(--slate-gold); border-color: var(--slate-gold); }
.project-value-budget-form {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .5rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  margin: 0;
}
.project-value-budget-prefix {
  color: var(--pico-muted-color);
  font-size: 13px;
}
.project-value-budget-input {
  font-family: var(--pico-font-family-monospace);
  font-size: 13px;
  background: transparent !important;
  border: 1px solid var(--slate-line-dark) !important;
  color: var(--slate-cream) !important;
  padding: 4px 8px !important;
  /* Pico's default sets width/height to fill the container; force a
     fixed size so the input is wide enough to see what you type and
     short enough to fit in the popover row. */
  width: 110px !important;
  min-width: 110px;
  max-width: 110px;
  height: 28px !important;
  min-height: 28px;
  max-height: 28px;
  display: inline-block !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.project-value-budget-input:focus {
  border-color: var(--slate-gold);
  outline: none;
}
.project-value-budget-save { font-size: 11px; height: 24px; padding: 0 .5rem; }

/* Shared popover base — sits below its trigger button, dark card with
   slate border + drop shadow. Toggled via the [hidden] attribute on
   click. The budget vs forecast variants differ only in width/content. */
.project-value-popover {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
/* Budget popover inherits the base — small flex form */
.project-value-popover .project-value-budget-form {
  position: static;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .5rem;
  margin: 0;
}

/* Forecast state — same warm gold treatment as Estimated; the FORECAST
   label carries the meaning so we don't need a clashing color. Slightly
   bolder background tint signals "producer's deliberate call." */
.project-value-chip-forecast {
  color: var(--slate-cream);
  background: rgba(225, 174, 101, .08);
  border-color: var(--slate-gold-deep);
}

/* Chip wrap + button — replaces the earlier <details>/<summary> approach
   (which couldn't escape the native disclosure glyph). The button is the
   chip itself; the popover is a sibling div toggled via the [hidden]
   attribute. No UA chrome to fight, full control over interaction. */
.project-value-chip-wrap {
  position: relative;
  display: inline-block;
}
/* The button-as-chip needs every default <button> style stripped so it
   reads as a chip identical to the static .project-value-chip ones. */
button.project-value-chip,
button.project-value-add-toggle {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  user-select: none;
  /* Pico button defaults — margin, box-shadow, AND background.
     Without the background override, Pico's primary blue bleeds
     through on tier-"full" pages where the form-element-bg variable
     isn't suppressed. */
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.project-value-chip-clickable:hover { filter: brightness(1.1); }

/* Forecast popover — inherits position/background/border from
   .project-value-popover; adds only the size + padding it needs. */
.project-value-forecast-popover,
.project-value-signed-popover {
  min-width: 340px;
  padding: .75rem;
}

/* Producer-approved chip — same gold treatment as signed, but with a
   subtle distinguishing tint (slightly more saturated background) so
   you can tell at a glance "this is a producer call, not a paper sign." */
.project-value-chip-approved {
  background: rgba(225, 174, 101, .14);
}

/* Optional note field in the popover — text input full-width, small label. */
.project-value-note-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .35rem;
  margin-top: .25rem;
  border-top: 1px solid var(--slate-line-dark);
}
.project-value-note-label {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.project-value-note-input {
  font-family: var(--pico-font-family);
  font-size: 12px;
  background: rgba(245, 239, 227, .04);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .3rem .5rem;
  margin: 0 !important;
  box-shadow: none !important;
}
.project-value-note-input::placeholder {
  color: var(--pico-muted-color);
  font-style: italic;
  opacity: .65;
}
.project-value-note-input:focus {
  border-color: var(--slate-gold);
  outline: none;
}

/* Provenance line — "Approved on 5/24" sits at the bottom of the popover
   when the project is already approved, so the producer sees when. */
.project-value-approval-meta {
  margin: .5rem 0 0;
  font-size: 11px;
  color: var(--pico-muted-color);
  font-style: italic;
  text-align: center;
  padding-top: .5rem;
  border-top: 1px dashed var(--slate-line-dark);
}
.project-value-forecast-head {
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.project-value-forecast-title {
  display: block;
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin-bottom: .15rem;
}
.project-value-forecast-hint {
  display: block;
  font-size: 11px;
  color: var(--pico-muted-color);
  font-style: italic;
  line-height: 1.4;
}
.project-value-forecast-form { margin: 0; }
.project-value-forecast-opt {
  display: grid;
  grid-template-columns: 16px 60px 1fr;
  align-items: center;
  gap: .5rem;
  padding: .35rem .35rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background .12s ease;
}
.project-value-forecast-opt:hover { background: rgba(245, 239, 227, .03); }
.project-value-forecast-opt input[type="radio"] {
  margin: 0 !important;
  width: 14px;
  height: 14px;
  accent-color: var(--slate-gold);
}
.project-value-forecast-opt-name {
  font-family: var(--pico-font-family);
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-cream);
}
.project-value-forecast-opt-amount {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  color: var(--pico-muted-color);
  text-align: right;
}
.project-value-forecast-opt-custom .project-value-forecast-opt-amount {
  text-align: left;
}
.project-value-forecast-custom-input {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  color: var(--pico-muted-color);
}
.project-value-forecast-custom-field {
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: 1px 5px;
  width: 90px;
  margin: 0 !important;
  box-shadow: none !important;
}
.project-value-forecast-custom-field:focus {
  border-color: var(--slate-gold);
  outline: none;
}
.project-value-forecast-actions {
  display: flex;
  gap: .35rem;
  margin-top: .65rem;
  padding-top: .5rem;
  border-top: 1px solid var(--slate-line-dark);
}
.project-value-forecast-save,
.project-value-forecast-clear {
  font-size: 11px;
  height: 26px;
  padding: 0 .65rem;
}

/* Milanote card — special-cased Connected Tools card with linked/unset
   states. Bright (gold) when linked; muted dashed when not. */
.project-doc-tool-milanote {
  position: relative;
  cursor: pointer;
}
.project-doc-tool-milanote.is-linked {
  border-color: var(--slate-line-dark);
  background: transparent;
}
.project-doc-tool-milanote.is-linked .project-doc-tool-label { color: var(--slate-gold); }
.project-doc-tool-milanote.is-linked:hover {
  border-color: var(--slate-gold);
  background: rgba(225, 174, 101, .04);
}
.project-doc-tool-milanote.is-unset {
  border-style: dashed;
  border-color: var(--slate-line-dark);
  background: transparent;
  opacity: .75;
}
.project-doc-tool-milanote.is-unset .project-doc-tool-label { color: var(--pico-muted-color); }
.project-doc-tool-milanote.is-unset:hover {
  opacity: 1;
  border-color: var(--pico-muted-color);
}
/* "edit" inline link in the linked hint row. Border-bottom is the
   underline so Pico's anchor text-decoration can't override its color
   or thickness. Lives inside an <a>, so we also kill the inherited
   anchor styling. */
.project-milanote-edit {
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--color-muted);
  padding: 0;
  margin-left: .35rem;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none !important;
}
.project-milanote-edit:hover {
  color: var(--slate-cream);
  border-bottom-color: var(--slate-gold);
}
.project-milanote-edit:hover { color: var(--slate-gold); }
/* Inline editor — hidden until .is-editing on the card */
.project-milanote-edit-form {
  display: none;
  margin: .5rem 0 0;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
}
.project-doc-tool-milanote.is-editing .project-milanote-edit-form { display: flex; }
.project-doc-tool-milanote.is-editing .project-doc-tool-hint { display: none; }
.project-milanote-url-input {
  flex: 1;
  min-width: 0;
  font-family: var(--pico-font-family-monospace);
  font-size: 11px;
  background: rgba(245, 239, 227, .04);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .3rem .5rem;
  margin: 0 !important;
  box-shadow: none !important;
}
.project-milanote-url-input:focus {
  border-color: var(--slate-gold);
  outline: none;
}
.project-milanote-save,
.project-milanote-cancel {
  font-size: 11px;
  height: 26px;
  padding: 0 .55rem;
}

/* ---- Project Notes section -------------------------------------------- */
.project-doc-notes-section {
  margin: 0 0 2rem;
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(245, 239, 227, .02);
}
.project-doc-notes-form { margin: 0; }
/* Trix inside the Project Doc — dark-themed override, scoped here. */
.project-doc-page trix-editor {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: .5rem .65rem;
  font-family: var(--pico-font-family);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0;
}
.project-doc-page trix-editor:focus {
  border-color: var(--slate-gold);
  box-shadow: 0 0 0 .125rem rgba(225, 174, 101, .25);
  outline: none;
}
.project-doc-page trix-toolbar {
  background: rgba(245, 239, 227, .03);
  border: 1px solid var(--slate-line-dark);
  border-bottom: none;
  padding: .25rem;
}
.project-doc-page trix-toolbar .trix-button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--slate-cream);
  filter: brightness(.85);
}
.project-doc-page trix-toolbar .trix-button:hover:not([disabled]) {
  background: rgba(225, 174, 101, .1);
  border-color: var(--slate-line-dark);
  filter: brightness(1.1);
}
.project-doc-page trix-toolbar .trix-button.trix-active {
  background: var(--slate-gold-soft);
  border-color: var(--slate-gold);
  filter: brightness(1.2);
}
.project-doc-page trix-toolbar .trix-dialog {
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
}

/* ---- Editable deliverable name on the Board row ----------------------
   Styled to render at the exact same height as the static italic text it
   replaced, so focusing the input never shifts neighboring rows. No
   padding, no border, no box-shadow at any state — just a background
   tint on hover/focus as the affordance. Cursor changes naturally
   (text I-beam over an input) so producers know it's editable. */
.post-cell-deliverable-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
/* Hidden-from-Board indicator — small eye-off icon, muted by default,
   warms slightly on hover so producers know it's actionable. */
.post-cell-hidden-icon {
  flex-shrink: 0;
  color: var(--pico-muted-color);
  opacity: .65;
  transition: opacity .15s ease, color .15s ease;
  cursor: help;
}
.post-cell-deliverable-wrap:hover .post-cell-hidden-icon {
  opacity: 1;
  color: var(--slate-cream);
}
.post-cell-deliverable-name-input {
  display: block;
  width: 100%;
  font-family: var(--pico-font-family);
  font-size: 10px;
  font-style: italic;
  color: var(--pico-muted-color);
  background: transparent;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  /* Explicit height + box-sizing wins against Pico's injected padding —
     even if --pico-form-element-spacing-vertical leaks in, the input
     cannot exceed this box. 14px matches a 10px font at 1.3 line-height. */
  height: 14px !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s ease, color .15s ease;
}
.post-cell-deliverable-name-input::placeholder {
  color: var(--pico-muted-color);
  font-style: italic;
  opacity: .5;
}
.post-cell-deliverable-name-input:hover {
  background: rgba(245, 239, 227, .04);
  color: var(--slate-cream);
}
.post-cell-deliverable-name-input:focus {
  background: rgba(245, 239, 227, .07);
  color: var(--slate-cream);
  font-style: normal;
  /* Defeat the global input:focus gold-halo box-shadow (M5-1). That rule
     uses !important, so we need !important here too AND a more-specific
     selector. The :focus on a class beats `input:focus` on specificity. */
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* ---- Connected tools — Scope / Proposal / Public Proposal -------------- */
.project-doc-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  margin: 0 0 2rem;
}
.project-doc-tool {
  display: block;
  padding: .85rem 1rem;
  border: 1px solid var(--slate-line-dark);
  background: transparent;
  text-decoration: none;
  color: var(--slate-cream);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.project-doc-tool:hover {
  border-color: var(--slate-gold);
  background: rgba(225, 174, 101, .04);
}
.project-doc-tool-label {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin-bottom: .25rem;
}
.project-doc-tool:hover .project-doc-tool-label { color: var(--slate-gold); }
.project-doc-tool-hint {
  font-size: 12px;
  color: var(--pico-muted-color);
  line-height: 1.4;
}

/* ---- Tier pill — click to cycle green → gold → black ------------------ */
.project-tier-pill {
  display: inline-block;
  padding: .12rem .65rem;
  border-radius: 0;
  font-family: var(--pico-font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
  background: transparent;
  border: 1px solid currentColor;
  line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}
.project-tier-pill:hover { filter: brightness(1.1); }
.project-tier-pill-green {
  color: #6db887;
  background: rgba(109, 184, 135, .08);
}
.project-tier-pill-gold {
  color: var(--slate-gold);
  background: rgba(225, 174, 101, .1);
}
.project-tier-pill-black {
  color: var(--slate-cream);
  background: #1c1818;
  border-color: var(--slate-cream);
}

/* ---- Snapshot section — Brief + Approach + Scope ---------------------- */
.project-doc-snapshot { margin: 0 0 2rem; }
.project-doc-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.project-doc-panel {
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(245, 239, 227, .02);
}
.project-doc-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--slate-line-dark);
  flex-wrap: wrap;
}
.project-doc-panel-title {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
}
.project-doc-panel-hint {
  font-size: 11px;
  color: var(--pico-muted-color);
  font-style: italic;
}
.project-doc-panel-hint a {
  color: var(--slate-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.project-doc-panel-hint a:hover { border-bottom-color: currentColor; }
.project-doc-field {
  margin: 0 0 .65rem;
}
.project-doc-field:last-child { margin-bottom: 0; }
.project-doc-field-label {
  display: block;
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0 0 .2rem;
}
.project-doc-field-empty {
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
  margin: 0;
}
.project-doc-field-empty a {
  color: var(--slate-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.project-doc-field-empty a:hover { border-bottom-color: currentColor; }
/* Inline-edit textarea — borderless when not focused, subtle background
   on hover so the producer knows it's interactive. */
.project-doc-input {
  display: block;
  width: 100%;
  font-family: var(--pico-font-family);
  font-size: 13px;
  line-height: 1.45;
  color: var(--slate-cream);
  background: transparent;
  border: 1px solid transparent;
  padding: .35rem .45rem;
  margin: 0 !important;
  resize: none;
  overflow: hidden;
  min-height: 0;
  transition: border-color .15s ease, background .15s ease;
  box-shadow: none !important;
  /* Pico likes to set a thicker border on form elements; flatten it. */
  --pico-form-element-border-color: transparent;
}
.project-doc-input::placeholder {
  color: var(--pico-muted-color);
  font-style: italic;
  opacity: .7;
}
.project-doc-input:hover {
  background: rgba(245, 239, 227, .03);
  border-color: var(--slate-line-dark);
}
.project-doc-input:focus {
  background: rgba(245, 239, 227, .05);
  border-color: var(--slate-gold);
  outline: none;
}

/* Tonal pillars — read-only cards mirroring the proposal's pillar treatment
   (label + description, gold left border) but in the Project Doc's dark
   theme. Stacked vertically because they live inside the half-width
   Approach panel; horizontal cards would crush. Edit in proposal builder. */
.project-doc-pillars {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .15rem 0 0;
}
.project-doc-pillar-card {
  padding: .65rem .85rem;
  background: rgba(225, 174, 101, .05);
  border-left: 3px solid var(--slate-gold-deep);
}
.project-doc-pillar-card-label {
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-gold);
  margin: 0 0 .25rem;
}
.project-doc-pillar-card-description {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate-cream);
  margin: 0;
}

/* Scope + Links — 2-column grid, half-width each. The Links panel is
   sparse for now (Milanote + placeholder stubs); when more link types
   land they slot in without changing the surrounding layout. */
.project-doc-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .project-doc-bottom-grid { grid-template-columns: 1fr; }
}

/* Scope — read-only grouped list. One row per group, items inline. */
.project-doc-scope {
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(245, 239, 227, .02);
}
/* Links panel — sibling of Scope. Same chrome. */
.project-doc-links {
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(245, 239, 227, .02);
}

/* Reference docs — secondary panel inside the Links card. Free-form
   list of legacy proposals / SOWs / Drive folders / etc. Slimmer than
   the named-tool cards above so the eye reads them as "supporting
   reference," not core production resources. */
.project-doc-reference-docs {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--slate-line-dark);
}
.project-doc-reference-docs-head {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}
.project-doc-reference-docs-title {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
}
.project-doc-reference-docs-hint {
  font-size: 11px;
  color: var(--color-muted);
  font-style: italic;
}
.project-doc-reference-docs-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .55rem;
}
.project-doc-reference-doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 22px 22px;
  gap: .35rem;
  align-items: center;
}
.project-doc-reference-doc-label,
.project-doc-reference-doc-url {
  background: rgba(245, 239, 227, .03);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  padding: 4px 8px !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  border-radius: 0;
}
.project-doc-reference-doc-label:focus,
.project-doc-reference-doc-url:focus {
  border-color: var(--slate-gold);
  outline: none;
}
.project-doc-reference-doc-label::placeholder,
.project-doc-reference-doc-url::placeholder { color: var(--color-muted); opacity: .55; }
.project-doc-reference-doc-open {
  color: var(--slate-gold);
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  line-height: 22px;
}
.project-doc-reference-doc-open:hover { color: var(--slate-cream); }
.project-doc-reference-doc-open.is-disabled { color: var(--slate-line-dark); cursor: default; }
.project-doc-reference-doc-remove {
  background: transparent;
  border: 0;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.project-doc-reference-doc-remove:hover { color: #d96860; }
.project-doc-reference-docs-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.project-doc-reference-docs-add {
  background: transparent;
  border: 1px dashed var(--slate-line-dark);
  color: var(--color-muted);
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem .85rem;
  cursor: pointer;
  border-radius: 0;
}
.project-doc-reference-docs-add:hover {
  color: var(--slate-cream);
  border-color: var(--slate-cream);
}
.project-doc-reference-docs-save {
  background: transparent;
  border: 1px solid var(--slate-gold);
  color: var(--slate-gold);
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem .85rem;
  cursor: pointer;
  border-radius: 0;
}
.project-doc-reference-docs-save:hover {
  background: rgba(225, 174, 101, .08);
}
.project-doc-reference-docs-saved-flash {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4f8b56;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.project-doc-reference-docs-saved-flash.is-visible { opacity: 1; }
:root[data-theme] .project-doc-reference-docs-save {
  border-color: var(--paper-gold);
  color: var(--paper-gold);
}
:root[data-theme] .project-doc-reference-docs-save:hover {
  background: rgba(184, 133, 47, .08);
}
:root[data-theme="paper"] .project-doc-reference-docs-saved-flash { color: #4f8b56; }
:root[data-theme] .project-doc-reference-docs { border-top-color: var(--paper-rule); }
:root[data-theme] .project-doc-reference-docs-title { color: var(--paper-ink); }
:root[data-theme] .project-doc-reference-docs-hint { color: var(--paper-ink-mute); }
:root[data-theme] .project-doc-reference-doc-label,
:root[data-theme] .project-doc-reference-doc-url {
  background: var(--paper-bg);
  border-color: var(--paper-rule);
  color: var(--paper-ink);
}
:root[data-theme] .project-doc-reference-doc-label:focus,
:root[data-theme] .project-doc-reference-doc-url:focus { border-color: var(--paper-gold); }
:root[data-theme] .project-doc-reference-doc-label::placeholder,
:root[data-theme] .project-doc-reference-doc-url::placeholder { color: var(--paper-ink-mute); }
:root[data-theme] .project-doc-reference-doc-open { color: var(--paper-gold); }
:root[data-theme] .project-doc-reference-doc-open:hover { color: var(--paper-ink); }
:root[data-theme] .project-doc-reference-doc-open.is-disabled { color: var(--paper-rule); }
:root[data-theme] .project-doc-reference-doc-remove { color: var(--paper-ink-mute); }
:root[data-theme="paper"] .project-doc-reference-doc-remove:hover { color: var(--paper-red); }
:root[data-theme] .project-doc-reference-docs-add {
  border-color: var(--paper-rule);
  color: var(--paper-ink-mute);
}
:root[data-theme] .project-doc-reference-docs-add:hover {
  color: var(--paper-ink);
  border-color: var(--paper-ink);
}
.project-doc-links-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
}
/* Placeholder slot for future link types — muted, dashed, non-clickable. */
.project-doc-link-stub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: .65rem .85rem;
  border: 1px dashed var(--slate-line-dark);
  background: transparent;
  opacity: .55;
}
.project-doc-link-stub-label {
  font-family: var(--pico-font-family-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.project-doc-link-stub-hint {
  font-size: 10px;
  font-style: italic;
  color: var(--pico-muted-color);
  letter-spacing: .04em;
}
/* Title + tier pill grouped on the left of the scope panel head. */
.project-doc-scope-title-group {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.project-doc-scope-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-doc-scope-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: .75rem;
  padding: .4rem 0;
  border-bottom: 1px dashed var(--slate-line-dark);
  font-size: 13px;
  line-height: 1.4;
}
.project-doc-scope-row:last-child { border-bottom: 0; }
.project-doc-scope-group {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  align-self: center;
}
.project-doc-scope-items {
  color: var(--slate-cream);
}
.project-doc-scope-qty {
  color: var(--slate-gold);
  font-family: var(--pico-font-family-monospace);
  font-size: 12px;
  margin-left: .2rem;
}

/* ---- Contacts panel — read-only cards, star toggles primary ----------- */
.project-doc-contacts {
  margin: 0 0 2rem;
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(245, 239, 227, .02);
}
.project-doc-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
  margin-top: .25rem;
}
.project-doc-contact-card {
  position: relative;
  padding: .75rem .9rem .85rem;
  padding-right: 2.25rem;  /* leave room for the star at top-right */
  border: 1px solid var(--slate-line-dark);
  background: rgba(245, 239, 227, .02);
  transition: border-color .15s ease;
}
.project-doc-contact-card:hover { border-color: var(--pico-muted-color); }
.project-doc-contact-card.is-primary {
  border-color: var(--slate-gold-deep);
  background: rgba(225, 174, 101, .05);
}
.project-doc-contact-star {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 0 .25rem;
  margin: 0;
  cursor: pointer;
  color: var(--slate-line-dark);
  transition: color .15s ease, transform .15s ease;
}
.project-doc-contact-star:hover { color: var(--slate-gold); transform: scale(1.15); }
.project-doc-contact-star.is-on { color: var(--slate-gold); }
.project-doc-contact-name {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0 0 .15rem;
}
.project-doc-contact-role {
  font-size: 11px;
  color: var(--slate-gold);
  font-style: italic;
  margin-bottom: .35rem;
}
.project-doc-contact-lines {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .35rem;
}
.project-doc-contact-line {
  font-size: 12px;
  color: var(--slate-cream);
  font-family: var(--pico-font-family-monospace);
}
.project-doc-contact-link {
  color: var(--slate-cream);
  text-decoration: none;
  border-bottom: 1px dotted var(--slate-line-dark);
}
.project-doc-contact-link:hover {
  color: var(--slate-gold);
  border-bottom-color: currentColor;
}
.project-doc-contact-notes {
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
  line-height: 1.45;
  margin: .35rem 0 0;
  padding-top: .35rem;
  border-top: 1px dashed var(--slate-line-dark);
}

/* ---- Deliverables section --------------------------------------------- */
.project-doc-deliverables { margin-top: 1.5rem; }
.project-doc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.project-doc-section-title {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .65rem;
}
.project-doc-add-form {
  margin: 0;
  display: inline-flex;
}
.project-doc-add-form .slate-btn { font-size: 12px; height: 28px; padding: 0 .75rem; }

/* Reuse the dense post-table look on the Project Doc table. The base rules
   on .post-table already handle layout; we just need to make sure the same
   vertical-align + form-element resets apply when the table sits inside
   .project-doc-page (some rules in the file are scoped to .post-doc-page). */
.project-doc-page .post-table tbody tr td.post-cell { vertical-align: middle !important; }
.project-doc-page .post-table tbody tr td.post-cell > * { vertical-align: middle; }
.project-doc-page .post-cell input,
.project-doc-page .post-cell select,
.project-doc-page .post-cell textarea,
.project-doc-page .post-cell button {
  margin: 0 !important;
}
.project-doc-page .post-cell input[type="date"] {
  background-image: none !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.project-doc-help {
  margin-top: 1rem;
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
  max-width: 60ch;
  line-height: 1.5;
}

/* =========================================================================

/* =========================================================================
   Expenses page — single coherent style.
   Top block: 1fr 2fr grid (headline | breakdown).
   Tables: zero row dividers anywhere.
   Form + transactions: every input identical font/size/height/border.
   ========================================================================= */

.expenses-page { margin: 1.5rem 0 3rem; }
.expenses-page .breadcrumb-tight {
  margin: 0 0 .35rem;
  font-size: 12px;
}
.expenses-page .breadcrumb-tight ul {
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
}
.expenses-page .breadcrumb-tight li {
  padding: 0 .35rem 0 0;
  color: var(--pico-muted-color);
}
.expenses-page .breadcrumb-tight li + li::before {
  content: '/';
  margin-right: .35rem;
  color: var(--pico-muted-color);
  opacity: .5;
}
.expenses-page .breadcrumb-tight a {
  color: var(--pico-muted-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.expenses-page .breadcrumb-tight a:hover {
  color: var(--slate-cream);
  border-bottom-color: currentColor;
}

/* ─── Top block ─── headline 1/3 left, breakdown 2/3 right. */
.expenses-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.5rem;
  align-items: start;
  margin: 1.5rem 0 2.5rem;
}
@media (max-width: 900px) {
  .expenses-top { grid-template-columns: 1fr; gap: 1.5rem; }
}

.expenses-headline-total {
  font-family: var(--pico-font-family);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--slate-gold);
  line-height: 1;
}
.expenses-headline-row {
  margin-top: .4rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.expenses-headline-label  { color: var(--slate-cream); }
.expenses-headline-budget { color: var(--pico-muted-color); }
.expenses-headline-over   { color: #d97570; }
.expenses-headline-under  { color: #6db887; }
.expenses-headline-on     { color: var(--slate-cream); }
.expenses-headline-dot    { color: var(--pico-muted-color); opacity: .5; }

/* ─── Breakdown ─── no row dividers anywhere; tight padding. */
.expenses-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.expenses-col-type  { width: 30%; }
.expenses-col-num   { width: 18%; }
.expenses-col-notes { width: auto; }
.expenses-col-edit  { width: 32px; }
.expenses-summary-table thead th {
  text-align: left;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  padding: 0 .5rem .35rem;
  background: transparent;
  border: none;
}
.expenses-summary-table tbody td {
  padding: .3rem .5rem;
  border: none;
  color: var(--slate-cream);
  vertical-align: middle;
  position: relative;
}
.expenses-num { text-align: right; }
.expenses-summary-table .expenses-num { font-family: var(--pico-font-family-monospace); }
/* Higher-specificity header rule — the generic `thead th { text-align: left }`
   above was clobbering `.expenses-num` on the header cells, so SPENT and
   BUDGETED column titles weren't aligning with their right-justified values. */
.expenses-summary-table thead th.expenses-num { text-align: right; }
.expenses-type-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.expenses-summary-row.is-over .expenses-budget-cell { color: #d97570; }

/* Edit pencil — no chrome until hover. */
.expenses-budget-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--pico-muted-color);
  cursor: pointer;
  padding: 0;
  margin: 0 !important;
  box-shadow: none !important;
  opacity: .55;
  transition: opacity .15s ease, color .15s ease;
}
.expenses-budget-edit-btn:hover { color: var(--slate-gold); opacity: 1; }
.expenses-budget-edit-btn svg { display: block; }
.expenses-budget-form {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 280px;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
  padding: .75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: .25rem 0 0;
}
.expenses-budget-field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.expenses-budget-field span {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.expenses-budget-field input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  background: rgba(245, 239, 227, .04);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: 0 .65rem;
  height: 32px;
  margin: 0 !important;
  box-shadow: none !important;
}
.expenses-budget-field input:focus {
  border-color: var(--slate-gold);
  outline: none;
}

/* Empty state. */
.expenses-empty-hero {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(245, 239, 227, .02);
  border: 1px dashed var(--slate-line-dark);
  color: var(--pico-muted-color);
  font-style: italic;
  font-size: 14px;
  text-align: center;
}

/* ─── Section titles ─── */
.expenses-section-title {
  font-family: var(--pico-font-family-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0 0 .85rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
  display: flex;
  align-items: baseline;
  gap: .65rem;
}

/* ─── Log-an-expense form ─── ALL inputs identical. */
.expenses-add { margin: 1rem 0 0; }
.expenses-add-form { margin: 0; }
.expenses-add-row {
  display: grid;
  /* Columns: date · type · company · amount · notes · billable · submit.
     Billable is a tight checkbox column (50px) between Notes and Add. */
  grid-template-columns: 140px 160px 1fr 120px 1fr 50px auto;
  gap: .65rem;
  /* end → stretch: the label+input pair fills the row, so the inputs
     bottom-align naturally because the labels are uniform-height. With
     `end`, any native chrome (date pickers, select carets) that renders
     a hair taller would push the bottom of THAT cell down, making
     visually-shorter neighbors look misaligned. */
  align-items: stretch;
}
@media (max-width: 900px) {
  .expenses-add-row { grid-template-columns: 1fr 1fr; }
}
.expenses-add-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0;
}
.expenses-add-field > span {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

/* Single canonical input style for the form — same height, same border,
   same font, same focus. No type-specific overrides except the dropdown
   caret and date chrome strip. */
.expenses-form-input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  background: rgba(245, 239, 227, .03);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: 0 .65rem;
  height: 36px;
  line-height: 1.4;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  /* Kill native number-input spinners (defensive — we use type=text now) */
}
.expenses-form-input::-webkit-outer-spin-button,
.expenses-form-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.expenses-form-input::placeholder {
  color: var(--pico-muted-color);
  opacity: .5;
}
.expenses-form-input:focus {
  border-color: var(--slate-gold);
  outline: none;
}
.expenses-form-input[type="date"] { background-image: none !important; }
/* Native date input renders its value via inner pseudo-elements; force
   them to the same cream color and font as the rest of the form. */
.expenses-form-input[type="date"]::-webkit-datetime-edit,
.expenses-form-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.expenses-form-input[type="date"]::-webkit-datetime-edit-text,
.expenses-form-input[type="date"]::-webkit-datetime-edit-month-field,
.expenses-form-input[type="date"]::-webkit-datetime-edit-day-field,
.expenses-form-input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--slate-cream);
  font-family: var(--pico-font-family);
}
.expenses-form-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(0.3);
  opacity: .55;
  cursor: pointer;
}
/* Same treatment for the cell-input date in the transactions table. */
.expenses-cell-input[type="date"]::-webkit-datetime-edit,
.expenses-cell-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.expenses-cell-input[type="date"]::-webkit-datetime-edit-text,
.expenses-cell-input[type="date"]::-webkit-datetime-edit-month-field,
.expenses-cell-input[type="date"]::-webkit-datetime-edit-day-field,
.expenses-cell-input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--slate-cream);
  font-family: var(--pico-font-family);
}
.expenses-cell-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(0.3);
  opacity: .45;
  cursor: pointer;
}
.expenses-form-select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pico-muted-color) 50%),
    linear-gradient(135deg, var(--pico-muted-color) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 10px) center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}
.expenses-form-input-amount { text-align: right; }
.expenses-add-submit {
  height: 36px;
  padding: 0 1.25rem;
  /* The button has no label above it, so with align-items:stretch on
     the grid it would fill the full row (label + input) height. Pin
     to the bottom of its cell so it lines up with the inputs. */
  align-self: end;
}

/* ─── Transactions ─── ledger style: no borders, autosave on blur,
   uniform font everywhere. Headers and cells share padding so columns
   visually line up. */
.expenses-list { margin: 2.5rem 0 0; }
.expenses-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.expenses-col-tx-date    { width: 140px; }
.expenses-col-tx-by      { width: 100px; }
.expenses-col-tx-type    { width: 160px; }
.expenses-col-tx-company { width: 22%;   }
.expenses-col-tx-amount  { width: 110px; }
.expenses-col-tx-notes   { width: auto;  }
.expenses-col-tx-billable { width: 44px;  }
.expenses-col-tx-actions  { width: 36px;  }

/* Billable checkbox — appears in both the log-an-expense form and as
   an inline-editable cell in the transactions table. Reuses Pico's
   native checkbox; sized to match the row height. */
.expenses-billable-checkbox {
  width: 16px;
  height: 16px;
  margin: 0 !important;
  cursor: pointer;
  accent-color: var(--slate-gold);
}
.expenses-add-field-billable {
  /* Center the checkbox vertically against the labeled inputs so it
     doesn't look orphaned at the bottom of the form row. */
  align-items: center;
  justify-content: center;
}
.expenses-add-field-billable > span {
  text-align: center;
}
.expenses-cell-billable {
  text-align: center !important;
  vertical-align: middle;
  padding: 0 .25rem !important;
}

/* Accent for the "unbilled" callout on the Project Doc Expenses tool
   card — same gold as other actionable cues, so the eye picks it up
   without a banner-level intervention. */
.project-doc-tool-hint-accent {
  color: var(--slate-gold);
  font-weight: 600;
}
.expenses-list-table thead th {
  text-align: left;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  padding: 0 .5rem .35rem;     /* same horizontal padding as cell input padding */
  border: none;
  background: transparent;
}
.expenses-list-table tbody td {
  padding: 0;                  /* cell padding lives on the input itself */
  border: none;
  color: var(--slate-cream);
  vertical-align: middle;
}
.expenses-list-table thead th.expenses-num { text-align: right; }

/* One canonical cell input — same font, same size, same padding. */
.expenses-cell-input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--slate-cream);
  padding: 0 .5rem;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}
.expenses-cell-input::-webkit-outer-spin-button,
.expenses-cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.expenses-cell-input::placeholder { color: var(--pico-muted-color); opacity: .5; }
.expenses-cell-input:hover {
  background: rgba(245, 239, 227, .03);
  border-color: var(--slate-line-dark);
}
.expenses-cell-input:focus {
  background: rgba(245, 239, 227, .06);
  border-color: var(--slate-gold);
  outline: none;
}
.expenses-cell-date { background-image: none !important; }
.expenses-cell-amount { text-align: right; }
.expenses-cell-type {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pico-muted-color) 50%),
    linear-gradient(135deg, var(--pico-muted-color) 50%, transparent 50%);
  background-position: calc(100% - 10px) center, calc(100% - 6px) center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
/* Force-match select height to the input neighbors. Native <select>
   with appearance:none in Chrome ignores explicit height when set via
   non-!important rules; the bang here is necessary to win the cascade
   against UA + Pico defaults. Two-class specificity selector for extra
   weight. */
select.expenses-cell-input.expenses-cell-type {
  height: 30px !important;
  min-height: 30px !important;
  line-height: 28px !important;
  padding: 0 1.2rem 0 .5rem !important;
  box-sizing: border-box !important;
}
/* Form select — same trick at the 36px form-input height. */
select.expenses-form-input.expenses-form-select {
  height: 36px !important;
  min-height: 36px !important;
  line-height: 34px !important;
  padding: 0 1.5rem 0 .65rem !important;
  box-sizing: border-box !important;
}
/* BLANKET enforcement: every input + select in the Log-an-expense row
   gets identical clamped dimensions. Native <input type="date"> tends
   to render taller than its specified height in Chrome because it
   reserves space for the calendar widget regardless of appearance:none;
   max-height + min-height pinned to the same value clamps it down so
   it visually matches the SELECT and text inputs sitting next to it.
   This is the only rule that wins reliably across browser versions. */
.expenses-add-row input:not([type="checkbox"]),
.expenses-add-row select {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}
/* "By" column — read-only text cell. The td already has
   vertical-align: middle so the name centers within row height without
   needing flex (which was pushing the text to the top). */
.expenses-cell-by {
  font-family: var(--pico-font-family);
  font-size: 13px;
  color: var(--slate-cream);
  padding: 0 .5rem !important;
  height: 30px;
  line-height: 30px;
}

/* Delete — tiny ×, no chrome until hover. */
.expenses-row-actions { text-align: right; padding-right: .25rem !important; }
.expenses-row-delete-form { margin: 0; display: inline-flex; }
.expenses-row-delete {
  background: transparent;
  border: none;
  color: var(--pico-muted-color);
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  margin: 0 !important;
  box-shadow: none !important;
  opacity: .5;
  transition: opacity .15s ease, color .15s ease;
}
.expenses-row-delete:hover { color: var(--color-danger); opacity: 1; }


/* ─── Invoices (M17) ─── Stripe-backed billing UI. Same dark-cream
   editorial style as Expenses, with status pills and Stripe-link
   affordances on the detail page. */
.invoices-page,
.invoice-detail-page { max-width: 1100px; margin: 0 auto; }

/* Headline totals strip. Three blocks side-by-side, separated by
   thin dark lines. Cream amount, muted label, accent color for
   "collected" (green-ish) and "outstanding" (amber). */
.invoices-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--slate-line-dark);
  border-bottom: 1px solid var(--slate-line-dark);
}
.invoices-summary-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-bottom: .35rem;
}
.invoices-summary-amount {
  font-family: var(--pico-font-family);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--slate-cream);
  font-variant-numeric: tabular-nums;
}
.invoices-summary-collected   { color: var(--color-success); }
.invoices-summary-outstanding { color: var(--slate-gold); }
.invoices-summary-remaining   { color: var(--slate-cream); }

/* Section titles match the expenses page. */
.invoices-section-title {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 1.75rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
}

/* ---------------------------------------------------------------------------
   /invoices — aggregate list across every project + client. Year picker
   in the header, summary row, status filter chips, sortable table.
   --------------------------------------------------------------------------- */

.invoices-year-form { margin: 0; }
.invoices-year-select {
  width: auto !important;
  display: inline-block !important;
  min-width: 90px;
  padding: .35rem .55rem !important;
  font-size: 13px !important;
  height: auto !important;
}

/* Summary row — 5 cells now: Signed / Invoiced / Paid / Outstanding / To Be Invoiced */
.invoices-list-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin: 0 0 1.75rem;
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.invoices-list-summary-5 { grid-template-columns: repeat(5, 1fr); }
.invoices-list-summary-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) {
  .invoices-list-summary-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .invoices-list-summary,
  .invoices-list-summary-5,
  .invoices-list-summary-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .invoices-list-summary,
  .invoices-list-summary-5,
  .invoices-list-summary-6 { grid-template-columns: repeat(2, 1fr); }
}
.invoices-list-summary-value-signed { color: var(--slate-cream); }
.invoices-list-summary-value-tbi    { color: var(--slate-cream); opacity: .9; }
.invoices-list-summary-cell { display: flex; flex-direction: column; gap: .35rem; }
.invoices-list-summary-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.invoices-list-summary-value {
  font-family: var(--pico-font-family-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--slate-cream);
  line-height: 1.1;
  white-space: nowrap;
}
.invoices-list-summary-value-collected { color: var(--color-success); }
.invoices-list-summary-value-outstanding { color: var(--slate-gold); }

/* Table — same dark, line-led aesthetic as the other Slate lists. */
.invoices-list-table-wrap {
  margin: .5rem 0 1.5rem;
  overflow-x: auto;
}
.invoices-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: transparent !important;
}
.invoices-list-table thead th {
  text-align: left;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--slate-line-dark);
  background: transparent !important;
}
.invoices-list-sort-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  transition: color .15s ease;
}
.invoices-list-sort-link:hover,
.invoices-list-sort-link.is-active { color: var(--slate-cream); }
.invoices-list-table tbody td {
  padding: .75rem .9rem;
  border-bottom: 1px solid rgba(245, 239, 227, .05);
  color: var(--slate-cream);
  vertical-align: middle;
  background: transparent !important;
}
.invoices-list-row {
  cursor: pointer;
  transition: background .12s ease;
}
.invoices-list-row:hover td { background: rgba(245, 239, 227, .03) !important; }
.invoices-list-col-date,
.invoices-list-col-number,
.invoices-list-col-amount,
.invoices-list-col-paid,
.invoices-list-col-status { white-space: nowrap; }
.invoices-list-col-amount,
.invoices-list-col-paid { text-align: right; font-variant-numeric: tabular-nums; }
.invoices-list-number-link,
.invoices-list-project-link {
  color: var(--slate-cream);
  text-decoration: none;
  border-bottom: 1px dotted var(--slate-line-dark);
  transition: color .15s ease, border-color .15s ease;
}
.invoices-list-number-link:hover,
.invoices-list-project-link:hover {
  color: var(--slate-gold);
  border-bottom-color: var(--slate-gold);
}
.invoices-list-empty { color: var(--color-muted); font-style: italic; }
.invoices-list-cap-note {
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
  margin: 1rem 0 0;
  font-style: italic;
}

/* "New invoice" section. */
.invoices-new { margin: 1rem 0 0; }
.invoices-bill-to {
  font-size: 13px;
  color: var(--pico-muted-color);
  margin: 0 0 1rem;
}
.invoices-bill-to strong { color: var(--slate-cream); font-weight: 600; }
.invoices-empty-hero {
  margin: 1.5rem 0;
  font-size: 14px;
  color: var(--pico-muted-color);
  font-style: italic;
}

/* Quick-action row. Ghost buttons side by side. */
.invoices-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0 0 1.25rem;
}
.invoices-quick-form { margin: 0; }
.invoices-quick-btn { min-width: 140px; }

/* One-off form mirrors the expenses Log-an-expense row. */
.invoices-oneoff-form { margin: 0; }
.invoices-oneoff-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: .65rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .invoices-oneoff-row { grid-template-columns: 1fr; }
}
.invoices-add-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0;
}
.invoices-add-field > span {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.invoices-form-input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  background: rgba(245, 239, 227, .03);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: 0 .65rem;
  height: 36px;
  line-height: 1.4;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.invoices-form-input::placeholder { color: var(--pico-muted-color); opacity: .5; }
.invoices-form-input:focus { border-color: var(--slate-gold); outline: none; }
.invoices-form-input-amount { text-align: right; }
.invoices-form-select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pico-muted-color) 50%),
    linear-gradient(135deg, var(--pico-muted-color) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 10px) center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}
select.invoices-form-input.invoices-form-select {
  height: 36px !important;
  min-height: 36px !important;
  line-height: 34px !important;
  padding: 0 1.5rem 0 .65rem !important;
  box-sizing: border-box !important;
}
.invoices-oneoff-row input,
.invoices-oneoff-row select,
.invoice-line-add-row input,
.invoice-line-add-row select {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}
.invoices-oneoff-submit,
.invoice-line-add-submit {
  height: 36px;
  align-self: end;
  padding: 0 1.25rem;
}

/* List table mirrors expenses-list-table. */
.invoices-list { margin: 2.5rem 0 0; }
.invoices-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.invoices-list-table thead th {
  text-align: left;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  padding: 0 .5rem .5rem;
  border: none;
  background: transparent;
}
.invoices-list-table tbody td {
  padding: .55rem .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
}
.invoices-list-table thead th.invoices-num { text-align: right; }
.invoices-num { text-align: right; font-variant-numeric: tabular-nums; }
.invoices-cell-num { font-family: var(--pico-font-family-display); color: var(--slate-gold); }
.invoices-cell-desc {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoices-row-actions { text-align: right; padding-right: .25rem !important; }

/* Invoice status pills — visual match to .pill, retained class names so
   the templates that already use them don't need to migrate. */
.invoices-status {
  display: inline-block;
  font-family: var(--pico-font-family-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
  vertical-align: middle;
}
.invoices-status-draft    { color: var(--color-muted); }
.invoices-status-sent     { color: var(--slate-gold); }
.invoices-status-paid     { color: var(--color-success); }
.invoices-status-partial  { color: var(--slate-gold); }
.invoices-status-void     { color: var(--color-muted); opacity: .6; }
.invoices-status-overdue  { color: var(--color-danger); }

/* ─── Historical invoice panel ───────────────────────────────────
   Wraps the balance summary + record-payment form for HubSpot-imported
   invoices into a single visual block. The "Historical · HubSpot" tag
   in the header makes it obvious why there are no Stripe buttons. */
.invoice-historical-panel {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
}
.invoice-historical-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.invoice-historical-title {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
}
.invoice-historical-tag {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 2px 8px;
  border: 1px solid var(--slate-line-dark);
  border-radius: 999px;
}

/* Balance summary — three rows, last row emphasized (balance due). */
.invoice-historical-balance {
  margin: 0 0 1.25rem;
}
.invoice-historical-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .4rem 0;
  font-size: 13px;
  color: var(--color-muted);
}
.invoice-historical-balance-row-total {
  margin-top: .25rem;
  padding-top: .85rem;
  border-top: 1px solid var(--slate-line-dark);
  font-size: 14px;
}
.invoice-historical-balance-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.invoice-historical-balance-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--slate-cream);
}
.invoice-historical-balance-paid { color: var(--color-success); }
.invoice-historical-balance-due  { color: var(--slate-gold); font-size: 18px; }
.invoice-historical-balance-done { color: var(--color-success); font-size: 18px; }
.invoice-historical-paid-date {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: .5rem;
}

/* Record-payment form — single horizontal row, balanced widths.
   Labels align at the TOP (align-items: start) and every field has
   the same total stack height (label + gap + 36px input). Inputs +
   selects get the same locked height regardless of Pico defaults. */
.invoice-record-payment-form { margin: 0; }
.invoice-record-payment-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: .85rem;
  align-items: start;
}
@media (max-width: 700px) {
  .invoice-record-payment-row { grid-template-columns: 1fr 1fr; }
  .invoice-record-submit { grid-column: 1 / -1; }
}
.invoice-record-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0;
}
.invoice-record-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1.2;
  min-height: 14px;
}
/* Lock height on BOTH input and select — Pico's select default has
   extra padding that broke the row's visual alignment. */
.invoice-record-input,
select.invoice-record-input {
  box-sizing: border-box;
  height: 36px !important;
  min-height: 36px;
  max-height: 36px;
  padding: 0 .65rem;
  margin: 0;
  font-family: var(--pico-font-family);
  font-size: 13px;
  line-height: 1;
  color: var(--slate-cream);
  background: var(--slate-ink-3, var(--slate-ink));
  border: 1px solid var(--slate-line-dark);
  border-radius: 0;
  box-shadow: none !important;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
select.invoice-record-input {
  /* Inline chevron so the dropdown isn't a bare arrow. Right-padded so
     the chevron doesn't overlap the value text. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23999'/></svg>");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 1.75rem;
}
.invoice-record-input:focus,
select.invoice-record-input:focus {
  outline: none;
  border-color: var(--slate-gold);
}
/* The Record button sits in the same row — line it up with the inputs
   (label sibling above is empty space height). */
.invoice-record-submit {
  height: 36px !important;
  min-height: 36px;
  width: auto;
  min-width: 6.5rem;
  margin-top: calc(14px + .3rem);  /* label height + gap */
}
@media (max-width: 700px) {
  .invoice-record-submit { margin-top: .25rem; }
}

/* ─── Invoice detail page ──────────────────────────────────────── */
.invoice-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 1.5rem 0 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.invoice-detail-eyebrow {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0 0 .25rem;
}
.invoice-detail-title {
  font-family: var(--pico-font-family-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--slate-cream);
  margin: 0 0 .4rem;
}
.invoice-detail-sub {
  margin: 0;
  font-size: 14px;
  color: var(--pico-muted-color);
}
.invoice-detail-status-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
.invoice-detail-amount {
  font-family: var(--pico-font-family);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--slate-gold);
}

/* Details panel — same chrome as .invoice-historical-panel below so
   the invoice page reads as a stack of matching cards. */
.invoice-detail-panel {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--slate-ink-2);
  border: 1px solid var(--slate-line-dark);
}
.invoice-detail-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--slate-line-dark);
}
.invoice-detail-panel-title {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
}

.invoice-detail-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;     /* lives inside .invoice-detail-panel now — no outer margin */
}
.invoice-detail-meta > div { margin: 0; }
.invoice-detail-meta dt {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0 0 .25rem;
}
.invoice-detail-meta dd { margin: 0; font-size: 14px; color: var(--slate-cream); }

.invoice-detail-stripe-links {
  margin: 0 0 1.5rem;
  font-size: 13px;
}
.invoice-detail-stripe-links a {
  color: var(--slate-gold);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.invoice-detail-stripe-links a:hover { opacity: .8; }

.invoice-detail-lines { margin: 1rem 0 2rem; }
.invoice-detail-empty {
  font-size: 13px;
  font-style: italic;
  color: var(--pico-muted-color);
  margin: 1rem 0;
}
.invoice-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.invoice-lines-table thead th {
  text-align: left;
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  padding: 0 .5rem .5rem;
  border: none;
}
.invoice-lines-table thead th.invoices-num { text-align: right; }
.invoice-lines-table tbody td {
  padding: .5rem;
  border-bottom: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
}
/* Inline-edit inputs for draft invoice lines. Sit flush in the cells —
   minimal chrome, transparent background, just a thin underline that
   gets emphatic on focus. Matches the inline-edit feel used elsewhere. */
.invoice-line-edit-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: .25rem .35rem;
  color: var(--slate-cream);
  font-family: var(--pico-font-family);
  font-size: 13px;
  margin: 0 !important;
  box-shadow: none !important;
  transition: border-color .12s ease, background .12s ease;
}
.invoice-line-edit-input:hover {
  border-color: var(--slate-line-dark);
}
.invoice-line-edit-input:focus {
  outline: none;
  border-color: var(--slate-gold);
  background: rgba(245, 239, 227, .04);
}
.invoice-line-edit-input-qty     { width: 56px; text-align: right; }
.invoice-line-edit-input-amount  { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.invoice-lines-edit-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
}
.invoice-lines-edit-hint {
  font-size: 11px;
  color: var(--color-muted);
  font-style: italic;
}
/* Paper-mode flips */
:root[data-theme] .invoice-line-edit-input {
  color: var(--paper-ink);
}
:root[data-theme] .invoice-line-edit-input:hover {
  border-color: var(--paper-rule);
}
:root[data-theme] .invoice-line-edit-input:focus {
  border-color: var(--paper-gold);
  background: rgba(180, 140, 60, .06);
}
:root[data-theme] .invoice-lines-edit-hint { color: var(--paper-ink-mute); }
.invoice-lines-foot-label {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  text-align: right;
  padding: .9rem .5rem !important;
}
.invoice-lines-foot-amount {
  font-family: var(--pico-font-family);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--slate-gold);
  padding: .9rem .5rem !important;
}

/* Add-line form sits below the line items table. */
.invoice-line-add-form { margin: 1.25rem 0 0; }

/* Pull-billable button sits ABOVE the add-line form when there are
   un-bundled billable expenses on the project. Gold-tinted amount so
   the actionable number pulls the eye; muted hint explains why it's
   there. */
.invoice-pull-billable-form {
  margin: 1.25rem 0 0;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  background: rgba(196, 154, 79, .04);
  border: 1px dashed rgba(196, 154, 79, .35);
}
.invoice-pull-billable-amount {
  color: var(--slate-gold);
  font-weight: 700;
  margin-left: .25rem;
}
.invoice-pull-billable-hint {
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
}
.invoice-line-add-row {
  display: grid;
  grid-template-columns: 1fr 80px 140px auto;
  gap: .65rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .invoice-line-add-row { grid-template-columns: 1fr; }
}
.invoices-row-delete {
  background: transparent;
  border: 0;
  color: var(--pico-muted-color);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  width: 22px;
  height: 22px;
  margin: 0 !important;
  box-shadow: none !important;
  opacity: .5;
  transition: opacity .15s ease, color .15s ease;
}
.invoices-row-delete:hover { color: var(--color-danger); opacity: 1; }

/* Actions row — buttons inline. */
.invoice-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-line-dark);
}
.invoice-detail-actions form { margin: 0; }
.invoice-action-form {
  display: flex;
  gap: .65rem;
  align-items: stretch;
}
.invoice-detail-paid-note {
  margin: 0;
  font-size: 14px;
  color: var(--pico-muted-color);
  font-style: italic;
}


/* ─── Project Doc — Billing section (M17-5) ──────────────────────
   Mirrors the Scope+Links bottom-grid layout: 1fr 1fr two-column
   on desktop, stacked on mobile. Billing Plan (actionable) on the
   left; Invoices list (reference) on the right. */
.project-doc-billing-section {
  margin: 2rem 0 0;
}

/* Both panels reuse the project-doc-panel head style + cream text. */
.project-billing-panel,
.project-invoices-panel {
  padding: 1.25rem 1.25rem 1.1rem;
  border: 1px solid var(--slate-line-dark);
  background: rgba(245, 239, 227, .02);
}
.project-doc-panel-link {
  font-size: 11px;
  color: var(--slate-gold);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.project-doc-panel-link:hover { opacity: .8; }

/* Plan summary — 2 or 3 stacked rows showing deposit/balance or retainer. */
.project-billing-plan-summary {
  margin: .85rem 0 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--slate-line-dark);
  border-bottom: 1px solid var(--slate-line-dark);
}
.project-billing-plan-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 1rem;
  padding: .35rem 0;
}
.project-billing-plan-kind {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.project-billing-plan-pct {
  font-size: 12px;
  color: var(--pico-muted-color);
  font-variant-numeric: tabular-nums;
}
.project-billing-plan-amount {
  font-family: var(--pico-font-family);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--slate-cream);
  font-variant-numeric: tabular-nums;
  /* Don't let "$55,657" wrap mid-number — Pico's default
     overflow-wrap breaks at any character when the column gets
     squeezed. Lock the amount to one line. */
  white-space: nowrap;
}
.project-billing-plan-per {
  font-size: 11px;
  color: var(--pico-muted-color);
  font-family: var(--pico-font-family);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: .15rem;
}
/* Metered: italic description instead of a number, since there's no
   contracted amount to display. */
.project-billing-plan-meta {
  font-family: var(--pico-font-family);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  color: var(--pico-muted-color);
  letter-spacing: 0;
}
.project-billing-plan-meta-inline {
  flex: 1;
  font-size: 12px;
  color: var(--pico-muted-color);
  font-style: italic;
  align-self: center;
}
.project-billing-plan-form-metered {
  grid-template-columns: 1fr auto;   /* no input field — text + button */
}

/* Edit accordion — minimal Pico defaults. */
.project-billing-plan-edit {
  margin: 0 0 1rem;
}
.project-billing-plan-edit summary {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  cursor: pointer;
  list-style: none;
  padding: .3rem 0;
  /* Strip Pico's default details>summary chrome — that blue card-bg
     was bleeding through here. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
}
.project-billing-plan-edit[open] > summary {
  background: transparent !important;
  border: 0 !important;
}
.project-billing-plan-edit summary::-webkit-details-marker { display: none; }
.project-billing-plan-edit summary::before {
  content: '+ ';
  font-family: var(--pico-font-family-display);
  font-weight: 700;
}
.project-billing-plan-edit[open] summary::before { content: '− '; }
.project-billing-plan-edit-body {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid var(--slate-line-dark);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.project-billing-plan-form {
  display: grid;
  grid-template-columns: 140px auto;  /* fixed input column, button takes rest */
  align-items: end;
  gap: .65rem;
  margin: 0;
}
.project-billing-plan-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0;
  min-width: 0;        /* let the input shrink instead of overflowing */
}
.project-billing-plan-field > span {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
.project-billing-plan-field input {
  font-family: var(--pico-font-family);
  font-size: 13px;
  background: rgba(245, 239, 227, .03);
  border: 1px solid var(--slate-line-dark);
  color: var(--slate-cream);
  padding: 0 .65rem;
  height: 32px;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100%;          /* fill the label cell — the actual culprit */
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.project-billing-plan-field input[type="number"] {
  /* Kill the up/down spinners — they steal pixels and aren't useful at
     coarse percent steps. Same trick as the expenses Amount field. */
  -moz-appearance: textfield;
}
.project-billing-plan-field input[type="number"]::-webkit-outer-spin-button,
.project-billing-plan-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.project-billing-plan-field input:focus {
  border-color: var(--slate-gold);
  outline: none;
}
.project-billing-plan-field input:focus {
  border-color: var(--slate-gold);
  outline: none;
}

/* Quick actions — generate-invoice buttons. */
.project-billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}
.project-billing-action-form { margin: 0; }
.project-billing-no-contact,
.project-billing-empty {
  margin: 1rem 0;
  font-size: 13px;
  color: var(--pico-muted-color);
  font-style: italic;
  line-height: 1.5;
}

/* ─── Invoices panel — list of recent invoices ──────────────────── */
.project-invoices-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
  margin: .85rem 0 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--slate-line-dark);
  border-bottom: 1px solid var(--slate-line-dark);
}
.project-invoices-totals-label {
  font-family: var(--pico-font-family-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin-bottom: .25rem;
}
.project-invoices-totals-amount {
  font-family: var(--pico-font-family-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-cream);
  font-variant-numeric: tabular-nums;
}
.project-invoices-totals-collected   { color: var(--color-success); }
.project-invoices-totals-outstanding { color: var(--slate-gold); }

.project-invoices-list {
  /* Plain block container — no list semantics. The previous <ul>/<li>
     leaked a marker glyph past every reset we tried. */
  margin: 0;
  padding: 0;
}
.project-invoices-row-link {
  display: grid;
  grid-template-columns: 70px 1fr 90px 90px 70px;
  gap: .75rem;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid var(--slate-line-dark);
  font-size: 13px;
  color: var(--slate-cream);
  text-decoration: none;
}
.project-invoices-list > .project-invoices-row-link:last-child { border-bottom: 0; }
.project-invoices-row-link:hover { background: rgba(245, 239, 227, .03); }
.project-invoices-row-num {
  font-family: var(--pico-font-family-display);
  color: var(--slate-gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
.project-invoices-row-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-invoices-row-date {
  font-size: 11px;
  color: var(--pico-muted-color);
}
.project-invoices-row-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .project-invoices-row-link {
    grid-template-columns: 60px 1fr 70px 60px;
  }
  .project-invoices-row-date { display: none; }
}

/* ─── Dashboard ──────────────────────────────────────────────────────
   Producer landing page at /. Two-column hero: "Your work" (assigned
   deliverables) on the left, "Needs attention" (financials) or
   "Recently updated" (crew) on the right. Calm, single-screen.
*/

.dashboard-page .slate-list-header { margin-bottom: 1.75rem; }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.dashboard-panel {
  background: rgba(245, 239, 227, .02);
  border: 1px solid var(--slate-line-dark);
  padding: 1rem 1.1rem 1.1rem;
}

.dashboard-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--slate-line-dark);
  flex-wrap: wrap;
}
.dashboard-panel-title {
  font-family: var(--pico-font-family-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-cream);
  margin: 0;
}
.dashboard-panel-link {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--pico-muted-color);
  text-decoration: none;
}
.dashboard-panel-link:hover { color: var(--slate-gold); }

.dashboard-empty {
  padding: 1.25rem .25rem;
  color: var(--pico-muted-color);
  font-size: 14px;
}
.dashboard-empty p { margin: 0 0 .25rem; }
.dashboard-empty-sub { font-size: 13px; }
.dashboard-empty a { color: var(--slate-gold); text-decoration: none; }
.dashboard-empty a:hover { text-decoration: underline; }

/* Your work list */
.dashboard-deliv-list,
.dashboard-recent-list,
.dashboard-na-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dashboard-deliv-row + .dashboard-deliv-row,
.dashboard-recent-row + .dashboard-recent-row {
  border-top: 1px solid var(--slate-line-dark);
}
.dashboard-deliv-link,
.dashboard-recent-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .65rem .35rem;
  text-decoration: none;
  color: inherit;
}
.dashboard-recent-link { grid-template-columns: minmax(0, 1fr) auto; }
.dashboard-deliv-link:hover,
.dashboard-recent-link:hover { background: rgba(225, 174, 101, .04); }

.dashboard-deliv-prio {
  color: var(--slate-gold);
  font-size: 13px;
  line-height: 1;
}
.dashboard-deliv-main,
.dashboard-recent-main {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.dashboard-deliv-name,
.dashboard-recent-name {
  color: var(--slate-cream);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-deliv-meta {
  font-size: 12px;
  color: var(--pico-muted-color);
  display: flex;
  gap: .35rem;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-deliv-client { font-weight: 600; }
.dashboard-deliv-sep { opacity: .5; }
.dashboard-recent-client { font-size: 12px; color: var(--pico-muted-color); }

.dashboard-deliv-tail,
.dashboard-recent-tail {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Phase pill — shared with Recently Updated row. Subtle gold/ink tone
   that gets brighter as the phase advances toward delivery. */
.dashboard-phase-pill {
  font-family: var(--pico-font-family-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--slate-line-dark);
  color: var(--pico-muted-color);
  background: transparent;
  white-space: nowrap;
}
.dashboard-phase-development     { color: var(--pico-muted-color); }
.dashboard-phase-pre_production  { color: var(--slate-cream); border-color: rgba(225, 174, 101, .25); }
.dashboard-phase-production      { color: var(--slate-cream); border-color: rgba(225, 174, 101, .45); }
.dashboard-phase-post_production { color: var(--slate-gold);  border-color: rgba(225, 174, 101, .65); }
.dashboard-phase-delivered       { color: var(--slate-gold);  border-color: var(--slate-gold); background: rgba(225, 174, 101, .08); }

/* Due-date chip */
.dashboard-deliv-due,
.dashboard-recent-age {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--pico-muted-color);
  white-space: nowrap;
}
.dashboard-deliv-due-late   { color: #ef6f6f; font-weight: 700; }
.dashboard-deliv-due-today  { color: var(--slate-gold); font-weight: 700; }
.dashboard-deliv-due-soon   { color: var(--slate-cream); }
.dashboard-deliv-due-normal { color: var(--pico-muted-color); }

/* Needs Attention blocks */
.dashboard-na-stack {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.dashboard-na-block {
  background: transparent;
  border: 1px solid var(--slate-line-dark);
  border-left-width: 3px;
  padding: .55rem .7rem .65rem;
}
.dashboard-na-block > .dashboard-na-head { background: transparent; }
.dashboard-na-overdue  { border-left-color: #ef6f6f; }
.dashboard-na-aging    { border-left-color: var(--slate-gold); }
.dashboard-na-drafts   { border-left-color: rgba(225, 174, 101, .45); }
.dashboard-na-inactive { border-left-color: rgba(255, 255, 255, .2); }

.dashboard-na-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .35rem;
}
.dashboard-na-label {
  font-family: var(--pico-font-family-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-cream);
}
.dashboard-na-count {
  font-size: 12px;
  color: var(--pico-muted-color);
  font-variant-numeric: tabular-nums;
}
.dashboard-na-list li + li { border-top: 1px solid rgba(255, 255, 255, .04); }
.dashboard-na-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: .5rem;
  padding: .35rem .15rem;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.dashboard-na-list a:hover { background: rgba(225, 174, 101, .04); }
.dashboard-na-desc {
  color: var(--slate-cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-na-age {
  color: var(--pico-muted-color);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dashboard-na-amount {
  font-variant-numeric: tabular-nums;
  color: var(--slate-cream);
  font-size: 13px;
}