/* Canada Careers — employer / consultant portal. Mobile first; tokens only.
   Primitives (.dash, .app-head, .card, .stats, .table--stack, .form, .sticky-bar …) live in theme.css — see docs/UX-STANDARDS.md.
   This file only adds portal-specific components. ONE definition per selector; media queries sit next to their base rule. */

/* ---------- app shell: page header inside .dash__main ---------- */
.app-head { display: grid; gap: 12px; align-items: end; padding: 0 0 16px; border-bottom: 1px solid var(--kds-border); }
.app-head h1 { margin-bottom: 4px; overflow-wrap: anywhere; }
.app-head .eyebrow { margin-bottom: 8px; }
.app-head__context { margin: 0; color: var(--kds-fg-muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.app-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.app-head__actions .kds-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .app-head__actions .kds-btn { flex: 0 0 auto; } }
@media (min-width: 768px) { .app-head { grid-template-columns: minmax(0, 1fr) auto; } .app-head__actions { justify-content: flex-end; } }

/* ---------- shared bits ---------- */
.req { color: var(--cc-red); }
.list-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stack-tight { display: grid; gap: 4px; justify-items: start; }
.input--sm { min-height: 40px; padding: 8px 10px; font-size: .9rem; }
.kds-btn--danger-text { color: var(--cc-red); }
.kds-btn--danger-text:hover { background: var(--cc-red-100); }
.card--cta { border-color: var(--cc-orange); background: var(--cc-orange-100); }
.card__head h2, .card__head h3 { font-size: 1.15rem; }
.card__head .small { white-space: nowrap; }
/* A card whose body is a table: no side padding around the rows; on phones the stacked rows ARE the cards. */
.card--table { padding: 0; overflow: hidden; }
.card--table > .card__head { padding: 16px 20px 0; }
.card--table .table th:first-child, .card--table .table td:first-child { padding-left: 20px; }
.card--table .table th:last-child, .card--table .table td:last-child { padding-right: 20px; }
.card--table .table tr:last-child td { border-bottom: 0; }
.card--table > .card__foot { padding: 12px 20px; border-top: 1px solid var(--kds-border); }
@media (max-width: 767px) {
  .card--table { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .card--table > .card__head { padding: 0 0 8px; }
  .card--table .table td:first-child, .card--table .table td:last-child { padding-left: 0; padding-right: 0; }
  .card--table > .card__foot { padding: 4px 0 0; border: 0; }
}
/* Touch targets: small buttons grow to 44px where there is no hover pointer (phones, iPads). Narrow screens are covered by theme.css. */
@media (hover: none) { .portal .kds-btn--sm { min-height: 44px; padding: .55rem .9rem; } .portal .input--sm { min-height: 44px; } }

/* Posting ID (X1X1X1) — inline label + mono code, same look everywhere (lists, detail, billing, receipts) */
.posting-id { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; color: var(--kds-fg-muted); white-space: nowrap; }
.posting-id b, .posting-id__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: .8125rem; letter-spacing: .06em; color: var(--cc-navy-700); background: var(--cc-navy-50); border: 1px solid var(--cc-navy-100); padding: 1px 6px; border-radius: 6px; }
.cluster--tight { gap: 6px; }
/* Locked fields (published postings): static text with a lock icon; the hidden input beside it carries the current value */
.lock-ico { flex: none; color: var(--kds-fg-muted); vertical-align: -2px; }
.field__label { font-weight: 600; font-size: .9rem; color: var(--cc-ink); }
.locked-field { display: flex; gap: 8px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--kds-border); border-radius: 10px; background: var(--cc-surface); color: var(--cc-ink); overflow-wrap: anywhere; }
.locked-field > .lock-ico { margin-top: 3px; }
.locked-field--plain { background: #fff; }
.locked-tag { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.locked-note { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 4px; }
.locked-note .lock-ico { margin-top: 3px; }
.locked-flash { display: flex; gap: 8px; align-items: flex-start; }
.locked-flash .lock-ico { margin-top: 3px; color: currentColor; }
.addr-list--plain li { padding-left: 0; }
.addr-list--plain li::before { display: none; }
.card__foot-link { margin: 12px 0 0; }

/* stats: the dashboard has five; a date value gets a smaller size so it never wraps */
.stat__value--sm { font-size: 1.25rem; padding: 6px 0; }
.stats--5 { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .stats--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .stats--5 { grid-template-columns: repeat(5, 1fr); } }

/* dashboard: two cards side by side only when there is room */
.grid--dash { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1200px) { .grid--dash { grid-template-columns: 1fr 1fr; } }

/* compact row lists (dashboard, job detail aside) */
.list-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--kds-border); }
.list-row:first-child { padding-top: 0; }
.list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.list-row > * { min-width: 0; }
.list-row__main { flex: 1 1 220px; overflow-wrap: anywhere; }
.list-row__side { display: grid; gap: 4px; justify-items: start; }
@media (min-width: 640px) { .list-row__side { justify-items: end; text-align: right; } }

/* table cells: action buttons; stacked cells whose value must sit under its label on phones */
.td-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.td-actions .inline-form { display: inline-flex; }
.td-actions .kds-btn { white-space: nowrap; }
.table td.td-stack { min-width: 160px; }
.card__head .kds-btn { white-space: nowrap; }
/* Dense app tables: tighter cells between the tablet and desktop breakpoints so 7 columns fit beside the side nav; actions stay on one row only from 1200. */
@media (min-width: 768px) and (max-width: 1199px) { .card--table .table th, .card--table .table td { padding: 12px 6px; } .card--table .table th:first-child, .card--table .table td:first-child { padding-left: 14px; } .card--table .table th:last-child, .card--table .table td:last-child { padding-right: 14px; } .td-actions { max-width: 132px; } }
@media (max-width: 767px) { .table td.td-stack { min-width: 0; } }
/* Two-button action cells still sit on one row from 1200. The POSTINGS table is the exception: its third button
   ("Repost", on expired/cancelled rows) made the nowrap cell 196px wide, so the row's min-content grew to 953px
   inside an 878px card and Repost was sliced in half at the card edge. There it wraps, clamped so the usual
   View + Edit pair stays on one line and only the third button drops. */
@media (min-width: 1200px) { .td-actions { flex-wrap: nowrap; } .table--postings .td-actions { flex-wrap: wrap; min-width: 126px; max-width: 132px; } }
/* …and when a table still cannot fit (long company names, phones in landscape), say so: a right-edge fade that
   disappears once the wrap is scrolled to the end. `scroll-shadow` is pure CSS — no JS, no layout shift. */
.card--table .table-wrap {
  background:
    linear-gradient(to right, #fff 40%, color-mix(in srgb, #fff 0%, transparent)) left / 32px 100% no-repeat local,
    linear-gradient(to left, #fff 40%, color-mix(in srgb, #fff 0%, transparent)) right / 32px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--cc-navy) 16%, transparent), color-mix(in srgb, var(--cc-navy) 0%, transparent)) left / 14px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--cc-navy) 16%, transparent), color-mix(in srgb, var(--cc-navy) 0%, transparent)) right / 14px 100% no-repeat scroll;
}
@media (max-width: 767px) { .card--table .table-wrap { background: none; } }   /* rows are stacked cards here — nothing scrolls */
@media (max-width: 767px) {
  .table--stack td.td-stack { flex-direction: column; gap: 2px; align-items: flex-start; }
  .table--stack td.td-stack > * { width: 100%; min-width: 0; }
  .table--stack td[data-label="Actions"] { flex-wrap: wrap; }
  .table--stack td[data-label="Actions"] .td-actions { justify-content: flex-start; }
}

/* ---------- list filters: company <select> + keyword search, and the pager ----------
   The company filter used to be a chip strip: with 131 clients it was 28,387px wide inside ~880px with the
   scrollbar hidden — ~32 screens of sideways dragging, 131 sub-44px targets, and a 2.85:1 white-on-teal active
   chip. It is a <select> now (views/portal/partials/company-picker.ejs). Same shape as the admin filter bar;
   admin.css keeps its own copy because the two stylesheets are never loaded on the same page. */
.filter-bar { display: grid; gap: 8px; grid-template-columns: 1fr; }
.filter-bar .input { min-width: 0; }
.filter-bar .kds-btn { white-space: nowrap; }
@media (min-width: 640px) { .filter-bar { grid-template-columns: 1fr auto auto; } .filter-bar select.input { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .filter-bar { grid-template-columns: minmax(180px, 260px) 1fr auto auto; } .filter-bar select.input { grid-column: auto; } .filter-bar:not(:has(select)) { grid-template-columns: 1fr auto auto; } }
.pager { justify-content: center; margin-top: 16px; }
.list-range { margin: 0 0 12px; }

/* Numeric cells: tabular figures so digits and money line up down a column. */
.table th.num, .table td.num, .company-card__stats strong { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .table th.num, .table td.num { text-align: right; } }

/* status tabs (jobs list): wrap on phones, one scroll-free row from 640 */
.tabs { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--kds-border); }
.tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 12px; text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--kds-fg-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab.is-active { color: var(--cc-navy); border-bottom-color: var(--cc-red); }
.tab__count { font-size: .75rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--cc-navy-100); color: var(--cc-navy-700); }
.card--table > .tabs { padding: 0 12px; }
@media (max-width: 767px) { .card--table > .tabs { padding: 0; margin-bottom: 12px; } }

/* logos — EVERY company gets a tile, with or without an uploaded logo, so rows and cards keep one left edge.
   The --placeholder variants are the initial letter on navy (the /logos/:id route 404s when there is no logo,
   so an <img> there would render a broken-image icon). */
.logo-sm { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--kds-border); flex: none; }
.logo-md { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--kds-border); flex: none; }
.logo-sm--placeholder, .logo-md--placeholder { display: grid; place-items: center; font-family: var(--cc-font-display); font-weight: 800; color: #fff; background: var(--cc-navy); border-color: var(--cc-navy); }
.logo-sm--placeholder { font-size: .8125rem; }
.logo-md--placeholder { font-size: 1.25rem; }
.company-cell { display: inline-flex; align-items: center; gap: 10px; }
.logo-field { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.logo-preview { width: 96px; height: 96px; border-radius: 12px; object-fit: contain; border: 1px solid var(--kds-border); background: #fff; padding: 6px; }
.input--file { padding: 8px; }
.check--inline { display: inline-flex; align-items: center; padding: 8px 12px; }

/* ---------- forms ---------- */
.form-section { display: grid; gap: 16px; }
.form-section > .card__head { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--kds-border); }
.form-section > .card__head--bare { border-bottom: 0; padding-bottom: 0; }
.form-section > .card__head p { margin: 0; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: 6px; }
.check--aud .aud { border: 0; padding: 0; background: transparent; font-size: .9375rem; }
.hint--lead { margin: -6px 0 0; font-size: .875rem; }
.error--block { padding: 10px 12px; border-radius: 10px; background: var(--cc-red-100); color: var(--kds-danger); font-weight: 500; font-size: .875rem; }
.field--sub { margin-top: 2px; padding: 10px; border-radius: 10px; background: var(--cc-surface); }
.field--sub label { font-size: .85rem; }
@media (min-width: 640px) { .form-row--skills { grid-template-columns: 2fr 1fr; } }
.filters { display: grid; gap: 12px; }
@media (min-width: 640px) { .filters { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.field--btn { align-self: end; }
/* Sticky action bar (theme .sticky-bar): bleed to the screen edges on phones; short labels; Cancel only where there is room. */
.sticky-bar { margin: 0 -16px; }
.sticky-bar .kds-btn { flex: 1 1 auto; white-space: nowrap; }
.sticky-bar .kds-btn--ghost { flex: 0 1 auto; }
.lbl-short { display: none; }
@media (max-width: 639px) { .lbl-long { display: none; } .lbl-short { display: inline; } .sticky-bar__cancel { display: none; } .sticky-bar .kds-btn { padding-left: .7rem; padding-right: .7rem; font-size: .9rem; } }
@media (min-width: 768px) { .sticky-bar { margin: 0 -24px; } }
@media (min-width: 1024px) { .sticky-bar { margin: 0; justify-content: flex-start; } .sticky-bar .kds-btn { flex: 0 0 auto; } }
/* While the bar is sticky (phones/tablets) a focused field must scroll clear of it, and the page needs room under the last card. */
@media (max-width: 1023px) { html:has(.sticky-bar) { scroll-padding-bottom: 96px; } .job-form, .profile-form { padding-bottom: 4px; } }

/* applicants: per-row status form, document links, cover letter */
.status-form { display: grid; gap: 8px; min-width: 220px; }
.status-form .cluster { gap: 8px; }
.status-form select { width: auto; flex: 1 1 140px; }
.status-form textarea { min-height: 56px; }
.status-form .kds-btn { justify-self: start; }
@media (max-width: 639px) {
  .status-form .cluster { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }   /* nowrap: a column container with a px flex-basis would wrap the select into a 2nd column */
  .status-form .cluster .badge { align-self: flex-start; }
  .status-form select { width: 100%; flex: 0 0 auto; }
}
.table--applicants td { vertical-align: top; }
.table--applicants .kds-btn { white-space: nowrap; }
.doc-links { display: grid; gap: 6px; justify-items: start; }
@media (max-width: 639px) { .doc-links, .doc-links > * { width: 100%; } }
.cover summary { cursor: pointer; color: var(--cc-navy); }
.cover .prose { padding: 8px 0 0; }
.prose p { margin: 0 0 .75em; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- job detail ---------- */
.grid--job { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) {
  .grid--job { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 24px; }
  .grid--job > aside { position: sticky; top: calc(var(--cc-header-h) + 16px); max-height: calc(100vh - var(--cc-header-h) - 32px); overflow-y: auto; }
}
@media (max-width: 1023px) { .grid--job > aside { order: -1; } }   /* status + actions first on phones/tablets; the long preview follows */
.job-actions { display: grid; gap: 8px; margin-top: 12px; }
.job-actions .inline-form { display: grid; }
.job-actions .kds-btn { width: 100%; }
.job-actions__row { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.job-card--preview { background: var(--cc-surface); }
.job-card--preview .job-card__title { font-size: 1.25rem; }
.facts { display: grid; gap: 8px; margin: 16px 0; padding: 0; }
.facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: .9375rem; }
.facts dt { color: var(--kds-fg-muted); font-weight: 600; }
.facts dd { margin: 0; word-break: break-word; }
.facts--tight { margin: 8px 0 12px; }
.facts--tight > div { grid-template-columns: 100px 1fr; font-size: .875rem; }
.preview h3 { margin-top: 20px; font-size: 1rem; }
.preview [data-expand] { margin-top: 10px; }
.prose--clamp { max-height: 320px; overflow: hidden; position: relative; }
.prose--clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
.prose--clamp.is-open { max-height: none; }
.prose--clamp.is-open::after { display: none; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--kds-border); display: grid; gap: 12px; }
.timeline li { position: relative; font-size: .9rem; display: grid; }
.timeline li::before { content: ""; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--kds-border-strong); }
.timeline li.is-done::before { background: var(--cc-green); }
.timeline li.is-bad::before { background: var(--cc-red); }
.timeline li.is-future::before { background: #fff; border: 2px solid var(--cc-teal); }
.timeline__label { font-weight: 600; }
.timeline__at { color: var(--kds-fg-muted); font-size: .8125rem; }
.company-head { display: grid; gap: 2px; }
.company-head .eyebrow { margin: 0; }
.legal-note { color: var(--kds-fg-muted); font-size: .8125rem; }
.addr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.addr-list li { padding-left: 20px; position: relative; }
.addr-list li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--cc-navy); opacity: .55; }   /* was a pin emoji — no emoji icons */
.job-meta-line { display: flex; flex-wrap: wrap; gap: 2px 8px; }

/* ---------- company cards (consultant list) ---------- */
.company-card { display: grid; gap: 14px; align-content: start; }
.company-card__head { display: flex; gap: 12px; align-items: center; }
.company-card__head > div { min-width: 0; }
.company-card__head h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.company-card__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.company-card__stats div { display: grid; text-align: center; background: var(--cc-surface); border-radius: 10px; padding: 8px 4px; }
.company-card__stats strong { font: 800 1.25rem/1.1 var(--cc-font-display); color: var(--cc-navy); }
.company-card__stats span { font-size: .7rem; color: var(--kds-fg-muted); }

/* ---------- company profile: operating names + address book ---------- */
.names-list { display: grid; gap: 8px; }
.names-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center; }
.names-row .input { grid-column: 1; }
.names-row__note { grid-column: 2; grid-row: 1; font-weight: 700; color: var(--cc-green); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.names-row [data-name-remove] { grid-column: 3; grid-row: 1; }
.loc-add { display: grid; gap: 8px; justify-items: start; }
.loc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.loc-row { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--kds-border); border-radius: 12px; background: #fff; }
.loc-row.is-editing { border-color: var(--cc-teal); box-shadow: inset 3px 0 0 var(--cc-teal); }
.loc-row__main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.loc-row__actions { justify-content: flex-start; }
@media (min-width: 768px) { .loc-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .loc-row__actions { justify-content: flex-end; } }
.loc-editor { display: grid; gap: 14px; padding: 14px; border: 1px dashed var(--kds-border-strong); border-radius: 12px; background: var(--cc-surface); }
.loc-editor.is-collapsed { display: none; }
.loc-editor__title { margin: 0; font-size: 1rem; }
.addr-fields { display: grid; gap: 12px; }
@media (min-width: 640px) { .loc-row--unit { grid-template-columns: minmax(120px, 1fr) 2fr; } }
.empty--sm { padding: 18px 14px; font-size: .9375rem; }

/* ---------- job form: work-location checklist + "add a new location" ---------- */
.loc-choice { display: grid; gap: 8px; }
.loc-choice + .loc-choice { margin-top: 4px; }
.loc-choice--legacy { padding-top: 8px; border-top: 1px dashed var(--kds-border); }
.checks--loc { grid-template-columns: 1fr; }
@media (min-width: 900px) { .checks--loc { grid-template-columns: 1fr 1fr; } }
.check--loc { align-items: flex-start; }
.check--loc input { margin-top: 3px; }
.check__body { display: grid; gap: 2px; min-width: 0; }
.check__title { font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.check__sub { font-size: .875rem; color: var(--kds-fg-muted); overflow-wrap: anywhere; }
.loc-new { border: 1px dashed var(--kds-border-strong); border-radius: 12px; background: var(--cc-surface); padding: 0 14px; }
.loc-new__summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--cc-navy); }
.loc-new__summary::-webkit-details-marker { display: none; }
.loc-new[open] { padding-bottom: 14px; }
.loc-new[open] > .loc-new__summary { border-bottom: 1px solid var(--kds-border); margin-bottom: 12px; }
.loc-new > .hint { margin: 0 0 12px; }
.loc-new > .kds-btn { margin-top: 12px; }


/* ==================================================================================================
   CANDIDATE B — "the living board", employer + consultant portal (2026-10-16)
   --------------------------------------------------------------------------------------------------
   A LAYER over the rules above. Every rule is scoped to `.pb` (the portal views' .dash root) or to
   `body.portal-landing` (the two landings). Billing is part of B too (since fd1518f, 2026-10-17):
   billing/index, checkout, success and cancelled put `.pb .bb` on their root, so they take this layer
   plus the billing-specific B rules in billing.css (.bb). The receipt (body.is-receipt) keeps its own
   light paper sheet. The side nav (.pb-side) is shared, so the chrome doesn't change when you click "Billing".
   Tokens come from b-foundation.css (--b-*). Red is spent only on: the page's one primary button
   (.kds-btn--accent), the live pulse, and errors/danger — never on eyebrows, tabs or hovers.
   ONE dark object per view: dashboard = the ledger, job page = the preview row, landings = the hero
   board. Everything else is light with hairlines.
   ================================================================================================= */

/* ---------- side nav: quiet text tabs on phones, a ruled list on desktop (shared with billing) ---------- */
.pb-side__h { display: none; }
.dash__side.pb-side { gap: 0; padding: 0; border-bottom: var(--b-hair); margin: 0 -16px; padding: 0 8px; scroll-padding-inline: 16px; }
.dash__side.pb-side a {
  display: inline-flex; align-items: center; min-height: var(--b-tap); padding: 0 10px; border: 0; border-radius: 0; background: none;
  font: 500 var(--b-t-ui)/1 var(--b-sans); color: var(--b-ink-2); box-shadow: inset 0 -2px 0 transparent;
  transition: color .14s var(--b-e), box-shadow .14s var(--b-e), background .14s var(--b-e);
}
.dash__side.pb-side a:hover { color: var(--b-navy); }
.dash__side.pb-side a.is-active { background: none; color: var(--b-navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--b-navy); }
.dash__side.pb-side a:focus-visible { outline-offset: -3px; }
@media (min-width: 768px) { .dash__side.pb-side { margin: 0 -24px; padding: 0 14px; } }
@media (min-width: 1024px) {
  .dash__side.pb-side { margin: 0; padding: 0; border: 0; gap: 2px; }
  .pb-side__h { display: block; margin: 4px 12px 10px; font: 600 var(--b-t-xs)/1 var(--b-sans); letter-spacing: var(--b-track-caps); text-transform: uppercase; color: var(--b-ink-3); }
  .dash__side.pb-side a { padding: 0 12px; border-radius: var(--b-r-md); box-shadow: none; }
  .dash__side.pb-side a:hover { background: var(--b-bg-2); }
  .dash__side.pb-side a.is-active { background: var(--b-navy-50); box-shadow: none; }
  .dash:has(.pb-side) { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
}

/* ---------- shell ---------- */
.pb { color: var(--b-ink); padding-top: 12px; }
.pb .dash__main { gap: 24px; }
@media (min-width: 1024px) { .pb { padding-top: 28px; } }
.pb .eyebrow { color: var(--b-ink-3); font: 600 var(--b-t-xs)/1.2 var(--b-sans); letter-spacing: var(--b-track-caps); margin: 0 0 10px; }
.pb .app-head { background: none; border-bottom: var(--b-hair); padding: 4px 0 20px; margin: 0; gap: 16px; }
.pb .app-head h1 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 8px; color: var(--b-navy); }
.pb .app-head__context { font-size: var(--b-t-base); color: var(--b-ink-2); gap: 6px 12px; }
.pb .app-head__context a { font-weight: 600; text-decoration: none; }
.pb .app-head__context a:hover { text-decoration: underline; }
.pb .company-head .eyebrow { margin: 0; }
.pb .legal-note { color: var(--b-ink-3); }
.pb .muted, .pb .small.muted { color: var(--b-ink-3); }
.pb .req { color: var(--b-ink-2); }          /* the asterisk is structure, not an alarm — red is reserved */

/* buttons: B's weights on the existing kds classes (markup unchanged; billing gets them through .pb) */
.pb .kds-btn, .portal-landing .kds-btn { font: 600 var(--b-t-ui)/1 var(--b-sans); letter-spacing: -.006em; border-radius: var(--b-r-md); min-height: var(--b-tap); transition: background .16s var(--b-e), border-color .16s var(--b-e), box-shadow .16s var(--b-e); }
.pb .kds-btn--sm { font-size: var(--b-t-base); }
.pb .kds-btn--accent, .portal-landing .kds-btn--accent { background: var(--b-red); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(20,38,60,.18); }
.pb .kds-btn--accent:hover, .portal-landing .kds-btn--accent:hover { background: var(--b-red-700); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -6px rgba(212,46,46,.55); }
.pb .kds-btn--brand, .portal-landing .kds-btn--brand { background: var(--b-navy); color: #fff; }
.pb .kds-btn--ghost, .portal-landing .kds-btn--ghost { background: #fff; border: var(--b-hair-2); color: var(--b-navy); }
.pb .kds-btn--ghost:hover, .portal-landing .kds-btn--ghost:hover { border-color: var(--b-navy); background: var(--b-navy-50); }
.pb .kds-btn--danger-text { color: var(--b-red-700); }
.pb .kds-btn--danger-text:hover { background: var(--cc-red-100); border-color: var(--b-red-700); }

/* cards: hairline only, never a shadow; the head is a compact label row */
.pb .card { border: var(--b-hair); border-radius: var(--b-r); box-shadow: none; background: #fff; }
.pb .card--cta { border-color: var(--b-line-2); background: var(--b-bg-2); }
.pb .card__head { align-items: center; }
.pb .card__head h2, .pb .card__head h3 { font: 700 var(--b-t-h3)/1.25 var(--b-disp); letter-spacing: -.01em; color: var(--b-ink); }
.pb .card__head > a.small, .pb .card__head > .small > a { display: inline-flex; align-items: center; min-height: var(--b-tap); font-weight: 600; text-decoration: none; color: var(--b-navy); }
.pb .card__head > a.small:hover { text-decoration: underline; }
.pb .card__foot { color: var(--b-ink-3); }
.pb .empty { border: 1px dashed var(--b-line-2); border-radius: var(--b-r); color: var(--b-ink-2); background: var(--b-bg-2); padding: 32px 16px; }
.pb .badge { font-weight: 600; letter-spacing: .01em; }

/* Posting ID: mono on a hairline chip, tabular */
.pb .posting-id__code, .pb .posting-id b { font-variant-numeric: tabular-nums; background: var(--b-bg-2); border-color: var(--b-line); color: var(--b-navy); }

/* links that are titles: ink, no underline until hover */
.pb .list-row__main > a, .pb td[data-label="Title"] > a, .pb td[data-label="Job"] > a { color: var(--b-ink); text-decoration: none; }
.pb .list-row__main > a:hover, .pb td[data-label="Title"] > a:hover, .pb td[data-label="Job"] > a:hover { color: var(--b-navy); text-decoration: underline; text-underline-offset: 3px; }
.pb .list-row { padding: 12px 0; border-bottom: var(--b-hair); }
.pb .list-row:first-child { padding-top: 0; }
.pb .list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pb .list-row .small.muted { line-height: 1.5; }

/* ---------- the ledger: the dashboard's one dark object ---------- */
.pb-ledger .b-board__bar { padding: 14px 20px; }
.pb-ledger__live { margin-left: auto; }
.pb-ledger__grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.pb-ledger__cell { padding: 16px 20px 18px; border-top: var(--b-hair-on); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0; }
.pb-ledger__cell:nth-child(-n+2) { border-top: 0; }
.pb-ledger__cell:nth-child(odd) { border-right: var(--b-hair-on); }
.pb-ledger__cell--money { grid-column: 1 / -1; border-right: 0 !important; }
.pb-ledger__cell dt { font-size: var(--b-t-md); color: var(--b-bd-fg-3); line-height: 1.35; }
.pb-ledger__cell dd { margin: 0; font: 700 1.75rem/1 var(--b-sans); letter-spacing: -.02em; color: var(--b-bd-fg); }
@media (min-width: 768px) {
  .pb-ledger__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); }
  .pb-ledger__cell { border-top: 0; border-right: var(--b-hair-on); }
  .pb-ledger__cell--money { grid-column: auto; }
  .pb-ledger__cell:last-child { border-right: 0; }
  .pb-ledger__cell--money dd { text-align: right; }
  .pb-ledger__cell--money dt { text-align: right; }
}

/* dashboard lists */
.pb .grid--dash { gap: 24px; }
.pb .list-row__side { gap: 6px; }
@media (min-width: 640px) { .pb .list-row__side .small { font-variant-numeric: tabular-nums; } }

/* ---------- tables: hairline ledger on desktop, ruled rows (not boxes) on phones ---------- */
.pb .card--table { border: var(--b-hair); }
.pb .table { font-size: var(--b-t-base); }
.pb .table th { font: 600 var(--b-t-xs)/1.2 var(--b-sans); letter-spacing: var(--b-track-caps); color: var(--b-ink-3); border-bottom: var(--b-hair); padding-top: 14px; padding-bottom: 10px; }
.pb .table td { border-bottom: var(--b-hair); }
.pb .table td.num, .pb .table td[data-label="Applicants"], .pb .tab__count { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .pb .table tbody tr { transition: background .14s var(--b-e); }
  .pb .table tbody tr:hover { background: var(--b-bg-2); }
  .pb .table--postings td[data-label="Applicants"], .pb .table--postings th:nth-last-child(3) { text-align: right; }
  .pb .card--table .table-wrap { background: none; }
}
@media (max-width: 767px) {
  .pb .card--table { border: 0; }
  .pb .table--stack tr { display: flex; flex-direction: column; border: 0; border-top: var(--b-hair); border-radius: 0; padding: 14px 0; margin: 0; background: none; }
  .pb .table--stack tbody tr:last-child { border-bottom: var(--b-hair); }
  .pb .table--stack td { padding: 4px 0; align-items: baseline; }
  .pb .table--stack td::before { font: 600 var(--b-t-xs)/1.4 var(--b-sans); letter-spacing: var(--b-track-caps); text-transform: uppercase; color: var(--b-ink-3); }
  /* The title leads the row on a phone, as it does on the board; its label is redundant there. */
  .pb .table--stack td[data-label="Title"], .pb .table--stack td[data-label="Applicant"], .pb .table--stack td[data-label="Company"].td-stack { order: -1; padding-bottom: 6px; }
  .pb .table--stack td[data-label="Title"]::before, .pb .table--stack td[data-label="Applicant"]::before { display: none; }
  .pb .table--stack td[data-label="Title"] strong, .pb .table--stack td[data-label="Applicant"] > strong { font-size: var(--b-t-body); }
  .pb .table--stack td[data-label="Actions"]::before { display: none; }
  .pb .table--stack td[data-label="Actions"] { padding-top: 10px; }
  .pb .card--table > .card__head { padding: 0 0 4px; }
}

/* status tabs: navy underline (red is not a tab colour), tabular counts */
.pb .tabs { border-bottom: var(--b-hair); gap: 0; }
.pb .tab { font: 500 var(--b-t-ui)/1 var(--b-sans); color: var(--b-ink-2); border-bottom: 2px solid transparent; padding: 0 12px; }
.pb .tab:hover { color: var(--b-navy); }
.pb .tab.is-active { color: var(--b-navy); font-weight: 600; border-bottom-color: var(--b-navy); }
.pb .tab__count { background: var(--b-bg-2); color: var(--b-ink-2); border: var(--b-hair); font-weight: 600; }
.pb .tab.is-active .tab__count { background: var(--b-navy); border-color: var(--b-navy); color: #fff; }
@media (max-width: 767px) {
  .pb .card--table > .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 4px; padding: 0 8px; }
  .pb .card--table > .tabs::-webkit-scrollbar { display: none; }
}

/* filter bars: inline, not a card */
.pb .filter-bar .input, .pb .filters .input { min-height: var(--b-tap); }
.pb form.card.filters { border: 0; padding: 0; background: none; }

/* ---------- forms: calm, numbered sections; no box-in-box ---------- */
.pb .form { gap: 0; }
.pb .job-form, .pb form.form[enctype] { counter-reset: pbsec; }
.pb .form > .form-section {
  counter-increment: pbsec;
  border: 0; border-radius: 0; background: none; padding: 28px 0; gap: 20px;
  border-top: var(--b-hair);
}
.pb .form > .form-section:first-of-type { border-top: 0; padding-top: 8px; }
.pb .form > .form-section > .card__head { border: 0; padding: 0; margin: 0; display: block; }
.pb .form > .form-section > .card__head h2 { display: flex; align-items: baseline; gap: 12px; font: 700 1.1875rem/1.25 var(--b-disp); color: var(--b-navy); letter-spacing: -.012em; }
.pb .form > .form-section > .card__head h2::before {
  content: counter(pbsec, decimal-leading-zero); font: 600 var(--b-t-sm)/1 var(--b-sans); font-variant-numeric: tabular-nums;
  letter-spacing: .04em; color: var(--b-ink-3); min-width: 1.6em;
}
.pb .form-row { gap: 20px; }
.pb .field { gap: 8px; }
.pb .field label, .pb .field__label, .pb .fieldset legend { font: 600 var(--b-t-ui)/1.35 var(--b-sans); color: var(--b-ink); }
.pb .field label .muted, .pb .fieldset legend .muted { font-weight: 400; color: var(--b-ink-3); }
.pb .field .hint, .pb .hint { font-size: var(--b-t-md); line-height: 1.5; color: var(--b-ink-3); max-width: 68ch; }
.pb .hint--lead { margin: -8px 0 0; font-size: var(--b-t-base); color: var(--b-ink-2); }
.pb .field .hint strong, .pb .hint strong { color: var(--b-ink-2); font-weight: 600; }
.pb .field .error { color: var(--kds-danger); font-weight: 600; }
.pb .input, .pb select.input, .pb textarea.input {
  min-height: 48px; padding: 12px 14px; border: var(--b-hair-2); border-radius: var(--b-r-md); background: #fff; color: var(--b-ink);
  font-size: 1rem;   /* 16px: iOS never zooms the page on focus */
  transition: border-color .14s var(--b-e), box-shadow .14s var(--b-e);
}
.pb .input:hover { border-color: #AEBDD0; }
.pb .input:focus { border-color: var(--b-navy); outline: 0; box-shadow: 0 0 0 3px rgba(31,58,95,.18); }
.pb .input[aria-invalid="true"] { border-color: var(--kds-danger); }
.pb .input::placeholder { color: #7A8899; }
.pb .input--sm { min-height: 44px; padding: 8px 12px; font-size: var(--b-t-base); }
.pb textarea.input { line-height: 1.55; }
.pb .input--file { padding: 10px; font-size: var(--b-t-base); }
.pb .check { min-height: 48px; padding: 12px 14px; border: var(--b-hair-2); border-radius: var(--b-r-md); font-size: var(--b-t-ui); color: var(--b-ink); }
.pb .check:hover { border-color: #AEBDD0; }
.pb .check:has(input:checked) { border-color: var(--b-navy); background: var(--b-navy-50); }
.pb .check:has(input:focus-visible) { outline: var(--b-ring); outline-offset: 2px; }
.pb .check input { width: 20px; height: 20px; }
.pb .check--aud .aud { color: var(--b-ink); }
.pb .field--sub { padding: 14px; margin-top: 4px; border-radius: var(--b-r-md); background: var(--b-bg-2); border: var(--b-hair); }
.pb .locked-field { border: var(--b-hair); border-radius: var(--b-r-md); background: var(--b-bg-2); min-height: 48px; padding: 12px 14px; }
.pb .locked-field--plain { background: #fff; }
.pb .error--block { border-radius: var(--b-r-md); }
/* the location picker and "add a new location": hairlines, not dashed boxes */
.pb .loc-new { border: var(--b-hair-2); border-style: solid; background: #fff; border-radius: var(--b-r-md); padding: 0 16px; }
.pb .loc-new__summary { min-height: 52px; font: 600 var(--b-t-ui)/1.2 var(--b-sans); color: var(--b-navy); }
.pb .loc-new[open] > .loc-new__summary { border-bottom: var(--b-hair); }
.pb .loc-choice--legacy { border-top: var(--b-hair); }
.pb .check__sub { color: var(--b-ink-3); font-size: var(--b-t-md); }
.pb .empty--sm { padding: 18px 16px; }
/* sticky save bar: a hairline sheet on phones, inline at desktop */
.pb .sticky-bar { border-top: var(--b-hair); background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.pb .sticky-bar .kds-btn { min-height: 48px; }
@media (min-width: 1024px) {
  .pb .sticky-bar { border-top: var(--b-hair); padding: 24px 0 0; margin-top: 4px; background: none; backdrop-filter: none; }
  .pb .form > .form-section { padding: 32px 0; }
}
/* profile: operating names + address book */
.pb .names-row__note { color: var(--b-ink-3); letter-spacing: var(--b-track-caps); font-weight: 600; }
.pb .loc-row { border: var(--b-hair); border-radius: var(--b-r-md); }
.pb .loc-row.is-editing { border-color: var(--b-navy); box-shadow: 0 0 0 3px rgba(31,58,95,.12); }
.pb .loc-editor { border: var(--b-hair); border-radius: var(--b-r); background: var(--b-bg-2); }
.pb > .dash__main > .form-section { border: var(--b-hair); border-radius: var(--b-r); padding: 20px; }   /* the address book, outside the form */
.pb > .dash__main > .form-section > .card__head h2 { font: 700 1.1875rem/1.25 var(--b-disp); color: var(--b-navy); }
.pb .logo-preview { border: var(--b-hair); border-radius: var(--b-r-md); }

/* ---------- job page: the preview IS the board row; facts are a ledger ---------- */
.pb .card.preview { border: 0; padding: 0; background: none; }
.pb .card.preview > .card__head { margin-bottom: 12px; }
.pb-preview.job-card {
  background: var(--b-bd); color: var(--b-bd-fg); border: 1px solid rgba(14,29,49,.9); border-radius: var(--b-r);
  box-shadow: var(--b-shadow); padding: 18px 20px; gap: 10px;
}
.pb-preview.job-card:hover { box-shadow: var(--b-shadow); border-color: rgba(14,29,49,.9); }
.pb-preview__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.pb-preview .job-card__title { color: var(--b-bd-fg); font: 600 var(--b-t-h3)/1.3 var(--b-sans); letter-spacing: -.011em; }
.pb-preview .job-card__salary { color: var(--b-bd-fg); font-size: var(--b-t-body); font-weight: 650; white-space: nowrap; }
.pb-preview .job-card__company { color: var(--b-bd-fg-2); font-size: var(--b-t-md); font-weight: 600; }
.pb-preview .legal-note { color: var(--b-bd-fg-3); }
.pb-preview .job-card__meta { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: var(--b-t-md); color: var(--b-bd-fg-2); }
.pb-preview .job-card__meta > span + span::before { content: "·"; margin: 0 7px; color: var(--b-bd-fg-3); }
.pb-preview .aud { background: rgba(255,255,255,.06); border-color: var(--b-bd-line-2); color: var(--b-bd-fg-2); }
.pb-preview .badge--danger { background: rgba(212,46,46,.16); color: #F7C9C9; }
.pb-preview .job-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 10px; border-top: var(--b-hair-on); color: var(--b-bd-fg-3); font-size: var(--b-t-sm); }
.pb-preview .logo-sm { border-color: transparent; }
.pb .facts { margin: 20px 0; gap: 0; border-top: var(--b-hair); }
.pb .facts > div { padding: 11px 0; border-bottom: var(--b-hair); grid-template-columns: 1fr; gap: 2px; font-size: var(--b-t-base); }
.pb .facts dt { font: 600 var(--b-t-xs)/1.4 var(--b-sans); letter-spacing: var(--b-track-caps); text-transform: uppercase; color: var(--b-ink-3); }
.pb .facts dd { color: var(--b-ink); }
@media (min-width: 640px) { .pb .facts > div { grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: baseline; } }
.pb .facts--tight { margin: 12px 0; }
.pb .facts--tight > div { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 0; }
.pb .facts--tight dd { font-variant-numeric: tabular-nums; }
.pb .preview > h3 { font: 700 var(--b-t-h3)/1.3 var(--b-disp); color: var(--b-navy); margin: 28px 0 8px; }
.pb .preview .prose { color: var(--b-ink); line-height: 1.65; max-width: 70ch; }
.pb .prose--clamp::after { background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
.pb .grid--job > aside.stack { gap: 16px; }
.pb .job-actions .kds-btn { min-height: var(--b-tap); }
.pb .timeline { border-left: 1px solid var(--b-line-2); padding-left: 20px; }
.pb .timeline li::before { left: -25px; width: 9px; height: 9px; top: 6px; }
.pb .timeline li.is-done::before { background: var(--b-navy); }
.pb .timeline li.is-bad::before { background: var(--b-ink-3); }
.pb .timeline li.is-future::before { background: #fff; border: 2px solid var(--b-navy); }
.pb .timeline__at { color: var(--b-ink-3); font-variant-numeric: tabular-nums; }
.pb aside .list-row strong { font-variant-numeric: tabular-nums; }

/* ---------- applicants ---------- */
.pb .status-form .input { min-height: 44px; }
.pb .cover summary { display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; color: var(--b-navy); }

/* ---------- companies (consultant) ---------- */
.pb .company-card { gap: 16px; }
.pb .company-card__head h2 { font: 700 var(--b-t-h3)/1.3 var(--b-disp); color: var(--b-ink); }
.pb .company-card__stats { gap: 0; border-top: var(--b-hair); border-bottom: var(--b-hair); }
.pb .company-card__stats div { background: none; border-radius: 0; padding: 10px 4px; border-left: var(--b-hair); }
.pb .company-card__stats div:first-child { border-left: 0; }
.pb .company-card__stats strong { font: 700 1.25rem/1.1 var(--b-sans); color: var(--b-navy); font-variant-numeric: tabular-nums; }
.pb .company-card__stats span { font-size: var(--b-t-sm); color: var(--b-ink-3); }
.pb .logo-md--placeholder, .pb .logo-sm--placeholder { background: var(--b-navy); }
.pb details.card--flat { background: var(--b-bg-2); }
.pb details.card--flat > summary { min-height: var(--b-tap); display: flex; align-items: center; cursor: pointer; }

/* ==================================================================================================
   LANDINGS (/employer, /consultant) — body.portal-landing. landing.css still loads after this file
   (the audiences/pricing/FAQ partials are shared with /jobseeker), so these rules carry the body
   class for specificity and never edit landing.css.
   ================================================================================================= */
.portal-landing .eyebrow { color: var(--b-ink-3); font: 600 var(--b-t-xs)/1.2 var(--b-sans); letter-spacing: var(--b-track-caps); }
.portal-landing .landing-head { background: none; border-bottom: var(--b-hair); padding: 32px 0 40px; position: relative; isolation: isolate; }
.portal-landing .landing-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--b-wash); }
.portal-landing .landing-head h1 { font-size: var(--b-t-h1); letter-spacing: -.025em; line-height: 1.08; color: var(--b-navy); max-width: 16ch; }
.portal-landing .landing-head .lead { color: var(--b-ink-2); font-size: var(--b-t-lead); line-height: 1.55; }
.portal-landing .landing-head__note { color: var(--b-ink-3); font-variant-numeric: tabular-nums; }
.portal-landing .landing-head__art.pb-art { display: block; margin-top: 8px; }
@media (min-width: 1024px) {
  .portal-landing .landing-head { padding: 64px 0 72px; }
  .portal-landing .landing-head .page-head__inner { align-items: center; }
  .portal-landing .landing-head__art.pb-art { display: block; margin: 0; }
}
/* the hero board */
.pb-mock { max-width: 520px; margin-left: auto; }
.pb-mock .b-board__bar { gap: 10px; }
.pb-mock__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 16px 20px; }
.pb-mock__row + .pb-mock__row { border-top: var(--b-hair-on); }
.pb-mock__t { font: 600 var(--b-t-body)/1.3 var(--b-sans); color: var(--b-bd-fg); letter-spacing: -.011em; }
.pb-mock__w { font-size: var(--b-t-ui); font-weight: 650; color: var(--b-bd-fg); white-space: nowrap; text-align: right; }
.pb-mock__w small { font-size: var(--b-t-sm); font-weight: 500; color: var(--b-bd-fg-3); }
.pb-mock__m { font-size: var(--b-t-md); color: var(--b-bd-fg-2); }
.pb-mock__d { display: inline-flex; align-items: center; gap: 8px; font-size: var(--b-t-sm); color: var(--b-bd-fg-3); grid-column: 1 / -1; }
.pb-mock__row--co { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; }
.pb-mock__logo { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font: 800 var(--b-t-base)/1 var(--b-disp); color: var(--b-bd); background: var(--b-bd-fg-2); }
.pb-mock__foot { font-size: var(--b-t-md); color: var(--b-bd-fg-2); font-weight: 600; }
.pb-mock__foot .b-tab { color: var(--b-bd-fg); }
@media (max-width: 1023px) { .pb-mock { margin: 0; } }
@media (max-width: 380px) { .pb-mock__d { display: none; } }
/* sections: hairline bands, rules not boxes */
.portal-landing .section { padding: 48px 0; }
.portal-landing .section--alt { background: var(--b-bg-2); border-color: var(--b-line); }
@media (min-width: 1024px) { .portal-landing .section { padding: 72px 0; } }
.portal-landing .section__head h2 { font-size: var(--b-t-h2); letter-spacing: -.02em; color: var(--b-navy); }
.portal-landing .feature--rule { border-top: var(--b-hair-2); padding-top: 16px; }
.portal-landing .feature h3, .portal-landing .landing-step h3, .portal-landing .landing-aud h3 { font: 700 var(--b-t-h3)/1.3 var(--b-disp); color: var(--b-ink); }
.portal-landing .feature p, .portal-landing .landing-step p { color: var(--b-ink-2); }
.portal-landing .landing-step { border-top: var(--b-hair-2); padding-top: 16px; grid-template-columns: 44px minmax(0, 1fr); }
.portal-landing .landing-step__n { display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--b-ink-3); font: 600 var(--b-t-base)/1.6 var(--b-sans); font-variant-numeric: tabular-nums; place-items: start; }
.portal-landing .landing-step__n::before { content: "0"; }
.portal-landing .card { border: var(--b-hair); border-radius: var(--b-r); box-shadow: none; }
.portal-landing .landing-aud { border-top: var(--b-hair); }
.portal-landing .landing-aud__icon { background: var(--b-bg-2) !important; border-radius: var(--b-r-md); }
.portal-landing .landing-aud p { color: var(--b-ink-2); }
.portal-landing .landing-pricing__card { border-color: var(--b-line-2); }
.portal-landing .landing-pricing__amount { font: 700 3rem/1 var(--b-sans); letter-spacing: -.03em; color: var(--b-navy); font-variant-numeric: tabular-nums; }
.portal-landing .landing-pricing__total { font-variant-numeric: tabular-nums; color: var(--b-ink-2); }
.portal-landing .landing-pricing__list li { color: var(--b-ink-2); }
.portal-landing .landing-faq { gap: 0; border-top: var(--b-hair); }
.portal-landing .landing-faq__item { border: 0; border-bottom: var(--b-hair); border-radius: 0; background: none; }
.portal-landing .landing-faq__item summary { padding: 16px 0; font: 600 var(--b-t-body)/1.4 var(--b-sans); color: var(--b-ink); min-height: 56px; }
.portal-landing .landing-faq__item summary:hover { color: var(--b-navy); }
.portal-landing .landing-faq__item summary::after { background: none; border: var(--b-hair-2); color: var(--b-navy); }
.portal-landing .landing-faq__item[open] summary::after { background: var(--b-navy); border-color: var(--b-navy); color: #fff; }
.portal-landing .landing-faq__body { padding: 0 0 18px; color: var(--b-ink-2); max-width: 68ch; }
.portal-landing .cta-band h2 { color: var(--b-navy); letter-spacing: -.02em; }
/* grid items default to min-width:auto — a nowrap tab strip would otherwise widen the whole column on phones */
.pb .dash__main > * { min-width: 0; }
/* A read-only value must not look like an input. */
.pb .locked-field--plain { background: var(--b-bg-2); border-color: transparent; color: var(--b-ink-2); }
/* Phones: pair the short numeric fields (pay from/to, hours/frequency) and the short checkboxes, so the
   longest form on the site is ~600px shorter without shrinking any target. */
@media (max-width: 639px) {
  .pb [aria-labelledby="sec-pay"] .form-row--3 { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .pb [aria-labelledby="sec-pay"] .form-row--3 > .field:nth-child(3) { grid-column: 1 / -1; }
  .pb .checks--aud { grid-template-columns: 1fr 1fr; }
  .pb .fieldset .checks--3:not(.checks--aud) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb .check { padding: 12px; }
}
.pb .input:focus-visible { outline: 2px solid var(--b-navy); outline-offset: 1px; }