/* ============================================================================
   DIVONCI WORLD — AGENT DEVELOPMENT · BOARD GUIDE  (screens_agent_dev_guide.jsx)
   ----------------------------------------------------------------------------
   An in-page explainer. A "What am I looking at?" button in the board header
   opens a modal that walks through every card on the Agent Development surface:
   what it is, how to read it, and how to use it — plus a glossary of the trust
   states and competence levels that drive everything.

   Self-contained: manages its own open state. Shared globals: Icon, DEVD.
   ========================================================================== */
const { useState: useStateGd, useEffect: useEffectGd } = React;

/* ── small explainer building blocks ──────────────────────────────────────── */
function GBlock({ what, read, use }) {
  return (
    <div className="gd-block">
      {what && <p className="gd-what">{what}</p>}
      {read && <div className="gd-line"><span className="gd-tag read">Read it</span><span>{read}</span></div>}
      {use && <div className="gd-line"><span className="gd-tag use">Use it</span><span>{use}</span></div>}
    </div>
  );
}
function GCard({ icon, title, accent, children }) {
  return (
    <div className="gd-card" style={accent ? { "--gac": accent } : null}>
      <div className="gd-card-h"><span className="gd-card-ic"><Icon name={icon} style={{ width: 15, height: 15 }} /></span><span>{title}</span></div>
      <div className="gd-card-b">{children}</div>
    </div>
  );
}
function GStep({ n, title, children }) {
  return (
    <div className="gd-step"><span className="gd-step-n">{n}</span><div><div className="gd-step-t">{title}</div><div className="gd-step-d">{children}</div></div></div>
  );
}

/* ── section content ──────────────────────────────────────────────────────── */
const GUIDE_SECTIONS = [
  {
    id: "start", label: "Start here", icon: "skill",
    render: () => (
      <React.Fragment>
        <p className="gd-lead">Agent Development is the <b>evidence-governed path an agent walks to earn the right to execute tools</b>. It is deliberately separate from the Arsenal (the tool library) and the Command Console (identity &amp; voice). Nothing here grants power — it tracks the proof that justifies it.</p>
        <div className="gd-doctrine">
          <div className="gd-dt"><Icon name="shield" style={{ width: 16, height: 16, color: "var(--state-caution)" }} /><div><b>Access is not trust.</b> An agent can be allowed to <i>see</i> or <i>route</i> a tool long before it is allowed to <i>run</i> it.</div></div>
          <div className="gd-dt"><Icon name="evidence" style={{ width: 16, height: 16, color: "var(--state-caution)" }} /><div><b>No promotion without evidence.</b> Trust only moves up when a passed evaluation is filed against a gate.</div></div>
          <div className="gd-dt"><Icon name="lock" style={{ width: 16, height: 16, color: "var(--state-crisis)" }} /><div><b>The browser never writes.</b> Every action drafts a payload and routes to an approved Worker endpoint — service-role keys stay server-side.</div></div>
        </div>
        <p className="gd-note">Use the menu on the left to jump to any card you can see on the board. Each entry tells you what it is, how to read the numbers, and what you can do with it.</p>
      </React.Fragment>
    ),
  },
  {
    id: "nav", label: "Roster, metrics & source", icon: "council",
    render: () => (
      <React.Fragment>
        <GCard icon="chart" title="Metric tiles (top row)">
          <GBlock
            what="Six counters that summarise the whole council at a glance."
            read="Total agents, active tracks, in-training, awaiting first track, and passed vs failed evaluations. Colour signals state — amber means attention, red means a failure exists."
            use="A quick health read. A red 'Failed evals' tile is your cue to open that agent and inspect what broke." />
        </GCard>
        <GCard icon="globe" title="LIVE / FIXTURE source control">
          <GBlock
            what="Shows whether the board is reading the live Supabase snapshot through the Worker, or the labelled fixture mirror."
            read="Green LIVE = connected. Amber FIXTURE = demo data. Red = the Worker was unreachable."
            use="Click it to paste a Worker base URL + API token (stored only in your browser) and connect to live data, or fall back to the fixture." />
        </GCard>
        <GCard icon="council" title="Switch bar + roster overlay">
          <GBlock
            what="The sticky bar names the agent you're inspecting. 'Change agent' opens the full roster overlay."
            read="Each roster card shows the agent's trust state, current → target level, track name and restriction count. Filter by training / active / restricted / awaiting."
            use="Pick an agent to load their full development cockpit below. The roster closes and that agent's record is revealed." />
        </GCard>
      </React.Fragment>
    ),
  },
  {
    id: "record", label: "Development record", icon: "evidence",
    render: () => (
      <React.Fragment>
        <GCard icon="shield" title="Summary band + trust badge">
          <GBlock
            what="The header of an agent's cockpit: identity, trust state, and the headline stats of their track."
            read="The coloured trust badge is the single most important signal (see Glossary). The stat grid shows track, level, priority, restriction count, owner and status."
            use="Read top-to-bottom: who they are → how trusted → what they're working toward → what's holding them back." />
        </GCard>
        <GCard icon="arrow" title="Competence ladder (L0–L5)">
          <GBlock
            what="A six-rung ladder from Sandboxed (L0) to Sovereign-delegated (L5)."
            read="'NOW' marks the current level; 'TARGET' marks where the track is headed. The lit rungs between them are the path still to earn."
            use="It frames the whole track — every gate and evaluation exists to move the agent one rung toward TARGET." />
        </GCard>
        <GCard icon="arrow" title="Next action">
          <GBlock
            what="The single concrete step the track is waiting on."
            read="Phrased as an instruction, tagged with the current training state."
            use="The 'Log evaluation' button beside it is how you record the outcome once that step is done — which is the only thing that advances trust." />
        </GCard>
      </React.Fragment>
    ),
  },
  {
    id: "evidence", label: "Gates, evidence & timeline", icon: "check",
    render: () => (
      <React.Fragment>
        <GCard icon="shield" title="Evidence gates">
          <GBlock
            what="The checklist of checks that must pass before the target level is granted."
            read="Each row shows the gate name, whether it's required, and which owner is accountable for it. Empty box = not yet passed."
            use="Gates are the contract. An agent cannot be promoted while any required gate is open." />
        </GCard>
        <GCard icon="evidence" title="Required evidence">
          <GBlock
            what="The artefacts that must be filed and linked to a passed evaluation before promotion."
            read="Each item carries an 'Evidence required' tag — these are proofs, not opinions."
            use="This is the literal answer to 'what would it take to trust this agent more?'" />
        </GCard>
        <GCard icon="log" title="Evaluations + development timeline">
          <GBlock
            what="Evaluations are graded tests (pass / fail / blocked / inconclusive). The timeline is the full audit trail of everything that happened to the track."
            read="A red fail or restriction event is a real signal, not noise — every entry is dated and typed."
            use="Read the timeline when you need the story of how an agent got to its current trust state." />
        </GCard>
      </React.Fragment>
    ),
  },
  {
    id: "delegation", label: "Delegation, restrictions & tools", icon: "branch",
    render: () => (
      <React.Fragment>
        <GCard icon="branch" title="Delegation map">
          <GBlock
            what="For everything this agent is NOT allowed to do, it shows who does it instead."
            read="Grouped by owner. Lock icons are restrictions delegated away; shield icons are gates that owner holds."
            use="When an agent hits a restriction, this tells you exactly who to route the work to." />
        </GCard>
        <GCard icon="lock" title="Restrictions" accent="var(--state-crisis)">
          <GBlock
            what="The hard, non-bypassable limits on this agent."
            read="Each restriction names what's forbidden and the owner it delegates to. These do not soften with trust."
            use="Treat these as walls. The clone action and protected-execution flow both honour them automatically." />
        </GCard>
        <GCard icon="chip" title="Tool authority (Use / Exec / Admin)">
          <GBlock
            what="Per-tool grid separating governed access from execution rights."
            read="A tool can be ticked 'Use' (inspect/route) yet show 'exec-blocked' — that's access without execution, by design."
            use="This is where 'access ≠ trust' becomes concrete. Execution stays delegated until evidence gates pass." />
        </GCard>
      </React.Fragment>
    ),
  },
  {
    id: "template", label: "Track template + Clone", icon: "layers", isNew: true,
    render: () => (
      <React.Fragment>
        <p className="gd-lead">The <b>Track Template</b> card turns a proven track into something reusable. Right now it holds <span className="gd-slug">supabase-expert-delegation</span> — Viiera's Supabase delegation track — so you can hand the same evidence-governed structure to other agents.</p>
        <GCard icon="database" title="What the card shows">
          <GBlock
            what="The reusable template: its slug, the agent it came from, and the structure every clone inherits."
            read="The stat strip is the DNA of a clone — start level, start trust, gate count, restriction count, required-evidence count and priority." />
        </GCard>
        <div className="gd-howto-h"><Icon name="branch" style={{ width: 14, height: 14 }} /> How to clone it</div>
        <GStep n="1" title="Open the cloner">Click <b>Clone to other agents</b>. A dialog opens showing exactly which template is being cloned.</GStep>
        <GStep n="2" title="Pick target agents">Tick one or more agents. Anyone who already has an <i>active equivalent track</i> is disabled — you must tick <b>override</b> to deliberately clone over them.</GStep>
        <GStep n="3" title="Confirm the start state">Every clone is forced to <b>restricted / training</b> at the template's start level. No one is promoted — this is locked, on purpose.</GStep>
        <GStep n="4" title="Queue the action">Hit <b>Queue clone</b>. You get a structured result preview (created / skipped) and the exact payload sent to the Worker action <span className="gd-mono">agent_development.clone_template</span>. The browser writes nothing directly.</GStep>
        <div className="gd-callout"><Icon name="shield" style={{ width: 15, height: 15, color: "var(--state-caution)", flex: "none" }} /><span>Cloning copies the gates, restrictions and required evidence — never the trust. Each new agent must earn promotion through its own evidence.</span></div>
      </React.Fragment>
    ),
  },
  {
    id: "escalations", label: "Mission-code escalations", icon: "flag", isNew: true,
    render: () => (
      <React.Fragment>
        <p className="gd-lead">When a code (like a screenshot reference) can't be matched to a real mission or job, the system files an <b>escalation</b> instead of inventing one. The current example is code <span className="gd-slug">cd78afbc</span>.</p>
        <GCard icon="flag" title="What each escalation shows" accent="var(--state-caution)">
          <GBlock
            what="An unresolved unknown code, with full provenance."
            read="The code, its kind and source, the tables already searched (marked not-found), a severity badge, and a suggested next step." />
        </GCard>
        <div className="gd-howto-h"><Icon name="arrow" style={{ width: 14, height: 14 }} /> What you can do</div>
        <GStep n="A" title="Link to mission / job">If you later find the matching record, click <b>Link to mission / job</b>, paste its id, and queue the link action. The escalation resolves into a real reference.</GStep>
        <GStep n="B" title="Dismiss / resolve">Only available to a sovereign-authority viewer. Without authority the button is locked — escalations can't be quietly cleared.</GStep>
        <div className="gd-callout"><Icon name="lock" style={{ width: 15, height: 15, color: "var(--state-crisis)", flex: "none" }} /><span>If a code can never be linked, it stays an escalation. The system will not fabricate a mission to make the warning disappear.</span></div>
      </React.Fragment>
    ),
  },
  {
    id: "protected", label: "Protected execution", icon: "power", isNew: true,
    render: () => (
      <React.Fragment>
        <p className="gd-lead">Some jobs touch <b>protected runtime files</b> and must run on a trusted, state-aware runner — never in a casual chat session. This panel shows who can safely run that work and what's currently blocked.</p>
        <GCard icon="users" title="Protected Execution Owners">
          <GBlock
            what="Each approved runner that can execute protected work."
            read="Per owner: availability, runner health (healthy / degraded / down), last heartbeat, queue depth, live state access, and the last failure it recorded."
            use="A runner only qualifies when it's online, not down, and has state access. Watch the heartbeat — a stale one means the runner is gone." />
        </GCard>
        <GCard icon="lock" title="Protected jobs" accent="var(--state-crisis)">
          <GBlock
            what="Jobs requiring protected runtime, and their routing status."
            read="A blocked job shows why it's blocked and the corrective action — never a vague 'try again in chat'."
            use="If a healthy owner exists, click Delegate to route it (Viiera delegates; she never executes protected edits herself). If none is available, the job stays blocked until you bring a runner online." />
        </GCard>
        <div className="gd-callout"><Icon name="power" style={{ width: 15, height: 15, color: "var(--state-crisis)", flex: "none" }} /><span>The failure of job <span className="gd-mono">bc561cbf</span> (a 184s timeout) is exactly why this exists: protected work routes to an approved owner with state access, or it blocks — it does not silently fall back.</span></div>
      </React.Fragment>
    ),
  },
  {
    id: "glossary", label: "Glossary", icon: "doc",
    render: () => (
      <React.Fragment>
        <div className="gd-gl-h">Trust states <span>— the colour on every agent</span></div>
        <div className="gd-gl">
          {DEVD.TRUST.map((t) => {
            const c = DW.STATE_META[t.state].c;
            return <div key={t.id} className="gd-gl-row"><span className="gd-gl-led" style={{ background: c }} /><b style={{ color: c }}>{t.label}</b><span>{t.blurb}</span></div>;
          })}
        </div>
        <div className="gd-gl-h" style={{ marginTop: 18 }}>Competence levels <span>— the ladder</span></div>
        <div className="gd-gl">
          {DEVD.LEVELS.map((l) => (
            <div key={l.id} className="gd-gl-row"><span className="gd-gl-lvl">{l.id}</span><b>{l.label}</b><span>{l.blurb}</span></div>
          ))}
        </div>
      </React.Fragment>
    ),
  },
];

/* ── modal shell ──────────────────────────────────────────────────────────── */
function DevBoardGuide({ open, onClose }) {
  const [active, setActive] = useStateGd("start");
  useEffectGd(() => {
    if (!open) return;
    setActive("start");
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  useEffectGd(() => { const el = document.querySelector(".gd-body"); if (el) el.scrollTop = 0; }, [active]);
  if (!open) return null;
  const idx = GUIDE_SECTIONS.findIndex((s) => s.id === active);
  const sec = GUIDE_SECTIONS[idx] || GUIDE_SECTIONS[0];

  return (
    <div className="dev-modal-scrim" onClick={onClose}>
      <div className="gd-modal" onClick={(e) => e.stopPropagation()}>
        <div className="gd-head">
          <div className="gd-head-id">
            <span className="gd-head-ic"><Icon name="skill" style={{ width: 17, height: 17, color: "var(--violet-ink)" }} /></span>
            <div>
              <div className="gd-head-t">Agent Development — field guide</div>
              <div className="gd-head-s">What each card means, and how to use it</div>
            </div>
          </div>
          <button className="dev-modal-x focusable" onClick={onClose} aria-label="Close guide"><Icon name="close" style={{ width: 15, height: 15 }} /></button>
        </div>
        <div className="gd-cols">
          <nav className="gd-rail">
            {GUIDE_SECTIONS.map((s) => (
              <button key={s.id} className={"gd-rail-item" + (s.id === active ? " on" : "")} onClick={() => setActive(s.id)}>
                <Icon name={s.icon} style={{ width: 14, height: 14, flex: "none" }} />
                <span>{s.label}</span>
                {s.isNew && <span className="gd-new">new</span>}
              </button>
            ))}
          </nav>
          <div className="gd-body">
            <div className="gd-body-h"><Icon name={sec.icon} style={{ width: 16, height: 16, color: "var(--violet-ink)" }} />{sec.label}</div>
            {sec.render()}
          </div>
        </div>
        <div className="gd-foot">
          <span className="gd-foot-doc">Access is not trust · No promotion without evidence</span>
          <div className="gd-foot-nav">
            <button className="btn ghost" disabled={idx === 0} style={idx === 0 ? { opacity: 0.4, pointerEvents: "none" } : null} onClick={() => setActive(GUIDE_SECTIONS[idx - 1].id)}>← Back</button>
            {idx < GUIDE_SECTIONS.length - 1
              ? <button className="btn primary" onClick={() => setActive(GUIDE_SECTIONS[idx + 1].id)}>Next: {GUIDE_SECTIONS[idx + 1].label} →</button>
              : <button className="btn primary" onClick={onClose}>Got it</button>}
          </div>
        </div>
      </div>
    </div>
  );
}

function DevBoardGuideButton() {
  const [open, setOpen] = useStateGd(false);
  return (
    <React.Fragment>
      <button className="gd-trigger focusable" onClick={() => setOpen(true)}>
        <Icon name="skill" style={{ width: 13, height: 13 }} /> What am I looking at?
      </button>
      <DevBoardGuide open={open} onClose={() => setOpen(false)} />
    </React.Fragment>
  );
}

/* ── styles ───────────────────────────────────────────────────────────────── */
(function injectGuideStyles() {
  if (document.getElementById("gd-guide-styles")) return;
  const css = `
  .gd-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--violet-bright) 38%, transparent); background: color-mix(in srgb, var(--violet-bright) 13%, var(--panel-2)); color: var(--violet-ink); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .15s, box-shadow .15s; }
  .gd-trigger:hover { background: color-mix(in srgb, var(--violet-bright) 20%, var(--panel-2)); box-shadow: 0 0 18px color-mix(in srgb, var(--violet-bright) 22%, transparent); }
  .gd-modal { width: min(880px, 96vw); max-height: min(86vh, 760px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--hairline-2); border-radius: 16px; box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--violet-bright) 22%, transparent); overflow: hidden; }
  .gd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--hairline); flex: none; }
  .gd-head-id { display: flex; align-items: center; gap: 12px; }
  .gd-head-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--violet-bright) 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--violet-bright) 32%, transparent); }
  .gd-head-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
  .gd-head-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
  .gd-cols { display: grid; grid-template-columns: 214px 1fr; min-height: 0; flex: 1; }
  .gd-rail { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-right: 1px solid var(--hairline); overflow-y: auto; background: var(--panel-2); }
  .gd-rail-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--ink-3); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: all .14s; }
  .gd-rail-item:hover { color: var(--ink); background: var(--panel-3); }
  .gd-rail-item.on { color: var(--ink); background: color-mix(in srgb, var(--violet-bright) 14%, var(--panel-2)); border-color: color-mix(in srgb, var(--violet-bright) 40%, transparent); }
  .gd-rail-item span { flex: 1; min-width: 0; }
  .gd-new { flex: none !important; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--state-focus); border: 1px solid color-mix(in srgb, var(--state-focus) 40%, transparent); padding: 1px 5px; border-radius: 99px; }
  .gd-body { padding: 20px 22px; overflow-y: auto; min-width: 0; }
  .gd-body-h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 17px; margin-bottom: 14px; }
  .gd-lead { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 16px; }
  .gd-lead b { color: var(--ink); }
  .gd-slug, .gd-mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--violet-ink); background: color-mix(in srgb, var(--violet-bright) 13%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--violet-bright) 28%, transparent); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
  .gd-note { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin: 14px 0 0; padding: 11px 13px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--hairline); }
  .gd-doctrine { display: flex; flex-direction: column; gap: 9px; margin: 4px 0; }
  .gd-dt { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--hairline-2); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
  .gd-dt b { color: var(--ink); }
  .gd-dt > svg { flex: none; margin-top: 1px; }
  .gd-card { border: 1px solid var(--hairline-2); border-radius: 12px; background: var(--panel-2); margin-bottom: 12px; overflow: hidden; --gac: var(--violet-bright); }
  .gd-card-h { display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--hairline); }
  .gd-card-ic { width: 27px; height: 27px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--gac); background: color-mix(in srgb, var(--gac) 15%, transparent); border: 1px solid color-mix(in srgb, var(--gac) 34%, transparent); }
  .gd-card-b { padding: 13px 14px; }
  .gd-block { display: flex; flex-direction: column; gap: 9px; }
  .gd-what { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 0; }
  .gd-line { display: grid; grid-template-columns: 62px 1fr; gap: 11px; align-items: start; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
  .gd-tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 0; text-align: center; border-radius: 5px; border: 1px solid var(--hairline-2); align-self: start; }
  .gd-tag.read { color: var(--state-active); border-color: color-mix(in srgb, var(--state-active) 38%, transparent); }
  .gd-tag.use { color: var(--state-clear); border-color: color-mix(in srgb, var(--state-clear) 38%, transparent); }
  .gd-howto-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-ink); margin: 18px 0 11px; }
  .gd-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 11px; }
  .gd-step-n { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--violet-ink); background: color-mix(in srgb, var(--violet-bright) 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--violet-bright) 34%, transparent); }
  .gd-step-t { font-size: 13px; font-weight: 600; }
  .gd-step-d { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-top: 3px; }
  .gd-step-d b { color: var(--ink); }
  .gd-callout { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--state-caution) 8%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--state-caution) 30%, transparent); font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
  .gd-gl-h { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-bottom: 11px; }
  .gd-gl-h span { font-family: var(--font-ui); font-weight: 400; font-size: 12px; color: var(--ink-4); }
  .gd-gl { display: flex; flex-direction: column; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline-2); border-radius: 10px; overflow: hidden; }
  .gd-gl-row { display: grid; grid-template-columns: 18px 116px 1fr; gap: 11px; align-items: center; padding: 10px 13px; background: var(--panel-2); font-size: 12.5px; color: var(--ink-3); }
  .gd-gl-row b { color: var(--ink); font-size: 12.5px; }
  .gd-gl-led { width: 9px; height: 9px; border-radius: 99px; box-shadow: 0 0 8px currentColor; }
  .gd-gl-lvl { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--violet-ink); }
  .gd-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--hairline); flex: none; flex-wrap: wrap; }
  .gd-foot-doc { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-4); }
  .gd-foot-nav { display: flex; gap: 9px; margin-left: auto; }
  @media (max-width: 680px) {
    .gd-cols { grid-template-columns: 1fr; }
    .gd-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--hairline); padding: 10px; }
    .gd-rail-item { white-space: nowrap; flex: none; }
    .gd-rail-item span { flex: none; }
    .gd-line { grid-template-columns: 1fr; gap: 4px; }
    .gd-tag { width: 62px; }
  }`;
  const el = document.createElement("style"); el.id = "gd-guide-styles"; el.textContent = css; document.head.appendChild(el);
})();

Object.assign(window, { DevBoardGuide, DevBoardGuideButton });
