/* ============================================================
   JURASSIC INTERFACE — PRIMITIVES
   Requires tokens.css. Prefix: .jp-
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body.jp-body {
  margin: 0;
  padding: var(--jp-gap);
  background: var(--jp-chassis);
  color: var(--jp-on-chassis);
  font-family: var(--jp-face-display);
  font-stretch: var(--jp-stretch);
  font-size: var(--jp-t-sm);
  -webkit-font-smoothing: antialiased;
}

/* ---- BEVELS ---------------------------------------------------
   Depth in this system comes from exactly one device: a 2px pair of
   light/dark edges. Never a shadow, never a gradient, never a radius. */

.jp-out {
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  border-radius: var(--jp-radius);
}
.jp-in {
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  border-radius: var(--jp-radius);
}

/* ---- CHASSIS + PANEL ------------------------------------------ */

.jp-chassis {                     /* the outermost frame          */
  background: var(--jp-chassis);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  padding: var(--jp-gap);
}
.jp-chassis--deep { padding: var(--jp-pad-lg); }

.jp-panel {                       /* a labeled region            */
  background: var(--jp-chassis);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  padding: var(--jp-gap);
  min-width: 0;                   /* lets panels shrink in grids   */
}

.jp-well {                        /* recessed content area        */
  background: var(--jp-well);
  color: var(--jp-on-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  padding: var(--jp-pad);
  min-width: 0;
}
.jp-well--paper { background: var(--jp-well-2); color: var(--jp-on-well-2); }

/* ---- PLATE (the only way to label anything) ------------------- */

.jp-plate {
  display: inline-block;
  justify-self: start;            /* hug the text, even as a grid child */
  background: var(--jp-well);
  color: var(--jp-ink-inv);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-xs);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  padding: 3px 9px 2px;
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  white-space: nowrap;
}
a.jp-plate, button.jp-plate {          /* a plate used as a control */
  min-height: var(--jp-tap);
  display: inline-flex; align-items: center;
}
.jp-plate--key  { background: var(--jp-hold); color: var(--jp-ink); }
.jp-plate--fail { background: var(--jp-fail); color: var(--jp-ink-inv); }
.jp-plate--go   { background: var(--jp-go);   color: var(--jp-ink-inv); }

.jp-plate-row {                   /* plate + trailing hint text   */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--jp-gap);
  margin-bottom: var(--jp-gap);
}
.jp-plate-row__hint {
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-xs);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  color: var(--jp-dim-chassis);
}

/* ---- TYPE ------------------------------------------------------ */

.jp-display {
  overflow-wrap: anywhere;
  font-family: var(--jp-face-display);
  font-stretch: var(--jp-stretch);
  font-style: var(--jp-slant);
  font-weight: 700;
  letter-spacing: var(--jp-track);
  line-height: 1.05;
  margin: 0;
}
.jp-display--xl  { font-size: var(--jp-t-2xl); }
.jp-display--lg  { font-size: var(--jp-t-xl); }
.jp-display--md  { font-size: var(--jp-t-lg); }

.jp-data {                        /* anything a machine wrote      */
  font-family: var(--jp-face-data);
  font-stretch: normal;
  font-size: var(--jp-t-xs);
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0;
}

/* ---- TABS ------------------------------------------------------ */

.jp-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: var(--jp-gap);
}
.jp-tab {
  flex: 0 0 auto;
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  color: var(--jp-dim-chassis);
  background: var(--jp-chassis);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  padding: 7px 16px 6px;
  cursor: pointer;
}
.jp-tab[aria-selected="true"] {
  background: var(--jp-well);
  color: var(--jp-on-well);
}
.jp-tab__grip {                   /* the little ridged handle      */
  display: inline-block;
  width: 9px; height: 11px;
  margin-left: 7px;
  vertical-align: -1px;
  background: repeating-linear-gradient(
    to bottom,
    currentColor 0 2px,
    transparent 2px 4px
  );
}

/* ---- BUTTONS --------------------------------------------------- */

.jp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 var(--jp-t-sm)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  color: var(--jp-on-chassis);
  background: var(--jp-chassis-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  padding: 9px 20px 8px;
  cursor: pointer;
  transition: none;
}
.jp-btn:active {                  /* physically depresses          */
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  padding: 10px 19px 7px 21px;
}
.jp-btn--key  { box-shadow: inset 0 0 0 2px var(--jp-hold); }
.jp-btn--fail { color: var(--jp-fail); }
.jp-btn--wide { width: 100%; }
.jp-btn[disabled] {
  color: var(--jp-dim-chassis);
  text-shadow: 1px 1px 0 var(--jp-hi);   /* engraved, not faded */
  cursor: not-allowed;
}
.jp-btn-bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
  gap: 4px;
}

/* A control is a control whether it is a <button> or an <a>. Without this,
   every anchor-button needs an inline text-decoration override. */
a.jp-btn, a.jp-plate, a.jp-chip, a.jp-tab, a.jp-option, a.jp-icon, a.card {
  text-decoration: none;
  color: inherit;
}

.jp-btn:focus-visible,
.jp-tab:focus-visible,
.jp-input:focus-visible {
  outline: 2px solid var(--jp-hold);
  outline-offset: 1px;
}

/* ---- STATUS: LED + WORD (never color alone) ------------------- */

.jp-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
}
.jp-led {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;             /* the sole exception: lamps are round */
  background: var(--jp-off);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
}
.jp-led--go   { background: var(--jp-go); }
.jp-led--hold { background: var(--jp-hold); }
.jp-led--fail { background: var(--jp-fail); animation: jp-blink var(--jp-blink) steps(1) infinite; }

@keyframes jp-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .jp-led--fail, .jp-caret { animation: none; }
}

/* ---- READOUT (the big statement well) -------------------------- */

.jp-readout {
  background: var(--jp-well);
  color: var(--jp-on-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  padding: var(--jp-pad-lg);
  text-align: center;
}
.jp-readout__line {
  overflow-wrap: anywhere;
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-xl);
  letter-spacing: var(--jp-track);
  text-transform: uppercase;
  margin: 0;
}
.jp-readout__sub {
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-md);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  color: var(--jp-dim-well);
  margin: 6px 0 0;
}
.jp-caret {
  display: inline-block;
  width: .55em; height: 1em;
  margin-left: .15em;
  vertical-align: -.12em;
  background: currentColor;
  animation: jp-blink var(--jp-blink) steps(1) infinite;
}

/* ---- LOG (events, toasts, activity) ---------------------------- */

.jp-log { display: grid; gap: 3px; }
.jp-log__row {
  min-width: 0;
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 10px;
  background: var(--jp-well-2);
  color: var(--jp-on-well-2);
  padding: 4px 8px;
  min-height: var(--jp-row);
}
/* A flag comes in two families and defaults to NEITHER.
   Status  — go/hold/fail. The row reports a state.
   Category — s1..s5. The row belongs to a taxonomy.
   Defaulting to a status color makes every uncolored row read as
   "success", and paints blog categories as faults. Opt in. */
.jp-log__flag {
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--jp-ink-inv);
  background: var(--jp-well);
  padding: 4px 6px 3px;
}
.jp-log__flag--go   { background: var(--jp-go); }
.jp-log__flag--hold { background: var(--jp-hold); color: #000; }
.jp-log__flag--fail { background: var(--jp-fail); }
.jp-log__flag--s1 { background: var(--jp-s1); color: #05080f; }
.jp-log__flag--s2 { background: var(--jp-s2); color: #05080f; }
.jp-log__flag--s3 { background: var(--jp-s3); color: #05080f; }
.jp-log__flag--s4 { background: var(--jp-s4); color: #05080f; }
.jp-log__flag--s5 { background: var(--jp-s5); color: #05080f; }
.jp-log__msg {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-sm);
  letter-spacing: var(--jp-track);
}
.jp-log__meta { font-family: var(--jp-face-data); font-size: var(--jp-t-xs); opacity: .65; }

/* ---- INDEX (nav, tables, dense record lists) ------------------- */

.jp-index {
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-xs);
}
.jp-index__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 7px;
  color: var(--jp-on-well);
  cursor: pointer;
}
.jp-index__item[aria-current="true"] {
  background: var(--jp-data);
  color: #fff;
}
.jp-index__item:hover:not([aria-current="true"]) { background: var(--jp-well-line); }

/* ---- KEY / VALUE ----------------------------------------------- */

.jp-kv {
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-xs);
  display: grid;
  gap: 1px;
}
.jp-kv > div { display: flex; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.jp-kv dt { color: var(--jp-dim-well); margin: 0; }
.jp-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---- FIELDS ---------------------------------------------------- */

.jp-field { display: grid; gap: 5px; }
.jp-input, .jp-select, .jp-textarea {
  width: 100%;
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-sm);
  color: var(--jp-on-well);
  background: var(--jp-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  border-radius: 0;
  padding: 7px 9px;
}
.jp-input::placeholder { color: var(--jp-dim-well); }
.jp-textarea { resize: vertical; min-height: 72px; }

.jp-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  cursor: pointer;
}
.jp-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.jp-toggle__box {
  width: 16px; height: 16px;
  background: var(--jp-chassis-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  display: grid; place-items: center;
}
.jp-toggle input:checked + .jp-toggle__box::after {
  content: ""; width: 8px; height: 8px; background: var(--jp-go);
}
.jp-toggle input:focus-visible + .jp-toggle__box { outline: 2px solid var(--jp-hold); }

/* ---- METER (segmented — never a smooth bar) -------------------- */

.jp-meter {
  display: flex; gap: 2px;
  background: var(--jp-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  padding: 3px;
}
.jp-meter__seg { flex: 1; height: 12px; background: var(--jp-well-line); }
.jp-meter__seg--on   { background: var(--jp-go); }
.jp-meter__seg--hold { background: var(--jp-hold); }
.jp-meter__seg--fail { background: var(--jp-fail); }

/* ---- BLUEPRINT GRID (maps, canvases, empty space) -------------- */

.jp-grid {
  background-color: var(--jp-well);
  background-image:
    linear-gradient(to right,  var(--jp-well-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--jp-well-line) 1px, transparent 1px);
  background-size: 28px 28px;
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  position: relative;
}

/* ---- MARQUEE (edge-set overprinted text) ----------------------- */

.jp-marquee {
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-lg);
  letter-spacing: var(--jp-track);
  text-transform: uppercase;
  color: var(--jp-on-well);
  opacity: .9;
  pointer-events: none;
  user-select: none;
}
.jp-marquee--v { writing-mode: vertical-rl; }
.jp-marquee--v-flip { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ---- STATUS BAR (the notched location strip) ------------------- */

.jp-statusbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--jp-well-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
}
.jp-statusbar__tag {
  background: var(--jp-well);
  color: var(--jp-on-well);
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  padding: 8px 22px 7px 12px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.jp-statusbar__value {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-md);
  letter-spacing: var(--jp-track);
  color: var(--jp-on-well-2);
  padding: 6px 12px;
}

/* ---- LAYOUT HELPERS -------------------------------------------- */

/* Spare height collects at the end. With the default `normal`, a panel
   that is shorter than its equal-height siblings distributes the leftover
   space into its rows, pushing labels down and inflating their boxes. */
.jp-stack  { display: grid; grid-template-columns: minmax(0, 1fr);
             align-content: start; gap: var(--jp-gap); min-width: 0; }
.jp-row    { display: flex; gap: var(--jp-gap); align-items: center; flex-wrap: wrap; min-width: 0; }
.jp-split  { display: grid; gap: var(--jp-gap); min-width: 0;
             grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.jp-fill   { flex: 1 1 0; min-width: 0; }
.jp-scroll { overflow: auto; }

/* Console layout: the page is a control surface, not a document.
   Opt out with .jp-doc for marketing pages that should scroll. */
.jp-console {
  height: 100dvh;
  display: grid;
  gap: var(--jp-gap);
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* ---- OPTIONAL CRT OVERLAY (off by default) --------------------- */

.jp-scan { position: relative; }
.jp-scan::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px
  );
}

/* ============================================================
   RESPONSE
   WIDTH governs layout. POINTER governs ergonomics. See tokens.css.
   ============================================================ */

/* --- Panels are containers, so a component responds to the space it
       is actually in, not to the viewport. The same .jp-panel appears
       in a 280px sidebar and full-bleed; only container queries can
       tell those apart. ------------------------------------------- */
.jp-panel { container-type: inline-size; container-name: jp-panel; }
.jp-panel--nocq { container-type: normal; }   /* escape hatch */

/* --- Hit sizes. Driven by the --jp-tap token, which grows under a
       coarse pointer. Applies at every width. --------------------- */
.jp-btn,
.jp-tab,
.jp-input,
.jp-select,
.jp-index__item,
.jp-log__row,
.jp-toggle { min-height: var(--jp-tap); }

.jp-index__item,
.jp-toggle { align-items: center; }

/* The toggle's box stays visually 16px; the label carries the hit area. */
.jp-toggle { padding-block: 4px; }

/* --- Below the stack breakpoint: one panel at a time. ------------ */
@media (max-width: 720px) {

  /* Tabs wrap rather than overflow. The right-aligned spacer that
     pushes trailing tabs away only makes sense on one line. */
  .jp-tabs { flex-wrap: wrap; }
  .jp-tabs > .jp-fill { display: none; }
  .jp-tab { flex: 1 1 auto; }

  /* Vertical marquees eat horizontal space and cannot be shrunk —
     drop them rather than scale them (rule 10 keeps the grid). */
  .jp-marquee--v,
  .jp-marquee--v-flip { display: none; }

  /* The console stops being a fixed control surface and becomes a
     scrolling handheld terminal. 100dvh is unreliable under mobile
     browser chrome, so it becomes a floor, not a ceiling. */
  .jp-console {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  /* Buttons go full width in a single column below two per row. */
  .jp-btn-bank { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
}

/* --- Narrow containers: the log's fixed flag column stops fitting.
       Container query, not viewport — a log in a sidebar needs this
       at 1400px too. ---------------------------------------------- */
@container jp-panel (max-width: 340px) {
  .jp-log__row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "flag meta" "msg msg";
    row-gap: 4px;
    padding-block: 7px;
  }
  .jp-log__flag { grid-area: flag; }
  .jp-log__meta { grid-area: meta; text-align: right; }
  .jp-log__msg  { grid-area: msg; }

  /* The notched tag wastes width it cannot spare. */
  .jp-statusbar { flex-direction: column; align-items: stretch; }
  .jp-statusbar__tag { clip-path: none; text-align: center; padding: 6px 12px; }

  /* Plate + hint stack rather than truncate. */
  .jp-plate-row { flex-wrap: wrap; }
}

/* --- Sideways scrolling is a BUG, not something to hide. ---------
   `overflow-x: hidden` on html/body silences the symptom and makes
   scrollWidth report clean, so the audit passes while content is
   clipped off-screen. Fix the cause instead. Anything that genuinely
   scrolls sideways opts in, and only inside its own box. ---------- */
.jp-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
}

/* ============================================================
   DESKTOP — windows, icons, menus, terminal
   For products that are a set of things rather than one surface:
   portfolios, dashboards, multi-tool interfaces.
   ============================================================ */

.jp-desktop {                     /* the substrate windows sit on   */
  background-color: var(--jp-desktop);
  background-image:
    repeating-conic-gradient(var(--jp-desktop-2) 0% 25%, transparent 0% 50%);
  background-size: 3px 3px;       /* mottled, not flat              */
  padding: var(--jp-pad-lg);
  min-height: 100%;
}

.jp-window {
  background: var(--jp-chassis);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  container-type: inline-size;
  container-name: jp-panel;       /* windows are panels for queries */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.jp-window__bar {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--jp-win-bar-off);
  color: var(--jp-win-ink);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  margin: 2px;
  padding: 4px 6px;
  min-height: var(--jp-tap);
}
.jp-window--active > .jp-window__bar { background: var(--jp-win-bar); }

.jp-window__title {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-sm);
  letter-spacing: var(--jp-track);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The minimize dash and the two right-hand controls. Drawn, not iconic. */
/* The drawn mark stays small; the control itself grows with --jp-tap so
   it is reachable on touch without redrawing the glyph. */
.jp-window__ctrl {
  flex: 0 0 auto;
  width: var(--jp-tap); height: var(--jp-tap);
  display: grid; place-items: center;
  background: var(--jp-chassis-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  cursor: pointer;
  padding: 0;
}
.jp-window__ctrl:active { border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo); }
.jp-window__ctrl--dash::before {
  content: ""; width: 10px; height: 3px; background: var(--jp-win-ink);
}
.jp-window__ctrl--max::before {
  content: ""; width: 10px; height: 10px;
  border: 2px solid var(--jp-win-ink);
}
.jp-window__ctrl--dot::before {
  content: ""; width: 5px; height: 5px; background: var(--jp-win-ink);
}

/* In a very narrow window, secondary chrome is the first thing to go —
   the minimize control is the only one that has to survive. */
@container jp-panel (max-width: 260px) {
  .jp-window__ctrl--dot, .jp-window__ctrl--max { display: none; }
}

.jp-window__body {
  flex: 1;
  min-height: 0;
  padding: var(--jp-gap);
  overflow: auto;                 /* windows scroll, pages don't    */
}
.jp-window__body--flush { padding: 0; }   /* for edge-to-edge media */

/* Free arrangement. Overlap is the point — but only above the
   stack breakpoint; below it windows become a plain column. */
.jp-window-field { display: grid; gap: var(--jp-gap); }
@media (min-width: 721px) {
  .jp-window-field--overlap {
    display: block;
    position: relative;
    min-height: 520px;
  }
  .jp-window-field--overlap > .jp-window { position: absolute; }
}

/* ---- ICON TILES (a grid of things: projects, tools, files) ---- */

.jp-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(84px, 100%), 1fr));
  gap: var(--jp-pad);
}
.jp-icon {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  cursor: pointer;
  min-height: var(--jp-tap);
}
.jp-icon__tile {
  width: 100%;
  aspect-ratio: 1;
  background: var(--jp-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.jp-icon__tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-icon__label {
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-xs);
  letter-spacing: var(--jp-track);
  color: var(--jp-ink-inv);
  background: var(--jp-well);
  padding: 2px 6px;
}
.jp-icon[aria-current="true"] .jp-icon__label { background: var(--jp-data); }

/* ---- VERTICAL MENU (the stacked command list) ----------------- */

.jp-menu {
  list-style: none; margin: 0; padding: 2px;
  background: var(--jp-chassis);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  width: max-content; max-width: 100%; min-width: min(132px, 100%);
}
.jp-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--jp-tap);
  padding: 4px 8px;
  margin-bottom: 2px;
  background: var(--jp-chassis-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-sm);
  cursor: pointer;
}
.jp-menu__item:last-child { margin-bottom: 0; }
.jp-menu__glyph {              /* the little page mark on the right */
  width: 9px; height: 12px;
  background: var(--jp-chassis);
  border: 1px solid var(--jp-win-ink);
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}

/* ---- TERMINAL ------------------------------------------------- */

.jp-terminal {
  background: var(--jp-terminal);
  color: var(--jp-terminal-ink);
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-sm);
  line-height: 1.5;
  padding: var(--jp-pad);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 0;
}
.jp-terminal--black { background: #000; }
.jp-terminal__cursor {
  display: inline-block;
  width: .6em; height: 1.05em;
  vertical-align: -.18em;
  border: 2px solid var(--jp-cursor);
  animation: jp-blink var(--jp-blink) steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { .jp-terminal__cursor { animation: none; } }

/* ============================================================
   MEDIA — images are first-class when the product is about images
   ============================================================ */

.jp-media {
  background: var(--jp-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  overflow: hidden;
  position: relative;
  display: block;
}
.jp-media > img,
.jp-media > video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.jp-media--wide { aspect-ratio: 16 / 9; }
.jp-media--photo { aspect-ratio: 4 / 3; }
.jp-media--square { aspect-ratio: 1; }

/* Caption rides on the image as a plate — never below it in gray. */
.jp-media__plate {
  position: absolute;
  left: 6px; bottom: 6px;
  z-index: 1;
}
.jp-media__meta {
  position: absolute;
  right: 6px; bottom: 6px;
  z-index: 1;
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-xs);
  color: var(--jp-ink-inv);
  background: rgba(0,0,0,.72);
  padding: 3px 6px;
}

.jp-media-pair {                  /* the two abutting image panes  */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 2px;
}

/* ============================================================
   INSTRUMENTS — dials, radar, slider tracks
   Drive with --jp-dial-angle (deg). Decorative-looking, but each
   one must still carry a readout: rule 4 applies to gauges too.
   ============================================================ */

.jp-dial {
  --jp-dial-angle: 0deg;
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 148px;
  border-radius: 50%;
  background: var(--jp-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* tick ring */
.jp-dial::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-conic-gradient(
    from -90deg,
    var(--jp-plot-axis) 0deg 1.2deg,
    transparent 1.2deg 15deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 62% 78%, transparent 78%);
          mask: radial-gradient(circle, transparent 0 62%, #000 62% 78%, transparent 78%);
}
.jp-dial__needle {
  position: absolute;
  left: 50%; bottom: 50%;
  width: 3px; height: 40%;
  background: var(--jp-fail);
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--jp-dial-angle));
}
.jp-dial__cap {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--jp-chassis-2);
  border: 1px solid var(--jp-edge);
}
.jp-dial__value {                 /* the mandatory readout          */
  position: absolute;
  bottom: 12%;
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-xs);
  color: var(--jp-on-well);
}
.jp-dial--radar::after {          /* sweep wedge                    */
  content: "";
  position: absolute; inset: 0;
  background: conic-gradient(from var(--jp-dial-angle),
    color-mix(in srgb, var(--jp-go) 55%, transparent) 0deg 26deg,
    transparent 26deg 360deg);
  -webkit-mask: radial-gradient(circle, #000 0 76%, transparent 76%);
          mask: radial-gradient(circle, #000 0 76%, transparent 76%);
  pointer-events: none;
}

.jp-dial-bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
  gap: var(--jp-pad);
  justify-items: center;
}

/* Vertical slider track with tick marks. */
.jp-track {
  --jp-track-pos: 50%;
  position: relative;
  width: 26px; height: 100%; min-height: 120px;
  background: var(--jp-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  background-image: repeating-linear-gradient(
    to bottom, var(--jp-plot-axis) 0 1px, transparent 1px 12px);
}
.jp-track__marker {
  position: absolute;
  left: 0; right: 0;
  top: var(--jp-track-pos);
  height: 9px;
  transform: translateY(-50%);
  background: var(--jp-chassis-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
}

/* ============================================================
   CHARTS
   Series colors are --jp-s1..--jp-s5, in fixed order, never
   cycled. Status colors (go/hold/fail) are reserved and must
   never encode a series. A 6th series folds into OTHER.
   ============================================================ */

.jp-plot {
  position: relative;
  background: var(--jp-plot-bg);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  padding: var(--jp-gap);
  min-width: 0;
}
.jp-plot--paper { background: var(--jp-well-2); }
.jp-plot > svg { display: block; width: 100%; height: auto; overflow: visible; }

.jp-plot__grid line,
.jp-plot__grid path { stroke: var(--jp-plot-grid); stroke-width: 1; fill: none; }
.jp-plot__axis { stroke: var(--jp-plot-axis); stroke-width: 1; fill: none; }
.jp-plot__tick {
  font-family: var(--jp-face-data);
  font-size: 9px;
  fill: var(--jp-plot-axis);
}
.jp-plot__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jp-plot__area { stroke: none; opacity: .5; }
.jp-plot__dot  { r: 4; stroke: var(--jp-plot-bg); stroke-width: 2; }

.jp-s1 { color: var(--jp-s1); stroke: var(--jp-s1); fill: var(--jp-s1); }
.jp-s2 { color: var(--jp-s2); stroke: var(--jp-s2); fill: var(--jp-s2); }
.jp-s3 { color: var(--jp-s3); stroke: var(--jp-s3); fill: var(--jp-s3); }
.jp-s4 { color: var(--jp-s4); stroke: var(--jp-s4); fill: var(--jp-s4); }
.jp-s5 { color: var(--jp-s5); stroke: var(--jp-s5); fill: var(--jp-s5); }

/* Legend is mandatory at 2+ series — identity is never color alone. */
.jp-legend {
  min-width: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: var(--jp-gap);
}
.jp-legend__item {
  min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-xs);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  /* Text wears text tokens, never the series color. The legend usually
     sits on chassis, outside the plot well — anchor it to the surface it
     is actually on, or it fails contrast. */
  color: var(--jp-on-chassis);
}
.jp-well .jp-legend__item,
.jp-plot .jp-legend__item { color: var(--jp-on-well); }
.jp-well--paper .jp-legend__item,
.jp-plot--paper .jp-legend__item { color: var(--jp-on-well-2); }
.jp-legend__swatch { width: 11px; height: 11px; flex: 0 0 auto; }

/* Crosshair + tooltip. An HTML chart is interactive by default. */
.jp-plot__crosshair { stroke: var(--jp-plot-axis); stroke-width: 1; stroke-dasharray: 3 3; }
.jp-tip {
  position: absolute;
  pointer-events: none;
  background: var(--jp-well);
  color: var(--jp-on-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-xs);
  padding: 5px 8px;
  white-space: pre;
  z-index: 2;
}
.jp-tip[hidden] { display: none; }

/* ---- STACKED BAR METERS (multi-series magnitude, dense) --------
   The gr_osview pattern: one labeled row per metric. Segments
   carry a 2px surface gap so adjacent hues never touch — this is
   the secondary encoding the light palette depends on. ---------- */

.jp-bars { display: grid; gap: var(--jp-gap); }
.jp-bars__row { display: grid; gap: 3px; }
.jp-bars__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-xs);
  letter-spacing: var(--jp-track);
}
.jp-bars__value { font-family: var(--jp-face-data); font-style: normal; }
.jp-bars__track {
  display: flex;
  gap: 2px;                       /* mandatory surface gap */
  height: 18px;
  background: var(--jp-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
  padding: 2px;
}
.jp-bars__seg {
  min-width: 2px;
  background: currentColor;       /* set via .jp-s1 … .jp-s5 */
}

/* ============================================================
   CHOICE & TALLY
   Filter strips, binary commits, labeled options, magnitude
   rows, big figures, deltas.

   These are domain-neutral on purpose. Polls, voting, approvals,
   plan pickers, survey results, leaderboards, A/B splits and
   prediction markets all reduce to the same four shapes: filter
   the set, report a magnitude, offer a choice, show the change.
   ============================================================ */

/* ---- CHIPS (horizontally scrollable filter strip) ------------- */

.jp-chips {
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 3px;
  scrollbar-width: thin;
}
.jp-chip {
  flex: 0 0 auto;
  min-height: var(--jp-tap);
  display: inline-flex; align-items: center;
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--jp-on-chassis);
  background: var(--jp-chassis-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  padding: 6px 13px;
  cursor: pointer;
}
.jp-chip[aria-pressed="true"] {
  background: var(--jp-well);
  color: var(--jp-on-well);
}
.jp-chip:focus-visible { outline: 2px solid var(--jp-hold); outline-offset: 1px; }

/* ---- DUO (two-sided commit) -----------------------------------
   Deliberately colorless. The words carry the choice (rule 4) and
   the selected side inverts to the well. Tinting one side green and
   the other red would collide with status (rule 13).              */

.jp-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: min(132px, 100%);
}
.jp-duo__side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: var(--jp-tap);
  font: 700 var(--jp-t-xs)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  color: var(--jp-on-chassis);
  background: var(--jp-chassis-2);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  padding: 5px 9px;
  cursor: pointer;
}
.jp-duo__side:active,
.jp-duo__side[aria-pressed="true"] {
  border-color: var(--jp-lo) var(--jp-hi) var(--jp-hi) var(--jp-lo);
}
.jp-duo__side[aria-pressed="true"] {
  background: var(--jp-well);
  color: var(--jp-on-well);
}
.jp-duo__tick { font-family: var(--jp-face-data); font-style: normal; }
.jp-duo__side:focus-visible { outline: 2px solid var(--jp-hold); outline-offset: 1px; }

/* ---- OUTCOME ROW (label → magnitude → action) ----------------- */

.jp-outcome {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  min-height: var(--jp-tap);
  padding: 3px 0;
  border-top: 1px solid color-mix(in srgb, var(--jp-lo) 45%, transparent);
}
.jp-outcome:first-child { border-top: 0; }
.jp-outcome__name {
  font-family: var(--jp-face-display);
  font-style: var(--jp-slant);
  font-weight: 700;
  font-size: var(--jp-t-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jp-outcome__value {
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-md);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Narrow container: the commit pair drops beneath the label. */
@container jp-panel (max-width: 380px) {
  .jp-outcome {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name pct" "duo duo";
    row-gap: 5px;
  }
  .jp-outcome__name { grid-area: name; }
  .jp-outcome__value  { grid-area: pct; }
  .jp-outcome .jp-duo { grid-area: duo; }
}

/* ---- OPTION (a labeled choice carrying a value) --------------
   A selectable option with an identity tint and a trailing value:
   poll choices, plan tiers, vote tallies, rating buckets, sides of
   a market. Color is categorical identity, so it comes from the
   series ramp — never from status.                               */

.jp-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--jp-tap);
  font: 700 var(--jp-t-sm)/1 var(--jp-face-display);
  font-style: var(--jp-slant);
  letter-spacing: var(--jp-track-wide);
  text-transform: uppercase;
  color: var(--jp-on-well);
  background: var(--jp-well);
  border: var(--jp-bevel) solid;
  border-color: var(--jp-hi) var(--jp-lo) var(--jp-lo) var(--jp-hi);
  padding: 8px 11px;
  cursor: pointer;
}
.jp-option__value { font-family: var(--jp-face-data); font-style: normal; }
.jp-option--s1 { background: var(--jp-s1); color: #05080f; }
.jp-option--s2 { background: var(--jp-s2); color: #05080f; }
.jp-option--s4 { background: var(--jp-s4); color: #05080f; }
.jp-option--s5 { background: var(--jp-s5); color: #05080f; }
.jp-option--flat { background: var(--jp-chassis-2); color: var(--jp-on-chassis); }
/* Any number of options, not three. Options share the width evenly;
   a neutral one (a draw, a tie, a "neither") sizes to its content. */
.jp-option-set {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.jp-option-set > .jp-option { flex: 1 1 84px; }
.jp-option-set > .jp-option--flat { flex: 0 1 auto; }
@container jp-panel (max-width: 300px) {
  .jp-option-set { flex-direction: column; }
  .jp-option-set > .jp-option { flex: 1 1 auto; }
}

/* ---- FIGURE (a large machine-written number) ------------------ */

.jp-figure {
  font-family: var(--jp-face-data);
  font-size: var(--jp-t-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.jp-figure--sm { font-size: var(--jp-t-lg); }

/* Movement. Up/down is not status — it is direction — but it reads
   fastest in the status hues, so it carries an arrow glyph too. */
.jp-delta { font-family: var(--jp-face-data); font-size: var(--jp-t-xs); }
.jp-delta--up::before   { content: "\25B2 "; }
.jp-delta--down::before { content: "\25BC "; }
.jp-delta--up   { color: var(--jp-go); }
.jp-delta--down { color: var(--jp-fail); }