/* ─── COMPONENTS ─────────────────────────────────────────────────────────────
   Self-contained UI pieces: connection bar, checklist rows, checkboxes,
   badges, nav buttons, info panel internals.
   No state-driven overrides here — those live in states.css.
   ──────────────────────────────────────────────────────────────────────────── */


/* ── Procedure sidebar (tablet/desktop) ─────────────────────────── */

.proc-sidebar-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.proc-sidebar-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal-bright);
  margin-bottom: 2px;
}

.proc-sidebar-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.22);
}

.proc-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.proc-sidebar-list::-webkit-scrollbar {
  width: 2px;
}

.proc-sidebar-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
}

.proc-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.proc-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.proc-sidebar-item.active {
  background: rgba(34, 201, 160, 0.07);
  border-left-color: var(--color-teal-bright);
}

.proc-sidebar-item.done {
  opacity: 0.42;
}

.proc-sidebar-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.proc-sidebar-item.active .proc-sidebar-name {
  color: #fff;
}

.proc-sidebar-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.proc-sidebar-item.active .proc-sidebar-badge {
  color: var(--color-teal-bright);
  background: rgba(34, 201, 160, 0.12);
}

/* ── Procedure groups (picker) ──────────────────────────────────── */

.proc-group {
  padding-top: 4px;
}

.proc-group-header {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  padding: 10px 16px 5px;
  /* reset button defaults — header is now a collapse toggle */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.proc-group-header:hover {
  color: rgba(255, 255, 255, 0.5);
}

.proc-group-label {
  flex: 1;
  min-width: 0;
}

.proc-group-summary {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.04em;
}

.proc-group-chevron {
  font-size: 9px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.3);
  transition: transform var(--transition-fast);
}

.proc-group.is-collapsed .proc-group-chevron {
  transform: rotate(-90deg);
}

.proc-group.is-collapsed .proc-group-body {
  display: none;
}

.proc-group--emergency .proc-group-header {
  color: var(--color-red);
}

.proc-group--emergency .proc-group-summary,
.proc-group--emergency .proc-group-chevron {
  color: rgba(201, 64, 64, 0.6);
}

.proc-group--emergency .proc-sidebar-item {
  border-left-color: rgba(201, 64, 64, 0.35);
}

/* Suggested: a firing show_rule highlights the item (amber, distinct from teal active) */
.proc-sidebar-item.suggested {
  background: rgba(245, 166, 35, 0.08);
  border-left-color: var(--color-amber);
}

.proc-sidebar-item.suggested .proc-sidebar-name {
  color: #fff;
}

.proc-sidebar-item.suggested .proc-sidebar-name::after {
  content: '●';
  color: var(--color-amber);
  font-size: 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Suggestion banner (detail page) ────────────────────────────── */

/* Overlays the top of .proc-header rather than sitting in the flex column.
   Showing/hiding it must never change the height of .checklist-scroll, or the
   pilot's scroll position shifts every time a rule flaps. Left inset on mobile
   keeps the .proc-menu-toggle (☰) tappable while the banner is up. */
.suggest-banner {
  position: absolute;
  top: 0;
  left: 48px;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  /* Opaque — the header sits underneath and must not bleed through */
  background: #FEF4E4;
  border-bottom: 1px solid rgba(245, 166, 35, 0.4);
  border-bottom-left-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.suggest-banner:hover {
  background: #FDEFD7;
}

.suggest-banner-icon {
  color: var(--color-amber);
  flex-shrink: 0;
}

.suggest-banner-text {
  flex: 1;
  min-width: 0;
}

.suggest-banner-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  flex-shrink: 0;
}


/* ── Connection bar ─────────────────────────────────────────────── */

.conn-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sim-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-ink-muted);
  flex-shrink: 0;
}

.conn-status-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
}

.conn-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conn-aircraft {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.08em;
}

.info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 600;
  user-select: none;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.info-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
}


/* ── Procedure header ───────────────────────────────────────────── */

.proc-phase {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-teal-mid);
  margin-bottom: 3px;
}

.proc-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.proc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}

.proc-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

.progress-bar {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-teal-bright);
  border-radius: 2px;
  width: 0%;           /* overridden per-page via inline style="--pct:X%" */
}


/* ── Section label (Completed / Remaining) ─────────────────────── */

.section-label {
  padding: 10px 20px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}


/* ── Checklist item row ─────────────────────────────────────────── */

.ci {
  background: var(--color-card);
  margin: 3px 10px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ci:hover {
  border-color: var(--color-border-mid);
}

.ci-inner {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px 10px 13px;
}


/* ── Checkbox ───────────────────────────────────────────────────── */

.check-box {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid var(--color-border-mid);
  background: var(--color-card);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}


/* ── Item text ──────────────────────────────────────────────────── */

.ci-content {
  flex: 1;
  min-width: 0;
}

.ci-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci-setting {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Right-side badges ──────────────────────────────────────────── */

.ci-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  margin-left: var(--space-2);
}

/* Attribute badge — background-color is set inline (data-driven per-attribute) */
.badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #fff;
}

/* Role badge (PF / PM / C / FO) */
.badge-role {
  background: rgba(17, 23, 20, 0.07);
  color: var(--color-ink-mid);
}


/* ── Nav bar ────────────────────────────────────────────────────── */

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--color-border-mid);
  background: transparent;
  color: var(--color-ink-mid);
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-btn:hover {
  background: var(--color-border);
}

.nav-btn-primary {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  color: #fff;
}

.nav-btn-primary:hover {
  background: var(--color-teal-mid);
  border-color: var(--color-teal-mid);
  color: #fff;
}

.nav-btn {
  align-self: center;
}



/* ── Info panel internals ───────────────────────────────────────── */

.info-panel-header {
  padding: 48px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.info-panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal-bright);
}

.info-panel-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
}

.info-section {
  padding: 18px 20px 0;
}

.info-section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  margin-bottom: 10px;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.info-row-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.32);
}

.info-row-value-action {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-red);
  cursor: pointer;
  background: none;
  border: none;
}


/* ── Legend (inside info panel) ─────────────────────────────────── */

.legend-section {
  padding: 18px 20px;
}

.legend-section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  margin-bottom: 12px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.legend-row:last-child {
  border-bottom: none;
}

.legend-box {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.legend-box-empty {
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.legend-box-manual {
  background: var(--color-teal-dark);
  border: 2px solid var(--color-teal-dark);
}

.legend-box-auto {
  background: var(--color-teal-dark);
  border: 2px solid var(--color-teal-dark);
}

.legend-box-auto::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
}

.legend-text {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.legend-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 1px;
  font-family: var(--font-mono);
}


/* ── Role toggle switches (inside info panel) ───────────────────── */

.toggle-section {
  padding: 18px 20px 0;
}

.toggle-section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  margin-bottom: 10px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.toggle-row:last-child {
  border-bottom: none;
}

.toggle-row-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

/* The native checkbox is hidden; the .switch-track is the visual */
.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.switch-track::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: left var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch-input:checked + .switch-track {
  background: var(--color-teal-mid);
}

.switch-input:checked + .switch-track::after {
  left: 19px;
}


/* Teal link inside info panel (Profile, Help) */
.info-link {
  color: var(--color-teal-bright);
  text-decoration: none;
}


/* ── Circular progress ring (tablet/desktop proc header) ────────── */

.progress-ring {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.progress-ring svg {
  transform: rotate(-90deg);
}

.progress-ring-bg {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 3;
}

.progress-ring-fill {
  fill: none;
  stroke: var(--color-teal-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 119.4;
  /* stroke-dashoffset set via JS style property so it isn't overridden by CSS */
  transition: stroke-dashoffset 0.4s ease;
}

.progress-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink);
}

/* Stats text alongside the ring */
.proc-stats {
  text-align: right;
}

.proc-stats-primary {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-ink-muted);
  margin-bottom: 4px;
}

.proc-stats-secondary {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-ink-faint);
}

/* Compact progress bar shown alongside ring on desktop */
.proc-mini-bar {
  height: 3px;
  width: 160px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
  margin-left: auto;
}

.proc-mini-bar-fill {
  height: 100%;
  background: var(--color-teal-bright);
  border-radius: 3px;
  width: 0%;
}


/* ── Flight info cards (sidebar, from SimBrief) ─────────────────── */

.flight-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.flight-info-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
}

.flight-info-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 2px;
}

.flight-info-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}


/* ── Conn-bar brand ─────────────────────────────────────────────── */
/* display/visibility is in layout.css (mobile-first hide + ≥600px show) */

.conn-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #fff;
  text-decoration: none;
}

.conn-brand img {
  display: block;
  flex-shrink: 0;
}

.conn-brand-flow {
  color: var(--color-teal-bright);
}

.conn-brand:hover {
  color: #fff;
}

.conn-brand:hover .conn-brand-flow {
  color: #fff;
}

.conn-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-teal-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.conn-logo:hover {
  background: var(--color-teal-mid);
}

.conn-logo + .conn-status-group {
  margin-left: 10px;
}

.conn-status-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.conn-sep {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.15);
}

.conn-route {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.06em;
}

.conn-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;   /* pushes (i) to the right on mobile */
}


/* ── Info panel footer ──────────────────────────────────────────── */

.info-footer {
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.16);
  text-align: center;
  margin-top: auto;
}


/* ── Auth link (connection bar) ─────────────────────────────────── */

.conn-auth-link {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.conn-auth-link:hover {
  color: rgba(255, 255, 255, 0.7);
}


/* ── Auth forms ─────────────────────────────────────────────────── */

/* Outer wrapper: centers content, constrains width */
.auth-shell {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* White section card */
.auth-card {
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 10px;
}

.auth-card + .auth-card {
  margin-top: 0;
}

/* Padded block inside a card; bottom border separates siblings */
.auth-card-section {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.auth-card-section:last-child {
  border-bottom: none;
}

/* Section label — reuses same rhythm as .proc-phase but lives in light context */
.auth-section-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-teal-mid);
  margin-bottom: 10px;
}

/* Preference hint text */
.auth-pref-hint {
  font-size: 12px;
  color: var(--color-text-dim);
  margin: 0 0 12px;
}

/* Input label */
.auth-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 5px;
  display: block;
}

/* Text / email / password input */
.auth-input {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-mid);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-ink);
  background: var(--color-bg);
  outline: none;
  margin-bottom: var(--space-3);
  display: block;
}

.auth-input:focus {
  border-color: var(--color-teal-dark);
}

.auth-input::placeholder {
  color: var(--color-ink-faint);
}

/* Primary button (full-width block) */
.auth-btn {
  display: block;
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: var(--color-teal-dark);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-bottom: var(--space-2);
  transition: background var(--transition-fast);
}

.auth-btn:last-child {
  margin-bottom: 0;
}

.auth-btn:hover {
  background: var(--color-teal-mid);
  color: #fff;
}

/* Outline modifier */
.auth-btn--outline {
  background: transparent;
  color: var(--color-ink-mid);
  border: 1.5px solid var(--color-border-mid);
  font-weight: 500;
}

.auth-btn--outline:hover {
  background: var(--color-bg);
  color: var(--color-ink-mid);
}

/* Danger modifier */
.auth-btn--danger {
  background: var(--color-danger);
  border: none;
}

.auth-btn--danger:hover {
  background: #a93226;
  color: #fff;
}

/* Checkbox + label row */
.auth-check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.auth-check-row input[type="checkbox"] {
  accent-color: var(--color-teal-dark);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.auth-check-row label {
  font-size: 12px;
  color: var(--color-ink-mid);
  font-family: var(--font-mono);
}

/* Centred link paragraph */
.auth-link-row {
  text-align: center;
  padding: 10px 0 4px;
  font-size: 12px;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
}

.auth-link-row a {
  color: var(--color-teal-dark);
  text-decoration: none;
}

/* "— or —" divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--space-2) 0;
}

.auth-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--color-border);
}

.auth-divider span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Small helper text below an input */
.auth-hint {
  font-size: 11px;
  color: var(--color-ink-muted);
  margin-top: -8px;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  line-height: 1.5;
}

/* Inline form validation errors */
.auth-errors {
  list-style: none;
  margin-bottom: var(--space-3);
}

.auth-errors li {
  font-size: 12px;
  color: var(--color-danger);
  font-family: var(--font-mono);
  padding: 2px 0;
}

/* Teal tint info notice */
.auth-notice {
  background: rgba(34, 201, 160, 0.08);
  border: 1.5px solid rgba(34, 201, 160, 0.25);
  border-left: 3px solid var(--color-teal-bright);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-teal-mid);
  font-family: var(--font-mono);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}

/* Red tint warning notice */
.auth-notice--warn {
  background: var(--color-danger-bg);
  border-color: rgba(192, 57, 43, 0.2);
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

/* Red-tint confirmation block (logout etc.) */
.auth-confirm {
  background: var(--color-danger-bg);
  border: 1.5px solid rgba(192, 57, 43, 0.18);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  margin-bottom: var(--space-3);
}

.auth-confirm-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
}

.auth-confirm p {
  font-size: 13px;
  color: var(--color-ink-mid);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}

.auth-confirm strong {
  color: var(--color-ink);
}

/* Circle avatar with initials */
.auth-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 auto var(--space-2);
  font-family: var(--font-mono);
}

.auth-avatar-name {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
}

.auth-avatar-email {
  text-align: center;
  font-size: 11px;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
}

/* Light-background detail rows (profile page) */
.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

.profile-row:last-child {
  border-bottom: none;
}

.profile-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
}

.profile-row-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-muted);
}

.profile-row-action {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-teal-dark);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: none;
}

/* Suppress bottom border on the last profile row (avoids double-line before card edge) */
.profile-row--last {
  border-bottom: none;
}

/* Avatar card: extra vertical padding + centred content */
.auth-avatar-section {
  text-align: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Delete account button: outline style with danger tint */
.auth-btn--delete {
  color: var(--color-danger);
  border-color: rgba(192, 57, 43, 0.3);
  font-size: 12px;
}

.auth-btn--delete:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Notice with no bottom margin (last item in a card section) */
.auth-notice--flush {
  margin-bottom: 0;
}

/* Hint that appears above an input (reset-password description) */
.auth-hint--top {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* ── SimBrief inline edit (<details> / <summary>) ───────────────── */

/* summary carries .profile-row for spacing/border — no extra border needed here */
.auth-simbrief-edit {
  display: block;
}

/* summary styled identically to every other profile-row */
.auth-simbrief-edit > summary {
  cursor: pointer;
  user-select: none;
}

/* Hide the default disclosure triangle in all browsers */
.auth-simbrief-edit > summary::-webkit-details-marker {
  display: none;
}

.auth-simbrief-edit > summary::marker {
  display: none;
}

/* Right side of summary: value + "edit" action side by side */
.auth-simbrief-summary-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Mini-form revealed when <details> is open */
.auth-simbrief-form {
  padding: var(--space-2) 0 var(--space-3);
}


/* ── Flight setup / profile page ────────────────────────────────────── */

/* Scrollable outer shell for the profile page */
.profile-scroll {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 10px;
  background: var(--color-bg);
}

.profile-scroll::-webkit-scrollbar { width: 3px; }
.profile-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border-mid);
  border-radius: 3px;
}

/* ── Setup card ─────────────────────────────────────────────── */
.setup-card {
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

.setup-card-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-teal-mid);
  padding: 11px 13px 9px;
  border-bottom: 1px solid var(--color-border);
}

/* ── Login nudge card ───────────────────────────────────────── */
.nudge-card {
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-left: 3px solid var(--color-teal-bright);
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 8px;
}

.nudge-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.nudge-desc {
  font-size: 12px;
  color: var(--color-ink-mid);
  line-height: 1.5;
  margin-bottom: 10px;
}

.nudge-actions {
  display: flex;
  gap: 7px;
}

.nudge-btn {
  flex: 1;
  padding: 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: center;
  border: 1.5px solid var(--color-border-mid);
  color: var(--color-ink-mid);
  background: transparent;
  text-decoration: none;
  display: block;
}

.nudge-btn--primary {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  color: #fff;
}

/* ── SimBrief row (input + button) ──────────────────────────── */
.simbrief-row {
  display: flex;
  gap: 7px;
  padding: 11px 13px 11px;
}

.simbrief-input {
  flex: 1;
  padding: 9px 11px;
  border-radius: 7px;
  border: 1.5px solid var(--color-border-mid);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-ink);
  background: var(--color-bg);
}

.simbrief-btn {
  padding: 9px 13px;
  border-radius: 7px;
  background: var(--color-teal-dark);
  color: white;
  border: none;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}

.simbrief-error {
  padding: 0 13px 11px;
  font-size: 12px;
  color: var(--color-danger);
}

/* ── SimBrief data grid ─────────────────────────────────────── */
.simbrief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 0 13px 13px;
}

.simbrief-cell {
  background: var(--color-bg);
  border-radius: 7px;
  padding: 8px 10px;
}

.simbrief-cell-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 2px;
}

.simbrief-cell-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

/* ── Attribute toggle rows ──────────────────────────────────── */
.attr-row {
  display: flex;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid var(--color-border);
  gap: 11px;
  cursor: pointer;
}

.attr-row:last-child {
  border-bottom: none;
}

/* Hide the real checkbox, keep it accessible */
.attr-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Toggle pill */
.attr-toggle-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.attr-toggle {
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-border-mid);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.attr-toggle::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.attr-checkbox:checked + .attr-toggle {
  background: var(--color-teal-mid);
}

.attr-checkbox:checked + .attr-toggle::after {
  left: 19px;
}

.attr-info {
  flex: 1;
}

.attr-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

.attr-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-teal-mid);
  background: rgba(26, 138, 108, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 400;
}

.attr-desc {
  font-size: 11px;
  color: var(--color-ink-mid);
  margin-top: 1px;
  display: block;
}

/* ── Profile action buttons ─────────────────────────────────── */
.profile-actions {
  display: flex;
  gap: 7px;
  margin-top: 2px;
  margin-bottom: 8px;
}

.profile-btn {
  flex: 1;
  padding: 11px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border-mid);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--color-ink-mid);
  text-align: center;
}

.profile-btn--primary {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  color: white;
}


/* ── Topbar: avatar and login pill ──────────────────────────────── */

.conn-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.conn-avatar:hover {
  background: var(--color-teal-mid);
}

.conn-login-pill {
  height: 26px;
  padding: 0 12px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.conn-login-pill:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.9);
}


/* ── Topbar: flight meta items (Rwy / Temp / Flaps) ─────────────── */

.conn-meta {
  display: none;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.conn-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.conn-meta-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
}

.conn-meta-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  margin-top: 1px;
}

@media (min-width: 900px) {
  .conn-meta {
    display: flex;
  }
}


/* ── Page header (setup / account pages) ────────────────────────── */

.page-header {
  margin-bottom: 28px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.page-header p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-ink-muted);
}


/* ── Card ────────────────────────────────────────────────────────── */

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}

/* Card spacing modifiers. These exist so profile.html does not need inline
   styles — CLAUDE.md allows exactly one, background-color on attribute badge
   buttons, and these four were the only violations left. */
.card--flush {
  margin-bottom: 0;
}

.card--spaced {
  margin-top: 20px;
}

/* A form that must not break the line it sits on — used to put a submit
   button inline with surrounding text. */
.form-inline {
  display: inline;
}

.card-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header--bordered {
  border-top: 1px solid var(--color-border);
}

.card-header-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}

.card-body {
  padding: 20px;
}

.card-save-row {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
}

.card-save-row .btn-setup-primary {
  width: 100%;
  justify-content: center;
}


/* ── OFP data grid ───────────────────────────────────────────────── */

.ofp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 14px;
}

.ofp-cell {
  background: var(--color-bg);
  padding: 10px 14px;
}

.ofp-cell-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 3px;
}

.ofp-cell-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: 0.03em;
}

.ofp-accent {
  color: var(--color-teal-dark);
}

@media (max-width: 680px) {
  .ofp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ── OFP mismatch banner ─────────────────────────────────────────── */

.ofp-mismatch-banner {
  background: rgba(220, 150, 0, 0.08);
  border: 1px solid rgba(220, 150, 0, 0.35);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.ofp-mismatch-text {
  font-size: 13px;
  color: var(--color-ink);
  line-height: 1.5;
}

.ofp-mismatch-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Toggle list (light-background cards) ───────────────────────── */

.toggle-list {
  display: flex;
  flex-direction: column;
}

.card .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.card .toggle-row:last-child {
  border-bottom: none;
}

.card .toggle-row:hover {
  background: var(--color-bg);
}

.toggle-info {
  flex: 1;
  padding-right: 16px;
}

.toggle-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

.toggle-desc {
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: 2px;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-border-mid);
  border-radius: 99px;
  transition: background 0.2s;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.toggle-switch input:checked + .toggle-track {
  background: var(--color-teal-dark);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(20px);
}


/* ── Setup footer actions ────────────────────────────────────────── */

.setup-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 12px;
  padding-bottom: 4px;
}

.btn-setup-secondary {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  background: var(--color-card);
  color: var(--color-ink);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.btn-setup-secondary:hover {
  border-color: var(--color-teal-mid);
}

.btn-setup-primary {
  height: 44px;
  padding: 0 28px;
  background: var(--color-teal-dark);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition-fast);
}

.btn-setup-primary:hover {
  background: var(--color-teal-mid);
}


/* ── Account / Profile page ──────────────────────────────────────── */

.profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.profile-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.profile-hero-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-ink);
}

.profile-hero-email {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: 2px;
}

.account-fields {
  display: flex;
  flex-direction: column;
}

.account-field {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

.account-field--last {
  border-bottom: none;
}

.field-label {
  font-size: 13px;
  color: var(--color-ink-muted);
  width: 100px;
  flex-shrink: 0;
}

.field-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  flex: 1;
}

.field-action-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-teal-dark);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.field-action-link:hover {
  color: var(--color-teal-mid);
}

.account-field-details {
  display: block;
  border-bottom: 1px solid var(--color-border);
}

.account-field-details > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.account-field-details > summary::-webkit-details-marker { display: none; }
.account-field-details > summary::marker { display: none; }

.account-field-edit {
  padding: 10px 20px 14px;
}

.account-field-edit .auth-input {
  margin-bottom: var(--space-2);
}

.pref-hint {
  font-size: 12px;
  color: var(--color-ink-muted);
  padding: 10px 20px 0;
}

.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 12px;
}

.btn-ghost {
  height: 40px;
  padding: 0 20px;
  background: transparent;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn-ghost:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

.btn-danger {
  height: 40px;
  padding: 0 20px;
  background: transparent;
  color: var(--color-danger);
  border: 1px solid rgba(192, 57, 43, 0.3);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-danger:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}


/* ── Reset procedure button ──────────────────────────────────────── */

.btn-reset-proc {
  height: 28px;
  padding: 0 12px;
  background: transparent;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn-reset-proc:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

/* ── X-Plane connected banner ────────────────────────────────────── */

.xplane-banner {
  background: rgba(15, 107, 84, 0.07);
  border: 1px solid rgba(15, 107, 84, 0.22);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.xplane-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-teal-bright);
  box-shadow: 0 0 6px var(--color-teal-bright);
  flex-shrink: 0;
  animation: sim-pulse 2s infinite;
}

.xplane-banner-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-teal-dark);
  font-weight: 500;
}

.xplane-banner-text span {
  color: var(--color-ink-muted);
  font-weight: 400;
}

/* API Key card */
.api-key-body {
  padding: 10px 20px 14px;
}

.api-key-warning {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-amber);
  margin: 0 0 10px;
}

.api-key-display {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt, var(--color-surface));
  color: var(--color-ink);
  cursor: text;
  box-sizing: border-box;
}

.api-key-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ── Attribute transition modal ──────────────────────────────────── */

.attr-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(13, 21, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.attr-modal.js-hidden { display: none; }

.attr-modal-box {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

.attr-modal-header {
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.attr-modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
}

.attr-modal-body {
  padding: var(--space-4) var(--space-6);
}
.attr-modal-intro {
  font-size: 0.875rem;
  color: var(--color-ink-mid);
  margin: 0 0 var(--space-4);
}

.attr-prompt-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.attr-prompt-row:last-child { border-bottom: none; }

.attr-prompt-msg {
  font-size: 0.875rem;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.attr-prompt-choices {
  display: flex;
  gap: var(--space-5);
}
.attr-prompt-choices label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-ink-mid);
  cursor: pointer;
}
.attr-prompt-choices input[type="radio"] {
  accent-color: var(--color-teal-mid);
}

.attr-modal-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
}

/* ── Debug: rule evaluator panel (DEBUG mode only) ──────────────── */

.debug-section {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
}

.debug-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: var(--space-3);
}

.debug-group-title {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  margin: var(--space-3) 0 var(--space-2);
}

.debug-item {
  margin-bottom: var(--space-3);
}

.debug-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.debug-item-name {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
}

.debug-tag-gate  { background: rgba(255, 160, 50, 0.15); color: #ffa032; }
.debug-tag-opt   { background: rgba(255, 255, 255, 0.06); color: var(--color-ink-dim); }
.debug-tag-warn  { background: rgba(255, 80, 80, 0.15); color: #ff6060; }

.debug-cond {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  gap: 4px var(--space-2);
  align-items: baseline;
  padding: 2px 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
}

.debug-dr {
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-expr   { color: rgba(255, 255, 255, 0.35); white-space: nowrap; }
.debug-actual { color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.debug-coords { grid-column: 2 / -1; color: rgba(255, 255, 255, 0.30); font-size: 0.625rem; }

.debug-pass { color: #4ade80; font-style: normal; }
.debug-fail { color: #f87171; font-style: normal; }

/* ── Idle page live value cards ────────────────────────────────────────── */

.idle-live-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
}

.idle-value-card {
  background: var(--color-surface-2, rgba(255,255,255,0.06));
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.idle-value-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-dim);
}

.idle-value-number {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1;
}

.idle-value-unit {
  font-size: 0.75rem;
  color: var(--color-ink-dim);
}

/* ── Idle page "What's next?" procedure suggestions ─────────────────────── */

.idle-next {
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.idle-next-heading {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.idle-next-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.idle-next-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.idle-next-btn:hover {
  background: var(--color-checked-bg);
  border-color: var(--color-teal-bright);
}

.idle-next-btn--conditional {
  border-color: var(--color-amber);
}

.idle-next-arrow {
  color: var(--color-ink-muted);
}

/* ── Item properties popover (dev shortcut: Ctrl+Shift+click a row) ── */
.iprops-pop {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  background: var(--color-dark);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: var(--space-2);
  font-family: var(--font-sans);
  font-size: 13px;
}

.iprops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  padding: 0 var(--space-1) var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: var(--space-1);
}

.iprops-close {
  background: none;
  border: none;
  color: var(--color-ink-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}

.iprops-close:hover {
  color: #FFFFFF;
}

.iprops-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 3px var(--space-1);
}

.iprops-key {
  color: var(--color-ink-faint);
}

.iprops-val {
  font-family: var(--font-mono);
}

.iprops-copy {
  cursor: pointer;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}

.iprops-copy:hover {
  color: var(--color-teal-bright);
}


/* ── Plugin update notice ───────────────────────────────────────── */
/* Sits flush under the conn-bar rather than inside it: .conn-bar is a flex
   row whose layout is re-asserted at 600px and 900px, so making it a column
   wrapper to hold a second child would fight both media queries. */
.conn-update {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--color-amber);
  color: var(--color-dark);
  font-size: 0.8125rem;
  line-height: 1.3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* A blocked plugin is not an optional update — the server refuses it session
   data, so the checklist cannot follow the sim at all. */
.conn-update-blocked {
  background: var(--color-danger);
  color: #fff;
}

.conn-update-text {
  flex: 1;
  min-width: 0;
}

.conn-update-link {
  flex-shrink: 0;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.conn-update-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.8;
}

.conn-update-close:hover {
  opacity: 1;
}

@media (min-width: 900px) {
  .conn-update {
    padding: 7px 24px;
  }
}