/* Self-hosted IBM Plex (latin subset, woff2) — replaces the render-blocking
   Google Fonts request. Files in /assets/fonts/. See brand-rules §1.6 / §1.12. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-700.woff2") format("woff2"); }

/* ============================================================
   Shared header + footer frame for /tools/ widget pages.
   Reuses each page's own design tokens (--bg, --accent, --ink,
   --muted, --dim, --line, --sans, --mono), so it adapts to
   whichever tool links it. Standardizes the hero + footer.

   Visibility model:
   - .tool-hero / .tool-footer show only on the standalone page.
   - .tool-card-title (the widget's small in-card title) shows
     ONLY when the page is embedded as an iframe (body.embedded),
     so blog embeds keep a heading while standalone pages don't
     duplicate the hero.
   ============================================================ */

/* ---- atmosphere (standalone only) — matches the primer's hero backdrop ---- */
body:not(.embedded) {
  background-image:
    radial-gradient(900px 600px at 12% -8%, rgba(226, 107, 43, .10), transparent 60%),
    radial-gradient(820px 620px at 92% 2%, rgba(107, 130, 168, .10), transparent 55%);
  background-repeat: no-repeat;
}

/* ---- hero (mirrors the llm-hardware primer hero exactly) ---- */
.tool-hero { max-width: 860px; margin: 0 auto; padding: 64px 2px 44px; }
.tool-hero .eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.tool-hero .eyebrow .ln { height: 1px; width: 46px; background: linear-gradient(90deg, var(--accent), transparent); }
.tool-hero h1 {
  font-family: var(--sans); font-weight: 700; font-size: clamp(36px, 6.4vw, 66px);
  line-height: 1.0; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 22px; color: var(--ink);
}
.tool-hero h1 .accent { color: var(--accent); text-shadow: 0 0 20px rgba(226, 107, 43, .30); }
.tool-hero .lead { font-size: clamp(16px, 2.1vw, 20px); line-height: 1.55; color: var(--muted); max-width: 680px; margin: 0; }
.tool-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tool-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted);
  border: 1px solid var(--line); background: var(--panel); padding: 7px 12px; border-radius: 999px;
  display: flex; align-items: center; gap: 7px;
}
.tool-pill svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

/* ---- footer (lighter "Labs" style) ---- */
.tool-footer {
  max-width: 860px; margin: 36px auto 8px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.tool-footer .fbrand { font-family: var(--sans); font-weight: 700; letter-spacing: .14em; font-size: 13px; color: var(--ink); }
.tool-footer .fbrand .accent { color: var(--accent); }
.tool-footer .ftag { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 8px; line-height: 1.6; max-width: 52ch; }
.tool-footer .ftail { text-align: right; }
.tool-footer .flinks { font-family: var(--mono); font-size: 11.5px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.tool-footer .flinks a { color: var(--accent); text-decoration: none; }
.tool-footer .flinks a:hover { text-decoration: underline; }
/* "All tools" rendered as a boxed button, matching the /tools/ footer links */
.tool-footer .flinks a.fbtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid rgba(226, 107, 43, .35); border-radius: 10px;
  color: rgba(238, 242, 255, .78); font-family: var(--sans); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .15s;
}
.tool-footer .flinks a.fbtn:hover {
  border-color: rgba(226, 107, 43, .85); color: rgba(238, 242, 255, .95);
  background: rgba(226, 107, 43, .06); box-shadow: 0 2px 12px rgba(226, 107, 43, .18);
  transform: translateY(-1px); text-decoration: none;
}
.tool-footer .flinks a.fbtn svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.tool-footer .fcopy { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 8px; }
@media (max-width: 680px) {
  .tool-footer { flex-direction: column; align-items: flex-start; }
  .tool-footer .ftail { text-align: left; }
  .tool-footer .flinks { justify-content: flex-start; }
}

/* ---- standalone vs embedded visibility ---- */
.tool-card-title { display: none; }
body.embedded .tool-card-title { display: block; }
body.embedded .tool-hero,
body.embedded .tool-footer { display: none; }

/* ---- scroll-progress bar (standalone only) ----
   JS-driven via scroll-progress.js (sets --scroll-progress 0→1), so it works in
   every browser. Replaced a pure-CSS animation-timeline version that only rendered
   in Chromium 115+. Each framed tool must load <script src="../scroll-progress.js">. */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, var(--accent), var(--steel, #6b82a8));
  box-shadow: 0 0 6px rgba(226, 107, 43, .35);
  will-change: transform;
}
body.embedded .scroll-progress { display: none; }

/* ---- standard contact CTA (Notes/Labs standalone only; see brand rules §1.15) ----
   Same component on every blog post + tool page; copy (hook + sub) adapts per page.
   Self-contained button so it never depends on a host tool's own .btn classes.
   Hidden when embedded — the host post carries its own CTA. */
.tool-cta {
  max-width: 860px; margin: 24px auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 20px; padding: 16px 18px;
  background: rgba(226, 107, 43, .10);
  border: 1px solid rgba(226, 107, 43, .38); border-left: 3px solid var(--accent);
  border-radius: 12px;
}
.tool-cta-text { display: flex; flex-direction: column; gap: 3px; }
.tool-cta-text strong { color: var(--ink); font-size: 15px; font-weight: 600; }
.tool-cta-text span { color: var(--muted); font-size: 13px; }
.tool-cta .btn-primary {
  appearance: none; flex: none; font-family: var(--sans); font-size: 14px; font-weight: 600;
  border-radius: 12px; padding: 12px 18px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--bg); border: 1px solid rgba(0, 0, 0, .15);
  transition: transform .12s, filter .15s, border-color .15s;
}
.tool-cta .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); text-decoration: none; }
.tool-cta .btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.embedded .tool-cta { display: none; }

/* ---- standard outlined "action" button — Restart / Replay / Start over and a
   tool's primary in-tool action (brand rules §7.6.5). Outlined orange + faint tint +
   glow on hover so the leading icon (↻ etc.) pops. The FILLED .btn-primary stays for
   the contact CTA only. Self-contained — never depends on a tool's own .btn. ---- */
.btn-action {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--accent);
  background: rgba(226, 107, 43, .08);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer; text-decoration: none;
  transition: background .16s, box-shadow .16s, border-color .16s, transform .12s;
}
.btn-action:hover:not(:disabled) {
  background: rgba(226, 107, 43, .16);
  box-shadow: 0 0 20px rgba(226, 107, 43, .30);
  transform: translateY(-1px);
}
.btn-action:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---- universal keyboard focus ring for ALL framed tools (§7.6.7). One place,
   so gpu/idle/will-it-run/pc-crash controls all get a visible focus outline —
   closes the gap where 3 of the tools had no :focus-visible at all. ---- */
.btn-action:focus-visible,
button:focus-visible,
a.btn:focus-visible,
.chip:focus-visible,
.seg button:focus-visible,
.mode button:focus-visible,
.opt:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- lab footer (terminal style; unified across Notes articles + Labs tools) ---- */
.lab-footer {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px 32px; flex-wrap: wrap;
  max-width: 860px; margin: 56px auto 0; padding: 22px 2px 8px;
  border-top: 1px solid rgba(226, 107, 43, 0.4);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
}
.lab-prompt { color: rgba(238, 242, 255, 0.72); letter-spacing: 0.02em; }
.lab-prompt .lab-accent { color: var(--accent); font-weight: 600; }
.lab-cursor {
  display: inline-block; width: 7px; height: 14px; margin-left: 5px;
  background: var(--accent); vertical-align: middle;
  animation: lab-blink 1.1s steps(1, end) infinite;
}
@keyframes lab-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.lab-brand { margin-top: 9px; color: rgba(238, 242, 255, 0.38); letter-spacing: 0.16em; font-size: 10.5px; }
.lab-foot-right { text-align: right; }
.lab-links { display: flex; gap: 16px; justify-content: flex-end; flex-wrap: wrap; }
.lab-links a { color: var(--accent); text-decoration: none; }
.lab-links a:hover { text-decoration: underline; }
.lab-copy { margin-top: 10px; color: rgba(238, 242, 255, 0.38); font-size: 10.5px; }
body.embedded .lab-footer { display: none; }
@media (max-width: 600px) {
  .lab-footer { flex-direction: column; align-items: flex-start; }
  .lab-foot-right, .lab-links { text-align: left; justify-content: flex-start; }
}