{#- mgf-brand-web · the living styleguide (M1 P4.1)
    =========================================================================
    The kit demonstrating itself: this page IS the `.mgf-console` shell
    (it extends mgf/console.html), and its readout renders every operator
    vocabulary the kit ships — chips (with icon slots), the 42-icon sprite,
    the type ramp, indicators, progress, tabs, the streaming console, the
    live-pane, detail/evidence, honest absence. Serve it during development
    with the kit's demo app:  python demo/app.py  →  http://127.0.0.1:8791/
    (It replaced docs/instruments-demo.html, which was a hand-copied, unserved
    gallery.) Context: `icon_names` (list, from the sprite), `kit_version`.
    ========================================================================= -#}
{% extends "mgf/console.html" %}
{% import "mgf/macros.html" as mgf %}

{% block title %}mgf-brand-web {{ kit_version | default('') }} — living styleguide{% endblock %}
{% block mark_title %}mgf-brand-web{% endblock %}
{% block mark_sub %}living styleguide{% endblock %}

{% block topbar %}
  <span class="mgf-console__pill" title="This pill is .mgf-console__pill + .status-indicator">
    <span class="status-indicator status-indicator--idle"></span>
    <span class="mgf-console__pill-label">kit {{ kit_version | default('dev') }}</span>
    <span class="mgf-console__pill-counts">{{ icon_names | default([]) | length }} icons · 6 sheets</span>
  </span>
  {# D-BRAND-ACCENT: the ONE affirmative gold action per view. #}
  <button class="button button-accent button-sm" type="button">Check all</button>
  <button class="button button-secondary button-sm" type="button" onclick="window.print()">Print / Export</button>
{% endblock %}

{% block rail_label %}Styleguide sections{% endblock %}
{% block rail %}
  <div class="mgf-console__rail-h">The shell</div>
  <a class="mgf-console__nav mgf-console__nav--on" href="#shell">
    <span class="status-indicator status-indicator--in-sync"></span>
    <span class="mgf-console__nav-main">
      <span class="mgf-console__nav-name">.mgf-console</span>
      <span class="mgf-console__nav-kind">this very page</span>
    </span>
  </a>
  <div class="mgf-console__rail-h">Vocabularies</div>
  {% for anchor, name, kind in [
      ('#logo', 'The living mark', 'inline · animated · moods'),
      ('#type', 'Type ramp', '--mgf-text-*'),
      ('#icons', 'Icons', 'the 42-symbol sprite'),
      ('#chips', 'State chips', 'sync · test · workflow'),
      ('#marks', 'Origin & provenance', 'origin · derived · authority'),
      ('#signals', 'Indicators & progress', 'dots · bars · tabs'),
      ('#streams', 'Console & live-pane', 'dark stream · telemetry'),
      ('#records', 'Detail & evidence', 'run records'),
      ('#absence', 'Honest absence', 'empty states'),
  ] %}
  <a class="mgf-console__nav" href="{{ anchor }}">
    <span class="mgf-console__nav-main">
      <span class="mgf-console__nav-name">{{ name }}</span>
      <span class="mgf-console__nav-kind">{{ kind }}</span>
    </span>
  </a>
  {% endfor %}
  <section class="mgf-console__legend" aria-label="Colour policy">
    <div class="mgf-console__legend-h">Colour policy</div>
    <div class="mgf-console__legend-row"><span class="status-indicator" style="background:var(--mgf-gold)"></span><b>gold</b></div>
    <div class="mgf-console__legend-desc">the ONE affirmative action per view</div>
    <div class="mgf-console__legend-row"><span class="status-indicator status-indicator--checking"></span><b>busy blue</b></div>
    <div class="mgf-console__legend-desc">functional busy / running — never a CTA</div>
    <div class="mgf-console__legend-row"><span class="status-indicator" style="background:var(--mgf-derived)"></span><b>violet</b></div>
    <div class="mgf-console__legend-desc">derived / authority / telemetry</div>
    <p class="mgf-console__legend-note">Status is colour + dot + label, never colour
      alone. Icons are monochrome (currentColor). This legend block is
      .mgf-console__legend. {{ mgf.derived_tag('the styleguide') }}</p>
  </section>
{% endblock %}

{% block main %}
  <section id="shell" class="sg-section">
    <p class="eyebrow">mgf-brand-web {{ kit_version | default('') }} · operator kit</p>
    <h1>The living styleguide</h1>
    <p class="lead" style="max-width:72ch">Everything on this page is the installed kit —
      no page-local styling beyond layout scaffolding. The chrome around you is the
      <code>.mgf-console</code> shell (<code>console.css</code> + the
      <code>mgf/console.html</code> template); every component below is
      <code>instruments.css</code> / <code>components.css</code> on the generated
      <code>--mgf-*</code> tokens. Flip your OS theme: the readout follows, the
      instrument chrome stays dark.</p>
  </section>

  <section id="logo" class="sg-section card">
    <style>
      .sg-logo-row { display: flex; gap: 3rem; align-items: flex-end; flex-wrap: wrap; margin: 1.25rem 0 0.5rem; }
      .sg-logo-cell { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
      .sg-logo-cell .logo-mark { height: 88px; width: 88px; }
      .sg-logo-cell.is-lockup .logo-mark { height: 56px; width: auto; }
      .sg-logo-cap { font-family: var(--mgf-font-mono); font-size: 0.68rem; color: var(--mgf-slate); }
      .sg-logo-dark { background: var(--mgf-indigo); border-radius: var(--mgf-radius-md); padding: 1.25rem 1.5rem; }
    </style>
    <p class="eyebrow">The living mark · logo_mark() + logo-motion.css</p>
    <h2>The mark breathes</h2>
    <p class="lead" style="max-width:72ch">One inline SVG organism (orbit + heartbeat), one
      grammar, shipped by the kit. <b>Idle:</b> a faint double-beat every ~10s. <b>Hover</b> the
      first mark: one warm pulse + an orbit advance that settles back. <b>Success:</b> a single
      gold ring emits. Everything is transform/opacity only (60fps); under
      <code>prefers-reduced-motion: reduce</code> it rests as a clean static drawing. The console
      top bar around you is already this mark.</p>
    <div class="sg-logo-row">
      <div class="sg-logo-cell">
        <a class="lm-host" href="#logo" title="hover to pulse" style="display:inline-flex">{{ mgf.logo_mark(title="Magogi", id="sg-a") }}</a>
        <span class="sg-logo-cap">mark · hover me</span>
      </div>
      <div class="sg-logo-cell is-lockup">
        {{ mgf.logo_mark(mode="lockup", title="Magogi", id="sg-b") }}
        <span class="sg-logo-cap">lockup</span>
      </div>
      <div class="sg-logo-cell">
        <div class="sg-logo-dark">{{ mgf.logo_mark(on_dark=true, id="sg-c") }}</div>
        <span class="sg-logo-cap">on-dark</span>
      </div>
      <div class="sg-logo-cell">
        <div class="sg-logo-dark">{{ mgf.logo_mark(on_dark=true, class="is-success", id="sg-d") }}</div>
        <span class="sg-logo-cap">.is-success ring</span>
      </div>
    </div>
  </section>

  <section id="type" class="sg-section card">
    <p class="eyebrow">Type ramp · --mgf-text-*</p>
    <div class="sg-stack">
      {% for step in ['4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'base', 'sm', 'xs'] %}
      <div class="sg-type-row">
        <code class="sg-type-tag">--mgf-text-{{ step }}</code>
        <span style="font-size:var(--mgf-text-{{ step }});font-family:var(--mgf-font-display);line-height:1.2">Calibrated instrument</span>
      </div>
      {% endfor %}
      <div class="sg-type-row">
        <code class="sg-type-tag">--mgf-font-mono</code>
        <span class="mono">sha256 392322ed…d774 · provenance is mono</span>
      </div>
    </div>
  </section>

  <section id="icons" class="sg-section card">
    <p class="eyebrow">Iconography · {{ icon_names | default([]) | length }} symbols · icons/icons-sprite.svg</p>
    <p class="sg-note">24×24 grid, stroke 1.25, round caps, <code>currentColor</code> —
      one drawing serves every ground. Decorative by default
      (<code>aria-hidden</code>); name meaningful ones (<code>role="img"</code> +
      <code>aria-label</code>). Rendered via <code>mgf.icon(name)</code>.</p>
    {% if icon_names %}
    <div class="sg-icon-grid">
      {% for name in icon_names %}
      <figure class="sg-icon-cell">
        {{ mgf.icon(name, size=24) }}
        <figcaption>{{ name }}</figcaption>
      </figure>
      {% endfor %}
    </div>
    <div class="sg-dark">
      <span class="sg-note" style="color:color-mix(in srgb, var(--mgf-mist) 70%, transparent)">on Ink — same files, currentColor themes:</span>
      {% for name in icon_names[:12] %}{{ mgf.icon(name, size=20) }}{% endfor %}
    </div>
    {% else %}
    {{ mgf.empty_state('No icon inventory passed', 'Render this page with icon_names (the demo app parses the sprite).') }}
    {% endif %}
  </section>

  <section id="chips" class="sg-section card">
    <p class="eyebrow">State chips · .status-chip / .tstate</p>
    <p class="sg-note">Sync language ({{ mgf.sync_chip('IN_SYNC') }} …), test language,
      and the workflow language — colour + dot + label, mapped with
      <code>state.lower().replace('_','-')</code>.</p>
    <div class="sg-row">
      {% for s in ['IN_SYNC', 'STALE', 'TAMPERED', 'UNKNOWN', 'UNREADABLE', 'CHECKING', 'SYNCING', 'ERROR'] %}{{ mgf.sync_chip(s) }}{% endfor %}
    </div>
    <div class="sg-row">
      {% for s in ['pass', 'fail', 'error', 'skipped', 'running'] %}{{ mgf.status_chip(s) }}{% endfor %}
      {{ mgf.status_chip('pass', running=true) }}
    </div>
    <p class="sg-note">Optional icon slots from the sprite (0.4.0) — decoration on top
      of dot + label, inheriting the state colour:</p>
    <div class="sg-row">
      {{ mgf.status_chip('pass', icon_name='success') }}
      {{ mgf.status_chip('fail', icon_name='error') }}
      {{ mgf.sync_chip('STALE', icon_name='warning') }}
      {{ mgf.sync_chip('UNKNOWN', icon_name='pending') }}
    </div>
    <div class="sg-row">
      {% for s in ['done', 'in_progress', 'next', 'postponed', 'blocked', 'todo'] %}{{ mgf.tstate(s) }}{% endfor %}
    </div>
  </section>

  <section id="marks" class="sg-section card">
    <p class="eyebrow">Origin & provenance marks · .origin-badge / .derived-tag / .authority-badge</p>
    <div class="sg-row">
      {% for o in ['web', 'cli', 'agent', 'ci'] %}{{ mgf.origin_badge(o) }}{% endfor %}
      {{ mgf.derived_tag('the styleguide') }}
      <span class="authority-badge">Authority</span>
      <span class="telemetry-marker"><span class="live-dot"></span>live · ephemeral, not provenance</span>
      <span class="service-status service-status--up">warden up</span>
      <span class="service-status service-status--down">warden down</span>
    </div>
  </section>

  <section id="signals" class="sg-section card">
    <p class="eyebrow">Indicators · progress · tabs</p>
    <div class="sg-row" style="font-size:0.85rem">
      <span><span class="status-indicator status-indicator--running"></span> running</span>
      <span><span class="status-indicator status-indicator--queued"></span> queued</span>
      <span><span class="status-indicator status-indicator--idle"></span> idle</span>
      <span><span class="status-indicator status-indicator--stale"></span> stale</span>
      <span><span class="status-indicator status-indicator--down"></span> down</span>
      <span><span class="status-indicator"></span> unknown</span>
    </div>
    <div class="sg-stack" style="max-width:28rem">
      <div class="progress"><div class="progress__fill" style="width:62%"></div></div>
      <div class="progress"><div class="progress__fill progress__fill--done" style="width:100%"></div></div>
      <div class="progress progress--indeterminate"><div class="progress__fill"></div></div>
    </div>
    <div class="tabs" style="margin-top:var(--mgf-space-4)">
      <button class="tab tab--active" type="button">Roadmap</button>
      <button class="tab" type="button">In progress · 2</button>
      <button class="tab" type="button">Decisions</button>
    </div>
    <div class="lens-tabs" style="margin-top:var(--mgf-space-4)">
      <button class="lens-tab lens-tab--active" type="button">Sync</button>
      <button class="lens-tab" type="button">Risk</button>
      <button class="lens-tab" type="button">Coupling</button>
    </div>
    <div class="sg-row" style="margin-top:var(--mgf-space-4)">
      <span class="level-badge level-badge--low">low</span>
      <span class="level-badge level-badge--medium">medium</span>
      <span class="level-badge level-badge--high">high</span>
      <span class="level-badge level-badge--effort">effort L</span>
      <span class="pill">stage-2b</span>
      <span class="pill pill--age">started 3d ago</span>
      <span class="pill pill--priority">priority high</span>
    </div>
    <div class="ribbon ribbon--warning" style="margin-top:var(--mgf-space-4)">
      {{ mgf.icon('warning') }} <span><b>soothsmith</b> dashboard built from <b>e3504fc</b>, HEAD is <b>a91f7c2</b> — force-sync to rebuild.</span>
    </div>
  </section>

  <section id="streams" class="sg-section">
    <p class="eyebrow">Dark streaming console · telemetry live-pane</p>
    <div class="console" style="margin-bottom:var(--mgf-space-4)">
      <div class="console__line"><span class="console__seq">#1</span><span class="console__ts">06:41:02</span><span class="console__kind kind--run-request">run_request</span><span class="console__text">request · P-F3 · zig build test</span></div>
      <div class="console__line"><span class="console__seq">#2</span><span class="console__ts">06:41:03</span><span class="console__kind kind--gate">gate</span><span class="console__text">gate <b>emit-set no-drift</b> → pass</span></div>
      <div class="console__line"><span class="console__seq">#3</span><span class="console__ts">06:41:04</span><span class="console__kind kind--error">error</span><span class="console__text">holder process died — heartbeat stopped</span></div>
    </div>
    <div class="live-pane">
      <div class="live-pane__head">
        <span class="telemetry-marker">Telemetry</span>
        <span class="live-pane__op">zig build test</span>
        <span style="flex:1"></span>
        <span class="live-chip"><span class="live-dot"></span>streaming</span>
      </div>
      <div class="live-pane__body">
        <div class="live-pane__step">{{ mgf.icon('build') }} run emit-set no-drift test</div>
        <div class="live-pane__meta"><span>62%</span><span>sess_20260628…</span><span>last event 2s ago</span></div>
        <div class="live-pane__latest">surface_version <b>1.0.0</b> pinned · gate → pass</div>
      </div>
    </div>
  </section>

  <section id="records" class="sg-section card">
    <p class="eyebrow">Detail · evidence</p>
    <div class="sg-stack">
      <div class="detail">
        <div><span class="detail__key">run_id</span> run_20260628T0641_a1</div>
        <div><span class="detail__key">lease</span> heartbeats 1 · reclaimed false</div>
      </div>
      <div class="detail-block detail-block--derived">
        <div class="detail-block__head">{{ mgf.icon('chain') }} derived · changelog</div>
        R15 closed at 7160a43 — emit-set versioning adopted.
      </div>
      <p class="evidence">evidence · zig build test 91/91; verify.sh 710f9ea4…620b unmoved</p>
    </div>
  </section>

  <section id="absence" class="sg-section">
    <p class="eyebrow">Honest absence · mgf.absence() / mgf.empty_state()</p>
    <div class="sg-grid">
      {{ mgf.absence('UNKNOWN', "This project isn't wired yet", 'No fed-resources/ found.', action='Add the directory and force-sync.') }}
      {{ mgf.absence('UNREADABLE', "Resources can't be read", 'Manifest schema 0.0-draft not recognized.', errors=['manifest.json: schema 0.0-draft', 'expected: 0.1']) }}
      {{ mgf.empty_state('No past runs', 'Once tests run, their records are listed here.') }}
    </div>
  </section>
{% endblock %}

{% block head_extra %}
<style>
  /* Styleguide-local scaffolding — NOT part of the kit. */
  .sg-section { margin-bottom: var(--mgf-space-10); }
  .sg-row { display: flex; flex-wrap: wrap; gap: var(--mgf-space-3); align-items: center; margin-block: var(--mgf-space-3); }
  .sg-stack { display: flex; flex-direction: column; gap: var(--mgf-space-3); }
  .sg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--mgf-space-4); }
  .sg-note { color: var(--mgf-color-text-secondary); font-size: var(--mgf-text-sm); max-width: 72ch; }
  .sg-type-row { display: flex; align-items: baseline; gap: var(--mgf-space-4); }
  .sg-type-tag { flex: 0 0 10rem; font-size: var(--mgf-text-xs); color: var(--mgf-color-text-secondary); }
  .sg-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--mgf-space-2); margin-block: var(--mgf-space-4); }
  .sg-icon-cell { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--mgf-space-2);
                  border: 1px solid var(--mgf-color-border-subtle); border-radius: var(--mgf-radius-sm);
                  padding: var(--mgf-space-3) var(--mgf-space-2); background: var(--mgf-color-bg-surface); }
  .sg-icon-cell figcaption { font-family: var(--mgf-font-mono); font-size: 0.68rem; color: var(--mgf-color-text-secondary); }
  .sg-dark { display: flex; flex-wrap: wrap; gap: var(--mgf-space-3); align-items: center;
             background: var(--mgf-ink); color: var(--mgf-mist); border-radius: var(--mgf-radius-sm);
             padding: var(--mgf-space-4); }
</style>
{% endblock %}
