/* Structure of the guide page. Every look (colours, type, borders, decoration) is a theme: themes/<name>/theme.css
   sets the variables below and adds its own rules on top. */
:root {
  --font: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: var(--font);
  --font-title: var(--font);
  --font-hint: var(--font);
  --ink: #17202b;
  --sub: #5a6676;
  --page: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #eef2f6 55%, #dde5ee 100%);
  --accent: #ff8a00;
  --accent-dark: #c66a00;
  --on-accent: #fff;
  --hint: #a85400;
  --box: #d4e6f8;
  --box-edge: #23476d;
  --box-radius: 8px;
  --panel: rgba(255, 255, 255, .93);
  --panel-edge: #23476d;
  --panel-radius: 12px;
  --shadow: 0 10px 28px rgba(20, 40, 70, .16);
  --btn: rgba(255, 255, 255, .9);
  --btn-edge: #b9c5d3;
  --btn-on: #17202b;
  --btn-on-ink: #fff;
  --bar: #d3dbe4;
  --bar-done: #7c8a9c;
  --nav: linear-gradient(to top, rgba(255, 255, 255, .96), rgba(255, 255, 255, .75));
  --nav-edge: #d3dbe4;
  --num-size: 76px;
  --num-weight: 900;
  --halo: 0 0 6px #fff, 0 0 2px #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--page); color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 0; }
.deco { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
body > section, #tools, #layerbar, #nav, #inset, #texnote { z-index: 2; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- step callout (top left) */
#callout { position: fixed; left: 16px; top: 14px; max-width: min(560px, calc(100vw - 32px)); pointer-events: none; }
#callout .chapter { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); margin: 0 0 4px 4px; }
#callout .row { display: flex; align-items: center; gap: 12px; }
#callout .num { font-family: var(--font-num); font-size: var(--num-size); font-weight: var(--num-weight); line-height: .9; min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
#callout .box { background: var(--box); border: 2px solid var(--box-edge); border-radius: var(--box-radius); padding: 8px 12px 6px; box-shadow: var(--shadow); }
#callout .boxlabel { display: none; }
#callout .parts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-end; }
.pcell { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.pcell .ic { position: relative; width: 58px; height: 58px; }
.pcell .ic img { width: 100%; height: 100%; display: block; }
.pcell .n { font-family: var(--font-num); font-weight: 900; font-size: 18px; line-height: 1.1; margin-top: 1px; }
.pcell .nm { font-size: 11px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; text-align: center; max-width: 92px; line-height: 1.15; hyphens: auto; overflow-wrap: anywhere; }
.pcell.dig .n { color: #c22; }
#callout .title { font-family: var(--font-title); font-weight: 800; font-size: 19px; margin: 10px 0 0 4px; text-shadow: var(--halo); }
#callout .hint { font-family: var(--font-hint); font-weight: 700; font-size: 14.5px; color: var(--hint); margin: 3px 0 0 4px; max-width: 470px; line-height: 1.3; text-shadow: var(--halo); }
#callout .auto { align-self: center; font-size: 12px; font-weight: 800; color: var(--box-edge); max-width: 90px; line-height: 1.2; }

/* ---------- plan inset (busy steps) */
#inset { position: fixed; right: 16px; top: 64px; width: 230px; margin: 0; pointer-events: none; background: var(--panel); border: 2px solid var(--panel-edge); border-radius: var(--panel-radius); padding: 6px 8px 8px; box-shadow: var(--shadow); }
#inset figcaption { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); margin: 0 0 4px 2px; }
#inset canvas { display: block; width: 100%; aspect-ratio: 1.25; }
.compass { position: absolute; right: 12px; bottom: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--sub); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--ink); }
.compass::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 7px solid var(--accent); border-top: 0; }

/* ---------- cover */
#cover { position: fixed; left: 0; right: 0; bottom: 96px; display: flex; justify-content: center; pointer-events: none; }
#cover .card { pointer-events: auto; background: var(--panel); border: 2px solid var(--panel-edge); border-radius: var(--panel-radius); padding: 18px 22px 18px; width: min(520px, calc(100vw - 24px)); min-width: 0; box-shadow: var(--shadow);
  /* Measured header and cover bottom include theme-specific navigation/modes. Keep 120px for the model. */
  max-height: max(120px, calc(100vh - var(--cover-top, 72px) - var(--cover-bottom, 130px) - 120px));
  max-height: max(120px, calc(100dvh - var(--cover-top, 72px) - var(--cover-bottom, 130px) - 120px));
  overflow: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable;
}
#cover .kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
#cover h1 { font-family: var(--font-title); margin: 2px 0 2px; font-size: 28px; font-weight: 900; line-height: 1.1; }
#cover .sub { color: var(--sub); font-weight: 600; font-size: 14px; }
#cover .totals { margin-top: 10px; font-weight: 800; font-size: 15px; }
#cover .mini { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 12px; }
#cover .mini .pcell { min-width: 40px; }
#cover .mini .pcell .ic { width: 40px; height: 40px; }
#cover .mini .pcell .n { font-size: 13px; }
#cover .mini .pcell .nm { display: none; }
#cover .mini .more { align-self: center; font-weight: 800; color: var(--sub); font-size: 15px; padding-left: 4px; }
#cover .legal { margin-top: 10px; font-size: 10.5px; color: var(--sub); line-height: 1.3; }
.go { width: 100%; border: 0; border-radius: 8px; padding: 12px; font-size: 17px; font-weight: 800; background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-dark); }
.go:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--accent-dark); }

/* ---------- parts list page */
#bom { position: fixed; inset: 0 0 84px 0; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; }
#bom .sheet { pointer-events: auto; background: var(--panel); border: 2px solid var(--panel-edge); border-radius: var(--panel-radius); padding: 18px 20px 20px; width: min(760px, 100%); max-height: 100%; overflow: auto; box-shadow: var(--shadow); }
#bom h2 { font-family: var(--font-title); margin: 0; font-size: 26px; font-weight: 900; }
#bom .totals { color: var(--sub); font-weight: 700; margin: 2px 0 14px; }
#bom .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
#bom .grid .kind { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin-top: 6px; border-bottom: 1px solid var(--bar); padding-bottom: 3px; }
#bom .pcell { background: var(--box); border: 1.5px solid var(--box-edge); border-radius: var(--box-radius); padding: 8px 6px 8px; }
#bom .pcell .ic { width: 72px; height: 72px; }
#bom .pcell .n { font-size: 20px; }
#bom .pcell .nm { font-size: 12px; max-width: 110px; }

/* ---------- tools */
#tools { position: fixed; right: 14px; top: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 46vw; }
#tools button { border: 1.5px solid var(--btn-edge); background: var(--btn); border-radius: 7px; padding: 6px 10px; font-size: 13px; font-weight: 700; }
#tools .seg { display: flex; }
#tools .seg button { border-radius: 0; margin-left: -1.5px; }
#tools .seg button:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
#tools .seg button:last-child { border-radius: 0 7px 7px 0; }
#tools button.on { background: var(--btn-on); border-color: var(--btn-on); color: var(--btn-on-ink); }

/* ---------- layer bar */
#layerbar { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--panel); border: 1.5px solid var(--btn-edge); border-radius: 10px; padding: 8px 6px; }
#layerbar button { width: 44px; height: 40px; border: 0; border-radius: 7px; background: var(--btn-on); color: var(--btn-on-ink); font-size: 16px; }
#layerbar #layerLabel { font-weight: 800; font-size: 13px; text-align: center; line-height: 1.2; min-width: 56px; }

/* ---------- nav */
#nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--nav); border-top: 1px solid var(--nav-edge); }
.navbtn { width: 64px; height: 52px; border-radius: 10px; border: 1.5px solid var(--btn-edge); background: var(--btn); font-size: 20px; font-weight: 900; }
.navbtn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 var(--accent-dark); }
.navbtn:disabled { opacity: .35; }
.progress { flex: 1; min-width: 0; }
.progress .label { font-weight: 800; font-size: 14px; text-align: center; margin-bottom: 5px; }
.progress .bar { display: flex; gap: 3px; }
.progress .bar i { flex: 1; height: 9px; border-radius: 3px; background: var(--bar); cursor: pointer; }
.progress .bar i.done { background: var(--bar-done); }
.progress .bar i.cur { background: var(--accent); }
.progress .bar i.end { flex: .8; }
.progress .bar i.end.cur { background: var(--box-edge); }

#texnote { position: fixed; left: 14px; bottom: 84px; font-size: 11px; font-weight: 700; color: var(--sub); background: var(--panel); padding: 3px 8px; border-radius: 6px; }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--sub); pointer-events: none; z-index: 5; text-align: center; padding: 20px; }

/* ---------- phones */
@media (max-width: 640px) {
  :root { --num-size: 52px; }
  #callout { left: 10px; top: 10px; max-width: calc(100vw - 20px); }
  #callout .num { min-width: 36px; }
  #callout .box { padding: 6px 8px 4px; }
  #callout .parts { gap: 4px 12px; }
  .pcell { min-width: 44px; }
  .pcell .ic { width: 44px; height: 44px; }
  .pcell .n { font-size: 14px; }
  .pcell .nm { font-size: 9.5px; max-width: 70px; }
  #callout .title { font-size: 16px; margin-top: 6px; }
  #callout .hint { font-size: 13px; }
  #callout .chapter { font-size: 11px; }
  #inset { top: auto; bottom: 130px; right: 10px; width: 132px; padding: 4px 5px 5px; }
  #inset figcaption { font-size: 9.5px; }
  .compass { width: 20px; height: 20px; right: 8px; bottom: 8px; font-size: 8px; }
  #tools { top: auto; bottom: 86px; right: 10px; left: 10px; max-width: none; justify-content: center; }
  #tools button { padding: 6px 8px; font-size: 12px; }
  #layerbar { right: 8px; top: auto; bottom: 130px; transform: none; }
  #cover { bottom: 130px; }
  #cover h1 { font-size: 23px; }
  #bom { inset: 0 0 128px 0; }
  #bom .grid { grid-template-columns: repeat(3, 1fr); }
  #bom .pcell .ic { width: 54px; height: 54px; }
  #bom .pcell .n { font-size: 16px; }
  .navbtn { width: 56px; height: 48px; }
  #texnote { bottom: 128px; }
}

.material-group { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 8px; }
#bom .material-group { border-bottom: 1px solid var(--bar); padding-bottom: 5px; }
#cover .material-group { flex-basis: 100%; }