/* ============================================================
   GENERIC API DEMO: the API-annotation layer
   Scoped under .gapi-shell. Built on patient-tokens.css.

   WHAT THIS IS
   The Generic API Demo shows a CLIENT's patient portal on the left and
   the Wheel API layer that powers it on the right. This stylesheet is
   only the annotation layer, the phase banner, the docked rail, the
   lane cards and the live swimlane map. The patient screens themselves
   keep using styles-wheelonly-scoped.css.

   LANE COLOURS come from the source swimlane diagram and are FIXED, not
   brand-coloured, the whole point of the demo is that green means "a
   Wheel API call" on every screen, whoever the portal belongs to. They
   are the one thing here that must not follow --c-primary.

     --gapi-api      #2E4F25  Wheel API call        (Wheel Green)
     --gapi-hook     #E85A2E  Webhook event
     --gapi-emr      #2F7BC9  Wheel EMR / clinician action
     --gapi-decision #F3D677  Decision point
     --gapi-portal   #E8E3D3  The client's own portal step
   ============================================================ */

/* NB: every rule here is prefixed .gapi-shell, not decoration, and not optional.
   styles-wheelonly-scoped.css carries two RESETS that outrank a single-class rule
   no matter which file loads later:
     .wheelonly-scope button { border:none; background:none; padding:0 }   (0,1,1)
     .wheelonly-scope .input { border:none; outline:none; background:none } (0,2,0)
   The first had silently flattened the pharmacy picker, the labs rows, the payload
   expanders and the phase bar; the second flattens any input that isn't wrapped in
   a FieldShell. The .gapi-shell prefix wins the first outright, and the fields below
   draw their own box rather than relying on .input. Keep both habits. */
.gapi-shell {
  --gapi-api: #2E4F25;
  --gapi-api-soft: #EAF0E7;
  --gapi-hook: #E85A2E;
  --gapi-hook-ink: #B8431F;   /* the same orange, dark enough to read as text (5.4:1) */
  --gapi-hook-soft: #FCEDE7;
  --gapi-emr: #2F7BC9;
  --gapi-emr-soft: #E7F0FA;
  --gapi-decision: #F3D677;
  --gapi-decision-soft: #FCF6E4;
  --gapi-portal: #E8E3D3;
  --gapi-rail: 400px;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--n-canvas);
}

/* ---------- the top bar ----------
   One bar for the whole demo: brand, a three-way view switch, and read-only
   context while walking. It replaced a phase banner whose buttons navigated and
   a second floating tab pair on the canvas. */
.gapi-shell .gapi-top {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: none;
  padding: var(--s-3) var(--s-4);
  background: var(--n-surface);
  border-bottom: 1px solid var(--n-line);
}
.gapi-shell .gapi-top-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--n-sunken);
  border: 1px solid var(--n-line);
}
.gapi-shell .gapi-top-switch button {
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--n-ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.gapi-shell .gapi-top-switch button:hover { color: var(--n-ink); }
.gapi-shell .gapi-top-switch button.is-on {
  background: var(--gapi-api);
  color: #fff;
  box-shadow: var(--e-1);
}
.gapi-shell .gapi-top-ctx {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.gapi-shell .gapi-top-quiet { display: block; font-size: var(--t-xs); color: var(--n-ink-3); white-space: nowrap; }
.gapi-shell .gapi-top-phase {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid;
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  color: var(--n-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gapi-shell .gapi-top-step {
  font-size: var(--t-xs);
  color: var(--n-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gapi-shell .gapi-top-arrows { display: flex; gap: var(--s-1); }
.gapi-shell .gapi-top-arrows button {
  border: 1px solid var(--n-line);
  background: var(--n-surface);
  border-radius: var(--r-sm);
  width: 28px; height: 28px;
  font-size: var(--t-md);
  color: var(--n-ink-2);
  cursor: pointer;
}
.gapi-shell .gapi-top-arrows button:hover:not(:disabled) { background: var(--n-sunken); color: var(--n-ink); }
.gapi-shell .gapi-top-arrows button:disabled { opacity: .35; cursor: default; }

/* ---------- shell split ---------- */
.gapi-shell .gapi-body { display: flex; flex: 1; min-height: 0; align-items: stretch; }
.gapi-shell .gapi-stage { flex: 1; min-width: 0; overflow-x: hidden; }
.gapi-shell .gapi-stage .app { min-height: 0; }

/* ---------- the docked rail ---------- */
.gapi-shell .gapi-rail {
  width: var(--gapi-rail);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--n-surface);
  border-right: 1px solid var(--n-line);
}
.gapi-shell .gapi-rail-head {
  flex: none;
  padding: var(--s-4);
  border-bottom: 1px solid var(--n-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.gapi-shell .gapi-rail-row { display: flex; align-items: center; gap: var(--s-2); }
.gapi-shell .gapi-rail-mark {
  width: 20px; height: 20px; flex: none;
  border-radius: var(--r-sm);
  background: var(--gapi-api);
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: var(--w-bold);
}
.gapi-shell .gapi-rail-title {
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  color: var(--n-ink);
  letter-spacing: -0.01em;
}
.gapi-shell .gapi-rail-sub {
  font-size: var(--t-xs);
  color: var(--n-ink-3);
  line-height: var(--lh-body);
}
.gapi-shell .gapi-rail-x {
  margin-left: auto;
  border: 1px solid var(--n-line);
  background: var(--n-surface);
  border-radius: var(--r-sm);
  padding: 2px var(--s-2);
  font-size: var(--t-xs);
  color: var(--n-ink-3);
  cursor: pointer;
}
.gapi-shell .gapi-rail-x:hover { color: var(--n-ink); background: var(--n-sunken); }

.gapi-shell .gapi-rail-step {
  flex: none;
  padding: var(--s-4);
  background: var(--n-sunken);
  border-bottom: 1px solid var(--n-line);
}
.gapi-shell .gapi-rail-eyebrow {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  color: var(--n-ink-2);
  margin-bottom: var(--s-1);
}
.gapi-shell .gapi-rail-steptitle {
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  color: var(--n-ink);
  letter-spacing: -0.01em;
}
.gapi-shell .gapi-rail-portal {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--n-ink-2);
  text-wrap: pretty;
}

.gapi-shell .gapi-rail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.gapi-shell .gapi-rail-empty {
  border: 1px dashed var(--n-line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--n-ink-3);
  text-wrap: pretty;
}
.gapi-shell .gapi-rail-empty b { color: var(--n-ink-2); font-weight: var(--w-semi); }

/* ---------- lane cards ---------- */
.gapi-shell .gapi-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e-1);
  border: 1px solid var(--n-line-2);
  background: var(--n-surface);
}
.gapi-shell .gapi-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  letter-spacing: -0.005em;
  color: #fff;
}
.gapi-shell .gapi-card-body { padding: var(--s-3); }
.gapi-shell .gapi-card-endpoint {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.gapi-shell .gapi-method {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: #fff;
  flex: none;
}
.gapi-shell .gapi-path {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--n-ink);
  word-break: break-all;
  line-height: var(--lh-snug);
}
.gapi-shell .gapi-note {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--n-ink-2);
  text-wrap: pretty;
}
.gapi-shell .gapi-fields {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}
.gapi-shell .gapi-fields li {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--t-sm);
  color: var(--n-ink-2);
  line-height: var(--lh-snug);
}
.gapi-shell .gapi-fields li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  flex: none;
  margin-top: 7px;
  background: var(--gapi-dot, var(--n-ink-3));
}
.gapi-shell .gapi-fields code {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--n-ink);
  background: var(--n-sunken);
  border-radius: 4px;
  padding: 1px 4px;
}

.gapi-shell .gapi-disclose {
  margin-top: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border: 1px solid var(--n-line);
  background: var(--n-surface);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  color: var(--n-ink-2);
  cursor: pointer;
}
.gapi-shell .gapi-disclose:hover { background: var(--n-sunken); color: var(--n-ink); }
.gapi-shell .gapi-payload {
  margin: var(--s-2) 0 0;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: #1B1F1A;
  color: #E7EBE4;
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.gapi-shell .gapi-payload-label {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  color: var(--n-ink-2);
  margin: var(--s-2) 0 0;
}

/* per-lane skins */
.gapi-shell .gapi-card.is-api { --gapi-dot: var(--gapi-api); }
.gapi-shell .gapi-card.is-api    .gapi-card-head { background: var(--gapi-api); }
.gapi-shell .gapi-card.is-api    .gapi-method { background: var(--gapi-api); }
.gapi-shell .gapi-card.is-hook { --gapi-dot: var(--gapi-hook); }
.gapi-shell .gapi-card.is-hook   .gapi-card-head { background: var(--gapi-hook); }
.gapi-shell .gapi-card.is-emr { --gapi-dot: var(--gapi-emr); }
.gapi-shell .gapi-card.is-emr    .gapi-card-head { background: var(--gapi-emr); }
.gapi-shell .gapi-card.is-decision { --gapi-dot: #A98A22; border-color: #EBDCA8; }
.gapi-shell .gapi-card.is-decision .gapi-card-head { background: var(--gapi-decision); color: #4A3B0B; }

.gapi-shell .gapi-hook-event {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--n-ink);
}
.gapi-shell .gapi-branches { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.gapi-shell .gapi-branch {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--n-ink-2);
}
.gapi-shell .gapi-branch-k {
  flex: none;
  min-width: 34px;
  text-align: center;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  background: var(--gapi-decision-soft);
  border: 1px solid #EBDCA8;
  color: #6B5410;
}

.gapi-shell .gapi-rail-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--n-line);
  background: var(--n-surface);
}
.gapi-shell .gapi-rail-count { font-size: var(--t-xs); color: var(--n-ink-3); margin-right: auto; }
.gapi-shell .gapi-rail-nav {
  border: 1px solid var(--n-line);
  background: var(--n-surface);
  border-radius: var(--r-sm);
  width: 30px; height: 30px;
  font-size: var(--t-md);
  color: var(--n-ink-2);
  cursor: pointer;
}
.gapi-shell .gapi-rail-nav:hover:not(:disabled) { background: var(--n-sunken); color: var(--n-ink); }
.gapi-shell .gapi-rail-nav:disabled { opacity: .35; cursor: default; }

/* the floating re-open button when the rail is hidden */
.gapi-shell .gapi-reopen {
  position: fixed;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: none;
  border-radius: var(--r-pill);
  background: var(--gapi-api);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  box-shadow: var(--e-3);
  cursor: pointer;
}

/* ---------- the canvas board ----------
   Pan/zoom host + the world. The lane cells, colheads and legend swatches are
   shared with nothing else now, but they keep their .gapi-map-* names because
   they ARE the swimlane diagram, just laid out on a canvas. */
.gapi-shell .gapi-stage { position: relative; }
.gapi-shell .gapi-cv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  background: #EDEDE7;
}
.gapi-shell .gapi-cv-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.gapi-shell .gapi-cv-band {
  position: absolute;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid;
  display: flex;
  align-items: center;
}
.gapi-shell .gapi-cv-band-t {
  font-weight: var(--w-bold);
  letter-spacing: -0.005em;
  color: #23231D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}

.gapi-shell .gapi-cv-col { position: absolute; top: 0; }
.gapi-shell .gapi-cv-head {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  line-height: 1.2;
  overflow: hidden;
  color: var(--n-ink);
}
.gapi-shell .gapi-cv-n {
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--n-ink-3);
}
.gapi-shell .gapi-cv-name {
  font-weight: var(--w-bold);
  letter-spacing: -0.005em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gapi-shell .gapi-cv-col.is-on .gapi-cv-head { color: var(--gapi-api); }
.gapi-shell .gapi-cv-cell {
  position: absolute;
  left: 0;
  width: 100%;
  min-height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  justify-content: center;
}
.gapi-shell .gapi-cv-cell.is-plain { justify-content: flex-start; }
.gapi-shell .gapi-cv-cell .gapi-map-dec { margin-top: 4px; padding: 2px 5px; }

/* The real screen. pointerEvents:none so a drag anywhere pans and a click on
   the column always means "open this screen"; the transform makes the frame the
   containing block for the screens' position:fixed overlays (the message
   pop-out), which would otherwise escape into world space. */
.gapi-shell .gapi-cv-frame {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--n-surface);
  box-shadow: 0 1px 2px rgba(20,20,25,.10), 0 12px 32px rgba(20,20,25,.10);
  pointer-events: none;
  transform: translate(0);
}
.gapi-shell .gapi-cv-col.is-on .gapi-cv-frame { outline: 3px solid var(--gapi-api); }
.gapi-shell .gapi-cv-scale { transform-origin: 0 0; }
.gapi-shell .gapi-cv-scale > .app { min-height: 1000px; }

.gapi-shell .gapi-cv-legend {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  max-width: 300px;
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-radius: var(--r-lg);
  background: rgba(244,242,236,0.96);
  box-shadow: var(--e-2);
}
.gapi-shell .gapi-cv-legend-t {
  font-family: "Noto Serif", Georgia, serif;
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  color: var(--n-ink);
}
.gapi-shell .gapi-cv-legend-p {
  margin: var(--s-2) 0 var(--s-3);
  font-size: var(--t-xs);
  line-height: var(--lh-body);
  color: var(--n-ink-2);
}
.gapi-shell .gapi-cv-legend .gapi-map-legend { flex-direction: column; gap: var(--s-1); margin: 0; }
.gapi-shell .gapi-cv-legend .gapi-legend-item { font-size: var(--t-sm); }

.gapi-shell .gapi-cv-tools {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  border-radius: var(--r-pill);
  background: rgba(20,26,29,0.9);
  box-shadow: var(--e-3);
}
.gapi-shell .gapi-cv-tools button {
  border: none;
  background: transparent;
  color: #fff;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  font-size: var(--t-md);
  cursor: pointer;
}
.gapi-shell .gapi-cv-tools button:hover { background: rgba(255,255,255,0.16); }
.gapi-shell .gapi-cv-tools button.is-wide { width: auto; padding: 0 var(--s-3); font-size: var(--t-xs); font-weight: var(--w-semi); }
.gapi-shell .gapi-cv-tools span {
  min-width: 46px;
  text-align: center;
  color: #fff;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* shared lane styling (the swimlane's own vocabulary) */
.gapi-shell .gapi-map-cell {
  border: 1px solid var(--n-line);
  background: var(--n-surface);
  line-height: var(--lh-snug);
  color: var(--n-ink-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gapi-shell .gapi-map-cell.is-empty { background: rgba(255,255,255,.35); border-style: dashed; color: var(--n-ink-3); }
.gapi-shell .gapi-map-cell.is-portal { background: var(--gapi-portal); border-color: #D8D2BE; color: #3B3A31; }
/* The Simplified tab's card. World-space type, so the sizes are large numbers:
   the card is 560 world px wide and the board is normally viewed at 15–35%. */
.gapi-shell .gapi-map-cell.is-plain {
  background: var(--n-surface);
  border-color: #D8D2BE;
  color: var(--n-ink);
  gap: 7px;
  text-wrap: pretty;
  box-shadow: var(--e-2);
}
.gapi-shell .gapi-plain-t {
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--n-ink);
  text-wrap: pretty;
}
.gapi-shell .gapi-plain-eps { display: flex; flex-direction: column; gap: 3px; }
.gapi-shell .gapi-plain-ep {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  color: var(--gapi-api);
  line-height: 1.35;
  word-break: break-all;
}
.gapi-shell .gapi-plain-ep b { font-weight: var(--w-bold); }
.gapi-shell .gapi-plain-list {
  display: flex;
  flex-direction: column;
  padding-top: 9px;
  border-top: 1px solid var(--n-line);
}
.gapi-shell .gapi-plain-row {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--n-line-2);
}
.gapi-shell .gapi-plain-row:last-child { border-bottom: none; padding-bottom: 0; }
/* The reference rows (the calls and the events) are separated from the plain
   ones by a heavier rule after the last of them. */
.gapi-shell .gapi-plain-row.is-last-ref {
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1.5px solid var(--n-ink-3);
}
.gapi-shell .gapi-plain-row.is-hook .gapi-plain-ep { color: var(--gapi-hook-ink); }
/* Captured Old Wheel Flow styling sets .uv-label in caps. Overridden HERE, in
   this demo's own sheet, rather than in styles-wheelonly-scoped.css, the sales
   demo and Old Wheel Flow keep their captured look. */
.gapi-shell .uv-label { text-transform: none; letter-spacing: normal; }
.gapi-shell .gapi-plain-k {
  font-weight: var(--w-bold);
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--n-ink);
}
.gapi-shell .gapi-plain-v { line-height: 1.35; color: var(--n-ink-2); }
.gapi-shell .gapi-map-cell.is-api { background: var(--gapi-api); border-color: var(--gapi-api); color: #EAF0E7; }
.gapi-shell .gapi-map-cell.is-hook { background: var(--gapi-hook); border-color: var(--gapi-hook); color: #FFF1EB; }
.gapi-shell .gapi-map-cell.is-emr { background: var(--gapi-emr); border-color: var(--gapi-emr); color: #EAF3FC; }
.gapi-shell .gapi-map-cell.is-api.is-empty, .gapi-shell .gapi-map-cell.is-hook.is-empty, .gapi-shell .gapi-map-cell.is-emr.is-empty {
  background: rgba(255,255,255,.35); border-color: var(--n-line); color: var(--n-ink-3);
}
.gapi-shell .gapi-map-mono {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-weight: var(--w-semi);
  color: #fff;
  word-break: break-all;
}
.gapi-shell .gapi-map-cell.is-portal .gapi-map-mono, .gapi-shell .gapi-map-cell.is-empty .gapi-map-mono { color: #3B3A31; }
.gapi-shell .gapi-map-dec {
  align-self: flex-start;
  background: var(--gapi-decision);
  color: #4A3B0B;
  border-radius: var(--r-sm);
  padding: 1px 5px;
  font-weight: var(--w-bold);
}
.gapi-shell .gapi-map-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.gapi-shell .gapi-legend-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--n-ink-2); }
.gapi-shell .gapi-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* ---------- generic placeholder wordmark ---------- */
.gapi-shell .gapi-wordmark { display: inline-flex; align-items: center; gap: 8px; }
.gapi-shell .gapi-wordmark-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--c-primary);
  color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: var(--w-bold);
  flex: none;
}
.gapi-shell .gapi-wordmark-text {
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  color: var(--c-text, var(--n-ink));
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .gapi-shell { --gapi-rail: 340px; }
}
@media (max-width: 980px) {
  .gapi-shell .gapi-body { flex-direction: column; }
  .gapi-shell .gapi-rail { width: auto; border-right: none; border-bottom: 1px solid var(--n-line); }
}

/* ============================================================
   NEW PATIENT-SIDE PIECES the Generic API Demo adds
   Coded medical-history search, pharmacy picker, lab rows and the
   async chat thread. On the patient tokens, these ARE patient UI,
   unlike the annotation layer above.
   ============================================================ */

/* ---------- coded search (medical history) ---------- */
.gapi-shell .gapi-search { position: relative; margin: var(--s-3) 0 var(--s-2); }
.gapi-shell .gapi-search-static { margin: var(--s-4) 0 var(--s-2); }
.gapi-shell .gapi-search-in,
.gapi-shell .gapi-composer-in {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--n-line);
  border-radius: var(--r-md);
  background: var(--n-surface);
  color: var(--n-ink);
  font-size: var(--t-sm);
}
.gapi-shell .gapi-search-in:focus,
.gapi-shell .gapi-composer-in:focus {
  border-color: var(--c-focus);
  outline: none;
}
.gapi-shell .gapi-search-in { width: 100%; }
.gapi-shell .gapi-search-results {
  margin-top: var(--s-1);
  border: 1px solid var(--n-line);
  border-radius: var(--r-md);
  background: var(--n-surface);
  box-shadow: var(--e-3);
  overflow: hidden;
}
.gapi-shell .gapi-search-hit {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: none;
  border-bottom: 1px solid var(--n-line-2);
  background: var(--n-surface);
  cursor: pointer;
  text-align: left;
}
.gapi-shell .gapi-search-hit:last-child { border-bottom: none; }
.gapi-shell .gapi-search-hit:hover { background: var(--n-sunken); }
.gapi-shell .gapi-search-display { font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--n-ink); }
.gapi-shell .gapi-search-code {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--n-ink-3);
  flex: none;
}
.gapi-shell .gapi-search-none { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); color: var(--n-ink-3); }

/* ---------- pharmacy picker ---------- */
.gapi-shell .gapi-pharm-list { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.gapi-shell .gapi-pharm {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--n-line);
  border-radius: var(--r-lg);
  background: var(--n-surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms cubic-bezier(.2,.7,.2,1), box-shadow 160ms;
}
.gapi-shell .gapi-pharm:hover { box-shadow: var(--e-2); }
.gapi-shell .gapi-pharm.is-on { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.gapi-shell .gapi-pharm-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.gapi-shell .gapi-pharm-name { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--n-ink); }
.gapi-shell .gapi-pharm-addr { font-size: var(--t-sm); color: var(--n-ink-2); }
.gapi-shell .gapi-pharm-meta { font-size: var(--t-xs); color: var(--n-ink-3); }
.gapi-shell .gapi-pharm-tag {
  flex: none;
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  color: var(--n-ink-2);
  background: var(--n-sunken);
  border: 1px solid var(--n-line-2);
  border-radius: var(--r-pill);
  padding: 2px var(--s-2);
}

/* ---------- list rows (labs, lab order panels) ---------- */
.gapi-shell .gapi-row-list { display: grid; gap: var(--s-2); margin: var(--s-2) 0 var(--s-4); }
.gapi-shell .gapi-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--n-line);
  border-radius: var(--r-lg);
  background: var(--n-surface);
  cursor: pointer;
  text-align: left;
  color: var(--n-ink-2);
}
.gapi-shell .gapi-row:hover { box-shadow: var(--e-2); }
.gapi-shell .gapi-row.is-static { cursor: default; }
.gapi-shell .gapi-row.is-static:hover { box-shadow: none; }
.gapi-shell .gapi-row-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.gapi-shell .gapi-row-title { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--n-ink); }
.gapi-shell .gapi-row-sub { font-size: var(--t-sm); color: var(--n-ink-3); }
.gapi-shell .gapi-pill {
  flex: none;
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  border-radius: var(--r-pill);
  padding: 2px var(--s-2);
}
.gapi-shell .gapi-pill-warn { background: var(--st-warning-soft); color: var(--st-warning); }
.gapi-shell .gapi-pill-ok { background: var(--st-success-soft); color: #1B7A4B; }

/* ---------- async chat thread ---------- */
.gapi-shell .gapi-thread { display: grid; gap: var(--s-3); }
.gapi-shell .gapi-msg { display: grid; gap: 2px; justify-items: start; max-width: 88%; }
.gapi-shell .gapi-msg.is-me { justify-self: end; justify-items: end; }
.gapi-shell .gapi-msg-meta { font-size: var(--t-xs); color: var(--n-ink-3); }
.gapi-shell .gapi-msg-bubble {
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--n-ink);
  text-wrap: pretty;
}
.gapi-shell .gapi-msg.is-me .gapi-msg-bubble {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* ---------- the client's sign-in screen ----------
   Recreated from the sandbox login: one centred column on white, brand wordmark
   as the only mark, email + password, a pill CTA, then store badges and legal.
   It is the CLIENT's screen, so the wordmark and the button run through
   --c-primary (the placeholder brand), never a Wheel colour. */
.gapi-shell .gapi-login {
  min-height: 100%;
  background: var(--n-surface);
  display: flex;
  justify-content: center;
  padding: 72px var(--s-6) 96px;
}
.gapi-shell .gapi-login-col {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-6);
}
.gapi-shell .gapi-login-brand {
  margin: 0 0 var(--s-4);
  text-align: center;
  font-size: var(--t-3xl);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  line-height: var(--lh-3xl);
  color: var(--c-primary);
}
.gapi-shell .gapi-login-f { display: grid; gap: var(--s-2); }
.gapi-shell .gapi-login-lbl {
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  color: var(--n-ink);
}
.gapi-shell .gapi-login-in {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  padding: 0 var(--s-4);
  font: inherit;
  font-size: var(--t-md);
  color: var(--n-ink);
  background: var(--n-sunken);
  border: 1px solid var(--n-line);
  border-radius: var(--r-md);
}
.gapi-shell .gapi-login-in:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 1px var(--c-primary);
}
.gapi-shell .gapi-login-btn {
  height: 56px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font: inherit;
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  cursor: pointer;
  box-shadow: var(--e-1);
  transition: filter 160ms cubic-bezier(.2,.7,.2,1);
}
.gapi-shell .gapi-login-btn:hover { filter: brightness(.92); }
.gapi-shell .gapi-login-link {
  color: var(--c-primary);
  text-decoration: none;
  cursor: pointer;
}
.gapi-shell .gapi-login-link:hover { text-decoration: underline; }
.gapi-shell .gapi-login-forgot {
  text-align: center;
  font-size: var(--t-md);
  margin-top: calc(var(--s-6) * -1 + var(--s-1));
}
.gapi-shell .gapi-login-stores {
  margin-top: var(--s-8);
  display: flex;
  justify-content: center;
  gap: var(--s-4);
}
.gapi-shell .gapi-login-store {
  display: grid;
  gap: 1px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: #111214;
  color: #fff;
  min-width: 148px;
}
.gapi-shell .gapi-login-store small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.gapi-shell .gapi-login-store b { font-size: var(--t-lg); font-weight: var(--w-semi); letter-spacing: -0.01em; }
.gapi-shell .gapi-login-legal {
  margin: 0;
  text-align: center;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--n-ink-2);
  text-wrap: pretty;
}

/* ---------- "Auto-filled from SSO" veil ----------
   Demographics ride along with the create-patient call at sign-in, so this
   screen is normally pre-filled or skipped. The veil states that over the form
   rather than leaving a presenter to say it. It covers the whole app shell,
   header included, and pointer-events stay off so the screen is still
   walkable. */
.gapi-shell .gapi-stage .app { position: relative; }
.gapi-shell .gapi-sso-veil {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  padding: var(--s-8);
  background: rgba(96, 102, 108, .34);
}
/* The line is centred on the VISIBLE part of the screen, not on the whole
   scrollable page: on the canvas each column is a cropped, scaled frame, so
   centring against the page put the line near the bottom of the crop. The app
   measures the crop and writes `top` in page px (fallback below). */
.gapi-shell .gapi-sso-veil span {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  font-size: 64px;
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 18px rgba(20, 20, 25, .45);
}

/* The headless column's head carries "API" where the others carry a screen number, so the board's
   1..20 sequence matches the walk counter exactly. */
.gapi-shell .gapi-cv-n.is-headless { font-weight: 600; letter-spacing: 0.06em; opacity: 0.75; }

/* A headless step's canvas column: no screen, because Wheel ships none. An empty frame reads as a
   failed render, so the frame says what it is. Dashed rather than solid to signal "not a screen". */
.gapi-shell .gapi-cv-frame.is-headless { border-style: dashed; background: #FAFAF8; display: flex; align-items: center; justify-content: center; }
.gapi-shell .gapi-cv-headless { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 0 12%; color: #6B6B63; }
.gapi-shell .gapi-cv-headless-t { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2E4F25; }
.gapi-shell .gapi-cv-headless-p { color: #6B6B63; }