/* Medcue Glass · Inside Medcue scenes: reconstructions of the app screens. Port of prototype pages-core (without marketing home), pages-review, pages-together, pages-study, pages-account, pages-inside, pages-question. */ /* MEDCUE GLASS · page layer for the golden screens (Opus). Port target: public/css/glass-today.css, glass-question.css, marketing via src/public-site. */ @layer glass.page { /* ── Today ───────────────────────────────────────────────────────── */ :where(.mc-glass) .t-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { :where(.mc-glass) .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { :where(.mc-glass) .t-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } :where(.mc-glass) .t-span2 { grid-column: span 1; } @media (min-width: 720px) { :where(.mc-glass) .t-span2 { grid-column: span 2; } } :where(.mc-glass) .t-full { grid-column: 1 / -1; } :where(.mc-glass) .t-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: stretch; padding: 18px; } :where(.mc-glass) .t-next-fig { width: 148px; aspect-ratio: 1; border-radius: 14px; background: var(--g-stage); overflow: hidden; } :where(.mc-glass) .t-next-fig img { width: 100%; height: 100%; object-fit: cover; } :where(.mc-glass) .t-next-main { display: grid; align-content: start; gap: 6px; min-width: 0; } :where(.mc-glass) .t-next-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; } :where(.mc-glass) .t-next .g-progress { margin-top: 8px; max-width: 360px; } @media (max-width: 560px) { :where(.mc-glass) .t-next { grid-template-columns: minmax(0, 1fr); } :where(.mc-glass) .t-next-fig { width: 100%; aspect-ratio: 16 / 9; order: -1; } } :where(.mc-glass) .t-widget { display: grid; align-content: space-between; gap: 14px; min-height: 168px; } :where(.mc-glass) .t-widget .g-metric { font-size: 40px; } :where(.mc-glass) .t-widget-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } :where(.mc-glass) .t-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--g-orange); color: #fff; cursor: pointer; position: relative; } :where(.mc-glass) .t-play .g-ic { width: 18px; height: 18px; } :where(.mc-glass) .t-play svg.ring { position: absolute; inset: -4px; width: 52px; height: 52px; transform: rotate(-90deg); } :where(.mc-glass) .t-play svg.ring circle { fill: none; stroke: var(--g-orange); stroke-width: 2.5; stroke-dasharray: 150.8; stroke-dashoffset: var(--off, 150.8); stroke-linecap: round; transition: stroke-dashoffset .25s linear; } :where(.mc-glass) .t-week { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 900px) { :where(.mc-glass) .t-week { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } } :where(.mc-glass) .t-insight { display: grid; gap: 10px; padding-left: 0; } @media (min-width: 900px) { :where(.mc-glass) .t-insight { padding-left: 20px; border-left: .5px solid var(--g-sep); } } :where(.mc-glass) .t-insight p.g-headline { font-weight: 600; } :where(.mc-glass) .t-sys-ring { --size: 30px; --w: 3.5px; flex: none; } :where(.mc-glass) .t-first { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; padding: 0; } @media (min-width: 900px) { :where(.mc-glass) .t-first { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } } :where(.mc-glass) .t-first-fig { background: var(--g-stage); min-height: 240px; display: grid; place-items: center; } :where(.mc-glass) .t-first-fig img { width: 100%; height: 100%; max-height: 360px; object-fit: contain; } :where(.mc-glass) .t-first-copy { padding: 26px; display: grid; align-content: center; gap: 10px; } :where(.mc-glass) .t-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--g-label-2); font-size: calc(var(--g-t-subhead) * var(--g-scale)); } :where(.mc-glass) .t-facts span { display: inline-flex; align-items: center; gap: 6px; } :where(.mc-glass) .t-facts .g-ic { width: 16px; height: 16px; stroke-width: 2; } :where(.mc-glass) .t-stepper { display: inline-flex; align-items: center; border-radius: 9px; background: var(--g-fill-3); } :where(.mc-glass) .t-stepper button { width: 46px; height: 32px; border: 0; background: transparent; color: var(--g-label); font: 400 22px/1 var(--g-font); cursor: pointer; } :where(.mc-glass) .t-stepper button + button { box-shadow: inset 1px 0 0 var(--g-sep); } :where(.mc-glass) .t-done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px; } :where(.mc-glass) .t-done .g-gauge { --size: 72px; --w: 9px; --bar: var(--g-green); } /* ── 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 · Review batch: hub, Recall, Gotchas, Saved, Learning points, History. Every rule lives in @layer glass.page and is scoped :where(.mc-glass). Tokens only. */ @layer glass.page { /* ── Shared ──────────────────────────────────────────────────────── */ :where(.mc-glass) .rv-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; } :where(.mc-glass) .rv-plainlink, :where(.mc-glass) .rv-plainlink:hover, :where(.mc-glass) .hs-plain, :where(.mc-glass) .hs-plain:hover { color: inherit; text-decoration: none; } :where(.mc-glass) .rv-hero, :where(.mc-glass) .rc-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; } @media (min-width: 760px) { :where(.mc-glass) .rv-hero, :where(.mc-glass) .rc-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; } } :where(.mc-glass) .rv-hero-main, :where(.mc-glass) .rc-hero-main { display: grid; gap: 8px; align-content: start; min-width: 0; } :where(.mc-glass) .rv-due, :where(.mc-glass) .rc-count { font-size: 56px; margin-top: 6px; } :where(.mc-glass) .rv-next { display: grid; gap: 6px; align-content: center; padding: 18px; border-radius: 14px; background: var(--g-bg-3); min-width: 0; } :where(.mc-glass) .rv-listen { display: flex; align-items: center; gap: 14px; margin-top: 12px; } :where(.mc-glass) .rv-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; margin-top: 28px; } @media (min-width: 900px) { :where(.mc-glass) .rv-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } :where(.mc-glass) .rv-cols > .g-section + .g-section { margin-top: 0; } } :where(.mc-glass) .gt-lock, :where(.mc-glass) .rc-lock { color: var(--g-label-2); } :where(.mc-glass) .gt-check { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; flex: none; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 1.5px var(--g-fill); transition: background-color var(--g-d-fast) linear, box-shadow var(--g-d-fast) linear; } :where(.mc-glass) .gt-check { position: relative; } :where(.mc-glass) .gt-check:checked { background: var(--g-tint); box-shadow: none; } :where(.mc-glass) .gt-check:checked::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; rotate: 45deg; } :where(.mc-glass) .gt-check:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: 2px; } :where(.mc-glass) .gt-chips-row, :where(.mc-glass) .gt-mods-chips, :where(.mc-glass) .sv-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--g-gutter) * -1); padding: 2px var(--g-gutter); } :where(.mc-glass) .gt-mods-chips::-webkit-scrollbar, :where(.mc-glass) .sv-chips::-webkit-scrollbar { display: none; } :where(.mc-glass) .gt-chip, :where(.mc-glass) .sv-chip { flex: none; height: 36px; padding: 0 14px; border: 0; cursor: pointer; background: var(--g-bg-2); font-size: calc(var(--g-t-subhead) * var(--g-scale)); font-weight: 500; } :where(.mc-glass) .gt-chip[aria-current="true"], :where(.mc-glass) .sv-chip[aria-current="true"] { background: var(--g-fill-3); color: var(--g-tint); font-weight: 600; } :where(.mc-glass) .sv-chip .g-footnote { color: var(--g-label-2); } :where(.mc-glass) .sv-chip[aria-current="true"] .g-footnote { color: var(--g-tint); } :where(.mc-glass) :is(.gt-mod, .sv-side .g-cell)[aria-current="true"] { background: var(--g-fill-3); } :where(.mc-glass) :is(.gt-mod, .sv-side .g-cell)[aria-current="true"] .g-cell-title { color: var(--g-tint); font-weight: 600; } :where(.mc-glass) .sv-new .g-cell-title { color: var(--g-tint); } /* ── Recall: deck ────────────────────────────────────────────────── */ :where(.mc-glass) .rc-free { margin-bottom: 16px; } :where(.mc-glass) .rc-modebar { margin: 2px 0 16px; } :where(.mc-glass) .rc-modebar .g-seg { width: 100%; } @media (min-width: 720px) { :where(.mc-glass) .rc-modebar .g-seg { width: 420px; } } :where(.mc-glass) .rc-decks { margin-top: 28px; } :where(.mc-glass) .rc-browse { display: grid; gap: 12px; } :where(.mc-glass) .rc-select { width: auto; min-height: 34px; padding: 4px 10px; max-width: 58%; } :where(.mc-glass) .rc-nomatch { display: grid; justify-items: center; } /* ── Recall: focus review ────────────────────────────────────────── */ :where(.mc-glass) .rc-focus { min-height: 100dvh; background: var(--g-bg); } :where(.mc-glass) .rc-cap { cursor: default; } :where(.mc-glass) .rc-cap-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--g-orange); color: #fff; } :where(.mc-glass) .rc-main { max-width: 760px; margin: 0 auto; padding: 10px 16px 190px; } :where(.mc-glass) .rc-stage { position: relative; } :where(.mc-glass) .rc-card { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: min(440px, 56dvh); padding: 20px 22px 22px; border-radius: var(--g-r-window); background: var(--g-bg-2); cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; outline-offset: 3px; transition: translate var(--g-d-move) var(--g-spring), rotate var(--g-d-move) var(--g-spring); } :where(.mc-glass) .rc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } :where(.mc-glass) .rc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 5px; } :where(.mc-glass) .rc-star { --h: 36px; flex: none; margin: -2px -6px 0 0; } :where(.mc-glass) .rc-star .g-ic { width: 20px; height: 20px; } :where(.mc-glass) .rc-front { font: 600 calc(26px * var(--g-scale)) / 1.28 var(--g-font-display); letter-spacing: -.02em; max-width: 30ch; text-wrap: balance; } :where(.mc-glass) .rc-card[data-revealed="false"] .rc-front { flex: 1; display: grid; align-content: center; } :where(.mc-glass) .rc-slot { padding: 14px 18px; border-radius: 12px; background: var(--g-fill-3); color: var(--g-label-2); font-size: calc(20px * var(--g-scale)); letter-spacing: .2em; } :where(.mc-glass) .rc-back { display: grid; gap: 18px; padding-top: 18px; border-top: .5px solid var(--g-sep); } :where(.mc-glass) .rc-answer { font: 500 calc(21px * var(--g-scale)) / 1.4 var(--g-font); letter-spacing: -.015em; max-width: 34ch; } :where(.mc-glass) .rc-audio { display: flex; align-items: center; gap: 14px; margin-top: 2px; } :where(.mc-glass) .rc-audio .g-footnote { margin-left: auto; } :where(.mc-glass) .rc-hint { text-align: center; margin-top: auto; } :where(.mc-glass) .rc-card[data-revealed="false"] .rc-hint { margin-top: 0; } :where(.mc-glass) .rc-timer { position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 2px; background: var(--g-fill-2); overflow: hidden; } :where(.mc-glass) .rc-timer i { display: block; height: 100%; width: var(--p, 100%); background: var(--g-tint); } :where(.mc-glass) .rc-swipe { position: absolute; z-index: 3; opacity: 0; padding: 8px 16px; border-radius: var(--g-r-capsule); background: var(--g-bg-elevated); color: var(--g-label); box-shadow: var(--g-glass-shadow); font: 600 calc(var(--g-t-subhead) * var(--g-scale)) / 1 var(--g-font); pointer-events: none; transition: opacity var(--g-d-fast) linear; } :where(.mc-glass) .rc-swipe[data-dir="left"] { left: 14px; top: 50%; translate: 0 -50%; } :where(.mc-glass) .rc-swipe[data-dir="right"] { right: 14px; top: 50%; translate: 0 -50%; } :where(.mc-glass) .rc-swipe[data-dir="up"] { top: 14px; left: 50%; translate: -50% 0; } :where(.mc-glass) .rc-swipe[data-dir="down"] { bottom: 14px; left: 50%; translate: -50% 0; } :where(.mc-glass) .rc-stage[data-swipe="left"] .rc-swipe[data-dir="left"], :where(.mc-glass) .rc-stage[data-swipe="right"] .rc-swipe[data-dir="right"], :where(.mc-glass) .rc-stage[data-swipe="up"] .rc-swipe[data-dir="up"], :where(.mc-glass) .rc-stage[data-swipe="down"] .rc-swipe[data-dir="down"] { opacity: 1; } :where(.mc-glass) .rc-dock .rc-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex: 1; } @media (min-width: 1100px) { :where(.mc-glass) .rc-dock .rc-grades { width: 460px; } } :where(.mc-glass) .rc-grade { --h: 56px; flex-direction: column; gap: 3px; padding: 0 6px; color: var(--g-label); background: transparent; } :where(.mc-glass) .rc-grade span { font-size: calc(var(--g-t-body) * var(--g-scale)); font-weight: 600; line-height: 1; } :where(.mc-glass) .rc-grade small { font: 400 13px / 1 var(--g-font); color: var(--g-label-2); letter-spacing: 0; } :where(.mc-glass) .rc-done { max-width: 480px; margin: 0 auto; padding: 48px 20px 120px; display: grid; justify-items: center; text-align: center; gap: 10px; } :where(.mc-glass) .rc-done-ic { width: 64px; height: 64px; stroke-width: 1.4; color: var(--g-green); margin-bottom: 6px; } :where(.mc-glass) .rc-done-list { width: 100%; margin-top: 20px; text-align: left; } :where(.mc-glass) .rc-done-actions { justify-content: center; margin-top: 22px; } /* ── Gotchas ─────────────────────────────────────────────────────── */ :where(.mc-glass) .gt-free { margin-bottom: 16px; } :where(.mc-glass) .gt-modebar { display: grid; gap: 10px; margin: 2px 0 18px; } :where(.mc-glass) .gt-modebar .g-seg { width: 100%; } @media (min-width: 720px) { :where(.mc-glass) .gt-modebar { display: flex; align-items: center; gap: 18px; } :where(.mc-glass) .gt-modebar .g-seg { width: 420px; } } :where(.mc-glass) .gt-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } :where(.mc-glass) .gt-mods { display: none; } :where(.mc-glass) .gt-read { background: var(--g-bg-2); border-radius: var(--g-r-card); padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; max-width: 760px; } :where(.mc-glass) .gt-read-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; } :where(.mc-glass) .gt-pager { display: inline-flex; gap: 6px; } :where(.mc-glass) .gt-title { margin-top: 2px; } :where(.mc-glass) .gt-h { display: flex; align-items: center; gap: 6px; 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: 8px 0 8px; } :where(.mc-glass) .gt-h .g-ic { color: var(--g-orange); } :where(.mc-glass) .gt-prose { font-size: calc(var(--g-t-body) * var(--g-scale)); line-height: 1.55; max-width: 68ch; } :where(.mc-glass) .gt-prose p + p { margin-top: 8px; } :where(.mc-glass) .gt-prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; } :where(.mc-glass) .gt-prose ul ul { margin-top: 6px; gap: 5px; padding-left: 18px; font-size: calc(var(--g-t-callout) * var(--g-scale)); } :where(.mc-glass) .gt-prose strong { font-weight: 600; } :where(.mc-glass) .gt-callout { background: var(--g-bg-3); border-radius: 14px; padding: 6px 18px 18px; margin-top: 6px; } :where(.mc-glass) .gt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } :where(.mc-glass) .gt-cover { display: grid; justify-items: start; gap: 8px; padding: 22px; border-radius: 14px; background: var(--g-bg-3); margin-top: 4px; } :where(.mc-glass) .gt-cover .g-btn { margin-top: 10px; } :where(.mc-glass) .gt-set-item { padding: 16px 0; border-top: .5px solid var(--g-sep); display: grid; gap: 8px; } :where(.mc-glass) .gt-set-item:first-child { border-top: 0; padding-top: 4px; } :where(.mc-glass) .gt-row { padding: 0; gap: 0; align-items: stretch; } :where(.mc-glass) .gt-row[aria-current="true"] { background: var(--g-fill-3); } :where(.mc-glass) .gt-row[aria-current="true"] .g-cell-title { color: var(--g-tint); font-weight: 600; } :where(.mc-glass) .gt-row .gt-check { align-self: center; margin-left: 16px; } :where(.mc-glass) .gt-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; align-content: center; padding: 11px 16px; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; } :where(.mc-glass) .gt-row-main:hover { background: var(--g-fill-4); } :where(.mc-glass) .gt-row-main:focus-visible { outline-offset: -3px; } :where(.mc-glass) .gt-row-main .g-cell-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 1240px) { :where(.mc-glass) .gt-layout { grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "mods read" "cards read"; grid-template-rows: auto 1fr; gap: 24px 28px; align-items: start; } :where(.mc-glass) .gt-mods { display: grid; grid-area: mods; } :where(.mc-glass) .gt-mods-chips { display: none; } :where(.mc-glass) .gt-read { grid-area: read; max-width: none; padding: 28px 30px; } :where(.mc-glass) .gt-cards { grid-area: cards; margin-top: 0; } :where(.mc-glass) .gt-layout .g-section + .g-section { margin-top: 0; } } /* ── Saved ───────────────────────────────────────────────────────── */ :where(.mc-glass) .sv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } :where(.mc-glass) .sv-side { display: none; } :where(.mc-glass) .sv-main { min-width: 0; } :where(.mc-glass) .sv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 4px 0 2px; } :where(.mc-glass) .sv-notes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 16px; padding: 16px; } @media (max-width: 680px) { :where(.mc-glass) .sv-notes { grid-template-columns: auto minmax(0, 1fr); align-items: start; } :where(.mc-glass) .sv-notes .g-btn { grid-column: 1 / -1; } } :where(.mc-glass) .sv-search { margin: 16px 0 12px; } :where(.mc-glass) .sv-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb body more" "answer answer answer" "actions actions actions"; column-gap: 14px; row-gap: 12px; align-items: start; padding: 14px 10px 14px 16px; } :where(.mc-glass) .sv-thumb { grid-area: thumb; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--g-stage); cursor: zoom-in; } :where(.mc-glass) .sv-thumb img { width: 100%; height: 100%; object-fit: cover; } :where(.mc-glass) .sv-body { grid-area: body; min-width: 0; display: grid; gap: 2px; align-content: start; padding-top: 2px; } :where(.mc-glass) .sv-more { grid-area: more; } :where(.mc-glass) .sv-answer { grid-area: answer; display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--g-bg-3); margin-right: 6px; } :where(.mc-glass) .sv-actions { grid-area: actions; display: flex; gap: 8px; margin-right: 6px; } :where(.mc-glass) .sv-actions .g-btn { flex: 1; } @media (min-width: 680px) { :where(.mc-glass) .sv-row { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "thumb body more" "thumb answer more" "thumb actions more"; row-gap: 10px; } :where(.mc-glass) .sv-thumb { width: 76px; height: 76px; } :where(.mc-glass) .sv-actions { margin-right: 0; } :where(.mc-glass) .sv-actions .g-btn { flex: none; } :where(.mc-glass) .sv-answer { margin-right: 0; } } :where(.mc-glass) .sv-empty { margin-top: 16px; } @media (min-width: 1240px) { :where(.mc-glass) .sv-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; } :where(.mc-glass) .sv-side { display: grid; position: sticky; top: 64px; } :where(.mc-glass) .sv-chips { display: none; } } /* ── Learning points ─────────────────────────────────────────────── */ :where(.mc-glass) .lp-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } :where(.mc-glass) .lp-search { grid-column: 1 / -1; } :where(.mc-glass) .lp-sys { justify-content: space-between; } :where(.mc-glass) .lp-filters .g-seg { width: 100%; } @media (min-width: 640px) { :where(.mc-glass) .lp-filters { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1100px) { :where(.mc-glass) .lp-filters { grid-template-columns: minmax(180px, 1fr) auto 270px 270px; } :where(.mc-glass) .lp-search { grid-column: auto; } } :where(.mc-glass) .lp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 16px; margin: 12px 0 6px; } :where(.mc-glass) .lp-row { align-items: flex-start; gap: 18px; padding: 14px 12px 14px 16px; } :where(.mc-glass) .lp-body { flex: 1; min-width: 0; display: grid; gap: 10px; } :where(.mc-glass) .lp-text { font-size: calc(var(--g-t-body) * var(--g-scale)); line-height: 1.45; max-width: 66ch; } :where(.mc-glass) .lp-chips { display: flex; flex-wrap: wrap; gap: 6px; } :where(.mc-glass) .lp-id { font-family: var(--g-mono); } :where(.mc-glass) .lp-return { flex: none; align-self: center; } @media (max-width: 639px) { :where(.mc-glass) .lp-row { flex-direction: column; align-items: stretch; gap: 12px; padding-right: 16px; } :where(.mc-glass) .lp-return { align-self: flex-start; } } :where(.mc-glass) .lp-empty { margin-top: 20px; } :where(.mc-glass) .lp-cap img { background: var(--g-stage); } :where(.mc-glass) .lp-opt, :where(.mc-glass) .lp-cap { cursor: default; } :where(.mc-glass) .lp-figcap { justify-content: flex-start; flex-wrap: wrap; column-gap: 0; } :where(.mc-glass) .lp-figcap #credit::before { content: "·"; margin: 0 8px; } :where(.mc-glass) .lp-point { margin-top: 0; } :where(.mc-glass) .lp-point .lp-chips { margin-top: 12px; } /* ── History ─────────────────────────────────────────────────────── */ :where(.mc-glass) .hs-un { gap: 12px; } :where(.mc-glass) .hs-un .hs-prog { margin-top: 8px; max-width: 320px; } :where(.mc-glass) .hs-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 0 6px; } @media (max-width: 559px) { :where(.mc-glass) .hs-filters .g-seg { width: 100%; } } :where(.mc-glass) .hs-reg-head { display: none; } :where(.mc-glass) .hs-reg-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; padding: 0; gap: 0; } :where(.mc-glass) .hs-reg-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "s s v" "d m m"; align-items: baseline; column-gap: 0; row-gap: 2px; padding: 12px 8px 12px 16px; min-height: 60px; color: inherit; } :where(.mc-glass) .hs-reg-link:hover { background: var(--g-fill-4); text-decoration: none; } :where(.mc-glass) .hs-s { grid-area: s; font-size: calc(var(--g-t-body) * var(--g-scale)); } :where(.mc-glass) .hs-v { grid-area: v; justify-self: end; font-size: calc(var(--g-t-body) * var(--g-scale)); white-space: nowrap; } :where(.mc-glass) .hs-v b { font-weight: 600; } :where(.mc-glass) .hs-d, :where(.mc-glass) .hs-m { color: var(--g-label-2); font-size: calc(var(--g-t-subhead) * var(--g-scale)); } :where(.mc-glass) .hs-d { grid-area: d; } :where(.mc-glass) .hs-m { grid-area: m; } :where(.mc-glass) .hs-m::before { content: "·"; margin: 0 6px; } :where(.mc-glass) .hs-dl { display: none; } @media (min-width: 760px) { :where(.mc-glass) .hs-reg-head { display: grid; grid-template-columns: 210px 90px minmax(0, 1fr) 150px 52px; padding: 10px 8px 8px 16px; font: 600 calc(var(--g-t-footnote) * var(--g-scale)) / 1.2 var(--g-font); color: var(--g-label-2); } :where(.mc-glass) .hs-reg-head span:nth-child(4) { text-align: right; } :where(.mc-glass) .hs-reg-link { grid-template-columns: 210px 90px minmax(0, 1fr) 150px; grid-template-areas: "d m s v"; align-items: center; } :where(.mc-glass) .hs-m::before { content: none; } :where(.mc-glass) .hs-dl { display: inline; } :where(.mc-glass) .hs-ds { display: none; } :where(.mc-glass) .hs-d, :where(.mc-glass) .hs-m { font-size: calc(var(--g-t-body) * var(--g-scale)); } :where(.mc-glass) .hs-d { color: var(--g-label); } :where(.mc-glass) .hs-v .g-2 { margin-left: 6px; } } :where(.mc-glass) .hs-answers { display: grid; gap: 16px; } @media (min-width: 1240px) { :where(.mc-glass) .hs-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } } :where(.mc-glass) .hs-ans { gap: 12px; } :where(.mc-glass) .hs-ans .g-cell-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.mc-glass) .hs-empty { margin-top: 8px; } } /* MEDCUE GLASS · page layer for the Together + Cases batch (clinical cases, case player, Viva, Study Arena). Port target: public/css/glass-cases.css, glass-viva.css, glass-arena.css. Tokens and components come from system.css only. */ @layer glass.page { /* ── Shared ─────────────────────────────────────────────────────── */ :where(.mc-glass) .cs-lede { margin-top: 4px; max-width: 54ch; } :where(.mc-glass) .g-avatar.av-sam { background: var(--g-indigo); } :where(.mc-glass) .vz-code { display: flex; gap: 8px; margin: 18px 0 16px; } :where(.mc-glass) .vz-code span { flex: 1 1 0; max-width: 64px; min-width: 0; height: 64px; border-radius: 14px; display: grid; place-items: center; background: var(--g-fill-3); font: 600 30px/1 var(--g-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; } :where(.mc-glass) .vz-actions { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 719px) { :where(.mc-glass) .vz-actions .g-btn:first-child { flex: 1 1 100%; } :where(.mc-glass) .al-room .vz-actions { width: 100%; } :where(.mc-glass) .al-room .vz-actions .g-btn { flex: 1 1 100%; } :where(.mc-glass) .vz-chip { display: none; } } /* ── Clinical cases library ─────────────────────────────────────── */ :where(.mc-glass) .cs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; } :where(.mc-glass) .cs-search { flex: 1 1 100%; } :where(.mc-glass) .cs-menus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } :where(.mc-glass) .cs-count { margin: 12px 4px 14px; } :where(.mc-glass) .cs-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } :where(.mc-glass) .cs-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0; overflow: hidden; color: var(--g-label); text-decoration: none !important; height: 100%; transition: transform var(--g-d-base) var(--g-spring); } :where(.mc-glass) .cs-card:hover { text-decoration: none; } :where(.mc-glass) .cs-card:active { transform: scale(.985); } :where(.mc-glass) .cs-thumb { position: relative; display: grid; place-items: center; background: var(--g-stage); aspect-ratio: 16 / 10; overflow: hidden; } :where(.mc-glass) .cs-thumb :is(img, video) { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; background: var(--g-stage); } :where(.mc-glass) .cs-mod { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--g-r-capsule); background: rgb(0 0 0 / .6); color: #fff; font: 600 12px/1 var(--g-font); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; } :where(.mc-glass) .cs-clip { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .6); color: #fff; } :where(.mc-glass) .cs-body { padding: 14px 16px 16px; display: grid; gap: 5px; align-content: start; min-width: 0; } :where(.mc-glass) .cs-body .g-subhead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } :where(.mc-glass) .cs-meta { display: flex; flex-wrap: wrap; margin-top: 4px; } :where(.mc-glass) .cs-meta span + span::before { content: "·"; margin: 0 7px; } :where(.mc-glass) .cs-more { margin-top: 32px; } :where(.mc-glass) .cs-grid + .cs-more { margin-top: 32px; } @media (min-width: 560px) { :where(.mc-glass) .cs-search { flex: 1 1 280px; max-width: 420px; } } @media (min-width: 720px) { :where(.mc-glass) .cs-grid { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; } :where(.mc-glass) .cs-body { padding: 16px 18px 18px; } } /* ── Case player ────────────────────────────────────────────────── */ :where(.mc-glass) .cp-capsule { cursor: default; } :where(.mc-glass) .cp-fig .q-stage img, :where(.mc-glass) .cp-fig .q-stage video { width: 100%; height: 100%; object-fit: contain; } :where(.mc-glass) .cp-fig .cp-video { cursor: default; } :where(.mc-glass) .cp-views { display: grid; width: 100%; margin-top: 10px; } :where(.mc-glass) .cp-find { margin: 12px 4px 0; line-height: 1.4; } :where(.mc-glass) .cp-rights { margin: 12px 4px 0; } :where(.mc-glass) .cp-rights .g-chip { height: auto; min-height: 26px; padding: 5px 10px; white-space: normal; line-height: 1.25; } @media (min-width: 1100px) { :where(.mc-glass) .cp-fig .q-stage { height: min(calc(100dvh - 290px), 640px); } :where(.mc-glass) .q-body.wide-fig .cp-fig .q-stage { height: auto; max-height: calc(100dvh - 290px); } } @media (max-width: 1099px) { :where(.mc-glass) .cp-fig .q-stage { height: auto; aspect-ratio: 4 / 3; max-height: 50dvh; } :where(.mc-glass) .q-body.wide-fig .cp-fig .q-stage { aspect-ratio: var(--fig-ar, 2); } :where(.mc-glass) .cp-views, :where(.mc-glass) .cp-find, :where(.mc-glass) .cp-rights { margin-left: 4px; margin-right: 4px; } :where(.mc-glass) :is(.cp-fig, .vs-fig, .av-fig) .q-figcap { flex-direction: column; gap: 2px; } } :where(.mc-glass) .cp-steps, :where(.mc-glass) .vs-parts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; } :where(.mc-glass) .cp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(.mc-glass) .cp-steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 12px 0 0; min-width: 0; } :where(.mc-glass) .cp-steps li::before, :where(.mc-glass) .vs-part::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--g-fill-2); } :where(.mc-glass) .cp-steps li[data-state="done"]::before, :where(.mc-glass) .vs-part[data-state="done"]::before { background: var(--g-label-2); } :where(.mc-glass) .cp-steps li[data-state="current"]::before, :where(.mc-glass) .vs-part[data-state="current"]::before { background: var(--g-label); } :where(.mc-glass) .cp-steps .dot, :where(.mc-glass) .vs-part .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--g-font-rounded); font-variant-numeric: tabular-nums; color: var(--g-label-2); box-shadow: inset 0 0 0 1.5px var(--g-fill); flex: none; } :where(.mc-glass) .cp-steps .dot .g-ic, :where(.mc-glass) .vs-part .dot .g-ic { width: 13px; height: 13px; stroke-width: 2.6; } :where(.mc-glass) .cp-steps [data-state="current"] .dot, :where(.mc-glass) .vs-part[data-state="current"] .dot { background: var(--g-label); color: var(--g-bg-2); box-shadow: none; } :where(.mc-glass) .cp-steps [data-state="done"] .dot, :where(.mc-glass) .vs-part[data-state="done"] .dot { background: var(--g-fill-3); color: var(--g-label); box-shadow: none; } :where(.mc-glass) .cp-steps .lbl { font: 600 calc(var(--g-t-footnote) * var(--g-scale))/1.25 var(--g-font); color: var(--g-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.mc-glass) .cp-steps [data-state="current"] .lbl { color: var(--g-label); } :where(.mc-glass) .cp-steps .sub { grid-column: 2; font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); font-variant-numeric: tabular-nums; } :where(.mc-glass) .cp-steps .sub:empty { display: none; } @media (min-width: 440px) { :where(.mc-glass) .cp-steps .lbl { font-size: calc(var(--g-t-subhead) * var(--g-scale)); } } :where(.mc-glass) .cp-title { margin: 6px 0 12px; } :where(.mc-glass) .cp-hint { display: flex; align-items: center; gap: 7px; margin-top: 4px; } :where(.mc-glass) .cp-context { margin: 0 0 16px; } :where(.mc-glass) .cp-outcome, :where(.mc-glass) .al-ready { display: inline-flex; align-items: center; gap: 5px; font: 600 calc(var(--g-t-subhead) * var(--g-scale))/1.2 var(--g-font); white-space: nowrap; } :where(.mc-glass) .cp-outcome[data-ok="true"], :where(.mc-glass) .al-ready[data-ok="true"] { color: var(--g-correct); } :where(.mc-glass) .cp-outcome[data-ok="false"], :where(.mc-glass) .al-ready[data-ok="false"] { color: var(--g-label-2); } :where(.mc-glass) .cp-reflect { background: var(--g-bg-2); border-radius: var(--g-r-cell); padding: 14px 16px 12px; display: grid; gap: 10px; } :where(.mc-glass) .cp-reflect textarea { width: 100%; min-height: 104px; resize: vertical; border: 0; border-radius: var(--g-r-control); background: var(--g-fill-3); padding: 12px 14px; color: var(--g-label); font: inherit; font-size: calc(var(--g-t-subhead) * var(--g-scale)); } :where(.mc-glass) .cp-reflect textarea:focus { outline: 3px solid color-mix(in srgb, var(--g-tint) 45%, transparent); } :where(.mc-glass) .cp-reflect textarea::placeholder { color: var(--g-label-3); } :where(.mc-glass) .cp-reflect .g-footnote:empty { display: none; } :where(.mc-glass) .cp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } :where(.mc-glass) .g-section-foot code { font: 500 13px/1.3 var(--g-mono); padding: 1px 6px; border-radius: 5px; background: var(--g-fill-3); color: var(--g-label); } :where(.mc-glass) .q-read .g-section + .g-section { margin-top: 28px; } /* ── Viva list ──────────────────────────────────────────────────── */ :where(.mc-glass) .vz-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; margin-bottom: 16px; padding: 18px 20px; } :where(.mc-glass) .vz-lock .g-btn { grid-column: 1 / -1; } :where(.mc-glass) .vz-lock-copy { display: grid; gap: 4px; } :where(.mc-glass) .vz-modes { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } :where(.mc-glass) .vz-mode { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 20px; justify-items: start; } :where(.mc-glass) .vz-mode-copy { display: grid; gap: 6px; align-content: start; } :where(.mc-glass) .vz-partner { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; } :where(.mc-glass) .vz-partner > .g-section { align-content: start; } :where(.mc-glass) .vz-code-card { display: grid; gap: 4px; padding: 22px 20px; align-content: start; } :where(.mc-glass) .vz-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 4px; } :where(.mc-glass) .vz-foot-btns { display: flex; align-items: center; gap: 8px; } :where(.mc-glass) .vz-link { word-break: break-all; } @media (min-width: 720px) { :where(.mc-glass) .vz-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.mc-glass) .vz-lock { grid-template-columns: auto minmax(0, 1fr) auto; } :where(.mc-glass) .vz-lock .g-btn { grid-column: auto; } } @media (min-width: 900px) { :where(.mc-glass) .vz-partner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ── Viva station ───────────────────────────────────────────────── */ :where(.mc-glass) .vs-title { margin: 4px 0 12px; } :where(.mc-glass) .q-body.no-fig .q-read { margin: 0 auto; width: 100%; } :where(.mc-glass) #vRead { padding-top: 5vh; } :where(.mc-glass) .vs-big { display: grid; gap: 2px; justify-items: start; margin: 22px 0 18px; } :where(.mc-glass) .vs-big span:first-child { font: 700 64px/1 var(--g-font-rounded); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } :where(.mc-glass) .vs-paused { max-width: 720px; width: calc(100% - 24px); margin: 6px auto 0; } :where(.mc-glass) .vs-licence { margin: 4px 4px 0; } :where(.mc-glass) .vs-parts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } :where(.mc-glass) .vs-part { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 2px 6px; border: 0; background: transparent; color: var(--g-label-2); cursor: pointer; font: 500 calc(var(--g-t-footnote) * var(--g-scale))/1.2 var(--g-font); min-width: 0; border-radius: 8px; } :where(.mc-glass) .vs-part[aria-disabled="true"] { cursor: default; } :where(.mc-glass) .vs-part[data-state="current"] { color: var(--g-label); font-weight: 600; } :where(.mc-glass) .vs-part .lbl { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.mc-glass) .vs-aloud { display: flex; align-items: center; gap: 7px; margin-top: 16px; } :where(.mc-glass) .vs-exam-note { margin-bottom: 16px; } :where(.mc-glass) .vs-mat { margin-top: 16px; background: var(--g-bg-2); border-radius: var(--g-r-cell); overflow: hidden; } :where(.mc-glass) .vs-mat summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; font: 600 calc(var(--g-t-subhead) * var(--g-scale))/1.3 var(--g-font); } :where(.mc-glass) .vs-mat summary::-webkit-details-marker { display: none; } :where(.mc-glass) .vs-mat summary .g-chev { transition: rotate var(--g-d-fast) var(--g-ease); } :where(.mc-glass) .vs-mat[open] summary .g-chev { rotate: 90deg; } :where(.mc-glass) .vs-mat > div { padding: 0 16px 14px; font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.45; } :where(.mc-glass) .vs-mat > div p { margin: 10px 0 0; } :where(.mc-glass) .vs-mat table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } :where(.mc-glass) .vs-mat table.data th { text-align: left; font-weight: 500; color: var(--g-label-2); font-size: calc(var(--g-t-footnote) * var(--g-scale)); padding: 4px 10px 6px 0; } :where(.mc-glass) .vs-mat table.data td { padding: 7px 10px 7px 0; border-top: .5px solid var(--g-sep); vertical-align: top; } :where(.mc-glass) .vs-tally { display: grid; gap: 6px; margin: 24px 0 4px; } :where(.mc-glass) .vs-group.g-section { margin-top: 24px; } :where(.mc-glass) .vs-item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 13px 16px; } :where(.mc-glass) .vs-item + .vs-item::before { content: ""; position: absolute; top: 0; right: 0; left: 52px; height: .5px; background: var(--g-sep); } :where(.mc-glass) .vs-st { width: 24px; height: 24px; display: grid; place-items: center; margin-top: -1px; } :where(.mc-glass) .vs-st i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g-fill); } :where(.mc-glass) .vs-st .g-ic { width: 23px; height: 23px; stroke-width: 2; } :where(.mc-glass) .vs-item[data-mark="met"] .vs-st { color: var(--g-green); } :where(.mc-glass) .vs-item[data-mark="partial"] .vs-st { color: var(--g-orange); } :where(.mc-glass) .vs-item[data-mark="missed"] .vs-st { color: var(--g-red); } :where(.mc-glass) .vs-item-main { display: grid; gap: 10px; min-width: 0; } :where(.mc-glass) .vs-item-t { margin: 0; font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.45; letter-spacing: -.012em; } :where(.mc-glass) .vs-mark { justify-self: start; } :where(.mc-glass) .vs-mark button { padding: 5px 14px; } :where(.mc-glass) .vs-find { margin: 0; font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.5; padding: 2px 0; } :where(.mc-glass) .vs-cover { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 8px; padding: 20px; } :where(.mc-glass) .vs-cover .g-title3 { margin-bottom: 4px; } :where(.mc-glass) .vs-score { display: grid; gap: 6px; margin: 16px 0 28px; padding: 20px; } :where(.mc-glass) .vs-ring { --size: 34px; --w: 5px; } :where(.mc-glass) .vs-sumactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } :where(.mc-glass) .vs-score + .g-section { margin-top: 0; } /* ── Arena lobby ────────────────────────────────────────────────── */ :where(.mc-glass) .al-radio { accent-color: var(--g-tint); width: 22px; height: 22px; flex: none; margin: 0; } :where(.mc-glass) #vCreate > .g-btn { margin-top: 28px; } :where(.mc-glass) .al-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; align-items: center; } :where(.mc-glass) .al-range .g-range { grid-column: 1 / -1; } :where(.mc-glass) .al-range .g-cell-title label { color: inherit; font: inherit; text-transform: none; margin: 0; display: inline; } :where(.mc-glass) .al-join-sec { margin-top: 35px; } :where(.mc-glass) .al-join { display: flex; gap: 10px; align-items: center; padding: 12px; } :where(.mc-glass) .al-codein { flex: 1; min-width: 0; text-align: center; font: 600 20px/1 var(--g-mono); letter-spacing: .24em; text-transform: uppercase; padding-left: 20px; } :where(.mc-glass) .al-codein:placeholder-shown { text-transform: none; letter-spacing: .02em; font: 400 16px/1 var(--g-font); } :where(.mc-glass) .al-err { color: var(--g-wrong); } :where(.mc-glass) .al-room { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 22px 20px 20px; margin-bottom: 28px; } :where(.mc-glass) .al-room .vz-code { justify-content: center; width: 100%; } :where(.mc-glass) .al-room .vz-actions { justify-content: center; } :where(.mc-glass) .al-av { width: 38px; height: 38px; font-size: 15px; flex: none; } :where(.mc-glass) .al-empty { border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--g-fill); color: var(--g-label-2); background: transparent; } :where(.mc-glass) .al-start { margin: 22px 0 32px; display: grid; gap: 10px; } :where(.mc-glass) .al-cap { text-align: center; padding: 0 12px; } :where(.mc-glass) .al-leave { display: flex; justify-content: center; margin-top: 20px; } :where(.mc-glass) .al-players + * { margin-top: 0; } /* ── Arena live ─────────────────────────────────────────────────── */ :where(.mc-glass) .av-score { gap: 10px; padding: 4px 16px 4px 5px; } :where(.mc-glass) .av-score .g-avatar { width: 34px; height: 34px; font-size: 13px; } :where(.mc-glass) .av-p { display: inline-flex; align-items: center; gap: 7px; } :where(.mc-glass) .av-p b { font: 700 19px/1 var(--g-font-rounded); font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; } :where(.mc-glass) .av-dash { color: var(--g-label-2); font-weight: 600; margin: 0 -2px; } :where(.mc-glass) .av-q { color: var(--g-label-2); font-weight: 500; padding-left: 6px; } :where(.mc-glass) .q-top .q-pill:disabled { opacity: .5; cursor: default; } :where(.mc-glass) .q-pill .g-badge { height: 18px; min-width: 18px; font-size: 13px; } :where(.mc-glass) .av-end { display: grid; justify-items: end; align-content: start; gap: 5px; margin-top: 1px; } :where(.mc-glass) .av-picks { display: flex; gap: 4px; } :where(.mc-glass) .av-picks:empty { display: none; } :where(.mc-glass) .av-picks .g-avatar { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px var(--g-bg-2); } :where(.mc-glass) .av-partner { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: var(--g-r-cell); background: var(--g-bg-2); } :where(.mc-glass) .av-partner > .g-ic { color: var(--g-label-2); } :where(.mc-glass) .av-p-main { display: grid; gap: 1px; flex: 1; min-width: 0; } :where(.mc-glass) .av-signals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } :where(.mc-glass) .av-signals .g-footnote { margin-right: 4px; } :where(.mc-glass) .av-reveal { margin-top: 18px; } :where(.mc-glass) .av-picklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } :where(.mc-glass) .av-picklist li { display: flex; align-items: center; gap: 10px; } :where(.mc-glass) .av-picklist .g-avatar { width: 30px; height: 30px; font-size: 12px; } :where(.mc-glass) .av-picklist b { font-weight: 600; } :where(.mc-glass) .av-pts { margin-left: auto; font: 700 17px/1 var(--g-font-rounded); color: var(--g-label-2); font-variant-numeric: tabular-nums; } :where(.mc-glass) .av-pts[data-ok="true"] { color: var(--g-correct); } :where(.mc-glass) .av-react { display: flex; flex-wrap: wrap; gap: 8px; } :where(.mc-glass) body.av-paused .q-fig, :where(.mc-glass) body.av-paused #vPlay { opacity: .16; filter: blur(10px); pointer-events: none; user-select: none; } :where(.mc-glass) .av-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; height: 100%; padding-bottom: max(16px, env(safe-area-inset-bottom)); } :where(.mc-glass) .av-thread { display: grid; gap: 10px; align-content: start; overflow: auto; min-height: 160px; } :where(.mc-glass) .av-msg { display: grid; gap: 2px; max-width: 82%; padding: 9px 14px 10px; border-radius: 18px 18px 18px 4px; background: var(--g-bg-2); justify-self: start; } :where(.mc-glass) .av-msg[data-me="true"] { justify-self: end; border-radius: 18px 18px 4px 18px; background: var(--g-fill-3); } :where(.mc-glass) .av-chatform { display: flex; gap: 8px; } :where(.mc-glass) .av-final { display: flex; align-items: center; justify-content: center; gap: 36px; padding: 24px 20px; margin: 20px 0 8px; } :where(.mc-glass) .av-fp { display: grid; justify-items: center; gap: 8px; min-width: 96px; } :where(.mc-glass) .av-fp .g-avatar { width: 44px; height: 44px; font-size: 17px; } :where(.mc-glass) .av-fp .g-metric { font-size: 52px; } :where(.mc-glass) .av-vs { font: 600 28px/1 var(--g-font-rounded); color: var(--g-label-2); } :where(.mc-glass) .av-table .av-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; align-items: center; gap: 8px; padding: 12px 16px; font-size: calc(var(--g-t-body) * var(--g-scale)); } :where(.mc-glass) .av-table .av-row + .av-row::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; height: .5px; background: var(--g-sep); } :where(.mc-glass) .av-table .av-row > :not(:first-child) { justify-self: center; text-align: center; } :where(.mc-glass) .av-table .av-head { font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); padding-top: 12px; padding-bottom: 8px; text-transform: none; } :where(.mc-glass) .av-table .av-total { font-weight: 700; } :where(.mc-glass) .av-mark { display: grid; place-items: center; } :where(.mc-glass) .av-mark[data-ok="true"] { color: var(--g-green); } :where(.mc-glass) .av-mark[data-ok="false"] { color: var(--g-red); } @media (max-width: 560px) { :where(.mc-glass) .av-q { display: none; } :where(.mc-glass) .q-top .trail .lbl { display: none; } :where(.mc-glass) .q-top .trail .q-pill { padding: 0 11px; } } @media (max-width: 440px) { :where(.mc-glass) .av-score { gap: 8px; padding-right: 12px; } :where(.mc-glass) .av-score .g-avatar { width: 30px; height: 30px; } :where(.mc-glass) .vz-code span { height: 54px; font-size: 26px; } :where(.mc-glass) .vs-big span:first-child { font-size: 56px; } } } /* MEDCUE GLASS · page layer for the study-core batch: Study, Build, Results, Keep practising, CAC course. Port target: public/css/glass-study.css. Everything is token-driven; nothing here sets a colour literal except the stage overlays. */ @layer glass.page { /* ── Study (Browse) ──────────────────────────────────────────────── */ :where(.mc-glass) .s-page { display: grid; gap: 32px; } :where(.mc-glass) .s-page > * { min-width: 0; } :where(.mc-glass) .s-page > .g-section { margin-top: 0; } :where(.mc-glass) .s-hero { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; } :where(.mc-glass) .s-hero-copy { padding: 24px 22px 26px; display: grid; align-content: center; gap: 12px; order: 2; } :where(.mc-glass) .s-hero-copy .g-body { max-width: 46ch; } :where(.mc-glass) .s-hero-fig { order: 1; margin: 0; background: var(--g-stage); display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 220px; } :where(.mc-glass) .s-hero-fig img { width: 100%; height: 100%; max-height: 280px; object-fit: contain; } :where(.mc-glass) .s-hero-fig figcaption { padding: 8px 14px 10px; font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: rgb(255 255 255 / .72); } @media (min-width: 900px) { :where(.mc-glass) .s-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } :where(.mc-glass) .s-hero-copy { order: 1; padding: 34px 32px; } :where(.mc-glass) .s-hero-fig { order: 2; min-height: 300px; } :where(.mc-glass) .s-hero-fig img { max-height: 340px; } } :where(.mc-glass) .s-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 720px) { :where(.mc-glass) .s-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } :where(.mc-glass) .s-tile { display: grid; align-content: start; gap: 14px; padding: 18px; } :where(.mc-glass) .s-tile .g-btn { margin-top: 2px; } :where(.mc-glass) .s-segs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; } :where(.mc-glass) .s-segs span { position: relative; height: 22px; border-radius: 6px; background: var(--g-fill-2); overflow: hidden; display: grid; align-items: center; } :where(.mc-glass) .s-segs span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 0) * 100%); background: var(--g-orange); } :where(.mc-glass) .s-segs i { position: relative; font: 600 11px/1 var(--g-font); font-style: normal; text-align: center; color: var(--g-label-2); } :where(.mc-glass) .s-segs span[style*="--f:1"] i { color: #fff; } :where(.mc-glass) .s-segs span[style*="--f:0.5"] i { color: var(--g-label); } :where(.mc-glass) .s-tile .g-card-head { min-height: 26px; } :where(.mc-glass) .s-cases { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 14px; margin-top: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g-gutter); padding: 2px var(--g-gutter) 4px; margin-inline: calc(var(--g-gutter) * -1); scrollbar-width: none; } :where(.mc-glass) .s-cases::-webkit-scrollbar { display: none; } @media (min-width: 720px) { :where(.mc-glass) .s-cases { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 2px 0 0; margin-inline: 0; } } :where(.mc-glass) .s-case { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; background: var(--g-bg-2); border-radius: 18px; overflow: hidden; color: var(--g-label); text-decoration: none !important; transition: transform var(--g-d-base) var(--g-spring); } :where(.mc-glass) .s-case:hover { transform: translateY(-2px); } :where(.mc-glass) .s-case:active { transform: scale(.985); } :where(.mc-glass) .s-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--g-stage); } :where(.mc-glass) .s-thumb :is(img, video) { width: 100%; height: 100%; object-fit: contain; } :where(.mc-glass) .s-clip { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 99px; background: rgb(250 250 252 / .82); color: #1D1D1F; font: 600 12px/1 var(--g-font); } :where(.mc-glass) .s-case-body { display: grid; align-content: start; gap: 3px; padding: 12px 14px 14px; } /* ── Build a session ─────────────────────────────────────────────── */ :where(.mc-glass.b-page) .g-tabbar, :where(.mc-glass.b-page) .g-bottom-edge { display: none; } :where(.mc-glass.b-page) .g-main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } :where(.mc-glass) .b-stack { display: grid; gap: 16px; } :where(.mc-glass) .b-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } @media (min-width: 1024px) { :where(.mc-glass.b-page) .g-main { padding-bottom: 64px; } :where(.mc-glass) .b-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } :where(.mc-glass) .b-side { position: sticky; top: 68px; } } :where(.mc-glass) .b-side { display: grid; gap: 22px; } :where(.mc-glass) .b-filters { display: grid; gap: 12px; } :where(.mc-glass) .b-filters .g-seg { width: 100%; } :where(.mc-glass) .b-filters .g-seg button { padding-inline: 4px; } :where(.mc-glass) .b-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; } :where(.mc-glass) .b-bar .g-btn { --h: 28px; padding: 0 6px; font-size: calc(var(--g-t-subhead) * var(--g-scale)); font-weight: 500; } :where(.mc-glass) .b-bar .g-btn-plain { background: transparent; } :where(.mc-glass) .b-tree { transition: opacity var(--g-d-base) linear; } :where(.mc-glass) .b-tree[data-off="true"] { opacity: .45; pointer-events: none; } :where(.mc-glass) .b-sys > summary { list-style: none; cursor: pointer; } :where(.mc-glass) .b-sys > summary::-webkit-details-marker { display: none; } :where(.mc-glass) .b-sys > summary .g-chev { transition: rotate var(--g-d-fast) var(--g-ease); } :where(.mc-glass) .b-sys[open] > summary .g-chev { rotate: 90deg; } :where(.mc-glass) .b-sys > summary:hover { background: var(--g-fill-4); } :where(.mc-glass) .b-chk { appearance: auto; accent-color: var(--g-tint); width: 22px; height: 22px; margin: 0; flex: none; cursor: pointer; } :where(.mc-glass) .b-sub { list-style: none; margin: 0; padding: 0 0 4px; } :where(.mc-glass) .b-sub label { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 16px 8px 70px; cursor: pointer; } :where(.mc-glass) .b-sub label:hover { background: var(--g-fill-4); } :where(.mc-glass) .b-sub label::before { content: ""; position: absolute; top: 0; right: 0; left: 70px; height: .5px; background: var(--g-sep); } :where(.mc-glass) .b-sub li:first-child label::before { display: none; } :where(.mc-glass) .b-sub .b-chk { position: absolute; left: 24px; } :where(.mc-glass) .b-sys { border-top: .5px solid var(--g-sep); } :where(.mc-glass) .b-list > li:first-child > .b-sys { border-top: 0; } :where(.mc-glass) .b-sys .g-cell-title { font-weight: 500; } :where(.mc-glass) .b-count { color: var(--g-label-2); font-variant-numeric: tabular-nums; white-space: nowrap; } :where(.mc-glass) .b-set { background: var(--g-bg-2); border-radius: var(--g-r-cell); overflow: hidden; } :where(.mc-glass) .b-row { display: grid; gap: 10px; padding: 12px 16px 14px; } :where(.mc-glass) .b-row + .b-row { border-top: .5px solid var(--g-sep); } :where(.mc-glass) .b-row .g-seg { width: 100%; } :where(.mc-glass) .b-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } :where(.mc-glass) .b-row-head > span:first-child { font-weight: 600; } :where(.mc-glass) .b-row-head .g-switch { margin-left: auto; } :where(.mc-glass) .b-row[data-locked="true"] { opacity: .6; } :where(.mc-glass) .b-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--g-label-2); font-size: calc(var(--g-t-footnote) * var(--g-scale)); } :where(.mc-glass) .b-lock .g-ic { width: 14px; height: 14px; } :where(.mc-glass) .b-num { display: flex; align-items: center; gap: 10px; } :where(.mc-glass) .b-num .g-field { width: 96px; min-height: 36px; text-align: center; font-variant-numeric: tabular-nums; } :where(.mc-glass) .b-summary { display: grid; gap: 14px; background: var(--g-bg-2); border-radius: var(--g-r-card); padding: 18px; } :where(.mc-glass) .b-summary .b-big { font: 700 44px/1 var(--g-font-rounded); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } :where(.mc-glass) .b-summary .b-big small { font: 600 17px/1.2 var(--g-font); color: var(--g-label-2); letter-spacing: -.02em; margin-left: 6px; } :where(.mc-glass) .b-summary .g-btn { width: 100%; } :where(.mc-glass) .b-summary-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } :where(.mc-glass) .b-dock { display: none; } @media (max-width: 1023px) { :where(.mc-glass) .b-summary { display: none; } :where(.mc-glass) .b-dock { position: fixed; z-index: 55; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: var(--g-r-capsule); } :where(.mc-glass) .b-dock .b-dock-main { flex: 1; min-width: 0; display: grid; gap: 1px; } :where(.mc-glass) .b-dock .g-footnote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.mc-glass) .b-dock .b-dock-n { font: 700 20px/1.1 var(--g-font-rounded); font-variant-numeric: tabular-nums; } :where(.mc-glass) .b-dock .g-btn { flex: none; } } @media (max-width: 400px) { :where(.mc-glass) .b-dock .g-btn { padding: 0 18px; } } :where(.mc-glass) .b-empty { background: var(--g-bg-2); border-radius: var(--g-r-card); } :where(.mc-glass) .b-empty .g-btn { margin-top: 10px; } } @layer glass.page { /* ── Results ─────────────────────────────────────────────────────── */ :where(.mc-glass) .r-page { display: grid; gap: 28px; } :where(.mc-glass) .r-page > * { min-width: 0; } :where(.mc-glass) .r-page > .g-section { margin-top: 0; } :where(.mc-glass) .r-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 900px) { :where(.mc-glass) .r-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; } } :where(.mc-glass) .r-hero { display: grid; align-content: start; gap: 14px; padding: 22px; } :where(.mc-glass) .r-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; } :where(.mc-glass) .r-big { font: 700 76px/1 var(--g-font-rounded); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } :where(.mc-glass) .r-big small { font: 600 22px/1 var(--g-font); color: var(--g-label-2); letter-spacing: -.01em; margin-left: 8px; } :where(.mc-glass) .r-pct { font: 700 34px/1 var(--g-font-rounded); color: var(--g-label); } :where(.mc-glass) .r-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 0; padding: 14px 0 2px; border-top: .5px solid var(--g-sep); } :where(.mc-glass) .r-stats > div { display: grid; gap: 2px; } :where(.mc-glass) .r-stats > div + div { padding-left: 16px; border-left: .5px solid var(--g-sep); } :where(.mc-glass) .r-stats dt { font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); } :where(.mc-glass) .r-stats dd { margin: 0; font: 700 22px/1.2 var(--g-font-rounded); } :where(.mc-glass) .r-hero .t-next-actions { margin-top: 4px; } :where(.mc-glass) .r-sys { display: grid; align-content: start; gap: 14px; padding: 22px; } :where(.mc-glass) .r-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } :where(.mc-glass) .r-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; } :where(.mc-glass) .r-bar-name { font-weight: 500; } :where(.mc-glass) .r-bar-val { color: var(--g-label-2); font-size: calc(var(--g-t-subhead) * var(--g-scale)); } :where(.mc-glass) .r-track { grid-column: 1 / -1; height: 12px; border-radius: 6px; background: var(--g-fill-3); overflow: hidden; } :where(.mc-glass) .r-track i { display: block; height: 100%; width: var(--p); background: var(--bar); border-radius: 6px; } :where(.mc-glass) .r-out { flex: none; align-self: flex-start; margin-top: 2px; } :where(.mc-glass) .r-out .g-ic { width: 24px; height: 24px; } :where(.mc-glass) .r-word { align-self: flex-start; margin-top: 2px; } :where(.mc-glass) .r-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :where(.mc-glass) .g-list.has-icons:has(.r-out) { --sep-inset: 52px; } @media (max-width: 480px) { :where(.mc-glass) .r-big { font-size: 64px; } } } @layer glass.page { /* ── Keep practising ─────────────────────────────────────────────── */ :where(.mc-glass) .p-capsule .p-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--g-tint-soft); color: var(--g-tint); flex: none; } :where(.mc-glass) .p-capsule .p-ic .g-ic { width: 19px; height: 19px; stroke-width: 2; } :where(.mc-glass) .p-capsule .mode { text-transform: none; letter-spacing: 0; font-size: 13px; } @media (max-width: 560px) { :where(.mc-glass) .p-capsule .mode { display: none; } } @media (max-width: 440px) { :where(.mc-glass) .p-capsule .bar { display: none; } :where(.mc-glass) .q-top { gap: 6px; } } :where(.mc-glass) .q-top .q-pill .lbl { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1099px) { :where(.mc-glass) .q-top .trail #sysBtn .lbl { display: inline; max-width: 64px; } :where(.mc-glass) .q-top .trail #sysBtn { padding: 0 10px 0 12px; } } :where(.mc-glass) .p-save { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; } :where(.mc-glass) .p-save .g-ic { color: var(--g-green); } :where(.mc-glass) .p-limit { max-width: 560px; margin: 0 auto; padding: 8vh 20px 160px; } :where(.mc-glass) .p-limit .g-empty { background: var(--g-bg-2); border-radius: var(--g-r-card); padding: 44px 24px 36px; } :where(.mc-glass) .p-limit-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; } } @layer glass.page { /* ── Critical & acute care ───────────────────────────────────────── */ :where(.mc-glass) .c-lede { max-width: 56ch; margin: -4px 0 10px; } :where(.mc-glass) .c-meta { margin: 0 0 20px; } :where(.mc-glass) .c-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } :where(.mc-glass) .c-grid > * { min-width: 0; } @media (min-width: 1024px) { :where(.mc-glass) .c-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; } :where(.mc-glass) .c-grid > nav { position: sticky; top: 68px; } } :where(.mc-glass) .c-mods { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g-gutter); scrollbar-width: none; margin-inline: calc(var(--g-gutter) * -1); padding: 2px var(--g-gutter) 4px; } :where(.mc-glass) .c-mods::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { :where(.mc-glass) .c-mods { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: 0; background: var(--g-bg-2); border-radius: var(--g-r-cell); } } :where(.mc-glass) .c-mod { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; width: 100%; height: 100%; padding: 12px 14px; border-radius: 16px; background: var(--g-bg-2); scroll-snap-align: start; position: relative; } :where(.mc-glass) .c-mod:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: 2px; } @media (min-width: 1024px) { :where(.mc-glass) .c-mod { border-radius: 0; padding: 12px 16px; background: transparent; } :where(.mc-glass) .c-mods > li:first-child .c-mod { border-radius: var(--g-r-cell) var(--g-r-cell) 0 0; } :where(.mc-glass) .c-mods > li:last-child .c-mod { border-radius: 0 0 var(--g-r-cell) var(--g-r-cell); } :where(.mc-glass) .c-mods > li + li .c-mod::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--g-sep); } :where(.mc-glass) .c-mod:hover { background: var(--g-fill-4); } } :where(.mc-glass) .c-mod[aria-current="true"] { background: var(--g-fill-3); } :where(.mc-glass) .c-mod[aria-current="true"] .c-mod-title { color: var(--g-tint); } :where(.mc-glass) .c-mod[aria-disabled="true"] { cursor: default; } :where(.mc-glass) .c-mod-code { font: 500 calc(var(--g-t-footnote) * var(--g-scale))/1.2 var(--g-font); color: var(--g-label-2); letter-spacing: .02em; } :where(.mc-glass) .c-mod-title { font: 600 calc(var(--g-t-callout) * var(--g-scale))/1.25 var(--g-font); letter-spacing: -.015em; } :where(.mc-glass) .c-mod-prog { display: grid; gap: 6px; margin-top: 4px; } :where(.mc-glass) .c-mod-n { font-size: calc(var(--g-t-footnote) * var(--g-scale)); color: var(--g-label-2); } :where(.mc-glass) .c-panel { display: grid; gap: 20px; min-width: 0; } :where(.mc-glass) .c-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } :where(.mc-glass) .c-panel > .g-section { margin-top: 0; } :where(.mc-glass) .c-item { display: grid; gap: 14px; padding: 18px; } :where(.mc-glass) .c-fig { margin: 0; } :where(.mc-glass) .c-stage { display: block; width: 100%; height: min(46vh, 340px); padding: 0; border: 0; border-radius: 16px; background: var(--g-stage); cursor: zoom-in; overflow: hidden; position: relative; } :where(.mc-glass) .c-stage img { width: 100%; height: 100%; object-fit: contain; } :where(.mc-glass) .c-stage .hint { position: absolute; right: 10px; bottom: 10px; display: inline-flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--g-r-capsule); color: #1D1D1F; background: rgb(250 250 252 / .82); font: 600 13px/1 var(--g-font); } :where(.mc-glass) .c-item .q-stem, :where(.mc-glass) .c-item .q-lead { margin: 0; } :where(.mc-glass) .c-item .q-opts { background: var(--g-bg); } :where(.mc-glass) .c-lock { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--g-r-cell); background: var(--g-bg); color: var(--g-label-2); font-size: calc(var(--g-t-subhead) * var(--g-scale)); } :where(.mc-glass) .c-lock .g-ic { width: 19px; height: 19px; } :where(.mc-glass) .c-actions { display: flex; justify-content: flex-end; } :where(.mc-glass) .c-item .x-block:first-child { border-top: 0; } :where(.mc-glass) .c-done .g-ic { color: var(--g-green); } :where(.mc-glass) .c-state { display: inline-flex; align-items: center; gap: 6px; font-size: calc(var(--g-t-subhead) * var(--g-scale)); white-space: nowrap; } :where(.mc-glass) .c-state .g-ic { width: 18px; height: 18px; color: var(--g-green); } :where(.mc-glass) .c-quiet { color: var(--g-label-2); } :where(.mc-glass) .c-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g-orange); } :where(.mc-glass) .c-empty { background: var(--g-bg-2); border-radius: var(--g-r-card); padding: 56px 24px; } :where(.mc-glass) .c-empty .g-btn { margin-top: 12px; } } /* MEDCUE GLASS · page layer for the account + system batch (progress, account, search, ai, upgrade, states, index). Port target: public/css/glass-account.css. Tokens only; no new colours. */ @layer glass.page { /* ── Progress ───────────────────────────────────────────────────── */ :where(.mc-glass) .pg-stack { display: grid; gap: 28px; } :where(.mc-glass) .pg-summary { padding: 20px; display: grid; gap: 18px; } :where(.mc-glass) .pg-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } :where(.mc-glass) .pg-stats > div { display: grid; gap: 4px; align-content: start; min-width: 0; } :where(.mc-glass) .pg-stats > div + div { padding-left: 16px; border-left: .5px solid var(--g-sep); } :where(.mc-glass) .pg-stats dd { margin: 0; } :where(.mc-glass) .pg-stats .g-metric { font-size: 40px; margin-top: 2px; } :where(.mc-glass) .pg-cover { display: grid; gap: 8px; } :where(.mc-glass) .pg-cover .g-progress { height: 8px; border-radius: 4px; } @media (max-width: 480px) { :where(.mc-glass) .pg-stats { gap: 8px; } :where(.mc-glass) .pg-stats > div + div { padding-left: 12px; } :where(.mc-glass) .pg-stats .g-metric { font-size: 32px; } } @media (max-width: 560px) { :where(.mc-glass) .pg-head { flex-wrap: wrap; row-gap: 10px; } :where(.mc-glass) .pg-head .g-seg { width: 100%; } } :where(.mc-glass) .pg-bars-card { padding: 6px 8px 14px; } :where(.mc-glass) .pg-bars { list-style: none; margin: 0; padding: 0; } :where(.mc-glass) .pg-bar { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 48px; align-items: center; gap: 4px 16px; padding: 10px 8px; border-radius: 12px; color: var(--g-label); text-decoration: none !important; } :where(.mc-glass) .pg-bar:hover { background: var(--g-fill-4); } :where(.mc-glass) .pg-name { display: grid; gap: 1px; min-width: 0; } :where(.mc-glass) .pg-track { position: relative; height: 12px; border-radius: 6px; background: var(--g-fill-3); } :where(.mc-glass) .pg-track > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 6px; background: var(--g-indigo); transition: width var(--g-d-move) var(--g-spring-smooth); } :where(.mc-glass) .pg-bar.is-low .pg-track > i { background: var(--g-orange); } :where(.mc-glass) .pg-track::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: calc(var(--ref) * 1%); border-left: 1px dashed var(--g-label-2); } :where(.mc-glass) .pg-val { text-align: right; font: 600 calc(var(--g-t-body) * var(--g-scale))/1 var(--g-font-rounded); } :where(.mc-glass) .pg-legend { display: flex; align-items: center; gap: 8px; margin: 6px 8px 0; } :where(.mc-glass) .pg-legend i { width: 0; height: 12px; border-left: 1px dashed var(--g-label-2); } @media (max-width: 560px) { :where(.mc-glass) .pg-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "track track"; gap: 8px 12px; padding: 10px 8px 12px; } :where(.mc-glass) .pg-name { grid-area: name; } :where(.mc-glass) .pg-val { grid-area: val; } :where(.mc-glass) .pg-track { grid-area: track; } } :where(.mc-glass) .pg-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; } @media (min-width: 900px) { :where(.mc-glass) .pg-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } } :where(.mc-glass) .pg-trend { display: grid; gap: 0; padding: 18px; } :where(.mc-glass) .pg-trend .g-chart { height: 148px; gap: 5px; } :where(.mc-glass) .pg-trend .g-chart > span { width: min(16px, 70%); } :where(.mc-glass) .pg-trend .g-chart > span.now { background: color-mix(in srgb, var(--g-indigo) 55%, transparent); } :where(.mc-glass) .pg-trend .g-chart-axis { gap: 5px; overflow: visible; } :where(.mc-glass) .pg-trend .g-chart-axis span { white-space: nowrap; } :where(.mc-glass) .pg-trend-note { margin-top: 14px; } :where(.mc-glass) .pg-cta { margin-top: 18px; width: 100%; } :where(.mc-glass) .pg-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 4px 16px 0; } :where(.mc-glass) .pg-foot p { display: flex; gap: 8px; max-width: 62ch; } :where(.mc-glass) .pg-foot p .g-ic { margin-top: 2px; } :where(.mc-glass) .pg-foot strong { color: var(--g-label); font-weight: 600; } @media print { :where(.mc-glass) :is([data-g-sidebar], [data-g-tabbar], .g-navbar, .g-bottom-edge, .mstudio, .pg-cta, #print, #sortSeg, .g-largehead .g-chip) { display: none !important; } :where(.mc-glass) .g-app { display: block; } :where(.mc-glass) .g-main { padding: 0; } :where(.mc-glass) .g-content { max-width: none; padding: 0; } :where(.mc-glass) .g-card, :where(.mc-glass) .g-list { box-shadow: inset 0 0 0 .5px var(--g-sep); break-inside: avoid; } } /* ── Account ────────────────────────────────────────────────────── */ :where(.mc-glass) .ac-detail .g-list > li > .g-cell::before { display: none; } :where(.mc-glass) .ac-detail .g-list > li:not([hidden]) ~ li:not([hidden]) > .g-cell::before { display: block; } :where(.mc-glass) .ac-free h3 + p { margin-top: 4px; } :where(.mc-glass) .ac-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; max-width: 680px; } :where(.mc-glass) .ac-nav { display: grid; gap: 22px; } :where(.mc-glass) .ac-detail { min-width: 0; } :where(.mc-glass) .ac-layout[data-mode="detail"] .ac-nav { display: none; } :where(.mc-glass) .ac-layout[data-mode="list"] .ac-detail { display: none; } :where(.mc-glass) .ac-banner { margin-bottom: 16px; max-width: 680px; } :where(.mc-glass) .ac-banner .ac-link { all: unset; cursor: pointer; color: var(--g-tint); } :where(.mc-glass) .ac-banner .ac-link:hover { text-decoration: underline; } :where(.mc-glass) .ac-profile .g-cell { padding: 14px 16px; gap: 14px; } :where(.mc-glass) .ac-avatar { width: 60px; height: 60px; font-size: 24px; } :where(.mc-glass) .ac-signout { color: var(--g-red); } :where(.mc-glass) .ac-ptitle { display: none; margin-bottom: 14px; padding: 0 16px; } :where(.mc-glass) .ac-panel > * + * { margin-top: 0; } :where(.mc-glass) .ac-gap { margin-top: 28px !important; } :where(.mc-glass) .ac-cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } :where(.mc-glass) .ac-cta .g-btn { flex: 1 1 auto; } @media (min-width: 560px) { :where(.mc-glass) .ac-cta .g-btn { flex: 0 0 auto; } } :where(.mc-glass) .ac-stack { display: grid; gap: 10px; margin-top: 22px; } :where(.mc-glass) .ac-destructive .g-cell-title { color: var(--g-red); } :where(.mc-glass) .ac-free { display: grid; gap: 14px; justify-items: start; padding: 18px; } :where(.mc-glass) .ac-free .g-btn { margin-top: 2px; } :where(.mc-glass) .ac-balance { display: grid; gap: 12px; padding: 18px; } :where(.mc-glass) .ac-balance .g-metric { font-size: 44px; margin-top: 4px; } :where(.mc-glass) .ac-included .g-cell { min-height: 48px; } :where(.mc-glass) .ac-radio { accent-color: var(--g-tint); width: 22px; height: 22px; margin: 0; flex: none; } :where(.mc-glass) .ac-inline { flex: 1 1 55%; min-width: 0; border: 0; background: transparent; color: var(--g-label); font: inherit; font-size: calc(var(--g-t-body) * var(--g-scale)); text-align: right; padding: 4px 0; } :where(.mc-glass) .ac-inline::placeholder { color: var(--g-label-3); } :where(.mc-glass) .ac-inline:focus { outline: none; } :where(.mc-glass) .g-cell:has(.ac-inline:focus-visible) { outline: 3px solid color-mix(in srgb, var(--g-tint) 45%, transparent); outline-offset: -3px; border-radius: var(--g-r-cell); } :where(.mc-glass) .ac-date { width: auto; min-height: 34px; padding: 4px 10px; } :where(.mc-glass) .ac-err { display: flex; align-items: center; gap: 6px; color: var(--g-label); margin-top: 8px; } :where(.mc-glass) .ac-mono { font-family: var(--g-mono); font-size: calc(15px * var(--g-scale)); letter-spacing: 0; } :where(.mc-glass) .ac-code { text-align: center; font: 500 calc(26px * var(--g-scale))/1 var(--g-mono); letter-spacing: .12em; min-height: 56px; margin-top: 16px; text-transform: none; } :where(.mc-glass) .ac-qr { display: grid; justify-items: center; gap: 8px; margin: 18px 0 22px; } :where(.mc-glass) .ac-qr-box { width: 188px; height: 188px; padding: 12px; border-radius: 16px; background: #fff; color: #000; box-shadow: inset 0 0 0 .5px var(--g-sep); } /* a QR must stay dark on light in both themes */ :where(.mc-glass) .ac-codes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--g-sep); border-radius: var(--g-r-cell); overflow: hidden; } :where(.mc-glass) .ac-codes li { background: var(--g-bg-2); padding: 12px 14px; font: 500 calc(16px * var(--g-scale))/1.2 var(--g-mono); text-align: center; } :where(.mc-glass) .ac-preview { background: var(--g-bg-2); border-radius: var(--g-r-cell); padding: 16px; display: grid; gap: 8px; } :where(.mc-glass) .ac-preview .q-stem { margin: 0; } :where(.mc-glass) .ac-slider .g-cell-main { gap: 4px; } :where(.mc-glass) .ac-range { display: flex; align-items: center; gap: 12px; } :where(.mc-glass) .ac-a { font-family: var(--g-font); color: var(--g-label-2); line-height: 1; flex: none; } :where(.mc-glass) .ac-a.sm { font-size: 13px; } :where(.mc-glass) .ac-a.lg { font-size: 24px; } @media (min-width: 1024px) { :where(.mc-glass) .ac-layout { max-width: none; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); gap: 32px; } :where(.mc-glass) .ac-layout[data-mode] .ac-nav, :where(.mc-glass) .ac-layout[data-mode] .ac-detail { display: grid; } :where(.mc-glass) .ac-detail { display: block !important; max-width: 680px; } :where(.mc-glass) .ac-nav { position: sticky; top: 64px; gap: 18px; } :where(.mc-glass) .ac-ptitle { display: block; } :where(.mc-glass) .ac-banner { max-width: none; } :where(.mc-glass) .ac-nav .g-cell[aria-current="page"] { background: var(--g-fill-3); } :where(.mc-glass) .ac-nav .g-cell[aria-current="page"] .g-cell-title { color: var(--g-tint); font-weight: 600; } :where(.mc-glass) .ac-nav .g-cell-title { white-space: nowrap; } :where(.mc-glass) .ac-nav .g-cell-value { max-width: 9em; overflow: hidden; text-overflow: ellipsis; font-size: calc(15px * var(--g-scale)); } } @media (min-width: 1024px) and (max-width: 1140px) { :where(.mc-glass) .ac-nav .g-cell-value { display: none; } } @media (max-width: 560px) { :where(.mc-glass) .ac-theme { flex-wrap: wrap; } :where(.mc-glass) .ac-theme .g-seg { flex: 1 1 100%; margin-left: 42px; } } /* ── Showcase + system pages (search, ai, upgrade, states) ───────── */ :where(.mc-glass) .sh-wrap { max-width: 680px; display: grid; gap: 28px; } :where(.mc-glass) .sh-wrap.sh-center { margin-inline: auto; } :where(.mc-glass) .sh-lede { font-weight: 400; color: var(--g-label); max-width: 44ch; } :where(.mc-glass) .sh-actions { display: flex; gap: 10px; flex-wrap: wrap; } :where(.mc-glass) .sh-keys { display: inline-flex; gap: 4px; } :where(.mc-glass) .sh-off .g-cell-title { color: var(--g-label-2); } :where(.mc-glass) .sh-off .g-tile-ic { opacity: .6; } :where(.mc-glass) .sh-hero { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 24px 0 4px; } :where(.mc-glass) .sh-hero p { max-width: 42ch; } :where(.mc-glass) .sh-code { font: 700 72px/1 var(--g-font-rounded); letter-spacing: -.03em; color: var(--g-fill); } :where(.mc-glass) .sh-search { all: unset; box-sizing: border-box; cursor: text; display: flex; align-items: center; gap: 8px; width: min(100%, 420px); height: 44px; margin-top: 10px; padding: 0 14px; border-radius: 12px; background: var(--g-fill-3); color: var(--g-label-2); font-size: calc(var(--g-t-body) * var(--g-scale)); } :where(.mc-glass) .sh-search kbd { margin-left: auto; background: transparent; } :where(.mc-glass) .sh-search:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); } :where(.mc-glass) .sh-expired { display: grid; gap: 14px; justify-items: start; padding: 20px; } :where(.mc-glass) .sh-ghost { opacity: .7; } /* Spotlight row layout and native clear button (shell markup uses .g-cell-main outside .g-cell; reported for system.css) */ :where(.mc-glass) .g-spot-item .g-cell-main { display: grid; gap: 1px; flex: 1; min-width: 0; } :where(.mc-glass) .g-spot-item .g-cell-main > span:first-child { font-size: calc(var(--g-t-body) * var(--g-scale)); line-height: 1.25; } :where(.mc-glass) .g-spot-in input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } /* ── Screen map ──────────────────────────────────────────────────── */ :where(.mc-glass) .ix-top { display: flex; align-items: center; justify-content: space-between; max-width: 760px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) var(--g-gutter) 6px; } :where(.mc-glass) .ix-main { padding-bottom: 96px; } :where(.mc-glass) .ix-lede { font-weight: 400; max-width: 46ch; margin-bottom: 28px; } :where(.mc-glass) .ix-group { margin-top: 35px; } :where(.mc-glass) .ix-row { padding: 10px 16px 10px 10px; gap: 14px; } :where(.mc-glass) .ix-th { --s: .12; position: relative; flex: none; width: 160px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--g-bg-3); box-shadow: inset 0 0 0 .5px var(--g-sep); pointer-events: none; } :where(.mc-glass) .ix-th iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; transform: scale(var(--s)); opacity: 0; transition: opacity var(--g-d-base) linear; pointer-events: none; } :where(.mc-glass) .ix-th.on iframe { opacity: 1; } :where(.mc-glass) .ix-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--g-label-2); } :where(.mc-glass) .ix-th.on .ix-ph { display: none; } :where(.mc-glass) .ix-row .g-cell-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :where(.mc-glass) .ix-foot { margin-top: 28px; padding: 0 16px; } @media (max-width: 560px) { :where(.mc-glass) .ix-th { width: 112px; } } } /* 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 .g-chart-axis > span:last-child { color: var(--g-label); font-weight: 600; } :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); } } }