/* =============================================================================
   THE SCORING COCKPIT — one stylesheet, two surfaces.

   The admin console (dark, served from the box at admin.hitchintel.com) and the
   customer's Company Record (light parchment, served from Pages inside the
   opportunities app) render the SAME cockpit. It was built for the console and
   then, when the customer page needed it, rebuilt there in the record's flat
   field idiom — a worse screen that had to be maintained twice. This file and
   scoring-cockpit.js are that mistake undone: the picture is written once.

   PORTABILITY IS ENTIRELY IN THE TOKENS. Every colour resolves through the
   host's variables with a fallback, so this file never learns which surface it
   is on:
     --field         the input background. The opportunities app FLIPS this with
                     body.light (#0c0e11 → #fffdf8); the console has no such
                     token and takes the dark fallback. Hardcoding the dark, as
                     the first version did, is what makes a light page render
                     black boxes.
     --accent-text   the accent as TYPE. #e8a13c is a fill colour and runs at
                     2.4:1 on parchment; the opportunities palette carries a
                     darker type variant for exactly this. Fills keep --accent.
     --panel2/3      only the console defines these; elsewhere they collapse to
                     --panel, which is the right neutral.
   ========================================================================== */

.sccockpit { --sc-field: var(--field, #0c0e11); }

/* ---- the scale: one rail that says what a score MEANS ---- */
.scscale {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); padding: 1.15rem 1.3rem 1.25rem; margin-bottom: 1.1rem;
}
.scscale h3 { font-family: var(--serif); font-size: 1.24rem; font-weight: 400; margin: 0 0 .15rem; }
.scscale .sub { font-family: var(--mono); font-size: .62rem; color: var(--ink-faint);
  letter-spacing: .04em; margin-bottom: 1.1rem; }
/* the marker's label lives in the WRAPPER, not the rail — the rail is clipped
   (overflow:hidden rounds the band corners), so a label inside it either got cut
   off at the ends or sat on top of a band's own name */
.scrailwrap { position: relative; padding-top: 15px; }
.scrail { position: relative; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--panel3, var(--panel)); display: flex; border: 1px solid var(--line-soft); }
.scrail i { display: block; height: 100%; position: relative; }
.scrail i.nobid  { background: rgba(224, 101, 95, .16); }
.scrail i.watch  { background: rgba(232, 161, 60, .16); }
.scrail i.pursue { background: rgba(123, 191, 123, .18); }
.scrail i.dead { background: repeating-linear-gradient(135deg,
  var(--line-soft) 0 6px, transparent 6px 12px); }
.scrail i span { position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .56rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap; }
/* --accent-text, not --accent, for the same reason its label uses it one line
   down: this is a 2px rule that has to be FOUND, and #e8a13c sits at about 2.4:1
   on the parchment behind it. --accent is never flipped by body.light, so the
   marker and its own caption were rendering at different contrasts — the word
   legible, the line it points with almost invisible. */
.scmark { position: absolute; top: 9px; bottom: 0; width: 2px;
  background: var(--accent-text, var(--accent)); z-index: 3; }
.scmark::after { content: attr(data-l); position: absolute; top: -13px; left: 0;
  transform: translateX(-50%); font-family: var(--mono); font-size: .58rem;
  color: var(--accent-text, var(--accent)); white-space: nowrap; }
/* near either end the centred label would run off the strip — pin it inside */
.scmark.lhs::after { transform: none; left: 0; }
.scmark.rhs::after { transform: none; right: 0; left: auto; }
.scticks { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: .56rem; color: var(--ink-faint); margin-top: .3rem; }

/* the stacked build-up: what a perfect row is actually made of */
.scstack { display: flex; height: 20px; border-radius: 6px; overflow: hidden; margin-top: 1rem;
  background: var(--panel3, var(--panel)); }
.scstack i { display: flex; align-items: center; justify-content: center; height: 100%;
  font-family: var(--mono); font-size: .56rem; color: #0a0b0d; font-weight: 500;
  overflow: hidden; white-space: nowrap; border-right: 1px solid rgba(10, 11, 13, .35); }
.scstack i:last-child { border-right: none; }
.scstacklbl { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .5rem;
  font-family: var(--mono); font-size: .6rem; color: var(--ink-faint); }
.scstacklbl b { color: var(--ink-dim); font-weight: 400; }
.scstacklbl em { font-style: normal; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.scnote { font-size: .74rem; color: var(--ink-faint); line-height: 1.55; margin-top: .85rem;
  padding-top: .7rem; border-top: 1px solid var(--line-soft); }
.scnote b { color: var(--accent-text, var(--amber, var(--accent))); font-weight: 500; }

/* ---- panels ---- */
.scgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem; align-items: start; }
.scsect { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem; }
.scsect.full { grid-column: 1 / -1; }
.scsect h3 { font-family: var(--serif); font-size: 1.14rem; font-weight: 400; color: var(--ink);
  margin: 0 0 .1rem; display: flex; align-items: baseline; gap: .5rem; }
.scsect h3 .u { font-family: var(--mono); font-size: .54rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line);
  border-radius: 100px; padding: 2px 8px; }
.scsect .lede { font-size: .76rem; color: var(--ink-faint); line-height: 1.5; margin: .15rem 0 .95rem; }

/* ---- a row: label + why + bar + number. The bar IS the explanation. ---- */
.scf { display: grid; grid-template-columns: 1fr 74px; gap: .55rem .7rem; align-items: center;
  padding: .4rem 0; border-top: 1px solid var(--line-soft); position: relative; }
.scf:first-of-type { border-top: none; }
.scf .nm { font-size: .83rem; color: var(--ink); line-height: 1.3; }
/* the row label is a <label for> when the row is editable and a <span> when it is
   read-only, so both need the same box */
label.scf-nm, .scf label.nm { display: block; cursor: pointer; }
/* announced, not shown. Twenty buttons all reading "revert 12" are twenty
   identical controls to anything that lists them out of context; the field name
   rides along here without changing the row's width. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.scf .why { display: block; font-size: .7rem; color: var(--ink-faint); line-height: 1.4; margin-top: .1rem; }
.scf input { width: 100%; background: var(--sc-field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: .32rem .45rem;
  font-family: var(--mono); font-size: .78rem; text-align: right; }
.scf input:focus { outline: none; border-color: var(--accent); }
/* read-only, for a seat that may look and not change */
.scf .ro { font-family: var(--mono); font-size: .78rem; color: var(--ink-dim); text-align: right;
  border: 1px solid var(--line-soft); border-radius: 7px; padding: .32rem .45rem; }
.scf .track { grid-column: 1 / -1; height: 5px; border-radius: 100px;
  background: var(--panel3, var(--line-soft)); overflow: hidden; margin-top: .1rem; }
.scf .track i { display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, rgba(232, 161, 60, .55), var(--accent));
  transition: width .18s var(--ease, cubic-bezier(.4, 0, .2, 1)); }
/* The top row's bar runs solid-to-soft, the opposite way to the others, so the
   highest-value rung reads as the full one at a glance.
   NOT --accent-soft, though the name fits: that token means opposite things on
   the two palettes. hitch-tokens.css defines it as #f0c98a, a pale FILL; the
   opportunities app's body.light (explorer/appearance.js) redefines it as
   #8a5a10, a dark brown for TYPE. Used as a gradient stop it therefore lightens
   on dark and DARKENS on parchment — the highlighted row ends up muddier than
   the ordinary ones, which is precisely backwards. An alpha of the accent needs
   no token and composites correctly over either background. */
.scf.top .track i { background: linear-gradient(90deg, var(--accent), rgba(232, 161, 60, .55)); }
/* OVERRIDDEN — differs from the layer beneath. On the console that reads "tuned
   away from the built-in"; on the customer's page it reads "this is yours". */
.scf.ovr { margin-left: -.6rem; padding-left: .5rem; border-left: 2px solid var(--accent); }
.scf .rev { position: absolute; right: 80px; top: .45rem; font-family: var(--mono);
  font-size: .58rem; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 100px;
  padding: 1px 6px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s;
  background: none; }
.scf.ovr .rev { opacity: 1; pointer-events: auto; }
.scf .rev:hover { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
/* a toggle, for the one field that is a switch and was rendered as "1 = on" */
.sctog { display: inline-flex; align-items: center; gap: .4rem; justify-self: end; }
.sctog button { width: 42px; height: 22px; border-radius: 100px;
  background: var(--panel3, var(--line-soft)); border: 1px solid var(--line); position: relative;
  transition: background .18s, border-color .18s; cursor: pointer; }
.sctog button::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ink-faint);
  transition: transform .18s var(--ease, cubic-bezier(.4, 0, .2, 1)), background .18s; }
.sctog button[aria-pressed="true"] { background: rgba(232, 161, 60, .22); border-color: var(--accent); }
.sctog button[aria-pressed="true"]::after { transform: translateX(20px); background: var(--accent); }

/* ---- runway curve: the array, drawn ---- */
.sccurve { background: var(--sc-field); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: .7rem .8rem .5rem; margin: .2rem 0 .5rem; }
.sccurve svg { display: block; width: 100%; height: auto; overflow: visible; }
.sccurve text { font-family: var(--mono); font-size: 9px; fill: var(--ink-faint);
  paint-order: stroke; stroke: var(--sc-field); stroke-width: 2.5px; }
.sccurve text.pt { fill: var(--accent-text, var(--accent)); font-size: 10px; }
.sccurve path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.sccurve .dot { fill: var(--accent); }
.sccurve .gl { stroke: var(--line-soft); stroke-width: 1; }
.sccap { font-family: var(--mono); font-size: .6rem; color: var(--ink-faint); margin-bottom: .35rem;
  display: flex; justify-content: space-between; gap: .6rem; }
.cvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.scjson { width: 100%; background: var(--sc-field); color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 7px; padding: .35rem .5rem; font-family: var(--mono); font-size: .68rem; }
.scjson:focus { outline: none; border-color: var(--accent); color: var(--ink); }
.scjson.bad { border-color: var(--warn, #e0655f); }

/* ---- the bar the host fills with its own buttons ---- */
.scbar { display: flex; align-items: center; gap: .7rem; margin-top: 1.3rem; flex-wrap: wrap;
  padding: 1rem 0 .3rem; border-top: 1px solid var(--line-soft); }
.scdirty { font-family: var(--mono); font-size: .62rem; color: var(--accent-text, var(--accent)); }