/* ============================================================
   Fable family sites: shared stylesheet plus the exploded-view explorer.
   Used by robotics.html, datacentre.html, satellite.html and ev.html.
   ============================================================ */

/* ============================================================
   Fable Resources family sites - shared stylesheet
   (kept byte-identical in intent with minerals.html / method.html)
   ============================================================ */

:root{
  --paper:#faf9f7;
  --surface:#ffffff;
  --inset:#f2f1ed;
  --ink:#141519;
  --ink-2:#45484f;
  --ink-3:#7d818a;
  --line:#e4e2dc;
  --line-strong:#c8c5be;
  --accent:#3d6eb4;
  --accent-ink:#ffffff;
  --hold:#b98a2e;
  --dm:'Barlow Condensed',sans-serif;
  --bd:'Barlow',sans-serif;
  --mo:'Space Mono',monospace;
}
html[data-brand="fable"]  { --accent:#3d6eb4; }
html[data-brand="eirzan"] { --accent:#b0602f; }
html[data-brand="kinkosa"]{ --accent:#a8842a; }
html[data-brand="valdur"] { --accent:#7b5ba6; }

html[data-theme="dark"]{
  --paper:#0b0b0d;
  --surface:#111114;
  --inset:#17171b;
  --ink:#f2f2f4;
  --ink-2:#b0b0ba;
  --ink-3:#8b8b96;
  --line:rgba(255,255,255,0.13);
  --line-strong:rgba(255,255,255,0.28);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 var(--bd);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--ink); }
img{ max-width:100%; }

.wrap{ max-width:1220px; margin:0 auto; padding:0 40px; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--dm); text-transform:uppercase; margin:0; text-wrap:balance; }
h1{ font-size:clamp(46px,6.2vw,86px); font-weight:600; line-height:.98; letter-spacing:.01em; }
h2{ font-size:clamp(30px,3.4vw,46px); font-weight:600; line-height:1.04; letter-spacing:.02em; }
h3{ font-size:22px; font-weight:600; letter-spacing:.05em; }
p{ margin:0 0 1.1em; max-width:68ch; text-wrap:pretty; }
.lede{ font-size:20px; line-height:1.6; color:var(--ink-2); max-width:58ch; }
.eyebrow{
  font:700 11px/1 var(--mo); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:12px; margin:0 0 22px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); }
.eyebrow b{ color:var(--accent); font-weight:700; }
.mono{ font-family:var(--mo); }

/* ---------- top bar + header ---------- */
.topbar{
  border-bottom:1px solid var(--line); background:var(--surface);
  font:400 10px/1 var(--mo); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:34px; }
.topbar a{ color:var(--ink-3); }
.topbar a:hover{ color:var(--accent); }
.topbar .fam{ display:flex; gap:20px; }

header.site{ background:var(--surface); border-bottom:1px solid var(--line); }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:32px; }
nav.main{ display:flex; gap:30px; align-items:center; }
nav.main a{
  font:600 12px/1 var(--mo); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  padding:6px 0; border-bottom:2px solid transparent;
}
nav.main a:hover{ color:var(--ink); }
nav.main a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }

/* ---------- brand lockups ---------- */
.lockup{ display:flex; flex-direction:column; gap:5px; color:var(--ink); }
a.lockup:hover{ color:var(--ink); }
.lockup .row{ display:flex; align-items:baseline; gap:8px; }
.lockup .sub{
  white-space:nowrap;
  font:400 9px/1 var(--mo); letter-spacing:.46em; text-indent:.02em;
  text-transform:uppercase; color:var(--ink-3);
}
html[data-logo="compact"] .lockup .sub{ display:none; }
.lk-fable{ font:600 30px/1 var(--dm); text-transform:uppercase; letter-spacing:.03em; }
.lk-fable + .sq{ width:8px; height:8px; background:var(--accent); align-self:center; margin-top:6px; }

/* ---------- hero ---------- */
.hero{ padding:110px 0 84px; border-bottom:1px solid var(--line); }
.hero .lede{ margin:30px 0 40px; }

/* ---------- fact strip ---------- */
.facts{ border-bottom:1px solid var(--line); background:var(--surface); }
.facts .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.fact{ padding:30px 26px 26px; border-left:1px solid var(--line); }
.fact:first-child{ border-left:none; }
.fact .n{ font:600 38px/1 var(--dm); letter-spacing:.01em; }
.fact .n small{ font-size:20px; }
.fact .l{ font:400 10px/1.5 var(--mo); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:9px; }
.fn{ font:400 11px/1.7 var(--mo); color:var(--ink-3); }
.facts .fn{ display:block; padding:0 40px 18px; }

/* ---------- section bands ---------- */
.band{ padding:96px 0; border-bottom:1px solid var(--line); }
.band.tint{ background:var(--surface); }
.band-head{ display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:48px; margin-bottom:44px; }
.band-head .eyebrow{ margin:8px 0 0; }
@media (max-width:900px){
  .band-head{ grid-template-columns:1fr; gap:12px; }
  .wrap{ padding:0 22px; }
  nav.main{ flex-wrap:wrap; gap:16px; }
}

/* ---------- callout ---------- */
.callout{ border:1px solid var(--line-strong); padding:34px 38px; margin:44px 0 0; max-width:820px; }
.callout .tag{
  font:700 10px/1 var(--mo); letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:14px;
}
.callout p{ font-size:19px; line-height:1.6; margin:0; max-width:none; }
.callout p + p{ margin-top:1em; }

/* ---------- data tables ---------- */
table.data{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); }
table.data caption{
  caption-side:top; text-align:left; font:700 11px/1 var(--mo);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding:0 0 12px;
}
table.data th{
  font:700 10px/1.4 var(--mo); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-strong); background:var(--inset);
}
table.data td{ padding:12px 16px; border-bottom:1px solid var(--line); font-size:15px; vertical-align:top; }
table.data td.num, table.data th.num{ text-align:right; font-family:var(--mo); font-size:13.5px; white-space:nowrap; }
.tbl-notes{ font:400 11.5px/1.75 var(--mo); color:var(--ink-3); margin-top:14px; max-width:100ch; }
.tbl-notes p{ margin:0 0 6px; max-width:none; }
.tbl-scroll{ overflow-x:auto; }

/* ---------- footer ---------- */
footer.site{ background:var(--ink); color:#b6b8bf; }
html[data-theme="dark"] footer.site{ background:var(--surface); border-top:1px solid var(--line); }
footer.site .top{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; padding:70px 0 50px; }
footer.site h4{
  font:700 10px/1 var(--mo); letter-spacing:.22em; text-transform:uppercase;
  color:#7d818a; margin:0 0 18px;
}
footer.site ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
footer.site a{ color:#b6b8bf; font-size:14px; }
footer.site a:hover{ color:#fff; }
footer.site .lockup{ color:#fff; margin-bottom:18px; }
footer.site .lockup .sub{ color:#7d818a; }
footer.site .blurb{ font-size:14px; line-height:1.7; max-width:38ch; color:#8b8e96; }
footer.site .legal{
  border-top:1px solid rgba(255,255,255,.12); padding:26px 0 40px;
  font:400 11px/1.8 var(--mo); color:#7d818a;
}
footer.site .legal p{ max-width:110ch; margin:0 0 10px; }
@media (max-width:900px){ footer.site .top{ grid-template-columns:1fr 1fr; } }

::selection{ background:var(--accent); color:#fff; }

/* ============================================================
   Robotics explorer
   ============================================================ */

/* status tiers */
:root{
  --t-held:#3d6eb4;
  --t-cotarget:#b98a2e;
  --t-search:#6f7480;
  --t-none:#b5b8bd;
}
html[data-theme="dark"]{ --t-search:#9aa0ac; --t-none:#5a5e66; }

.tier-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; display:inline-block; }
.tier-held    .tier-dot,.dot-held    { background:var(--t-held); }
.tier-cotarget .tier-dot,.dot-cotarget{ background:var(--t-cotarget); }
.tier-search  .tier-dot,.dot-search  { background:transparent; border:1.5px solid var(--t-search); }
.tier-none    .tier-dot,.dot-none    { background:var(--t-none); opacity:.55; }

.tierchip{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font:700 9.5px/1 var(--mo); letter-spacing:.13em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
}
.tierchip.tier-held    { border-color:var(--t-held);     color:var(--t-held); }
.tierchip.tier-cotarget{ border-color:var(--t-cotarget); color:var(--t-cotarget); }
.tierchip.tier-search  { border-color:var(--t-search);   color:var(--t-search); }
.tierchip.tier-none    { border-color:var(--line-strong);color:var(--ink-3); }

/* explorer shell */
.explorer{ border:1px solid var(--line); background:var(--surface); }

.exp-bar{
  border-bottom:1px solid var(--line); padding:18px 22px; background:var(--inset);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
}
.exp-bar .lbl{
  font:700 10px/1 var(--mo); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font:700 10px/1 var(--mo); letter-spacing:.1em; text-transform:uppercase;
  padding:7px 10px; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip[aria-pressed="true"] .tier-dot{ box-shadow:0 0 0 1.5px var(--paper); }
.chip.reset{ border-style:dashed; }

.exp-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:980px){ .exp-body{ grid-template-columns:1fr; } }

.exp-stage{
  padding:18px 10px 10px; border-right:1px solid var(--line);
  position:sticky; top:0; align-self:start;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/44px 100%,
    var(--surface);
  background-blend-mode:normal;
  position:relative;
}
html[data-theme="dark"] .exp-stage{ background-color:var(--inset); }
@media (max-width:980px){ .exp-stage{ border-right:none; border-bottom:1px solid var(--line); } }
.exp-stage svg{ display:block; width:100%; height:auto; max-height:74vh; margin:0 auto; }
.stage-note{
  position:absolute; left:16px; top:16px;
  font:400 9.5px/1.5 var(--mo); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  background:var(--surface); border:1px solid var(--line); padding:5px 8px;
  pointer-events:none;
}

/* ---------- 3D stage ---------- */
.stage3d{ position:relative; width:100%; height:min(72vh,700px); min-height:440px; }
.stage3d canvas{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.stage3d canvas:active{ cursor:grabbing; }
#stage[data-view="3d"] > svg{ display:none; }
#stage[data-view="3d"]{ background-image:none; }
#stage[data-view="svg"] .stage3d{ display:none; }

.stage-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:400 10px/1 var(--mo); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.stage-loading[hidden]{ display:none; }

.hovertag{
  position:absolute; left:0; top:0; transform:translate(-50%,-140%); pointer-events:none;
  font:700 10px/1 var(--mo); letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:6px 9px; white-space:nowrap; z-index:3;
}
.hovertag[hidden]{ display:none; }

.stage-tools{ position:absolute; z-index:2; display:flex; gap:10px; }
.stage-tools.top{ right:14px; top:14px; flex-direction:column; align-items:flex-end; }
.stage-tools.bottom{ right:14px; bottom:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.seg{ display:flex; border:1px solid var(--line-strong); background:var(--surface); }
.seg button{
  all:unset; cursor:pointer; padding:8px 13px;
  font:700 10px/1 var(--mo); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.seg button + button{ border-left:1px solid var(--line-strong); }
.seg button.on{ background:var(--ink); color:var(--paper); }
.tool{
  all:unset; cursor:pointer; padding:8px 13px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink-2);
  font:700 10px/1 var(--mo); letter-spacing:.14em; text-transform:uppercase;
}
.tool:hover{ border-color:var(--accent); color:var(--accent); }
.slider{
  display:flex; align-items:center; gap:9px; padding:7px 12px;
  border:1px solid var(--line-strong); background:var(--surface);
  font:400 9px/1 var(--mo); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.slider input{ width:104px; accent-color:var(--accent); }
#stage[data-view="svg"] #explodewrap,
#stage[data-view="svg"] #resetview{ display:none; }
/* stop sticking, but stay a positioning context: the stage controls are
   absolutely positioned and would otherwise escape to the page */
@media (max-width:980px){ .exp-stage{ position:relative; top:auto; } }
@media (max-width:560px){
  .stage-tools.top{ right:10px; top:10px; gap:7px; }
  .stage-note{ top:58px; left:10px; }   /* drops below the view toggle */
  .stage-tools.bottom{ right:10px; left:10px; bottom:10px; justify-content:space-between; gap:7px; }
  .slider{ padding:6px 9px; gap:6px; }
  .slider input{ width:70px; }
}

/* ---------- component index ---------- */
.partindex{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding:16px 22px; border-top:1px solid var(--line); background:var(--surface);
}
.partindex .lbl{ font:700 10px/1 var(--mo); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.pchip{
  font:400 11px/1 var(--mo); letter-spacing:.04em;
  padding:6px 9px; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink-2); cursor:pointer;
}
.pchip b{ color:var(--ink-3); font-weight:700; margin-right:6px; }
.pchip:hover{ border-color:var(--accent); color:var(--accent); }
.pchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.pchip[aria-pressed="true"] b{ color:var(--paper); opacity:.6; }
.pchip.is-dim{ opacity:.4; }

/* svg part styling */
.part{ cursor:pointer; }
.part .sh{
  fill:var(--inset); stroke:var(--line-strong); stroke-width:1.6;
  transition:fill .14s, stroke .14s, opacity .14s;
}
html[data-theme="dark"] .part .sh{ fill:#1d1e24; }
.part .badge circle{ fill:var(--surface); stroke:var(--line-strong); stroke-width:1.3; }
.part .badge text{
  font:700 11px var(--mo); fill:var(--ink-3); text-anchor:middle; dominant-baseline:central;
  pointer-events:none; user-select:none;
}
.part.is-hover .sh{ fill:var(--surface); stroke:var(--accent); stroke-width:2.2; }
.part.is-sel .sh{ fill:var(--accent); stroke:var(--accent); }
html[data-theme="dark"] .part.is-sel .sh{ fill:var(--accent); }
.part.is-sel .badge circle{ fill:var(--surface); stroke:var(--accent); }
.part.is-sel .badge text{ fill:var(--accent); }
.part.is-hit .sh{ fill:#e7eef8; stroke:var(--accent); }
html[data-theme="dark"] .part.is-hit .sh{ fill:#1b2738; stroke:var(--accent); }
.part.is-dim .sh{ opacity:.28; }
.part.is-dim .badge{ opacity:.28; }
.part:focus{ outline:none; }
.part:focus-visible .sh{ stroke:var(--ink); stroke-width:2.6; stroke-dasharray:5 3; }
.axis{ stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 5; fill:none; opacity:.85; }
.ghost{ fill:none; stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 4; opacity:.7; }

/* leader lines and labels */
.plabel .lead{ stroke:var(--line-strong); stroke-width:1; fill:none; transition:stroke .14s; }
.plabel .leaddot{ fill:var(--line-strong); transition:fill .14s; }
.plabel text{
  font:400 12px var(--mo); fill:var(--ink-2); dominant-baseline:central;
  pointer-events:none; user-select:none; transition:fill .14s;
}
.plabel .lnum{ font-weight:700; fill:var(--ink-3); }
.inlabel{
  font:400 12px var(--mo); fill:var(--ink-2); dominant-baseline:central;
  pointer-events:none; user-select:none; transition:fill .14s;
}
.part.is-sel .inlabel{ fill:var(--paper); font-weight:700; }
.part.is-hover .inlabel{ fill:var(--accent); }
.part.is-hover.is-sel .inlabel{ fill:var(--paper); }
@media (max-width:640px){ .inlabel{ font-size:14px; } }
.part.is-hover .plabel .lead,
.part.is-sel   .plabel .lead{ stroke:var(--accent); }
.part.is-hover .plabel .leaddot,
.part.is-sel   .plabel .leaddot{ fill:var(--accent); }
.part.is-hover .plabel text,     .part.is-hover .plabel .lnum,
.part.is-sel   .plabel text,     .part.is-sel   .plabel .lnum{ fill:var(--accent); }
.part.is-sel   .plabel text{ font-weight:700; }
.part.is-hit .plabel .lead{ stroke:var(--accent); }
@media (max-width:640px){ .plabel text{ font-size:15px; } }

/* dossier panel */
.exp-panel{ padding:30px 32px 34px; min-height:520px; display:flex; flex-direction:column; }
@media (max-width:520px){ .exp-panel{ padding:24px 20px 28px; } }
.dossier-top{ display:flex; align-items:flex-start; gap:16px; margin-bottom:6px; }
.dossier-num{
  font:700 12px/1 var(--mo); color:var(--accent); border:1px solid var(--accent);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.dossier h3{ font-size:26px; line-height:1.05; }
.dossier .role{
  font:400 10px/1.5 var(--mo); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:6px;
}
.dossier .desc{ color:var(--ink-2); font-size:16px; margin:18px 0 0; max-width:none; }
.dossier .bom{
  display:flex; align-items:baseline; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
}
.dossier .bom .v{ font:600 34px/1 var(--dm); color:var(--ink); }
.dossier .bom .k{ font:400 10px/1.5 var(--mo); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.bombar{ height:4px; background:var(--inset); margin-top:12px; position:relative; }
.bombar i{ position:absolute; inset:0 auto 0 0; background:var(--accent); }

.matlist{ list-style:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:0; }
.matlist > li{ padding:13px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:start; }
.matlist > li:last-child{ border-bottom:none; }
.matlist .m-name{ font:600 15.5px/1.3 var(--bd); display:flex; align-items:center; gap:9px; }
.matlist .m-sym{
  font:700 10px/1 var(--mo); letter-spacing:.08em; color:var(--ink-3);
  border:1px solid var(--line-strong); padding:4px 6px; min-width:34px; text-align:center;
}
.matlist .m-role{ font:400 13px/1.5 var(--bd); color:var(--ink-3); margin-top:4px; grid-column:1/2; }
.matlist .m-ground{ font:400 11.5px/1.6 var(--mo); color:var(--ink-2); grid-column:1/-1; margin-top:2px; }
.matlist .m-ground b{ color:var(--ink); font-weight:700; }
.matlist button.m-btn{
  all:unset; cursor:pointer; display:contents;
}
.matlist > li.is-active{ background:var(--inset); box-shadow:-14px 0 0 var(--inset),14px 0 0 var(--inset); }

.legend{ display:flex; flex-wrap:wrap; gap:8px 22px; padding:16px 22px; border-top:1px solid var(--line); background:var(--inset); }
.legend div{ display:flex; align-items:center; gap:8px; font:400 10.5px/1.4 var(--mo); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

.prov{
  font:700 9px/1 var(--mo); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line-strong); color:var(--ink-3); padding:3px 6px; white-space:nowrap;
}
.prov.pub{ border-color:var(--accent); color:var(--accent); }


/* ---------- wide subjects ----------
   The humanoid is portrait; a data hall, a satellite and a car are all
   wider than they are tall. Giving those a wider, shorter stage stops the
   camera fitting on width and leaving dead space above and below. */
.explorer.wide .exp-body{ grid-template-columns:minmax(0,1.32fr) minmax(0,0.68fr); }
.explorer.wide .stage3d{ height:min(64vh,600px); min-height:400px; }
@media (max-width:980px){
  .explorer.wide .exp-body{ grid-template-columns:1fr; }
  .explorer.wide .stage3d{ height:min(58vh,480px); }
}