/* ============================================================
   REDESIGN — floating dark chrome (dock + top bar) over a warm
   cream canvas, driven by the Scene × Chrome runtime theme.
   Only the dock + top bar read --chr-*; the content stays cream.
   ============================================================ */

/* Warm cream canvas with soft radials — standalone pages (landing/auth) keep
   this as the page background; inside the app shell the cream lives on the
   content SHEET below, and the page behind it is the chrome. */
body {
  background:
    radial-gradient(78% 60% at 16% 0%, var(--cc-canvas-glow), transparent 60%),
    radial-gradient(70% 55% at 100% 16%, var(--cc-canvas-glow-2), transparent 60%),
    var(--cc-canvas);
  background-attachment: fixed;
}
/* App-frame: when the shell (dock) is mounted, the page background IS the
   chrome — the dock + top bar sit flush to the screen edges as one dark L,
   and the cream content sheet (below) rounds its inner corner against it. */
#root:has(> .cc-dock) { background: var(--chr-bg); transition: background .2s; }

/* ── DOCK — flush to the left edge, part of the chrome frame ── */
.cc-dock {
  width: var(--dock-w, 76px);
  flex-shrink: 0; align-self: flex-start;
  margin: 0;
  height: 100vh; position: sticky; top: 0;
  background: var(--chr-bg); border: 0;
  border-radius: 0; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  transition: width .24s cubic-bezier(.4,0,.2,1), background .2s, border-color .2s;
}
.cc-dock-lbl { display: var(--label-disp, none); }
.cc-dock-top { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; min-height: 44px; }
.cc-dock-mark {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 13px;
  background: var(--cc-grad-accent);
  display: flex; align-items: center; justify-content: center;
  font: 800 19px/1 var(--cc-font); color: #fff;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform .12s ease, filter .12s ease;
}
.cc-dock-mark:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cc-dock-mark:active { transform: translateY(0); }
.cc-dock-wm { font: 800 19px/1.25 var(--cc-font); letter-spacing: -.03em; color: var(--chr-tx); white-space: nowrap; flex: 1;
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer; transition: opacity .12s ease; }
.cc-dock-wm:hover { opacity: .82; }
.cc-dock-wm .dot { color: var(--acc2); }
/* Both dock toggles wear the same filled+bordered chrome as the top-bar icons,
   so the collapse control reads as an obvious button (not a faint glyph). */
.cc-dock-collapse, .cc-dock-expand {
  flex-shrink: 0; background: var(--chr-field); border: 1px solid var(--chr-fbrd); color: var(--chr-tx);
  align-items: center; justify-content: center; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.cc-dock-collapse:hover, .cc-dock-expand:hover { background: var(--chr-raise); border-color: var(--acc2); color: var(--chr-tx); }
/* Collapse button shows only when the dock is expanded (its job is to collapse). */
.cc-dock-collapse { display: none; width: 32px; height: 32px; border-radius: 9px; }
[data-dock="expanded"] .cc-dock-collapse { display: flex; }
/* Expand button shows only when collapsed (--exp-disp: flex ⇄ none). */
.cc-dock-expand { display: var(--exp-disp, none); align-self: center; width: 40px; height: 36px; border-radius: 10px; margin-bottom: 2px; }
.cc-dock-grp {
  font: 600 10px/1 var(--cc-font-soft); letter-spacing: .11em; text-transform: uppercase;
  color: var(--chr-mut); padding: 8px 10px 6px; white-space: nowrap;
}
.cc-dock-grp:not(:first-of-type) { padding-top: 16px; }
.cc-dock-nav {
  display: flex; align-items: center; gap: 12px;
  justify-content: var(--item-justify, center); padding: 10px 12px;
  /* Fixed row height so the label can never wobble or stretch the pill —
     the icon and text both center against the same 41px line. */
  height: 41px; box-sizing: border-box;
  /* Labels read SHARP WHITE at rest (Tomas 2026-07-15: "the sharp white
     text is whats so strong… white on dark") — the icons stay a step
     quieter so the rail keeps depth and the active row's terracotta
     glyph still lands. */
  border-radius: 12px; color: var(--chr-tx); cursor: pointer; white-space: nowrap;
  border: 0; background: none; width: 100%; position: relative;
  font: 500 13.5px/1 var(--cc-font-soft); text-align: left;
}
.cc-dock-nav .cc-dock-ico { font-size: 21px; flex-shrink: 0; color: var(--chr-mut); }
.cc-dock-nav:hover .cc-dock-ico { color: var(--chr-tx); }
.cc-dock-nav .cc-dock-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1; }
.cc-dock-nav:hover { background: var(--chr-raise); color: var(--chr-tx); }
.cc-dock-nav.on { background: var(--surf); color: var(--tx); font-weight: 600; }
/* Accounting tree — tools fan out under the Accounting item when you're in the
   ledger. Monochrome selection (matches .cc-dock-nav.on), never the accent. */
/* (removed: .cc-dock-chev/-tree/-tgrp/-tlbl/-tnav — the sidebar's inline
   accounting fan-out was replaced by CC.ui.AcctSubNav, butter's inner panel
   / mobile row. "Accounting" is now a single dock item.) */
.cc-topback { flex: 0 0 auto; }
.cc-dock-badge {
  display: var(--label-disp, none); background: var(--acc); color: #fff;
  font: 700 10.5px/1 var(--cc-font); border-radius: 7px; padding: 3px 7px;
}
/* Collapsed: still show the messages badge as a small dot on the icon. */
.cc-dock-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.cc-dock-create {
  display: flex; align-items: center; gap: 10px;
  justify-content: var(--item-justify, center); padding: 10px 12px;
  border-radius: 13px; border: 0; cursor: pointer; white-space: nowrap; width: 100%;
  background: var(--cc-grad-accent); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.28);
}
.cc-dock-create .cc-dock-ico { font-size: 22px; flex-shrink: 0; }
.cc-dock-create .cc-dock-lbl { font: 600 13.5px/1 var(--cc-font); flex: 1; text-align: left; }
.cc-dock-me {
  display: flex; align-items: center; gap: 10px;
  justify-content: var(--item-justify, center); padding: 6px 8px;
  white-space: nowrap; border: 0; background: none; cursor: pointer; width: 100%;
}
.cc-dock-me:hover { background: var(--chr-raise); border-radius: 11px; }
.cc-dock-av { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.cc-dock-av .cc-avatar { width: 34px; height: 34px; font-size: 12px; font-family: var(--cc-font); }
.cc-dock-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--cc-ok-ink); border: 2px solid var(--chr-bg); }
.cc-dock-me-id { line-height: 1.25; flex: 1; min-width: 0; text-align: left; overflow: hidden; }
.cc-dock-me-id .nm { display: block; font: 600 12.5px/1 var(--cc-font); color: var(--chr-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-dock-me-id .md { font-size: 10.5px; color: var(--chr-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ── Main column + TOP BAR — flush to the top edge, completing the L ── */
.cc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0; gap: 0; min-height: 100vh; }
.cc-top {
  display: flex; align-items: center; gap: 13px;
  height: 60px; flex-shrink: 0; padding: 0 16px 0 10px;
  border-radius: 0; border: 0; background: var(--chr-bg);
  position: sticky; top: 0; z-index: 20;
  transition: background .2s, border-color .2s;
}
/* The content SHEET: everything below the chrome is one warm cream panel
   whose inner (top-left) corner rounds against the dark frame.
   Round 6 fix (Tomas: "it goes black under the accounting navbar"): on
   accounting routes the SHEET is .acct-shell — it wraps BOTH the sub-nav
   rail and the content, so the rail lives on cream, not on the dark chrome.
   The rail itself is then a surface card ON the sheet (see the ACCT SUB-NAV
   block), matching the dashboard cards' roundness/colour. The inner .cc-body
   keeps the padding but paints NO second sheet. */
.cc-main > .cc-body {
  flex: 1;
  background:
    radial-gradient(78% 60% at 16% 0%, var(--cc-canvas-glow), transparent 60%),
    radial-gradient(70% 55% at 100% 16%, var(--cc-canvas-glow-2), transparent 60%),
    var(--cc-canvas);
  border-radius: 26px 26px 0 0;
  padding: 24px 26px 30px !important;
}
.cc-main > .acct-shell {
  flex: 1;
  background:
    radial-gradient(78% 60% at 16% 0%, var(--cc-canvas-glow), transparent 60%),
    radial-gradient(70% 55% at 100% 16%, var(--cc-canvas-glow-2), transparent 60%),
    var(--cc-canvas);
  border-radius: 26px 26px 0 0;
}
.cc-main .acct-shell-content > .cc-body {
  flex: 1;
  background: none;
  border-radius: 0;
  padding: 24px 26px 30px !important;
}
/* Classic-scrollbar environments paint the window gutter over the page edge —
   keep it warm, not void-dark (overlay-scrollbar browsers never show this). */
html { background: var(--cc-canvas); }
/* Wraps the search label + its live-results dropdown so the popover anchors
   under the field (position:relative). Carries the sizing .cc-search itself
   used to own — .cc-search-wrap is now the flex item, .cc-search fills it. */
.cc-search-wrap { flex: 1; max-width: 420px; position: relative; }
.cc-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--chr-field); border: 1px solid var(--chr-fbrd);
  border-radius: 12px; padding: 9px 13px; color: var(--chr-mut); font-size: 13.5px;
}
.cc-search .cc-search-ico { font-size: 17px; }
.cc-search input { border: 0; background: transparent; outline: 0; font: inherit; color: var(--chr-tx); width: 100%; }
.cc-search input::placeholder { color: var(--chr-mut); }
.cc-search-kbd { margin-left: auto; font: 600 10px/1 var(--cc-font); border: 1px solid var(--chr-fbrd); border-radius: 6px; padding: 3px 6px; color: var(--chr-mut); }
.cc-spacer { flex: 1; }
/* Live results dropdown (sweep finding 1) — same floating-card family as
   .cc-fpop everywhere else, just anchored under the header search field. */
.cc-searchpop { width: 340px; max-width: 80vw; }
.cc-searchpop-row { align-items: center; }
.cc-searchpop-row .cc-avatar { flex-shrink: 0; }
.cc-searchpop-txt { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.cc-searchpop-txt .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-searchpop-txt .s { font: 500 11.5px/1.3 var(--cc-font-soft); color: var(--cc-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-searchpop-more {
  width: 100%; text-align: center; background: none; border: 0; border-top: 1px solid var(--cc-line);
  margin-top: 4px; padding: 9px 6px 4px; font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-accent); cursor: pointer;
}
.cc-searchpop-more:hover { text-decoration: underline; }

/* Top-bar controls, all on chrome. */
.cc-topicon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--chr-field); border: 1px solid var(--chr-fbrd);
  display: flex; align-items: center; justify-content: center; color: var(--chr-tx); cursor: pointer;
}
.cc-topicon:hover { border-color: var(--acc2); }
.cc-topcreate {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 17px; flex-shrink: 0;
  border-radius: 12px; border: 0; cursor: pointer;
  background: var(--cc-grad-accent); color: #fff;
  font: 600 13.5px/1 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Create popover — the two-item menu behind the dock/top-bar Create buttons
   (Post a job / Post an update). Monochrome menu on surface tokens (selection
   chrome only — accent stays on the trigger); 8px radii per DESIGN_BIBLE. */
.cc-createpop-wrap { position: relative; flex-shrink: 0; }
.cc-side .cc-createpop-wrap { width: 100%; }
.cc-createpop {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 186px; z-index: 30;
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 8px; padding: 5px;
  box-shadow: 0 18px 40px -14px rgba(20,18,12,.35);
}
/* Dock variant sits in the dock foot — open upward, full dock width. */
.cc-createpop.up { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 100%; }
.cc-createpop-it {
  display: block; width: 100%; text-align: left; padding: 9px 11px;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  font: 600 13px/1.2 var(--cc-font); color: var(--cc-ink); white-space: nowrap;
}
.cc-createpop-it:hover { background: var(--cc-surface-2); }

/* Theme popover — follows the active look (tokens, not pinned-light: the
   midnight facelift made every look self-consistent). The chromeseg control
   died with the scene swatches — the look grid is the whole popover. */
.cc-themepop-wrap { margin-left: 0; position: relative; }
.cc-themepop {
  position: absolute; top: 47px; right: 0; width: 248px; z-index: 30;
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 16px; padding: 14px; color: var(--cc-ink);
  box-shadow: 0 24px 55px -16px rgba(0,0,0,.45);
}
.cc-themepop-lbl { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 9px; }
/* Sweep #26a: 2 columns inside the 248px-wide top-bar popover left "Mainstage"
   / "Roadcase" only ~55-65px of label room (icon + gap + the selected row's
   check icon), truncating to "Ro…" — a real box-contract violation (the
   quartet on .cc-scene-sw .nm below was CORRECTLY truncating, just with no
   room to not truncate). One column gives every row the full ~220px content
   width, so all 4 scene names always render whole regardless of font-scale.
   (.cc-setts overrides this back to a grid for its own much wider layout —
   see the Appearance block further down — where there's ample room.) */
.cc-scenegrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cc-scene-sw {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: 11px; border: 1px solid var(--cc-line); background: none; cursor: pointer; text-align: left;
  min-width: 0; overflow: hidden;
}
.cc-scene-sw:hover { background: var(--cc-surface-2); }
.cc-scene-sw.on { border-color: var(--acc); }
.cc-scene-sw .sw { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; }
.cc-scene-sw .nm { font: 600 12px/1 var(--cc-font-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cc-ink); }
.cc-scene-sw .ck { color: var(--acc); }

/* Look picker (theme trio, 2026-07-15): swatch | name | check on the first
   row; the Settings variant adds a one-line description under the name. The
   split swatch reads chrome-over-canvas, so it needs a hairline to hold its
   light half against the card. Tokens, not hexes — this block must read
   correctly on every look including midnight. */
.cc-lookgrid .cc-scene-sw { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 9px; }
.cc-lookgrid .cc-scene-sw .sw { border: 1px solid var(--cc-line); box-sizing: border-box; }
.cc-lookgrid .cc-scene-sw .ds { grid-column: 2 / 4; font: 500 11px/1.3 var(--cc-font-soft); color: var(--cc-muted); margin-top: 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bell + message buttons on chrome. */
.cc-bell { width: 38px; height: 38px; border-radius: 12px; background: var(--chr-field); border-color: var(--chr-fbrd); color: var(--chr-mut); }
.cc-bell:hover { background: var(--chr-raise); color: var(--chr-tx); }
.cc-bell-dot { background: var(--acc); border-color: var(--chr-bg); }
.cc-msgbadge { background: var(--chr-tx); color: var(--chr-bg); box-shadow: 0 0 0 2px var(--chr-bg); font-family: var(--cc-font); }

/* Profile chip on chrome. */
.cc-top .cc-chip { padding: 4px 11px 4px 5px; border-radius: 12px; background: var(--chr-field); border-color: var(--chr-fbrd); }
.cc-top .cc-chip .nm { color: var(--chr-tx); font-family: var(--cc-font); font-size: 13px; }
.cc-top .cc-chip .md { color: var(--cc-ok-ink); }
.cc-top .cc-chip i { color: var(--chr-mut); }
.cc-top .cc-avatar { font-family: var(--cc-font); }
.cc-top .cc-btn.sm { color: var(--chr-tx); background: var(--chr-field); border-color: var(--chr-fbrd); }
.cc-top .cc-btn.sm.primary { background: var(--cc-grad-accent); border: 0; color: #fff; }

/* Content body is flush inside the padded main column now. */
.cc-body { padding: 0; overflow: visible; }

/* ── Home screen (cream) ───────────────────────────────── */
/* Cap the home column + centre it — the feed must never sprawl edge-to-edge on
   a large monitor (a 48" screen made the cards absurdly wide). Other top-level
   pages are already bounded by .cc-maxw; the home was the one uncapped page. */
.cc-home { display: flex; gap: 16px; align-items: flex-start; max-width: 1280px; width: 100%; margin-inline: auto; }
.cc-home-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cc-home-rail { width: 336px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }

.cc-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 2px 2px 0; }
.cc-home-greet { font: 700 25px/1.12 var(--cc-font); letter-spacing: -.02em; color: var(--cc-ink); }
.cc-home-greet-sub { font-size: 13.5px; color: var(--cc-soft); margin-top: 4px; }
.cc-home-greet-sub .hl { color: var(--tx); font-weight: 600; cursor: pointer; }
.cc-home-greet-sub .hl:hover { text-decoration: underline; }
/* Right-side group of the head row: the Overview/Activity toggle plus (when
   collapsed) the rail-reopen chevron — same row, small gap, one flex child
   of .cc-home-head so space-between still splits greet ←→ this group
   (Tomas 2026-07-15: the reopen chevron used to float absolute over this row
   and overlap the toggle; .cc-rail-reopen itself is defined with the rest of
   the rail-collapse feature further down this file). */
.cc-home-head-right { display: flex; align-items: center; gap: 8px; }
.cc-home-toggle { display: flex; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 11px; padding: 3px; gap: 2px; box-shadow: 0 1px 2px rgba(45,38,28,.05); }
.cc-home-toggle button { padding: 7px 14px; border-radius: 8px; border: 0; background: none; cursor: pointer; color: var(--cc-soft); font: 600 12.5px/1 var(--cc-font-soft); }
/* Raised white pill; the track itself is white, so a hairline keeps the
   active state from vanishing into it. */
.cc-home-toggle button.on { background: var(--cc-surface); color: var(--cc-ink); border: 1px solid var(--cc-line); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Cards on cream. */
.cc-hcard {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px; padding: 16px 18px;
  box-shadow: var(--cc-shadow-card);
}

/* Offer / "Needs you" card — accent surface. */
.cc-offer {
  background: var(--surf); border: 1px solid var(--brd); border-radius: 20px; padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 30px -18px rgba(45,38,28,.2);
}
.cc-offer-top { display: flex; align-items: center; gap: 8px; }
.cc-offer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.cc-offer-kick { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--tx); }
.cc-offer-exp { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tx); font-weight: 600; }
.cc-offer-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cc-offer-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--cc-surface); border: 1px solid var(--brd); display: flex; align-items: center; justify-content: center; color: var(--acc); flex-shrink: 0; }
.cc-offer-id { flex: 1; min-width: 0; line-height: 1.35; }
.cc-offer-ttl { display: block; font: 700 17px/1.2 var(--cc-font); color: var(--cc-ink); }
.cc-offer-sub { display: block; font-size: 12.5px; color: var(--cc-soft); margin-top: 2px; }
.cc-offer-amt { font: 700 22px/1 var(--cc-font); color: var(--cc-ink); }
.cc-offer-acts { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.cc-offer-acts .cc-btn { border-radius: 11px; padding: 11px 16px; font: 600 13.5px/1 var(--cc-font); }
.cc-offer-acts .cc-btn.primary { background: var(--cc-grad-accent); border: 0; padding: 11px 18px; box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.cc-offer-acts .cc-btn.ghost { background: var(--cc-surface); border: 1px solid var(--brd); color: var(--tx); }
.cc-offer-acts .cc-btn.faint { background: transparent; border: 1px solid var(--brd); color: var(--cc-muted); }

/* Section header row. */
.cc-hsec-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 0; }
.cc-hsec-ttl { font: 700 15px/1 var(--cc-font); color: var(--cc-ink); }
.cc-hsec-pill { font: 700 10px/1 var(--cc-font); color: var(--tx); background: var(--surf); border: 1px solid var(--brd); border-radius: 999px; padding: 4px 8px; }
.cc-hsec-all { margin-left: auto; font: 600 12.5px/1.2 var(--cc-font-soft); color: var(--tx); background: none; border: 0; cursor: pointer; white-space: nowrap; }

/* (The old .cc-hgig-* open-call card recipes died 2026-07-14 with the
   FeedGigCard reskin — the feed job card now carries its own .cc-jobpost-*
   set, below in the Phase-3 home-feed section.) */

/* From-your-network card. */
.cc-hnet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-hnet-lbl { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); }
.cc-hnet-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.cc-hnet-row + .cc-hnet-row { border-top: 1px solid var(--cc-line-soft); }
.cc-hnet-row .cc-avatar { width: 38px; height: 38px; flex-shrink: 0; font-family: var(--cc-font); }
.cc-hnet-txt { flex: 1; min-width: 0; line-height: 1.4; }
.cc-hnet-txt .t { font-size: 13.5px; color: var(--cc-ink); }
.cc-hnet-txt .t b { font-family: var(--cc-font); font-weight: 600; }
.cc-hnet-txt .s { font-size: 11.5px; color: var(--cc-faint); margin-top: 2px; }
.cc-hnet-btn { background: var(--cc-surface-2); border: 1px solid var(--cc-line); color: var(--cc-soft); border-radius: 10px; padding: 8px 13px; font: 600 12px/1 var(--cc-font); white-space: nowrap; cursor: pointer; }

/* Right rail — profile card. */
.cc-rprofile { border-radius: 20px; overflow: hidden; background: var(--cc-surface); border: 1px solid var(--cc-line); box-shadow: var(--cc-shadow-card); }
.cc-rprofile-cover { height: 60px; background: linear-gradient(120deg, var(--acc2), var(--acc) 60%, var(--tx)); }
.cc-rprofile-b { padding: 0 16px 16px; margin-top: -28px; }
.cc-rprofile-avrow { display: flex; align-items: flex-end; justify-content: space-between; }
.cc-rprofile-av { position: relative; width: 58px; height: 58px; }
.cc-rprofile-av .cc-avatar { width: 58px; height: 58px; font: 600 18px/1 var(--cc-font); border: 3px solid #fff; }
.cc-rprofile-av .dot { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--cc-ok-ink); border: 2.5px solid #fff; }
.cc-avail-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--cc-ok-bg); border: 1px solid #C6DECB; color: var(--cc-ok-ink); border-radius: 999px; padding: 6px 11px; font: 600 11.5px/1 var(--cc-font-soft); margin-bottom: 4px; }
.cc-avail-badge .d { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-ok-ink); }
.cc-rprofile-nm { font: 700 17px/1.1 var(--cc-font); margin-top: 10px; color: var(--cc-ink); }
.cc-rprofile-role { font-size: 12.5px; color: var(--cc-muted); margin-top: 3px; }
.cc-rprofile-stats { display: flex; margin-top: 14px; border-top: 1px solid var(--cc-line-soft); padding-top: 12px; }
.cc-rstat { flex: 1; text-align: center; }
.cc-rstat + .cc-rstat { border-left: 1px solid var(--cc-line-soft); }
.cc-rstat .n { font: 700 16px/1 var(--cc-font); color: var(--cc-ink); }
.cc-rstat .n.acc { color: var(--tx); }
.cc-rstat .l { font-size: 10.5px; color: var(--cc-faint); margin-top: 3px; }

/* Right rail — generic card. */
.cc-rc { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px; padding: 15px 16px; box-shadow: var(--cc-shadow-card); }
.cc-rc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cc-rc-ttl { font: 700 14px/1 var(--cc-font); color: var(--cc-ink); }
.cc-rc-lbl { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 12px; }
.cc-rc-all { margin-left: auto; font: 600 12px/1.2 var(--cc-font-soft); color: var(--tx); background: none; border: 0; cursor: pointer; white-space: nowrap; }

/* Availability week strip. */
.cc-week { display: flex; gap: 5px; }
.cc-wday { flex: 1; text-align: center; border-radius: 9px; padding: 8px 0; background: var(--cc-surface); border: 1px solid var(--cc-line); }
.cc-wday .d { font-size: 9px; color: var(--cc-faint); font-weight: 600; }
.cc-wday .n { font: 600 14px/1.1 var(--cc-font); margin-top: 3px; color: var(--cc-ink); }
.cc-wday.today { box-shadow: 0 0 0 2px var(--cc-ink); }
.cc-wday.hold { background: var(--surf); border-color: var(--brd); }
.cc-wday.hold .d, .cc-wday.hold .n { color: var(--tx); }
.cc-wday.booked { background: var(--acc); border-color: var(--acc); }
.cc-wday.booked .d { color: rgba(255,255,255,.7); }
.cc-wday.booked .n { color: #fff; }
.cc-week-legend { display: flex; gap: 14px; margin-top: 12px; }
.cc-week-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cc-soft); }
.cc-week-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.cc-week-legend .sw.booked { background: var(--acc); }
.cc-week-legend .sw.hold { background: var(--surf); border: 1px solid var(--brd); }
.cc-week-legend .sw.open { background: var(--cc-surface); border: 1px solid var(--cc-line); }

/* Open-calls list + worked-with list. */
.cc-rc-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; }
.cc-rc-row + .cc-rc-row { border-top: 1px solid var(--cc-line-soft); }
.cc-rc-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); display: flex; align-items: center; justify-content: center; color: var(--cc-faint); flex-shrink: 0; }
.cc-rc-row .cc-avatar { width: 36px; height: 36px; flex-shrink: 0; font: 600 12px/1 var(--cc-font); }
.cc-rc-id { flex: 1; min-width: 0; line-height: 1.3; }
.cc-rc-id .n { font: 600 13px/1.1 var(--cc-font); color: var(--cc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-rc-id .s { font-size: 11px; color: var(--cc-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-rc-price { font: 700 12.5px/1 var(--cc-font); color: var(--tx); letter-spacing: 1px; }
.cc-connect { display: inline-flex; align-items: center; gap: 5px; background: var(--surf); border: 1px solid var(--brd); color: var(--tx); border-radius: 999px; padding: 6px 13px; font: 600 12px/1 var(--cc-font); cursor: pointer; }
.cc-rc-empty { font: 500 12px/1.5 var(--cc-font-soft); color: var(--cc-faint); padding: 6px 0; }

/* ── Redesign: mobile / narrow ─────────────────────────── */
@media (max-width: 1080px) {
  /* Stack — and STRETCH: the base align-items:flex-start would size column
     children to max-content, letting a wide child (the matched strip) push
     the whole main column past the viewport. */
  .cc-home { flex-direction: column; align-items: stretch; }
  .cc-home-main { width: 100%; }
  .cc-home-head { flex-wrap: wrap; }
  .cc-home-rail { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .cc-home-rail > * { flex: 1; min-width: 240px; }
}
@media (max-width: 860px) {
  .cc-dock {
    position: fixed; left: 0; top: 0; bottom: 0; margin: 0; border-radius: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease;
    /* iOS Safari 100vh trap (Tomas, real iPhone: "the create button in the
       side dropdown is hidden"): 100vh includes the strip BEHIND Safari's
       bottom toolbar, so the drawer's bottom-pinned foot (Post a job + me
       chip) sat under the browser chrome. dvh tracks the VISIBLE viewport
       (100vh stays as the older-browser fallback), the safe-area pad clears
       the home indicator, and overflow-y:auto guarantees the foot is
       reachable by scrolling even on short/landscape viewports where the
       nav list alone outgrows the screen (desktop keeps overflow:hidden). */
    height: 100vh; height: 100dvh;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .cc-dock.open { transform: translateX(0); }
  .cc-main { padding: 12px; }
  .cc-top { top: 0; }
}

/* ── Phase 2: Foundations (shared atoms) ─────────────────────────
   Reskin of the SHARED legacy classes to the Phase-1 language —
   Schibsted headings/buttons, Onest body, warm hairlines, 11–13px
   control radii, one accent as punctuation. These rules override the
   SKIN only (type, color, radius, shadow) and stay dimensionally
   close to the legacy layout, so every not-yet-reskinned screen keeps
   rendering correctly while inheriting the new look. Layout-critical
   properties set by the legacy mobile blocks (padding / display /
   align-items) are deliberately NOT re-declared here. */

/* Buttons — Schibsted 600, soft lift, warm hairline. */
.cc-btn {
  font-family: var(--cc-font); border-radius: 11px;
  background: var(--cc-surface); border-color: var(--cc-line); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(45,38,28,.06);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
/* Midnight is a dark palette — the light-surface inset lift above paints a
   bright white top edge on every button. Drop the inset, keep the soft
   drop-shadow so buttons don't go flat. */
[data-theme="midnight"] .cc-btn { box-shadow: 0 1px 2px rgba(45,38,28,.06); }
.cc-btn:hover { background: var(--cc-surface-2); border-color: var(--cc-faint); }
.cc-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.cc-btn.primary {
  background: var(--cc-accent); border-color: var(--cc-accent); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22);
}
.cc-btn.primary:hover { background: var(--cc-accent); border-color: var(--cc-accent); filter: brightness(.94); }
.cc-btn.ink { box-shadow: 0 10px 22px -12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14); }
/* Quiet variants the Feed offer card already uses — now app-wide. Ghost is a
   neutral secondary at rest (de-accented, 2026-07-16 design-canon pass);
   ink on hover only. */
.cc-btn.ghost { background: var(--cc-surface); border: 1px solid var(--cc-line); color: var(--cc-soft); }
.cc-btn.ghost:hover { background: var(--cc-surface-2); border-color: var(--cc-faint); color: var(--cc-ink); }
.cc-btn.faint { background: transparent; border: 1px solid var(--cc-line); color: var(--cc-muted); box-shadow: none; }
.cc-btn.faint:hover { background: var(--cc-surface-2); border-color: var(--cc-line); color: var(--cc-soft); }
.cc-btn.sm { border-radius: 9px; }
.cc-btn.lg { border-radius: 13px; }

/* Back link — quiet pill; negative margins keep the icon on the content edge. */
.cc-back {
  font: 600 12.5px/1 var(--cc-font); color: var(--cc-soft); cursor: pointer;
  border: 1px solid transparent; border-radius: 999px;
  padding: 6px 11px 6px 8px; margin: -4px 0 12px -9px;
}
.cc-back:hover { color: var(--cc-ink); background: var(--cc-surface); border-color: var(--cc-line); box-shadow: 0 1px 2px rgba(45,38,28,.06); }

/* Forms — Onest fields, 11px radii, accent focus ring (tint). */
.cc-field > label { font: 600 12px/1.3 var(--cc-font-soft); color: var(--cc-soft); }
.cc-input, .cc-textarea, .cc-select {
  border-radius: 11px; background: var(--cc-surface); border-color: var(--cc-line);
  font-family: var(--cc-font-soft); font-size: 13.5px;
  box-shadow: inset 0 1px 2px rgba(45,38,28,.04);
  transition: border-color .12s, box-shadow .12s;
}
.cc-input::placeholder, .cc-textarea::placeholder { color: var(--cc-ph); }
.cc-input:focus, .cc-textarea:focus, .cc-select:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 3px var(--cc-accent-tint); }
.cc-hint { font-family: var(--cc-font-soft); }
/* Floating-label field (auth) — same skin, caps micro-label. */
.cc-fld { border-radius: 12px; box-shadow: inset 0 1px 2px rgba(45,38,28,.04); }
.cc-fld:focus-within { border-color: var(--cc-ink); box-shadow: 0 0 0 1px var(--cc-ink); } /* ink focus everywhere — the forest theme this orange ring matched is gone. */
.cc-fld-lbl { font: 600 10.5px/1.3 var(--cc-font-soft); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); }

/* Modal — 20px floating card on a warm scrim. */
.cc-modal-bg { background: rgba(38,32,24,.46); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.cc-modal {
  border: 1px solid var(--cc-line); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 34px 70px -26px rgba(45,38,28,.45), 0 2px 6px rgba(45,38,28,.08);
}
/* Same white-inset leak as .cc-btn above — drop it under midnight, keep
   the deep drop-shadow that gives the modal its float. */
[data-theme="midnight"] .cc-modal { box-shadow: 0 34px 70px -26px rgba(45,38,28,.45), 0 2px 6px rgba(45,38,28,.08); }
.cc-modal h3 { font: 700 18px/1.2 var(--cc-font); letter-spacing: -.02em; }
.cc-modal .sub { font: 500 13px/1.45 var(--cc-font-soft); color: var(--cc-muted); }

/* Data table — micro-label heads, Onest cells, rounded wrap. */
.cc-tbl th { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); }
.cc-tbl td { font-family: var(--cc-font-soft); font-size: 13px; }
.cc-tbl .who { font-family: var(--cc-font); }
.cc-tbl-wrap { border-radius: 14px; border-color: var(--cc-line); background: var(--cc-surface); }
/* cc-num figures keep the display face even inside Onest table cells
   (td.cc-num out-specifies the .cc-tbl td family above). */
.cc-tbl td.cc-num { font-family: var(--cc-font); }

/* States (Loading / Empty / Error) — icon in a soft tile, display-face title.
   Direct-child only: the tile must not swallow icons nested deeper (e.g. the
   <i> inside ErrorState's "Try again" .cc-btn). */
.cc-state { gap: 10px; }
.cc-state > i {
  width: 48px; height: 48px; border-radius: 14px; font-size: 22px;
  background: var(--cc-surface-2); border: 1px solid var(--cc-line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--cc-faint);
}
/* …but the loading spinner stays a bare glyph (the tile would spin with it). */
.cc-state > i.cc-spin { width: auto; height: auto; font-size: 24px; background: none; border: 0; border-radius: 0; }
.cc-state-t { font: 700 15px/1.25 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-state-s { font: 500 13px/1.5 var(--cc-font-soft); color: var(--cc-muted); }

/* Filter pills — Onest 600, white at rest, ink when on, tint for toggles. */
.cc-f { font: 600 12.5px/1 var(--cc-font-soft); background: var(--cc-surface); color: var(--cc-soft); cursor: pointer; }
.cc-f:hover { border-color: var(--cc-faint); color: var(--cc-ink); }
.cc-f.on { background: var(--cc-ink); border-color: var(--cc-ink); color: var(--cc-surface); }
.cc-f.toggle.on { background: var(--cc-chrome); border-color: var(--cc-chrome); color: var(--cc-chrome-ink); }

/* Combobox / role menu — floating white sheet, deep warm shadow. */
.cc-combo-menu {
  border-radius: 14px; border-color: var(--cc-line); background: var(--cc-surface);
  box-shadow: 0 24px 55px -18px rgba(45,38,28,.35), 0 2px 6px rgba(45,38,28,.08);
}
.cc-combo-opt { border-radius: 9px; font: 500 13px/1.25 var(--cc-font-soft); }
.cc-combo-opt:hover { background: var(--cc-surface-2); }
.cc-combo-opt.hi { background: var(--cc-surface-2); }
.cc-role-dept { font: 700 10px/1 var(--cc-font-soft); letter-spacing: .1em; color: var(--cc-faint); }

/* Context strip — a floating strip in the padded main column, not a hard bar.
   Two users today: the onboarding prompt and the shared-account notice
   (CC.ui.PersonaBanner), both on the .ob skin below. */
.cc-mbar { border: 1px solid var(--cc-line); border-radius: 14px; font-family: var(--cc-font-soft); }
/* Onboarding prompt — quiet surface, single accent on the CTA only. */
.cc-mbar.ob { background: var(--cc-surface); color: var(--cc-ink); }
.cc-mbar.ob > span { margin-right: auto; }
.cc-mbar.ob > i { color: var(--cc-accent); }
.cc-mbar.ob a { font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--cc-accent); text-decoration: none; }
.cc-mbar.ob a:hover { text-decoration: underline; }
.cc-mbar-x { background: none; border: 0; padding: 0; font: inherit; color: var(--cc-muted); cursor: pointer; white-space: nowrap; }
.cc-mbar-x:hover { color: var(--cc-ink); text-decoration: underline; }
.cc-mbar-x.soft { font-size: 12px; opacity: .8; }

/* Uploader dropzone + crop modal. */
.cc-drop { border-radius: 14px; font: 600 13px/1.35 var(--cc-font-soft); color: var(--cc-muted); }
.cc-drop:hover { border-color: var(--cc-accent-border); color: var(--cc-ink); }
.cc-drop.drag { border-color: var(--cc-accent); background: var(--cc-accent-tint); color: var(--cc-accent-ink); }
.cc-drop-err { font-family: var(--cc-font-soft); }
.cc-crop { border-radius: 14px; }
.cc-crop-ring { box-shadow: 0 0 0 9999px rgba(38,32,24,.5); }
.cc-crop-zoom { accent-color: var(--cc-accent); }

/* Price band + tier picker atoms (never a raw dollar figure). */
.cc-tierbtn { border-radius: 11px; background: var(--cc-surface); }
.cc-tierbtn:hover { border-color: var(--cc-accent-border); }
.cc-tierbtn.on { background: var(--cc-surface); border-color: var(--cc-line); color: var(--cc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Landing hero glass buttons sit on a dark photo — the light-surface
   inset lift from the .cc-btn base above must not leak onto them. */
.cc-herobig .cc-btn:not(.primary) { box-shadow: none; }

/* ── Phase 2: Jobs board (GigBoard / GigCard / GigRow / DiscoverBar / Rail) ──
   The board joins the Phase-1 language: white floating cards on the cream
   canvas, Schibsted display type, Onest support copy, micro-label caps, the
   scene accent as punctuation only. GigCard drops the dark visual header for
   the HomeGigCard vocabulary (ink mark tile + accent scope pill + big role
   line + chips-in-white-card); the locked fog treatment survives, retuned to
   the white card body. */

/* Discovery search bar — ONE continuous pill (Airbnb-style): flat segments
   inside a single capsule, inset vertical hairline dividers that stop short
   of the edges, and the round go-button tucked inside the right end. The old
   per-segment pill radii created nested curves that read sloppy. */
.cc-disc {
  /* Surface token, NOT #fff — the hardcoded white glared on the calm skin
     and made midnight's near-white input text invisible on a white capsule. */
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill);
  box-shadow: var(--cc-shadow-card);
  padding-right: 8px;
  /* NO overflow:hidden — the Role/Where combobox menus drop down from inside
     the segments and must escape the capsule. End-rounding is done per-segment. */
}
.cc-disc-seg { border-radius: 0; position: relative; min-width: 0; }
.cc-disc-seg:first-child { border-radius: var(--cc-radius-pill) 0 0 var(--cc-radius-pill); }
.cc-disc-seg:hover { background: var(--cc-surface-2); }
/* Inset divider: a hairline that floats between segments (top/bottom margins),
   Airbnb-style — not a full-height cell border. */
.cc-disc-seg + .cc-disc-seg { border-left: 0; }
.cc-disc-seg + .cc-disc-seg::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: var(--cc-line);
}
.cc-disc-seg .lbl {
  font: 600 10px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cc-faint); margin-bottom: 5px;
}
.cc-disc-seg input { font: 600 13.5px/1.2 var(--cc-font); color: var(--cc-ink); text-overflow: ellipsis; }
.cc-disc-seg input::placeholder { color: var(--cc-ph); font-weight: 500; font-family: var(--cc-font-soft); }
.cc-disc-when { min-width: 0; }
.cc-disc-when .arrow { color: var(--cc-faint); }
.cc-disc-when input { min-width: 0; }
.cc-disc-when .cc-datefield { min-width: 0; }
/* The go button carries the screen's single gradient CTA, tucked inside the capsule. */
.cc-disc-go {
  background: var(--cc-grad-accent);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-disc-go:hover { filter: brightness(1.05); }
.cc-disc-hero .cc-disc { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 22px 44px -20px rgba(45,38,28,.22), 0 2px 5px rgba(45,38,28,.06); }
.cc-disc-hero .cc-disc-seg .lbl { font-size: 10.5px; }
.cc-disc-hero .cc-disc-seg input { font-size: 15px; }

/* Browse hero — tight display heading + accent kicker, no oversized type. */
.cc-browsehero { text-align: center; padding: 26px 12px 8px; }
.cc-browsehero-kick {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx); background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 6px 12px; margin-bottom: 14px;
}
.cc-browsehero-kick .d { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.cc-browsehero h1 { font: 800 30px/1.1 var(--cc-font); letter-spacing: -.03em; color: var(--cc-ink); }
.cc-browsehero p { color: var(--cc-soft); font: 500 14px/1.5 var(--cc-font-soft); margin: 9px 0 22px; }

/* Board header + scope chips + sort (scoped to the Jobs + Events + Crew +
   Saved + Search screens). */
.cc-jobs .cc-hdr h2, .cc-evts .cc-hdr h2, .cc-crewb .cc-hdr h2, .cc-savedv .cc-hdr h2, .cc-srch .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-jobs .cc-hdr .cnt, .cc-evts .cc-hdr .cnt, .cc-crewb .cc-hdr .cnt, .cc-savedv .cc-hdr .cnt, .cc-srch .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-jobs .cc-hdr .cnt b, .cc-evts .cc-hdr .cnt b, .cc-crewb .cc-hdr .cnt b, .cc-savedv .cc-hdr .cnt b, .cc-srch .cc-hdr .cnt b { font-family: var(--cc-font); font-weight: 700; }
.cc-jobs .cc-sortbar { gap: 6px; margin-bottom: 14px; }
.cc-jobs .cc-sortopt {
  font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft);
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-pill); padding: 7px 13px;
  box-shadow: 0 1px 2px rgba(45,38,28,.05);
}
.cc-jobs .cc-sortopt:hover { background: var(--cc-surface); border-color: var(--cc-faint); color: var(--cc-ink); }
/* Realigned with the migrated calm.css .cc-sortopt.on base (ink text on a
   quiet surface, not a raised segment pill) — this page-scoped rule used to
   out-specificity that base and keep the old black fill. */
.cc-jobs .cc-sortopt.on { background: var(--cc-surface-2); color: var(--cc-ink); }
.cc-jobs .cc-sortwrap, .cc-crewb .cc-sortwrap { font: 500 12.5px/1 var(--cc-font-soft); color: var(--cc-muted); }
.cc-jobs .cc-sortwrap select, .cc-crewb .cc-sortwrap select {
  font: 600 12.5px/1.2 var(--cc-font-soft); color: var(--cc-ink);
  border: 1px solid var(--cc-line); border-radius: 10px; padding: 7px 10px;
  background: var(--cc-surface); box-shadow: 0 1px 2px rgba(45,38,28,.05);
}

/* ── Job board filter chip row (Roles / Location-or-event / Project types /
   Skills / Pay) — a monochrome popover per chip, one open at a time. Accent
   never appears here: DESIGN_BIBLE rule 2/3 — selection states are
   monochrome, orange means money-or-go only. */
.cc-fchiprow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; position: relative; }
/* Free-text search — leftmost in the chip row, same quiet white-pill skin as
   the chips. The magnifier is the SUBMIT button (functional icon); typing
   opens the autocomplete popover (.cc-acpop) anchored to the wrap. */
.cc-fsearch-wrap { position: relative; }
.cc-fsearch {
  display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px 0 6px;
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill);
  box-shadow: 0 1px 2px rgba(45,38,28,.05); cursor: text;
}
.cc-fsearch:focus-within { border-color: var(--cc-faint); }
.cc-fsearch-go {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: none; color: var(--cc-faint); cursor: pointer; flex-shrink: 0;
}
.cc-fsearch-go:hover { color: var(--cc-ink); background: var(--cc-surface-2); }
.cc-fsearch input {
  border: 0; background: none; outline: none; padding: 0; width: 220px; min-width: 0;
  font: 500 12.5px/1.2 var(--cc-font-soft); color: var(--cc-ink);
}
.cc-fsearch input::placeholder { color: var(--cc-ph); }
.cc-fsearch-x {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 0; border-radius: 50%; background: var(--cc-chip); color: var(--cc-soft); cursor: pointer; flex-shrink: 0;
}
.cc-fsearch-x:hover { color: var(--cc-ink); }
/* Autocomplete popover — same monochrome floating skin as the chip popovers
   (.cc-fpop supplies position/skin); just a touch wider for grouped rows. */
.cc-acpop { min-width: 280px; }
.cc-fpop-row.hi { background: var(--cc-surface-2); }
/* Dates chip: the two DateFields side by side. */
.cc-fpop-dates { display: flex; gap: 8px; }
.cc-fpop-dates .cc-field { flex: 1; min-width: 0; }
/* Mobile (covers 390px): search goes full-width on its own line ABOVE the chips. */
@media (max-width: 640px) {
  .cc-fchiprow .cc-fsearch-wrap { flex-basis: 100%; order: -1; }
  .cc-fsearch input { width: auto; flex: 1; }
}
.cc-fchip-wrap { position: relative; }
.cc-fchip {
  display: flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft);
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill);
  padding: 7px 10px 7px 13px; box-shadow: 0 1px 2px rgba(45,38,28,.05); cursor: pointer;
}
.cc-fchip:hover { border-color: var(--cc-faint); color: var(--cc-ink); }
.cc-fchip.on { background: var(--cc-surface); border-color: var(--cc-line); color: var(--cc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cc-fchip i { font-size: 13px; }
.cc-fchip-sum { font-weight: 700; }
.cc-fchip-x {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(255,255,255,.18); color: inherit; cursor: pointer; flex-shrink: 0;
}
.cc-fchip-x:hover { filter: brightness(1.3); }
.cc-fsort { margin-left: auto; }

.cc-fpop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 240px; max-width: 320px;
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md);
  box-shadow: 0 10px 30px rgba(20,18,12,.16); padding: 10px; max-height: 340px; overflow-y: auto;
}
.cc-fpop-sec-lbl { font: 700 10.5px/1 var(--cc-font-soft); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); padding: 6px 6px 4px; }
.cc-fpop-sec-lbl:first-child { padding-top: 2px; }
.cc-fpop-list { display: flex; flex-direction: column; }
.cc-fpop-list-sm { max-height: 140px; overflow-y: auto; }
.cc-fpop-empty { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-faint); padding: 8px 6px; }
.cc-fpop-opt {
  display: flex; align-items: center; gap: 9px; font: 500 13px/1.3 var(--cc-font-soft); color: var(--cc-ink);
  padding: 7px 6px; border-radius: var(--cc-radius-sm); cursor: pointer;
}
.cc-fpop-opt:hover { background: var(--cc-surface-2); }
.cc-fpop-opt input { accent-color: var(--cc-ink); width: 15px; height: 15px; flex-shrink: 0; }
.cc-fpop-row {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; background: none; border: 0;
  font: 500 13px/1.3 var(--cc-font-soft); color: var(--cc-ink); padding: 7px 6px; border-radius: var(--cc-radius-sm); cursor: pointer;
}
.cc-fpop-row:hover { background: var(--cc-surface-2); }
.cc-fpop-row.on { background: var(--cc-chip); font-weight: 700; }
.cc-fpop-row i { color: var(--cc-ink); flex-shrink: 0; }
.cc-fpop-search { width: 100%; margin: 2px 0 6px; }
.cc-fpop-addrow { display: flex; gap: 6px; margin-bottom: 8px; }
.cc-fpop-addrow input { flex: 1; }
.cc-fpop-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 6px; }
.cc-fpop-sugg {
  font: 600 11.5px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-chip); border: 0;
  border-radius: var(--cc-radius-sm); padding: 6px 9px; cursor: pointer;
}
.cc-fpop-sugg:hover { background: var(--cc-surface-2); color: var(--cc-ink); }

/* ── Job board master-detail (Nova layout) ──
   Single-column card list on the left (~54%), the always-open detail pane on
   the right (~46%). .cc-ngclist is a flex COLUMN — one card per row at every
   desktop width, by construction (no responsive grid to collapse). The
   ≤980px rule on .cc-split2 (list-only, panel hidden) still applies — this
   element carries both classes. */
.cc-boardsplit { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); }
/* Sweep probe follow-up (same ordering-bug class as the #9 header fix): the
   comment above says the ≤980px single-column rule "still applies", but that
   media block sits EARLIER in source than this rule and the crew-split
   `.cc-split2` column rule — identical specificity, so these unconditional
   two-column templates silently won on phones too. The panel's display:none
   (only set inside the media block) still applied, leaving a HIDDEN second
   grid column that reserved ~half the width: board cards measured 167px wide
   in a 390px viewport with their (non-shrinking ago+rate header) content at
   186px — the probe's cc-ngc h-overflow/text-escape findings. Re-assert the
   single column after BOTH offenders. minmax(0,1fr), not bare 1fr: 1fr's
   implicit `auto` minimum lets the track grow past the container to the
   cards' min-content width (measured 361px in a 314px column) — the same
   trap the desktop templates already guard against with minmax(0,…). */
@media (max-width: 980px) {
  .cc-split2, .cc-boardsplit { grid-template-columns: minmax(0, 1fr); }
}
.cc-ngclist { display: flex; flex-direction: column; gap: 10px; }

/* Nova-density board card: avatar+name / time-ago+rate header, bold-segment
   composed title, 2-line snippet. Deliberately stripped — no chips, counts,
   badges, or hearts (the save affordance lives in the detail pane). */
.cc-ngc {
  display: flex; gap: 12px; background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg); padding: 12px 14px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(20,18,12,.05); transition: box-shadow .12s ease, border-color .12s ease;
}
/* hover here is superseded by the inversion pass below (~L5082) — a quiet
   background nudge, not a shadow lift (Tomas 2026-07-15) */
.cc-ngc.sel { outline: 2px solid var(--cc-chrome); outline-offset: 0; box-shadow: 0 4px 14px rgba(20,18,12,.10); }
.cc-ngc-thumb {
  width: 76px; min-height: 76px; border-radius: var(--cc-radius-sm); flex-shrink: 0;
  background: var(--cc-chip) center/cover no-repeat; align-self: stretch;
}
.cc-ngc-main { flex: 1; min-width: 0; }
.cc-ngc-top { display: flex; align-items: center; gap: 9px; }
.cc-ngc-id { flex: 1; min-width: 0; }
.cc-ngc-name { font: 700 13px/1.2 var(--cc-font); color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pro-locked name line: poster ROLE + lock glyph standing in for the
   redacted identity (PR3b contract, Nova-card skin). */
.cc-ngc-prorole { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-soft); }
.cc-ngc-prorole i { color: var(--cc-faint); font-size: 11px; }
.cc-ngc-byline { font: 500 11.5px/1.3 var(--cc-font-soft); color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ngc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.cc-ngc-ago { font: 500 11px/1 var(--cc-font-soft); color: var(--cc-faint); }
.cc-ngc-ttl { font: 500 14px/1.35 var(--cc-font-soft); color: var(--cc-ink); margin-top: 9px; letter-spacing: -.005em; }
.cc-ngc-ttl b { font-family: var(--cc-font); font-weight: 700; }
.cc-ngc-desc {
  font: 500 12.5px/1.45 var(--cc-font-soft); color: var(--cc-soft); margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-ngc-more { color: var(--cc-muted); font-weight: 600; white-space: nowrap; }

/* PR7: "Sponsored" placement label — a quiet monochrome chip, NEVER accent
   (sponsorship buys placement, not a visual upgrade; it must read as
   informational, same discipline as .cc-gigd-typetag). Used on the board's
   pinned sponsored cards. */
.cc-sponsored-chip {
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cc-soft); background: var(--cc-surface-2); border: 1px solid var(--cc-line);
  border-radius: 6px; padding: 4px 8px; display: inline-flex; align-items: center;
}

/* Job board tabs (Job Board / Applications / Invitations) sit above the
   filter row and reuse the shared monochrome underline .cc-tabs/.cc-tab. */
.cc-jobs .cc-tabs { margin-bottom: 16px; }

/* Worker apply-allowance hint — a quiet accent-tint strip. */
.cc-applyhint {
  display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 12px;
  font: 600 12px/1.3 var(--cc-font-soft); color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 7px 13px;
}
.cc-applyhint i { color: var(--acc); font-size: 13px; }
.cc-applyhint .cc-num { font-family: var(--cc-font); font-weight: 700; color: var(--tx); }

/* GigCard — white floating card in the HomeGigCard vocabulary.
   Surface token (== #fff in every light palette) rather than a literal:
   GigCard also renders on the logged-out landing, which honours the legacy
   [data-theme] palettes — under midnight the ink tokens go light, so the
   card must follow --cc-surface to stay legible. */
.cc-gigcard {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  padding: 13px 15px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  box-shadow: var(--cc-shadow-card);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.cc-gigcard:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 38px -18px rgba(45,38,28,.22), 0 2px 5px rgba(45,38,28,.07);
}
.cc-gigcard.sel {
  outline: 0; border-color: var(--cc-chrome);
  box-shadow: 0 0 0 3px var(--cc-surface), 0 14px 30px -18px rgba(45,38,28,.2);
}
.cc-gc-top { display: flex; align-items: center; gap: 7px; }
.cc-gc-mark {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: var(--cc-chrome); color: var(--acc2);
  display: flex; align-items: center; justify-content: center;
}
.cc-gc-tags { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cc-gc-scope {
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx); background: var(--surf); border: 1px solid var(--brd);
  border-radius: 6px; padding: 4px 7px; display: inline-flex; align-items: center; gap: 4px;
}
.cc-gc-prov {
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cc-warn-ink); background: var(--cc-warn-bg); border: 1px solid var(--cc-warn-line);
  border-radius: 6px; padding: 4px 7px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.cc-gc-prov i { font-size: 11px; }
.cc-gc-fav {
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cc-ok-ink); background: var(--cc-ok-bg);
  border: 1px solid color-mix(in srgb, var(--cc-ok-ink) 24%, var(--cc-ok-bg));
  border-radius: 6px; padding: 4px 7px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.cc-gc-heart {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--cc-surface); border: 1px solid var(--cc-line); color: var(--cc-faint);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cc-gc-heart:hover { background: var(--cc-surface); border-color: var(--cc-faint); color: var(--cc-soft); }
.cc-gc-heart.on { color: var(--cc-ink); border-color: var(--cc-line); background: var(--cc-surface); }
.cc-gc-role {
  position: static; margin-top: 11px;
  font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--cc-ink);
}
.cc-gc-body { padding: 0; margin-top: 5px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.cc-gc-ttl { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-soft); }
.cc-gc-meta { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-soft); gap: 4px; }
.cc-gc-prating { color: var(--tx); font-weight: 700; }
.cc-gc-prating i { color: var(--tx) !important; }
.cc-gc-foot { border-top: 1px solid var(--cc-line); padding-top: 10px; }
.cc-gc-rate { color: var(--cc-ink); }
.cc-gc-rate small { color: var(--cc-muted); margin-left: 3px; }
.cc-gc-apps { font: 500 11.5px/1 var(--cc-font-soft); color: var(--cc-muted); }
/* Locked fog, retuned to the card body: same two-copy blur + veil, the
   veil dissolves into the card's own surface token so it also holds under
   the legacy midnight palette on the landing (real values stay out of the
   locked path — this is presentation only). */
.cc-gc-fog-veil {
  left: -15px; right: -15px; bottom: -13px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--cc-surface) 0%, transparent) 0%,
    color-mix(in srgb, var(--cc-surface) 60%, transparent) 55%,
    var(--cc-surface) 100%);
}

/* Rails (horizontal gig strips) — hsec-style heads, soft round nav. */
.cc-railsec { margin-top: 26px; }
.cc-railhead h3 { font: 700 16px/1.1 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-railhead .sub { font: 500 12.5px/1.3 var(--cc-font-soft); color: var(--cc-muted); }
.cc-railhead .nav .rb {
  background: var(--cc-surface); border: 1px solid var(--cc-line); color: var(--cc-soft);
  box-shadow: 0 1px 2px rgba(45,38,28,.06);
}
.cc-railhead .nav .rb:hover { background: var(--cc-surface-2); color: var(--cc-ink); }

/* GigRow (event detail / search / saved lists) — display-face title, accent role pill. */
.cc-gigrow { padding: 12px 16px; }
.cc-gigrow .cc-ttl { font-family: var(--cc-font); letter-spacing: -.01em; }
.cc-gigrow .cc-rtag {
  font: 700 10px/1 var(--cc-font); letter-spacing: .05em;
  color: var(--tx); background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 3px 8px;
}
.cc-gigrow .cc-rate { font: 700 14px/1 var(--cc-font); }

/* Split shell — the embedded GigDetail floats as one elevated warm sheet;
   its interior is reskinned separately. */
.cc-jobs .cc-split2-panel .cc-embed, .cc-crewb .cc-split2-panel .cc-embed {
  border-radius: 20px; border: 1px solid var(--cc-line); background: var(--cc-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 24px 50px -24px rgba(45,38,28,.28), 0 2px 6px rgba(45,38,28,.06);
}
.cc-split2-empty { padding-top: 60px; }

/* Jobs board mobile — cards/grids already collapse via the legacy queries;
   keep the hero and pill bars comfortable at 375px. */
@media (max-width: 640px) {
  .cc-browsehero { padding-top: 14px; }
  .cc-browsehero h1 { font-size: 25px; }
  .cc-applyhint { display: flex; }
  .cc-jobs .cc-hdr h2 { font-size: 20px; }
}

/* ── Phase 2: Gig detail (GigDetail / rail / gate) ───────────────
   The brief becomes a stack of white floating cards on the cream
   canvas (the hcard recipe): hero card with accent role pill +
   Schibsted title, micro-label section heads, and a sticky rail
   card carrying the tier band + the four-state Apply machine —
   the screen's single gradient CTA. The embedded (Jobs split)
   variant flattens the same cards into the one elevated sheet the
   Jobs pass already provides, separated by hairlines. */

.cc-gigd-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cc-gdcard {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--cc-shadow-card);
}

/* Hero card. */
.cc-gigd-kick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-gigd-typetag {
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cc-soft); background: var(--cc-surface-2); border: 1px solid var(--cc-line);
  border-radius: 6px; padding: 4px 8px;
}
.cc-gigd-ttl { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; color: var(--cc-ink); margin: 10px 0 0; }
.cc-gigd .cc-gd-meta { margin: 12px 0 0; font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-soft); }
.cc-gigd-linkrow { margin-top: 10px; }
.cc-gigd-link {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 600 12px/1 var(--cc-font-soft); color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 6px 12px;
}
.cc-gigd-link:hover { filter: brightness(.97); }
.cc-gigd-link i { color: var(--acc); }

/* PR7: gig body photos — a full-width hero above the byline (single image),
   or a two-up strip when both slots are used. Photos stay visible on a
   locked/masked row (see src/pro.js LOCK_STRIP) — this is pure display, no
   entitlement styling. */
.cc-gigd-photos { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.cc-gigd-photos.two { grid-template-columns: 1fr 1fr; }
.cc-gigd-photo {
  width: 100%; height: 240px; object-fit: cover; display: block;
  border-radius: var(--cc-radius-md); background: var(--cc-chip);
}
.cc-gigd-photos.two .cc-gigd-photo { height: 180px; }
@media (max-width: 640px) { .cc-gigd-photo { height: 180px; } .cc-gigd-photos.two .cc-gigd-photo { height: 140px; } }

/* Section cards — micro-label caps heads, Onest body. */
.cc-gigd-sec h3 {
  font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cc-faint); margin: 0 0 9px;
}
.cc-gigd .cc-gd-desc { font: 400 13.5px/1.65 var(--cc-font-soft); color: var(--cc-soft); }
.cc-gigd .cc-gd-meta i { color: var(--cc-faint); }

/* Guest gate — centered warm card (the .cc-gate legacy layout survives). */
.cc-gigd-gate > i { color: var(--acc); }
.cc-gigd-gate h3 { font: 700 17px/1.2 var(--cc-font); letter-spacing: -.01em; }
.cc-gigd-gate p { font: 500 13.5px/1.5 var(--cc-font-soft); }
.cc-gigd-gate-acts { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
/* Locked-gig gate "Sign up free" — match the sibling guest gates (PeopleGate,
   LockedProfile) with the orange gradient; the base .cc-btn.primary greens
   under the default forest front-door theme. */
.cc-gigd-gate .cc-btn.primary { background: var(--cc-grad-accent); border: 0; color: #fff; }

/* Rail card — tier band + terms + the Apply state machine. */
.cc-gigd-rate-lbl {
  font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cc-faint); margin-bottom: 8px;
}
.cc-gigd .cc-price .on { color: var(--tx); }
.cc-gigd-lines { margin: 14px 0; }
.cc-gigd .cc-rail-line { font-family: var(--cc-font-soft); font-size: 12.5px; border-bottom-color: var(--cc-line-soft); }
.cc-gigd .cc-rail-line .v { font-family: var(--cc-font); font-weight: 600; color: var(--cc-ink); }
.cc-gigd .cc-slotbar span, .cc-gigd .cc-slotbar-fill { background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.cc-gigd .cc-slotbar-fill.full { background: var(--cc-ok-ink); }
.cc-gigd .cc-applied { border-radius: 12px; font-family: var(--cc-font-soft); }

/* Full-width CTA stack. Every state of the four-state Apply machine
   keeps its disabled attribute — only the skin changes here. */
.cc-gdcta { width: 100%; justify-content: center; }
.cc-gdcta-hint { text-align: center; margin-top: 6px; font-family: var(--cc-font-soft); }
.cc-gdquiet { margin-top: 8px; color: var(--cc-muted); box-shadow: none; }
.cc-gigd .cc-btn.primary.cc-gdcta {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  border-radius: 12px; padding: 11px 16px; font: 600 13.5px/1 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-gigd .cc-btn.primary.cc-gdcta:hover { filter: brightness(1.05); }
.cc-gigd .cc-btn.cc-gdcta:disabled {
  background: var(--cc-surface-2); border-color: var(--cc-line); color: var(--cc-muted);
  box-shadow: none; opacity: 1; cursor: default;
}

/* Apply-credit eligibility strip (CC.views ApplyCreditDots) — filled dot =
   a credit available, hollow = spent this cycle. Monochrome ink only, no
   accent (house rule: economy indicators never get the accent tint). */
.cc-apply-dots { margin-bottom: 10px; }
.cc-apply-dots-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cc-apply-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--cc-ink); background: transparent; flex-shrink: 0; }
.cc-apply-dot.filled { background: var(--cc-ink); }
.cc-apply-dot.spending { box-shadow: 0 0 0 2px var(--cc-surface), 0 0 0 3.5px var(--cc-ink); }
.cc-apply-dots-note { font-size: 11.5px; margin-top: 5px; }
.cc-apply-dots-caption { font-size: 11.5px; margin-top: 4px; }

/* Full-page variant (route /gigs/:id) — the main column is ONE elevated
   card and its stacked cards flatten into hairline-divided sections, so
   the brief reads as a single sheet instead of a run of floating cards.
   (The RAIL card stays its own separate card.) */
.cc-gigd-main {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-card); overflow: hidden; gap: 0;
}
.cc-gigd-main > .cc-gdcard { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.cc-gigd-main > .cc-gdcard + .cc-gdcard { border-top: 1px solid var(--cc-line); }

/* Embedded variant (the Jobs split panel) — the outer sheet comes from
   the Jobs pass (.cc-split2-panel .cc-embed); the cards flatten into it
   as hairline-separated bands so there's no card-in-card double chrome.
   Cancel the full-page outer-card chrome here: this lives INSIDE the panel,
   so the main column must stay a bare stack of bands, not gain its own card. */
.cc-embed-gig { padding: 0; }
.cc-embed-gig .cc-gigd-main { background: none; border: 0; border-radius: 0; box-shadow: none; gap: 0; }
.cc-embed-gig .cc-gdcard { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 16px 20px; }
.cc-embed-gig .cc-gigd-main > .cc-gdcard + .cc-gdcard,
.cc-embed-gig .cc-gd-rail .cc-gdcard { border-top: 1px solid var(--cc-line); }

/* Members-only gate — black card, white text (Tomas 2026-07-18: "break it
   up a bit"). Doubled class outguns the transparent-flow rules above; this
   is a guest surface, so any accent here is --acc (front-door rule) — the
   primary CTA keeps its accent gradient, the lock and copy go white. */
.cc-gigd-gate.cc-gigd-gate {
  background: var(--cc-ink); border: 1px solid var(--cc-ink);
  border-radius: var(--cc-radius-lg); color: #fff; padding: 30px 24px; margin: 8px 0;
}
.cc-gigd-gate.cc-gigd-gate > i { color: #fff; }
.cc-gigd-gate.cc-gigd-gate h3 { color: #fff; }
.cc-gigd-gate.cc-gigd-gate p { color: #fff; }
.cc-gigd-gate.cc-gigd-gate .cc-btn:not(.primary) { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.cc-gigd-gate.cc-gigd-gate .cc-btn:not(.primary):hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); color: #fff; }

/* Mobile — the .cc-gd grid already collapses at 760px (legacy rule);
   keep the brief comfortable at 375px. */
@media (max-width: 640px) {
  .cc-gdcard { padding: 14px 15px; border-radius: 16px; }
  .cc-gigd-ttl { font-size: 20px; }
  .cc-gigd-gate-acts { flex-wrap: wrap; }
}

/* ── Phase 2: Events (EventsBoard / EventCard / EventPanel / EventAttend / EventCrewSearch) ──
   The events board joins the Phase-1 language: EventCard becomes a white
   floating card with the photo inset like a print (the hcard recipe), and
   EventPanel becomes one elevated white sheet whose persona sections
   (EventAttend / EventCrewSearch) flatten into hairline-separated bands —
   the same move as the embedded GigDetail. Accent stays punctuation: the
   demand signal, count pills, active filter chips, and the single
   "Post a gig" gradient CTA. Photo overlays keep rgba scrims (allowed). */

/* EventCard — white floating card, photo inset with its own radius. */
.cc-evcard {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  padding: 7px 7px 0;
  box-shadow: var(--cc-shadow-card);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.cc-evcard:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 38px -18px rgba(45,38,28,.22), 0 2px 5px rgba(45,38,28,.07);
}
.cc-evcard.sel {
  outline: 0; border-color: var(--cc-chrome);
  box-shadow: 0 0 0 3px var(--cc-surface), 0 14px 30px -18px rgba(45,38,28,.2);
}
.cc-evcard-img { border-radius: 14px; min-height: 128px; padding: 10px 12px; }
.cc-evcard-kind {
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(20,18,12,.44); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--cc-radius-pill); padding: 4px 9px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cc-evcard-dt {
  font: 600 11px/1 var(--cc-font); color: #fff;
  background: rgba(20,18,12,.44); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--cc-radius-pill); padding: 4px 9px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cc-evcard-nm { font: 700 17px/1.15 var(--cc-font); letter-spacing: -.02em; }
.cc-evcard-body { padding: 10px 8px 11px; gap: 8px; }
.cc-evcard-meta { font: 500 12.5px/1.35 var(--cc-font-soft); color: var(--cc-soft); }
.cc-evcard-foot { border-top: 1px solid var(--cc-line-soft); padding: 8px 1px 2px; align-items: center; }
/* Open-gigs count = the demand cue → accent chip; crew going stays quiet. */
.cc-evcard-foot .cc-num:first-child {
  font: 700 11px/1 var(--cc-font); color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 5px 10px;
}
.cc-evcard-foot .cc-num:last-child { font: 600 12px/1.4 var(--cc-font-soft); color: var(--cc-muted); }

/* EventPanel — one elevated white sheet (split-view panel + full page). */
.cc-evpanel {
  border-radius: 20px; border-color: var(--cc-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 24px 50px -24px rgba(45,38,28,.28), 0 2px 6px rgba(45,38,28,.06);
}
.cc-evhero-img h1 { font: 800 26px/1.08 var(--cc-font); letter-spacing: -.03em; }
.cc-evpanel-body { padding: 4px 20px 20px; }
.cc-evpanel .cc-evhero-meta { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-soft); }

/* Demand signal — neutral pill (de-accented, 2026-07-16 design-canon pass;
   a count isn't earned identity/money). */
.cc-demand {
  font: 600 12.5px/1.35 var(--cc-font-soft); color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 7px 13px;
}
.cc-demand:hover { border-color: var(--cc-faint); }
.cc-demand i { color: var(--cc-soft); }
.cc-demand .cc-num { font-family: var(--cc-font); font-weight: 700; }
.cc-demand.quiet { color: var(--cc-muted); background: var(--cc-surface-2); border-color: var(--cc-line); }
.cc-demand.quiet i { color: var(--cc-faint); }

/* Section label — micro-label caps + accent count pill (hsec pattern). */
.cc-evpanel .cc-flabel {
  font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cc-faint); margin: 20px 0 10px;
}
.cc-evpanel .cc-flabel .n {
  font: 700 10px/1 var(--cc-font); letter-spacing: 0; color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 4px 8px;
}

/* The screen's single gradient CTA — "Post a gig for this event". */
.cc-evpanel .cc-btn.primary.cc-evcta {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  border-radius: 12px; padding: 10px 17px; font: 600 13px/1 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-evpanel .cc-btn.primary.cc-evcta:hover { filter: brightness(1.05); }

/* Persona sections (EventAttend / EventCrewSearch) — hairline-separated
   bands inside the sheet, Schibsted section heads. */
.cc-evpanel .cc-card.cc-sec { border-top: 1px solid var(--cc-line); padding-top: 16px; margin-top: 16px; }
.cc-evpanel .cc-sec h3 { font: 700 15px/1.2 var(--cc-font); letter-spacing: -.01em; }
.cc-evpanel .cc-check { font: 500 13px/1.35 var(--cc-font-soft); }

/* Crew-at-event filter chips — Onest pills; selection = terracotta stroke on
   white (Tomas 2026-07-15 — see callsheet-calm.css §6). This page-scoped rule
   out-specificities calm's .cc-cat.on, so it carries the same treatment
   directly rather than relying on load order. */
.cc-evpanel .cc-cat { font: 600 12.5px/1 var(--cc-font-soft); box-shadow: 0 1px 2px rgba(45,38,28,.05); }
.cc-evpanel .cc-cat.on { background: var(--cc-surface); border-color: var(--cc-accent); color: var(--cc-ink); }
.cc-evpanel .cc-cat.on i { color: var(--cc-accent); }

/* Supply signal ("N available to work") — accent pill in the head. */
.cc-evpanel .cc-crewsearch-hdr .cc-lz.local {
  font: 600 11.5px/1 var(--cc-font-soft); color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 5px 10px;
}
.cc-evpanel .cc-crewsearch-hdr .cc-lz.local .cc-num { font-family: var(--cc-font); font-weight: 700; }

/* Events mobile — cards + panel stay comfortable at 375px. */
@media (max-width: 640px) {
  .cc-evcard-img { min-height: 116px; }
  .cc-evhero-img h1 { font-size: 22px; }
  .cc-evpanel-body { padding: 2px 14px 16px; }
  .cc-evpanel .cc-catbar { gap: 6px; }
}

/* ── Phase 2: Browse crew (CrewBrowser / CrewCard / ProfilePanel) ──
   The crew directory joins the Phase-1 language: CrewCard becomes a
   white floating card (the hcard recipe) with Schibsted names/figures,
   Onest support copy, quiet chip skills and an ok-tint availability
   pill; the split-panel profile preview rides the same elevated sheet
   as the Jobs embed. Rates stay a PriceScale tier BAND — the accent
   lights the band, the stars, and the selected card, punctuation only. */

.cc-cwc {
  position: relative;
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  padding: 14px 15px; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--cc-shadow-card);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.cc-cwc:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 38px -18px rgba(45,38,28,.22), 0 2px 5px rgba(45,38,28,.07);
}
.cc-cwc.sel {
  border-color: var(--cc-chrome);
  box-shadow: 0 0 0 3px var(--cc-surface), 0 14px 30px -18px rgba(45,38,28,.2);
}
.cc-cwc-heart {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cc-surface); border: 1px solid var(--cc-line); color: var(--cc-faint);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cc-cwc-heart:hover { border-color: var(--cc-faint); color: var(--cc-soft); }
.cc-cwc-heart.on { color: var(--cc-ink); border-color: var(--cc-line); background: var(--cc-surface); }
.cc-cwc-head { display: flex; gap: 11px; align-items: center; padding-right: 30px; }
.cc-cwc-head .cc-avatar { font-family: var(--cc-font); }
.cc-cwc-id { flex: 1; min-width: 0; }
.cc-cwc-nm { font: 700 14.5px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-cwc-role { font: 500 12px/1.35 var(--cc-font-soft); color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cc-cwc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-soft); }
.cc-cwc-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cc-cwc-meta i { font-size: 14px; color: var(--cc-faint); }
.cc-cwc-stars { color: var(--tx); font-weight: 700; }
.cc-cwc-stars i { color: var(--tx); }
.cc-cwc-stars .cc-num { font: 700 12.5px/1 var(--cc-font); color: var(--cc-ink); }
.cc-cwc-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-cwc-sk {
  font: 600 11px/1 var(--cc-font-soft); color: var(--cc-soft);
  background: var(--cc-surface-2); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-pill); padding: 5px 9px;
}
.cc-cwc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--cc-line-soft); padding-top: 10px; margin-top: auto; }
.cc-cwc-avail {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--cc-font-soft); color: var(--cc-ok-ink);
  background: var(--cc-ok-bg);
  border: 1px solid color-mix(in srgb, var(--cc-ok-ink) 24%, var(--cc-ok-bg));
  border-radius: var(--cc-radius-pill); padding: 5px 10px;
}
.cc-cwc-avail .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cc-cwc-avail.off { color: var(--cc-muted); background: var(--cc-surface-2); border-color: var(--cc-line); }
/* Tier band (never a dollar figure) — the lit pips take the scene accent. */
.cc-cwc-foot .cc-price { font-size: 14px; }
.cc-cwc-foot .cc-price .on { color: var(--tx); }

/* "Available now" toggle + sort — one quiet tool cluster in the header. */
.cc-crewb-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cc-crewb .cc-f.toggle { box-shadow: 0 1px 2px rgba(45,38,28,.05); }

/* ProfilePanel locked teaser — role, location, rating ONLY (the guest
   wall); the sheet chrome comes from the shared split-panel embed rule. */
.cc-ppl { padding: 18px 20px 20px; }
.cc-ppl-head { display: flex; gap: 14px; align-items: center; }
.cc-ppl-head .cc-avatar { font-family: var(--cc-font); }
.cc-ppl-id { flex: 1; min-width: 0; }
.cc-ppl-role { font: 700 17px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-ppl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-soft); }
.cc-ppl-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.cc-ppl-meta i { font-size: 14px; color: var(--cc-faint); }
.cc-ppl-stars { color: var(--tx); font-weight: 700; }
.cc-ppl-stars .cc-num { font: 700 13px/1 var(--cc-font); color: var(--cc-ink); }
.cc-ppl-gate { padding: 26px 8px 8px; }
.cc-ppl-gate > i { color: var(--acc); }
.cc-ppl-gate h3 { font: 700 17px/1.2 var(--cc-font); letter-spacing: -.01em; margin: 8px 0 4px; }
.cc-ppl-gate p { font: 500 13px/1.5 var(--cc-font-soft); color: var(--cc-soft); margin-bottom: 0; }
.cc-ppl-acts { display: flex; gap: 9px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
/* The teaser's single gradient CTA — sign up. */
.cc-ppl-acts .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  border-radius: 11px; font: 600 13px/1 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-ppl-acts .cc-btn.primary:hover { filter: brightness(1.05); }

/* Crew browse mobile — cards collapse via the legacy .cc-clist grid;
   keep the header + tool cluster comfortable at 375px. */
@media (max-width: 640px) {
  .cc-crewb .cc-hdr h2 { font-size: 20px; }
  .cc-cwc { padding: 13px 14px; border-radius: 16px; }
  .cc-ppl { padding: 15px 14px 16px; }
}

/* ── Phase 2: Profiles (Profile / LockedProfile / CrewProfile / OrgArtistProfile /
   ProfileMeter / Activity / PostCard / ContactModal / Gallery / Lightbox) ──
   The profile pages join the Phase-1 language: every .cc-card floats as a
   white hcard on the cream canvas, Schibsted carries the name/figures/section
   heads, Onest carries the copy, section-count badges become accent pills and
   the accent stays punctuation — the lit tier band, the credit timeline dots,
   the ONE gradient CTA per state (Book / Edit / Save / Sign up). Every locked,
   own/editing and embedded fork is untouched — this is skin only. `.cc-prof`
   scopes it all so the same legacy classes on Admin/Tour screens don't move. */

/* Floating white cards (full-page only — the embedded split-panel variant
   keeps its flattened hairline-band treatment from the legacy embed rules). */
.cc-maxw.cc-prof .cc-card {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  box-shadow: var(--cc-shadow-card);
}

/* Identity head — display-face name, quiet Onest meta. */
.cc-prof .cc-pname h1 { font: 800 26px/1.1 var(--cc-font); letter-spacing: -.03em; color: var(--cc-ink); }
.cc-prof .cc-roleline { font: 500 13.5px/1.4 var(--cc-font-soft); color: var(--cc-soft); margin: 6px 0 10px; }
.cc-prof .cc-roleline b { font-family: var(--cc-font); font-weight: 600; color: var(--cc-ink); }
.cc-prof .cc-pmeta { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-soft); }
.cc-prof .cc-pmeta i { color: var(--cc-faint); }
.cc-prof .cc-pmeta .stars { color: var(--tx); }
.cc-prof .cc-pmeta .stars .cc-num { font-family: var(--cc-font); }
.cc-prof .cc-purl { font: 500 11.5px/1 var(--cc-font-soft); color: var(--cc-faint); }
.cc-prof .cc-avail-pill {
  font: 600 11px/1 var(--cc-font-soft); color: var(--cc-ok-ink); background: var(--cc-ok-bg);
  border: 1px solid color-mix(in srgb, var(--cc-ok-ink) 24%, var(--cc-ok-bg)); padding: 5px 10px;
}
.cc-prof .cc-av-lg { font-family: var(--cc-font); }

/* The one gradient CTA of the head (Book / Edit profile / Save — only one
   primary renders per own/editing/visitor state). */
.cc-prof .cc-pactions .cc-btn.primary,
.cc-prof .cc-gate .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  border-radius: 11px; font: 600 13px/1.2 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-prof .cc-pactions .cc-btn.primary:hover,
.cc-prof .cc-gate .cc-btn.primary:hover { filter: brightness(1.05); background: var(--cc-grad-accent); }

/* Facts strip — micro-label keys, display-face values, soft hairlines. */
.cc-prof .cc-strip { border-top: 1px solid var(--cc-line-soft); }
.cc-prof .cc-cell { border-right: 1px solid var(--cc-line-soft); }
.cc-prof .cc-cell .k { font: 600 11px/1 var(--cc-font-soft); letter-spacing: .1em; color: var(--cc-faint); }
.cc-prof .cc-cell .v { font: 600 14.5px/1.3 var(--cc-font); color: var(--cc-ink); }
.cc-prof .cc-price .on { color: var(--tx); }
.cc-prof .cc-mkt { font: 600 11.5px/1 var(--cc-font-soft); background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill); padding: 5px 9px; }

/* Section cards — Schibsted heads + accent count pill (the hsec pattern). */
.cc-prof .cc-sec h3 { font: 700 15px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-prof .cc-sec h3 .n {
  font: 700 11px/1 var(--cc-font); letter-spacing: 0; color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 4px 8px;
}
.cc-prof .cc-bio { font: 400 13.5px/1.65 var(--cc-font-soft); color: var(--cc-soft); }

/* Skill chips — the htag recipe. */
.cc-prof .cc-sk {
  font: 600 12px/1 var(--cc-font-soft); color: var(--cc-soft);
  background: var(--cc-surface-2); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-pill); padding: 6px 10px;
}

/* Credits timeline — accent dots, display-face titles. */
.cc-prof .cc-tl-item::before { border-color: var(--acc); }
.cc-prof .cc-tl-item { border-left-color: var(--cc-line-soft); }
.cc-prof .cc-tl-item:last-child { border-left-color: transparent; }
.cc-prof .cc-tl-item .tt { font: 600 13.5px/1.3 var(--cc-font); color: var(--cc-ink); }
.cc-prof .cc-tl-item .ts { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-prof .cc-tl-desc { font: 400 12.5px/1.5 var(--cc-font-soft); color: var(--cc-muted); }

/* Gear list — soft hairlines, Onest. */
.cc-prof .cc-gear { font: 400 13px/1.5 var(--cc-font-soft); }
.cc-prof .cc-gear li { border-bottom-color: var(--cc-line-soft); }
.cc-prof .cc-gear-cat { font: 600 11px/1 var(--cc-font-soft); letter-spacing: .1em; color: var(--cc-faint); }

/* Event chips — white pills with a soft lift; the cred badge stays ok-tint. */
.cc-prof .cc-ev-chip { font: 600 12px/1.2 var(--cc-font-soft); box-shadow: 0 1px 2px rgba(45,38,28,.05); }
.cc-prof .cc-ev-chip:hover { border-color: var(--brd); color: var(--tx); }
.cc-prof .cc-ev-chip:hover i { color: var(--acc); }

/* Rating + pull-quote. */
.cc-prof .cc-rev .big { font: 800 30px/1 var(--cc-font); letter-spacing: -.02em; }
.cc-prof .cc-rev .of { font: 500 12.5px/1.3 var(--cc-font-soft); }
.cc-prof .cc-quote { font-family: var(--cc-font-soft); border-left: 3px solid var(--brd); }
.cc-prof .cc-quote .qby { font-family: var(--cc-font); }

/* Links. */
.cc-prof .cc-links a { font: 600 13px/1.3 var(--cc-font-soft); border-bottom-color: var(--cc-line-soft); }
.cc-prof .cc-links a[href]:hover { color: var(--tx); }
.cc-prof .cc-links a[href]:hover i { color: var(--acc); }

/* Guest gate (LockedProfile) — accent lock, Schibsted head, gradient CTA. */
.cc-prof .cc-gate > i { color: var(--acc); }
.cc-prof .cc-gate h3 { font: 700 17px/1.2 var(--cc-font); letter-spacing: -.01em; }
.cc-prof .cc-gate p { font: 500 13.5px/1.55 var(--cc-font-soft); color: var(--cc-soft); }
.cc-prof-gacts { display: flex; gap: 10px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }

/* Case studies inside the profile. */
.cc-prof .cc-cs { border-bottom-color: var(--cc-line-soft); }
.cc-prof .cc-cs-title { font: 600 14.5px/1.25 var(--cc-font); letter-spacing: -.01em; }
.cc-prof .cc-cs-body { font: 400 13px/1.6 var(--cc-font-soft); }

/* Profile strength meter (own profile) — gradient fill when healthy, the
   warn/danger tokens keep the mid/low tones. */
.cc-prof .cc-meter-pct { font: 700 13px/1 var(--cc-font); }
.cc-prof .cc-meter-pct.good { color: var(--tx); }
.cc-prof .cc-meter-bar { height: 7px; border-radius: 5px; background: var(--cc-surface-2); }
.cc-prof .cc-meter-bar .fill { background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.cc-prof .cc-meter-bar .fill.mid { background: var(--cc-warn-ink); }
.cc-prof .cc-meter-bar .fill.low { background: var(--cc-danger-ink); }
.cc-prof .cc-meter-stale { font: 500 12.5px/1.5 var(--cc-font-soft); }
.cc-prof .cc-meter-tip {
  font: 600 11.5px/1 var(--cc-font-soft); color: var(--cc-soft);
  background: var(--cc-surface-2); border: 1px solid var(--cc-line); padding: 5px 10px;
}

/* Inline edit mode — the avatar-swap ring picks up the accent. */
.cc-prof .cc-pedit-name { font-family: var(--cc-font); }
.cc-prof .cc-pavatar.edit .cc-drop { border-color: rgba(255,255,255,.75); }

/* Embedded split-panel variant — retune the cover band to the scene accent
   (same gradient as the Home rail profile card). */
.cc-prof .cc-pcover { background: linear-gradient(120deg, var(--acc2), var(--acc) 60%, var(--tx)); }
.cc-embed.cc-prof .cc-phead > .cc-avatar,
.cc-embed.cc-prof .cc-pavatar .cc-avatar { border: 3px solid var(--cc-surface); }

/* ── Activity stream + PostCard (also rendered by the home feed — these
   classes are PostCard-owned, so the restyle is global on purpose). ── */
.cc-post { border-bottom-color: var(--cc-line-soft); }
.cc-post-head .nm { font: 600 13.5px/1.2 var(--cc-font); color: var(--cc-ink); }
.cc-post-head .mt { font: 500 11.5px/1.3 var(--cc-font-soft); color: var(--cc-faint); }
.cc-post-body { font: 400 13.5px/1.6 var(--cc-font-soft); }
.cc-post-compose { border-radius: 14px; }
.cc-post-act { font: 600 12.5px/1 var(--cc-font); color: var(--cc-muted); }
.cc-post-act.on { color: var(--cc-ink); }
.cc-post-act span { font-family: var(--cc-font-soft); }
.cc-post-comments { border-top-color: var(--cc-line-soft); }
.cc-comment-bd { font: 400 13px/1.45 var(--cc-font-soft); }
.cc-comment-bd .cn { font-family: var(--cc-font); font-weight: 600; }
.cc-pin-btn.on { background: var(--acc); }

/* ── Gallery tiles + lightbox (shared with the Settings portfolio editor —
   consistent by design). rgba only in scrims/overlays. ── */
.cc-tile { border-radius: 14px; }
.cc-tile .cap {
  font: 600 11px/1.35 var(--cc-font-soft);
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  padding: 16px 10px 8px;
}
.cc-lb-fig figcaption { font: 500 13px/1.4 var(--cc-font-soft); }
.cc-lb-count { font: 600 12px/1 var(--cc-font); }

/* Profiles mobile — the legacy 760px blocks already stack pcols/phead;
   keep the head + strip comfortable at 375px. */
@media (max-width: 640px) {
  .cc-prof .cc-pname h1 { font-size: 22px; }
  .cc-prof .cc-phead { padding: 18px 16px; }
  .cc-prof .cc-sec { padding: 16px; }
  .cc-prof .cc-cell { min-width: 0; flex: 1 1 44%; }
  .cc-prof-gacts .cc-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Phase 2: Saved + Search (Saved / SaveBtn / SearchResults) ──
   Both screens are grouped result shelves, so they share one treatment:
   the board-header type (scoped above with Jobs/Events/Crew), hsec-pattern
   group heads with an accent count pill, the already-reskinned CrewCard
   grid + GigRow rows, and the shared .cc-list container lifted to a
   floating white card (the hcard recipe). Accent stays punctuation —
   count pills, the open-gigs demand chip, a saved heart's tint. */

/* Group shelves breathe on the cream canvas; hsec heads carry them. */
.cc-savedv .cc-sr-group, .cc-srch .cc-sr-group { margin-bottom: 26px; }
.cc-savedv .cc-hsec-head, .cc-srch .cc-hsec-head { padding: 0 2px; margin-bottom: 12px; }

/* Row lists (gigs / events / posts) float as one white card. */
.cc-savedv .cc-list, .cc-srch .cc-list {
  border-radius: 20px; border-color: var(--cc-line);
  box-shadow: var(--cc-shadow-card);
}
.cc-savedv .cc-row, .cc-srch .cc-row { border-bottom-color: var(--cc-line-soft); }

/* Search result rows (events + posts) — display-face titles, Onest meta,
   neutral kind/role tags. Scoped to .cc-srow so the accent role pill on
   GigRow (.cc-gigrow .cc-rtag) is untouched. */
.cc-srow { padding: 12px 16px; }
.cc-srow .cc-ttl { font-family: var(--cc-font); letter-spacing: -.01em; }
.cc-srow .cc-rtag {
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cc-soft); background: var(--cc-surface-2); border: 1px solid var(--cc-line);
  border-radius: 6px; padding: 4px 7px;
}
.cc-srow .cc-l2 { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-soft); }
.cc-srow .cc-l2 i { color: var(--cc-faint); }
/* Open-gigs count = the demand cue → accent chip (the evcard-foot move). */
.cc-srow-open {
  display: inline-block; font: 700 11px/1 var(--cc-font); color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 5px 10px; white-space: nowrap;
}
/* Post recency stays quiet. */
.cc-srow-ago { font: 600 11.5px/1.4 var(--cc-font-soft); color: var(--cc-faint); }

/* SaveBtn — the shared save/heart control (icon variant on the profile
   panel, labeled full-width variant in the gig rail). Saved = accent tint,
   punctuation only; the shape comes from the .cc-btn foundations. */
.cc-save.wide { width: 100%; margin-top: 8px; justify-content: center; }
.cc-save.on { color: var(--cc-ink); background: var(--cc-chip); border-color: var(--cc-line); }
.cc-save.on:hover { color: var(--cc-ink); background: var(--cc-chip); border-color: var(--cc-faint); }
.cc-save.on i { color: var(--cc-ink); }

/* Mobile — grids already collapse via the legacy .cc-clist rule; keep the
   headers + shelves comfortable at 375px. */
@media (max-width: 640px) {
  .cc-savedv .cc-hdr h2, .cc-srch .cc-hdr h2 { font-size: 20px; }
  .cc-savedv .cc-sr-group, .cc-srch .cc-sr-group { margin-bottom: 20px; }
  .cc-srow .cc-act { display: flex; align-items: center; gap: 8px; }
}

/* ── Phase 2: Bookings (Bookings / RatingCell / ReviewModal) ──
   The bookings ledger joins the Phase-1 language: board-header type,
   the table floating as ONE white card (the hcard recipe, riding the
   shared .cc-tbl-wrap so overflow-x survives at 375px), soft hairline
   rows, and the review modal's mutual-reveal machinery restyled —
   quiet warm strips with an accent lock for the hidden states, an
   accent-tint reveal card for the counterpart's rating. Every
   rating_state branch (not-rated / awaiting-reveal / revealed /
   voided) is untouched — skin only. */

/* Header — the board-header pattern (Jobs/Events/Crew twin). */
.cc-bkg .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-bkg .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-bkg .cc-hdr .cnt b { font-family: var(--cc-font); font-weight: 700; }

/* The ledger — one floating white card; .cc-tbl-wrap keeps overflow-x:auto. */
.cc-bk-tbl {
  border-radius: 20px; border-color: var(--cc-line); background: var(--cc-surface);
  box-shadow: var(--cc-shadow-card);
}
.cc-bk-tbl .cc-tbl td { border-bottom-color: var(--cc-line-soft); }
.cc-bk-tbl .cc-tbl .sub2 { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-bk-per { font-size: 11px; color: var(--cc-muted); }
/* Sweep #20: the whole row opens the booking detail modal; the counterpart
   name is its own link (cc-linklike), so the row itself just needs the hand
   cursor — hover feedback already comes from .cc-tbl tbody tr:hover td. */
.cc-bk-row { cursor: pointer; }

/* Crew "Applications" section (sits above the bookings table on /bookings). A
   quiet list of clickable rows — the gig on the left, status + withdraw on the
   right. Losses are muted, never red (design rule). */
.cc-appsec { margin-bottom: 26px; }
.cc-appsec .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-appsec .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-appsec .cc-hdr .cnt b { font-family: var(--cc-font); font-weight: 700; }
.cc-applist { display: flex; flex-direction: column; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden; background: var(--cc-surface); }
.cc-approw { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--cc-line-soft); cursor: pointer; background: none; text-align: left; width: 100%; }
.cc-approw:last-child { border-bottom: 0; }
.cc-approw:hover { background: var(--cc-surface-2); }
.cc-approw-main { flex: 1; min-width: 0; }
.cc-approw-ttl { font: 700 14px/1.25 var(--cc-font); color: var(--cc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-approw-meta { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-approw-when { color: var(--cc-faint); }
.cc-approw-closed { color: var(--cc-warn-ink); font-weight: 600; }
.cc-approw-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cc-astatus { font: 600 11px/1 var(--cc-font-soft); border-radius: var(--cc-radius-pill); padding: 4px 10px; display: inline-block; white-space: nowrap; }
.cc-astatus.pending { background: var(--cc-warn-bg); color: var(--cc-warn-ink); }
/* "Shortlisted" — neutral chip like its siblings (de-accented, 2026-07-16
   design-canon pass); ink text (vs. .declined's muted) keeps the weight
   distinction, not a color one. */
.cc-astatus.short { background: var(--cc-chip); color: var(--cc-ink); }
.cc-astatus.declined { background: var(--cc-chip); color: var(--cc-muted); }
.cc-appempty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cc-appempty .cc-btn { margin-top: 2px; }
@media (max-width: 620px) {
  .cc-approw { flex-wrap: wrap; gap: 8px; }
  .cc-approw-side { width: 100%; justify-content: space-between; }
}

/* Jobs dashboard (/jobs) — pipeline view, both sides. Reuses .cc-appsec for
   each section; this just adds the quiet nudge line shown when only one side
   (applicant or applications) has data, pointing at the other. */
.cc-jobsdash-nudge { margin-top: 4px; padding: 12px 14px; border: 1px dashed var(--cc-line); border-radius: var(--cc-radius-lg); font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); text-align: center; }

/* Browse hub (/browse) — the crew/jobs Seg toggle floats in its own slim
   strip above whichever board (GigBoard/CrewBrowser) is mounted; both boards
   own their full-width page chrome so this stays outside it. */
.cc-browsehub-seg { max-width: 240px; margin: -4px auto 16px; }
@media (max-width: 900px) { .cc-browsehub-seg { padding: 0 16px; } }

/* RatingCell — the per-row rate/view control, a quiet pill next to status.
   The label text tracks the mutual-reveal lifecycle (logic, untouched). */
.cc-bk-rate { margin-left: 8px; border-radius: var(--cc-radius-pill); font: 600 11.5px/1.2 var(--cc-font); white-space: nowrap; }

/* ReviewModal — mutual-reveal notes: quiet warm strips, accent icon only
   (the lock is punctuation, not paint). Used by every hidden/voided branch. */
.cc-reveal-note {
  align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 13px;
  border: 1px solid var(--cc-line); border-radius: 12px; background: var(--cc-surface-2);
  font: 500 12.5px/1.55 var(--cc-font-soft); color: var(--cc-soft);
}
.cc-reveal-note > i { color: var(--acc); flex-shrink: 0; margin-top: 2px; }

/* Star input — accent stars, disabled once submitted (attribute untouched). */
.cc-stars-in { gap: 6px; padding: 2px 0; }
.cc-stars-in button { font-size: 27px; cursor: pointer; color: var(--cc-line); transition: transform .08s ease, color .08s ease; }
.cc-stars-in button:hover { transform: scale(1.08); }
.cc-stars-in button.on { color: var(--cc-ink); }
.cc-stars-in button:disabled { cursor: default; transform: none; }

/* The revealed counterpart rating — the payoff moment, an accent-tint card
   (only renders on the revealed + other_rating branch). */
.cc-bk-other { margin-top: 14px; padding: 13px 15px; border: 1px solid var(--brd); border-radius: 14px; background: var(--surf); }
.cc-bk-other h3 {
  font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx); margin: 0 0 10px;
}
.cc-bk-other .cc-rev { margin-bottom: 8px; }
.cc-bk-other .cc-rev .big { font: 800 30px/1 var(--cc-font); letter-spacing: -.02em; color: var(--cc-ink); }
.cc-bk-other .cc-rev .of { font: 500 12.5px/1.3 var(--cc-font-soft); color: var(--cc-muted); }
.cc-bk-other .cc-quote { font-family: var(--cc-font-soft); font-style: normal; color: var(--cc-soft); border-left: 3px solid var(--brd); }

/* The modal's single gradient CTA — Submit rating (disabled = busy, kept). */
.cc-btn.primary.cc-bk-cta {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  border-radius: 12px; font: 600 13.5px/1 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-btn.primary.cc-bk-cta:hover { filter: brightness(1.05); background: var(--cc-grad-accent); }
.cc-btn.primary.cc-bk-cta:disabled { filter: none; opacity: .6; }

/* Bookings mobile — header + card comfortable at 375px; the table scrolls
   inside the wrap (overflow-x from the shared .cc-tbl-wrap rule). */
@media (max-width: 640px) {
  .cc-bkg .cc-hdr h2 { font-size: 20px; }
  .cc-bk-tbl { border-radius: 16px; }
}

/* ── Phase 2: Invoices (Invoices / InvoiceEditor / InvoiceDetail) ──
   The money screens join the Phase-1 language: board-header type, the
   AR/AP stat cards + the ledger table + the editor form all float as
   white hcard-recipe cards on the cream canvas, micro-label caps in
   Onest, Schibsted display figures (cc-num everywhere, never mono).
   The screen's single gradient CTA = New invoice / Save & mark sent /
   Mark paid (all .cc-btn.primary under the .cc-invv scope). The
   per-invoice colour band (--inv) and the print isolation of
   .cc-invoice are kept — skin only. */

/* Header — the board-header pattern (Jobs/Events/Bookings twin). */
.cc-invv .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-invv .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-invv .cc-hdr .cnt b { font-family: var(--cc-font); font-weight: 700; color: var(--cc-ink); }

/* The one gradient CTA per screen (list: New invoice · editor: Save &
   mark sent · detail: Mark paid). Disabled keeps the shared .cc-btn
   opacity treatment; hover brightens instead of flattening. */
.cc-invv .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  font: 600 13px/1 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-invv .cc-btn.primary:hover { background: var(--cc-grad-accent); filter: brightness(1.05); }
.cc-invv .cc-btn.primary:disabled { filter: none; }

/* AR/AP stat cards — hcard recipe; Outstanding (first) carries the
   accent as punctuation (it's the number to chase). */
.cc-invv .cc-invstats { gap: 14px; margin-top: 16px; }
.cc-invstat {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px; padding: 16px 18px;
  box-shadow: var(--cc-shadow-card);
}
.cc-invstat .k { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); }
.cc-invstat .v { font: 700 24px/1.1 var(--cc-font); letter-spacing: -.02em; margin-top: 8px; color: var(--cc-ink); }
.cc-invstat:first-child .v { color: var(--tx); }

/* Owed-to-you / You-owe tabs — white pills, ink when on (board twin). */
.cc-invv .cc-sortbar { gap: 6px; }
.cc-invv .cc-sortopt {
  font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft);
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-pill); padding: 7px 13px;
  box-shadow: 0 1px 2px rgba(45,38,28,.05);
}
.cc-invv .cc-sortopt:hover { background: var(--cc-surface); border-color: var(--cc-faint); color: var(--cc-ink); }
/* Realigned with the migrated calm.css .cc-sortopt.on base — see the
   .cc-jobs twin above. */
.cc-invv .cc-sortopt.on { background: var(--cc-surface-2); color: var(--cc-ink); }
.cc-invv .cc-sortopt .cc-num { font-family: var(--cc-font); font-weight: 700; color: inherit; opacity: .72; }

/* The ledger — one floating white card riding the shared .cc-tbl-wrap
   (overflow-x survives at 375px); soft hairline rows. */
.cc-inv-list {
  border-radius: 20px; border-color: var(--cc-line); background: var(--cc-surface);
  box-shadow: var(--cc-shadow-card);
}
.cc-inv-list .cc-tbl td { border-bottom-color: var(--cc-line-soft); }

/* Editor — the form floats as one hcard; micro-label line-item head,
   display-face amounts. */
.cc-invv .cc-card.cc-form {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  box-shadow: var(--cc-shadow-card);
}
.cc-invline-h { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .08em; color: var(--cc-faint); }
.cc-invamt { font: 600 13.5px/1.2 var(--cc-font); color: var(--cc-ink); }
.cc-invx { border-radius: 8px; }
.cc-invx:hover { color: var(--cc-danger-ink); background: var(--cc-danger-bg); }

/* Colour swatches — soft-square chips; selected = ink ring on a white gap
   (reads on every swatch colour, no accent-vs-accent clash). */
.cc-invswatch {
  width: 28px; height: 28px; border-radius: 10px; border: 2px solid #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(45,38,28,.22);
  transition: transform .1s ease, box-shadow .1s ease;
}
.cc-invswatch:hover { transform: scale(1.07); }
.cc-invswatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--cc-ink), 0 1px 3px rgba(45,38,28,.22); }

/* The invoice document — clean white paper floating on the cream; the
   per-invoice colour keeps the band + total rule (via --inv). Class names
   are unchanged so the @media print isolation block still applies. */
.cc-invoice {
  border-radius: 20px; border-color: var(--cc-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 22px 44px -20px rgba(45,38,28,.22), 0 2px 5px rgba(45,38,28,.06);
}
.cc-inv-band { height: 7px; }
.cc-inv-from { font: 800 24px/1.1 var(--cc-font); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-inv-sub { font: 500 13px/1.4 var(--cc-font-soft); }
.cc-inv-status { font: 700 10.5px/1 var(--cc-font); letter-spacing: .07em; }
.cc-inv-lbl { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; color: var(--cc-faint); }
.cc-inv-strong { font-family: var(--cc-font); font-weight: 700; }
.cc-inv-muted { font: 500 13px/1.4 var(--cc-font-soft); }
.cc-inv-dates { font: 500 13px/1.5 var(--cc-font-soft); }
.cc-inv-dates .cc-num { font: 600 13px/1.5 var(--cc-font); color: var(--cc-ink); }
.cc-inv-table th { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; }
.cc-inv-table td { font: 500 13.5px/1.45 var(--cc-font-soft); border-bottom-color: var(--cc-line-soft); }
.cc-inv-table td.cc-num { font-family: var(--cc-font); font-weight: 600; }
.cc-inv-totalrow { font: 800 20px/1.15 var(--cc-font); letter-spacing: -.02em; }
.cc-inv-notes { font: 500 13px/1.55 var(--cc-font-soft); }

/* Invoices mobile — header + stats comfortable at 375px (the legacy 640
   blocks already collapse the stat grid, fold the line-item columns and
   the paper's Qty column; the ledger scrolls inside .cc-tbl-wrap). */
@media (max-width: 640px) {
  .cc-invv .cc-hdr h2 { font-size: 20px; }
  .cc-invv .cc-invstats { gap: 10px; }
  .cc-invstat { border-radius: 16px; padding: 13px 15px; }
  .cc-invstat .v { font-size: 20px; }
  .cc-inv-list { border-radius: 16px; }
  .cc-inv-from { font-size: 20px; }
}

/* ── Phase 2: Messages (Messages inbox / thread / composer) ──
   The two-pane inbox joins the Phase-1 language: board-header type,
   the whole inbox floating as ONE white card (the hcard recipe) with
   the conversation list + thread as inner panes split by a warm
   hairline. Selected conversation = accent-tint strip with an accent
   inset bar; unread = a small accent count pill (accent as
   punctuation). Bubbles: "them" on a quiet warm fill, "me" on ink —
   monochrome chat, no accent paint. The composer's Send is the
   screen's single gradient CTA. Optimistic send, plain-text bodies,
   userMeta/onDemoMsg wiring and the stacked mobile pane-switch are
   untouched — skin only. */

/* Header — the board-header pattern (Jobs/Bookings/Invoices twin). */
.cc-msgs .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-msgs .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-msgs .cc-hdr .cnt b { font-family: var(--cc-font); font-weight: 700; color: var(--cc-ink); }

/* The inbox — one floating white card; two panes inside it. Height comes
   from the flex:1 chain set up above (.cc-main/.cc-body/.cc-maxw.cc-msgs)
   — no calc() here either, so this card always fills whatever room is
   actually left below the header/tabs, composer included. */
.cc-msgs .cc-msg {
  border-radius: 20px; border-color: var(--cc-line); background: var(--cc-surface);
  box-shadow: var(--cc-shadow-card);
  min-height: 430px;
}

/* Conversation list — soft hairline rows; active = white + terracotta stroke
   (selection = stroke, Tomas 2026-07-15 — see callsheet-calm.css §6). This
   page-scoped rule out-specificities calm.css's own .cc-convo.on, so it
   carries the same token-driven treatment directly rather than relying on
   load order. */
.cc-msgs .cc-convos { border-right-color: var(--cc-line); }
.cc-msgs .cc-convo { padding: 13px 15px; border-bottom: 1px solid var(--cc-line-soft); cursor: pointer; transition: background .12s; }
.cc-msgs .cc-convo:hover { background: var(--cc-surface-2); }
.cc-msgs .cc-convo.on { background: var(--cc-surface); box-shadow: inset 0 0 0 1px var(--cc-accent); }
.cc-msgs .cc-convo .nm { font: 600 13.5px/1.25 var(--cc-font); color: var(--cc-ink); }
.cc-msgs .cc-convo.on .nm { color: var(--cc-ink); }
.cc-msgs .cc-convo .nm .t { font: 500 11px/1.3 var(--cc-font-soft); color: var(--cc-faint); }
.cc-msgs .cc-convo .snip { font: 500 12px/1.35 var(--cc-font-soft); color: var(--cc-muted); }
/* Unread badge inside the conversation list (white row ground) — quiet ink
   pill, not a solid accent block (de-accented, 2026-07-16 design-canon pass). */
.cc-convo-unread {
  flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--cc-radius-pill);
  background: var(--cc-ink); color: var(--cc-surface); font: 700 10.5px/19px var(--cc-font); text-align: center;
}

/* Thread header — display-face name over a quiet Onest subject line. */
.cc-msgs .cc-thread-head { padding: 13px 18px; border-bottom: 1px solid var(--cc-line); }
.cc-th-id { min-width: 0; line-height: 1.3; }
.cc-th-id .nm { font: 700 14.5px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-msgs .cc-thread-head .sub { font: 500 12px/1.35 var(--cc-font-soft); color: var(--cc-muted); margin-top: 2px; }

/* Bubbles — them: warm quiet fill; me: ink (monochrome, no accent paint). */
.cc-msgs .cc-bubbles { padding: 18px; gap: 10px; }
.cc-msgs .cc-bubble { max-width: 72%; padding: 10px 14px; border-radius: 16px; font: 400 13.5px/1.5 var(--cc-font-soft); }
.cc-msgs .cc-bubble.them { background: var(--cc-surface-2); border: 1px solid var(--cc-line-soft); border-bottom-left-radius: 5px; color: var(--cc-ink); }
.cc-msgs .cc-bubble.me { background: var(--cc-ink); border: 0; color: var(--cc-surface); border-bottom-right-radius: 5px; box-shadow: 0 8px 18px -12px rgba(45,38,28,.45); }
.cc-msgs .cc-bubble .bt { font: 500 10.5px/1 var(--cc-font-soft); color: var(--cc-faint); margin-top: 5px; }
.cc-msgs .cc-bubble.me .bt { color: var(--cc-surface); opacity: .55; }
.cc-msgs .cc-typing-bubble { padding: 13px 14px; }

/* Composer — pill field + the screen's single gradient CTA (Send). Now
   classed .cc-input (sweep chunk 2, 2026-07-16) so it rides the global field
   canon (calm.css §8: neutral --cc-field-line at rest, ink ring on focus)
   instead of hand-carrying the same strokes directly — this block keeps only
   what makes the pill composer distinct from a standard field (shape,
   padding, tint, weight); rest-state border/box-shadow and focus
   border-color/box-shadow are inherited from .cc-input and dropped here to
   avoid double-declaring the same values. */
.cc-msgs .cc-composer { padding: 12px 14px; border-top: 1px solid var(--cc-line); gap: 9px; align-items: center; }
.cc-msgs .cc-composer input {
  border-radius: var(--cc-radius-pill); padding: 11px 16px;
  background: var(--cc-surface-2); font: 500 13.5px/1.3 var(--cc-font-soft);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
/* Placeholder + focus ring ride the global .cc-input canon now (the input
   is classed .cc-input, sweep chunk 2) — a local ::placeholder here would
   out-specify the app-wide --cc-ph token and pin the old darker grey. Only
   the composer-specific focus background swap stays local. */
.cc-msgs .cc-composer input:focus { background: var(--cc-surface); }
.cc-msgs .cc-composer .cc-btn.primary {
  width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cc-grad-accent); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-msgs .cc-composer .cc-btn.primary:hover { background: var(--cc-grad-accent); filter: brightness(1.05); }
.cc-msgs .cc-composer input:disabled { background: var(--cc-surface-2); box-shadow: none; }

/* Message request banner, reskinned to sit flush atop the thread card. */
.cc-msgs .cc-req-banner { padding: 11px 18px; border-bottom-color: var(--cc-line-soft); font: 500 13px/1.4 var(--cc-font-soft); }

/* Messages mobile — the stacked pane-switch survives (convos on top,
   thread fills the rest); redeclared here because the scoped height
   above out-specifies the legacy mobile blocks. .cc-msg keeps flex:1 +
   min-height:0 (from the base .cc-msg rule) instead of height:auto, so
   the thread — and its composer — always fills the screen without the
   page scrolling, on mobile same as desktop. */
@media (max-width: 860px) {
  .cc-msgs .cc-msg { grid-template-columns: 1fr; }
  .cc-msgs .cc-convos { max-height: 38vh; flex-shrink: 0; border-right: 0; border-bottom: 1px solid var(--cc-line); }
  .cc-msgs .cc-thread { flex: 1; min-height: 0; }
  .cc-msgs .cc-bubble { max-width: 86%; }
}
@media (max-width: 640px) {
  .cc-msgs .cc-hdr h2 { font-size: 20px; }
  .cc-msgs .cc-msg { border-radius: 16px; }
  .cc-msgs .cc-bubbles { padding: 14px; }
}

/* ── Phase 2: Composer (PostComposer / PostGig / AvailabilityComposer / TourPost) ──
   The posting surfaces join the Phase-1 language. PostGig is the two-page,
   de-Clauded rebuild (2026-07-07, see docs/DESIGN_BIBLE.md "Form language"): Schibsted
   head, caps micro sub-labels + kickers, every selection control (.cc-seg)
   monochrome — accent reserved for exactly the budget preview and the single
   Post CTA. AvailabilityComposer + TourPost float as white hcard-recipe
   cards on the cream canvas under board-pattern headers; the tour CSV
   preview rides the shared .cc-tbl-wrap so overflow-x survives at 375px.
   DateField keeps its text-at-rest pattern. */

/* Headers — the board-header pattern (Jobs/Invoices/Messages twin). */
.cc-availc .cc-hdr h2, .cc-tourp .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-availc .cc-hdr .cnt, .cc-tourp .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }

/* Form cards — the hcard recipe. */
.cc-availc .cc-card, .cc-tourp .cc-card {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  box-shadow: var(--cc-shadow-card);
}

/* The one gradient CTA per screen (Post update / Post N gigs / Post job).
   family+weight only, so the sm/lg size variants keep their own scale. */
.cc-availc .cc-btn.primary, .cc-tourp .cc-btn.primary, .cc-postmodal .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  font-family: var(--cc-font); font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-availc .cc-btn.primary:hover, .cc-tourp .cc-btn.primary:hover, .cc-postmodal .cc-btn.primary:hover {
  background: var(--cc-grad-accent); filter: brightness(1.05);
}
.cc-availc .cc-btn.primary:disabled, .cc-tourp .cc-btn.primary:disabled, .cc-postmodal .cc-btn.primary:disabled { filter: none; }

/* PostGig modal — display-face head; the body keeps its scroll. */
.cc-postmodal-head h3 { font: 700 19px/1.2 var(--cc-font); letter-spacing: -.02em; color: var(--cc-ink); }
.cc-postmodal-head, .cc-postmodal-foot { border-color: var(--cc-line); }
.cc-postmodal-body { gap: 15px; }
.cc-postmodal-tour:hover { color: var(--tx); }

/* Segmented control — rounder to match the theme's radii; still monochrome
   (chip track + solid chrome fill), no accent. */
.cc-seg { border-radius: 11px; }
.cc-seg-opt { border-radius: 8px; }

/* Density: compact ~34px inputs inside the modal, lowercase faint
   micro-labels above the small deliverables fields (rule 5). */
.cc-postmodal .cc-input, .cc-postmodal .cc-select { padding: 8px 12px; }
/* ROOT CAUSE of the $-symbol-overlap bug (Tomas 2026-07-15): .cc-raterange-in
   .cc-input (~1094) reserves padding-left:30px for the absolutely-positioned
   $ glyph, but that rule and this one are EQUAL specificity (two classes
   each) — and this one sits LATER in the cascade, so its `padding: 8px 12px`
   shorthand silently reset padding-left back to 12px, tucking the first
   typed digit(s) under the $ sign inside any .cc-raterange rendered in a
   modal (the wizard's old two-box budget, and the tour-CSV default-rate row
   at ~4949 which still uses .cc-raterange). Fixed by bumping this override to
   three classes so it wins on specificity regardless of source order —
   cheaper and more robust than reordering the cascade. */
.cc-postmodal .cc-raterange-in .cc-input { padding-left: 30px; }
.cc-postmodal .cc-field > label.cc-sublbl {
  font: 500 11px/1.3 var(--cc-font-soft); letter-spacing: 0; text-transform: lowercase;
  color: var(--cc-faint); margin-bottom: 4px;
}

/* Tour steps — tint number pips (punctuation, not paint) + quiet copy. */
.cc-tour-steps li { font: 500 13px/1.5 var(--cc-font-soft); }
.cc-tour-steps .n { background: var(--surf); border: 1px solid var(--brd); color: var(--tx); font: 700 11.5px/1 var(--cc-font); }
.cc-filebtn {
  background: var(--cc-surface); border: 1px solid var(--cc-line); font: 600 12.5px/1 var(--cc-font);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(45,38,28,.06);
}
.cc-filebtn:hover { background: var(--cc-surface-2); border-color: var(--cc-faint); }

/* CSV preview — one floating white card; soft hairline rows. */
.cc-tourp .cc-tbl-wrap {
  border-radius: 20px; border-color: var(--cc-line); background: var(--cc-surface);
  box-shadow: var(--cc-shadow-card);
}
.cc-tourp .cc-tbl td { border-bottom-color: var(--cc-line-soft); }

/* Composer mobile — headers + cards comfortable at 375px (field rows and
   the modal already collapse via the legacy blocks; the preview scrolls
   inside .cc-tbl-wrap). */
@media (max-width: 640px) {
  .cc-availc .cc-hdr h2, .cc-tourp .cc-hdr h2 { font-size: 20px; }
  .cc-availc .cc-card, .cc-tourp .cc-card, .cc-tourp .cc-tbl-wrap { border-radius: 16px; }
  .cc-field-row-4 { grid-template-columns: 1fr 1fr; }
}

/* ── Phase 2: Applicants (Applicants / BookConfirmModal / BookedModal) ──
   The hirer's pipeline joins the Phase-1 language: board-header type,
   the applicant roster floating as ONE white card (the hcard recipe)
   with soft hairline rows, display-face names, a quiet tinted cover-note
   quote, and the slots pill carrying the accent as punctuation. Book is
   the screen's single gradient CTA (per row; disabled-when-full kept).
   The optimistic Decline/Shortlist/Book machine, the live "N of M
   filled" header and the book → confirm → next-step modal chain are
   untouched — skin only. Scoped to .cc-appl so the shared .cc-app-*
   row classes on the admin queue don't move. */

/* Header — the board-header pattern (Jobs/Bookings/Invoices twin). */
.cc-appl .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-appl .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-appl .cc-hdr .cnt b { font-family: var(--cc-font); font-weight: 700; color: var(--cc-ink); }

/* Slots pill — accent punctuation, display-face figure. */
.cc-appl .cc-slots.lg { font: 600 12px/1 var(--cc-font-soft); padding: 7px 13px; }
.cc-appl .cc-slots.lg .cc-num { font: 700 12.5px/1 var(--cc-font); }

/* The roster — one floating white card; rows on soft hairlines. */
.cc-appl-list {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px; padding: 0;
  box-shadow: var(--cc-shadow-card);
  overflow: hidden;
}
.cc-appl .cc-app-row {
  padding: 14px 18px; border-bottom-color: var(--cc-line-soft); transition: background .12s;
  /* A festival gig can draw up to the server's 500-applicant cap, all mounted at
     once (no windowing). content-visibility lets the browser skip layout+paint of
     off-screen rows — on first mount AND on every shortlist/decline re-render —
     while keeping every row in the DOM (Ctrl-F, scroll-restore and lazy avatars
     all still work). `auto 90px` is the initial size estimate (≈ the measured
     average row height, incl. a cover note) the browser refines to each row's
     real height after it first renders. */
  content-visibility: auto;
  contain-intrinsic-size: auto 90px;
}
.cc-appl .cc-app-row:hover { background: var(--cc-surface-2); }
.cc-appl-av { cursor: pointer; flex-shrink: 0; display: inline-flex; }
.cc-appl-av .cc-avatar { font-family: var(--cc-font); }
.cc-appl .cc-app-nm { font: 700 14.5px/1.25 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-appl-stars { font: 700 12px/1 var(--cc-font); color: var(--tx); margin-left: 2px; }
.cc-appl .cc-app-sub { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin-top: 2px; }
/* Cover note — a quiet tinted quote block, not italic body copy. */
.cc-appl .cc-app-note {
  font: 400 12.5px/1.5 var(--cc-font-soft); font-style: normal; color: var(--cc-soft);
  margin-top: 6px; padding: 7px 11px; display: inline-block;
  background: var(--cc-surface-2); border: 1px solid var(--cc-line-soft); border-radius: 10px;
}
.cc-appl .cc-status { font-family: var(--cc-font-soft); font-weight: 600; }
/* Book — the screen's gradient CTA (disabled-when-full attribute kept). */
.cc-appl .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  font-family: var(--cc-font); font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-appl .cc-btn.primary:hover { background: var(--cc-grad-accent); filter: brightness(1.05); }
.cc-appl .cc-btn.primary:disabled {
  background: var(--cc-surface-2); color: var(--cc-muted);
  box-shadow: none; filter: none; opacity: 1; cursor: default;
}

/* BookConfirmModal — the terms summary as a quiet warm sheet inside the
   shared .cc-modal skin; micro-label keys, display-face figures, the
   total on a hairline. Confirm = the modal's single gradient CTA. */
.cc-bkcm { max-width: 400px; }
.cc-bkcm-sum {
  margin: 14px 0 2px; padding: 13px 15px;
  background: var(--cc-surface-2); border: 1px solid var(--cc-line-soft); border-radius: 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.cc-bkcm-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cc-bkcm-line .k { font: 600 10.5px/1.4 var(--cc-font-soft); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-faint); }
.cc-bkcm-line b { font: 600 13.5px/1.35 var(--cc-font); color: var(--cc-ink); text-align: right; }
.cc-bkcm-line.total { border-top: 1px solid var(--cc-line); padding-top: 9px; margin-top: 3px; }
.cc-bkcm-line.total b { font: 700 15px/1.25 var(--cc-font); }
.cc-bkcm .cc-btn.primary, .cc-bkdm .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  font-family: var(--cc-font); font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-bkcm .cc-btn.primary:hover, .cc-bkdm .cc-btn.primary:hover { background: var(--cc-grad-accent); filter: brightness(1.05); }
.cc-bkcm .cc-btn.primary:disabled { filter: none; }

/* BookedModal — the "done" moment: ok-tint icon tile + display-face head,
   two full-width next steps (message / view). */
.cc-bkdm { max-width: 380px; }
.cc-bkdm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cc-bkdm-head h3 { margin: 0; }
.cc-bkdm-ok {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  background: var(--cc-ok-bg); border: 1px solid color-mix(in srgb, var(--cc-ok-ink) 24%, var(--cc-ok-bg));
  color: var(--cc-ok-ink); display: inline-flex; align-items: center; justify-content: center;
}
.cc-bkdm-acts { justify-content: stretch; }
.cc-bkdm-acts .cc-btn { flex: 1; justify-content: center; }

/* Applicants mobile — rows wrap so the action cluster gets its own line;
   comfortable at 375px, no horizontal overflow. */
@media (max-width: 640px) {
  .cc-appl .cc-hdr h2 { font-size: 20px; }
  .cc-appl-list { border-radius: 16px; }
  .cc-appl .cc-app-row { flex-wrap: wrap; padding: 13px 14px; gap: 10px 12px; }
  .cc-appl .cc-app-main { flex-basis: calc(100% - 52px); }
  .cc-appl .cc-app-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}

/* ── Phase 2: Settings (Settings / InviteCard / IgStrip / PortfolioEditor /
   EquipmentEditor / CaseStudyEditor) ──
   The account page joins the Phase-1 language: board-header type, every
   .cc-card floating as a white hcard on the cream canvas, Schibsted section
   heads with quiet Onest sub-copy, caps micro-labels, and the accent strictly
   as punctuation (selected role pills, checkbox accents, the lit tier band).
   Save changes is the screen's ONE gradient CTA. The theme picker is now the
   Scene × Chrome control — the same .cc-chromeseg / .cc-scenegrid atoms the
   top-bar ThemePopover uses, just widened for the page. All scoped to
   .cc-setts; the IG strip / freshness banner / editor rows are component-owned
   (they also render inside profile editing) so those restyle globally. */

/* Header — the board-header pattern (Jobs/Invoices/Messages twin). */
.cc-setts .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-setts .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }

/* Cards — the hcard recipe. */
.cc-setts .cc-card {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  box-shadow: var(--cc-shadow-card);
}
.cc-setts .cc-sec h3 { font: 700 15px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-setts .cc-sec h3 .n { font: 500 12px/1.3 var(--cc-font-soft); color: var(--cc-faint); letter-spacing: 0; }

/* Required-stated-once sub-line under the form title (de-Clauding rule 1). */
.cc-setts-sub { margin-bottom: 14px; }

/* Profile-photo row. */
.cc-setts-photo { display: flex; gap: 12px; align-items: center; }

/* Brand-accent hex readout (org branch). */
.cc-setts .cc-color-row input[type=color] { border-radius: 11px; }
.cc-setts-hex { font: 600 13px/1 var(--cc-font); letter-spacing: .02em; color: var(--cc-muted); }

/* Notification checks. */
.cc-setts .cc-check { font: 500 13px/1.35 var(--cc-font-soft); }
.cc-setts .cc-check input { accent-color: var(--cc-chrome); }

/* Save row — the screen's single gradient CTA + the quiet "Saved" tick. */
.cc-setts-save { margin-top: 8px; align-items: center; }
.cc-setts-save .cc-saved { margin-right: auto; font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-ok-ink); }
.cc-setts .cc-form .cc-modal-foot .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  font-family: var(--cc-font); font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-setts .cc-form .cc-modal-foot .cc-btn.primary:hover { background: var(--cc-grad-accent); filter: brightness(1.05); }
.cc-setts .cc-form .cc-modal-foot .cc-btn.primary:disabled { filter: none; }

/* Appearance — the ThemePopover atoms widened for the page (Scene × Chrome).
   .cc-chromeseg / .cc-scenegrid / .cc-scene-sw come from the redesign chrome
   block; only proportions change here. */
.cc-setts .cc-themepop-lbl { margin-top: 2px; }
.cc-setts .cc-scenegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; }

/* Invite a collaborator. */
.cc-setts-invrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cc-setts-invrow .cc-input { flex: 1; min-width: 220px; font-size: 13px; }
.cc-setts-invhint { margin-top: 10px; }
.cc-setts-invhint strong { color: var(--cc-ink); font-family: var(--cc-font); font-weight: 700; }

/* "or add by link" divider — the caps micro-label. */
.cc-setts .cc-or { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); }

/* ── Component-owned (also render inside profile editing — consistent by
   design, like the Gallery tiles): IG strip, freshness nudge, editor rows. ── */
.cc-ig-link { border-radius: 13px; transition: background .12s, border-color .12s; }
.cc-ig-link:hover { background: var(--surf); border-color: var(--brd); }
.cc-ig-link:hover > i:last-child { color: var(--acc); }
.cc-ig-meta .t { font: 600 13px/1.3 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-ig-meta .s { font: 500 11.5px/1.3 var(--cc-font-soft); color: var(--cc-muted); }
.cc-ig-on-ramp { border-top: 1px dashed var(--cc-line); }
.cc-ig-on-ramp h4 { font: 700 14px/1.25 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-ig-hint { font: 500 12.5px/1.5 var(--cc-font-soft); }
.cc-ig-err { font: 500 12.5px/1.4 var(--cc-font-soft); }

/* Freshness nudge, profile-editing context — neutral (de-accented,
   2026-07-16 design-canon pass; this scoped .ti override used to
   re-accent the icon after the base rule above went neutral, since it's
   the same unscoped selector and this one loads later). */
.cc-fresh-banner { background: var(--surf); border-color: var(--brd); border-radius: 14px; }
.cc-fresh-banner > .ti { color: var(--cc-ink); }
.cc-fresh-banner b { font: 600 13.5px/1.3 var(--cc-font); letter-spacing: -.01em; }
.cc-fresh-banner span { font: 400 12.5px/1.5 var(--cc-font-soft); }

/* Gear / case-study editor rows — display-face titles on soft hairlines. */
.cc-cs-edit-row { border-bottom-color: var(--cc-line-soft); padding: 10px 0; }
.cc-cs-edit-main { min-width: 0; }
.cc-cs-edit-ttl { font: 600 13.5px/1.3 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cs-edit-sub { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cs-thumb { border-radius: 12px; }
.cc-cs-thumb.on { outline-color: var(--cc-chrome); }
.cc-cs-thumb .chk { background: var(--cc-chrome); color: var(--cc-chrome-ink); }

/* Settings mobile — cards + picker comfortable at 375px (field rows already
   collapse via the legacy 760px block; pills wrap on their own). */
@media (max-width: 640px) {
  .cc-setts .cc-hdr h2 { font-size: 20px; }
  .cc-setts .cc-card { border-radius: 16px; }
  .cc-setts .cc-sec { padding: 16px; }
  .cc-setts .cc-scenegrid { grid-template-columns: 1fr 1fr; }
  .cc-setts-invrow .cc-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Phase 2: Auth (AuthShell / Login / Signup / CheckEmail / Onboarding) ──
   Standalone screens (no shell) join the Phase-1 language: the editorial
   photo becomes a floating dark slab (dock-like radius + deep warm shadow)
   on the cream canvas, the form column gets the gradient brand mark +
   Schibsted heading, cards use the .cc-hcard recipe, and each screen keeps
   exactly ONE gradient CTA (.cc-auth-cta). */

/* Shell — the body's cream radials show through; the photo floats. Full-bleed
   split (the original #145 layout): the slab fills the viewport height and the
   copy scales UP with the screen instead of the panels shrinking into a card. */
.cc-auth { background: transparent; grid-template-columns: 44% 56%; gap: 20px; padding: 20px; }
/* Dark slab = the landing's dark hero card: owned photo asset + downward scrim,
   carrying a condensed hero (headline + honest liquidity + proof row). Content
   anchors bottom-left like the landing copy column. */
.cc-auth-photo {
  border-radius: 24px; height: calc(100vh - 40px); position: sticky; top: 20px; overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(16,13,9,.42) 0%, rgba(16,13,9,.82) 100%),
    url('../img/landing-hero.svg');
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 22px 44px -20px rgba(45,38,28,.32), 0 2px 6px rgba(45,38,28,.10);
}
/* Condensed hero content on the slab — display-size type; grows with viewport. */
.cc-auth-aside { padding: 52px; max-width: 620px; }
.cc-auth-aside-h { font: 800 clamp(40px, 3.8vw, 68px)/1.02 var(--cc-font); letter-spacing: -.035em;
  color: var(--cc-chrome-ink); margin: 0; }
.cc-auth-liq { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font: 500 15px/1.2 var(--cc-font-soft); color: var(--cc-chrome-soft); }
.cc-auth-liq b { font: 700 15px/1 var(--cc-font); color: var(--cc-chrome-ink); }
.cc-auth-liq .cc-liq-sep { opacity: .6; }
.cc-auth-liq .cc-liq-dot { animation: cc-liq-pulse 2.2s ease-in-out infinite; }
.cc-auth-proof { display: flex; align-items: center; gap: 12px; margin-top: 26px;
  padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--cc-chrome-ink) 14%, transparent); }
.cc-auth-proof-faces { display: inline-flex; flex-shrink: 0; }
/* Monochrome initial circles — chrome tones only, no per-name avatar colour. */
.cc-auth-proof-face { width: 34px; height: 34px; margin-left: -9px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cc-chrome-2); color: var(--cc-chrome-ink);
  border: 1px solid color-mix(in srgb, var(--cc-chrome-ink) 18%, transparent);
  box-shadow: 0 0 0 2px var(--cc-chrome);
  font: 700 11.5px/1 var(--cc-font); letter-spacing: .02em; }
.cc-auth-proof-face:first-child { margin-left: 0; }
.cc-auth-proof-cap { font: 500 14px/1.45 var(--cc-font-soft); color: var(--cc-chrome-soft); }
@media (prefers-reduced-motion: reduce) { .cc-auth-liq .cc-liq-dot { animation: none; } }
.cc-auth-panel { padding: 28px 24px; }
.cc-auth-inner { max-width: 440px; }

/* Brand — the dock's gradient tile + tight Schibsted wordmark. */
.cc-auth-brand { gap: 11px; margin-bottom: 10px; }
.cc-auth-mark {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px;
  background: var(--cc-grad-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 21px/1 var(--cc-font); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.cc-auth-brand .cc-wm { font: 800 26px/1 var(--cc-font); letter-spacing: -.03em; color: var(--cc-ink); }
.cc-auth-brand .cc-wm .dot { color: var(--acc); }
.cc-auth-h { font: 700 23px/1.15 var(--cc-font); letter-spacing: -.02em; color: var(--cc-ink); margin: 6px 0 22px; }
.cc-auth-h:has(+ .cc-auth-h-sub) { margin-bottom: 4px; }
/* Required-stated-once subline under the heading (de-Clauding rule 1) — quiet,
   centered, matches the .cc-postmodal-sub tone used in Post-a-job. */
.cc-auth-h-sub { text-align: center; font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin: 0 0 20px; }

/* Card — the floating white card recipe. */
.cc-auth-card {
  border-radius: 20px; padding: 20px;
  box-shadow: var(--cc-shadow-card);
}
.cc-auth-card-lbl { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); }
.cc-auth-sub { font-family: var(--cc-font-soft); }

/* The screen's single gradient CTA. */
.cc-auth-cta {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 2px; padding: 12px 20px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--cc-grad-accent); color: #fff;
  font: 600 14px/1 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: filter .12s, box-shadow .12s;
}
.cc-auth-cta:hover { filter: brightness(1.05); }
.cc-auth-cta:disabled { opacity: .6; cursor: default; filter: none; box-shadow: none; }

/* Inline messages (error / note / resend-confirmation). */
.cc-auth-err { font: 500 13px/1.45 var(--cc-font-soft); color: var(--cc-danger-ink); margin: 4px 0 10px; }
.cc-auth-note { font: 500 13px/1.45 var(--cc-font-soft); color: var(--tx); margin: 4px 0 10px; }
.cc-auth-resend { font: 500 13px/1.4 var(--cc-font-soft); margin: -4px 0 10px; }
.cc-auth-resend a { color: var(--tx); font-weight: 600; cursor: pointer; }
.cc-auth-resend a.busy, .cc-auth-forgot a.busy { opacity: .5; cursor: default; }

/* Quiet links under the card. */
.cc-auth-forgot { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-auth-forgot a { color: var(--tx); }
.cc-auth-forgot.mt { margin-top: 12px; }
.cc-auth-alt { font-family: var(--cc-font-soft); }
.cc-auth-alt a { color: var(--tx); }

/* Demo accounts — caps micro-label + white row buttons. */
.cc-auth-demo { border-top: 1px solid var(--cc-line-soft); }
.cc-auth-demo .lbl { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); }
.cc-auth-demo-btn { width: 100%; justify-content: flex-start; gap: 11px; margin-bottom: 8px; padding: 9px 12px; border-radius: 13px; font: 600 13.5px/1.2 var(--cc-font); }
.cc-auth-demo-btn .sub { color: var(--cc-muted); font: 500 12.5px/1.2 var(--cc-font-soft); }
/* Demo-persona avatars are monochrome white here — not the per-name avatarColor
   fill (which lands teal/green on the forest front door). !important overrides
   Avatar's inline background/colour for the srcless (logged-out) fallback. */
.cc-auth-demo-btn .cc-avatar { background: var(--cc-surface) !important; color: var(--cc-ink) !important; border: 1px solid var(--cc-line); }

/* Signup — segment toggle (auth-scoped skin) + the city/state split. */
.cc-auth .cc-segment { background: var(--cc-surface-2); border-radius: 12px; }
.cc-auth .cc-segment button { font: 600 13px/1.2 var(--cc-font-soft); border-radius: 9px; }
.cc-auth .cc-segment button.on { background: var(--cc-surface); color: var(--cc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cc-auth-cols { display: flex; gap: 10px; }
.cc-auth-cols .grow { flex: 1; min-width: 0; }
.cc-auth-cols .state { width: 120px; flex-shrink: 0; }
/* .cc-fgroup itself is unscoped now (app.css ~1419 — #246 widened it app-wide),
   so the auth-scoped background/padding/layout rule #246 duplicated here is
   gone (was byte-identical to the base rule's values). What's left is real:
   the base rule only zeroes .cc-field's margin, not .cc-field-row/.cc-fld,
   so this auth card still needs its own resets for those. */
.cc-auth-card .cc-fgroup > .cc-field,
.cc-auth-card .cc-fgroup > .cc-field-row { margin: 0; }
.cc-auth-card .cc-fgroup .cc-fld { margin-bottom: 0; }
.cc-auth-ig-hint { margin: -6px 0 12px; }
.cc-auth-check { margin: 8px 0 4px; cursor: pointer; }
.cc-auth-ts { margin: 4px 0 10px; }

/* Check-email — centered card, accent-tint mail tile. */
.cc-auth-center { text-align: center; }
.cc-auth-mail {
  width: 56px; height: 56px; margin: 4px auto 12px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf); border: 1px solid var(--brd); color: var(--tx);
}
.cc-auth-mail-sub { font: 600 14px/1.3 var(--cc-font); color: var(--cc-ink); margin-bottom: 6px; }
.cc-auth-p { font: 400 13.5px/1.55 var(--cc-font-soft); color: var(--cc-muted); margin: 0 0 14px; }
.cc-auth-p strong { color: var(--cc-ink); font-family: var(--cc-font); font-weight: 700; }

/* Onboarding — lede, avatar row, recent-work stack, action row. */
.cc-auth-lede { text-align: center; margin: -14px 0 16px; font: 500 13.5px/1.5 var(--cc-font-soft); }
.cc-auth-avrow { display: flex; align-items: center; gap: 12px; }
.cc-auth-lbl-soft { font: 500 12px/1.3 var(--cc-font-soft); color: var(--cc-muted); letter-spacing: 0; text-transform: none; }
.cc-field .cc-auth-work { margin-bottom: 8px; }
.cc-field .cc-auth-work:last-of-type { margin-bottom: 0; }
.cc-auth-hint-tight { margin-top: -4px; }
.cc-auth-acts { display: flex; gap: 10px; margin-top: 6px; }
.cc-auth-acts .cc-auth-cta { flex: 1; width: auto; margin-top: 0; }

/* ── Onboarding wizard — progress, repeatable rows, "how it works" list.
   Monochrome surfaces; the single accent is the progress fill + CTA only. */
.cc-ob-prog { margin: 0 0 16px; }
.cc-ob-prog-lbl { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin-bottom: 7px; text-align: center; }
.cc-ob-prog-bar { height: 4px; border-radius: 999px; background: var(--cc-line); overflow: hidden; }
.cc-ob-prog-bar > span { display: block; height: 100%; background: var(--cc-accent); border-radius: 999px; transition: width .2s ease; }
.cc-ob-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cc-ob-row .cc-input { flex: 1; min-width: 0; }
.cc-ob-rm { flex-shrink: 0; }
.cc-ob-add { margin-top: 2px; }
.cc-ob-howto-grp { margin-bottom: 16px; }
.cc-ob-howto-grp:last-child { margin-bottom: 0; }
.cc-ob-howto-h { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 8px; }
.cc-ob-howto-row { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; }
.cc-ob-howto-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--cc-radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--cc-surface-2, var(--cc-surface)); border: 1px solid var(--cc-line); color: var(--cc-soft); }
.cc-ob-howto-row b { display: block; font-size: 13.5px; }
.cc-ob-howto-row span { display: block; font: 500 12.5px/1.45 var(--cc-font-soft); color: var(--cc-muted); }

/* Auth mobile — single column, photo hidden, comfortable at 375px. */
@media (max-width: 900px) {
  .cc-auth { grid-template-columns: 1fr; padding: 16px 14px; }
  .cc-auth-photo { display: none; }
  .cc-auth-panel { padding: 16px 4px; }
}

/* ── Phase 2: Admin console (AdminPortal / AdminOverview / AdminUsers /
   UserInspector / InspectProfile / InspectActivity / InspectMessages /
   InspectActions / AdminReports / AdminAudit / AdminTeam / TeamRow /
   AddStaff / AdminEvents) ──
   A working console, not a marketing page: the same white floating
   cards on the cream canvas, tuned DENSE — pill tabs (cap-filtered),
   micro-label table heads, tight stat tiles, neutral chips. Accent
   stays punctuation (kicker, active tab, count pills, the odd primary
   button). Every cap gate, root-lock and disabled state is logic and
   untouched — these rules are skin only. */

.cc-adminv .cc-hdr { margin-bottom: 14px; }
.cc-adminv .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; margin-bottom: 4px; }
.cc-adminv .cc-hdr .cnt { font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-muted); }
.cc-adminv .cc-hdr .cnt b { font-family: var(--cc-font); font-weight: 700; color: var(--cc-ink); }
.cc-adm-kick {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx); background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 5px 10px;
}
.cc-adm-kick i { font-size: 12px; color: var(--acc); }

/* Tabs — segmented white pills, ink when active (the sortbar vocabulary).
   Applies to the portal tab bar AND the inner UserInspector / Reports tabs. */
.cc-adminv .cc-tabs { gap: 6px; border-bottom: 0; margin-bottom: 16px; flex-wrap: wrap; }
.cc-adminv .cc-tab {
  font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft); cursor: pointer;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-pill); padding: 7px 13px; margin-bottom: 0;
  box-shadow: 0 1px 2px rgba(45,38,28,.05); text-transform: capitalize;
  transition: background .12s, border-color .12s, color .12s;
}
.cc-adminv .cc-tab:hover { background: var(--cc-surface); border-color: var(--cc-faint); color: var(--cc-ink); }
.cc-adminv .cc-tab.on { background: var(--cc-surface); border-color: var(--cc-line); color: var(--cc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cc-adminv .cc-card .cc-tabs { margin-bottom: 12px; }

/* Cards — the floating hcard recipe, tuned dense. */
.cc-adminv .cc-card {
  border-radius: 18px; padding: 14px 16px;
  box-shadow: var(--cc-shadow-card);
}
.cc-adminv .cc-sec h3 { font: 700 15px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); margin-bottom: 10px; }
.cc-adminv .cc-sec h3 .n {
  font: 700 10.5px/1 var(--cc-font); color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 4px 8px;
}
.cc-adm-sechead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.cc-adm-sechead h3 { margin: 0; font: 700 15px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }

/* Tables — flat inside the padded card (the wrap keeps overflow-x for
   375px); micro-label heads ride the foundations pass. Dense cells. */
.cc-adminv .cc-tbl-wrap { border: 0; border-radius: 0; background: transparent; }
.cc-adminv .cc-tbl th { padding: 9px 12px; }
.cc-adminv .cc-tbl td { padding: 10px 12px; font: 500 13px/1.4 var(--cc-font-soft); border-bottom-color: var(--cc-line-soft); }
.cc-adminv .cc-tbl th:first-child, .cc-adminv .cc-tbl td:first-child { padding-left: 2px; }
.cc-adminv .cc-tbl th:last-child, .cc-adminv .cc-tbl td:last-child { padding-right: 2px; }
.cc-adminv .cc-tbl .who { font: 700 13.5px/1.25 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-adminv .cc-tbl .sub2 { font: 500 12px/1.35 var(--cc-font-soft); color: var(--cc-muted); }
.cc-adminv .cc-tbl td.cc-num { font-family: var(--cc-font); font-weight: 600; }
.cc-adminv .cc-status { font-family: var(--cc-font-soft); font-weight: 600; }
.cc-adminv .cc-rtag {
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cc-soft); background: var(--cc-chip); border: 1px solid var(--cc-line);
  border-radius: 6px; padding: 3px 7px;
}
.cc-adminv .muted { font-family: var(--cc-font-soft); }

/* Overview stat tiles — micro-label + big Schibsted figure. */
.cc-adminv .cc-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cc-adminv .cc-stat {
  border-radius: 16px; padding: 12px 14px;
  box-shadow: var(--cc-shadow-card);
}
.cc-adminv .cc-stat .k { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 7px; }
.cc-adminv .cc-stat .v { font: 800 23px/1 var(--cc-font); letter-spacing: -.02em; color: var(--cc-ink); }
.cc-adminv .cc-stat .s { font: 500 11.5px/1.35 var(--cc-font-soft); color: var(--cc-muted); margin-top: 4px; }

/* Users search row. */
.cc-adm-search { display: flex; gap: 8px; margin-bottom: 12px; }
.cc-adm-search .cc-input { flex: 1; min-width: 0; }
.cc-adm-search .cc-btn { flex-shrink: 0; }

/* User inspector head. */
.cc-adminv .cc-phead { padding: 2px 2px 12px; gap: 14px; align-items: center; }
.cc-adminv .cc-pname { gap: 9px; }
.cc-adminv .cc-pname h1 { font: 700 19px/1.15 var(--cc-font); letter-spacing: -.02em; }
.cc-adminv .cc-roleline { font: 500 13px/1.4 var(--cc-font-soft); margin: 3px 0 0; }
.cc-adminv .cc-saved { font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-ok-ink); }

/* Inspect: read-only profile lines. */
.cc-adminv .cc-rail-line { font: 500 13px/1.45 var(--cc-font-soft); padding: 8px 0; border-bottom: 1px solid var(--cc-line-soft); }
.cc-adminv .cc-rail-line .k { font: 600 10.5px/1.6 var(--cc-font-soft); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-faint); }
.cc-adminv .cc-rail-line .v { font-weight: 600; color: var(--cc-ink); max-width: 70%; overflow-wrap: anywhere; text-align: right; }

/* Inspect: edit form — two dense columns; bio + save span full width. */
.cc-adminv .cc-adm-form { max-width: 720px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.cc-adminv .cc-adm-form .cc-field { margin-bottom: 13px; }
.cc-adminv .cc-adm-form .cc-field:has(textarea), .cc-adminv .cc-adm-form > .cc-btn { grid-column: 1 / -1; }
.cc-adminv .cc-adm-form > .cc-btn { justify-self: start; }
.cc-adminv .cc-field > label { text-transform: capitalize; }

/* Inspect: message QA bubbles. */
.cc-adminv .cc-mqa { gap: 8px; margin-top: 4px; }
.cc-adminv .cc-mqa-msg { border-color: var(--cc-line-soft); background: var(--cc-surface-2); border-radius: 12px; padding: 9px 12px; font: 500 13px/1.5 var(--cc-font-soft); }
.cc-adminv .cc-mqa-msg b { font: 700 12px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }

/* Inspect: account actions. */
.cc-adm-actions { display: grid; gap: 12px; max-width: 560px; margin-top: 12px; }
.cc-adminv .cc-adm-action b { font: 700 14px/1.25 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-adminv .cc-adm-action .s { font: 500 12.5px/1.5 var(--cc-font-soft); color: var(--cc-muted); margin: 4px 0 10px; }

/* Delete account: the danger-styled card + button, and the warning modal. */
.cc-adm-danger { border-color: var(--cc-danger-ink); }
.cc-btn.cc-danger { color: var(--cc-danger-ink); background: var(--cc-danger-bg); border-color: var(--cc-danger-ink); font-weight: 700; }
.cc-btn.cc-danger:hover { filter: brightness(.97); }
.cc-btn.cc-danger:disabled { opacity: .5; filter: none; cursor: not-allowed; }
.cc-delacct-modal { max-width: 560px; }
.cc-delacct-tier { background: var(--cc-surface-2); border-radius: var(--cc-radius-md); padding: 12px 14px; margin: 10px 0; }
.cc-delacct-tier b { font: 700 13.5px/1.35 var(--cc-font); color: var(--cc-ink); }
.cc-delacct-tier p { font: 500 12.5px/1.55 var(--cc-font-soft); color: var(--cc-muted); margin-top: 6px; }
.cc-delacct-tier ul { margin: 6px 0 0; padding-left: 18px; font: 500 12.5px/1.6 var(--cc-font-soft); color: var(--cc-ink); }
.cc-delacct-signin { display: flex; align-items: flex-start; gap: 7px; font: 500 12.5px/1.55 var(--cc-font-soft); color: var(--cc-muted); margin-top: 4px; }
.cc-delacct-signin svg { flex-shrink: 0; margin-top: 2px; }

/* Admin: user verification (queue + detail). Desktop rules live here, near
   the other admin sections; responsive tweaks are appended at the very end
   of this file per the mobile-CSS convention. */
.cc-verify-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.cc-verify-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.cc-verify-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }

/* Admin: vouch flags (phase C, vouch.moderate) — a soft-signal queue, never
   an auto-punish list, so it stays visually calm (same monochrome card-row
   idiom as the verification queue above it). */
.cc-adm-vf-row + .cc-adm-vf-row { margin-top: 10px; }
.cc-adm-vf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-adm-vf-claim { font: 600 13px/1.3 var(--cc-font); color: var(--cc-ink); }
.cc-adm-vf-when { margin-left: auto; font-size: 12px; }
.cc-adm-vf-users { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cc-adm-vf-user { display: inline-flex; align-items: center; gap: 6px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill); padding: 4px 10px 4px 4px; font: 600 12.5px/1.2 var(--cc-font-soft); color: var(--cc-ink); cursor: pointer; }
.cc-adm-vf-user:hover { border-color: var(--cc-faint); }
.cc-adm-vf-note { font-size: 12.5px; color: var(--cc-soft); margin-top: 8px; line-height: 1.5; }
.cc-adm-vf-detail { font-size: 11.5px; margin-top: 6px; word-break: break-all; }
.cc-adm-vf-void { display: inline-flex; align-items: center; gap: 6px; }
.cc-adm-vf-void .cc-input { max-width: 220px; padding: 6px 10px; font-size: 12.5px; }

/* Team: capability toggles (root rows stay locked via the JSX guards). */
.cc-adminv .cc-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; padding: 10px 2px 6px; }
.cc-adminv .cc-caps .cc-check { font: 500 12.5px/1.3 var(--cc-font-soft); color: var(--cc-soft); }
.cc-adminv .cc-check input { accent-color: var(--cc-chrome); }
.cc-adminv .cc-select { max-width: 100%; }

/* Team: add-staff inset panel. */
.cc-adminv .cc-adm-add { background: var(--cc-surface-2); box-shadow: none; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.cc-adm-addrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px 0; font: 500 13px/1.35 var(--cc-font-soft); color: var(--cc-soft); }
.cc-adm-addrow b { font: 700 13px/1.25 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-adm-addrow .muted { font-size: 12.5px; }
.cc-adm-addrow .cc-btn { flex-shrink: 0; }

/* Events moderation queue rows (inside the padded card). */
.cc-adminv .cc-app-row { padding: 11px 0; border-bottom-color: var(--cc-line-soft); }
.cc-adminv .cc-app-nm { font: 700 14px/1.3 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cc-adminv .cc-app-sub { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin-top: 2px; }
.cc-adminv .cc-app-note { font: 500 12.5px/1.4 var(--cc-font-soft); font-style: normal; color: var(--tx); display: inline-block; margin-top: 3px; overflow-wrap: anywhere; }

/* Overview stat tiles that are also real buttons (Total users, Bookings, etc.
   → openTab / go). Same visual as a plain .cc-stat — cursor + a subtle hover
   lift are the only "this is clickable" signal, no accent (selection/nav is
   never money-or-go, per the design bible's Form-language rules). */
.cc-stat-btn { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
.cc-stat-btn:hover, .cc-stat-btn:focus-visible { background: var(--cc-surface-2); }
.cc-stat-btn:focus-visible { outline: 2px solid var(--cc-line); outline-offset: -2px; }

/* A whole table row that's a click-through to a drill-in (users, errors
   expand). Reuses the existing tbody tr:hover background; this just adds the
   cursor since a <tr> has no native affordance. */
.cc-adminv .cc-tbl tbody tr.cc-rowlink { cursor: pointer; }

/* Errors tab: dormant-alerts banner + expanded row detail. */
.cc-errbanner { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin-top: 0; margin-bottom: 14px; padding: 10px 14px; }
.cc-errdetail { padding: 10px 4px; display: grid; gap: 8px; }
.cc-errdetail-row { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1.4 var(--cc-font-soft); }
.cc-errdetail-row .k { color: var(--cc-faint); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; flex-shrink: 0; }
.cc-errdetail-row .v { color: var(--cc-ink); overflow-wrap: anywhere; }
.cc-errdetail-stack { display: grid; gap: 6px; }
.cc-errdetail-stackhead { display: flex; align-items: center; justify-content: space-between; }
.cc-errdetail-stackhead .k { color: var(--cc-faint); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.cc-errdetail-stack pre { margin: 0; padding: 10px 12px; background: var(--cc-surface-2); border-radius: 10px; font: 500 11.5px/1.5 var(--cc-font-soft); color: var(--cc-soft); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }

/* Admin mobile — dense still works at 375px; tables scroll in their wrap. */
@media (max-width: 640px) {
  .cc-adminv .cc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-adminv .cc-adm-form { grid-template-columns: 1fr; }
  .cc-adminv .cc-caps { grid-template-columns: 1fr; }
  .cc-adm-search { flex-wrap: wrap; }
  .cc-adminv .cc-app-row { flex-wrap: wrap; }
  .cc-adminv .cc-app-actions { width: 100%; justify-content: flex-end; }
  .cc-adm-addrow { flex-wrap: wrap; }
}

/* ── Phase 2: Landing + Tour (Landing / TourDetail / Placeholder) ──
   The logged-out front door joins the Phase-1 language: tight Schibsted
   wordmark up top, the editorial dark photo hero
   floating like the dock (24px radius, deep warm shadow), ONE gradient
   CTA (the hero sign-up), ink pills for the other conversion buttons,
   and the honest liquidity strip as a floating white pill. The landing
   wears the legacy guest palette (data-theme), so accents here lean on
   --acc (matching the auth screens' brand look) rather than the theme-
   swapped --cc-accent, keeping guest surfaces consistent Landing→Login.
   TourDetail + Placeholder ride the same hcard vocabulary. */

/* Landing shell — let the body's cream radials show through. */
.cc-landing { background: transparent; }
.cc-landing-top { padding: 22px 32px 8px; }
.cc-landing-top .cc-wm { font: 800 22px/1 var(--cc-font); letter-spacing: -.03em; color: var(--cc-ink); }
.cc-landing-top .cc-wm .dot { color: var(--acc); }
.cc-landing-actions .cc-btn { font: 600 13px/1 var(--cc-font); padding: 9px 16px; }

/* Hero — the dark photo slab floats like the dock. */
.cc-landing-hero { padding-top: 10px; }
.cc-herobig {
  border-radius: 24px; padding: 54px 46px;
  box-shadow: 0 22px 44px -20px rgba(45,38,28,.32), 0 2px 6px rgba(45,38,28,.10);
}
.cc-herobig h1 { font: 800 40px/1.05 var(--cc-font); letter-spacing: -.03em; }
.cc-herobig p { font: 400 15px/1.6 var(--cc-font-soft); }
/* The screen's single gradient CTA. */
.cc-land-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 22px; border: 0; border-radius: var(--cc-radius-pill); cursor: pointer;
  background: var(--cc-grad-accent); color: #fff;
  font: 600 14.5px/1 var(--cc-font);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  transition: filter .12s;
}
.cc-land-cta:hover { filter: brightness(1.05); }

/* Projects hiring now — Schibsted head, Onest sub, floating liquidity pill. */
.cc-landing-projects { padding: 40px 32px 80px; }
.cc-landing-projhead h2 { font: 700 24px/1.15 var(--cc-font); letter-spacing: -.02em; color: var(--cc-ink); }
.cc-landing-projhead p { font: 500 13.5px/1.5 var(--cc-font-soft); color: var(--cc-soft); margin: 7px 0 18px; }
.cc-landing-liq {
  gap: 9px; margin: 0 auto 26px; padding: 8px 15px;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  font: 500 12.5px/1.2 var(--cc-font-soft); color: var(--cc-soft);
  box-shadow: var(--cc-shadow-card);
}
.cc-landing-liq b { font: 700 13px/1 var(--cc-font); color: var(--cc-ink); }
.cc-liq-dot { background: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.cc-landing-foot { margin-top: 36px; }
.cc-landing-foot .cc-btn.lg { font: 600 14.5px/1 var(--cc-font); padding: 12px 22px; }

/* Landing mobile — comfortable at 375px. */
@media (max-width: 640px) {
  .cc-landing-top { padding: 16px 18px 4px; }
  .cc-herobig { padding: 36px 22px; }
  .cc-herobig h1 { font-size: 29px; }
  .cc-landing-projects { padding: 30px 18px 60px; }
}

/* TourDetail — hcard stack: kicker + title hero, routing + positions. */
.cc-tourd-card {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  padding: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--cc-shadow-card);
}
.cc-tourd-kick {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 9px;
  font: 700 9.5px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx); background: var(--surf); border: 1px solid var(--brd);
  border-radius: 6px; padding: 4px 8px;
}
.cc-tourd .cc-pname h1 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; color: var(--cc-ink); }
.cc-tourd .cc-status { font-family: var(--cc-font-soft); font-weight: 600; }
.cc-tourd-meta { margin: 10px 0 0; font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-soft); }
.cc-tourd-artist { color: var(--tx); font-weight: 600; cursor: pointer; }
.cc-tourd-artist:hover { text-decoration: underline; }
.cc-tourd-cols { margin-top: 0; }
.cc-tourd-cols .cc-tourd-card { margin-bottom: 0; }
.cc-tourd-card h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 700 15px/1.2 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink);
}
.cc-tourd-card h3 .n {
  font: 700 10.5px/1 var(--cc-font); color: var(--tx);
  background: var(--surf); border: 1px solid var(--brd);
  border-radius: var(--cc-radius-pill); padding: 4px 8px;
}
.cc-tourd .cc-rail-line { font: 500 12.5px/1.45 var(--cc-font-soft); padding: 8px 0; border-bottom-color: var(--cc-line-soft); }
.cc-tourd .cc-rail-line b { font: 600 12.5px/1.4 var(--cc-font); color: var(--cc-ink); }
.cc-tourd .cc-rail-line .k { color: var(--cc-muted); }
.cc-tourd-empty { font: 500 12.5px/1.5 var(--cc-font-soft); color: var(--cc-faint); padding: 4px 0; }
/* Open-position rows — quiet white rows that light up on hover. */
.cc-tourd-pos {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 2px; border: 0; background: none; cursor: pointer;
  border-bottom: 1px solid var(--cc-line-soft); color: var(--cc-faint);
}
.cc-tourd-pos:last-of-type { border-bottom: 0; }
.cc-tourd-pos-ic {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--cc-surface-2); border: 1px solid var(--cc-line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--cc-faint);
}
.cc-tourd-pos:hover .cc-tourd-pos-ic { background: var(--surf); border-color: var(--brd); color: var(--tx); }
.cc-tourd-pos-id { flex: 1; min-width: 0; line-height: 1.3; }
.cc-tourd-pos-id .r { display: block; font: 600 13.5px/1.2 var(--cc-font); color: var(--cc-ink); }
.cc-tourd-pos-id .v { display: block; font: 600 12px/1.3 var(--cc-font); color: var(--cc-muted); margin-top: 2px; }

/* Placeholder — board-style header; the empty state floats as a card. */
.cc-phv .cc-hdr h2 { font: 700 22px/1.15 var(--cc-font); letter-spacing: -.02em; }
.cc-phv .cc-state {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  padding: 44px 20px;
  box-shadow: var(--cc-shadow-card);
}
.cc-landing-projects > .cc-state {
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 20px;
  padding: 44px 20px;
  box-shadow: var(--cc-shadow-card);
}

/* ============================================================
   Phase 2: mobile fixes (final verification pass)
   ------------------------------------------------------------
   1) The Phase-2 .cc-disc base rule (pill radius) sits later in the
      file than the legacy ≤760px stack rule, so phones kept the 999px
      radius on a stacked column (an ellipse). Re-assert the stacked
      treatment at Phase-2 position.
   2) .cc-disc-hero .cc-disc-go (0,2,0) out-specifies the mobile
      width:100% (0,1,0) — the Search CTA stayed a 52px circle with
      its label spilling out. Match the specificity here.
   3) The Phase-1 top bar's Create button + ⌘K badge aren't covered by
      the legacy ≤640px collapse block and pushed the bar to ~460px on
      a 375px phone. Icon-only Create + hide the kbd hint.
   ============================================================ */
@media (max-width: 760px) {
  .cc-disc, .cc-disc-hero .cc-disc { border-radius: 22px; padding-right: 6px; }
  .cc-disc-seg, .cc-disc-seg:first-child { border-radius: 14px; }
  /* Stacked: the inset vertical divider becomes a horizontal hairline
     (the legacy stack block's border-top). */
  .cc-disc-seg + .cc-disc-seg::before { display: none; }
  .cc-disc-seg + .cc-disc-seg { border-top: 1px solid var(--cc-line); }
  .cc-disc-go, .cc-disc-hero .cc-disc-go {
    width: 100%; height: 46px; border-radius: var(--cc-radius-md);
    margin: 8px 0 0; align-self: stretch;
  }
}
@media (max-width: 640px) {
  .cc-search-kbd { display: none; }
  .cc-topcreate {
    font-size: 0; gap: 0; flex-shrink: 0;
    width: 38px; height: 38px; padding: 0; justify-content: center;
  }
  /* The Phase-1 .cc-top base (gap:13px) also out-positions the legacy
     ≤640px compaction — re-assert the tight bar here. */
  .cc-top { gap: 8px; padding: 0 10px; }
  /* Sweep #9: the reskin's unconditional `.cc-top .cc-chip` rule (padding:
     4px 11px 4px 5px, no media query) sits AFTER the legacy ≤640px
     compaction in source order, so on identical specificity it silently
     won and re-widened the chip on every phone — the root cause of the
     header overflowing the viewport (measured 423 vs 375 with the crew
     persona's extra credits pill in the bar). Re-assert the tight padding
     here (after both), and drop the purely-decorative chevron — the whole
     chip is already a tap target, the arrow cost ~22px it can't spare. */
  .cc-top .cc-chip { padding: 4px 6px; gap: 6px; }
  .cc-top .cc-chip > i { display: none; }
}
@media (max-width: 400px) {
  /* Tightest phones: the bar is still ~20-30px over budget at 375-390
     with every icon (search/credits/theme/create/messages/bell/persona)
     plus the crew persona's credits pill — trim gap and outer padding a
     little further rather than dropping any affordance. */
  .cc-top { gap: 4px; padding: 0 8px; }
  /* A DRILL-IN page (Settings, Post, the wizard, …) adds one more icon — the
     back arrow (.cc-topicon.cc-topback) — that the budget above didn't
     account for (the probe's own /gigs, /events, /home pass only exercise
     the no-back-button top-level routes). Shrink the shared 38px icon-button
     family (back arrow, theme palette, create, bell/envelope) a few px each;
     across 3-4 of them that's the rest of the deficit, still comfortably
     tappable. */
  .cc-topicon, .cc-bell, .cc-topcreate { width: 33px; height: 33px; }
}

/* ── Phase 3: Bookings lifecycle ── */
/* Pending-offer actions on a booking row (Accept / Decline / Withdraw).
   Sits inline after the status pill; buttons never wrap mid-label. */
.cc-bk-acts { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.cc-bk-acts .cc-btn { white-space: nowrap; }
.cc-bk-acts .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  font-family: var(--cc-font); font-weight: 600;
}
.cc-bk-acts .cc-btn.primary:hover { background: var(--cc-grad-accent); filter: brightness(1.05); }
.cc-bk-acts .cc-btn:disabled { opacity: .55; cursor: default; }

/* BookOfferModal — the direct-offer terms form in the shared .cc-modal skin;
   Send offer = the modal's single gradient CTA (mirrors .cc-bkcm/.cc-bkdm). */
.cc-bkof { max-width: 520px; }
.cc-bkof .cc-checks { margin-bottom: 16px; }
.cc-bkof .cc-btn.primary {
  background: var(--cc-grad-accent); border: 0; color: #fff;
  font-family: var(--cc-font); font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-bkof .cc-btn.primary:hover { background: var(--cc-grad-accent); filter: brightness(1.05); }
.cc-bkof .cc-btn.primary:disabled { filter: none; }

/* Mobile: the action pair gets its own full-width line under the status pill. */
@media (max-width: 640px) {
  .cc-bk-acts { display: flex; margin: 8px 0 0; }
  .cc-bk-acts .cc-btn { flex: 1; justify-content: center; }
}

/* ── Phase 3: Home feed ──────────────────────────────────
   Home is a feed again: the resurrected activity stream
   (FeedComposer / HomeFeed / FeedGigCard / AvailabilityModal)
   reskinned to the Phase-1 language — white hcards on the
   cream sheet, Schibsted headings, Onest body, accent as
   punctuation. FeedGigCard mirrors BoardGigCard's top row
   (avatar + name/byline | ago + rate) — .cc-jobpost-* below.
   ──────────────────────────────────────────────────────── */

/* Matched-for-you — folded to one compact strip above the stream. */
.cc-matchstrip { padding: 13px 16px 12px; }
.cc-matchstrip-head { display: flex; align-items: center; gap: 8px; }
.cc-matchstrip-lbl { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-faint); }
.cc-matchstrip-row { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.cc-matchstrip-row::-webkit-scrollbar { display: none; }
/* flex 1 0 auto + a readable floor (finding 12): chips GROW to share the
   row but never shrink below ~205px — when three don't fit, the row's own
   overflow-x scroll takes over instead of squeezing role names to "T…". */
.cc-matchchip { display: flex; align-items: center; gap: 9px; flex: 1 0 auto; min-width: 205px; max-width: 340px; text-align: left; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 12px; padding: 8px 11px; cursor: pointer; }
.cc-matchchip:hover { background: var(--surf); border-color: var(--brd); }
.cc-matchchip-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--cc-surface); border: 1px solid var(--cc-line); display: flex; align-items: center; justify-content: center; color: var(--cc-faint); flex-shrink: 0; }
.cc-matchchip:hover .cc-matchchip-ic { color: var(--tx); border-color: var(--brd); }
.cc-matchchip-id { flex: 1; min-width: 0; line-height: 1.25; }
.cc-matchchip-id .n { display: block; font: 600 12.5px/1.2 var(--cc-font); color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-matchchip-id .s { display: block; font-size: 10.5px; color: var(--cc-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-matchchip .cc-price { font: 700 11.5px/1 var(--cc-font); letter-spacing: 1px; flex-shrink: 0; }
/* Hirer flavour of the strip chip: the right-side stat is the applicant
   count (persona-correct home, finding 7) — plain ink, not accent. */
.cc-matchchip-apps { font: 700 13px/1 var(--cc-font); color: var(--cc-ink); flex-shrink: 0; }

/* The stream column. */
.cc-feedstream { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cc-fcard { padding: 4px 18px; }
.cc-fcard .cc-post { border-bottom: 0; }

/* Composer — "What are you working on?" */
.cc-create { display: flex; flex-direction: column; gap: 12px; }
.cc-create-top { display: flex; align-items: center; gap: 12px; }
.cc-create-top .cc-avatar { flex-shrink: 0; font-family: var(--cc-font); }
.cc-create-in { flex: 1; min-width: 0; border: 1px solid transparent; background: var(--cc-surface-2); border-radius: 999px; padding: 12px 16px; font: 500 13.5px/1 var(--cc-font-soft); color: var(--cc-ink); }
.cc-create-in::placeholder { color: var(--cc-ph); }
.cc-create-in:focus { outline: none; background: var(--cc-surface); border-color: var(--cc-line); box-shadow: 0 1px 3px rgba(45,38,28,.06); }
.cc-create .cc-create-top .cc-btn.primary { background: var(--cc-grad-accent); border: 0; border-radius: 999px; padding: 11px 18px; font: 600 13px/1 var(--cc-font); box-shadow: 0 10px 22px -10px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.25); }
.cc-create .cc-create-top .cc-btn.primary:hover { filter: brightness(1.05); background: var(--cc-grad-accent); }
.cc-create .cc-create-top .cc-btn.primary:disabled { background: var(--cc-surface-2); color: var(--cc-muted); box-shadow: none; filter: none; }
.cc-create-media { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-create-thumb { position: relative; width: 66px; height: 66px; border-radius: 12px; overflow: hidden; border: 1px solid var(--cc-line); }
.cc-create-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-create-thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.62); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cc-create-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border-top: 1px solid var(--cc-line-soft); padding-top: 12px; }
.cc-create-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 999px; padding: 9px 14px; font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft); cursor: pointer; }
.cc-create-chip:hover { color: var(--tx); background: var(--surf); border-color: var(--brd); }
.cc-create-chip i { color: var(--tx); }
.cc-create-up { display: inline-flex; }
.cc-create-up .cc-up { display: inline-block; }
.cc-create-up .cc-drop { min-height: 0; padding: 9px 14px; border-radius: 999px; flex-direction: row; gap: 7px; font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-surface-2); border: 1px solid var(--cc-line); }
.cc-create-up .cc-drop:hover { background: var(--cc-chip); color: var(--cc-ink); }

/* ── PhotoPicker (Tomas 2026-07-15) ──
   The shared multi-photo intake (composer + job wizard). The composer's
   camera icon fades in when the box is focused or holds anything; it holds
   its 38px slot the whole time so the row never jumps. Monochrome — the
   accent stays money-or-go. */
.cc-create-cam {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px; border: 0; background: none;
  color: var(--cc-soft); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.cc-create-cam.show { opacity: 1; pointer-events: auto; }
.cc-create-cam:hover { background: var(--cc-surface-2); color: var(--cc-ink); }
.cc-create-cam.on { background: var(--cc-surface); color: var(--cc-ink); border: 1px solid var(--cc-line); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cc-photopick { display: flex; flex-direction: column; gap: 8px; }
.cc-pick-zone { flex-direction: row; gap: 8px; min-height: 0; padding: 12px 14px; font: 600 12.5px/1.3 var(--cc-font-soft); }
.cc-create-thumb.cc-pick-busy img { opacity: .55; }
.cc-pick-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cc-ink); }

/* Feed controls — All / Jobs pills + sort. Active = raised white, like the
   home Overview/Activity toggle (accent stays punctuation). */
.cc-feedctl { display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; }
.cc-feedctl-seg { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: 0 1px 2px rgba(45,38,28,.05); }
.cc-feedctl-seg:hover { color: var(--cc-ink); }
.cc-feedctl-seg.on { background: var(--cc-surface); border-color: var(--cc-line); color: var(--cc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cc-feedctl-sort { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--cc-faint); font-size: 12.5px; }
.cc-feedctl-sort select { border: 1px solid var(--cc-line); border-radius: 10px; background: var(--cc-surface); padding: 8px 10px; font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-ink); cursor: pointer; box-shadow: 0 1px 2px rgba(45,38,28,.05); }

/* Job post in the stream — reskinned 2026-07-14 (punch list: de-pill +
   poster identity). Mirrors BoardGigCard's top row (avatar + name/byline |
   time-ago + rate), composed title, then ONE quiet plain-text meta line —
   no chips, no accent frame. Monochrome card; accent lives ONLY on the
   View & apply CTA (money-or-go). */
.cc-jobpost {
  position: relative; cursor: pointer; padding: 14px 16px 13px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cc-jobpost:hover { border-color: var(--cc-faint); }
.cc-jobpost-head { display: flex; align-items: center; gap: 10px; }
.cc-jobpost-id { flex: 1; min-width: 0; }
.cc-jobpost-name { font: 700 13px/1.2 var(--cc-font); color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-jobpost-byline { font: 500 11.5px/1.3 var(--cc-font-soft); color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-jobpost-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.cc-jobpost-ago { font: 500 11px/1 var(--cc-font-soft); color: var(--cc-faint); }
.cc-jobpost-ttl { font: 500 15px/1.4 var(--cc-font-soft); color: var(--cc-ink); margin: 10px 0 0; letter-spacing: -.005em; }
.cc-jobpost-ttl b { font-family: var(--cc-font); font-weight: 700; }
.cc-jobpost-meta { margin-top: 5px; font: 500 12px/1.5 var(--cc-font-soft); color: var(--cc-muted); }
.cc-jobpost-desc { margin-top: 8px; font: 400 13px/1.55 var(--cc-font-soft); color: var(--cc-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-jobpost-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--cc-line-soft); }
.cc-jobpost-footmeta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 600 12px/1 var(--cc-font-soft); color: var(--cc-muted); }
/* Flat accent CTA — no gradient/big shadow; tracks the admin-set --cc-accent. */
.cc-jobpost .cc-btn.primary.sm { background: var(--cc-accent); border: 0; border-radius: 8px; padding: 9px 16px; font: 600 12.5px/1 var(--cc-font); box-shadow: none; color: #fff; }
.cc-jobpost .cc-btn.primary.sm:hover { filter: brightness(.94); background: var(--cc-accent); }
[data-theme="midnight"] .cc-jobpost { background: var(--cc-chrome); }
[data-theme="midnight"] .cc-jobpost:hover { border-color: var(--cc-chrome-line); }

/* Availability feed card ("post where you'll be") — rides on .cc-jobpost's
   header/desc classes; only the place/dates line + role chips are new.
   Place is the ONLY uppercase text here (dates stay normal-case, tabular
   via .cc-num) — monochrome throughout, no accent tint. */
.cc-availcard-place { margin-top: 10px; font: 500 12.5px/1.5 var(--cc-font-soft); color: var(--cc-muted); }
.cc-availcard-loc { text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: var(--cc-ink); }
.cc-availcard-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Manager browse ("Who's around" — CC.views.AvailabilityBrowse). Filter bar
   is a plain wrapping flex row (same contract as every other browse filter
   bar in this app: labels stay, controls just wrap on their own line rather
   than shrinking or clipping); toggles reuse .cc-f.toggle verbatim (already
   monochrome — .on fills solid --cc-chrome, no accent). */
.cc-availb-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.cc-availb-filters .cc-field { margin-bottom: 0; width: 230px; max-width: 100%; }
.cc-availb-toggles { display: flex; gap: 8px; padding-bottom: 1px; }
.cc-availrow .cc-l2 span { white-space: nowrap; }

/* Owner-only "Your availability" card (CrewProfile's MyAvailabilityCard) —
   one row per active post, delete-only (no edit route). */
.cc-myavail-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--cc-line-soft); }
.cc-myavail-row:first-of-type { border-top: 0; }
.cc-myavail-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; min-width: 0; }
.cc-myavail-roles { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-muted); }

/* Narrow screens: controls wrap; matched chips scroll inside the strip. */
@media (max-width: 640px) {
  .cc-create-top { gap: 9px; }
  .cc-create-in { padding: 11px 13px; }
  .cc-feedctl { flex-wrap: wrap; }
  .cc-matchchip { flex: 0 0 auto; min-width: 205px; }
  .cc-jobpost-foot { flex-wrap: wrap; }}

/* ============================================================
   Phase 3c: the home context rail is a RECESSED ZONE, not a stack
   of floating cards (Tomas: differentiate it from the feed). The
   rail column sits on a deeper warm panel; the profile card stays
   the one white card (your identity floats), and the sections
   below it go FLAT — separated by hairlines, inheriting the panel.
   ============================================================ */
.cc-home-rail {
  background: var(--cc-chip);
  border: 1px solid var(--cc-line);
  border-radius: 20px;
  padding: 12px;
  gap: 0;
  align-self: flex-start;
}
/* The identity card keeps its float; everything after it flattens. */
.cc-home-rail > .cc-rprofile { margin-bottom: 6px; }
.cc-home-rail > .cc-rc {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 14px 6px 12px;
}
.cc-home-rail > .cc-rc + .cc-rc { border-top: 1px solid var(--cc-line); }
/* Flat rows inside the recessed zone: hairlines read against the panel. */
.cc-home-rail .cc-rc-row + .cc-rc-row { border-top-color: color-mix(in srgb, var(--cc-line) 60%, transparent); }
.cc-home-rail .cc-rc-ic { background: var(--cc-surface); }
.cc-home-rail .cc-week .cc-wday { background: var(--cc-surface); }
@media (max-width: 1080px) {
  /* Stacked mode: the rail children flow as a wrap-row inside the panel;
     hairline tops would strand mid-row — box them lightly instead. */
  .cc-home-rail > .cc-rc { border: 0; padding: 12px 8px; }
  .cc-home-rail > .cc-rc + .cc-rc { border-top: 0; }
}

/* ── Rail collapse (Tomas 2026-07-16, third take) ──
   The labeled "Show sidebar" head-row button is DEAD ("text icon is bad").
   Collapsed, the rail stays in the layout as a slim column with the expand
   arrow at its top; expanded, the same arrow sits on the LEFT edge of the
   panel's top bar. One always-rendered control, position carries the meaning.
   Desktop-only: the stacked ≤1080px layout always shows the rail in full.
   Preference persists per device (localStorage cc_rail_open). */
.cc-rail-bar { display: flex; justify-content: flex-start; padding: 0 0 8px; }
.cc-rail-collapse {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-soft);
}
.cc-rail-collapse:hover { border-color: var(--cc-ink); color: var(--cc-ink); }
@media (min-width: 1081px) {
  .cc-home-rail { transition: width .26s ease; }
  /* 54px = the 28px arrow + the panel's own 12px padding + 1px borders, so
     the collapsed state reads as the same grey panel, just slim. */
  .cc-home-rail.collapsed { width: 54px; min-width: 0; }
  /* The cards drop out entirely (and with them, out of the a11y tree);
     only the top bar with the expand arrow remains in the slim column. */
  .cc-home-rail.collapsed > :not(.cc-rail-bar) { display: none; }
  .cc-home-rail.collapsed .cc-rail-bar { justify-content: center; padding: 0; }
}
@media (max-width: 1080px) {
  /* Stacked mode always shows the full rail — no collapse affordance. */
  .cc-rail-bar { display: none; }
}

/* ── Phase 3b: booking transitions ── */
/* Armed "Cancel booking?" state: the first click flips the faint Cancel into
   this danger-tinted confirm for 4s; the second click actually cancels. */
.cc-bk-acts .cc-btn.cc-bk-armcancel { color: var(--cc-danger-ink); background: var(--cc-danger-bg); border-color: var(--cc-danger-ink); font-weight: 700; }
.cc-bk-acts .cc-btn.cc-bk-armcancel:hover { color: var(--cc-danger-ink); background: var(--cc-danger-bg); filter: brightness(.97); }

/* ── Phase 3b: load more ── */
.cc-showmore { width: 100%; justify-content: center; margin-top: 16px; padding: 11px 14px; color: var(--cc-soft); }
.cc-showmore:disabled { opacity: .6; cursor: default; }

/* ── Phase 3c: gig moderation ── */
/* Reports queue: gig-target action group (Unlist / Close / Restore) sits ahead
   of the generic Resolve / Dismiss pair, separated by a hairline divider. */
.cc-gigmod-acts { display: inline-flex; gap: 4px; margin-right: 8px; padding-right: 8px; border-right: 1px solid var(--cc-line); }

/* ═══════════════════════════════════════════════════════════════════════════
   TEXT-BOX CONTRACT · global safety net
   Every interactive control must fully enclose its text at any viewport width,
   font-size, and content length — a label may truncate, but it must never
   escape, clip, or shove its neighbours out of the row. This block bakes the
   contract into whole CATEGORIES of control so new ones inherit it instead of
   being fixed one at a time. Structural only (no colour/font — those stay in
   tokens.css). Enforced automatically by `npm run probe` (scripts/probe-run.js).
   Full rationale + the four-layer audit: docs/TEXT-BOX-CONTRACT.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · An icon inside a control never gets squashed — the label yields, never the
      glyph. Covers every Tabler icon in a button/link/tab, present and future. */
button > i[class*="ti-"], a > i[class*="ti-"],
[role="button"] > i[class*="ti-"], [role="tab"] > i[class*="ti-"],
.cc-btn > i, .cc-btn > svg { flex-shrink: 0; }

/* 2 · Pills that carry a variable-length label may shrink below their content so
      the LABEL truncates rather than the pill overflowing its row. NOTE: this is
      deliberately NOT applied to .cc-btn — an ACTION button must hold its size and
      let its NEIGHBOUR yield (give the neighbour .cc-truncate), never shrink and
      clip its own label ("Remove" → "Remo…"). Intent lives per-control, which is
      why the probe (not a blanket rule) is the real enforcement. */
.cc-reqchip { min-width: 0; }

/* 3 · The label quartet as a reusable class. Put it on the text span inside any
      flex control whose label is variable-length (names, titles, cities). A bare
      text node CANNOT be truncated by CSS — the label must be wrapped in this.
      display:inline-block is load-bearing, not decorative: text-overflow/
      max-width are no-ops on the default `inline` box a bare <span> renders as
      (clientWidth reads 0 — verified against real usage, PostGig's "Who can
      see this job" Seg, before this line existed here), so without it the
      "quartet" silently does nothing and the label just overflows unclipped. */
.cc-truncate { display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }