/*
 * ONYX Brand Portal — scoped to .obp so a host theme cannot leak in and the
 * portal cannot leak out. Tokens follow DESIGN.md.
 *
 * Thesis: a production run with a deadline, not a design studio. The dark shell
 * exists so the one thing that must be judged, the printed label on white
 * stock, is the brightest object on the page.
 */

/* Self-hosted, so no artist's browser has to call a font CDN. Both faces are
   SIL Open Font License; the latin subset is enough for da, en, de and sv. */
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-var.woff2") format("woff2-variations"),
       url("fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.obp {
  --obp-bg: #0c0c0d;
  --obp-surface: #141416;
  --obp-surface-raised: #1c1c1f;
  --obp-stock: #ffffff;
  --obp-ink: #f4f4f5;
  --obp-ink-muted: #a8a8ad;
  --obp-ink-stock: #141416;
  --obp-line: #2c2c31;
  --obp-line-strong: #45454c;
  --obp-accent: #e8b23a;
  --obp-accent-ink: #1a1300;
  --obp-danger: #ff6b5e;
  --obp-ok: #6fd08c;
  --obp-focus: #7ac2ff;
  --obp-radius: 10px;
  --obp-radius-sm: 6px;
  --obp-space-1: 4px;
  --obp-space-2: 8px;
  --obp-space-3: 12px;
  --obp-space-4: 20px;
  --obp-space-5: 32px;
  --obp-space-6: 48px;
  --obp-dur: 140ms;
  --obp-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --obp-rail: 68rem;
  --obp-font: "Inter Tight", "Inter", "Segoe UI", Roboto, sans-serif;
  --obp-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  box-sizing: border-box;
  max-width: var(--obp-rail);
  margin-inline: auto;
  padding: var(--obp-space-5) var(--obp-space-4) var(--obp-space-6);
  background: var(--obp-bg);
  color: var(--obp-ink);
  font-family: var(--obp-font);
  font-size: 16px;
  line-height: 1.55;
}

.obp *,
.obp *::before,
.obp *::after { box-sizing: inherit; }

/* The portal is dropped into arbitrary themes, so typography is re-asserted
   inside the shell rather than inherited from whatever the theme sets. */
.obp :is(h1, h2, h3, p, li, dt, dd, label, legend, input, select, button, textarea, a, figcaption, span) {
  font-family: inherit;
}
.obp :is(ul, ol, dl) { margin-block: 0; }

.obp .obp-num { font-family: var(--obp-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Focus is never removed and never colour-only. */
.obp :focus-visible {
  outline: 2px solid var(--obp-focus);
  outline-offset: 2px;
  border-radius: var(--obp-radius-sm);
}

/* ---------- head ---------- */
.obp .obp-head { display: grid; gap: var(--obp-space-2); margin-bottom: var(--obp-space-4); }
.obp .obp-eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--obp-ink-muted);
}
.obp .obp-h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }
.obp .obp-h2 { margin: 0 0 var(--obp-space-3); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.obp .obp-h3 { margin: 0 0 var(--obp-space-2); font-size: 16px; font-weight: 600; }
.obp .obp-lede { margin: 0; color: var(--obp-ink-muted); max-width: 60ch; }
.obp .obp-help { margin: var(--obp-space-2) 0 0; color: var(--obp-ink-muted); font-size: 14px; max-width: 66ch; }
.obp .obp-link { color: var(--obp-ink); text-decoration: underline; text-underline-offset: 3px; }
.obp .obp-link:hover { color: var(--obp-accent); }

.obp .obp-langs { display: flex; gap: var(--obp-space-1); }
.obp .obp-lang {
  padding: 4px 10px;
  border: 1px solid var(--obp-line);
  border-radius: var(--obp-radius-sm);
  color: var(--obp-ink-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: border-color var(--obp-dur) var(--obp-ease), color var(--obp-dur) var(--obp-ease);
}
.obp .obp-lang:hover { border-color: var(--obp-line-strong); color: var(--obp-ink); }
.obp .obp-lang.is-current { border-color: var(--obp-accent); color: var(--obp-accent); }

/* ---------- run bar: the spine of the UI ---------- */
.obp .obp-runbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--obp-space-4);
  align-items: baseline;
  padding: var(--obp-space-3) var(--obp-space-4);
  border: 1px solid var(--obp-line);
  border-left: 3px solid var(--obp-accent);
  border-radius: var(--obp-radius);
  background: var(--obp-surface);
  margin-bottom: var(--obp-space-4);
}
.obp .obp-runbar__item { display: grid; gap: 2px; }
.obp .obp-runbar__item--end { margin-inline-start: auto; text-align: end; }
.obp .obp-runbar__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--obp-ink-muted); }
.obp .obp-runbar__value { font-size: 18px; }

/* ---------- steps ---------- */
.obp .obp-steps { margin-bottom: var(--obp-space-4); }
.obp .obp-steps__compact { display: none; margin: 0; font-size: 14px; color: var(--obp-ink-muted); }
.obp .obp-steps__list { display: flex; flex-wrap: wrap; gap: var(--obp-space-3); margin: 0; padding: 0; list-style: none; }
.obp .obp-step { display: flex; align-items: center; gap: var(--obp-space-2); color: var(--obp-ink-muted); font-size: 14px; }
.obp .obp-step__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--obp-line-strong);
  border-radius: 50%;
  font-size: 13px;
}
.obp .obp-step.is-current { color: var(--obp-ink); }
.obp .obp-step.is-current .obp-step__num { border-color: var(--obp-accent); background: var(--obp-accent); color: var(--obp-accent-ink); }
.obp .obp-step.is-done .obp-step__num { border-color: var(--obp-ok); color: var(--obp-ok); }

/* ---------- panels and forms ---------- */
.obp .obp-panel {
  padding: var(--obp-space-4);
  border: 1px solid var(--obp-line);
  border-radius: var(--obp-radius);
  background: var(--obp-surface);
  margin-bottom: var(--obp-space-4);
}
.obp .obp-form { display: grid; gap: var(--obp-space-4); margin-top: var(--obp-space-3); }
.obp .obp-field { display: grid; gap: var(--obp-space-2); }
.obp .obp-field--inline { max-width: 22rem; }
.obp .obp-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--obp-space-2); }
.obp .obp-label { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; padding: 0; }

.obp .obp-input,
.obp .obp-select,
.obp .obp-file {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--obp-line-strong);
  border-radius: var(--obp-radius-sm);
  background: var(--obp-surface-raised);
  color: var(--obp-ink);
  font: inherit;
  transition: border-color var(--obp-dur) var(--obp-ease);
}
.obp .obp-select {
  /* Trailing chevron with a deliberate inset, never edge-hugging. */
  appearance: none;
  padding-inline-end: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--obp-ink-muted) 50%),
    linear-gradient(135deg, var(--obp-ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.obp .obp-input:hover,
.obp .obp-select:hover { border-color: var(--obp-ink-muted); }
.obp .obp-input--code { font-family: var(--obp-mono); letter-spacing: 0.08em; text-transform: uppercase; }

.obp .obp-tiers { display: grid; gap: var(--obp-space-2); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.obp .obp-tier,
.obp .obp-choice {
  display: flex;
  gap: var(--obp-space-3);
  align-items: flex-start;
  padding: var(--obp-space-3);
  border: 1px solid var(--obp-line);
  border-radius: var(--obp-radius-sm);
  background: var(--obp-surface-raised);
  cursor: pointer;
  transition: border-color var(--obp-dur) var(--obp-ease), background-color var(--obp-dur) var(--obp-ease);
}
.obp .obp-tier:hover,
.obp .obp-choice:hover { border-color: var(--obp-line-strong); }
.obp .obp-tier:has(:checked),
.obp .obp-choice:has(:checked) { border-color: var(--obp-accent); background: #1f1a10; }
.obp .obp-tier__body { display: grid; gap: 2px; }
.obp .obp-tier__qty { font-size: 17px; font-weight: 600; }
.obp .obp-tier__unit { font-size: 14px; color: var(--obp-ink-muted); }
.obp .obp-tier__total { font-size: 15px; }
.obp .obp-tier__setup { font-size: 12px; color: var(--obp-ink-muted); }
.obp .obp-choices { display: flex; flex-wrap: wrap; gap: var(--obp-space-2); }
.obp .obp-choice { min-width: 10rem; }
.obp .obp-choice__label { display: grid; gap: 2px; font-size: 15px; }
.obp .obp-choice__meta { font-size: 13px; color: var(--obp-ink-muted); }
.obp .obp-radio,
.obp .obp-checkbox { width: 20px; height: 20px; accent-color: var(--obp-accent); flex: none; margin-top: 2px; }

.obp .obp-check { display: flex; gap: var(--obp-space-3); align-items: flex-start; font-size: 15px; line-height: 1.5; }
.obp .obp-check + .obp-check { margin-top: var(--obp-space-3); }

.obp .obp-drop {
  display: grid;
  gap: var(--obp-space-2);
  padding: var(--obp-space-4);
  border: 1px dashed var(--obp-line-strong);
  border-radius: var(--obp-radius);
  background: var(--obp-surface-raised);
  transition: border-color var(--obp-dur) var(--obp-ease), background-color var(--obp-dur) var(--obp-ease);
}
.obp .obp-drop.is-dragover { border-color: var(--obp-accent); background: #1f1a10; }
.obp .obp-file { padding: 10px; cursor: pointer; }

.obp .obp-actions { display: flex; flex-wrap: wrap; gap: var(--obp-space-3); align-items: center; }
.obp .obp-btn {
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid var(--obp-line-strong);
  border-radius: var(--obp-radius-sm);
  background: transparent;
  color: var(--obp-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--obp-dur) var(--obp-ease), background-color var(--obp-dur) var(--obp-ease),
    color var(--obp-dur) var(--obp-ease);
}
.obp .obp-btn:hover { border-color: var(--obp-ink); }
.obp .obp-btn--primary { background: var(--obp-accent); border-color: var(--obp-accent); color: var(--obp-accent-ink); }
.obp .obp-btn--primary:hover { background: #f2c05a; border-color: #f2c05a; }
.obp .obp-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.obp .obp-status { margin: 0; font-size: 14px; color: var(--obp-ink-muted); }

/* ---------- alerts, checks, findings ---------- */
.obp .obp-alert {
  margin: 0 0 var(--obp-space-4);
  padding: var(--obp-space-3) var(--obp-space-4);
  border: 1px solid var(--obp-line);
  border-left-width: 3px;
  border-radius: var(--obp-radius-sm);
  background: var(--obp-surface);
  font-size: 15px;
}
.obp .obp-alert--error { border-left-color: var(--obp-danger); }
.obp .obp-alert--notice { border-left-color: var(--obp-accent); }

.obp .obp-checks {
  padding: var(--obp-space-4);
  border: 1px solid var(--obp-line);
  border-left-width: 3px;
  border-radius: var(--obp-radius);
  background: var(--obp-surface);
  margin-bottom: var(--obp-space-4);
}
.obp .obp-checks.is-ok { border-left-color: var(--obp-ok); }
.obp .obp-checks.is-bad { border-left-color: var(--obp-danger); }
.obp .obp-checks__verdict,
.obp .obp-verdict { display: flex; gap: var(--obp-space-2); align-items: center; margin: 0 0 var(--obp-space-3); font-weight: 600; }

.obp .obp-glyph { flex: none; }
.obp .obp-glyph--check { color: var(--obp-ok); }
.obp .obp-glyph--cross { color: var(--obp-danger); }
.obp .obp-glyph--warning { color: var(--obp-accent); }
.obp .obp-glyph--clock { color: var(--obp-ink-muted); }

.obp .obp-facts { display: grid; gap: var(--obp-space-2); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0 0 var(--obp-space-3); }
.obp .obp-fact { display: grid; gap: 2px; }
.obp .obp-fact dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--obp-ink-muted); }
.obp .obp-fact dd { margin: 0; font-size: 15px; word-break: break-word; }

.obp .obp-findings { display: grid; gap: var(--obp-space-2); margin: 0; padding: 0; list-style: none; }
.obp .obp-finding { display: flex; gap: var(--obp-space-2); align-items: flex-start; font-size: 15px; line-height: 1.5; }
.obp .obp-finding--error { color: var(--obp-ink); }
.obp .obp-finding--warning { color: var(--obp-ink); }
.obp .obp-finding--info { color: var(--obp-ink-muted); }

/* ---------- proof: the production sheet on white stock ---------- */
.obp .obp-proof { display: grid; gap: var(--obp-space-4); }
.obp .obp-sheet {
  background: var(--obp-stock);
  color: var(--obp-ink-stock);
  border-radius: var(--obp-radius-sm);
  padding: var(--obp-space-4);
  border: 1px solid var(--obp-line-strong);
}
.obp .obp-sheet__title {
  margin: 0 0 var(--obp-space-3);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #55555c;
  border-bottom: 1px solid #d8d8de;
  padding-bottom: var(--obp-space-2);
}
.obp .obp-sheet__art { display: block; width: 100%; height: auto; border: 1px solid #d8d8de; margin-bottom: var(--obp-space-3); }
.obp .obp-sheet__facts { display: grid; gap: 0; margin: 0; }
.obp .obp-sheet__row { display: flex; justify-content: space-between; gap: var(--obp-space-4); padding: 7px 0; border-bottom: 1px solid #e6e6ea; }
.obp .obp-sheet__row:last-child { border-bottom: 0; }
.obp .obp-sheet__row dt { font-size: 13px; color: #55555c; }
.obp .obp-sheet__row dd { margin: 0; font-size: 14px; font-weight: 600; text-align: end; }
.obp .obp-proof__side { display: grid; gap: var(--obp-space-3); align-content: start; }
.obp .obp-hash { font-size: 12px; color: var(--obp-ink-muted); word-break: break-all; }

/* ---------- job list ---------- */
.obp .obp-jobs { display: grid; gap: var(--obp-space-2); margin: 0 0 var(--obp-space-4); padding: 0; list-style: none; }
.obp .obp-job__link {
  display: grid;
  grid-template-columns: 16px minmax(7rem, auto) 1fr auto;
  gap: var(--obp-space-3);
  align-items: center;
  padding: var(--obp-space-3);
  border: 1px solid var(--obp-line);
  border-radius: var(--obp-radius-sm);
  color: var(--obp-ink);
  text-decoration: none;
  transition: border-color var(--obp-dur) var(--obp-ease), background-color var(--obp-dur) var(--obp-ease);
}
.obp .obp-job__link:hover { border-color: var(--obp-line-strong); background: var(--obp-surface-raised); }
.obp .obp-job.is-current .obp-job__link { border-color: var(--obp-accent); }
.obp .obp-job__status { color: var(--obp-ink-muted); font-size: 14px; }
.obp .obp-job__week { font-size: 14px; }

/* ---------- concepts: watermarked, never a print file ---------- */
.obp .obp-concepts { margin-top: var(--obp-space-4); padding-top: var(--obp-space-4); border-top: 1px solid var(--obp-line); }
.obp .obp-concepts__list { display: grid; gap: var(--obp-space-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.obp .obp-concept__fig { position: relative; margin: 0; }
.obp .obp-concept__img { display: block; width: 100%; height: auto; border: 1px solid var(--obp-line); }
.obp .obp-concept__mark {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 4px 8px;
  background: rgba(12, 12, 13, 0.86);
  color: var(--obp-accent);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.obp .obp-concept__brief { margin: var(--obp-space-2) 0 0; font-size: 13px; color: var(--obp-ink-muted); }

/* ---------- responsive ---------- */
@media (min-width: 62rem) {
  .obp .obp-proof { grid-template-columns: 1.35fr 1fr; align-items: start; }
}
@media (max-width: 40rem) {
  .obp { padding: var(--obp-space-4) var(--obp-space-3) var(--obp-space-5); }
  .obp .obp-steps__compact { display: block; }
  .obp .obp-steps__list { display: none; }
  .obp .obp-runbar { gap: var(--obp-space-3); }
  .obp .obp-runbar__item--end { margin-inline-start: 0; text-align: start; }
  .obp .obp-actions .obp-btn { width: 100%; }
  /* Four cells in two columns would push the status text into the 16px glyph
     column and overlap the week. Stack them under the reference instead. */
  .obp .obp-job__link { grid-template-columns: 16px 1fr; row-gap: var(--obp-space-1); }
  .obp .obp-job__ref,
  .obp .obp-job__status,
  .obp .obp-job__week { grid-column: 2; }
  .obp .obp-sheet__row { flex-direction: column; gap: 2px; }
  .obp .obp-sheet__row dd { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .obp * { transition-duration: 1ms !important; }
}

@media (forced-colors: active) {
  .obp .obp-tier:has(:checked),
  .obp .obp-choice:has(:checked) { border-color: Highlight; }
  .obp .obp-glyph { forced-color-adjust: auto; }
}

/* ---------- theme armour ----------
 * The portal is a shortcode inside somebody else's theme. Elementor's kit
 * stylesheet targets `.elementor-kit-16 input:not([type="button"])`, which
 * outranks any sane selector we can write, so the few properties a theme
 * routinely hijacks are re-asserted here. Kept to a short, explicit list: this
 * is armour, not a habit.
 */
.obp :is(h1, h2, h3, p, li, dt, dd, label, legend, figcaption, span, a) { font-family: var(--obp-font) !important; }
.obp :is(.obp-num, .obp-hash) { font-family: var(--obp-mono) !important; }
.obp :is(input, select, textarea, button) { font-family: var(--obp-font) !important; }
.obp :is(.obp-input, .obp-select, .obp-file) {
  background-color: var(--obp-surface-raised) !important;
  color: var(--obp-ink) !important;
  border-color: var(--obp-line-strong) !important;
}
.obp .obp-btn--primary { background-color: var(--obp-accent) !important; color: var(--obp-accent-ink) !important; }
.obp .obp-sheet { background-color: var(--obp-stock) !important; color: var(--obp-ink-stock) !important; }
.obp .obp-sheet :is(dt, dd, p) { color: inherit !important; }
.obp .obp-sheet__title { color: #55555c !important; }
.obp .obp-sheet__row dt { color: #55555c !important; }