/* Science Simulation Chrome — normalized visual layer
 *
 * Loaded into every G7-G8 simulator via fix:sim-chrome. Paired with
 * sim-chrome.js (runtime structural normalizer). The CSS targets ONLY
 * .kams-sim-* selectors so it never collides with per-sim bespoke
 * styling. Authored against the CDG §7.3 "sim-first" standard:
 *   (a) one non-scrolling surface,
 *   (b) standardized chrome,
 *   (c) phenomenon center-stage.
 *
 * See LESSONS-LEARNED entry #25 (May 2026) for the fleet-chrome audit
 * that informed this design (95% of sims already had the structure;
 * the shell normalizes existing markup rather than creating new).
 */

/* Skip-link: visible only on focus, sits above all sim content.
 * Required by WCAG 2.1 SC 2.4.1 (Bypass Blocks). Standardizes the
 * 5 fleet variants (#simulation / #sim-main / #main-content /
 * #sim-canvas / missing) onto a single keyboard-entry pattern. */
.kams-sim-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: #1f2937;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 6px 0;
}
.kams-sim-skip:focus {
  left: 0;
  outline: 3px solid #fbbf24;
  outline-offset: 0;
}

/* Header bar: title left, reset right. Adopts whatever <h1> already
 * exists; injects nothing if the sim is bare (Family D — handled by
 * the fixer's content-wrap path). */
.kams-sim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;           /* narrow widths: the reset wraps below, never overflows */
  padding: 12px 20px;
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
  color: #fff;
  border-bottom: 1px solid #1e3a8a;
}
.kams-sim-header h1,
.kams-sim-header > [data-sim-title] {
  margin: 0;
  font-size: 1.25em;
  font-weight: 700;
  color: inherit;
  line-height: 1.3;
  flex: 1 1 12em;           /* grow, but a real basis so a long title isn't crushed to 0 */
  min-width: 0;            /* let the title shrink/wrap instead of forcing overflow */
}
/* A subtitle the normalizer left as a header sibling (e.g. <p class="subtitle">)
 * flows onto its own line under the title rather than competing with the reset
 * button for space as a third flex item on the same row. */
.kams-sim-header > p,
.kams-sim-header > .subtitle {
  flex: 1 1 100%;
  order: 1;
  margin: 0;
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.82;
  color: inherit;
}
.kams-sim-header [data-sim-reset] {
  flex: 0 0 auto;
  width: auto;              /* override a per-sim reset rule like .reset-btn { width: 100% } */
  max-width: 100%;
  margin: 0;                /* override a per-sim margin (e.g. margin-top) the flex row inherits */
  white-space: nowrap;      /* keep the label on one line */
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.15s;
}
.kams-sim-header [data-sim-reset]:hover,
.kams-sim-header [data-sim-reset]:focus {
  background: rgba(255, 255, 255, 0.3);
  outline: 2px solid #fbbf24;
  outline-offset: 1px;
}

/* Telemetry badge: appears next to the title when SimTelemetry is
 * present and tracking. Silent if telemetry isn't wired. */
.kams-sim-telemetry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 500;
  opacity: 0.85;
}

/* Canonical semantics for authored journals/prompts. Visual authorship stays
 * local to each simulation; these rules only guarantee usable focus and
 * touch targets across the fleet. */
.kams-sim-chrome-applied [data-sim-journal] > summary { cursor: pointer; min-height: 44px; }
.kams-sim-chrome-applied [data-sim-journal] :is(button, input, select, textarea) { min-height: 44px; }
.kams-sim-chrome-applied [data-sim-prompt] { scroll-margin-block: 12px; }

/* Focus ring normalization — all focusable elements get the same
 * visible ring. Eliminates the "is this focused?" guessing across
 * 42 sims with their own focus styles. */
.kams-sim-chrome-applied
  :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

/* Narrow-screen content fit. On phones a wide data table (or a fixed-width
 * media block) used to clip its last column or force the whole page to scroll
 * sideways. Scope is ≤700px so desktop layout is untouched; the table becomes
 * its own horizontal scroll container (the standard responsive-table pattern)
 * and replaced media never exceeds the viewport. */
@media (max-width: 700px) {
  .kams-sim-chrome-applied table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Raster images never exceed the viewport (they carry an intrinsic ratio, so
   * width-capping can't distort them). svg/canvas/video are left alone — a sim
   * may size its drawing surface in fixed pixels and a width cap would squash it. */
  .kams-sim-chrome-applied img {
    max-width: 100%;
  }
}