/* ==========================================================================
   HTMLToolz — Prism legacy layer
   Loaded after ui.css by views/layout.php for the retired v1 product pages
   (still live for existing customers). It adds the few pieces the shared
   Prism sheet does not have — the command palette, the newsletter slot in
   the colophon, legacy button/flash hooks emitted by older templates and
   scripts — plus small `lg-` helpers the legacy marketing pages share.
   Product workbenches live in legacy-products.css.
   Colour comes only from Prism tokens and tones.
   ========================================================================== */

/* ── 1. Shell additions ─────────────────────────────────────────────────── */
.lg-banner > p { flex: 1; text-align: center; }
.lg-banner a { color: var(--tone-ink); font-weight: 650; }

.lg-newsletter { margin-top: 26px; max-width: 22rem; }
.lg-newsletter p { margin: 0 0 12px; }
.lg-newsletter__form { display: flex; gap: 8px; }
.lg-newsletter__form .input { flex: 1; min-width: 0; border-radius: var(--r-pill); }
.lg-newsletter__form .btn { flex: none; }

/* Command palette (Ctrl/Cmd+K) driven by assets/js/app.js */
.cmdk-overlay { position: fixed; inset: 0; z-index: 500; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; background: color-mix(in srgb, var(--inverse) 30%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cmdk-overlay[hidden] { display: none; }
.cmdk-panel { width: min(600px, 100%); overflow: hidden; border-radius: var(--r-lg); background: var(--bg-elevated); box-shadow: var(--lift-3); animation: prism-rise 0.28s var(--ease); outline: none; }
.cmdk-search { padding: 14px 14px 0; }
.cmdk-search > svg.glyph { left: 28px; top: calc(50% + 7px); }
.cmdk-search > input { min-height: 50px; font-size: 1.02rem; }
.cmdk-list { display: grid; gap: 2px; max-height: min(420px, 56vh); overflow-y: auto; padding: 10px; }
.cmdk-item { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.cmdk-item strong { font-size: 0.95rem; font-weight: 650; }
.cmdk-item span { color: var(--text-3); font-size: 0.84rem; }
.cmdk-item.active, .cmdk-item[aria-selected="true"] { background: var(--iris-wash); }
.cmdk-item.active strong { color: var(--iris-ink); }
.cmdk-empty { padding: 26px 14px; color: var(--text-3); text-align: center; font-size: 0.92rem; }
.cmdk-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 18px; border-top: 1px solid var(--hairline); background: var(--bg); color: var(--text-3); font-size: 0.78rem; }

/* Checkout failures inserted by app.js next to .upgrade-btn */
.checkout-error { flex-basis: 100%; margin-top: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--coral-wash); color: var(--coral-ink); font-size: 0.88rem; font-weight: 600; }

/* ── 2. Legacy hooks still emitted by older markup ──────────────────────── */
.container { width: 100%; max-width: calc(var(--page-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--text-3); }
.kbd { display: inline-block; min-width: 1.6em; padding: 0.1em 0.45em; border-radius: 6px; border: 1px solid var(--hairline-2); background: var(--bg-elevated); color: var(--text-2); font: 600 0.75em/1.4 var(--font-code); text-align: center; }

.btn-secondary, .btn-ghost, .btn-outline { --btn-bg: var(--fill); --btn-fg: var(--text); --btn-hover: var(--fill-strong); }
.btn-danger, .btn-danger-sm { --btn-bg: var(--coral-wash); --btn-fg: var(--coral-ink); --btn-hover: color-mix(in srgb, var(--coral-wash) 75%, var(--coral)); }
.btn-sm, .btn-danger-sm { min-height: 34px; padding: 0 14px; font-size: 0.85rem; gap: 6px; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; }
.btn-block { width: 100%; }

.flash { margin: 16px auto 0; width: min(100% - 2 * var(--gutter), var(--page-max)); padding: 14px 18px; border-radius: var(--r-md); background: var(--sky-wash); color: var(--text); font-size: 0.93rem; }
.flash-success { background: var(--mint-wash); }
.flash-error { background: var(--coral-wash); }
.flash-warning { background: var(--sun-wash); }

/* ── 3. Shared legacy-page helpers ──────────────────────────────────────── */
.lg-label { display: block; margin: 0 0 10px; color: var(--text-3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; }
.card--dark .lg-label, .band--dark .lg-label { color: color-mix(in srgb, currentColor 62%, transparent); }
.card--dark :is(h1, h2, h3, h4, strong) { color: inherit; }
.card--dark { box-shadow: var(--lift-1); }

.lg-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; }
.lg-cta > :first-child { flex: 1 1 26rem; min-width: 0; }
.lg-cta .t-heading { margin-bottom: 8px; }

.lg-statement { display: grid; gap: 10px; align-content: start; }
.lg-statement::before { content: ""; height: 4px; width: 64px; margin-bottom: 8px; border-radius: var(--r-pill); background: var(--spectrum); }
.lg-statement__num { font-size: clamp(3.2rem, 7vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em; background: var(--spectrum-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.lg-checks { display: grid; gap: 10px; margin: 18px 0 22px; padding: 0; list-style: none; font-size: 0.93rem; }
.lg-checks li { display: flex; align-items: flex-start; gap: 10px; }
.lg-checks svg.glyph { width: 18px; height: 18px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--mint-wash); color: var(--mint-ink); stroke-width: 3; }
.card--dark .lg-checks svg.glyph { background: color-mix(in srgb, var(--mint) 24%, transparent); color: var(--mint); }

.lg-bullets { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: 0.92rem; }
.lg-bullets li { position: relative; padding-left: 18px; }
.lg-bullets li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }

.lg-steps { display: grid; gap: 10px; margin: 18px 0 22px; padding: 0; list-style: none; counter-reset: lg-step; }
.lg-steps li { counter-increment: lg-step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--text-2); font-size: 0.95rem; }
.lg-steps li::before { content: counter(lg-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--tone); color: var(--tone-on); font-size: 0.8rem; font-weight: 800; }
.lg-steps li:nth-child(4n + 1) { --tone: var(--iris); }
.lg-steps li:nth-child(4n + 2) { --tone: var(--grape); }
.lg-steps li:nth-child(4n + 3) { --tone: var(--coral); }
.lg-steps li:nth-child(4n + 4) { --tone: var(--mint); }

.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
a.tag { text-decoration: none; transition: background-color 0.15s, color 0.15s; }
a.tag:hover { background: var(--tone-wash); color: var(--tone-ink); }

.lg-linkcard { display: grid; gap: 6px; align-content: start; color: var(--text); text-decoration: none; }
.lg-linkcard::before { content: ""; width: 28px; height: 4px; margin-bottom: 10px; border-radius: var(--r-pill); background: var(--tone); }
.lg-linkcard strong { font-size: 1.02rem; font-weight: 750; letter-spacing: -0.015em; }
.lg-linkcard span { color: var(--text-3); font-size: 0.9rem; }
.lg-linkcard:hover strong { color: var(--tone-ink); }

.lg-disclosure { border-top: 1px solid var(--hairline); padding-top: 12px; }
.lg-disclosure > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; color: var(--text); font-size: 0.92rem; font-weight: 650; }
.lg-disclosure > summary::-webkit-details-marker { display: none; }
.lg-disclosure > summary::before { content: ""; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); transition: transform 0.2s var(--ease); }
.lg-disclosure[open] > summary::before { transform: rotate(45deg); }
.lg-disclosure > summary:hover { color: var(--iris-ink); }
.lg-disclosure[open] > summary { margin-bottom: 12px; }

pre.console.lg-output, .console.lg-output { max-height: 360px; padding: 16px 18px; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--hairline); font-size: 0.78rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.lg-output code { font: inherit; background: none; padding: 0; color: inherit; }
pre.console.lg-console-flat, .console.lg-console-flat { border-radius: 0; box-shadow: none; }
.console code { background: none; padding: 0; color: inherit; font: inherit; }

.lg-recipe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; border-top: 4px solid var(--tone); }
.lg-recipe h3 { margin-bottom: 10px; }
.lg-recipe .pill { white-space: normal; }

.lg-filter { flex-wrap: wrap; }
.lg-filter button { appearance: none; border: 0; padding: 8px 14px; border-radius: 9px; background: transparent; color: var(--text-3); font: 650 0.875rem/1.2 var(--font); cursor: pointer; transition: background-color 0.18s var(--ease), color 0.18s; }
.lg-filter button:hover { color: var(--text); }
.lg-filter button[aria-pressed="true"] { background: var(--bg-elevated); color: var(--text); box-shadow: var(--lift-2); }
.lg-filter button:focus-visible { outline: none; box-shadow: var(--ring); }

.lg-release h2 { margin: 0 0 4px; font-size: 1.2rem; letter-spacing: -0.02em; }
.lg-release + .lg-release { margin-top: 16px; }
.lg-release__date { margin: 0 0 14px; color: var(--text-4); font-size: 0.82rem; font-weight: 600; }
.lg-release ul { margin: 0; padding-left: 1.2em; color: var(--text-2); font-size: 0.95rem; }
.lg-release li { margin-bottom: 0.45em; }
.lg-release li::marker { color: var(--iris); }
.lg-release a { color: var(--iris-ink); font-weight: 600; }
.lg-release:first-of-type { box-shadow: 0 0 0 2px var(--iris), var(--lift-2); }

.lg-journey-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .lg-journey-3 { grid-template-columns: minmax(0, 1fr); } }

.lg-scorecard { display: grid; gap: 12px; justify-items: start; }
.lg-scorecard__num { font-size: clamp(4rem, 9vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em; color: var(--tone-ink); }

.lg-queue { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lg-queue li { position: relative; padding: 12px 14px 12px 20px; border-radius: var(--r-sm); background: var(--bg); color: var(--text-2); font-size: 0.93rem; }
.lg-queue li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tone); }
.lg-queue span { color: var(--tone-ink); font-weight: 800; }

.lg-inline-form { display: flex; flex: 1 1 22rem; gap: 8px; }
.lg-inline-form .input { flex: 1; min-width: 0; }
.lg-inline-form .btn { flex: none; }
@media (max-width: 520px) { .lg-inline-form { flex-direction: column; } }

.lg-finding { grid-template-columns: auto minmax(0, 1fr); align-items: center; box-shadow: none; background: var(--bg); }

.lg-tools { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.lg-tool { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-md); background: var(--tone-wash); }
.lg-tool code { justify-self: start; max-width: 100%; overflow-wrap: anywhere; background: var(--bg-elevated); color: var(--tone-ink); font-weight: 600; }
.lg-tool span { color: var(--text-2); font-size: 0.88rem; }
.lg-label .status { margin-left: 8px; vertical-align: 1px; }

.lg-prompts { gap: 12px; margin-top: 18px; }
.lg-prompts blockquote { margin: 0; padding: 16px 18px; border-radius: var(--r-md); background: var(--iris-wash); color: var(--text); font-size: 0.95rem; font-weight: 550; line-height: 1.5; }

.lg-notes h3 { margin: 0 0 6px; font-size: 1rem; }
.lg-notes p { color: var(--text-3); font-size: 0.93rem; }
.lg-notes p:last-child { margin-bottom: 0; }

.lg-faq { display: grid; margin: 18px 0 0; border-top: 1px solid var(--hairline); }
.lg-faq dt { padding-top: 18px; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; }
.lg-faq dd { margin: 6px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); color: var(--text-3); font-size: 0.95rem; }

.tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--text); text-decoration: none; }
.tool-card h3 { margin: 0; }
.tool-card .txtlink { margin-top: auto; padding-top: 8px; }

.stage .t-title { overflow-wrap: anywhere; }
pre.console { max-width: 100%; }
@media (max-width: 520px) {
  .stage__actions > .btn { flex: 1 1 100%; }
  .lg-newsletter__form { flex-wrap: wrap; }
  .lg-newsletter__form .btn { flex: 1 1 100%; }
}

/* Grid items in single-column stacks may shrink below their content width. */
:is(.lg-statement, .lg-linkcard, .lg-recipe, .lg-steps, .lg-checks, .lg-bullets, .lg-faq) > * { min-width: 0; }