{#- mgf-brand-web · the operator-console shell (M1 P4.1)
    =========================================================================
    The base template every MGF operator console extends — the markup half of
    static/console.css's `.mgf-console` family: head chrome (color-scheme,
    favicon, font preloads, the kit stylesheets in canonical order), the skip
    link, the dark top bar (mark + your status/actions), the dark rail (your
    nav + legend), and the light printable readout.

    Wire it (FastAPI example):

        from mgf.brand_web import static_dir, templates_dir
        app.mount("/static/brand", StaticFiles(directory=str(static_dir())), name="brand")
        templates = Jinja2Templates(directory=[str(APP_TEMPLATES), str(templates_dir())])

    then in your base.html:

        {% extends "mgf/console.html" %}
        {% block mark_title %}my-console{% endblock %}
        {% block rail %} … .mgf-console__nav rows … {% endblock %}
        {% block main %} … {% endblock %}

    Blocks: title · head_extra · body_attrs · mark (or mark_title/mark_sub) ·
    topbar · rail_label · rail · main · scripts. The brand mount prefix is
    /static/brand and the app sheet /static/app.css by convention; override
    the brand_stylesheets/app_stylesheets blocks if yours differ.
    ========================================================================= -#}
{% import "mgf/macros.html" as mgf %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <title>{% block title %}Magogi console{% endblock %}</title>
  <link rel="icon" href="/static/brand/logo/magogi-favicon.svg">
  <link rel="preload" as="font" type="font/woff2" crossorigin href="/static/brand/fonts/inter-latin.woff2">
  <link rel="preload" as="font" type="font/woff2" crossorigin href="/static/brand/fonts/space-grotesk-latin.woff2">
  {% block brand_stylesheets -%}
  <link rel="stylesheet" href="/static/brand/tokens.css">
  <link rel="stylesheet" href="/static/brand/fonts.css">
  <link rel="stylesheet" href="/static/brand/base.css">
  <link rel="stylesheet" href="/static/brand/components.css">
  <link rel="stylesheet" href="/static/brand/instruments.css">
  <link rel="stylesheet" href="/static/brand/console.css">
  <link rel="stylesheet" href="/static/brand/logo-motion.css">
  {%- endblock %}
  {% block app_stylesheets -%}
  <link rel="stylesheet" href="/static/app.css">
  {%- endblock %}
  {% block head_extra %}{% endblock %}
</head>
<body{% block body_attrs %}{% endblock %}>
<a class="skip-link" href="#mgf-main">Skip to content</a>
<div class="mgf-console">
  <header class="mgf-console__topbar">
    {% block mark -%}
    <a class="mgf-console__mark lm-host" href="/">
      {{ mgf.logo_mark(on_dark=true, class="mgf-console__mark-glyph") }}
      <span class="mgf-console__mark-txt">{% block mark_title %}Magogi{% endblock %}<span
          class="mgf-console__mark-sub">{% block mark_sub %}console{% endblock %}</span></span>
    </a>
    {%- endblock %}
    <span class="mgf-console__spacer"></span>
    {% block topbar %}{% endblock %}
  </header>

  <div class="mgf-console__body">
    <nav class="mgf-console__rail" aria-label="{% block rail_label %}Console navigation{% endblock %}">
      {% block rail %}{% endblock %}
    </nav>
    <main id="mgf-main" class="mgf-console__main">{% block main %}{% endblock %}</main>
  </div>
</div>
{% block scripts %}{% endblock %}
</body>
</html>
