/* Cover Factory Style page, step References (P8.4). Scoped under .sr; the old page's own classes (.rf-*, refs.js) are reused as they are. */
.sr{display:grid;gap:var(--s-5);min-width:0}
.sr .lockbar{margin:0}
.sr-strip:empty{display:none}
.sr-strip{display:grid;gap:var(--s-3)}
.sr .lockbar.sr-fj{flex-wrap:wrap;height:auto;min-height:56px;padding-block:var(--s-3);row-gap:var(--s-2)}   /* FX-12: the From Figma line; a long reason wraps, its buttons stay in it */
.sr .lockbar.sr-fj > span{flex:1 1 240px;min-width:0;line-height:20px}
.sr .lockbar.sr-fj.bad > .i{color:var(--red)}
.sr-tools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3) var(--s-4)}
.sr-n{display:grid;gap:2px;margin-right:auto;min-width:0}
.sr-n b{font-size:var(--fs-4);line-height:20px;font-weight:600}
.sr-n span{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.sr-act{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.sr-act .btn{height:var(--ctl-s);padding:0 var(--s-4)}
.sr-act .btn[aria-disabled=true]{cursor:not-allowed}
.sr-why{color:var(--text-3);font-size:var(--fs-2);line-height:18px}
.sr-why:empty{display:none}
.sr-fig .rf-logo,.sr-fig .i{width:12px;height:18px}
/* the old page inside the step: the title and (for a brand) its own head give way to the step's toolbar */
.sr .rf{max-width:none}
.sr .rf-head h1{display:none}
.sr .rf-body{grid-template-columns:minmax(0,1fr)}
.sr .rf-side{display:none}
.sr .rf-main{padding-right:0}
.sr:not(.sr-main) .rf-head{display:none}
.sr.sr-main .rf-head{margin:0 0 var(--s-4)}
.sr.sr-main .rf-acts{margin-left:auto}
.sr-lock .sr-host .rf-main{opacity:.55;pointer-events:none}
.sr-lock .sr-host .rf-main .rf-open{pointer-events:auto}
/* wishes */
.sr-wishes{display:grid;gap:var(--s-2);min-width:0}
.sr-wh{display:flex;align-items:baseline;gap:var(--s-2)}
.sr-wh .rf-h{margin:0}
.sr-opt{color:var(--text-3);font-size:var(--fs-2)}
.sr-hint{margin:0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.sr-wish{min-height:172px;max-height:272px;overflow:auto}
.sr-wish[readonly]{color:var(--text-2);border-color:var(--line)}
.sr-sl{display:flex;align-items:center;gap:var(--s-2);min-height:28px}
.sr-sl .rf-save{margin:0;flex:1;min-width:0}
.sr-cnt{margin-left:auto;color:var(--text-3);font:500 var(--fs-1)/1 var(--mono);white-space:nowrap}
.sr-cnt.warn{color:var(--amber)}
.sr-save[data-s=unsaved]{color:var(--amber)}
.sr-save[data-s=held]{color:var(--text-2)}
.sr-save .link{margin-left:2px}
.wconf{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-2) 10px;padding:10px 10px 10px var(--s-3);border-radius:var(--r-2);background:var(--amber-soft);font-size:var(--fs-2);line-height:18px}
.wconf>.i{flex:none;margin-top:1px;width:var(--icon-md);height:var(--icon-md);color:var(--amber)}
.wconf .t{display:grid;gap:2px;flex:1 1 140px;min-width:0}
.wconf .t span{color:var(--text-2)}
.wconf .a{display:flex;gap:var(--s-1);flex:none;margin-left:var(--s-6)}
/* refused write: no draft (R3-2) */
.sr-nodraft{display:grid;gap:10px;padding:14px var(--s-4);border-radius:var(--r-3);background:var(--amber-soft);font-size:var(--fs-2);line-height:18px}
.sr-nodraft .t{display:flex;align-items:flex-start;gap:var(--s-2)}
.sr-nodraft .t .i{flex:none;margin-top:1px;color:var(--amber)}
.sr-nodraft .q{margin:0;padding:var(--s-2) var(--s-3);border-left:2px solid var(--line-strong);color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:132px;overflow:auto}
.sr-nodraft .a{display:flex;gap:var(--s-2)}
/* read-only content */
.sr-ro-main{min-width:0}
.sr-ro-side{min-width:0}
.sr-mono{margin:0 0 var(--s-2);color:var(--text-3);font:600 var(--fs-4)/22px var(--font)}
.sr-wt{margin:0;font-size:var(--fs-2);line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
.sr-wt.mute{color:var(--text-3)}
.sr-tile{cursor:zoom-in}
.sr-empty{display:grid;justify-items:center;gap:6px;padding:var(--s-9) var(--s-6);border:1.5px dashed var(--line-strong);border-radius:var(--r-4);background:var(--hatch);color:var(--text-2);text-align:center}
.sr-empty>.i{width:24px;height:24px;margin-bottom:6px}
.sr-empty b{color:var(--text);font-size:var(--fs-4);line-height:20px;font-weight:600}
.sr-empty span{font-size:var(--fs-2);line-height:18px}
.sr-lb{width:min(960px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line-strong);border-radius:var(--r-5);background:var(--surface);overflow:hidden;color:var(--text)}
.sr-lb::backdrop{background:rgba(6,8,16,.72)}
.sr-lb img{display:block;width:100%;max-height:calc(100dvh - 160px);object-fit:contain;background:var(--bg-deep)}
.sr-lb .b{display:grid;gap:var(--s-1);padding:14px var(--s-5) var(--s-4);font-size:var(--fs-3);line-height:20px}
.sr-lb .b p{margin:0;color:var(--text-2);white-space:pre-wrap}
.sr-lb .b .mute{color:var(--text-3)}
.sr-lb .icon-btn{position:absolute;top:12px;right:12px}
@media (max-width:1280px){
  .sr-act .btn{padding:0 var(--s-3)}
}
.sr-note:empty{display:none}
.sr-note{display:grid;gap:var(--s-2)}
.sr-upl{display:grid;gap:var(--s-2);padding:14px var(--s-4);border-radius:var(--r-3);border:1px solid var(--line);background:var(--bg)}
.sr-upl b{font-size:var(--fs-2);line-height:18px;font-weight:600}
.sr-upl .bar{height:4px;border-radius:var(--r-hair);background:var(--hl-2);overflow:hidden}
.sr-upl .bar i{display:block;height:100%;width:var(--p);border-radius:inherit;background:var(--accent)}
.sr-tpl{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.sr-tpl .st-h{margin:0}
.sr-tpl-row{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.sr-tpl-ic{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:var(--r-2);background:var(--raised);box-shadow:var(--edge)}
.sr-tpl-row div{display:grid;gap:2px;min-width:0}
.sr-tpl-row b{font-size:var(--fs-2);line-height:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-tpl-row span:not(.sr-tpl-ic){color:var(--text-3);font-size:var(--fs-1);line-height:16px}