/* Ousia Research — shared primitives across research pages.
   Loaded after _shared-page.css; adds research apparatus only. */
:root{--bg:#080807;--paper:#0F0E0C}
body{background:var(--bg)}

/* Research pages carry no mint ticker — nav clearance only. */
.rpage{padding-top:182px}
@media(max-width:760px){.rpage{padding-top:172px}}

/* apparatus type */
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}
.lbl.on{color:var(--ink-dim)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.rule{height:1px;background:var(--hairline);border:0}
.rule.strong{background:var(--hairline-strong)}

/* apparatus block — SOURCE / METHOD / N / LIMITS */
.appar{display:grid;gap:0;border-top:1px solid var(--hairline)}
.appar .row{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.appar .row .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);padding-top:3px}
.appar .row .v{font-family:var(--mono);font-size:11.5px;line-height:1.7;letter-spacing:.02em;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.appar .row .v em{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--ink)}

/* disclosure */
details.disc{border-bottom:1px solid var(--hairline)}
details.disc>summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);transition:color .25s}
details.disc>summary::-webkit-details-marker{display:none}
details.disc>summary:hover{color:var(--ink)}
details.disc>summary .sign{font-size:13px;color:var(--ink-ghost);transition:color .25s}
details.disc[open]>summary{color:var(--ink-dim)}
details.disc[open]>summary .sign{color:var(--ink-dim)}
details.disc .body{padding:0 0 22px;max-width:62ch}
details.disc .body p{font-family:var(--serif);font-size:16.5px;line-height:1.7;color:var(--ink-dim);text-wrap:pretty;margin-bottom:.9em}
details.disc .body p:last-child{margin-bottom:0}
details.disc .body code{font-family:var(--mono);font-size:12px;color:var(--ink)}

/* plate */
.plate{position:relative;display:block;width:100%;background:#000;border:1px solid var(--hairline)}
.plate img{display:block;width:100%;height:auto}
.plate figcaption{display:flex;justify-content:space-between;gap:20px;padding:12px 2px 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint)}

/* unfilled / in-progress frame */
.hatch{background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(236,231,220,.03) 16px 17px);border:1px solid var(--hairline)}

/* field readout */
.readout{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);font-variant-numeric:tabular-nums;min-height:22px}
.readout .sw{width:12px;height:12px;border:1px solid var(--hairline-strong);background:transparent;flex:0 0 auto}
.readout .muted{color:var(--ink-faint)}

/* mode control */
.modes{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--hairline);border-radius:1px;overflow:hidden}
.modes button{flex:1 1 auto;background:transparent;border:0;border-right:1px solid var(--hairline);color:var(--ink-faint);font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:12px 14px;cursor:pointer;transition:color .25s,background .25s;white-space:nowrap}
.modes button:last-child{border-right:0}
.modes button:hover{color:var(--ink)}
.modes button[aria-pressed="true"]{color:var(--bg);background:var(--ink)}

/* locator */
.locate{display:flex;align-items:center;gap:0;border:1px solid var(--hairline)}
.locate input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 14px;font-variant-numeric:tabular-nums}
.locate input::placeholder{color:var(--ink-faint);letter-spacing:.2em}
.locate button{background:transparent;border:0;border-left:1px solid var(--hairline);color:var(--ink-faint);font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:12px 16px;cursor:pointer;transition:color .25s}
.locate button:hover{color:var(--ink)}

/* next / onward */
.onward{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.onward a{background:var(--bg);padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px;transition:background .3s}
.onward a:hover{background:var(--paper)}
.onward a .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint)}
.onward a .t{font-family:var(--serif);font-size:26px;font-weight:300;line-height:1.15;color:var(--ink)}
.onward a .d{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-dim);line-height:1.45}
@media(max-width:860px){.onward{grid-template-columns:1fr}}

a{color:inherit}
a:hover{color:var(--ink)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ── share · the control every research page uses (js/research/share.js) ──
   The menu is an overlay, so opening it moves nothing below. --sheet2 is the After Color
   readout's ground; a page without one falls back to its own sheet. */
.shw{position:relative}
.shb{background:transparent;border:0;padding:0;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:color .25s;position:relative}
.shb:hover,.shb[aria-expanded="true"]{color:var(--ink)}
/* The label stands 13px tall, which a finger cannot aim at, while the room around it belongs
   to the panel: the readout pads 20px above its header row and 34px below it, and none of
   that is the button's. The target is widened into that existing gap by an overlay that is
   absolute, so it takes no room and draws nothing — the label keeps its size and position.
   The menu is a sibling carrying its own z-index, so it still takes its clicks while open.
   36px, not the 44px a finger wants: the families header in its dense form leaves 13.85px
   above the label, and a taller target would reach past the rule into the grid below it. */
.shb::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:36px}
/* the study's own control carries 12px of padding already: its own box is the target */
.shstudy .shb::before{display:none}
.shm{position:absolute;top:calc(100% + 9px);right:0;z-index:20;width:160px;display:flex;flex-direction:column;background:var(--sheet2,var(--sheet));border:1px solid var(--hairline)}
.shi{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:0 13px;background:transparent;border:0;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);text-align:left;transition:background .2s,color .2s}
.shi+.shi{border-top:1px solid var(--hairline)}
.shi:hover,.shi:focus-visible{background:rgba(236,231,220,.05);color:var(--ink)}
.shi i{font-style:normal;color:var(--ink-faint)}
.shi:hover i{color:var(--ink-dim)}

/* the study's own share · a secondary control in the page's register, not a call to action.
   The menu hangs off the button itself, and the two hairlines meet as one. */
.studyshare{margin:38px 0 0;display:flex;justify-content:center}
.shstudy .shb{width:160px;border:1px solid var(--hairline-strong);padding:12px 0;letter-spacing:.18em;transition:color .25s,border-color .25s}
.shstudy .shb:hover,.shstudy .shb:focus-visible{color:var(--ink);border-color:var(--ink-dim)}
.shstudy .shm{left:50%;right:auto;transform:translateX(-50%);top:100%;margin-top:-1px}

/* download · the same popover, with a format to choose on each row */
.skacts{display:flex;align-items:baseline;gap:16px}
/* the caret says the label opens a menu rather than acting at once */
.shb .cv{font-style:normal;margin-left:5px;font-size:8px;color:var(--ink-faint);transition:color .25s}
.shb:hover .cv,.shb[aria-expanded="true"] .cv{color:var(--ink-dim)}
.dlm{width:200px}
.dli{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:0 4px 0 11px}
.dli+.dli{border-top:1px solid var(--hairline)}
.dli b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--ink-dim);white-space:nowrap}
.dlf{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.dlb{background:transparent;border:0;padding:6px 7px;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);text-decoration:none;transition:color .2s,background .2s}
.dlb:hover,.dlb:focus-visible{color:var(--ink);background:rgba(236,231,220,.07)}
.dli:hover b{color:var(--ink)}