/* Catalog locked to Bhanu Notion pages 2026-09-10. Do not invent endpoints. */
/* ClinCoder SGPLOT Lab — navy / teal / paper */

:root {
  --navy: #0b1f33;
  --navy-2: #132a44;
  --navy-3: #1a3654;
  --teal: #1f7a6b;
  --teal-2: #2a9a87;
  --teal-dim: #163f39;
  --paper: #f6f1e8;
  --paper-2: #efe8d8;
  --ink: #0b1f33;
  --muted: #5c6b7a;
  --hair: rgba(246, 241, 232, 0.12);
  --hair-strong: rgba(246, 241, 232, 0.22);
  --warn: #c4a35a;
  --drug: #1f7a6b;
  --pbo: #8a6b4a;
  --pbo-line: #6b5340;
  --mark: #f3e27a;
  --danger: #b54a3c;
  --ok: #1f7a6b;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-display: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono: "IBM Plex Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, monospace;
  --font-fig: "Liberation Sans", Arial, Helvetica, sans-serif;
  --shadow: 0 18px 40px rgba(8, 18, 30, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}

body {
  min-height: 100dvh;
}

button:not(:disabled),
[role="button"]:not(:disabled),
select,
summary {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#sgplot-root,
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 480px at 10% -10%, rgba(31, 122, 107, 0.16), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(246, 241, 232, 0.05), transparent 50%),
    var(--navy);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.9fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hair);
  background: color-mix(in srgb, var(--navy) 88%, #000);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--paper);
  display: grid;
  place-items: center;
}

.brand-mark svg {
  width: 26px;
  height: 26px;
}

.brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.brand p {
  margin: 2px 0 0;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.endpoint-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.endpoint-wrap label,
.ctrl label,
.field-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  font-weight: 600;
}

select,
input[type="text"],
input[type="number"],
textarea {
  width: 100%;
  background: var(--navy-2);
  color: var(--paper);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: inherit;
  min-height: 40px;
}

textarea {
  min-height: 64px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 12px;
}

select:focus,
input:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid var(--teal-2);
  outline-offset: 2px;
}

.top-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.view-seg {
  margin-right: 4px;
}

.btn {
  border: 1px solid var(--hair-strong);
  background: var(--navy-2);
  color: var(--paper);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
}

.btn.primary {
  background: var(--teal);
  border-color: transparent;
  color: var(--paper);
}

.btn.ghost {
  background: transparent;
}

.layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}

.fig-nav {
  border-right: 1px solid var(--hair);
  padding: 12px 10px 24px;
  overflow: auto;
  max-height: calc(100dvh - 64px);
  position: sticky;
  top: 64px;
}

.fig-nav h2 {
  margin: 8px 8px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 50%, transparent);
  font-weight: 600;
}

.fig-nav button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  min-height: 44px;
  font: inherit;
}

.fig-nav button .n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--teal-2);
  padding-top: 2px;
}

.fig-nav button .t {
  font-size: 0.82rem;
  line-height: 1.3;
}

.fig-nav button.active {
  background: color-mix(in srgb, var(--teal) 22%, transparent);
  color: var(--paper);
}

.fig-nav button:hover {
  background: color-mix(in srgb, var(--paper) 7%, transparent);
}

.workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.columns {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.35fr) minmax(280px, 1fr);
  gap: 14px;
  padding: 14px;
  align-items: start;
}

.panel {
  background: var(--navy-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.panel.paper {
  background: var(--paper);
  color: var(--ink);
}

.panel-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 0;
}

.panel-h h2,
.panel-h h3 {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.panel.paper .panel-h h2 {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

.why {
  padding: 0 14px 16px;
}

.why .story {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.45;
  margin: 10px 0 14px;
}

.meta {
  display: grid;
  gap: 10px;
}

.meta .row {
  border-top: 1px solid var(--hair);
  padding-top: 8px;
}

.k {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 48%, transparent);
  font-weight: 700;
  margin-bottom: 2px;
}

.v {
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--paper) 92%, transparent);
}

.v code,
code {
  font-family: var(--font-mono);
  font-size: 0.78em;
  background: rgba(0, 0, 0, 0.22);
  padding: 1px 5px;
  border-radius: 4px;
}

.trap {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: 0.86rem;
}

.spine {
  margin: 12px 0 0;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  letter-spacing: 0.02em;
}

.canvas-wrap {
  padding: 8px 12px 12px;
  position: relative;
}

.banner {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a3b12;
  background: #f0d9b8;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

.fig-title {
  font-family: var(--font-fig);
  font-size: 12.5px;
  font-weight: 700;
  margin: 4px 2px 6px;
}

svg.chart {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper);
  border-radius: 8px;
}

.fig-foot {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  margin-top: 8px;
  font-family: var(--font-fig);
}

.anatomy-toggle {
  min-height: 32px;
  font-size: 0.78rem;
  color: var(--ink);
  margin: 0;
}

.anatomy-hint {
  margin: 8px 2px 0;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

.anatomy-tip {
  position: absolute;
  z-index: 6;
  width: 248px;
  padding: 8px 10px 9px;
  background: #0B1F33;
  color: #F6F1E8;
  border: 1px solid #1F7A6B;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11, 31, 51, 0.28);
  pointer-events: none;
  font-size: 0.78rem;
  line-height: 1.35;
}

.anatomy-tip .stmt {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: #7dcec0;
  letter-spacing: 0.04em;
}

.anatomy-tip .opt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #d7e2ea;
  margin: 4px 0 6px;
}

.anatomy-tip .why {
  color: color-mix(in srgb, #F6F1E8 82%, transparent);
}

.anatomy-tip .cta {
  margin-top: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1F7A6B;
}

svg.chart.anatomy-on .anatomy-hit {
  cursor: pointer;
}

svg.chart.anatomy-on .is-hot {
  filter: drop-shadow(0 0 3px #1F7A6B);
}

.fig-title.is-hot,
.fig-foot.is-hot {
  outline: 2px solid #1F7A6B;
  outline-offset: 2px;
  background: color-mix(in srgb, #1F7A6B 12%, transparent);
}

.anatomy-pad {
  pointer-events: stroke;
}

.controls {
  padding: 0 12px 12px;
  max-height: calc(100dvh - 92px);
  overflow: auto;
}

.group {
  border-top: 1px solid var(--hair);
  padding: 10px 0 6px;
  border-radius: 8px;
}

.group.is-hot,
#ctrl-panel [data-ctrl].is-hot {
  background: color-mix(in srgb, #1F7A6B 18%, transparent);
  box-shadow: inset 3px 0 0 #1F7A6B;
  padding-left: 8px;
}

.group h3 {
  margin: 0 0 8px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-2);
}

.ctrl {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.ctrl.inline {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 0.88rem;
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hint {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.shell-panel {
  margin: 0 14px 14px;
}

.shell-wrap {
  padding: 8px 14px 16px;
}

.shell-banner {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a3b12;
  background: #f0d9b8;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

.shell-title {
  font-family: var(--font-fig);
  font-size: 13px;
  font-weight: 700;
  margin: 4px 2px 8px;
}

.shell-meta {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.shell-meta span {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--teal);
  margin-right: 8px;
}

table.shell {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-fig);
  font-size: 12px;
  background: #fffdf8;
}

table.shell th,
table.shell td {
  text-align: left;
  vertical-align: top;
  padding: 7px 8px;
  border-bottom: 1px solid #e4d9c4;
}

table.shell th {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #0B1F33;
  color: #F6F1E8;
}

table.shell td.contrast {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 11px;
}

table.shell .src {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #5c4a2e;
  margin-top: 2px;
}

.shell-row {
  cursor: pointer;
}

.shell-row:hover {
  background: color-mix(in srgb, #1F7A6B 10%, transparent);
}

.shell-row.star td:first-child {
  box-shadow: inset 3px 0 0 #1F7A6B;
}

.shell-row.is-hot {
  background: color-mix(in srgb, #1F7A6B 18%, transparent);
}

.shell-foot {
  margin: 10px 2px 0;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

.sas-strip {
  margin: 0 14px 14px;
  background: #071421;
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
}

.sas-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair);
}

.seg {
  display: flex;
  background: var(--navy-2);
  border-radius: 999px;
  padding: 3px;
}

.seg button {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  min-height: 32px;
}

.seg button.on {
  background: var(--teal);
  color: var(--paper);
}

pre.sas {
  margin: 0;
  padding: 12px 14px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  overflow: auto;
  max-height: 280px;
  color: #d7e2ea;
  white-space: pre;
}

pre.sas mark {
  background: var(--mark);
  color: #1b1404;
  padding: 0 3px;
  border-radius: 3px;
}

pre.sas .sas-line {
  display: block;
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: 3px;
}

pre.sas .sas-line.hot {
  background: rgba(31, 122, 107, 0.28);
  color: #f6f1e8;
}

pre.sas .sas-line.pin {
  box-shadow: inset 3px 0 0 #1F7A6B;
}

.trace {
  margin: 0 14px 18px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--navy-2);
}

.trace > summary {
  list-style: none;
  padding: 12px 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.trace > summary::-webkit-details-marker {
  display: none;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.table th,
.table td {
  text-align: left;
  padding: 8px 12px;
  border-top: 1px solid var(--hair);
  vertical-align: top;
}

.table button.row {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
}

.table tr.star td:first-child {
  box-shadow: inset 3px 0 0 var(--mark);
}

.table tr:hover td {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}

.drawer-back {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 20, 0.55);
  z-index: 40;
  display: none;
}

.drawer-back.open {
  display: block;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(560px, 100%);
  background: var(--navy);
  border-left: 1px solid var(--hair-strong);
  z-index: 50;
  transform: translateX(110%);
  transition: transform 250ms var(--ease);
  display: flex;
  flex-direction: column;
}

.drawer.open {
  transform: translateX(0);
}

.drawer header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hair);
}

.drawer header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.drawer .body {
  overflow: auto;
  padding: 8px 18px 32px;
}

.cheat {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.cheat th,
.cheat td {
  text-align: left;
  padding: 8px 8px;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}

.cheat th {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .pulse,
  svg.chart.anatomy-on .is-hot {
    animation: none;
    filter: none;
  }
  pre.sas .sas-line.hot {
    transition: none;
  }
}

@keyframes pulse {
  0% { filter: none; }
  35% { filter: drop-shadow(0 0 8px #f3e27a); }
  100% { filter: none; }
}

.mobile-fig {
  display: none;
  padding: 10px 14px 0;
}

.rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 8px;
}

.chip {
  font-size: 0.72rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  padding: 4px 10px;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.copy-toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.82rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease);
  z-index: 60;
}

.copy-toast.show {
  opacity: 1;
}

@media (max-width: 1100px) {
  .columns {
    grid-template-columns: 1fr;
  }
  .controls {
    max-height: none;
  }
  .layout {
    grid-template-columns: 1fr;
  }
  /* same 16 buttons as the desktop sidebar, laid out as a scrolling chip strip */
  nav.fig-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
    padding: 8px 14px;
    max-height: none;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--navy);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 14px;
  }
  nav.fig-nav::-webkit-scrollbar { display: none; }
  nav.fig-nav h2 { display: none; }
  .fig-nav button {
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--hair-strong);
    border-radius: 999px;
    scroll-snap-align: start;
  }
  .fig-nav button.active {
    border-color: var(--teal-2);
    background: color-mix(in srgb, var(--teal) 30%, transparent);
  }
  .fig-nav button .n { padding-top: 0; }
  .fig-nav button .t { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .mobile-fig {
    display: none;
  }
  .topbar {
    grid-template-columns: 1fr;
  }
  .app {
    overflow-x: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .pulse,
  .copy-toast {
    transition: none;
    animation: none;
  }
}

/* Touch: no hover exists, so the tip card must be tappable and carry its own Pin action. */
.anatomy-tip .tip-pin {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 40px;
  padding: 8px 10px;
  background: #1F7A6B;
  color: #F6F1E8;
  border: 0;
  border-radius: 6px;
  font: 600 0.78rem/1.2 var(--font-mono, inherit);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (hover: none) {
  .anatomy-tip { pointer-events: auto; width: min(248px, 72vw); }
  .fig-nav button:hover,
  .shell-row:hover,
  .table tr:hover td { background: inherit; }
}

/* ---- Collapsible "Why this figure" ---------------------------------- */
.why-details > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.why-details > summary::-webkit-details-marker { display: none; }
.why-details > summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--teal-2);
  transition: transform 140ms var(--ease);
}
.why-details:not([open]) > summary::after { transform: rotate(-90deg); }
.why-details:not([open]) > summary { border-bottom: 0; }

/* ---- Stable figure box ----------------------------------------------
   The chart viewBox is 720x400, or 720x460 once the risk table is on, so every
   XAXISTABLE toggle used to resize the figure and shove the page around.
   Reserve the tall box always; short figures letterbox instead of reflowing. */
svg.chart {
  aspect-ratio: 720 / 460;
  height: auto;
}


.why-details:not([open]) > summary { padding-bottom: 12px; }

/* ---- Collapsed Why = a thin vertical rail, so figure + options take the width --
   Desktop only. On mobile the panel is a single column already, so it just folds. */
@media (min-width: 1101px) {
  .columns:has(.why-details:not([open])) {
    grid-template-columns: 46px minmax(360px, 1.6fr) minmax(300px, 1fr);
  }
  .why-details:not([open]) > summary {
    writing-mode: vertical-rl;
    height: 100%;
    min-height: 190px;
    justify-content: flex-start;
    padding: 14px 0 14px;
    gap: 10px;
  }
  .why-details:not([open]) > summary .hint { display: none; }
  .why-details:not([open]) > summary::after {
    margin-left: 0;
    margin-top: auto;
    transform: rotate(90deg);
  }
  .columns:has(.why-details:not([open])) > #why-panel {
    display: flex;
    justify-content: center;
  }
}