:root {
    --paper:      #FFFFFF;
    --cream:      #F5F1EB;
    --cream-soft: #FAF7F1;
    --cream-card: #FFFFFF;
  }

  /* Workspace: subtle ruler-bg + paper background for editorial feel */
  body.refresh-on .workspace {
    background: var(--paper);
    position: relative;
  }
  body.refresh-on .workspace::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(to right, rgba(31,30,29,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(31,30,29,0.025) 1px, transparent 1px);
    background-size: 224px 100%, 100% 120px;
    background-position: center top;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.05));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.05));
  }
  body.refresh-on .workspace > * { position: relative; z-index: 1; }

  /* Header — bigger editorial display + tighter letter-spacing.
     2026-05-13: split into GC (Inter semibold) + project name (Instrument
     Serif italic).  Matches index.html's canonical jobTop/jobBottom
     pattern so studio.html titles read like "Chinn 1200 116th Ave NE."
     instead of "1200 116th Ave NE" with no GC.  Steven: "i need to see
     GC in BOLD, then project name italic. make it look fucking stunning". */
  body.refresh-on .ws-head { margin-bottom: 32px; align-items: baseline; }
  body.refresh-on .ws-title {
    /* Wrapper is now neutral — the GC span and project-name span set
       their own font-family.  Removing Instrument Serif here means a
       bare hero-title fallback (no spans) would render in Inter, which
       is acceptable.
       2026-05-23 · matched to index.html typography scale (was 44px). */
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  body.refresh-on .ws-title .ws-title-gc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-style: normal;
    color: var(--ink);
  }
  body.refresh-on .ws-title .serif-it,
  body.refresh-on .ws-title-name {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    color: var(--ink);
    margin-left: 0.28em;
  }
  body.refresh-on .ws-sub {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 10px;
    letter-spacing: -0.005em;
  }
  body.refresh-on .ws-budget-val {
    font-family: 'Instrument Serif', Georgia, serif;
    /* 2026-05-23 · was 46px — matched to index.html hero-val scale (40px)
       but trimmed to 28px since there are 3 stacked side-by-side. */
    font-size: 28px;
    color: var(--ink);  /* less clay-loud; reserve clay for accents */
    letter-spacing: -0.02em;
    line-height: 1.0;
    font-variant-numeric: tabular-nums;
  }
  body.refresh-on .ws-budget-lab {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
  }

  /* Cards (panels) — match dashboard .card · bigger pad, refined border, hover lift */
  body.refresh-on .panel {
    background: var(--cream-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 26px;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  }
  body.refresh-on .panel:hover {
    border-color: var(--border-2);
    box-shadow: 0 1px 0 var(--border), 0 22px 44px -28px rgba(31,30,29,0.16);
  }
  body.refresh-on .panel-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px;
    font-family: 'JetBrains Mono', monospace;
    /* The clay-only treatment was loud; restrained ink-3 reads as a kicker not a heading */
  }
  body.refresh-on .panel-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 16px;
  }

  /* Layer grid gap + spacing breath */
  body.refresh-on .layer-grid { gap: 22px; margin-bottom: 32px; }

  /* ──────────────────────────────────────────────────────────────────
   * KPI-mode panels · pixel-for-pixel copy of index.html .kpi card
   * vocabulary so studio Cards 1/3/4 render identically to the
   * Portfolio Overview cards (01 Financial / 03 Cost Breakdown /
   * 06 Crew & Labor / 07 Productivity / 08 Procurement / 09 Vendor).
   *
   * Title is SANS-SERIF 19px weight 600 (NOT italic serif).  Only the
   * big stat numbers (.kpi-val-big.italic) use Instrument Serif italic.
   * ────────────────────────────────────────────────────────────────── */
  body.refresh-on .panel.kpi-mode .panel-tag {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 18px;
  }
  body.refresh-on .panel.kpi-mode .panel-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 19px; font-weight: 600;
    letter-spacing: -0.015em; color: var(--ink);
    margin: 0 0 6px;
    font-style: normal;
    line-height: 1.3;
  }
  body.refresh-on .kpi-sub {
    font-size: 12px; color: var(--ink-3); line-height: 1.55;
  }
  body.refresh-on .kpi-sub .n {
    color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums;
  }
  body.refresh-on .kpi-divider {
    border-top: 1px dashed var(--border-2);
    margin: 18px 0;
  }
  body.refresh-on .kpi-stat-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
  }
  body.refresh-on .kpi-val-big {
    font-family: 'Instrument Serif', Georgia, serif;
    /* 2026-05-23 · was 38px — matched index.html .vt-text scale (22px)
       so Card 2/3 stat values feel commensurate with the rest of the
       app. */
    font-size: 22px; line-height: 1.1; letter-spacing: -0.02em;
    color: var(--ink);
    font-weight: 400;
  }
  body.refresh-on .kpi-val-big.italic { font-style: italic; }
  body.refresh-on .hero-lab {
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
    margin-top: 6px;
  }
  body.refresh-on .kpi-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 8px;
  }
  body.refresh-on .dotline {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12px; color: var(--ink-2);
    padding: 6px 0;
  }
  body.refresh-on .dotline .dots {
    flex: 1; border-bottom: 1px dotted var(--border-2);
    transform: translateY(-3px);
    min-width: 16px;
  }
  body.refresh-on .dotline .v {
    font-variant-numeric: tabular-nums;
    color: var(--ink); font-weight: 500;
  }
  body.refresh-on .dotline .v.clay { color: var(--clay); }
  body.refresh-on .dotline .v.sage { color: var(--sage-ink); }
  body.refresh-on .kpi-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12.5px; padding: 7px 0;
  }
  body.refresh-on .kpi-row + .kpi-row {
    border-top: 1px dashed var(--border);
  }
  body.refresh-on .kpi-lbl { color: var(--ink-3); }
  body.refresh-on .kpi-val {
    font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500;
  }
  body.refresh-on .kpi-val.clay { color: var(--clay); }
  body.refresh-on .kpi-val.sage { color: var(--sage-ink); }
  /* Pills — exact match to index.html chip-sage / chip-clay / chip-ink */
  body.refresh-on .chip-sage {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--sage-soft); color: var(--sage-ink);
    border: 1px solid #C9DFB8;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    font-family: 'Inter', sans-serif; text-transform: none;
  }
  body.refresh-on .chip-sage::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px;
    background: #5A8F4A;
  }
  body.refresh-on .chip-clay {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--clay-soft); color: var(--clay);
    border: 1px solid #E8C6B2;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    font-family: 'Inter', sans-serif; text-transform: none;
  }
  body.refresh-on .chip-clay::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px;
    background: var(--clay);
  }
  body.refresh-on .chip-ink {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    background: var(--cream-soft); color: var(--ink-2);
    border: 1px solid var(--border-2);
    font-size: 11px; font-weight: 500;
    font-family: 'Inter', sans-serif; text-transform: none;
  }
  /* Minibar for percentage break-downs (Card 3 Cost Breakdown uses these) */
  body.refresh-on .minibar {
    display: grid; grid-template-columns: 110px 1fr 56px; gap: 10px;
    align-items: center; padding: 5px 0;
    font-size: 11.5px;
  }
  body.refresh-on .minibar-lbl { color: var(--ink-2); }
  body.refresh-on .minibar-track {
    height: 5px; background: var(--cream-soft); border-radius: 999px;
    border: 1px solid var(--border); overflow: hidden;
  }
  body.refresh-on .minibar-fill { height: 100%; background: var(--ink); border-radius: 999px; }
  body.refresh-on .minibar-fill.sage { background: #5A8F4A; }
  body.refresh-on .minibar-fill.clay { background: var(--clay); }
  body.refresh-on .minibar-val {
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--ink); font-weight: 500;
  }
  /* When a panel is in kpi-mode, suppress default deliverable-list bullets */
  body.refresh-on .panel.kpi-mode .deliverable-list { list-style: none; padding: 0; }
  body.refresh-on .panel.kpi-mode .deliverable-list ul,
  body.refresh-on .panel.kpi-mode .deliverable-list li { list-style: none; padding: 0; margin: 0; }

  /* Bid-card sidebar polish — 2026-05-13: densified to match the main
     home page's .sb-item density (index.html line 450).  Steven: "the
     workspace barely is visible - all the bids are so huge - make it
     beautiful like the main home page".  Previous treatment was 14px
     padding × 14px name × 12px meta with 10px gaps — each card ate
     ~90px of vertical real estate so 5 bids pushed the WORKSPACE label
     off-screen.  New treatment: 7px padding, 12px name, 10px meta,
     0px gap → ~52px per card.  Five bids fit in the same space the
     old layout used for two. */
  body.refresh-on .bid-card {
    padding: 8px 14px 9px;
    border-left: 2px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
    margin-top: 0 !important;  /* kill per-card inline margin-top: 10px */
  }
  body.refresh-on .bid-card:hover {
    background: var(--cream-soft);
    border-left-color: var(--border-2);
  }
  body.refresh-on .bid-card.active {
    background: var(--cream-soft);
    border-left-color: var(--clay);
  }
  body.refresh-on .bid-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
  }
  body.refresh-on .bid-name { font-size: 12.5px; font-weight: 500; margin-top: 1px; line-height: 1.3; color: var(--ink); }
  body.refresh-on .bid-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
  /* Sidebar bid-card chips — shrink to match the densified card.  Don't
     touch the global .chip-clay / -sage / -ink because those are used in
     the workspace center too. */
  body.refresh-on .bid-card .chip {
    padding: 2px 8px !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    gap: 5px !important;
    border-radius: 999px;
  }
  body.refresh-on .bid-card .chip::before { width: 4px !important; height: 4px !important; }
  body.refresh-on .bid-amount {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--ink);
    margin-top: 6px;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
  }

  /* Chips — match dashboard's chip-sage/chip-clay/chip-ink with dot prefix */
  body.refresh-on .chip-sage {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--sage-soft); color: var(--sage-ink);
    border: 1px solid #C9DFB8;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  }
  body.refresh-on .chip-sage::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px; background: #5A8F4A;
  }
  body.refresh-on .chip-clay {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--clay-soft); color: var(--clay);
    border: 1px solid #E8C6B2;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  }
  body.refresh-on .chip-clay::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--clay);
  }
  body.refresh-on .chip-ink {
    display: inline-flex; align-items: center;
    padding: 5px 11px; border-radius: 999px;
    background: var(--cream-soft); color: var(--ink-2);
    border: 1px solid var(--border-2);
    font-size: 11px; font-weight: 500;
  }

  /* Tables — fact-table, modal-table, ws-table refinement */
  body.refresh-on .fact-table { font-size: 13px; }
  body.refresh-on .fact-table td {
    padding: 9px 0;
    border-bottom: 1px dashed var(--border-2);
    line-height: 1.5;
  }
  body.refresh-on .fact-table td:first-child {
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    width: 40%;
  }
  body.refresh-on .fact-table td:last-child {
    text-align: right;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  /* Bid comparison panel (the 3-tile editorial group) */
  body.refresh-on .bid-compare {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--cream-soft);
    margin-top: 18px;
    overflow: hidden;
  }
  body.refresh-on .bid-compare-cell {
    padding: 22px 26px;
    border-right: 1px solid var(--border);
    background: var(--cream-card);
  }
  body.refresh-on .bid-compare-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
    font-family: 'JetBrains Mono', monospace;
    display: flex; align-items: center; gap: 10px;
  }
  body.refresh-on .bid-compare-val {
    font-family: 'Instrument Serif', Georgia, serif;
    /* 2026-05-23 · was 34px — matched ws-budget-val (28px) so the three
       compare-tile values feel like the same scale as the hero values. */
    font-size: 28px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }
  body.refresh-on .bid-compare-sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 8px;
    letter-spacing: -0.005em;
  }
  body.refresh-on .bid-compare-changes {
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 10px;
    font-family: 'JetBrains Mono', monospace;
  }
  body.refresh-on .bid-compare-link {
    color: var(--clay);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
  }
  body.refresh-on .bid-compare-link:hover { text-decoration: underline; }

  /* Status pills — match dashboard */
  body.refresh-on .status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
  }
  body.refresh-on .status-pill.submitted { background: var(--sage-soft); color: var(--sage-ink); }
  body.refresh-on .status-pill.inflight  { background: var(--clay-soft); color: var(--clay); }

  /* Working Sheet table (Card 5) — refined for the editorial feel */
  body.refresh-on .ws-table { font-size: 12px; }
  body.refresh-on .ws-table thead {
    background: transparent;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  body.refresh-on .ws-table th {
    padding: 12px 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-family: 'JetBrains Mono', monospace;
  }
  body.refresh-on .ws-table tbody tr {
    border-bottom: 1px dashed var(--border-2);
    transition: background 0.1s;
  }
  body.refresh-on .ws-table tbody tr:hover { background: var(--cream-soft); }
  body.refresh-on .ws-table td {
    padding: 10px 12px;
    font-variant-numeric: tabular-nums;
  }

  /* Cohort rows (Card 3 Comp Matcher) */
  body.refresh-on .cohort-row {
    background: var(--cream-soft);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
  }

  /* Envelope strips */
  body.refresh-on .envelope-strip {
    background: var(--clay-soft);
    border: 1px solid #E8C6B2;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--clay);
  }

  /* "Not yet populated" placeholder style (option B fallback copy) */
  body.refresh-on .panel p[style*="font-style: italic"] {
    color: var(--ink-4) !important;
    font-style: italic;
    font-size: 12px;
    padding: 8px 0;
  }