/* ─────────────────────────────────────────────────────────────────────────────
   Guided UI — shared component styles.

   Served at: _content/TechBenchEco.Blazor.Common/guided.css

   THEMING CONTRACT — the components are shared, the theme is NOT.

   QaToolKit and WebGuard have different token systems (--shell-* and --color-*),
   and QaToolKit additionally ships 8 signature skins that restyle everything.
   Imposing one palette here would either break both apps or kill the skins.

   So every colour resolves through a four-step fallback chain:

       var(--guided-X, var(--shell-X, var(--color-X, <literal>)))
         │               │              │              └── last-resort, so an
         │               │              │                  unstyled host still
         │               │              │                  renders legibly
         │               │              └── WebGuard's tokens
         │               └── QaToolKit's tokens (and its skins, which set these)
         └── explicit per-app override, when a host wants exact control

   ⚠ THE FIRST RUNG IS NOT OPTIONAL FOR EVERY HOST. The chain only themes itself
   for the two apps whose token systems it names. Spark.Web and SmudReplay use
   --sk-*, and the TechBench Hub uses bare --surface/--text/--accent — none of
   which appear above — so those three satisfied NO rung and fell all the way to
   the charcoal literals: a dark island on Spark's light/y2k/kenney/xp themes and
   on the Hub's white default. Fixed by having each such host set the --guided-*
   rung, which is exactly the escape hatch this contract provides. See:

       TechBenchEco.Spark.Web/wwwroot/app.css      (search "--guided-bg")
       SmudReplay.Web/wwwroot/app.css              (search "--guided-bg")
       TechBenchEco.TechBench/wwwroot/css/app.css  (search "--guided-bg")

   A new host MUST either use --shell-*/--color-* natively or add that block.
   Pinned by GuidedThemingContractTests so the next host can't forget.
   ───────────────────────────────────────────────────────────────────────────── */

.gl, .gf, .grp {
    --g-bg:         var(--guided-bg,         var(--shell-bg,           var(--color-bg,           #0e0e11)));
    --g-surface:    var(--guided-surface,    var(--shell-surface,      var(--color-surface,      #16161b)));
    /* --color-surface-2, not --color-surface-alt: WebGuard defines the former in all 11 of its themes and
       has never had the latter, so this rung was dead and every WebGuard theme got the literal. */
    --g-raised:     var(--guided-raised,     var(--shell-surface-2,    var(--color-surface-2,    #1c1d23)));
    --g-border:     var(--guided-border,     var(--shell-border,       var(--color-border,       #26272f)));
    --g-border-hi:  var(--guided-border-hi,  var(--shell-border-strong,var(--color-border-strong,#33343d)));
    --g-text:       var(--guided-text,       var(--shell-text,         var(--color-text,         #e8e8ec)));
    --g-muted:      var(--guided-muted,      var(--shell-text-muted,   var(--color-text-muted,   #8b8d97)));
    /* WebGuard has only two text tiers (--color-text, --color-text-muted), so the dim tier collapses onto
       muted there rather than naming a --color-text-subtle that has never existed — that spelling was a dead
       rung, which meant every WebGuard theme got the literal instead of degrading gracefully. */
    --g-dim:        var(--guided-dim,        var(--shell-text-dim,     var(--color-text-muted,   #5a5c66)));
    --g-accent:     var(--guided-accent,     var(--shell-accent,       var(--color-primary,      #5c8cff)));
    --g-accent-hi:  var(--guided-accent-hi,  var(--shell-accent-hover, var(--color-primary-hover,#7da3ff)));
    --g-ok:         var(--guided-ok,         var(--shell-ok,           var(--color-success,      #4ac47f)));
    --g-warn:       var(--guided-warn,       var(--shell-warn,         var(--color-warning,      #e0a33e)));
    --g-danger:     var(--guided-danger,     var(--shell-danger,       var(--color-danger,       #e0574a)));

    --g-radius: 6px;
    color: var(--g-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Landing ───────────────────────────────────────────────────────────── */
.gl { max-width: 1120px; margin: 0 auto; }
.gl-head { margin-bottom: 1.5rem; }
.gl-title { font-size: 1.75rem; font-weight: 650; margin: 0 0 .35rem; }
.gl-lead { font-size: 1.0625rem; color: var(--g-muted); margin: 0; max-width: 62ch; line-height: 1.5; }

.gl-cat { margin-bottom: 1.5rem; }
.gl-cat-head {
    display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
    padding-bottom: .35rem; margin-bottom: .6rem; border-bottom: 1px solid var(--g-border);
}
.gl-cat-name {
    font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--g-muted); font-weight: 600;
}
/* The category's ask shape, in the dimensions' own words — an honest subtitle rather than decoration. */
.gl-cat-asks {
    margin-left: auto; font-size: .78rem; color: var(--g-dim);
    font-family: "Cascadia Code", Consolas, ui-monospace, monospace;
}

.gl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .85rem; }
.gl-tile {
    display: flex; flex-direction: column; gap: .25rem; text-align: left;
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-radius);
    padding: 1.15rem 1.25rem; cursor: pointer; color: inherit; font: inherit;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.gl-tile:hover { border-color: var(--g-accent); background: var(--g-raised); transform: translateY(-1px); }
.gl-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-accent) 40%, transparent); }
.gl-tile-name { font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; }
.gl-tile-sub { font-size: .925rem; color: var(--g-muted); line-height: 1.5; }
.gl-tile-flag {
    margin-top: .35rem; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--g-dim);
}
.gl-tile-flag.gl-danger { color: var(--g-danger); }
/* Not hidden — an intent whose tool has no engine still shows, and says what it will hand you. */
.gl-unreachable { opacity: .68; }

.gl-browse { margin-top: 1.75rem; font-size: .95rem; color: var(--g-muted); }
.gl-link {
    background: none; border: none; padding: 0 0 0 .3rem; font: inherit;
    color: var(--g-accent); cursor: pointer; text-decoration: underline;
}

/* ── Form ──────────────────────────────────────────────────────────────── */
.gf { display: flex; flex-direction: column; gap: 1.35rem; }
.gf-field { display: flex; flex-direction: column; gap: .5rem; }
/* Progressive reveal without paging: dimmed, not hidden, so the whole shape of the job stays visible. */
.gf-locked { opacity: .35; pointer-events: none; }
.gf-label { font-size: 1rem; font-weight: 550; }

.gf-input {
    background: var(--g-bg); border: 1px solid var(--g-border-hi); border-radius: var(--g-radius);
    color: var(--g-text); font: inherit; font-size: 1rem; padding: .6rem .8rem; width: 100%;
}
.gf-input:focus { outline: none; border-color: var(--g-accent); }

.gf-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.gf-chip {
    background: var(--g-bg); border: 1px solid var(--g-border-hi); border-radius: 4px;
    color: var(--g-muted); font: inherit; font-size: .95rem; padding: .45rem .85rem; cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.gf-chip:hover:not(:disabled) { color: var(--g-text); }
.gf-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-accent) 40%, transparent); }
.gf-chip.gf-on {
    background: color-mix(in srgb, var(--g-accent) 15%, transparent);
    border-color: var(--g-accent);
    color: var(--g-text); font-weight: 500;
}
.gf-note { font-size: .85rem; color: var(--g-dim); }
.gf-note.gf-warn { color: var(--g-warn); }

/* ── Run panel ─────────────────────────────────────────────────────────── */
.grp { display: flex; flex-direction: column; gap: .8rem; }
.grp-block {
    background: var(--g-surface); border: 1px solid var(--g-border);
    border-radius: var(--g-radius); padding: 1.1rem 1.2rem;
}
.grp-head {
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--g-muted); font-weight: 600; margin-bottom: .6rem;
}

.grp-url {
    background: var(--g-bg); border: 1px solid var(--g-border); border-radius: 5px;
    padding: .6rem .7rem; overflow-x: auto;
}
.grp-url code {
    font-family: "Cascadia Code", Consolas, ui-monospace, monospace;
    font-size: .875rem; line-height: 1.8; color: var(--g-accent-hi); word-break: break-all;
}
.grp-pending { font-size: .9rem; color: var(--g-dim); font-style: italic; }
.grp-note { font-size: .825rem; color: var(--g-dim); margin-top: .45rem; line-height: 1.45; }

.grp-kv { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.1rem; margin: 0; font-size: .925rem; }
.grp-kv dt { color: var(--g-dim); }
.grp-kv dd { margin: 0; color: var(--g-text); word-break: break-word; }
.grp-kv dd.grp-empty { color: var(--g-dim); font-style: italic; }
.grp-dim { color: var(--g-dim); }

.grp-gates { display: flex; flex-wrap: wrap; gap: .4rem; }
.grp-gate {
    font-size: .8rem; color: var(--g-muted);
    border: 1px solid var(--g-border-hi); border-radius: 999px; padding: .15rem .6rem;
}
.grp-gate.grp-danger { color: var(--g-danger); border-color: color-mix(in srgb, var(--g-danger) 45%, transparent); }

/* A disabled button with no reason is a give-up moment. Always say why. */
.grp-blocked {
    font-size: .9rem; color: var(--g-warn); line-height: 1.5;
    border-left: 2px solid var(--g-warn); padding: .45rem .7rem;
    background: color-mix(in srgb, var(--g-warn) 8%, transparent);
}

.grp-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.grp-btn {
    font: inherit; font-size: .95rem; border-radius: 5px; padding: .65rem 1.15rem; cursor: pointer;
    background: var(--g-raised); border: 1px solid var(--g-border-hi); color: var(--g-text);
    transition: border-color .13s ease, background .13s ease;
}
.grp-btn:hover:not(:disabled) { border-color: var(--g-accent); }
.grp-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-accent) 40%, transparent); }
.grp-btn:disabled { opacity: .45; cursor: not-allowed; }
.grp-go { background: var(--g-accent); border-color: var(--g-accent); color: #08101f; font-weight: 600; }
.grp-go:hover:not(:disabled) { background: var(--g-accent-hi); border-color: var(--g-accent-hi); }
.grp-ghost { background: none; color: var(--g-accent-hi); }

.grp-escape {
    font-size: .85rem; color: var(--g-dim); line-height: 1.5;
    border-top: 1px dashed var(--g-border-hi); padding-top: .6rem;
}

@media (prefers-reduced-motion: reduce) {
    .gl-tile, .gf-chip, .grp-btn { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Plan card + truth line — "here is what is about to happen", before it happens.

   Shared because both hosts need the same guarantee: the box is only safe to
   paste into because a wrong reading costs a GLANCE rather than a wrong run, and
   this card is the glance. Shipping the box without it (which Spark.Web briefly
   did) delivers the fast half without the safe half.

   Uses ONLY the 13 --guided-* keys already in the contract above, so it adds no
   new theming obligation for any host — the two hosts that map the --guided-*
   rung get it for free, and QaToolKit's skins keep working through --shell-*.
   ────────────────────────────────────────────────────────────────────────────── */

.gp-plan {
    border: 1px solid var(--guided-border, var(--shell-border, var(--color-border, #2a2a2e)));
    border-radius: 8px;
    background: var(--guided-surface, var(--shell-surface, var(--color-surface, #17171a)));
    padding: 16px;
}

.gp-plan-headline { font-size: 1.05rem; line-height: 1.35; margin-bottom: 4px; }
.gp-plan-job { font-weight: 600; color: var(--guided-text, var(--shell-text, var(--color-text, #e8e8ea))); }
.gp-plan-tail { color: var(--guided-muted, var(--shell-text-muted, var(--color-text-muted, #9a9aa2))); }

.gp-plan-target {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    color: var(--guided-muted, var(--shell-text-muted, var(--color-text-muted, #9a9aa2)));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 12px;
}

.gp-truth {
    display: grid;
    grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--guided-border, var(--shell-border, var(--color-border, #2a2a2e)));
    font-size: 0.85rem;
}

.gp-plan-what { border-top: 0; padding-top: 8px; }
.gp-truth-label { color: var(--guided-muted, var(--shell-text-muted, var(--color-text-muted, #9a9aa2))); margin: 0; }
.gp-truth-value {
    margin: 0;
    color: var(--guided-text, var(--shell-text, var(--color-text, #e8e8ea)));
    min-width: 0; overflow-wrap: anywhere;
}

/* Anything that changes what the result MEANS. */
.gp-unusual { color: var(--guided-warn, var(--shell-warn, var(--color-warning, #d99a2b))); }
.gp-truth-flag { margin-right: 4px; }

.gp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gp-chip, .gp-chip-more {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem; padding: 1px 7px; border-radius: 4px;
}
.gp-chip {
    background: var(--guided-raised, var(--shell-surface-2, var(--color-surface-2, #202024)));
    color: var(--guided-muted, var(--shell-text-muted, var(--color-text-muted, #9a9aa2)));
}
.gp-chip-more { color: var(--guided-muted, var(--shell-text-muted, var(--color-text-muted, #9a9aa2))); }

.gp-blocked {
    margin-top: 12px; padding: 8px 12px;
    border: 1px solid var(--guided-warn, var(--shell-warn, var(--color-warning, #d99a2b)));
    border-radius: 4px;
    color: var(--guided-warn, var(--shell-warn, var(--color-warning, #d99a2b)));
    font-size: 0.85rem;
}

.gp-plan-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid var(--guided-border, var(--shell-border, var(--color-border, #2a2a2e)));
}

.gp-plan-escape {
    margin-top: 8px; font-size: 0.75rem;
    color: var(--guided-muted, var(--shell-text-muted, var(--color-text-muted, #9a9aa2)));
}

.gp-btn {
    padding: 8px 16px;
    border: 1px solid var(--guided-border, var(--shell-border, var(--color-border, #2a2a2e)));
    border-radius: 4px;
    background: var(--guided-raised, var(--shell-surface-2, var(--color-surface-2, #202024)));
    color: var(--guided-text, var(--shell-text, var(--color-text, #e8e8ea)));
    cursor: pointer; font-size: 0.85rem;
}
.gp-btn:hover:not(:disabled) {
    border-color: var(--guided-border-hi, var(--shell-border-strong, var(--color-text-muted, #55555c)));
}
.gp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.gp-btn-go {
    background: var(--guided-accent, var(--shell-accent, var(--color-primary, #3b82f6)));
    border-color: var(--guided-accent, var(--shell-accent, var(--color-primary, #3b82f6)));
    color: #fff; font-weight: 600;
}
.gp-btn-go:hover:not(:disabled) {
    background: var(--guided-accent-hi, var(--shell-accent-hover, var(--color-primary, #3b82f6)));
}

.gp-btn-ghost { background: transparent; }