/* ==========================================================================
   UBM AI simulator (/ai-simulator)
   Deep world throughout the app: three regions on a wide screen (inputs,
   rack, result), the rack first on narrower ones. Logical properties only,
   so the Arabic page mirrors without a second stylesheet.
   ========================================================================== */

.page-simulator {
  --sim-ok:   var(--c-signal-400);
  --sim-warn: var(--c-amber-500);
  --sim-bad:  #F97066;
  --sim-kv:   var(--c-gold-400);
}

/* ---- hero -------------------------------------------------------------------- */
.sim-hero__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: end;
}
@media (min-width: 64rem) {
  .sim-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.sim-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line);
}
.sim-hero__stats div { background: var(--surface); padding: var(--sp-4) var(--sp-5); }
.sim-hero__stats dt { font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.sim-hero__stats dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.sim-hero__stats .sim-hero__date { font-size: var(--fs-md); padding-block-start: 0.4em; }

/* ---- app shell --------------------------------------------------------------- */
.sim { padding-block: var(--sp-6) var(--sp-10); background: var(--surface); color: var(--text); }

.sim__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
}
@media (min-width: 56rem) { .sim__modes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sim-mode {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  text-align: start;
  color: var(--text);
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.sim-mode:hover { border-color: var(--line-strong); }
.sim-mode[aria-selected="true"] { border-color: var(--line-gold); background: var(--surface-sunken); box-shadow: inset 0 -2px 0 var(--c-gold-400); }
.sim-mode__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--text-strong); }
.sim-mode__desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }

.sim__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-areas: "stage" "in" "out";
}
@media (min-width: 60rem) {
  .sim__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage stage" "in out"; }
}
@media (min-width: 88rem) {
  .sim__grid { grid-template-columns: 21rem minmax(0, 1fr) 24rem; grid-template-areas: "in stage out"; align-items: start; }
}
.sim__panel--in { grid-area: in; }
.sim__panel--out { grid-area: out; }
.sim-stage { grid-area: stage; }

.sim__panel {
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  min-width: 0;
}
@media (min-width: 88rem) {
  .sim__panel { position: sticky; top: calc(var(--header-h, 72px) + var(--sp-3)); max-height: calc(100vh - var(--header-h, 72px) - var(--sp-6)); overflow: auto; overscroll-behavior: contain; }
}
.sim__panel-title {
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-block-end: var(--bw) solid var(--line);
}
.sim__panel-body { display: grid; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-5); }

/* ---- inputs ---------------------------------------------------------------------- */
.sim-field { display: grid; gap: var(--sp-2); margin: 0; }
.sim-field .field__label { color: var(--text-strong); }
.sim-field .field__hint { margin: 0; }
.sim-static { margin: 0; color: var(--text); font-size: var(--fs-sm); }
.sim-divider { height: 1px; background: var(--line); margin-block: var(--sp-1); }

.sim-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sim-chip {
  padding: 0.5rem 0.85rem;
  font: 600 var(--fs-xs) / 1 var(--font-sans);
  color: var(--text);
  background: transparent;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.sim-chip:hover { border-color: var(--accent); }
.sim-chip[aria-checked="true"],
.sim-chip[aria-pressed="true"] { color: var(--c-ink-950); background: var(--accent); border-color: var(--accent); }
.sim-chip:focus-visible, .sim-mode:focus-visible, .sim-model:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sim-slider { display: flex; align-items: center; gap: var(--sp-3); }
.sim-slider__range { flex: 1; accent-color: var(--accent); min-width: 0; }
.sim-slider__value {
  min-width: 4.5ch;
  padding: 0.35rem 0.6rem;
  font: 600 var(--fs-sm) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  text-align: center;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-sm);
}
.sim-check { display: grid; gap: var(--sp-1); }
.sim-check .field__hint { margin: 0; padding-inline-start: 1.75rem; }

/* model picker */
.sim-model-card { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border: var(--bw) solid var(--line-gold); border-radius: var(--r-md); background: var(--surface-sunken); }
.sim-model-card p { margin: 0; }
.sim-model-card__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); }
.sim-model-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-block: var(--sp-1); }
.sim-models-wrap { display: grid; gap: var(--sp-2); }
.sim-models-wrap > summary { list-style: none; }
.sim-models-wrap > summary::-webkit-details-marker { display: none; }
.sim-models { display: grid; gap: 2px; max-height: 22rem; overflow: auto; overscroll-behavior: contain; padding-inline-end: var(--sp-1); }
.sim-models__group { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.sim-model {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  text-align: start;
  color: var(--text);
  background: transparent;
  border: var(--bw) solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.sim-model:hover { background: var(--surface-sunken); }
.sim-model[aria-selected="true"] { border-color: var(--line-gold); background: var(--surface-sunken); }
.sim-model__name { font-weight: 600; color: var(--text-strong); font-size: var(--fs-sm); }
.sim-model__meta { grid-column: 1; font-size: var(--fs-2xs); color: var(--text-muted); }
.sim-model__tags { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; align-items: center; }

/* parts palette */
.sim-palette { display: grid; gap: var(--sp-2); }
.sim-palette__group { margin: var(--sp-3) 0 0; font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.sim-part {
  display: grid;
  gap: var(--sp-1) var(--sp-2);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--sp-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.sim-part[draggable="true"] { cursor: grab; }
.sim-part[draggable="true"]:active { cursor: grabbing; }
.sim-part__name { font-weight: 600; font-size: var(--fs-sm); color: var(--text-strong); }
.sim-part__meta { grid-column: 1; font-size: var(--fs-2xs); color: var(--text-muted); }
.sim-part .select, .sim-part > .t-small { grid-column: 1; }
.sim-part .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.select--sm { padding-block: 0.4rem; font-size: var(--fs-xs); }

/* ---- stage ---------------------------------------------------------------------- */
.sim-stage {
  position: relative;
  min-height: min(68vh, 40rem);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 60%, rgba(33, 73, 122, 0.45), transparent 70%),
    var(--surface-sunken);
  touch-action: none;
}
@media (min-width: 88rem) { .sim-stage { min-height: calc(100vh - var(--header-h, 72px) - var(--sp-10)); position: sticky; top: calc(var(--header-h, 72px) + var(--sp-3)); } }
.sim-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.sim-stage.is-dragging .sim-stage__canvas { cursor: grabbing; }
.sim-stage__bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  pointer-events: none;
  z-index: 1;
}
.sim-stage__bar > * { pointer-events: auto; }
.sim-stage__title { margin: 0; font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.sim-stage__hint { position: absolute; inset-block-end: var(--sp-3); inset-inline-start: var(--sp-4); margin: 0; pointer-events: none; }
.sim-stage__nowebgl { display: none; position: absolute; inset: 0; margin: auto; height: fit-content; max-width: 28rem; padding: var(--sp-5); text-align: center; color: var(--text-muted); }
.sim-stage.is-nowebgl .sim-stage__nowebgl { display: block; }
.sim-stage.is-nowebgl .sim-stage__hint { display: none; }
.sim-stage__tip {
  position: absolute;
  z-index: 2;
  padding: 0.4rem 0.6rem;
  font-size: var(--fs-2xs);
  color: var(--text-strong);
  background: var(--c-ink-950);
  border: var(--bw) solid var(--line-gold);
  border-radius: var(--r-sm);
  pointer-events: none;
  white-space: nowrap;
}

/* ---- results ------------------------------------------------------------------- */
.sim-verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  color: var(--text-strong);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.sim-verdict__dot { flex: none; width: 0.6rem; height: 0.6rem; margin-block-start: 0.4em; border-radius: 50%; background: var(--text-faint); }
.sim-verdict--ok { border-color: color-mix(in srgb, var(--sim-ok) 45%, transparent); }
.sim-verdict--ok .sim-verdict__dot { background: var(--sim-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sim-ok) 20%, transparent); }
.sim-verdict--warn { border-color: color-mix(in srgb, var(--sim-warn) 50%, transparent); }
.sim-verdict--warn .sim-verdict__dot { background: var(--sim-warn); }
.sim-verdict--bad { border-color: color-mix(in srgb, var(--sim-bad) 55%, transparent); }
.sim-verdict--bad .sim-verdict__dot { background: var(--sim-bad); }

.sim-head { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; color: var(--text-strong); text-wrap: balance; }
.sim-sub { margin: var(--sp-3) 0 0; font: 600 var(--fs-3xs) / 1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.sim-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: var(--bw) solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--line); }
.sim-metric { display: grid; gap: 2px; align-content: start; padding: var(--sp-3); background: var(--surface-raised); }
.sim-metric p { margin: 0; }
.sim-metric__label { font-size: var(--fs-2xs); color: var(--text-muted); }
.sim-metric__value { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sim-metric__sub { font-size: var(--fs-2xs); color: var(--text-faint); }
.sim-money { display: inline-block; }

.sim-note { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--text); border-inline-start: 2px solid var(--accent); background: var(--surface-sunken); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.sim-note--warn { border-inline-start-color: var(--sim-warn); }
[dir="rtl"] .sim-note { border-radius: var(--r-sm) 0 0 var(--r-sm); }

.sim-mem { display: grid; gap: var(--sp-2); }
.sim-mem__bar { display: flex; height: 0.85rem; border-radius: var(--r-pill); overflow: hidden; background: var(--line); }
.sim-mem__seg { display: block; min-width: 0; }
.sim-mem__seg--weights { background: var(--accent); }
.sim-mem__seg--kv { background: var(--sim-kv); }
.sim-mem__seg--runtime { background: var(--c-ink-500); }
.sim-mem__seg--free { background: transparent; }
.sim-mem__legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-2xs); color: var(--text-muted); }
.sim-mem__legend li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.sim-mem__key { width: 0.6rem; height: 0.6rem; border-radius: 2px; }
.sim-mem__key.sim-mem__seg--free { border: var(--bw) solid var(--line-strong); }

.sim-role { display: block; margin-block-start: 2px; }
.sim-alts, .sim-sram { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.sim-alt, .sim-sram li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-2); padding: var(--sp-3); border: var(--bw) solid var(--line); border-radius: var(--r-md); }
.sim-alt__name { font-weight: 600; font-size: var(--fs-sm); color: var(--text-strong); }
.sim-alt__meta { grid-column: 1; font-size: var(--fs-2xs); color: var(--text-muted); }
.sim-alt .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.sim-details { border-block-start: var(--bw) solid var(--line); padding-block-start: var(--sp-3); }
.sim-details summary { cursor: pointer; font-weight: 600; color: var(--text-strong); font-size: var(--fs-sm); }
.sim-assume, .sim-sources { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0 0; padding-inline-start: 1.1rem; font-size: var(--fs-xs); color: var(--text-muted); }
.sim-sources a { overflow-wrap: anywhere; }
.sim-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.sim-loading { display: flex; justify-content: center; padding: var(--sp-6); }
.sim-noscript { padding: var(--sp-5); color: var(--text-muted); }

/* The session ended while the page was open (app.js signedOut()): the line
   and a way back in, where the results were. */
.sim-signed-out { display: grid; gap: var(--sp-4); justify-items: start; padding: var(--sp-5); }
.sim-signed-out p { margin: 0; color: var(--text-strong); line-height: var(--lh-body); }

/* ---- the gate panel (partials/tool-gate.php), where the tool sits --------------- */
/* Someone not signed in sees the panel in the tool's band: the same deep
   surface as the tool, a gold hairline above it, as the method items have.
   Nothing new: the eyebrow, heading, lead and buttons are the site's own. */
.tool-gate { background: var(--surface); padding-block: var(--sp-9) var(--sp-10); }
.tool-gate__grid { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 64rem) {
  .tool-gate__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-9); }
}
.tool-gate__panel {
  max-inline-size: 46rem;
  padding-block-start: var(--sp-6);
  border-block-start: var(--bw) solid var(--line-gold);
}

/* Beside it, the four things the simulator sizes, in its own words. */
.tool-gate__aside { display: grid; gap: var(--sp-4); padding-block-start: var(--sp-6); border-block-start: var(--bw) solid var(--line); }
.sim-gate-modes__title { margin: 0; }
.sim-gate-modes { display: grid; margin: 0; padding: 0; list-style: none; }
.sim-gate-modes__item { display: grid; gap: var(--sp-1); padding-block: var(--sp-4); border-block-end: var(--bw) solid var(--line); }
.sim-gate-modes__item:first-child { padding-block-start: 0; }
.sim-gate-modes__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--text-strong); }
.sim-gate-modes__desc { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); }
.tool-gate__panel .t-h2, .tool-gate__panel .t-lead, .tool-gate__panel p { margin: 0; }
.tool-gate__closed { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); max-inline-size: 60ch; }
.tool-gate__notes .t-meta { line-height: var(--lh-body); max-inline-size: 60ch; }
.tool-gate bdi { display: inline-block; }
/* In Edit pages the panel sits above the tool, which follows straight on. */
.tool-gate + .sim { border-block-start: var(--bw) solid var(--line); }
@media (max-width: 47.99rem) {
  .tool-gate { padding-block: var(--sp-7) var(--sp-8); }
  .tool-gate .cluster > .btn { inline-size: 100%; justify-content: center; }
}

/* ---- leaderboard ---------------------------------------------------------------- */
.sim-lb td, .sim-lb th { vertical-align: middle; }
.sim-lb__pill { margin-inline-start: var(--sp-2); }
.sim-lb .btn { white-space: nowrap; }

/* ---- method --------------------------------------------------------------------- */
.sim-method { display: grid; gap: var(--sp-6) var(--sp-7); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .sim-method { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .sim-method { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sim-method__item { display: grid; gap: var(--sp-2); align-content: start; padding-block-start: var(--sp-4); border-block-start: var(--bw) solid var(--line-gold); }
.sim-method__item h3, .sim-method__item p { margin: 0; }
.sim-method__index { font: 700 var(--fs-sm) / 1 var(--font-display); color: var(--c-gold-400); font-variant-numeric: tabular-nums; }
/* On paper (the page without the tool) gold stays a rule, never text. */
.sim-method-band[data-world="soft"] .sim-method__index { color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  .sim-mode, .sim-chip { transition: none; }
}