/* BusScope → ferronato.me labs identity (see ../portfolio-shell.css).
   Loaded last. Only presentation: layout, sizing that the canvas code
   measures, and every animation/transition are left as the page defines them.

   app.mjs reads the drawing colours from <html> (getComputedStyle on
   documentElement), so the page variables are set on <html> and repeated on
   <body> to beat the older mapping in portfolio-shell.css. The theme toggle
   switches html[data-theme] between "dark" (identity default) and "paper". */

html[data-theme="paper"]{
  --fm-bg:#F4F1EA;--fm-panel:#FFFFFF;--fm-panel-2:#F8F6F1;--fm-sunk:#ECE8DF;
  --fm-ink:#1E2022;--fm-muted:#55575A;--fm-dim:#7A7C7E;
  --fm-rule:#D9D5CC;--fm-rule-strong:#BDB8AD;
  --fm-amber:#B57A12;--fm-amber-ink:#FFFFFF;--fm-amber-soft:rgba(181,122,18,.10);--fm-amber-line:rgba(181,122,18,.5);
  --fm-d1:#B57A12;--fm-d2:#2F6E93;--fm-d3:#2E8460;--fm-d4:#B4513A;--fm-d5:#6A55B0;--fm-d6:#6F726F;
  --fm-ok:#2E8460;--fm-warn:#B57A12;--fm-bad:#B4513A;
  --fm-shadow:0 1px 2px rgba(30,32,34,.06),0 8px 24px rgba(30,32,34,.06);
}

html[data-theme],
html[data-theme] body[data-fm-project="bus_protocols"]{
  /* page palette (styles.css) */
  --paper:var(--fm-bg);
  --figure:var(--fm-sunk);           /* canvas paper + input wells */
  --band:var(--fm-panel-2);
  --rule:var(--fm-rule);
  --ink:var(--fm-ink);
  --ink-2:var(--fm-muted);
  --ink-3:var(--fm-dim);
  /* who drives the wire: shared data palette, same meaning as before */
  --man:var(--fm-d2);                /* manager    → blue  */
  --sub:var(--fm-d4);                /* subordinate→ coral */
  --event:var(--fm-d3);              /* capture    → mint  */
  --idle:#6A6D6B;
  --clock:var(--fm-d6);
  --cursor:var(--fm-amber-soft);
  --sans:var(--fm-sans);
  --mono:var(--fm-mono);
  /* upgrade.css palette */
  --accent:var(--fm-amber);
  --lab-bg:var(--fm-panel);
  --lab-border:var(--fm-rule);
  --lab-muted:var(--fm-muted);
}
html[data-theme="paper"],
html[data-theme="paper"] body[data-fm-project="bus_protocols"]{
  --figure:var(--fm-panel);          /* a white figure reads better in light */
  --idle:#A9A69F;
}

/* ---------- base ---------- */
body[data-fm-project="bus_protocols"]{
  background:var(--fm-bg);background-image:none;
  color:var(--fm-ink);font-family:var(--fm-sans);font-size:15px;
}
body[data-fm-project="bus_protocols"] :focus-visible{outline-color:var(--fm-amber)}
body[data-fm-project="bus_protocols"] button:hover{filter:none}
body[data-fm-project="bus_protocols"] :is(main,.colophon) a{color:var(--fm-amber)}
body[data-fm-project="bus_protocols"] h1,
body[data-fm-project="bus_protocols"] h2,
body[data-fm-project="bus_protocols"] h3{letter-spacing:-.01em}

/* ---------- shell hero + tab strip (see ../portfolio-shell.css) ----------
   The old header bar (.rail / .views / .wordmark) is gone: the brand lives in
   the hero and the four view tabs sit in the sticky nav.fm-tabs strip. The
   buttons keep their .viewtab class and data-view attribute for app.mjs;
   styles.css / upgrade.css still carry !important rules for .viewtab, so the
   shell look is restated here with matching priority. */
body[data-fm-project="bus_protocols"] .fm-hero h1{margin:0}
body[data-fm-project="bus_protocols"] .fm-hero-fig figcaption strong{color:var(--fm-ink);font-weight:600}
body[data-fm-project="bus_protocols"] .fm-tabs .viewtab{
  font:500 13px/1.2 var(--fm-sans)!important;padding:13px 10px 11px!important;
  border-radius:6px 6px 0 0;box-shadow:none;cursor:pointer;
}
body[data-fm-project="bus_protocols"] .fm-tabs .viewtab.is-on{box-shadow:none}
body[data-fm-project="bus_protocols"] .fm-tabs .fm-chip{
  height:26px;cursor:pointer;text-decoration:none;
  font:500 11px/1 var(--fm-mono)!important;letter-spacing:.02em;
}
body[data-fm-project="bus_protocols"] .fm-tabs .fm-chip:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong)}
body[data-fm-project="bus_protocols"] .fm-tabs .fm-chip:disabled{opacity:.4;cursor:not-allowed;filter:none}
body[data-fm-project="bus_protocols"] .fm-tabs .fm-chip:disabled:hover{color:var(--fm-muted);border-color:var(--fm-rule)}
body[data-fm-project="bus_protocols"] main{
  box-sizing:border-box;width:min(1200px,calc(100% - 40px));max-width:none;margin:0 auto;padding:30px 0 56px;
}

/* ---------- buttons ---------- */
body[data-fm-project="bus_protocols"] .chip,
body[data-fm-project="bus_protocols"] .transport button{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--fm-h-ctl);padding:0 12px;
  font:500 12.5px/1 var(--fm-sans);color:var(--fm-ink);
  background:var(--fm-panel);border:1px solid var(--fm-rule);border-radius:var(--fm-r-ctl);
}
body[data-fm-project="bus_protocols"] .chip:hover,
body[data-fm-project="bus_protocols"] .transport button:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong)}
body[data-fm-project="bus_protocols"] .transport .is-primary{
  background:var(--fm-amber);border-color:var(--fm-amber);color:var(--fm-amber-ink);font-weight:600;
}
body[data-fm-project="bus_protocols"] .transport .is-primary:hover{border-color:var(--fm-amber);filter:brightness(1.06)}

/* ---------- protocol index → sub-tab chips above the stage ----------
   app.mjs fills nav#protocolIndex with <h4> family headings and <button
   data-id> entries. It used to be a sticky side column; it is now a wrapped
   row of .fm-subtabs chips directly above the figure, family names as small
   inline mono labels. Tabs are above the content, never beside it. */
body[data-fm-project="bus_protocols"] .explore{display:block}
body[data-fm-project="bus_protocols"] .index{
  position:static;top:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 22px;padding:0 0 14px;border-bottom:1px solid var(--fm-rule);
}
body[data-fm-project="bus_protocols"] .index h4{
  width:auto;margin:0 4px 0 14px;
  font:600 10px/1 var(--fm-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fm-dim);
}
body[data-fm-project="bus_protocols"] .index h4:first-child{margin-left:0}
body[data-fm-project="bus_protocols"] .index button{
  display:inline-flex;align-items:center;gap:6px;width:auto;min-height:28px;
  padding:0 11px!important;border:1px solid var(--fm-rule);border-radius:999px!important;
  background:var(--fm-panel);color:var(--fm-muted);
  font:500 12px/1 var(--fm-sans)!important;text-align:left;white-space:nowrap;cursor:pointer;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
body[data-fm-project="bus_protocols"] .index button:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong);background:var(--fm-panel)}
body[data-fm-project="bus_protocols"] .index button.is-on{
  color:var(--fm-amber);font-weight:500;
  background:var(--fm-amber-soft)!important;border-color:var(--fm-amber-line);
}
body[data-fm-project="bus_protocols"] .index button small{display:none}
@media (max-width:760px){
  body[data-fm-project="bus_protocols"] .index{gap:5px;margin-bottom:18px}
  body[data-fm-project="bus_protocols"] .index h4{width:100%;margin:8px 0 2px}
  body[data-fm-project="bus_protocols"] .index h4:first-child{margin-top:0}
  body[data-fm-project="bus_protocols"] .index button{min-height:26px;padding:0 9px!important;font-size:11.5px!important}
}

/* ---------- headings ---------- */
body[data-fm-project="bus_protocols"] .stage-head h2,
body[data-fm-project="bus_protocols"] .head h2,
body[data-fm-project="bus_protocols"] .lab-heading h2{
  font-family:var(--fm-serif);font-weight:400;letter-spacing:-.02em;
}
body[data-fm-project="bus_protocols"] .stage-head h2{font-size:34px}
body[data-fm-project="bus_protocols"] .head h2{font-size:30px}
body[data-fm-project="bus_protocols"] .stage-kind{font:500 11.5px/1.4 var(--fm-mono);letter-spacing:.02em;color:var(--fm-dim);margin-top:4px}
body[data-fm-project="bus_protocols"] .stage-summary,
body[data-fm-project="bus_protocols"] .head p,
body[data-fm-project="bus_protocols"] .lab-heading p{color:var(--fm-muted)}
body[data-fm-project="bus_protocols"] .eyebrow{
  font:500 10.5px/1.3 var(--fm-mono)!important;letter-spacing:.12em!important;
  text-transform:uppercase;color:var(--fm-amber)!important;
}
body[data-fm-project="bus_protocols"] .inspector-head h3,
body[data-fm-project="bus_protocols"] .fit h3,
body[data-fm-project="bus_protocols"] .axi-fields h3,
body[data-fm-project="bus_protocols"] .keys-block h3,
body[data-fm-project="bus_protocols"] .notes h3,
body[data-fm-project="bus_protocols"] .lesson-grid h3,
body[data-fm-project="bus_protocols"] .fit dt,
body[data-fm-project="bus_protocols"] .ref dt,
body[data-fm-project="bus_protocols"] .model-notes summary{font-family:var(--fm-sans);font-weight:600;color:var(--fm-ink)}
body[data-fm-project="bus_protocols"] .lesson-grid h3{font-size:18px}

/* ---------- toolbar / inputs ---------- */
body[data-fm-project="bus_protocols"] .toolbar{border-color:var(--fm-rule)}
body[data-fm-project="bus_protocols"] .tool > span,
body[data-fm-project="bus_protocols"] .lab-controls label{
  font:500 10.5px/1.3 var(--fm-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fm-dim);
}
body[data-fm-project="bus_protocols"] .tool output,
body[data-fm-project="bus_protocols"] .lab-controls output{font-family:var(--fm-mono);color:var(--fm-amber);text-transform:none;letter-spacing:0}
body[data-fm-project="bus_protocols"] .tool-check{font-family:var(--fm-sans);font-size:13px;color:var(--fm-muted)}
body[data-fm-project="bus_protocols"] .tool select,
body[data-fm-project="bus_protocols"] .lab-controls select,
body[data-fm-project="bus_protocols"] .lab-controls input:not([type=range]){
  height:var(--fm-h-ctl);padding:0 8px;
  font:400 13px var(--fm-sans);color:var(--fm-ink);
  background:var(--fm-sunk);border:1px solid var(--fm-rule);border-radius:var(--fm-r-ctl);
  text-transform:none;letter-spacing:0;
}
body[data-fm-project="bus_protocols"] input[type="range"],
body[data-fm-project="bus_protocols"] .tool-range input,
body[data-fm-project="bus_protocols"] .tool-check input{accent-color:var(--fm-amber)}

/* ---------- figure ---------- */
body[data-fm-project="bus_protocols"] .figure{border-radius:var(--fm-r-panel)}
body[data-fm-project="bus_protocols"] .scroller{
  background:var(--figure);border:1px solid var(--fm-rule);border-radius:var(--fm-r-panel);
}
body[data-fm-project="bus_protocols"] .figure figcaption{color:var(--fm-muted)}
body[data-fm-project="bus_protocols"] .fig-no{
  font:500 10.5px/1.3 var(--fm-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fm-amber);
}
body[data-fm-project="bus_protocols"] .legend{color:var(--fm-dim);font-size:12.5px}
body[data-fm-project="bus_protocols"] .fieldnote{color:var(--fm-muted)}

/* ---------- panels / cards ---------- */
body[data-fm-project="bus_protocols"] .inspector,
body[data-fm-project="bus_protocols"] .model-notes,
body[data-fm-project="bus_protocols"] .lab-controls,
body[data-fm-project="bus_protocols"] .stat-grid article,
body[data-fm-project="bus_protocols"] .chain article{
  background:var(--fm-panel);border:1px solid var(--fm-rule);border-radius:var(--fm-r-panel);
}
body[data-fm-project="bus_protocols"] .model-notes{margin-top:18px}
body[data-fm-project="bus_protocols"] .chain article{border-top:3px solid var(--fm-d2)}
body[data-fm-project="bus_protocols"] .chain article:nth-child(2){border-top-color:var(--fm-d5)}
body[data-fm-project="bus_protocols"] .chain article:nth-child(3){border-top-color:var(--fm-d3)}
body[data-fm-project="bus_protocols"] .stat-grid small,
body[data-fm-project="bus_protocols"] .chain small{
  font:500 10.5px/1.3 var(--fm-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fm-dim);
}
body[data-fm-project="bus_protocols"] .stat-grid strong{font:600 20px var(--fm-mono);color:var(--fm-ink)}
body[data-fm-project="bus_protocols"] .cycle-phase{font-family:var(--fm-mono);color:var(--fm-amber)}
body[data-fm-project="bus_protocols"] .cycle-note{color:var(--fm-muted)}
body[data-fm-project="bus_protocols"] .lab-notice{
  background:var(--fm-panel);border:1px solid var(--fm-rule);border-left:3px solid var(--fm-amber);
  border-radius:var(--fm-r-ctl);color:var(--fm-ink);
}
body[data-fm-project="bus_protocols"] .lab-notice[data-bad=true]{border-left-color:var(--fm-bad)}
body[data-fm-project="bus_protocols"] #specTrace{border:1px solid var(--fm-rule);border-radius:var(--fm-r-panel)}

/* ---------- tables ---------- */
body[data-fm-project="bus_protocols"] .values th,
body[data-fm-project="bus_protocols"] .lab-table th,
body[data-fm-project="bus_protocols"] .matrix tbody th{
  font:500 10.5px/1.3 var(--fm-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fm-dim);
}
body[data-fm-project="bus_protocols"] .lab-table th{background:var(--fm-panel)}
body[data-fm-project="bus_protocols"] .values td{font-family:var(--fm-mono)}
body[data-fm-project="bus_protocols"] .values td:last-child{font-family:var(--fm-sans)}
body[data-fm-project="bus_protocols"] .matrix thead th{font-family:var(--fm-sans);font-weight:600;border-bottom:1px solid var(--fm-rule-strong)}
body[data-fm-project="bus_protocols"] .lane{border-color:var(--fm-rule);border-radius:4px;font-family:var(--fm-mono)}
body[data-fm-project="bus_protocols"] .lane.active{
  background:var(--fm-amber-soft);border-color:var(--fm-amber-line);color:var(--fm-amber);
}

/* ---------- compare: picker pills ---------- */
body[data-fm-project="bus_protocols"] .picker button{
  height:var(--fm-h-ctl);padding:0 13px;
  font:500 12.5px var(--fm-sans);color:var(--fm-muted);
  background:none;border:1px solid var(--fm-rule);border-radius:999px;
}
body[data-fm-project="bus_protocols"] .picker button:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong)}
body[data-fm-project="bus_protocols"] .picker button.is-on{
  color:var(--fm-amber);background:var(--fm-amber-soft);border-color:var(--fm-amber-line);
}

/* ---------- reference ---------- */
body[data-fm-project="bus_protocols"] .axi-fields dt{font-family:var(--fm-mono);color:var(--fm-amber)}
body[data-fm-project="bus_protocols"] .ref dd,
body[data-fm-project="bus_protocols"] .fit dd,
body[data-fm-project="bus_protocols"] .axi-fields dd,
body[data-fm-project="bus_protocols"] .notes p,
body[data-fm-project="bus_protocols"] .lesson-grid p{color:var(--fm-muted)}
body[data-fm-project="bus_protocols"] kbd{
  font-family:var(--fm-mono);background:var(--fm-panel-2);border-color:var(--fm-rule);color:var(--fm-ink);
}
body[data-fm-project="bus_protocols"] .colophon{color:var(--fm-dim);border-top-color:var(--fm-rule)}

/* ---------- small screens ---------- */
@media (max-width:760px){
  body[data-fm-project="bus_protocols"] .fm-tabs .viewtab{padding:12px 9px 10px!important;font-size:12.5px!important}
  body[data-fm-project="bus_protocols"] .fm-tabs .fm-wrap{flex-wrap:wrap}
  body[data-fm-project="bus_protocols"] .fm-tabs .fm-tab-actions{width:100%;padding:0 0 8px;margin-left:0;overflow-x:auto;scrollbar-width:none}
  body[data-fm-project="bus_protocols"] .fm-tabs .fm-tab-actions::-webkit-scrollbar{display:none}
  body[data-fm-project="bus_protocols"] main{width:calc(100% - 28px);padding:22px 0 40px!important}
}