/* The one-letter army and unit pages (T-1409M, T-1566P; docs/rated.js, the mockup design/rated-v2/). Everything under .rt, on the
   site's own tokens, light and dark: SWORD in the attacker's blue, SHIELD in the defender's purple, roles in the leaders' yellow, the
   setup in the detachments' teal, the letters in the tier ramp, the Armies green for the army's mark; each unit type's band in a hue of its own. IBM Plex Mono for labels and figures
   (fonts/, OFL), Barlow Semi Condensed and IBM Plex Sans as everywhere else. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("fonts/ibm-plex-mono-latin-700.woff2") format("woff2"); }
.rt {
  --line: var(--border); --panel2: var(--panel-2); --dim: var(--text-dim); --faint: var(--text-faint);
  --sword: var(--att); --sword-soft: var(--att-soft); --shield: var(--def); --shield-soft: var(--def-soft); --role: var(--lead); --neg: var(--red); --ok: #34D399;
  --ts: var(--tier-s); --ta: var(--tier-a); --tb: var(--tier-b); --tc: var(--tier-c); --td: var(--tier-d);
  --tsi: var(--tier-s-ink); --tai: var(--tier-a-ink); --tbi: var(--tier-b-ink); --tci: var(--tier-c-ink); --tdi: var(--tier-d-ink);
  --ar: #34D399; --ar2: #0FD3C3;
  --g-hero: #FB7185; --g-char: #FB923C; --g-line: #A3E635; --g-inf: #818CF8; --g-mount: #2DD4BF; --g-mon: #E879F9; --g-veh: #94A3B8;
  --head: var(--font-head); --body: var(--font-body); --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-width: 640px; margin: 0 auto; display: grid; gap: 18px; font: 15px/1.5 var(--body); color: var(--text);
}
:root[data-theme="light"] .rt {
  --ok: #047857; --ar: #047857; --ar2: #0F766E;
  --g-hero: #BE123C; --g-char: #C2410C; --g-line: #4D7C0F; --g-inf: #4338CA; --g-mount: #0F766E; --g-mon: #A21CAF; --g-veh: #475569;
}
.rt *, .rt-ov * { box-sizing: border-box; }
.rt h1, .rt h2, .rt h3 { font-family: var(--head); font-weight: 800; margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: 0; }
.rt h2 { font-size: 24px; } .rt h3 { font-size: 19px; }
.rt a { color: inherit; }
.rt .num { font-variant-numeric: tabular-nums; }
.rt .card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.rt .key { font-size: 12px; color: var(--faint); margin: 0; }
.rt .credit { font-size: 11.5px; color: var(--faint); margin: 0; }
.rt button:focus-visible, .rt a:focus-visible, .rt summary:focus-visible, .rt-ov button:focus-visible, .rt-ov a:focus-visible { outline: 2px solid var(--role); outline-offset: 2px; }

/* letter coins */
.rt .coin { --c: var(--td); --ci: var(--tdi); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--ci); font: 800 16px var(--head); flex: none; }
.rt .coin.S { --c: var(--ts); --ci: var(--tsi); } .rt .coin.A { --c: var(--ta); --ci: var(--tai); } .rt .coin.B { --c: var(--tb); --ci: var(--tbi); }
.rt .coin.C { --c: var(--tc); --ci: var(--tci); } .rt .coin.D { --c: var(--td); --ci: var(--tdi); }
/* dashed: no reviewers yet, so the letter is our estimate */
.rt .coin.est { border-style: dashed; background: none; }
.rt .coin.mini { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; border-width: 1.5px; vertical-align: -5px; }
.rt .ib { border: 0; background: none; color: var(--faint); font: 700 13px var(--mono); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.rt .ib:hover { color: var(--text); }

/* the army's mark and eyebrow */
.rt .ebi { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 13px; background: linear-gradient(135deg, var(--ar), var(--ar2)); color: var(--bg);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ar2) 35%, transparent); text-decoration: none; }
.rt .ebi svg { width: 28px; height: 28px; }
.rt .ebi.mk { width: 56px; height: 56px; border-radius: 15px; } .rt .ebi.mk svg { width: 32px; height: 32px; }
.rt .ah { display: grid; gap: 6px; } .rt .ahl { display: flex; align-items: center; gap: 14px; }
.rt .ah h1 { font-size: 40px; line-height: 1; } .rt .ah p { margin: 0; color: var(--dim); font-size: 13.5px; } .rt .ah .stamps { font-size: 12px; color: var(--faint); }
.rt .stamps { margin: 0; font-size: 12px; color: var(--faint); }

/* the army page's controls and list */
.rt .chipsel { display: flex; flex-wrap: wrap; gap: 6px; }
.rt .chipsel[hidden] { display: none; }
.rt .chipsel label { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel2); padding: 0 8px; min-height: 34px; white-space: nowrap; overflow: hidden; font: 700 12.5px var(--body); color: var(--text); }
.rt .chipsel label small { font: 600 11px var(--body); color: var(--faint); }
.rt .chipsel label > span { overflow: hidden; text-overflow: ellipsis; }
.rt .chipsel select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.rt .chipsel label::after { content: "▾"; color: var(--faint); font-size: 11px; }
.rt .chipsel label:focus-within { outline: 2px solid var(--role); outline-offset: 2px; }
.rt .th, .rt .tr { display: grid; grid-template-columns: minmax(0, 1fr) 40px 52px 52px 8px; gap: 5px; align-items: center; }
.rt .th { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 6px 0; position: sticky; top: 0; background: var(--panel); z-index: 1; border-bottom: 1px solid var(--line); }
.rt .th button { border: 0; background: none; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: center; }
.rt .th button:first-child { text-align: left; } .rt .th button.on { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rt .th button:nth-child(3) { color: var(--att-soft); } .rt .th button:nth-child(4) { color: var(--def-soft); }
.rt .tr { padding: 6px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.rt .tr:hover .tn, .rt .tr:focus-visible .tn { text-decoration: underline; text-decoration-color: var(--faint); }
.rt .tr:active { background: var(--panel2); }
.rt .tn { display: block; font-weight: 600; font-size: 14px; line-height: 1.2; }
.rt .tn small { display: block; font: 500 12px var(--body); color: var(--faint); margin-top: 1px; }
.rt .lc { display: grid; place-items: center; } .rt .lc .coin { width: 30px; height: 30px; }
.rt .pc { display: grid; gap: 2px; justify-items: center; }
.rt .pc small { font: 600 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.rt .pc b { font: 700 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
.rt .pc.lo.sw s, .rt .pc.lo.sh s { background: var(--td); } .rt .pc.lo.sw b, .rt .pc.lo.sh b { color: var(--dim); }
.rt .pc i { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rt .pc s { display: block; height: 100%; } .rt .pc.sw s { background: var(--sword); } .rt .pc.sh s { background: var(--shield); }
.rt .pc.sw b { color: var(--sword-soft); } .rt .pc.sh b { color: var(--shield-soft); }
.rt .chev { color: var(--faint); font-size: 15px; }
.rt .gh { margin: 12px 0 2px; padding: 6px 10px; border-radius: 9px; display: flex; gap: 8px; align-items: center; font: 800 14px var(--head); letter-spacing: .08em; text-transform: uppercase;
  color: var(--g); background: color-mix(in srgb, var(--g) 15%, var(--panel)); border-left: 4px solid var(--g); }
.rt .gh small { margin-left: auto; font: 700 11px var(--mono); letter-spacing: 0; color: var(--g); background: color-mix(in srgb, var(--g) 20%, transparent); border-radius: 999px; padding: 1px 8px; }
.rt .gh .coin { width: 24px; height: 24px; font-size: 13px; border-radius: 6px; }
.rt .grp { margin-left: 10px; padding-left: 8px; border-left: 2px solid color-mix(in srgb, var(--g) 35%, transparent); }
.rt .grp .tr:last-child { border-bottom: 0; }

/* a unit's page */
.rt .back { justify-self: start; color: var(--dim); font: 700 14px var(--body); padding: 4px 0; text-decoration: none; }
.rt .back:hover { color: var(--text); }
.rt .picker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; color: var(--dim); }
.rt .picker[hidden] { display: none; }
.rt .picker select { min-width: 0; width: 100%; font: 600 15px var(--body); padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.rt .scn { display: block; border-radius: 16px; border: 1px solid var(--line); background: #0c1424; max-width: 100%; }
.rt .hero2 { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: end; }
.rt .hero2 .hn { min-width: 0; display: grid; gap: 6px; }
/* --wl: the name's longest word, so on a phone the whole word fits its column instead of breaking (T-1553P) */
.rt .hero2 h1 { font-size: min(34px, calc((100vw - 230px) / (var(--wl, 8) * .52))); line-height: 1; overflow-wrap: anywhere; }
.rt .hero2 .meta { color: var(--dim); font-size: 13.5px; }
.rt .rate2 { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; padding: 0; cursor: pointer; text-align: left; justify-self: start; }
.rt .coin.big { width: 46px; height: 46px; font-size: 26px; border-radius: 11px; border-width: 3px; }
.rt .rate2 b { display: block; font: 800 17px/1.1 var(--head); }
.rt .rate2 > span > small { white-space: nowrap; font: 700 11.5px var(--body); color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
/* the two scores */
.rt .ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt .ptile { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: baseline; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, var(--panel)); color: var(--text); cursor: pointer; min-width: 0; }
.rt .ptile.sw { --c: var(--sword); --cs: var(--sword-soft); } .rt .ptile.sh { --c: var(--shield); --cs: var(--shield-soft); }
.rt .ptile span { grid-column: 1 / -1; font: 800 14px var(--head); letter-spacing: .08em; color: var(--cs); }
.rt .ptile b { font: 800 34px/1 var(--head); color: var(--cs); }
.rt .ptile i { align-self: center; display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .rt .ptile s { display: block; height: 100%; background: var(--c); }
.rt .ptile small { grid-column: 1 / -1; font-size: 12px; color: var(--dim); }
.rt .dimn { color: var(--faint); font-size: 12px; }
.rt .facts, .rt-ov .facts { display: grid; }
.rt .fact, .rt-ov .fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rt .fact > span:first-child, .rt-ov .fact > span:first-child { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rt .simrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rt .simrow small { font-size: 12.5px; color: var(--dim); flex: 1 1 120px; min-width: 0; }
.rt .cards { display: grid; gap: 18px; }
.rt .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rt .hd h2 { display: flex; align-items: center; gap: 6px; }
.rt .hdl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rt .ba { margin: 0; font-size: 14.5px; color: var(--text-2); } .rt .ba b { color: var(--sword-soft); }
.rt .card.sw, .rt .card.sh, .rt .card.rl, .rt .card.wp { border-top: 3px solid var(--c); }
.rt .card.sw { --c: var(--sword); } .rt .card.sh { --c: var(--shield); } .rt .card.rl { --c: var(--role); } .rt .card.wp { --c: var(--ar); }
.rt .card.sw .hd h2 { color: var(--sword-soft); } .rt .card.sh .hd h2 { color: var(--shield-soft); } .rt .card.rl .hd h2 { color: var(--role); } .rt .card.wp .hd h2 { color: var(--ar); text-transform: uppercase; }
/* SWORD's switch: Whole meta or Best target (T-1544P) */
.rt .swv { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); }
.rt .swv[hidden] { display: none; }
.rt .swv button { border: 0; border-radius: 999px; background: none; color: var(--dim); min-height: 32px; padding: 0 10px; font: 700 12.5px var(--body); cursor: pointer; }
.rt .swv button:hover { color: var(--text); }
.rt .swv button[aria-pressed="true"] { background: color-mix(in srgb, var(--sword) 26%, var(--panel)); color: var(--text); }
.rt .swb { display: grid; gap: 12px; min-width: 0; }
/* What the meta is made of (T-1545P) */
.rt .mix { display: grid; gap: 6px; min-width: 0; }
.rt .mix .sub { margin: 0; }
.rt .mixb { display: flex; gap: 1px; height: 24px; border-radius: 6px; overflow: hidden; }
.rt .mixb span { display: grid; place-items: center; min-width: 0; overflow: hidden; background: var(--c); color: var(--panel); font: 700 11.5px var(--mono); }
.rt .mixk { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12px; color: var(--dim); }
.rt .mixk i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); margin-right: 4px; }
.rt .mixk b { color: var(--text); font-family: var(--mono); }
.rt .bigx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.rt .bigx > b { font: 800 64px/0.85 var(--head); } .rt .sw .bigx > b { color: var(--sword-soft); } .rt .sh .bigx > b { color: var(--shield-soft); }
.rt .bigx p { margin: 0; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.3; color: var(--dim); }
.rt .bigx p b { color: var(--text); font-family: var(--mono); }
.rt .bigx p .ld { font-size: 15px; color: var(--text); } .rt .bigx p .ld b { font-family: var(--body); font-weight: 700; }
.rt .sw .bigx p .ld b { color: var(--sword-soft); } .rt .sh .bigx p .ld b { color: var(--shield-soft); }
.rt .bigx .fm { font: 600 12.5px var(--mono); color: var(--text); padding: 4px 8px; border-radius: 7px; justify-self: start; }
.rt .sw .bigx .fm { background: color-mix(in srgb, var(--sword) 26%, var(--panel)); } .rt .sh .bigx .fm { background: color-mix(in srgb, var(--shield) 26%, var(--panel)); }
.rt .sub { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font: 700 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.rt .stale { margin: 10px 0 0; padding: 7px 10px; border-left: 3px solid var(--role); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--role) 10%, transparent); font-size: 13px; line-height: 1.4; color: var(--text); }
.rt .stl { color: var(--role); font-size: 10px; margin-left: 4px; vertical-align: middle; }
.rt .sub h3 { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; }
.rt .lgb { font: 500 11.5px var(--body); color: var(--faint); letter-spacing: 0; text-transform: none; }
.rt .mini3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.rt .mini3.one { grid-template-columns: 1fr; } .rt .mini3 .m { display: grid; gap: 3px; min-width: 0; }
.rt .mini3 .ml { font: 700 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt .mini3 .m.all .ml { color: var(--text); }
.rt .mini3 .mv { display: flex; align-items: baseline; gap: 5px; } .rt .mini3 .mv b { font: 800 20px/1 var(--head); } .rt .mini3 .mv small { font: 600 11.5px var(--body); color: var(--dim); }
.rt .sw .mini3 .mv b { color: var(--sword-soft); } .rt .sh .mini3 .mv b { color: var(--shield-soft); }
.rt .mt { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--line); margin-top: 3px; }
.rt .mt s { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 2px; margin-left: -1px; background: var(--faint); }
.rt .mt i { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--panel); }
.rt .sw .mt i { background: var(--sword); } .rt .sh .mt i { background: var(--shield); }
.rt .fold { border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.rt .fold > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px; font: 700 14px var(--body); cursor: pointer; list-style: none; }
.rt .fold > summary::-webkit-details-marker { display: none; }
.rt .fold > summary::after { content: "›"; transition: transform .15s; } .rt .fold[open] > summary::after { transform: rotate(90deg); }
.rt .fold > div { padding: 0 12px 12px; display: grid; gap: 4px; color: var(--text); font-size: 13.5px; }
.rt .fold h4 { margin: 8px 0 2px; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rt .fold.tsw { border-color: color-mix(in srgb, var(--sword) 45%, var(--line)); background: color-mix(in srgb, var(--sword) 12%, var(--panel2)); } .rt .fold.tsw > summary { color: var(--sword-soft); }
.rt .fold.tsh { border-color: color-mix(in srgb, var(--shield) 45%, var(--line)); background: color-mix(in srgb, var(--shield) 12%, var(--panel2)); } .rt .fold.tsh > summary { color: var(--shield-soft); }
.rt .nr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 3px 0; } .rt .nr small { color: var(--faint); } .rt .nr b { font: 700 13.5px var(--mono); }
.rt .nr a { text-decoration: none; } .rt .nr a:hover { text-decoration: underline; }
.rt .nr.me { font-weight: 700; background: color-mix(in srgb, var(--sword) 14%, transparent); border-radius: 6px; padding: 3px 6px; margin: 0 -6px; }
.rt .fold.tsh .nr.me { background: color-mix(in srgb, var(--shield) 18%, transparent); }
.rt .rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rt .rchip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 12px; font: 600 13px var(--body); border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; }
.rt .rchip.up { border-color: color-mix(in srgb, var(--role) 60%, var(--line)); background: color-mix(in srgb, var(--role) 18%, var(--panel)); }
.rt .rchip.dn { border-color: color-mix(in srgb, var(--neg) 50%, var(--line)); background: color-mix(in srgb, var(--neg) 10%, var(--panel2)); }
.rt .wpl { margin: 0; font-size: 15px; }
/* How we got these numbers: the setup, in the detachments' teal */
.rt .card.how { --c: var(--teal); border-top: 3px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--panel)), var(--panel) 120px); }
.rt .card.how h2 { color: var(--c); font-size: 24px; text-transform: uppercase; }
.rt .hchips { display: flex; flex-wrap: wrap; gap: 6px; } .rt .hchips span { padding: 4px 10px; border-radius: 999px; font: 600 13px var(--body); color: var(--text); border: 1px solid color-mix(in srgb, var(--c) 55%, var(--line)); background: color-mix(in srgb, var(--c) 14%, var(--panel)); }
.rt .fold.thw { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); background: color-mix(in srgb, var(--c) 8%, var(--panel2)); } .rt .fold.thw > summary { color: var(--c); }
/* T-1592P (Jordan, 3 Nov: "the formatting isn't good"): each row a short label over its value on a phone, side by side from 640px; labels in
   plain words, never wrapped capitals. */
.rt .how .fact { grid-template-columns: minmax(0, 1fr); gap: 2px; align-items: start; padding: 10px 0; font-size: 14.5px; line-height: 1.45; border-top-color: color-mix(in srgb, var(--c) 25%, var(--line)); }
.rt .how .fact > span:first-child { font: 700 12.5px var(--body); letter-spacing: 0; text-transform: none; }
@media (min-width: 640px) { .rt .how .fact { grid-template-columns: 140px minmax(0, 1fr); gap: 12px; } .rt .how .fact > span:first-child { padding-top: 2px; } }
.rt .how .fact:first-child { border-top: 0; } .rt .how .fact > span:first-child { color: var(--c); }
.rt .how .lt { display: block; margin-top: 3px; color: var(--role); font-size: 12.5px; }
.rt .dr { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rt .dr b { font: 700 13.5px var(--mono); text-align: right; }

/* the sheet: Why this letter and the ⓘ meanings */
.rt-ov { position: fixed; inset: 0; z-index: 60; background: rgba(2, 6, 23, .55); display: grid; align-items: end; max-width: none; margin: 0; }
.rt-ov[hidden] { display: none; }
.rt-ov .sht { position: relative; background: var(--panel); border-radius: 18px 18px 0 0; border-top: 1px solid var(--line); max-height: 86vh; overflow: auto; display: grid; gap: 12px;
  padding: 10px max(18px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); max-width: 560px; width: 100%; margin: 0 auto; animation: rt-up .18s ease-out; outline: none; }
@keyframes rt-up { from { transform: translateY(30px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .rt-ov .sht { animation: none; } }
.rt-ov .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 2px; }
.rt-ov h3 { font-size: 22px; }
.rt-ov p { margin: 0; }
.rt-ov .btn { width: 100%; min-height: 42px; }
.rt-ov .cnt { display: grid; gap: 6px; } .rt-ov .cnt div { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 10px; align-items: center; }
.rt-ov .cnt .bar2 { height: 12px; border-radius: 6px; background: var(--panel2); overflow: hidden; } .rt-ov .cnt .bar2 b { display: block; height: 100%; }
.rt-ov .rw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }

/* desktop: SWORD beside SHIELD, the roles beside where to play it */
@media (min-width: 900px) {
  .rt.rt-u { max-width: 980px; }
  .rt.rt-u > .picker, .rt.rt-u > .back, .rt.rt-u > .hero { max-width: 640px; width: 100%; justify-self: center; }
  .rt.rt-u .cards { grid-template-columns: 1fr 1fr; align-items: start; }
  .rt.rt-a { max-width: 720px; }
}

/* the questions under a rated page (the page's FAQ, as search engines read it), folded closed */
.rt-qa { max-width: 640px; margin: 18px auto 0; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.rt-qa > summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font: 700 15px var(--font-body); cursor: pointer; list-style: none; }
.rt-qa > summary::-webkit-details-marker { display: none; }
.rt-qa > summary::after { content: "›"; color: var(--text-faint); transition: transform .15s; } .rt-qa[open] > summary::after { transform: rotate(90deg); }
.rt-qa > div { padding: 0 16px 14px; }
.rt-qa dt { font-weight: 700; margin-top: 10px; } .rt-qa dd { margin: 2px 0 0; color: var(--text-dim); }
@media (min-width: 900px) { .rt-a ~ .rt-qa { max-width: 720px; } }
.rt-qa + .rt-qa { margin-top: 10px; }
.rt-src dd ul { margin: 4px 0; padding-left: 18px; }
.rt-src a { color: inherit; }
/* A letter's pop-up (T-1547P) */
.rt-ov .shh2 { display: flex; align-items: center; gap: 10px; }
.rt-ov .shh2 h3 small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0; color: var(--dim); }
.rt-ov .wh { margin: 4px 0 0; font: 700 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.rt-ov .wh.up { color: var(--ok); } .rt-ov .wh.dn { color: var(--neg); }
.rt-ov .wl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rt-ov .wl li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 10px; border-left: 3px solid var(--c); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 14px; line-height: 1.3; }
.rt-ov .wl.up { --c: var(--ok); } .rt-ov .wl.dn { --c: var(--neg); }
.rt-ov .wl small { flex: none; font: 600 11.5px var(--mono); color: var(--dim); }
/* T-1566P: what we don't rate (Crucible units, the Titans): the same page, a blank coin in place of a letter, no scores. */
.rt .coin.nr { --c: var(--line); background: none; border-style: dashed; color: var(--faint); }
.rt .rate2.nr { cursor: default; }
.rt .rate2.nr > span > small { text-decoration: none; color: var(--faint); }
.rt .tr.nr { grid-template-columns: minmax(0, 1fr) auto 8px; }
.rt .nrt { font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.rt .nrwhy { margin: 0; font-size: 14px; line-height: 1.45; color: var(--dim); }
/* T-1571P: the reworked unit page's preview (rated.js unit2, <unit>/v2/) */
.rt .ptile b small.of { font-size: .45em; font-weight: 700; opacity: .7; margin-left: 2px; }
.rt-v2 .bigx > div > b.num { display: block; text-align: center; font: 800 64px/0.85 var(--head); } .rt-v2 .sw .bigx > div > b.num { color: var(--sword-soft); } .rt-v2 .sh .bigx > div > b.num { color: var(--shield-soft); }
.rt-v2 .bigx .unit { display: block; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 4px; text-align: center; }
.rt-v2 .bigx p .lead2 { font: 700 17px/1.3 var(--body); color: var(--text); margin: 0 0 2px; } .rt-v2 .bigx p .lead2 b { font-family: var(--body); color: var(--shield-soft); }
.rt-v2 .nbox { --c: var(--sword); --c-soft: var(--sword-soft); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); border-radius: 10px; padding: 8px 12px 10px; background: color-mix(in srgb, var(--c) 7%, var(--panel2)); }
.rt-v2 .card.sh .nbox { --c: var(--shield); --c-soft: var(--shield-soft); }
.rt-v2 .nbox + .nbox { margin-top: 10px; }
.rt-v2 .nbox h4.nh { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); font: 800 13px var(--body); letter-spacing: .02em; text-transform: none; color: var(--c-soft); }
.rt-v2 .nbox h4.nh small { font: 500 12px var(--body); color: var(--faint); margin-left: 4px; }
.rt-v2 .kv { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rt-v2 .card.sh .kv { margin-top: 8px; }
.rt-v2 .kv > span:first-child { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rt-v2 h3.pl { margin: 14px 0 6px; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rt-v2 .card.rl .hd + h3.pl, .rt-v2 .card.wp .cmp + h3.pl { margin-top: 4px; }
.rt-v2 .pl0 { margin: 0; font-size: 14.5px; line-height: 1.45; }
.rt-v2 .pros { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.35; }
.rt-v2 .pros li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: start; }
.rt-v2 .pros li::before { content: "+"; font: 800 15px var(--mono); color: var(--role); }
.rt-v2 .pros.minus li::before { content: "–"; color: var(--neg); }
.rt-v2 .pros li small { color: var(--faint); white-space: nowrap; }
.rt-v2 .lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rt-v2 .lrow b { font: 700 13.5px var(--mono); } .rt-v2 .lrow b.s { color: var(--sword-soft); } .rt-v2 .lrow b.h { color: var(--shield-soft); }
.rt-v2 .lrow small { display: block; color: var(--faint); font-size: 12px; }
.rt-v2 .card.rl .key { margin: 4px 0 0; }
.rt-v2 .card .cmp { display: table; width: 100%; justify-self: stretch; border-collapse: collapse; font-size: 13.5px; }
.rt-v2 .cmp th { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); text-align: right; padding: 4px 4px 6px; }
.rt-v2 .cmp th:first-child, .rt-v2 .cmp td:first-child { text-align: left; }
.rt-v2 .cmp td { padding: 8px 4px; border-top: 1px solid var(--line); text-align: right; font: 700 13px var(--mono); vertical-align: middle; }
.rt-v2 .cmp td:first-child { font: 600 14px var(--body); }
.rt-v2 .cmp td:first-child a { color: inherit; }
.rt-v2 .cmp tr.me td { background: color-mix(in srgb, var(--ar) 12%, transparent); }
.rt-v2 .cmp td small { display: block; font: 500 11px var(--body); color: var(--faint); }
.rt-v2 .cmp .coin { width: 26px; height: 26px; font-size: 14px; }
.rt-v2 .card.how .steps { margin: 12px 0 0; display: grid; gap: 14px; font-size: 14.5px; line-height: 1.45; }
.rt-v2 .card.how .steps h3 { margin: 0 0 3px; font: 800 14px var(--body); color: var(--c); }
.rt-v2 .card.how .steps p { margin: 0; }
.rt-v2 .card.how .steps .ex { display: inline-block; margin-top: 6px; font: 700 13px var(--mono); padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c) 14%, var(--panel2)); }
.rt-ov .sht .mix { margin-top: 10px; }
.rt-v2 .ptile b.rk { display: flex; align-items: baseline; gap: 6px; }
.rt-v2 .ptile b.rk small.w, .rt-v2 .cmp td.rk small.w { font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.rt-v2 .cmp td.rk small.w { display: block; margin-bottom: 1px; }
.rt-v2 .ca { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font: 600 15px/1.35 var(--body); }
.rt-v2 .ca + .ca { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.rt-v2 .ca li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
.rt-v2 .ca.up li { color: var(--ok); } .rt-v2 .ca.up li::before { content: "+"; font: 800 15px var(--mono); }
.rt-v2 .ca.dn li { color: var(--neg); } .rt-v2 .ca.dn li::before { content: "–"; font: 800 15px var(--mono); }
.rt-v2 .ca li small { font-weight: 500; color: var(--faint); white-space: nowrap; margin-left: 4px; }
.rt-v2 .card.how .steps ul.fx { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.rt-v2 .ptile b.rk, .rt-v2 .ptile > i, .rt-v2 .ptile > small { grid-column: 1 / -1; }
.rt-v2 .ptile > i { align-self: center; margin: 2px 0; }
/* T-1571P round 3 (Jordan, 2 Nov): Top and Bottom as big as the share, the score out of 100 under it; "pts" beside the big numbers; What reviewers say */
.rt-v2 .ptile b.rk { display: block; font: 800 clamp(21px, 6.2vw, 30px)/1.05 var(--head); color: var(--cs); white-space: nowrap; }
.rt-v2 .ptile b.rk .w { font: inherit; }
.rt-v2 .ptile > small { font-size: 13px; line-height: 1.35; } .rt-v2 .ptile > small b { display: inline; font: 700 13px var(--body); color: var(--text); }
.rt-v2 .cmp td.rk { font: 700 13px/1.25 var(--mono); }
.rt-v2 .cmp td.rk .w { display: block; font: inherit; }
.rt-v2 .bigx { grid-template-columns: 1fr; gap: 8px; }
.rt-v2 .bigx .bn { display: flex; align-items: baseline; gap: 8px; }
.rt-v2 .bigx .bn > b.num { display: inline; text-align: left; }
.rt-v2 .bigx .bn > b.pt { font: 800 30px var(--head); }
.rt-v2 .sw .bigx .bn > b.pt { color: var(--sword-soft); } .rt-v2 .sh .bigx .bn > b.pt { color: var(--shield-soft); }
.rt-v2 .bigx .bn > .unit { display: inline-block; margin: 0 0 0 6px; text-align: left; line-height: 1.35; }
.rt-v2 .card.rl .hd h2 { text-transform: uppercase; }
.rt-v2 .card.rl .ca:first-of-type { margin-top: 8px; }
.rt-v2 .ca li { color: var(--text); font-weight: 500; }
.rt-v2 .ca.up li { color: var(--text); } .rt-v2 .ca.up li::before { color: var(--ok); }
.rt-v2 .ca.dn li { color: var(--text); } .rt-v2 .ca.dn li::before { color: var(--neg); }
/* T-1571P round 4: the rank alone on the tiles; the big numbers' units in words beside them; each card's caption under its title */
.rt-v2 .ptile > small { font-size: 13px; color: var(--dim); }
.rt-v2 .bigx .bn { align-items: center; gap: 12px; }
.rt-v2 .bigx .bn > .unit { margin: 0; font: 500 15px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--dim); }
.rt-v2 .bigx p .ld { font-size: 15px; }
.rt-v2 .card .cap { margin: -6px 0 0; font: 500 14px var(--body); color: var(--dim); }
/* T-1571P round 5: solo against leading or led, one small table per pairing */
.rt-v2 .sl { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.rt-v2 .sl .slh { font: 600 14.5px/1.3 var(--body); }
.rt-v2 .sl .slh small { display: block; font: 500 12px var(--body); color: var(--faint); margin-top: 2px; }
.rt-v2 .sl table { width: 100%; border-collapse: collapse; margin-top: 6px; display: table; }
.rt-v2 .sl th { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); text-align: right; padding: 2px 4px 4px; }
.rt-v2 .sl td { padding: 4px; text-align: right; font: 700 15px var(--mono); }
.rt-v2 .sl td:first-child { text-align: left; font: 800 13px var(--head); letter-spacing: .06em; }
.rt-v2 .sl tr.s td { color: var(--sword-soft); } .rt-v2 .sl tr.h td { color: var(--shield-soft); }
.rt-v2 .sl th:nth-child(n+2), .rt-v2 .sl td:nth-child(n+2) { width: 25%; }

/* T-1637P (Jordan, 4 Nov: "the tyranid heading needs to be bigger and more pronounced"): the army's header on a unit page, its mark, name and
   the way to its page, and All N units, which opens every unit by type (allUnits) in two columns on a phone, four from 900 px. */
.rt .ahd { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--ar); }
.rt a.ahm { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.rt .ahm .em { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--ar) 18%, var(--panel2)); color: var(--ar); }
.rt .ahm .em svg { width: 26px; height: 26px; }
.rt .ahm .an { min-width: 0; }
.rt .ahm b { display: block; font: 800 22px/1.05 var(--head); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.rt .ahm small { display: block; font: 700 12.5px var(--body); color: var(--dim); }
.rt a.ahm:hover small { color: var(--text); text-decoration: underline; }
.rt a.allb { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); font: 700 14px var(--body); text-decoration: none; white-space: nowrap; }
.rt a.allb:hover { border-color: var(--ar); }
.rt-ov .sht.wide { max-width: 980px; }
.rt-ov .sht h3 small { font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--dim); }
.rt-ov .aul { columns: 2; column-gap: 18px; font-size: 14px; }
@media (min-width: 900px) { .rt-ov .aul { columns: 4; } }
.rt-ov .aug { break-inside: avoid; margin: 0 0 12px; }
.rt-ov .aug h4 { margin: 0 0 2px; padding: 4px 0; border-bottom: 2px solid var(--g); font: 700 10.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.rt-ov .aug a, .rt-ov .aug .me { display: flex; align-items: center; gap: 7px; min-height: 32px; line-height: 1.2; color: var(--text); text-decoration: none; }
.rt-ov .aug a:hover span { text-decoration: underline; }
.rt-ov .aug .me { font-weight: 800; color: var(--ar); }
.rt-ov .aug .coin { flex: none; width: 20px; height: 20px; font-size: 11px; border-radius: 5px; border-width: 1.5px; }
/* T-1636P: a tile's More rankings, and its sheet; T-1638P: a low score on a unit that isn't there to fight goes grey, and Why it's taken in green. */
.rt .ptile .tap { font-size: 12px; color: var(--faint); }
.rt .ptile.lo { --c: var(--td); --cs: var(--dim); }
.rt .ptile.why { --c: var(--ok); --cs: var(--ok); grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); cursor: default; }
.rt .ptile.why b.wy { font: 800 19px/1.2 var(--head); color: var(--text); }
.rt-ov .rks .rw b { font: 800 15px var(--head); }
.rt-ov .rks .rw small { color: var(--dim); }
.rt-ov .rks .rw.me { font-weight: 700; }
.rt-ov .shh2.sw h3 { color: var(--sword-soft); } .rt-ov .shh2.sh h3 { color: var(--shield-soft); }
.rt-ov .shh2.sw ~ .rks .rw.me b { color: var(--sword-soft); } .rt-ov .shh2.sh ~ .rks .rw.me b { color: var(--shield-soft); }

/* T-1647P (Jordan, 4 Nov: "B, make it so"; mockup round 5): the merged army page. The name in the heading face on the side's bar, three facts
   of one weight, three buttons that jump to the sections, each section opening on a band in its button's colour (Results amber, Detachments
   teal, Units blue); the units' scores as five bars, the sword and shield over them at every group's heading. */
.rt-a2 { --res: #F5B83D; --det: #2DD4BF; --uni: #60A5FA; gap: 14px; }
:root[data-theme="light"] .rt-a2 { --res: #B7791F; --det: #0F766E; --uni: #1D4ED8; }
.rt-a2 .glyph { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; }
.rt-a2 .ahx { border-left: 6px solid var(--side, var(--ar)); padding: 2px 0 2px 12px; }
.rt-a2 .kick { margin: 0; font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--side, var(--ar)); }
.rt-a2 .ahx h1 { margin: 4px 0; font: 800 48px/1 var(--head); letter-spacing: .005em; color: var(--text); overflow-wrap: anywhere; }
.rt-a2 .ahx .sub { margin: 0; font-size: 14px; color: var(--dim); }
.rt-a2 .facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rt-a2 .f3 { display: grid; grid-template-rows: auto 40px auto; gap: 4px; align-content: start; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.rt-a2 .f3 > small { font: 700 10px/1.2 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-a2 .f3 > span:last-child { font-size: 12px; line-height: 1.25; color: var(--faint); }
.rt-a2 .f3 .big { align-self: center; font: 800 28px/1 var(--head); }
.rt-a2 .f3 .mid { align-self: center; font: 800 19px/1.1 var(--head); }
.rt-a2 .badge { --c: var(--td); align-self: center; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--c); background: color-mix(in srgb, var(--c) 26%, var(--panel)); color: var(--c); font: 800 20px/1 var(--head); }
.rt-a2 .badge.ts { --c: var(--ts); } .rt-a2 .badge.ta { --c: var(--ta); } .rt-a2 .badge.tb { --c: var(--tb); } .rt-a2 .badge.tc { --c: var(--tc); } .rt-a2 .badge.td { --c: var(--td); }
.rt-a2 .badge.none { --c: var(--faint); background: none; border-style: dashed; }
.rt-a2 .jumpb { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px 0; background: var(--bg); }
.rt-a2 .jumpb a { --k: var(--uni); display: grid; justify-items: center; gap: 2px; min-height: 66px; padding: 8px 4px; border: 2px solid var(--k); border-radius: 12px; background: color-mix(in srgb, var(--k) 16%, var(--panel)); color: var(--text); text-decoration: none; }
.rt-a2 .jumpb a.res { --k: var(--res); } .rt-a2 .jumpb a.det { --k: var(--det); }
.rt-a2 .jumpb .glyph { width: 20px; height: 20px; color: var(--k); }
.rt-a2 .jumpb b { font: 800 14.5px/1.1 var(--head); letter-spacing: .02em; text-transform: uppercase; }
.rt-a2 .jumpb small { font: 800 12px/1 var(--body); color: var(--k); }
.rt-a2 .prov { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: var(--dim); }
.rt-a2 .sec { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); scroll-margin-top: 84px; }
.rt-a2 .band { --k: var(--uni); display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--k) 20%, var(--panel)); border-bottom: 3px solid var(--k); }
.rt-a2 .band.res { --k: var(--res); } .rt-a2 .band.det { --k: var(--det); }
.rt-a2 .band .bi .glyph { width: 24px; height: 24px; color: var(--k); }
.rt-a2 .band h2 { margin: 0; font: 800 26px/1 var(--head); letter-spacing: .02em; text-transform: uppercase; }
.rt-a2 .band .bn { padding: 3px 9px; border-radius: 99px; background: var(--k); color: var(--bg); font: 800 15px/1 var(--body); }
.rt-a2 .band small { margin-left: auto; font-size: 12px; line-height: 1.25; color: var(--dim); text-align: right; }
.rt-a2 .sec .body { display: grid; padding: 6px 14px 12px; }
.rt-a2 .lede { margin: 6px 0; font-size: 14px; color: var(--dim); }
.rt-a2 .lr { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.rt-a2 .lr:first-child { border-top: 0; }
.rt-a2 .lp { font: 800 16px/1.1 var(--head); } .rt-a2 .lp small { display: block; font: 500 11px var(--body); color: var(--faint); }
.rt-a2 .le { min-width: 0; font-size: 14px; line-height: 1.25; } .rt-a2 .le b { font-weight: 650; } .rt-a2 .le small { display: block; font-size: 12px; color: var(--faint); }
.rt-a2 .ld { font-size: 12px; color: var(--faint); white-space: nowrap; }
.rt-a2 .more { padding-top: 8px; font-weight: 700; font-size: 14px; color: var(--text); }
.rt-a2 .bym > summary { display: flex; justify-content: space-between; padding: 8px 0 2px; margin-top: 6px; border-top: 1px solid var(--line); font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.rt-a2 .bym > summary::after, .rt-a2 .mr > summary::after { content: "▾"; color: var(--faint); margin-left: 6px; }
.rt-a2 .bm { display: grid; gap: 2px; margin-top: 4px; }
.rt-a2 .bmr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; font-size: 13px; color: var(--dim); }
.rt-a2 .bmr.on { color: var(--text); font-weight: 700; }
.rt-a2 .dots { color: var(--res); letter-spacing: 1px; overflow: hidden; white-space: nowrap; }
.rt-a2 .drow { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 650; font-size: 14px; }
.rt-a2 .drow:first-child { border-top: 0; }
.rt-a2 .dc { font-weight: 500; font-size: 12.5px; color: var(--dim); white-space: nowrap; } .rt-a2 .dc b { color: var(--text); }
.rt-a2 .mr > summary { padding: 8px 0; font-weight: 700; font-size: 13.5px; color: var(--uni); cursor: pointer; list-style: none; border-top: 1px solid var(--line); }
.rt-a2 .how1 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.rt-a2 .how1 span { padding: 3px 9px; border-radius: 99px; background: var(--panel2); font: 700 12px var(--body); color: var(--dim); }
.rt-a2 .how1 .ib { margin-left: auto; color: var(--uni); } .rt-a2 .how1 .ib .glyph { width: 16px; height: 16px; }
.rt-a2 .th, .rt-a2 .tr, .rt-a2 .gh { grid-template-columns: minmax(0, 1fr) 40px 56px 56px 8px; }
.rt-a2 .th button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.rt-a2 .th button:first-child { align-items: flex-start; }
.rt-a2 .th .glyph { width: 11px; height: 11px; }
.rt-a2 .gh { display: grid; gap: 5px; align-items: center; }
.rt-a2 .gh .gn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rt-a2 .gh .gi { display: grid; place-items: center; } .rt-a2 .gh .gi .glyph { width: 12px; height: 12px; }
.rt-a2 .gh .gi.sw { color: var(--sword-soft); } .rt-a2 .gh .gi.sh { color: var(--shield-soft); }
.rt-a2 .tn small b { color: var(--text); font-weight: 650; }
.rt-a2 .pc .pp { display: flex; gap: 2px; }
.rt-a2 .pc .pp i { width: 8px; height: 12px; border-radius: 2px; background: var(--panel2); border: 1px solid var(--line); }
.rt-a2 .pc.sw .pp i.on { background: var(--sword); border-color: var(--sword); } .rt-a2 .pc.sh .pp i.on { background: var(--shield); border-color: var(--shield); }
.rt-a2 .pc.lo .pp i.on { background: var(--td); border-color: var(--td); }
.rt-a2 .stamps { text-align: center; }

.rt-a2 .gh .gn small { margin-left: 0; }
.rt-a2 .ahx .sub { font: 400 14px/1.35 var(--body); letter-spacing: 0; text-transform: none; }
.rt-a2 .f3 > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }