/* Build + Test pages: plain-language guides, journey bar, verdicts, cards. Grove tokens only (--ui-*). */

/* ---- "What is this?" popover ---- */
.uxb-term{display:inline-flex;align-items:center;gap:4px}
.uxb-what{display:inline-block;position:relative;vertical-align:middle;font-weight:400;text-transform:none;letter-spacing:0}
.uxb-what>summary{list-style:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ui-muted) 60%,transparent);color:var(--ui-muted);font:700 11px/1 var(--ui-font);cursor:help;user-select:none}
.uxb-what>summary::-webkit-details-marker{display:none}
.uxb-what>summary:hover,.uxb-what[open]>summary{color:var(--ui-accent-ink);background:var(--ui-accent);border-color:var(--ui-accent)}
.uxb-what>summary:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.uxb-what-body{position:absolute;z-index:40;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:min(300px,80vw);display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--ui-field);border:1px solid color-mix(in srgb,var(--ui-accent) 35%,transparent);box-shadow:0 12px 32px rgba(0,0,0,.45);color:var(--ui-ink);font:400 13px/1.45 var(--ui-font);text-align:left;white-space:normal}
.uxb-what-body b{color:var(--ui-accent);font-weight:700}
@media (max-width:600px){.uxb-what-body{position:fixed;left:16px;right:16px;top:auto;bottom:16px;transform:none;width:auto}}

/* ---- Journey bar ---- */
.uxb-journey{margin:0 0 var(--ui-gap,16px)}
.uxb-journey ol{list-style:none;margin:0;padding:6px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-radius:calc(var(--ui-radius,16px) - 4px);background:var(--ui-card);border:1px solid var(--ui-card-line)}
.uxb-journey li{min-width:0}
.uxb-journey li>a,.uxb-journey li>.uxb-journey-mark{text-decoration:none}
.uxb-journey li>a,.uxb-journey li:not(:has(a)){display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;color:var(--ui-ink)!important}
.uxb-journey li>a:hover{background:color-mix(in srgb,var(--ui-ink) 6%,transparent)}
.uxb-journey-mark{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--ui-line);font:700 12px/1 var(--ui-font);color:var(--ui-muted)}
.uxb-journey li[data-state=done] .uxb-journey-mark{background:color-mix(in srgb,var(--ui-ok) 20%,transparent);border-color:var(--ui-ok);color:var(--ui-ok)}
.uxb-journey li[data-state=current] .uxb-journey-mark{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-ink)}
.uxb-journey li[data-state=current]>a,.uxb-journey li[data-state=current]:not(:has(a)){background:color-mix(in srgb,var(--ui-accent) 9%,transparent)}
.uxb-journey-text{display:grid;min-width:0}
.uxb-journey-text b{font-size:13px;font-weight:700}
.uxb-journey-text small{font-size:11.5px;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.uxb-journey ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:4px}.uxb-journey-text small{display:none}.uxb-journey li>a,.uxb-journey li:not(:has(a)){flex-direction:column;gap:4px;padding:6px 2px;text-align:center}.uxb-journey-text b{font-size:11.5px}}

/* ---- Intro / guide cards ---- */
.uxb-intro{margin-bottom:var(--ui-gap,16px);border-color:color-mix(in srgb,var(--ui-accent) 22%,var(--ui-card-line))!important}
.uxb-intro-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.uxb-intro h2{margin:0;font-size:var(--ui-card-title,16px)}
.uxb-intro>p{margin:6px 0 0}
.uxb-intro-steps{list-style:none;counter-reset:uxb;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.uxb-intro-steps li{counter-increment:uxb;display:grid;gap:3px;padding:12px 12px 12px 46px;position:relative;border-radius:14px;background:color-mix(in srgb,var(--ui-ink) 4%,transparent)}
.uxb-intro-steps li::before{content:counter(uxb);position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ui-accent) 18%,transparent);color:var(--ui-accent);font:700 12px/1 var(--ui-font)}
.uxb-intro-steps b{font-size:13.5px}
.uxb-intro-steps span{font-size:12.5px;color:var(--ui-muted);line-height:1.4}
.uxb-intro-again{margin:0 0 8px;text-align:right}
.uxb-better{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--ui-accent) 40%,transparent)}
.uxb-better>div{display:grid;gap:2px;flex:1 1 260px}.uxb-better span{font-size:12.5px;color:var(--ui-muted)}

/* ---- Verdict banner ---- */
.uxb-verdict{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:calc(var(--ui-radius,16px) - 4px);border:1px solid var(--ui-card-line);background:var(--ui-card);margin-bottom:var(--ui-gap,16px)}
.uxb-verdict b{font-size:17px;letter-spacing:-.01em}
.uxb-verdict p{margin:4px 0 0;color:var(--ui-muted);font-size:13.5px;line-height:1.5;max-width:80ch}
.uxb-verdict>div:nth-child(2){flex:1 1 auto;min-width:0}
.uxb-verdict-icon{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.uxb-verdict[data-tone=up]{border-color:color-mix(in srgb,var(--ui-up) 40%,transparent)}.uxb-verdict[data-tone=up] .uxb-verdict-icon{background:color-mix(in srgb,var(--ui-up) 18%,transparent);color:var(--ui-up)}
.uxb-verdict[data-tone=down]{border-color:color-mix(in srgb,var(--ui-down) 40%,transparent)}.uxb-verdict[data-tone=down] .uxb-verdict-icon{background:color-mix(in srgb,var(--ui-down) 18%,transparent);color:var(--ui-down)}
.uxb-verdict[data-tone=warn]{border-color:color-mix(in srgb,var(--ui-warn) 40%,transparent)}.uxb-verdict[data-tone=warn] .uxb-verdict-icon{background:color-mix(in srgb,var(--ui-warn) 18%,transparent);color:var(--ui-warn)}
.uxb-verdict-action{flex:none;align-self:center}
@media (max-width:600px){.uxb-verdict{flex-wrap:wrap}.uxb-verdict-action{width:100%}.uxb-verdict-action .ui-button{width:100%}}

/* ---- Cards grid (ideas, marketplace, start templates) ---- */
.uxb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--ui-gap,16px)}
.uxb-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.uxb-card h3{margin:0;font-size:16px;letter-spacing:-.01em;overflow-wrap:anywhere}
.uxb-card p{margin:0}
.uxb-card .uxb-card-meta{font-size:12.5px;color:var(--ui-muted)}
.uxb-card .uxb-card-foot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.uxb-card details>summary{cursor:pointer;color:var(--ui-muted);font-size:13px}
.uxb-card pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;font-size:12px;padding:10px;border-radius:10px;background:var(--ui-field)}
.uxb-card ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--ui-muted)}
@media (max-width:420px){.uxb-cards{grid-template-columns:minmax(0,1fr)}}

/* ---- Filter chips row / toolbar ---- */
.uxb-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--ui-gap,16px)}
.uxb-toolbar input[type=search]{flex:1 1 240px;min-width:0;min-height:40px;padding:8px 14px;border-radius:var(--ui-radius-control,12px);border:1px solid var(--ui-field-line);background:var(--ui-field);color:var(--ui-ink);font:400 14px var(--ui-font)}
.uxb-toolbar .ui-seg{flex-wrap:wrap}
.uxb-count{color:var(--ui-muted);font-size:13px}

/* ---- Template picker (new strategy) ---- */
.uxb-template-preview{margin:-4px 0 12px;padding:10px 12px;border-radius:12px;background:var(--ui-field);font:12.5px/1.5 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ui-muted)}
.uxb-other-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:6px}
.uxb-other-ways a{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid var(--ui-card-line);text-decoration:none;color:var(--ui-ink)!important}
.uxb-other-ways a:hover{border-color:color-mix(in srgb,var(--ui-accent) 50%,transparent)}
.uxb-other-ways span{font-size:12.5px;color:var(--ui-muted)}

/* ---- Next-step cell in tables ---- */
.uxb-next{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.uxb-kbd-hint{font-size:12px;color:var(--ui-muted)}
.uxb-kbd-hint kbd{display:inline-block;min-width:18px;padding:1px 5px;border-radius:5px;border:1px solid var(--ui-line);font:600 11px var(--ui-font);text-align:center}

/* ---- Builder helpers ---- */
.uxb-builder-guide{margin-bottom:12px}
.uxb-builder-guide .uxb-intro-steps{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#page-mount.ws-build .page-head .head-actions button{min-height:36px}

/* ---- Validate page ---- */
.uxb-validate .validation-grade{border-radius:18px;border-width:1px;background:var(--ui-card);padding:16px 18px}
.uxb-validate .validation-grade-letter{font-size:44px}
.uxb-validate .validation-stage{border-radius:16px;border-color:var(--ui-card-line);background:color-mix(in srgb,var(--ui-ink) 2.5%,transparent);padding:12px 14px}
.uxb-validate .validation-stage h3{font-size:14.5px}
.uxb-validate .validation-pass{color:var(--ui-ok)}.uxb-validate .validation-warn{color:var(--ui-warn)}.uxb-validate .validation-fail,.uxb-validate .validation-refused{color:var(--ui-danger)}.uxb-validate .validation-blocked,.uxb-validate .validation-not_run{color:var(--ui-muted)}
.uxb-validate .validation-grade.validated{color:var(--ui-ok)}.uxb-validate .validation-grade.not-validated{color:var(--ui-danger)}
.uxb-validate .validation-grade p{color:var(--ui-ink)}
.uxb-validate details>summary{cursor:pointer}
.uxb-validate pre.validation-json{background:var(--ui-field);padding:10px;border-radius:10px}
.uxb-stage-strip{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;padding:0;list-style:none}
.uxb-stage-strip li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12.5px;border:1px solid var(--ui-line)}
.uxb-stage-strip li[data-status=pass]{color:var(--ui-ok);border-color:color-mix(in srgb,var(--ui-ok) 45%,transparent)}
.uxb-stage-strip li[data-status=warn]{color:var(--ui-warn);border-color:color-mix(in srgb,var(--ui-warn) 45%,transparent)}
.uxb-stage-strip li[data-status=fail],.uxb-stage-strip li[data-status=refused]{color:var(--ui-danger);border-color:color-mix(in srgb,var(--ui-danger) 45%,transparent)}
.uxb-stage-strip li[data-status=blocked],.uxb-stage-strip li[data-status=not_run]{color:var(--ui-muted)}
/* The eight checks: one compact, scannable row of numbered chips (the technical name is in each chip's tooltip
   and in screen-reader text), instead of eight tall cards. */
.uxb-checks-wrap{margin:0 0 var(--ui-gap,16px)}
.uxb-checks-label{margin:0 0 6px;font-size:12.5px;color:var(--ui-muted)}
.uxb-checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.uxb-checks li{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 10px 3px 4px;border-radius:999px;border:1px solid var(--ui-line);background:color-mix(in srgb,var(--ui-ink) 3%,transparent);font-size:13px;line-height:1.2}
.uxb-checks li>span:first-child{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--ui-accent) 16%,transparent);font:700 11px var(--ui-font);color:var(--ui-accent)}
.uxb-checks b{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.uxb-checks small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.uxb-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px;margin-bottom:12px}
.uxb-validate .validation-setting input,.uxb-validate .validation-setting select{margin-top:4px}
.uxb-validate .validation-row{gap:12px}
.uxb-runs-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.uxb-runs-list li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--ui-ink) 4%,transparent)}
.uxb-runs-list li[aria-current=true]{outline:1px solid var(--ui-accent)}
.uxb-runs-list .uxb-run-main{display:grid;gap:2px;min-width:0;flex:1 1 200px}
.uxb-runs-list .uxb-run-main small{color:var(--ui-muted);overflow-wrap:anywhere}
.uxb-grade-pill{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:10px;font-weight:800;background:var(--ui-field)}
.uxb-grade-pill[data-ok=true]{background:color-mix(in srgb,var(--ui-ok) 20%,transparent);color:var(--ui-ok)}

/* ---- Compare ---- */
.uxb-compare-bar{position:sticky;bottom:12px;z-index:5;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:var(--ui-gap,16px);padding:12px 16px;border-radius:18px;background:var(--ui-field);border:1px solid color-mix(in srgb,var(--ui-accent) 30%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.uxb-compare-bar .uxb-chosen{display:flex;gap:6px;flex-wrap:wrap;min-width:0;flex:1 1 240px}
.uxb-chip{display:inline-flex;gap:6px;align-items:center;max-width:240px;padding:4px 6px 4px 10px;border-radius:999px;background:color-mix(in srgb,var(--ui-accent) 14%,transparent);font-size:12.5px}
.uxb-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uxb-chip button{border:0;background:none;color:var(--ui-ink);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:50%}
#comparison-list tr{cursor:pointer}
#comparison-list tr[data-picked=true] td{background:color-mix(in srgb,var(--ui-accent) 8%,transparent)}
.uxb-winner{margin:0 0 12px}

/* ---- Autopilot (stepper) ---- */
.uxb-desk .panel{border-radius:var(--ui-radius,18px)}
.uxb-desk .panel-head h2{display:flex;align-items:center;gap:10px}
.uxb-desk .uxb-step-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--ui-accent) 18%,transparent);color:var(--ui-accent);font-size:13px;font-weight:800}
.uxb-desk .uxb-step-hint{margin:0 0 10px;color:var(--ui-muted);font-size:13px}
.uxb-desk details.uxb-costs>summary{cursor:pointer;font-weight:600;margin:6px 0}

/* ---- Marketplace ---- */
.uxb-market .panel{border-radius:var(--ui-radius,18px)}
.uxb-market .uxb-price{font-weight:700;color:var(--ui-accent)}
.uxb-market .uxb-status{font-size:12px;color:var(--ui-muted)}
.uxb-market .button-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.uxb-market #mk-detail pre{max-height:320px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---- Mobile ---- */
@media (max-width:600px){
  .uxb-toolbar{flex-direction:column;align-items:stretch}
  .uxb-compare-bar{bottom:6px;padding:10px 12px}
  .uxb-compare-bar .ui-button{flex:1 1 auto}
  .uxb-validate .validation-stage-head{flex-wrap:wrap}
  .uxb-intro-steps{grid-template-columns:minmax(0,1fr)}
}
.uxb-term-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;color:var(--ui-muted);margin-top:6px}
.uxb-card .uxb-card-foot{flex-direction:row}
.uxb-card .uxb-card-foot>*{width:auto!important;margin:0!important;flex:0 0 auto;display:inline-flex!important}
.uxb-card .panel-body{display:flex;flex-direction:column;gap:10px;height:100%;padding:0}
.uxb-card.panel{padding:var(--ui-pad,20px)}
@media (max-width:600px){.uxb-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.uxb-checks li{border-radius:12px;font-size:12.5px;padding:3px 6px 3px 3px}.uxb-checks b{font-size:12.5px;min-width:0;overflow-wrap:anywhere}}
.uxb-tool-what{margin-top:6px;font-size:13.5px}
.ui-card-head>div>.ui-muted{font-size:13px;margin-top:4px}