/* The Crystal Lab (2026-10-04): Technology page of the openQCM Journal. Built on site.css and notebook.css. */
.oq-lab-page{background:var(--paper)}
.oq-lab-cover,.oq-lab--night,.oq-guide{
  --ink:#edf1ec;--ink-2:rgba(222,234,234,.78);--ink-3:rgba(190,210,214,.62);--line:rgba(173,196,199,.2);--line-2:rgba(173,196,199,.34);
  background:var(--night);color:var(--ink)
}

/* ---------- Cover ---------- */
.oq-lab-cover{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);align-items:center;padding:50px 4.6% 80px;min-height:min(78vh,760px)}
.oq-lab-cover h1{font-weight:400;font-size:clamp(56px,7vw,124px);line-height:1;letter-spacing:-.065em;margin:0 0 28px;color:#f1f4ef}
.oq-lab-cover h1 em,.oq-lab h2 em,.oq-turn h2 em,.oq-guide h2 em{font:italic 400 1.2em/.86 var(--serif);letter-spacing:-.045em}
.oq-lab-cover h1 em{color:var(--frost)}
.oq-lab-lead{font-size:15px;line-height:1.85;color:#b4c4c9;max-width:48ch;margin:0 0 26px}
.oq-lab-hint{color:var(--gold);font-size:11px!important}
.oq-lab-cover__fig{position:relative;margin:0;height:clamp(360px,52vh,560px);cursor:crosshair}

/* ---------- The bench: index of experiments ---------- */
.oq-bench{position:sticky;top:0;z-index:20;display:flex;gap:6px clamp(16px,2.4vw,34px);align-items:baseline;padding:16px 4.6%;background:#edf0edf0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.oq-bench::-webkit-scrollbar{display:none}
.oq-bench>.mono{color:var(--ink-3);font-size:11px!important;margin-right:8px;white-space:nowrap}
.oq-bench a{white-space:nowrap;font:italic 400 21px/1.2 var(--serif);color:var(--ink);text-decoration:none}
.oq-bench a .mono{font-style:normal;font-size:11px!important;color:var(--ink-3);margin-right:7px}
.oq-bench a:hover,.oq-bench a.is-here{color:var(--brand-ink)}
.oq-bench a.is-here{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
body.oq-crystal-lab .oq-bar.is-on~* .oq-bench,body.oq-crystal-lab:has(.oq-bar.is-on) .oq-bench{top:57px}

/* ---------- An experiment ---------- */
.oq-lab{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,96px);align-items:start;padding:110px 4.6%;scroll-margin-top:110px}
.oq-lab__text{position:sticky;top:130px}
.oq-lab__no{color:var(--ink-3);font-size:11px!important;border-top:1px solid var(--line-2);padding-top:14px;margin:0 0 28px}
.oq-lab h2 .oq-lab__no{display:block}
.oq-lab-cover h1 .oq-lab-h1-name{margin:0 0 30px}
.oq-lab h2{font-weight:400;font-size:clamp(40px,4.4vw,72px);line-height:1.03;letter-spacing:-.055em;margin:0 0 28px;color:var(--ink)}
.oq-lab--night h2 em{color:var(--frost)}
.oq-lab__text>p{font-size:15.5px;line-height:1.85;color:var(--ink-2);margin:0 0 1.1em;max-width:54ch}
.oq-eq{margin:30px 0;padding:20px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.oq-eq>span{display:block;font:italic 400 clamp(24px,2.2vw,32px)/1.3 var(--serif);color:var(--ink)}
.oq-eq sub,.oq-eq sup{font-size:.62em}
.oq-eq small{display:block;margin-top:10px;font-size:11px!important;color:var(--ink-3);text-transform:none!important;letter-spacing:.04em!important}
.oq-try{background:var(--plate);border-left:2px solid var(--brand-ink);padding:16px 20px}
.oq-lab--night .oq-try{background:#15232a;border-left-color:var(--gold)}
.oq-try>.mono{display:block;font-size:11px!important;color:var(--brand-ink);margin-bottom:6px}
.oq-lab--night .oq-try>.mono{color:var(--gold)}
.oq-try p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-2)}

/* The figure: a plate of the journal with an instrument panel. */
.oq-lab__fig{margin:0;position:relative;border:1px solid var(--line-2);background:var(--plate);padding:18px 18px 16px}
.oq-lab--night .oq-lab__fig{background:#0c1418}
.oq-lab__fig canvas{display:block;width:100%;height:clamp(340px,44vw,520px)}
.oq-lab__controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;padding:16px 0 4px;border-top:1px solid var(--line);margin-top:12px}
.oq-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-2)}
.oq-seg button,.oq-run{font:500 12.5px/1 var(--sans);background:none;border:0;color:var(--ink-2);padding:10px 13px;cursor:pointer;transition:background .2s,color .2s}
.oq-seg button+button{border-left:1px solid var(--line)}
.oq-seg button:hover,.oq-run:hover{color:var(--ink);background:rgba(127,156,166,.12)}
.oq-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.oq-lab--night .oq-seg button[aria-pressed="true"]{background:#edf1ec;color:var(--night)}
.oq-run{border:1px solid var(--ink);color:var(--ink)}
.oq-run:hover{background:var(--ink);color:var(--paper)}
.oq-lab--night .oq-run:hover{color:var(--night)}
.oq-range{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:12px;flex:1 1 260px}
.oq-range .mono{font-size:11px!important;color:var(--ink-3)}
.oq-range output{min-width:86px;text-align:right;color:var(--ink);font-size:11px!important;text-transform:none!important}
.oq-range input{width:100%;accent-color:var(--brand-ink)}
.oq-lab--night .oq-range input{accent-color:#8fc7dc}
.oq-lab__read{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 18px;padding:12px 0 0;color:var(--ink-3);font-size:11px!important}
.oq-lab__read b{display:block;font:400 21px/1.3 var(--sans);letter-spacing:-.02em;color:var(--ink);text-transform:none}
.oq-lab__read .is-warn b{color:#b8893b}
.oq-lab__fig figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:11px!important;color:var(--ink-3);text-transform:none!important;letter-spacing:.03em!important;line-height:1.7}
.oq-lab-cover__fig .oq-lab__read{position:absolute;right:0;top:0;display:block;text-align:right;line-height:1.9}
.oq-lab-cover__fig .oq-lab__read b{display:inline;font:400 11px var(--mono);color:var(--ice)}

/* ---------- Your turn and the guide ---------- */
.oq-turn{padding:110px 4.6% 100px}
.oq-turn__cards{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.oq-turn__cards a{display:flex;flex-direction:column;gap:12px;padding:26px 24px 30px;text-decoration:none;color:var(--ink);transition:background .25s}
.oq-turn__cards a+a{border-left:1px solid var(--line)}
.oq-turn__cards a:hover{background:var(--plate)}
.oq-turn__cards .mono{font-size:11px!important;color:var(--ink-3)}
.oq-turn__cards strong{font:400 clamp(26px,2.3vw,34px)/1.15 var(--serif);letter-spacing:-.015em}
.oq-turn__cards span:not(.mono){font-size:14px;line-height:1.7;color:var(--ink-2);flex:1}
.oq-turn__cards .oq-nb-read{align-self:flex-start;color:var(--ink)}
.oq-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);padding:110px 4.6%}
.oq-guide .mono{color:var(--gold);font-size:11px!important}
.oq-guide h2{font-weight:400;font-size:clamp(40px,4.4vw,70px);line-height:1.03;letter-spacing:-.055em;margin:18px 0 22px;color:#f1f4ef}
.oq-guide h2 em{color:var(--frost)}
.oq-guide p:not(.mono){font-size:15px;line-height:1.85;color:#b4c4c9;max-width:50ch}
.oq-guide__form .mono{color:#7f9ca6;margin-top:16px}
.oq-guide__form :is(input[type=text],input[type=email],select,textarea){background:#0c1418!important;border:1px solid #adc4c74d!important;color:#edf1ec!important;border-radius:0!important;padding:12px 14px!important}
.oq-guide__form label{color:#c9d9d9!important;font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.1em!important;text-transform:uppercase}
.oq-guide__form button[type=submit]{background:#edf1ec!important;color:var(--night)!important;border:0!important;border-radius:0!important;font-weight:600!important;padding:14px 22px!important}

@media(max-width:1100px){.oq-lab{grid-template-columns:1fr;padding:80px 4.6%}.oq-lab__text{position:static}}
@media(max-width:860px){
  .oq-lab-cover{grid-template-columns:1fr;padding:36px 5.5% 60px;min-height:0}
  .oq-lab-cover__fig{height:340px}
  .oq-turn__cards{grid-template-columns:1fr}.oq-turn__cards a+a{border-left:0;border-top:1px solid var(--line)}
  .oq-guide{grid-template-columns:1fr;padding:80px 5.5%}
}
@media(max-width:760px){
  .oq-lab{padding:64px 5.5%}
  .oq-lab__fig{padding:12px;margin:0 -2%}
  .oq-lab__fig canvas{height:330px}
  .oq-bench{padding:12px 5.5%}
  .oq-bench a{font-size:18px}
  .oq-turn{padding:70px 5.5%}
}
.oq-lab-cover__fig canvas{display:block;width:100%;height:100%}

/* Even overtones are impossible: an alarm nobody can miss (2026-10-04, Raffaele). */
.oq-seg .oq-seg__bad{margin-left:14px;border:1px solid #d1495b!important;color:#d1495b}
.oq-seg .oq-seg__bad:hover{background:rgba(209,73,91,.1);color:#d1495b}
.oq-seg .oq-seg__bad[aria-pressed="true"]{background:#d1495b!important;color:#fff!important}
.oq-lab__fig.is-impossible{border-color:#d1495b;box-shadow:0 0 0 2px #d1495b inset}
.oq-lab__fig.is-impossible .oq-lab__read .is-warn b{color:#d1495b}

/* Readouts keep the case of symbols and units (Δm, Δf, f₀, ng/cm²); spaced on the cover (2026-10-04). */
.oq-lab__read span{text-transform:none;letter-spacing:.02em}
.oq-lab-cover .oq-lab__read span{margin-left:18px;white-space:nowrap}
.oq-lab-cover .oq-lab__read{top:auto;bottom:0}

/* Ways to read a crystal (experiment 02), 2026-10-04 */
.oq-methods{width:100%;border-collapse:collapse;margin:34px 0 0;font-size:13px;font-variant-numeric:tabular-nums}
.oq-methods caption{text-align:left;margin-bottom:10px;color:var(--ink-3)}
.oq-methods th,.oq-methods td{padding:10px 8px 10px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400}
.oq-methods thead th{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-top:0}
.oq-methods tbody th{color:var(--ink);font-weight:500}
.oq-methods tbody th small{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}
.oq-methods td{color:var(--ink-2)}

/* Links in the text of the experiments (2026-10-14): underlined, frost on the night sections. */
.oq-lab__text p a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.oq-lab--night .oq-lab__text p a{color:var(--frost)}
.oq-lab__text p a:hover{text-decoration-thickness:2px}