/* Medcue Glass · home hero reader. Reader (q-*) chart layout, window frame (ins-*) and chart-layout overrides, ported from prototype pages-core (reader), pages-inside and pages-question. */ @layer glass.page { /* ── Question reader (Glass v2) ──────────────────────────────────── */ :where(.mc-glass) .q-shell { min-height: 100dvh; background: var(--g-bg); } :where(.mc-glass) .q-top { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; } :where(.mc-glass) .q-top::after { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; background: linear-gradient(var(--g-bg) 45%, transparent); } :where(.mc-glass) .q-top .lead { justify-self: start; display: flex; gap: 6px; } :where(.mc-glass) .q-top .trail { justify-self: end; display: flex; gap: 6px; } :where(.mc-glass) .q-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--g-r-capsule); border: 0; cursor: pointer; color: var(--g-label); font: 500 calc(var(--g-t-subhead) * var(--g-scale))/1 var(--g-font); text-decoration: none !important; } :where(.mc-glass) .q-pill.round { width: 40px; padding: 0; justify-content: center; } :where(.mc-glass) .q-pill[aria-pressed="true"] { color: var(--g-tint); } :where(.mc-glass) .q-capsule { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 4px 14px 4px 4px; border-radius: var(--g-r-capsule); border: 0; cursor: pointer; color: var(--g-label); font: 600 calc(var(--g-t-subhead) * var(--g-scale))/1 var(--g-font); } :where(.mc-glass) .q-capsule img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--g-stage); } :where(.mc-glass) .q-capsule .bar { width: 56px; height: 4px; border-radius: 2px; background: var(--g-fill-2); overflow: hidden; } :where(.mc-glass) .q-capsule .bar i { display: block; height: 100%; width: var(--p, 20%); background: var(--g-tint); } :where(.mc-glass) .q-capsule .clock { font-variant-numeric: tabular-nums; color: var(--g-label-2); font-weight: 500; } :where(.mc-glass) .q-capsule .clock.over { color: var(--g-warn); } :where(.mc-glass) .q-capsule .mode { font: 600 11px/1 var(--g-font); text-transform: uppercase; letter-spacing: .04em; color: var(--g-label-2); padding: 4px 7px; border-radius: 6px; background: var(--g-fill-3); } :where(.mc-glass) .q-body { max-width: 1320px; margin: 0 auto; padding: 8px 24px 140px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px; align-items: start; } :where(.mc-glass) .q-body.no-fig { grid-template-columns: minmax(0, 720px); justify-content: center; } :where(.mc-glass) .q-fig { position: sticky; top: 76px; } :where(.mc-glass) .q-stage { display: block; width: 100%; height: min(calc(100dvh - 160px), 760px); padding: 0; border: 0; border-radius: var(--g-r-card); background: var(--g-stage); cursor: zoom-in; overflow: hidden; position: relative; } :where(.mc-glass) .q-stage img { width: 100%; height: 100%; object-fit: contain; } :where(.mc-glass) .q-stage .hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; gap: 6px; align-items: center; height: 34px; padding: 0 13px; border-radius: var(--g-r-capsule); color: #1D1D1F; background: rgb(250 250 252 / .82); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 0 0 .5px rgb(0 0 0 / .08), 0 4px 14px -4px rgb(0 0 0 / .3); font: 600 13px/1 var(--g-font); } :where(.mc-glass) .q-figcap { display: flex; justify-content: space-between; gap: 12px; margin: 10px 4px 0; font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); } :where(.mc-glass) .q-figcap .find { color: var(--g-label); font-weight: 600; } :where(.mc-glass) .q-read { max-width: 660px; min-width: 0; } :where(.mc-glass) .q-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; } :where(.mc-glass) .q-stem { font: 400 calc(17px * var(--g-scale))/1.58 var(--g-font); letter-spacing: -.012em; margin: 0 0 16px; max-width: 66ch; } :where(.mc-glass) .q-stem mark { background: color-mix(in srgb, var(--g-yellow) 42%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } :where(.mc-glass) .q-lead { font: 600 calc(19px * var(--g-scale))/1.38 var(--g-font-display); letter-spacing: -.018em; margin: 0 0 16px; } :where(.mc-glass) .q-opts { background: var(--g-bg-2); border-radius: var(--g-r-cell); overflow: hidden; } :where(.mc-glass) .q-opt { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: start; width: 100%; padding: 14px 16px; border: 0; background: transparent; color: var(--g-label); text-align: left; cursor: pointer; font: 400 calc(var(--g-t-body) * var(--g-scale))/1.41 var(--g-font); letter-spacing: -.02em; transition: background-color var(--g-d-fast) linear; } :where(.mc-glass) .q-opt + .q-opt::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: .5px; background: var(--g-sep); } :where(.mc-glass) .q-opt:hover { background: var(--g-fill-4); } :where(.mc-glass) .q-opt .L { width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--g-font-rounded); color: var(--g-label-2); box-shadow: inset 0 0 0 1.5px var(--g-fill); transition: background-color var(--g-d-fast) linear, color var(--g-d-fast) linear, box-shadow var(--g-d-fast) linear; } :where(.mc-glass) .q-opt .tag { display: none; align-items: center; gap: 4px; font: 600 calc(var(--g-t-footnote) * var(--g-scale))/1.2 var(--g-font); white-space: nowrap; margin-top: 3px; } :where(.mc-glass) .q-opt[aria-pressed="true"] { background: var(--g-tint-soft); } :where(.mc-glass) .q-opt[aria-pressed="true"] .L { background: var(--g-tint); color: var(--g-tint-on); box-shadow: none; } :where(.mc-glass) .q-opt.struck .txt { text-decoration: line-through; text-decoration-color: var(--g-label-2); color: var(--g-label-3); } :where(.mc-glass) .q-opt.struck .L { color: var(--g-label-3); } :where(.mc-glass) [data-state="answered"] .q-opt { cursor: default; } :where(.mc-glass) [data-state="answered"] .q-opt:hover { background: transparent; } :where(.mc-glass) .q-opt[data-outcome="other"] { color: var(--g-label-2); } :where(.mc-glass) .q-opt[data-outcome="correct"] { background: var(--g-correct-soft); } :where(.mc-glass) .q-opt[data-outcome="correct"] .L { background: var(--g-green); color: #fff; box-shadow: none; } :where(.mc-glass) .q-opt[data-outcome="correct"] .tag { display: inline-flex; color: var(--g-correct); } :where(.mc-glass) .q-opt[data-outcome="wrong"] { background: var(--g-wrong-soft); } :where(.mc-glass) .q-opt[data-outcome="wrong"] .L { background: var(--g-red); color: #fff; box-shadow: none; } :where(.mc-glass) .q-opt[data-outcome="wrong"] .tag { display: inline-flex; color: var(--g-wrong); } :where(.mc-glass) .q-opt[data-outcome] .L { animation: q-pop 380ms var(--g-spring-bouncy); } @keyframes q-pop { from { scale: .6; } } :where(.mc-glass) .q-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; } :where(.mc-glass) .q-tools .g-footnote { margin-left: auto; } :where(.mc-glass) .q-dock { position: fixed; z-index: 55; left: var(--dock-x, 50%); translate: -50% 0; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: var(--g-r-capsule); transition: opacity 200ms linear, translate var(--g-d-move) var(--g-spring-smooth); } :where(.mc-glass) .q-dock .g-btn-filled { min-width: 210px; } :where(.mc-glass) .q-dock.gone { opacity: 0; translate: -50% 24px; pointer-events: none; } :where(.mc-glass) .q-note { margin-top: 14px; } :where(.mc-glass) .q-note textarea { width: 100%; min-height: 84px; resize: vertical; border: 0; border-radius: var(--g-r-cell); background: var(--g-bg-2); padding: 12px 14px; color: var(--g-label); font: inherit; font-size: calc(var(--g-t-subhead) * var(--g-scale)); } :where(.mc-glass) .q-note textarea:focus { outline: 3px solid color-mix(in srgb, var(--g-tint) 45%, transparent); } /* explanation sheet content */ :where(.mc-glass) .x-verdict { display: flex; align-items: center; gap: 10px; font: 700 calc(var(--g-t-title2) * var(--g-scale))/1.2 var(--g-font-display); letter-spacing: -.018em; } :where(.mc-glass) .x-verdict[data-ok="true"] { color: var(--g-correct); } :where(.mc-glass) .x-verdict[data-ok="false"] { color: var(--g-wrong); } :where(.mc-glass) .x-verdict .g-ic { width: 28px; height: 28px; stroke-width: 2.1; } :where(.mc-glass) .x-answer { margin: 6px 0 0; font-size: calc(var(--g-t-subhead) * var(--g-scale)); color: var(--g-label-2); } :where(.mc-glass) .x-answer b { color: var(--g-label); font-weight: 600; } :where(.mc-glass) .x-block { padding: 18px 0; border-top: .5px solid var(--g-sep); } :where(.mc-glass) .x-block > h3 { font: 600 calc(var(--g-t-footnote) * var(--g-scale))/1.2 var(--g-font); color: var(--g-label-2); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 8px; } :where(.mc-glass) .x-why { font-size: calc(var(--g-t-body) * var(--g-scale)); line-height: 1.55; margin: 0; max-width: 68ch; } :where(.mc-glass) .x-others details { border-top: .5px solid var(--g-sep); } :where(.mc-glass) .x-others details:first-child { border-top: 0; } :where(.mc-glass) .x-others summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; gap: 10px; align-items: start; padding: 11px 0; font-size: calc(var(--g-t-callout) * var(--g-scale)); } :where(.mc-glass) .x-others summary::-webkit-details-marker { display: none; } :where(.mc-glass) .x-others summary .L { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--g-fill-3); font: 600 12px/1 var(--g-font-rounded); color: var(--g-label-2); } :where(.mc-glass) .x-others summary .g-chev { margin-top: 4px; transition: rotate var(--g-d-fast) var(--g-ease); } :where(.mc-glass) .x-others details[open] summary .g-chev { rotate: 90deg; } :where(.mc-glass) .x-others details p { margin: 0 0 12px 36px; color: var(--g-label-2); font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.5; } :where(.mc-glass) .x-inline { margin-top: 18px; background: var(--g-bg-2); border-radius: var(--g-r-card); padding: 4px 20px 6px; } :where(.mc-glass) .x-inline .g-sheet-bar { padding: 14px 0 6px; grid-template-columns: auto 1fr auto; } :where(.mc-glass) .x-inline .g-sheet-body { padding: 0; overflow: visible; } /* question sheet (phone/tablet only now) */ :where(.mc-glass) dialog.q-sheet { --sheet-w: 720px; } /* exam navigator (grows from capsule) */ :where(.mc-glass) .q-nav { position: fixed; z-index: 70; top: 64px; left: 50%; translate: -50% 0; width: min(460px, calc(100vw - 20px)); padding: 14px; border-radius: 26px; transform-origin: 50% -24px; scale: .6; opacity: 0; pointer-events: none; transition: scale var(--g-d-move) var(--g-spring), opacity 180ms linear; } :where(.mc-glass) .q-nav.open { scale: 1; opacity: 1; pointer-events: auto; } :where(.mc-glass) .q-nav-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; } :where(.mc-glass) .q-nav-grid a { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--g-fill-3); color: var(--g-label); font: 600 13px/1 var(--g-font); font-variant-numeric: tabular-nums; text-decoration: none !important; } :where(.mc-glass) .q-nav-grid a[data-s="answered"] { background: var(--g-label); color: var(--g-bg-2); } :where(.mc-glass) .q-nav-grid a[aria-current="true"] { background: var(--g-tint); color: var(--g-tint-on); } :where(.mc-glass) .q-nav-grid a[data-flag]::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--g-orange); box-shadow: 0 0 0 2px var(--g-bg-elevated); } :where(.mc-glass) .q-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--g-label-2); } :where(.mc-glass) .q-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; } /* review-before-submit grid */ :where(.mc-glass) .q-review-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } :where(.mc-glass) .q-review-grid a { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; border-radius: 12px; background: var(--g-bg-2); color: var(--g-label); text-decoration: none !important; font: 600 15px/1 var(--g-font); font-variant-numeric: tabular-nums; position: relative; } :where(.mc-glass) .q-review-grid a small { font: 500 11px/1 var(--g-font); color: var(--g-label-2); } :where(.mc-glass) .q-review-grid a[data-s="blank"] { background: transparent; box-shadow: inset 0 0 0 1px var(--g-sep); color: var(--g-label-2); } :where(.mc-glass) .q-review-grid a[data-s="answered"] small { color: var(--g-correct); } :where(.mc-glass) .q-review-grid a[data-flag]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--g-orange); } /* landscape figures (ECGs, strips): wider figure column, stage shaped to the image */ @media (min-width: 1100px) { :where(.mc-glass) .q-body.wide-fig { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } :where(.mc-glass) .q-body.wide-fig .q-stage { height: auto; aspect-ratio: var(--fig-ar, 2); max-height: calc(100dvh - 160px); } } @media (max-width: 1099px) { :where(.mc-glass) .q-body.wide-fig .q-stage { aspect-ratio: var(--fig-ar, 2); } } @media (max-width: 1099px) { :where(.mc-glass) .q-body { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 150px; } :where(.mc-glass) .q-fig { position: relative; top: 0; padding: 0 12px; } :where(.mc-glass) .q-stage { height: auto; aspect-ratio: 4 / 3.3; max-height: 62dvh; border-radius: 18px; } :where(.mc-glass) .q-read { max-width: 720px; margin: 0 auto; padding: 18px 16px 0; } :where(.mc-glass) .q-dock { left: 12px; right: 12px; translate: none; justify-content: space-between; } :where(.mc-glass) .q-dock.gone { translate: 0 24px; } :where(.mc-glass) .q-dock .g-btn-filled { flex: 1; min-width: 0; } :where(.mc-glass) .q-top { grid-template-columns: auto 1fr auto; padding-left: 10px; padding-right: 10px; } :where(.mc-glass) .q-capsule { justify-self: center; } :where(.mc-glass) .q-capsule .bar { width: 36px; } :where(.mc-glass) .q-top .lead .lbl { display: none; } } @media (max-width: 440px) { :where(.mc-glass) .q-capsule .mode { display: none; } :where(.mc-glass) .q-capsule { gap: 8px; padding-right: 12px; } } @media (max-width: 360px) { :where(.mc-glass) .q-capsule .bar { display: none; } } } /* MEDCUE GLASS v2 · Inside Medcue. Scenes are framed reconstructions of the real app screens. Link after pages-core.css, pages-public-a.css and the app page CSS; before pages-question.css and motion.css. */ @layer glass.page { /* ── Scene head ──────────────────────────────────────────────────── */ :where(.mc-glass) .ins-scene { padding: 96px 0; scroll-margin-top: 48px; } :where(.mc-glass) .ins-head { text-align: center; } :where(.mc-glass) .ins-head .g-m-h2 { max-width: 20ch; margin: 0 auto; text-wrap: balance; } :where(.mc-glass) .ins-head .g-m-lede { max-width: 46ch; margin: 14px auto 0; text-wrap: balance; } :where(.mc-glass) .ins-plan { max-width: 52ch; margin: 18px auto 0; font-size: 15px; line-height: 1.5; color: var(--g-ink-2); } :where(.mc-glass) .ins-plan strong { color: var(--g-ink); font-weight: 600; } :where(.mc-glass) .ins-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--g-ink-2); text-align: left; } :where(.mc-glass) .ins-foot > span:last-child { max-width: 58ch; } /* ── Frame: the app window ───────────────────────────────────────── */ :where(.mc-glass) .ins-frame { width: min(1180px, 92vw); margin: 48px auto 0; border-radius: var(--g-r-window); overflow: clip; background: var(--g-bg); color: var(--g-label); box-shadow: var(--g-pop-shadow); isolation: isolate; position: relative; } :where(.mc-glass) .ins-win { padding: 0 0 26px; min-width: 0; } :where(.mc-glass) .ins-win.ins-app { padding: 30px clamp(18px, 3vw, 36px) 36px; } :where(.mc-glass) .ins-win .q-top { position: relative; top: auto; padding: 14px 16px 10px; } :where(.mc-glass) .ins-win .q-top::after { inset: 0; } :where(.mc-glass) .ins-win .q-capsule { cursor: default; } :where(.mc-glass) .ins-win .q-top .lead .q-pill { cursor: default; } :where(.mc-glass) .ins-win .q-capsule .clock { min-width: 4ch; text-align: right; } /* ── Reader grid (questions, cases, viva, arena) ─────────────────── */ :where(.mc-glass) .ins-qgrid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 28px; padding: 6px 24px 4px; align-items: start; } :where(.mc-glass) .ins-qgrid.wide { grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); } :where(.mc-glass) .ins-fig { position: sticky; top: 76px; display: flex; flex-direction: column; min-width: 0; padding: 0; } :where(.mc-glass) .ins-stagewrap { position: relative; display: flex; flex: 1; min-height: 0; } :where(.mc-glass) .ins-win .q-stage { --stage-h: min(calc(100dvh - 160px), 640px); height: auto; min-height: 0; flex: none; aspect-ratio: var(--fig-ar, var(--ar, 4 / 3)); max-height: var(--stage-h); width: min(100%, calc(var(--stage-h) * var(--fig-ar, var(--ar, 4 / 3)))); margin-inline: auto; } :where(.mc-glass) .ins-win .q-read { max-width: none; padding: 0; min-width: 0; } :where(.mc-glass) .ins-win .q-opts { background: var(--g-bg-2); } :where(.mc-glass) .ins-win .q-opt { padding: 12px 16px; cursor: pointer; } :where(.mc-glass) .ins-win .q-stem { font-size: 16.5px; line-height: 1.55; max-width: 62ch; text-wrap: pretty; margin-bottom: 14px; } :where(.mc-glass) .ins-win .q-lead { font-size: 19px; margin: 4px 0 12px; } :where(.mc-glass) .ins-win .q-figcap { margin: 10px 4px 0; } /* Dock: the app's floating dock, placed under the screen */ :where(.mc-glass) .ins-win .q-dock { position: static; translate: none; margin: 18px auto 0; width: max-content; max-width: calc(100% - 24px); transition: none; } :where(.mc-glass) .ins-win .q-dock .g-btn-filled { min-width: 190px; } :where(.mc-glass) .ins-win .q-dock .g-btn-filled[disabled] { background: var(--g-fill-2); color: var(--g-label-3); box-shadow: none; opacity: 1; } :where(.mc-glass) .ins-win .q-dock.rc-dock .g-btn-filled { min-width: 210px; } /* Capsule bars: the reader uses 20 segments (pages-question.css); the other focus screens keep the single bar */ :where(.mc-glass) .ins-win .q-capsule .bar:not(.ins-seg) { display: block; width: 56px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--g-fill-2); } :where(.mc-glass) .ins-win .q-capsule .bar:not(.ins-seg) i { display: block; width: var(--p, 20%); height: 100%; border-radius: 0; background: var(--g-tint); } :where(.mc-glass) .ins-win .x-inline { margin-top: 18px; } :where(.mc-glass) .ins-win .q-eyebrow { margin-bottom: 10px; } :where(.mc-glass) .ins-win .q-stage { min-height: 0; } /* Explanation blocks */ :where(.mc-glass) .ins-win .x-others summary { cursor: pointer; } :where(.mc-glass) .ins-more { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; color: var(--g-tint); text-decoration: none !important; } :where(.mc-glass) .ins-more:hover { color: var(--g-tint-hover); } /* Questions: the fold collapses in the pinned step 3 */ :where(.mc-glass) .ins-fold { display: grid; grid-template-rows: 1fr; } :where(.mc-glass) .ins-fold > div { min-height: 0; overflow: hidden; } /* ── Pinned question scene ───────────────────────────────────────── */ :where(.mc-glass) .ins-pin { padding: 0; } :where(.mc-glass) .ins-pinwrap { padding: 96px 0; } :where(.mc-glass) .ins-pinwrap .ins-head { padding: 0 22px; } :where(.mc-glass) .ins-pinwrap .ins-frame { margin-top: 48px; } :where(.mc-glass) .ins-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px auto 0; max-width: 880px; text-align: left; } :where(.mc-glass) .ins-step { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0; padding-top: 12px; border-top: 2px solid var(--g-sep); font-size: 15px; line-height: 1.4; color: var(--g-ink-2); } :where(.mc-glass) .ins-step .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--g-fill-3); color: var(--g-ink-2); font: 600 12px/1 var(--g-font-rounded); } :where(.mc-glass) .ins-pin .ins-plan { margin-top: 22px; } @media (min-width: 1180px) and (min-height: 740px) { :where(html.m-on .mc-glass) .ins-pin .m-pin-stage { display: grid; align-items: center; padding-top: 52px; box-sizing: border-box; } :where(html.m-on .mc-glass) .ins-pinwrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: center; width: min(1240px, 94vw); margin: 0 auto; padding: 0; } :where(html.m-on .mc-glass) .ins-pinwrap .ins-head { text-align: left; padding: 0; } :where(html.m-on .mc-glass) .ins-pinwrap .ins-head .g-m-h2 { margin: 0; font-size: 38px; max-width: 12ch; } :where(html.m-on .mc-glass) .ins-pinwrap .ins-head .g-m-lede { margin: 12px 0 0; font-size: 18px; } :where(html.m-on .mc-glass) .ins-pinwrap .ins-plan { margin: 22px 0 0; font-size: 14px; } :where(html.m-on .mc-glass) .ins-pinwrap .ins-frame { width: auto; margin: 0; max-height: calc(100svh - 84px); } :where(html.m-on .mc-glass) .ins-pinwrap .ins-win { padding-bottom: 16px; } :where(html.m-on .mc-glass) .ins-steps { grid-template-columns: 1fr; margin: 26px 0 0; max-width: none; min-height: 104px; align-content: start; } :where(html.m-on .mc-glass) .ins-steps .ins-step { border-top-color: var(--g-label); color: var(--g-ink); font-size: 17px; font-weight: 500; line-height: 1.35; } :where(html.m-on .mc-glass) .ins-steps .ins-step .n { background: var(--g-label); color: var(--g-bg-plain); } :where(html.m-on .mc-glass) .ins-pinwrap .ins-q[data-s="2"] .ins-fold { grid-template-rows: 0fr; } :where(html.m-on .mc-glass) .ins-pinwrap .ins-fold { transition: grid-template-rows var(--g-d-move) var(--g-spring); } :where(html.m-on .mc-glass) .ins-pinwrap .ins-qgrid { gap: 22px; padding: 2px 18px 0; align-items: stretch; } :where(html.m-on .mc-glass) .ins-pinwrap .ins-fig { position: relative; top: auto; } :where(html.m-on .mc-glass) .ins-pinwrap .q-stage { --stage-h: min(calc(100svh - 300px), 520px); } :where(html.m-on .mc-glass) .ins-pinwrap .ins-qgrid { grid-template-columns: minmax(0, .74fr) minmax(0, 1fr); } :where(html.m-on .mc-glass) .ins-pinwrap .q-opt { padding: 8px 14px; font-size: 16px; line-height: 1.35; } :where(html.m-on .mc-glass) .ins-pinwrap .q-stem { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.5; margin-bottom: 4px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-lead { font-size: 17px; margin: 14px 0 10px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-eyebrow { margin-bottom: 8px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-panel { margin-top: 12px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-facts { display: none; } :where(html.m-on .mc-glass) .ins-pinwrap .q-panel-h { margin-bottom: 5px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-panel .q-vitals > div { min-height: 0; padding-block: 6px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-panel .q-vitals dt { font-size: 14px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-panel .q-vitals dd, :where(html.m-on .mc-glass) .ins-pinwrap .q-panel .q-vitals dd.t { font-size: 15px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-confidence { margin-top: 10px; } :where(html.m-on .mc-glass) .ins-pinwrap .x-inline { margin-top: 12px; padding: 0 20px; } :where(html.m-on .mc-glass) .ins-pinwrap .x-block { padding: 14px 0; } :where(html.m-on .mc-glass) .ins-pinwrap .q-dock { margin-top: 12px; } :where(html.m-on .mc-glass) .ins-pinwrap .q-top { padding-top: 10px; padding-bottom: 6px; } } /* No room to pin: the steps stack and the scene scrolls normally. */ @media (min-width: 1180px) and (min-height: 740px) and (max-width: 1320px), (min-width: 1180px) and (min-height: 740px) and (max-height: 820px) { :where(html.m-on .mc-glass) .ins-pinwrap .q-opt { padding: 5px 12px; font-size: 14.5px; line-height: 1.3; } :where(html.m-on .mc-glass) .ins-pinwrap .q-lead { font-size: 16px; margin: 8px 0 6px; } :where(html.m-on .mc-glass) .ins-pinwrap .x-inline { margin-top: 8px; padding: 0 16px; } :where(html.m-on .mc-glass) .ins-pinwrap .x-block { padding: 9px 0; } :where(html.m-on .mc-glass) .ins-pinwrap .x-answer { display: none; } :where(html.m-on .mc-glass) .ins-pinwrap .q-figcap #capF { flex-basis: 100%; } :where(html.m-on .mc-glass) .ins-pinwrap .q-figcap #capF:not([hidden])::before { content: none; } :where(html.m-on .mc-glass) .ins-pinwrap .q-dock { margin-top: 8px; } } @media not all and (min-width: 1180px) and (min-height: 740px) { :where(.mc-glass) .ins-pin[data-pin] { height: auto !important; } :where(.mc-glass) .ins-pin[data-pin] > .m-pin-stage { position: static !important; height: auto !important; overflow: visible !important; } :where(.mc-glass) .ins-pin .ins-step { opacity: 1 !important; translate: none !important; pointer-events: auto !important; } :where(.mc-glass) .ins-pin .m-steps { display: grid !important; } :where(.mc-glass) .ins-pin .m-steps > [data-step] { grid-area: auto !important; } } /* ── Recall ──────────────────────────────────────────────────────── */ :where(.mc-glass) .ins-rc .rc-main { max-width: 720px; padding: 6px 16px 0; margin: 0 auto; } :where(.mc-glass) .ins-rc .rc-card { min-height: 360px; cursor: pointer; touch-action: auto; user-select: auto; -webkit-user-select: auto; } :where(.mc-glass) .ins-rc .rc-card[data-revealed="true"] { cursor: default; } :where(.mc-glass) .ins-rc .rc-dock { margin-top: 22px; } :where(.mc-glass) .ins-rc .rc-grades { width: min(460px, 100%); } :where(.mc-glass) .ins-rc .rc-dock .g-btn-filled { min-width: 210px; } :where(.mc-glass) .ins-rc .rc-back:not([hidden]) { animation: ins-up var(--g-d-move) var(--g-spring-smooth) backwards; } /* ── Gotchas ─────────────────────────────────────────────────────── */ :where(.mc-glass) .ins-gt { padding: 28px clamp(16px, 3vw, 32px) 32px; display: grid; gap: 18px; } :where(.mc-glass) .ins-gt .gt-modebar { margin: 0; justify-items: center; } :where(.mc-glass) .ins-gt .gt-modebar .g-seg { width: min(460px, 100%); } :where(.mc-glass) .gt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } :where(.mc-glass) .gt-pair .gt-read { grid-area: auto; max-width: none; padding: 24px; align-content: start; } :where(.mc-glass) .gt-pair .gt-prose { font-size: 16px; } :where(.mc-glass) .gt-pair .gt-cover { margin-top: 10px; } :where(.mc-glass) .gt-pair .gt-actions { margin-top: 12px; } /* ── Cases / viva / arena ────────────────────────────────────────── */ :where(.mc-glass) .ins-cs .cp-views { margin: 10px 0 0; width: 100%; } :where(.mc-glass) .ins-cs .cp-steps { margin-bottom: 18px; } :where(.mc-glass) .ins-cs .ins-fig { padding-top: 14px; } :where(.mc-glass) .ins-vs .vs-parts { margin: 8px 0 14px; } :where(.mc-glass) .ins-vs .vs-part { cursor: default; } :where(.mc-glass) .ins-vtitle { margin: 0 0 4px; } :where(.mc-glass) .ins-vs .vs-group { margin-top: 18px; } :where(.mc-glass) .ins-vs .g-section-head h4 { font: 700 var(--g-t-title3)/1.25 var(--g-font-display); letter-spacing: -.017em; } :where(.mc-glass) .ins-vs .vs-item { padding: 12px 16px; } :where(.mc-glass) .ins-vs .vs-item-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } :where(.mc-glass) .ins-av .av-partner { min-height: 66px; } :where(.mc-glass) .ins-av .av-partner:empty { display: none; } :where(.mc-glass) .ins-av .q-opt { grid-template-columns: 30px minmax(0, 1fr) auto; } :where(.mc-glass) .ins-av .x-inline { margin-top: 16px; } /* ── Progress and Today (app pages) ──────────────────────────────── */ :where(.mc-glass) .ins-apphead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } :where(.mc-glass) .ins-pgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; } :where(.mc-glass) .ins-pgrid .pg-stack { gap: 22px; } :where(.mc-glass) .ins-pgrid .pg-bar { cursor: default; } :where(.mc-glass) .ins-pgrid .pg-bar:hover { background: transparent; } :where(.mc-glass) .ins-official { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 0 4px; } :where(.mc-glass) .ins-official .g-ic { margin-top: 2px; flex: none; } :where(.mc-glass) .ins-cell { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 56px; } :where(.mc-glass) .ins-cell:hover { background: var(--g-fill-4); } :where(.mc-glass) .ins-cell:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: -3px; } :where(.mc-glass) .ins-tgrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; } :where(.mc-glass) .ins-tcol { display: grid; gap: 20px; align-content: start; min-width: 0; } :where(.mc-glass) .ins-tcol .t-widget { min-height: 0; } :where(.mc-glass) .ins-tcol .t-week { grid-template-columns: minmax(0, 1fr); } :where(.mc-glass) .ins-tcol .g-chart { height: 112px; } :where(.mc-glass) .ins-tcol .t-insight { display: grid; gap: 6px; } /* ── Search and Learn with AI ────────────────────────────────────── */ :where(.mc-glass) .ins-win.ins-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 36px clamp(18px, 3vw, 36px) 26px; align-items: start; column-gap: 28px; } :where(.mc-glass) .ins-col { min-width: 0; display: grid; gap: 12px; align-content: start; } :where(.mc-glass) .ins-cap { margin: 0; text-align: center; } :where(.mc-glass) .ins-spot, :where(.mc-glass) .ins-sheet { border-radius: 22px; overflow: hidden; box-shadow: var(--g-pop-shadow); min-width: 0; } :where(.mc-glass) .ins-spot { display: flex; flex-direction: column; } :where(.mc-glass) .ins-spot .g-spot-results { max-height: 470px; overflow: auto; } :where(.mc-glass) .ins-spot .g-spot-in input { min-width: 0; } :where(.mc-glass) .ins-spot .g-spot-item { cursor: pointer; } :where(.mc-glass) .ins-spot .g-spot-item .g-cell-main > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :where(.mc-glass) .ins-sheet { display: flex; flex-direction: column; } :where(.mc-glass) .ins-sheet-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 18px 6px; } :where(.mc-glass) .ins-sheet-title { font: 600 var(--g-t-headline)/1 var(--g-font); } :where(.mc-glass) .ins-done { justify-self: end; color: var(--g-tint); font-size: 17px; } :where(.mc-glass) .ins-sheet-seg { padding: 4px 16px 10px; } :where(.mc-glass) .ins-sheet-seg .g-seg { display: grid; width: 100%; } :where(.mc-glass) .ins-sheet-body { padding: 0 16px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; } :where(.mc-glass) .ins-asks { display: flex; flex-wrap: wrap; gap: 8px; } :where(.mc-glass) .ins-thread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } :where(.mc-glass) .ins-bot, :where(.mc-glass) .ins-me { min-width: 0; overflow-wrap: anywhere; } :where(.mc-glass) .ins-me { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--g-tint); color: var(--g-tint-on); font-size: 16px; line-height: 1.35; } :where(.mc-glass) .ins-bot { max-width: 94%; padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: var(--g-bg-2); display: grid; gap: 10px; } :where(.mc-glass) .ins-bot p { margin: 0; font-size: 15.5px; line-height: 1.5; } :where(.mc-glass) .ins-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } :where(.mc-glass) .ins-askform { display: flex; gap: 8px; } @media not all /* dark is set by html[data-learner-theme], see learner-appearance.js */ { :root:not([data-theme="light"]) :where(.mc-glass) .ins-frame { background: color-mix(in srgb, var(--g-bg-2) 40%, var(--g-bg)); box-shadow: 0 0 0 .5px rgb(255 255 255 / .14), var(--g-pop-shadow); } } :root[data-learner-theme="dark"] :where(.mc-glass) .ins-frame { background: color-mix(in srgb, var(--g-bg-2) 40%, var(--g-bg)); box-shadow: 0 0 0 .5px rgb(255 255 255 / .14), var(--g-pop-shadow); } @keyframes ins-up { from { opacity: 0; translate: 0 10px; } } /* Bars fill in as the report arrives */ :where(html.m-on .mc-glass) .ins-bars .pg-track > i { transform-origin: left; transition: scale 700ms var(--g-spring-smooth); transition-delay: calc(var(--i, 0) * 70ms); } :where(html.m-on .mc-glass) .ins-bars:not(.is-in) .pg-track > i { scale: 0 1; } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 1023px) { :where(.mc-glass) .ins-pgrid, :where(.mc-glass) .ins-tgrid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 899px) { :where(.mc-glass) .ins-scene { padding: 64px 0; } :where(.mc-glass) .ins-pinwrap { padding: 64px 0; } :where(.mc-glass) .ins-frame { margin-top: 36px; width: min(1180px, calc(100vw - 24px)); border-radius: 22px; } :where(.mc-glass) .ins-qgrid, :where(.mc-glass) .ins-qgrid.wide { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 4px 12px 0; } :where(.mc-glass) .ins-win .q-read { padding: 0 4px; } :where(.mc-glass) .ins-fig { position: relative; top: auto; } :where(.mc-glass) .ins-win .q-stage, :where(.mc-glass) .ins-win .ins-qgrid.wide .q-stage { flex: none; min-height: 0; --stage-h: 46svh; border-radius: 18px; } :where(.mc-glass) .ins-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; } :where(.mc-glass) .gt-pair { grid-template-columns: minmax(0, 1fr); } :where(.mc-glass) .ins-win.ins-duo { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } :where(.mc-glass) .ins-win .q-dock { width: calc(100% - 24px); justify-content: space-between; } :where(.mc-glass) .ins-win .q-dock .g-btn-filled { flex: 1; min-width: 0; } :where(.mc-glass) .ins-win .q-top { grid-template-columns: auto 1fr auto; padding-left: 10px; padding-right: 10px; } :where(.mc-glass) .ins-win .q-capsule { justify-self: center; } :where(.mc-glass) .ins-win .q-capsule .bar { width: 36px; } :where(.mc-glass) .ins-win .q-top .lead .lbl, :where(.mc-glass) .ins-win .q-top .trail .lbl { display: none; } :where(.mc-glass) .ins-win .q-top .trail .q-pill:not(.round) { width: 40px; padding: 0; justify-content: center; } :where(.mc-glass) .ins-rc .rc-card { min-height: 320px; } } @media (max-width: 520px) { :where(.mc-glass) .ins-win .q-capsule .mode, :where(.mc-glass) .ins-win .q-capsule .bar { display: none; } :where(.mc-glass) .ins-win .q-capsule { gap: 8px; padding-right: 12px; } :where(.mc-glass) .ins-win .q-top .trail .q-pill:nth-child(2) { display: none; } :where(.mc-glass) .ins-foot { flex-direction: column; text-align: center; gap: 8px; padding: 0 22px; } :where(.mc-glass) .ins-win.ins-app { padding: 22px 14px 28px; } :where(.mc-glass) .ins-pgrid .pg-stats { gap: 8px; } :where(.mc-glass) .ins-win.ins-duo { padding: 22px 12px 20px; } } } :where(.mc-glass) .ins-win .q-figcap > span + span { margin-left: 0; } :where(.mc-glass) .ins-rc .rc-front { hyphens: manual; } /* Question reader · tutor + exam (Glass v2, round 3 §C). Loaded after pages-core.css on question-tutor.html and question-exam.html. Overrides the shared q-* / x-* rules for the reader only. Opaque reading surfaces; glass only on the capsule, pills, dock, navigator and the findings pill. */ @layer glass.page { /* ───────── Session capsule: live segments + rolling count ───────── */ :where(.mc-glass) .q-capsule .count { display: inline-block; height: 1.15em; overflow: hidden; } :where(.mc-glass) .q-capsule .roll { display: grid; transition: translate 260ms var(--g-spring-smooth); } :where(.mc-glass) .q-capsule .roll > span { display: block; height: 1.15em; line-height: 1.15; } :where(.mc-glass) .q-capsule .roll.next { translate: 0 -50%; } :where(.mc-glass) .q-capsule .bar { display: grid; grid-template-columns: repeat(var(--n, 20), minmax(0, 1fr)); gap: 1px; width: 84px; height: 8px; border-radius: 0; overflow: visible; background: none; } :where(.mc-glass) .q-capsule .bar[data-dense] { gap: 0; width: 96px; } :where(.mc-glass) .q-capsule .bar i { position: relative; display: block; width: auto; height: 100%; border-radius: 1.5px; overflow: hidden; background: var(--g-fill); } :where(.mc-glass) .q-capsule .bar[data-dense] i { border-radius: 0; } :where(.mc-glass) .q-capsule .bar i.done { background: var(--g-label); } :where(.mc-glass) .q-capsule .bar i.cur { background: color-mix(in srgb, var(--g-tint) 32%, transparent); } :where(.mc-glass) .q-capsule .bar i.cur::after { content: ""; position: absolute; inset: 0; background: var(--g-tint); transform-origin: 0 50%; scale: 0 1; transition: scale 380ms var(--g-spring-smooth); } :where(.mc-glass) .q-capsule .bar i.cur.is-in::after { scale: 1 1; } /* ───────── Navigator ───────── */ :where(.mc-glass) .q-nav-fig { border-radius: 16px; background: rgb(var(--g-glass-rgb) / .5); margin-bottom: 12px; } :where(.mc-glass) .q-nav-fig img { width: 64px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--g-stage); } :where(.mc-glass) .q-nav-grid a[data-s="correct"] { background: var(--g-correct-soft); color: var(--g-correct); } :where(.mc-glass) .q-nav-grid a[data-s="wrong"] { background: var(--g-wrong-soft); color: var(--g-wrong); } :where(.mc-glass) .q-nav-grid a[data-s="correct"]::before, :where(.mc-glass) .q-nav-grid a[data-s="wrong"]::before { content: ""; position: absolute; bottom: 5px; left: 50%; translate: -50% 0; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } :where(.mc-glass) .q-nav-grid a[aria-current="true"][data-s] { box-shadow: inset 0 0 0 2px var(--g-tint); } :where(.mc-glass) .q-legend i[data-k="correct"] { background: var(--g-correct); } :where(.mc-glass) .q-legend i[data-k="wrong"] { background: var(--g-wrong); } :where(.mc-glass) .q-legend i[data-k="current"] { background: var(--g-tint); } :where(.mc-glass) .q-legend i[data-k="flag"] { background: var(--g-orange); } :where(.mc-glass) .q-legend i[data-k="answered"] { background: var(--g-label); } :where(.mc-glass) .q-legend-end { margin-left: auto; } /* ───────── Film column ───────── */ :where(.mc-glass) { --stage-h: min(calc(100dvh - 160px), 760px); } :where(.mc-glass) .q-stage, :where(.mc-glass) .q-body.wide-fig .q-stage { position: relative; display: block; height: auto; aspect-ratio: var(--fig-ar, 1); max-height: var(--stage-h); width: min(100%, calc(var(--stage-h) * var(--fig-ar, 1))); margin-inline: auto; border-radius: var(--g-r-card); background: var(--g-stage); overflow: hidden; cursor: auto; } :where(.mc-glass) .q-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--g-stage-dim), transparent 55%); opacity: 0; transition: opacity var(--g-d-base) linear; } :where(.mc-glass) .q-stage.is-finding::before { opacity: 1; } :where(.mc-glass) .q-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--g-tint); opacity: 0; } :where(.mc-glass) .q-stage.is-ref::after { animation: q-ring 1100ms linear; } @keyframes q-ring { 0%, 55% { opacity: 1; } 100% { opacity: 0; } } :where(.mc-glass) .q-zoom { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; } :where(.mc-glass) .q-zoom:focus-visible { outline-offset: -3px; border-radius: inherit; } :where(.mc-glass) .q-zoom img { width: 100%; height: 100%; object-fit: contain; transition: opacity var(--g-d-base) linear; } :where(.mc-glass) .q-stage.is-finding .q-zoom img { opacity: .55; } :where(.mc-glass) .q-stage .hint { z-index: 2; } :where(.mc-glass) .q-find { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 130px); height: 34px; padding: 0 14px 0 12px; border: 0; border-radius: var(--g-r-capsule); color: var(--g-label); cursor: pointer; font: 600 13px/1 var(--g-font); white-space: nowrap; animation: q-up var(--g-d-move) var(--g-spring-smooth) backwards; } :where(.mc-glass) .q-find[hidden] { display: none; } :where(.mc-glass) .q-find span { overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } :where(.mc-glass) .q-find[aria-pressed="true"] { color: var(--g-tint); } :where(.mc-glass) .q-find-text { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 62px; margin: 0; color: var(--g-tint-on); text-wrap: balance; pointer-events: none; opacity: 0; transition: opacity var(--g-d-base) linear; } :where(.mc-glass) .q-stage.is-finding .q-find-text { opacity: 1; } :where(.mc-glass) .q-figcap { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 .5em; margin: 10px 4px 0; } :where(.mc-glass) .q-figcap #capF:not([hidden]) { color: var(--g-label); font-weight: 600; } :where(.mc-glass) .q-figcap #capF:not([hidden])::before { content: "\00B7\00A0"; color: var(--g-label-2); font-weight: 400; } :where(.mc-glass) .q-figcap [hidden] { display: none; } /* ───────── Reading column ───────── */ :where(.mc-glass) .q-meta { margin-bottom: 14px; } :where(.mc-glass) .q-mono { font-family: var(--g-mono); } :where(.mc-glass) .q-vitals-wrap { margin: 0 0 20px; } :where(.mc-glass) .q-vitals-wrap[hidden] { display: none; } :where(.mc-glass) .q-vitals-wrap > p { margin: 0 0 8px; } :where(.mc-glass) .q-vitals { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; } :where(.mc-glass) .q-vitals > div { position: relative; min-width: 0; padding: 10px 12px 11px 14px; border-radius: var(--g-r-cell); background: var(--g-bg-2); } :where(.mc-glass) .q-vitals > div[data-abn]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: var(--g-vital-rule); border-radius: 2px; background: var(--g-tint); } :where(.mc-glass) .q-vitals dt { margin: 0 0 3px; font: 600 calc(var(--g-t-caption) * var(--g-scale))/1.3 var(--g-font); text-transform: uppercase; letter-spacing: .06em; color: var(--g-label-2); white-space: nowrap; } :where(.mc-glass) .q-vitals dd { margin: 0; font: 600 calc(var(--g-t-title3) * var(--g-scale))/1.2 var(--g-font-display); letter-spacing: -.017em; font-variant-numeric: tabular-nums; color: var(--g-label); } :where(.mc-glass) .q-vitals dd.t { font-size: calc(17px * var(--g-scale)); line-height: 1.3; padding-top: 1px; white-space: nowrap; } :where(.mc-glass) .q-vitals dd small { display: block; margin-top: 1px; font: 400 calc(var(--g-t-footnote) * var(--g-scale))/1.3 var(--g-font); letter-spacing: 0; color: var(--g-label-2); white-space: nowrap; } :where(.mc-glass) .q-stem { max-width: 62ch; margin: 0; font: 400 calc(17px * var(--g-scale))/1.5 var(--g-font); letter-spacing: -.012em; color: var(--g-label); text-wrap: pretty; } :where(.mc-glass) .q-stem-fig { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--g-d-fast) linear; } :where(.mc-glass) .q-stem-fig:hover, :where(.mc-glass) .q-stem-fig:focus-visible { text-decoration-color: var(--g-tint); } :where(.mc-glass) .q-lead { margin: 20px 0 12px; font: 600 calc(var(--g-t-title3) * var(--g-scale))/1.3 var(--g-font-display); letter-spacing: -.01em; text-wrap: balance; } /* Options */ :where(.mc-glass) .q-opt { isolation: isolate; } :where(.mc-glass) .q-opt::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; } :where(.mc-glass) .q-opt:focus-visible { outline: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--g-tint); } :where(.mc-glass) .q-opt[aria-pressed="true"] .L { animation: q-letter var(--g-d-base) var(--g-spring-bouncy); } @keyframes q-letter { from { scale: .9; } } :where(.mc-glass) .q-opt[data-outcome] { background: transparent; } :where(.mc-glass) .q-opt[data-outcome] .L { animation: q-pop 380ms var(--g-spring-bouncy); } :where(.mc-glass) .q-opt[data-outcome="correct"]::after { opacity: 1; background: var(--g-correct-soft); animation: q-wipe 420ms var(--g-spring-smooth) backwards; } :where(.mc-glass) .q-opt[data-outcome="wrong"]::after { opacity: 1; background: var(--g-wrong-soft); animation: q-fade 180ms linear backwards; } @keyframes q-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } } @keyframes q-fade { from { opacity: 0; } } :where(.mc-glass) .q-opt[data-outcome] .tag .g-ic { animation: q-pop var(--g-d-base) var(--g-spring-bouncy) 40ms backwards; } @keyframes q-up { from { opacity: 0; translate: 0 12px; } } /* Confidence */ :where(.mc-glass) .q-confidence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; animation: q-up var(--g-d-move) var(--g-spring-smooth) backwards; } :where(.mc-glass) .q-confidence[hidden] { display: none; } :where(.mc-glass) .q-confidence > .g-footnote { font-size: calc(var(--g-t-subhead) * var(--g-scale)); } :where(.mc-glass) .q-confidence .g-seg button { display: grid; place-items: center; min-height: 36px; } :where(.mc-glass) .q-opt-tag { margin-left: 4px; color: var(--g-label-2); } :where(.mc-glass) .q-tools { margin-top: 18px; } /* ───────── Explanation, inline on every size ───────── */ :where(.mc-glass) .x-inline { margin-top: 20px; padding: 0 24px; border-radius: var(--g-r-card); background: var(--g-bg-2); scroll-margin-top: 88px; } :where(.mc-glass) .x-inline[hidden] { display: none; } :where(.mc-glass) .x-inline > .x-block { animation: q-up var(--g-d-reveal) var(--g-spring-smooth) backwards; animation-delay: calc(var(--i, 0) * 70ms); } :where(.mc-glass) .x-inline > .x-block:first-child { border-top: 0; } :where(.mc-glass) .x-block { padding: 20px 0; border-top: .5px solid var(--g-sep); } :where(.mc-glass) .x-label { margin: 0 0 10px; font: 600 calc(var(--g-t-caption) * var(--g-scale))/1.3 var(--g-font); text-transform: uppercase; letter-spacing: .06em; color: var(--g-label-2); } :where(.mc-glass) .x-verdict { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--g-label); font: 700 calc(var(--g-t-title2) * var(--g-scale))/1.2 var(--g-font-display); letter-spacing: -.018em; } :where(.mc-glass) .x-verdict:focus { outline: 0; } :where(.mc-glass) .x-verdict[data-ok="true"], :where(.mc-glass) .x-verdict[data-ok="false"] { color: var(--g-label); } :where(.mc-glass) .x-verdict .g-ic { flex: none; width: 28px; height: 28px; stroke-width: 2.1; } :where(.mc-glass) .x-verdict[data-ok="true"] .g-ic { color: var(--g-correct); } :where(.mc-glass) .x-verdict[data-ok="false"] .g-ic { color: var(--g-wrong); } :where(.mc-glass) .x-answer { margin: 6px 0 0; font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.4; color: var(--g-label-2); } :where(.mc-glass) .x-key { margin: 0; padding-left: 14px; border-left: 3px solid var(--g-tint); font: 600 calc(var(--g-t-headline) * var(--g-scale))/1.4 var(--g-font); letter-spacing: -.02em; text-wrap: pretty; max-width: 62ch; } :where(.mc-glass) .x-why { margin: 0; max-width: 62ch; font-size: calc(var(--g-t-body) * var(--g-scale)); line-height: 1.55; letter-spacing: -.012em; text-wrap: pretty; } :where(.mc-glass) .x-block .g-btn { margin-top: 14px; } :where(.mc-glass) .x-others { margin-top: -6px; } :where(.mc-glass) .x-others summary { grid-template-columns: 26px minmax(0, 1fr) 16px; padding: 12px 0; line-height: 1.4; } :where(.mc-glass) .x-others summary .st { min-width: 0; } :where(.mc-glass) .x-others .you { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--g-r-capsule); background: var(--g-wrong-soft); color: var(--g-wrong); font: 600 calc(var(--g-t-footnote) * var(--g-scale))/1.4 var(--g-font); vertical-align: 1px; white-space: nowrap; } :where(.mc-glass) .x-others details:has(.you) .L { background: var(--g-wrong-soft); color: var(--g-wrong); } :where(.mc-glass) .x-others details p { margin: 0 0 14px 36px; max-width: 58ch; text-wrap: pretty; } :where(.mc-glass) .x-keep { padding-bottom: 22px; } :where(.mc-glass) .x-keep .g-btn { margin-top: 0; } :where(.mc-glass) .x-keep-row { display: flex; flex-wrap: wrap; gap: 8px; } /* Recall card preview menu */ :where(.mc-glass) .q-recall-menu.g-menu { width: 300px; max-width: calc(100vw - 20px); } :where(.mc-glass) .q-rc { margin: 2px 6px 8px; padding: 12px 14px 14px; border-radius: 12px; background: var(--g-fill-4); } :where(.mc-glass) .q-rc p { margin: 0; } :where(.mc-glass) .q-rc-side { font: 600 calc(var(--g-t-caption) * var(--g-scale))/1.3 var(--g-font); text-transform: uppercase; letter-spacing: .06em; color: var(--g-label-2); margin-bottom: 3px !important; } :where(.mc-glass) .q-rc-front { margin-bottom: 12px !important; font: 600 calc(var(--g-t-headline) * var(--g-scale))/1.3 var(--g-font); letter-spacing: -.02em; } :where(.mc-glass) .q-rc-back { font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.45; color: var(--g-label); } /* ───────── Dock ───────── */ :where(.mc-glass) .q-dock .dk-ans { display: none; } :where(.mc-glass) .q-dock[data-mode="answered"] .dk-check { display: none; } :where(.mc-glass) .q-dock[data-mode="answered"] .dk-ans { display: inline-flex; animation: q-up var(--g-d-move) var(--g-spring) backwards; } :where(.mc-glass) .q-dock .g-btn-filled.dk-ans { min-width: 160px; } :where(.mc-glass) .q-dock .dk-check:disabled { background: var(--g-fill-3); color: var(--g-label-2); opacity: 1; } /* ───────── Exam ───────── */ :where(.mc-glass) .q-body[data-exam] .q-stem { margin-top: 0; } /* ───────── Embed (home hero iframe): no chrome, no motion, no scroll ───────── */ html:has(body.q-embed) { overflow: hidden; } :where(.mc-glass).q-embed .q-dock, :where(.mc-glass).q-embed .q-top .trail, :where(.mc-glass).q-embed .mstudio { display: none; } :where(.mc-glass).q-embed *, :where(.mc-glass).q-embed *::before, :where(.mc-glass).q-embed *::after { animation: none !important; } /* Compact so film, stem and all five options sit inside 1440x900 */ :where(.mc-glass).q-embed .q-meta, :where(.mc-glass).q-embed .q-vitals-wrap > p, :where(.mc-glass).q-embed .q-tools, :where(.mc-glass).q-embed .x-inline { display: none; } :where(.mc-glass).q-embed .q-vitals-wrap { margin-bottom: 14px; } :where(.mc-glass).q-embed .q-vitals > div { padding-block: 7px 8px; } :where(.mc-glass).q-embed .q-vitals dd { font-size: 18px; } :where(.mc-glass).q-embed .q-stem { font-size: 16px; line-height: 1.45; } :where(.mc-glass).q-embed .q-lead { margin: 14px 0 10px; font-size: 18px; } :where(.mc-glass).q-embed .q-opt { padding-block: 10px; } :where(.mc-glass).q-embed .q-body { padding-top: 10px; } /* ───────── Wide ───────── */ @media (min-width: 1024px) { :where(.mc-glass) .q-stem { font-size: calc(18px * var(--g-scale)); line-height: 1.55; } } /* ───────── Phone and tablet: one column, film first ───────── */ @media (max-width: 1099px) { :where(.mc-glass) { --stage-h: 56svh; } :where(.mc-glass) .q-stage, :where(.mc-glass) .q-body.wide-fig .q-stage { height: auto; aspect-ratio: var(--fig-ar, 1); max-height: var(--stage-h); border-radius: var(--g-r-card); } :where(.mc-glass) .q-fig { scroll-margin-top: 64px; } :where(.mc-glass) .q-read { width: 100%; box-sizing: border-box; } :where(.mc-glass) .q-capsule .bar { width: 64px; } :where(.mc-glass) .q-capsule .bar[data-dense] { width: 64px; } :where(.mc-glass) .x-inline { scroll-margin-top: 96px; } } @media (min-width: 641px) and (max-width: 1099px) { :where(.mc-glass) .q-dock { left: 50%; right: auto; translate: -50% 0; justify-content: center; } :where(.mc-glass) .q-dock.gone { translate: -50% 24px; } :where(.mc-glass) .q-dock .g-btn-filled { flex: 0 1 auto; width: 320px; max-width: 320px; min-width: 160px; } } @media (max-width: 699px) { :where(.mc-glass).q-embed .q-top { display: none; } } @media (max-width: 640px) { :where(.mc-glass) { --stage-h: 46svh; } :where(.mc-glass) .q-figcap #capF:not([hidden]) { flex-basis: 100%; } :where(.mc-glass) .q-figcap #capF:not([hidden])::before { content: none; } :where(.mc-glass) .q-opt { grid-template-columns: 30px minmax(0, 1fr); } :where(.mc-glass) .q-opt [data-tag]:not(:empty), :where(.mc-glass) .q-opt .tag:not(:empty) { grid-column: 2; margin-top: 4px; } :where(.mc-glass) .q-vitals { mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); } :where(.mc-glass) .q-read { display: flex; flex-direction: column; } :where(.mc-glass) .q-read > * { order: 1; } :where(.mc-glass) .q-read > .q-vitals-wrap { order: 0; } :where(.mc-glass) .q-vitals { display: flex; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; } :where(.mc-glass) .q-vitals::-webkit-scrollbar { display: none; } :where(.mc-glass) .q-vitals > div { flex: none; min-width: 112px; scroll-snap-align: start; } :where(.mc-glass) .q-confidence .g-seg { width: 100%; } :where(.mc-glass) .x-inline { padding: 0 18px; } :where(.mc-glass) .q-find-text { left: 16px; right: 16px; } :where(.mc-glass) .q-stage:has(.q-find:not([hidden])) .hint-t { display: none; } :where(.mc-glass) .q-stage .hint { padding: 0 10px; } :where(.mc-glass) .q-find { max-width: calc(100% - 70px); } :where(.mc-glass) .q-nav-grid { gap: 5px; } } @media (max-width: 440px) { :where(.mc-glass) .q-capsule .bar, :where(.mc-glass) .q-capsule .bar[data-dense] { width: 52px; } } @media (max-width: 360px) { :where(.mc-glass) .q-capsule .bar, :where(.mc-glass) .q-capsule .bar[data-dense] { display: none; } } @media (prefers-reduced-motion: reduce) { :where(.mc-glass) .q-capsule .roll, :where(.mc-glass) .q-capsule .bar i.cur::after { transition: none; } } } /* ═════════ Reader layout v3 — chart layout: film + observations on the left, narrative + decision on the right ═════════ */ @layer glass.page { :where(.mc-glass) .q-eyebrow { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0 0 12px; font: 600 calc(13px * var(--g-scale))/1.3 var(--g-font); letter-spacing: -.005em; color: var(--g-label-2); } :where(.mc-glass) .q-eyebrow span:first-child { color: var(--g-tint); } :where(.mc-glass) .q-eyebrow span + span::before { content: "·"; margin-right: 8px; color: var(--g-label-3); } :where(.mc-glass) .q-panel-h { margin: 0 0 7px 16px; font: 400 calc(13px * var(--g-scale))/1.3 var(--g-font); text-transform: uppercase; letter-spacing: .02em; color: var(--g-label-2); } :where(.mc-glass) .q-vitals dt .l { display: none; } :where(.mc-glass) .q-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 16px 0; font: 400 calc(13px * var(--g-scale))/1.4 var(--g-font); } :where(.mc-glass) .q-facts div { display: flex; gap: 6px; } :where(.mc-glass) .q-facts dt { color: var(--g-label-2); } :where(.mc-glass) .q-facts dd { margin: 0; color: var(--g-label); } :where(.mc-glass) .q-lead { margin: 30px 0 14px; font-size: calc(var(--g-t-title2) * var(--g-scale)); line-height: 1.28; letter-spacing: -.015em; } :where(.mc-glass) .q-opt { padding: 15px 18px; } /* Observations as an inset grouped list (Health-style) from tablet up */ @media (min-width: 641px) { :where(.mc-glass) .q-panel { margin-top: 20px; } :where(.mc-glass) .q-panel .q-vitals { display: block; background: var(--g-bg-2); border-radius: var(--g-r-cell); overflow: hidden; } :where(.mc-glass) .q-panel .q-vitals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 44px; box-sizing: border-box; padding: 11px 16px; border-radius: 0; background: none; } :where(.mc-glass) .q-panel .q-vitals > div + div { box-shadow: inset 16px .5px 0 var(--g-bg-2), inset 0 .5px 0 var(--g-sep); } :where(.mc-glass) .q-panel .q-vitals > div[data-abn]::before { content: none; } :where(.mc-glass) .q-panel .q-vitals dt { margin: 0; font: 400 calc(15px * var(--g-scale))/1.3 var(--g-font); text-transform: none; letter-spacing: -.01em; color: var(--g-label); } :where(.mc-glass) .q-panel .q-vitals dt .s { display: none; } :where(.mc-glass) .q-panel .q-vitals dt .l { display: inline; } :where(.mc-glass) .q-panel .q-vitals dd, :where(.mc-glass) .q-panel .q-vitals dd.t { display: flex; align-items: baseline; gap: 5px; padding: 0; font: 600 calc(17px * var(--g-scale))/1.3 var(--g-font); letter-spacing: -.01em; white-space: nowrap; } :where(.mc-glass) .q-panel .q-vitals dd.t { font-weight: 400; color: var(--g-label-2); } :where(.mc-glass) .q-panel .q-vitals dd small { display: inline; margin: 0; font-size: calc(13px * var(--g-scale)); } :where(.mc-glass) .q-panel .q-vitals > div[data-abn] dd::before { content: ""; align-self: center; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: var(--g-tint); } } /* Desktop: a centred two-column chart; the left column is a sticky panel sized to the viewport */ @media (min-width: 1100px) { :where(.mc-glass) { --stage-h: clamp(300px, calc(100dvh - 430px), 600px); } :where(.mc-glass) .q-body { max-width: 1200px; grid-template-columns: minmax(0, 540px) minmax(0, 620px); justify-content: center; gap: 56px; padding-top: 18px; } :where(.mc-glass) .q-fig { top: 72px; width: min(100%, calc(var(--stage-h) * var(--fig-ar, 1))); justify-self: end; } :where(.mc-glass) .q-stage { width: 100%; max-height: none; margin-inline: 0; } :where(.mc-glass) .q-read { max-width: 620px; padding-top: 2px; } :where(.mc-glass) .q-stem { font-size: calc(18px * var(--g-scale)); line-height: 1.62; letter-spacing: -.014em; } } /* Tablet: panel sits under the film at reading width */ @media (min-width: 641px) and (max-width: 1099px) { :where(.mc-glass) .q-panel { max-width: 720px; margin-inline: auto; padding: 0 4px; } } /* Phone: compact strip of observations */ @media (max-width: 640px) { :where(.mc-glass) .q-panel { margin: 16px 0 0; } :where(.mc-glass) .q-panel .q-vitals { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; } :where(.mc-glass) .q-panel-h { margin-left: 4px; } :where(.mc-glass) .q-facts { display: none; } :where(.mc-glass) .q-read { padding-top: 22px; } } /* Embed (home hero) */ :where(.mc-glass).q-embed .q-facts { display: none; } :where(.mc-glass).q-embed .q-panel { margin-top: 14px; } :where(.mc-glass).q-embed .q-panel .q-vitals > div { min-height: 38px; padding-block: 8px; } } @layer glass.page { :where(.mc-glass) .g-menu .q-m-only { display: none; } @media (max-width: 640px) { :where(.mc-glass) .q-top [data-wide] { display: none; } :where(.mc-glass) .g-menu .q-m-only { display: flex; } } } @layer glass.page { /* Tablet: caption and panel share the film's width */ @media (min-width: 641px) and (max-width: 1099px) { :where(.mc-glass) .q-panel, :where(.mc-glass) .q-figcap { max-width: min(100%, calc(var(--stage-h) * var(--fig-ar, 1))); margin-inline: auto; box-sizing: border-box; } :where(.mc-glass) .q-figcap { padding-inline: 4px; } } /* Phone: one continuous strip in the list's language, not separate boxes */ @media (max-width: 640px) { :where(.mc-glass) .q-panel .q-vitals { display: flex; gap: 0; margin-inline: 0; padding-inline: 0; background: var(--g-bg-2); border-radius: var(--g-r-cell); } :where(.mc-glass) .q-panel .q-vitals > div { flex: none; min-width: 0; padding: 10px 16px 11px; border-radius: 0; background: none; } :where(.mc-glass) .q-panel .q-vitals > div + div { box-shadow: inset .5px 0 0 var(--g-sep); } :where(.mc-glass) .q-panel .q-vitals > div[data-abn]::before { content: none; } :where(.mc-glass) .q-panel .q-vitals dt { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; } :where(.mc-glass) .q-panel .q-vitals dd { display: flex; align-items: center; gap: 6px; font-size: 20px; } :where(.mc-glass) .q-panel .q-vitals dd small { display: none; } :where(.mc-glass) .q-panel .q-vitals > div[data-abn] dd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-tint); } } } /* ── Hero: static product window ───────────────────────────────── */ @layer glass.page { :where(.mc-glass) .h-screen { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; transform-origin: 0 0; background: var(--g-bg); pointer-events: none; overflow: hidden; } :where(.mc-glass) .h-win { padding: 0; height: 100%; background: var(--g-bg); } :where(.mc-glass) .h-win .q-top { padding-top: 18px; } :where(.mc-glass) .h-win .ins-qgrid { width: min(1200px, 100%); margin: 0 auto; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 56px; padding: 14px 24px 0; } :where(.mc-glass) .h-win .q-stage { --stage-h: 540px; } :where(.mc-glass) .h-win .q-stem { font-size: 16px; line-height: 1.5; } :where(.mc-glass) .h-win .q-lead { margin: 14px 0 10px; font-size: 18px; } :where(.mc-glass) .h-win .q-opt { padding-block: 10px; } :where(.mc-glass) .h-win .q-panel { margin-top: 14px; } :where(.mc-glass) .h-win .q-opt .L { animation: none; } @media (max-width: 700px) { :where(.mc-glass) .h-screen { position: relative; width: 100%; height: 100%; overflow: hidden; } :where(.mc-glass) .h-win .ins-qgrid { grid-template-columns: minmax(0, 1fr); padding: 6px 14px 0; gap: 14px; } :where(.mc-glass) .h-win .q-top { padding-top: 12px; } :where(.mc-glass) .h-win .q-stage { --stage-h: 220px; } } } @layer glass.page { :where(html:not(.m-on)) :where(.mc-glass) .h-device-in { position: absolute; inset: 0; border-radius: inherit; } :where(.mc-glass) .h-screen { text-align: left; } }