/* Echo Guide — premium teaching modules
   Deliberately scoped to #echo so other guides remain unchanged. */

#echo{
  --echo-teal:#0f766e;
  --echo-teal-dark:#0a514c;
  --echo-teal-tint:#e9f5f3;
  --echo-purple:#67508b;
  --echo-purple-dark:#44335f;
  --echo-purple-tint:#f1edf7;
  --echo-amber:#b76c00;
  --echo-amber-tint:#fff3c4;
  --echo-stop:var(--stop,#9c1010);
  --echo-rule:var(--rule-hair,#d8d4cd);
  --echo-soft:var(--rule-soft,#e8e4dc);
  --echo-warm:var(--paper-warm,#faf7f2);
}

#echo :is(.echo-emergency,.echo-action-strip,.echo-scenario-grid,.echo-console,
  .echo-atlas,.echo-case-thread,.echo-timeline,.echo-comparison,.echo-report-line,
  .fill-page){min-width:0;max-width:100%}

#echo :is(.echo-emergency,.echo-action-strip,.echo-scenario-grid,.echo-console,
  .echo-atlas,.echo-case-thread,.echo-timeline,.echo-comparison){margin:6px 0}

#echo :is(.echo-emergency,.echo-action-strip,.echo-scenario,.echo-console,
  .echo-atlas-card,.echo-case-thread,.echo-timeline,.echo-comparison,
  .echo-report-line){break-inside:avoid;page-break-inside:avoid}

#echo :is(.echo-emergency,.echo-action-strip,.echo-scenario-grid,.echo-console,
  .echo-atlas,.echo-case-thread,.echo-timeline,.echo-comparison,.echo-report-line) *{
  min-width:0;
  overflow-wrap:break-word;
}

/* Five-condition red / amber strip for findings that change the next action. */
#echo .echo-emergency{
  display:grid;
  grid-template-columns:minmax(74px,.72fr) repeat(5,minmax(0,1fr));
  border:1.25px solid var(--echo-stop);
  background:var(--echo-amber-tint);
  color:var(--ink,#0b0b0c);
  font-size:7pt;
  line-height:1.23;
}

#echo .echo-emergency > :is(.echo-emergency-label,.label,.lbl){
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:5px 7px;
  background:var(--echo-stop);
  color:#fff;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:6.9pt;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.15;
  text-align:center;
  text-transform:uppercase;
}

#echo .echo-emergency > :is(.echo-emergency-label,.label,.lbl)::before{
  content:"!";
  display:grid;
  place-items:center;
  width:14px;
  height:14px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  font:800 7pt/1 "JetBrains Mono",ui-monospace,monospace;
}

#echo .echo-emergency > :is(.echo-emergency-cell,.cell){
  padding:5px 6px 6px;
  border-right:1px dashed rgba(156,16,16,.38);
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));
}

#echo .echo-emergency > :is(.echo-emergency-cell,.cell):last-child{border-right:0}

#echo .echo-emergency > :is(.echo-emergency-cell,.cell) > :is(.k,.label,.cell-label,strong):first-child{
  display:block;
  margin-bottom:2px;
  color:var(--echo-stop);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:6.9pt;
  font-weight:800;
  letter-spacing:.055em;
  line-height:1.15;
  text-transform:uppercase;
}

/* One consistent workflow: acquire, grade, reconcile, report. */
#echo .echo-action-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--ink,#0b0b0c);
  background:#fff;
  counter-reset:echo-action;
}

#echo .echo-action-strip > :is(.echo-action,.action,div,li){
  position:relative;
  padding:6px 7px 6px 29px;
  border-right:1px solid var(--echo-rule);
  color:var(--ink-2,#2b2b2f);
  font-size:7.1pt;
  line-height:1.24;
  list-style:none;
  counter-increment:echo-action;
}

#echo .echo-action-strip > :is(.echo-action,.action,div,li):last-child{border-right:0}

#echo .echo-action-strip > :is(.echo-action,.action,div,li)::before{
  content:counter(echo-action,decimal-leading-zero);
  position:absolute;
  top:6px;
  left:7px;
  color:var(--guide-red-deep,#a6201a);
  font:800 6.9pt/1.2 "JetBrains Mono",ui-monospace,monospace;
}

#echo .echo-action-strip :is(.action-name,.k,strong):first-child{
  display:block;
  margin-bottom:2px;
  color:var(--ink,#0b0b0c);
  font-size:7.2pt;
  font-weight:800;
  letter-spacing:.045em;
  line-height:1.15;
  text-transform:uppercase;
}

#echo .echo-action-strip > :nth-child(1){box-shadow:inset 0 3px 0 var(--echo-teal)}
#echo .echo-action-strip > :nth-child(2){box-shadow:inset 0 3px 0 var(--echo-purple)}
#echo .echo-action-strip > :nth-child(3){box-shadow:inset 0 3px 0 var(--echo-amber)}
#echo .echo-action-strip > :nth-child(4){box-shadow:inset 0 3px 0 var(--guide-red,#da291c)}

/* Scenario cards keep vignettes visually distinct from reference tables. */
#echo .echo-scenario-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

#echo .echo-scenario{
  position:relative;
  padding:8px 9px 8px 12px;
  border:1px solid var(--echo-rule);
  border-left:4px solid var(--echo-purple);
  background:linear-gradient(135deg,var(--echo-purple-tint),#fff 62%);
  color:var(--ink-2,#2b2b2f);
  font-size:7.1pt;
  line-height:1.3;
}

#echo .echo-scenario:nth-child(even){
  border-left-color:var(--echo-teal);
  background:linear-gradient(135deg,var(--echo-teal-tint),#fff 62%);
}

#echo .echo-scenario :is(.scenario-title,.title,h3,h4){
  margin:0 0 3px;
  color:var(--ink,#0b0b0c);
  font-size:8.2pt;
  font-weight:800;
  line-height:1.12;
}

#echo .echo-scenario :is(p,ul,ol){margin:3px 0}
#echo .echo-scenario :is(ul,ol){padding-left:15px}
#echo .echo-scenario :is(.answer,.takeaway){font-weight:700;color:var(--echo-purple-dark)}
#echo .echo-scenario:nth-child(even) :is(.answer,.takeaway){color:var(--echo-teal-dark)}

/* Stylized machine console: dark scan field plus tactile control legend. */
#echo .echo-console{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(172px,.85fr);
  gap:0;
  overflow:hidden;
  border:1px solid var(--ink,#0b0b0c);
  border-radius:3px;
  background:#17191d;
  color:#fff;
}

#echo .console-screen{
  position:relative;
  min-height:112px;
  padding:11px 12px;
  overflow:hidden;
  border-right:1px solid #42474e;
  background:
    linear-gradient(rgba(62,207,189,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(62,207,189,.07) 1px,transparent 1px),
    radial-gradient(circle at 50% 52%,#173d3b 0,#0b2020 48%,#061313 100%);
  background-size:16px 16px,16px 16px,auto;
  color:#d7fffa;
  font:600 7.1pt/1.35 "JetBrains Mono",ui-monospace,monospace;
}

#echo .console-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 0 47%,rgba(125,255,233,.15) 49%,transparent 51%);
}

#echo .console-screen :is(.screen-title,.readout,.k){
  position:relative;
  z-index:1;
  color:#8ff1e2;
  font-weight:800;
  letter-spacing:.065em;
  text-transform:uppercase;
}

#echo .console-screen :is(.screen-value,.value,.v){color:#fff;font-weight:700}

#echo .echo-console :is(.console-controls,.knob-bank){
  display:grid;
  align-content:start;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  padding:8px;
  background:#25282d;
}

#echo .console-knob{
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  align-items:center;
  gap:6px;
  min-height:39px;
  padding:4px;
  border-bottom:1px solid #42474e;
  color:#dfe1e4;
  font-size:6.9pt;
  line-height:1.16;
}

#echo .console-knob::before{
  content:"";
  width:24px;
  height:24px;
  border:2px solid #c8cbd0;
  border-radius:50%;
  background:
    linear-gradient(58deg,transparent 47%,var(--guide-red,#da291c) 48% 53%,transparent 54%),
    radial-gradient(circle,#5c6168 0 42%,#30343a 44% 62%,#111317 64%);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
}

#echo .console-knob :is(.knob-name,.k,strong){
  display:block;
  color:#fff;
  font-size:6.9pt;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#echo .console-knob :is(.knob-effect,.v,small){display:block;color:#bfc4ca;font-size:6.9pt}

/* M-mode / spectral / color atlas cards. */
#echo .echo-atlas{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

#echo .echo-atlas-card{
  display:flex;
  min-height:0;
  overflow:hidden;
  border:1px solid var(--echo-rule);
  background:#fff;
  flex-direction:column;
}

#echo .echo-atlas-card :is(figure,.atlas-figure){margin:0}

#echo .echo-atlas-card :is(img,svg,.atlas-image){
  display:block;
  width:100%;
  max-width:100%;
  height:104px;
  object-fit:contain;
  border-bottom:1px solid var(--echo-rule);
  background:#0d1014;
}

#echo .echo-atlas-card :is(.atlas-body,figcaption){
  padding:6px 7px 7px;
  color:var(--ink-2,#2b2b2f);
  font-size:7pt;
  line-height:1.26;
}

#echo .echo-atlas-card :is(.atlas-title,.k,strong):first-child{
  display:block;
  margin-bottom:2px;
  color:var(--ink,#0b0b0c);
  font-size:7.2pt;
  font-weight:800;
  line-height:1.15;
}

#echo .echo-atlas-card :is(.atlas-pearl,.pearl){
  display:block;
  margin-top:4px;
  padding-top:3px;
  border-top:1px dotted var(--echo-rule);
  color:var(--guide-red-deep,#a6201a);
  font-weight:700;
}

/* Worked case: an evidence thread rather than a disconnected answer box. */
#echo .echo-case-thread{
  padding:2px 0 2px 26px;
  border-left:2px solid var(--echo-purple);
  counter-reset:echo-case;
}

#echo .echo-case-thread > :is(.case-step,.thread-step,li,div){
  position:relative;
  padding:5px 7px 6px 9px;
  border-bottom:1px dotted var(--echo-rule);
  color:var(--ink-2,#2b2b2f);
  font-size:7.1pt;
  line-height:1.28;
  list-style:none;
  counter-increment:echo-case;
}

#echo .echo-case-thread > :is(.case-step,.thread-step,li,div):last-child{border-bottom:0}

#echo .echo-case-thread > :is(.case-step,.thread-step,li,div)::before{
  content:counter(echo-case);
  position:absolute;
  top:5px;
  left:-34px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--echo-purple);
  color:#fff;
  box-shadow:0 0 0 1px var(--echo-purple);
  font:800 6.9pt/1 "JetBrains Mono",ui-monospace,monospace;
}

#echo .echo-case-thread :is(.case-label,.k,strong):first-child{
  color:var(--echo-purple-dark);
  font-weight:800;
}

/* Ordered physiology or acquisition sequence. */
#echo .echo-timeline{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  padding-top:14px;
  counter-reset:echo-time;
}

#echo .echo-timeline > :is(.timeline-step,.step,li,div){
  position:relative;
  padding:9px 8px 5px;
  border-top:2px solid var(--echo-teal);
  color:var(--ink-2,#2b2b2f);
  font-size:7pt;
  line-height:1.25;
  list-style:none;
  counter-increment:echo-time;
}

#echo .echo-timeline > :is(.timeline-step,.step,li,div)::before{
  content:counter(echo-time);
  position:absolute;
  top:-11px;
  left:7px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--echo-teal);
  color:#fff;
  box-shadow:0 0 0 1px var(--echo-teal);
  font:800 6.9pt/1 "JetBrains Mono",ui-monospace,monospace;
}

#echo .echo-timeline :is(.timeline-label,.k,strong):first-child{
  display:block;
  margin-bottom:2px;
  color:var(--echo-teal-dark);
  font-size:7.1pt;
  font-weight:800;
}

/* Side-by-side discriminators: mechanism, measurement, or diagnosis. */
#echo .echo-comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--ink,#0b0b0c);
  background:#fff;
}

#echo .echo-comparison > :is(.comparison-side,.side,section,article,div){
  padding:7px 9px 8px;
  border-right:1px solid var(--ink,#0b0b0c);
  color:var(--ink-2,#2b2b2f);
  font-size:7.1pt;
  line-height:1.28;
}

#echo .echo-comparison > :is(.comparison-side,.side,section,article,div):last-child{border-right:0}

#echo .echo-comparison > :is(.comparison-side,.side,section,article,div):first-child{
  background:linear-gradient(135deg,var(--echo-teal-tint),#fff 67%);
}

#echo .echo-comparison > :is(.comparison-side,.side,section,article,div):last-child{
  background:linear-gradient(135deg,var(--echo-purple-tint),#fff 67%);
}

#echo .echo-comparison :is(.comparison-title,.title,h3,h4){
  margin:0 0 4px;
  padding-bottom:3px;
  border-bottom:2px solid var(--echo-teal);
  color:var(--ink,#0b0b0c);
  font-size:8pt;
  font-weight:800;
  line-height:1.15;
}

#echo .echo-comparison > :last-child :is(.comparison-title,.title,h3,h4){border-bottom-color:var(--echo-purple)}
#echo .echo-comparison :is(ul,ol){margin:3px 0;padding-left:15px}

/* Copy-ready report language. */
#echo .echo-report-line{
  position:relative;
  margin:5px 0;
  padding:7px 9px 7px 88px;
  border:1px solid var(--ink,#0b0b0c);
  border-left:4px solid var(--guide-red,#da291c);
  background:var(--echo-warm);
  color:var(--ink,#0b0b0c);
  font:600 7.1pt/1.32 "JetBrains Mono",ui-monospace,monospace;
}

#echo .echo-report-line::before{
  content:"REPORT LINE";
  position:absolute;
  top:8px;
  left:9px;
  color:var(--guide-red-deep,#a6201a);
  font-size:6.9pt;
  font-weight:800;
  letter-spacing:.065em;
  line-height:1.1;
}

#echo .echo-report-line[data-label]::before{content:attr(data-label)}

#echo .echo-kicker{
  display:flex;
  align-items:center;
  gap:6px;
  margin:5px 0 3px;
  color:var(--guide-red-deep,#a6201a);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:6.9pt;
  font-weight:800;
  letter-spacing:.095em;
  line-height:1.15;
  text-transform:uppercase;
}

#echo .echo-kicker::before{
  content:"";
  width:15px;
  height:3px;
  background:var(--guide-red,#da291c);
  flex:none;
}

/* Page-filling helpers preserve editorial rhythm without artificial whitespace. */
#echo .fill-page{
  display:flex;
  min-height:0;
  flex:1 1 auto;
  flex-direction:column;
}

#echo .fill-page > :is(.fill-grow,.echo-atlas,.echo-scenario-grid,.echo-comparison){flex:1 1 auto}
#echo .fill-page--spread{justify-content:space-between}
#echo .page:not(.sheet){justify-content:space-between}
#echo .page:not(.sheet) > .pfoot{margin-top:0}
#echo .fill-page--balanced{justify-content:space-evenly}
#echo .fill-page :is(p,li,td,th,dd,dt){font-size:7.1pt;line-height:1.29}
#echo .fill-page--dense :is(p,li,td,th,dd,dt){font-size:6.9pt;line-height:1.23}
#echo .fill-page--airy :is(p,li,td,th,dd,dt){font-size:7.2pt;line-height:1.34}

@media print{
  #echo :is(.echo-emergency,.echo-action-strip,.echo-scenario,.echo-console,
    .echo-atlas-card,.echo-case-thread,.echo-timeline,.echo-comparison,
    .echo-report-line){
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    box-shadow:none;
  }

  #echo :is(.echo-emergency,.echo-action-strip,.echo-scenario-grid,.echo-console,
    .echo-atlas,.echo-case-thread,.echo-timeline,.echo-comparison){margin-top:5px;margin-bottom:5px}

  #echo :is(.echo-emergency,.echo-action-strip,.echo-scenario,.echo-atlas-card,
    .echo-case-thread,.echo-timeline,.echo-comparison,.echo-report-line),
  #echo :is(.echo-emergency,.echo-action-strip,.echo-scenario,.echo-atlas-card,
    .echo-case-thread,.echo-timeline,.echo-comparison,.echo-report-line) :is(p,li,td,th,dd,dt){
    font-size:7pt;
  }

  #echo .echo-console :is(.console-screen,.console-knob,.console-knob small){font-size:6.9pt}
  #echo .echo-atlas-card :is(img,svg,.atlas-image){height:98px}
}

@media(max-width:700px){
  #echo :is(.echo-emergency,.echo-action-strip,.echo-scenario-grid,.echo-console,
    .echo-atlas,.echo-timeline,.echo-comparison){width:100%;max-width:100%;overflow:hidden}

  #echo :is(.echo-emergency,.echo-action-strip,.echo-scenario,.echo-console,
    .echo-atlas-card,.echo-case-thread,.echo-timeline,.echo-comparison,
    .echo-report-line){font-size:13px;line-height:1.42}

  #echo .echo-emergency{grid-template-columns:repeat(2,minmax(0,1fr))}
  #echo .echo-emergency > :is(.echo-emergency-label,.label,.lbl){grid-column:1/-1;font-size:12px}
  #echo .echo-emergency > :is(.echo-emergency-cell,.cell){padding:9px;border-right:0;border-bottom:1px dashed rgba(156,16,16,.38)}
  #echo .echo-emergency > :is(.echo-emergency-cell,.cell):nth-of-type(even){border-right:1px dashed rgba(156,16,16,.38)}
  #echo .echo-emergency > :is(.echo-emergency-cell,.cell):last-child{grid-column:1/-1;border-right:0;border-bottom:0}
  #echo .echo-emergency > :is(.echo-emergency-cell,.cell) > :is(.k,.label,.cell-label,strong):first-child{font-size:12px}

  #echo .echo-action-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  #echo .echo-action-strip > :is(.echo-action,.action,div,li){padding:10px 9px 10px 34px;border-right:0;border-bottom:1px solid var(--echo-rule);font-size:13px}
  #echo .echo-action-strip > :is(.echo-action,.action,div,li):nth-child(odd){border-right:1px solid var(--echo-rule)}
  #echo .echo-action-strip > :is(.echo-action,.action,div,li):nth-last-child(-n+2){border-bottom:0}
  #echo .echo-action-strip > :is(.echo-action,.action,div,li)::before{top:11px;left:9px;font-size:11px}
  #echo .echo-action-strip :is(.action-name,.k,strong):first-child{font-size:12px}

  #echo :is(.echo-scenario-grid,.echo-atlas,.echo-comparison){grid-template-columns:minmax(0,1fr)}
  #echo .echo-scenario{padding:11px 12px 11px 14px;font-size:13px}
  #echo .echo-scenario :is(.scenario-title,.title,h3,h4){font-size:15px}

  #echo .echo-console{grid-template-columns:minmax(0,1fr)}
  #echo .console-screen{min-height:150px;border-right:0;border-bottom:1px solid #42474e;font-size:13px}
  #echo .echo-console :is(.console-controls,.knob-bank){grid-template-columns:repeat(2,minmax(0,1fr));padding:9px}
  #echo .console-knob{grid-template-columns:32px minmax(0,1fr);min-height:48px;font-size:12px}
  #echo .console-knob::before{width:29px;height:29px}
  #echo .console-knob :is(.knob-name,.k,strong),
  #echo .console-knob :is(.knob-effect,.v,small){font-size:12px}

  #echo .echo-atlas-card :is(img,svg,.atlas-image){height:auto;min-height:150px;max-height:260px}
  #echo .echo-atlas-card :is(.atlas-body,figcaption){padding:10px 11px;font-size:13px}
  #echo .echo-atlas-card :is(.atlas-title,.k,strong):first-child{font-size:14px}

  #echo .echo-case-thread{padding-left:29px}
  #echo .echo-case-thread > :is(.case-step,.thread-step,li,div){padding:9px 8px 10px 11px;font-size:13px}
  #echo .echo-case-thread > :is(.case-step,.thread-step,li,div)::before{top:9px;left:-38px;width:21px;height:21px;font-size:11px}

  #echo .echo-timeline{display:block;padding:0 0 0 28px}
  #echo .echo-timeline > :is(.timeline-step,.step,li,div){padding:9px 8px 11px 13px;border-top:0;border-left:2px solid var(--echo-teal);font-size:13px}
  #echo .echo-timeline > :is(.timeline-step,.step,li,div)::before{top:9px;left:-11px;width:18px;height:18px;font-size:11px}
  #echo .echo-timeline :is(.timeline-label,.k,strong):first-child{font-size:13px}

  #echo .echo-comparison > :is(.comparison-side,.side,section,article,div){padding:11px 12px;border-right:0;border-bottom:1px solid var(--ink,#0b0b0c);font-size:13px}
  #echo .echo-comparison > :is(.comparison-side,.side,section,article,div):last-child{border-bottom:0}
  #echo .echo-comparison :is(.comparison-title,.title,h3,h4){font-size:15px}

  #echo .echo-report-line{padding:31px 11px 10px;border-left-width:4px;font-size:13px;line-height:1.45}
  #echo .echo-report-line::before{top:10px;left:11px;font-size:11px}
  #echo .echo-kicker{font-size:11px;line-height:1.25}

  #echo .fill-page{display:block;flex:none}
  #echo .fill-page :is(p,li,td,th,dd,dt),
  #echo .fill-page--dense :is(p,li,td,th,dd,dt),
  #echo .fill-page--airy :is(p,li,td,th,dd,dt){font-size:13px;line-height:1.42}
}

@media(max-width:420px){
  #echo .echo-emergency,
  #echo .echo-action-strip,
  #echo .echo-console :is(.console-controls,.knob-bank){grid-template-columns:minmax(0,1fr)}

  #echo .echo-emergency > :is(.echo-emergency-cell,.cell),
  #echo .echo-action-strip > :is(.echo-action,.action,div,li){grid-column:auto;border-right:0;border-bottom:1px solid var(--echo-rule)}

  #echo .echo-action-strip > :is(.echo-action,.action,div,li):nth-last-child(2){border-bottom:1px solid var(--echo-rule)}
  #echo .echo-action-strip > :is(.echo-action,.action,div,li):last-child{border-bottom:0}
}