/* Optics Bench → ferronato.me labs identity (see ../portfolio-shell.css).
   Chrome only: the canvas, ray colours and handles are drawn by the script
   and keep their own palette. Loaded last, after the inline <style>. */

body[data-fm-project="optics"]{
  --ink:var(--fm-bg);
  --panel:var(--fm-panel);
  --panel2:var(--fm-panel-2);
  --rule:var(--fm-rule);
  --txt:var(--fm-ink);
  --dim:var(--fm-dim);
  --teal:var(--fm-amber);       /* CSS-side UI accent only; rays stay cyan */
  --amber:var(--fm-amber);
  --mono:var(--fm-mono);
  --ui:var(--fm-sans);
  --fmo-bar-h:92px;             /* sticky toolbar strip height; the page script
                                   measures the real value and overrides this */
  font-family:var(--fm-sans);
  font-size:13px;
}

/* ---------- page flow ----------
   Shared shell order: breadcrumb → hero (masthead + animation) → sticky
   toolbar strip → bench (rails · stage · inspector) → related labs → footer.
   The bench fills the viewport below the sticky strip once you scroll to it;
   the readout status bar stays pinned to the bottom of the viewport. */
html:has(body[data-fm-project="optics"]){height:auto}
body[data-fm-project="optics"]{height:auto;min-height:100vh;overflow-x:hidden;overflow-y:auto}
body[data-fm-project="optics"] main{
  flex:none;
  height:calc(100svh - var(--fmo-bar-h) - 30px);
  min-height:460px;
}
body[data-fm-project="optics"] .fm-related-labs{margin:36px auto 30px}
body[data-fm-project="optics"] .fm-hero-fig{margin-top:32px}

/* ---------- toolbar strip (nav.fm-tabs) ----------
   Single-instrument lab: the sticky strip carries the bench toolbar instead
   of tabs. It spans the bench width (full bleed, 16px gutter) and wraps to a
   second row rather than scrolling, so every control stays reachable. */
body[data-fm-project="optics"] .fm-tabs .fm-wrap{width:calc(100% - 32px);flex-wrap:nowrap;gap:6px 16px;padding:9px 0}
body[data-fm-project="optics"] .fm-tabs .fm-tablist{
  flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  overflow:visible;mask-image:none;-webkit-mask-image:none;
}
body[data-fm-project="optics"] .fm-tabs .fm-tab-actions{gap:6px;padding-left:0;margin-left:auto}
body[data-fm-project="optics"] .fm-tabs .sep{height:22px;background:var(--fm-rule)}
body[data-fm-project="optics"] .fm-tabs .grp{gap:7px}
body[data-fm-project="optics"] .fm-tabs .lab{font-size:10px}
body[data-fm-project="optics"] .fm-tabs .ck{font-size:12px;gap:6px}
body[data-fm-project="optics"] .fm-tabs .ck input{width:13px;height:13px;margin:0}
body[data-fm-project="optics"] .fm-tabs input[type=range]{height:14px;margin:0}
body[data-fm-project="optics"] .fm-tabs select{
  height:26px;padding:0 26px 0 10px;border-radius:999px;
  background:color-mix(in srgb,var(--fm-panel) 80%,transparent);
  color:var(--fm-muted);font:500 11.5px/1 var(--fm-mono);
}
body[data-fm-project="optics"] .fm-tabs select:hover{color:var(--fm-ink)}
/* buttons as .fm-chip pills (ids unchanged) */
body[data-fm-project="optics"] .fm-tabs button.fm-chip{
  min-height:26px;padding:0 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--fm-rule);background:color-mix(in srgb,var(--fm-panel) 80%,transparent);
  color:var(--fm-muted);font:500 11.5px/1 var(--fm-mono);letter-spacing:.02em;
}
body[data-fm-project="optics"] .fm-tabs button.fm-chip:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong)}
body[data-fm-project="optics"] .fm-tabs button.fm-chip.amber{color:var(--fm-amber);border-color:var(--fm-amber-line);background:var(--fm-amber-soft)}
body[data-fm-project="optics"] .fm-tabs button.fm-chip.amber:hover{background:var(--fm-amber);color:var(--fm-amber-ink);border-color:var(--fm-amber)}
body[data-fm-project="optics"] .fm-tabs #helpBtn{min-width:26px;padding:0 9px}
/* segmented controls: pill group, amber on-state */
body[data-fm-project="optics"] .fm-tabs .seg{
  border:1px solid var(--fm-rule);border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--fm-panel) 80%,transparent);
}
body[data-fm-project="optics"] .fm-tabs .seg button{
  min-height:24px;padding:0 12px;border:0;border-radius:0;border-right:1px solid var(--fm-rule);
  background:transparent;color:var(--fm-muted);font:500 11.5px/1 var(--fm-mono);letter-spacing:.02em;
}
body[data-fm-project="optics"] .fm-tabs .seg button:last-child{border-right:0}
body[data-fm-project="optics"] .fm-tabs .seg button:hover{color:var(--fm-ink)}
body[data-fm-project="optics"] .fm-tabs .seg button.on{background:var(--fm-amber-soft);color:var(--fm-amber)}

/* ---------- controls ---------- */
body[data-fm-project="optics"] :is(button,input,select){font-family:var(--fm-sans);font-size:12.5px;color:var(--fm-ink)}
body[data-fm-project="optics"] button{
  min-height:var(--fm-h-ctl);
  padding:0 11px;
  background:var(--fm-panel-2);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
  font-weight:500;
}
body[data-fm-project="optics"] button:hover{border-color:var(--fm-rule-strong);color:var(--fm-ink)}
body[data-fm-project="optics"] button.on{background:var(--fm-amber-soft);border-color:var(--fm-amber-line);color:var(--fm-amber)}
body[data-fm-project="optics"] button.danger:hover{border-color:#FF5D8F;color:#FF5D8F}
body[data-fm-project="optics"] :is(button,input,select):focus-visible{outline:2px solid var(--fm-amber);outline-offset:2px}

body[data-fm-project="optics"] .seg{border:1px solid var(--fm-rule);border-radius:var(--fm-r-ctl);background:var(--fm-panel-2)}
body[data-fm-project="optics"] .seg button{min-height:calc(var(--fm-h-ctl) - 2px);border:0;border-radius:0;border-right:1px solid var(--fm-rule);background:transparent;color:var(--fm-muted)}
body[data-fm-project="optics"] .seg button:last-child{border-right:0}
body[data-fm-project="optics"] .seg button:hover{color:var(--fm-ink)}
body[data-fm-project="optics"] .seg button.on{background:var(--fm-amber-soft);color:var(--fm-amber)}

body[data-fm-project="optics"] select{
  height:var(--fm-h-ctl);
  padding:0 8px;
  background:var(--fm-sunk);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-ctl);
}
body[data-fm-project="optics"] select:hover{border-color:var(--fm-rule-strong)}
body[data-fm-project="optics"] :is(input[type=range],input[type=checkbox],.ck input){accent-color:var(--fm-amber)}

/* labels and readouts */
body[data-fm-project="optics"] :is(.lab,.eyebrow,.div-l){font-family:var(--fm-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fm-dim)}
body[data-fm-project="optics"] .ck{color:var(--fm-muted);font-size:12.5px}
body[data-fm-project="optics"] .ck:hover{color:var(--fm-ink)}
body[data-fm-project="optics"] :is(.mono,#bouncesV,#fadeLenV,#fadeLossV){font-family:var(--fm-mono);color:var(--fm-muted)}

body[data-fm-project="optics"] .sep{height:24px;background:var(--fm-rule)}

/* ---------- rails ---------- */
body[data-fm-project="optics"] .rail{background:var(--fm-panel);border-color:var(--fm-rule)}
body[data-fm-project="optics"] .rail::-webkit-scrollbar-thumb{background:var(--fm-rule-strong)}
body[data-fm-project="optics"] .eyebrow{background:var(--fm-panel);padding:12px 14px 9px;border-bottom:1px solid var(--fm-rule)}

body[data-fm-project="optics"] #shapeGrid{gap:6px;padding:10px}
body[data-fm-project="optics"] .shape{min-height:0;padding:9px 4px;border-radius:var(--fm-r-ctl);color:var(--fm-muted);background:var(--fm-panel-2)}
body[data-fm-project="optics"] .shape svg{color:#4ADEDE}  /* matches the surfaces drawn on the bench */
body[data-fm-project="optics"] .shape span{font-size:10.5px}
body[data-fm-project="optics"] .shape:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong)}

body[data-fm-project="optics"] .item{padding:6px 12px}
body[data-fm-project="optics"] .item:hover{background:var(--fm-panel-2)}
body[data-fm-project="optics"] .item.on{background:var(--fm-amber-soft)}   /* pink edge = selection, as on the bench */
body[data-fm-project="optics"] .item .nm{font-size:12.5px}
body[data-fm-project="optics"] :is(.item .x,.cut .x){min-height:0;background:none;border:0;color:var(--fm-dim)}
body[data-fm-project="optics"] .empty{color:var(--fm-dim);font-size:12px}

/* ---------- stage overlays ---------- */
body[data-fm-project="optics"] .stagewrap{background:var(--fm-sunk)}
body[data-fm-project="optics"] #measureOut{
  background:rgba(25,27,29,.88);
  border:1px solid var(--fm-amber-line);
  border-radius:var(--fm-r-ctl);
  color:var(--fm-amber);
  font-family:var(--fm-mono);
}
body[data-fm-project="optics"] #hint3{background:rgba(25,27,29,.86);border-color:var(--fm-rule);border-radius:var(--fm-r-ctl);color:var(--fm-muted)}

/* ---------- inspector ---------- */
body[data-fm-project="optics"] #inspector{padding:12px 14px 24px}
body[data-fm-project="optics"] .nm-in{font-family:var(--fm-serif);font-size:18px;color:var(--fm-ink);border-bottom-color:var(--fm-rule)}
body[data-fm-project="optics"] .nm-in:focus{border-bottom-color:var(--fm-amber)}
body[data-fm-project="optics"] .ctl-l{font-size:12px;color:var(--fm-muted)}
body[data-fm-project="optics"] .ctl-n{height:24px;background:var(--fm-sunk);border-color:var(--fm-rule);border-radius:4px;font-family:var(--fm-mono)}
body[data-fm-project="optics"] .ctl-n:focus{border-color:var(--fm-amber)}
body[data-fm-project="optics"] .ctl-c{border-color:var(--fm-rule);border-radius:4px;min-height:0}
body[data-fm-project="optics"] .rx-n{font-size:12px;color:var(--fm-muted)}
body[data-fm-project="optics"] .rx-c{color:var(--fm-dim)}
body[data-fm-project="optics"] .rx-p{color:var(--fm-ok)}
body[data-fm-project="optics"] .rx-bar{background:var(--fm-sunk)}
body[data-fm-project="optics"] .derived{
  background:var(--fm-sunk);
  color:var(--fm-muted);
  border-left:2px solid var(--fm-amber);
  border-radius:0 var(--fm-r-ctl) var(--fm-r-ctl) 0;
  font-size:12px;
}
body[data-fm-project="optics"] .note{color:var(--fm-dim);font-size:11px}

/* ---------- status bar ---------- */
body[data-fm-project="optics"] footer{
  position:sticky;bottom:0;z-index:30;
  height:30px;padding:0 16px;
  background:var(--fm-bg);
  border-top:1px solid var(--fm-rule);
}
body[data-fm-project="optics"] #readout{color:var(--fm-muted)}

/* ---------- help ---------- */
body[data-fm-project="optics"] #help{background:rgba(12,13,14,.72);z-index:60}  /* above the sticky toolbar strip and status bar */
body[data-fm-project="optics"] .card{
  background:var(--fm-panel);
  border:1px solid var(--fm-rule);
  border-radius:var(--fm-r-panel);
  box-shadow:var(--fm-shadow);
  padding:22px 24px;
}
body[data-fm-project="optics"] .card h2{font-family:var(--fm-serif);font-size:24px;font-weight:400;letter-spacing:.04em;color:var(--fm-ink)}
body[data-fm-project="optics"] .card h3{font-family:var(--fm-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;color:var(--fm-amber)}
body[data-fm-project="optics"] .card p{color:var(--fm-muted);font-size:13px}
body[data-fm-project="optics"] .card td{color:var(--fm-muted);font-size:12.5px}
body[data-fm-project="optics"] .card td:first-child{font-family:var(--fm-mono);color:var(--fm-ink);font-size:11.5px}

/* ---------- narrow screens ---------- */
@media (max-width:980px){
  body[data-fm-project="optics"] main{height:auto;min-height:0}
  body[data-fm-project="optics"] .stagewrap{height:62svh;min-height:300px}
  body[data-fm-project="optics"] .rail{max-height:42vh;border-color:var(--fm-rule)}
  body[data-fm-project="optics"] .fm-tabs .fm-wrap{width:calc(100% - 24px);flex-wrap:wrap}
  body[data-fm-project="optics"] .fm-tabs .fm-tablist{flex:1 1 100%}
  body[data-fm-project="optics"] .fm-tabs .fm-tablist>*{max-width:100%}
  body[data-fm-project="optics"] .fm-tabs .fm-tab-actions{margin-left:0}
}