/* Shared prostolms skin for the landing simulations (.iso.sim). Copied to
   public/assets/styles/anatomy-sims.css by each sim build; edit here. */
.iso[data-theme="light"].sim,
.sim .iso-plate {
  --anatomy-page: #f5f5f5;
  --anatomy-card: #ffffff;
  --anatomy-text: rgba(23, 21, 30, 0.72);
  --anatomy-strong: #17151e;
  --anatomy-muted: rgba(23, 21, 30, 0.5);
  --anatomy-hi: #2b2644;
  --anatomy-mid: #8d8a9c;
  --anatomy-lo: #bab7c6;
  --anatomy-faint: #dcdae4;
  --anatomy-lit: #5d51b4;
  --anatomy-lit-top: #ffffff;
  --anatomy-lit-shade: #eeecf7;
  --anatomy-shade-0: #dddbe3;
  --anatomy-shade-1: #e6e4eb;
  --anatomy-shade-2: #eeedf2;
  --anatomy-shade-3: #f5f4f8;
  --anatomy-halo: #8a86a0;
  --anatomy-halo-opacity: .3;
  --anatomy-dot: #2b2644;
}
/* daisyUI paints any [data-theme] element; the kit uses data-theme for its own tokens. */
.iso.sim[data-theme] { background: transparent; color: inherit; }
.sim .iso-plate { padding: 48px 28px 52px; box-shadow: 0 0 0 1px rgba(43, 38, 68, 0.12); border-radius: 18px; }
.sim .iso-plate-corners { inset: 20px 24px; }
/* Corners in the site's type, sentence case: no mono caps. */
.sim .iso-plate-corner { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; }
.sim .iso-plate-corner[data-corner="fig"] { color: #17151e; font-weight: 600; }
.sim .iso-plate-corner[data-corner="title"],
.sim .iso-plate-corner[data-corner="hint"] { text-transform: none; letter-spacing: 0; }
.sim .iso-plate-corner[data-corner="readout"] { color: #17151e; font-weight: 500; }
.sim .iso-figure { margin: 0; }
.sim .iso-stage { cursor: pointer; outline: none; }
.sim .iso-stage:focus-visible { outline: 2px solid var(--anatomy-lit); outline-offset: 6px; border-radius: 8px; }
.sim .iso-legend { margin-top: 14px; padding: 0; font-size: .875rem; line-height: 1.6; color: rgba(23, 21, 30, 0.56); }

/* Step chips and the note under the figure. */
.sim-controls { display: grid; gap: 12px; margin-top: 12px; padding: 18px 20px 20px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(43, 38, 68, 0.08); font-family: inherit; }
.sim-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-step {
  min-height: 2.25rem; padding: 0 .85rem; border-radius: 999px; font: inherit; font-size: .875rem; cursor: pointer;
  border: 1px solid rgba(43, 38, 68, 0.14); background: #fff; color: #17151e;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sim-step:hover { border-color: rgba(93, 81, 180, 0.5); }
.sim-step[aria-pressed="true"] { background: #5d51b4; border-color: #5d51b4; color: #fff; }
.sim-step:focus-visible { outline: 2px solid #5d51b4; outline-offset: 2px; }
.sim-note { margin: 0; min-height: 3em; font-size: .9375rem; line-height: 1.5; color: rgba(23, 21, 30, 0.72); }

/* Tabs that switch between simulations on the landing. */
.sim-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; padding: 4px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.72); }
.sim-tab { min-height: 2.25rem; padding: 0 .9rem; border-radius: 9px; font: inherit; font-size: .875rem; font-weight: 600; color: rgba(0, 0, 0, 0.55); cursor: pointer; transition: color 160ms ease, background-color 160ms ease; }
.sim-tab:hover { color: #000; }
.sim-tab[aria-selected="true"] { color: #fff; background: #2b2644; }
.sim-tab:focus-visible { outline: 2px solid #5d51b4; outline-offset: 2px; }
.sim-panel[hidden] { display: none; }

@media (max-width: 560px) {
  /* Six tabs: one scrolling row instead of three wrapped ones. */
  .sim-tabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sim-tabs::-webkit-scrollbar { display: none; }
  .sim-tab { flex: none; }
  .sim .iso-plate { padding: 44px 0 64px; overflow: hidden; }
  .sim .iso-plate .iso-svg { width: 116%; margin: 0 -8%; }
  .sim .iso-plate-corners { inset: 14px 14px; }
  .sim .iso-plate-corner { font-size: 12px; }
  .sim .iso-plate-corner[data-corner="title"] { max-width: 60%; white-space: normal; text-align: right; line-height: 1.25; }
  .sim .iso-plate-corner[data-corner="hint"] { bottom: 22px; white-space: normal; max-width: 100%; }
  .sim-controls { padding: 14px; }
  .sim-step { font-size: .8125rem; padding: 0 .7rem; }
}
@media (prefers-reduced-motion: reduce) { .sim-step, .sim-tab { transition: none; } }