/* v7: layered on style.css + v6.css */

/* PR comment footer note */
.cmt-f .note{margin-left:0;flex:1 1 260px;color:var(--mut2);font-size:11px;line-height:1.5}
.cmt-f .mini{margin-left:auto}

/* problem section */
.pb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.pb .h2{margin-bottom:18px}
.pb-l{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:14px;max-width:520px}
.pb-l li{color:var(--mut);font-size:15px;line-height:1.55;padding-left:18px;position:relative}
.pb-l li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:1px;background:var(--amber)}
.pb-l b{color:var(--tx);font-weight:600}
.fk{padding:16px 18px 18px}
.fk-t{display:flex;justify-content:space-between;color:var(--mut3);font-size:10.5px;margin-bottom:6px}
.fk-t i{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4px 0 10px;vertical-align:0}
.fk-t i.g{background:var(--green)}.fk-t i.r{background:var(--red)}
#fkSvg{display:block;width:100%;height:auto}
.fk-d{opacity:0;transition:opacity .3s}
#flaky.go .fk-d{opacity:1}
.fk-runs{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:12px;font-size:11px}
.fk-runs em{font-style:normal;color:var(--mut3);font-size:10.5px;margin-right:8px}
.fk-runs span{display:inline-grid;place-items:center;width:15px;height:17px;border-radius:3px;opacity:0;transition:opacity .3s}
.fk-runs .g{color:var(--green);background:rgba(61,220,151,.08)}
.fk-runs .r{color:var(--red);background:rgba(255,107,107,.1)}
#flaky.go .fk-runs span{opacity:1}
.fk-n{margin-top:14px;padding-top:14px;border-top:.5px solid var(--line);color:var(--mut);font-size:11.5px;line-height:1.6}

/* step 03 suites table */
.tiers{padding:6px 18px 4px;font-size:11.5px}
.tr{display:grid;grid-template-columns:96px minmax(0,1fr) 72px 84px;gap:12px;align-items:center;padding:9px 0;border-bottom:.5px solid #17171A;color:var(--mut)}
.tr b{font-weight:500;color:var(--tx2)}
.tr span:nth-child(2){display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--tx2)}
.tr span:nth-child(2) i{display:block;height:6px;border-radius:2px;background:#3F3F46;min-width:4px;max-width:60%}
.tr span:nth-child(3),.tr span:nth-child(4){text-align:right;white-space:nowrap}
.tr.th{color:var(--mut3);font-size:10.5px;border-bottom-color:var(--line)}
.tr.th span:nth-child(2){color:var(--mut3)}
.tr-n{color:var(--mut3);font-size:10.5px;line-height:1.55;padding:10px 0 10px}

/* step 04 */
.vd-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'n v' 'a a';row-gap:6px;padding:10px 0;border-bottom:.5px solid #17171A}
.vd-row .vn{grid-area:n}.vd-row .ax{grid-area:a}.vd-row>span:last-child{grid-area:v}
.vd-row .vn em{display:inline;font-style:normal;color:var(--mut3);font-size:10px;margin-left:8px}
.vd-row .vn{color:#D4D4D8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-leg{margin:2px 0 4px}
.vb.x{color:var(--mut2);border-style:dashed}
.vd-row.later{opacity:0;transition:opacity .5s 1.2s}
.v-rep.go .vd-row.later{opacity:1}

/* tools inside platform */
.tools3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px}
.tools3 .mock{white-space:normal}

/* domain panels */
.cells-200{grid-template-columns:repeat(20,1fr);gap:3px}
.cells-200 div{height:8px;border-radius:2px}
.cleg{display:flex;gap:14px;font-size:10.5px;color:#5C6A63;margin-top:-4px}
.cleg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.cleg i.p{background:#1F6F4E}.cleg i.f{background:#FF6B6B}
.panel-b .mrow{grid-template-columns:minmax(0,1fr) 52px 112px}
.panel-b .mrow>span:nth-child(3){color:#7D8A84}
.tag.amb{color:var(--amber)}
.sec-a2 .h1,.sec-b .h1,.sec-c .h1{font-size:clamp(38px,5vw,64px)}

@media (max-width:980px){
  .pb{grid-template-columns:minmax(0,1fr);gap:40px}
  .tools3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .tr{grid-template-columns:84px minmax(0,1fr) 58px 60px;gap:8px;font-size:10.5px}
  .pb-v .card-h span:last-child{display:none}
  .vd-row .vb{font-size:9.5px;padding:1px 5px}
  .panel-b .mrow{grid-template-columns:minmax(0,1fr) 46px 100px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.fk-d,.fk-runs span,.vd-row.later{transition:none}}