/* =============================================================
   Tenant public site — layout classes only.

   The design system already ships the primitives this site needs
   (.btn/.btn--primary/--neutral/--ghost/--sm, .card, .badge--ok/
   --warn/--bad/--info/--neutral, .eyebrow, .input, .field,
   .check-item, .ico, .mono, .stat, .avatar, .divider) plus the
   reset and the [data-theme]/[data-mode] palettes. Nothing here
   redefines any of them.

   What IS here is the site's own chrome and page rhythm, which the
   portal layer has no equivalent for. Everything reads a token; the
   only literals are the host bar's, which the handoff specifies
   explicitly because that bar is PLATFORM chrome and must not take
   the tenant's accent.
   ============================================================= */

/* ---- host bar: the platform, not the tenant -------------------- */
.host-bar {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 18px;
  background: #09090b;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.host-bar__brand { display: flex; align-items: center; gap: 7px; }
.host-bar__logo { width: 16px; height: 16px; border-radius: 5px; display: block; }
.host-bar__word { font-weight: 600; font-size: 11.5px; color: #fafafa; letter-spacing: -.01em; }
.host-bar__sep { color: #3f3f46; }
.host-bar__crumb { color: #a1a1aa; font-size: 11px; }
.host-bar__chip {
  display: inline-flex; align-items: center; height: 19px; padding: 0 8px;
  border-radius: 999px; background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.30); color: #34d399;
  font-weight: 600; font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
}
.host-bar__id { color: #52525b; font-size: 10px; }
.host-bar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.host-bar__node { color: #52525b; font-size: 10px; }
.host-bar__live { display: inline-flex; align-items: center; gap: 6px; color: #a1a1aa; font-size: 10px; }
.host-bar__dot {
  width: 6px; height: 6px; border-radius: 999px; background: #34d399;
  animation: hostPulse 2.4s ease-in-out infinite;
}
@keyframes hostPulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .host-bar__dot { animation: none } }
.host-bar__avatar {
  width: 24px; height: 24px; border-radius: 999px;
  background: #17171c; border: 1px solid #343438;
}

/* ---- tenant header -------------------------------------------- */
.site-head {
  display: flex; align-items: center; gap: 18px;
  height: 62px; padding: 0 22px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.site-lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.site-lockup__mark {
  width: 33px; height: 33px; border-radius: 10px; display: block;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.site-lockup__name { font-weight: 650; font-size: 15px; letter-spacing: -.015em; color: var(--text); }
.site-lockup__sub {
  display: block; font-weight: 500; font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.site-nav a {
  font-weight: 500; font-size: 12.5px; padding: 8px 11px; border-radius: 8px;
  color: var(--text-2); text-decoration: none;
}
.site-nav a:hover { background: var(--surface-2); }
.site-nav a[aria-current="page"] { font-weight: 600; color: var(--text); background: var(--surface-2); }
.site-head__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- page rhythm ---------------------------------------------- */
.section { max-width: 1240px; margin: 0 auto; padding: 52px 28px; }
.band { border-top: 1px solid var(--border); background: var(--surface); }
.band > .section { padding: 48px 28px; }

/* ---- hero ------------------------------------------------------ */
.hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding: 56px 28px 44px; }
.hero__main { flex: 1 1 470px; min-width: 0; }
.hero__aside { flex: 1 1 380px; min-width: 0; }
.hero h1 {
  font-family: var(--font-serif); font-weight: 400; font-size: 52px; line-height: 1.04;
  letter-spacing: -.02em; text-wrap: balance; margin: 16px 0 18px; color: var(--text);
}
.hero__lede { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 56ch; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.hero__shot {
  height: 250px; border-radius: var(--radius-lg); border: 1px solid var(--border);
  overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__shot-empty { color: var(--faint); font-size: 11.5px; }

/* ---- stat strip ------------------------------------------------ */
.stat-strip { display: flex; flex-wrap: wrap; gap: 26px; }
.stat-strip__n { font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-strip__l { font-size: 11.5px; color: var(--faint); }

/* ---- verify widget --------------------------------------------- */
.verify { margin-top: 16px; border: 1px solid var(--accent-line); border-radius: var(--radius-lg); padding: 18px 18px 16px; background: var(--surface); }
.verify__head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--text); }
.verify__row { display: flex; gap: 8px; margin: 12px 0 8px; }
.verify__row .input { flex: 1 1 auto; height: 38px; border-radius: 9px; min-width: 0; }
.verify__help { font-size: 11px; line-height: 1.5; color: var(--faint); }

/* ---- recognition band ------------------------------------------ */
.recognise { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px 28px; max-width: 1240px; margin: 0 auto; }
.recognise__names { display: flex; flex-wrap: wrap; gap: 18px; }
.recognise__names span { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.recognise__note { margin-left: auto; font-size: 11px; color: var(--faint); }

/* ---- generic grids + step cards -------------------------------- */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.grid-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 20px 21px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.step:hover { border-color: var(--accent-line); }
.step__top { display: flex; align-items: flex-start; justify-content: space-between; }
.step__tile { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.step__n { font-size: 11px; color: var(--faint); }
.step__title { font-weight: 600; font-size: 14.5px; color: var(--text); }
.step__body { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.step__meta { margin-top: auto; font-weight: 500; font-size: 11px; color: var(--faint); }

/* ---- two-up split ---------------------------------------------- */
.split { display: flex; flex-wrap: wrap; gap: 18px; }
.split__card { flex: 1 1 420px; min-width: 0; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 26px 26px 24px; }
.split__title { font-weight: 600; font-size: 20px; color: var(--text); margin: 8px 0 10px; }

/* ---- key/value ledger rows -------------------------------------- */
.kv { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.kv__k { font-weight: 500; font-size: 12.5px; color: var(--text-2); }
.kv__v { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---- serif section heading -------------------------------------- */
.h-serif { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.h-serif--sm { font-size: 32px; }

/* ---- footer ----------------------------------------------------- */
.site-foot { border-top: 1px solid var(--border); padding: 34px 28px 40px; }
.site-foot__cols { display: flex; flex-wrap: wrap; gap: 28px; max-width: 1240px; margin: 0 auto; }
.site-foot__brand { flex: 1 1 260px; min-width: 0; }
.site-foot__col { flex: 0 1 160px; }
.site-foot__col a { display: block; font-size: 12px; color: var(--muted); text-decoration: none; padding: 3px 0; }
.site-foot__col a:hover { color: var(--text); }
.site-foot__base { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; max-width: 1240px; margin: 26px auto 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--faint); }
.site-foot__runs { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; opacity: .7; }

/* ---- narrow ----------------------------------------------------- */
@media (max-width: 640px) {
  .hero { padding: 36px 20px 30px; }
  .hero h1 { font-size: 38px; }
  .section { padding: 38px 20px; }
  .site-nav { display: none; }
}

/* ---- chips (filters + role selectors) --------------------------- */
.chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: 999px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--muted); font-weight: 500; font-size: 12px;
}
.chip:hover { color: var(--text-2); }
.chip--on {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent-text); font-weight: 600;
}
.chip-divider { width: 1px; height: 22px; background: var(--border-2); }
.section-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); font-weight: 500; font-size: 11.5px;
}

/* ---- listing card ----------------------------------------------- */
.listing { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.listing:hover { border-color: var(--accent-line); }
.listing__shot { height: 150px; background: var(--surface-2); display: block; }
.listing__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing__body { padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; }
.listing__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.listing__name { font-weight: 600; font-size: 14px; color: var(--text); }
.listing__price { font-size: 12.5px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.listing__meta { font-size: 11.5px; color: var(--faint); }
.listing__pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- compliance-area rows ---------------------------------------- */
.area-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 44px; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); }
.area-row:first-child { border-top: 0; }
.area-row__name { font-weight: 500; font-size: 12.5px; color: var(--text-2); }
.area-row__track { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.area-row__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.area-row__w { font-size: 12px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }

/* ---- dot lists ---------------------------------------------------- */
.dot-item { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.dot-item::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 999px; }
.dot-item--ok::before { background: var(--ok); }
.dot-item--warn::before { background: var(--warn); }

/* ---- numbered guide steps ------------------------------------------ */
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.steps__item { display: flex; gap: 12px; align-items: flex-start; }
.steps__n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text);
  font-weight: 600; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.steps__title { display: block; font-weight: 600; font-size: 13px; color: var(--text); }
.steps__body { display: block; font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-top: 3px; }

/* ---- FAQ ----------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq:first-child { border-top: 0; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; cursor: pointer; list-style: none;
  font-weight: 500; font-size: 12.5px; color: var(--text-2);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__mark { color: var(--muted); transition: transform 160ms ease; }
.faq[open] .faq__mark { transform: rotate(45deg); }
.faq__a { padding: 0 18px 14px; font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---- mode toggle (host bar) -------------------------------------- */
.host-bar__mode {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid #343438; color: #a1a1aa;
}
.host-bar__mode:hover { color: #fafafa; border-color: #52525b; }
.mode-sun { display: none; }
.mode-moon { display: inline-flex; }
[data-mode="light"] .mode-sun { display: inline-flex; }
[data-mode="light"] .mode-moon { display: none; }

/* ---- bind the PAGE to the portal layer's vocabulary ---------------
   The bundled design system composes two layers with different token
   names for the same thing. `colors_and_type.css` sets

       html, body { background: var(--background); color: var(--foreground) }

   which are the light institutional layer's names, while `home/portal.css`
   — the dark-first layer these pages actually render in — defines `--bg`
   and `--text` and never sets a body background of its own.

   The result is a page whose components read one palette and whose BODY
   reads another: dark surfaces on a white page in dark mode, measured as
   body background rgb(255,255,255) with --bg #080b0a. Nothing errors; it
   simply looks wrong, and only in the place nobody inspects.

   Binding body to the portal names here rather than editing the vendored
   stylesheet keeps the design system replaceable and keeps the reason
   visible. ------------------------------------------------------------- */
html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  margin: 0;
}

/* ---- small-label contrast ------------------------------------------
   Measured in the browser, both modes: the design system's `.eyebrow`
   renders `--faint` (#9a9aa2) at 10px/600. Against the light page that
   is 2.62:1, and 4.07:1 against the dark one — both below the 4.5:1 WCAG
   AA needs for text this size, and eyebrows are UPPERCASE at 10px, which
   is the hardest case rather than an average one.

   `--muted` is the same family one step darker and measures ~6:1 light
   and ~7:1 dark. These pages are public and are the first thing a member
   or buyer sees, so they take the readable token.

   Scoped by file: only the public site loads this stylesheet, so the
   cockpit's own use of `.eyebrow` is untouched. ------------------------ */
.eyebrow,
.recognise__note,
.verify__help,
.stat-strip__l,
.step__meta,
.step__n,
.listing__meta,
.hero__shot-empty,
.area-row__w,
.kv__v,
.site-foot__base,
.host-bar__crumb {
  color: var(--muted);
}

/* ---- member portal shell ---------------------------------------- */
.host-bar--portal { height: 38px; }
.site-head--portal { height: 64px; }
.portal-cycle { font-size: 11px; color: var(--muted); }
.portal { display: grid; grid-template-columns: 218px minmax(0, 1fr); }
.portal-side {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 16px 12px; position: sticky; top: 64px; align-self: start;
  height: calc(100dvh - 64px); overflow-y: auto;
}
.portal-side nav { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.portal-side__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 36px; padding: 0 10px; border-radius: 9px; text-decoration: none;
  font-weight: 500; font-size: 12.5px; color: var(--text-2);
}
.portal-side__item:hover { background: var(--surface-2); }
.portal-side__item.is-active { font-weight: 600; color: var(--text); background: var(--surface-3); }
.portal-side__count {
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  font-weight: 600; font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
}
.portal-side__sync { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.portal-meter { display: block; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 8px 0; }
.portal-meter__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.portal-side__note { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 0; }
.portal-main { padding: 26px 30px 60px; max-width: 1180px; min-width: 0; }

/* metric strip */
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 16px; }
.metric__v { font-weight: 600; font-size: 26px; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.metric__d { font-weight: 500; font-size: 11px; margin-top: 4px; }
.metric__d--ok { color: var(--ok); }
.metric__d--warn { color: var(--warn); }
.metric__d--mute { color: var(--muted); }

/* two-column screens: rail drops below when narrow */
.portal-split { display: flex; flex-wrap: wrap; gap: 18px; }
.portal-split__main { flex: 1 1 540px; min-width: 0; }
.portal-split__rail { flex: 1 1 300px; max-width: 340px; min-width: 0; }

@media (max-width: 860px) {
  .portal { grid-template-columns: minmax(0, 1fr); }
  .portal-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .portal-main { padding: 22px 20px 48px; }
}

/* ---- self-assessment section rail -------------------------------- */
.asm-row { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px; border-radius: 9px; }
.asm-row__name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-row__state { font-size: 10.5px; color: var(--muted); }
.asm-chip {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 10.5px;
}
.asm-chip--done { background: var(--ok-soft); color: var(--ok); }
.asm-chip--now { background: var(--accent); color: var(--accent-fg); }
.asm-chip--upcoming { background: var(--surface-3); color: var(--muted); }

/* ---- calendar ----------------------------------------------------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: center; padding-bottom: 4px; }
.cal-cell {
  height: 40px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.cal-cell.is-today { border-color: var(--accent-line); color: var(--accent-text); font-weight: 600; }

/* ── FEEDBACK WIDGET ───────────────────────────────────────────────────────
   Hand-authored like the rest of this file: the shell's production image runs
   no CSS build, so a utility class added in a template would simply not exist
   in the deployed bundle. Custom properties have no build step to forget. */
.fb-fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 7px;
          padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface);
          color: var(--text); font: 600 12px/1 var(--font-sans); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.fb-fab:hover { border-color: var(--accent-line); color: var(--accent-text); }
.fb-panel { position: fixed; right: 18px; bottom: 66px; z-index: 41; width: min(340px, calc(100vw - 36px));
            display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: var(--radius-lg);
            border: 1px solid var(--border-2); background: var(--surface); box-shadow: 0 14px 40px rgba(0,0,0,.26); }
.fb-panel[hidden] { display: none; }
.fb-panel__head { display: flex; align-items: center; justify-content: space-between; }
.fb-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fb-x { background: none; border: 0; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fb-x:hover { color: var(--text); }
.fb-msg { resize: vertical; min-height: 76px; }
.fb-note { font-size: 11.5px; color: var(--muted); }
.fb-attach { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; }
.fb-attach input { accent-color: var(--accent); }