/* LYNNAGEN clinical review layer.
   The five-tier component, the classification row, review tiers, the funnel, the
   provisional ACMG block, the panel picker and the dossier.

   Two rules hold the clinical contract up:

   1. There is exactly ONE tier component. It reads the --tier-* token triples, so a
      theme change redefines tokens and never re-declares the component. Nothing can
      out-cascade a modifier, which is the defect that rendered all five tiers as one
      grey capsule on the default theme.
   2. Nothing outside .tier may carry a saturated hue. Review tier, patient relevance,
      ACMG direction, concordance and coverage notices are all neutral, so the only
      strongly coloured objects on a results screen are the five classifications. */

/* --------------------------------------------------- the one tier component */
.tier{
  display:inline-block;border-radius:var(--r-pill);padding:4px 10px;
  font-size:var(--fs-control);line-height:var(--lh-control);font-weight:var(--w-med);
  white-space:nowrap;
  border:1px solid var(--tier-none-line);
  background:var(--tier-none-bg);
  color:var(--tier-none-fg);
}
.tier--p{background:var(--tier-p-bg);border-color:var(--tier-p-line);color:var(--tier-p-fg)}
.tier--lp{background:var(--tier-lp-bg);border-color:var(--tier-lp-line);color:var(--tier-lp-fg)}
.tier--vus{background:var(--tier-vus-bg);border-color:var(--tier-vus-line);color:var(--tier-vus-fg)}
.tier--lb{background:var(--tier-lb-bg);border-color:var(--tier-lb-line);color:var(--tier-lb-fg)}
.tier--b{background:var(--tier-b-bg);border-color:var(--tier-b-line);color:var(--tier-b-fg)}
/* the dossier headline: the largest and most saturated object in the product */
.tier--lead{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--w-bold);padding:6px 16px}
/* In the worklist the pill keeps to its column: it wraps between its words, hyphenating one too long for a narrow
   column, rather than running over the disorders beside it ("Conflicting classifications" on a 1280-pixel screen
   covered "Complement Component 4b Deficiency"). Its colours stay the component's. */
table.seqvar .tier{white-space:normal;max-width:100%;padding:4px 6px;hyphens:auto;overflow-wrap:anywhere}

/* --------------------------------------------------- classification row */
.class-row{
  display:grid;grid-template-columns:repeat(5,minmax(150px,1fr)) 24px minmax(190px,1fr);
  gap:var(--s3);align-items:stretch;
}
.class-row .spacer{border:0;background:none;padding:0}
@media(max-width:1240px){
  .class-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .class-row .spacer{display:none}
}
@media(max-width:760px){.class-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.class-card{
  appearance:none;text-align:left;font:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  border-top:4px solid var(--line-strong);
  padding:var(--s4);
}
.class-card:hover{background:var(--surface-2)}
.class-card.active{outline:2px solid var(--focus);outline-offset:2px}
.class-card .label{
  display:block;font-size:var(--fs-title);line-height:var(--lh-title);
  font-weight:var(--w-bold);letter-spacing:-.01em;color:var(--text);
}
.class-card .n{display:block;margin-top:var(--s2);font-size:var(--fs-metric);
  line-height:var(--lh-metric);font-weight:var(--w-bold);font-variant-numeric:tabular-nums;color:var(--text)}
.class-card .split{display:block;margin-top:var(--s1);font-size:var(--fs-meta);
  line-height:var(--lh-meta);color:var(--text-2)}
.class-card--p{border-top-color:var(--tier-p-line)}   .class-card--p .label{color:var(--tier-p-fg)}
.class-card--lp{border-top-color:var(--tier-lp-line)} .class-card--lp .label{color:var(--tier-lp-fg)}
.class-card--vus{border-top-color:var(--tier-vus-line)} .class-card--vus .label{color:var(--tier-vus-fg)}
.class-card--lb{border-top-color:var(--tier-lb-line)} .class-card--lb .label{color:var(--tier-lb-fg)}
.class-card--b{border-top-color:var(--tier-b-line)}   .class-card--b .label{color:var(--tier-b-fg)}
/* "No public classification" — never yellow, never filled, never merged into VUS */
.class-card--none{border-top-color:var(--tier-none-line);background:transparent}
.class-card--none .label{color:var(--text-2);font-size:var(--fs-subhead);line-height:var(--lh-subhead)}
.outside-rule{display:none}
@media(max-width:1240px){
  .outside-rule{display:block;grid-column:1/-1;border-top:1px solid var(--line);
    padding-top:var(--s3);margin-top:var(--s2)}
}

/* --------------------------------------------------- review tiers (neutral) */
.lg-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
@media(max-width:900px){.lg-tiers{grid-template-columns:repeat(2,1fr)}}
.lg-tier{
  appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--line-strong);border-radius:var(--r-sm);padding:var(--s3) var(--s4);
}
.lg-tier:hover{background:var(--surface-2)}
.lg-tier.active{outline:2px solid var(--focus);outline-offset:2px}
.lg-tier b{display:block;font-size:var(--fs-metric);line-height:var(--lh-metric);
  font-weight:var(--w-bold);font-variant-numeric:tabular-nums;color:var(--text)}
.lg-tier .tlabel{display:block;margin-top:var(--s1);font-size:var(--fs-control);
  line-height:var(--lh-control);font-weight:var(--w-med);color:var(--text)}
.lg-tier span.tdesc{display:block;margin-top:var(--s1);font-size:var(--fs-meta);
  line-height:var(--lh-meta);color:var(--text-2)}
/* the review-tier token in a worklist row — neutral, one of the four 12px roles */
.lg-tierbadge{
  display:inline-block;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:2px 6px;font-size:var(--fs-micro);line-height:var(--lh-micro);
  font-weight:var(--w-med);letter-spacing:.06em;color:var(--text-2);background:var(--surface-2);
  white-space:nowrap;
}

/* --------------------------------------------------- funnel (neutral) */
.lg-funnel{display:grid;gap:var(--s2)}
.lg-step{
  display:grid;grid-template-columns:1fr 120px;gap:var(--s4);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);
  background:var(--surface);position:relative;overflow:hidden;
}
.lg-step .bar{position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--surface-3)}
.lg-step > *{position:relative}
.lg-step b{display:block;font-size:var(--fs-control);line-height:var(--lh-control);font-weight:var(--w-med)}
.lg-step small{display:block;margin-top:2px;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2)}
.lg-step .n{text-align:right;font-size:var(--fs-title);line-height:var(--lh-title);
  font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.lg-step.terminal{border-color:var(--line-strong)}
.lg-step.terminal .bar{background:var(--surface-3)}

/* --------------------------------------------------- neutral notices */
.lg-note{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2);margin-top:var(--s2)}
.lg-cov{
  border-left:3px solid var(--line-strong);background:var(--surface-2);
  padding:var(--s3) var(--s4);margin-bottom:var(--s3);
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.lg-chip{
  display:inline-block;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:4px 10px;font-size:var(--fs-control);line-height:var(--lh-control);
  color:var(--text-2);background:var(--surface);white-space:nowrap;
}
.lg-chip b{color:var(--text)}
.lg-mono{font-family:var(--font-mono);font-size:var(--fs-mono-id);line-height:var(--lh-mono-id);overflow-wrap:anywhere}
.lg-onpanel{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--text-3);margin-right:var(--s1);vertical-align:middle}

/* --------------------------------------------------- provisional ACMG (neutral) */
.lg-acmg-head{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;flex-wrap:wrap}
/* deliberately plain text, never a chip, never tier-coloured, never larger than the
   20px tier chip above it — it is a separate review dimension, not the classification */
.lg-acmg-class{font-size:var(--fs-subhead);line-height:var(--lh-subhead);
  font-weight:var(--w-med);color:var(--text)}
.lg-points{display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 10px;
  font-size:var(--fs-control);line-height:var(--lh-control);color:var(--text-2);background:var(--surface)}
.lg-points .v{font-weight:var(--w-bold);font-variant-numeric:tabular-nums;color:var(--text)}
.lg-crit{
  border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin:var(--s2) 0;
  background:var(--surface);font-size:var(--fs-body);line-height:var(--lh-body);
}
.lg-crit .code{font-family:var(--font-mono);font-size:var(--fs-mono-id);font-weight:var(--w-bold);color:var(--text)}
.lg-crit .direction{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2);margin-left:var(--s2)}
.lg-crit .caveat{display:block;margin-top:var(--s2);padding-left:var(--s3);
  border-left:2px solid var(--line-strong);font-size:var(--fs-meta);line-height:var(--lh-meta);
  color:var(--text-2);font-style:italic}
.lg-notrun{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.lg-notrun span{border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  padding:3px 8px;font-size:var(--fs-control);line-height:var(--lh-control);color:var(--text-2)}
.lg-notrun-reasons{margin-top:var(--s2);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2)}
/* concordance carries its state in WORDS, never in hue */
.lg-concord{
  display:inline-block;margin-top:var(--s3);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:6px 10px;
  font-size:var(--fs-control);line-height:var(--lh-control);font-weight:var(--w-med);color:var(--text);
  background:var(--surface-2);
}

/* --------------------------------------------------- panel picker */
.lg-panelpicker{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);background:var(--surface)}
.lg-panelpicker .row{display:grid;grid-template-columns:1fr 150px;gap:var(--s3);margin-top:var(--s3)}
@media(max-width:620px){.lg-panelpicker .row{grid-template-columns:1fr}}
.lg-panelpicker textarea{min-height:80px}
.lg-panelstate{margin-top:var(--s3);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2)}
.lg-panelstate.ready{color:var(--text);font-weight:var(--w-med)}
.lg-panelstate.bad{color:var(--text);font-weight:var(--w-med);
  border-left:3px solid var(--line-strong);padding-left:var(--s3)}

/* --------------------------------------------------- dossier internals */
.dossier h3{margin:var(--s5) 0 var(--s2)}
.dossier h3:first-of-type{margin-top:var(--s4)}
.doss-key{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--w-med);
  font-family:var(--font-mono);color:var(--text);margin-top:var(--s3);overflow-wrap:anywhere}
.doss-hgvs{display:block;font-family:var(--font-mono);font-size:var(--fs-mono-id);
  line-height:var(--lh-mono-id);color:var(--text);overflow-wrap:anywhere;margin-top:var(--s1)}
.doss-ids{margin-top:var(--s2);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:var(--s2) var(--s3);
  font-size:var(--fs-control);line-height:var(--lh-control)}
.kv b{color:var(--text-2);font-weight:var(--w-med)}
.evidence,.disease{
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);
  margin:var(--s2) 0;background:var(--surface);
  font-size:var(--fs-body);line-height:var(--lh-body);
}
.evidence strong,.disease strong{font-size:var(--fs-control);font-weight:var(--w-med)}
.lg-ext{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);
  margin-top:var(--s3);background:var(--surface);font-size:var(--fs-control);line-height:var(--lh-control)}
.lg-ext h4{margin:0 0 var(--s2);font-size:var(--fs-subhead);line-height:var(--lh-subhead);font-weight:var(--w-med)}
.lg-ext table{margin-top:var(--s2)}
.lg-ext th,.lg-ext td{padding:6px 8px;font-size:var(--fs-meta);position:static}
pre{font-family:var(--font-mono);font-size:var(--fs-mono-log);line-height:var(--lh-mono-log);
  white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-3);
  border-radius:var(--r-sm);padding:var(--s3);color:var(--text-2)}

/* --------------------------------------------------- reviewer decisions (neutral)
   The reviewer's call is words and weight, never hue: the only coloured objects on the bench
   stay the five classifications, and navy marks what is pressed. "Not saved" is the loudest
   line here by weight and border alone. */
.reviewer-line{margin-top:var(--s1)}
.reviewer-line .btn.quiet{min-height:0;padding:2px 4px;font-size:var(--fs-meta);line-height:var(--lh-meta)}
.dec{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
.dec-bar{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:center}
.dec-btn{appearance:none;cursor:pointer;min-height:32px;padding:4px 8px;
  font:var(--w-med) var(--fs-meta)/var(--lh-meta) var(--font-ui);color:var(--text);
  background:var(--surface);border:1px solid var(--line-input);border-radius:var(--r-sm)}
.dec-btn:hover{background:var(--surface-2)}
.dec-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.dec-btn kbd{margin-left:var(--s1);font:var(--w-reg) var(--fs-micro)/var(--lh-micro) var(--font-mono);color:var(--text-2)}
.dec-now .doss-note{margin-top:var(--s2);color:var(--text)}
.dec-pick:empty{display:none}
.dec-pick{margin-top:var(--s3)}
.dec-pick textarea{min-height:64px;margin-bottom:var(--s2)}
.dec-label{margin-top:var(--s2)}
.btn.dec-small{min-height:32px;padding:4px 12px}
.dec-lab{color:var(--text)}
.dec-op-form{display:inline-flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.dec-op-form input{width:auto;max-width:16em;min-height:32px;padding:4px 8px}
.dec-status{margin-top:var(--s2);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2)}
.dec-status:empty{display:none}
.dec-status--bad{color:var(--text);font-weight:var(--w-bold);font-size:var(--fs-control);line-height:var(--lh-control);
  border:2px solid var(--text);border-radius:var(--r-sm);padding:var(--s2) var(--s3);background:var(--surface-2)}
.dec-history{margin:var(--s1) 0 0;padding-left:var(--s4);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2)}
.dec-history li + li{margin-top:2px}
.dec-history .dec-withdrawn{text-decoration:line-through}
.flag--decision{color:var(--text)}
/* a decision carried from an earlier interpretation that the allele has since outgrown */
.dec-now .strip{margin:var(--s2) 0 0}
/* a write that failed after the reviewer left its case: at the top of whatever is on screen */
.dec-left{margin-bottom:var(--s4)}
.dec-left .dec-status{margin-top:0}
.dec-left .btn.quiet{min-height:0;padding:2px 4px;margin-left:var(--s2);font-size:var(--fs-meta);line-height:var(--lh-meta)}

/* --------------------------------------------------- family analysis (neutral)
   Whose genotypes a case reads (the patient's column, chosen at intake) and, in a family case,
   each member's genotype under an allele. Facts in words; no hue carries a meaning here. */
.patient-choice{margin-top:var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2)}
.patient-choice .actions{margin-top:var(--s2)}
.family-line{margin-top:var(--s1)}
.doss-family{margin-top:var(--s2)}
.doss-family-table{border-collapse:collapse;margin-top:var(--s1);font-size:var(--fs-meta);line-height:var(--lh-meta)}
.doss-family-table th{text-align:left;font-weight:var(--w-bold);padding:2px var(--s3) 2px 0;color:var(--text)}
.doss-family-table td{padding:2px 0;color:var(--text-2)}
.flag--family{color:var(--text)}

/* --------------------------------------------------- forced colours / greyscale
   A signed report gets photocopied and this is a Windows workstation where High
   Contrast overrides every colour. The full text label is always present, so the tier
   survives without hue; here we restore a non-chromatic boundary as well. */
@media (forced-colors: active){
  .tier{border-width:2px;forced-color-adjust:none;background:Canvas;color:CanvasText;border-color:CanvasText}
  .class-card{border-top-width:6px}
  .ev-dot{forced-color-adjust:none;background:CanvasText}
  .ev-dot.off{background:Canvas;border-color:CanvasText}
}