/* ============================================================
   WERHINO 2.0 - Buildability AI (app)
   buildability.css · reuses platform.css gauges/upload/glass.
   Running an analysis requires a free account.
   ============================================================ */

.ba { padding: calc(var(--nav-h) + clamp(2.5rem,7vh,5rem)) 0 clamp(5rem,10vh,8rem); }
.ba__head { max-width: 46rem; margin-bottom: clamp(2.4rem,5vw,3.4rem); }
.ba__title { font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin: 1.2rem 0 1.1rem; }
.ba__title em { font-style: italic; color: var(--accent); }

.ba-app { position: relative; }
.ba-app [data-state] { display: none; }
.ba-app.is-idle [data-state="idle"],
.ba-app.is-analyzing [data-state="analyzing"],
.ba-app.is-results [data-state="results"] { display: block; }

/* idle */
.ba-drop { max-width: 720px; margin: 0 auto; padding: clamp(1.6rem,2.4vw,2.4rem); text-align: center; }
.ba-drop .upload__zone { min-height: 260px; cursor: pointer; }
.ba-drop.is-over .upload__zone { border-color: var(--accent); background: var(--accent-dim); }
.ba-drop__or { margin: 1.1rem 0 .2rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ba-sample { margin-top: 1rem; }
.ba-inputs { margin-top: 1.4rem; }
.ba-inputs__label { font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: .7rem; }
.ba-checks { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ba-checks label { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .5em 1em; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.ba-checks label:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.ba-checks input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }

/* analyzing */
.ba-an { max-width: 620px; margin: 0 auto; text-align: center; padding: clamp(2rem,4vw,3.4rem); }
.ba-an__ring { width: 96px; height: 96px; margin: 0 auto 1.6rem; position: relative; }
.ba-an__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ba-an__ring circle { fill: none; stroke-width: 6; }
.ba-an__ring .t { stroke: rgba(244,239,231,.1); }
.ba-an__ring .v { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.ba-an__pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-d); font-size: 1.5rem; color: var(--text); }
.ba-an__file { font-size: .82rem; color: var(--muted); margin-bottom: 1.6rem; word-break: break-all; }
.ba-an__steps { display: flex; flex-direction: column; gap: .6rem; max-width: 340px; margin: 0 auto; text-align: left; }
.ba-an__step { display: flex; align-items: center; gap: .7rem; font-size: .9rem; color: var(--faint); transition: color .3s; }
.ba-an__step.is-on { color: var(--text); }
.ba-an__step.is-done { color: var(--muted); }
.ba-an__dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; flex-shrink: 0; }
.ba-an__dot svg { width: 10px; height: 10px; stroke: var(--accent); fill: none; stroke-width: 2.4; opacity: 0; }
.ba-an__step.is-done .ba-an__dot { border-color: var(--accent); }
.ba-an__step.is-done .ba-an__dot svg { opacity: 1; }

/* results */
.ba-res__top { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1rem,2vw,1.6rem); align-items: stretch; margin-bottom: clamp(1rem,2vw,1.6rem); }
.ba-scorecard { padding: clamp(1.6rem,2.4vw,2.2rem); }
.ba-scorecard .gauges { margin-bottom: 0; }
.ba-verdict { padding: clamp(1.6rem,2.4vw,2.2rem); display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.ba-verdict h3 { font-family: var(--font-d); font-weight: 500; font-size: clamp(1.7rem,2.8vw,2.3rem); line-height: 1.1; }
.ba-verdict h3 em { font-style: italic; color: var(--accent); }
.ba-verdict p { color: var(--muted); font-size: .95rem; line-height: 1.6; }
.ba-source {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .35em .8em;
}
.ba-source--file { color: var(--accent); border-color: var(--line-2); }
.ba-source--file::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ba-filenote { color: var(--faint) !important; font-size: .82rem !important; line-height: 1.5 !important; border-left: 2px solid var(--line-2); padding-left: .8rem; }
.ba-verdict__meta { display: flex; gap: 1.6rem; margin-top: .6rem; }
.ba-verdict__meta div b { font-family: var(--font-d); font-size: 1.5rem; color: var(--accent); display: block; line-height: 1; }
.ba-verdict__meta div span { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.ba-issues { margin-bottom: clamp(1rem,2vw,1.6rem); }
.ba-issues__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.ba-issues__h h3 { font-family: var(--font-d); font-weight: 500; font-size: 1.6rem; }
.ba-issues__h span { font-size: .76rem; color: var(--muted); }
.ba-issuegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.7rem,1.2vw,1rem); }
.ba-card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-card); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.ba-card__top { display: flex; align-items: center; gap: .6rem; }
.ba-card__sev { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ba-card__sev--hot { background: var(--hot); box-shadow: 0 0 10px rgba(207,111,87,.5); }
.ba-card__sev--warn { background: var(--warn); }
.ba-card__sev--low { background: var(--ok); }
.ba-card__title { font-weight: 600; font-size: .98rem; flex: 1; }
.ba-card__tag { font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ba-card__detail { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.ba-card__fix { font-size: .86rem; color: var(--text); line-height: 1.5; border-top: 1px solid var(--line); padding-top: .5rem; }
.ba-card__fix b { color: var(--accent); font-weight: 600; }

.ba-check { padding: clamp(1.4rem,2.2vw,2rem); }
.ba-check h3 { font-family: var(--font-d); font-weight: 500; font-size: 1.4rem; margin-bottom: 1rem; }
.ba-check__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.6rem; }
.ba-check__row { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; font-size: .9rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.ba-check__ico { width: 18px; height: 18px; flex-shrink: 0; }
.ba-check__ico svg { width: 100%; height: 100%; fill: none; stroke-width: 2; }
.ba-check__row--ok .ba-check__ico svg { stroke: var(--ok); }
.ba-check__row--flag .ba-check__ico svg { stroke: var(--warn); }
.ba-check__row b { color: var(--text); font-weight: 500; }
.ba-res__actions { display: flex; gap: .8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.ba-note { margin-top: 1.4rem; font-size: .74rem; color: var(--faint); line-height: 1.5; max-width: 60ch; }

@media (max-width: 860px) {
  .ba-res__top { grid-template-columns: 1fr; }
  .ba-issuegrid, .ba-check__grid { grid-template-columns: 1fr; }
}