/* Atlas > Kills — battles: the list of the fights Atlas finds and a fight's report (battles.js). Builds on kills.css.
   Sides are identity only: A blue, B red, C violet, D yellow (all at HSL 100 % / 72 %), kept apart from the loss red, the
   kill green and the value golds. Loss = the one red, destroyed = the one green, as everywhere on the Kills pages. */

/* ---------------------------------------------------------------- shared
   Every rule here is scoped to the battle screens (#blScr, #brScr and their popups): this sheet is loaded on every Kills
   page, and a bare common class (.fresh, .elogo, .drop…) would restyle the kills list or the killmail. */
.stI { width: 1em; height: 1em; flex: none; fill: none; stroke: var(--textColor2); stroke-width: 1.4; stroke-linecap: round; display: block; }
:is(#blScr, #brScr, #mvPop, #trPop) .elogo { display: block; flex: none; background: #d2d2d208; }
:is(#blScr, #brScr, #mvPop, #trPop) .loss, :is(#blScr, #brScr, #mvPop, #trPop) b.loss { color: var(--loss) !important; }
:is(#blScr, #brScr, #mvPop, #trPop) .kill, :is(#blScr, #brScr, #mvPop, #trPop) b.kill { color: var(--kill) !important; }
:is(#blScr, #brScr, #mvPop, #trPop) .neg { color: var(--loss) !important; }
:is(#blScr, #brScr, #mvPop, #trPop) .selBox { background: #00000040; border: 1px solid var(--borderColor31); color: var(--textColor); font: inherit; font-size: .9em; height: 2.2em; padding: 0 .5em; }
:is(#blScr, #brScr, #mvPop, #trPop) .selBox option { background: #0d0d0d; }
.blF .chip { min-width: 3em; }
.chipRow.blF, .chipRow.fdF { padding: 0; gap: .25em; flex-wrap: wrap; }
:is(#blScr, #brScr, #mvPop, #trPop) a.lnk { color: var(--textColor); font-size: .8571em; }
:is(#blScr, #brScr, #mvPop, #trPop) a.lnk:hover { color: var(--themeColor); }
:is(#blScr, #brScr, #mvPop, #trPop) .pgHead .barBtn.on { color: var(--themeColor); }

/* ---------------------------------------------------------------- the list */
.blSearch { flex: 1 1 12em; max-width: 30em; }
.blSortP { margin-left: auto; display: inline-flex; }
.blSortP .fp.off { opacity: .35; pointer-events: none; }   /* Most viewed: sorted by views */
.trow.bt, .thead.bt { grid-template-columns: minmax(14.5em, 1fr) minmax(0, 3.2fr) 3.3em 3.6em 3.4em 4.4em minmax(8em, .65fr) 4.2em; font-size: .9286em; column-gap: 10px; align-items: center; }
.thead.bt > * { font-size: .7692em; }   /* column titles at the brand book's .7143em; the row keeps the rows' size so the em columns line up */
.trow.bt { padding: 0.4375em 0; }
.trow.bt .where .secBadge { align-self: flex-start; margin-top: .1em; }
.thead.bt .num, .trow.bt .num { text-align: right; font-variant-numeric: tabular-nums; }
.tms { display: flex; align-items: center; gap: 0.5em; min-width: 0; }
.tms .vs { font-size: .7857em; color: var(--textColor2); flex-shrink: 0; }
.tmPill { display: flex; align-items: center; min-width: 0; flex: 1 1 0; border-left: 2px solid var(--c); background: #d2d2d206; }
.tmPill.tall { gap: .75em; padding: .3em .5em; }
.tmPill .tmTop { display: flex; align-items: center; gap: 0.4375em; min-width: 7em; flex: 0 1 auto; max-width: 55%; }
.tmPill .tmTop > .cell2 { min-width: 0; flex: 0 1 auto; }
.tmPill .cell2 > .who { display: flex; gap: .3em; max-width: 100%; min-width: 0; white-space: nowrap; }
.tmPill .cell2 > .who > .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tmPill .cell2 > .who > .dim { flex: none; }
.tmPill.mir { border-left: 0; border-right: 2px solid var(--c); text-align: right; flex-direction: row-reverse; }
.tmPill.mir .tmTop { flex-direction: row-reverse; }
.tmPill.mir .cell2 { align-items: flex-end; }
.tmPill .tmTop > .tmLogo { position: relative; flex: none; display: block; width: 1.915em; height: 1.915em; }
.tmPill .tmLogo > .elogo { width: 1.915em !important; height: 1.915em !important; }
.tmWin { position: absolute; left: -.35em; bottom: -.35em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #151515; border: 1px solid #e0b040; display: flex; align-items: center; justify-content: center; }
.tmPill.mir .tmWin { left: auto; right: -.35em; }
.tmWin svg { width: .7em; height: .7em; fill: #e0b040; }
.tmPill .tmSt { display: flex; flex-direction: row; align-items: center; gap: .35em; line-height: 1.2; }
.tmPill.mir .tmSt { flex-direction: row-reverse; }
.tmPill .tmSt > svg.stI { margin: 0 .45em; }
.tmPill .tmSt > b { font-weight: normal; line-height: 1.2; }
.tmPill .btLost b { color: var(--loss); }
.tmPill.win { background: linear-gradient(90deg, #d2d2d214, #d2d2d204 65%); border-left-width: 4px; }
.tmPill.win.mir { background: linear-gradient(270deg, #d2d2d214, #d2d2d204 65%); border-left-width: 0; border-right-width: 4px; }
.tmPill.win .btLost b, .tmPill.win .who { color: var(--themeColor); }
.tmSide { flex: 1 1 0; display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.tmSide .xRow { flex: none; display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: .3em .25em; align-items: center; min-width: 0; overflow: hidden; height: 1.915em; }
.tmPill.mir .xRow { flex-direction: row; }
.xI { position: relative; flex: none; width: 1.915em; height: 1.915em; display: inline-block; }
.xI > img { width: 1.915em !important; height: 1.915em !important; display: block; background: #d2d2d208; }
.xI b { position: absolute; right: 0; bottom: 0; font-weight: normal; font-size: .68em; line-height: 1.15; padding: 0 .2em; background: #111111e6; color: var(--themeColor); font-variant-numeric: tabular-nums; }
.xMore { flex: none; font-size: .78em; color: var(--textColor2); padding: 0 .2em; cursor: help; }
.shipCell { display: flex; align-items: center; gap: .5em; min-width: 0; }
.shipCell img { width: 2em; height: 2em; flex: none; background: #d2d2d208; }
.btEmpty { padding: 1.25em 0; }
.btViews { display: flex; align-items: center; justify-content: flex-end; gap: .35em; }
.btViews .stI { width: 1.05em; height: 1.05em; }
.trow.bt .btName { color: var(--textColor); font-style: italic; }
.brName { color: var(--themeColor); font-weight: normal; }
.brWhere .brRowW { display: inline-flex; align-items: center; gap: .5em; margin-right: .6em; }
.btList.busy { opacity: .55; transition: opacity .15s linear; }
#blPager .pager { margin-top: .3em; flex-shrink: 0; }
.tmPager { flex-shrink: 0; } .tmPager .pager { margin-top: .3em; }   /* the report's lists over 50 rows: the pager under the rows (7 Nov 2026) */
#blScr > .panel > .note { margin: -4px 0 10px; }   /* under the title, above the column heads (7 Nov 2026) */   /* the site's pager (js/pager.js, styles.css .pager): numbered pages under the list */
.blWait { font-size: .85em; color: #ffb648; border-left: 2px solid #ffb64880; padding: .25em .6em; margin-bottom: .5em; }
@media (min-width: 1101px) {
    #blScr { padding-bottom: 1.125em; }
    #blScr > .pgHead, #blScr > .filters { flex-shrink: 0; }
    #blScr > .panel { flex: 1 1 auto; min-height: 12em; display: flex; flex-direction: column; margin: 0; }
    #blScr > .panel > .note { flex-shrink: 0; }
    #blScr .btList { flex: 1 1 auto; min-height: 0; overflow-y: scroll; overscroll-behavior: contain; padding-right: 5px; }
    #blScr .thead.bt { flex-shrink: 0; overflow-y: scroll; overflow-x: hidden; padding-right: 5px; scrollbar-color: transparent transparent; }
    #blScr .thead.bt::-webkit-scrollbar-thumb { background: transparent; }
}
@media (max-width: 87.5em) { .trow.bt, .thead.bt { grid-template-columns: minmax(12em, 1.1fr) minmax(0, 2.6fr) 3.3em 3.6em 3.4em 4.4em minmax(8em, .8fr) 4em; } }
@media (max-width: 68.75em) {
    .trow.bt, .thead.bt { grid-template-columns: minmax(0, 1fr) 5em; }
    .trow.bt > :nth-child(n+3), .thead.bt > :nth-child(n+2) { display: none; }
    .trow.bt > .tms { grid-column: 1 / -1; }
    .trow.bt > .btIsk { display: block; grid-row: 1; grid-column: 2; text-align: right; }
    .thead.bt > .btIsk { display: block; }
    .blSearch { max-width: none; margin-left: 0; }
}
@media (max-width: 47.5em) { .tmSide { display: none; } .tmPill .tmTop { max-width: none; } }

/* ---------------------------------------------------------------- the report */
@media (min-width: 1101px) { #kWrap > .brScr { overflow-y: auto; overscroll-behavior: contain; } }
.brTop { display: flex; align-items: center; gap: 0.875em 1.5em; flex-wrap: wrap; }
.brWhere { display: flex; align-items: center; gap: .4em .8em; flex-wrap: wrap; font-size: 1.2em; }
.brWhere .dim { color: var(--textColor); }
.brWhere .dim + .dim { color: var(--textColor2); }
.sysChip { display: inline-flex; align-items: center; gap: .5em; border: 1px solid var(--borderColor31); padding: .3em .7em .3em .3em; background: #d2d2d208; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; color: var(--themeColor); }
.sysChip .secBadge { width: 2.4em; font-size: .8em; padding: .1em 0; }
.sysChip .dim { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; color: var(--textColor2); }
.bStats { display: flex; gap: 1.375em; flex-wrap: wrap; margin-left: auto; }
.bStats div { display: flex; flex-direction: column; }
.bStats b { font-family: 'Shentox Bold', 'Segoe UI', sans-serif; color: var(--themeColor); font-weight: normal; font-size: 1.5em; font-variant-numeric: tabular-nums; }
.bStats span { font-size: .7143em; letter-spacing: 1.5px; color: var(--textColor2); text-transform: uppercase; }
/* the report's freshness line (not .fresh: the Kills list gives its new rows that class) */
.brFreshL { flex-basis: 100%; font-size: .85em; color: var(--textColor2); display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.brFreshL i { width: .55em; height: .55em; border-radius: 50%; background: var(--kill); box-shadow: 0 0 0 3px #48f0c022; }
.brFreshL.live i { animation: pulse 1.6s ease-in-out infinite; }
.brFreshL b { color: var(--textColor); font-weight: normal; }
.brWarn { flex-basis: 100%; font-size: .85em; color: #ffb648; border-left: 2px solid #ffb64880; padding: .25em .6em; }
.brBar { display: flex; align-items: center; gap: .5em .875em; flex-wrap: wrap; }
.brBar .tabRow { margin: 0; }
.brBar > .dim { font-size: .8571em; }
.brBar .brActs { margin-left: auto; display: flex; gap: .375em; }
/* side check */
#brCheck:empty { display: none; }
.ckBox { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .7em; padding: .55em .8em; border: 1px solid var(--borderColor31); background: #d2d2d206; font-size: .9em; }
.ckBox > b { font-weight: normal; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: .5px; }
.ckBox.ok > b { color: var(--kill); }
.ckBox.warn { border-color: #ffb64866; background: #ffb6480a; }
.ckBox.warn > b { color: #ffb648; }
.ckRow { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .3em .8em; padding: .35em 0 0; border-top: 1px solid #ffffff0d; margin-top: .2em; }
.ckWho { display: inline-flex; align-items: center; gap: .45em; color: var(--themeColor); }
.ckBtns { margin-left: auto; display: flex; gap: .35em; }
.ckBtns .barBtn { font-size: .85em; }
/* the columns: the sides, the timeline */
.brCols { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(16em, 1fr); gap: 0.875em; align-items: start; }
.brCols.wide { grid-template-columns: 1fr; }
#brSides { display: grid; column-gap: 0.875em; row-gap: 0; align-items: start; }
/* each card is 5 rows of the sides' grid (head, numbers, bar, chips, list): a row is as tall as its tallest card, so the
   chips and the lists start at the same height on every side */
#brSides > .tmCard { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
#brSides > .tmCard > .tmList { min-width: 0; }
#brSides > .tmCard > .entChips { align-content: flex-start; }   /* a side with fewer groups keeps its chips at their own size and leaves the rest of the row empty */
.chipMore { background: none; border: 1px dashed var(--borderColor31); color: var(--textColor); font: inherit; font-size: .8571em; padding: .4em .7em; cursor: pointer; transition: color .15s linear, border-color .15s linear; }
.chipMore:hover { color: var(--themeColor); border-color: #6b6b6b; }
.chipMore .dim { font-size: .9em; margin-left: .2em; }
.tmCard { border-top: 2px solid var(--c); min-width: 0; }
.tmHead { display: flex; align-items: center; gap: 0.625em; margin-bottom: 0.625em; }
.tmHead .elogo { width: 2.5em; height: 2.5em; }
.tmHead .who { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: .5px; }
.tmHead .s { color: var(--c); }
.sideL { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 2.4em; line-height: 1; color: var(--c); width: 0.8em; text-align: center; flex-shrink: 0; }
.tmLost { margin-left: auto; font-family: 'Shentox Bold', 'Segoe UI', sans-serif; font-size: 1.5em; color: var(--loss); white-space: nowrap; }
.tmLost .dim { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: .55em; color: var(--textColor2); }
.tmX { margin-left: auto; background: none; border: 1px solid var(--borderColor31); color: var(--textColor2); cursor: pointer; width: 2em; height: 2em; }
.tmX:hover { color: var(--themeColor); }
.tmNums { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2em, 1fr)); gap: 0.375em; margin-bottom: 0.5em; }
.tmNums div { display: flex; flex-direction: column; }
.tmNums b { font-weight: normal; color: var(--themeColor); font-variant-numeric: tabular-nums; }
.tmNums span { font-size: .6429em; letter-spacing: 1.2px; color: var(--textColor2); text-transform: uppercase; line-height: 1.2; }
.effBar { height: 0.375em; background: #ff3f2b99; margin: 0 0 0.75em; position: relative; }
.effBar u { position: absolute; inset: 0 auto 0 0; background: #48f0c0b3; text-decoration: none; }
/* chips: the alliances of a side, to move */
.entChips { display: flex; flex-wrap: wrap; gap: .4em; margin: 0.25em 0 0.625em; }
.entChips.drop { min-height: 2.4em; padding: 0.25em; }
.entChip { display: inline-flex; align-items: center; gap: .45em; border: 1px solid var(--borderColor31); padding: .4em .7em .4em .45em; font-size: .8571em; background: #d2d2d206; line-height: 1.2; }
.entChip .elogo { width: 1.25em; height: 1.25em; }
.entChip .dim { margin-left: .15em; }
.entChip .cn { white-space: nowrap; }
.entChip[draggable] { cursor: grab; user-select: none; }
.entChip.mv { cursor: pointer; }
.entChip.mv:hover { border-color: var(--c, #9e9e9e); }
.entChip.dragging { opacity: .4; }
.entChip.moved { border-style: dashed; border-color: var(--c, #9e9e9e); }
.entChip button { background: none; border: 0; color: var(--textColor2); cursor: pointer; font: inherit; padding: 0 .25em; }
.entChip button:hover { color: var(--themeColor); }
.entChip .undo { color: var(--themeColor); padding: 0 .15em 0 .3em; }
.entChip .dn { border-left: 1px solid var(--borderColor31); font-size: 1.265em; line-height: 1; padding: 0 .05em .1em .42em; margin-left: .15em; align-self: stretch; display: flex; align-items: center; }
.entChip .dn:hover, .entChip.act .dn { color: var(--c, var(--themeColor)); }
.entChip.act { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.mvTag { font-size: .7em; letter-spacing: 1px; text-transform: uppercase; color: var(--c, #ffb648); border: 1px solid currentColor; padding: 0 .35em; margin-left: .4em; opacity: .85; flex-shrink: 0; }
.dropHint { color: var(--textColor2); font-size: .8571em; padding: 0.25em 0.375em; border: 1px dashed var(--borderColor31); }
:is(#blScr, #brScr, #mvPop, #trPop) .drop { transition: background-color .12s linear, outline-color .12s linear; outline: 1px dashed transparent; outline-offset: 0.1875em; }
:is(#blScr, #brScr, #mvPop, #trPop) .drop.over { outline-color: var(--c, #9e9e9e); background-color: #d2d2d20a; }
/* the lists of a side: Overview (ship classes), Ships (one row a type), Pilots (one row a ship flown) */
.plSum { font-size: .7857em; color: var(--textColor2); letter-spacing: .5px; margin: .2em 0 .3em; }
.thead.cp, .thead.sv, .thead.pl { font-size: .8929em; }   /* the rows' size, so the em columns line up; the titles inside at the brand book's .7143em */
.thead.cp > *, .thead.sv > *, .thead.pl > * { font-size: .8em; }
.trow.cp, .thead.cp { grid-template-columns: minmax(0, 1fr) 3.4em 3.4em 5em; padding: 0.1875em 0; }
.trow.cp { font-size: .8929em; }
.trow.cp .num, .trow.sv .num, .trow.pl .num, :is(#blScr, #brScr, #mvPop, #trPop) .thead .num { text-align: right; font-variant-numeric: tabular-nums; }
.trow.sv, .thead.sv { grid-template-columns: 2.5em minmax(0, 1fr) 3.4em 3.4em 5em; gap: .375em; padding: .1875em .25em .1875em 0; align-items: center; }
.trow.sv { font-size: .8929em; }
.trow.sv img { width: 2.5em; height: 2.5em; display: block; background: #d2d2d208; }
.trow.sv .s { font-size: .8em; color: var(--textColor2); }
.trow.pl, .thead.pl { grid-template-columns: 2.5em 2.5em 1.25em minmax(0, 1fr) 5em 2.6em 6.6em; gap: 0.375em; padding: .1875em .25em .1875em 0; align-items: center; }
.trow.pl { font-size: .8929em; }
.trow.pl > a { display: block; width: 2.5em; height: 2.5em; }
.trow.pl img { width: 2.5em; height: 2.5em; display: block; background: #d2d2d208; }
.trow.pl .lgs { width: 1.25em; height: 2.5em; display: flex; flex-direction: column; }
.trow.pl .lgs img, .trow.pl .lgs i { width: 1.25em; height: 1.25em; display: block; }
.trow.pl .cell2 { margin-left: 0.25em; }
.trow.pl .s { font-size: .8em; color: var(--textColor2); }
.trow.pl.died { background: #ff3f2b0f; }
.trow.pl.hl { background: #ffffff14; box-shadow: inset 3px 0 0 #fff, inset 0 0 0 1px #ffffff40; }
.trow.pl .who.nm { display: flex; align-items: baseline; min-width: 0; overflow: visible; }
.trow.pl .nmT { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; cursor: pointer; }
.trow.pl .nmT:hover { color: var(--themeColor); text-decoration: underline dotted; text-underline-offset: 3px; }
.trow.pl .mvTag { margin-left: .5em; align-self: center; }
.xN { font-size: .7em; color: var(--themeColor); border: 1px solid #d2d2d250; padding: 0 .3em; margin-left: .3em; vertical-align: .1em; cursor: help; letter-spacing: .5px; flex-shrink: 0; }
:is(#blScr, #brScr, #mvPop, #trPop) .fb { color: #e0b040; margin-left: 0.25em; font-size: .9em; }
.trow.pl .lostC { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; cursor: help; }
.trow.pl .lostC b { font-weight: normal; }
.trow.pl .lostC .s { font-size: .75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.trow.pl .mob { display: none; }
/* the side picker and the tree of an alliance */
#mvPop { position: absolute; z-index: 50; background: #1b1b1b; border: 1px solid #3a3a3a; box-shadow: 0 .5em 1.5em #000a; padding: .6em .7em; font-size: 15px; min-width: 12em; }
#mvPop .mpT { color: var(--textColor2); font-size: .85em; margin-bottom: .5em; }
#mvPop .mpT b { color: var(--themeColor); font-weight: normal; }
#mvPop .mpB { display: flex; gap: .35em; flex-wrap: wrap; }
#mvPop button { background: #00000040; border: 1px solid var(--c); color: var(--c); font: inherit; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; min-width: 2.4em; height: 2.2em; cursor: pointer; padding: 0 .6em; }
#mvPop button:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 18%, transparent); }
#mvPop button:disabled { opacity: .3; cursor: default; }
#mvPop button.nw { border-style: dashed; font-family: inherit; font-size: .85em; }
#trPop { position: absolute; z-index: 40; width: 27em; background: #1b1b1b; border: 1px solid #3a3a3a; box-shadow: 0 .8em 2em #000c; font-size: 15px; display: flex; flex-direction: column; }
#trPop::before { content: ''; position: absolute; top: -.45em; left: var(--ax, 2em); width: .8em; height: .8em; background: #1b1b1b; border-left: 1px solid #3a3a3a; border-top: 1px solid #3a3a3a; transform: rotate(45deg); }
#trPop.drag { opacity: .35; pointer-events: none; }
.trHd { display: flex; align-items: center; gap: .55em; padding: .65em .75em; border-bottom: 1px solid #2a2a2a; }
.trHd .elogo { width: 1.4em; height: 1.4em; }
.trHd .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; }
.trHd .dim { font-size: .85em; white-space: nowrap; }
.trX { margin-left: auto; background: none; border: 0; color: var(--textColor2); cursor: pointer; font: inherit; padding: 0 .2em; }
.trX:hover { color: var(--themeColor); }
.trQ { margin: .55em .75em; width: auto !important; }
.trList { max-height: 24em; overflow-y: auto; padding-bottom: .3em; overscroll-behavior: contain; }
.tRow { display: flex; align-items: center; gap: .45em; padding: .3em .7em .3em calc(.5em + var(--i) * 1.5em); cursor: grab; }
.tRow:hover { background: #ffffff0a; }
.tRow.dragging { opacity: .4; }
.tRow .elogo { width: 1.4em; height: 1.4em; }
.tRow .grip { color: #555; font-size: .8em; letter-spacing: -1px; width: 1.1em; flex-shrink: 0; overflow: hidden; }
.tRow:hover .grip { color: var(--textColor2); }
.tRow .car { width: .9em; color: var(--textColor2); flex-shrink: 0; cursor: pointer; }
.tRow .car:hover { color: var(--themeColor); }
.tRow.kc .cell2 { cursor: pointer; }
.tRow .cell2 { flex: 1; min-width: 0; }
.tRow .who { display: flex; align-items: baseline; gap: .3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tRow .s { font-size: .8em; color: var(--textColor2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tRow .undo { background: none; border: 0; color: var(--themeColor); cursor: pointer; font: inherit; padding: 0 .2em; }
.trL { display: inline-flex; gap: .25em; flex-shrink: 0; }
.trL button { border: 1px solid var(--c); color: var(--c); background: none; font: inherit; font-size: .95em; width: 2.1em; height: 1.9em; padding: 0; cursor: pointer; }
.trL button:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 18%, transparent); }
.trL button:disabled { opacity: .25; cursor: default; }
.trL button.nw { border-style: dashed; }
.trNone { padding: .8em; color: var(--textColor2); font-size: .9em; }
.trFt { border-top: 1px solid #2a2a2a; padding: .5em .75em; font-size: .8em; color: var(--textColor2); }
#trPop.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 75vh; border-width: 1px 0 0; font-size: 16px; }
#trPop.sheet::before { display: none; }
#trPop.sheet .trList { max-height: none; flex: 1; }
/* the timeline: the kills oldest first, a dot rail, each side's losses so far under every kill; ✕ leaves a kill out */
.runPanel { display: flex; flex-direction: column; gap: .6em; min-width: 0; }
.runList { display: flex; flex-direction: column; max-height: 46em; overflow-y: auto; overscroll-behavior: contain; }
.rItem { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: stretch; }
.rItem[hidden] { display: none; }
.rail { position: relative; display: flex; align-items: center; justify-content: center; }
.rail::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #3a3a3a; }
.rail i { position: relative; border-radius: 50%; background: var(--c); opacity: .85; }
.rail i[data-victim] { cursor: pointer; }
.rail i[data-victim]:hover { opacity: 1; box-shadow: 0 0 0 2px #151515, 0 0 0 3px var(--c); }
.iRow { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; row-gap: .35em; column-gap: .5em; align-items: center; padding: .25em .4em .45em .5em; border-left: 2px solid var(--c); background: #d2d2d205; text-decoration: none; color: inherit; font-size: .8929em; margin-bottom: 2px; }
.iRow:hover { background: #d2d2d20c; }
.iRow > a { color: inherit; text-decoration: none; min-width: 0; }
.iRow img { width: 2em; height: 2em; background: #d2d2d208; }
.iRow .cell2.r { text-align: right; }
.runLine { grid-column: 1 / -1; display: flex; align-items: center; gap: .6em; }
.runBars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.runBars u { display: block; height: .58em; text-decoration: none; background: color-mix(in srgb, var(--b) 55%, transparent); border-right: 2px solid var(--b); box-sizing: border-box; }
.quiet { margin: .2em 0 .2em 1.6em; font-size: .7857em; color: var(--textColor2); border-left: 1px dashed #4a4a4a; padding: .3em .6em; letter-spacing: .5px; }
.exB { background: none; border: 0; color: var(--textColor2); cursor: pointer; font: inherit; font-size: .85em; line-height: 1; opacity: 0; padding: 0; width: 1em; flex-shrink: 0; }
.rItem:hover .exB, .rItem.ex .exB { opacity: 1; }
.exB:hover { color: var(--themeColor); }
.rItem.ex .iRow { opacity: .4; border-left-style: dashed; }
.rItem.ex .iRow .val { text-decoration: line-through; }
.rItem.ex .rail i { background: none; box-shadow: inset 0 0 0 1px var(--c); }
@media (hover: none) { .exB { opacity: .7; } }
@media (max-width: 68.75em) { .brCols { grid-template-columns: 1fr; } .runList { max-height: none; } }
@media (max-width: 60em) { #brSides { grid-template-columns: 1fr !important; } #brSides > .tmCard { margin-bottom: .875em; } }
@media (max-width: 47.5em) {
    .trow.pl, .thead.pl { grid-template-columns: 2.5em 2.5em 1.25em minmax(0, 1fr) 5.6em; }
    .trow.pl > :nth-child(5), .trow.pl > :nth-child(6), .thead.pl > :nth-child(5), .thead.pl > :nth-child(6) { display: none; }
    .trow.pl .mob { display: block; }
    .trow.sv, .thead.sv { grid-template-columns: 2.5em minmax(0, 1fr) 2.6em 2.6em 4.6em; }
    .ckBtns { margin-left: 0; }
    .bStats { margin-left: 0; }
    #mvPop { font-size: 16px; }
}

/* ---------------------------------------------------------------- create a report (#crScr) */
#crScr .crCols { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(18em, 1fr); gap: 0.875em; align-items: start; }
#crScr .panel { display: flex; flex-direction: column; gap: .6em; }
#crScr .panelTitle { margin: 0; }
#crScr .crH { margin-top: .9em; }
#crScr .crH .dim { letter-spacing: 0; margin-left: .4em; }
#crScr .searchBox input { font-size: 1em; }
.crRow { display: flex; align-items: center; flex-wrap: wrap; gap: .45em .6em; padding: .45em 0; border-bottom: 1px solid #ffffff0a; }
.crRow .sysChip { min-width: 11em; font-family: inherit; color: var(--themeColor); padding: .25em .6em .25em .3em; }
.crRow .sysChip .secBadge { width: 2.2em; font-size: .8em; }
.crRow .arrow { color: var(--textColor2); }
.crRow .crDur { font-size: .85em; min-width: 4.5em; }
.crCnt { font-size: .85em; color: var(--themeColor); min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
.crCnt.none { color: var(--textColor2); }
.crX { background: none; border: 0; color: var(--textColor2); cursor: pointer; font: inherit; margin-left: auto; }
.crX:hover { color: var(--themeColor); }
.crNone { padding: .4em 0; }
.crMsg { font-size: .9em; color: #ffb648; border-left: 2px solid #ffb64880; padding: .25em .6em; }
.crHit { display: flex; align-items: center; gap: .6em; padding: .35em 0; border-bottom: 1px solid #ffffff0a; cursor: pointer; font-size: .92em; }
.crHit .secBadge { width: 2.2em; }
.crHit .s { font-size: .85em; color: var(--textColor2); }
.crBtns { display: flex; align-items: center; gap: .6em; margin-top: .3em; }
.crBtns .dim { font-size: .8571em; }
.crAdd { position: relative; max-width: 26em; }
.crQuick { padding: 0; gap: .25em; flex-wrap: wrap; align-items: center; }
.crQuick .lbl { font-size: .7143em; letter-spacing: 1.5px; color: var(--textColor2); text-transform: uppercase; margin-right: .5em; }
#crPv.busy { opacity: .55; }
.crStats { margin: 0; gap: 1em 1.4em; }
.crStats b { font-size: 1.3em !important; }
.nameIn { display: flex; flex-direction: column; gap: .3em; font-size: .9em; color: var(--textColor); margin-top: .4em; }
.nameIn input { background: #00000040; border: 1px solid var(--borderColor31); color: var(--textColor); font: inherit; padding: .45em .6em; }
.nameIn input:focus { outline: 0; border-color: #6b6b6b; }
#crScr input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 1em; height: 1em; margin: 0; border: 1px solid #6b6b6b; background: #00000040; flex-shrink: 0; cursor: pointer; position: relative; }
#crScr input[type=checkbox]:hover { border-color: var(--themeColor); }
#crScr input[type=checkbox]:checked { background: var(--themeColor); border-color: var(--themeColor); }
#crScr input[type=checkbox]:checked::after { content: ''; position: absolute; left: .3em; top: .08em; width: .25em; height: .55em; border: solid #151515; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* date and time fields: one number per part; a frame on hover announces a list (brand book) */
.dtF { display: inline-flex; gap: .3em; }
.pk { display: inline-flex; align-items: center; height: 2.3em; padding: 0 .25em 0 .45em; border: 1px solid var(--borderColor31); background: #00000040; color: var(--themeColor); font-variant-numeric: tabular-nums; letter-spacing: .5px; user-select: none; }
.pk:hover, .pk.open { border-color: var(--themeColor); }
.pk.tp { cursor: pointer; }
.pk .seg { padding: .1em .2em; outline: 0; cursor: ns-resize; min-width: 1.3em; text-align: center; }
.pk .seg:hover { background: #ffffff10; }
.pk .seg:focus { background: #ffffff1f; box-shadow: inset 0 -2px 0 var(--themeColor); }
.pk.dp .seg[data-p="M"] { min-width: 2.2em; }
.pk i { font-style: normal; color: var(--textColor2); }
.pkI { background: none; border: 0; padding: 0 .2em; margin-left: .25em; cursor: pointer; display: flex; color: var(--textColor2); }
.pkI svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pkI:hover, .pk.open .pkI { color: var(--themeColor); }
#pkPop { position: absolute; z-index: 45; background: #0d0d0df7; border: 1px solid var(--borderColor31); box-shadow: 0 .8em 2em #000c; font-size: 16px; }
#pkPop[hidden] { display: none; }
.pkCols { display: flex; gap: .3em; padding: .3em; }
.pkCol { width: 3.6em; height: 13.2em; overflow-y: auto; position: relative; overscroll-behavior: contain; }
.pkCol button, .calG button, .calHd button, .calFt button { background: none; border: 0; color: var(--textColor); font: inherit; cursor: pointer; }
.pkCol button { display: block; width: 100%; height: 2.2em; font-variant-numeric: tabular-nums; }
.pkCol button:hover, .calG button:hover:not(:disabled), .calHd button:hover, .calFt button:hover { background: #ffffff10; color: var(--themeColor); }
.pkCol button.on { color: var(--themeColor); background: #ffffff17; box-shadow: inset 2px 0 0 var(--themeColor); }
.cal { padding: .55em .6em .45em; width: 17em; }
.calHd { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4em; }
.calHd b { font-weight: normal; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; color: var(--themeColor); letter-spacing: .5px; }
.calHd button { width: 1.8em; height: 1.8em; font-size: 1.2em; color: var(--textColor2); }
.calG { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calG .dow { font-size: .7em; letter-spacing: 1px; color: var(--textColor2); text-align: center; padding: .2em 0 .35em; text-transform: uppercase; }
.calG button { height: 2.1em; font-variant-numeric: tabular-nums; }
.calG button.on { color: var(--themeColor); background: #ffffff17; box-shadow: inset 0 -2px 0 var(--themeColor); }
.calG button.today:not(.on) { color: var(--themeColor); box-shadow: inset 0 0 0 1px #ffffff30; }
.calG button:disabled { color: #4a4a4a; cursor: default; }
.calFt { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ffffff10; margin-top: .4em; padding-top: .35em; font-size: .85em; }
.calFt button { padding: .25em .5em; color: var(--textColor2); }
@media (max-width: 68.75em) { #crScr .crCols { grid-template-columns: 1fr; } }
@media (max-width: 47.5em) { .crRow .sysChip { min-width: 0; flex-basis: 100%; } #pkPop { font-size: 16px; } }