/* Cover Factory: Style page card 8.7 (BRANDS P8.7): the Learned tab (.ln*), the Versions actions (.vact), the inline confirm and compare (.icfm), the Approve block (.apv*).
   Tokens and .btn / .tag / .seg come from tokens.css and app.css; frames: design/frames-style s5a s5e s6 s6b s6c s6d. */
.ln{display:grid;gap:36px;min-width:0}
.ln-head{display:flex;align-items:flex-end;gap:var(--s-4)}
.ln-head>div{flex:1;min-width:0}
.ln-head .st-h{font-size:var(--fs-5);line-height:26px;margin:0 0 var(--s-1)}
.ln-head .st-sub{margin:0}
.ln-find{display:flex;align-items:center;gap:var(--s-2);flex:none;width:260px;height:36px;padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--bg);color:var(--text-3)}
.ln-find:focus-within{border-color:var(--accent);color:var(--text-2)}
.ln-find .i{width:var(--icon-md);height:var(--icon-md);flex:none}
.ln-find input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font:400 var(--fs-3)/20px var(--font);outline:0}
.ln-filter{margin:-20px 0 0;justify-self:start;flex-wrap:wrap}
.ln-filter button{height:var(--ctl-item-s);padding:0 var(--s-3);font:500 var(--fs-2)/1 var(--font)}
.ln-filter button[aria-pressed=true]{background:var(--primary);color:var(--ink)}
.ln-filter .n{margin-left:2px;font:500 var(--fs-1)/1 var(--mono);opacity:.75}
.ln-group{display:grid;gap:var(--s-1);min-width:0}
.ln-ghead{display:flex;align-items:center;gap:var(--s-2);margin:0;min-height:28px;color:var(--text);font:600 var(--fs-4)/22px var(--font);text-align:left}
.ln-ghead .n{color:var(--text-3);font:500 var(--fs-2)/1 var(--mono)}
.ln-ghead .i{width:var(--icon-md);height:var(--icon-md);flex:none}
.ln-group.warn .ln-ghead>.i{color:var(--amber)}
button.ln-ghead{width:100%;padding:0;color:var(--text-2)}
button.ln-ghead:hover{color:var(--text)}
button.ln-ghead .i:last-child{margin-left:auto;transition:rotate var(--dur-2) var(--ease)}
button.ln-ghead[aria-expanded=true] .i:last-child{rotate:180deg}
.ln-group>.ln-sub{margin:0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.ln-rows{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ln-row{display:flex;align-items:center;gap:var(--s-3);min-width:0;min-height:64px;padding:var(--s-3) var(--s-2) var(--s-3) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.ln-row:hover,.ln-row:focus-within{background:linear-gradient(90deg,transparent,var(--hover-wash) 20%)}
.ln-row.hl{border-color:var(--accent);background:var(--accent-soft)}
.ln-row:focus{outline:0}
.ln-main{flex:1;min-width:0}
.ln-th{flex:none;width:44px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-1);box-shadow:var(--edge);background:var(--raised)}
.ln-th.sk{display:block;background:var(--hatch),var(--raised)}
.ln-t{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);font:600 var(--fs-4)/22px var(--font);overflow-wrap:anywhere}
.ln-row .ln-sub,.ln-rep,.ln-why{margin-top:2px;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ln-row.nu{border-color:var(--line)}
.ln-row .tag.st-warn{display:inline-flex;align-items:center;gap:var(--s-1);background:var(--amber-soft);color:var(--amber)}
.ln-row .tag .i{width:var(--icon-xs);height:var(--icon-xs)}
.ln-act{flex:none;opacity:0;transition:opacity var(--dur-2) var(--ease)}
.ln-row:hover .ln-act,.ln-row:focus-within .ln-act{opacity:1}
@media (hover:none){.ln-act{opacity:1}}
.ln-link{padding:0;color:var(--accent);font:600 var(--fs-2)/18px var(--font);text-align:left}
.ln-link:hover{text-decoration:underline;text-underline-offset:3px}
.ln-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.ln-more{justify-self:start;padding:6px 0;color:var(--accent);font:600 var(--fs-2)/18px var(--font)}
.ln-more:hover{text-decoration:underline;text-underline-offset:3px}
.ln-empty{display:grid;justify-items:center;gap:var(--s-1);padding:var(--s-9) var(--s-6);text-align:center;color:var(--text-2)}
.ln-empty>.i{width:24px;height:24px;color:var(--text-3);margin-bottom:var(--s-1)}
.ln-empty h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600;color:var(--text)}
.ln-empty p{margin:0;font-size:var(--fs-3);line-height:20px}
.ln-foot{display:flex;align-items:center;gap:10px;margin:0;color:var(--text-3);font-size:var(--fs-2);line-height:18px}
.ln-foot .i{width:var(--icon-md);height:var(--icon-md);flex:none;color:var(--green)}
.ln-side{display:grid;gap:var(--s-2)}
.ln-side .st-h{margin:0 0 var(--s-1)}

/* Versions actions: a second line under the row, text links (§19 s6) */
.st-vers li{flex-wrap:wrap}
.st-vers li.hl{background:var(--raised);border-color:var(--line-strong)}
.st-vers li>.vact{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:var(--s-1) 14px;padding-left:var(--s-7)}
.st-vers .vact .ln-link{font-size:var(--fs-1);line-height:16px}

/* the inline confirm and compare: top of the main column, raised, line-hover ring (§19 «Dialogs», s6d) */
.icfm{display:grid;gap:14px;padding:var(--s-5) var(--s-6);border-radius:var(--r-3);background:var(--raised);box-shadow:0 0 0 1px var(--line-hover),var(--shadow-2);outline:0;min-width:0}
.icfm h3{margin:0;font:600 var(--fs-4)/22px var(--font)}
.icfm .lead{margin:-6px 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.icfm .ln-sub{margin:0;color:var(--text-3);font-size:var(--fs-2);line-height:18px}
.cons{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.cons li{display:flex;align-items:flex-start;gap:var(--s-3);min-width:0}
.cons li>.i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:2px;color:var(--text-2)}
.cons li>div{flex:1;min-width:0}
.cons b{display:block;font:600 var(--fs-2)/18px var(--font);overflow-wrap:anywhere}
.cons span{display:block;color:var(--text-3);font-size:var(--fs-1);line-height:16px;overflow-wrap:anywhere}
.cons li>.btn{flex:none;align-self:center}
.icfm footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);padding-top:var(--s-1)}
.icfm footer .keep{flex:1;min-width:0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.vcmp{width:100%;table-layout:fixed;border-collapse:collapse}
.vcmp th,.vcmp td{padding:10px var(--s-3);text-align:left;vertical-align:top;font-size:var(--fs-2);line-height:18px;overflow-wrap:anywhere;border-top:1px solid var(--line)}
.vcmp thead th{border-top:0;font-weight:600}
.vcmp thead th:first-child,.vcmp tbody th{width:104px;color:var(--text-3);font-weight:500}
.vcmp thead small{display:block;margin-top:var(--s-1);color:var(--text-3);font:400 var(--fs-1)/16px var(--font)}
.vcmp select{max-width:100%;height:var(--ctl-s);padding:0 var(--s-2);border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--bg);color:var(--text);font:600 var(--fs-2)/1 var(--font)}
.vcmp tr.diff td{background:var(--accent-soft)}
.vcmp tr.diff th{color:var(--text)}

/* the Approve block (s5a ready, s5b done, s5e blockers, s6b Approve v4) */
.apv{display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-6) 28px;border:1px solid var(--line);border-radius:var(--r-4);background:var(--surface);min-width:0;margin-bottom:72px}   /* FINAL2 m3: the end of the page clears the toast stack (Undo lands over the Approve button) */
.apv h2{margin:0;font:600 var(--fs-5)/26px var(--font)}
.apv h2 .tag{margin-left:var(--s-2);vertical-align:middle}
.apv h2 .ln-sub{margin-left:var(--s-2);color:var(--text-3);font:400 var(--fs-2)/18px var(--font);vertical-align:middle}
.apv p{margin:0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.apv .sum{width:100%;max-width:640px;margin:var(--s-1) 0}
.apv .quiet{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.apv .note{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.apv.warn{background:var(--amber-soft);border-color:var(--amber-line)}
.apv.ready,.apv.v4e{background:var(--accent-soft);border-color:var(--accent-line)}
.apv.ok{background:var(--green-soft);border-color:var(--green-line)}
.apv.ok>.i{width:22px;height:22px;color:var(--green)}
.apv.m-won{animation:m-won var(--dur-5) var(--ease-pop) both}   /* MOTION F T10: the first approval lands with the app's success beat (once; other/reload: none) */
.apv.m-won>.i:first-child{animation:q-pop var(--dur-5) var(--ease-pop) var(--dur-2) both}
.apv.arch{background:var(--bg)}
.apv-chk{display:flex;align-items:center;gap:10px;color:var(--text);font-size:var(--fs-3);line-height:20px;cursor:pointer}
.apv .btn.xl{margin-top:6px}
.apv-foot{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:6px}
.apv-who{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.apv-who .avs{display:inline-flex;align-items:center}
.apv-who .avs .av{margin-left:-6px;box-shadow:var(--ring-gap)}
.apv-who .avs .av:first-child{margin-left:0}
.apv-who .count{margin-left:6px;color:var(--text-2);font:500 var(--fs-1)/1 var(--mono)}
.apv.v4e .cons{width:100%;gap:14px;margin-top:var(--s-1)}
.apv.v4e .cons li.ask{padding:14px var(--s-4);border-radius:var(--r-3);background:var(--raised);box-shadow:0 0 0 1px var(--line-strong)}
.apv .ask-foot{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:10px}
@media (max-width:1359px){.ln-find{width:220px}.apv{padding:var(--s-5) var(--s-6)}.icfm{padding:var(--s-4) var(--s-5)}}
@media (prefers-reduced-motion:reduce){.ln-row,.ln-act,button.ln-ghead .i:last-child{transition:none}}
.st-prog{display:grid;gap:var(--s-2);padding:14px var(--s-4);border-radius:var(--r-3);border:1px solid var(--line);background:var(--bg)}
.st-prog b{font-size:var(--fs-2);line-height:18px;font-weight:600}
.st-prog span{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.st-prog b .tag{margin-left:var(--s-2)}
.st-prog .bar{height:4px;border-radius:var(--r-hair);background:var(--hl-2);overflow:hidden}
.st-prog .bar i{display:block;height:100%;width:var(--p);border-radius:inherit;background:var(--accent)}
.ln-made{margin-top:var(--s-6)}
.v4wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s-6);align-items:start}
.v4c{padding:var(--s-5) var(--s-6) var(--s-6);min-width:0}
.v4c-h{display:flex;align-items:baseline;gap:var(--s-3)}
.v4c-h .st-h{margin:0}
.v4c-h .muted{font-size:var(--fs-1)}
.v4c-chg{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:14px 0 var(--s-4)}
.v4c-chg .k{margin-right:var(--s-1);color:var(--text-3);font-size:var(--fs-1)}
.v4c-games{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-4) 0 0}
.v4c-games button{width:40px;padding:0;border:0;border-radius:var(--r-1);background:none;opacity:.5;cursor:pointer;transition:opacity var(--dur-2) var(--ease)}
.v4c-games button:hover{opacity:.85}
.v4c-games button[aria-selected=true]{opacity:1;box-shadow:0 0 0 2px var(--accent)}
.v4c-games img{display:block;width:100%;aspect-ratio:418/564;object-fit:cover;border-radius:var(--r-1)}
.v4c-ok{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:var(--fs-1);font-weight:500}
.v4c-ok .i{width:var(--icon-sm);height:var(--icon-sm)}
.vpair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.vpair figure{margin:0}
.vpair img{display:block;width:100%;aspect-ratio:418/564;object-fit:cover;border-radius:var(--r-3);box-shadow:0 0 0 1px var(--line-hi)}
.vpair .v4 img{box-shadow:0 0 0 2px var(--accent)}
.vpair figcaption{margin:var(--s-2) 0 0;color:var(--text-3);font:500 var(--fs-1)/16px var(--mono)}
.vpair .v4 figcaption{color:var(--accent)}
.v4-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s-3);border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge-strong);font-size:var(--fs-1);font-weight:500}
.st-made{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.st-made img{display:block;width:100%;aspect-ratio:418/564;border-radius:var(--r-2);object-fit:cover;box-shadow:0 0 0 1px var(--line-hi)}
@media (max-width:1359px){.v4wrap{grid-template-columns:minmax(0,1fr) 340px}}
.ln-teach{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2);margin:var(--s-1) 0 0;color:var(--text-3);font-size:var(--fs-2);line-height:18px}