/* 16.10 (owner via hq, A2 from the 13.10 sketch): the top of the record. plaques on generated metal with a moving light, the bell line
   with its replay, the chase, the goal box after Look up, the seal chips, Rising, the ghost row. sentence case throughout */
@font-face{font-family:'Messapia';src:url(fonts/messapia-400.woff2) format('woff2');font-weight:400;font-display:swap}
#top{margin-top:32px;padding-top:18px;border-top:1.5px solid var(--ink);--g-dot:#C9A227;--g-text:#A67C00;--plaque:'Messapia','EB Garamond',serif;--spring:linear(0,.0817,.2672,.4818,.6758,.8263,.9292,.9915,1.0236,1.0352,1.0345,1.0277,1.0189,1.0108,1.0044,1,.9975,.9965,.9965,.9969,.9976,.9983,.999,.9995,.9998,1)}
#top h2{margin:0;font:500 26px/1.15 var(--serif)}
#top .sub{margin-top:6px;font:12px/1.6 var(--mono);color:var(--ink-60);max-width:80ch}
#top button{font:inherit;color:inherit;cursor:pointer}
#top .btn{font:500 12px var(--mono);padding:8px 12px;border:1px solid var(--ink-24);border-radius:2px;background:var(--white);color:var(--ink);transition:transform 160ms cubic-bezier(.23,1,.32,1),border-color .15s}
#top .btn:active{transform:scale(.97)} @media (hover:hover){#top .btn:hover{border-color:var(--ink)}}
#top .btn:focus-visible,#top .row:focus-visible,#top .cat button:focus-visible,#top .tabs button:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}

/* the bell line: what the last bell changed, the next bell, the replay */
#top .bellline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px;padding:12px 14px;border:1px solid var(--ink-24);border-radius:2px;background:rgba(250,250,247,.6);transition:border-color .3s,box-shadow .3s}
#top .bellline img{width:28px;height:28px}
#top .bellline .what{flex:1 1 420px;font:13px/1.5 var(--mono)} #top .bellline .what b{font-weight:500} #top .bellline .what .up{color:var(--verdigris)}
#top .bellline .next{font:13px var(--mono);color:var(--ink)} #top .bellline .next b{font-weight:500}
#top .bellline .replay{display:inline-flex;align-items:center;gap:8px}
#top .bellline .replay i{display:inline-block;width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
#top .bellline.live{border-color:var(--ink);box-shadow:0 0 0 3px var(--paint-08)}

/* the podium: three plaques, gold taller in the middle, silver and copper turned toward it */
#top .podium{margin-top:22px}
#top .chase{margin:0 0 12px;font:13px/1.5 var(--mono);color:var(--ink-60);transition:opacity .3s} #top .chase b{color:var(--ink);font-weight:500} #top .chase.was{opacity:.35}
#top .pod{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:18px;align-items:end;perspective:1400px}
#top .plq{all:unset;box-sizing:border-box;position:relative;display:block;border-radius:3px;overflow:hidden;color:var(--ink);cursor:pointer;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -1px 0 rgba(24,11,81,.25) inset,0 10px 24px -14px rgba(24,11,81,.5)}
#top .plq:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
#top .plq .mat{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#top .plq.s .mat{filter:saturate(.9);transform:scale(1.09)} #top .plq.c .mat{transform:scale(1.06)} #top .plq.g .mat{transform:scale(1.04)}
#top .plq canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.55;mix-blend-mode:soft-light}
#top .plq .in{position:relative;z-index:2;padding:22px 26px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start}
#top .plq .num{grid-row:1/4;font:400 72px/1 var(--plaque);letter-spacing:-.02em;color:rgba(24,11,81,.88);text-shadow:1px 1px 0 rgba(255,255,255,.55),-1px -1px 0 rgba(24,11,81,.35)}
#top .plq .nm{font:500 24px/1.1 var(--serif);text-shadow:1px 1px 0 rgba(255,255,255,.45);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#top .plq .held{margin-top:2px;font:12px var(--mono);color:var(--ink)}
#top .plq .held b{font:500 30px/1 var(--serif);color:var(--ink);margin-right:6px;text-shadow:1px 1px 0 rgba(255,255,255,.5)}
#top .plq .tierc{margin-top:8px;display:inline-flex;align-items:center;gap:7px;font:500 11px var(--mono);color:var(--ink)} #top .plq .tierc i{width:8px;height:8px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 1px rgba(255,255,255,.5)}
#top .plq .strip2{grid-column:1/3;margin-top:12px}
#top .plq .streak{grid-column:1/3;display:flex;justify-content:space-between;gap:10px;font:11px var(--mono);color:var(--ink);border-top:1px solid rgba(24,11,81,.3);padding-top:8px;margin-top:8px}
#top .plq.g{min-height:250px} #top .plq.s,#top .plq.c{min-height:214px}
#top .plq.g .num{font-size:88px}
#top .pod .plq.s{transform:rotateY(7deg) rotateX(2deg)} #top .pod .plq.c{transform:rotateY(-7deg) rotateX(2deg)} #top .pod .plq.g{transform:rotateX(3deg)}
#top .pod.was .plq .held b,#top .pod.was .plq .strip2,#top .pod.was .plq .tierc{opacity:.35}

/* the goal box after Look up */
#top .me{margin-top:22px;padding:14px 16px;border:1px solid var(--ink);border-radius:2px;max-width:760px}
#top .me .l1{font:13px/1.5 var(--mono)} #top .me .l1 b{font-weight:500}
#top .goal{display:grid;grid-template-columns:repeat(17,1fr);gap:4px;margin-top:10px;max-width:420px}
#top .goal i{position:relative;height:16px;border:1px solid var(--ink-24);border-radius:1px} #top .goal i.on{border-color:transparent}
#top .goal i.need{border:1.5px dashed var(--ink);animation:topneed 2s ease-in-out 3}
#top .goal i[data-to]{box-shadow:-2px 0 0 var(--ink)} #top .goal i[data-to]::before{content:attr(data-to);position:absolute;left:-2px;top:-17px;font:500 10px var(--mono);color:var(--ink-60);white-space:nowrap}
#top .goal{margin-top:24px}
@keyframes topneed{0%,100%{background:transparent}50%{background:var(--paint-08)}}
#top .me .l2{margin-top:8px;font:12px/1.6 var(--mono);color:var(--ink-60)} #top .me .l2 b{color:var(--ink);font-weight:500} #top .me .l2 a{color:var(--ink);margin-left:6px}
#top .me .cta{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);padding:9px 12px;border:1.5px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--white);text-decoration:none;transition:transform 160ms cubic-bezier(.23,1,.32,1)} #top .me .cta:active{transform:scale(.97)}

/* tabs and the seal chips */
#top .tabs{display:flex;gap:4px;margin-top:26px;border-bottom:1px solid var(--ink-24)}
#top .tabs button{font:500 12px var(--mono);padding:8px 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--ink-60)}
#top .tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
#top .cat{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
#top .cat button{display:inline-flex;align-items:center;gap:7px;font:12px var(--mono);padding:5px 9px 5px 6px;border:1px solid var(--ink-24);border-radius:2px;background:var(--white);transition:transform 160ms cubic-bezier(.23,1,.32,1)}
#top .cat button img{width:18px;height:18px;opacity:.8} #top .cat button small{color:var(--ink-60);font-size:11px}
#top .cat button:active{transform:scale(.97)} @media (hover:hover){#top .cat button:hover{border-color:var(--ink)}} #top .cat button[aria-pressed=true]{border-color:var(--ink);background:var(--paint-08)}
#top .cat .clear{border-style:dashed}

/* the rows */
#top .grid{position:relative;margin-top:14px;font:13px var(--mono);font-variant-numeric:tabular-nums}
#top .hd,#top .row{display:grid;grid-template-columns:72px minmax(0,1fr) 300px 96px 132px;column-gap:16px;align-items:center}
#top .hd{font:500 11px var(--mono);color:var(--ink-60);padding:0 0 8px 8px;border-bottom:1px solid var(--ink-24)}
#top .row{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) 300px 96px 132px;column-gap:16px;align-items:center;width:100%;padding:10px 0 10px 8px;border-bottom:1px solid var(--ink-24);color:var(--ink);font:13px var(--mono);font-variant-numeric:tabular-nums;background:var(--white);cursor:pointer}
@media (hover:hover){#top .row:hover{background:var(--ink-06)}} #top .row.mine{background:var(--paint-08)} #top .row.mine .wl span{font-weight:600}
#top .row.dim{opacity:.3} #top .row.was .ct,#top .row.was .strip2,#top .row.was .tr{opacity:.35}
#top .rk{display:flex;align-items:baseline;gap:8px} #top .rk b,#top .rk number-flow{font-weight:500;min-width:2ch}
#top .mv{font-size:11px;color:var(--ink-60);display:inline-block} #top .mv.up{color:var(--verdigris)} #top .mv.down{color:var(--ember)}
#top .mv.flash{animation:topflash 1.2s ease-out 1}
@keyframes topflash{0%{transform:scale(1)}20%{transform:scale(1.5);text-shadow:0 0 10px currentColor}100%{transform:scale(1)}}
#top .wl{min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap} #top .wl span{overflow:hidden;text-overflow:ellipsis} #top .wl small{font-size:11px;color:var(--ink-60)}
#top .wl .first{font:500 10.5px var(--mono);padding:2px 5px;border:1px solid var(--g-text);color:var(--g-text);border-radius:2px;overflow:visible}
#top .strip2{display:flex;align-items:center;gap:3px} #top .strip2 i{position:relative;flex:0 0 10px;height:14px;border:1px solid var(--ink-24);border-radius:1px;transition:background .3s,border-color .3s} #top .strip2 i.on{border-color:transparent}
#top .strip2 i.rare::after{content:"";position:absolute;left:50%;top:-5px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--ink)}
#top .strip2 i.new{animation:topcell .9s cubic-bezier(.2,.9,.3,1.2) 1}
@keyframes topcell{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
#top .strip2 em{font-style:normal;font-size:11px;color:var(--ink-60);margin-left:6px;white-space:nowrap}
#top .c1{background:var(--tier-copper)} #top .c2{background:var(--tier-silver)} #top .c3{background:var(--g-dot)} #top .c4{background:var(--tier-diamond)} #top .c5{background:var(--tier-olympian)}
#top .tierc{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500} #top .tierc i{width:8px;height:8px;border-radius:50%;background:currentColor}
#top .t1{color:var(--tier-copper)} #top .t2{color:var(--tier-silver)} #top .t3{color:var(--g-text)} #top .t4{color:var(--tier-diamond)} #top .t5{color:var(--tier-olympian)}
#top #top-rows{position:relative}
#top .bellline .replay:disabled{cursor:default;border-color:var(--ink)}
#top .row.ghost{border:1px dashed var(--ink-24);border-radius:2px;margin-top:8px;background:transparent;color:var(--ink-60);text-decoration:none}
#top .row.ghost .rk b{color:var(--ink-24)} #top .row.ghost .wl span{color:var(--ink)} #top .row.ghost .strip2 i{border-style:dashed} #top .row.ghost .tierc{color:var(--ink-60)}
#top .row.ghost .wl>span{flex:none} #top .row.ghost .wl small{min-width:0;overflow:hidden;text-overflow:ellipsis}
#top .plq .tierc{white-space:nowrap} @media (max-width:1180px){#top .plq .tierc .full{display:none}}
@media (hover:hover){#top .row.ghost:hover{border-color:var(--ink);color:var(--ink)}}
#top .empty2{padding:18px 8px;font:12px var(--mono);color:var(--ink-60);border-bottom:1px solid var(--ink-24)}
#top .more{margin-top:14px}

@media (prefers-reduced-motion:reduce){#top *{animation:none!important;transition-property:opacity,border-color,background-color!important}}

@media (max-width:860px){
#top .hd,#top .row{grid-template-columns:56px minmax(0,1fr) 84px 100px;column-gap:10px}#top .hd .hs,#top .row .strip2{grid-column:2}#top .row .strip2{grid-row:2;margin-top:6px}#top .hd .hs{display:none}#top .row .ct{grid-row:1;grid-column:3}#top .row .tr{grid-row:1;grid-column:4}#top .hd .hc{grid-column:3}#top .hd .ht{grid-column:4}
#top .pod{grid-template-columns:1fr 1fr;gap:10px}#top .pod .plq.g{grid-column:1/3;grid-row:1}#top .pod .plq.s,#top .pod .plq.c{grid-row:2}#top .plq.s,#top .plq.c{min-height:170px}#top .plq .in{padding:14px 16px 20px}#top .plq .num{font-size:52px}#top .plq.g .num{font-size:66px}#top .plq .nm{font-size:19px}#top .plq .held b{font-size:24px}
#top .pod .plq.s,#top .pod .plq.c,#top .pod .plq.g{transform:none}#top .plq.g{min-height:0}#top .plq .streak span+span{display:none}#top .plq .streak{margin-top:10px}
#top .bellline{padding:10px 12px}#top .plq.g .in{padding:24px 30px 28px}#top .bellline .replay{width:100%;justify-content:center}#top .plq .tierc .full{display:none}#top .cat{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}#top .cat button{flex:0 0 auto}}
@media (max-width:640px){
#top .bellline img{display:none}#top .grid,#top .row{font-size:12px}#top .hd,#top .row{grid-template-columns:40px minmax(0,1fr) 70px 88px;column-gap:8px}#top .hd{font-size:11px;white-space:nowrap}#top .tierc{font-size:11px;gap:5px}#top .rk{flex-direction:column;gap:0}#top .strip2{gap:2px}#top .strip2 i{flex-basis:7px;height:11px}#top .wl{flex-direction:column;gap:0}#top .wl small{font-size:11px}#top .plq .strip2 i{flex-basis:8px;height:12px}
#top .row.ghost{grid-template-columns:40px minmax(0,1fr);row-gap:4px}#top .row.ghost .strip2,#top .row.ghost .ct,#top .row.ghost .tr{display:none}#top .row.ghost .wl{white-space:normal}
#top .plq.s .in,#top .plq.c .in{grid-template-columns:1fr;gap:2px}#top .plq.s .num,#top .plq.c .num{grid-row:auto;font-size:40px}#top .plq.s .who,#top .plq.c .who{font-size:17px}#top .plq.s .held b,#top .plq.c .held b{font-size:20px}#top .plq.s .strip2,#top .plq.c .strip2{grid-column:1}#top .plq.s .streak,#top .plq.c .streak{grid-column:1}#top .plq.s .strip2 i,#top .plq.c .strip2 i{flex-basis:6px;height:10px}#top .plq.s .strip2,#top .plq.c .strip2{gap:1.5px}}