/* Atlas > Kills — the kills list and the killmail page (builds on ../styles.css, ../entity/entity.css for the panels,
   rows and KPI tiles, and ../harmonised.css for the brand book's buttons). Font sizes in em, as everywhere on the site.

   Colours: one meaning, one colour. Loss = one red, kill / destroyed / dropped = one green; value tiers (gold over 1B,
   orange over 10B) on the Kills pages only. */

[hidden] { display: none !important; }
:root { --loss: #ff3f2b; --kill: #48f0c0; }

/* ---------------------------------------------------------------- the page */
#kWrap { flex: 1 1 auto; min-height: 0; }
.scr { padding: 1em 1.125em 1.625em; display: flex; flex-direction: column; gap: 0.875em; }
/* the title row is the page's sub-bar, as on every Atlas page (harmonised.css: 65 px, 8 px of padding, the hairline,
   the title at the region name's size): it leaves the page's padding to run from edge to edge; the title, a note and the
   Return button on the left, the source credit and the page's buttons on the right */
.pgHead { display: flex; align-items: center; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; min-height: 65px; box-sizing: border-box; padding: 8px 14px; margin: -1em -1.125em 0; background-color: var(--backgroundColor); border-bottom: 1px solid var(--borderColor31); flex-shrink: 0; }
.pgHead h1 { margin: 0; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-weight: normal; font-size: 1.3571em; letter-spacing: 3px; line-height: 40px; color: var(--themeColor); white-space: nowrap; }
.pgHead > .dim { font-size: .9286em; }
.pgHead .barGroup { margin-left: auto; display: flex; gap: 3px; flex-wrap: wrap; }
.backBtn { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid var(--borderColor31); color: var(--textColor2); cursor: pointer; transition: color .15s linear, border-color .15s linear; text-decoration: none; }
.backBtn:hover { color: var(--themeColor); border-color: #4a4a4a; }
.backBtn svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.filters { display: flex; gap: 0.625em 1.125em; flex-wrap: wrap; align-items: center; }
.filters .tabRow { margin: 0; }
.filters .lbl { font-size: .9em; letter-spacing: 1.5px; color: var(--textColor2); text-transform: uppercase; margin-right: -.5em; white-space: nowrap; }
/* ---- the filter rows (pick.js): the family's name, then one menu button that opens its list; every control of the two
   rows is one height, the menu button's (its 0.8929em text, 6 + 8 px of padding, the frame: 2.0625em of the page's 1em) */
.filters .tabRow .tab { display: inline-flex; align-items: center; height: 2.31em; box-sizing: border-box; padding-top: 0; padding-bottom: 2px; white-space: nowrap; }
.fp { display: inline-flex; align-items: center; gap: .5em; }
.fp .lbl { margin-right: 0; }
.fpBtn { display: inline-flex; align-items: center; gap: .45em; height: 2.0625em; box-sizing: border-box; padding: 0 .5em 2px .625em; background: none; border: 1px solid var(--borderColor31); color: var(--btnTextColourNormal); font: inherit; cursor: pointer; white-space: nowrap; transition: color .15s linear, border-color .15s linear; }
.fpBtn b { font-weight: normal; }
.fpBtn:hover { color: var(--btnTextColourHover); }
.fpBtn[aria-expanded="true"] { border-color: #6b6b6b; }
.fp.on .fpBtn, .fp.on .fpBtn:hover { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.fpI { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
.fpBtn i { display: inline-flex; color: var(--textColor2); font-style: normal; }
.fpBtn .fpX:hover { color: var(--themeColor); }
.fpRst { display: inline-flex; align-items: center; justify-content: center; width: 2.0625em; height: 2.0625em; box-sizing: border-box; padding: 0; background: none; border: 1px solid var(--borderColor31); color: var(--btnTextColourNormal); cursor: pointer; transition: color .15s linear; }
.fpRst:hover { color: var(--btnTextColourHover); }
.fpRst.off { opacity: .35; pointer-events: none; }
.fpQv .tab { font-size: 1em; }
.filters .fpQuick { margin-left: auto; display: inline-flex; align-items: center; gap: 1.125em; }
.filters .fpQuick .lbl { margin-right: -.5em; }
.fpSet { font-size: .8571em; }
/* the list under a picker */
#fpPop { position: absolute; z-index: 60; min-width: 12em; max-width: 28em; background: #111111; border: 1px solid #3c3c3c; box-shadow: 0 .6em 1.8em #000000e6; padding: .3em 0; font-size: 1em; }
#fpPop .fpO { display: flex; align-items: center; gap: .6em; width: 100%; background: none; border: 0; color: var(--textColor); font: inherit; padding: .4em 1em; text-align: left; cursor: pointer; white-space: nowrap; }
#fpPop .fpO:hover { background: #d2d2d214; color: var(--themeColor); }
#fpPop .fpO.on { color: var(--themeColor); box-shadow: inset 2px 0 0 var(--themeColor); background: #d2d2d20a; }
#fpPop .fpO small { margin-left: auto; padding-left: 1em; color: var(--textColor2); font-size: .85em; text-align: right; white-space: normal; max-width: 16em; }
#fpPop .fpBx { width: .9em; height: .9em; border: 1px solid #6b6b6b; background: #00000040; flex: none; position: relative; }
#fpPop .fpO.on .fpBx { background: var(--themeColor); border-color: var(--themeColor); }
#fpPop .fpO.on .fpBx::after { content: ''; position: absolute; left: .27em; top: .05em; width: .22em; height: .5em; border: solid #151515; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#fpPop .fpF { border-top: 1px solid var(--borderColor31); margin-top: .25em; padding: .5em 1em .3em; font-size: .85em; color: var(--textColor2); }
#fpPop .fpWho { padding: .5em 1em; display: flex; flex-direction: column; gap: .5em; }
#fpPop .fpWho .searchBox { width: 20em; max-width: 100%; }
#fpPop .fpWho .vs { text-align: center; color: var(--textColor2); font-size: .85em; }
/* the phone sheet (row 2 folded to its Filters button) */
.fpSheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #1b1b1b; border-top: 1px solid #3a3a3a; box-shadow: 0 -1em 2em #000000aa; max-height: 86vh; display: flex; flex-direction: column; }
.fpSh { display: flex; align-items: center; gap: .7em; padding: .7em .9em; border-bottom: 1px solid #2a2a2a; }
.fpSh b { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 2px; color: var(--themeColor); font-weight: normal; font-size: .9em; }
.fpShX { margin-left: auto; background: none; border: 0; color: var(--textColor2); cursor: pointer; padding: .2em; } .fpShX:hover { color: var(--themeColor); }
.fpSb { overflow-y: auto; padding: .4em .9em .6em; display: flex; flex-direction: column; gap: .7em; }
.fpG { display: flex; flex-direction: column; gap: .35em; } .fpG .lbl { font-size: .7143em; letter-spacing: 1.5px; color: var(--textColor2); text-transform: uppercase; }
.fpG .chipRow { padding: 0; gap: .3em; flex-wrap: wrap; }
.fpSf { display: flex; align-items: center; justify-content: space-between; padding: .6em .9em; border-top: 1px solid #2a2a2a; }
.fpDim { position: fixed; inset: 0; z-index: 69; background: #00000080; }
.optRow { display: flex; gap: .25em; flex-wrap: wrap; }
.kpis5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625em; }
.kpis5 .kpi { white-space: normal; }
.kpiMain .a1.big { font-size: 1.35em; }
.cols { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 0.875em; align-items: start; }
.side { display: flex; flex-direction: column; gap: 0.875em; min-width: 0; }
.ptHead { display: flex; align-items: baseline; gap: 0.625em; margin-bottom: 0.5em; }
.ptHead .panelTitle { margin: 0; }
.ptHead .dim { margin-left: auto; }
.live { display: inline-flex; align-items: center; gap: 0.375em; font-size: .7857em; color: var(--kill); letter-spacing: 1px; }
.live i { width: 0.4375em; height: 0.4375em; border-radius: 50%; background: #48f0c0; box-shadow: 0 0 0.375em #48f0c0; animation: pulse 1.6s ease-in-out infinite; }
.live.off { color: var(--textColor2); } .live.off i { background: #474747; box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: .25; } }
.note { font-size: .8571em; color: var(--textColor2); line-height: 1.5; }
.note b { color: var(--textColor); font-weight: normal; }
.kCredit { font-size: .7857em; color: var(--textColor2); line-height: 1.5; }
.kCredit a { color: var(--textColor); text-decoration: none; } .kCredit a:hover { color: var(--themeColor); }

/* ---------------------------------------------------------------- the kill row
   EVE · SHIP (48 px) · WHERE · VICTIM · FINAL BLOW · ISK, and a date row that opens each day. Narrower lists drop the
   final blow, then the where column (the system goes under the time), then keep only the ship and ISK. */
.kCont { container: klist / inline-size; }
.trow.km, .thead.km { grid-template-columns: 3.4em minmax(9em, .8fr) minmax(6.5em, .55fr) minmax(13em, 1.7fr) minmax(13em, 1.7fr) 5.4em; font-size: .9286em; column-gap: 10px; }
.trow.km { padding: 0.25em 0; }
.trow.km .vic { display: flex; align-items: center; gap: .65em; min-width: 0; }
.trow.km .vic > img { width: 48px; height: 48px; flex-shrink: 0; background: #d2d2d208; }
/* a pilot: portrait 48 px, the corporation logo over the alliance logo (24 px each), then name / corporation / alliance */
.pcell { display: flex; align-items: center; gap: .45em; min-width: 0; }
.pcell .por { width: 48px; height: 48px; flex-shrink: 0; background: #d2d2d208; display: block; }
.pcell .lg { display: flex; flex-direction: column; flex-shrink: 0; width: 24px; height: 48px; }
.pcell .lg > * { width: 24px; height: 24px; display: block; }
.pcell .cell2 { margin-left: .2em; }
/* the victim and the final blow face each other, like the two sides of a battle row: the victim mirrored */
.trow.km .pcell { padding: .2em .5em .2em .45em; align-self: stretch; background: #d2d2d206; }
.trow.km .pcell.mir { flex-direction: row-reverse; text-align: right; padding: .2em .45em .2em .5em; }
.trow.km .pcell.mir .cell2 { align-items: flex-end; margin: 0 .2em 0 0; }
.trow.km .pcell.mir .who { display: block; max-width: 100%; }
.trow.km .pcell .cell2 > * { max-width: 100%; }
.thead.km > .hV { text-align: right; padding-right: .7em; }
.thead.km > .hI { text-align: right; }
/* a pilot's own losses (his page, part 4): no victim column, the final blow takes its place */
.trow.km.nv, .thead.km.nv { grid-template-columns: 3.4em minmax(9em, .8fr) minmax(6.5em, .55fr) minmax(13em, 1.7fr) 5.4em; }
/* a system's own list: no WHERE column (every row is there) */
.trow.km.nw, .thead.km.nw { grid-template-columns: 3.4em minmax(9em, .8fr) minmax(13em, 1.7fr) minmax(13em, 1.7fr) 5.4em; }
.trow.km.nw > .where, .thead.km.nw > .hW { display: none; }
/* SOLO, NPC, AWOX tell who killed: they follow the final blow's name; where the final blow column is gone, they go
   under the ship name */
.trow.km .vic .kTags { display: none; gap: .3em; overflow: visible; line-height: 1.3; margin: .1em 0 .05em; }
.trow.km .kTags .tg { margin-left: 0; vertical-align: 0; }
.trow.km .pcell .who.wl { display: flex; align-items: baseline; gap: .35em; }
.trow.km .who.wl .wn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trow.km .who.wl > :not(.wn) { flex-shrink: 0; }
.trow.km .who.wl .tg { margin-left: 0; vertical-align: 0; line-height: 1.3; }
.trow.km .kWhen, .trow.km .kNar, .trow.km .kSys { display: none; }
.trow.km .kT { align-self: center; }
.trow.km .kI { align-self: center; }
.kDay { font-size: .7143em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--themeColor); background: #d2d2d20a; padding: .55em .7em .5em; margin-top: .35em; border-top: 1px solid var(--borderColor31); }
.thead.km + .kDay, .panelList > .kDay:first-child { margin-top: 0; }
@container klist (max-width: 760px) {
    .trow.km, .thead.km, .trow.km.nv, .thead.km.nv { grid-template-columns: 3.4em minmax(8.5em, .9fr) minmax(6em, .6fr) minmax(12em, 1.8fr) 5.4em; }
    .trow.km > .pf, .thead.km > .hF { display: none; }
    .trow.km.nv > .pf { display: flex; } .thead.km.nv > .hF { display: block; }
    .trow.km .pcell.mir { flex-direction: row; text-align: left; padding: .2em .5em .2em .45em; }
    .trow.km .pcell.mir .cell2 { align-items: flex-start; margin: 0 0 0 .2em; }
    .thead.km > .hV { text-align: left; padding-right: 0; }
    .trow.km .vic .kTags { display: flex; } .trow.km.nv .vic .kTags { display: none; }
    .trow.km.nw, .thead.km.nw { grid-template-columns: 3.4em minmax(8.5em, .9fr) minmax(12em, 1.8fr) 5.4em; }
}
@container klist (max-width: 620px) {
    .trow.km, .thead.km, .trow.km.nv, .thead.km.nv { grid-template-columns: 5.4em minmax(8em, 1.1fr) minmax(10em, 1.4fr) 5em; }
    .trow.km > .where, .thead.km > .hW { display: none; }
    .trow.km .kSys { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trow.km .kSys .secBadge { font-size: .8em; }
    .pcell .lg { display: none; }   /* the logos give their room to the names */
    .trow.km.nw, .thead.km.nw { grid-template-columns: 5.4em minmax(8em, 1.1fr) minmax(10em, 1.4fr) 5em; }
    .trow.km.nw .kSys { display: none; }
}
@container klist (max-width: 460px) {
    .trow.km .kSys { display: none; }
    .trow.km, .thead.km, .trow.km.nv, .thead.km.nv { grid-template-columns: minmax(0, 1fr) 4.8em; }
    .trow.km > :is(.kT, .where, .pv, .pf), .trow.km.nv > .pf, .thead.km > :is(.hT, .hW, .hV, .hF), .thead.km.nv > .hF { display: none; }
    .trow.km .kNar, .trow.km .kWhen { display: block; } .trow.km .kWhen { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trow.km .kWhen .secBadge { font-size: .8em; }
    .trow.km.nv .kNar { display: none; }
    .trow.km.nv .vic .kTags { display: flex; }
    .trow.km.nw, .thead.km.nw { grid-template-columns: minmax(0, 1fr) 4.8em; }
}
a.trow { text-decoration: none; color: inherit; } a.trow:hover { background: #d2d2d206; }
.cell2 { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cell2 > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell2 .s { font-size: .8571em; color: var(--textColor2); }
.ico32 { width: 2em; height: 2em; flex-shrink: 0; background: #d2d2d208; }
.who { color: var(--themeColor); }
.where { display: flex; align-items: center; gap: 0.4375em; min-width: 0; }
.where .secBadge { width: 1.875em; }
.val { text-align: right; font-variant-numeric: tabular-nums; color: var(--themeColor); }
.val.b1 { color: #e0b040; } .val.b10 { color: #f06000; }
span.tg { font-size: .6429em; letter-spacing: 1px; padding: 0 0.25em; border: 1px solid var(--borderColor31); color: var(--textColor2); margin-left: 0.3125em; vertical-align: 1px; white-space: nowrap; }
span.tg.solo { color: #48f0c0; border-color: #48f0c055; } span.tg.npc { color: #d07800; border-color: #d0780055; } span.tg.awox { color: #ff4f4f; border-color: #ff4f4f55; }
span.tg.fb { color: #e0b040; border-color: #e0b04055; }
span.tg.gank { color: #5aa9ff; border-color: #5aa9ff55; }   /* CONCORD blue */
/* the second row of filters: value, class, tags (chips, one choice each) */
.kfGrp { display: inline-flex; align-items: center; gap: .625em; flex-wrap: wrap; }   /* a label never ends a line without its chips */
.kfRow .chipRow { padding: 0; gap: .25em; flex-wrap: wrap; }
.kfRow .chip { min-width: 3em; }
/* the images (pilot, corporation, alliance) and the places (system, region) open their own small menu */
[data-xe] { cursor: pointer; transition: outline-color .15s linear; outline: 1px solid transparent; outline-offset: -1px; }
[data-xe]:hover { outline-color: #d2d2d290; }
[data-xs], [data-xr] { cursor: pointer; transition: color .15s linear; }
[data-xs]:hover, [data-xr]:hover { color: #ffffff; }

/* new kills sliding in at the top of the list */
.trow.km.fresh { animation: fresh 2.4s ease-out; }
@keyframes fresh { from { background: #48f0c01c; } to { background: transparent; } }

/* the pages of a list: Newer / Older (a list of 90 days has no last page worth counting) */
#kPager .pager { margin-top: .3em; }   /* the site's pager (js/pager.js, styles.css .pager): numbered pages under the list */

/* ---------------------------------------------------------------- the panels beside the list */
.big5 { display: flex; flex-direction: column; }
.bigK { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: 0.625em; align-items: center; padding: 0.375em 0; border-top: 1px solid #d2d2d20a; text-decoration: none; color: inherit; }
.bigK:first-child { border-top: 0; }
.bigK:hover { background: #d2d2d206; }
.bigK img { width: 3em; height: 3em; background: #d2d2d208; }
.trow.hs, .thead.hs { grid-template-columns: 2.2em minmax(0, 1fr) 2.6em 4.6em; column-gap: 14px; font-size: .9286em; }
.trow.hs > .secBadge { width: auto; justify-self: stretch; }
.trow.al, .thead.al { grid-template-columns: 1.25em minmax(0, 1fr) 7.6em; font-size: .9286em; }
.trow.al .elogo { width: 1.25em; height: 1.25em; }
.kl { display: flex; flex-direction: column; gap: 2px; font-size: .7857em; color: var(--textColor2); }
.kl span { display: grid; grid-template-columns: 1fr 3.8em; gap: 0.375em; align-items: center; }
.kl u { display: block; height: 0.3125em; text-decoration: none; }
.kl .k u { background: #48f0c0a0; } .kl .l u { background: #ff4f4fa0; }
.kl em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.clsRow { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 2.4em; gap: 0.5em; align-items: center; font-size: .8571em; padding: 2px 0; cursor: pointer; }
.clsRow:hover span { color: var(--themeColor); }
.clsRow u { height: 0.375em; background: #d2d2d22e; display: block; text-decoration: none; }
.clsRow em { font-style: normal; text-align: right; color: var(--textColor2); }

/* ---------------------------------------------------------------- search (the list narrowed to one thing) */
.kSearch { position: relative; flex: 1 1 12em; max-width: 30em; margin-left: auto; }
.searchBox { display: flex; align-items: center; gap: 0.375em; border: 1px solid var(--borderColor31); background: #00000040; padding: 0 0.5em; height: 2.0625em; width: 100%; box-sizing: border-box; }
.searchBox:focus-within { border-color: #6b6b6b; }
.searchBox svg { width: 1em; height: 1em; fill: none; stroke: var(--textColor2); stroke-width: 1.8; flex-shrink: 0; }
.searchBox input { background: none; border: 0; outline: 0; color: var(--textColor); font: inherit; font-size: .9286em; width: 100%; min-width: 0; }
.kChip { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; flex-shrink: 0; font-size: .85em; color: var(--themeColor); border: 1px solid #4a4a4a; padding: 1px .5em; }
.kChip i { font-style: normal; color: var(--textColor2); }
.kChip b { font-weight: normal; cursor: pointer; color: var(--textColor2); } .kChip b:hover { color: var(--themeColor); }
.kChip select { background: #0d0d0d; color: var(--textColor); border: 0; font: inherit; font-size: .95em; cursor: pointer; }
.kSug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #0d0d0df7; border: 1px solid var(--borderColor31); max-height: 24em; overflow-y: auto; padding: .3em 0; }
.kSgHd { font-size: .7em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--textColor2); padding: .5em .8em .2em; }
.kSug button { display: flex; justify-content: space-between; gap: 1em; width: 100%; background: none; border: 0; color: var(--textColor); font: inherit; font-size: .92em; padding: .35em .8em; cursor: pointer; text-align: left; }
.kSug button:hover, .kSug button.on { background: #ffffff10; color: var(--themeColor); box-shadow: inset 2px 0 0 var(--themeColor); }
.kSug button .dim { white-space: nowrap; }

/* ---------------------------------------------------------------- the killmail page */
.kmGrid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .875em; }
.kmHead { grid-column: 1; grid-row: 1; }
.kmFit { grid-column: 1; grid-row: 2; }
.kmSide { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: .875em; min-height: 0; min-width: 0; }
/* the header: Fitlab's slot ring on the left; pilot (pills in the top-right corner), ship, system, the four values,
   and at the bottom the date and the buttons */
.kmTop { display: grid; grid-template-columns: 22.5em minmax(0, 1fr); gap: 1.2em; align-items: stretch; }   /* the ring 360 px wide */
.kmRing { align-self: center; }
.kmRing .ringSvg { width: 100%; height: auto; display: block; }
/* the ring's look is the Fitlab Ring canon (/lib/ewt-ring.css); here only a killmail's colours: dropped, destroyed */
.ringSvg .slot.drop { fill: #48f0c014; stroke: #48f0c088; } .ringSvg .slot.dest { fill: #ff3f2b14; stroke: #ff3f2b88; }
.ringSvg .slot.chc.drop { fill: #0d0d0dcc; } .ringSvg .slot.chc.dest { fill: #0d0d0dcc; }
.ringSvg .sg:not(.empty):hover .slot { stroke: #d2d2d2; }
.kmMain { display: flex; flex-direction: column; justify-content: space-between; gap: .7em; min-width: 0; padding: .3em 0 0; }
.kmR1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.kmR1 .kmWho { flex: 1 1 auto; min-width: 0; }
.kmR1 .kmPills { flex: 0 1 auto; max-width: 42%; gap: .3em; justify-content: flex-end; }
.kmWho { display: flex; align-items: stretch; gap: .8em; margin: 0; }
.kmWho > img { width: 5em; height: 5em; flex-shrink: 0; background: #d2d2d208; }
.kmWhoL { display: grid; grid-template-rows: repeat(3, 1fr); min-width: 0; }
.kmWhoL > span { display: flex; align-items: center; gap: .45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--textColor); min-width: 0; }
.kmWhoL > span > span { overflow: hidden; text-overflow: ellipsis; }
.kmWhoL img { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.kmWhoL .kmName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; color: var(--themeColor); font-size: 1.15em; letter-spacing: .5px; }
.kmShip { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
.kmTitle { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 1.7em; letter-spacing: .1em; color: var(--themeColor); }
.kmPills { display: flex; gap: .35em; flex-wrap: wrap; }
.kmPills:empty { display: none; }
.kmPills .tg { margin-left: 0; font-size: .7143em; padding: 1px .4em; }
.kmLoc { font-size: .8571em; color: var(--textColor2); }
.kmVal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.kmVal .kpi { white-space: nowrap; min-width: 0; padding-left: .5em; padding-right: .5em; }
.kmVal .kpiL { overflow: hidden; text-overflow: ellipsis; letter-spacing: .5px; }
.kmVal .kpiMain { display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; row-gap: 0; }
.kmVal .a1.x { color: var(--loss); } .kmVal .a1.d { color: var(--kill); } .kmVal .a1.f { color: #e0b040; }
.kmVal .x2 { font-family: 'Shentox Bold', 'Segoe UI', sans-serif; font-size: 1.0125em; color: color-mix(in srgb, var(--loss) 50%, #fff); cursor: help; }
.kmVal .x2.fv { color: color-mix(in srgb, #e0b040 55%, #fff); }   /* Fit value, under Total loss as "without hull" under Destroyed */
.kmVal [title] { cursor: help; }
.kmR5 { display: flex; align-items: flex-end; justify-content: space-between; gap: .6em 1em; flex-wrap: nowrap; }
.kmDate { color: var(--textColor2); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.kmActs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35em; margin: 0; }
.barBtn.pri { color: var(--themeColor); border-color: #d2d2d280; }
.kmWarn { font-size: .8571em; color: #e0a03d; }
@media (min-width: 68.76em) and (max-width: 87.5em) { .kmTop { grid-template-columns: 16.4em minmax(0, 1fr); } }
@media (max-width: 87.5em) { .kmVal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* attackers: the portrait, then the ship over the weapon, name / corporation / alliance, the damage and its share */
.kmAtt { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; }
.kmAttL { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .3em; overscroll-behavior: contain; }
.kmAttL > .pager { position: sticky; bottom: 0; z-index: 2; background-color: var(--backgroundColor); padding-bottom: 4px; }   /* the attackers over 50: the pager at the foot of the scrolling list (7 Nov 2026) */
.trow.at { grid-template-columns: 4em 2em minmax(0, 1fr) 5em; gap: .45em; padding: .2em 0; align-items: start; font-size: .9286em; }
.trow.at .atPor { width: 4em; height: 4em; display: block; background: #d2d2d208; }
.trow.at .atSW { display: flex; flex-direction: column; width: 2em; height: 4em; }
.trow.at .atSW > * { display: block; width: 2em; height: 2em; line-height: 0; }
.trow.at .atSW img { width: 2em; height: 2em; display: block; background: #d2d2d208; }
.trow.at .cell2 { margin-left: .2em; }
.trow.at .atTxt { align-self: start; padding-top: .05em; }
.trow.at .atTxt .s { display: block; font-size: .85em; color: var(--textColor2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow.at .who { display: flex; align-items: center; gap: .35em; min-width: 0; }
.trow.at .who > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.dmg { display: flex; flex-direction: column; gap: .1em; font-size: 1em; text-align: right; font-variant-numeric: tabular-nums; align-self: start; padding-top: .05em; }
.dmg b { font-weight: normal; color: var(--textColor); font-size: 1.1em; }
.dmg .pct { color: var(--textColor2); font-size: .85em; }

/* FIT panel: a table. MODULE, QTY, VALUE sort it (one list, the slot under each name); the ring icon brings the slot
   view back; the split bar's two labels are the dropped / destroyed filters (never both off) */
.kmFit { container: kmfit / inline-size; display: flex; flex-direction: column; min-height: 0; }
.kmFit .ptHead { align-items: center; }
.slotHd { font-size: .7143em; letter-spacing: 1.5px; color: var(--textColor2); margin: 0.625em 0 2px; padding: .45em 0 .35em; }
.slotHd:first-child { margin-top: 0; }
.slotHd .dim { margin-left: .6em; letter-spacing: .5px; }
.trow.it { grid-template-columns: 2em minmax(0, 1fr) 3.4em 8.4em 1.6em; font-size: .9286em; padding: 0.1875em 0; }
.trow.it .q { text-align: right; color: var(--textColor2); font-variant-numeric: tabular-nums; }
.trow.it.drop .n, .trow.it.drop .val { color: #48f0c0; } .trow.it.dest .n, .trow.it.dest .val { color: #ff8a7a; }
.trow.it.zero .val { color: var(--textColor2); }
.trow.it .chg { display: block; font-size: .8571em; color: var(--textColor2); }
.trow.it.chRow { grid-template-columns: 1.4em minmax(0, 1fr) 3.714em 9.177em 1.748em; padding-left: 2.6em; font-size: .85em; border-top: 0; margin-top: -.15em; position: relative; }
.trow.it.chRow::before { content: ''; position: absolute; left: 1.15em; top: -.15em; height: 1em; width: .9em; border-left: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a; }
.trow.it.chRow img { width: 1.4em; height: 1.4em; }
.trow.it.chRow .q, .trow.it.chRow .val { font-size: 1.0925em; }   /* the figures line up with the module rows' */
.fitTag { font-style: normal; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .68em; letter-spacing: 1px; color: color-mix(in srgb, #e0b040 70%, #fff); border: 1px solid color-mix(in srgb, #e0b040 45%, transparent); padding: 0 .35em; margin-left: .5em; vertical-align: .12em; cursor: help; }
.ftBar { margin: .1em 0 .55em; }
.ftLbls { display: flex; justify-content: space-between; gap: 1em; margin-bottom: .35em; }
.ftL { font: inherit; font-size: .8571em; letter-spacing: 1px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--textColor2); opacity: .5; transition: opacity .15s linear, color .15s linear; white-space: nowrap; }
.ftL b { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-weight: normal; letter-spacing: .5px; }
.ftL i { font-style: normal; color: var(--textColor2); letter-spacing: 0; }
.ftL.on { opacity: 1; } .ftL.drop.on b { color: #48f0c0; } .ftL.dest.on b { color: #ff8a7a; }
.ftL:hover { opacity: 1; color: var(--textColor); }
.ftL:not(.on) b { text-decoration: line-through; }
.ftTrack { display: flex; gap: 2px; height: .45em; }
.ftTrack .seg { flex: 1 1 0; min-width: 3px; cursor: pointer; opacity: .22; transition: opacity .15s linear; }
.ftTrack .seg.on { opacity: 1; } .ftTrack .seg:hover { opacity: .8; }
.ftTrack .seg.drop { background: #48f0c0; } .ftTrack .seg.dest { background: #ff3f2b; }
.thead.it { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 4.42em 10.92em 2.08em; align-items: center; gap: 10px; padding-top: 0; border-bottom: 1px solid var(--borderColor31); padding-bottom: .3em; margin-bottom: .3em; }
.ftHead button { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; color: var(--textColor2); cursor: pointer; text-align: left; white-space: nowrap; }
.ftHead button.num { text-align: right; }
.ftHead button:hover, .ftHead button.on { color: var(--themeColor); }
.ftHead button i { font-style: normal; margin-left: .3em; font-size: .9em; }
.ftDef { width: 2.4em; height: 2.4em; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--borderColor31) !important; }
.ftDef svg { width: 1.5em; height: 1.5em; }
.ftDef.on { color: var(--themeColor); background-color: #d2d2d208 !important; cursor: default; }
.slotTot { display: grid; grid-template-columns: minmax(0, 1fr) 14em 14em 14em 1.891em; column-gap: 10px; align-items: baseline; padding: .35em 0 .2em; margin-bottom: .2em; border-top: 1px solid var(--borderColor31); font-size: .7857em; letter-spacing: .5px; color: var(--textColor2); }
.slotTot > span { display: flex; justify-content: flex-end; align-items: baseline; gap: .45em; white-space: nowrap; }
.slotTot > span:first-child { grid-column: 2; }
.slotTot .tv { font-variant-numeric: tabular-nums; }
.slotTot .d .tv { color: #48f0c0; } .slotTot .x .tv { color: #ff8a7a; } .slotTot .t .tv { color: var(--themeColor); }
/* the gold arrow column: an item worth more than the hull, a piece; its title keeps only those items */
.trow.it .hot { display: flex; justify-content: center; align-items: center; }
.upI { width: .75em; height: .75em; fill: #e0b040; display: block; }
.trow.it .hot .upI { cursor: help; }
.ftHead .ftHot { display: flex; justify-content: center; align-items: center; height: 100%; color: #8a7340; }
.ftHead .ftHot .upI { fill: currentColor; width: 1em; height: 1em; }
.ftHead .ftHot:hover { color: #e0b040; } .ftHead .ftHot.on { color: #e0b040; box-shadow: inset 0 -2px 0 #d2d2d2; }
/* full values (104,195,415) while the FIT panel is wide enough, the short ones (104M) below 520 px of it */
.kmFit .vS { display: none; }
@container kmfit (max-width: 520px) {
    .kmFit .vF { display: none; } .kmFit .vS { display: inline; }
    .kmFit .trow.it { grid-template-columns: 2em minmax(0, 1fr) 3.4em 5.6em 1.6em; } .kmFit .trow.it.chRow { grid-template-columns: 1.4em minmax(0, 1fr) 3.714em 6.118em 1.748em; }
    .kmFit .thead.it { grid-template-columns: 2.6em minmax(0, 1fr) 4.42em 7.28em 2.08em; }
    .kmFit .slotTot { grid-template-columns: minmax(0, 1fr) auto auto auto 1.891em; } .kmFit .slotTot > span:not(:last-child) { min-width: 0; }
}

/* ---------------------------------------------------------------- the menus and the overlay */
#kMenu { position: fixed; z-index: 70; min-width: 19em; max-width: calc(100vw - 16px); background: #0d0d0df7; border: 1px solid var(--borderColor31); box-shadow: 0 .6em 1.8em #000000b0; padding: .3em 0; font-size: 15px; }
#kMenu .kmT { font-size: .7143em; letter-spacing: 1.5px; color: var(--textColor2); padding: .45em 1em .5em; border-bottom: 1px solid var(--borderColor31); margin-bottom: .25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kMenu [data-kma] { display: flex; flex-direction: column; gap: .1em; width: 100%; box-sizing: border-box; text-align: left; background: none; border: 0; padding: .5em 1em; font: inherit; color: #6b6b6b; text-decoration: none; cursor: pointer; transition: color .15s linear; }
#kMenu [data-kma] b { font-weight: normal; color: var(--textColor); transition: color .15s linear; }
#kMenu [data-kma] small { font-size: .8em; color: var(--textColor2); }
#kMenu [data-kma]:hover { background: #d2d2d20a; } #kMenu [data-kma]:hover b { color: #ffffff; }
#kMenu [data-kma]:focus-visible { outline: 1px solid #d2d2d2; outline-offset: -3px; }
#kOv { position: fixed; inset: 0; z-index: 60; background: #00000080; }
#kOv .kSheet { position: absolute; inset: 12px; display: flex; flex-direction: column; background-color: #0d0d0d; border: 1px solid var(--borderColor31); animation: soIn .2s ease-out; }
@keyframes soIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#kOv .soHead { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--borderColor31); flex-shrink: 0; }
#kOv .soLabel { font-size: .7143em; letter-spacing: 1.5px; color: var(--textColor2); }
#kOv .soName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.0714em; color: var(--themeColor); letter-spacing: 1px; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kOv .soLink { font-size: .8571em; color: var(--textColor2); text-decoration: none; border: 1px solid var(--borderColor31); padding: 4px 10px; white-space: nowrap; }
#kOv .soLink:hover { color: var(--themeColor); border-color: var(--textColor2); }
#kOv .soClose { background: none; border: 1px solid var(--borderColor31); color: var(--textColor2); font-size: 1em; cursor: pointer; padding: 3px 9px; line-height: 1.2; font-family: inherit; }
#kOv .soClose:hover { color: var(--themeColor); border-color: var(--textColor2); }
#kOv .kBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#kOv .kBody > .scr > .pgHead { display: none; }
#kOv .kmList { max-height: 34em; overflow-y: auto; }
#kOv .kBody.fr { overflow: hidden; display: flex; } #kOv .kBody.fr iframe { flex: 1 1 auto; width: 100%; border: 0; background: #0d0d0d; }
@media (max-width: 900px) { #kOv .kSheet { inset: 6px; } }

/* ---------------------------------------------------------------- screen sizes
   Wide (over 1100 px, the site's rule): the top bar never moves and only the page under it scrolls; on the list, the title
   and the filters stay too and the LATEST list scrolls on its own under its column titles; on a killmail, the header
   stays and the fit list and the attackers scroll. Narrower: the whole page scrolls (the top bar stays, ewt-topbar.js). */
.kScroll { display: flex; flex-direction: column; gap: .875em; }
.kmList, #kList, #kOv .kBody, .kScroll { overscroll-behavior: contain; }
@media (min-width: 1101px) {
    #mainWrapper:has(> #kWrap) { overflow: hidden; }   /* the Kills pages only: this sheet is loaded by the entity and system pages too */
    #kWrap { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }   /* scrolls only when the screen is too short for the page's own layout */
    #kWrap > .scr { flex: 1 1 auto; min-height: 0; box-sizing: border-box; }
    #kListScr { padding-bottom: 0; }
    #kListScr > .pgHead, #kListScr > .filters { flex-shrink: 0; }
    #kListScr > .kScroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -1.125em; padding: 0 1.125em 1.625em; }
    /* the figures stay too (7 Nov 2026): the columns take what is left under them, the LATEST list scrolls inside its
       panel and the panels on the right scroll as a column of their own; the page itself scrolls only when the screen is
       too short for that (the columns keep 20em) */
    #kListScr .kScroll > .cols { flex: 1 1 auto; min-height: 20em; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    #kListScr .cols > .kCont { display: flex; flex-direction: column; min-height: 0; }
    #kList { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: .3em; }
    #kListScr .cols > .side { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: .3em; overscroll-behavior: contain; }
    #kListScr .kCont > .thead.km { padding-right: var(--listInset, calc(10px + .42em)); }
    .kmScr > .kmGrid { flex: 1 1 auto; min-height: 30em; }
    .kmScr .kmFit { overflow: hidden; }
    .kmScr .kmSide { overflow: hidden; }
    .kmScr .kmList { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: .3em; }
    .kmScr .kmFit .thead.it, .kmScr .kmFit .ftBar { padding-right: var(--fitInset, calc(10px + .42em)); }   /* --fitInset: measured */
    /* the killmail over another page: the same rules as its own page. The panels fill the sheet, the header stays, the
       fit list and the attackers scroll inside their panels; only a sheet too short for them (30em) scrolls as a whole */
    #kOv .kBody:not(.fr) { display: flex; flex-direction: column; }
    #kOv .kBody > .scr.kmScr { flex: 1 1 auto; min-height: 0; }
    #kOv .kmList { max-height: none; }
}
@media (max-width: 1100px) {
    .cols, .kmGrid { grid-template-columns: 1fr; }
    .kmGrid { grid-template-rows: auto; }
    .kmHead, .kmFit, .kmSide { grid-column: 1; grid-row: auto; }
    .kmAttL { max-height: 22em; }
    .kmScr .kmList { max-height: 32em; overflow-y: auto; }
    .kpis5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kmTop { grid-template-columns: 17.4em minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .scr { padding: .75em .625em 1.25em; }
    .pgHead { margin: -.75em -.625em 0; }
    .kpis5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kmTop { grid-template-columns: 1fr; }
    .kmRing { max-width: 20.4em; margin: 0 auto; width: 100%; }
    .kmR1 { flex-direction: column; } .kmR1 .kmPills { max-width: none; justify-content: flex-start; }
    .kmR5 { flex-wrap: wrap; } .kmR5 .kmActs { justify-content: flex-start; }
    .pgHead .barGroup { margin-left: 0; }
    .kSearch { flex-basis: 100%; max-width: none; }
}

/* ?embed=1: shown inside another module's overlay (part 2), no site chrome */
.embed #mainTop, .embed #LegalNotice { display: none; }
.embed #mainWrapperWrapper { background: none; }
.embed .plScr > .pgHead { display: none; }   /* a pilot in an overlay: its title row is the overlay's own head */
#legnot a { color: inherit; text-decoration: none; } #legnot a:hover { color: var(--textColor); }
.kmMain .where .secBadge { width: auto; min-width: 2.4em; padding: 1px .35em; }

/* ---------------------------------------------------------------- a pilot's page
   his header, then one panel, the Kills tab: the period, the KPIs and the kills list button on a row, the cards under
   them (.plScroll: the same grid as an alliance's tab) */
.plHero { display: flex; align-items: center; gap: 1.1em; flex-wrap: wrap; }
.plPor { width: 6em; height: 6em; flex-shrink: 0; background: #d2d2d208; }
.plWho { display: flex; flex-direction: column; gap: .3em; min-width: 0; flex: 1 1 18em; }
.plWho .heroName { font-size: 1.6em; }
.plWho > span { display: flex; align-items: center; gap: .45em; color: var(--textColor); min-width: 0; }
.plWho > span > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plWho img { width: 1.4em; height: 1.4em; flex-shrink: 0; }
.plWho > .dim { font-size: .7857em; }
.plActs { display: flex; gap: .375em; flex-wrap: wrap; align-self: flex-start; }
.plFilters { margin: .75em 0; }
#plTabs { margin: 0; }
.plTabs > .ekTop { margin-top: .75em; }   /* 12 px under the tab row, as an alliance's Kills tab (.entKills margin-top) (7 Nov 2026) */
.ekGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.72fr); gap: .875em; align-items: start; }
.ekStack { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875em; min-width: 0; }
.ekCard { background-color: #00000052; border: 1px solid var(--borderColor31); padding: 0.75em 0.875em 0.875em; min-width: 0; }
.ekHd { display: flex; align-items: baseline; gap: 0.625em; padding-bottom: 0.625em; margin-bottom: 0.375em; border-bottom: 1px solid var(--borderColor31); }
.ekT { font-size: 0.8571em; letter-spacing: 2px; color: var(--themeColor); white-space: nowrap; }
.ekN { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.4286em; line-height: 1; }
.ekCard.ekKill .ekN { color: var(--kill); }
.ekCard.ekLoss .ekN { color: var(--loss); }
.ekI { margin-left: auto; font-size: 0.8571em; color: var(--textColor); text-align: right; }
.ekMore { display: block; margin-top: 0.625em; font-size: 0.8571em; color: var(--textColor); text-decoration: none; text-align: right; }
.ekMore:hover { color: var(--themeColor); }
.ekCard .thead.km { padding-top: 0; }
.trow.sh { grid-template-columns: 2em minmax(0, 1fr) 2.4em 2.4em; font-size: .9286em; }
.trow.hs.hs2 { grid-template-columns: 2.2em minmax(0, 1fr) 2.4em 2.4em; }
.num.kill { color: var(--kill); } .num.loss { color: var(--loss); }
@media (max-width: 90em) { .ekGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ekStack { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 68.75em) { .ekGrid, .ekStack { grid-template-columns: minmax(0, 1fr); } }
/* scrolling: the top bar never moves. Wide and tall enough (over 1100 x 820 px), nothing moves but the tables: the title,
   the pilot's header and the Kills tab's panel stay, the cards fill the rest of the screen, and each card's list scrolls
   inside it, under its column titles, with its pager at the bottom. Wide but short, everything under the top bar
   scrolls; narrow (1100 px and less), the page scrolls and the top bar stays (ewt-topbar.js). */
.plScroll { display: flex; flex-direction: column; gap: .875em; position: relative; margin-top: .875em; }   /* relative: the loading ring sits over it */
@media (min-width: 1101px) { #kWrap > .plScr { overflow-y: auto; overscroll-behavior: contain; } }
@media (min-width: 1101px) and (min-height: 820px) {
    #kWrap > .plScr { overflow: hidden; }
    .plScr > .pgHead, .plScr > .plHero, .plScroll > .kCredit { flex-shrink: 0; }
    .plScr > .plTabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }   /* the panel takes the height left, its cards fill it */
    .plTabs > .tabRow, .plTabs > .ekTop { flex-shrink: 0; }
    .plScroll { flex: 1 1 auto; min-height: 0; overflow: hidden; }
    .plScroll > .ekGrid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
    .plScroll > .ekGrid.ent { grid-template-rows: auto minmax(18em, 1fr); }
    .plScroll .ekStack { min-height: 0; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
    .plScroll .ekCard { display: flex; flex-direction: column; min-height: 0; }
    .plScroll .ekCard > .ekHd, .plScroll .ekCard > .thead, .plScroll .ekCard > .plPager { flex-shrink: 0; }
    .plScroll .ekCard > .panelList, .plScroll .ekCard > .ekBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: .3em; }
    .plScroll .ekCard > .thead.km { padding-right: var(--listInset, calc(10px + .42em)); }
}
@media (min-width: 1101px) and (max-width: 90em) and (min-height: 820px) {
    /* two columns: kills and losses side by side over the height left, the ships and systems in a row under them; on a
       screen too short for both (the lists need 18em), the cards' area scrolls as a last resort */
    .plScroll { overflow-y: auto; overscroll-behavior: contain; }
    .plScroll > .ekGrid { flex: 1 1 0; min-height: 44em; grid-template-rows: minmax(0, 1fr) 12em auto; }
    .plScroll > .ekGrid.ent { grid-template-rows: auto minmax(0, 1fr) 12em; }
    .plScroll .ekStack { grid-template-rows: minmax(0, 1fr); }
}

.plPager .pager { margin-top: .5em; }
.ekCard .panelList { transition: opacity .15s linear; }
.kmWhoL > .kmName { display: block; }   /* a long name ends in "…" (a flex line would only cut it) */
.pgHead .pgCredit { flex: 1 1 24em; margin-left: auto; text-align: right; }   /* the credit, at the right of the bar: it wraps on two lines there rather than drop under the title */
.pgHead .barGroup + .pgCredit, .pgHead .pgCredit ~ .barGroup { margin-left: 0; }

/* ---------------------------------------------------------------- the Kills tab of an alliance's or a corporation's page
   (entity/index.html; the tab after Members): the same KPIs and cards as a pilot's page, the period, the KPIs and the
   kills list button on one row (the screen's height goes to the cards). Wide and tall enough, entity.css docks the tabs
   panel at the top (#entScroll.docked): there the KPIs stay put and each card's list scrolls inside the card, but only once
   docked: before that the wheel moves the page, and at a list's first row, going up, the page takes the scroll back (the
   lists pass the wheel on: no overscroll-behavior). Always three columns there: the lists keep all the height. */
:is(.entKills, .sysKills, .plTabs) .ekTop { display: flex; align-items: center; gap: .625em .875em; flex-wrap: wrap; }
:is(.entKills, .sysKills, .plTabs) .ekTop > .plFilters { margin: 0; flex-wrap: nowrap; }
:is(.entKills, .sysKills, .plTabs) .ekTop > .kpis5 { flex: 1 1 36em; }
:is(.entKills, .sysKills, .plTabs) .ekTop .kpi { padding: 4px 10px 5px; }
:is(.entKills, .sysKills, .plTabs) .ekTop > .barBtn:first-of-type { margin-left: auto; }
@media (max-width: 1100px) { :is(.entKills, .sysKills, .plTabs) .ekTop > .kpis5 { order: 3; flex-basis: 100%; } }
:is(.entKills, .sysKills) > .ekGrid { margin-top: .875em; }
@media (min-width: 1101px) and (min-height: 820px) {
    #panelTabs > .pane.entKills:not([hidden]) { display: flex; flex-direction: column; overflow: hidden auto; scrollbar-gutter: auto; margin: 12px 0 0; padding-right: 0; }   /* scrolls only when too short for the lists' 18em */
    .entKills > .ekTop, .entKills > .panelEmpty { flex-shrink: 0; }
    .entKills > .ekGrid { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .72fr); grid-template-rows: auto minmax(18em, 1fr); align-items: stretch; }
    .entKills .ekStats .ekCard > .ekBody { overflow-y: auto; }
    .entKills .ekStack { grid-column: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
    .entKills .ekGrid.ent .ekStack { grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }   /* top pilots, ships, systems */
    .entKills .ekGrid.ent .ekPil .ekBody { max-height: none; }
    .entKills .ekCard { display: flex; flex-direction: column; min-height: 0; }
    .entKills .ekCard > .ekHd, .entKills .ekCard > .thead, .entKills .ekCard > .plPager { flex-shrink: 0; }
    .entKills .ekCard > .panelList, .entKills .ekCard > .ekBody { flex: 1 1 auto; min-height: 0; overflow-y: hidden; scrollbar-gutter: stable; padding-right: .3em;
        --sbInner: transparent; transition: --sbInner .35s ease; }
    #entScroll.docked .entKills .ekCard > .panelList, #entScroll.docked .entKills .ekCard > .ekBody { overflow-y: auto; --sbInner: #313131; }
    .entKills .ekCard > .panelList::-webkit-scrollbar-thumb, .entKills .ekCard > .ekBody::-webkit-scrollbar-thumb { background-color: var(--sbInner) !important; }
    #entScroll.docked .entKills .ekCard > .panelList::-webkit-scrollbar-thumb:hover, #entScroll.docked .entKills .ekCard > .ekBody::-webkit-scrollbar-thumb:hover { background-color: #6b6b6b !important; }
    .entKills .ekCard > .thead.km { padding-right: var(--listInset, calc(10px + .42em)); }
}
@media (min-width: 1101px) and (max-width: 90em) and (min-height: 820px) {
    /* two columns: the stack goes under the merged list as one row of three cards (a pilot: two), each list capped and
       scrolling inside; the pane scrolls when the screen is too short for the merged list's 18em */
    .entKills .ekGrid.ent { grid-template-rows: auto minmax(18em, 1fr) auto; }
    .entKills .ekGrid.ent .ekStack { grid-template-rows: minmax(0, 1fr); }
    .entKills .ekGrid.ent .ekStack .ekBody, .entKills .ekGrid.ent .ekPil .ekBody { flex: none; height: 13.5em; max-height: none; }
}

/* the second row of the entity tab: over time, by hour, top pilots (mirror charts: kills above, losses below) */
.ekStats { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .72fr); gap: .875em; align-items: stretch; min-width: 0; }
.ekStats.he { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ekStats .ekI b { font-weight: normal; }
.mirror { display: block; width: 100%; height: 6.25em; margin-top: .375em; }
.mirror .bg { fill: transparent; } .mirror g:hover .bg { fill: #d2d2d20a; }
.mirror .k { fill: #48f0c0b0; } .mirror g:hover .k { fill: var(--kill); }
.mirror .l { fill: #ff3f2bb0; } .mirror g:hover .l { fill: var(--loss); }
.mirror .mid { stroke: var(--borderColor31); stroke-width: 1; }
.mirror .eff { fill: none; stroke: #d2d2d2; stroke-width: 1.5; stroke-opacity: .85; stroke-linejoin: round; }
.mAxis { display: flex; justify-content: space-between; font-size: .7143em; color: var(--textColor2); padding-top: .3em; border-top: 1px solid var(--borderColor31); font-variant-numeric: tabular-nums; }
.trow.tp { grid-template-columns: 2em minmax(0, 1fr) 3em 4.6em; font-size: .9286em; }
.trow.tp .por { border-radius: 2px; }
.ekStats .ekBody { max-height: 9.6em; overflow-y: auto; }   /* five pilots, the rest scroll */
@media (max-width: 90em) { .ekStats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ekStats .ekCard:first-child { grid-column: 1 / -1; } }
@media (max-width: 68.75em) { .ekStats, .ekStats.he { grid-template-columns: minmax(0, 1fr); } }

/* the entity tab's own grid, the pilot page's too (.he): the charts in one row (over time two thirds, by hour one third),
   the merged list beside the stack (top pilots, ships, systems; a pilot: ships, systems) */
.ekGrid.ent .ekStats { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 68.75em) { .ekGrid.ent .ekStats { grid-template-columns: minmax(0, 1fr); } }   /* under 1100 px: one under the other */
.ekGrid.ent .ekMerged { grid-column: 1 / 3; }
.ekGrid.ent .mirror { height: 5em; }
.ekMerged .ekHd .ekI b { font-weight: normal; } .ekMerged .ekHd .ekT2 { margin-left: .5em; }
.ekMerged .ekHd .ekN.kill, .ekMerged .ekHd .kill { color: var(--kill); } .ekMerged .ekHd .ekN.loss, .ekMerged .ekHd .loss { color: var(--loss); }
.ekMerged .ekSide { margin-left: auto; gap: 3px; }
.ekMerged .ekSide .tab { font-size: .8571em; padding: 4px 10px 6px; }
/* the merged list of a pilot, an alliance or a corporation: the victim and final-blow panels of a row take a faint wash,
   teal for a kill, red for a loss (the row itself stays on the card); the rows and the heads inset like the day lines */
.trow.km.isK .pcell { background-color: color-mix(in srgb, var(--kill) 8%, transparent); }
.trow.km.isL .pcell { background-color: color-mix(in srgb, var(--loss) 9%, transparent); }
.trow.km.isK, .trow.km.isL, .ekMerged .thead.km { padding-left: .7em; padding-right: .7em; }
.ekMerged.ekCard > .thead.km { padding-right: calc(var(--listInset, 0px) + .7em); }   /* docked, the list has a scrollbar: the heads end where the rows end, the .7em included */
.trow.km.isL .kI { color: var(--loss); } .trow.km.isK .kI { color: var(--kill); }
.trow.km.isL .kI.b1, .trow.km.isK .kI.b1 { color: #e0b040; } .trow.km.isL .kI.b10, .trow.km.isK .kI.b10 { color: #f06000; }   /* the value tiers keep their colours */
.ekPil .ekBody { max-height: 13.5em; overflow-y: auto; }
/* a loading ring over a card or the tab while it waits for the server */
/* a pilot's, a corporation's or an alliance's Kills tab (and its overlay) is an .ekGrid.ent: entity.css underlines .ent a on hover, not here */
.ekGrid.ent a:hover { text-decoration: none; }
.ekCard, .pane.entKills { position: relative; }
.ekSpin { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ekSpin i { width: 2.2em; height: 2.2em; border: 2px solid #d2d2d230; border-top-color: var(--themeColor); border-radius: 50%; animation: ekSpin .8s linear infinite; }
@keyframes ekSpin { to { transform: rotate(360deg); } }
@media (max-width: 90em) { .ekGrid.ent .ekStats .ekCard:first-child { grid-column: auto; }   /* the two charts stay side by side down to 1100 px */
    .ekGrid.ent .ekMerged { grid-column: 1 / -1; } .ekGrid.ent .ekStack { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ekGrid.ent.he .ekStack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 68.75em) { .ekGrid.ent .ekStack { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- the Kills tab of a system page (system/index.html)
   The same period, KPIs and cards, in a panel of the system's Kills pane: its kills, who fights there, the ships lost
   there, the kills per hour of the day. The pane scrolls as the system page's other tabs do (system.css). */
.sysKills .ekBtns { display: flex; gap: .375em; margin-left: auto; }
@media (max-width: 1450px) { .sysKills .ekTop > .kpis5 { order: 3; flex-basis: 100%; } }
.sysKills .kpiMain a.a1 { color: var(--themeColor); text-decoration: none; } .sysKills .kpiMain a.a1:hover { text-decoration: underline; }
.sysKills .ekGrid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr); }
@media (max-width: 90em) { .sysKills .ekGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sysKills .ekKill { grid-column: 1 / -1; } .sysKills .ekStack { grid-column: auto; grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 68.75em) { .sysKills .ekGrid, .sysKills .ekStack { grid-template-columns: minmax(0, 1fr); } }
.sysKills .ekWho .ico32 { border-radius: 2px; }
.trow.sl { grid-template-columns: 2em minmax(0, 1fr) 2.4em 4.2em; font-size: .9286em; }
.hrBars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; height: 5.5em; padding-top: .375em; border-bottom: 1px solid var(--borderColor31); }
.hrBars i { display: block; height: max(var(--h), 1px); background: #ff3f2bb0; }
.hrBars i:hover { background: var(--loss); }
.hrAxis { display: flex; justify-content: space-between; font-size: .7143em; color: var(--textColor2); padding-top: .3em; font-variant-numeric: tabular-nums; }
@media (min-width: 1101px) and (min-height: 820px) {
    /* docked (system.css #sysScroll.docked), each card's list scrolls inside the card; before that the wheel moves the
       page, and at a list's first row, going up, the page takes the scroll back (no overscroll-behavior) */
    #sysDock .sysKills { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    #sysDock .sysKills > .ekTop, #sysDock .sysKills > .panelEmpty { flex-shrink: 0; }
    #sysDock .sysKills > .ekGrid { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    #sysDock .sysKills .ekKill, #sysDock .sysKills .ekStack { grid-column: auto; }
    #sysDock .sysKills .ekStack { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    #sysDock .sysKills .ekCard { display: flex; flex-direction: column; min-height: 0; }
    #sysDock .sysKills .ekCard > .ekHd, #sysDock .sysKills .ekCard > .thead, #sysDock .sysKills .ekCard > .plPager { flex-shrink: 0; }
    #sysDock .sysKills .ekCard > .panelList, #sysDock .sysKills .ekCard > .ekBody { flex: 1 1 auto; min-height: 0; overflow-y: hidden; scrollbar-gutter: stable; padding-right: .3em;
        --sbInner: transparent; transition: --sbInner .35s ease; }
    #sysScroll.docked .sysKills .ekCard > .panelList, #sysScroll.docked .sysKills .ekCard > .ekBody { overflow-y: auto; --sbInner: #313131; }
    #sysDock .sysKills .ekCard > .panelList::-webkit-scrollbar-thumb, #sysDock .sysKills .ekCard > .ekBody::-webkit-scrollbar-thumb { background-color: var(--sbInner) !important; }
    #sysScroll.docked .sysKills .ekCard > .panelList::-webkit-scrollbar-thumb:hover, #sysScroll.docked .sysKills .ekCard > .ekBody::-webkit-scrollbar-thumb:hover { background-color: #6b6b6b !important; }
    #sysDock .sysKills .ekCard > .thead.km { padding-right: var(--listInset, calc(10px + .42em)); }
}

/* ---------------------------------------------------------------- the Kills side panel of a region map (map/index.html)
   In the map's side panel (map.css #mapSide, 44em like every panel): the period, the "on the map" switch, the KPIs, the
   kills per hour, four tabs (the latest kills, the systems, who fights there, the ships lost), the credit. */
#mapSide .rkIco { width: 1.15em; height: 1.15em; flex-shrink: 0; stroke: var(--themeColor); fill: none; stroke-width: 1.6; }
#mapSide .rkTop { padding: 8px 10px 0; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
#mapSide .rkTools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#mapSide .rkPer { gap: 0; } #mapSide .rkPer .lbl { display: none; }
#mapSide .rkPer .tabRow .tab { font-size: .8571em; padding: 4px 10px 6px; }
#mapSide .rkColour { display: flex; align-items: center; gap: 6px; font-size: .8214em; color: var(--textColor2); cursor: pointer; }
#mapSide .rkColour:hover { color: var(--textColor); } #mapSide .rkColour input { margin: 0; accent-color: #d2d2d2; }
#mapSide .rkTools .rkList { margin-left: auto; }
#mapSide .kpis5 { gap: 6px; }
#mapSide .kpi { padding: 4px 8px 5px; border: 1px solid var(--borderColor31); background-color: #d2d2d204; white-space: nowrap; }
#mapSide .kpiL { font-size: .7857em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--textColor2); }
#mapSide .kpiMain { margin-top: 2px; font-variant-numeric: tabular-nums; }
#mapSide .kpiMain .a1 { font-family: 'Shentox Bold', 'Segoe UI', sans-serif; color: var(--themeColor); }
#mapSide .kpiMain .a1.big { font-size: 1.2em; }
#mapSide .kpiMain a.a1 { text-decoration: none; } #mapSide .kpiMain a.a1:hover { text-decoration: underline; }
#mapSide .kpiU { margin-left: 4px; font-size: .7857em; color: var(--textColor2); }
#mapSide .rkHours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; height: 2.6em; border-bottom: 1px solid var(--borderColor31); }
#mapSide .rkHours i { display: block; height: max(var(--h), 1px); background: #ff3f2bb0; } #mapSide .rkHours i:hover { background: var(--loss); }
#mapSide .rkAxis { display: flex; justify-content: space-between; font-size: .7143em; color: var(--textColor2); margin-top: -5px; }
#rkTabs { margin: 2px 0 0; } #rkTabs .tab { font-size: .9286em; padding: 6px 12px 8px; }
#rkTabs .rkTn { margin-left: 6px; font-size: .8462em; color: var(--textColor2); font-variant-numeric: tabular-nums; }
#mapSide .rkBody { padding: 0 10px 6px; flex: 1 1 auto; }
#mapSide .rkFoot { flex-shrink: 0; padding: 6px 10px 8px; border-top: 1px solid var(--borderColor31); font-size: .7143em; color: var(--textColor2); line-height: 1.5; }
#mapSide .rkFoot a { color: var(--textColor); text-decoration: none; } #mapSide .rkFoot a:hover { color: var(--themeColor); }
/* the latest kills: the rows of the Kills pages (with their WHERE column), the card's frame dropped */
#mapSide .ekCard.rkLatest { background: none; border: 0; padding: 0; }
#mapSide .rkLatest .thead.km, #mapSide .rkLatest .trow.km { display: grid; align-items: center; }
#mapSide .rkLatest .thead.km { position: sticky; top: 0; z-index: 2; background: #0d0d0d; font-size: .7143em; letter-spacing: 1.5px; color: var(--textColor2); padding: 6px 0 4px; }
#mapSide .rkLatest .trow.km { border-top: 1px solid #d2d2d20a; }
#mapSide .rkLatest .panelList { display: flex; flex-direction: column; }
#mapSide .num { text-align: right; font-variant-numeric: tabular-nums; } #mapSide .dim { color: var(--textColor2); font-size: .8571em; }
/* systems, who fights, ships lost */
#mapSide .rkHead, #mapSide .rkRow { display: grid; align-items: center; gap: 8px; padding: 4px 0; }
#mapSide .rkHead { font-size: .7143em; letter-spacing: 1.2px; color: var(--textColor2); position: sticky; top: 0; background: #0d0d0d; z-index: 2; padding: 6px 0 5px; border-bottom: 1px solid var(--borderColor31); }
#mapSide .rkRow { border-top: 1px solid #d2d2d20a; }
#mapSide .rkRow:hover, #mapSide .rkRow.hl { background: #d2d2d214; }
#mapSide .rkRow .rkN { color: var(--themeColor); }
#mapSide .rkSys { grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1.1fr) 4.2em 2.8em 3.4em; }
#mapSide .rkRow.rkSys { cursor: pointer; }
#mapSide .rkWho { grid-template-columns: 2em minmax(0, 1fr) 3.4em 3.4em; }
#mapSide .rkShip { grid-template-columns: 2em minmax(0, 1fr) 3.4em 4.2em; }
#mapSide .rkBar { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
#mapSide .rkBar i { display: block; height: 7px; background: #ff3f2b90; min-width: 2px; }
#mapSide .rkBar b { font-weight: normal; color: var(--textColor); font-size: .9286em; }
#mapSide .rkRow .secBadge { min-width: 0; width: 2.6em; padding: 1px 0; }
#map .sys-node.kHl rect.box { stroke: #ffffff !important; stroke-width: 2.2; }   /* the system hovered in the panel */
@media (max-width: 900px) { #mapSide .kpis5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #mapSide .rkSys { grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1fr) 4.2em; } #mapSide .rkSys > :nth-child(5), #mapSide .rkSys > :nth-child(6) { display: none; } }

/* ================================================================== a killmail older than the archive: "out of scan range" (Oct 2026) */
.nkPanel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(18em, 32em) minmax(0, 1fr); gap: 3.4em; align-items: center; padding: 2.6em 3.1em; }
.nkEyebrow { font-family: 'Shentox Medium', sans-serif; font-size: .7857em; letter-spacing: .22em; color: #6b6b6b; margin-bottom: .6em; }
.nkTitle { font-family: 'Shentox Light', sans-serif; font-size: 2.6em; letter-spacing: .08em; color: #ececec; line-height: 1.05; margin: 0 0 .5em; font-weight: normal; }
.nkTitle b { font-weight: normal; color: #ff5c5c; }
.nkText { line-height: 1.6; color: #999; max-width: 38em; } .nkText b { font-weight: normal; color: #d2d2d2; }
.nkScan svg { width: 100%; height: auto; display: block; }
.nkScan .rg { fill: none; stroke: #2a2a2a; } .nkScan .rg.max { stroke: #48f0c066; stroke-width: 1.5; stroke-dasharray: 4 4; }
.nkScan .rl { font: 10px 'Shentox Medium', sans-serif; letter-spacing: 1.5px; fill: #555; } .nkScan .rl.max { fill: #48f0c0aa; }
.nkScan .sweep { fill: url(#nkSw); transform-origin: 230px 230px; animation: nkSweep 4s linear infinite; }
.nkScan .me { fill: #d2d2d2; } .nkScan .blip { fill: #ff5c5c; } .nkScan .blipR { fill: none; stroke: #ff5c5c; transform-box: fill-box; transform-origin: center; animation: nkPing 2.4s ease-out infinite; }
.nkScan .bl { font: 11px 'Shentox Medium', sans-serif; letter-spacing: 1.2px; fill: #ff9a9a; }
@keyframes nkSweep { to { transform: rotate(360deg); } }
@keyframes nkPing { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) { .nkScan .sweep, .nkScan .blipR { animation: none; } }
.nkTable { margin-top: 1.4em; border: 1px solid #262626; max-width: 34em; }
.nkTable .h, .nkTable .r { display: grid; grid-template-columns: 1fr 1fr 7em; gap: 1em; padding: .5em .9em; font-size: .8571em; }
.nkTable .h { font-family: 'Shentox Medium', sans-serif; font-size: .7143em; letter-spacing: .16em; color: #6b6b6b; border-bottom: 1px solid #262626; }
.nkTable .r { color: #6b6b6b; font-style: italic; grid-template-columns: 1fr; text-align: center; padding: 1.1em; }
.nkRange { display: flex; align-items: center; gap: .8em; margin-top: .9em; font-size: .7857em; color: #6b6b6b; letter-spacing: .1em; max-width: 34em; }
.nkRange i { flex: 1; height: 4px; background: #48f0c0aa; position: relative; } .nkRange i::after { content: ''; position: absolute; right: -5px; top: -5px; width: 10px; height: 14px; background: #d2d2d2; }
.nkBtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1.6em; }
.nkBtn { font-family: 'Shentox Medium', sans-serif; font-size: .7857em; letter-spacing: .12em; text-transform: uppercase; color: var(--btnTextColourNormal, #6b6b6b); border: 1px solid #313131; padding: .75em 1.2em; text-decoration: none; }
.nkBtn:hover { color: var(--btnTextColourHover, #9e9e9e); } .nkBtn.pri { color: #d2d2d2; box-shadow: inset 0 -2px 0 #d2d2d2; }
.nkFine { margin-top: 1.4em; font-size: .7857em; color: #555; }
@media (max-width: 900px) { .nkPanel { grid-template-columns: 1fr; gap: 1.6em; padding: 1.6em; } .nkScan { max-width: 22em; margin: 0 auto; } }

/* ---- the events (the Alliance Tournament: KR_EVENTS in app/kills_read.php): the tournament's gold, a filled tag with dark text */
:root { --at: #e0b040; }
span.tg.at { background: var(--at); border-color: var(--at); color: #0d0d0d; font-family: 'Shentox Medium', sans-serif; }
.trow.km .kTags .tg.at, .bigK .tg.at { margin-right: .3em; }
.trow.km .where .tg.at { margin-left: 0; vertical-align: 1px; }
.trow.km.nw.isAt .vic .kTags { display: flex; }                 /* a system's own list: no WHERE column, the tag under the ship */
.bigK .tg.at { margin-left: 0; vertical-align: 1px; }
.kmPills .tg.at { font-size: .7143em; padding: 1px .4em; }
.trow.km.isAt .kI, .bigK.isAt .val { color: var(--themeColor) !important; }   /* a match's loss: not a loss colour */
/* the strip, above the KPIs of Kills and the list of Battles while the period reaches the event */
.atStrip { display: flex; align-items: center; gap: 1em; padding: .75em 1em; margin: 0 0 .625em; border: 1px solid var(--borderColor31); background: #0000004d; }
.atStrip .atCup { width: 2.2em; height: 2.2em; flex: none; color: var(--at); }
.atStrip .atCup svg { width: 100%; height: 100%; fill: currentColor; }
.atStrip .atT { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.atStrip .atT b { font-family: 'Shentox Medium', sans-serif; font-weight: normal; letter-spacing: 2px; color: var(--themeColor); font-size: .9286em; }
.atStrip .atT b i { font-style: normal; color: var(--at); }
.atStrip .atT > span { font-size: .8571em; color: var(--textColor); }
.atStrip .atT em { font-style: normal; color: var(--themeColor); }
.atStrip .atT .tg.at { margin-left: 0; }
.atStrip .atB { margin-left: auto; display: flex; gap: .4em; flex: none; align-items: center; }
.atStrip .seg { display: inline-flex; border: 1px solid var(--borderColor31); }
.atStrip .seg button { background: none; border: 0; border-right: 1px solid var(--borderColor31); color: #6b6b6b; padding: .35em .75em .4em; font-family: 'Shentox Medium', sans-serif; font-size: .7857em; letter-spacing: 1px; cursor: pointer; transition: color .15s linear; }
.atStrip .seg button:last-child { border-right: 0; } .atStrip .seg button:hover { color: #9e9e9e; } .atStrip .seg button.on { color: var(--themeColor); box-shadow: inset 0 -2px 0 #d2d2d2; }
.atStrip .lbl { font-size: .7143em; letter-spacing: 2px; color: #6b6b6b; margin-right: .2em; }
.atStrip .x { background: none; border: 0; color: #6b6b6b; cursor: pointer; font-size: 1em; padding: 0 .2em; } .atStrip .x:hover { color: #d2d2d2; }
@media (max-width: 900px) { .atStrip { flex-wrap: wrap; } .atStrip .atB { margin-left: 0; flex-basis: 100%; } .atStrip .atB .lbl { display: none; } }
/* its quick view */
.fpQv [data-pkq^="AT "], .chipRow [data-pkq^="AT "] { color: var(--at); }
.fpQv [data-pkq^="AT "]::before, .chipRow [data-pkq^="AT "]::before { content: ''; display: inline-block; width: .45em; height: .45em; background: var(--at); margin-right: .45em; vertical-align: .1em; }
/* the killmail: one line under the values */
.atNote { display: flex; align-items: center; gap: .6em; font-size: .8571em; color: var(--textColor); padding: .45em .7em; margin: .5em 0; border: 1px solid #e0b04055; background: #e0b0400d; }
.atNote svg { width: 1.2em; height: 1.2em; fill: var(--at); flex: none; }
.atNote b { font-weight: normal; color: var(--at); font-family: 'Shentox Medium', sans-serif; letter-spacing: 1px; }
.atNote a { color: var(--themeColor); margin-left: auto; white-space: nowrap; }
.atNote a + a { margin-left: .8em; }
@media (max-width: 700px) { .atNote { flex-wrap: wrap; } .atNote a { margin-left: 0; } }
/* the battles: a match */
.trow.bt.isAt .where .who { color: var(--themeColor); }
.trow.bt.isAt .where .who .tg.at { margin-left: 0; margin-right: .2em; }
.trow.bt.isAt .where .s.atMatch { color: var(--at); font-family: 'Shentox Medium', sans-serif; letter-spacing: 1px; font-size: .7857em; }
.pgHead .dim .tg.at { margin-left: 0; }