/* MEDCUE GLASS · Reference panel (public/js/reference-panel.js).
   A static reference beside the question reader. Opaque, quiet, tokens only; no glass on content.
   >= 1440px   a column in the LEFT margin (non-modal dialog[data-docked]), fixed beside the reading column: it never moves or resizes it.
   641-1439px  a modal side sheet from the left. <= 640px a modal bottom sheet.
   Zones are always named in text (Yellow / Red / Blue); the dot is a second cue, never the only one. */
@layer glass.tokens, glass.base, glass.components, glass.shell, glass.page;

@layer glass.page {

:where(.mc-glass) dialog.ref-panel {
  --ref-control-height: 40px;
  --ref-ink: var(--g-label);
  --ref-quiet: var(--g-label-2);
  position: fixed; margin: 0; padding: 0; border: 0; overflow: hidden;
  flex-direction: column; box-sizing: border-box;
  background: var(--g-bg-2); color: var(--ref-ink); font-family: var(--g-font);
  box-shadow: 0 0 0 .5px var(--g-sep), var(--g-pop-shadow);
}
:where(.mc-glass) dialog.ref-panel[open] { display: flex; }
:where(.mc-glass) dialog.ref-panel::backdrop { background: rgb(0 0 0 / .28); }
:where(.mc-glass) dialog.ref-panel :is(h2, h3, h4, p, ul, dl, dd) { margin: 0; }
:where(.mc-glass) dialog.ref-panel ul { padding: 0; list-style: none; }
:where(.mc-glass) dialog.ref-panel [hidden] { display: none !important; }

/* Docked: a quiet column in the left margin, hugging the reading column, below the top bar */
@media (min-width: 1440px) {
  :where(.mc-glass) dialog.ref-panel[data-docked] {
    z-index: 55; inset: 72px calc(50% + var(--r-main) / 2 + 24px) 24px auto;
    width: min(340px, calc((100% - var(--r-main)) / 2 - 48px)); height: auto; max-width: none; max-height: none;
    border-radius: var(--g-r-card); box-shadow: 0 0 0 .5px var(--g-sep);
  }
}

/* Sheets below 1440: side sheet from the left (tablet, laptop), bottom sheet on phones */
@media (max-width: 1439.98px) {
  :where(.mc-glass) dialog.ref-panel {
    inset: 0 auto 0 0; width: min(400px, calc(100vw - 48px)); height: 100dvh; max-width: none; max-height: none;
    border-radius: 0 var(--g-r-window) var(--g-r-window) 0;
  }
}
@media (max-width: 640px) {
  :where(.mc-glass) dialog.ref-panel {
    inset: auto 0 0 0; width: 100%; height: min(88dvh, calc(100dvh - max(14px, env(safe-area-inset-top))));
    border-radius: 14px 14px 0 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 1439.98px) {
    :where(.mc-glass) dialog.ref-panel[open] { animation: ref-side-in var(--g-d-move) var(--g-spring-smooth); }
  }
  @media (max-width: 640px) {
    :where(.mc-glass) dialog.ref-panel[open] { animation: ref-sheet-in var(--g-d-move) var(--g-spring-smooth); }
  }
  @media (min-width: 1440px) {
    :where(.mc-glass) dialog.ref-panel[data-docked][open] { animation: ref-dock-in var(--g-d-base) var(--g-spring-smooth); }
  }
  @keyframes ref-side-in { from { transform: translateX(-100%); } }
  @keyframes ref-sheet-in { from { transform: translateY(100%); } }
  @keyframes ref-dock-in { from { opacity: 0; transform: translateX(-12px); } }
}

/* Grabber (phone only, decorative; the Close button is the control) */
:where(.mc-glass) .ref-grab { display: none; flex: none; height: 18px; place-items: center; }
:where(.mc-glass) .ref-grab::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--g-fill); }
@media (max-width: 640px) { :where(.mc-glass) .ref-grab { display: grid; } }

/* Header and tools */
:where(.mc-glass) .ref-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px 18px; }
:where(.mc-glass) .ref-title { flex: 1; font: 600 calc(var(--g-t-headline) * var(--g-scale))/1.25 var(--g-font); letter-spacing: -.01em; }
:where(.mc-glass) .ref-x { flex: none; width: var(--ref-control-height); height: var(--ref-control-height); padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--g-tint); cursor: pointer; }
:where(.mc-glass) .ref-x:hover { background: var(--g-fill-3); }
:where(.mc-glass) .ref-x .g-ic { width: 20px; height: 20px; }
:where(.mc-glass) .ref-tools { flex: none; display: grid; gap: 8px; padding: 2px 18px 10px; }
:where(.mc-glass) .ref-tools .g-search .g-field { min-height: var(--ref-control-height); font-size: calc(var(--g-t-callout) * var(--g-scale)); }
:where(.mc-glass) .ref-count { min-height: 0; font: 400 calc(var(--g-t-caption) * var(--g-scale))/1.3 var(--g-font); color: var(--ref-quiet); }
:where(.mc-glass) .ref-count:empty { display: none; }
:where(.mc-glass) .ref-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; }
:where(.mc-glass) .ref-tabs--bands { margin-top: 8px; }
:where(.mc-glass) .ref-tab { min-height: var(--ref-control-height); padding: 6px 4px; border: 0; border-radius: var(--g-r-capsule); background: var(--g-fill-3); color: var(--g-label); font: 500 calc(var(--g-t-footnote) * var(--g-scale))/1.3 var(--g-font); cursor: pointer; overflow-wrap: anywhere; }
:where(.mc-glass) .ref-tab:hover { background: var(--g-fill-2); }
:where(.mc-glass) .ref-tab[aria-checked="true"] { background: var(--g-tint-fill); color: var(--g-tint-on); }
:where(.mc-glass) .ref-tab--sm { font-size: calc(var(--g-t-footnote) * var(--g-scale)); }
@media (max-width: 1439.98px) and (pointer: coarse), (max-width: 640px) {
  :where(.mc-glass) dialog.ref-panel { --ref-control-height: 44px; }
}
:where(.mc-glass) dialog.ref-panel :is(.ref-tab, .ref-x, .ref-retry, summary, .ref-scroll, .ref-src a):focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: 1px; }

/* Content */
:where(.mc-glass) .ref-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px max(20px, env(safe-area-inset-bottom)); border-top: .5px solid var(--g-sep); }
:where(.mc-glass) .ref-h3 { margin-top: 12px; font: 600 calc(var(--g-t-subhead) * var(--g-scale))/1.3 var(--g-font); letter-spacing: -.005em; }
:where(.mc-glass) .ref-cap, :where(.mc-glass) .ref-sub { margin-top: 6px; font: 400 calc(var(--g-t-caption) * var(--g-scale))/1.4 var(--g-font); color: var(--ref-quiet); }
:where(.mc-glass) .ref-about { margin-top: 6px; }
:where(.mc-glass) .ref-about p { margin-top: 6px; font: 400 calc(var(--g-t-caption) * var(--g-scale))/1.4 var(--g-font); color: var(--ref-quiet); }
:where(.mc-glass) .ref-state { padding: 22px 2px; font: 400 calc(var(--g-t-subhead) * var(--g-scale))/1.4 var(--g-font); color: var(--ref-quiet); }
:where(.mc-glass) .ref-retry { margin-top: 12px; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--g-r-capsule); background: var(--g-tint-fill); color: var(--g-tint-on); font: 600 calc(var(--g-t-subhead) * var(--g-scale))/1 var(--g-font); cursor: pointer; }

:where(.mc-glass) .ref-group { margin-top: 4px; }
:where(.mc-glass) .ref-h4 { font: 600 calc(var(--g-t-footnote) * var(--g-scale))/1.3 var(--g-font); color: var(--ref-quiet); }
:where(.mc-glass) .ref-group--fold { border-top: .5px solid var(--g-sep); padding-top: 4px; }
:where(.mc-glass) .ref-group--fold > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; }
:where(.mc-glass) .ref-n { margin-left: auto; font: 500 calc(var(--g-t-caption) * var(--g-scale))/1 var(--g-font); color: var(--ref-quiet); font-variant-numeric: tabular-nums; }

/* Disclosure summaries share one chevron */
:where(.mc-glass) dialog.ref-panel summary { cursor: pointer; list-style: none; }
:where(.mc-glass) dialog.ref-panel summary::-webkit-details-marker { display: none; }
:where(.mc-glass) .ref-group--fold > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 4px; border-right: 1.5px solid var(--ref-quiet); border-bottom: 1.5px solid var(--ref-quiet); rotate: 45deg; translate: 0 -2px; }
:where(.mc-glass) .ref-group--fold[open] > summary::after { rotate: 225deg; translate: 0 2px; }
:where(.mc-glass) :is(.ref-about, .ref-sources) > summary { display: inline-flex; align-items: center; min-height: 28px; font: 500 calc(var(--g-t-caption) * var(--g-scale))/1.3 var(--g-font); color: var(--g-tint); }
:where(.mc-glass) :is(.ref-about, .ref-sources) > summary::after { content: "+"; margin-left: 6px; font-weight: 600; }
:where(.mc-glass) :is(.ref-about, .ref-sources)[open] > summary::after { content: "–"; }

/* Rows */
:where(.mc-glass) .ref-rows { margin-top: 4px; }
:where(.mc-glass) .ref-row { padding: 6px 0; border-top: .5px solid var(--g-sep); }
:where(.mc-glass) .ref-row:first-child { border-top: 0; }
:where(.mc-glass) .ref-l { font: 600 calc(var(--g-t-subhead) * var(--g-scale))/1.3 var(--g-font); letter-spacing: -.005em; overflow-wrap: anywhere; }
:where(.mc-glass) .ref-u { margin-left: 6px; font: 400 calc(var(--g-t-caption) * var(--g-scale))/1.3 var(--g-font); color: var(--ref-quiet); white-space: nowrap; }
:where(.mc-glass) .ref-body { margin: 0; }
:where(.mc-glass) .ref-zones { display: grid; gap: 4px; margin-top: 6px; }
:where(.mc-glass) .ref-zones li { display: flex; align-items: baseline; gap: 8px; }
:where(.mc-glass) .ref-z { flex: none; display: inline-flex; align-items: center; gap: 5px; min-width: calc(62px * var(--g-scale)); padding: 2px 8px; border-radius: var(--g-r-capsule); font: 600 calc(var(--g-t-caption) * var(--g-scale))/1.25 var(--g-font); color: var(--g-label); background: color-mix(in srgb, var(--ref-zone, var(--g-fill)) 20%, var(--g-bg-2)); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--ref-zone, var(--g-fill)) 45%, transparent); }
:where(.mc-glass) .ref-z i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ref-zone); }
:where(.mc-glass) .ref-z--yellow { --ref-zone: var(--g-yellow); }
:where(.mc-glass) .ref-z--red { --ref-zone: var(--g-red); }
:where(.mc-glass) .ref-z--blue { --ref-zone: var(--g-blue); }
:where(.mc-glass) .ref-r { min-width: 0; font: 400 calc(var(--g-t-subhead) * var(--g-scale))/1.35 var(--g-font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:where(.mc-glass) .ref-q { margin-top: 4px; font: 400 calc(var(--g-t-caption) * var(--g-scale))/1.4 var(--g-font); color: var(--ref-quiet); overflow-wrap: anywhere; }
:where(.mc-glass) .ref-meta { margin-top: 2px; }

/* Laboratory rows: analyte left, interval and unit right, qualifier underneath */
:where(.mc-glass) .ref-row--lab { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; }
:where(.mc-glass) .ref-row--lab > dt { grid-column: 1; }
:where(.mc-glass) .ref-val { min-width: 0; grid-column: 2; grid-row: 1; margin: 0; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 5px; max-width: 150px; }
:where(.mc-glass) .ref-val .ref-r { font-weight: 600; text-wrap: balance; }
:where(.mc-glass) .ref-val .ref-u { margin: 0; white-space: normal; overflow-wrap: anywhere; }
:where(.mc-glass) .ref-row--lab > .ref-q { grid-column: 1 / -1; margin: 1px 0 0; }
:where(.mc-glass) .ref-more-body { display: grid; gap: 6px; margin-top: 8px; font: 400 calc(var(--g-t-caption) * var(--g-scale))/1.4 var(--g-font); color: var(--ref-quiet); }
:where(.mc-glass) .ref-more-body .ref-src a { color: var(--ref-quiet); text-decoration: underline; text-underline-offset: 2px; }
:where(.mc-glass) .ref-more-h { font-weight: 600; color: var(--ref-ink); }

/* Footer */
:where(.mc-glass) .ref-foot { margin-top: 12px; padding-top: 8px; border-top: .5px solid var(--g-sep); display: grid; gap: 8px; font: 400 calc(var(--g-t-caption) * var(--g-scale))/1.45 var(--g-font); color: var(--ref-quiet); }
:where(.mc-glass) .ref-asat { color: var(--ref-ink); }
:where(.mc-glass) .ref-src { display: grid; gap: 6px; margin-top: 6px; }
:where(.mc-glass) .ref-src a, :where(.mc-glass) .ref-foot a { color: var(--g-tint); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
:where(.mc-glass) .ref-sources > p { margin-top: 6px; }

/* Toolbar: Reference joins the right-hand tools. Where the capsule's equal side tracks cannot hold one more tool without touching it
   (exam mode with its clock, below ~1180px), it moves into More instead; the More item exists only while the bar button is hidden. */
:where(.mc-glass) #m-more #mmRef { display: none; }
@media (max-width: 1180px) {
  :where(.mc-glass) .q-top #refBtn[data-collapse] { display: none; }
  :where(.mc-glass) #m-more #mmRef { display: flex; }
}

/* Toolbar button: open state reads like the other toggles */
:where(.mc-glass) .q-pill#refBtn[aria-expanded="true"] { color: var(--g-tint); }

}