/* ── Feed: composer + multimedia posts ── */

.cc-post-media { display: grid; gap: 4px; margin-top: 10px; border-radius: var(--cc-radius-md); overflow: hidden; }
.cc-post-media.n1 { grid-template-columns: 1fr; }
.cc-post-media.n2, .cc-post-media.n3, .cc-post-media.n4 { grid-template-columns: 1fr 1fr; }
.cc-post-img { position: relative; display: block; min-width: 0; }
.cc-post-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; background: var(--cc-surface-2); }
.cc-post-media.n1 .cc-post-img img { aspect-ratio: 16 / 10; max-height: 460px; }
.cc-post-media.n3 .cc-post-img:first-child { grid-row: span 2; }
.cc-post-media.n3 .cc-post-img:first-child img { aspect-ratio: auto; height: 100%; }
/* Pin-to-portfolio overlay button (working-mode only). Hidden until hover. */
.cc-pin-btn { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--cc-font); padding: 5px 9px; border-radius: var(--cc-radius-pill); border: 0; cursor: pointer; background: rgba(20,20,22,.74); color: #fff; opacity: 0; transition: opacity .12s; backdrop-filter: blur(3px); }
.cc-post-img:hover .cc-pin-btn { opacity: 1; }
.cc-pin-btn:hover { background: rgba(20,20,22,.9); }
.cc-pin-btn.on { opacity: 1; background: var(--cc-accent); }
.cc-pin-btn:disabled { cursor: default; }
.cc-post-video { margin-top: 10px; border-radius: var(--cc-radius-md); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.cc-post-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Profile strength meter (owner-only) + portfolio freshness banner */
.cc-meter h3 { justify-content: flex-start; }
.cc-meter-pct { margin-left: auto; font: 700 13px/1 var(--cc-font); font-variant-numeric: tabular-nums; }
.cc-meter-pct.good { color: var(--cc-accent); }
.cc-meter-pct.mid { color: var(--cc-warn-ink); }
.cc-meter-pct.low { color: var(--cc-danger-ink); }
.cc-meter-bar { height: 7px; border-radius: var(--cc-radius-sm); background: var(--cc-surface-2); overflow: hidden; }
.cc-meter-bar .fill { display: block; height: 100%; border-radius: var(--cc-radius-sm); background: var(--cc-accent); transition: width .3s ease; }
.cc-meter-bar .fill.mid { background: var(--cc-warn-ink); }
.cc-meter-bar .fill.low { background: var(--cc-danger-ink); }
.cc-meter-stale { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; font-size: 12.5px; color: var(--cc-soft); }
.cc-meter-stale .ti { color: var(--cc-warn-ink); margin-top: 1px; flex-shrink: 0; }
.cc-meter-tips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.cc-meter-tip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: var(--cc-radius-pill); background: var(--cc-surface-2); color: var(--cc-soft); }
.cc-fresh-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 14px; border-radius: var(--cc-radius-md); background: var(--cc-chip); border: 1px solid var(--cc-line); }
.cc-fresh-banner > .ti { color: var(--cc-ink); margin-top: 1px; flex-shrink: 0; }
.cc-fresh-banner b { display: block; font-size: 13.5px; color: var(--cc-ink); margin-bottom: 2px; }
.cc-fresh-banner span { font-size: 12.5px; color: var(--cc-soft); line-height: 1.4; }

/* Event detail hero banner */

/* Hero artwork rides the same .cc-evimg fade layer as the board cards. */
.cc-evhero-img { position: relative; overflow: hidden; background-color: var(--cc-chrome); min-height: 190px; padding: 16px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.cc-evhero-img h1 { position: relative; font-size: 30px; font-weight: 800; letter-spacing: -.025em; color: #fff; line-height: 1.05; }
.cc-evhero-img .cc-evcard-kind { position: relative; align-self: flex-start; }
.cc-evhero-meta { padding: 13px 20px; }

/* Combobox dropdown (search bar role / where) */
.cc-combo { position: relative; width: 100%; }
/* isolation + will-change: on a single-column mobile stack, an open combo menu
   (RolePicker/EventPicker/SkillPicker/MetroPicker all share this shell) can sit
   directly above a native <select> a few px below the field it's attached to —
   the exact same "control I didn't mean to raise ends up painted on top of a
   floating panel" class of bug .cc-split2-list's `isolation: isolate` fixed for
   the card-grid-vs-modal case (see that comment). `isolation: isolate` pins this
   menu's z-index to its OWN local stacking context so nothing outside it can
   contest paint order, and `will-change: transform` promotes it to its own
   compositor layer so it can never lose to a native form control's OS-widget
   paint path (some engines composite unstyled <select>/<input type=date> above
   ordinary z-indexed content regardless of z-index — this sidesteps that
   entirely rather than relying on a z-index arms race). */
.cc-combo-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; max-width: 320px; max-height: 300px; overflow-y: auto; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); box-shadow: 0 14px 36px rgba(20,18,12,.16); z-index: 60; padding: 6px; isolation: isolate; will-change: transform; }
.cc-combo-opt { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--cc-radius-sm); padding: 9px 12px; font: 500 13.5px/1.2 var(--cc-font-soft); color: var(--cc-ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-combo-opt:hover, .cc-combo-opt.hi { background: var(--cc-surface-2); }

/* RolePicker — searchable, department-grouped role taxonomy. Reuses the cc-combo
   shell; adds sticky department headers + a "use custom" affordance.
   cc-rolemenu itself no longer scrolls — it only clips to the rounded card
   (overflow: hidden, no padding of its own). cc-rolemenu-scroll, an inner div,
   owns overflow-y:auto + the 6px padding and is the ACTUAL scrolling ancestor
   cc-role-dept sticks within. Scrolling and rounded-corner clipping on the same
   element is what let Chrome occasionally paint scrolled-past rows outside the
   card's rounded top edge / behind-but-visible around the sticky header; giving
   scroll and clip separate boxes removes the combination that triggers it. */
.cc-rolepick input { width: 100%; }
.cc-rolemenu { min-width: 280px; max-width: 340px; max-height: 340px; overflow: hidden; padding: 0; }
.cc-rolemenu-scroll { overflow-y: auto; max-height: inherit; padding: 6px; }
@media (max-width: 640px) { .cc-rolemenu { min-width: 0; max-width: none; right: 0; } }
.cc-role-grp + .cc-role-grp { margin-top: 2px; }
/* top:-6px + the extra 6px of padding-top below pulls the sticky header up to
   cover cc-rolemenu-scroll's own 6px padding (its overflow scrollport clips at
   the padding edge, but sticky "top:0" was only pinning at the padding EDGE
   minus that same 6px — leaving a gap where scrolled-past options peeked
   through above the header). The 6px must match cc-rolemenu-scroll's padding.
   z-index bumped 1→2 for a wider safety margin over the (unpositioned) option
   rows. */
.cc-role-dept { position: sticky; top: -6px; z-index: 2; background: var(--cc-surface); padding: 14px 12px 4px; font: 700 10.5px/1 var(--cc-font-soft); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-muted); }
.cc-role-opt { display: flex; align-items: center; gap: 8px; }
.cc-role-opt .cc-role-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-role-custom { display: flex; align-items: center; gap: 7px; color: var(--cc-accent-ink); font-weight: 600; border-bottom: 1px solid var(--cc-line); border-radius: 0; margin-bottom: 4px; }
.cc-role-custom .ti { color: var(--cc-accent); }

/* RolesPicker3 (ROLES x3) — 1 primary RolePicker + up to 2 secondary rows,
   each removable. Plain stacked fields, same gap rhythm as .cc-fgroup. */
.cc-roles3 { display: flex; flex-direction: column; gap: 8px; }
.cc-roles3-row { display: flex; align-items: center; gap: 6px; }
.cc-roles3-row .cc-rolepick { flex: 1 1 auto; min-width: 0; }
.cc-roles3-add { align-self: flex-start; }

/* SkillPicker — chip multi-select. Selected = the monochrome .cc-f/.on
   selected-pill (black fill, white text), same recipe as filter chips —
   never a colored fill. Pending = dashed outline, no fill, "· pending"
   suffix (text only, no color-coding). */
.cc-skillpick { display: flex; flex-direction: column; gap: 8px; }
.cc-skillpick-chips:empty { display: none; }
.cc-skillpick-chip { cursor: pointer; gap: 6px; }
.cc-skillpick-chip:hover { filter: brightness(1.15); }
.cc-skillpick-pending { border-style: dashed; background: transparent; cursor: default; }
.cc-skillpick-input { width: 100%; }
.cc-skillpick-input .cc-combo-menu { max-height: 260px; }

/* EventPicker — same searchable shell as RolePicker, over the (smaller)
   events list. The "Other / not listed" escape row reuses .cc-role-custom. */
.cc-eventpick input { width: 100%; }
.cc-eventmenu { min-width: 280px; max-width: 360px; max-height: 320px; }
@media (max-width: 640px) { .cc-eventmenu { min-width: 0; max-width: none; right: 0; } }
.cc-eventpick-loc { color: var(--cc-faint); font-weight: 500; }
.cc-eventmenu-empty { padding: 10px 12px; font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-faint); }

/* Gig-card teaser: smooth gradient blur over the connect-details.
   Two stacked copies — a sharp one masked to fade OUT toward the bottom, and a
   blurred one masked to fade IN — so the details go from clear (just under the
   title) to fully blurred at the bottom. Uses filter:blur + mask (reliable
   inside the rounded/overflow cards, unlike backdrop-filter). */
/* Teaser fog: one continuous fade over the whole card body — sharp under the
   title, blurring more toward the bottom, then dissolving into opaque grey at
   the bottom edge (full width) so it reads as depth/curvature, not redaction.
   Two blurred copies (light on top, heavy below) + a grey veil to the edge. */
.cc-gc-fog { position: relative; }
.cc-gc-fog-light { filter: blur(2.5px); -webkit-filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 6%, transparent 64%); mask-image: linear-gradient(to bottom, #000 0%, #000 6%, transparent 64%); }
.cc-gc-fog-heavy { position: absolute; inset: 0; pointer-events: none; filter: blur(8px); -webkit-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 82%); mask-image: linear-gradient(to bottom, transparent 28%, #000 82%); }
.cc-gc-fog-veil { position: absolute; left: -13px; right: -13px; bottom: -12px; height: 82%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(243,241,236,0) 0%, rgba(243,241,236,.55) 55%, var(--cc-surface-2) 100%); }

/* Home: browse-all entry cards (under the relevant-gig rails) */

/* Standalone logged-out landing (no app shell, no browse) */
.cc-landing { flex: 1; width: 100%; min-width: 0; min-height: 100vh; background: var(--cc-canvas); }
.cc-landing-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 18px 32px; }
.cc-landing-top .cc-wm { font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--cc-ink); }
.cc-landing-top .cc-wm .dot { color: var(--cc-accent); }
.cc-landing-actions { display: flex; gap: 10px; align-items: center; }
.cc-landing-hero { max-width: 1120px; margin: 0 auto; padding: 4px 32px 0; }
.cc-landing-projects { max-width: 1120px; margin: 0 auto; padding: 44px 32px 90px; text-align: center; }
.cc-landing-projhead h2 { font-size: 27px; font-weight: 700; letter-spacing: -.025em; }
.cc-landing-projhead p { color: var(--cc-soft); font-size: 14.5px; font-family: var(--cc-font-soft); margin: 8px 0 18px; }
.cc-landing-liq { display: inline-flex; align-items: center; gap: 9px; margin: 0 auto 28px; padding: 6px 14px; border: 1px solid var(--cc-line); border-radius: 999px; background: var(--cc-surface-2); color: var(--cc-soft); font-size: 13px; }
.cc-landing-liq b { color: var(--cc-ink); font-weight: 700; }
.cc-landing-liq .cc-liq-sep { color: var(--cc-faint); }
.cc-liq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent) 22%, transparent); flex-shrink: 0; }
.cc-landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; max-width: none; margin: 0 auto; text-align: left; }
.cc-landing-foot { margin-top: 40px; }
@media (max-width: 760px) { .cc-landing-top, .cc-landing-hero, .cc-landing-projects { padding-left: 18px; padding-right: 18px; } }

/* Home "Create" card (composer + quick-create chips) */

.cc-avail-preview { background: var(--cc-surface-2); border-radius: var(--cc-radius-md); padding: 11px 13px; font: 500 13.5px/1.4 var(--cc-font-soft); color: var(--cc-ink); }
/* Sidebar relevant-gig links + "browse all" */

/* Inline profile editing (own profile, public layout) */
.cc-pedit { display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.cc-pedit-name { font-size: 18px; font-weight: 700; }
.cc-strip .cc-cell input.cc-input { max-width: 120px; }

/* Post-a-tour (CSV batch) */

.cc-tour-steps { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 14px; }
.cc-tour-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--cc-soft); font-family: var(--cc-font-soft); flex-wrap: wrap; }
.cc-tour-steps .n { width: 22px; height: 22px; border-radius: 50%; background: var(--cc-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--cc-font); flex-shrink: 0; }
.cc-tour-steps code { background: var(--cc-surface-2); border-radius: var(--cc-radius-sm); padding: 2px 6px; font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-ink); }
.cc-filebtn { display: inline-flex; align-items: center; gap: 7px; background: var(--cc-surface-2); border-radius: var(--cc-radius-pill); padding: 8px 14px; cursor: pointer; font: 600 13px/1 var(--cc-font-soft); }
.cc-filebtn:hover { background: var(--cc-chip); }
.cc-err { display: flex; align-items: center; gap: 7px; color: var(--cc-danger-ink); background: var(--cc-danger-bg); border-radius: var(--cc-radius-md); padding: 9px 12px; margin-top: 12px; font-size: 13px; }
.cc-tbl-wrap { overflow-x: auto; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); }

/* Price tier ($–$$$$$) — public stand-in for a private day rate */
.cc-price { font: 700 16px/1 var(--cc-font); letter-spacing: 1.5px; color: var(--cc-faint); }
.cc-price.big { font-size: 20px; }
.cc-price .on { color: var(--cc-accent-ink); }
.cc-price.muted { font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-muted); letter-spacing: 0; }
/* Gig BUDGET in real dollars (a range when min≠max) — job posts show numbers,
   never a $-tier. Crew rates are the opposite (the $-tier band, via .cc-price). */
.cc-money { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap;
  font: 700 14px/1 var(--cc-font); color: var(--cc-ink); font-variant-numeric: tabular-nums; }
.cc-money small { font: 500 10px var(--cc-font-soft); color: var(--cc-muted); }
.cc-money.sm { font-size: 13px; }
.cc-money.md { font-size: 15.5px; }
.cc-money.lg { font-size: 24px; letter-spacing: -.02em; }
.cc-money.lg small { font-size: 12px; }
.cc-money.tbd { font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-muted); }
/* Day-rate budget: a real dollar range (min–max). Crew see the range via
   GigDollars/fmtRate; logged-out visitors see it redacted. */
.cc-raterange { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-raterange-in { position: relative; display: inline-flex; align-items: center; flex: 1; min-width: 120px; }
.cc-raterange-sym { position: absolute; left: 12px; font: 600 14px/1 var(--cc-font); color: var(--cc-faint); pointer-events: none; }
/* padding-left leaves clear daylight after the $ glyph (~12px + its own width) so
   the first digit never tucks up against it — was 22px, which read as "$,200"
   instead of "$1,200" (sweep #6). */
.cc-raterange-in .cc-input { width: 100%; padding-left: 30px; }
.cc-raterange-in .cc-input::-webkit-outer-spin-button, .cc-raterange-in .cc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc-raterange-to { font: 500 12.5px/1 var(--cc-font); color: var(--cc-faint); flex: 0 0 auto; }
.cc-raterange-unit { font: 600 13px/1 var(--cc-font); color: var(--cc-muted); flex: 0 0 auto; }
/* Validation state (sweep #6): Next on an empty rate must be visibly rejected,
   not a silent no-op — a red field outline alongside the RATE_ERR copy below. */
.cc-raterange-in.cc-input-invalid .cc-input { border-color: var(--cc-danger-ink); }
.cc-raterange-in.cc-input-invalid .cc-input:focus { box-shadow: 0 0 0 3px var(--cc-danger-bg); }
/* One-box Budget (step 2, Tomas 2026-07-15): a single figure OR a range in one
   field. The input carries the border; the per-day/hour unit rides after it,
   greyed and inert (same visual language as .cc-raterange-unit). */
.cc-budgetbox { display: flex; align-items: center; gap: 8px; }
.cc-budgetbox .cc-input { flex: 1; min-width: 0; }
.cc-budgetbox-unit { font: 600 13px/1 var(--cc-font); color: var(--cc-muted); flex: 0 0 auto; }
.cc-budgetbox.cc-input-invalid .cc-input { border-color: var(--cc-danger-ink); }
.cc-budgetbox.cc-input-invalid .cc-input:focus { box-shadow: 0 0 0 3px var(--cc-danger-bg); }
.cc-budgethint { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-faint); margin-top: 5px; }
/* DateField (Tomas 2026-07-17 overlay rewrite — see the component in
   views.js for the why): a real <input type="date"> sits permanently on top
   of the styled text display, invisible (opacity 0, not display/visibility —
   iOS won't open a picker for either of those) so a tap/click lands on the
   genuine control. Any className the caller passes (e.g. "cc-input") lands
   on THIS wrapper — that's what gives it the border/padding/background/width
   of a normal boxed field in every layout that already targets that class. */
input[readonly].cc-input, .cc-disc-when input[readonly] { cursor: pointer; }
.cc-datefield { position: relative; cursor: pointer; }
.cc-datefield-disp { display: block; width: 100%; border: 0; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; outline: none; cursor: pointer; }
.cc-datefield-disp::placeholder { color: var(--cc-ph); font-weight: 400; }
.cc-datefield-native { cursor: pointer; -webkit-appearance: none; appearance: none; }

/* Clickable feed post / comment author */
.cc-post-author { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; border-radius: var(--cc-radius-sm); }
.cc-post-author:hover .nm { text-decoration: underline; }
.cc-comment > a { flex-shrink: 0; line-height: 0; }
.cc-comment .cn:hover { text-decoration: underline; }
/* Profile avatar with inline "change photo" while editing */
.cc-pavatar { position: relative; flex-shrink: 0; width: 84px; height: 84px; }
.cc-pavatar.edit .cc-up { position: absolute; inset: 0; }
.cc-pavatar.edit .cc-drop { width: 84px; height: 84px; min-height: 0; border-radius: 50%; padding: 0; gap: 3px; background: rgba(0,0,0,.55); color: #fff; border: 2px dashed rgba(255,255,255,.65); }
.cc-pavatar.edit .cc-drop span { font-size: 10px; line-height: 1.15; text-align: center; max-width: 72px; }

/* ── Unified Airbnb split browser: Jobs + Events (Crew already used cc-split2) ── */
.cc-disc { max-width: 920px; }            /* search box centered (margin:auto) in the white space */
.cc-gigcard.sel, .cc-evcard.sel { outline: 2px solid var(--cc-chrome); outline-offset: 0; box-shadow: 0 4px 14px rgba(20,18,12,.10); }
.cc-evcard { width: 100%; }
.cc-evlist { grid-template-columns: 1fr; gap: 14px; }      /* events stack in the list column */
.cc-giglist { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* Embedded gig brief = single column inside the right panel */
.cc-embed-gig { padding: 2px; }
.cc-embed-gig .cc-gd { grid-template-columns: 1fr; gap: 0; }
.cc-embed-gig .cc-gd-rail { position: static; top: auto; }
/* Event panel (right side of the Events split + the full /events/:id page) */
.cc-evpanel { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden; }
.cc-evpanel .cc-evhero-img { min-height: 168px; }
.cc-evpanel-body { padding: 2px 18px 22px; }
.cc-evpanel-body .cc-evhero-meta { padding: 12px 0 2px; }
.cc-evpanel .cc-card { border: 0; background: transparent; box-shadow: none; padding: 0; margin-top: 18px; }

/* UX4 — demand signal (crew see managers staffing this event) + supply header
   (managers see available crew). Extends the existing accent-tint / cc-lz
   vocabulary — a soft accent pill, dense, monochrome + the one accent. */
.cc-demand-wrap { margin-top: 12px; }
.cc-demand { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--cc-accent-ink); background: var(--cc-accent-tint); border: 1px solid var(--cc-accent-border); border-radius: var(--cc-radius-md); padding: 6px 11px; cursor: pointer; text-align: left; }
.cc-demand:hover { border-color: var(--cc-accent); }
.cc-demand .cc-num { color: inherit; }
.cc-demand.quiet { color: var(--cc-muted); background: var(--cc-chip); border-color: transparent; cursor: default; }
.cc-crewsearch-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cc-crewsearch-hdr h3 { margin: 0; }
.cc-crewsearch-hdr .cc-lz { margin-left: auto; }
.cc-crewsearch-hdr .cc-lz .cc-num { color: inherit; }
.cc-hint.ok { color: var(--cc-ok-ink); display: flex; align-items: center; gap: 5px; }

/* Full-screen event page — one wide column, no split panel. The hop-strip is a
   single scrollable row of event chips (page body never scrolls sideways);
   selection uses only the accent family (no rainbow / colour stripe). */
.cc-evpage { max-width: 1060px; margin-inline: auto; padding: 0 4px 40px; }
.cc-evpage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.cc-evhop { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.cc-evhop::-webkit-scrollbar { height: 6px; }
.cc-evhop::-webkit-scrollbar-thumb { background: var(--cc-line); border-radius: 8px; }
.cc-evhop .cc-ev-chip { white-space: nowrap; flex: 0 0 auto; max-width: none; }
.cc-ev-chip.on { border-color: var(--cc-chrome); background: var(--cc-chrome); color: var(--cc-chrome-ink); }
.cc-ev-chip.on i, .cc-ev-chip.on .cc-num { color: var(--cc-chrome-ink); }
.cc-evnav { display: inline-flex; gap: 6px; align-items: center; }
.cc-evnav button:disabled { opacity: .4; cursor: default; }

/* ════════════════ MOBILE POLISH (phones) ════════════════ */
@media (max-width: 640px) {
  /* Top bar: compact the persona switcher to avatar + chevron (the name/role
     wrapped to 2-3 lines and ate the bar). */
  .cc-top .cc-chip .nm, .cc-top .cc-chip .md { display: none; }
  .cc-top .cc-chip { padding: 4px 6px; gap: 6px; }
  .cc-top { gap: 8px; }

  /* Search field would squash to ~0 width on a phone, so COLLAPSED it's a 36px
     magnifier button — same dark-chrome treatment as the notification bell. The
     input is hidden (not just zero-width) so it can't take stray focus/scroll
     while tucked away; tapping the square flips the .expanded class (set by the
     TopBar component), which reveals the input as an overlay across the bar and
     focuses it. Blur / Enter / Escape drop .expanded and it tucks back. */
  .cc-spacer { display: none; }
  /* Cancel the desktop wrap sizing/positioning: .cc-search.expanded overlays
     the WHOLE top bar (left:14px/right:14px below), which only works when it
     resolves against .cc-top, not a narrow 36px wrap — so the wrap goes back
     to a plain static pass-through at this width. */
  .cc-search-wrap { flex: 0 0 auto; max-width: none; position: static; }
  .cc-search {
    flex: 0 0 auto; width: 36px; height: 36px; max-width: 36px; min-width: 0;
    padding: 0; gap: 0; justify-content: center; overflow: hidden;
    border-radius: var(--cc-radius-md); background: none; cursor: pointer;
  }
  .cc-search:hover { background: var(--cc-chrome-2); color: var(--cc-chrome-ink); }
  .cc-search .cc-search-ico { font-size: 18px; flex-shrink: 0; }
  .cc-search input { display: none; }

  /* EXPANDED: overlay the whole top bar (absolute) so it doesn't have to win a
     width fight with the credits/mail/bell/persona controls — they stay put
     underneath. Same pill/chrome tokens as the desktop search bar. Resolves
     against .cc-top (position:sticky, the nearest positioned ancestor now
     that .cc-search-wrap is static at this width — see above). */
  .cc-search.expanded {
    position: absolute; left: 14px; right: 14px; top: 50%; transform: translateY(-50%);
    z-index: 8; width: auto; max-width: none; height: 40px;
    padding: 7px 12px; gap: 9px; justify-content: flex-start; cursor: text; overflow: visible;
    background: var(--cc-chrome-2); border: 1px solid var(--cc-chrome-line);
  }
  .cc-search.expanded input { display: block; width: 100%; min-width: 0; padding: 0; }
  /* The live dropdown's containing block is .cc-top (sticky) at this width,
     same as .cc-search.expanded above — it renders below the whole bar
     rather than pixel-anchored under the input, which is a fine trade-off
     for a compact 36px-collapsed field (mobile reflow is tracked separately
     — sweep findings 8/9 — not this fix's scope). */
  .cc-searchpop { max-width: calc(100vw - 28px); }

  /* Mode banner: tighter so it doesn't dominate the first screen. */
  .cc-mbar { font-size: 12px; padding: 8px 14px; gap: 8px; line-height: 1.35; align-items: flex-start; }
  .cc-mbar > i { margin-top: 2px; }

  /* Section header rows (title + action button) wrap instead of squashing. */
  .cc-hdr { flex-wrap: wrap; gap: 10px 12px; }
  .cc-hdr h2 { font-size: 22px; }

  /* Any data table scrolls horizontally inside its card instead of being clipped. */
  .cc-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .cc-tbl thead, .cc-tbl tbody, .cc-tbl tr { width: 100%; }

  /* Filter / sort bar: one tidy scrollable row rather than a ragged wrap. */
  .cc-sortbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .cc-sortbar::-webkit-scrollbar { display: none; }
  .cc-sortbar .cc-sortopt, .cc-sortbar .cc-btn { flex: 0 0 auto; }

  /* Messages: stacked single-column (convos on top, thread fills the rest).
     .cc-msg stays flex:1/min-height:0 (set at the top-level rule) so the
     composer never scrolls off — no height:auto here. */
  .cc-msg { grid-template-columns: 1fr; }
  .cc-convos { max-height: 38vh; flex-shrink: 0; border-right: 0; border-bottom: 1px solid var(--cc-line); }
  .cc-thread { flex: 1; min-height: 0; }
  .cc-bubble { max-width: 86%; }

  /* Card grids go single-column so nothing is cramped. */
  .cc-cardgrid, .cc-clist, .cc-giglist, .cc-ev-grid, .cc-landing-grid { grid-template-columns: 1fr; }

  /* Modals: full-width sheets with breathing room. */
  .cc-modal { width: 100%; max-width: 100%; }
  .cc-modal-bg { padding: 12px; align-items: flex-end; }

  /* Body padding a touch tighter on phones. */
  .cc-body { padding-left: 14px; padding-right: 14px; }
  .cc-maxw, .cc-maxw.wide { max-width: 100%; }

  /* Profile head: stack avatar / name / actions so the action buttons stop
     overlapping the name and the meta gets full width. */
  .cc-phead { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cc-phead > .cc-avatar { width: 76px !important; height: 76px !important; font-size: 26px !important; }
  .cc-pname { flex-wrap: wrap; }
  .cc-pname h1 { font-size: 24px; line-height: 1.1; }
  .cc-roleline { font-size: 14px; }
  .cc-pmeta { gap: 5px 14px; }
  .cc-pactions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .cc-pactions .cc-btn { flex: 1 1 auto; justify-content: center; }
  .cc-pactions .cc-btn.icon { flex: 0 0 auto; }

  /* List rows (gigs in an event, crew search): give the lead the full width and
     drop rate + action onto the next line, and keep each meta chip on one line
     so dates stop wrapping character-by-character. */
  .cc-row { flex-wrap: wrap; align-items: flex-start; gap: 8px 14px; }
  .cc-lead { flex: 1 1 100%; }
  .cc-ttl { white-space: normal; }
  /* meta chips stay whole + wrap as units (no character-by-character wrapping) */
  .cc-l2 span, .cc-gd-meta > span, .cc-crew-meta > span, .cc-pmeta > span { white-space: nowrap; }
  .cc-ratecol { flex: 0 0 auto; text-align: left; min-width: 0; }
  .cc-act { flex: 1 1 auto; text-align: left; min-width: 0; }
  .cc-act .cc-btn { width: auto; }
}

/* Tightest phones */
@media (max-width: 400px) {
  .cc-hdr h2 { font-size: 20px; }
  .cc-disc-seg .lbl { font-size: 10.5px; }
}

/* ════════════ JOBS: differentiated feed card + post flow ════════════ */
/* Job post card — deliberately a different shape from social posts */

/* One monochrome+1-accent treatment for every category — the accent-tinted pill
   stays on-brand and re-skins with the theme; the per-category type-icon (set in
   the markup) carries the meaning, not a six-colour rainbow. */

.cc-jobpost-reqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.cc-reqchip { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/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-reqchip i { color: var(--cc-faint); }
.cc-reqchip.ok { color: var(--cc-ink); background: var(--cc-chip); border-color: var(--cc-line); }
.cc-reqchip.ok i { color: var(--cc-ink); }
.cc-reqchip-x { background: none; border: 0; cursor: pointer; color: var(--cc-muted); padding: 0 0 0 3px; display: inline-flex; align-items: center; }

/* Feed controls (jobs filter + sort) */

/* Post-a-gig type chooser */

/* required/optional label pills */
.cc-req { font: 700 9.5px/1 var(--cc-font); text-transform: uppercase; letter-spacing: .04em; color: var(--cc-ink);
  background: var(--cc-chip); border-radius: var(--cc-radius-sm); padding: 2px 5px; margin-left: 6px; vertical-align: middle; }
.cc-opt { font: 500 11px/1 var(--cc-font-soft); color: var(--cc-muted); margin-left: 6px; }

/* gear tags input */
.cc-geartags-row { display: flex; gap: 8px; }
.cc-geartags-row .cc-input { flex: 1; }
.cc-geartags-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

/* ════════════ Post-a-job popup (two-page, dense, de-Clauded — 2026-07-07) ════════════
   Rules: required stated once (head sub-line), optional stated per-field
   (.cc-lbl-opt), accent used for exactly two things (budget preview + the
   primary Post job button), every selection control monochrome (.cc-seg /
   Disclosure), zero decorative icons inside the form. See docs/DESIGN_BIBLE.md
   "Form language — de-Clauding rules" for the canon write-up. */
.cc-postmodal { width: 580px; max-width: 100%; max-height: 92vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.cc-postmodal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--cc-line); flex-shrink: 0; }
.cc-postmodal-head h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.cc-postmodal-sub { font: 500 12px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin-top: 3px; }
.cc-modal-x { background: none; border: 0; color: var(--cc-muted); cursor: pointer; display: inline-flex; padding: 4px; border-radius: var(--cc-radius-sm); }
.cc-modal-x:hover { background: var(--cc-surface-2); color: var(--cc-ink); }

/* Quiet lowercase "optional" suffix on a field label — the ONLY marker; every
   other field is implicitly required by the one head sub-line. */
.cc-lbl-opt { font: 500 11px/1 var(--cc-font-soft); color: var(--cc-faint); text-transform: lowercase; margin-left: 6px; }

/* Section kicker — caps micro-label over a hairline, e.g. "THE JOB". */
.cc-formkick { display: flex; align-items: center; gap: 10px; font: 700 10.5px/1 var(--cc-font); letter-spacing: .09em;
  text-transform: uppercase; color: var(--cc-faint); margin: 2px 0 -2px; }
.cc-formkick::after { content: ''; flex: 1; height: 1px; background: var(--cc-line); }

/* Monochrome segmented control (project type, credentials, travel). Chip-track
   background, selected segment a raised WHITE pill (shadow, not a fill) — the
   selected thing is always the white one; never an accent tint/border, so
   orange stays reserved for money-or-go. */
.cc-seg { display: flex; gap: 3px; background: var(--cc-chip); border-radius: var(--cc-radius-md); padding: 3px; }
/* min-width:0 on the CONTROL itself (a flex item needs this to shrink below
   its content's natural width at all — flex's own automatic-minimum-size
   default is content-based, not the .cc-seg-opt's overflow, which stays
   visible so the button's OWN scroll box never disagrees with its client
   box (the button-box probe scans button/a/[role=tab] elements directly —
   see docs/TEXT-BOX-CONTRACT.md). The actual truncation quartet belongs on
   an INNER label span (.cc-truncate, see CC.views' Seg component), never on
   the control element the probe measures. line-height 1.2 (not the bare /1
   a tight button often ships with) keeps the glyph ink box inside the pill. */
.cc-seg-opt { flex: 1; min-width: 0; font: 600 12.5px/1.2 var(--cc-font-soft); color: var(--cc-soft); background: none; border: 0;
  border-radius: calc(var(--cc-radius-md) - 2px); padding: 8px 10px; cursor: pointer; text-align: center; transition: background .12s, color .12s; }
.cc-seg-opt:hover { color: var(--cc-ink); }
.cc-seg-opt.on { background: var(--cc-surface); color: var(--cc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Collapsed-by-default optional sections on page 3 ("+ Deliverables" etc). */
.cc-disc-row { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-muted); padding: 9px 2px; }
.cc-disc-row:hover { color: var(--cc-ink); }
.cc-disc-row-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-disc-row-wrap .cc-disc-row { flex: 1; }
.cc-disc-open { display: flex; flex-direction: column; gap: 8px; }
.cc-disc-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-disc-hdr .cc-disc-hide { flex: 1; padding-top: 9px; }
.cc-disc-hide { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-soft); padding: 9px 2px 0; }
.cc-disc-hide:hover { color: var(--cc-ink); }
.cc-disc-body { display: flex; flex-direction: column; gap: 8px; }

/* "Required" toggle sitting beside a Disclosure header (page 3, optional
   requests). Monochrome checkbox + label — informational, not a call to
   action, so it never takes the accent color (rule 2). */
.cc-reqtoggle { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--cc-font-soft);
  color: var(--cc-muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.cc-reqtoggle input { width: 13px; height: 13px; accent-color: var(--cc-chrome); }

/* Quiet "Required" marker on a gig-detail section whose poster flagged it
   mandatory — monochrome, sits right after the section heading. */
.cc-requiredmark { margin-left: 8px; font: 700 10px/1 var(--cc-font-soft); letter-spacing: .04em; text-transform: uppercase;
  color: var(--cc-muted); background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: 5px; padding: 3px 6px; vertical-align: middle; }

/* Budget row: the one-box $ input (flex-grows) + a compact rate-type dropdown
   share the row, same .cc-fgroup card (Tomas 2026-07-16: "for budget it
   should just say Budget. and then after it should be a dropdown for per
   day/flat/week/year"). */
.cc-budgetrow { display: flex; gap: 8px; align-items: center; }
.cc-budgetrow .cc-input { flex: 1; min-width: 0; }
.cc-budgetrow .cc-select { flex: 0 0 auto; width: auto; min-width: 108px; }

/* Budget preview — one of only two accent usages in the whole modal. */
.cc-budgetprev { font: 500 12.5px/1.4 var(--cc-font-soft); color: var(--cc-muted); margin-top: 6px; }
.cc-budgetprev b { color: var(--cc-accent-ink); font-weight: 700; }
.cc-budgetprev-sub { color: var(--cc-faint); }

/* Footer page marker ("1 of 2"). */
.cc-postmodal-page { font: 600 11px/1 var(--cc-font-soft); color: var(--cc-faint); white-space: nowrap; }

/* ════════════ Share-gig popup ════════════ */
.cc-share-modal { position: relative; max-width: 440px; }
.cc-share-x { position: absolute; top: 14px; right: 14px; }
.cc-share-modal .sub { margin-bottom: 16px; overflow-wrap: anywhere; }
.cc-share-linkrow { display: flex; gap: 8px; align-items: stretch; }
.cc-share-link { flex: 1; min-width: 0; font-size: 13px; color: var(--cc-muted); background: var(--cc-surface-2); cursor: text; }
.cc-share-copy { flex-shrink: 0; white-space: nowrap; }
.cc-share-copy.ok { filter: brightness(.96); }
.cc-share-native { width: 100%; justify-content: center; margin-top: 10px; }
.cc-postmodal-body { overflow-y: auto; padding: 16px 20px 8px; display: flex; flex-direction: column; gap: 14px; }
.cc-postmodal-body .cc-field { margin: 0; }
/* Group card: related fields cluster on a grey card (Nova pattern, Tomas
   2026-07-15). Token-driven so midnight renders sanely; the calm B&W pass
   pins the light value (callsheet-calm.css, end block). App-wide, not
   modal-only: #243 (board & discovery) first widened this from
   .cc-postmodal to .cc-modal for its plain-modal callers (SuggestEventModal,
   AttendPopup); sweep chunk 2 (2026-07-16) drops the .cc-modal requirement
   entirely — CrewProfile's inline edit and the availability composer are
   full-page forms, not modals, so a .cc-modal ancestor still wouldn't have
   covered them. Unscoped .cc-fgroup is a superset of both — every existing
   caller (wizard, board/discovery modals) keeps its exact look. Self-
   contained (own flex/gap + a .cc-field margin reset) so it drops into any
   form context. A card can hold one field, one field-row, or several
   stacked field-rows (own 12px gap covers that); margin-bottom gives it the
   same trailing space a bare .cc-field would carry in ordinary block-flow
   forms — zeroed back out inside .cc-postmodal-body below since that
   container's own flex gap already spaces its children and doubling up
   would widen the wizard's rhythm. (Board/discovery's own callers already
   carry redundant inline marginBottom/field-margin overrides matching these
   same values — harmless duplicates now that the shared rule covers it.) */
.cc-fgroup { background: var(--cc-surface-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.cc-fgroup .cc-field { margin: 0; }
.cc-postmodal-body .cc-fgroup { margin-bottom: 0; }
.cc-postmodal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--cc-line); flex-shrink: 0; }
.cc-postmodal-tour { margin-right: auto; background: none; border: 0; color: var(--cc-muted); font: 600 12.5px/1.2 var(--cc-font-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-align: left; }
.cc-postmodal-tour:hover { color: var(--cc-accent-ink); }
/* Tour-CSV import in-body (#231): "← Back to single job" reads as a quiet link,
   not a button — the import owns its one primary submit. */
.cc-postmodal-tourback { align-self: flex-start; background: none; border: 0; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1.2 var(--cc-font-soft); color: var(--cc-muted); }
.cc-postmodal-tourback:hover { color: var(--cc-accent-ink); }
/* Add-a-festival inline block (#229): sits under the festival picker, hairline
   separated. Sub-labels + free-text inputs reuse the wizard's own field styles;
   this just spaces the block from the picker above it. */
.cc-festadd { display: flex; flex-direction: column; gap: 4px; }
.cc-festadd .cc-field { margin: 0; }
/* project line on the job card */

/* ════════════ Guided 3-step post flow (PR5, mad-lib step 1) ════════════
   Adds to the post-modal rules just above: the mad-lib sentence blanks stay
   STRICTLY monochrome (rule 2 reserves accent for the rate preview + the
   primary submit button only — Nova's purple blanks are explicitly not the
   skin here), the composed-title preview is a quiet read-only panel (never
   accent — it's not editable, so it isn't a "go" control), and "Save draft"
   is a quiet text button, same weight as the tour-CSV link it now sits next
   to (that link lost its own margin-right:auto above — Save draft owns the
   footer's one right-push now, so it stays put whether or not the CSV link
   is on-screen). */
.cc-madlib { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 8px; font: 600 19px/1.5 var(--cc-font); color: var(--cc-ink); }
.cc-madlib > span { color: var(--cc-soft); font-weight: 500; }
.cc-madlib-slot { display: inline-block; width: auto; min-width: 130px; max-width: 100%; vertical-align: bottom; }
.cc-madlib-slot .cc-combo { width: auto; }
.cc-madlib-blank { display: inline-block; min-width: 60px; max-width: 100%; border: 0; border-bottom: 2px solid var(--cc-ink);
  border-radius: 0; background: transparent; font: 700 19px/1.3 var(--cc-font); color: var(--cc-ink); padding: 0 1px 2px; }
.cc-madlib-blank::placeholder { color: var(--cc-ph); font-weight: 600; }
.cc-madlib-blank:focus { outline: none; border-bottom-width: 3px; }
.cc-madlib-select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 4px; }
.cc-madlib-flexnote { color: var(--cc-faint); font-weight: 600; font-style: italic; border-bottom-style: dashed; }
/* Sweep #8: as one atomic flex item of .cc-madlib, this had no width bound of
   its own — its two ~80px-min-width DateFields + dash sized to their natural
   (unwrapped) content width regardless of how little room was left on the
   line, so on a narrow column "end" rendered past the viewport edge instead
   of wrapping. flex-wrap + max-width let it drop to its own two lines
   (start / – end) exactly like the rest of the mad-lib already does between
   slots, so every blank stays reachable without horizontal scroll. */
.cc-madlib-dates { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; row-gap: 4px; max-width: 100%; }
.cc-madlib-dates > span { color: var(--cc-faint); }
.cc-madlib-date { min-width: 80px; flex: 0 1 auto; }
/* The connector word ("in"/"at") IS the city-vs-event toggle — an icon-only
   functional control would need its own aria-label anyway, so the word
   itself carries one instead. Dotted underline hints it's clickable without
   reaching for accent. */
.cc-madlib-connector { background: none; border: 0; padding: 0; font: 700 19px/1.3 var(--cc-font); color: var(--cc-ink);
  text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--cc-faint); text-underline-offset: 4px; cursor: pointer; }
.cc-madlib-connector:hover { color: var(--cc-muted); }
.cc-madlib-flexcheck { display: inline-flex; margin-top: 8px; }
.cc-charcount { font: 500 11px/1 var(--cc-font-soft); color: var(--cc-faint); text-align: right; margin-top: -6px; }

/* Working-title preview (step 2) — read-only, quiet, monochrome (it isn't a
   "go" control, so no accent). */
.cc-titlepreview { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 12px 14px; }
.cc-titlepreview-kick { font: 700 10px/1 var(--cc-font-soft); letter-spacing: .07em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 6px; }
.cc-titlepreview-txt { font: 700 15px/1.4 var(--cc-font); color: var(--cc-ink); }

/* A field's own label row + inline "Required" toggle (Skills & gear, step
   2 — not collapsed behind a Disclosure like the "More details" fields, so
   it needs its own header row for the toggle to sit in). */
.cc-fieldhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.cc-fieldhead label { margin: 0; }

/* Review step (3) — retuned 2026-07-15 (Tomas: the old rows "laid out just…
   strange"). The title leads big; the facts read as a quiet two-column
   ledger, hairline-ruled, labels de-tracked and value-right-aligned; money is
   the one accent. */
.cc-review { display: flex; flex-direction: column; }
.cc-review-title { font: 700 21px/1.3 var(--cc-font); letter-spacing: -.015em; color: var(--cc-ink); text-wrap: balance; }
.cc-review-desc { font: 400 13.5px/1.6 var(--cc-font-soft); color: var(--cc-soft); white-space: pre-wrap; max-width: 62ch; margin-top: 8px; }
.cc-review-facts { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--cc-line-soft); }
.cc-review-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--cc-line-soft); }
.cc-review-fact .k { font: 600 10.5px/1 var(--cc-font-soft); text-transform: uppercase; letter-spacing: .09em; color: var(--cc-faint); flex: 0 0 auto; }
.cc-review-fact .v { font: 600 13.5px/1.35 var(--cc-font-soft); color: var(--cc-ink); text-align: right; }
.cc-review-fact .v.money { color: var(--cc-accent-ink); }
.cc-review-note { font: 500 12.5px/1.5 var(--cc-font-soft); color: var(--cc-faint); margin-top: 12px; }
.cc-review-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* "Save draft" — quiet text button, footer of every step. Owns the one
   right-push in the footer row (the tour-CSV link above it lost its own). */
.cc-postmodal-savedraft { margin-right: auto; background: none; border: 0; color: var(--cc-muted); font: 600 12.5px/1.2 var(--cc-font-soft); cursor: pointer; padding: 6px 4px; }
.cc-postmodal-savedraft:hover { color: var(--cc-ink); }
.cc-postmodal-savedraft:disabled { opacity: .55; cursor: default; }

/* Drafts resume row — "Drafts (n)" at the top of the wizard's step 1 and on
   the Jobs dashboard (finding 2). A quiet expandable bar, monochrome, 8px
   radii; the rows themselves reuse .cc-draftrow below. */
.cc-draftbar { border: 1px solid var(--cc-line); border-radius: 8px; padding: 3px; background: var(--cc-surface); }
.cc-jobsdash .cc-draftbar { margin-bottom: 14px; }
.cc-draftbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: 6px; padding: 8px 9px; cursor: pointer; color: var(--cc-soft); }
.cc-draftbar-row:hover { background: var(--cc-surface-2); }
.cc-draftbar-t { font: 600 12.5px/1 var(--cc-font-soft); color: var(--cc-ink); }
.cc-draftbar .cc-draftlist { padding: 0 3px 3px; }

/* Draft rows — plain list rows, same shell as the filter popovers
   (.cc-fpop-row) but their own class since they live outside a popover. */
.cc-draftlist { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cc-draftrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--cc-radius-sm); padding: 9px 8px; cursor: pointer; font: 500 13.5px/1.4 var(--cc-font-soft); }
.cc-draftrow:hover { background: var(--cc-surface-2); }
.cc-draftrow-t { color: var(--cc-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-draftrow-ago { color: var(--cc-faint); flex-shrink: 0; }

/* ════════ Browse grid → search "fly" to the split (Airbnb-style) ════════ */
.cc-browsehero { text-align: center; padding: 28px 12px 6px; }
.cc-browsehero h1 { font-size: 33px; font-weight: 800; letter-spacing: -.03em; color: var(--cc-ink); }
.cc-browsehero p { color: var(--cc-soft); font-size: 14.5px; font-family: var(--cc-font-soft); margin: 8px 0 20px; }
.cc-disc-hero { max-width: 760px; margin: 0 auto; }
.cc-disc-hero .cc-disc { max-width: 760px; box-shadow: 0 8px 26px rgba(20,18,12,.11); }
.cc-disc-hero .cc-disc-seg { padding: 14px 24px; }
.cc-disc-hero .cc-disc-seg .lbl { font-size: 12px; }
.cc-disc-hero .cc-disc-seg input { font-size: 15px; }
.cc-disc-hero .cc-disc-go { width: 52px; height: 52px; }
/* ── Crew search: an oversized, centred "Find your crew" over a blurred,
   unreadable wall of crew, that morphs up to a normal top bar the instant you
   search — typed query OR the button, CSS-transform driven so it fires either
   way (including as-you-type). ── */
.cc-crewsearch { position: relative; }
.cc-crewsearch.intro { min-height: 74vh; }
.cc-crewsearch-bg { position: absolute; inset: 0; z-index: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding-top: 60px;
  filter: blur(9px); opacity: .3; pointer-events: none; user-select: none;
  transition: opacity .45s ease;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.1), #000 45%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.1), #000 45%); }
.cc-crewsearch.searching .cc-crewsearch-bg { opacity: 0; }
/* z-index 3 (> the results' 2): will-change:transform makes this a stacking
   context, so the role/where combo dropdown (z-60 INSIDE it) can only beat the
   later-DOM results section if the hero itself sits above — otherwise the
   empty-state/cards paint straight over the open dropdown. */
.cc-crewsearch-hero { position: relative; z-index: 3; transform-origin: top center; will-change: transform;
  transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.cc-crewsearch.intro .cc-crewsearch-hero { transform: translateY(20vh) scale(1.14); }
.cc-crewsearch.searching .cc-crewsearch-hero { transform: none; }
.cc-crewsearch-hero .cc-browsehero-kick { max-height: 44px; }
.cc-crewsearch-hero h1 { max-height: 96px; }
.cc-crewsearch-hero p { max-height: 64px; }
.cc-crewsearch-hero .cc-browsehero-kick, .cc-crewsearch-hero h1, .cc-crewsearch-hero p {
  overflow: hidden; transition: opacity .3s ease, max-height .5s cubic-bezier(.22,.61,.36,1), margin .5s ease; }
.cc-crewsearch.searching .cc-crewsearch-hero .cc-browsehero-kick,
.cc-crewsearch.searching .cc-crewsearch-hero h1,
.cc-crewsearch.searching .cc-crewsearch-hero p { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; }
/* NO z-index here (was 2): it made this a stacking context, TRAPPING every
   modal the embedded crew profile renders (Book/Message/Share, z-50) below
   the z-5 top bar — the search field and + button painted straight over the
   Book-offer sheet (probe bleed:book-offer-modal, 2026-07-18; same class as
   the split2 Share/Apply bleed). Layering holds without it: the blurred bg
   is z-0 and earlier in DOM, so the positioned results still paint above
   it, and the hero (z-3) still beats results for its combo dropdowns. */
.cc-crewsearch-results { position: relative; margin-top: 16px; }
@media (max-width: 720px) { .cc-crewsearch.intro { min-height: 64vh; } .cc-crewsearch.intro .cc-crewsearch-hero { transform: translateY(12vh) scale(1.02); } }
/* Mobile: no hero→topbar morph. The transform-driven flight is jarring on a
   phone, so render the crew search at its final resting position and skip the
   blurred wall — the intro/searching classes still toggle but do nothing here.
   Must come AFTER the base morph rules above so same-specificity later wins. */
@media (max-width: 860px) {
  .cc-crewsearch.intro { min-height: 0; }
  .cc-crewsearch-hero,
  .cc-crewsearch.intro .cc-crewsearch-hero,
  .cc-crewsearch.searching .cc-crewsearch-hero { transform: none; transition: none; }
  .cc-crewsearch-hero .cc-browsehero-kick,
  .cc-crewsearch-hero h1,
  .cc-crewsearch-hero p { transition: none; }
  .cc-crewsearch-bg { display: none; }
}
/* dense full-width browse grid (≈6–8 across) before you search */
.cc-browsegrid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 13px; margin-top: 6px; }
.cc-browsegrid.cc-giglist { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.cc-browsegrid.cc-evlist { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Crew cards need room for a 44px avatar + a full name + role — the dense
   152px base clipped names and forced tall/skinny columns. Widen to reflow and
   fill the viewport. Scoped to the crew grid (no gig/event modifier) so the
   gig and event browsers keep their own column sizes. */
.cc-browsegrid:not(.cc-giglist):not(.cc-evlist) { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; align-content: start; }
/* fly-in when the split appears */
@keyframes cc-flyin { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.cc-fly { animation: cc-flyin .26s cubic-bezier(.22,.61,.36,1); }
.cc-linklike { background: none; border: 0; color: var(--cc-accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.cc-linklike:hover { text-decoration: underline; }
/* Wraps an existing, already-styled block (e.g. a thread/dock header) in a
   <button> without a native button's chrome — only resets what browsers add
   by default; layout/spacing stays owned by the wrapped block's own class. */
.cc-linklike-reset { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.cc-linklike-reset:disabled { cursor: default; }

/* ════════ Composer images + messages badge ════════ */

/* Top-bar Jobs shortcut (mobile only) — desktop hides it, the sidebar
   already has Jobs there. Revealed ≤640px in the ROUND 3 mobile block
   at the end of this file. */
.cc-jobsbtn { display: none; }
/* Top-bar Home shortcut (mobile only, round 5) — same story as Jobs above,
   revealed ≤640px in the ROUND 5 mobile block at the end of this file. */
.cc-homebtn { display: none; }

/* Messages button unread badge */
.cc-msgbtn { position: relative; }
/* Count bubble sits INSIDE the host button's box (top/right ≥ 0) — the old
   -5px corner overhang made the badge's digit ink escape the control, a
   button-box contract violation the probe flags the moment any unread
   exists (it blocked a ship on 2026-07-15 when the demo fixtures rolled
   to 2 unread). */
/* Unread badge on the topbar bell/mail icons (dark chrome ground) — quiet
   chrome-ink/chrome-bg inversion, not a solid accent block (de-accented,
   2026-07-16 design-canon pass; same one-job discipline as calm.css's
   .cc-dock-badge). */
.cc-msgbadge { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--cc-radius-pill); background: var(--chr-tx); color: var(--chr-bg); font: 700 10px/17px var(--cc-font); text-align: center; box-shadow: 0 0 0 2px var(--cc-chrome); }

/* ════════════════════ Apply credits ════════════════════ */
/* Out-of-tier subtext under a disabled Apply button (light content area). */
.cc-tierwarn { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--cc-warn-ink); background: var(--cc-warn-bg); border: 1px solid var(--cc-warn-line); border-radius: var(--cc-radius-md); padding: 8px 10px; }