/* Field Cover home, private beta state (canvas pass 23).
   Loaded after tokens.css and bundle.css. Every value is an Almanac 21 token. These pieces are not in the system yet:
   if this state is kept, they move into bundle.css as components (Tag, MembersNote, Perks, AccessForm, InviteCode)
   and the classes lose their fcb- prefix. The one value without its own semantic token is marked "proposed". */

/* ---------- Header: the lockup carries a Private beta tag ---------- */
.fcb-lockup { display: inline-flex; align-items: center; gap: var(--fc-space-12); min-width: 0; }
.fcb-tag { display: inline-flex; align-items: center; padding-inline: var(--fc-space-12); border: var(--fc-border-hairline) solid var(--fc-line-strong); border-radius: var(--fc-radius-pill); background: var(--fc-header-menu-ground); font: var(--fc-type-tag); color: var(--fc-text); white-space: nowrap; }

/* ---------- Hero card ---------- */
.fcb-pitch-lead { grid-column: var(--fc-col-1-5); }
.fcb-pitch-lead .fc-eyebrow { margin-bottom: var(--fc-space-12); }
.fcb-note { grid-column: var(--fc-col-7-12); margin-top: var(--fc-space-16); font: var(--fc-type-meta); color: var(--fc-text-subtle); }

/* ---------- Cohort: where the beta stands, under the hero card where a public page shows customer logos ---------- */
.fcb-cohort { margin: 0; display: flex; justify-content: center; }
.fcb-cohort-i { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--fc-space-4); padding-inline: var(--fc-space-40); text-align: center; }
.fcb-cohort-i + .fcb-cohort-i { border-left: var(--fc-border-hairline) solid var(--fc-line-strong); }
.fcb-cohort-i dt { font: var(--fc-type-meta); color: var(--fc-text-subtle); }
.fcb-cohort-i dd { margin: 0; font: var(--fc-type-title); color: var(--fc-text); font-variant-numeric: tabular-nums; }
.fcb-cohort-k { margin-top: var(--fc-space-16); font: var(--fc-type-meta); color: var(--fc-text-subtle); text-align: center; }

/* ---------- MembersNote: what opens with an invitation, where a public page would link ---------- */
.fcb-members { display: flex; align-items: center; gap: var(--fc-space-8); font: var(--fc-type-meta-strong); color: var(--fc-text-subtle); }
.fcb-members svg { flex: none; width: var(--fc-icon-sm); height: var(--fc-icon-sm); }
.fc-job-copy .fcb-members { margin-top: var(--fc-space-20); }
.fc-job-side .fcb-members { margin-top: var(--fc-space-16); }

/* ---------- Perks: what membership includes ---------- */
.fcb-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fc-grid-gap); }
.fcb-perk { padding-top: var(--fc-space-20); border-top: var(--fc-border-hairline) solid var(--fc-line-strong); }
.fcb-perk-h { font: var(--fc-type-title); color: var(--fc-text); text-wrap: balance; }
.fcb-perk-t { margin-top: var(--fc-space-8); font: var(--fc-type-ui-body); color: var(--fc-text-muted); }

/* ---------- AccessForm: the request for an invitation, on the deep band ---------- */
.fcb-access { background: var(--fc-bg-deep); color: var(--fc-text-on-deep); }
.fcb-access-grid { display: grid; grid-template-columns: repeat(var(--fc-grid-columns), minmax(0, 1fr)); column-gap: var(--fc-grid-gap);
  grid-template-areas: "head head head head head . card card card card card card" "more more more more more . card card card card card card"; grid-template-rows: auto 1fr; }
.fcb-access-head { grid-area: head; }
.fcb-access-card { grid-area: card; align-self: start; }
.fcb-access-more { grid-area: more; }
.fcb-access .fc-eyebrow { margin-bottom: var(--fc-space-8); color: var(--fc-text-on-deep-subtle); }
.fcb-access .fc-h2 { color: var(--fc-text-on-deep-strong); }
.fcb-access .fc-lede { margin-top: var(--fc-space-16); color: var(--fc-text-on-deep-muted); }
.fc-page .fcb-access :is(a, button):focus-visible { outline-color: var(--fc-focus-on-deep); }

.fcb-access-card { padding: var(--fc-space-40); border-radius: var(--fc-radius-card); background: var(--fc-surface-card); color: var(--fc-text); box-shadow: var(--fc-shadow-3); }
.fcb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fc-space-20) var(--fc-space-16); }
.fcb-field { display: flex; flex-direction: column; gap: var(--fc-space-8); min-width: 0; }
.fcb-field--wide { grid-column: 1 / -1; }
.fcb-field label { font: var(--fc-type-label); color: var(--fc-text); }
.fcb-opt { margin-left: var(--fc-space-4); font: var(--fc-type-meta); color: var(--fc-text-subtle); }

/* Input and Select: one control, on the card and on the deep band */
.fcb-input { width: 100%; min-width: 0; height: var(--fc-control-lg); margin: 0; padding: 0 var(--fc-space-16); border: var(--fc-border-hairline) solid var(--fc-line-control); border-radius: var(--fc-radius-control);
  background: var(--fc-surface-card); color: var(--fc-text); font: var(--fc-type-ui-body); transition: border-color var(--fc-duration-hover) var(--fc-ease-out); }
.fcb-input::placeholder { color: var(--fc-text-subtle); opacity: var(--fc-opacity-full); }
.fcb-input:hover { border-color: var(--fc-text-muted); }
.fcb-input:focus-visible { outline: var(--fc-border-focus) solid var(--fc-focus); outline-offset: var(--fc-focus-offset); border-color: var(--fc-text); }
.fcb-input[aria-invalid="true"] { border-color: var(--fc-error-solid); }
.fcb-select { position: relative; display: block; }
.fcb-select select { appearance: none; -webkit-appearance: none; padding-right: var(--fc-space-48); cursor: pointer; }
.fcb-select select:has(option[value=""]:checked) { color: var(--fc-text-subtle); }
.fcb-select svg { position: absolute; right: var(--fc-space-16); top: 50%; width: var(--fc-icon-sm); height: var(--fc-icon-sm); transform: translateY(-50%); color: var(--fc-text-muted); pointer-events: none; }
.fcb-err { font: var(--fc-type-meta-strong); color: var(--fc-error-text); }

.fcb-submit-row { margin-top: var(--fc-space-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-space-12) var(--fc-space-20); }
.fcb-fine { font: var(--fc-type-meta); color: var(--fc-text-subtle); }

/* sent: replaces the form inside the card */
.fcb-sent { display: grid; justify-items: start; gap: var(--fc-space-12); }
.fcb-sent:focus { outline: none; }
.fcb-sent-ic { display: grid; place-items: center; width: var(--fc-control-lg); height: var(--fc-control-lg); border-radius: var(--fc-radius-round); background: var(--fc-success-fill); color: var(--fc-success-text); }
.fcb-sent-ic svg { width: var(--fc-icon-md); height: var(--fc-icon-md); }
.fcb-sent-h { margin-top: var(--fc-space-8); font: var(--fc-type-h3); letter-spacing: var(--fc-tracking-slight); color: var(--fc-text); }
.fcb-sent-t { max-width: var(--fc-measure-narrow); font: var(--fc-type-body); color: var(--fc-text-muted); }
.fcb-sent-t b { font-weight: var(--fc-weight-medium); color: var(--fc-text); overflow-wrap: anywhere; }

/* what happens next */
.fcb-steps { margin: var(--fc-space-40) 0 0; padding: 0; list-style: none; display: grid; gap: var(--fc-space-20); }
.fcb-steps li { display: grid; grid-template-columns: var(--fc-control-chip) minmax(0, 1fr); gap: var(--fc-space-16); align-items: start; }
.fcb-step-n { display: grid; place-items: center; width: var(--fc-control-chip); height: var(--fc-control-chip); border: var(--fc-border-hairline) solid var(--fc-line-on-deep); border-radius: var(--fc-radius-round); font: var(--fc-type-meta-strong); color: var(--fc-text-on-deep-strong); font-variant-numeric: tabular-nums; }
.fcb-steps p { padding-top: var(--fc-space-4); font: var(--fc-type-ui-body); color: var(--fc-text-on-deep-muted); }
.fcb-steps b { font-weight: var(--fc-weight-medium); color: var(--fc-text-on-deep-strong); }

/* InviteCode, on the deep band */
.fcb-invite { margin-top: var(--fc-space-40); padding-top: var(--fc-space-32); border-top: var(--fc-border-hairline) solid var(--fc-line-on-deep-faint); }
.fcb-invite-h { display: block; font: var(--fc-type-title); color: var(--fc-text-on-deep-strong); }
.fcb-invite-t { margin-top: var(--fc-space-4); font: var(--fc-type-ui-regular); color: var(--fc-text-on-deep-muted); }
.fcb-invite-row { margin-top: var(--fc-space-16); display: flex; gap: var(--fc-space-12); max-width: var(--fc-measure-narrow); }
.fcb-invite-row .fcb-input { flex: 1 1 auto; font-variant-numeric: tabular-nums; letter-spacing: var(--fc-tracking-slight); }
.fcb-invite-row .fc-btn { flex: none; }
.fcb-invite .fcb-input:focus-visible { outline-color: var(--fc-focus-on-deep); }
.fcb-invite .fcb-err { margin-top: var(--fc-space-8); color: var(--fc-error-border); } /* proposed: fc-error-text-on-deep */
.fcb-invite-done { margin-top: var(--fc-space-16); display: flex; align-items: flex-start; gap: var(--fc-space-8); font: var(--fc-type-ui-body); color: var(--fc-text-on-deep-strong); }
.fcb-invite-done svg { flex: none; width: var(--fc-icon-sm); height: var(--fc-icon-sm); margin-top: var(--fc-space-4); }

/* ---------- Footer: no product map yet, only the ways in ---------- */
.fcb-foot-links { grid-column: var(--fc-col-7-12); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--fc-space-8) var(--fc-space-32); }
.fcb-foot-links a { position: relative; display: inline-flex; align-items: center; min-height: var(--fc-control-chip); font: var(--fc-type-ui-regular); color: var(--fc-text-on-deep-muted); text-decoration: none; transition: color var(--fc-duration-hover) var(--fc-ease-out); }
.fcb-foot-links a:hover { color: var(--fc-text-on-deep-strong); }

/* ---------- Tablet ---------- */
@container fc (max-width: 900px) {
  .fcb-pitch-lead, .fcb-note { grid-column: var(--fc-col-all); }
  .fcb-pitch-lead + .fc-intro { margin-top: var(--fc-space-16); }
  .fcb-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--fc-space-40); }
  .fcb-access-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; grid-template-areas: "head" "card" "more"; grid-template-rows: auto; }
  .fcb-access-card { margin-top: var(--fc-head-gap-tablet); }
  .fcb-steps { margin-top: var(--fc-space-48); }
  .fcb-foot-links { grid-column: var(--fc-col-all); justify-content: flex-start; }
}

/* ---------- Phone ---------- */
@container fc (max-width: 640px) {
  .fcb-cohort { flex-direction: column; }
  .fcb-cohort-i { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--fc-space-16); padding: var(--fc-space-12) 0; text-align: left; }
  .fcb-cohort-i + .fcb-cohort-i { border-left: 0; border-top: var(--fc-border-hairline) solid var(--fc-line); }
  .fcb-cohort-i dd { font: var(--fc-type-body-strong); }
  .fcb-cohort-k { margin-top: var(--fc-space-8); text-align: left; }
  .fcb-perks { grid-template-columns: minmax(0, 1fr); row-gap: var(--fc-space-32); }
  .fcb-access-card { margin-top: var(--fc-head-gap-phone); padding: var(--fc-space-24); }
  .fcb-fields { grid-template-columns: minmax(0, 1fr); }
  .fcb-submit-row .fc-btn { width: 100%; }
  .fcb-steps { margin-top: var(--fc-space-40); }
  .fcb-foot-links { gap: 0 var(--fc-space-24); }
  .fcb-foot-links a { min-height: var(--fc-target-min); }
}
/* the narrowest phones: the tag gives way to Request access (the hero card still says Private beta), and the card's
   two buttons stack so neither label wraps */
@container fc (max-width: 400px) {
  .fcb-tag { display: none; }
  .fcb-page .fc-pitch .fc-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .fcb-input, .fcb-foot-links a { transition: none; }
}
@media (forced-colors: active) {
  .fcb-tag, .fcb-step-n, .fcb-access-card { border: var(--fc-border-hairline) solid CanvasText; }
}