/* The Observer Notebook — the wing frame, shared by the index and all finding
   pages. Loaded after /css/tokens.css (the floor) and before each page's own
   sheet, so a page keeps its explainer layout while the frame supplies the
   hero motif, the verdict stamp, gauges, sliders, section rules and the
   nearby-pages shelf. Motifs are drawn by observer-hero.js. */

/* tokens.css resets every margin; the explainers were written against
   browser defaults, so give prose its rhythm back */
.obs main p, .obs main ul, .obs main ol, .obs main figure, .obs main table { margin-block: 0 1em }
.obs main ul, .obs main ol { padding-left: 1.3em }
.obs main ul { list-style: disc }
.obs main ol { list-style: decimal }
.obs main li { margin-bottom: .35em }
.obs main h2 { margin-bottom: .5em }
.obs main h3 { margin-block: 1.2em .4em }
.obs main a:not([class]) { color: var(--ember); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em }

/* the floor shows through: the explainer painted its own body */
html.obs, .obs body { background-color: transparent }
html.obs { background-color: var(--color-bg) }

/* ---- the opening frame ---------------------------------------------------- */
.obs header.mast { position: relative; isolation: isolate; padding-block: clamp(28px, 6vh, 60px) 30px; margin-bottom: 8px }
.obs .mast-bg { position: absolute; z-index: -1; top: -74px; bottom: -10px; left: 50%; width: 100vw; margin-left: -50vw; pointer-events: none; overflow: hidden }
.obs .mast-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.obs .mast-bg canvas { opacity: .7 }
/* the explainers set a centred column, so the scrim is a pool of shade
   under the headline and the motif shows in the margins */
.obs .mast-bg::after { content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(28,21,16,0) 62%, rgba(28,21,16,.92) 100%),
    radial-gradient(ellipse min(520px, 46vw) 62% at 50% 55%, rgba(28,21,16,.9) 0, rgba(28,21,16,.72) 55%, rgba(28,21,16,.15) 100%) }
.obs header.mast > * { position: relative; z-index: 3 }
.obs header.mast > .mast-bg { position: absolute; z-index: -1 }
/* the eyebrow becomes a core sample, like every other eyebrow on the site */
.obs .eyebrow::before, .obs .eyebrow::after { background: var(--floor-core) center / 100% 100% no-repeat; height: 9px; opacity: .3 }

/* ---- the verdict stamp ---------------------------------------------------- */
/* the kind is a shape AND a colour AND a word: full disc = known,
   half disc = partly, slashed ring = we were wrong, open ring = map,
   four-point star = possibly new */
.obs-stamp { --vk: var(--slate); display: flex; width: fit-content; margin-inline: auto !important; align-items: center; gap: 11px; margin: 18px 0 6px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  padding: 9px 16px 9px 12px; color: var(--vk); border: 2px solid var(--vk); border-radius: 5px;
  background: color-mix(in srgb, var(--vk) 9%, rgba(28,21,16,.85));
  box-shadow: inset 0 0 0 3px rgba(28,21,16,.9), inset 0 0 0 4px color-mix(in srgb, var(--vk) 55%, transparent);
  transform: rotate(-2deg); transform-origin: 50% 50% }
.obs-stamp::before { content: ''; flex: none; width: 15px; height: 15px; box-sizing: border-box; border: 2.5px solid currentColor; border-radius: 50% }
.obs-stamp[data-kind="known"] { --vk: var(--slate) }
.obs-stamp[data-kind="known"]::before { background: currentColor }
.obs-stamp[data-kind="partly"] { --vk: var(--brass) }
.obs-stamp[data-kind="partly"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%) }
.obs-stamp[data-kind="corrected"] { --vk: #d07a8a }
.obs-stamp[data-kind="corrected"]::before { background: linear-gradient(135deg, transparent calc(50% - 1.2px), currentColor calc(50% - 1.2px), currentColor calc(50% + 1.2px), transparent calc(50% + 1.2px)) }
.obs-stamp[data-kind="map"] { --vk: var(--clay) }
.obs-stamp[data-kind="map"]::before { border-style: dashed }
.obs-stamp[data-kind="new"] { --vk: var(--moss) }
.obs-stamp[data-kind="new"]::before { border-radius: 2px; transform: rotate(45deg); background: currentColor; width: 11px; height: 11px }
.obs-stamp.is-stamping { animation: obs-stamp .5s cubic-bezier(.3, 1.4, .5, 1) both }
@keyframes obs-stamp { 0% { opacity: 0; transform: rotate(-7deg) scale(1.7) } 55% { opacity: 1; transform: rotate(-1.4deg) scale(.95) } 100% { opacity: 1; transform: rotate(-2deg) scale(1) } }

/* ---- stat strip → gauges -------------------------------------------------- */
.obs .statstrip .stat, .obs .stats .stat { position: relative; background: var(--surface-card); box-shadow: var(--shadow-raised);
  border: 1px solid rgba(74,59,40,.6); border-radius: 6px; padding: 14px 14px 12px }
.obs .gauge { display: block; width: 100%; height: 6px; margin: 8px 0 6px; border-radius: 3px; background: rgba(74,59,40,.6); overflow: hidden }
.obs .gauge > i { display: block; height: 100%; width: var(--g, 0%); background: linear-gradient(90deg, var(--brass), var(--ember)); border-radius: 3px; transition: width 1.1s cubic-bezier(.2, .8, .2, 1) }
.obs .stat b.tick { animation: obs-tick .6s ease-out }
@keyframes obs-tick { 0% { text-shadow: 0 0 0 transparent } 40% { text-shadow: 0 0 22px rgba(232,131,58,.6) } 100% { text-shadow: 0 0 0 transparent } }

/* ---- the live panel: a lit instrument on the bench ------------------------ */
.obs .rig, .obs .panel, .obs .live-panel { background: var(--surface-card); box-shadow: var(--shadow-float); border-radius: 8px }
.obs main input[type=range] { --rk: var(--ember); -webkit-appearance: none; appearance: none; background: transparent; height: 30px; margin: 0; cursor: pointer; accent-color: var(--rk); vertical-align: middle }
.obs main input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--rk) var(--fill, 50%), var(--line) var(--fill, 50%)) }
.obs main input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line) }
.obs main input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--rk) }
.obs main input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--parchment); border: 3px solid var(--rk); box-shadow: 0 0 0 3px rgba(28,21,16,.9), 0 2px 8px rgba(0,0,0,.5) }
.obs main input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--parchment); border: 3px solid var(--rk) }
.obs main input[type=range]:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px }
.obs main button { font-family: var(--mono); letter-spacing: .08em; border-radius: 4px; cursor: pointer }
.obs main button[aria-pressed="true"] { background: rgba(232,131,58,.15); border-color: rgba(232,131,58,.75) }

/* ---- sections sit on core-sample rules ------------------------------------ */
.obs main > section { position: relative }
.obs main > section::before { content: ''; display: block; height: 9px; margin-bottom: 24px;
  background: var(--floor-core) left center / 100% 100% no-repeat; opacity: .28;
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent); mask-image: linear-gradient(90deg, #000 50%, transparent) }

/* ---- nearby on the bench -------------------------------------------------- */
.obs-near { margin-top: 56px }
.obs-near h2 { font-size: clamp(22px, 3vw, 28px) }
.obs-near ul { list-style: none !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px }
.obs-near li { margin: 0 }
.obs-near a { display: block; height: 100%; padding: 14px 16px; background: var(--surface-card); box-shadow: var(--shadow-raised);
  border: 1px solid rgba(74,59,40,.6); border-radius: 6px; color: var(--parchment) !important; text-decoration: none !important; transition: border-color .15s, transform .15s }
.obs-near a:hover { border-color: var(--brass); transform: translateY(-2px) }
.obs-near small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-bottom: 4px }

@media (max-width: 760px) {
  .obs .mast-bg { top: -60px }
  .obs .mast-bg::after { background:
    linear-gradient(180deg, rgba(28,21,16,.2) 0, rgba(28,21,16,.82) 50%, rgba(28,21,16,.95) 100%),
    linear-gradient(90deg, rgba(28,21,16,.55) 0, rgba(28,21,16,.1) 100%) }
}
@media (max-width: 560px) { .obs main input[type=range] { height: 44px } }
@media (prefers-reduced-motion: reduce) {
  .obs-stamp.is-stamping, .obs .stat b.tick { animation: none }
  .obs .gauge > i { transition: none }
}

/* ---- the wing index: cards on the floor, verdicts by shape ---------------- */
.obs .shelf .card { background: var(--surface-card); box-shadow: var(--shadow-raised); transition: transform .15s, box-shadow .15s }
.obs .shelf .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float) }
.obs .card .pill { display: inline-flex; align-items: center; gap: 7px }
.obs .card .pill::before, .obs .sc::before { content: ''; flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50% }
.obs .v-known .pill::before, .obs .sc.v-known::before { background: currentColor }
.obs .v-partly .pill::before, .obs .sc.v-partly::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%) }
.obs .v-corrected .pill::before, .obs .sc.v-corrected::before { background: linear-gradient(135deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) }
.obs .v-map .pill::before, .obs .sc.v-map::before { border-style: dashed }
.obs .v-new .pill::before, .obs .sc.v-new::before { border-radius: 1px; transform: rotate(45deg); background: currentColor; width: 8px; height: 8px }
.obs .v-open .pill::before, .obs .sc.v-open::before { background: none }
.obs .sc { display: inline-flex; align-items: center; gap: 8px }