/* ============================================================
   Rush - the new look on the website's own pages
   ------------------------------------------------------------
   The app's new look (assets/app2/app2.css) for the pages that are
   still the website's: the admin panel, the clips (timeline.php,
   post.php) and the strats (strat.php). A page asks for it with
   the body class 'newlook'; pug_page_head() then draws the app's
   side bar and a bar over the page (pug_newlook_frame) and loads
   this after pug.css, so pug.css's parts - buttons, cards, tabs,
   fields, tables - take the app's shapes: rounder corners, softer
   lines, the darker ground under the bars, buttons in the body
   face. A page's own stylesheet loads after this one.
   ============================================================ */

:root{
  --side-w:220px;
  --top-h:60px;
  --ground:#0E0717;          /* the side bar and the top bar, a step below the page */
  --line2:rgba(214,200,234,.10);
  --hover:rgba(244,236,255,.06);
  --pink:var(--rush-pink);
  --grad:linear-gradient(100deg,var(--rush-pink) 0%,#E0379F 45%,var(--rush-volt) 100%);
}

/* The app's type size, in the app as well - pug.css grows it with the window there */
html.newlook,html.newlook.in-app{font-size:15px;scrollbar-color:rgba(214,200,234,.18) transparent}
html.newlook body{background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(214,200,234,.14);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(214,200,234,.24)}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
.newlook :focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* ---------------- the frame ----------------
   The side bar keeps its place while the page scrolls under the top bar */
.nl-frame{display:grid;min-height:100vh;grid-template-columns:var(--side-w) minmax(0,1fr);
          grid-template-rows:var(--top-h) 1fr auto}
.nl-side{grid-column:1;grid-row:1/-1;position:sticky;top:0;height:100vh;z-index:21;
         display:flex;flex-direction:column;min-height:0;background:var(--ground);border-right:1px solid var(--line2)}
.nl-frame > .nl-top{grid-column:2;grid-row:1}
.nl-frame > main.wrap{grid-column:2;grid-row:2;width:100%;min-width:0}
.nl-frame > .foot{grid-column:2;grid-row:3}

.nl-mark{display:flex;align-items:center;height:var(--top-h);padding:0 20px;flex:none;text-decoration:none;
         font:900 26px/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.nl-mark .w{display:inline-block;transform:skewX(var(--mark-skew))}
.nl-mark b{color:var(--pink)}
.nl-nav{display:flex;flex-direction:column;gap:2px;padding:10px;overflow:auto;flex:1;min-height:0}
.nl-sep{height:1px;background:var(--line2);margin:8px 10px;flex:none}
.nl-ni{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:8px;flex:none;position:relative;
       color:var(--ink2);font-weight:600;font-size:14px;text-decoration:none;transition:background .12s,color .12s}
.nl-ni svg{width:20px;height:20px;flex:none}
.nl-ni:hover{background:var(--hover);color:var(--ink)}
.nl-ni.on{background:rgba(var(--acc-rgb),.12);color:var(--ink)}
.nl-ni.on::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--pink)}
.nl-ni.on svg{color:var(--pink)}
.nl-ni .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-foot{padding:10px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:2px}
.nl-foot .nl-ni{height:38px;font-size:13px}

.newlook .nl-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;min-width:0;
                 height:var(--top-h);padding:0 20px;background:var(--ground);border-bottom:1px solid var(--line2);
                 backdrop-filter:none}
.nl-back{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 10px;border-radius:8px;flex:none;
         border:1px solid var(--line);background:var(--surf2);color:var(--ink);font:700 13px/1 var(--font-body);
         text-decoration:none;transform:none}
.nl-back svg{width:16px;height:16px}
.nl-back:hover{background:#45305F}
.nl-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
          font:800 calc(20px * var(--display-scale) / 1.3)/1 var(--font-display);letter-spacing:.06em;
          text-transform:uppercase;color:var(--ink2)}
.nl-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.nl-me{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:10px;color:var(--ink);text-decoration:none}
a.nl-me:hover{background:var(--hover)}
.nl-me img{width:32px;height:32px;border-radius:8px;object-fit:cover;background:var(--surf2);flex:none}
.nl-me-t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.nl-me-t b{font-weight:600;font-size:13px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nl-me-t i{font-style:normal;font-size:11px;color:var(--mut)}

/* Inside the app the bar is the window's title bar: it drags the window, and
   keeps clear of Windows' caption buttons in the top right (app2.css .top) */
html.in-app .nl-top{-webkit-app-region:drag;padding-right:calc(20px + 100vw - env(titlebar-area-width, 100vw))}
html.in-app .nl-top a,html.in-app .nl-top button{-webkit-app-region:no-drag}
html.in-app .nl-mark{-webkit-app-region:drag}
html.wco .nl-top{background:linear-gradient(90deg,var(--ground) 0%,var(--ground) 45%,#311C4F calc(100% - 150px),#311C4F 100%)}

/* ---------------- the page ---------------- */
.newlook .wrap{max-width:1320px;margin:0 auto;padding:26px 28px 40px;gap:16px}
.newlook h1{font-weight:900;letter-spacing:.03em;line-height:1}
.newlook .pagehead h1{font-size:calc(34px * var(--display-scale) / 1.3)}
.newlook .pagehead .sub{color:var(--ink2);font-size:14px;margin:8px 0 0;max-width:70ch}
.newlook h2{font:800 calc(18px * var(--display-scale) / 1.3)/1.1 var(--font-display);letter-spacing:.06em;color:var(--ink2)}
.newlook h3{font-weight:800;letter-spacing:.05em}
.newlook .foot{max-width:none;margin:0;padding:18px 28px 30px;border-top:1px solid var(--line2)}
.newlook .foot a{color:var(--ink2)}

/* ---------------- buttons ---------------- */
.newlook .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:8px;
              font:700 13px/1 var(--font-body);letter-spacing:.02em;text-transform:none;white-space:nowrap;
              background:var(--surf2);color:var(--ink);border:1px solid var(--line);
              transition:filter .12s,background .12s,transform .08s}
.newlook .btn:hover{background:#45305F;border-color:var(--line)}
.newlook .btn:active{transform:translateY(1px)}
.newlook .btn.pri{background:var(--pink);border-color:transparent;color:var(--accink)}
.newlook .btn.pri:hover{filter:brightness(1.08)}
.newlook .btn.dim,.newlook .btn.ghost{background:transparent;color:var(--ink2)}
.newlook .btn.dim:hover,.newlook .btn.ghost:hover{background:var(--hover);color:var(--ink)}
.newlook .btn.sm{height:30px;padding:0 12px;font-size:12px;border-radius:7px}
.newlook .btn.icon{padding:0 11px}
.newlook .btn.danger{color:var(--bad)}
.newlook .btn.danger:hover{background:rgba(var(--bad-rgb),.12);border-color:rgba(var(--bad-rgb),.6)}
.newlook .btn:disabled,.newlook .btn[disabled]{opacity:.55;filter:none}
.newlook .btn svg{width:16px;height:16px}

/* ---------------- cards, rows, tiles ---------------- */
.newlook .card{background:var(--surf);border-color:var(--line2);border-radius:12px}
.newlook .prow{border-radius:8px}
.newlook .prow img{border-radius:6px}
.newlook .prow .cap{border-radius:6px}
.newlook .tile,.newlook .histrow,.newlook .result,.newlook .srvtile{border-color:var(--line2);border-radius:10px}
.newlook .map{border-color:var(--line2);border-radius:8px}
.newlook .map:hover{border-color:var(--pink)}
.newlook .tag{border-radius:6px;padding:2px 7px}
.newlook code{border-radius:6px}
.newlook .log div{border-bottom-color:var(--line2)}
.newlook .setrow{border-bottom-color:var(--line2)}
.newlook .setlabel{font:700 14px/1.3 var(--font-body);letter-spacing:0;text-transform:none}
.newlook .sethelp{font-size:12.5px;line-height:1.5}
.newlook .empty{color:var(--mut)}
.newlook #toast{border-radius:10px;padding:12px 16px;border-color:rgba(var(--acc-rgb),.6);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.newlook #toast.bad{border-color:rgba(var(--bad-rgb),.6)}

/* ---------------- tabs: the app's pill tabs ---------------- */
.newlook .tabs{gap:4px;padding:4px;margin:0;background:var(--surf);border:1px solid var(--line2);border-radius:10px;
               width:max-content;max-width:100%;overflow:auto}
.newlook .tab,.newlook .tabs .tab{display:flex;align-items:center;gap:8px;height:36px;padding:0 16px;margin:0;border:0;border-radius:7px;
               font:700 13px/1 var(--font-body);letter-spacing:0;text-transform:none;color:var(--ink2);background:none}
.newlook .tab:hover,.newlook .tabs .tab:hover{color:var(--ink);background:var(--hover)}
.newlook .tab.on,.newlook .tabs .tab.on{background:var(--surf2);color:var(--ink);box-shadow:inset 0 -2px 0 var(--pink)}

/* ---------------- fields ---------------- */
.newlook input[type=text],.newlook input[type=number],.newlook input[type=search],.newlook select,.newlook textarea{
  font-family:var(--font-body);font-size:13.5px;background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.newlook input[type=text],.newlook input[type=number],.newlook input[type=search],.newlook select{min-height:38px}
.newlook input:focus,.newlook select:focus,.newlook textarea:focus{border-color:var(--pink)}
.newlook select option{background:var(--surf)}
.newlook input[type=checkbox],.newlook input[type=radio]{accent-color:var(--pink)}

/* ---------------- tables ---------------- */
.newlook table.data th{font:700 11px var(--font-body);letter-spacing:.08em;color:var(--mut);border-bottom-color:var(--line2)}
.newlook table.data td{border-bottom-color:var(--line2)}
.newlook table.data tbody tr:hover{background:var(--hover)}
.newlook table.data .who img{width:28px;height:28px;border-radius:7px}
.newlook table.data a:hover{color:var(--pink)}
.newlook .pbtn,.newlook .pnum{border-radius:8px;border-color:var(--line2)}

/* a CT or T chip, in the game's side colours (app2.css .chip.side-ct) */
.newlook .sidechip{font:700 10px/1 var(--font-body);letter-spacing:.06em;padding:4px 7px;border-radius:6px;border:0}
.newlook .sidechip.ct{color:#DCE9FF;background:rgba(var(--ct-rgb),.25)}
.newlook .sidechip.t{color:#FFEBCB;background:rgba(var(--tside-rgb),.25)}

/* ---------------- narrower windows ----------------
   As in the app: the side bar folds to its icons first */
@media (max-width:1440px) and (min-width:761px){
  :root{--side-w:76px}
  .nl-mark{justify-content:center;padding:0;font-size:30px}
  .nl-mark .w span{display:none}
  .nl-nav{padding:10px 8px}
  .nl-ni,.nl-foot .nl-ni{flex-direction:column;justify-content:center;gap:3px;height:56px;padding:0;font-size:10px}
  .nl-foot .nl-ni{height:48px}
  .nl-ni .lbl{flex:none;max-width:100%;text-align:center}
  .nl-ni.on::before{left:-8px}
  .nl-foot{padding:8px}
}
/* A phone: the side bar is a row along the top that scrolls sideways */
@media (max-width:760px){
  .nl-frame{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto}
  .nl-side{grid-row:1;height:auto;flex-direction:row;align-items:center;overflow-x:auto;scrollbar-width:none;
           border-right:0;border-bottom:1px solid var(--line2)}
  .nl-side::-webkit-scrollbar{display:none}
  .nl-mark{height:50px;padding:0 10px 0 16px;font-size:22px}
  .nl-nav,.nl-foot{flex:none;flex-direction:row;overflow:visible;padding:6px 4px;border-top:0;gap:2px}
  .nl-ni,.nl-foot .nl-ni{height:36px;padding:0 10px;gap:7px;font-size:13px}
  .nl-ni svg{width:18px;height:18px}
  .nl-ni.on::before{left:10px;right:10px;top:auto;bottom:-6px;width:auto;height:3px;border-radius:3px 3px 0 0}
  .nl-sep{display:none}
  .nl-frame > .nl-top{grid-column:1;grid-row:2;position:static;height:auto;min-height:52px;padding:8px 16px;flex-wrap:wrap}
  .nl-frame > main.wrap{grid-column:1;grid-row:3}
  .nl-frame > .foot{grid-column:1;grid-row:4}
  .newlook .wrap{padding:18px 16px 30px}
  .nl-me-t{display:none}
  .nl-me{padding:4px}
}

/* ---------------- the strat board: the whole window, no page scroll ----------------
   pug.css lays it out (body.strat-editor); here it sits in the frame, under the bar */
.newlook body.strat-editor{display:block;height:100vh;overflow:hidden}
.newlook body.strat-editor .nl-frame{height:100vh;min-height:0;grid-template-rows:var(--top-h) minmax(0,1fr)}
.newlook body.strat-editor .nl-frame > main.wrap{max-width:none;min-height:0;padding:16px 20px 18px;display:block}
.newlook .sed-id h1{font-weight:900;font-size:calc(30px * var(--display-scale) / 1.3)}
.newlook .stool{border-color:var(--line2);border-radius:10px;font:700 10px/1 var(--font-body);letter-spacing:.02em;text-transform:none}
.newlook .stool:hover{background:var(--hover);border-color:var(--line)}
.newlook .stool.on{background:var(--pink);border-color:transparent}
.newlook .tbtn{border-color:var(--line2);border-radius:7px;font:700 12px/1 var(--font-body);text-transform:none;padding:8px 11px}
.newlook .tbtn:hover{background:#45305F}
.newlook .tbtn.on{background:var(--pink);border-color:transparent}
.newlook .boardwrap{border-color:var(--line2);border-radius:12px}
.newlook .spanel-sec{border-color:var(--line2);border-radius:12px;padding:14px}
.newlook .spanel-sec h3{font:700 11px/1 var(--font-body);letter-spacing:.08em}
.newlook .sstep{border-color:var(--line2);border-radius:8px}
.newlook .sstep:hover{background:var(--hover)}
.newlook .sstep.on{border-color:rgba(var(--acc-rgb),.6);background:rgba(var(--acc-rgb),.10)}
.newlook .pill{border-color:var(--line2)}
.newlook .pill.on{border-color:rgba(var(--acc-rgb),.6);background:rgba(var(--acc-rgb),.10)}
.newlook .fld input,.newlook .fld select{border-radius:8px;min-height:36px}
.newlook .fld input:focus,.newlook .fld select:focus{outline:0;border-color:var(--pink)}
.newlook .fld > span,.newlook .tlabel{font:700 10.5px var(--font-body);letter-spacing:.08em}
.newlook .stratapp textarea{border-radius:8px}
.newlook .stratapp textarea:focus{outline:0;border-color:var(--pink)}
.newlook .pracgrid{gap:10px}
.newlook .pracmap{border-color:var(--line2);border-radius:10px;padding:12px 14px}
/* a map to start a strat on, with its picture (app2.css .mtile) */
.mtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.mtile{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--surf2);color:var(--ink);
       text-decoration:none;border:2px solid transparent;transition:border-color .12s}
.mtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.mtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,4,18,.9))}
.mtile b{position:absolute;left:10px;bottom:24px;z-index:1;font:800 calc(17px * var(--display-scale) / 1.3)/1 var(--font-display);
         text-transform:uppercase;letter-spacing:.04em}
.mtile i{position:absolute;left:10px;bottom:8px;z-index:1;font:700 11px var(--font-body);font-style:normal;color:var(--pink)}
.mtile:hover{border-color:rgba(var(--acc-rgb),.6)}
.mtile:hover img{transform:scale(1.04)}
@media (max-width:1000px){
  .newlook body.strat-editor{height:auto;overflow:visible}
  .newlook body.strat-editor .nl-frame{height:auto;min-height:100vh;grid-template-rows:var(--top-h) 1fr}
}
@media (max-width:760px){
  .newlook body.strat-editor .nl-frame{grid-template-rows:auto auto 1fr}
}

/* ============================================================
   The player pages: a match, a profile, the leaderboard, practice
   ------------------------------------------------------------
   match.php, profile.php, leaderboard.php and practice.php in the
   frame. pug.css still lays them out; here their own parts only take
   the app's corners and softer lines, and the small labels its body
   face (app2.css .thead, .ltile .k). Where pug.css marks a state with
   a border - a hover, the one picked - it is said again below, since
   a softer line here would otherwise cover it.
   ============================================================ */

/* ---------------- a match ---------------- */
.newlook .mhero{border-color:var(--line2);border-radius:12px}
.newlook .mh-meta{font:700 11px var(--font-body);letter-spacing:.08em}
.newlook .mh-won{border-radius:6px;font:700 10px/1 var(--font-body);letter-spacing:.08em}
.newlook .mhl-card{border-color:var(--line2) var(--line2) var(--line2) var(--t1);border-radius:12px}
.newlook .mhl-card.t2{border-left-color:var(--t2)}
.newlook .mhl-card i,.newlook .mstory > i,.newlook .mrounds > i,.newlook .mdet h4{font:700 11px/1 var(--font-body);letter-spacing:.08em}
.newlook .mstory,.newlook .mrounds{border-color:var(--line2);border-radius:12px}
.newlook .mstory-aw span{border-color:var(--line2) var(--line2) var(--line2) var(--t1);border-radius:8px}
.newlook .mstory-aw span.t2{border-left-color:var(--t2)}
.newlook .mstory-aw i{font:700 10px/1 var(--font-body);letter-spacing:.08em}
.newlook .mr-c{border-radius:5px}
/* each team's scoreboard keeps its colour along the top */
.newlook .msb{border-color:var(--t1) var(--line2) var(--line2);border-radius:12px}
.newlook .msb.t2{border-top-color:var(--t2)}
.newlook .mstable th{font:700 11px var(--font-body);letter-spacing:.08em;border-bottom-color:var(--line2)}
.newlook .mstable td{border-bottom-color:var(--line2)}
.newlook .mrow:focus-visible{outline:0}
.newlook .mrow:hover td,.newlook .mrow:focus-visible td{background:var(--hover)}
.newlook .mrow.open td{background:var(--surf2)}
.newlook .mstable.v2 .mdetail > td{border-bottom-color:var(--line2)}
.newlook .mrow .ptag{border-radius:5px;font:700 9.5px/1 var(--font-body);letter-spacing:.08em}
.newlook .mstable.v2 .edelta{font:600 10.5px/1.2 var(--font-body)}
.newlook .mstable.v2 .etier{font:700 10px/1.3 var(--font-body);letter-spacing:.06em}
.newlook .mdet-more dl div{border-radius:8px}
.newlook .hitcard{border-color:var(--line2);border-radius:10px}
.newlook .hitrow .bar{border-radius:4px}
.newlook .result .rwon{border-radius:6px;font:700 10px/1 var(--font-body);letter-spacing:.08em}

/* ---------------- the shape (match, profile, leaderboard) ---------------- */
.newlook .radar{border-color:var(--line2);border-radius:12px}
.newlook .radar .ax{font-family:var(--font-body);font-weight:700}
.newlook .radartip{border-color:var(--line2);border-radius:8px;padding:6px 10px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.newlook .radarlegend .key::before{border-radius:3px}
.newlook .radarkey b{font-family:var(--font-body);font-weight:700}
.newlook .shapekey{border-top-color:var(--line2)}

/* ---------------- a profile ---------------- */
/* the head card lit like the app's (app2.css .phero) */
.newlook .card:has(> .profhead){background:linear-gradient(120deg,rgba(var(--acc-rgb),.10),transparent 50%),var(--surf)}
.newlook .profavatar{border-color:var(--line2);border-radius:14px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.newlook .rankbox{border-color:var(--line2);border-radius:10px;background:rgba(0,0,0,.18)}
.newlook .rankbox .k,.newlook .tile .k,.newlook .lo .k,.newlook .invgroup,.newlook .subh{font:700 11px var(--font-body);letter-spacing:.08em}
.newlook .histrow .thumb{border-radius:7px}
.newlook .histrow .hstatus{font-family:var(--font-body)}
.newlook .res{border-radius:5px;padding:1px 6px;font:700 10px/1.4 var(--font-body);letter-spacing:.08em}
.newlook .pager{border-top-color:var(--line2)}
.newlook .pbtn:hover,.newlook .pnum:hover{border-color:var(--line)}
.newlook .pnum.on{border-color:rgba(var(--acc-rgb),.6)}

/* the loadout picker and the inventory (app2.css .ltile, .opt) */
.newlook .lo{border-color:var(--line2);border-radius:12px;transition:border-color .12s}
.newlook .lotile:hover{border-color:rgba(var(--acc-rgb),.55)}
.newlook .lo.busy{border-color:var(--pink)}
.newlook .lopic{border-color:var(--line2);border-radius:8px;
                background:radial-gradient(ellipse at 50% 60%,rgba(155,92,255,.18),transparent 70%),var(--surf)}
.newlook .invitem{border-color:var(--line2);border-radius:10px;transition:border-color .12s,opacity .12s}
.newlook .invitem:hover{border-color:rgba(var(--acc-rgb),.55)}
.newlook .invitem.worn{border-color:rgba(var(--acc-rgb),.6)}
.newlook .invitem .side{border:0;border-radius:5px;padding:2px 5px;font:700 9px/1.2 var(--font-body);letter-spacing:.06em;
                        background:rgba(244,236,255,.1);color:var(--ink2)}
.newlook .invitem .side.ct{color:#DCE9FF;background:rgba(var(--ct-rgb),.25)}
.newlook .invitem .side.t{color:#FFEBCB;background:rgba(var(--tside-rgb),.25)}
.newlook .invitem .side.worn{color:var(--accink);background:var(--pink)}
.newlook .invmodal{background:rgba(10,4,18,.78);backdrop-filter:blur(4px)}
.newlook .invbox{border-color:var(--line2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.newlook .invhero{border-color:var(--line2);border-radius:12px;
                  background:radial-gradient(ellipse at 30% 50%,rgba(155,92,255,.16),transparent 70%),var(--surf2)}
.newlook .invherograde{font:700 11px var(--font-body);letter-spacing:.08em}
.newlook .invopt{border-color:var(--line2);border-radius:10px}
.newlook .invopt:hover{border-color:rgba(var(--acc-rgb),.55)}
.newlook .invopt[style*="--grade"]:hover{border-color:var(--grade)}
.newlook .invopt[style*="--grade"]::after{border-radius:0 0 9px 9px}
.newlook .invopt .g,.newlook .invopt .alt{font-family:var(--font-body);font-weight:700}
.newlook .invside button,.newlook .invmore{border-color:var(--line2);border-radius:8px}
.newlook .invmore{font:700 12px var(--font-body)}
.newlook .invmore:hover{border-color:var(--line)}
.newlook .invside button.on,.newlook .invmore.on{border-color:rgba(var(--acc-rgb),.6);color:var(--ink);background:rgba(var(--acc-rgb),.12)}

/* ---------------- the clip strips and the opt-out (assets/timeline.css) ----------------
   The page and a card both space their rows already, so no margins of their own */
.newlook .tl-strip,.newlook .tl-off{margin:0}
.newlook .tl-strip h3{font:800 calc(18px * var(--display-scale) / 1.3)/1.1 var(--font-display);letter-spacing:.06em;color:var(--ink2)}
.newlook .tl-mini{border-color:var(--line2);border-radius:12px;transition:border-color .12s}
.newlook .card .tl-mini{background:var(--surf2)}
.newlook .tl-mini:hover{border-color:rgba(var(--acc-rgb),.55)}
.newlook .tl-mini-t{font-size:13.5px}
.newlook .tl-mini-s{font-size:12px}

/* ---------------- the leaderboard ----------------
   The season row under the board's tabs: quieter chips, not a second pill bar */
.newlook .tabs.sub{margin:-6px 0 0;padding:0;gap:6px;background:none;border:0;width:auto;overflow:visible}
.newlook .tabs.sub .tab{height:30px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;font:600 12px/1 var(--font-body)}
.newlook .tabs.sub .tab.on{background:rgba(var(--acc-rgb),.12);border-color:rgba(var(--acc-rgb),.5);box-shadow:none}
.newlook table.data .who .tbadge{width:26px;height:26px;border-radius:0}
.newlook table.data tr.me{background:rgba(var(--acc-rgb),.09)}
.newlook table.data tr.me td:first-child{box-shadow:inset 3px 0 0 var(--pink)}

/* ---------------- practice ---------------- */
.newlook .pracon{border-color:rgba(var(--acc-rgb),.45);
                 background:linear-gradient(120deg,rgba(var(--acc-rgb),.10),transparent 50%),var(--surf)}
.newlook .pracon .cap{padding:4px 8px;border-radius:6px;font:700 10px/1 var(--font-body);letter-spacing:.08em}
.newlook .pracmap.on{border-color:rgba(var(--acc-rgb),.6);background:rgba(var(--acc-rgb),.08)}
.newlook .praccode{border-color:var(--line2);border-radius:10px;background:rgba(0,0,0,.2)}