:root{
  --ink:#1a1a1a; --muted:#6a6560; --line:#ded9d0; --bg:#faf8f4;
  --panel:#fff; --accent:#1f4e79; --warn:#8a4b00;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:18px/1.55 Charter,"PT Serif",Palatino,Georgia,"DejaVu Serif",serif}
/* The panel height is set by the window height, so the panels, the results strip and the
   controls fit on one screen without scrolling. */
:root{--ph:max(250px, calc(100vh - 520px))}
header,main,footer{max-width:1560px;margin:0 auto;padding:0 22px}

#err{position:fixed;inset:0 0 auto 0;z-index:99;background:#7a1420;color:#fff;
  padding:9px 14px;font:12.5px/1.4 ui-monospace,Menlo,monospace;white-space:pre-wrap}

.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.mark{font-size:1.7rem;letter-spacing:-.025em;line-height:1.05;white-space:nowrap}
.ghost{color:var(--muted);font:inherit;font-size:.9rem;flex:0 0 auto;
  padding:3px 12px;border:1px solid var(--line);border-radius:5px;
  background:transparent;cursor:pointer}
.ghost:hover{background:#f1ede5;color:var(--ink)}
#aboutBtn{margin-left:auto}                                          /* About and Reset all sit together at the right */
#reset{margin-left:-6px}
.presetlab{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--muted)}
.presetnote{font-size:.86rem;font-style:italic;color:var(--muted);flex:1 1 220px;min-width:0;line-height:1.3}   /* no width cap: wraps only when the header runs out of room */
select{font:inherit;font-size:.9rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;max-width:100%}
#preset{min-width:230px;width:240px}                                 /* the open list still shows every name in full */

.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:0 0 auto}
.seg button{font:inherit;font-size:.92rem;padding:2px 11px;border:0;
  background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{background:#f1ede5;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.seg.sm button{font-size:.84rem;padding:1px 8px}

main{padding-top:10px;padding-bottom:6px}
.panels{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:12px;align-items:stretch}
.panels.lwide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px 10px;position:relative}
.lvopts{position:absolute;left:14px;top:44px;z-index:5;width:290px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:7px;padding:8px 11px 6px;box-shadow:0 3px 12px rgba(0,0,0,.10)}
.lvopts[hidden]{display:none}
.ptsbox{position:absolute;left:14px;top:46px;z-index:4;display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);background:rgba(255,255,255,.92);padding:2px 4px;border-radius:6px}
body:not(.v-spatial) .only-spatial{display:none}
body:not(.v-3d) .only-3d{display:none}
.lvx{position:absolute;right:14px;bottom:12px;z-index:4;background:rgba(255,255,255,.92);padding:5px;line-height:0}
.dzr{position:absolute;right:14px;bottom:12px;z-index:4;background:rgba(255,255,255,.92);font-size:.82rem;padding:2px 9px}
.dzr[hidden]{display:none}
/* the detector's key, in the header's readout slot */
.ph .sub .lg{margin-left:14px;white-space:nowrap}
.lgsw{display:inline-block;width:52px;height:8px;border-radius:2px;margin:0 5px;vertical-align:1px;
  background:linear-gradient(90deg,rgb(40,110,220) 0%,rgb(96,166,245) 19.6%,rgb(228,224,214) 41.1%,rgb(246,186,105) 64.3%,rgb(222,128,30) 100%)}
.val small{font-size:.8em;color:var(--muted)}
.lvx svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the layout expanded to fill the window */
body.lv-expanded{overflow:hidden}
body.lv-expanded::before{content:"";position:fixed;inset:0;background:rgba(40,36,30,.5);z-index:49}
body.lv-expanded #lvPanel{position:fixed;inset:10px;z-index:50;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.25)}
body.lv-expanded #lvPanel canvas{flex:1 1 auto;height:auto;min-height:0}
body:not(.fold-on) .only-fold{display:none}
.ph{display:flex;align-items:center;gap:14px;height:30px;flex-wrap:nowrap}
.ph h2{margin:0;white-space:nowrap;flex:0 0 auto}
.ph .sub{font-size:.88rem;color:var(--muted);margin-left:auto;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ph .sub b{color:var(--ink);font-weight:500}
canvas{display:block;width:100%;height:var(--ph);touch-action:pan-y}
#cvD{cursor:crosshair}
#cvL{cursor:grab}
.ph .lv{font-size:.82rem;padding:1px 8px}
.ph .sub{flex:1 1 auto;min-width:0;text-align:right}
.ph .sp{flex:1 1 auto}
/* the layout's caption (what the drawing simplifies, or how to steer it), beside the scale bar */
.lcap{position:absolute;left:var(--capL,26px);right:58px;bottom:13px;z-index:3;pointer-events:none;
  font-size:.82rem;line-height:1.25;color:var(--muted)}

#cvD.zoomed{cursor:grab}

/* results strip: a compact card, centered, on a pale tint of the accent; one number per cell */
.stats{--rl:#d3dee9;display:flex;flex-wrap:nowrap;align-items:center;width:fit-content;max-width:100%;box-sizing:border-box;
  margin:0 auto 10px;background:#edf2f7;border:1px solid var(--rl);border-radius:10px;padding:5px 6px}
.stat{flex:0 0 auto;padding:0 15px;border-left:1px solid var(--rl);display:flex;flex-direction:column;justify-content:center;min-width:0}
.stat:first-child{border-left:none}
.stat .k{font-size:.76rem;color:#52657a;line-height:1.2;white-space:nowrap}
.stat .v{font-size:1.14rem;line-height:1.72rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v small{font-size:.8rem;color:#52657a;margin-left:.45em}
.stat .v .pre{margin-right:.25em}
.flags{display:flex;flex:0 1 auto;flex-wrap:nowrap;gap:4px 6px;align-items:center;padding:0 8px 0 14px;min-width:0;overflow:hidden;
  border-left:1px solid var(--rl);align-self:stretch}
.flag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:.8rem;line-height:1.25;color:var(--warn);border:1px solid #e6cfae;background:#fdf6ea;
  border-radius:5px;padding:1px 7px}
.flag::before{content:"⚠ ";}
.flag.ok{color:var(--muted);border-color:var(--line);background:transparent}
.flag.ok::before{content:"";}

/* Telescope, Entrance, Spectrograph and Detector share one width; the Disperser box is wider */
.controls{display:grid;grid-template-columns:minmax(196px,1fr) minmax(196px,1fr) minmax(196px,1fr) minmax(352px,1.6fr) minmax(196px,1fr);
  gap:12px;margin-top:10px;align-items:stretch}
.controls section{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px 8px;min-width:0}
h2{font-size:.9rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.gh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.gh h2{margin:0}
.dispgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px}

.ctl{margin-bottom:3px}
.ctl label{display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;font-size:.92rem;line-height:1.25;color:var(--muted);margin-bottom:0}
.ctl .val{color:var(--ink);font-variant-numeric:tabular-nums;font-size:.97rem;white-space:nowrap}
input[type=range]{display:block;width:100%;accent-color:var(--accent);height:16px;margin:0}
sup,sub{line-height:0}
.caserow{display:flex;align-items:center;gap:8px;margin:2px 0 5px;font-size:.92rem;color:var(--muted)}
.caserow select{flex:1 1 auto;min-width:0}
#xGlass{min-width:96px}
.c-disp .caserow{flex-wrap:wrap;row-gap:4px}
.c-disp .kindrow{margin:0 0 6px}
#passSeg{margin-left:auto}

.rds{margin-top:5px;border-top:1px solid var(--line);padding-top:3px}
.rd{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;line-height:1.3;padding:1px 0}
.rd span{color:var(--muted);white-space:nowrap}
.rd b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* visibility by mode and feed */
body.m-ech .only-grat, body.m-grat .only-ech, body.m-ech .only-refl, body.g-tr .only-refl{display:none}
body.m-ech .only-tr, body.g-refl .only-tr{display:none}
body.g-gr .only-refl, body.g-gr .only-tr, body.m-grat.g-gr .no-grism, body.m-ech .only-grism, body.g-tr .only-grism, body.g-refl .only-grism{display:none}
body.c-lens .only-mirror{display:none}
body.m-grat .only-xg, body.m-grat .only-xp, body.m-grat .only-xglass{display:none}
body.x-grating .only-xp, body.x-grating .only-xglass{display:none}
body.x-vph .only-xp, body.x-vph .only-xglass{display:none}
body.x-prism .only-xg{display:none}
body.x-grism .only-xp{display:none}

footer{padding:6px 22px 34px;font-size:.9rem;color:var(--muted);line-height:1.55}
footer p{margin:.5em 0;max-width:120ch}
.src{font-size:.86rem}
/* About the model: a dialog opened from the header */
.about{max-width:640px;width:calc(100% - 40px);border:1px solid var(--line);border-radius:10px;padding:14px 24px 18px;
  background:var(--panel);color:var(--ink);font-size:.95rem;line-height:1.55;box-shadow:0 10px 34px rgba(0,0,0,.22)}
.about::backdrop{background:rgba(40,36,30,.45)}
.about .abhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.about h2{margin:0}
.about p{margin:.6em 0}
#aboutClose{font-size:1.15rem;line-height:1;padding:2px 9px}

@media (max-width:1240px){
  .mark{font-size:1.45rem}                                            /* the header note stays on one line */
  #preset{width:205px;min-width:0}
  .controls{grid-template-columns:repeat(3,minmax(0,1fr))}
  .controls .c-disp{grid-column:span 2}
}
@media (max-width:860px){
  .stats{width:auto;overflow-x:auto;scrollbar-width:none}           /* one row on a phone too: it scrolls sideways */
  .stats .flags{overflow:visible}
  .ptsbox,.lvopts{position:static;width:auto;margin:6px 0 0}
  header,main,footer{padding-left:16px;padding-right:16px}
  .panels,.panels.lwide,.controls{grid-template-columns:minmax(0,1fr)}
  .controls .c-disp{grid-column:auto}
  .dispgrid{grid-template-columns:minmax(0,1fr)}
  :root{--ph:300px}

  .ph{height:auto;flex-wrap:wrap;row-gap:4px}
  .ph .sub{flex-basis:100%;text-align:left;order:9}
  .lvopts{width:calc(100% - 28px)}
  #aboutBtn,#reset{margin-left:0}
}

/* the disperser box is the widest: its readouts sit in two columns */
.c-disp .rds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px}
.c-disp .rd.wide{grid-column:1 / -1}
.c-disp .rd.wide b{white-space:normal;text-align:right}
@media (max-width:860px){ .c-disp .rds{grid-template-columns:minmax(0,1fr)} }