/* Design tokens (--bg, --panel, --accent, --danger, ...) come from theme.css,
   which is loaded before this file. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--app-bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------- top bar ---------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--app-bg) 82%, transparent);
  backdrop-filter: blur(6px);
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; font-size: 15px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.icon-btn:hover { border-color: var(--accent); }
.brand { display: flex; align-items: center; gap: 14px; }
.logo { font-size: 30px; }
.topbar h1 { margin: 0; font-size: 22px; letter-spacing: 1px; }
.tagline { margin: 0; font-size: 12px; color: var(--muted); }

.topbar-right { display: flex; align-items: center; gap: 22px; }
.docs-link {
  color: var(--accent); text-decoration: none; font-weight: 600; font-size: 13px;
  border: 1px solid var(--border); padding: 7px 13px; border-radius: 8px;
  background: var(--panel-2); white-space: nowrap;
}
.docs-link:hover { border-color: var(--accent); }

.stats { display: flex; gap: 22px; }
.stat { text-align: right; }
.stat .v { font-size: 18px; font-weight: 600; color: var(--accent); }
.stat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* ---------------- layout ---------------- */
.layout { flex: 1; display: flex; min-height: 0; }

.sidebar {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 16px;
  border-right: 1px solid var(--border);
  background: var(--panel);
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 14px;
  padding: 10px 12px 12px;
}
legend { color: var(--accent-2); font-size: 13px; padding: 0 6px; font-weight: 600; }

/* Fieldset section toggles: plain legend text on desktop (the collapse
   behaviour is a mobile-only progressive enhancement wired by app.js). */
.fs-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: inherit; color: inherit;
  text-align: inherit; cursor: default;
}
.fs-chevron { display: none; }
.fs-body[hidden] { display: none; }

label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; margin-bottom: 8px; }
.lbl { display: inline-flex; align-items: center; gap: 5px; }

/* info "!" icon + tooltip */
.ti {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex-shrink: 0; vertical-align: middle;
  cursor: help; user-select: none; color: var(--accent); opacity: 0.85;
}
.ti svg { width: 15px; height: 15px; display: block; pointer-events: none; }
.ti:hover, .ti:focus { opacity: 1; color: var(--accent); outline: none; filter: drop-shadow(0 0 3px rgba(77, 208, 225, 0.6)); }

#tip {
  position: fixed; z-index: 1000; display: none; opacity: 0;
  max-width: 240px; padding: 9px 11px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--accent); border-radius: 8px;
  font-size: 12px; line-height: 1.5; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  transition: opacity 0.12s ease;
}
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.row { display: flex; gap: 10px; }
.row.three label { flex: 1; }
.row label { flex: 1; }

input, select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
.hint { font-size: 11px; color: var(--muted); margin: 2px 0 8px; line-height: 1.4; }

#run-btn {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #06101f;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: .5px;
}
#run-btn:disabled { opacity: .6; cursor: progress; }
.error { color: var(--danger); font-size: 12px; min-height: 16px; margin: 8px 0 0; }

/* ---------------- content ---------------- */
.content { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.content:focus { outline: none; } /* programmatic focus target after a mobile run */
.back-to-form { display: none; } /* mobile-only results -> form shortcut */
.tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--border); }
.tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 13px;
}
.tab.active { color: var(--text); background: var(--panel); border-color: var(--border); }

.panel { display: none; flex: 1; min-height: 0; padding: 12px; }
.panel.active { display: flex; flex-direction: column; }
.plot { flex: 1; min-height: 0; }

#access.panel.active { flex-direction: column; }
#plot-access { flex: 2; }
.access-table-wrap { flex: 1; overflow: auto; margin-top: 8px; }
.access-table-wrap h3 { margin: 6px 0; font-size: 14px; color: var(--accent-2); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); text-transform: uppercase; font-size: 11px; }

.placeholder {
  position: absolute; inset: 44px 0 0 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); pointer-events: none;
}
.placeholder.hidden { display: none; }

/* ---------------- language switcher ---------------- */
.lang-switcher { display: inline-flex; }
.lang-select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; font-size: 13px; cursor: pointer;
}
.lang-select:hover { border-color: var(--accent); }

/* ---------------- keyboard focus ---------------- */
/* Visible focus ring for the simulator's interactive controls, reusing the
   shared --ring token from theme.css (WCAG 2.1 AA focus visibility). */
.tab:focus-visible,
#run-btn:focus-visible,
.fs-toggle:focus-visible,
.back-to-form:focus-visible,
.ti:focus-visible,
.docs-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---------------- right-to-left (Arabic) ---------------- */
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .stat { text-align: left; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
/* Keep numeric and date fields left-to-right so values read correctly. */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="text"] { direction: ltr; text-align: left; }

/* =====================================================================
   Responsive: collapse the desktop two-pane tool into a single scrolling
   column on phones and small tablets (<= 768px). The form stacks above the
   plots, fieldsets become collapsible sections (wired by app.js), the run
   button sticks to the bottom edge, and the plot panels get an explicit
   height because the page now scrolls (flex:1 has no fixed parent height
   once the body height lock is released). Desktop (>= 769px) keeps the
   original two-column workspace untouched.
   ===================================================================== */
@media (max-width: 768px) {
  /* Release the viewport lock so the page can scroll on touch devices.
     100vh is the below-baseline fallback that must precede 100dvh. */
  body { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }

  /* Top bar wraps; keep it pinned for quick access to nav + run results. */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px;
  }
  .tagline { display: none; }
  .topbar h1 { font-size: 19px; }
  .topbar-right { gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
  .docs-link { padding: 6px 10px; font-size: 12.5px; }

  /* Post-run stats wrap onto extra rows; before a run they occupy no height. */
  .stats { gap: 12px 16px; flex-wrap: wrap; }
  .stats:empty { display: none; }

  /* Stack the form above the plot area; both span the full width. */
  .layout { flex-direction: column; min-height: 0; }
  .sidebar {
    width: 100%; max-height: none; overflow: visible;
    border-inline-end: none; border-block-end: 1px solid var(--border);
  }
  [dir="rtl"] .sidebar { border-left: none; border-bottom: 1px solid var(--border); }

  /* Collapsible fieldsets: the legend button becomes a full-width tappable
     header with a rotating chevron; app.js drives [hidden]/aria-expanded. */
  legend { width: 100%; }
  .fs-toggle {
    width: 100%; min-height: 44px;
    justify-content: space-between; cursor: pointer;
  }
  .fs-chevron { display: inline-flex; transition: transform 0.15s ease; }
  .fs-toggle[aria-expanded="false"] .fs-chevron { transform: rotate(-90deg); }
  [dir="rtl"] .fs-toggle[aria-expanded="false"] .fs-chevron { transform: rotate(90deg); }
  fieldset.fs-collapsed { padding-block-start: 0; padding-block-end: 0; }

  /* The run action stays reachable at every scroll position of the form. */
  #run-btn {
    position: sticky; inset-block-end: 0; z-index: 20;
    min-height: 44px;
    padding-block-end: max(11px, env(safe-area-inset-bottom));
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.25);
  }
  /* Focused fields scroll clear of the sticky run action. */
  #sim-form input, #sim-form select { scroll-margin-block-end: 72px; }

  /* Results navigation: back-to-form shortcut + scroll offsets that clear
     the sticky top bar when app.js scrolls either region into view. */
  .back-to-form {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; margin: 10px 14px 0; padding: 8px 14px;
    background: var(--panel-2); color: var(--accent);
    font-weight: 600; font-size: 13px;
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  }
  .content { scroll-margin-block-start: 64px; }
  #sim-form { scroll-margin-block-start: 64px; }

  /* Tabs scroll horizontally instead of overflowing the screen. */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tab { white-space: nowrap; flex-shrink: 0; }

  /* Give the active plot real height in the scrolling column. */
  .panel.active { min-height: 70vh; }
  .plot { min-height: 64vh; }
  #plot-access { min-height: 48vh; }

  /* Access windows stay legible: horizontal overflow is scoped to the table
     container so the document body never scrolls sideways. */
  .access-table-wrap { overflow-x: auto; }
  #access-table th, #access-table td { white-space: nowrap; }

  /* 16px inputs stop iOS Safari from auto-zooming on focus. */
  input, select, .lang-select { font-size: 16px; }
}

@media (max-width: 560px) {
  .topbar { padding: 9px 12px; }
  .brand { gap: 9px; }
  .topbar h1 { font-size: 17px; }
  .logo svg { width: 26px; height: 26px; }
  .docs-link { padding: 5px 9px; }
  .tab { padding: 10px 14px; }
  /* Multi-input rows stack so each field spans the full column width. */
  .row, .row.three { flex-direction: column; gap: 0; }
  .panel.active { min-height: 60vh; }
  .plot { min-height: 56vh; }
}

/* Comfortable 44px targets on touch devices (WCAG 2.5.5 / pointer: coarse),
   matching the portal-wide convention in theme.css. */
@media (pointer: coarse) {
  /* Expand the tiny info-icon hit area without disturbing the 15px glyph. */
  .ti::after { content: ""; position: absolute; inset: -15px; }
  .tab { min-height: 44px; }
  .docs-link { min-height: 44px; display: inline-flex; align-items: center; }
  #sim-form input, #sim-form select { min-height: 44px; font-size: 16px; }
  #sim-form label.check { min-height: 44px; }
  #sim-form .check input[type="checkbox"] { min-height: 0; width: 22px; height: 22px; }
}

/* Honor the reduced-motion preference for the motion this page introduces. */
@media (prefers-reduced-motion: reduce) {
  .fs-chevron { transition: none; }
  #tip { transition: none; }
}