/* CrewCall app styles — every value references tokens.css (var(--cc-*)). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  /* Body / UI / labels ride Onest (--cc-font-soft); the display face (Schibsted
     Grotesk, --cc-font) is reserved for headings, names, numbers, and buttons —
     the two-face contract from the design bible. Headings + buttons opt back into
     the display face just below so unreskinned screens keep their type hierarchy. */
  font-family: var(--cc-font-soft);
  background: var(--cc-canvas);
  color: var(--cc-ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .cc-btn, .cc-num { font-family: var(--cc-font); }
#root { display: flex; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Keyboard focus ring — the app's own accent, never a generic blue halo.
   :focus-visible so it never fires on mouse/touch, only keyboard/AT. */
:where(button, a, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}

/* ── Sidebar (dark chrome) ───────────────────────────── */
.cc-side {
  width: var(--cc-sidebar-w); background: var(--cc-chrome);
  border-right: 1px solid var(--cc-chrome-line); padding: 18px 14px;
  display: flex; flex-direction: column; flex-shrink: 0;
  height: 100vh; position: sticky; top: 0;
}
.cc-wm { font-weight: 700; font-size: 17px; letter-spacing: -.02em; margin: 2px 8px 22px; color: var(--cc-chrome-ink); }
.cc-wm .dot { color: var(--cc-accent); }

/* ── Main / top bar (dark chrome) ────────────────────── */
.cc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cc-top {
  display: flex; align-items: center; gap: 14px; padding: 0 22px;
  height: var(--cc-topbar-h); border-bottom: 1px solid var(--cc-chrome-line);
  background: var(--cc-chrome); position: sticky; top: 0; z-index: 5;
}
.cc-search {
  flex: 1; max-width: 380px; display: flex; align-items: center; gap: 9px;
  background: var(--cc-chrome-2); border: 1px solid var(--cc-chrome-line);
  border-radius: var(--cc-radius-md); padding: 7px 12px; color: var(--cc-chrome-soft); font-size: 13px;
}
.cc-search input { border: 0; background: transparent; outline: 0; font: inherit; color: var(--cc-chrome-ink); width: 100%; }
.cc-search input::placeholder { color: var(--cc-chrome-soft); }
.cc-spacer { flex: 1; }

/* role switcher (on dark chrome) */
.cc-rswrap { margin-left: auto; position: relative; }
.cc-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--cc-chrome-line); border-radius: var(--cc-radius-md); padding: 5px 10px; background: var(--cc-chrome-2); }

.cc-chip .nm { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--cc-chrome-ink); }
.cc-chip .md { font-size: 11px; color: var(--cc-accent-onchrome); font-weight: 600; }
.cc-top .cc-avatar { background: #4A453B; color: #EDEAE3; }
.cc-top .cc-chip i { color: var(--cc-chrome-soft); }
.cc-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 6px; min-width: 230px; z-index: 20; }
.cc-menu-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cc-faint); padding: 6px 10px; }
.cc-menu-i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--cc-radius-sm); font-size: 13.5px; width: 100%; background: none; border: 0; text-align: left; color: var(--cc-ink); }
.cc-menu-i:hover { background: var(--cc-surface-2); }
.cc-menu-i.on { color: var(--cc-accent); font-weight: 600; }
.cc-menu-i .sub { font-size: 11px; color: var(--cc-muted); }

/* Theme picker — Settings (labelled grid) */

/* ── Page body ───────────────────────────────────────── */
.cc-body { padding: 24px 28px 40px; overflow: auto; }
.cc-maxw { max-width: 1060px; margin-inline: auto; }
.cc-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
.cc-hdr h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.cc-hdr .cnt { font-size: 13px; color: var(--cc-muted); }
.cc-hdr .cnt b { color: var(--cc-ink); font-weight: 600; }

/* ── Buttons / chips / controls ──────────────────────── */
.cc-btn { border-radius: var(--cc-radius-md); padding: 8px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-ink); display: inline-flex; align-items: center; gap: 7px; }
.cc-btn:hover { background: var(--cc-surface-2); }
.cc-btn.primary { background: var(--cc-accent); color: #fff; border-color: var(--cc-accent); }
.cc-btn.primary:hover { filter: brightness(.94); background: var(--cc-accent); }
.cc-btn.icon { padding: 8px 11px; color: var(--cc-soft); }
.cc-btn.sm { padding: 5px 11px; font-size: 12px; }

.cc-f { font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: var(--cc-radius-pill); border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-soft); display: inline-flex; align-items: center; gap: 6px; }
.cc-f i { font-size: 15px; }
.cc-f.on { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }
.cc-f.toggle.on { background: var(--cc-accent-tint); color: var(--cc-accent); border-color: var(--cc-accent-border); }
.cc-sortwrap { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--cc-muted); }
.cc-sortwrap select { font: inherit; font-weight: 600; color: var(--cc-ink); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 7px 10px; background: var(--cc-surface); }

/* ── Category chips (engagement-type taxonomy) + event scope ── */
.cc-catbar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 12px; }
.cc-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: var(--cc-radius-pill); border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-soft); }
.cc-cat i { font-size: 15px; color: var(--cc-faint); }
.cc-cat:hover { border-color: var(--cc-faint); color: var(--cc-ink); }
.cc-cat.on { background: var(--cc-accent-tint); border-color: var(--cc-accent-border); color: var(--cc-accent-ink); }
.cc-cat.on i { color: var(--cc-accent); }

/* ── Event cards ─────────────────────────────────────── */

.cc-evcard { text-align: left; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); background: var(--cc-surface); cursor: pointer; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 3px rgba(20,18,12,.05); transition: box-shadow .12s, transform .12s; }
.cc-evcard:hover { box-shadow: 0 6px 18px rgba(20,18,12,.10); transform: translateY(-1px); }
.cc-evcard-img { background-color: var(--cc-chrome); background-size: cover; background-position: center; min-height: 132px; padding: 11px 13px; display: flex; flex-direction: column; justify-content: space-between; }
.cc-evcard-tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-evcard-kind { font: 600 9.5px/1 var(--cc-font-soft); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); border-radius: var(--cc-radius-pill); padding: 4px 9px; }
.cc-evcard-dt { font-size: 11.5px; color: rgba(255,255,255,.92); }
.cc-evcard-nm { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.cc-evcard-body { padding: 11px 14px 13px; display: flex; flex-direction: column; gap: 7px; }
.cc-evcard-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cc-soft); }
.cc-evcard-meta i { color: var(--cc-faint); }
.cc-evcard-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--cc-muted); border-top: 1px solid var(--cc-surface-2); padding-top: 8px; }
.cc-ev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-ev-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; padding: 7px 11px; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill); background: var(--cc-surface); color: var(--cc-ink); cursor: pointer; }
.cc-ev-chip:hover { border-color: var(--cc-faint); }
.cc-ev-chip i { color: var(--cc-muted); }
.cc-ev-chip .cred { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--cc-ok-ink); background: var(--cc-ok-bg); border-radius: var(--cc-radius-sm); padding: 1px 5px; }
.cc-ev-chip .cred i { color: var(--cc-ok-ink); }

/* ── Gig list (dense feed) ───────────────────────────── */
.cc-list { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden; }
.cc-row { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--cc-line); cursor: pointer; }
.cc-row:last-child { border-bottom: 0; }
.cc-row:hover { background: var(--cc-surface-2); }
.cc-row.filled { opacity: .55; }
.cc-lead { flex: 1; min-width: 0; }
.cc-l1 { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.cc-rtag { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-muted); background: var(--cc-chip); border-radius: var(--cc-radius-sm); padding: 2px 6px; white-space: nowrap; }
.cc-ttl { font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-l2 { display: flex; align-items: center; gap: 5px 13px; font-size: 12.5px; color: var(--cc-soft); flex-wrap: wrap; }
.cc-l2 span { display: flex; align-items: center; gap: 5px; }
.cc-l2 i { font-size: 14px; color: var(--cc-faint); }
.cc-lz { font-size: 11px; font-weight: 600; border-radius: var(--cc-radius-sm); padding: 3px 7px; display: flex; align-items: center; gap: 4px; }
.cc-lz.local { background: var(--cc-chip); color: var(--cc-soft); }
.cc-lz.travel { background: var(--cc-ok-bg); color: var(--cc-ok-ink); }
.cc-ratecol { text-align: right; min-width: 104px; flex-shrink: 0; }
.cc-rate { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.cc-rate small { font-size: 11px; font-weight: 500; color: var(--cc-muted); }
.cc-apps { font-size: 11.5px; color: var(--cc-muted); margin-top: 2px; }
.cc-act { min-width: 124px; flex-shrink: 0; text-align: right; }
.cc-ago { font-size: 11px; color: var(--cc-faint); margin-bottom: 6px; }

/* ── States ──────────────────────────────────────────── */
.cc-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 64px 20px; color: var(--cc-muted); text-align: center; }
.cc-state i { font-size: 28px; color: var(--cc-faint); }
.cc-state-t { font-size: 15px; font-weight: 600; color: var(--cc-ink); }
.cc-state-s { font-size: 13px; color: var(--cc-muted); max-width: 360px; }
.cc-spin { animation: cc-spin 1s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ── Generic ─────────────────────────────────────────── */
.cc-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cc-soft); margin-bottom: 16px; background: none; border: 0; }
.cc-back:hover { color: var(--cc-ink); }
.cc-card { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); box-shadow: 0 1px 3px rgba(20,18,12,.04); }

/* ── Crew browser (cards) ────────────────────────────── */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-content: start; }

/* The text column must be allowed to shrink (min-width:0) or long names can't
   contract and overflow the card past the avatar. */

.cc-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-sk { font-size: 11px; font-weight: 500; color: var(--cc-soft); background: var(--cc-chip); border-radius: var(--cc-radius-sm); padding: 3px 7px; }
.cc-avail-pill { font-size: 11px; font-weight: 600; color: var(--cc-ok-ink); background: var(--cc-ok-bg); border-radius: var(--cc-radius-pill); padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.cc-avail-pill.off { color: var(--cc-muted); background: var(--cc-chip); }
.cc-avail-pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Profile ─────────────────────────────────────────── */
.cc-maxw { max-width: 1060px; }
.cc-phead { display: flex; gap: 22px; padding: 24px 26px; align-items: flex-start; }
.cc-av-lg { width: 84px; height: 84px; border-radius: 50%; background: var(--cc-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; flex-shrink: 0; }
.cc-pname { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-pname h1 { font-size: 27px; font-weight: 700; letter-spacing: -.025em; }
.cc-roleline { font-size: 15px; color: var(--cc-soft); font-weight: 500; margin: 5px 0 11px; }
.cc-roleline b { color: var(--cc-ink); font-weight: 600; }
.cc-pmeta { display: flex; align-items: center; gap: 7px 18px; font-size: 13px; color: var(--cc-soft); flex-wrap: wrap; }
.cc-pmeta span { display: flex; align-items: center; gap: 6px; }
.cc-pmeta i { font-size: 15px; color: var(--cc-faint); }
.cc-pmeta .stars { color: var(--cc-accent); }
.cc-purl { font-size: 12.5px; color: var(--cc-faint); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.cc-pactions { margin-left: auto; display: flex; gap: 9px; flex-shrink: 0; }
.cc-strip { display: flex; border-top: 1px solid var(--cc-line); flex-wrap: wrap; }
.cc-cell { flex: 1; min-width: 150px; padding: 15px 20px; border-right: 1px solid var(--cc-line); }
.cc-cell .k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cc-faint); margin-bottom: 5px; }
.cc-cell .v { font-size: 15px; font-weight: 600; }
.cc-cell .v small { font-weight: 500; color: var(--cc-muted); font-size: 12px; }
.cc-mkts { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-mkt { font-size: 11.5px; font-weight: 600; color: var(--cc-soft); background: var(--cc-chip); border-radius: var(--cc-radius-sm); padding: 3px 8px; display: flex; align-items: center; gap: 4px; }
.cc-pcols { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; margin-top: 18px; }
.cc-sec { padding: 20px 22px; }
.cc-sec h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 13px; display: flex; align-items: center; gap: 8px; }
.cc-sec h3 .n { font-size: 12px; font-weight: 500; color: var(--cc-faint); }
.cc-bio { font-size: 14px; line-height: 1.65; color: var(--cc-soft); }
.cc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cc-tile { position: relative; aspect-ratio: 4/3; background: #23211D; border-radius: var(--cc-radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cc-tile i { font-size: 28px; color: rgba(255,255,255,.28); }
.cc-tile.reel i { color: var(--cc-accent); }
.cc-tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); }
.cc-tl-item { position: relative; border-left: 2px solid var(--cc-line); padding: 0 0 18px 20px; margin-left: 4px; }
.cc-tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.cc-tl-item::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--cc-surface); border: 2px solid var(--cc-accent); }
.cc-tl-item .tt { font-size: 14px; font-weight: 600; }
.cc-tl-item .ts { font-size: 12.5px; color: var(--cc-muted); margin-top: 2px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.cc-gear-group { margin-bottom: 12px; }
.cc-gear-group:last-child { margin-bottom: 0; }
.cc-gear-cat { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 4px; }
.cc-gear { list-style: none; font-size: 13px; color: var(--cc-soft); line-height: 1.5; }
.cc-gear li { padding: 6px 0; border-bottom: 1px solid var(--cc-line); display: flex; gap: 9px; }
.cc-gear li:last-child { border-bottom: 0; }
.cc-gear li i { font-size: 16px; color: var(--cc-faint); }
.cc-links a { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--cc-ink); padding: 8px 0; border-bottom: 1px solid var(--cc-line); }
.cc-links a:last-child { border-bottom: 0; }
.cc-links a i { font-size: 17px; color: var(--cc-soft); }
.cc-links a[href]:hover { color: var(--cc-accent); }
.cc-links a[href]:hover i { color: var(--cc-accent); }

/* ── Instagram: handle field (inline editor) + selected-work strip ─────── */
.cc-ig-input { display: flex; align-items: center; gap: 0; }
.cc-ig-input .at { display: inline-flex; align-items: center; justify-content: center; height: 100%; min-width: 30px; padding: 0 9px; align-self: stretch; color: var(--cc-muted); font-weight: 600; background: var(--cc-surface-2, var(--cc-surface)); border: 1px solid var(--cc-line); border-right: 0; border-radius: var(--cc-radius-md) 0 0 var(--cc-radius-md); }
.cc-ig-input .cc-input { border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0; flex: 1; }

.cc-ig-strip { display: flex; flex-direction: column; gap: 8px; }
.cc-ig-card { display: flex; align-items: stretch; gap: 8px; }
.cc-ig-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); background: var(--cc-surface); color: var(--cc-ink); text-decoration: none; }
.cc-ig-link:hover { border-color: var(--cc-accent-border, var(--cc-accent)); background: var(--cc-accent-tint); }
.cc-ig-link > i:last-child { margin-left: auto; color: var(--cc-faint); }
.cc-ig-link:hover > i:last-child { color: var(--cc-accent); }
.cc-ig-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--cc-radius-md); color: #fff; background: linear-gradient(135deg, #feda75 0%, #d62976 45%, #962fbf 75%, #4f5bd5 100%); }
.cc-ig-meta { display: flex; flex-direction: column; min-width: 0; }
.cc-ig-meta .t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ig-meta .s { font-size: 12px; color: var(--cc-muted); }
.cc-ig-rm { flex-shrink: 0; }

/* The "add IG posts" on-ramp inside the portfolio editor. */
.cc-ig-on-ramp { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--cc-line); }
.cc-ig-on-ramp h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: 14px; font-weight: 700; }
.cc-ig-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--cc-muted); line-height: 1.45; }
.cc-ig-err { margin-top: 8px; font-size: 12.5px; color: var(--cc-danger-ink); }
.cc-rev { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cc-rev .big { font-size: 32px; font-weight: 700; }
.cc-rev .of { font-size: 13px; color: var(--cc-muted); }
.cc-quote { font-size: 13px; line-height: 1.6; color: var(--cc-soft); font-style: italic; border-left: 3px solid var(--cc-line); padding-left: 12px; }
.cc-quote .qby { font-style: normal; font-weight: 600; color: var(--cc-ink); display: block; margin-top: 6px; font-size: 12.5px; }
/* Mutual-reveal ratings: the "hidden until both rate" note in the review modal. */
.cc-reveal-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm); background: var(--cc-surface, rgba(0,0,0,.02)); font-size: 12.5px; line-height: 1.5; color: var(--cc-muted); }

/* ── Dashboard ───────────────────────────────────────── */
.cc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 22px; }
.cc-stat { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: 16px 18px; }
.cc-stat .k { font-size: 12.5px; color: var(--cc-muted); margin-bottom: 6px; }
.cc-stat .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.cc-stat .s { font-size: 12px; color: var(--cc-faint); margin-top: 3px; }

/* ── Messages (two-pane) ─────────────────────────────── */
.cc-msg { display: grid; grid-template-columns: 300px minmax(0,1fr); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden; background: var(--cc-surface); height: calc(100vh - var(--cc-topbar-h) - 96px); }
.cc-convos { border-right: 1px solid var(--cc-line); overflow: auto; }
.cc-convo { display: flex; gap: 11px; align-items: center; padding: 13px 15px; border: 0; border-bottom: 1px solid var(--cc-line); width: 100%; background: none; text-align: left; }
.cc-convo:hover { background: var(--cc-surface-2); }
.cc-convo.on { background: var(--cc-accent-tint); }
.cc-convo .meta { min-width: 0; flex: 1; }
.cc-convo .nm { font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.cc-convo .nm .t { font-size: 11px; color: var(--cc-faint); font-weight: 500; white-space: nowrap; }
.cc-convo .snip { font-size: 12px; color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.cc-thread { display: flex; flex-direction: column; min-width: 0; }
.cc-thread-head { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-bottom: 1px solid var(--cc-line); }
.cc-thread-head .sub { font-size: 12px; color: var(--cc-muted); }
.cc-bubbles { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.cc-bubble { max-width: 74%; padding: 9px 13px; border-radius: var(--cc-radius-sm); font-size: 13.5px; line-height: 1.45; }
.cc-bubble.them { align-self: flex-start; background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-bottom-left-radius: 4px; }
.cc-bubble.me { align-self: flex-end; background: var(--cc-accent-tint); color: var(--cc-accent-ink); border-bottom-right-radius: 4px; }
.cc-bubble .bt { font-size: 10.5px; color: var(--cc-faint); margin-top: 4px; }
.cc-bubble.me .bt { color: var(--cc-accent-ink); opacity: .7; }
.cc-composer { display: flex; gap: 9px; padding: 12px 14px; border-top: 1px solid var(--cc-line); }
.cc-composer input { flex: 1; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 10px 13px; font: inherit; outline: none; background: var(--cc-canvas); }
.cc-composer input:focus { border-color: var(--cc-faint); }

/* ── Data table (bookings / payments) ────────────────── */
.cc-tbl { width: 100%; border-collapse: collapse; }
.cc-tbl th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cc-faint); text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--cc-line); }
.cc-tbl td { font-size: 13.5px; padding: 13px 16px; border-bottom: 1px solid var(--cc-line); color: var(--cc-soft); vertical-align: middle; }
.cc-tbl tr:last-child td { border-bottom: 0; }
.cc-tbl tbody tr:hover td { background: var(--cc-surface-2); }
.cc-tbl td.r, .cc-tbl th.r { text-align: right; }
.cc-tbl .who { font-weight: 600; color: var(--cc-ink); }
.cc-tbl .sub2 { font-size: 12px; color: var(--cc-muted); margin-top: 2px; }
.cc-status { font-size: 11px; font-weight: 600; border-radius: var(--cc-radius-pill); padding: 3px 10px; display: inline-block; text-transform: capitalize; }
.cc-status.confirmed, .cc-status.active, .cc-status.paid { background: var(--cc-ok-bg); color: var(--cc-ok-ink); }
.cc-status.pending, .cc-status.processing, .cc-status.reviewing { background: var(--cc-warn-bg); color: var(--cc-warn-ink); }
.cc-status.completed { background: var(--cc-chip); color: var(--cc-soft); }
.cc-status.cancelled, .cc-status.disputed, .cc-status.failed { background: var(--cc-danger-bg); color: var(--cc-danger-ink); }

/* ── Feed (content-first home) ───────────────────────── */

/* two-column home: feed + context rail */

/* Large monitors (48" etc.): centered content grows a step so it uses the space
   instead of hugging the left with a wall of dead pixels. Normal screens unchanged. */
@media (min-width: 1700px) { .cc-maxw { max-width: 1220px; }  }

.cc-flabel { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cc-faint); margin: 20px 0 8px; display: flex; align-items: center; gap: 7px; }
.cc-flabel.first { margin-top: 14px; }
.cc-flabel .d { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-accent); }
.cc-flabel .more { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cc-accent); background: none; border: 0; text-transform: none; letter-spacing: 0; }

/* "Needs you" priority panel (tinted) */
.cc-needs { background: var(--cc-warn-bg); border: 1px solid var(--cc-warn-line); border-radius: var(--cc-radius-lg); overflow: hidden; }
.cc-needrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--cc-warn-line); }
.cc-needrow:last-child { border-bottom: 0; }
.cc-needrow > .d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cc-needrow .nl { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cc-needrow .nt { font-size: 13px; font-weight: 600; color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-needrow .ns { font-size: 12px; color: var(--cc-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-needrow .nv { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* context rail cards */

.cc-ract { font-size: 12px; color: var(--cc-soft); padding: 3px 0; line-height: 1.4; }

/* section header used by GuestHome + feed lists */

/* ── Sort bar (visible, sortable) ────────────────────── */
.cc-sortbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.cc-sortbar .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cc-faint); margin-right: 4px; }
.cc-sortopt { display: flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: var(--cc-radius-sm); font-size: 12.5px; font-weight: 600; color: var(--cc-soft); background: none; border: 1px solid transparent; }
.cc-sortopt:hover { background: var(--cc-surface-2); }
.cc-sortopt.on { color: var(--cc-accent); background: var(--cc-accent-tint); }
.cc-sortopt i { font-size: 14px; }

/* ── Forms ───────────────────────────────────────────── */
.cc-form { max-width: 640px; }
.cc-field { margin-bottom: 16px; }
.cc-field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--cc-soft); margin-bottom: 6px; }
.cc-input, .cc-textarea, .cc-select { width: 100%; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 10px 13px; font: inherit; color: var(--cc-ink); background: var(--cc-surface); outline: none; }
.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-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.cc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-hint { font-size: 12px; color: var(--cc-muted); margin-top: 5px; }
.cc-checks { display: flex; gap: 18px; flex-wrap: wrap; padding: 4px 0; }
.cc-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cc-soft); }
.cc-check input { width: 16px; height: 16px; accent-color: var(--cc-accent); }

/* ── Modal ───────────────────────────────────────────── */
.cc-modal-bg { position: fixed; inset: 0; background: rgba(20,18,15,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.cc-modal { background: var(--cc-surface); border-radius: var(--cc-radius-lg); width: 100%; max-width: 480px; padding: 24px; max-height: 90vh; overflow: auto; }
.cc-modal h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.cc-modal .sub { font-size: 13px; color: var(--cc-muted); margin-bottom: 18px; }
.cc-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ── Gig detail ──────────────────────────────────────── */
.cc-gd { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: start; }
.cc-gd-rail { position: sticky; top: 84px; }
.cc-gd-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--cc-soft); margin: 12px 0 6px; }
.cc-gd-meta span { display: flex; align-items: center; gap: 6px; }
.cc-gd-meta i { font-size: 15px; color: var(--cc-faint); }
.cc-gd-desc { font-size: 14px; line-height: 1.65; color: var(--cc-soft); white-space: pre-wrap; }
.cc-bigrate { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.cc-bigrate small { font-size: 13px; font-weight: 500; color: var(--cc-muted); }
.cc-rail-line { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--cc-line); }
.cc-rail-line:last-of-type { border-bottom: 0; }
.cc-rail-line .k { color: var(--cc-muted); }
.cc-rail-line .v { font-weight: 600; }
.cc-applied { font-size: 13px; font-weight: 600; color: var(--cc-ok-ink); background: var(--cc-ok-bg); border-radius: var(--cc-radius-md); padding: 10px; text-align: center; }

/* ── Applicants ──────────────────────────────────────── */
.cc-app-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--cc-line); }
.cc-app-row:last-child { border-bottom: 0; }
.cc-app-main { flex: 1; min-width: 0; }
.cc-app-nm { font-size: 14.5px; font-weight: 600; }
.cc-app-sub { font-size: 12.5px; color: var(--cc-muted); }
.cc-app-note { font-size: 12.5px; color: var(--cc-soft); margin-top: 4px; font-style: italic; }
.cc-app-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

/* ── Settings extras ─────────────────────────────────── */
.cc-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-pickopt { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: var(--cc-radius-pill); border: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-soft); }
.cc-pickopt.on { background: var(--cc-accent-tint); color: var(--cc-accent); border-color: var(--cc-accent-border); font-weight: 600; }
.cc-color-row { display: flex; align-items: center; gap: 12px; }
.cc-color-row input[type=color] { width: 46px; height: 38px; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); background: none; padding: 2px; cursor: pointer; }
.cc-saved { font-size: 13px; font-weight: 600; color: var(--cc-ok-ink); display: flex; align-items: center; gap: 5px; }

/* ── Tabs (admin) ────────────────────────────────────── */
.cc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--cc-line); margin-bottom: 20px; }
.cc-tab { font-size: 13.5px; font-weight: 600; color: var(--cc-muted); padding: 10px 14px; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cc-tab.on { color: var(--cc-accent); border-bottom-color: var(--cc-accent); }
.cc-tab:hover { color: var(--cc-ink); }

/* ── Search results ──────────────────────────────────── */
.cc-sr-group { margin-bottom: 28px; }
.cc-sr-group h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.cc-sr-group h3 .n { font-size: 12.5px; font-weight: 500; color: var(--cc-faint); margin-left: 7px; }

/* ── Avatars (image with initials fallback) + photo tiles ── */
.cc-avatar { border-radius: 50%; object-fit: cover; background: var(--cc-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; vertical-align: middle; }
.cc-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-tile-rm { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ── Image lightbox (portfolio viewer) ───────────────── */
.cc-lb { position: fixed; inset: 0; z-index: 80; background: rgba(15,14,12,.88); display: flex; align-items: center; justify-content: center; padding: 40px; }
.cc-lb-fig { position: relative; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.cc-lb-fig img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: var(--cc-radius-md); background: #000; }
.cc-lb-fig figcaption { color: #EDEAE3; font-size: 13px; font-weight: 500; text-align: center; }
.cc-lb-count { color: rgba(237,234,227,.6); font-size: 12px; }
.cc-lb-x { position: absolute; top: 14px; right: 16px; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cc-lb-x:hover { background: rgba(255,255,255,.22); }
.cc-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cc-lb-nav:hover { background: rgba(255,255,255,.22); }
.cc-lb-nav.prev { left: 16px; } .cc-lb-nav.next { right: 16px; }
.cc-lb-video { width: 80vw; max-width: 1100px; aspect-ratio: 16 / 9; max-height: 80vh; border: 0; border-radius: var(--cc-radius-md); background: #000; }
.cc-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cc-play .pb { width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ── Case studies ────────────────────────────────────── */
.cc-cs { padding: 14px 0; border-bottom: 1px solid var(--cc-line); }
.cc-cs:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-cs-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 5px; }
.cc-cs-body { font-size: 13.5px; line-height: 1.6; color: var(--cc-soft); white-space: pre-wrap; margin-bottom: 10px; }
.cc-cs-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cc-surface-2); }
.cc-cs-edit-row:last-child { border-bottom: 0; }
.cc-cs-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.cc-cs-thumb { position: relative; aspect-ratio: 4/3; border-radius: var(--cc-radius-md); overflow: hidden; border: 1px solid var(--cc-line); padding: 0; cursor: pointer; background: var(--cc-surface-2); }
.cc-cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-cs-thumb.on { outline: 2px solid var(--cc-accent); outline-offset: -2px; border-color: transparent; }
.cc-cs-thumb .chk { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--cc-accent); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ── Posts / activity feed ───────────────────────────── */
.cc-post-compose { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 10px; margin-bottom: 14px; }
.cc-post-compose .cc-textarea { background: var(--cc-surface); }
.cc-post { padding: 14px 0; border-bottom: 1px solid var(--cc-line); }
.cc-post:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cc-post-head .nm { font-size: 13.5px; font-weight: 600; }
.cc-post-head .mt { font-size: 11.5px; color: var(--cc-muted); }
.cc-post-x { margin-left: auto; background: none; border: 0; color: var(--cc-faint); cursor: pointer; padding: 4px; }
.cc-post-x:hover { color: var(--cc-danger-ink); }
.cc-post-body { font-size: 13.5px; line-height: 1.6; color: var(--cc-ink); white-space: pre-wrap; }
.cc-post-foot { display: flex; gap: 16px; margin-top: 10px; }
.cc-post-act { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: 600 12.5px/1 var(--cc-font); color: var(--cc-muted); }
.cc-post-act:hover { color: var(--cc-ink); }
.cc-post-act.on { color: var(--cc-accent); }
.cc-post-act span { font-weight: 500; }
.cc-post-comments { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cc-surface-2); display: flex; flex-direction: column; gap: 9px; }
.cc-comment { display: flex; gap: 9px; align-items: flex-start; }
.cc-comment-bd { font-size: 13px; line-height: 1.45; color: var(--cc-soft); }
.cc-comment-bd .cn { font-weight: 600; color: var(--cc-ink); }
.cc-comment-add { display: flex; gap: 8px; margin-top: 2px; }
.cc-comment-add .cc-input { padding: 7px 11px; }

/* ── Home activity feed ──────────────────────────────── */

/* ── Crew search-first entry ─────────────────────────── */

/* ── Photo crop modal ────────────────────────────────── */
.cc-crop { position: relative; overflow: hidden; border-radius: var(--cc-radius-md); background: #000; margin: 4px auto 14px; cursor: grab; touch-action: none; }
.cc-crop:active { cursor: grabbing; }
.cc-crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(20,18,12,.45); pointer-events: none; }
.cc-crop-zoom { width: 100%; margin: 0 0 4px; }

/* ── Star rating input ───────────────────────────────── */
.cc-stars-in { display: flex; gap: 4px; }
.cc-stars-in button { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--cc-line); padding: 0; }
.cc-stars-in button.on { color: var(--cc-accent); }

/* ── Auth (signup / login) ───────────────────────────── */
/* Split-screen auth: editorial photo + clean form panel */
.cc-auth { min-height: 100vh; width: 100%; display: grid; grid-template-columns: 45% 55%; background: var(--cc-canvas); }
.cc-auth-photo { background-color: #1b1915; background-image: linear-gradient(180deg, rgba(20,18,12,.05), rgba(20,18,12,.5)), url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=1400&q=70'); background-size: cover; background-position: center; }
.cc-auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 32px; overflow: auto; }
.cc-auth-inner { width: 100%; max-width: 430px; }
.cc-auth-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 4px; }
.cc-auth-brand .cc-wm { font-size: 28px; color: var(--cc-ink); margin: 0; }
.cc-auth-h { text-align: center; font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 4px 0 24px; }
.cc-auth-card { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: 22px; box-shadow: 0 1px 3px rgba(20,18,12,.05); }
.cc-auth-card-lbl { font-size: 12px; font-weight: 600; color: var(--cc-soft); margin-bottom: 14px; }
.cc-auth-sub { font-size: 13.5px; color: var(--cc-muted); margin-bottom: 18px; }

/* floating-label field */
.cc-fld { display: flex; align-items: center; gap: 8px; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); background: var(--cc-surface); padding: 7px 13px; margin-bottom: 12px; }
.cc-fld:focus-within { border-color: var(--cc-accent); box-shadow: 0 0 0 3px var(--cc-accent-tint); }
.cc-fld-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-fld-lbl { font-size: 11px; color: var(--cc-muted); }
.cc-fld input, .cc-fld select { border: 0; background: transparent; outline: 0; width: 100%; font: inherit; font-size: 14px; color: var(--cc-ink); padding: 1px 0; }
.cc-eye { background: none; border: 0; color: var(--cc-muted); cursor: pointer; padding: 2px; display: flex; }
.cc-eye:hover { color: var(--cc-ink); }

.cc-btn.pill { border-radius: var(--cc-radius-pill); }
.cc-btn.ink { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }
.cc-btn.ink:hover { background: var(--cc-ink); filter: brightness(1.15); }
.cc-btn.lg { padding: 12px 20px; font-size: 14px; }

.cc-auth-forgot { text-align: center; margin-top: 12px; }
.cc-auth-forgot a { font-size: 13px; font-weight: 600; color: var(--cc-accent-ink); cursor: pointer; }
.cc-auth-alt { text-align: center; font-size: 13.5px; color: var(--cc-muted); margin-top: 22px; }
.cc-auth-alt a { color: var(--cc-accent-ink); font-weight: 700; cursor: pointer; }
.cc-auth-demo { margin-top: 22px; border-top: 1px solid var(--cc-line); padding-top: 16px; }
.cc-auth-demo .lbl { text-align: center; font-size: 12px; color: var(--cc-faint); margin-bottom: 10px; }

.cc-segment { display: flex; background: var(--cc-canvas); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 3px; margin-bottom: 16px; }
.cc-segment button { flex: 1; border: 0; background: none; padding: 9px; border-radius: var(--cc-radius-sm); font: inherit; font-size: 13px; font-weight: 600; color: var(--cc-soft); cursor: pointer; }
.cc-segment button.on { background: var(--cc-surface); color: var(--cc-ink); box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.cc-or { text-align: center; font-size: 12px; color: var(--cc-faint); margin: 14px 0 10px; }

@media (max-width: 820px) {
  .cc-auth { grid-template-columns: 1fr; }
  .cc-auth-photo { display: none; }
}

/* ── Mobile ──────────────────────────────────────────── */
.cc-burger { display: none; background: none; border: 0; color: var(--cc-soft); font-size: 22px; padding: 4px 6px; }
.cc-nav-backdrop { display: none; }
@media (max-width: 860px) {
  .cc-burger { display: inline-flex; align-items: center; }
  .cc-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; height: 100vh; }
  .cc-side.open { transform: translateX(0); }
  .cc-nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; }
  .cc-main { width: 100%; }
  .cc-top { padding: 11px 14px; }
  .cc-search { max-width: none; }
  .cc-body { padding: 16px 14px 32px; }
  .cc-pcols, .cc-gd { grid-template-columns: 1fr; }
  .cc-gd-rail { position: static; }
  .cc-msg { grid-template-columns: 1fr; height: auto; }
  .cc-convos { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--cc-line); }
  .cc-thread { min-height: 360px; }
  .cc-row { flex-wrap: wrap; gap: 10px 14px; }
  .cc-ratecol, .cc-act { min-width: 0; text-align: left; }
  .cc-field-row { grid-template-columns: 1fr; }
  .cc-pactions { flex-wrap: wrap; }
  .cc-hdr { flex-wrap: wrap; }
  .cc-card { overflow-x: auto; }
  .cc-tbl { min-width: 520px; }
  .cc-grid { grid-template-columns: 1fr; }
}

/* ── Notifications bell ──────────────────────────────── */
.cc-bell { position: relative; background: none; border: 1px solid var(--cc-chrome-line); border-radius: var(--cc-radius-md); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--cc-chrome-soft); font-size: 18px; flex-shrink: 0; }
.cc-bell:hover { background: var(--cc-chrome-2); color: var(--cc-chrome-ink); }
.cc-bell-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--cc-accent); border: 1.5px solid var(--cc-chrome); }
.cc-note { display: flex; gap: 11px; align-items: flex-start; padding: 10px; border-radius: var(--cc-radius-sm); }
.cc-note:hover { background: var(--cc-surface-2); }
.cc-note i { color: var(--cc-muted); margin-top: 2px; }
.cc-note .t { font-size: 13px; line-height: 1.4; color: var(--cc-ink); }
.cc-note .ti { font-size: 11.5px; color: var(--cc-faint); margin-top: 2px; }

/* ── Image uploader (drag & drop) ───────────────────────── */
.cc-up { width: 100%; }
.cc-drop {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 22px 16px; cursor: pointer;
  border: 1.5px dashed var(--cc-line); border-radius: var(--cc-radius-md);
  background: var(--cc-surface-2); color: var(--cc-muted);
  font: 500 13.5px/1.3 var(--cc-font); text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.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.busy { cursor: progress; opacity: .8; }
.cc-drop.compact { padding: 11px 14px; font-size: 13px; }
.cc-drop i { color: inherit; }
.cc-drop-err { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12.5px; color: var(--cc-danger-ink); }
.cc-spin { animation: cc-spin .7s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ── Live-site teaser gate (logged-out visitors) ────────── */
.cc-lock {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative;
}
.cc-lock-blur {
  filter: blur(5px); -webkit-filter: blur(5px); user-select: none; pointer-events: none;
  color: var(--cc-ink); font: 700 14px/1 var(--cc-font); font-variant-numeric: tabular-nums; opacity: .8;
}
.cc-lock-i { color: var(--cc-faint); flex-shrink: 0; }
.cc-lock:hover .cc-lock-i { color: var(--cc-accent-ink); }
.cc-lock.wide .cc-lock-blur { filter: blur(7px); -webkit-filter: blur(7px); font-size: 26px; }

.cc-mbar { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13px; border-bottom: 1px solid var(--cc-line); }
.cc-mbar i { flex-shrink: 0; }
.cc-mbar > span { line-height: 1.4; }
.cc-mbar.demo { background: var(--cc-warn-bg); color: var(--cc-warn-ink); }
.cc-mbar.demo a { margin-left: auto; font-weight: 600; cursor: pointer; white-space: nowrap; color: inherit; text-decoration: underline; }
.cc-mbar.guest { background: var(--cc-accent-tint); color: var(--cc-accent-ink); }
.cc-mbar.guest > span { margin-right: auto; }

.cc-gate { text-align: center; padding: 30px 24px; }
.cc-gate > i { color: var(--cc-accent); }
.cc-gate h3 { margin: 8px 0 4px; font-size: 17px; }
.cc-gate p { color: var(--cc-muted); font-size: 14px; max-width: 440px; margin: 0 auto 14px; line-height: 1.5; }

/* Editorial landing hero (logged-out) */
.cc-herobig { position: relative; border-radius: var(--cc-radius-lg); overflow: hidden; margin-bottom: 10px;
  background-color: #1b1915; background-position: center; background-size: cover; background-repeat: no-repeat;
  background-image: linear-gradient(110deg, rgba(20,18,12,.86) 0%, rgba(20,18,12,.55) 50%, rgba(20,18,12,.22) 100%), url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=1600&q=70');
  padding: 60px 44px; }
.cc-herobig-in { max-width: 600px; }
.cc-herobig h1 { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.04; color: #fff; }
.cc-herobig p { margin-top: 14px; font-size: 16px; color: rgba(255,255,255,.84); max-width: 50ch; line-height: 1.55; }
.cc-herobig .cc-hero-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.cc-herobig .cc-btn:not(.primary) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.cc-herobig .cc-btn:not(.primary):hover { background: rgba(255,255,255,.2); }
@media (max-width: 700px) { .cc-herobig { padding: 40px 22px; } .cc-herobig h1 { font-size: 32px; } }
.cc-hero-cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.cc-btn.lg { padding: 11px 20px; font-size: 15px; }

/* ── Admin dashboard helpers ────────────────────────────── */
.muted { color: var(--cc-muted); }
.cc-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; padding: 10px 2px; }
.cc-caps .cc-check { font-size: 12.5px; }
.cc-mqa { display: flex; flex-direction: column; gap: 9px; }
.cc-mqa-msg { border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm); padding: 8px 11px; font-size: 13px; line-height: 1.45; }
.cc-mqa-msg b { font-size: 12px; }

/* ─────────────────────────────────────────────────────────────
   Typography refinement — Schibsted display + Onest support
   Headings/names/numbers ride --cc-font (Schibsted). Supporting copy
   and micro-labels move to --cc-font-soft (Onest), de-tracked and a
   touch heavier so small text reads smooth + solid, not spindly
   wide-tracked "dashboard" caps. (Over-listed selectors are harmless.)
   ───────────────────────────────────────────────────────────── */
.cc-navlbl, .cc-menu-h, .cc-rtag, .cc-gear-cat, .cc-sectitle,
.cc-tbl th, .cc-flabel, .cc-rcard h4, .cc-sortbar .lbl, .cc-cell .k, .cc-statstrip .k {
  font-family: var(--cc-font-soft);
  letter-spacing: .015em;
}
/* Stat / rating labels read smoothest in sentence case, not wide caps */
.cc-cell .k, .cc-statstrip .k {
  text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--cc-muted);
}
/* Supporting copy → Onest, weight 500 so it isn't thin */
.cc-hdr .cnt, .cc-l2, .cc-l2 i, .cc-crew-role, .cc-crew-meta, .cc-evcard-meta,
.cc-evcard-foot, .cc-menu-i .sub, .cc-rate small, .cc-apps,
.cc-ago, .cc-hint, .cc-note, .cc-state-s, .cc-scope, .cc-demo-tag {
  font-family: var(--cc-font-soft);
  font-weight: 500;
}

/* ═══════════════ Discovery search bar (role / where / when) ═══════════════ */
.cc-disc-wrap { padding: 6px 0 2px; }
.cc-disc { display: flex; align-items: stretch; background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-pill); box-shadow: 0 1px 4px rgba(20,18,12,.07); max-width: 880px; margin: 0 auto; }
.cc-disc-seg { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 9px 20px;
  border-radius: var(--cc-radius-pill); min-width: 0; }
.cc-disc-seg + .cc-disc-seg { border-left: 1px solid var(--cc-line); }
.cc-disc-seg:hover { background: var(--cc-surface-2); }
.cc-disc-seg .lbl { font: 600 11px/1 var(--cc-font); letter-spacing: .01em; color: var(--cc-ink); margin-bottom: 4px; }
.cc-disc-seg input { border: 0; background: transparent; font: 500 13.5px/1.2 var(--cc-font-soft); color: var(--cc-ink); width: 100%; outline: none; padding: 0; }
.cc-disc-seg input::placeholder { color: var(--cc-faint); font-weight: 500; }
.cc-disc-when { display: flex; align-items: center; gap: 6px; }
.cc-disc-when input { width: 7.6em; }
.cc-disc-when .arrow { color: var(--cc-faint); font-size: 12px; }
.cc-disc-go { align-self: center; margin: 6px; width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 50%;
  background: var(--cc-accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cc-disc-go:hover { filter: brightness(1.06); }
@media (max-width: 760px) {
  .cc-disc { flex-direction: column; align-items: stretch; border-radius: var(--cc-radius-lg); padding: 6px; }
  .cc-disc-seg { padding: 11px 14px; }
  .cc-disc-seg + .cc-disc-seg { border-left: 0; border-top: 1px solid var(--cc-line); }
  /* full-width search button below the stacked fields (was a floating circle) */
  .cc-disc-go { width: 100%; height: 46px; border-radius: var(--cc-radius-md); margin: 8px 0 0; align-self: stretch; gap: 8px; }
  .cc-disc-go::after { content: 'Search'; font: 600 14px/1 var(--cc-font); color: #fff; }
}

/* ═══════════════ Discovery rails (Jobs home) ═══════════════ */
.cc-railsec { margin-top: 28px; }
.cc-railhead { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.cc-railhead h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.cc-railhead .sub { font-size: 12.5px; color: var(--cc-soft); font-family: var(--cc-font-soft); font-weight: 500; }
.cc-railhead .nav { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.cc-railhead .nav .rb { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cc-line); background: var(--cc-surface);
  color: var(--cc-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cc-railhead .nav .rb:hover { background: var(--cc-surface-2); }
.cc-rail { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 2px 6px; }
.cc-rail::-webkit-scrollbar { display: none; }
.cc-rail > * { flex: 0 0 250px; }
@media (max-width: 600px) { .cc-rail > * { flex-basis: 80%; } }

/* ═══════════════ Gig card (visual) ═══════════════ */
.cc-gigcard { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg);
  overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(20,18,12,.05); display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease; }
.cc-gigcard:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(20,18,12,.11); }

.cc-gc-scope { font: 600 10px/1 var(--cc-font-soft); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.13); color: #fff; border-radius: var(--cc-radius-sm); padding: 4px 8px; display: inline-flex; align-items: center; gap: 5px; }
.cc-gc-fav { background: rgba(255,255,255,.93); color: var(--cc-ink); border-radius: var(--cc-radius-pill);
  padding: 4px 9px; font: 600 10px/1 var(--cc-font); white-space: nowrap; }
/* Provisional badge — new/unrated poster, lower visibility until vouched. */
.cc-gc-prov { font: 700 10px/1 var(--cc-font-soft); letter-spacing: .04em; text-transform: uppercase;
  background: rgba(0,0,0,.34); color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--cc-radius-sm); padding: 4px 8px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cc-gc-prov i { font-size: 11px; }
/* Poster reputation on a gig card. */
.cc-gc-prating { color: var(--cc-accent); font-weight: 600; }
.cc-gc-prating i { color: var(--cc-accent) !important; }
.cc-gc-role { position: relative; z-index: 1; font-size: 21px; font-weight: 700; letter-spacing: -.025em; line-height: 1.08; color: #fff; }
.cc-gc-body { padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cc-gc-ttl { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-gc-meta { display: flex; flex-direction: column; gap: 3px; font: 500 11.5px/1.35 var(--cc-font-soft); color: var(--cc-soft); }
.cc-gc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.cc-gc-meta i { color: var(--cc-faint); font-size: 13px; }
.cc-gc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--cc-line); }
.cc-gc-rate { font: 700 14px/1 var(--cc-font); } .cc-gc-rate small { font: 500 10px var(--cc-font-soft); color: var(--cc-muted); }
.cc-gc-apps { font: 500 11px var(--cc-font-soft); color: var(--cc-muted); }

/* ═══════════════ Crew split (browse): list left, live profile right ═══════════════ */
.cc-maxw.wide { max-width: 1320px; }
.cc-split2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; align-items: start; margin-top: 14px; }
.cc-split2-list { padding-right: 22px; }
.cc-split2-panel { position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow-y: auto;
  border-left: 1px solid var(--cc-line); padding: 2px 4px 24px 24px; }
.cc-split2-panel::-webkit-scrollbar { width: 8px; } .cc-split2-panel::-webkit-scrollbar-thumb { background: var(--cc-line); border-radius: 8px; }
.cc-clist { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }

.cc-embed .cc-pcols.embed { grid-template-columns: 1fr; }
.cc-embed .cc-card:first-child { margin-top: 0; }
@media (max-width: 980px) {
  .cc-split2 { grid-template-columns: 1fr; }
  .cc-split2-panel { display: none; }
  .cc-split2-list { padding-right: 0; }
}

/* Crew split — give the profile panel a touch more room + fit the embedded profile */
.cc-split2 { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.cc-clist { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cc-embed .cc-phead { flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; }
.cc-embed .cc-pname h1 { font-size: 21px; letter-spacing: -.02em; line-height: 1.12; }
.cc-embed .cc-roleline { font-size: 13px; }
.cc-embed .cc-pactions { width: 100%; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cc-embed .cc-pactions .cc-btn { flex: 0 0 auto; }
.cc-embed .cc-strip { flex-wrap: wrap; }
.cc-embed .cc-strip .cc-cell { flex: 1 1 44%; }
.cc-embed .cc-purl { font-size: 11px; word-break: break-all; }

/* Gig card save heart (Airbnb parity) */
.cc-gc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-gc-heart { background: rgba(255,255,255,.16); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.cc-gc-heart:hover { background: rgba(255,255,255,.30); }
.cc-gc-heart.on { color: var(--cc-accent-onchrome); }

/* Crew card save heart */

/* ═══════════ Profile preview = a distinct, elevated record (not a card) ═══════════ */
.cc-split2-panel { border-left: 0; padding: 6px 4px 30px; }
.cc-embed { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg);
  box-shadow: 0 10px 34px rgba(20,18,12,.10); overflow: hidden; }
/* inner section-cards collapse into one continuous sheet, hairline-divided */
.cc-embed .cc-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 18px 22px; }
.cc-embed .cc-sec { margin-top: 0 !important; }
.cc-embed .cc-pcols { display: block; gap: 0; padding: 0; }
.cc-embed .cc-pcols > div > .cc-card { border-top: 1px solid var(--cc-line); }
/* header: soft cover banner + big avatar overlapping it */
.cc-embed .cc-phead-card { padding: 0 0 18px; }
.cc-pcover { height: 96px; background: linear-gradient(120deg, var(--cc-accent-tint) 0%, var(--cc-surface-2) 72%); }
.cc-embed .cc-phead { flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 22px; margin-top: -52px; }
.cc-embed .cc-phead > .cc-avatar { width: 96px !important; height: 96px !important; font-size: 32px !important;
  border: 4px solid var(--cc-surface); box-shadow: 0 3px 10px rgba(20,18,12,.14); }
.cc-embed .cc-pname { margin-top: 2px; }
.cc-embed .cc-pname h1 { font-size: 24px; letter-spacing: -.02em; }
.cc-embed .cc-pactions { width: 100%; margin-top: 12px; }
.cc-embed .cc-strip { margin: 14px 22px 0; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); overflow: hidden; }

/* Native date/time inputs default to the OS mono-ish font — force the app face */
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field {
  font-family: var(--cc-font-soft);
}

/* ── 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-accent-tint); border: 1px solid var(--cc-accent-border); }
.cc-fresh-banner > .ti { color: var(--cc-accent); 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 */

.cc-evhero-img { background-color: var(--cc-chrome); background-size: cover; background-position: center; min-height: 190px; padding: 16px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.cc-evhero-img h1 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; color: #fff; line-height: 1.05; }
.cc-evhero-img .cc-evcard-kind { align-self: flex-start; }
.cc-evhero-meta { padding: 13px 20px; }

/* Combobox dropdown (search bar role / where) */
.cc-combo { position: relative; width: 100%; }
.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; }
.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-rolepick input { width: 100%; }
.cc-rolemenu { min-width: 280px; max-width: 340px; max-height: 340px; }
@media (max-width: 640px) { .cc-rolemenu { min-width: 0; max-width: none; right: 0; } }
.cc-role-grp + .cc-role-grp { margin-top: 2px; }
.cc-role-dept { position: sticky; top: 0; z-index: 1; background: var(--cc-surface); padding: 8px 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); }

/* 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; }
.cc-tierpick { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cc-tierbtn { background: var(--cc-surface-2); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 7px 11px; font: 700 13px/1 var(--cc-font); letter-spacing: 1px; color: var(--cc-faint); cursor: pointer; }
.cc-tierbtn:hover { border-color: var(--cc-faint); }
.cc-tierbtn.on { background: var(--cc-accent-tint); border-color: var(--cc-accent-border); color: var(--cc-accent-ink); }
/* DateField rests as a normal text field (app font); pointer cursor to invite the picker */
input[readonly].cc-input, .cc-disc-when input[readonly] { cursor: pointer; }

/* 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-accent); 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; }

/* ════════════════ 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; }
  .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. */
  .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; }

  /* 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 { grid-template-columns: 1fr; height: auto; }
  .cc-convos { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--cc-line); }
  .cc-thread { min-height: 56vh; }
  .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-accent-ink); background: var(--cc-accent-tint); border-color: var(--cc-accent-border); }
.cc-reqchip.ok i { color: var(--cc-accent); }
.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-accent-ink);
  background: var(--cc-accent-tint); 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; }

/* radio option rows */
.cc-radio { display: flex; flex-direction: column; gap: 8px; }
.cc-radioopt { display: flex; align-items: center; gap: 9px; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md);
  padding: 11px 13px; cursor: pointer; font: 500 13.5px/1.2 var(--cc-font-soft); color: var(--cc-ink); }
.cc-radioopt i { color: var(--cc-faint); }
.cc-radioopt.on { border-color: var(--cc-accent); background: var(--cc-accent-tint); color: var(--cc-accent-ink); }
.cc-radioopt.on i { color: var(--cc-accent); }
.cc-radioopt input { accent-color: var(--cc-accent); flex-shrink: 0; }

/* ════════════ Post-a-job popup (single modal, dynamic fields) ════════════ */
.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: center; 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-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); }
.cc-postmodal-body { overflow-y: auto; padding: 16px 20px 8px; display: flex; flex-direction: column; gap: 14px; }
.cc-postmodal-body .cc-field { margin: 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); }
/* type selector — pick first, fields below adapt */
.cc-typeseg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.cc-typeseg-opt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 13px/1 var(--cc-font-soft); color: var(--cc-soft); background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); padding: 10px 8px; cursor: pointer; }
.cc-typeseg-opt.on { background: var(--cc-accent-tint); border-color: var(--cc-accent); color: var(--cc-accent-ink); }
.cc-typeseg-opt i { color: var(--cc-faint); }
.cc-typeseg-opt.on i { color: var(--cc-accent); }
/* project line on the job card */

/* ════════ 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; }
/* 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; }

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

/* Messages button unread badge */
.cc-msgbtn { position: relative; }
.cc-msgbadge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--cc-radius-pill); background: var(--cc-accent); color: #fff; font: 700 10px/17px var(--cc-font); text-align: center; box-shadow: 0 0 0 2px var(--cc-chrome); }

/* ════════════════════ Apply credits ════════════════════ */
/* Header pill: a worker's weekly apply balance, in the dark top chrome. */
.cc-credpill { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 11px; border-radius: var(--cc-radius-pill); border: 1px solid var(--cc-chrome-line); background: none; color: var(--cc-chrome-soft); font-size: 13px; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.cc-credpill:hover { background: var(--cc-chrome-2); color: var(--cc-chrome-ink); }
.cc-credpill i { color: var(--cc-accent-onchrome); }
.cc-credpill b { color: var(--cc-chrome-ink); font-weight: 700; }
.cc-credpill-lbl { color: var(--cc-chrome-soft); }
.cc-credpill.empty { border-color: var(--cc-warn-ink); }
.cc-credpill.empty i, .cc-credpill.empty b { color: var(--cc-warn-ink); }
@media (max-width: 640px) { .cc-credpill .cc-credpill-lbl { display: none; } .cc-credpill { padding: 0 9px; } }
/* 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; }

/* ════════════════════ Invoices ════════════════════ */
.cc-invstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.cc-invstat { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: 14px 16px; }
.cc-invstat .k { font: 600 11px/1 var(--cc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); }
.cc-invstat .v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.cc-sortopt .cc-num { margin-left: 5px; color: var(--cc-muted); }
/* editor line items */
.cc-invlines { display: flex; flex-direction: column; gap: 7px; }
.cc-invline { display: grid; grid-template-columns: 1fr 60px 92px 92px 26px; gap: 8px; align-items: center; }
.cc-invline-h { font: 600 10.5px/1 var(--cc-font); letter-spacing: .04em; text-transform: uppercase; color: var(--cc-faint); padding: 0 2px; }
.cc-invline-h span:nth-child(2), .cc-invline-h span:nth-child(3), .cc-invline-h span:nth-child(4) { text-align: right; }
.cc-invline .cc-input { padding: 9px 11px; }
.cc-invamt { text-align: right; font-weight: 600; color: var(--cc-ink); }
.cc-invx { background: none; border: 0; color: var(--cc-muted); cursor: pointer; display: flex; justify-content: center; }
.cc-invx:hover { color: var(--cc-danger-ink); }
.cc-invcolors { display: flex; gap: 9px; }
.cc-invswatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.cc-invswatch.on { border-color: var(--cc-ink); }
.cc-inv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* the invoice document (clean white, brand accent = --inv) */
.cc-invoice { background: #fff; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); overflow: hidden; max-width: 720px; box-shadow: 0 4px 20px rgba(20,18,12,.07); }
.cc-inv-band { height: 8px; background: var(--inv, var(--cc-accent)); }
.cc-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 26px 6px; }
.cc-inv-from { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--cc-ink); }
.cc-inv-sub { color: var(--cc-muted); font-size: 13px; margin-top: 2px; }
.cc-inv-status { font: 700 11px/1 var(--cc-font); text-transform: uppercase; letter-spacing: .04em; padding: 6px 11px; border-radius: var(--cc-radius-pill); background: var(--cc-chip); color: var(--cc-muted); flex-shrink: 0; }
.cc-inv-status.confirmed { background: var(--cc-ok-bg); color: var(--cc-ok-ink); }
.cc-inv-status.pending { background: var(--cc-warn-bg); color: var(--cc-warn-ink); }
.cc-inv-parties { display: flex; justify-content: space-between; gap: 16px; padding: 14px 26px; flex-wrap: wrap; }
.cc-inv-lbl { font: 600 10.5px/1 var(--cc-font); text-transform: uppercase; letter-spacing: .06em; color: var(--cc-faint); }
.cc-inv-strong { font-weight: 700; color: var(--cc-ink); margin-top: 3px; }
.cc-inv-muted { color: var(--cc-muted); font-size: 13px; }
.cc-inv-dates { text-align: right; display: flex; flex-direction: column; gap: 4px; color: var(--cc-soft); font-size: 13px; }
.cc-inv-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.cc-inv-table th { text-align: left; font: 600 10.5px/1 var(--cc-font); text-transform: uppercase; letter-spacing: .05em; color: var(--cc-faint); padding: 10px 26px; border-bottom: 1px solid var(--cc-line); }
.cc-inv-table th.r, .cc-inv-table td.r { text-align: right; }
.cc-inv-table td { padding: 11px 26px; border-bottom: 1px solid var(--cc-line); color: var(--cc-ink); font-size: 14px; }
.cc-inv-totalrow { display: flex; justify-content: space-between; padding: 16px 26px; font-weight: 800; font-size: 18px; color: var(--cc-ink); border-top: 2px solid var(--inv, var(--cc-accent)); }
.cc-inv-notes { padding: 2px 26px 24px; color: var(--cc-muted); font-size: 13px; white-space: pre-wrap; }
@media (max-width: 640px) { .cc-invstats { grid-template-columns: 1fr 1fr; } .cc-invline { grid-template-columns: 1fr 48px 78px 78px 24px; gap: 6px; } }
/* Invoice document on phones: tighter cell padding (~16px), and fold the narrow
   Qty column (2nd cell) in under the Description so the four-column table stops
   overflowing the paper. The line still reads Rate × Amount; qty is the low-value
   column and its figure is implied by Amount ÷ Rate, so collapsing it keeps the
   line legible rather than clipped. */
@media (max-width: 640px) {
  .cc-inv-head, .cc-inv-parties, .cc-inv-totalrow, .cc-inv-notes { padding-left: 16px; padding-right: 16px; }
  .cc-inv-table th, .cc-inv-table td { padding-left: 16px; padding-right: 16px; }
  .cc-inv-table th:nth-child(2), .cc-inv-table td:nth-child(2) { display: none; }
}

/* ── Visible slots ("3 of 5 filled") — makes applying feel finite ── */
.cc-slots { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 600 11px var(--cc-font-soft); color: var(--cc-accent-ink);
  background: var(--cc-accent-tint); border: 1px solid var(--cc-accent-border);
  border-radius: var(--cc-radius-pill); padding: 2px 9px; }
.cc-slots i { color: var(--cc-accent); }
.cc-slots .cc-num { font-size: 11px; color: inherit; }
.cc-slots.lg { font-size: 12.5px; padding: 4px 12px; }
.cc-slots.lg .cc-num { font-size: 12.5px; }
.cc-slots.full { color: var(--cc-ok-ink); background: var(--cc-ok-bg); border-color: transparent; }
.cc-slots.full i { color: var(--cc-ok-ink); }

/* GigDetail rail: a slim positions bar under the rate. */
.cc-slotbar-wrap { margin-top: 2px; }
.cc-slotbar { height: 6px; border-radius: 3px; background: var(--cc-line); overflow: hidden; margin: 6px 0 5px; }
.cc-slotbar-fill { display: block; height: 100%; border-radius: 3px; background: var(--cc-accent); transition: width .3s ease; }
.cc-slotbar-fill.full { background: var(--cc-ok-ink); }
.cc-slot-note { font: 500 11.5px var(--cc-font-soft); color: var(--cc-muted); display: flex; align-items: center; gap: 5px; }
.cc-slot-note.full { color: var(--cc-ok-ink); font-weight: 600; }
.cc-slot-note.full i { color: var(--cc-ok-ink); }

@media print {
  body * { visibility: hidden; }
  .cc-invoice, .cc-invoice * { visibility: visible; }
  .cc-invoice { position: absolute; left: 0; top: 0; box-shadow: none !important; border: 0; max-width: 100%; border-radius: 0 !important; }
  .cc-side, .cc-dock, .cc-top, .cc-mbar, .cc-inv-actions, .cc-back, .cc-nav-backdrop { display: none !important; }
}

/* ============================================================
   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 (both chromes keep this). */
body {
  background:
    radial-gradient(78% 60% at 16% 0%, #F0EEE7, transparent 60%),
    radial-gradient(70% 55% at 100% 16%, #EDE9DF, transparent 60%),
    var(--cc-canvas);
  background-attachment: fixed;
}

/* ── Floating DOCK ─────────────────────────────────────── */
.cc-dock {
  width: var(--dock-w, 76px);
  flex-shrink: 0; align-self: flex-start;
  margin: 20px 0 20px 20px;
  height: calc(100vh - 40px); position: sticky; top: 20px;
  background: var(--chr-bg); border: 1px solid var(--chr-brd);
  border-radius: 24px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  box-shadow: 0 22px 44px -20px rgba(45,38,28,.32), 0 2px 6px rgba(45,38,28,.10);
  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);
}
.cc-dock-wm { font: 800 19px/1 var(--cc-font); letter-spacing: -.03em; color: var(--chr-tx); white-space: nowrap; flex: 1; }
.cc-dock-wm .dot { color: var(--acc2); }
.cc-dock-collapse, .cc-dock-expand {
  flex-shrink: 0; border: 0; background: none; color: var(--chr-mut);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cc-dock-collapse { width: 30px; height: 30px; border-radius: 9px; }
.cc-dock-collapse.cc-dock-lbl { display: var(--label-disp, none); }
.cc-dock-collapse:hover, .cc-dock-expand:hover { background: var(--chr-raise); color: var(--chr-tx); }
.cc-dock-expand { display: var(--exp-disp, flex); align-self: center; width: 38px; height: 34px; 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: var(--item-pad, 10px 0);
  border-radius: 12px; color: var(--chr-mut); cursor: pointer; white-space: nowrap;
  border: 0; background: none; width: 100%; position: relative;
  font-size: 13.5px; font-weight: 500; text-align: left;
  font-family: var(--cc-font-soft);
}
.cc-dock-nav .cc-dock-ico { font-size: 21px; flex-shrink: 0; }
.cc-dock-nav .cc-dock-lbl { flex: 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; }
.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: var(--item-pad, 10px 0);
  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; }
.cc-dock-me-id .md { font-size: 10.5px; color: var(--chr-mut); overflow: hidden; text-overflow: ellipsis; display: block; }

/* ── Main column + floating TOP BAR ────────────────────── */
.cc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 24px 18px; gap: 16px; }
.cc-top {
  display: flex; align-items: center; gap: 13px;
  height: 58px; flex-shrink: 0; padding: 0 12px 0 16px;
  border-radius: 18px; border: 1px solid var(--chr-brd); background: var(--chr-bg);
  box-shadow: 0 14px 30px -18px rgba(45,38,28,.22), 0 1px 3px rgba(45,38,28,.05);
  position: sticky; top: 20px; z-index: 20;
  transition: background .2s, border-color .2s;
}
.cc-search {
  flex: 1; max-width: 420px; 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; }

/* 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);
}

/* Theme popover (always light, floats over the cream). */
.cc-themepop-wrap { margin-left: 0; position: relative; }
.cc-themepop {
  position: absolute; top: 47px; right: 0; width: 248px; z-index: 30;
  background: #fff; border: 1px solid #DBD6CB; border-radius: 16px; padding: 14px; color: #1B1915;
  box-shadow: 0 24px 55px -16px rgba(45,38,28,.45);
}
.cc-themepop-lbl { font: 600 10.5px/1 var(--cc-font-soft); letter-spacing: .1em; text-transform: uppercase; color: #8B8579; margin-bottom: 9px; }
.cc-chromeseg { display: flex; background: #F3F1EC; border: 1px solid #DBD6CB; border-radius: 11px; padding: 3px; gap: 3px; margin-bottom: 14px; }
.cc-chromeseg-b {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px;
  border-radius: 8px; border: 0; background: none; cursor: pointer;
  font: 600 12.5px/1 var(--cc-font-soft); color: #5F5C55;
}
.cc-chromeseg-b.on { background: #1B1915; color: #fff; }
.cc-chromeseg-b:last-child.on { background: #fff; color: #1B1915; border: 1px solid #DBD6CB; }
.cc-scenegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-scene-sw {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: 11px; border: 1px solid #DBD6CB; background: none; cursor: pointer; text-align: left;
}
.cc-scene-sw:hover { background: #F7F5EF; }
.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; color: #1B1915; }
.cc-scene-sw .ck { color: var(--acc); }

/* CreditsPill on the floating bar. */
.cc-credpill { height: 36px; border-color: var(--chr-brd); color: var(--chr-mut); }
.cc-credpill:hover { background: var(--chr-raise); color: var(--chr-tx); }
.cc-credpill i { color: var(--acc2); }
.cc-credpill b { color: var(--chr-tx); font-family: var(--cc-font); }
.cc-credpill-lbl { color: var(--chr-mut); }

/* 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(--acc); 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) ───────────────────────────────── */
.cc-home { display: flex; gap: 16px; align-items: flex-start; }
.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; }
.cc-home-toggle { display: flex; background: #fff; 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); }
.cc-home-toggle button.on { background: var(--cc-ink); color: #fff; }

/* Cards on cream. */
.cc-hcard {
  background: #fff; 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: #fff; 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: #fff; 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 var(--cc-font-soft); color: var(--tx); background: none; border: 0; cursor: pointer; }

/* Open-call gig card (Home). */
.cc-hgig-top { display: flex; align-items: center; gap: 10px; }
.cc-hgig-mark { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--cc-font); flex-shrink: 0; background: #1B1915; color: var(--acc2); }
.cc-hgig-mark.alt { background: #2E2A22; color: #EDEAE3; }
.cc-hgig-tag { display: inline-flex; align-items: center; gap: 5px; 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-hgig-tag.neutral { color: var(--cc-soft); background: var(--cc-surface-2); border-color: var(--cc-line); }
.cc-hgig-by { font-size: 12px; color: var(--cc-faint); }
.cc-hgig-save { margin-left: auto; color: var(--cc-faint); background: none; border: 0; cursor: pointer; display: flex; }
.cc-hgig-save.on { color: var(--acc); }
.cc-hgig-role { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cc-hgig-role .r { font: 700 20px/1.1 var(--cc-font); letter-spacing: -.01em; color: var(--cc-ink); }
.cc-hgig-role .x { color: var(--cc-muted); font-size: 15px; }
.cc-hgig-rate { font: 700 16px/1 var(--cc-font); color: var(--tx); display: inline-flex; align-items: center; gap: 2px; }
.cc-hgig-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.cc-htag { display: inline-flex; align-items: center; gap: 6px; 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: 999px; padding: 7px 11px; }
.cc-htag i { font-size: 13px; color: var(--cc-faint); }
.cc-htag.ok { color: var(--cc-ok-ink); background: var(--cc-ok-bg); border-color: #C6DECB; }
.cc-htag.ok i { color: var(--cc-ok-ink); }
.cc-hgig-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.cc-hgig-prog { flex: 1; min-width: 0; }
.cc-hgig-prog-lbl { display: flex; justify-content: space-between; font: 600 11px/1 var(--cc-font-soft); color: var(--cc-muted); margin-bottom: 7px; }
.cc-hgig-bar { height: 6px; border-radius: 4px; background: #EEE9DF; overflow: hidden; }
.cc-hgig-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.cc-hgig-apply { background: var(--cc-grad-accent); color: #fff; border: 0; border-radius: 11px; padding: 11px 20px; font: 600 13.5px/1 var(--cc-font); box-shadow: 0 10px 22px -10px rgba(0,0,0,.32); white-space: nowrap; cursor: pointer; }
.cc-hgig-apply:disabled { background: var(--cc-surface-2); color: var(--cc-muted); box-shadow: none; cursor: default; }

/* 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: #fff; border: 1px solid var(--cc-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 30px -18px rgba(45,38,28,.18), 0 1px 3px rgba(45,38,28,.05); }
.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: #fff; 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 var(--cc-font-soft); color: var(--tx); background: none; border: 0; cursor: pointer; }

/* Availability week strip. */
.cc-week { display: flex; gap: 5px; }
.cc-wday { flex: 1; text-align: center; border-radius: 9px; padding: 8px 0; background: #fff; 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: #fff; 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) {
  .cc-home { flex-direction: column; }
  .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; height: 100vh; border-radius: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; }
  .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. */
.cc-btn.ghost { background: var(--cc-surface); border: 1px solid var(--cc-accent-border); color: var(--cc-accent-ink); }
.cc-btn.ghost:hover { background: var(--cc-accent-tint); border-color: var(--cc-accent-border); }
.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-faint); }
.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-accent); box-shadow: 0 0 0 3px var(--cc-accent-tint); }
.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-accent-tint); border-color: var(--cc-accent-border); color: var(--cc-accent-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-accent-tint); color: var(--cc-accent-ink); }
.cc-role-dept { font: 700 10px/1 var(--cc-font-soft); letter-spacing: .1em; color: var(--cc-faint); }

/* Mode banner — a floating strip in the padded main column, not a hard bar. */
.cc-mbar { border: 1px solid var(--cc-line); border-radius: 14px; font-family: var(--cc-font-soft); }
.cc-mbar.demo { background: var(--cc-warn-bg); border-color: var(--cc-warn-line); color: var(--cc-warn-ink); box-shadow: 0 1px 3px rgba(45,38,28,.05); }
.cc-mbar.demo b { font-family: var(--cc-font); font-weight: 700; }

/* 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-accent-tint); border-color: var(--cc-accent-border); color: var(--cc-accent-ink); }

/* 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 — a floating white pill (the hcard recipe, rounded). */
.cc-disc {
  background: #fff; border: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill);
  box-shadow: var(--cc-shadow-card);
}
.cc-disc-seg { border-radius: var(--cc-radius-pill); }
.cc-disc-seg:hover { background: var(--cc-surface-2); }
.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); }
.cc-disc-seg input::placeholder { color: var(--cc-faint); font-weight: 500; font-family: var(--cc-font-soft); }
.cc-disc-when .arrow { color: var(--cc-faint); }
/* The go button carries the screen's single gradient CTA. */
.cc-disc-go {
  background: var(--cc-grad-accent);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.35), 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); }
.cc-jobs .cc-sortopt.on { background: var(--cc-ink); border-color: var(--cc-ink); color: var(--cc-surface); }
.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);
}

/* 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 .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.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(--acc);
  box-shadow: 0 0 0 3px var(--surf), 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: #fff; 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: #fff; border-color: var(--cc-faint); color: var(--cc-soft); }
.cc-gc-heart.on { color: var(--acc); border-color: var(--brd); background: var(--surf); }
.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-rolepill {
  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; display: inline-flex; align-items: center; gap: 4px;
}
.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-proj { margin-top: 10px; font: 500 13px/1.4 var(--cc-font-soft); color: var(--cc-soft); display: flex; align-items: center; gap: 6px; }
.cc-gigd-proj i { color: var(--cc-faint); }
.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); }

/* 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; }

/* 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;
}

/* 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. */
.cc-embed-gig { padding: 0; }
.cc-embed-gig .cc-gigd-main { 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); }

/* 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 .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.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(--acc);
  box-shadow: 0 0 0 3px var(--surf), 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 — accent pill (punctuation, jumps to the gig list). */
.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(--acc); }
.cc-demand i { color: var(--acc); }
.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, accent tint when on. */
.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(--surf); border-color: var(--brd); color: var(--tx); }
.cc-evpanel .cc-cat.on i { color: var(--acc); }

/* 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 .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.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(--acc);
  box-shadow: 0 0 0 3px var(--surf), 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(--acc); border-color: var(--brd); background: var(--surf); }
.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 10.5px/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 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;
}
.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); }

/* 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 10.5px/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(--tx); }
.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(--tx); background: var(--surf); border-color: var(--brd); }
.cc-save.on:hover { color: var(--tx); background: var(--surf); border-color: var(--acc); }
.cc-save.on i { color: var(--acc); }

/* 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); }

/* 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(--acc); }
.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); }
.cc-invv .cc-sortopt.on { background: var(--cc-ink); border-color: var(--cc-ink); color: var(--cc-surface); }
.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; }
.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. */
.cc-msgs .cc-msg {
  border-radius: 20px; border-color: var(--cc-line); background: var(--cc-surface);
  box-shadow: var(--cc-shadow-card);
  height: calc(100vh - 208px); min-height: 430px;
}

/* Conversation list — soft hairline rows; active = tint + accent bar. */
.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(--surf); box-shadow: inset 3px 0 0 var(--acc); }
.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(--tx); }
.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); }
.cc-convo-unread {
  flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--cc-radius-pill);
  background: var(--acc); color: #fff; 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; }

/* Composer — pill field + the screen's single gradient CTA (Send). */
.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: 1px solid var(--cc-line); border-radius: var(--cc-radius-pill); padding: 11px 16px;
  background: var(--cc-surface-2); font: 500 13.5px/1.3 var(--cc-font-soft); color: var(--cc-ink);
  box-shadow: inset 0 1px 2px rgba(45,38,28,.04);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.cc-msgs .cc-composer input::placeholder { color: var(--cc-faint); }
.cc-msgs .cc-composer input:focus { border-color: var(--cc-accent); background: var(--cc-surface); box-shadow: 0 0 0 3px var(--cc-accent-tint); }
.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); }

/* 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. */
@media (max-width: 860px) {
  .cc-msgs .cc-msg { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .cc-msgs .cc-convos { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--cc-line); }
  .cc-msgs .cc-thread { min-height: 56vh; }
  .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 stays the ONE
   modal for every project type (the GIG_KINDS field swap, RolePicker /
   DateList / GearTags, deliverables + usage presets and the travel radios
   are untouched — skin only): Schibsted head, caps micro sub-labels on
   the deliverables grid, accent tint strictly as punctuation on the
   selected type/credential/travel options, and the gradient reserved for
   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); }

/* Project-type segment — white pills, tint + accent ring when on. */
.cc-typeseg-opt {
  font: 600 12.5px/1 var(--cc-font-soft); border-radius: 11px;
  box-shadow: 0 1px 2px rgba(45,38,28,.05);
  transition: background .12s, border-color .12s, color .12s;
}
.cc-typeseg-opt:hover { border-color: var(--cc-faint); color: var(--cc-ink); }
.cc-typeseg-opt.on { background: var(--surf); border-color: var(--acc); color: var(--tx); box-shadow: none; }
.cc-typeseg-opt.on i { color: var(--acc); }

/* Credential / travel radio rows — 11px radii, tint when on. */
.cc-radioopt { border-radius: 11px; font: 600 13px/1.2 var(--cc-font-soft); color: var(--cc-soft); }
.cc-radioopt:hover { border-color: var(--cc-faint); color: var(--cc-ink); }
.cc-radioopt.on { background: var(--surf); border-color: var(--acc); color: var(--tx); }
.cc-radioopt.on i { color: var(--acc); }

/* Deliverables sub-labels — the caps micro-label pattern. */
.cc-field > label.cc-sublbl {
  font: 600 10.5px/1.3 var(--cc-font-soft); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cc-faint); display: flex; align-items: center; gap: 5px;
}

/* 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-typeseg { 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; }
.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; }

/* Inline label notes — "— a $ band, never your exact number" etc. */
.cc-lblnote { font: 500 12px/1.3 var(--cc-font-soft); color: var(--cc-muted); }

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

/* Target-roles pills — white at rest, tint + accent when picked. */
.cc-setts .cc-pickopt {
  font: 600 12.5px/1 var(--cc-font-soft); cursor: pointer;
  box-shadow: 0 1px 2px rgba(45,38,28,.05);
  transition: background .12s, border-color .12s, color .12s;
}
.cc-setts .cc-pickopt:hover { border-color: var(--cc-faint); color: var(--cc-ink); }
.cc-setts .cc-pickopt.on { background: var(--surf); border-color: var(--brd); color: var(--tx); box-shadow: none; }

/* 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(--acc); }

/* 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-chromeseg { max-width: 320px; }
.cc-setts .cc-scenegrid { grid-template-columns: repeat(4, 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 — accent tint as punctuation. */
.cc-fresh-banner { background: var(--surf); border-color: var(--brd); border-radius: 14px; }
.cc-fresh-banner > .ti { color: var(--acc); }
.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(--acc); }
.cc-cs-thumb .chk { background: var(--acc); }

/* 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. */
.cc-auth { background: transparent; grid-template-columns: 44% 56%; gap: 20px; padding: 20px; }
.cc-auth-photo {
  border-radius: 24px; height: calc(100vh - 40px); position: sticky; top: 20px;
  background-image:
    linear-gradient(180deg, rgba(20,18,12,.04), rgba(20,18,12,.52)),
    url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=1400&q=70');
  box-shadow: 0 22px 44px -20px rgba(45,38,28,.32), 0 2px 6px rgba(45,38,28,.10);
}
.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; }

/* 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); }

/* 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-ink); color: #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.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-auth-ig-hint { margin: -6px 0 12px; }
.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; }

/* 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-ink); border-color: var(--cc-ink); color: var(--cc-surface); }
.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; }

/* 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(--acc); }
.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; }

/* 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; }
  .cc-disc-seg { border-radius: 14px; }
  .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; }
}