/* @lane NAV: DS-1 tokens the sidebar needs; A-core's tokens.css carries the same values (equal, so either order works) */
/* DSR D1-5: the washes, --count-bg and the --nav-current* tokens live in tokens.css */
:root{--count-line:rgb(var(--p-mist) / .14);--bsw-h:96px;--x-sm:28px;}
/* BRANDS 7.2 (DESIGN-FINAL §5-§7, §15, §16): the sidebar, the brand switch card, the brand menu, the training band. Ported from
   design/frames/brands.css (class names kept); only existing tokens. Loaded by a <link> at the top of the sidebar markup. */
@property --b{syntax:"<color>";inherits:true;initial-value:#7cc4ff}

/* content clears the 216 px sidebar (16 + 216 + 16) */
.topbar,main{margin-left:max(248px,calc(50% - 800px))}
.topbar{padding-left:var(--s-7);padding-right:var(--page-gutter-r)}   /* GATE-HERO J2: the first item sits on the page-title line (280; 128 on the rail) */
@media (max-width:1279px){.topbar{padding-left:var(--s-6)}}   /* 1200-1279: first item at L-8, room for final_b2 B6 r2 */
body.auth-on .sb{display:none}

/* ---------- brand tile ---------- */
.bt{--b:#7cc4ff;--s:32px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .3);color:var(--b);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in oklab,var(--b) 30%,transparent),transparent 72%),linear-gradient(180deg,#1b2140,#0d1121);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--b) 40%,transparent),inset 0 1px 0 var(--hl-2),0 6px 16px -8px color-mix(in oklab,var(--b) 70%,transparent)}
.bt.xs{--s:18px;border-radius:var(--r-xs)}
.bt.sm{--s:24px}
.bt.xs,.bt.sm{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--b) 40%,transparent),inset 0 1px 0 var(--hl-2)}
.bt.md{--s:28px}
.bt.lg{--s:36px}
.bt.l40{--s:40px;border-radius:var(--r-2)}
.bt .cl{display:block;width:80%;height:80%;object-fit:contain;pointer-events:none}
.bt.xs .cl{width:86%;height:86%}
.bt .dot{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:var(--ring-gap)}
.bt .dot.amber{background:var(--amber)}
.bt .dot.acc{background:var(--accent)}
.bt .dot.rev{right:-2px;top:-2px;width:8px;height:8px;background:var(--accent);box-shadow:0 0 0 2px var(--dot-ring,#141829)}
.bt.off{filter:saturate(.3);opacity:.75}

/* tags: the 22 px label of the menu rows */
.tg{display:inline-flex;align-items:center;gap:var(--s-1);height:20px;padding:0 var(--s-2);border-radius:var(--pill);font:500 var(--fs-1)/1 var(--font);white-space:nowrap;background:var(--raised);color:var(--text-2);box-shadow:var(--edge)}
.tg.amber{background:var(--amber-soft);color:var(--amber);box-shadow:none}
.tg.acc{background:var(--accent-soft-2);color:var(--accent);box-shadow:none;padding:0 6px}
.tg.green{background:var(--green-soft);color:var(--green);box-shadow:none}   /* ARCH-STATUS: «Ready to approve» in the brand menu (R7: green) */
.tag.st-acc{background:var(--accent-soft-2);color:var(--accent)}
.tag.sw2-arch{background:var(--raised);color:var(--text-2)}

/* ---------- the sidebar (the old 64 px rail becomes it; the markup keeps .rail, .tabs and .tab for the scripts that read them) ---------- */
.rail.sb{left:16px;top:16px;bottom:16px;z-index:11;width:216px;align-items:stretch;gap:0;padding:var(--s-2);border-radius:var(--r-5)}
.sb .tabs{display:flex;flex-direction:column;gap:0;width:auto;margin:-6px;padding:6px;border:0;align-items:stretch;min-height:0;overflow-y:auto;scrollbar-width:none}
/* FINAL2 FV2-1: a short window shows there is more list: thin scrollbar and a fade at each cut edge (brand.js railFades toggles .ov, .ft, .fb); rows tighten from 36 to 32 so the Owner's list fits down to 620 */
.sb .tabs.ov{scrollbar-width:thin;scrollbar-color:var(--line-hover) transparent}
.sb .tabs.ft{-webkit-mask-image:linear-gradient(180deg,transparent,#000 24px);mask-image:linear-gradient(180deg,transparent,#000 24px)}
.sb .tabs.fb{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent)}
.sb .tabs.ft.fb{-webkit-mask-image:linear-gradient(180deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.sb .tab-ind,.sb .tab-sep{display:none!important}
.bpan{display:flex;flex-direction:column;gap:2px;padding:var(--s-1);border-radius:var(--r-4);transition:--b var(--dur-3) var(--ease);
  background:linear-gradient(180deg,color-mix(in oklab,var(--b) 7%,transparent),transparent 120px),rgb(var(--p-mist) / .03);box-shadow:var(--edge)}
.bp-sep{height:1px;margin:2px var(--s-2) var(--s-1);background:var(--line)}
.sb .nv,.sb .tab.nv{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:36px;padding:0 var(--s-2) 0 10px;border-radius:var(--r-2);background:none;color:var(--text-2);font:500 var(--fs-2)/1 var(--font);text-align:left;
  box-shadow:none;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.sb .nv[hidden]{display:none}
.sb .nv .i{flex:none;width:var(--icon-lg);height:var(--icon-lg)}
.sb .nv > span:not(.badge):not(.cm-badge){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb .nv > .i:first-child{color:var(--text-3);transition:color var(--dur-2) var(--ease)}
.sb .nv:hover{background:var(--hover-wash);color:var(--text)}
.sb .nv:hover > .i:first-child{color:var(--text-2)}
.sb .nv:active{background:var(--press-wash);scale:var(--m-press)}
.sb .nv:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* NAV-B1 (DS-1 B1-B6): current = the lit plate (accent .22 + ring + glow); hover stays a neutral wash, so current reads stronger than hover */
.sb .nv[aria-current=page]{background:var(--nav-current);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--nav-current-line),var(--nav-current-glow)}
.sb .nv[aria-current=page] > .i:first-child{color:var(--accent)}
.sb .nv[aria-current=page]:hover{background:var(--nav-current-hover)}
/* dialog bodies: same cue (brand.js dialogCues) */
.cue.ov{scrollbar-width:thin;scrollbar-color:var(--line-hover) transparent}
.cue.ft{-webkit-mask-image:linear-gradient(180deg,transparent,#000 24px);mask-image:linear-gradient(180deg,transparent,#000 24px)}
.cue.fb{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent)}
.cue.ft.fb{-webkit-mask-image:linear-gradient(180deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
@media (max-height:720px){.sb .nv,.sb .tab.nv{height:32px}.sb-shared{margin-top:var(--s-2)}.sb-act{padding:var(--s-2) var(--s-1) 0}.sb-act .btn{height:32px}}   /* NAV-B1 (DR-71, DR-208 keep): the Download foot gives back 16 px in a short window so the Owner list still fits from 676 */
.sb .nv > .badge[hidden]{display:none}
/* counter: DS-1 .badge.xs.count; on the current row it turns solid (a click never makes the number vanish). A-core's badge.css overrides these where it defines the same */
.sb .nv > .badge{display:inline-flex;align-items:center;justify-content:center;position:static;margin-left:auto;flex:none;height:20px;min-width:20px;padding:0 6px;border-radius:var(--pill);font:600 var(--fs-1)/20px var(--font);font-variant-numeric:tabular-nums;white-space:nowrap}   /* FA-1004: S 20, numbers 600 like the tab counter */
.sb .nv > .badge.count{background:var(--count-bg);box-shadow:inset 0 0 0 1px var(--count-line);color:var(--text)}
.sb .nv[aria-current=page] > .badge.count{background:var(--accent);color:var(--ink);box-shadow:none}
.sb .nv > .badge + .cm-badge{margin-left:var(--s-1)}
.sb .nv .cm-badge{position:static;margin-left:6px}
.sb .nv[aria-disabled=true]{color:var(--text-3);cursor:not-allowed}
.sb .nv[aria-disabled=true]:hover{background:none;color:var(--text-3)}
.sb .nv[aria-disabled=true]:active{scale:1}
.sb .nv .lk{margin-left:auto;width:14px;height:14px;color:var(--text-3)}
.sb-shared{display:flex;flex-direction:column;gap:0;margin:var(--s-3) 0 0;padding:0 var(--s-1)}

/* ---------- NAV-B1: the Download action at the sidebar foot (NAV-SPEC 3) ---------- */
.sb-act{flex:none;margin-top:auto;padding:var(--s-3) var(--s-1) var(--s-1);border-top:1px solid var(--line)}
.sb-act .btn{width:100%;gap:6px;height:var(--ctl-s);padding:0 var(--s-4);font-size:var(--fs-2)}
.sb-act .btn .i{width:16px;height:16px}
.sb-act .btn > .badge[hidden]{display:none}
.sb-act .btn > .badge{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:2px;height:20px;min-width:20px;padding:0 6px;border-radius:var(--pill);font:600 var(--fs-1)/20px var(--font);font-variant-numeric:tabular-nums;background:var(--count-bg);box-shadow:inset 0 0 0 1px var(--count-line);color:var(--text)}
.sb-act .btn[aria-disabled=true]{background:transparent;border-color:var(--line);color:var(--text-3);box-shadow:none;cursor:not-allowed}
/* a running download after the dialog closed: «Downloading», the percent in place of the count, a 2 px line on the bottom edge (dl.js sets --p) */
.sb-act .btn[aria-busy=true]{position:relative;overflow:hidden;cursor:progress}
.sb-act .btn .pct{margin-left:2px;color:var(--text-2);font:500 var(--fs-0)/18px var(--mono);font-variant-numeric:tabular-nums}
.sb-act .btn[aria-busy=true]::after{content:"";position:absolute;left:17px;right:17px;bottom:0;height:2px;border-radius:var(--r-hair);background:linear-gradient(90deg,var(--accent) var(--p,0%),rgb(var(--p-mist) / .14) var(--p,0%));transition:background var(--dur-2) linear}

/* ---------- the switch card V2 «Карточка» ---------- */
#bsw-slot{min-height:calc(var(--bsw-h) + 6px)}   /* V10: the switch card arrives after the brand read; its slot (96 + 6 margin) is held from first paint so the rows below do not drop */
.bsw{display:flex;flex-direction:column;align-items:stretch;gap:10px;position:relative;width:100%;height:var(--bsw-h);flex:none;margin-bottom:6px;padding:var(--s-3);border-radius:var(--r-3);text-align:left;color:var(--text);
  background:radial-gradient(120% 100% at 0% 0%,color-mix(in oklab,var(--b) 24%,transparent),transparent 70%),var(--surface);box-shadow:var(--edge);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),--b var(--dur-3) var(--ease)}
button.bsw:hover{background:radial-gradient(120% 100% at 0% 0%,color-mix(in oklab,var(--b) 32%,transparent),transparent 70%),var(--surface);box-shadow:var(--edge-hover)}
button.bsw[aria-expanded=true]{background:radial-gradient(120% 100% at 0% 0%,color-mix(in oklab,var(--b) 32%,transparent),transparent 70%),var(--surface);box-shadow:var(--edge-strong)}
button.bsw:active{transform:scale(var(--m-dialog))}
button.bsw:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bsw.static{cursor:default}
.sw2-top{position:relative;display:flex;align-items:center;gap:var(--s-2)}
.sw2-pill{position:relative;margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 var(--s-3);border-radius:var(--pill);box-shadow:var(--edge-strong);color:var(--text-2);font:500 var(--fs-2)/1 var(--font);
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.sw2-pill .i{width:16px;height:16px}
button.bsw:hover .sw2-pill{background:var(--hover);color:var(--text)}
button.bsw[aria-expanded=true] .sw2-pill{color:var(--accent);box-shadow:var(--edge-accent)}
.sw2-nm{color:var(--text);font:600 var(--fs-4b)/22px var(--font);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.bsw > .tag{align-self:flex-start}
/* P3 §6: the lifecycle word is icon + text under the name, at --text; the icon takes the tone. Live has none. The rail shows the icon on the tile's corner instead */
.life{display:flex;align-items:center;gap:6px;min-width:0;color:var(--text);font:500 var(--fs-2)/18px var(--font)}
.life .i{width:var(--icon-sm);height:var(--icon-sm);flex:none}
.life.l-setup .i,.life-ic.l-setup{color:var(--amber)}
.life.l-approve .i,.life-ic.l-approve{color:var(--green)}
.life.l-archived .i,.life-ic.l-archived{color:var(--text-3)}
.bsw > .life{display:none}   /* NAV-B1: one height for every state; the status is the mark on the tile (.life-ic) and the tooltip */
.bsw > .life.l-archived{display:flex}
.bsw.arch{height:auto;min-height:var(--bsw-h);gap:6px}   /* FIX1-BRAND: an archived brand keeps today's «Archived» word under the name (setup and approve stay a mark on the tile) */
.life-ic{position:absolute;left:28px;top:28px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:var(--ring-gap),inset 0 0 0 1px currentColor}
.life-ic .i{width:12px;height:12px}
.bsw.arch,button.bsw.arch:hover{background:var(--surface)}
.sw-run{position:absolute;left:12px;right:12px;bottom:0;z-index:2;height:2px;border-radius:var(--r-hair) var(--r-hair) 0 0;background:rgb(var(--p-green-rgb) / .22);overflow:hidden}
.sw-run::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,var(--green),transparent);animation:sw-run var(--loop-pulse) linear infinite}
@keyframes sw-run{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* ---------- the band (training, ready to approve, archived) ---------- */
.gate{display:flex;align-items:center;gap:10px;margin:0 0 28px;padding:6px var(--s-3) 6px var(--s-2);border-radius:var(--r-4);
  background:linear-gradient(90deg,rgb(var(--p-amber-rgb) / .08),transparent 55%),var(--surface);box-shadow:inset 0 0 0 1px rgb(var(--p-amber-rgb) / .22),var(--hl-top)}
.gate[hidden]{display:none}
.gate.arch{background:var(--surface);box-shadow:var(--edge-strong),var(--hl-top)}
.gate.arch .bt{filter:saturate(.3);opacity:.75}

/* Generate while the brand is gated */
#gen-btn[aria-disabled=true]{cursor:not-allowed}   /* DR-37: the violet disabled look is .btn.gen's own */

@media (prefers-reduced-motion:reduce){.sw-run::after{animation:none;transform:translateX(75%)}}
@media (prefers-reduced-transparency:reduce){.rail.sb{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}}

.stat[hidden]{display:none}
.sb .tabs{flex:0 1 auto}
/* the old rail rules (app.css .rail .tab, comments.css .cm-badge) are stronger than the plain ones above: win them back */
.sb .tabs.has-ind .tab.nv[aria-current=page],.sb .tab.nv[aria-current=page]{background:var(--nav-current);color:var(--text);box-shadow:inset 0 0 0 1px var(--nav-current-line),var(--nav-current-glow)}
.sb .tabs.has-ind .tab.nv[aria-current=page]:hover,.sb .tab.nv[aria-current=page]:hover{background:var(--nav-current-hover)}
.sb .tab.nv:not([aria-current=page]):hover{background:var(--hover-wash);color:var(--text)}
.sb .tab.nv[aria-selected=true]:not([aria-current=page]){background:none;color:var(--text-2);box-shadow:none}
.sb .tab.nv .cm-badge{position:static;margin-left:6px}
@media (max-width:1199px){.sb,.topbar,main{display:none}}   /* below 1200 px the page shows #narrow only (app.css); nothing behind it may widen the page */

/* ---------- FU-3: comment signals of the other brands (CROSS-BRAND-COMMENTS §2, §3) ---------- */
.sw-mk{position:absolute;pointer-events:none;background:var(--accent);box-shadow:var(--ring-gap)}
.sw-mk.at{top:-6px;right:-6px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 var(--s-1);border-radius:var(--pill);color:var(--on-accent);font:700 var(--fs-0)/1 var(--font);font-style:normal}
.sw-mk.dot{top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--text-2)}
.sw-mk.sw-in{animation:sw-mk-in var(--dur-2) var(--ease)}
.sw-mk.sw-x{animation:sw-mk-x var(--dur-1) linear}
@keyframes sw-mk-in{from{opacity:0;scale:.6}}
@keyframes sw-mk-x{from{opacity:0}}
button.bsw[aria-expanded=true] .sw-mk{display:none}

.tb-brand{display:none}
/* UI-SYNTH 1.01: below 1408 px the sidebar is the old 64 px rail, so the board keeps four columns from 1232 px as before */
@media (max-width:1407px){
  .topbar,main{margin-left:max(96px,calc(50% - 800px))}
  .rail.sb{width:64px;align-items:center;gap:6px;padding:var(--s-3) 0;border-radius:var(--r-6)}
  .rail.sb .tabs,.rail.sb .sb-shared{align-items:center;gap:6px}
  .rail.sb .tabs{width:calc(100% + 12px)}   /* A31: 64 plus the 6 px glow room each side; the old 40 px clipped the count corner (1280 break: Covers60 47 > 40) */
  .rail.sb .sb-shared{margin:0;padding:0}
  .rail.sb .sb-shared::before{content:"";width:24px;height:1px;margin:2px auto 6px;background:var(--line)}
  .rail.sb .bpan{align-items:center;gap:6px;padding:0;background:none;box-shadow:none}
  .rail.sb .bp-sep{width:24px;height:1px;margin:2px auto}
  .rail.sb #bsw-slot{min-height:46px}
  .rail.sb .bsw{width:40px;height:40px;margin:0 0 6px;padding:0;align-items:center;justify-content:center;background:none;box-shadow:none}
  .rail.sb .bsw .sw2-top{gap:0}
  .rail.sb .bsw .sw2-pill,.rail.sb .bsw .sw2-nm,.rail.sb .bsw > .life,.rail.sb .sw-run{display:none}
  .rail.sb .bsw .sw2-top{position:relative}
  .rail.sb .bsw .life-ic{position:absolute;left:auto;top:auto;right:-4px;bottom:-4px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:var(--ring-gap)}
  .rail.sb .bsw .life-ic .i{width:var(--icon-xs);height:var(--icon-xs)}
  .rail.sb .nv,.rail.sb .tab.nv{width:40px;height:40px;padding:0;justify-content:center;gap:0;border-radius:50%}
  .rail.sb .nv .i{width:var(--icon-xl);height:var(--icon-xl)}
  .rail.sb .nv > span:not(.badge):not(.cm-badge){display:none}
  .rail.sb .nv > .badge:not([hidden]){display:inline-grid;place-items:center;position:absolute;top:-4px;right:0;margin:0;padding:0 var(--s-1);max-width:100%;box-sizing:border-box;box-shadow:inset 0 0 0 1px var(--count-line),var(--ring-gap)}   /* FA-1009: the corner pill ends on the 40 box (4 digits fit), no overflow at 1280. the rail keeps the count on every row, current too */
  .rail.sb .nv > .badge.count,.sb-act .btn .badge.count{background:linear-gradient(var(--count-bg),var(--count-bg)),var(--surface)}   /* a corner counter sits over the plate: the same tint made opaque */
  .rail.sb .nv[aria-current=page] > .badge.count{background:var(--accent);box-shadow:var(--ring-gap)}
  .rail.sb .nv .cm-badge{position:absolute;right:-6px;bottom:-4px;margin:0}
  .rail.sb .nv .lk{display:block;position:absolute;right:-2px;bottom:-2px;margin:0;width:16px;height:16px;padding:2px;box-sizing:border-box;border-radius:50%;background:var(--surface);color:var(--text-3)}   /* SPOT-R1 N1: kit/p3.css .lkn */
  .rail.sb .nv[aria-disabled=true] .cm-badge{display:none}
  /* B29: the lit plate slides under the selected item (railInd places it) instead of swapping in place */
  .rail.sb .tabs .tab-ind:not([hidden]){display:block!important;left:50%;margin-left:-20px;z-index:0}
  .rail.sb .tabs.has-ind .tab.nv[aria-current=page]{background:transparent;box-shadow:none}
  .rail.sb .tabs .tab.nv{z-index:1}
  .rail.sb .tab.nv[aria-current=page]{background:var(--accent-soft-2);box-shadow:inset 0 0 0 1px var(--nav-current-line),var(--glow-accent)}
  /* NAV-B1: Download is a 40 circle under a 24 px dash; the count rides on its corner, a busy download draws a 2 px ring */
  .sb-act{width:100%;display:flex;flex-direction:column;align-items:center;padding:var(--s-2) 0 0;border-top:0}
  .sb-act::before{content:"";width:24px;height:1px;margin:0 auto var(--s-2);background:var(--line)}
  .sb-act .btn{position:relative;width:var(--ctl-s);height:var(--ctl-s);padding:0;border-radius:50%}
  .sb-act .btn > span:not(.badge){display:none}
  .sb-act .btn .i{width:20px;height:20px}
  .sb-act .btn > .badge:not([hidden]){position:absolute;top:-4px;right:0;margin:0;padding:0 var(--s-1);max-width:100%;box-sizing:border-box;box-shadow:inset 0 0 0 1px var(--count-line),var(--ring-gap)}
  .sb-act .btn[aria-busy=true]{overflow:visible}
  .sb-act .btn .pct{display:none}
  .sb-act .btn[aria-busy=true]::after{left:-1px;right:-1px;top:-1px;bottom:-1px;height:auto;border-radius:50%;background:conic-gradient(var(--accent) var(--p,0%),rgb(var(--p-mist) / .14) var(--p,0%));
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))}
  .topbar .tb-brand:not([hidden]){display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:240px;margin-right:var(--s-1)}   /* AV3-B3: the bar's gap is 12, so 16 to the stats */
  .topbar .tb-brand .qbrand{max-width:240px;height:28px;padding:0 var(--s-3) 0 var(--s-1);font:600 var(--fs-2)/18px var(--font)}
  .topbar .tb-brand .qbrand .bt{--s:20px}
}
@media (max-width:1279px){.topbar .tb-brand,.topbar .tb-brand .qbrand{max-width:200px}}
@media (max-width:1407px) and (max-height:720px){.sb-act{padding-top:var(--s-1)}.sb-act::before{margin-bottom:var(--s-1)}}   /* NAV-B1 (DR-71): the collapsed rail gives back 14 px of the Download foot in a short window, so the Owner list still fits from 676 */
@media (max-width:1407px) and (prefers-reduced-motion:reduce){.rail.sb .tabs .tab-ind{transition:none}}