/* talent.gridma.ai: the Talent-side hub. Prototyped as the /talent/ folder,
   one static origin standing in for the subdomain. It reuses the dashboard
   design system (shell ground, white cards, hairlines, dot matrices) so the
   hub and the product feel like one thing. */

/* ---------- Subdomain topbar ---------- */

.hub-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1f8a4c;
  background: rgba(68, 220, 134, 0.16);
  border-radius: 4px;
  padding: 3px 8px;
  margin-left: 2px;
}

/* ---------- Shell ---------- */

.hub-canvas {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px 48px;
}

/* ---------- Hero ---------- */

.hub-hero {
  padding: 64px 0 40px;
  max-width: 720px;
}
.hub-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1f8a4c;
  margin: 0 0 14px;
}
.hub-hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.hub-hero p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 560px;
}
.hub-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hub-cta-row .btn { padding: 13px 24px; font-size: 15px; }
.hub-quiet-link { font-size: 14.5px; font-weight: 500; color: rgba(17, 17, 17, 0.65); }
.hub-quiet-link:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Proof cards ---------- */

.hub-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 56px;
}
.hub-proof-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hub-proof-card strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.hub-proof-card span { font-size: 13px; color: var(--muted); }
.hub-proof-card .bd-track, .hub-proof-card .dots { margin-top: 12px; }

/* ---------- Sections ---------- */

.hub-section { padding: 26px 0 40px; }
.hub-section-head { margin-bottom: 22px; max-width: 620px; }
.hub-h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.hub-section-note { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ---------- Steps ---------- */

.hub-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.hub-step {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 22px;
}
.hub-step-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(68, 220, 134, 0.16);
  color: #1f8a4c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 650;
}
.hub-step h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 14px 0 6px; }
.hub-step p { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; }

/* Benefits reuse the step cards; the star marks membership, not order. */
.hub-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-benefits .hub-step-num { font-size: 14px; }

/* ---------- US jobs strip ---------- */

.hub-usjobs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.hub-usjob {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 18px;
  color: inherit;
  transition: border-color 0.15s ease, translate 0.18s var(--spring);
}
.hub-usjob:hover { border-color: rgba(17, 17, 17, 0.22); }
@media (hover: hover) {
  .hub-usjob:hover { translate: 0 -1px; }
}
.hub-usjob-city {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1f8a4c;
}
.hub-usjob strong { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.hub-usjob-meta { font-size: 12.5px; color: var(--muted); }

/* ---------- Pay band ---------- */

.hub-pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hub-pay-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 24px;
}
.hub-pay-card strong { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; display: block; margin-bottom: 6px; }
.hub-pay-card p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.hub-privacy {
  margin-top: 8px;
  background: rgba(68, 220, 134, 0.08);
  border: 1px solid rgba(68, 220, 134, 0.22);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: rgba(17, 17, 17, 0.75);
}

/* ---------- Closing ---------- */

.hub-close {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 44px 28px;
  text-align: center;
  margin-top: 16px;
}
.hub-close h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 8px; }
.hub-close p { font-size: 15px; color: var(--muted); margin: 0 0 22px; }

/* ---------- Footer ---------- */

.hub-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 28px 26px;
  font-size: 13px;
  color: var(--muted);
}
/* On a narrow phone the theme switch drops to its own line. */
.hub-foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hub-foot a { color: rgba(17, 17, 17, 0.65); }
.hub-foot a:hover { color: var(--ink); }

/* ---------- Feed ---------- */

.feed-head { padding: 36px 0 18px; }
.feed-head h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 6px; }
.feed-head p { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; }

.feed-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.feed-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 8px 14px;
  color: rgba(17, 17, 17, 0.7);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.feed-chip:hover { border-color: rgba(17, 17, 17, 0.3); }
.feed-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.feed-chip { transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, translate 0.18s var(--spring); }
@media (hover: hover) {
  .feed-chip:hover { translate: 0 -1px; }
}

.feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.feed-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.feed-empty {
  background: var(--card);
  border: 1px dashed rgba(17, 17, 17, 0.14);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Feed card ---------- */

.fd-card {
  display: flex;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 16px;
  transition: border-color 0.15s ease;
}
.fd-card:hover { border-color: rgba(17, 17, 17, 0.2); }

.fd-img {
  flex: none;
  width: 128px;
  height: 108px;
  object-fit: cover;
  border-radius: 8px;
}

.fd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fd-field {
  font-size: 11.5px;
  font-weight: 500;
  background: #f4f4f5;
  border-radius: 4px;
  padding: 4px 10px;
  color: rgba(17, 17, 17, 0.7);
}
.fd-ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1f8a4c;
  background: rgba(68, 220, 134, 0.14);
  border-radius: 4px;
  padding: 4px 10px;
}
.fd-match {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #1f8a4c;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 4px;
  padding: 3px 10px;
}
.fd-posted { font-size: 12px; color: rgba(17, 17, 17, 0.4); margin-left: auto; white-space: nowrap; }

.fd-title { font-size: 16.5px; font-weight: 650; letter-spacing: -0.015em; margin: 0; }
.fd-note { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 4px 0 0; }
.fd-meta { font-size: 12.5px; color: rgba(17, 17, 17, 0.5); margin-top: auto; padding-top: 10px; }

.fd-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.fd-price { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; }
.fd-price span { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); text-align: right; margin-top: 2px; }
.fd-actions { display: flex; align-items: center; gap: 8px; }
.fd-actions .btn { padding: 9px 16px; font-size: 13.5px; }
.fd-actions .btn:disabled { cursor: default; opacity: 0.55; filter: saturate(0.4); }

.fd-save {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(17, 17, 17, 0.45);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fd-save:hover { color: var(--ink); border-color: rgba(17, 17, 17, 0.25); }
.fd-save.is-on { color: #1f8a4c; border-color: rgba(68, 220, 134, 0.5); }
.fd-save svg { transition: scale 0.2s var(--spring); }
@media (hover: hover) {
  .fd-save:hover svg { scale: 1.12; }
}
/* The bookmark lands with a pop each time it is switched on. */
.fd-save.is-on svg { animation: icon-pop 0.35s var(--spring); }

/* ---------- Feed rail ---------- */

.feed-rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.rail-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 20px;
}
.rail-card h3 { font-size: 14.5px; font-weight: 600; margin: 0 0 12px; }
.rail-card p { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }

.rail-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, #6ea8ff, #1668ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.rail-id strong { display: block; font-size: 14.5px; font-weight: 600; }
.rail-id span { font-size: 12px; color: var(--muted); }

.rail-stats { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.rail-stat { display: flex; justify-content: space-between; font-size: 13px; }
.rail-stat span { color: var(--muted); }
.rail-stat strong { font-weight: 600; }

.rail-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #1f8a4c;
}
.rail-link:hover { text-decoration: underline; }

/* ---------- Community left navigation ---------- */

.feed-layout--nav { grid-template-columns: 208px minmax(0, 1fr) 300px; }

.cm-nav {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cm-nav-group { display: flex; flex-direction: column; gap: 2px; }
.cm-nav-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(17, 17, 17, 0.4);
  margin: 0 0 6px;
  padding-left: 12px;
}
.cm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  color: rgba(17, 17, 17, 0.62);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cm-nav-item svg { flex: none; opacity: 0.65; }
.cm-nav-item:hover { background: rgba(17, 17, 17, 0.05); color: var(--ink); }
.cm-nav-item.is-active {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink);
  font-weight: 600;
}
.cm-nav-item.is-active svg { opacity: 1; }
.cm-nav-count { margin-left: auto; font-size: 12px; font-weight: 500; color: rgba(17, 17, 17, 0.4); }
.cm-nav-item.is-active .cm-nav-count { color: rgba(17, 17, 17, 0.55); }

@media (max-width: 1000px) {
  .feed-layout--nav { grid-template-columns: minmax(0, 1fr); }
  .cm-nav { position: static; flex-direction: row; gap: 8px; min-width: 0; }
  /* One row of chips that scrolls sideways, edge to edge of the page. The
     block padding keeps the focus ring inside the scroll box. */
  .cm-nav-group {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: -4px -28px;
    padding: 4px 28px;
    scroll-padding-inline: 28px;
  }
  .cm-nav-group::-webkit-scrollbar { display: none; }
  .cm-nav-label { display: none; }
  .cm-nav-item {
    flex: none;
    width: auto;
    white-space: nowrap;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--hair);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .cm-nav-item.is-active { background: var(--ink); color: #fff; box-shadow: none; }
  .cm-nav-item.is-active .cm-nav-count { color: rgba(255, 255, 255, 0.7); }
  .cm-nav-item svg { display: none; }
  /* The topbar already links these places; only the filters stay as chips. */
  .cm-nav-group--places { display: none; }
}

/* ---------- Community feed ---------- */

.cm-composer {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cm-composer-row { display: flex; gap: 12px; }
.cm-composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 68px;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 11px 14px;
  outline: none;
}
.cm-composer textarea:focus { border-color: var(--ink); }
.cm-share { margin-left: auto; padding: 10px 20px; font-size: 14px; }
.cm-share:disabled { opacity: 0.45; filter: saturate(0.3); cursor: default; }

.cm-post {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 10px;
}

.cm-head { display: flex; align-items: center; gap: 12px; }
.cm-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, #6ea8ff, #1668ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.cm-avatar--s { width: 28px; height: 28px; font-size: 10px; }
.cm-id { min-width: 0; }
.cm-id strong { display: block; font-size: 14.5px; font-weight: 600; }
.cm-id span { font-size: 12px; color: var(--muted); }
.cm-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1f8a4c;
  background: rgba(68, 220, 134, 0.14);
  border-radius: 4px;
  padding: 4px 10px;
  white-space: nowrap;
}
.cm-time { margin-left: auto; font-size: 12px; color: rgba(17, 17, 17, 0.4); white-space: nowrap; }

.cm-text { font-size: 14.5px; line-height: 1.55; margin: 14px 0 0; overflow-wrap: anywhere; white-space: pre-line; }

.cm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.cm-chip {
  font-size: 12px;
  font-weight: 600;
  color: #1f8a4c;
  background: rgba(68, 220, 134, 0.14);
  border-radius: 4px;
  padding: 5px 11px;
  /* A long word or link wraps inside the card instead of widening the page. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.cm-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}
.cm-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.65);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 8px 14px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cm-act:hover { border-color: rgba(17, 17, 17, 0.3); color: var(--ink); }
.cm-act.is-on { color: #1f8a4c; border-color: rgba(68, 220, 134, 0.5); }
.cm-act svg { flex: none; transition: scale 0.2s var(--spring); }
@media (hover: hover) {
  .cm-act:hover svg { scale: 1.15; }
  .cm-act:hover { translate: 0 -1px; }
}
.cm-act { transition: border-color 0.15s ease, color 0.15s ease, translate 0.18s var(--spring); }
/* The heart pops every time an appreciation lands. */
.cm-act.is-on svg { animation: icon-pop 0.35s var(--spring); }

.cm-comments { margin-top: 14px; }
.cm-comment-list { display: flex; flex-direction: column; gap: 10px; }
.cm-comment { display: flex; gap: 10px; align-items: flex-start; }
.cm-comment-body {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 8px;
  padding: 9px 13px;
  min-width: 0;
}
.cm-comment-body strong { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.cm-comment-body span { font-size: 13px; line-height: 1.5; color: rgba(17, 17, 17, 0.75); overflow-wrap: anywhere; }

.cm-comment-form { display: flex; gap: 8px; margin-top: 12px; }
.cm-comment-form textarea {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 10px 16px;
  outline: none;
}
.cm-comment-form textarea:focus { border-color: var(--ink); }
.cm-comment-form .btn { padding: 9px 18px; font-size: 13.5px; }

/* ---------- Community: server-backed composer, media and states ---------- */

.cm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* These boxes set their own display, which would beat the hidden attribute. */
.cm-highlights[hidden], .cm-previews[hidden], .cm-progress[hidden], .cm-error[hidden], .cm-more[hidden], .cm-comments[hidden] { display: none; }

/* Everything under the text box lines up with it, not with the avatar. */
.cm-composer > :not(.cm-composer-row):not(.cm-sr) { margin-left: 52px; }

.cm-field { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
.cm-field textarea { width: 100%; resize: none; overflow-y: auto; }
.cm-count { align-self: flex-end; min-height: 16px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.cm-count.is-over { color: #c0392b; font-weight: 600; }
.cm-composer.is-dropping { border-color: #2fb56a; box-shadow: 0 0 0 3px rgba(47, 181, 106, 0.18); }
.cm-composer.is-sending textarea, .cm-composer.is-sending .cm-highlight input, .cm-composer.is-sending .cm-kinds { opacity: 0.6; }

.cm-avatar--img { object-fit: cover; background: #e9ecef; }
.rail-avatar--img { object-fit: cover; background: #e9ecef; }
/* The Gridma logo sits on white, so it reads as a brand mark, not a photo. */
.cm-avatar--official { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); padding: 7px; object-fit: contain; }
.cm-avatar--official.cm-avatar--s { padding: 5px; }

.cm-kinds { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.cm-kind { position: relative; cursor: pointer; }
.cm-kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cm-kind span {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.65);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 6px 12px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cm-kind:hover span { border-color: rgba(17, 17, 17, 0.25); color: var(--ink); }
.cm-kind input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.cm-kind input:focus-visible + span { outline: 2px solid #0071e3; outline-offset: 2px; }

.cm-highlights { display: flex; flex-direction: column; gap: 6px; }
.cm-highlights-label { margin: 0; font-size: 12.5px; font-weight: 600; }
.cm-highlights-label span { font-weight: 400; color: var(--muted); }
.cm-highlight-list { display: flex; flex-direction: column; gap: 6px; }
.cm-highlight { display: flex; gap: 6px; align-items: center; }
.cm-highlight input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 8px 14px;
  outline: none;
}
.cm-highlight input:focus { border-color: var(--ink); }

.cm-icon-btn, .cm-comment-delete {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(17, 17, 17, 0.5);
  cursor: pointer;
}
.cm-icon-btn:hover, .cm-comment-delete:hover { background: rgba(17, 17, 17, 0.06); color: var(--ink); }

.cm-previews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cm-preview { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #e9ecef; }
.cm-preview img, .cm-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-preview--video { grid-column: span 2; aspect-ratio: 16 / 9; }
.cm-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 4px;
  background: rgba(17, 17, 17, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cm-preview-remove:hover { background: #111; }
.cm-preview-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(17, 17, 17, 0.72);
  border-radius: 4px;
  padding: 3px 8px;
}

.cm-progress { display: flex; align-items: center; gap: 10px; }
.cm-progress-bar { flex: 1; height: 6px; border-radius: 4px; background: rgba(17, 17, 17, 0.08); overflow: hidden; }
.cm-progress-bar span { display: block; height: 100%; width: 0; background: #2fb56a; border-radius: inherit; transition: width 0.2s ease; }
.cm-progress-label { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 92px; text-align: right; }

.cm-error {
  margin: 0;
  font-size: 13px;
  color: #a1281c;
  background: rgba(192, 57, 43, 0.08);
  border-radius: 8px;
  padding: 9px 12px;
}

.cm-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.7);
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cm-tool:hover:not(:disabled) { background: rgba(17, 17, 17, 0.06); color: var(--ink); }
.cm-tool:disabled { opacity: 0.4; cursor: default; }

.cm-gate {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 20px;
}
.cm-gate h2 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.cm-gate p { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }
.cm-gate .btn { padding: 10px 18px; font-size: 14px; }
.cm-gate-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cm-gate-link { font-size: 14px; font-weight: 500; color: var(--ink); }
/* After the interview hand-in: a small "In review" mark over the heading. */
.cm-gate .cm-gate-pill {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(17, 17, 17, 0.06);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* Post card additions */
.cm-name { display: inline-flex !important; align-items: center; gap: 4px; }
.cm-id > span { display: block; margin-top: 1px; }
.cm-verified { color: #1d9bf0; flex: none; }
.cm-tag--announcement { color: #8a5a00; background: rgba(255, 184, 0, 0.16); }
.cm-tag--update { color: rgba(17, 17, 17, 0.6); background: rgba(17, 17, 17, 0.06); }
.cm-tag--case_study { color: #1557c0; background: rgba(22, 104, 255, 0.1); }
.cm-post.is-hidden { border-style: dashed; }
.cm-post.is-hidden > :not(.cm-hidden-note):not(.cm-head) { opacity: 0.75; }
.cm-hidden-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #8a5a00;
  background: rgba(255, 184, 0, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
}
.cm-act:disabled { opacity: 0.5; cursor: default; translate: none; }
.cm-act-count { font-variant-numeric: tabular-nums; }
/* Your own post: Edit and Delete sit together at the end of the row. */
.cm-own { display: flex; gap: 8px; margin-left: auto; }
.cm-act--quiet { color: rgba(17, 17, 17, 0.5); }
.cm-act--quiet.is-armed { color: #a1281c; border-color: rgba(192, 57, 43, 0.45); }

.cm-gallery { display: grid; gap: 4px; margin-top: 12px; border-radius: 8px; overflow: hidden; }
.cm-gallery--1 { grid-template-columns: minmax(0, 1fr); }
.cm-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-gallery--3 > :first-child { grid-row: span 2; }
.cm-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-shot {
  display: block;
  padding: 0;
  border: 0;
  background: #e9ecef;
  cursor: zoom-in;
  overflow: hidden;
  min-height: 0;
}
.cm-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.3s var(--spring); }
.cm-gallery--1 .cm-shot img { height: auto; max-height: 560px; aspect-ratio: auto; }
.cm-gallery--2 .cm-shot, .cm-gallery--4 .cm-shot { aspect-ratio: 1; }
.cm-gallery--3 .cm-shot { aspect-ratio: 4 / 3; }
.cm-gallery--3 .cm-shot:first-child { aspect-ratio: auto; }
.cm-shot:focus-visible { outline: 3px solid #0071e3; outline-offset: -3px; }
@media (hover: hover) {
  .cm-shot:hover img { scale: 1.02; }
}
.cm-video { display: block; width: 100%; max-height: 560px; background: #000; }

.cm-comment-list:empty { display: none; }
.cm-comment { position: relative; }
.cm-comment-body { flex: 1; }
.cm-comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.cm-comment-meta .cm-name { font-size: 12.5px; font-weight: 600; }
.cm-comment-time { font-size: 11.5px; color: rgba(17, 17, 17, 0.4); white-space: nowrap; }
.cm-comment-text { display: block; font-size: 13px; line-height: 1.5; color: rgba(17, 17, 17, 0.8); overflow-wrap: anywhere; white-space: pre-line; }
.cm-comment-delete { width: 26px; height: 26px; align-self: center; }
.cm-thread-status { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cm-thread-status a { color: var(--ink); font-weight: 500; }
.cm-comment-form textarea { resize: none; border-radius: 8px; line-height: 1.4; max-height: 160px; }
.cm-comment-form { align-items: flex-end; }

/* While a filter loads, the old list fades so the click visibly did something. */
#cmList { transition: opacity 0.15s ease; }
#cmList[aria-busy="true"] { opacity: 0.45; pointer-events: none; }

.cm-more { display: flex; justify-content: center; padding: 6px 0 4px; }
.cm-more .cm-act { padding: 10px 20px; }
.cm-more .cm-act[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

.cm-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
}
.cm-lightbox[open] { display: flex; }
html:has(.cm-lightbox[open]) { overflow: hidden; }
.cm-lightbox::backdrop { background: rgba(10, 10, 10, 0.88); }
.cm-lightbox-img { max-width: min(92vw, 1600px); max-height: 86vh; object-fit: contain; border-radius: 8px; }
.cm-lightbox-close, .cm-lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.cm-lightbox-close:hover, .cm-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
.cm-lightbox :focus-visible { outline-color: #fff; }
.cm-lightbox-close { top: 18px; right: 18px; }
.cm-lightbox-prev { left: 18px; top: 50%; translate: 0 -50%; }
.cm-lightbox-next { right: 18px; top: 50%; translate: 0 -50%; }
.cm-lightbox.is-single .cm-lightbox-nav { display: none; }
.cm-lightbox-count { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.75); }

@media (max-width: 640px) {
  .cm-previews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cm-toolbar .cm-share { flex-basis: 100%; }
  .cm-composer > :not(.cm-composer-row):not(.cm-sr) { margin-left: 0; }
  .cm-gallery--1 .cm-shot img, .cm-video { max-height: 440px; }
  .cm-lightbox-prev { left: 8px; }
  .cm-lightbox-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-shot img, .cm-progress-bar span { transition: none; }
}

/* ---------- AI profile assistant ---------- */

.as-panel {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 10px;
}
.as-h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 14px; }

.as-status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(17, 17, 17, 0.7); }
.as-dots { display: inline-flex; gap: 4px; }
.as-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.32);
  animation: as-bounce 1.1s infinite ease-in-out;
}
.as-dots span:nth-child(2) { animation-delay: 0.15s; }
.as-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes as-bounce {
  0%, 60%, 100% { translate: 0 0; opacity: 0.45; }
  30% { translate: 0 -4px; opacity: 1; }
}

.as-scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.as-score { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.as-score-num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.as-score-label { font-size: 12.5px; color: var(--muted); }
.as-score .bd-track { margin-top: 8px; }

.as-rec {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.as-rec--enter { animation: as-enter 0.35s var(--spring); }
@keyframes as-enter {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
.as-rec-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.as-rec-pri {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  padding: 3px 9px;
}
.as-rec-pri--high { color: #1f8a4c; background: rgba(68, 220, 134, 0.16); }
.as-rec-pri--medium { color: #8a6d1f; background: rgba(240, 190, 60, 0.18); }
.as-rec-pri--low { color: rgba(17, 17, 17, 0.55); background: #f4f4f5; }
.as-rec-impact { margin-left: auto; font-size: 12px; font-weight: 600; color: #1f8a4c; white-space: nowrap; }
.as-rec-text { font-size: 13.5px; line-height: 1.55; color: rgba(17, 17, 17, 0.75); margin: 0; }

.as-log { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 320px; overflow-y: auto; }
.as-bubble {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 85%;
}
.as-bubble--ai { background: #fff; border: 1px solid rgba(17, 17, 17, 0.07); align-self: flex-start; }
.as-bubble--you {
  align-self: flex-end;
  color: #fff;
  background:
    linear-gradient(#2020201a 0% 100%),
    linear-gradient(#4f4f4f 0%, #202020d9 100%);
  border: 1px solid #383838;
}
.as-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* The chips' kit style lives in chat.css, which this page does not load, so
   the pill is declared here too. */
.as-chips .suggestion {
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 8px;
  padding: 8px 14px;
  transition: border-color 0.15s ease, translate 0.18s var(--spring);
}
.as-chips .suggestion:hover { border-color: var(--ink); }
@media (hover: hover) {
  .as-chips .suggestion:hover { translate: 0 -1px; }
}

@media (max-width: 640px) {
  .as-scores { grid-template-columns: minmax(0, 1fr); }
  .as-rec-top { flex-wrap: wrap; }
  .as-rec-impact { margin-left: 0; }
}

/* ---------- How it works: the job placement road ---------- */

.hw-hero { padding-bottom: 28px; }
.hw-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.hw-steps { max-width: 760px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.hw-step {
  display: flex;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 22px;
}
.hw-step .hub-step-num { flex: none; }
.hw-step-body { min-width: 0; }
.hw-step h2 { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; margin: 6px 0 8px; }
.hw-step p { font-size: 14px; line-height: 1.6; color: rgba(17, 17, 17, 0.7); margin: 0; }
.hw-you {
  margin-top: 10px !important;
  padding: 10px 14px;
  background: rgba(68, 220, 134, 0.08);
  border: 1px solid rgba(68, 220, 134, 0.22);
  border-radius: 8px;
  font-size: 13px !important;
  color: rgba(17, 17, 17, 0.75) !important;
}

@media (max-width: 640px) {
  .hw-step { flex-direction: column; gap: 10px; padding: 18px; }
}

/* ---------- Hub registration ---------- */

.hub-reg { max-width: 560px; margin: 0 auto; padding: 44px 0 56px; }
.hub-reg-head { margin-bottom: 26px; }
.hub-reg-head h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.hub-reg-head p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }

.hub-reg-progress { margin-bottom: 22px; }
.hub-reg-progress-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 8px; }
.hub-reg-progress-top span:first-child { color: var(--muted); }
.hub-reg-progress-top span:last-child { font-weight: 600; }
.hub-reg-bar { height: 6px; border-radius: 4px; background: rgba(17, 17, 17, 0.07); overflow: hidden; }
.hub-reg-bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #55cd92, #2fb56a);
  transition: width 0.3s var(--spring);
}

.hub-reg-step { display: none; }
.hub-reg-step.is-active { display: block; }

.hub-field { margin-bottom: 16px; }
.hub-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.hub-field input, .hub-field select {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
}
.hub-field input:focus, .hub-field select:focus { border-color: var(--ink); }

/* Selects drop the native chrome and wear the same material as the text
   inputs: same height, same radius, a quiet chevron on the right, and the
   placeholder gray while nothing is chosen (a required empty select is
   :invalid, which is exactly that state). */
.hub-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-opacity='0.45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.hub-field select:required:invalid { color: rgba(17, 17, 17, 0.38); }
.hub-field select option { color: var(--ink); }
.hub-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.hub-reg-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 6px 0 0; }
.hub-reg-lede { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 18px; }

.hub-reg-row { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.hub-reg-row .btn { padding: 12px 22px; font-size: 14.5px; }
.hub-reg-back {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.55);
  background: none;
  border: none;
}
.hub-reg-back:hover { color: var(--ink); text-decoration: underline; }

.hub-reg-review { margin-bottom: 8px; }
.hub-reg-review-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1f8a4c;
  margin: 0 0 10px;
}
.hub-reg-public {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 16px;
}
.hub-reg-public strong { display: block; font-size: 16px; font-weight: 650; }
.hub-reg-public span:not(.rail-avatar) { font-size: 13px; color: var(--muted); }
.hub-reg-rows { margin: 14px 0 0; }
.hub-reg-rows dt { float: left; width: 130px; font-size: 13px; color: var(--muted); padding: 6px 0; }
.hub-reg-rows dd { margin: 0 0 0 130px; font-size: 13.5px; font-weight: 500; padding: 6px 0; overflow-wrap: anywhere; }

.hub-reg-later { margin-top: 14px; }
.hub-reg-hint-tight { margin: -6px 0 16px; }
.hub-field-spaced { margin-top: 4px; }
.hub-reg-row-end { margin-top: 28px; }
.hub-reg-row-end .hub-reg-back, .hub-resume .hub-reg-back { padding: 0; }

/* Resume cue: shown when a saved draft reopens past the account screen. */
.hub-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  background: rgba(68, 220, 134, 0.08);
  border: 1px solid rgba(68, 220, 134, 0.22);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.hub-resume[hidden] { display: none; }
.hub-resume p { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 1.5; color: rgba(17, 17, 17, 0.72); }
.hub-resume strong { color: #176b3c; font-weight: 650; }
.hub-resume-actions { display: flex; gap: 16px; }
.hub-resume .hub-reg-back { font-size: 13px; }

/* Derived US overlap sits between the timezone and the hours fields. */
.hub-reg-derived {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.hub-reg-derived strong { display: block; font-size: 13.5px; font-weight: 600; }
.hub-reg-derived span { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(17, 17, 17, 0.62); margin-top: 3px; }

/* AI tool chips: real checkboxes wearing the pill look of the feed filters.
   The input is stretched over the chip but invisible, so keyboard focus and
   the browser's validation bubble both land on the chip. */
.hub-chipset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.hub-chipset legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.hub-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chip { position: relative; display: inline-flex; cursor: pointer; }
.hub-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.hub-chip span {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.72);
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 8px;
  padding: 8px 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.hub-chip:hover span { border-color: rgba(17, 17, 17, 0.3); }
.hub-chip input:checked + span {
  color: #14693a;
  background: rgba(68, 220, 134, 0.14);
  border-color: rgba(68, 220, 134, 0.65);
}
.hub-chip input:checked + span::before {
  content: "";
  width: 4px;
  height: 8px;
  margin: -2px 9px 0 1px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}
.hub-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) {
  .hub-chip span { padding: 11px 15px; }
}

/* Gate tracker (done screen). */
.hub-gate-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hub-reg-done-ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(68, 220, 134, 0.16);
  color: #1f8a4c;
}
.hub-gate-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; margin: 0; outline: none; }
.hub-gate-head p { font-size: 13px; color: rgba(17, 17, 17, 0.62); margin: 2px 0 0; }
.hub-gate-head p:empty { display: none; }

.hub-gate-next {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(68, 220, 134, 0.08);
  border: 1px solid rgba(68, 220, 134, 0.22);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  outline: none;
}
.hub-gate-next strong { color: #176b3c; font-weight: 650; }
.hub-gate-next:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.hub-gates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hub-gate {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 16px;
}
.hub-gate .hub-step-num { flex: none; }
.hub-gate.is-locked .hub-step-num { background: rgba(17, 17, 17, 0.06); color: rgba(17, 17, 17, 0.5); }
.hub-gate-body { flex: 1; min-width: 0; }
.hub-gate-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.hub-gate-top strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hub-gate-pill {
  font-size: 12px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.66);
  background: rgba(17, 17, 17, 0.06);
  border-radius: 4px;
  padding: 4px 10px;
}
.hub-gate.is-ready .hub-gate-pill,
.hub-gate.is-done .hub-gate-pill { color: #14693a; background: rgba(68, 220, 134, 0.16); }
.hub-gate-detail { font-size: 13px; line-height: 1.5; color: rgba(17, 17, 17, 0.62); margin: 6px 0 0; }
.hub-gate-action { margin-top: 12px; }
.hub-gate-action .btn { padding: 10px 18px; font-size: 13.5px; }

.hub-gate-timeline { font-size: 14px; line-height: 1.55; margin: 18px 0 0; }

.hub-wait-title { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; margin: 30px 0 0; }
.hub-wait { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hub-wait a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color 0.15s ease;
}
.hub-wait a:hover { border-color: rgba(68, 220, 134, 0.55); }
.hub-wait a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hub-wait strong { display: block; font-size: 14.5px; font-weight: 600; }
.hub-wait span { display: block; font-size: 13px; line-height: 1.45; color: rgba(17, 17, 17, 0.62); margin-top: 2px; }
.hub-wait svg { flex: none; color: #1f8a4c; }

@media (max-width: 640px) {
  .hub-field-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hub-reg { padding: 28px 0 40px; }
  .hub-reg-rows dt { float: none; width: auto; padding-bottom: 0; }
  .hub-reg-rows dd { margin: 0; padding-top: 2px; }
  .hub-reg-hint-tight { margin-top: 0; }
  .hub-gate { padding: 14px; gap: 12px; }
}

/* ---------- The field quiz ---------- */

.hub-quiz {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hub-quiz-q {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 18px;
}
.hub-quiz-q h3 { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0 0 10px; }
.hub-quiz-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hub-quiz-opt:hover { background: #fff; }
.hub-quiz-opt input { margin-top: 3px; accent-color: #2fb56a; flex: none; }

.hub-quiz-result {
  background: rgba(68, 220, 134, 0.1);
  border: 1px solid rgba(68, 220, 134, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.hub-quiz-result.is-fail {
  background: rgba(240, 190, 60, 0.12);
  border-color: rgba(240, 190, 60, 0.4);
}

/* ---------- Toast ---------- */

.hub-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  translate: -50% 16px;
  background: #111;
  color: #fff;
  font-size: 13.5px;
  border-radius: 8px;
  padding: 11px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.2s ease;
  z-index: 50;
  max-width: calc(100vw - 32px);
}
.hub-toast.is-visible { opacity: 1; translate: -50% 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .hub-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-usjobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed-layout { grid-template-columns: minmax(0, 1fr); }
  .feed-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .feed-rail .rail-card { flex: 1 1 260px; }
}

@media (max-width: 640px) {
  .hub-canvas { padding: 0 16px 36px; }
  .cm-nav-group { margin: -4px -16px; padding: 4px 16px; scroll-padding-inline: 16px; }
  .hub-hero { padding: 40px 0 28px; }
  .hub-proof, .hub-steps, .hub-pay, .hub-usjobs { grid-template-columns: minmax(0, 1fr); }
  .hub-foot { padding: 16px 16px 24px; }

  .fd-card { flex-wrap: wrap; }
  .fd-img { width: 100%; height: 150px; }
  .fd-side { flex-direction: row; align-items: center; width: 100%; }
  .fd-price span { text-align: left; }
  .fd-actions { margin-left: auto; }
  .fd-posted { display: none; }

  .cm-post { padding: 16px; }
  /* The kind tag drops to its own line under the name instead of vanishing. */
  .cm-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; }
  .cm-head .cm-avatar { grid-row: 1 / span 2; }
  .cm-head .cm-id { grid-column: 2; grid-row: 1; }
  .cm-head .cm-time { grid-column: 3; grid-row: 1; align-self: start; padding-top: 2px; }
  .cm-head .cm-tag { grid-column: 2 / span 2; grid-row: 2; justify-self: start; }
  .cm-share { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-toast { transition: none; }
}

/* ---------- Hub registration: server-backed states ---------- */

/* Errors from the server (field rules, session, network) under a form. */
.hub-reg-error {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(220, 60, 60, 0.07);
  border: 1px solid rgba(220, 60, 60, 0.28);
  color: #9b1c1c;
  font-size: 13px;
  line-height: 1.5;
}
.hub-reg-error[hidden] { display: none; }

/* One-off notices: email confirmed, signed out, password changed. */
.hub-notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(68, 220, 134, 0.1);
  border: 1px solid rgba(68, 220, 134, 0.3);
  font-size: 13.5px;
  line-height: 1.5;
}
.hub-notice[hidden] { display: none; }

/* "Confirm your email" reuses the resume cue, in amber. */
.hub-verify { background: rgba(240, 190, 60, 0.1); border-color: rgba(240, 190, 60, 0.4); }
.hub-verify strong { color: #8a5a00; }

.hub-reg-save { min-height: 1em; margin: 6px 0 0; font-size: 12px; color: var(--muted); text-align: right; }

a.hub-reg-back { text-decoration: none; }
a.hub-reg-back:hover { text-decoration: underline; }
.hub-reg-back[hidden] { display: none; }

/* A gate that did not pass: rejected application, failed or closed quiz. */
.hub-gate.is-failed .hub-step-num { background: rgba(240, 190, 60, 0.18); color: #8a5a00; }
.hub-gate.is-failed .hub-gate-pill { color: #8a5a00; background: rgba(240, 190, 60, 0.18); }

/* Signed-in state in the topbar. */
.hub-account { display: flex; align-items: center; gap: 14px; }
.hub-account[hidden] { display: none; }
.hub-account form { margin: 0; }
.hub-account button.app-signin { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.hub-account-email { font-size: 13px; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .hub-account-email { display: none; }
}

/* Sign in and password pages: the registration card on its own. */
.hub-auth-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 13.5px; }
.hub-auth-links a { color: rgba(17, 17, 17, 0.62); }
.hub-auth-links a:hover { color: var(--ink); }
.hub-field-error { font-size: 12.5px; color: #9b1c1c; margin: 6px 0 0; }

/* Sign out sits in the shared Talent topbar as a plain text button. */
.hub-signout { margin: 0; }
.hub-signout button.app-signin { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Community: "Show earlier comments" at the top of a long thread. */
.cm-earlier {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.6);
  background: none;
  border: 0;
  cursor: pointer;
}
.cm-earlier:hover { color: var(--ink); text-decoration: underline; }
.cm-earlier:disabled { opacity: 0.5; cursor: default; }

/* Password fields: a Show/Hide text button inside the box (talent-auth.js). */
.hub-pw { position: relative; }
.hub-field .hub-pw input { padding-right: 72px; }
.hub-pw input::-ms-reveal, .hub-pw input::-ms-clear { display: none; }
.hub-pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.6);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.hub-pw-toggle:hover { color: var(--ink); background: rgba(17, 17, 17, 0.05); }
.hub-pw-toggle:focus-visible { outline: 2px solid #0071e3; outline-offset: 1px; }

/* A field the server sent back with an error. */
.hub-field input[aria-invalid="true"] { border-color: rgba(220, 60, 60, 0.6); }

/* Headings and the review box take focus when a screen changes; they are
   not controls, so no ring. */
#regTitle:focus, #gateTitle:focus, #hubReview:focus { outline: none; }

/* Community: a comment's delete asks once before it removes. */
.cm-comment-delete.is-armed {
  width: auto;
  gap: 4px;
  padding: 0 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #a1281c;
  background: rgba(192, 57, 43, 0.08);
}
.cm-comment-delete:focus-visible { outline: 2px solid #0071e3; outline-offset: 1px; }

/* ---------- Community: report a post or a comment ----------
   The menu on someone else's post or comment, and the report dialog. Black
   and white only; new corners are 4px or 8px. */

.cm-menu { position: relative; flex: none; }
.cm-menu-list[hidden] { display: none; }
.cm-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 176px;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.12);
}
.cm-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
}
.cm-menu-item svg { flex: none; }
.cm-menu-item:hover, .cm-menu-item:focus { background: rgba(17, 17, 17, 0.06); outline: none; }
.cm-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.cm-menu-item[aria-disabled="true"] { color: rgba(17, 17, 17, 0.55); font-weight: 600; cursor: default; }

.cm-more-btn[aria-expanded="true"] { background: rgba(17, 17, 17, 0.06); color: var(--ink); }
.cm-more-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cm-more-btn--s { width: 26px; height: 26px; }
.cm-head .cm-menu { margin: -4px -8px -4px -6px; }
.cm-comment > .cm-menu { align-self: center; }

/* community#post-12 lands with a little air above the card. */
.cm-post[id] { scroll-margin-top: 16px; }

.cm-report:not([open]) { display: none; }
.cm-report {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18);
  overflow: auto;
  overscroll-behavior: contain;
}
.cm-report::backdrop { background: rgba(17, 17, 17, 0.4); }
html:has(.cm-report[open]) { overflow: hidden; }
.cm-report-box { padding: 20px; }
.cm-report :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.cm-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-report-title { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.cm-report-close { margin-right: -6px; }
.cm-report-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(17, 17, 17, 0.6); }
.cm-report-guest .cm-report-sub { margin-top: 6px; }

.cm-report-form, .cm-report-guest { display: flex; flex-direction: column; gap: 16px; }
.cm-report-form { margin-top: 6px; }
.cm-report-form[hidden], .cm-report-guest[hidden], .cm-report-offline[hidden] { display: none; }

.cm-report-reasons { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cm-report-legend { padding: 0; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.cm-report-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cm-report-reason:hover { border-color: rgba(17, 17, 17, 0.35); }
.cm-report-reason:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.cm-report-reason input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid rgba(17, 17, 17, 0.4);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.cm-report-reason input:checked { border: 5.5px solid var(--ink); }
.cm-report-reason input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.cm-report-field { display: flex; flex-direction: column; gap: 6px; }
.cm-report-label { font-size: 13px; font-weight: 600; }
.cm-report-label span { font-weight: 400; color: var(--muted); }
.cm-report-field textarea {
  min-height: 76px;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
.cm-report-field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cm-report-count { align-self: flex-end; min-height: 16px; margin-top: -2px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Stays in the page while empty (so it is announced when filled); the
   negative margin takes back the form gap. */
.cm-report-alert:empty { margin-top: -16px; }
.cm-report-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.cm-report-error svg { flex: none; margin-top: 1px; }

.cm-report-offline {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.7);
  background: rgba(17, 17, 17, 0.04);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}
.cm-report-offline strong { font-weight: 600; color: var(--ink); }
.cm-report-offline a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.cm-report-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.cm-report-send { padding: 10px 20px; font-size: 14px; }
.cm-report-send:disabled { opacity: 0.6; cursor: default; }
/* Dimmed until a reason is picked, and while sending; it keeps focus. */
.cm-report-send[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.cm-report-reasons[hidden], .cm-report-field[hidden] { display: none; }
.cm-report-cancel {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 8px;
}
.cm-report-cancel:hover { border-color: rgba(17, 17, 17, 0.35); }

@media (max-width: 640px) {
  /* The menu takes a fourth column beside the time. */
  .cm-head.has-menu { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .cm-head.has-menu .cm-menu { grid-column: 4; grid-row: 1; align-self: start; margin: -6px -8px 0 -6px; }
  .cm-head.has-menu .cm-tag { grid-column: 2 / span 3; }
  .cm-report-box { padding: 18px 16px; }
  .cm-report-actions > * { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-report-reason { transition: none; }
}

/* ---------- Editing your own post (inline, in the card) ---------- */

/* The words, chips, files and buttons step aside while the form is open;
   the gallery and chips set their own display, which would beat hidden. */
.cm-post > [hidden] { display: none; }
.cm-edit { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.cm-edit textarea {
  width: 100%;
  min-height: 68px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 11px 14px;
  outline: none;
}
.cm-edit textarea:focus { border-color: var(--ink); }
.cm-edit textarea[aria-invalid="true"], .cm-edit .cm-highlight input[aria-invalid="true"] { border-color: #c0392b; }
.cm-edit .hub-field-error { margin: 0; }
.cm-edit .cm-field .hub-field-error { margin-top: 2px; }
.cm-edit-media { display: flex; flex-direction: column; gap: 6px; }
.cm-edit-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.cm-edit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-edit-cancel {
  margin-left: auto;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 8px;
  cursor: pointer;
}
.cm-edit-cancel:hover { border-color: rgba(17, 17, 17, 0.35); }
.cm-edit-save { padding: 10px 20px; font-size: 14px; }
.cm-edit-save:disabled { opacity: 0.6; cursor: default; }
.cm-edit.is-sending :is(textarea, .cm-highlight input, .cm-kinds, .cm-previews) { opacity: 0.6; }

@media (max-width: 640px) {
  /* Edit and Delete drop to their own line rather than squeeze the row. */
  .cm-actions { flex-wrap: wrap; }
  /* "Edited" goes under the time, so the name keeps its room. */
  .cm-when { display: flex; flex-direction: column; align-items: flex-end; }
  .cm-when .cm-edited-dot { display: none; }
  .cm-edit-actions .cm-tool { flex-basis: 100%; justify-content: flex-start; }
  .cm-edit-actions :is(.cm-edit-cancel, .cm-edit-save) { flex: 1; margin-left: 0; }
}

/* "Coming later" next to a rail title (feed: Growth bonus). */
.rail-soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: rgba(17, 17, 17, 0.06); color: var(--muted); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }

/* =========================================================================
   Dark theme. gridma-theme.css holds the palette and sets data-theme on
   <html>. The --card, --hair, --muted and --ink tokens belong to
   dashboard.css and styles.css, so every surface, line and text color here
   names its --dk-* value directly. Photos, video, the blue initials
   avatars, the green progress fills and the dark chips over media keep
   their light colors. The light green, amber and red borders of the notes
   stay too: they are translucent and read on dark.
   ========================================================================= */
/* Screen only: a printout keeps the light colors. */
@media screen {

  /* Text in the hub canvas reads light; everything below sets its own. */
  :root[data-theme="dark"] .hub-canvas { color: var(--dk-ink); }

  /* Each :is() list below holds selectors of one specificity, so the state
     rules after it (hover, is-on, is-over) still win as in the light theme. */

  /* Cards and panels. */
  :root[data-theme="dark"] :is(.hub-proof-card, .hub-step, .hub-usjob, .hub-pay-card, .hub-close,
    .fd-card, .rail-card, .cm-composer, .cm-post, .cm-gate, .as-panel, .hw-step,
    .hub-reg-public, .hub-reg-derived, .hub-gate, .hub-quiz-q) {
    background: var(--dk-surface);
    border-color: var(--dk-line);
  }
  :root[data-theme="dark"] .hub-wait a { background: var(--dk-surface); border-color: var(--dk-line); }
  :root[data-theme="dark"] :is(.hub-usjob, .fd-card):hover { border-color: var(--dk-line-2); }
  :root[data-theme="dark"] .hub-wait a:hover { border-color: rgba(68, 220, 134, 0.55); }
  :root[data-theme="dark"] .feed-empty {
    background: var(--dk-surface);
    border-color: var(--dk-line-2);
    color: var(--dk-muted);
  }

  /* Gray text: muted keeps 4.5:1 on every dark surface, so the lighter
     grays of the light theme (0.4 to 0.62) all land on it. */
  :root[data-theme="dark"] :is(.hub-section-note, .hub-usjob-meta, .hub-foot, .fd-posted, .fd-note,
    .fd-meta, .cm-nav-label, .cm-time, .cm-comment-time, .cm-count, .cm-progress-label, .cm-thread-status,
    .as-score-label, .hub-reg-hint, .hub-reg-lede, .hub-gate-detail, .hub-reg-save,
    .hub-account-email, .cm-report-sub, .cm-report-count) {
    color: var(--dk-muted);
  }
  :root[data-theme="dark"] :is(.hub-hero p, .hub-proof-card span, .hub-step p, .hub-pay-card p,
    .hub-close p, .feed-head p, .fd-price span, .rail-card p, .rail-id span, .rail-stat span,
    .cm-id span, .cm-highlights-label span, .cm-gate p, .hub-reg-head p, .hub-reg-rows dt,
    .hub-reg-derived span, .hub-gate-head p, .hub-wait span, .cm-report-label span) {
    color: var(--dk-muted);
  }
  :root[data-theme="dark"] .hub-reg-progress-top span:first-child,
  :root[data-theme="dark"] .hub-reg-public span:not(.rail-avatar) { color: var(--dk-muted); }
  /* The darker grays (0.7 and up) and gray links. */
  :root[data-theme="dark"] :is(.hub-quiet-link, .hub-privacy, .as-status, .as-rec-text, .cm-comment-text) { color: var(--dk-ink-2); }
  :root[data-theme="dark"] :is(.hub-foot a, .hw-step p, .hub-resume p, .cm-comment-body span) { color: var(--dk-ink-2); }
  :root[data-theme="dark"] .hw-you { color: var(--dk-ink-2) !important; }
  :root[data-theme="dark"] :is(.hub-reg-back, .cm-earlier, .hub-pw-toggle) { color: var(--dk-muted); }
  :root[data-theme="dark"] .hub-auth-links a { color: var(--dk-muted); }
  :root[data-theme="dark"] :is(.hub-quiet-link, .hub-reg-back, .cm-earlier):hover,
  :root[data-theme="dark"] :is(.hub-foot a, .hub-auth-links a):hover,
  :root[data-theme="dark"] .cm-gate-link,
  :root[data-theme="dark"] .cm-thread-status a { color: var(--dk-ink); }

  /* Green, amber and red marks move to the state colors. */
  :root[data-theme="dark"] :is(.hub-tag, .hub-step-num, .fd-ai, .cm-tag, .cm-chip, .as-rec-pri--high, .hub-reg-done-ico) {
    color: var(--dk-success);
    background: var(--dk-success-bg);
  }
  :root[data-theme="dark"] :is(.hub-eyebrow, .hub-usjob-city, .rail-link, .as-rec-impact, .hub-reg-review-label) { color: var(--dk-success); }
  :root[data-theme="dark"] :is(.hub-wait svg, .hub-resume strong, .hub-gate-next strong) { color: var(--dk-success); }
  :root[data-theme="dark"] :is(.hub-privacy, .hw-you, .hub-resume, .hub-gate-next, .hub-quiz-result) { background: var(--dk-success-bg); }
  /* Low on purpose: the editor's own notice (.pe .hub-notice) keeps winning. */
  :root[data-theme="dark"] :where(.hub-notice) { background: var(--dk-success-bg); }
  :root[data-theme="dark"] .hub-gate-next:focus-visible { outline-color: var(--dk-ink); }

  :root[data-theme="dark"] :is(.cm-tag--announcement, .as-rec-pri--medium, .cm-hidden-note) {
    color: var(--dk-warn);
    background: var(--dk-warn-bg);
  }
  :root[data-theme="dark"] .cm-tag--update { color: var(--dk-ink-2); background: var(--dk-tint); }
  /* The case study tag keeps its blue wash; the text takes the dark link blue. */
  :root[data-theme="dark"] .cm-tag--case_study { color: var(--dk-link); background: rgba(22, 104, 255, 0.1); }
  :root[data-theme="dark"] .hub-quiz-result.is-fail { background: var(--dk-warn-bg); }
  :root[data-theme="dark"] .hub-verify { background: var(--dk-warn-bg); }
  :root[data-theme="dark"] .hub-verify strong { color: var(--dk-warn); }

  :root[data-theme="dark"] :is(.cm-error, .hub-reg-error) { color: var(--dk-danger); background: var(--dk-danger-bg); }
  :root[data-theme="dark"] :is(.cm-count.is-over, .hub-field-error) { color: var(--dk-danger); }

  /* Neutral pills, tracks and wells. */
  :root[data-theme="dark"] :is(.as-rec-pri--low, .hub-gate-pill) { color: var(--dk-ink-2); background: var(--dk-tint-2); }
  :root[data-theme="dark"] .cm-gate .cm-gate-pill { color: var(--dk-ink-2); background: var(--dk-tint-2); }
  :root[data-theme="dark"] .rail-soon { color: var(--dk-muted); background: var(--dk-tint-2); }
  :root[data-theme="dark"] :is(.cm-progress-bar, .hub-reg-bar) { background: var(--dk-tint-2); }
  :root[data-theme="dark"] .as-dots span { background: var(--dk-faint); }
  :root[data-theme="dark"] .fd-field { color: var(--dk-ink-2); background: var(--dk-surface-2); }
  :root[data-theme="dark"] .fd-match { color: var(--dk-success); border-color: var(--dk-line); }

  /* Gate tracker states, restated because the dark number above outranks them. */
  :root[data-theme="dark"] .hub-gate.is-locked .hub-step-num { color: var(--dk-muted); background: var(--dk-tint-2); }
  :root[data-theme="dark"] .hub-gate:is(.is-ready, .is-done) .hub-gate-pill { color: var(--dk-success); background: var(--dk-success-bg); }
  :root[data-theme="dark"] .hub-gate.is-failed :is(.hub-step-num, .hub-gate-pill) { color: var(--dk-warn); background: var(--dk-warn-bg); }

  /* Image wells behind photos while they load. */
  :root[data-theme="dark"] :is(.cm-avatar--img, .rail-avatar--img, .cm-preview, .cm-shot) { background: var(--dk-surface-2); }
  /* Gridma's own avatar: the black mark on a light disc, inverted as a whole,
     becomes a white mark on a near black disc, like the inverted logo. */
  :root[data-theme="dark"] .cm-avatar--official {
    background: var(--dk-ink);
    box-shadow: none;
    filter: invert(1);
  }

  /* Fields. */
  :root[data-theme="dark"] :is(.cm-composer textarea, .cm-comment-form textarea, .cm-highlight input,
    .hub-field input, .hub-field select, .cm-report-field textarea) {
    color: var(--dk-ink);
    background-color: var(--dk-surface-2);
    border-color: var(--dk-line-2);
  }
  :root[data-theme="dark"] :is(.cm-composer textarea, .cm-comment-form textarea, .cm-highlight input,
    .hub-field input, .hub-field select):focus { border-color: var(--dk-ink); }
  :root[data-theme="dark"] .cm-report-field textarea:focus { border-color: var(--dk-ink); box-shadow: 0 0 0 1px var(--dk-ink); }
  /* The browser's own placeholder gray drops to 3.4:1 on the dark field. */
  :root[data-theme="dark"] :is(.cm-composer textarea, .cm-comment-form textarea, .cm-highlight input,
    .hub-field input, .cm-report-field textarea)::placeholder { color: var(--dk-muted); }
  :root[data-theme="dark"] .hub-field input[aria-invalid="true"] { border-color: var(--dk-danger); }
  /* The chevron is an image and cannot read a variable: this is --dk-ink at
     the --dk-muted strength. */
  :root[data-theme="dark"] .hub-field select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-opacity='0.64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] .hub-field select:required:invalid { color: var(--dk-muted); }
  :root[data-theme="dark"] .hub-field select option { color: var(--dk-ink); background: var(--dk-surface-2); }
  :root[data-theme="dark"] .cm-composer.is-dropping { border-color: var(--dk-success); box-shadow: 0 0 0 3px var(--dk-success-bg); }

  /* Chips and quiet buttons: a dark face one step above the card, a hairline
     edge that firms up on hover, light text. */
  :root[data-theme="dark"] :is(.feed-chip, .cm-act, .fd-save),
  :root[data-theme="dark"] .cm-kind span,
  :root[data-theme="dark"] .as-chips .suggestion {
    color: var(--dk-ink-2);
    background: var(--dk-surface-2);
    border-color: var(--dk-line);
  }
  :root[data-theme="dark"] .fd-save { color: var(--dk-muted); }
  :root[data-theme="dark"] :is(.feed-chip, .cm-act, .fd-save):hover,
  :root[data-theme="dark"] .cm-kind:hover span { color: var(--dk-ink); border-color: var(--dk-line-2); }
  :root[data-theme="dark"] .as-chips .suggestion:hover { border-color: var(--dk-ink); }
  :root[data-theme="dark"] :is(.cm-act, .fd-save).is-on { color: var(--dk-success); border-color: rgba(68, 220, 134, 0.5); }
  :root[data-theme="dark"] .cm-act--quiet { color: var(--dk-muted); }
  :root[data-theme="dark"] .cm-act--quiet.is-armed { color: var(--dk-danger); border-color: currentColor; }
  /* Selected chips invert like the primary buttons. */
  :root[data-theme="dark"] .feed-chip.is-active,
  :root[data-theme="dark"] .cm-kind input:checked + span {
    color: var(--dk-on-ink);
    background: var(--dk-ink);
    border-color: var(--dk-ink);
  }

  :root[data-theme="dark"] .hub-chip span {
    color: var(--dk-ink-2);
    background: var(--dk-surface-2);
    border-color: var(--dk-line-2);
  }
  :root[data-theme="dark"] .hub-chip:hover span { border-color: var(--dk-faint); }
  :root[data-theme="dark"] .hub-chip input:checked + span {
    color: var(--dk-success);
    background: var(--dk-success-bg);
    border-color: rgba(68, 220, 134, 0.65);
  }
  :root[data-theme="dark"] .hub-chip input:focus-visible + span { outline-color: var(--dk-ink); }

  /* Inner wells: comments, recommendations, the AI's chat bubble. */
  :root[data-theme="dark"] :is(.cm-comment-body, .as-rec, .as-bubble--ai) {
    background: var(--dk-surface-2);
    border-color: var(--dk-line);
  }
  :root[data-theme="dark"] .cm-actions { border-top-color: var(--dk-line); }

  /* Icon buttons, tools and hover washes. */
  :root[data-theme="dark"] :is(.cm-icon-btn, .cm-comment-delete) { color: var(--dk-muted); }
  :root[data-theme="dark"] .cm-tool { color: var(--dk-ink-2); }
  :root[data-theme="dark"] :is(.cm-icon-btn, .cm-comment-delete):hover,
  :root[data-theme="dark"] .cm-tool:hover:not(:disabled),
  :root[data-theme="dark"] .cm-more-btn[aria-expanded="true"] { color: var(--dk-ink); background: var(--dk-tint-2); }
  :root[data-theme="dark"] .cm-comment-delete.is-armed { color: var(--dk-danger); background: var(--dk-danger-bg); }
  :root[data-theme="dark"] .cm-more-btn:focus-visible { outline-color: var(--dk-ink); }
  :root[data-theme="dark"] .hub-pw-toggle:hover { color: var(--dk-ink); background: var(--dk-tint); }
  :root[data-theme="dark"] .hub-quiz-opt:hover { background: var(--dk-tint-2); }
  :root[data-theme="dark"] .hub-wait a:focus-visible { outline-color: var(--dk-ink); }

  /* Community navigation. Wide: a list on the page ground. */
  :root[data-theme="dark"] .cm-nav-item { color: var(--dk-ink-2); }
  :root[data-theme="dark"] .cm-nav-item:hover { color: var(--dk-ink); background: var(--dk-tint); }
  :root[data-theme="dark"] .cm-nav-item.is-active {
    color: var(--dk-ink);
    background: var(--dk-surface-2);
    box-shadow: inset 0 0 0 1px var(--dk-line);
  }
  :root[data-theme="dark"] .cm-nav-count { color: var(--dk-muted); }
  :root[data-theme="dark"] .cm-nav-item.is-active .cm-nav-count { color: var(--dk-ink-2); }
  /* Narrow: the filters turn into chips, and the active one inverts. */
  @media (max-width: 1000px) {
    :root[data-theme="dark"] .cm-nav-item { background: var(--dk-surface-2); box-shadow: inset 0 0 0 1px var(--dk-line); }
    :root[data-theme="dark"] .cm-nav-item:hover { background: var(--dk-surface-3); }
    :root[data-theme="dark"] .cm-nav-item.is-active { color: var(--dk-on-ink); background: var(--dk-ink); box-shadow: none; }
    :root[data-theme="dark"] .cm-nav-item.is-active .cm-nav-count { color: var(--dk-on-ink); opacity: 0.7; }
  }

  /* More options menu: one step above the card it opens on. */
  :root[data-theme="dark"] .cm-menu-list {
    background: var(--dk-surface-2);
    border-color: var(--dk-line-2);
    box-shadow: 0 10px 28px var(--dk-shadow);
  }
  :root[data-theme="dark"] .cm-menu-item { color: var(--dk-ink); }
  :root[data-theme="dark"] .cm-menu-item:is(:hover, :focus) { background: var(--dk-tint-2); }
  :root[data-theme="dark"] .cm-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--dk-ink); }
  :root[data-theme="dark"] .cm-menu-item[aria-disabled="true"] { color: var(--dk-muted); }

  /* Report dialog. */
  :root[data-theme="dark"] .cm-report {
    color: var(--dk-ink);
    background: var(--dk-surface);
    box-shadow: 0 0 0 1px var(--dk-line), 0 24px 60px var(--dk-shadow);
  }
  :root[data-theme="dark"] .cm-report::backdrop { background: var(--dk-scrim); }
  :root[data-theme="dark"] .cm-report :focus-visible { outline-color: var(--dk-ink); }
  :root[data-theme="dark"] .cm-report-reason { border-color: var(--dk-line-2); }
  :root[data-theme="dark"] .cm-report-reason:hover { border-color: var(--dk-faint); }
  :root[data-theme="dark"] .cm-report-reason:has(input:checked) { border-color: var(--dk-ink); box-shadow: inset 0 0 0 1px var(--dk-ink); }
  :root[data-theme="dark"] .cm-report-reason input { border-color: var(--dk-muted); background: var(--dk-surface-2); }
  :root[data-theme="dark"] .cm-report-reason input:checked { border-color: var(--dk-ink); }
  :root[data-theme="dark"] .cm-report-error { color: var(--dk-ink); }
  :root[data-theme="dark"] .cm-report-offline { color: var(--dk-ink-2); background: var(--dk-tint); }
  :root[data-theme="dark"] :is(.cm-report-offline strong, .cm-report-offline a) { color: var(--dk-ink); }
  :root[data-theme="dark"] .cm-report-cancel {
    color: var(--dk-ink);
    background: var(--dk-surface-2);
    border-color: var(--dk-line-2);
  }
  :root[data-theme="dark"] .cm-report-cancel:hover { border-color: var(--dk-faint); }

  /* Editing your own post. */
  :root[data-theme="dark"] .cm-edit textarea {
    color: var(--dk-ink);
    background-color: var(--dk-surface-2);
    border-color: var(--dk-line-2);
  }
  :root[data-theme="dark"] .cm-edit textarea:focus { border-color: var(--dk-ink); }
  :root[data-theme="dark"] .cm-edit textarea::placeholder { color: var(--dk-muted); }
  :root[data-theme="dark"] :is(.cm-edit textarea[aria-invalid="true"], .cm-edit .cm-highlight input[aria-invalid="true"]) { border-color: var(--dk-danger); }
  :root[data-theme="dark"] .cm-edit-hint { color: var(--dk-muted); }
  :root[data-theme="dark"] .cm-edit-cancel {
    color: var(--dk-ink);
    background: var(--dk-surface-2);
    border-color: var(--dk-line-2);
  }
  :root[data-theme="dark"] .cm-edit-cancel:hover { border-color: var(--dk-faint); }

  /* Toast: a dark sheet with a ring, so it still stands off dark cards. */
  :root[data-theme="dark"] .hub-toast {
    color: var(--dk-ink);
    background: var(--dk-surface);
    box-shadow: 0 0 0 1px var(--dk-line-2), 0 10px 28px var(--dk-shadow);
  }

  /* Disabled green buttons (Share before typing, Applied): a plain dark
     face, so they read as off, not as a dim green. */
  :root[data-theme="dark"] :is(.cm-share:disabled, .fd-actions .btn:disabled) {
    background: var(--dk-surface-3);
    border-color: var(--dk-line-2);
    color: var(--dk-muted);
    box-shadow: none;
    filter: none;
    opacity: 1;
  }
}