/* Cover Factory: the Style page shell (BRANDS P8.1). Classes .st*; extracted from design/frames-style/st.css (head, steps, body, lock strip, presence, side rows). Step panels add their own CSS files. */
.st{max-width:none;margin:0}
.st-head .rf-pill{cursor:default}
.st-acts{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.st-acts .btn{height:var(--ctl-s);padding:0 var(--s-4)}
.st-acts .btn .i{width:var(--icon-md);height:var(--icon-md)}
.st-acts .btn[disabled]{opacity:.45}
.st-acts .why{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.st-who{display:flex;align-items:center;margin-left:var(--s-1)}
.st-who .who-i{position:relative;margin-left:-6px;display:inline-flex}
.st-who .who-i:first-child{margin-left:0}
.st-who .who-i .av{box-shadow:var(--ring-gap-bg)}
.st-who .who-i::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:var(--ring-gap-bg)}
.st-who .count{margin-left:6px;color:var(--text-2);font:500 var(--fs-1)/1 var(--mono)}
/* steps: the four training steps; a trained brand reads the same bar as its tabs */

/* body: main and a side column, as the references page today */
.st-h{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);font-size:var(--fs-4);line-height:22px;font-weight:600}
.st-h .n{color:var(--text-3);font:500 var(--fs-2)/1 var(--mono)}
.st-h .end{margin-left:auto;display:flex;gap:var(--s-1);align-items:center}
.st-h.sm{font-size:var(--fs-2);line-height:18px;color:var(--text-2);font-weight:600;letter-spacing:.01em}
.st-card{border:1px solid var(--line);border-radius:var(--r-4);background:var(--surface);box-shadow:var(--hl-top)}
.st .muted{color:var(--text-3)}
.st .pulse{display:block;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgb(var(--p-amber-rgb) / .22);animation:stpulse var(--loop-pulse) var(--ease) infinite}
@keyframes stpulse{0%{box-shadow:0 0 0 0 rgb(var(--p-amber-rgb) / .55)}70%{box-shadow:0 0 0 7px rgb(var(--p-amber-rgb) / .08)}100%{box-shadow:0 0 0 0 rgb(var(--p-amber-rgb) / .08)}}
.st-mrow{display:flex;align-items:center;gap:var(--s-3);padding:14px var(--s-4);border-radius:var(--r-3);border:1px solid var(--line);background:var(--bg)}
.st-mrow>div{flex:1;min-width:0}
.st-mrow b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600}
.st-mrow span:not(.tag){display:block;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.lockbar{display:flex;align-items:flex-start;gap:var(--s-2);min-height:36px;margin:-16px 0 var(--s-6);padding:10px var(--s-3);border-radius:var(--r-2);background:var(--amber-soft);color:var(--text);font-size:var(--fs-2);line-height:18px}
.lockbar:has(>.btn){align-items:center;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3)}
.lockbar>.i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--amber)}
.lockbar:has(>.btn)>.i{margin-top:0}
.lockbar>span{flex:1;min-width:0}
.lockbar small{color:var(--text-2);font-size:var(--fs-2)}
.lockbar .btn{height:var(--ctl-s)}
.st-strip:empty{display:none}
.st-strip{margin:-12px 0 var(--s-6)}
.st-strip .lockbar{margin:0}
.st-head .tag{display:inline-flex;align-items:center;gap:6px}
.st-head .tag .i{width:var(--icon-sm);height:var(--icon-sm)}
.st-mrow.dim{opacity:.55}
.st-sub{margin:-4px 0 var(--s-4);color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.st-checks{display:grid;gap:var(--s-2)}
.st-check{display:flex;align-items:center;gap:var(--s-6);padding:var(--s-6) 28px;border:1px solid var(--line);border-radius:var(--r-4);background:var(--surface)}
.st-ct{flex:1;min-width:0}
.st-ct h3{margin:0 0 var(--s-3);font-size:var(--fs-4);line-height:24px;font-weight:600}
.st-ct ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
.st-ct li{display:flex;align-items:flex-start;gap:10px;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.st-ct li .i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:2px;color:var(--green)}
.st-ex{flex:none;display:flex;gap:var(--s-2)}
.st-exc{position:relative;display:block;width:124px;height:74px;border-radius:var(--r-2);overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.st-exs{position:relative;display:block;width:124px;height:74px;border-radius:var(--r-2);overflow:hidden;background:var(--bg);border:1px solid var(--line)}   /* S3: the place of an example that has not arrived (not .st-exc: that is a real cover) */
.st-exc img{display:block;width:100%;height:100%;object-fit:cover}
.st-exc i{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:var(--on-green)}
.st-exc i .i{width:var(--icon-xs);height:var(--icon-xs)}
.st-mrow em{display:block;margin-top:var(--s-2);color:var(--text-3);font-size:var(--fs-1);line-height:16px;font-style:normal}
.st-lockline{display:flex;align-items:center;gap:6px;margin:var(--s-2) 0 var(--s-4);color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.st-lockline .i{width:var(--icon-xs);height:var(--icon-xs)}
.st-vers{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-1)}
.st-vers li{display:flex;align-items:center;gap:var(--s-3);padding:10px var(--s-3);border-radius:var(--r-3);border:1px solid transparent}
.st-vers li.cur{background:var(--surface);border-color:var(--line)}
.st-vers li.ret{opacity:.7}
.st-vers .v{flex:none;font:500 var(--fs-2)/1 var(--mono);color:var(--text-2)}
.st-vers li>div{flex:1;min-width:0}
.st-vers b{display:block;font-size:var(--fs-3);line-height:18px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-vers .vr-sub{display:flex;flex-wrap:wrap;gap:0 var(--s-2)}
.st-vers span:not(.tag):not(.v){display:block;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.st-load{display:grid;gap:var(--s-3)}
.st-load .sk{border-radius:var(--r-1)}
.st #rf-gal-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.st-vsec:empty{display:none}
@media (max-width:1359px){.stp .st-step{padding:0 var(--s-3) 0 var(--s-2);gap:10px}}
@media (prefers-reduced-motion:reduce){.st-step .pulse{animation:none}}