/* ============================================================
   Fashion Freelancing — SPECIALIST NETWORK components
   ------------------------------------------------------------
   Loaded after assets/night.css, which owns every token, button,
   glass surface, form control and motion rule used below. This
   file adds only what the network needs and introduces no new
   colour system, font or scale (plan §4).

   Layout language:
     .net-hero        page opening
     .net-split       filter rail + results
     .card-spec       one specialist in the directory
     .flow            multi-step application wizard
     .ws              workspace shells
   ============================================================ */

/* ---------- page opening ----------
   No --nav-h term here: #site-nav already reserves the header's height in
   normal flow, so adding it again pushed every page down by an extra 72px and
   left a dead band under the header. */
.net-hero { padding: calc(var(--u) * 5) 0 calc(var(--u) * 5); }
@media (max-width: 720px) { .net-hero { padding-top: calc(var(--u) * 3); } }
.net-hero h1 { font-size: clamp(34px, 5.2vw, 62px); max-width: 20ch; }
.net-hero .sub { max-width: 62ch; margin-top: 18px; font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.65; }
.net-hero .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Breadcrumb back to the service that sent the visitor here. */
.net-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-5); transition: color .2s ease;
}
.net-back:hover { color: var(--champagne-2); }

/* ---------- two-column shell: filters + results ---------- */
.net-split { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 980px) { .net-split { grid-template-columns: 1fr; } }

.net-rail { padding: 22px; position: sticky; top: calc(var(--nav-h) + 28px); }
@media (max-width: 980px) { .net-rail { position: static; } }
.net-rail h2 { font-size: 17px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); margin: 0 0 16px; }
.net-rail .cform { gap: 13px; }
.net-rail-actions { display: grid; gap: 9px; margin-top: 18px; }

/* "More filters" — everything beyond search / service / specialty /
   availability stays folded away on first visit (§4). */
.net-more { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.net-more > summary { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: -.005em; list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; min-height: 44px; }
.net-more > summary::-webkit-details-marker { display: none; }
.net-more > summary::after { content: '+'; font-size: 15px; color: var(--champagne-2); }
.net-more[open] > summary::after { content: '−'; }
.net-more .cform { margin-top: 14px; }

/* ============================================================
   Choice controls — checkbox and radio
   ------------------------------------------------------------
   The native control is kept in the DOM (focusable, announced,
   submitted) but visually replaced by a box drawn on the label.
   Native checkboxes size and baseline-align differently in every
   browser, which is exactly what made these rows look crooked;
   a drawn box is identical everywhere and can be positioned
   against the first text line to the pixel.

   Targets are >= 44px tall with >= 8px gaps (touch minimums).
   ============================================================ */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts.col { flex-direction: column; flex-wrap: nowrap; gap: 8px; }

.opt {
  position: relative;
  display: flex;                 /* flex-start keeps the box on the FIRST line */
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(var(--surface-rgb), .05);
  border: 1px solid var(--glass-border);
  font-size: 14px; line-height: 1.5; color: var(--ink-3);
  text-align: left;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.opts:not(.col) .opt { border-radius: 999px; }

/* The real input: present for keyboard, screen readers and form submission,
   but never painted. Not display:none — that would remove it from both. */
.opt input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}

/* The drawn box. 18px against a 21px line box, nudged 1.5px to sit on the
   optical centre of the first line of text. */
.opt::before {
  content: '';
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1.5px;
  border: 1.5px solid rgba(var(--surface-rgb), .34);
  border-radius: 6px;
  background-color: rgba(var(--surface-rgb), .05);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  transition: background-color .18s ease, border-color .18s ease;
}
.opt:has(input[type='radio'])::before { border-radius: 50%; }

.opt:hover { background: var(--glass-hover); border-color: rgba(var(--surface-rgb), .28); }
.opt:hover::before { border-color: rgba(var(--surface-rgb), .5); }

.opt:has(input:checked) { background: rgba(139,92,246,.18); border-color: #8B5CF6; color: var(--ink); }
.opt:has(input:checked)::before { background-color: #8B5CF6; border-color: #8B5CF6; }
.opt:has(input[type='checkbox']:checked)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.opt:has(input[type='radio']:checked)::before {
  background-image: radial-gradient(circle at center, #fff 0 3.5px, transparent 3.6px);
}
/* Focus lands on the hidden input, so the ring is drawn on the label. */
.opt:has(input:focus-visible) { outline: 2px solid #A78BFA; outline-offset: 2px; }

.opt > span { display: block; min-width: 0; }
.opt b { font-weight: 600; color: var(--ink); }
.opt:has(input:checked) b { color: var(--ink); }

/* ---------- service chooser: a card per service, not a pill ---------- */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
@media (max-width: 600px) { .picks { grid-template-columns: 1fr; } }
.pick {
  position: relative;
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 17px; border-radius: 16px; cursor: pointer;
  background: rgba(var(--surface-rgb), .045); border: 1px solid var(--glass-border);
  transition: background .2s ease, border-color .2s ease, transform .2s var(--easing);
  -webkit-tap-highlight-color: transparent;
}
.pick input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.pick::before {
  content: '';
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin-top: 2px;
  border: 1.5px solid rgba(var(--surface-rgb), .34);
  border-radius: 50%;
  background-color: rgba(var(--surface-rgb), .05);
  background-repeat: no-repeat; background-position: center; background-size: 12px;
  transition: background-color .18s ease, border-color .18s ease;
}
.pick:has(input[type='checkbox'])::before { border-radius: 7px; }
.pick:hover { background: var(--glass-hover); border-color: rgba(var(--surface-rgb), .28); transform: translateY(-1px); }
.pick:has(input:checked) { background: rgba(139,92,246,.15); border-color: #8B5CF6; }
.pick:has(input:checked)::before { background-color: #8B5CF6; border-color: #8B5CF6; }
.pick:has(input[type='radio']:checked)::before {
  background-image: radial-gradient(circle at center, #fff 0 3.8px, transparent 3.9px);
}
.pick:has(input[type='checkbox']:checked)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.pick:has(input:focus-visible) { outline: 2px solid #A78BFA; outline-offset: 2px; }
.pick .t { display: block; min-width: 0; }
.pick b {
  display: block; font-family: var(--disp); font-size: 15.5px; font-weight: 700;
  letter-spacing: -.018em; color: var(--ink); margin-bottom: 4px;
}
.pick:has(input:checked) b { color: var(--ink); }
.pick small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-5); }
@media (prefers-reduced-motion: reduce) { .pick:hover { transform: none; } }

/* A chosen service, echoed back above its own questions. */
.svc-group { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(var(--surface-rgb), .03); }
.svc-group + .svc-group { margin-top: 16px; }
.svc-group > header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.svc-group > header h3 {
  font-family: var(--disp); font-size: 17px; font-weight: 700;
  letter-spacing: -.02em; margin: 0;
}

/* Read-back of a decision made on an earlier stage, with a way to change it. */
.chosen {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 14px 18px; margin-bottom: 22px;
  border-radius: 14px; background: rgba(139,92,246,.11); border: 1px solid rgba(139,92,246,.26);
}
.chosen p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--chip-violet2); }
.chosen b { color: var(--ink); font-weight: 600; }

/* ---------- results ---------- */
.net-results-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.net-count { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-5); }
.net-results { display: grid; gap: 14px; }

.card-spec {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 18px;
  padding: 20px; align-items: start;
  transition: border-color .3s var(--easing), transform .3s var(--easing), background .3s ease;
}
.card-spec:hover { border-color: rgba(var(--surface-rgb), .26); transform: translateY(-2px); }
@media (max-width: 720px) {
  .card-spec { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 17px; }
  .card-spec .spec-actions { grid-column: 1 / -1; justify-content: stretch; }
  .card-spec .spec-actions > * { flex: 1; }
}

.spec-avatar {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  font-family: var(--disp); font-size: 21px; font-weight: 800; letter-spacing: -.04em;
  color: #0C0A1C; background: linear-gradient(135deg, #A78BFA, #4AA8F0);
}
@media (max-width: 720px) { .spec-avatar { width: 54px; height: 54px; border-radius: 16px; font-size: 18px; } }
/* Deterministic per-specialist tint so a returning visitor recognises a card. */
.spec-avatar.t1 { background: linear-gradient(135deg, #A78BFA, #FF6FB3); }
.spec-avatar.t2 { background: linear-gradient(135deg, #4AA8F0, #3EC8C0); }
.spec-avatar.t3 { background: linear-gradient(135deg, #F5A623, #F1543F); }
.spec-avatar.t4 { background: linear-gradient(135deg, #34C165, #A8D84A); }
.spec-avatar.t5 { background: linear-gradient(135deg, #7E9BEA, #A78BFA); }
.spec-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.spec-service {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
}
.card-spec h3 { font-family: var(--disp); font-size: 20px; font-weight: 700; letter-spacing: -.028em; margin: 6px 0 4px; }
.card-spec h3 a { color: inherit; }
.card-spec h3 a:hover { color: var(--champagne-2); }
.spec-headline { margin: 0; color: var(--ink-4); font-size: 14.5px; line-height: 1.5; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag {
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; line-height: 1.4;
  background: rgba(167,139,250,.10); border: 1px solid rgba(167,139,250,.20); color: var(--ink-3);
}
.tag.plain { background: rgba(var(--surface-rgb), .05); border-color: var(--glass-border); color: var(--ink-4); }

.spec-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px;
  font-size: 12.5px; color: var(--ink-5);
}
.spec-meta b { color: var(--ink-3); font-weight: 600; }
.spec-actions { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 720px) { .spec-actions { flex-direction: row; margin-top: 14px; } }

/* Compact portfolio strip on the card (§4). */
.spec-strip { display: flex; gap: 6px; margin-top: 13px; }
.spec-work-count {
  margin: 12px 0 0; font-size: 12.5px; color: var(--ink-5);
}
.spec-strip span {
  width: 46px; height: 34px; border-radius: 8px; flex: none;
  background: rgba(var(--surface-rgb), .06); border: 1px solid var(--line);
  background-size: cover; background-position: center;
}

/* ---------- status + availability pills ---------- */
.pill-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--glass-border); background: rgba(var(--surface-rgb), .05); color: var(--ink-4);
}
.pill-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-status.ok    { color: var(--chip-green); border-color: rgba(52,193,101,.34); background: rgba(52,193,101,.13); }
.pill-status.warn  { color: var(--chip-amber); border-color: rgba(245,166,35,.34); background: rgba(245,166,35,.13); }
.pill-status.bad   { color: #FF9EC9; border-color: rgba(255,79,160,.34); background: rgba(255,79,160,.13); }
.pill-status.info  { color: #C4B5FD; border-color: rgba(139,92,246,.34); background: rgba(139,92,246,.13); }

/* ---------- empty + pagination ---------- */
.net-empty { padding: 56px 28px; text-align: center; }
.net-empty h3 { font-family: var(--disp); font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.net-empty p { color: var(--ink-4); margin: 0 auto 22px; max-width: 46ch; font-size: 14.5px; line-height: 1.6; }

.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; }
.pager span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-5); }

/* ---------- profile page ---------- */
.profile-top { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 26px; padding: 30px; align-items: start; }
@media (max-width: 860px) { .profile-top { grid-template-columns: 84px minmax(0, 1fr); } .profile-top .spec-actions { grid-column: 1 / -1; flex-direction: row; } }
.profile-top .spec-avatar { width: 104px; height: 104px; border-radius: 30px; font-size: 32px; }
@media (max-width: 860px) { .profile-top .spec-avatar { width: 80px; height: 80px; border-radius: 24px; font-size: 25px; } }
.profile-top h1 { font-family: var(--disp); font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.032em; margin: 8px 0 6px; }

.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; margin-top: 22px; align-items: start; }
@media (max-width: 980px) { .profile-body { grid-template-columns: 1fr; } }
.panel { padding: 26px; }
.panel + .panel { margin-top: 18px; }
.panel > h2 { font-size: 17px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); margin: 0 0 16px; }
.panel p { color: var(--ink-4); line-height: 1.7; margin: 0 0 12px; font-size: 14.5px; }
.panel p:last-child { margin-bottom: 0; }

.facts { display: grid; gap: 13px; }
.facts div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.facts dt { color: var(--ink-5); }
.facts dd { margin: 0; color: var(--ink-3); text-align: right; font-weight: 500; }

/* One service offering block: specialty, skills, tools, stack. */
.offering + .offering { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.offering h3 { font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.offering .role { font-size: 13px; color: var(--ink-5); margin: 0 0 12px; }
.offering .group { margin-top: 12px; }
.offering .group h4 { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; margin: 0 0 8px; }

/* Portfolio evidence */
.work { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.work article { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(var(--surface-rgb), .035); }
.work .thumb { aspect-ratio: 4 / 3; background: rgba(var(--surface-rgb), .05); display: block; object-fit: cover; width: 100%; }
.work .meta { padding: 16px 16px 18px; }
/* A piece with no image still needs presence, so the text block carries it. */
.work article:not(:has(.thumb)) .meta { padding: 18px; }
.work h3 { font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 5px; }
.work p { font-size: 12.5px; color: var(--ink-5); line-height: 1.55; margin: 0; }

/* ---------- multi-step flows (application wizard, hire request, post) ---------- */
.flow { max-width: 780px; margin: 0 auto; }
.flow-head { text-align: center; margin-bottom: 26px; }
/* Centred text with no measure reads as ragged against the heading above it. */
.flow-head .sub, .flow-head .lead {
  max-width: 52ch; margin-left: auto; margin-right: auto;
  font-size: 15.5px; line-height: 1.6;
}
.flow-head h1 { font-family: var(--disp); font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.03em; }
.flow-steps { display: flex; gap: 6px; margin: 24px 0 8px; }
.flow-steps i { flex: 1; height: 5px; border-radius: 99px; background: rgba(var(--surface-rgb), .11); transition: background .3s ease; }
.flow-steps i.done { background: rgba(167,139,250,.55); }
.flow-steps i.now { background: var(--grad-hot); }
.flow-count { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-5); text-align: center; }
.flow-panel { padding: 32px clamp(20px, 4vw, 40px); margin-top: 22px; }
.flow-panel > h2 { font-family: var(--disp); font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 8px; }
.flow-panel > .lead { color: var(--ink-4); font-size: 14.5px; line-height: 1.6; margin: 0 0 26px; }
.flow-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.flow-actions .spacer { flex: 1; }
@media (max-width: 560px) { .flow-actions { flex-direction: column-reverse; } .flow-actions > * { width: 100%; } }

/* A labelled group of related inputs inside a step. */
.fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.fieldset > legend { font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: -.005em; padding: 0; margin-bottom: 12px; }
.fieldset > .hint { margin: -6px 0 12px; font-size: 12.5px; color: var(--ink-5); line-height: 1.55; }

.notice {
  padding: 15px 17px; border-radius: 14px; font-size: 13.5px; line-height: 1.6;
  background: rgba(139,92,246,.11); border: 1px solid rgba(139,92,246,.26); color: var(--chip-violet2);
}
.notice.ok  { background: rgba(52,193,101,.11); border-color: rgba(52,193,101,.28); color: var(--chip-green2); }
.notice.bad { background: rgba(255,79,160,.10); border-color: rgba(255,79,160,.30); color: var(--chip-pink); }
.notice + .notice { margin-top: 12px; }

/* ---------- the two-door section (homepage + service pages) ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }
.door {
  position: relative; display: block; padding: 28px; overflow: hidden;
  transition: border-color .3s var(--easing), transform .3s var(--easing);
}
.door:hover { border-color: rgba(var(--surface-rgb), .28); transform: translateY(-3px); }
.door .who { font-size: 13px; font-weight: 500; color: var(--ink-4); letter-spacing: -.005em; }
.door h3 { font-family: var(--disp); font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; letter-spacing: -.026em; margin: 12px 0 8px; }
.door p { color: var(--ink-4); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.door .go { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--champagne-2); }
.door .go svg { transition: transform .3s var(--easing); }
.door:hover .go svg { transform: translateX(5px); }

/* Service-page module: one primary CTA, one secondary route into the network. */
.svc-net { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; flex-wrap: wrap; }
.svc-net p { margin: 0; color: var(--ink-4); font-size: 14px; line-height: 1.55; max-width: 52ch; }
.svc-net strong { display: block; color: var(--ink); font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 5px; }

/* ---------- workspaces ---------- */
.ws-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.ws-head h1 { font-family: var(--disp); font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.03em; }

.ws-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.ws-tabs a {
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--ink-4); background: rgba(var(--surface-rgb), .05); border: 1px solid var(--glass-border);
  transition: background .2s ease, color .2s ease;
}
.ws-tabs a:hover { background: var(--glass-hover); color: var(--ink); }
.ws-tabs a[aria-current='page'] { background: rgba(139,92,246,.2); border-color: #8B5CF6; color: var(--ink); }

.ws-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.ws-stat { padding: 20px; }
.ws-stat b { display: block; font-family: var(--disp); font-size: 32px; font-weight: 800; letter-spacing: -.035em; }
.ws-stat span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-5); line-height: 1.45; }

/* Records read as cards on every width — never a dense table on mobile (§4). */
.ws-list { display: grid; gap: 12px; }
.ws-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 18px 20px; align-items: center; }
@media (max-width: 640px) { .ws-row { grid-template-columns: 1fr; } .ws-row .ws-row-actions { justify-content: flex-start; } }
.ws-row h3 { font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -.018em; margin: 0 0 5px; }
.ws-row .line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-5); }
.ws-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Message thread */
.thread { display: grid; gap: 12px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.msg { padding: 14px 16px; border-radius: 16px; background: rgba(var(--surface-rgb), .05); border: 1px solid var(--line); }
.msg.mine { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.28); }
.msg .who { font-size: 12.5px; font-weight: 600; color: var(--ink-4); letter-spacing: -.005em; margin-bottom: 6px; }
.msg p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); white-space: pre-wrap; }

/* The explainable match reason (§9) sits directly under a recommendation. */
.why {
  margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.55;
  background: rgba(74,168,240,.10); border: 1px solid rgba(74,168,240,.24); color: var(--chip-blue);
}

/* Utility */
.stack-sm { display: grid; gap: 10px; }
.row-sm { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hide { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Admin review card
   ------------------------------------------------------------
   An application is a document, not a table row. The reviewer has
   to read prose, scan claimed capability and open the work before
   deciding, so it is laid out to be read top to bottom.
   ============================================================ */
.review {
  padding: 24px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(var(--surface-rgb), .03);
}
.review + .review { margin-top: 16px; }
.review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.review-head h3 { font-family: var(--disp); font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
/* `.line` is otherwise scoped to .ws-row, so without this the meta facts
   render with no separator: "ravi@seed.localChennai, India8 years". */
.review-head .line { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12.5px; color: var(--ink-5); }
.review-head .line > span + span::before { content: '·'; margin: 0 9px; color: var(--ink-7); }
.review-headline { margin: 14px 0 0; font-size: 15.5px; color: var(--ink-3); line-height: 1.5; }

.review-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.review-block h4 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--champagne-2); margin: 0 0 10px; }
.review-block p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: var(--ink-4); }
.review-block p:last-child { margin-bottom: 0; }
.review-tags { font-size: 13px !important; color: var(--ink-4); }
.review-tags b {
  display: inline-block; min-width: 84px; color: var(--ink-5); font-weight: 500;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}

.review-work { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.review-piece { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--surface-rgb), .03); }
.review-piece strong { display: block; font-family: var(--disp); font-size: 14.5px; letter-spacing: -.015em; margin-bottom: 6px; }
.review-piece p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-5); }

/* Low-signal operational panels fold away so the queue that needs a human
   is what the page actually leads with. */
.ops-fold { margin-top: 18px; }
.ops-fold > summary { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: -.005em; list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 18px; border-radius: 14px; background: rgba(var(--surface-rgb), .04); border: 1px solid var(--line); }
.ops-fold > summary::-webkit-details-marker { display: none; }
.ops-fold > summary::after { content: '+'; font-size: 15px; color: var(--champagne-2); }
.ops-fold[open] > summary::after { content: '−'; }
.ops-fold > .panel { margin-top: 12px; }

/* Activity log, written for a person rather than dumped as machine strings. */
.log { display: grid; gap: 2px; }
.log-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
}
.log-row:nth-child(odd) { background: rgba(var(--surface-rgb), .025); }
.log-row b { color: var(--ink-3); font-weight: 600; }
.log-row time { font-family: var(--mono); font-size: 11px; color: var(--ink-5); white-space: nowrap; }

/* ============================================================
   Workspace shell — sidebar + main column
   ============================================================
   The workspace used to be one long scrolling page per role. This is the
   same information split across destinations, so a person can go straight
   to the thing they came for.

   Everything here is built from the shared tokens, so it inherits both
   palettes and needs no theme-specific rules of its own.
   ============================================================ */
.ws-shell { padding: calc(var(--u) * 4) 0 calc(var(--u) * 9); }

.ws-grid {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* ---------- sidebar ---------- */
.ws-nav {
  position: sticky; top: calc(var(--nav-h) + 16px);
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
}
.ws-nav-head { display: flex; flex-direction: column; gap: 2px; padding: 2px 8px 10px; border-bottom: 1px solid var(--line); }
.ws-role { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-5); }
.ws-who { font-family: var(--disp); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }

.ws-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-nav-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  font-size: 14px; color: var(--ink-4); text-decoration: none;
  transition: background .18s var(--easing), color .18s var(--easing);
}
.ws-nav-list a:hover { background: var(--glass-hover); color: var(--ink); }
.ws-nav-list a.is-current { background: var(--glass-hover); color: var(--ink); font-weight: 600; }
/* the current page also carries a rail, so it reads without relying on colour */
.ws-nav-list a.is-current { box-shadow: inset 2px 0 0 var(--champagne); }
.ws-nav-list a:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

.ws-badge {
  flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--champagne-50); color: var(--champagne-2);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-align: center;
}
.ws-nav-foot { padding-top: 10px; border-top: 1px solid var(--line); }
.ws-nav-foot button { width: 100%; }

/* ---------- main column ---------- */
.ws-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ws-head h1 {
  font-family: var(--disp); font-weight: 600; letter-spacing: -.025em; line-height: 1.12;
  font-size: clamp(26px, 3vw, 34px); color: var(--ink); margin: 0;
}
.ws-lede { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-4); max-width: 62ch; }

.ws-flash {
  margin: 0; padding: 11px 14px; border-radius: 10px;
  background: var(--champagne-50); border: 1px solid var(--champagne-100, var(--glass-border));
  color: var(--ink-2); font-size: 14px;
}

/* Nothing to show yet. Says what will appear here and how to make it
   appear, rather than a bare "no results". */
.ws-empty {
  padding: 30px 24px; border-radius: 14px; text-align: center;
  background: var(--glass); border: 1px dashed var(--glass-border);
}
.ws-empty h3 { font-family: var(--disp); font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.ws-empty p { margin: 0 auto; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--ink-4); }
.ws-empty .btn-hot, .ws-empty .btn-glass { margin-top: 16px; }

@media (max-width: 900px) {
  .ws-grid { grid-template-columns: 1fr; }
  /* On a phone the sidebar becomes a scrolling row of destinations above
     the content — a sticky column would eat most of the screen. */
  .ws-nav { position: static; }
  .ws-nav-list { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .ws-nav-list a { white-space: nowrap; }
  .ws-nav-list a.is-current { box-shadow: inset 0 -2px 0 var(--champagne); }
  .ws-nav-foot { display: none; }
}

/* Row heading inside a workspace panel: title on the left, state on the right. */
.ws-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ws-row-head h2 { font-family: var(--disp); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ws-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-4); }

/* A state, said in words rather than by colour alone — colour is the second
   signal, never the only one. */
.pill-tone {
  flex: none; padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink-3);
}
.pill-tone.warn { background: rgba(var(--surface-rgb), .05); border-color: var(--warn); color: var(--warn); }
.pill-tone.ok   { background: rgba(var(--surface-rgb), .05); border-color: var(--ok);   color: var(--ok); }
.pill-tone.bad  { background: rgba(var(--surface-rgb), .05); border-color: var(--bad);  color: var(--bad); }

/* ============================================================
   Dashboard layout
   ============================================================
   The shape the workspace pages are composed from, carried over from the
   earlier dashboard: a row of figures across the top, then an eight/four
   split — the work itself on the left, context on the right — built from
   cards whose header carries a title and the one link that goes deeper.

   Everything is drawn with the shared tokens, so it inherits both palettes
   without a single theme-specific rule.
   ============================================================ */

/* ---------- the figures across the top ---------- */
.ws-stats {
  display: grid; gap: 12px; margin-bottom: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .ws-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ws-stat {
  padding: 16px 16px 14px; border-radius: 13px;
  background: var(--glass); border: 1px solid var(--glass-border);
}
.ws-stat .k {
  display: block; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-5);
}
.ws-stat .v {
  display: block; margin-top: 6px;
  font-family: var(--disp); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; color: var(--ink);
}
/* the line under a figure explains it — it is not decoration, so it keeps
   full label contrast rather than fading out */
.ws-stat .d { display: block; margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--ink-4); }
.ws-stat .d.up { color: var(--ok); }
.ws-stat .d.down { color: var(--bad); }

/* ---------- the eight / four split ---------- */
.ws-cols { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1040px) { .ws-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.ws-col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ---------- a card ---------- */
.ws-card {
  padding: 20px; border-radius: 15px;
  background: var(--glass); border: 1px solid var(--glass-border);
}
.ws-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-bottom: 14px;
}
.ws-card-head h2 {
  margin: 0; font-family: var(--disp); font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
}
.ws-card-head a { font-size: 13.5px; color: var(--champagne-2); text-decoration: none; white-space: nowrap; }
.ws-card-head a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- a row in a list ---------- */
.ws-rows { display: flex; flex-direction: column; gap: 8px; }
.ws-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: transparent;
  color: inherit; text-decoration: none;
  transition: background .18s var(--easing), border-color .18s var(--easing);
}
a.ws-row:hover { background: var(--glass-hover); border-color: var(--line-2); }
a.ws-row:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

/* the square at the head of a row — initials, a number, a short code */
.ws-row .mark {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-hover); color: var(--ink-3);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.ws-row .body { flex: 1; min-width: 0; }
.ws-row .t {
  display: block; font-size: 14.5px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-row .m { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-4); }

@media (max-width: 560px) {
  /* the row stops being one line and stacks, so nothing truncates to nothing */
  .ws-row { align-items: flex-start; flex-wrap: wrap; }
  .ws-row .t { white-space: normal; }
}