/* MEDCUE GLASS v2 · public-B: sign in, create account, password, help, about, legal, examiner join.
   Port target: src/public-site (marketing pages) and the auth views. */
@layer glass.page {

/* ── Minimal chrome for auth-style pages ─────────────────────────── */
:where(.mc-glass) .pb-auth { min-height: 100dvh; display: flex; flex-direction: column; }
:where(.mc-glass) .pb-bar { width: 100%; max-width: 1100px; margin: 0 auto; height: calc(76px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 22px 0; display: flex; align-items: center; justify-content: space-between; }
:where(.mc-glass) .pb-bar .g-logo { height: 60px; }
:where(.mc-glass) .pb-bar .pb-help { font: 400 calc(var(--g-t-subhead) * var(--g-scale))/1 var(--g-font); }
:where(.mc-glass) .pb-main { flex: 1; padding: clamp(24px, 8vh, 88px) 22px 48px; }
:where(.mc-glass) .pb-col { width: min(100%, 380px); margin: 0 auto; display: grid; }
:where(.mc-glass) .pb-col.wide { width: min(100%, 1040px); }
:where(.mc-glass) .pb-foot { padding: 18px 22px max(26px, env(safe-area-inset-bottom)); text-align: center; font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
:where(.mc-glass) .pb-foot a { color: var(--g-label-2); }

:where(.mc-glass) .pb-head { display: grid; gap: 8px; text-align: center; justify-items: center; }
:where(.mc-glass) .pb-head p { max-width: 34ch; text-wrap: pretty; }
:where(.mc-glass) .pb-form { display: grid; gap: 16px; margin-top: 28px; }
:where(.mc-glass) .pb-f { display: grid; gap: 6px; }
:where(.mc-glass) .pb-lab { font: 500 calc(var(--g-t-subhead) * var(--g-scale))/1.3 var(--g-font); color: var(--g-label); letter-spacing: -.015em; }
:where(.mc-glass) .pb-lab small { font: inherit; color: var(--g-label-2); font-weight: 400; }
:where(.mc-glass) .pb-lab-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
:where(.mc-glass) .pb-lab-row a { font-size: calc(var(--g-t-subhead) * var(--g-scale)); }
:where(.mc-glass) .pb-main .g-field { min-height: 50px; padding: 12px 16px; border-radius: 12px; }
:where(.mc-glass) .g-field[aria-invalid="true"] { outline: 2px solid color-mix(in srgb, var(--g-red) 70%, transparent); outline-offset: 0; }
:where(.mc-glass) .pb-pw { position: relative; }
:where(.mc-glass) .pb-pw .g-field { padding-right: 72px; }
:where(.mc-glass) .pb-reveal { all: unset; box-sizing: border-box; position: absolute; right: 4px; top: 50%; translate: 0 -50%; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 10px; cursor: pointer; color: var(--g-tint); font: 500 calc(var(--g-t-subhead) * var(--g-scale))/1 var(--g-font); }
:where(.mc-glass) .pb-reveal:hover { background: var(--g-fill-4); }
:where(.mc-glass) .pb-reveal:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); }
:where(.mc-glass) .pb-submit { margin-top: 8px; }
:where(.mc-glass) .pb-alt { margin-top: 22px; text-align: center; font-size: calc(var(--g-t-subhead) * var(--g-scale)); color: var(--g-label-2); }
:where(.mc-glass) .pb-alt + .pb-alt { margin-top: 12px; }
:where(.mc-glass) .pb-linkbtn { all: unset; cursor: pointer; color: var(--g-tint); border-radius: 6px; }
:where(.mc-glass) .pb-linkbtn:hover { text-decoration: underline; text-underline-offset: .18em; }
:where(.mc-glass) .pb-linkbtn:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: 2px; }
:where(.mc-glass) .pb-note { text-align: center; font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); text-wrap: pretty; }
:where(.mc-glass) .pb-note a { color: var(--g-label); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .5px; }

:where(.mc-glass) .pb-main .g-banner { background: var(--g-fill-4); margin-top: 24px; }
:where(.mc-glass) .pb-main .g-banner.err { background: color-mix(in srgb, var(--g-red) 9%, var(--g-bg-plain)); }
:where(.mc-glass) .pb-main .g-banner.warn { background: color-mix(in srgb, var(--g-orange) 12%, var(--g-bg-plain)); }
:where(.mc-glass) .pb-main .g-banner .g-footnote a { text-decoration: underline; text-underline-offset: .18em; }

/* one-time and room codes */
:where(.mc-glass) .pb-main .g-field.pb-code { min-height: 60px; text-align: center; font: 600 28px/1 var(--g-font-display); letter-spacing: .32em; text-indent: .32em; font-variant-numeric: tabular-nums; padding: 0 12px; }
:where(.mc-glass) .pb-code.text { font-size: 19px; letter-spacing: 0; text-indent: 0; font-family: var(--g-font); font-weight: 500; }
:where(.mc-glass) .pb-code::placeholder { font-weight: 400; color: var(--g-label-3); }

/* quiet strength meter */
:where(.mc-glass) .pb-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
:where(.mc-glass) .pb-meter i { display: block; height: 4px; border-radius: 2px; background: var(--g-fill-2); transition: background-color var(--g-d-base) linear; }
:where(.mc-glass) .pb-meter[data-level="1"] i:nth-child(-n+1), :where(.mc-glass) .pb-meter[data-level="2"] i:nth-child(-n+2), :where(.mc-glass) .pb-meter[data-level="3"] i:nth-child(-n+3) { background: var(--g-label-2); }
:where(.mc-glass) .pb-meter[data-level="4"] i { background: var(--g-green); }
:where(.mc-glass) .pb-hint { display: flex; gap: 6px; align-items: center; font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); min-height: 18px; }
:where(.mc-glass) .pb-hint .g-ic { width: 14px; height: 14px; stroke-width: 2.2; }
:where(.mc-glass) .pb-hint .g-ic.bad { color: var(--g-red); }
:where(.mc-glass) .pb-hint .g-ic.good { color: var(--g-green); }
:where(.mc-glass) .pb-seg { display: grid; width: 100%; }
:where(.mc-glass) .pb-seg button { padding: 9px 12px; }

/* status screens */
:where(.mc-glass) .pb-status { display: grid; justify-items: center; text-align: center; gap: 10px; }
:where(.mc-glass) .pb-status .g-tile-ic { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 10px; }
:where(.mc-glass) .pb-status .g-tile-ic .g-ic { width: 34px; height: 34px; stroke-width: 1.8; }
:where(.mc-glass) .pb-status p { max-width: 34ch; text-wrap: pretty; }
:where(.mc-glass) .pb-status p b { font-weight: 600; color: var(--g-label); overflow-wrap: anywhere; }
:where(.mc-glass) .pb-actions { display: grid; gap: 10px; width: 100%; margin-top: 18px; }

/* ── Examiner join ───────────────────────────────────────────────── */
:where(.mc-glass) .ex-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; }
:where(.mc-glass) .ex-top h1 { max-width: 22ch; }
:where(.mc-glass) .ex-live { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 10px; border-radius: var(--g-r-capsule); background: var(--g-fill-3); font: 500 calc(var(--g-t-subhead) * var(--g-scale))/1 var(--g-font); }
:where(.mc-glass) .ex-live .g-ic { width: 18px; height: 18px; color: var(--g-green); stroke-width: 2.2; }
:where(.mc-glass) .ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: start; }
@media (min-width: 900px) { :where(.mc-glass) .ex-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } }
:where(.mc-glass) .ex-stage { display: block; width: 100%; height: clamp(180px, 34vw, 300px); padding: 0; border: 0; border-radius: var(--g-r-card); background: var(--g-stage); cursor: zoom-in; overflow: hidden; }
:where(.mc-glass) .ex-stage img { width: 100%; height: 100%; object-fit: contain; }
:where(.mc-glass) .ex-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 10px 4px 0; font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); }
:where(.mc-glass) .ex-scn { margin-top: 20px; display: grid; gap: 6px; }
:where(.mc-glass) .ex-scn p { text-wrap: pretty; }
:where(.mc-glass) .ex-right { display: grid; gap: 24px; }
:where(.mc-glass) .ex-right .g-section { margin: 0; }
:where(.mc-glass) .ex-meta { display: grid; gap: 14px; }
:where(.mc-glass) .ex-guide .g-cell { align-items: flex-start; padding: 13px 16px; font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.38; }
:where(.mc-glass) .ex-guide .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--g-fill-3); color: var(--g-label-2); font: 600 12px/1 var(--g-font); margin-top: 1px; }
:where(.mc-glass) .ex-segwrap { display: grid; }
:where(.mc-glass) .ex-segwrap .g-seg { width: 100%; }

/* ── Production additions ────────────────────────────────────────── */
:where(.mc-glass) .pb-main .g-banner { margin-top: 20px; }
:where(.mc-glass) .pb-main .g-banner.ok { background: color-mix(in srgb, var(--g-green) 11%, var(--g-bg-plain)); }
:where(.mc-glass) .pb-main .g-banner .pb-msg { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.38; }
:where(.mc-glass) .pb-main .g-banner .pb-msg a { text-decoration: underline; text-underline-offset: .18em; }
:where(.mc-glass) .pb-main .g-banner:focus-visible { outline-offset: 2px; border-radius: var(--g-r-cell); }
:where(.mc-glass) .pb-submit.is-busy { opacity: .72; cursor: progress; }
:where(.mc-glass) .pb-main .g-field:focus-visible { outline-offset: 0; border-radius: 12px; }
:where(.mc-glass) .pb-main .g-field[aria-invalid="true"] { outline: 2px solid color-mix(in srgb, var(--g-red) 70%, transparent); }
:where(.mc-glass) .pb-main .pb-sub { text-wrap: pretty; }
:where(.mc-glass) .pb-main .pb-quiet { margin-top: 0; }
:where(.mc-glass) .pb-main #mfa-code.pb-code.text { font-size: 19px; }
:where(.mc-glass) .pb-legal { max-width: 52ch; margin: 0 auto; text-wrap: pretty; }
:where(.mc-glass) .pb-foot { flex-direction: column; align-items: center; gap: 10px; }
:where(.mc-glass) .pb-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
:where(.mc-glass) .ex-save { min-height: 1.4em; font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); }
:where(.mc-glass) .ex-brief { display: grid; gap: 4px; }
:where(.mc-glass) .ex-brief + .ex-brief { margin-top: 16px; }
:where(.mc-glass) .ex-brief p, :where(.mc-glass) .ex-brief li { text-wrap: pretty; }
:where(.mc-glass) .ex-part { padding: 18px; border-radius: var(--g-r-card); background: var(--g-bg-2); display: grid; gap: 12px; transition: box-shadow var(--g-d-base) linear; }
:where(.mc-glass) .ex-part.cur { box-shadow: 0 0 0 2px var(--g-tint); }
:where(.mc-glass) .ex-part-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
:where(.mc-glass) .ex-part-head .g-caps { font-size: calc(var(--g-t-footnote) * var(--g-scale)); font-weight: 600; color: var(--g-label-2); text-transform: uppercase; letter-spacing: .02em; }
:where(.mc-glass) .ex-mark { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--g-fill-3); }
:where(.mc-glass) .ex-mark button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; min-width: 64px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 7px; text-align: center; font: 500 calc(var(--g-t-footnote) * var(--g-scale))/1.3 var(--g-font); }
:where(.mc-glass) .ex-mark button:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); }
:where(.mc-glass) .ex-mark button:disabled { cursor: default; opacity: .5; }
:where(.mc-glass) .ex-mark button[aria-pressed="true"] { background: var(--g-bg-elevated); font-weight: 600; box-shadow: 0 2px 6px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04); }
:where(.mc-glass) .ex-mark button.met[aria-pressed="true"] { color: var(--g-correct); }
:where(.mc-glass) .ex-mark button.missed[aria-pressed="true"] { color: var(--g-wrong); }
:where(.mc-glass) .ex-mark button.partial[aria-pressed="true"] { color: var(--g-warn); }
:where(.mc-glass) .ex-seg { display: grid; gap: 4px; }
:where(.mc-glass) .ex-seg .q { font-weight: 600; font-size: calc(var(--g-t-subhead) * var(--g-scale)); }
:where(.mc-glass) .ex-seg ul, :where(.mc-glass) .ex-pearls ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.38; color: var(--g-label-2); }
:where(.mc-glass) .ex-pearls { padding: 12px 14px; border-radius: var(--g-r-cell); background: var(--g-fill-4); display: grid; gap: 4px; }
:where(.mc-glass) .ex-card { display: grid; gap: 8px; padding: 14px; border-radius: var(--g-r-cell); background: var(--g-bg-3); }
:where(.mc-glass) .ex-card .imgwrap { display: grid; gap: 8px; justify-items: start; }
:where(.mc-glass) .ex-card .imgwrap img { border-radius: var(--g-r-small); max-height: 360px; width: auto; }
:where(.mc-glass) .ex-card .ex-find { font-size: calc(var(--g-t-subhead) * var(--g-scale)); }
:where(.mc-glass) .ex-diag { padding: 12px 14px; border-radius: var(--g-r-cell); background: var(--g-fill-4); font-weight: 600; }
:where(.mc-glass) .ex-stack { display: grid; gap: 16px; margin-top: 24px; }
:where(.mc-glass) .ex-conn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: var(--g-r-capsule); background: var(--g-fill-3); font: 500 calc(var(--g-t-subhead) * var(--g-scale))/1 var(--g-font); }
:where(.mc-glass) .ex-conn.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--g-green); }
:where(.mc-glass) .ex-ended { text-align: center; color: var(--g-label-2); }
@media (prefers-reduced-motion: reduce) { :where(.mc-glass) .ex-part { transition: none; } }

/* image inspector (MedcueDialog.inspectImage appends this dialog to <body>) */
:where(.mc-glass) .learner-image-dialog { width: min(1100px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 16px; border: 0; border-radius: var(--g-r-card); background: var(--g-bg-elevated); color: var(--g-label); overflow: auto; box-shadow: var(--g-pop-shadow); }
:where(.mc-glass) .learner-image-dialog::backdrop { background: var(--g-stage-dim); }
:where(.mc-glass) .learner-image-dialog img { display: block; width: auto; height: auto; max-width: 100%; max-height: 75dvh; margin: 12px auto; object-fit: contain; }
:where(.mc-glass) .learner-image-dialog button, :where(.mc-glass) .learner-inspect { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--g-r-capsule); background: var(--g-fill-3); color: var(--g-label); font: 500 calc(var(--g-t-subhead) * var(--g-scale))/1 var(--g-font); cursor: pointer; }
:where(.mc-glass) .learner-image-dialog a { display: inline-flex; align-items: center; min-height: 44px; }
}