/* LogKing's own styling on top of Bootstrap. Kept small on purpose: the report tables
   are the interface, so almost everything here exists to make a long table scannable. */

body {
  --lk-bar: rgba(255, 255, 255, .07);
}

/* The share bar sits behind the row's text rather than in a column of its own, so a
   table stays readable at a glance without spending width on a chart.

   A gradient on the row, not a positioned pseudo-element: ::before on a <tr> gets
   wrapped in an anonymous cell by table layout, so it paints inside the first column
   instead of across the row. */
/* Bootstrap paints an opaque background on every cell, which would hide a background
   set on the row. */
.lk-table > tbody > tr > td {
  background-color: transparent;
}
.lk-bar {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--lk-color, #9ba3af) 16%, transparent) var(--lk-share, 0%),
    transparent var(--lk-share, 0%)
  );
  background-repeat: no-repeat;
}

/* Damage tables are read by rank and by number, both of which want fixed columns. */
.lk-table td, .lk-table th {
  vertical-align: middle;
  white-space: nowrap;
}
.lk-table .lk-name {
  white-space: normal;
}
/* Doubled up on purpose: Bootstrap's own `.table > :not(caption) > * > *` is specific
   enough to win against a bare class, which quietly left the numeric headers aligned
   left over right-aligned figures. */
.lk-table td.lk-num, .lk-table th.lk-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lk-table td.lk-rank, .lk-table th.lk-rank {
  width: 3rem;
  text-align: right;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

/* A whole player row is the click target for their breakdown, so it has to look like
   one. */
.lk-clickable {
  cursor: pointer;
}
.lk-clickable:hover {
  background: rgba(255, 255, 255, .04);
}

/* The expand caret on a spell row, rotated when its components are showing. */
.lk-caret {
  display: inline-block;
  width: 1rem;
  transition: transform .12s ease;
  color: var(--bs-secondary-color);
}
.lk-caret.lk-open {
  transform: rotate(90deg);
}

/* Component rows sit under their spell and should read as subordinate to it. Indented
   past the icon column so they line up with the spell name they belong to. */
.lk-component td:first-child {
  padding-left: calc(var(--lk-icon, 22px) + 1.5rem);
  color: var(--bs-secondary-color);
}

/* Wowhead's script injects an icon into each spell link; without it the link is plain
   text, which is why nothing here depends on the icon existing. */
.lk-spell a {
  text-decoration: none;
}

/* Spell row icons.
   ----------------
   One icon per row, and its size is set here rather than by Wowhead.

   The script injects its own markup into a link — historically
   <span class="iconsmall"><ins style="background-image:url(…)"></ins><del></del></span>,
   and an <img> in newer builds. Both shapes are handled, because which one arrives
   depends on a third-party script that can change under us. Sizing here also means the
   icon does not depend on the script's own size classes matching what the table wants.

   --lk-icon is the single place to change it. */
.lk-icon-table {
  --lk-icon: 22px;
}

/* The row is sized by the icon, with clearance so the icon sits inside it.
   A row is as tall as its tallest cell, so this reaches every cell and not just the one
   holding the icon — otherwise the number columns keep their own padding and the row
   stays taller than the thing it is sized around. --lk-icon is declared on the table
   for the same reason: the sibling cells need to see it too.

   The padding is load-bearing. Sized to exactly the icon's height there is nowhere for
   the icon to go, and an inline element aligned to the middle of a line box can extend
   past it — so the icons crossed the separator lines above and below. The clearance
   both fixes that and gives the proportion a log table is read at.

   Scoped to the tables that carry icons, so the damage and rankings tables keep
   Bootstrap's ordinary row spacing. */
/* The row is exactly the icon's height — no vertical padding at all.
   A row is as tall as its tallest cell, so this reaches every cell in the row and not
   just the one holding the icon; the number columns would otherwise keep Bootstrap's
   padding and hold the row open. --lk-icon is on the table for the same reason: the
   sibling cells have to see it.

   This only works because the icon is in a block-level cell of its own. While the icon
   was an inline element, sitting on a text baseline, it always overflowed a line box
   its own height — inline boxes are positioned relative to the baseline, not the box —
   which is what kept pushing it across the separator lines. Nothing in the row is
   inline-aligned any more, so its height is simply the icon's.

   line-height matches for the same reason: the name has to occupy the same 22px the
   icon does, or the text would be the tallest thing here and set the row height. */
.lk-icon-table > tbody > tr > td {
  height: var(--lk-icon);
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--lk-icon);
  vertical-align: middle;
}

.lk-spell {
  vertical-align: middle;
  line-height: var(--lk-icon);
}

/* Icon and name as sub-columns of the one Spell cell.
   ---------------------------------------------------
   A nested borderless table, which is how WarcraftLogs does it: the icon column sizes
   to the icon, the name column takes all remaining width, and neither has a header or
   a rule between them. Sub-columns of one cell rather than real columns of the outer
   table, because real ones would bring a header cell and a border wall along with them.

   Everything Bootstrap applies to a table cell has to be undone here — it styles cells
   by descendant selector, so the nested table would otherwise inherit the outer table's
   padding, borders and striping shadow. */
.lk-spell-inner {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}
.lk-spell-inner > tbody > tr > td {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  vertical-align: middle;
  height: var(--lk-icon);
}

/* Sized to the icon so the names line up down the table however wide the column is. */
.lk-spell-inner > tbody > tr > td.lk-spell-icon {
  width: var(--lk-icon);
  line-height: 0;
  padding-right: .5rem;
}
.lk-spell-icon a {
  display: block;
  line-height: 0;
  text-decoration: none;
}

/* Takes the rest of the width, which is what pins the icon column to the left. Its line
   box is the icon's height so the name cannot be the tallest thing in the row. */
.lk-spell-inner > tbody > tr > td.lk-spell-name {
  width: 100%;
  line-height: var(--lk-icon);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Floated so it sits at the right edge of the name, as WarcraftLogs' disclosure does —
   it reads as "this row opens" rather than as part of the spell's name. */
.lk-spell .lk-caret {
  float: right;
  width: 1rem;
  text-align: center;
}

/* How a spell landed, on hover over its amount.
   ---------------------------------------------
   CSS-only: the panel is already in the row, so there is no request and no script, and
   it cannot flicker the way a fetched tooltip would.

   The cell keeps position: relative so the panel anchors to it, and the panel is taken
   out of flow so a table cell cannot stretch to fit it. */
.lk-hits {
  position: relative;
}
/* The panel has to be able to leave the table.
   -------------------------------------------
   It is absolutely positioned, so any ancestor whose overflow is not visible clips it,
   and Bootstrap's .table-responsive sets overflow-x: auto. A box cannot scroll on one
   axis and overflow on the other — the computed overflow-y becomes auto with it — so
   the panel was being cut off vertically. On a long breakdown that went unnoticed,
   because there were rows above to open into; on a table of one or two spells there was
   nothing above and the panel was sliced away.

   The cost is that this one table no longer scrolls sideways on a narrow screen. It is
   five columns of short numbers, so it fits where the report tables that keep their
   wrapper would not. */
#breakdown .table-responsive {
  overflow: visible;
}

/* Opens above the row, not below it. Below, the panel covers the rows you were about
   to compare against and sits under the cursor's own path down the column. */
.lk-hits-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 20;
  /* Wide enough for six columns of numbers and no wider — the table is nowrap, so it
     takes what it needs and this is only a floor. */
  min-width: 22rem;
  padding: .15rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
  /* Numbers here are read against each other, not clicked. */
  cursor: default;
}
.lk-hits:hover .lk-hits-panel,
.lk-hits:focus-within .lk-hits-panel {
  display: block;
}

/* The first row has nothing above it to open into, so that one drops instead. */
.lk-icon-table > tbody > tr:first-child .lk-hits-panel {
  bottom: auto;
  top: calc(100% + 4px);
}

/* A one- or two-line panel does not need the six-column minimum. */
.lk-hits-panel-slim {
  min-width: 0;
  white-space: nowrap;
}

/* The raid's own line, set apart from the players above it. */
.lk-total > td {
  border-top: 2px solid var(--bs-border-color);
  background: rgba(255, 255, 255, .02);
}

.lk-hits-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
}
.lk-hits-table th,
.lk-hits-table td {
  padding: .1rem .4rem;
  border: 0;
  color: var(--bs-body-color);
}
.lk-hits-table th {
  color: var(--bs-secondary-color);
  font-weight: 600;
  border-bottom: 1px solid var(--bs-border-color);
}

/* The span+ins shape the script injects, re-fitted to our row.
   ------------------------------------------------------------
   Wowhead's universal.css builds these for a framed icon rather than a bare one:

       .iconmedium ins { position: absolute; left: 4px; top: 4px; width: 36px; height: 36px }
       .iconmedium del { width: 44px; height: 44px }   <- the border image

   The <ins> carries the artwork and the <del> is the frame drawn around it, so the
   image is inset by the frame's thickness. Resizing the span and the ins is not enough:
   the offset is absolute positioning, so the image kept its 4px nudge and hung below
   and to the right of its box. That was the bleed.

   Pinning the ins to 0,0 and dropping the frame gives a bare icon that fills its box
   exactly. overflow is belt-and-braces — whatever that stylesheet does next, nothing
   can escape the square. */
.lk-spell .icontiny,
.lk-spell .iconsmall,
.lk-spell .iconmedium,
.lk-spell .iconlarge {
  display: block;
  position: relative;
  width: var(--lk-icon);
  height: var(--lk-icon);
  overflow: hidden;
  border-radius: 3px;
}
.lk-spell .icontiny ins,
.lk-spell .iconsmall ins,
.lk-spell .iconmedium ins,
.lk-spell .iconlarge ins {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--lk-icon);
  height: var(--lk-icon);
  background-size: var(--lk-icon) var(--lk-icon);
  border-radius: 0;
}
.lk-spell .icontiny del,
.lk-spell .iconsmall del,
.lk-spell .iconmedium del,
.lk-spell .iconlarge del {
  display: none;
}

/* The "tiny" shape, which is what the script falls back to when no iconSize is set:
   no icon element at all, just a background-image and this class on the link that also
   holds the spell name. layout.html asks for a real size so this should not be hit —
   it is here so the icons stay the right size if that option is ever ignored, rather
   than silently reverting to something much smaller than the melee icon beside them. */
.lk-spell a.icontinyl {
  display: inline-block;
  min-height: var(--lk-icon);
  line-height: var(--lk-icon);
  /* Their rule for this class is !important, so matching it is the only way to win. */
  padding-left: calc(var(--lk-icon) + .4rem) !important;
  background-size: var(--lk-icon) var(--lk-icon);
  background-repeat: no-repeat;
  background-position: left center;
}

/* The <img> shape, and melee's server-rendered icon. Both sit in the icon sub-column,
   which already sizes and centres them, so this only has to fill it. No margin: the
   grid's gap is what separates the icon from the name. */
.lk-spell-icon img,
.lk-spell-icon a img {
  width: var(--lk-icon);
  height: var(--lk-icon);
  border-radius: 3px;
  display: block;
}

/* Parse percentiles, in the WarcraftLogs colours.
   -----------------------------------------------
   Matching that palette exactly is the point: a raider who knows what a purple parse
   means should not have to learn a second scale to read this site. The number is shown
   as well as the colour, because colour alone is not readable to everyone and the
   bands are narrow at the top — 95 and 99 are different tiers. */
.lk-parse {
  display: inline-block;
  min-width: 2.25rem;
  padding: 0 .3rem;
  border-radius: 3px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.lk-parse-grey   { color: #9d9d9d; }
.lk-parse-green  { color: #1eff00; }
.lk-parse-blue   { color: #0070ff; }
.lk-parse-purple { color: #a335ee; }
.lk-parse-orange { color: #ff8000; }
.lk-parse-pink   { color: #e268a8; }
/* Gold is the one rank rather than a band, so it gets a fill instead of just a colour —
   at a glance it should not be mistaken for another orange. */
.lk-parse-gold {
  color: #1a1a1a;
  background: #e5cc80;
}

.lk-spec-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: .35rem;
}
/* The spec cell is small text; keep the icon from stretching the row height. */
.lk-spec {
  white-space: nowrap;
}
.lk-spell a:hover {
  text-decoration: underline;
}

.lk-paste {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  min-height: 12rem;
}

/* The SavedVariables path is long, deep, and the one thing a player cannot discover
   from inside the game, so it has to stay readable rather than overflow the column.
   Breaking on the separators keeps each folder name intact across a wrap. */
.lk-path code {
  word-break: break-all;
  line-break: anywhere;
}
.lk-path var {
  font-style: normal;
  opacity: .7;
}

/* Death log rows. Damage and healing share one table in time order, so the two have to
   be separable at a glance without reading the numbers -- a tinted left edge does that
   without colouring whole rows, which would fight the table's own striping. */
.lk-death-hit td:first-child {
  box-shadow: inset 3px 0 0 var(--bs-danger);
}
.lk-death-heal td:first-child {
  box-shadow: inset 3px 0 0 var(--bs-success);
}

/* The crit marker beside an ability in a death log. Small and muted: it qualifies the
   number in the next column rather than competing with it. */
.lk-crit {
  margin-left: .35rem;
  padding: 0 .3rem;
  border-radius: .2rem;
  background: rgba(var(--bs-warning-rgb), .18);
  color: var(--bs-warning-text-emphasis, var(--bs-warning));
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}