/*
 * WHTC skin for the simulator UI — OWNED BY THE SITE REPO.
 * Loaded after simulator.css (linked from safety-academy-hero.html).
 *
 * DESIGN-SYSTEM.md: sharp corners, no shadows, 2px dark-blue rules (brand-darkblue\n * #1f2937 is the dark surface here, by request, not black), Montserrat 900
 * uppercase labels, Inter body, one orange accent. The 3D canvas and the report
 * document (.page) keep their own rendering; this only touches the chrome.
 */
:root {
  --whtc-navy: #1f2937;
  --border: 2px solid #1f2937;
}

/* Square corners everywhere except things that are genuinely round. */
*, *::before, *::after { border-radius: 0 !important; }
.sw i, .sw i::before, .sw i::after,
.rec, .info > button,
input[type="radio"] { border-radius: 999px !important; }

/* Flat chrome. Overlays that float over the 3D scene get a hard rule instead. */
.panel, .btn, .scenario-picker, .sel, .stepper, .seg, .seg button,
.report-launcher, .report-access, .access-field input, .access-submit,
.scenario-dialog, .scenario-cards > *, .info-tip, .export-dock, .views, .views button,
.results-overlay, .banner, .media-viewer { box-shadow: none !important; }

.results-overlay, .report-launcher, .views, .banner, .export-dock {
  border: 2px solid #1f2937 !important;
}
.results-overlay { background: #ffffff !important; backdrop-filter: none !important; }

/* Buttons: Montserrat black, uppercase, tracked — the site's button voice. */
.btn, .access-submit, .report-launcher strong, .scenario-picker,
.views button, .seg button, .rnd {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.btn.accent, .access-submit {
  background: #fe4d01 !important;
  color: #ffffff !important;
  border: 2px solid #fe4d01 !important;
}
.btn.accent:hover, .access-submit:hover { border-color: #1f2937 !important; }
.btn.accent:hover, .access-submit:hover { background: #1f2937 !important; }

/* Email drawer: same field/checkbox language as the site's contact drawer. */
.report-access { border: 2px solid #1f2937 !important; }
.report-access::backdrop { background: rgba(31, 41, 55, .72); }
.access-field input {
  border: 2px solid #1f2937 !important;
  background: #ffffff !important;
  font-size: 16px; /* never below 16px in inputs (iOS zoom) */
}
.access-eyebrow { color: #fe4d01; letter-spacing: .3em; }

/* "Locație" | "Scenarii": the environment picker and the ready-made scenarios
   launcher share one row. The launcher reuses .scenario-picker's look (dark
   block, orange icon, small label over a bold value). */
.scenario-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.scenario-row > .scenario-picker { min-width: 0; width: 100% !important; margin: 0 !important; }
.scenario-row > .scenario-picker strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scenario-row > .scenario-picker > span { min-width: 0; flex: 1; text-align: left; }
.scenario-row > .preset-launcher > svg { color: #fe4d01; }
.scenario-row > .preset-launcher { cursor: pointer; }
/* Light style for both: white block, dark-blue text, grey rule, orange icon. */
.scenario-row > .scenario-picker {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 2px solid #e5e7eb !important;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.scenario-row > .scenario-picker small { color: #6b7280 !important; }
.scenario-row > .scenario-picker > svg:last-child { color: #9ca3af; }
.scenario-row > .scenario-picker:hover { background: #f9fafb !important; border-color: #1f2937 !important; }
.preset-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh;
  width: min(560px, 100vw); padding: 0; border: 0; border-left: 2px solid #1f2937;
  background: #ffffff; color: #1f2937; overflow: auto; font-family: 'Inter', sans-serif;
}
.preset-drawer::backdrop { background: rgba(31, 41, 55, .72); }
.preset-drawer header {
  position: sticky; top: 0; z-index: 1; display: flex; gap: 16px; justify-content: space-between;
  padding: 24px; background: #1f2937; color: #ffffff; border-bottom: 4px solid #fe4d01;
}
.preset-drawer h2 { margin: 6px 0 6px; font: 900 22px/1 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: -.01em; }
.preset-drawer header p { margin: 0; color: #d1d5db; font-size: 13px; line-height: 1.5; }
.preset-eyebrow { color: #fe4d01; font: 900 10px/1 'Montserrat', sans-serif; letter-spacing: .3em; }
.preset-close {
  flex: none; width: 36px; height: 36px; border: 2px solid #ffffff; background: transparent;
  color: #ffffff; font-size: 22px; line-height: 1; cursor: pointer;
}
.preset-close:hover { background: #fe4d01; border-color: #fe4d01; }
.preset-groups { padding: 8px 24px 24px; }
.preset-group h3 {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; padding-bottom: 8px;
  border-bottom: 2px solid #1f2937; font: 900 13px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.preset-group h3 svg { width: 20px; height: 20px; color: #fe4d01; }
.preset-group ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.preset-card {
  display: grid; gap: 6px; width: 100%; padding: 14px 16px; text-align: left;
  border: 2px solid #e5e7eb; background: #ffffff; color: #1f2937; cursor: pointer;
  transition: border-color 200ms ease;
}
.preset-card:hover { border-color: #1f2937; }
.preset-note {
  margin: -2px 0 10px; padding: 8px 10px; background: #FFF7F3; border-left: 3px solid #fe4d01;
  color: #A33200; font: 500 12px/1.45 'Inter', sans-serif;
}
.preset-card strong { font: 800 14px/1.3 'Montserrat', sans-serif; }
.preset-topic { justify-self: start; padding: 3px 6px; background: #FFF7F3; color: #A33200; font: 900 9px/1 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.preset-summary { color: #6b7280; font-size: 13px; line-height: 1.5; }
.preset-run { justify-self: end; color: #fe4d01; font: 900 11px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.preset-status:empty { display: none; }
.preset-status { margin: 0 24px 24px; padding: 12px; border: 2px solid #D32F2F; color: #D32F2F; font-weight: 600; }

/* "Vezi raportul" docked under the results panel (site-ui.js sets the vars).
   Same voice as "Simulează": flat orange, square, icon + one uppercase label.
   Always visible: greyed out until a run has finished (the simulator keeps it
   disabled until then), with a hover note explaining what the report is. */
.report-launcher.is-docked {
  position: absolute !important;
  top: var(--rl-top) !important;
  right: var(--rl-right) !important;
  bottom: auto !important;
  left: auto !important;
  width: var(--rl-width) !important;
  min-height: 47px;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 8px;
  transform: none !important; /* simulator.css shifts the floating launcher up */
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 6;
  background: #fe4d01 !important;
  color: #ffffff !important;
  border: 2px solid #1f2937 !important;
  opacity: 1 !important;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.report-launcher.is-docked:hover:not(:disabled) { background: #1f2937 !important; }
.report-launcher.is-docked:disabled {
  background: #e5e7eb !important;
  color: #6b7280 !important;
  border-color: #d1d5db !important;
  cursor: not-allowed;
  pointer-events: auto !important; /* .btn:disabled turns hover off; we need it for the note */
}
/* Hover note while disabled. */
.report-launcher.is-docked:disabled::after {
  content: 'Alege setările și apasă „Simulează”. Apoi vezi raportul detaliat: PDF cu rezultate, calcule, imagini și video.';
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  padding: 10px 12px; background: #1f2937; color: #ffffff; text-align: left; white-space: normal;
  font: 500 12px/1.45 'Inter', sans-serif; letter-spacing: 0; text-transform: none;
  opacity: 0; pointer-events: none; transition: opacity 150ms ease;
}
.report-launcher.is-docked:disabled:hover::after { opacity: 1; }
.report-launcher.is-docked small,
.report-launcher.is-docked > svg:last-child { display: none !important; }
.report-launcher.is-docked > span { display: contents; }
.report-launcher.is-docked strong { font: 900 12px/1 'Montserrat', sans-serif !important; letter-spacing: .08em; text-transform: uppercase; }
.report-launcher.is-docked > svg:first-child { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .report-launcher.is-docked { transition: none; } }
/* Compact site nav at the top of the left panel (site-ui.js): logo left,
   Catalog + ☰ right, a hairline under it, then the kicker and title. */
.panel .top { position: relative; }
.sim-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding: 0 0 12px; border-bottom: 2px solid #1f2937;
}
.sim-nav__logo { display: block; line-height: 0; }
.sim-nav__logo img { display: block; height: 30px; width: auto; }
.sim-nav__actions { display: flex; align-items: center; gap: 8px; }
.sim-nav__catalog {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  border: 2px solid #1f2937; color: #1f2937; text-decoration: none;
  font: 900 10px/1 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color 200ms ease, color 200ms ease;
}
.sim-nav__catalog:hover { background: #1f2937; color: #ffffff; }
.sim-menu {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 2px solid #1f2937; background: #1f2937; color: #ffffff; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.sim-menu svg { width: 18px; height: 18px; }
.sim-menu:hover { background: #fe4d01; border-color: #fe4d01; }
/* Title on two lines: "Oprești căderea" / orange "înainte de sol?". */
.panel .top h1 span { display: block; margin-top: 5px; }
/* The stage's own logo overlay is replaced by the panel nav. */
#stage .slogo { display: none !important; }
/* Objects & collective protection: a popover opened from the ⚙ in the view bar. */
/* "Setări avansate" as its own optional block under "Simulează". */
.setup > #adv.adv-below {
  margin: 10px 0 0 !important;
  border: 2px solid #e5e7eb !important;
  background: #ffffff;
}
.setup > #adv.adv-below[open] { border-color: #1f2937 !important; }

#objs.is-popover {
  top: auto !important;
  right: auto !important;
  left: var(--objs-left, 16px) !important;
  bottom: var(--objs-bottom, 72px) !important;
  max-height: var(--objs-max, 60vh);
  overflow: auto;
  border: 2px solid #1f2937 !important;
  box-shadow: none !important;
  z-index: 7;
}
#objs.is-popover:not(.is-open) { display: none !important; }
#stage #views button.objs-toggle[aria-expanded="true"] { background: #1f2937 !important; color: #ffffff !important; border-color: #1f2937 !important; }
#stage #views button.objs-toggle[aria-expanded="true"] svg { stroke: #ffffff; }

/* Run verdict ("Oprit cu leziuni ușoare" …): bottom-right of the scene, framed
   like the other overlays, instead of floating top-centre over the worker. */
#stage .banner {
  top: auto !important;
  left: auto !important;
  right: 16px !important;
  bottom: 16px !important;
  transform: none !important;
  width: auto !important;
  max-width: min(440px, calc(100% - 32px));
  border: 2px solid #1f2937 !important;
  box-shadow: none !important;
  z-index: 5;
}
/* View controls as icons; label on hover/focus. */
.views button[data-tip] { position: relative; display: inline-grid; place-items: center; width: 40px; height: 36px; padding: 0 !important; }
.views button[data-tip] svg { width: 19px; height: 19px; }
.views button[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 6px 8px; background: #1f2937; color: #ffffff; white-space: nowrap; pointer-events: none;
  font: 900 10px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transition: opacity 150ms ease; z-index: 8;
}
.views button[data-tip]:hover::after,
.views button[data-tip]:focus-visible::after { opacity: 1; }
/* Email popup: a compact centred card over a darkened scene. */
.report-access {
  inset: 0 !important;
  margin: auto !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 28px 28px 20px !important;
  border: 2px solid #1f2937 !important;
  background: #ffffff !important;
  overflow: auto;
}
.report-access::backdrop { background: rgba(17, 24, 39, .78) !important; backdrop-filter: blur(2px) !important; }
.access-card { position: relative; display: grid; gap: 14px; }
.access-card h2 {
  margin: 0; padding-right: 36px; color: #1f2937;
  font: 900 24px/1.05 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: -.01em;
}
.access-lead { margin: -4px 0 2px; color: #4b5563; font: 14px/1.5 'Inter', sans-serif; }
.access-card .access-close {
  position: absolute; top: -10px; right: -10px; width: 36px; height: 36px;
  border: 0; background: transparent; color: #1f2937; font-size: 24px; line-height: 1; cursor: pointer;
}
.access-card .access-close:hover { color: #fe4d01; }
.access-card .access-field input { padding: 14px; font: 16px 'Inter', sans-serif; }
.access-card .access-field input:focus { border-color: #fe4d01 !important; outline: 0; }
.access-captcha { min-height: 0; border: 0 !important; padding: 0 !important; background: none !important; }
.access-captcha:empty { display: none; }
.access-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  color: #374151; font: 13px/1.4 'Inter', sans-serif;
}
.access-check input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 20px; height: 20px; border: 2px solid #1f2937; background: #ffffff;
  display: grid; place-items: center; cursor: pointer;
}
.access-check input:checked { background: #fe4d01; border-color: #fe4d01; }
.access-check input:checked::after {
  content: ''; width: 10px; height: 6px; margin-top: -2px;
  border: solid #ffffff; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.access-card .access-error:empty { display: none; }
.access-card .access-error { margin: 0; color: #D32F2F; font: 600 13px/1.4 'Inter', sans-serif; }
.access-card .access-submit { width: 100%; padding: 16px; justify-content: center; font-size: 13px; }
.access-card .access-small { margin: 0; text-align: center; color: #9ca3af; font: 12px 'Inter', sans-serif; }
.access-card .access-small a { color: #6b7280; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus is never removed (DESIGN-SYSTEM.md, component states). */
:focus-visible { outline: 2px solid #fe4d01 !important; outline-offset: 3px; }