/* Magogi operator-console shell — the `.mgf-console` family
 * ============================================================================
 * The operator-app CHROME every MGF console shares: the always-dark instrument
 * top bar (mark + status pill + actions), the dark left rail (nav rows + the
 * pinned state-language legend), the light printable readout, the skip link,
 * and the print reset. Extracted in M1 Wave-2 P4.1 from the near-identical
 * `.fw-*` (mgf-fed-web app.css) and `.pw-*` (mgf-test-web app.css) shells —
 * the fed↔test duplication named by the G3 recon — so every operator surface
 * inherits ONE shell instead of copying it.
 *
 * LAYOUT LAYER, not a component layer: this sheet builds a 100vh app frame.
 * Load it only on console/operator apps, AFTER instruments.css; content sites
 * (mgf-website & co) must not load it. Canonical load order:
 *   tokens → fonts → base → components → instruments → console → your app.css
 *
 * Markup: ship `mgf/console.html` from the kit's Jinja template pack
 * (`mgf.brand_web.templates_dir()`) and override its blocks — or hand-roll the
 * same classes. Structure:
 *
 *   <a class="skip-link" href="#mgf-main">Skip to content</a>
 *   <div class="mgf-console">
 *     <header class="mgf-console__topbar">
 *       <a class="mgf-console__mark" href="/"> … glyph + txt + sub … </a>
 *       <span class="mgf-console__spacer"></span>
 *       <span class="mgf-console__pill"> … dot + label + counts … </span>
 *     </header>
 *     <div class="mgf-console__body">
 *       <nav class="mgf-console__rail"> … __rail-h / __nav / __legend … </nav>
 *       <main id="mgf-main" class="mgf-console__main"> … readout … </main>
 *     </div>
 *   </div>
 *
 * Everything is themed via the canonical --mgf-* tokens (new-code rule since
 * 0.3.0). The chrome stays intentionally dark in both themes (it is an
 * instrument, like the wireframes); the readout follows the theme.
 * ============================================================================ */

/* ------------------------------------------------------------ app frame --- */
.mgf-console {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.mgf-console__body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.mgf-console__spacer {
  flex: 1;
}

/* ------------------------------------------------------------- skip link -- */
/* WCAG 2.4.1 — the first focusable element; visible only while focused. */
.skip-link {
  position: absolute;
  top: -100vh;
  left: var(--mgf-space-2);
  z-index: 100;
  padding: var(--mgf-space-2) var(--mgf-space-4);
  border-radius: var(--mgf-radius-sm);
  background: var(--mgf-color-bg-canvas);
  color: var(--mgf-color-text-primary);
  border: 1px solid var(--mgf-color-border-strong);
  box-shadow: var(--mgf-shadow-md);
  font-weight: var(--mgf-font-weight-semibold);
  text-decoration: none;
}
.skip-link:focus {
  top: var(--mgf-space-2);
}

/* ------------------------------------------------- top bar (dark chrome) -- */
.mgf-console__topbar {
  display: flex;
  align-items: center;
  gap: var(--mgf-space-4);
  flex: 0 0 auto;
  height: 3.4rem;
  padding: 0 var(--mgf-space-4);
  background: var(--mgf-ink);
  color: var(--mgf-mist);
  border-bottom: 1px solid color-mix(in srgb, white 10%, var(--mgf-ink));
}

/* The product mark — glyph + name + mono sub-line. */
.mgf-console__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--mgf-space-2);
  text-decoration: none;
  color: var(--mgf-mist);
  font-family: var(--mgf-font-display);
  font-weight: var(--mgf-font-weight-semibold);
}
.mgf-console__mark-glyph {
  height: 1.4rem;
  width: auto;
}
.mgf-console__mark-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.mgf-console__mark-sub {
  font-family: var(--mgf-font-mono);
  font-size: 0.6rem;
  font-weight: var(--mgf-font-weight-medium);
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--mgf-mist) 58%, transparent);
}

/* Global status pill — dot (a .status-indicator) + label + mono counts. */
.mgf-console__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mgf-space-2);
  padding: 0.4rem var(--mgf-space-3);
  border-radius: var(--mgf-radius-pill);
  background: color-mix(in srgb, white 5%, var(--mgf-ink));
  border: 1px solid color-mix(in srgb, white 12%, var(--mgf-ink));
}
.mgf-console__pill-label {
  font-weight: var(--mgf-font-weight-semibold);
  font-size: 0.82rem;
}
.mgf-console__pill-counts {
  font-size: 0.72rem;
  font-family: var(--mgf-font-mono);
  color: color-mix(in srgb, var(--mgf-mist) 58%, transparent);
}

/* The kit's secondary button uses the theme text colour (dark on light); in the
 * always-dark chrome it must read light. Scoped so the kit button is untouched. */
.mgf-console__topbar .button-secondary {
  color: var(--mgf-mist);
  border-color: color-mix(in srgb, var(--mgf-mist) 26%, transparent);
}
.mgf-console__topbar .button-secondary:hover {
  background: color-mix(in srgb, white 8%, transparent);
  color: var(--mgf-mist);
}

/* --------------------------------------------------- left rail (dark) ----- */
.mgf-console__rail {
  flex: 0 0 16rem;
  overflow-y: auto;
  padding: var(--mgf-space-3);
  background: var(--mgf-ink);
  color: var(--mgf-mist);
  border-right: 1px solid color-mix(in srgb, white 10%, var(--mgf-ink));
}
.mgf-console__rail-h {
  font-family: var(--mgf-font-mono);
  font-size: 0.62rem;
  font-weight: var(--mgf-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mgf-mist) 55%, transparent);
  margin: var(--mgf-space-4) var(--mgf-space-2) var(--mgf-space-2);
}
.mgf-console__rail-h:first-child {
  margin-top: var(--mgf-space-1);
}
.mgf-console__rail-empty {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--mgf-mist) 50%, transparent);
  padding: var(--mgf-space-2);
}

/* Nav rows — dot/indicator + name + mono kind; gold inset marks the active row. */
.mgf-console__nav {
  display: flex;
  align-items: center;
  gap: var(--mgf-space-3);
  padding: var(--mgf-space-2) var(--mgf-space-3);
  border-radius: var(--mgf-radius-sm);
  text-decoration: none;
  color: var(--mgf-mist);
}
.mgf-console__nav:hover {
  background: color-mix(in srgb, white 6%, transparent);
  color: var(--mgf-mist);
}
.mgf-console__nav--on {
  background: color-mix(in srgb, white 8%, transparent);
  box-shadow: inset 2px 0 0 var(--mgf-gold);
}
.mgf-console__nav-main {
  min-width: 0;
}
.mgf-console__nav-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgf-console__nav-kind {
  display: block;
  font-family: var(--mgf-font-mono);
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--mgf-mist) 55%, transparent);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legend — the pinned state language at the rail's foot. */
.mgf-console__legend {
  margin: var(--mgf-space-4) var(--mgf-space-1) var(--mgf-space-1);
  border: 1px solid color-mix(in srgb, white 12%, var(--mgf-ink));
  border-radius: var(--mgf-radius-sm);
  padding: var(--mgf-space-3);
  background: color-mix(in srgb, white 4%, var(--mgf-ink));
}
.mgf-console__legend-h {
  font-family: var(--mgf-font-mono);
  font-size: 0.6rem;
  font-weight: var(--mgf-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mgf-mist) 55%, transparent);
  margin-bottom: var(--mgf-space-2);
}
.mgf-console__legend-row {
  display: flex;
  align-items: center;
  gap: var(--mgf-space-2);
  font-family: var(--mgf-font-mono);
  font-size: 0.7rem;
  margin-top: var(--mgf-space-2);
}
.mgf-console__legend-desc {
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--mgf-mist) 55%, transparent);
  margin: 0.1rem 0 0 1.05rem;
}
.mgf-console__legend-note {
  margin: var(--mgf-space-3) 0 0;
  padding-top: var(--mgf-space-2);
  border-top: 1px solid color-mix(in srgb, white 10%, var(--mgf-ink));
  font-size: 0.66rem;
  line-height: var(--mgf-line-normal);
  color: color-mix(in srgb, var(--mgf-mist) 60%, transparent);
}

/* ------------------------------------- readout (light, printable, themed) -- */
.mgf-console__main {
  flex: 1;
  overflow-y: auto;
  background: var(--mgf-color-bg-canvas);
  color: var(--mgf-color-text-primary);
  padding: var(--mgf-space-6) var(--mgf-space-8) var(--mgf-space-16);
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 50rem) {
  .mgf-console__rail {
    flex-basis: 13rem;
  }
  .mgf-console__main {
    padding: var(--mgf-space-4);
  }
}

/* ---------------------------------------------------------------- print --- */
/* Strip the app chrome so the readout prints clean and light (every view
 * prints). Apps add their own domain-specific hides on top of this reset. */
@media print {
  .mgf-console__topbar,
  .mgf-console__rail,
  .skip-link,
  .button {
    display: none !important;
  }
  .mgf-console,
  .mgf-console__body {
    display: block;
    height: auto;
  }
  .mgf-console__main {
    overflow: visible;
    padding: 0;
    background: #fff;
  }
  .card {
    break-inside: avoid;
    box-shadow: none;
  }
}
