/* benchr Labs + Migration Assistant
   Component-only styles. Every colour resolves through the existing benchr palette. */

.platform-tool {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem);
}

.platform-tool .tool-page__head {
  max-width: 820px;
}

.platform-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.15rem;
}

.platform-subnav a {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .48rem .78rem;
  color: var(--black);
  font: 600 .72rem/1 var(--font-mono);
  text-decoration: none;
}

.platform-subnav a[aria-current="page"],
.platform-subnav a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.platform-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--orange);
  border-radius: 10px;
  background: var(--code-bg);
  padding: 1rem 1.1rem;
  margin: 1.25rem 0;
  color: var(--black);
}

.platform-note__mark {
  font: 700 .7rem/1 var(--font-mono);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-top: .18rem;
}

html[lang="ar"] .platform-note__mark {
  letter-spacing: 0;
}

.platform-note p {
  margin: 0;
  font: .88rem/1.65 var(--font-sans);
}

.platform-board {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}

.lab-step,
.mig-panel {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 5%, transparent);
  overflow: clip;
}

.lab-step__head,
.mig-panel__head {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.15rem 1.2rem;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--code-bg) 82%, var(--white));
}

.lab-step__number {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font: 700 .72rem/1 var(--font-mono);
}

[data-theme="dark"] .lab-step__number {
  color: var(--code-bg);
}

.lab-step__head h2,
.mig-panel__head h2 {
  margin: 0 0 .18rem;
  color: var(--black);
  font: 600 clamp(1.15rem, 2.5vw, 1.45rem)/1.15 var(--font-display);
}

.lab-step__head p,
.mig-panel__head p {
  margin: 0;
  color: var(--ink-soft);
  font: .82rem/1.55 var(--font-sans);
}

.lab-step__body,
.mig-panel__body {
  padding: 1.2rem;
}

.lab-grid-2,
.mig-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.lab-field {
  display: grid;
  gap: .42rem;
  min-width: 0;
}

.lab-field--full {
  grid-column: 1 / -1;
}

.lab-label {
  color: var(--black);
  font: 650 .78rem/1.35 var(--font-sans);
}

.lab-help {
  color: var(--ink-soft);
  font: .72rem/1.5 var(--font-sans);
}

.platform-tool :where(input[type="text"], input[type="number"], input[type="search"], select, textarea) {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  color: var(--black);
  padding: .72rem .78rem;
  font: .86rem/1.5 var(--font-sans);
}

.platform-tool textarea {
  min-height: 7.2rem;
  resize: vertical;
}

.platform-tool :where(input, select, textarea):focus-visible,
.lab-btn:focus-visible,
.lab-model:focus-within {
  outline: 3px solid color-mix(in srgb, var(--orange) 32%, transparent);
  outline-offset: 2px;
  border-color: var(--orange);
}

label.lab-btn:has(+ input[type="file"].sr-only:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--orange) 32%, transparent);
  outline-offset: 2px;
}

.lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin-top: .9rem;
}

.lab-actions--spread {
  justify-content: space-between;
}

.lab-btn {
  appearance: none;
  border: 1px solid var(--orange);
  border-radius: 8px;
  background: var(--orange);
  color: var(--white);
  padding: .68rem .9rem;
  cursor: pointer;
  font: 700 .75rem/1.1 var(--font-sans);
  text-decoration: none;
}

[data-theme="dark"] .lab-btn {
  color: var(--code-bg);
}

.lab-btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.lab-btn--ghost {
  background: transparent;
  color: var(--orange);
  border-color: var(--rule);
}

.lab-btn--ghost:hover {
  background: var(--code-bg);
  color: var(--orange);
  border-color: var(--orange);
}

.lab-btn--danger {
  background: transparent;
  color: var(--black);
  border-color: var(--rule);
}

.lab-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.lab-btn--small {
  padding: .45rem .62rem;
  font-size: .68rem;
}

.lab-status {
  min-height: 1.35rem;
  margin: .75rem 0 0;
  color: var(--ink-soft);
  font: .74rem/1.5 var(--font-mono);
}

.lab-status[data-tone="success"] {
  color: color-mix(in srgb, var(--orange) 78%, var(--black));
}

.lab-status[data-tone="error"] {
  color: var(--black);
  font-weight: 700;
}

.lab-suite-meta {
  margin-top: .8rem;
  padding: .8rem .9rem;
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--ink-soft);
  font: .78rem/1.55 var(--font-sans);
}

.lab-case-list,
.lab-model-list,
.lab-output-grid,
.lab-blind-grid,
.mig-results {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}

.lab-case-card,
.lab-output-card,
.lab-blind-card,
.mig-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--white);
  padding: .9rem;
}

.lab-case-card__top,
.lab-output-card__top,
.lab-blind-card__top,
.mig-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}

.lab-case-card h3,
.lab-output-card h3,
.lab-blind-card h3,
.mig-card h3 {
  margin: 0;
  color: var(--black);
  font: 650 1rem/1.3 var(--font-sans);
}

.lab-case-card__meta,
.lab-output-card__meta,
.mig-card__meta {
  margin: .2rem 0 0;
  color: var(--ink-soft);
  font: .67rem/1.5 var(--font-mono);
}

.lab-case-card details {
  margin-top: .7rem;
}

.lab-case-card summary {
  cursor: pointer;
  color: var(--orange);
  font: 650 .76rem/1.4 var(--font-sans);
}

.lab-case-card__prompt,
.lab-output-preview,
.mig-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  margin: .65rem 0 0;
  padding: .72rem;
  border-radius: 7px;
  background: var(--code-bg);
  color: var(--black);
  font: .78rem/1.65 var(--font-mono);
}

.lab-model-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lab-model {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: .75rem;
  cursor: pointer;
  background: var(--white);
}

.lab-model:has(input:checked) {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 7%, var(--white));
}

.lab-model input {
  width: 1rem;
  height: 1rem;
  margin: .12rem 0 0;
  accent-color: var(--orange);
}

.lab-model strong {
  display: block;
  color: var(--black);
  font: 650 .78rem/1.35 var(--font-sans);
}

.lab-model small {
  display: block;
  margin-top: .2rem;
  color: var(--ink-soft);
  font: .65rem/1.4 var(--font-mono);
}

.lab-model-count {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  background: var(--code-bg);
  padding: .35rem .58rem;
  color: var(--ink-soft);
  font: .68rem/1 var(--font-mono);
}

.lab-output-grid,
.lab-blind-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lab-output-card textarea {
  min-height: 12rem;
  unicode-bidi: plaintext;
}

.lab-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .7rem;
}

.lab-metrics-row label {
  display: grid;
  gap: .28rem;
  color: var(--ink-soft);
  font: .65rem/1.3 var(--font-mono);
}

.lab-metrics-row input {
  padding: .52rem .56rem;
  font-size: .75rem;
}

.lab-anon {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  border-radius: 7px;
  background: var(--orange);
  color: var(--white);
  font: 800 .75rem/1 var(--font-mono);
}

[data-theme="dark"] .lab-anon {
  color: var(--code-bg);
}

.lab-rubric-grid {
  display: grid;
  gap: .65rem;
  margin-top: .8rem;
}

.lab-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: .75rem;
  align-items: center;
  padding-top: .62rem;
  border-top: 1px solid var(--rule);
}

.lab-score-row strong {
  display: block;
  color: var(--black);
  font: 650 .75rem/1.35 var(--font-sans);
}

.lab-score-row small {
  display: block;
  margin-top: .15rem;
  color: var(--ink-soft);
  font: .65rem/1.45 var(--font-sans);
}

.lab-score-notes {
  margin-top: .75rem;
}

.lab-score-notes textarea {
  min-height: 5rem;
}

.lab-table-wrap,
.mig-table-wrap {
  overflow-x: auto;
  margin-top: .9rem;
  border: 1px solid var(--rule);
  border-radius: 9px;
}

.lab-table,
.mig-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  color: var(--black);
}

.lab-table th,
.lab-table td,
.mig-table th,
.mig-table td {
  padding: .72rem .78rem;
  border-bottom: 1px solid var(--rule);
  text-align: start;
  vertical-align: top;
  font: .74rem/1.45 var(--font-sans);
}

.lab-table th,
.mig-table th {
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--ink-soft);
}

.lab-rank {
  color: var(--orange);
  font: 800 .75rem/1 var(--font-mono);
}

.lab-data-badge,
.mig-status-pill,
.mig-match-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .28rem .5rem;
  background: var(--code-bg);
  color: var(--ink-soft);
  font: 650 .62rem/1.15 var(--font-mono);
}

.lab-data-badge--accent,
.mig-status-pill--deprecated,
.mig-status-pill--retired {
  border-color: var(--orange);
  color: var(--orange);
}

.lab-empty {
  margin: .8rem 0 0;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 1rem;
  color: var(--ink-soft);
  text-align: center;
  font: .8rem/1.55 var(--font-sans);
}

.lab-source-line {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .85rem;
  color: var(--ink-soft);
  font: .66rem/1.45 var(--font-mono);
}

.lab-reveal {
  display: grid;
  gap: .4rem;
  margin-top: .8rem;
  padding: .75rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--black);
  font: .72rem/1.5 var(--font-mono);
}

.mig-input {
  min-height: 12rem !important;
  unicode-bidi: plaintext;
  font-family: var(--font-mono) !important;
}

.mig-card {
  padding: 1rem;
}

.mig-card__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
}

.mig-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: .85rem 0 0;
}

.mig-fact {
  padding: .7rem;
  border-radius: 8px;
  background: var(--code-bg);
}

.mig-fact span {
  display: block;
  color: var(--ink-soft);
  font: .6rem/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
}

html[lang="ar"] .mig-fact span {
  letter-spacing: 0;
}

.mig-fact strong {
  display: block;
  margin-top: .25rem;
  color: var(--black);
  font: 650 .76rem/1.45 var(--font-sans);
}

.mig-section {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}

.mig-section h4 {
  margin: 0 0 .55rem;
  color: var(--black);
  font: 700 .78rem/1.35 var(--font-sans);
}

.mig-section p {
  margin: .35rem 0;
  color: var(--black);
  font: .78rem/1.6 var(--font-sans);
}

.mig-checklist {
  margin: .5rem 0 0;
  padding-inline-start: 1.2rem;
  color: var(--black);
}

.mig-checklist li {
  margin: .35rem 0;
  padding-inline-start: .2rem;
  font: .76rem/1.55 var(--font-sans);
}

.mig-source {
  overflow-wrap: anywhere;
}

.platform-explainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.platform-explainer article {
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--white);
}

.platform-explainer h2,
.platform-explainer h3 {
  margin: 0 0 .55rem;
  color: var(--black);
  font: 600 1.15rem/1.2 var(--font-display);
}

.platform-explainer p,
.platform-explainer li {
  color: var(--ink-soft);
  font: .82rem/1.65 var(--font-sans);
}

.platform-related {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.platform-related h2 {
  margin: 0 0 .8rem;
  color: var(--black);
  font: 600 1.35rem/1.2 var(--font-display);
}

.platform-related__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.platform-related__links a {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: .85rem;
  color: var(--black);
  text-decoration: none;
  font: 650 .8rem/1.5 var(--font-sans);
}

.platform-related__links a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.platform-tool [hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[dir="rtl"] .lab-table,
html[dir="rtl"] .mig-table {
  direction: rtl;
}

/* style.css intentionally keeps general Arabic page chrome LTR. These two
   product tools are native RTL surfaces, so the later component sheet opts in. */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] .masthead,
html[lang="ar"] .masthead__inner,
html[lang="ar"] .masthead__row,
html[lang="ar"] .platform-tool,
html[lang="ar"] .site-footer,
html[lang="ar"] .site-footer__inner,
html[lang="ar"] .site-footer__nav {
  direction: rtl !important;
}

html[lang="ar"] body {
  --font-display: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
}

html[lang="ar"] .platform-tool,
html[lang="ar"] .site-footer {
  text-align: right;
}

html[lang="ar"] .platform-tool [dir="ltr"],
html[lang="ar"] .platform-tool input[type="number"] {
  direction: ltr !important;
  text-align: left;
}

.platform-tool [dir="auto"] {
  text-align: start;
}

html[dir="rtl"] .lab-case-card__prompt,
html[dir="rtl"] .lab-output-preview,
html[dir="rtl"] .mig-code {
  text-align: start;
}

@media (max-width: 840px) {
  .lab-grid-2,
  .mig-grid-2,
  .lab-output-grid,
  .lab-blind-grid,
  .platform-explainer,
  .platform-related__links {
    grid-template-columns: 1fr;
  }

  .lab-model-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mig-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .platform-tool {
    width: min(100% - 1rem, 1180px);
  }

  .lab-step__head,
  .lab-step__body,
  .mig-panel__head,
  .mig-panel__body {
    padding: .9rem;
  }

  .lab-model-list,
  .lab-metrics-row {
    grid-template-columns: 1fr;
  }

  .lab-score-row {
    grid-template-columns: 1fr;
  }

  .lab-actions--spread {
    align-items: stretch;
  }

  .lab-actions--spread > * {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-tool *,
  .platform-tool *::before,
  .platform-tool *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .masthead,
  .nl-bar,
  .site-footer,
  .lab-actions,
  .platform-subnav,
  .platform-note,
  .platform-explainer,
  .platform-related,
  .lab-step:not(#lab-results-step),
  .mig-panel:first-of-type {
    display: none !important;
  }

  .platform-tool,
  .lab-step,
  .mig-panel {
    width: 100%;
    box-shadow: none;
    border-color: var(--rule);
  }
}