/* ==========================================================================
   MGT2E DATAPAD — Base: tokens, reset, shell
   Hard-sci-fi glass UI: grid metrics, sharp borders, ice-blue + orange.

   Stylesheets (loaded in this order by index.html):
     base.css        tokens, reset, utilities, shell (top bar, viewport)   @layer base
     components.css  parts shared by the modules                          @layer components
     manifest.css / database.css / protocol.css  one per module           @layer modules
     reader.css      the rulebook reader's panel                          @layer modules
     keyboard.css    the on-screen keyboard                               @layer components
     forms.css       field messages and open lists (code/forms.js)        @layer components
   The layer order below decides which rule wins, not the file order: modules > components > base.
   ========================================================================== */

@layer base, pdfjs, components, modules; /* pdfjs: the rulebook reader's PDF.js styles (reader-pdf.css) */

@layer base {

  /* ---------- 1. Design tokens ---------- */
  :root {
    /* Palette */
    --c-void:          #03060b;
    --c-ice:           #7fd8ff;
    --c-ice-bright:    #c4efff;
    --c-ice-dim:       #3a7a99;
    --c-orange:        #ff8a1f;
    --c-red:           #ff4545;
    --c-green:         #5ee69a;
    --c-text:          #d6ecf7;
    --c-text-muted:    #6f8fa3;

    /* Glass */
    --glass-bg:        rgba(12, 28, 44, 0.42);
    --glass-bg-strong: rgba(8, 20, 34, 0.72);
    --glass-border:    rgba(127, 216, 255, 0.22);
    --glass-border-hi: rgba(127, 216, 255, 0.55);
    --glass-blur:      14px;
    --glass-sat:       140%;

    /* Surfaces and washes */
    --wash-ice:        rgba(127, 216, 255, 0.05);  /* resting button / card fill */
    --wash-hover:      rgba(127, 216, 255, 0.06);  /* row and nav hover */
    --wash-hover-hi:   rgba(127, 216, 255, 0.14);  /* button and card hover */
    --wash-active:     rgba(127, 216, 255, 0.16);  /* selected row */
    --wash-orange:     rgba(255, 138, 31, 0.12);
    --wash-danger:     rgba(255, 69, 69, 0.1);
    --line-faint:      rgba(127, 216, 255, 0.06);  /* list item separators */
    --line-soft:       rgba(127, 216, 255, 0.12);  /* separators inside the top bar */
    --well:            rgba(0, 0, 0, 0.3);         /* inputs, gauges, stat boxes */
    --surface-raised:  rgba(8, 20, 34, 0.94);      /* popovers, panels floating over content */
    --surface-solid:   rgba(8, 20, 34, 0.98);
    --scrim:           rgba(3, 6, 11, 0.45);       /* behind dialogs and card panels */
    --shadow-drop:     0 12px 24px rgba(0, 0, 0, 0.4);

    /* Glow */
    --glow-ice:        0 0 12px rgba(127, 216, 255, 0.35);
    --glow-orange:     0 0 10px rgba(255, 138, 31, 0.55);

    /* Typography (system-available, no external fetch — self-hosted friendly) */
    --font-ui:   "Bahnschrift", "Rajdhani", "Eurostile", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
    --font-mono: "Cascadia Mono", "JetBrains Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;
    --fs-xs:     0.68rem;
    --fs-sm:     0.8rem;
    --fs-md:     0.95rem;
    --fs-lg:     1.4rem;
    --tracking:  0.16em;

    /* Layout */
    --topbar-h:  64px;
    --gap:       12px;
    --pad:       20px;
    --grid-cell: 32px;
    --bar-h:     61px;          /* header bar height (.bar) */
    --control-h: 36px;          /* buttons and search boxes in a bar */
    /* Space kept clear of camera cutouts when installed fullscreen (0 where the screen has none) */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    /* Widest the left third (index / ships) may grow: its width on a 1280px-wide (720p) screen */
    --left-col-max:  calc((1280px - 2 * var(--pad) - var(--gap)) / 3);
    /* The 1/3 + 2/3 module grid (.split, .mf) */
    --split-cols: minmax(0, min(calc((100% - var(--gap)) / 3), var(--left-col-max))) minmax(0, 1fr);

    /* Motion */
    --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur:       180ms;
  }

  /* ---------- 2. Reset ---------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  [hidden] {
    display: none !important;
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body {
    height: 100dvh;             /* follows the browser bars and on-screen keyboard on tablets */
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    color: var(--c-text);
    background-color: var(--c-void);
    background-image:
      /* vignette */
      radial-gradient(ellipse at 50% 0%, rgba(40, 110, 160, 0.18), transparent 60%),
      radial-gradient(ellipse at 100% 100%, rgba(255, 138, 31, 0.05), transparent 50%),
      /* major grid */
      linear-gradient(rgba(127, 216, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(127, 216, 255, 0.06) 1px, transparent 1px),
      /* minor grid */
      linear-gradient(rgba(127, 216, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(127, 216, 255, 0.025) 1px, transparent 1px);
    background-size:
      100% 100%,
      100% 100%,
      calc(var(--grid-cell) * 4) calc(var(--grid-cell) * 4),
      calc(var(--grid-cell) * 4) calc(var(--grid-cell) * 4),
      var(--grid-cell) var(--grid-cell),
      var(--grid-cell) var(--grid-cell);
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }

  /* Faint scanline overlay across the whole display */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
    z-index: 999;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }

  input,
  textarea {
    user-select: text;
  }

  ::selection {
    background: var(--c-ice);
    color: var(--c-void);
  }

  /* Thin, technical scrollbars for injected module content */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--c-ice-dim) transparent;
  }
  ::-webkit-scrollbar       { width: 6px; height: 6px; }
  ::-webkit-scrollbar-thumb { background: var(--c-ice-dim); }
  ::-webkit-scrollbar-track { background: transparent; }

  /* ---------- 3. Utilities ---------- */
  .mono {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
  }

  /* Small uppercase label: column heads, panel titles, field labels */
  .caps {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  /* ---------- 4. Glass ---------- */
  .glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }

  /* Fallback for engines without backdrop-filter */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: var(--glass-bg-strong); }
  }

  /* ---------- 5. Status indicators ---------- */
  .indicator {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    vertical-align: middle;
    background: var(--c-ice);
    box-shadow: var(--glow-ice);
  }

  .indicator--warn {
    background: var(--c-orange);
    box-shadow: var(--glow-orange);
    animation: pulse 1.8s ease-in-out infinite;
  }

  .indicator--alert {
    background: var(--c-red);
    box-shadow: 0 0 10px rgba(255, 69, 69, 0.6);
    animation: pulse 0.8s steps(2) infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
  }

  /* ---------- 6. Top command bar ---------- */
  #topbar {
    position: relative;
    flex: 0 0 calc(var(--topbar-h) + var(--safe-top));
    height: calc(var(--topbar-h) + var(--safe-top));
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--pad);
    padding: var(--safe-top) var(--safe-right) 0 calc(var(--pad) + var(--safe-left));
    border-width: 0 0 1px 0;
    background:
      linear-gradient(to bottom, rgba(20, 45, 70, 0.55), rgba(8, 18, 30, 0.35));
    z-index: 10;
  }

  /* Ice-blue accent rule along the bottom edge, with an orange tick on the left */
  #topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background:
      linear-gradient(90deg,
        var(--c-orange) 0, var(--c-orange) 48px,
        transparent 48px, transparent 56px,
        var(--glass-border-hi) 56px,
        rgba(127, 216, 255, 0.08) 70%,
        var(--glass-border-hi) 100%);
  }

  /* Brand block */
  .topbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
  }

  .brand__glyph {
    width: 26px;
    height: 26px;
    border: 1px solid var(--c-ice);
    box-shadow: var(--glow-ice), inset 0 0 8px rgba(127, 216, 255, 0.25);
    position: relative;
    transform: rotate(45deg);
  }

  .brand__glyph::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: var(--c-orange);
    box-shadow: var(--glow-orange);
  }

  .brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }

  .brand__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--c-ice-bright);
  }

  .brand__sub {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  /* Label over value, as in the operator button */
  .metric__label {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .metric__value {
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ice-bright);
    white-space: nowrap;
  }

  /* Navigation — pinned to the top-right corner */
  .topbar__nav {
    display: flex;
    align-items: stretch;
    margin-left: auto;          /* pushes nav hard right */
    border-left: 1px solid var(--glass-border);
  }

  /* Server link light, inside the operator button (login.css): a bar as tall as the two lines of text beside
     it (.operator-btn__id stretches it). Online it breathes slowly; checking and no answer keep their own blinks. */
  .operator-btn__id {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
  }

  .operator-btn__link {
    display: flex;
  }

  .operator-btn__link .indicator {
    height: auto;               /* fills the text's height; the width stays the indicator's 7px */
    margin-right: 0;
  }

  .operator-btn__link .indicator:not(.indicator--warn, .indicator--alert) {
    animation: link-breathe 4s ease-in-out infinite;
  }

  /* Slow breathing: full brightness, easing down to 10% dimmer and back over 4 s (any deeper distracts) */
  @keyframes link-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.9; }
  }

  .nav-btn:disabled {
    cursor: default;
  }

  .nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;            /* sized to the label, 16px either side like the site's other margins */
    border-right: 1px solid var(--line-soft);
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    transition:
      color var(--dur) var(--ease),
      background-color var(--dur) var(--ease);
  }

  .nav-btn:last-child {
    border-right: none;
  }

  .nav-btn__index {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--c-ice-dim);
    transition: color var(--dur) var(--ease);
  }

  /* Top accent bar (hidden until hover/active) */
  .nav-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-ice);
    box-shadow: var(--glow-ice);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }

  .nav-btn:hover {
    color: var(--c-ice-bright);
    background-color: var(--wash-hover);
  }

  .nav-btn:hover::before {
    transform: scaleX(1);
  }

  .nav-btn:focus-visible {
    outline: 1px solid var(--c-ice);
    outline-offset: -4px;
  }

  .nav-btn.is-active {
    color: var(--c-ice-bright);
    background:
      linear-gradient(to bottom, var(--wash-active), rgba(127, 216, 255, 0.03));
  }

  .nav-btn.is-active::before {
    transform: scaleX(1);
    background: var(--c-orange);
    box-shadow: var(--glow-orange);
  }

  .nav-btn.is-active .nav-btn__index {
    color: var(--c-orange);
  }

  /* Loading: the accent bar pulses while the module mounts (clicking the open tab reloads its data) */
  .nav-btn.is-loading::before {
    transform: scaleX(1);
    animation: nav-pulse 0.9s var(--ease) infinite alternate;
  }

  @keyframes nav-pulse {
    from { opacity: 1; }
    to   { opacity: 0.25; }
  }

  /* ---------- 7. Content viewport ---------- */
  #viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;              /* allow children to scroll within flex */
    width: 100%;
    padding: var(--pad) calc(var(--pad) + var(--safe-right)) calc(var(--pad) + var(--safe-bottom)) calc(var(--pad) + var(--safe-left));
    overflow: auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr); /* one row that fills the viewport */
    gap: var(--gap);
  }

  /* The module-load error panel is in components.css (it contains a .btn) */

  /* ---------- 8. Landscape enforcement ---------- */
  #orientation-lock {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    text-transform: uppercase;
    letter-spacing: var(--tracking);
    font-size: var(--fs-sm);
    color: var(--c-ice-bright);
  }

  @media (orientation: portrait) and (max-width: 900px) {
    #orientation-lock { display: flex; }
  }

  /* ---------- 9. Responsive compression ---------- */
  /* As the screen narrows the module tabs drop their 01–04 numbers */
  @media (max-width: 1279px) {
    .nav-btn__index { display: none; }
  }

  @media (max-width: 760px) {
    :root { --pad: 12px; }
    .brand__sub     { display: none; }
    .nav-btn        { min-width: 0; padding: 0 14px; }
    .nav-btn__index { display: none; }
  }

  /* ---------- 10. Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
  }
}