/* Native Monoceros views retain their paper and drawing colours in either
   website appearance. Page copy and controls use the website's existing tokens. */
:root {
  --study-paper: #ececec;
  --study-ink: #121213;
  --study-priority-low: #3373f2;
  --study-priority-high: #f24d33;
  --study-rule-explicit: #1c9d68;
  --study-rule-connector: #2aa7a0;
}
.study-jump-links { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:32px; }
.study-process { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; }
.study-process ol { margin:0; padding-left:24px; }
.study-process li { padding:0 0 22px 8px; }
.study-process h3 { margin:0 0 10px; }
.study-process p { max-width:62ch; }
.study-section-heading { max-width:800px; margin-bottom:32px; }
.study-pair, .study-specimens { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.study-case { margin-top:64px; }
.study-case > h3 { margin-bottom:24px; }
.study-figure { margin:0; min-width:0; border:1px solid var(--line); }
.study-figure > figcaption { padding:20px 22px; min-width:0; }
.study-figure h3, .study-figure h4 { font-size:22px; line-height:1.2; margin:0 0 10px; }
.study-figure figcaption p { margin:8px 0 0; }
.study-stage { position:relative; height:clamp(340px,48vw,620px); overflow:hidden; background:var(--study-paper); color:var(--study-ink); }
.study-pair .study-stage, .study-specimens .study-stage { height:clamp(330px,30vw,520px); }
.study-native-host, .study-poster { position:absolute; inset:0; width:100%; height:100%; }
.study-poster { object-fit:contain; }
.study-native-host { display:flex; flex-direction:column; }
.study-native-host > canvas { display:block; width:100%; height:100%; }
.study-load { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:calc(100% - 40px); z-index:1; }
.study-figure[data-state="ready"] .study-load, .study-figure[data-state="loading"] .study-load { display:none; }
.study-controls { display:flex; flex-wrap:wrap; gap:10px; padding:14px 18px; border-top:1px solid var(--line); }
.study-button, .study-controls select, .study-catalogue-bar select { font:inherit; font-size:14px; line-height:1.2; padding:10px 12px; border:1px solid var(--line-strong); border-radius:0; background:var(--bg); color:var(--ink); cursor:pointer; }
.study-button:hover { background:var(--surface); }
.study-button:disabled { opacity:.45; cursor:default; }
.study-touch-control { display:none; }
.study-controls select { max-width:100%; min-width:0; }
.study-status { display:block; padding:0 18px 16px; font-size:13px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.study-catalogue-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px; flex:none; border-bottom:1px solid var(--line); }
.study-catalogue-bar .study-button, .study-catalogue-bar select { background:var(--study-paper); color:var(--study-ink); }
.study-catalogue-detail { flex:1; min-height:0; position:relative; }
.study-module-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); flex:1; min-height:0; gap:1px; background:var(--line); overflow:auto; }
.study-module-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px; min-width:0; border:0; background:var(--bg); color:var(--ink); cursor:pointer; }
.study-module-tile img { width:92px; height:92px; object-fit:contain; }
.study-module-tile span { font-size:11px; line-height:1.2; overflow-wrap:anywhere; max-width:100%; }
.study-legend { display:flex; flex-wrap:wrap; gap:12px 24px; margin:16px 0; font-size:14px; color:var(--muted); }
.study-legend span { display:flex; align-items:center; gap:8px; }
.study-legend span::before { content:""; display:block; width:12px; height:12px; flex:none; }
.study-legend .priority-low::before { background:var(--study-priority-low); }
.study-legend .priority-high::before { background:var(--study-priority-high); }
.study-legend .rule-explicit::before { background:var(--study-rule-explicit); }
.study-legend .rule-connector::before { background:var(--study-rule-connector); }
.study-native-legend { display:none; }
.study-reading ol { padding-left:24px; max-width:1000px; }
.study-reading li { margin:0 0 22px; padding-left:8px; }
.study-reading cite { font-style:normal; }
.study-reading .credit { margin-top:8px; }
.study-figure:focus-within { outline:2px solid var(--focus); outline-offset:3px; }
@media(pointer:coarse) {
  .study-touch-control { display:block; }
  .study-figure:not([data-interacting="true"]) .study-native-host canvas { pointer-events:none; }
}
@media(max-width:760px) {
  .study-process, .study-pair, .study-specimens { grid-template-columns:1fr; gap:28px; }
  .study-process { gap:16px; }
  .study-case { margin-top:40px; }
  .study-stage, .study-pair .study-stage, .study-specimens .study-stage { height:380px; }
  .study-figure[data-van-eyck-view="catalogue"] .study-stage { height:640px; }
  .study-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(120px,1fr)); }
  .study-module-tile img { width:64px; height:64px; }
  .study-catalogue-bar { gap:6px; padding:8px; }
  .study-catalogue-bar select { max-width:100%; }
  .study-controls { padding:12px; gap:8px; }
  .study-figure > figcaption { padding:16px; }
}