/* ============================================================
   AI-Workflows Field Study — project-specific additions.
   Loaded AFTER report.css; the base kit is untouched.
   Adds: the 3-state deployment bar, the extra swatch colours,
   and the production underline on workflow cards.
   ============================================================ */

:root{
  --st-prod:#642585;      /* running in production  */
  --st-build:#B07FCB;     /* being built            */
  --st-intent:#E7D2E3;    /* only talked about      */
  --st-pilot:#9257AC;
  --st-eval:#CD9FC6;
}

/* ---------- the deployment line ---------- */
.gaprow{display:grid;grid-template-columns:220px 1fr 48px;align-items:center;gap:14px;margin-bottom:9px}
.gaprow__lab{font-size:13px;font-weight:650;color:var(--ls-ink);line-height:1.25;text-align:right}
.gaprow__track{display:flex;height:22px;background:var(--track);border-radius:6px;overflow:hidden}
.gaprow__v{font-size:13px;font-weight:800;color:var(--ls-strong-purple);text-align:right}
.gseg{display:block;height:100%;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.gseg--prod{background:var(--st-prod)}
.gseg--build{background:var(--st-build)}
.gseg--intent{background:var(--st-intent)}
@media(max-width:720px){
  .gaprow{grid-template-columns:1fr;gap:5px;margin-bottom:15px}
  .gaprow__lab{text-align:left}
  .gaprow__v{text-align:left}
}

/* ---------- extra 100%-stack segment colours ---------- */
.seg--prod{background:var(--st-prod)}
.seg--build{background:var(--st-build)}
.seg--pilot{background:var(--st-pilot)}
.seg--eval{background:var(--st-eval)}
.seg--disc{background:var(--st-intent);color:var(--ls-dark-purple)}

/* ---------- legend swatches ---------- */
.legend i.sw-prod,.legend i.sw-production{background:var(--st-prod)}
.legend i.sw-build,.legend i.sw-building{background:var(--st-build)}
.legend i.sw-intent,.legend i.sw-discussed{background:var(--st-intent)}
.legend i.sw-pilot{background:var(--st-pilot)}
.legend i.sw-eval,.legend i.sw-evaluating{background:var(--st-eval)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ---------- workflow cards: production underline inside the meter ---------- */
.catcard__meter{position:relative}
.catcard__meter u{position:absolute;left:0;bottom:0;height:100%;background:var(--st-prod);
  border-radius:inherit;text-decoration:none}
.catcard__meter i{opacity:.32}
.wfnote{font-size:12px;color:var(--ls-dark-gray);font-weight:600;margin:8px 0 2px}
.wfnote b{color:var(--ls-strong-purple);font-weight:800}
.wfnote .mut{color:#9b8fa3;font-weight:500}

/* the landscape cards carry no % on each tool row — keep the bar flush right */
.catcard__tools .ct{grid-template-columns:1fr 68px}

/* ---------- bar label category chip ---------- */
.bar__lab .cat{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#9b8fa3;background:var(--ls-purple-soft);padding:2px 6px;border-radius:5px;margin-left:6px;
  white-space:nowrap}
@media(max-width:720px){.bar__lab .cat{display:none}}

/* ---------- mobile: let truncating labels actually truncate ----------
   A `1fr` grid track resolves to minmax(auto,1fr) and will not shrink below its
   content's min-content width. The nowrap labels inside these components
   therefore push their panel wider than the viewport on a phone and the whole
   page scrolls sideways — the ellipsis never gets a chance to apply. Setting
   min-width:0 on the flex/grid children releases that floor. */
.segrow{min-width:0}
.segrow__lab{min-width:0}
.segwrap,.catgrid,.finds,.arch,.recgrid,.split{min-width:0}
.segpanel,.catcard,.find,.acard,.rec,.figure{min-width:0}
.bar__lab,.ct__n,.grp__lab,.gaprow__lab{min-width:0}
.bar,.ct,.grp,.gaprow{min-width:0}
.bar__lab>span{overflow:hidden;text-overflow:ellipsis}

@media(max-width:640px){
  .segrow__lab{flex:0 0 46%}
  .segrow__v{width:42px}
  .catcard__tools .ct{grid-template-columns:1fr 54px}
}

/* ---------- footer brand row (matches the reference build) ---------- */
.fbrand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;
  font-size:15px;margin-bottom:12px}