/* The game's statistics panel, as it appears frozen inside a forum post.

   A player sharing his statistics is sharing what he sees, so the forum draws the section with the
   game's own stylesheet rather than with a lookalike written for the forum. The first version did
   the latter and drifted from the panel the day it was written: fewer columns, no tile rows, none
   of the coloured readings.

   Its own Vite entry, pushed only from the two forum pages that can show a snapshot, so the login
   and register screens do not carry 50 KB of statistics CSS they will never use.

   The module is written against the in-game skin, which sets a handful of base rules the forum has
   no equivalent of. Those are restated below, scoped to .stx_frozen so nothing here reaches the
   rest of the forum. */

/* The rebuilt statistics panels: the modal opened from the resource settings page, and the
print/PDF view, which share the same partials.

Prefixed stx_ throughout rather than reusing the older resourcestats.css classes: the two panels
coexist during the transition, and sharing class names would make every tweak to one silently
change the other. Colours are taken from the in-game palette already in use elsewhere
(.undermark green / .overmark red / the resource bar colours) so this reads as part of the game
rather than as a bolted-on admin screen. */

/* The statistics no longer have a standalone page. Everything below styles the modal opened from
the resource settings page, plus the print/PDF view, which share the same partials. The page frame
rules that used to live here (headerRS / mainRS / footerRS pinned to a 667px sprite) went with the
page: the game's content column is a fixed 670px and eight columns of an event log never fitted
in it, while the modal has 1400. */

/* ---- header ---- */

.stx_intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.stx_intro p {
    margin: 0;
    color: #9099a5;
    font-size: 11px;
}

.stx_actions {
    display: flex;
    gap: 6px;
}

/* `display: flex` above wins over the `hidden` attribute's user-agent `display: none`, which is
   why the template copy of the export links on the resource settings page stayed visible after
   being marked hidden. */
.stx_actions[hidden] {
    display: none;
}

/* The export links carry the game's own .btn_blue in their markup, so their appearance comes from
   base1.css and matches every other button in the game. The class kept here is only the hook the
   dialog clones them by; it contributes nothing to how they look. */
.stx_action {
    text-decoration: none;
}

/* ---- tab strip ---- */

.stx_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 12px;
    padding: 0 0 6px;
    list-style: none;
    border-bottom: 1px solid #333a42;
}

/* The tabs use the game's own rounded bar (the one behind the IPI menu heading), stretched to
   whatever width each label needs. It is 154x27 with rounded ends, so it is scaled with
   background-size rather than tiled: tiling would repeat the rounded cap in the middle. */
.stx_tab_btn a {
    display: block;
    padding: 0 16px;
    height: 27px;
    font-size: 12px;
    line-height: 27px;
    color: #9099a5;
    text-decoration: none;
    background: url("/img/icons/41e941f1dba8d329d19555deab2aaf.gif") no-repeat center;
    background-size: 100% 100%;
    white-space: nowrap;
}

.stx_tab_btn:hover a {
    color: #cfd6de;
}

.stx_tab_btn.active a {
    color: #fff;
    /* The active tab is lifted out of the row by brightness rather than by a different graphic,
       since the game ships only the one bar. */
    filter: brightness(1.45);
}

/* ---- headline tiles ---- */

.stx_tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.stx_tile {
    padding: 10px 12px;
    background: linear-gradient(to bottom, #23282e, #171a1e);
    border: 1px solid #2f353c;
    border-radius: 3px;
    text-align: center;
}

.stx_tile_value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #dfe5ec;
    line-height: 1.2;
    word-break: break-word;
}

.stx_tile_label {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7e8894;
}

.stx_tile_note {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #656e79;
}

.stx_tile_good .stx_tile_value { color: #8fd14f; }
.stx_tile_bad  .stx_tile_value { color: #e06666; }
.stx_tile_dm   .stx_tile_value { color: #c48fff; }

.stx_alltime_note {
    margin: 0 0 14px;
    font-size: 10px;
    color: #656e79;
    font-style: italic;
}

/* ---- two-column body ---- */

.stx_cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}

/* Section headings wear the same sprite band the game uses for every .contentbox header, so a
   section inside this panel reads as a section of the game rather than of a report pasted into
   it. The sprite is 42x180 and tiles horizontally, which is what lets one band serve a heading of
   any width. */
/* Title on the left, subtitle on the right, with 40px of clearance at each end.

   The game centres its own headers, which is why it never had to think about the 35px end caps -
   but its headers carry one piece of text and these carry two. Centring them merged the title and
   the subtitle into a single clump in the middle, so they stay at opposite ends and the padding
   keeps them off the caps instead. */
.stx_section_head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 8px;
    padding: 0 40px;
    height: 30px;
    background: url("/img/icons/191d6af9367f608bbee2743866c489.png") repeat-x 0 -1px;
}

/* The rounded end caps, from the two cap bands of the same sprite at the same offsets the game's
   own .contentbox headers use (0 -33px on the left, 100% -66px on the right). Drawn as pseudo
   elements rather than as .c-left/.c-right spans because these headings are generated in a dozen
   partials and none of them should have to carry two empty elements to be shaped correctly. */
.stx_section_head::before,
.stx_section_head::after {
    content: "";
    position: absolute;
    top: 0;
    width: 35px;
    height: 30px;
    background-image: url("/img/icons/191d6af9367f608bbee2743866c489.png");
    background-repeat: no-repeat;
    pointer-events: none;
}

.stx_section_head::before {
    left: -2px;
    background-position: 0 -33px;
}

.stx_section_head::after {
    right: -2px;
    background-position: 100% -66px;
}

.stx_section_head h3 {
    margin: 0;
    font-size: 12px;
    line-height: 30px;
    color: #6f9fc8;
    font-weight: bold;
    white-space: nowrap;
}

/* The share control sits at the right end of the heading it belongs to. Quiet by default: it is
   an offer, not the point of the section. */
.stx_share_form {
    margin: 0;
    flex: 0 0 auto;
}

.stx_share_btn {
    padding: 1px 8px;
    font-size: 10px;
    line-height: 16px;
    color: #7e8894;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #333a42;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.stx_share_btn:hover {
    color: #dfe5ec;
    border-color: #4a5561;
}

/* The subtitle shares the band, so it is truncated rather than allowed to wrap the row open. */
.stx_section_head > .stx_muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stx_col > .stx_section_head:first-child {
    margin-top: 0;
}

/* ---- simple key/value tables ---- */

.stx_list {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.stx_list th {
    padding: 4px 6px;
    text-align: left;
    color: #7e8894;
    font-size: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #2b3138;
}

.stx_list td {
    padding: 4px 6px;
    color: #b9c1ca;
    border-bottom: 1px solid #22262b;
}

.stx_list tr.alt td {
    background: rgba(255, 255, 255, 0.02);
}

.stx_list td.label {
    color: #8a939e;
}

/* ---- horizontal bars ---- */

.stx_bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stx_bar_row {
    display: grid;
    grid-template-columns: 130px 1fr 80px 46px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.stx_bar_label {
    color: #8a939e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stx_bar_track {
    display: block;
    height: 10px;
    background: #1b1f24;
    border: 1px solid #2b3138;
    border-radius: 2px;
    overflow: hidden;
}

.stx_bar_fill {
    display: block;
    height: 100%;
}

.stx_bar_good      { background: linear-gradient(to bottom, #8fd14f, #5f9130); }
.stx_bar_bad       { background: linear-gradient(to bottom, #e06666, #9c3f3f); }
.stx_bar_neutral   { background: linear-gradient(to bottom, #6ba4d8, #3c6791); }
.stx_bar_metal     { background: linear-gradient(to bottom, #c9c9c9, #8a8a8a); }
.stx_bar_crystal   { background: linear-gradient(to bottom, #8ec5ff, #4a7fb5); }
.stx_bar_deuterium { background: linear-gradient(to bottom, #7fe3d0, #3f8b7e); }

.stx_bar_value { color: #cfd6de; text-align: right; }
.stx_bar_pct   { color: #656e79; text-align: right; font-size: 10px; }

/* ---- trend chart ---- */

.stx_trend {
    margin: 14px 0;
    padding: 10px 12px;
    background: #191d21;
    border: 1px solid #2b3138;
    border-radius: 3px;
}

.stx_trend_head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.stx_trend_title { font-size: 11px; color: #cfd6de; }
.stx_trend_total { font-size: 10px; color: #656e79; }

.stx_trend_svg {
    display: block;
    width: 100%;
    height: 70px;
}

.stx_trend_bar_up   { fill: #6ba4d8; }
.stx_trend_bar_down { fill: #b06060; }
.stx_trend_axis     { stroke: #2b3138; stroke-width: 0.4; }

.stx_trend_axis_labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #565f69;
    margin-top: 2px;
}

.stx_trend_empty { margin: 6px 0 0; }

/* ---- hour histogram ---- */

.stx_hours {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 70px;
    padding: 4px 0 12px;
    border-bottom: 1px solid #2b3138;
}

.stx_hour {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.stx_hour_bar {
    display: block;
    width: 100%;
    background: linear-gradient(to top, #3c6791, #6ba4d8);
    border-radius: 1px 1px 0 0;
}

.stx_hour_label {
    position: absolute;
    bottom: -12px;
    left: 0;
    font-size: 9px;
    color: #565f69;
}

.stx_hours_note {
    margin: 4px 0 0;
    font-size: 10px;
}

/* The hour somebody else picked most often to attack this account. Marked rather than left to the
   reader to spot: it is the single actionable fact in the histogram. */
.stx_hour_peak .stx_hour_bar { background: linear-gradient(to top, #8c3a2f, #d16a54); }
.stx_hour_peak .stx_hour_label { color: #d16a54; }

/* ---- opponents, split by who started it ----

   Two groups of columns under one opponent: the raids he flew at them, and the ones they flew at
   him. The header spans them so the eye reads across a row rather than down a merged total, which
   is what the single-column version of this table forced. */

.stx_group_head {
    text-align: center !important;
    border-bottom: 1px solid #2b3138;
}

.stx_opponents th { white-space: nowrap; }

/* What he destroyed of theirs, under the name. Sits with the opponent rather than in a column of
   its own: it is the answer to "was it worth it", not a figure anyone sorts by. */
.stx_opponent_kill {
    display: block;
    font-size: 10px;
}

/* ---- best-result strip ---- */

.stx_best {
    margin: 10px 0;
    padding: 10px 12px;
    font-size: 11px;
    background: linear-gradient(to bottom, #23301f, #1a2318);
    border: 1px solid #3d5233;
    border-radius: 3px;
}

.stx_best_head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.stx_best_label {
    font-weight: bold;
    color: #8fd14f;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
}

.stx_best_when, .stx_best_from { color: #8a939e; }

/* The total is broken into its parts. As a single number it was the sum of metal, crystal,
deuterium and ship value, and nothing on screen said so. */
.stx_best_breakdown {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.stx_best_part {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #cfd6de;
}

.stx_best_part_label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #7e8894;
}

.stx_best_total {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
}

/* ---- automatic insights ---- */

.stx_insights {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.stx_insight {
    padding: 7px 10px;
    font-size: 11px;
    border-left: 3px solid #4a5561;
    background: #191d21;
    color: #cfd6de;
    border-radius: 0 3px 3px 0;
}

.stx_insight_good { border-left-color: #5f9130; }
.stx_insight_bad  { border-left-color: #9c3f3f; }

/* ---- server comparison strip ---- */

.stx_compare {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 12px;
    font-size: 11px;
    background: #191d21;
    border: 1px solid #2b3138;
    border-radius: 3px;
}

.stx_compare_label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7e8894;
}

.stx_compare_item { color: #9099a5; }

/* ---- booster comparison ---- */

.stx_boosters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 6px;
}

.stx_booster {
    padding: 12px;
    background: linear-gradient(to bottom, #23282e, #171a1e);
    border: 1px solid #2f353c;
    border-radius: 3px;
}

.stx_booster_name {
    font-size: 12px;
    color: #cfd6de;
    font-weight: bold;
    margin-bottom: 8px;
}

.stx_booster_pending { margin: 0; line-height: 1.5; }

.stx_booster_compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.stx_booster_side { text-align: center; }

.stx_booster_label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #7e8894;
}

.stx_booster_value {
    display: block;
    font-size: 17px;
    font-weight: bold;
    color: #dfe5ec;
    line-height: 1.3;
}

.stx_booster_count {
    display: block;
    font-size: 10px;
    color: #656e79;
}

/* The character-class line above the plunder breakdown. Reads as a fact about the account, not as
   a callout, so it sits between the tiles and the tables rather than inside either. */
.stx_class_note {
    margin: 0 0 12px;
    padding: 6px 10px;
    font-size: 11px;
    color: #b9c1ca;
    background: #191d21;
    border-left: 2px solid #d18f4f;
    border-radius: 0 3px 3px 0;
}

.stx_booster_delta {
    font-size: 15px;
    font-weight: bold;
    padding: 0 6px;
}

.stx_booster_verdict {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid #22262b;
    font-size: 11px;
    color: #b9c1ca;
    line-height: 1.5;
}

.stx_booster_caveat {
    margin: 0 0 14px;
    font-size: 10px;
    line-height: 1.5;
}

.stx_efficiency_bar_cell { width: 120px; }
.stx_efficiency_bar_cell .stx_bar_track { display: block; }

/* ---- activity heatmap ---- */

.stx_heatmap {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 13px);
    grid-auto-columns: 13px;
    gap: 3px;
    padding: 4px 0;
    overflow-x: auto;
}

.stx_heat {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: #1b1f24;
    border: 1px solid #23282e;
}

.stx_heat_pad { visibility: hidden; }

.stx_heat_l0 { background: #1b1f24; }
.stx_heat_l1 { background: #26402a; }
.stx_heat_l2 { background: #3a6438; }
.stx_heat_l3 { background: #549244; }
.stx_heat_l4 { background: #7ac251; }

.stx_heatmap_legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 10px;
}

/* ---- production growth ---- */

.stx_growth { margin-bottom: 12px; }

.stx_growth_svg {
    display: block;
    width: 100%;
    height: 90px;
}

.stx_growth_bar { fill: #6ba4d8; }

/* ---- filter bar ----

A CSS grid rather than a flex row: the fields have very different label lengths in Turkish, and a
flex row left them at ragged heights with the controls wandering out of line. A fixed track width
puts every control on the same baseline whatever the label says.

The controls are restyled rather than left to the browser. A default select/date/button next to
the game's own dark chrome reads as a different application dropped into the page. */

.stx_filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    gap: 8px 10px;
    margin: 14px 0 8px;
    padding: 12px;
    background: linear-gradient(to bottom, #1d2126, #16191d);
    border: 1px solid #2f353c;
    border-radius: 3px;
}

.stx_filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.stx_filter > span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #7e8894;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stx_filter select,
.stx_filter input {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
    padding: 0 24px 0 8px;
    font-size: 11px;
    font-family: inherit;
    color: #cfd6de;
    background-color: #14171a;
    border: 1px solid #3a424b;
    border-radius: 3px;
    outline: none;
    /* The native arrow is drawn by the OS and cannot be themed, so it is replaced with one that
    matches the rest of the game's chrome. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #7e8894 50%), linear-gradient(135deg, #7e8894 50%, transparent 50%);
    background-position: calc(100% - 13px) 12px, calc(100% - 8px) 12px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.stx_filter input {
    padding-right: 8px;
    background-image: none;
}

.stx_filter select:hover,
.stx_filter input:hover {
    border-color: #4d5763;
}

.stx_filter select:focus,
.stx_filter input:focus {
    border-color: #6ba4d8;
    background-color: #171b1f;
}

.stx_filter select option {
    background: #14171a;
    color: #cfd6de;
}

/* The date input's own calendar button is a white glyph on this dark ground; inverting it is the
only way to make it visible without giving up the native picker. */
.stx_filter input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
}

.stx_filter_actions {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 28px;
}

.stx_filter_apply {
    height: 28px;
    padding: 0 18px;
    font-size: 11px;
    font-family: inherit;
    font-weight: bold;
    color: #dfe5ec;
    background: linear-gradient(to bottom, #33608c, #24445f);
    border: 1px solid #4a7fb5;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.stx_filter_apply:hover {
    color: #fff;
    background: linear-gradient(to bottom, #3d719f, #2a5070);
}

.stx_filter_apply:active {
    background: linear-gradient(to bottom, #24445f, #33608c);
}

.stx_filter_reset {
    font-size: 11px;
    color: #7e8894;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px dotted #454e57;
}

.stx_filter_reset:hover {
    color: #cfd6de;
    border-bottom-color: #7e8894;
}

/* ---- booster breakdown ---- */

.stx_booster_table td { vertical-align: middle; }
.stx_booster_baseline td { background: rgba(107, 164, 216, 0.06); }

/* The reference row borrowed from other players of the same class, when the reader has no
   unboosted runs of his own. It sits in the table footer, behind a rule, so it cannot be read as
   another of his own rows: at the top of the body it put a server figure directly above his
   numbers with nothing between them. */
.stx_booster_table tfoot td {
    padding-top: 8px;
    border-top: 1px solid #3d454e;
}

.stx_booster_borrowed td {
    background: rgba(107, 164, 216, 0.05);
    font-style: italic;
}

.stx_booster_borrowed td.label { font-style: normal; }

/* The rung the reader is standing on. Marked rather than singled out: the row is still one row
   among four, it just says which one is his. */
.stx_booster_yours td {
    background: rgba(143, 209, 79, 0.07);
}

.stx_yours_chip {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #14171a;
    background: #8fd14f;
    border-radius: 2px;
    vertical-align: middle;
}

/* The two amount columns of the reference row, which are deliberately not filled in. Says why on
   hover rather than showing a dash that reads as missing data. */
.stx_not_comparable {
    font-size: 10px;
    cursor: help;
}

/* The comparison sits next to the figure it is a comparison of, rather than in a column of its
   own. Two "vs baseline" columns for two different measurements did not fit the frame, and a
   percentage three cells away from its number is a percentage nobody reads. */
.stx_booster_delta {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    opacity: 0.9;
}

.stx_booster_table td { white-space: nowrap; }

/* Shown to a player who has never flown an expedition, in place of a comparison strip that would
   have read "0 / 110.2M" three times. Same measured server figures, presented as what the thing
   returns rather than as a scoreboard he is losing. */
.stx_invite {
    margin: 12px 0 14px;
    padding: 12px 14px;
    background: linear-gradient(to bottom, #23282e, #191d21);
    border: 1px solid #3d454e;
    border-left: 3px solid #6ba4d8;
    border-radius: 0 3px 3px 0;
}

.stx_invite h4 {
    margin: 0 0 4px;
    font-size: 13px;
    color: #dfe5ec;
}

.stx_invite_text {
    margin: 0 0 10px;
    font-size: 11px;
    color: #9099a5;
}

.stx_invite_figures {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.stx_invite_figure {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.stx_invite_value {
    font-size: 20px;
    font-weight: bold;
    color: #dfe5ec;
}

.stx_invite_label {
    margin-top: 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #7e8894;
}

.stx_invite_note {
    margin: 10px 0 0;
    font-size: 10px;
    line-height: 1.5;
}

/* What the rung above the reader's is worth, in his own numbers. Set apart from the table it
   follows, because it is the one figure on this panel that is an estimate rather than a count. */
.stx_step {
    margin: 10px 0 14px;
    padding: 10px 12px;
    background: #191d21;
    border: 1px solid #2b3138;
    border-left: 3px solid #6ba4d8;
    border-radius: 0 3px 3px 0;
}

.stx_step_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.stx_step_head h4 {
    margin: 0;
    font-size: 12px;
    color: #cfd6de;
}

.stx_step_body {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stx_step_now,
.stx_step_next {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.stx_step_label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #7e8894;
}

.stx_step_value {
    font-size: 16px;
    font-weight: bold;
    color: #dfe5ec;
}

.stx_step_arrow {
    font-size: 18px;
    color: #565f69;
}

.stx_step_delta {
    margin-left: auto;
    font-size: 15px;
    font-weight: bold;
}

/* Marks a cell whose column does not measure that row's item. Deliberately quiet: it is not a
   warning, it says the comparison in this cell is not the one to read. */
.stx_na_flag {
    margin-left: 4px;
    padding: 0 3px;
    font-size: 9px;
    color: #656e79;
    border: 1px solid #333a42;
    border-radius: 2px;
    cursor: help;
}

/* Which column measures which item, under the table. */
.stx_booster_legend {
    display: block;
    line-height: 1.55;
}

.stx_booster_legend .stx_legend_item {
    display: block;
}

.stx_booster_legend strong { color: #cfd6de; }

/* The reference row's explanation, spanning the columns that would otherwise print four zeros. */
.stx_baseline_note {
    font-size: 10px;
    font-style: italic;
    white-space: normal;
}

/* The answer, stated above the table that supports it. Given the weight the number deserves:
   a reader who takes nothing else from this panel should take this. */
.stx_headline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: linear-gradient(to bottom, #23282e, #191d21);
    border: 1px solid #3d454e;
    border-left: 3px solid #8fd14f;
    border-radius: 3px;
}

.stx_headline_figure {
    flex: 0 0 auto;
    text-align: center;
    line-height: 1.1;
}

.stx_headline_percent {
    display: block;
    font-size: 26px;
    font-weight: bold;
}

.stx_headline_label {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7e8894;
}

.stx_headline_text {
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
    color: #b9c1ca;
}

.stx_headline_text strong { color: #dfe5ec; }

.stx_headline_body { flex: 1 1 auto; min-width: 0; }

/* The two totals and their difference, under the sentence. The sentence gives the shape of the
   comparison, these give the size of it. */
.stx_headline_totals {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 1px 14px;
    margin: 6px 0 0;
    font-size: 11px;
}

.stx_headline_totals dt { color: #7e8894; }

.stx_headline_totals dd {
    margin: 0;
    text-align: right;
    color: #cfd6de;
}

/* How many finds a per-find average rests on, next to the average itself. A reader comparing two
   percentages deserves to see which one is built on fifty samples and which on nine hundred. */
.stx_find_count {
    font-size: 10px;
}

/* The combined per-run figure, which is the one a player is really asking about. Given weight
   because both items feed into it and it lands well above either on its own. */
.stx_booster_headline strong { color: #dfe5ec; }

.stx_find_count::before { content: "("; }
.stx_find_count::after  { content: ")"; }

/* The marker on a baseline too small to carry the percentages beside it. */
.stx_thin_flag {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 4px;
    font-size: 9px;
    line-height: 13px;
    text-align: center;
    font-weight: bold;
    color: #14171a;
    background: #d1b84f;
    border-radius: 50%;
    cursor: help;
}

/* Shown in place of the player's own table when he has no usable unboosted runs to compare
   against, rather than printing a confident percentage drawn from a handful of them. */
.stx_notice {
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: 11px;
    color: #b9c1ca;
    background: #191d21;
    border-left: 2px solid #6ba4d8;
    border-radius: 0 3px 3px 0;
}

.stx_replay {
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #191d21;
    border: 1px solid #2b3138;
    border-radius: 3px;
}

.stx_replay_headline {
    font-size: 12px;
    color: #dfe5ec;
    margin-bottom: 6px;
}

.stx_replay_list {
    margin: 0 0 6px;
    padding-left: 16px;
    font-size: 11px;
    color: #b9c1ca;
}

.stx_replay_list li { margin-bottom: 2px; }

.stx_badge_booster_none     { background: #262c33; border-color: #333a42; color: #8a939e; }
.stx_badge_booster_computer { background: #3b2a52; border-color: #57407a; color: #c48fff; }
.stx_badge_booster_resource { background: #2a3b52; border-color: #40577a; color: #8ec5ff; }
.stx_badge_booster_both     { background: #2a5245; border-color: #3f7a68; color: #7fe3d0; }

/* ---- combinations ---- */

.stx_combo_table td { vertical-align: middle; }
.stx_combo_best td { background: rgba(143, 209, 79, 0.07); }

/* ---- daily ledger ---- */

/* Same reasoning as the event table: declared widths so no cell can push its neighbour out from
   under its own header. The ships column is left unsized and takes the rest. */
.stx_ledger_table {
    table-layout: fixed;
}

.stx_ledger_table td { vertical-align: middle; }

.stx_ledger_table th,
.stx_ledger_table td { overflow: hidden; }

.stx_ledger_table th:nth-child(1), .stx_ledger_table td:nth-child(1) { width: 13%; }
.stx_ledger_table th:nth-child(2), .stx_ledger_table td:nth-child(2) { width: 16%; }
.stx_ledger_table th:nth-child(3), .stx_ledger_table td:nth-child(3) { width: 11%; }
.stx_ledger_table th:nth-child(4), .stx_ledger_table td:nth-child(4) { width: 9%; }
.stx_ledger_table th:nth-child(6), .stx_ledger_table td:nth-child(6) { width: 9%; }
.stx_ledger_table th:nth-child(7), .stx_ledger_table td:nth-child(7) { width: 10%; }
.stx_ledger_table th:nth-child(8), .stx_ledger_table td:nth-child(8) { width: 11%; }

/* Combination rows carry a whole fleet in their first cell, so that column gets the room and the
   numeric columns are pinned. */
.stx_combo_table {
    table-layout: fixed;
}

.stx_combo_table th,
.stx_combo_table td { overflow: hidden; }

.stx_combo_table th:nth-child(2), .stx_combo_table td:nth-child(2) { width: 15%; }
.stx_combo_table th:nth-child(3), .stx_combo_table td:nth-child(3) { width: 8%; }
.stx_combo_table th:nth-child(4), .stx_combo_table td:nth-child(4) { width: 12%; }
.stx_combo_table th:nth-child(5), .stx_combo_table td:nth-child(5) { width: 16%; }
.stx_combo_table th:nth-child(6), .stx_combo_table td:nth-child(6) { width: 9%; }
.stx_combo_table th:nth-child(7), .stx_combo_table td:nth-child(7) { width: 9%; }

/* Wraps rather than running on. An inline-flex row with no wrap pushed six or seven tags
   straight through the neighbouring column, which is what "E7 C4 K447 K1 T31" overlapping
   the resources cell was. */
.stx_ledger_types {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 3px;
    margin-top: 3px;
    max-width: 100%;
}

.stx_ledger_type {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    padding: 1px 3px;
    border-radius: 2px;
    background: #262c33;
    color: #7e8894;
    cursor: help;
    white-space: nowrap;
}

.stx_ledger_tag {
    color: #b9c1ca;
    font-weight: bold;
    letter-spacing: 0.2px;
}

.stx_gained_img {
    border: 1px solid #2f353c;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 6px;
}

/* ---- profit and loss ---- */

.stx_pnl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 6px;
}

.stx_pnl_head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.stx_pnl_total td {
    border-top: 1px solid #333a42;
    font-weight: bold;
}

.stx_pnl_bar {
    display: block;
    margin-top: 6px;
}

/* ---- abbreviation legend ---- */

.stx_legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: 10px;
    color: #8a939e;
    background: #191d21;
    border: 1px solid #2b3138;
    border-radius: 3px;
}

.stx_legend_label {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #656e79;
}

.stx_legend_item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---- rank chart ---- */

.stx_rankchart {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #191d21;
    border: 1px solid #2b3138;
    border-radius: 3px;
}

.stx_rankchart_svg {
    display: block;
    width: 100%;
    height: 130px;
}

/* vector-effect keeps the stroke one pixel wide however hard the viewBox is stretched, which a
non-uniform preserveAspectRatio would otherwise distort into a wedge. */
.stx_rankline {
    fill: none;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.stx_rank_axis {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #565f69;
    margin-top: 2px;
}

.stx_rank_legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 11px;
    color: #9099a5;
}

.stx_rank_legend_item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.stx_rank_swatch {
    display: inline-block;
    width: 10px;
    height: 3px;
    border-radius: 1px;
}

/* ---- the chase strip ---- */

.stx_chase {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: linear-gradient(to bottom, #1e2a33, #171d23);
    border: 1px solid #3a5162;
    border-radius: 3px;
}

.stx_chase_rank {
    font-size: 22px;
    font-weight: bold;
    color: #6ba4d8;
    line-height: 1;
}

.stx_chase_text {
    flex: 1;
    min-width: 200px;
    font-size: 12px;
    color: #cfd6de;
}

.stx_chase_pace {
    font-size: 11px;
    color: #7e8894;
}

/* ---- records and milestones ---- */

.stx_records {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin-bottom: 6px;
}

.stx_record {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: linear-gradient(to bottom, #23282e, #171a1e);
    border: 1px solid #2f353c;
    border-radius: 3px;
}

.stx_record_label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7e8894;
}

.stx_record_value {
    font-size: 18px;
    font-weight: bold;
    color: #dfe5ec;
    line-height: 1.2;
}

.stx_record_when {
    font-size: 10px;
    color: #656e79;
}

.stx_milestones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.stx_milestone {
    padding: 8px 10px;
    background: #191d21;
    border: 1px solid #2b3138;
    border-radius: 3px;
}

.stx_milestone_head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: 11px;
}

.stx_milestone_name { color: #8a939e; }
.stx_milestone_value { color: #dfe5ec; font-weight: bold; }

.stx_milestone .stx_bar_track { display: block; }

.stx_milestone_next {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #656e79;
}

/* ---- target book ---- */

.stx_target_table td { vertical-align: middle; }

/* ---- worst-loss callouts ---- */

.stx_worst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: linear-gradient(to bottom, #2a1c1c, #1d1616);
    border: 1px solid #4d3333;
    border-radius: 3px;
    font-size: 11px;
}

.stx_worst_label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #b06060;
}

.stx_worst_when { color: #8a939e; }

.stx_worst_value {
    font-size: 17px;
    font-weight: bold;
}

/* ---- freshness note ----

A line of its own rather than an inline badge tacked onto the intro paragraph, where it wrapped
into the sentence above it and read as part of it. */

/* Set on the game's own recessed panel (.dark_highlight in base1.css) rather than on a flat block
   of its own, and given room to breathe: pressed straight against the buttons above it with no
   surface of its own, it read as a stray line of text rather than as a note about the panel. */
.stx_freshness_bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
    padding: 7px 12px;
    font-size: 10px;
    color: #8a939e;
    background: linear-gradient(to bottom, #2d3743 0, #181e25 100%);
    border: 1px solid #222b34;
    border-radius: 3px;
    box-shadow: 0 1px 3px 0 #000, inset 0 1px 1px 0 hsl(213, 22%, 32%);
}

.stx_freshness_sep { color: #454e57; }

/* ---- the analysis section header ----

Opens the run of tables that were computed overnight, and carries the button that recomputes
them. Built to read as one of the panel's own section headings rather than as a notice, because
that is what it is: the heading of a section, which happens to say when the section was worked
out and offer to work it out again.

The age and the button are pushed to the right so the heading itself keeps the left edge every
other section heading on the page has. */
.stx_analysis_head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #2b3540;
}

.stx_analysis_head h3 {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #9fb4c7;
}

/* Quiet, and next to the heading rather than under it: it qualifies the heading, it is not a
   line of its own worth a reader stopping on. */
.stx_analysis_age {
    font-size: 10px;
    color: #7b8794;
}

/* What the refresh button will rebuild, marked while the pointer is on its heading.

   This is the explanation. Every attempt to write the rule as a sentence failed, because the
   reader had to carry it down the page and apply it himself; hovering shows him the answer on
   the tables themselves and asks nothing of him.

   A tinted block with a blue left edge. The marked range is a run of sibling elements rather than
   one container, so both are drawn per element: the tint carries across the seams because adjacent
   siblings sharing one colour read as a single region, and the edge marks the blocks themselves.

   Not on the section headings. They are siblings in the range like everything else, so the edge
   was being drawn on each of them too, and a heading with its own short bar of blue reads as a
   different kind of thing rather than as the title of the block beneath it. They keep the tint,
   which is what stops the region breaking into pieces, and give up the line. */
.stx_refresh_scope {
    background: rgba(90, 130, 165, 0.11);
    box-shadow: inset 3px 0 0 0 #4a6d8c;
    transition: background 120ms linear, box-shadow 120ms linear;
}

.stx_section_head.stx_refresh_scope {
    box-shadow: none;
}

/* The manual rebuild button.

   Sits immediately after the heading and its age, not pushed to the far right. It used to be
   flush against the right edge, and on a heading that doubles as a dividing line that reads as
   belonging to either side of it: the first question anyone asked was whether it refreshed the
   tables above. Next to the words it qualifies, it belongs to the heading, and the heading
   belongs to the section under it.

   Deliberately quiet. It is a small control on a section heading, and drawn as one of the game's
   blue buttons it would have out-shouted every real figure on the panel. */
.stx_refresh {
    padding: 2px 10px;
    font-size: 10px;
    font-family: inherit;
    line-height: 16px;
    color: #9fb4c7;
    background: linear-gradient(to bottom, #3a4956 0, #26303a 100%);
    border: 1px solid #4a5b6b;
    border-radius: 3px;
    cursor: pointer;
}

.stx_refresh:hover { color: #cfe0ee; border-color: #6a8098; }

/* The cooldown state the player sees for most of the hour after pressing it. Faded rather than
   hidden: a control that disappears reads as a bug, one that is visibly greyed reads as "not
   yet", and the title attribute says when.

   Marked with aria-disabled rather than the disabled attribute. A disabled button fires no mouse
   events at all in Chrome, and the hour after pressing it is exactly when a player is most likely
   to hover it wondering what it would have done. The click is refused in script instead. */
.stx_refresh_off,
.stx_refresh[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    color: #7b8794;
    border-color: #39454f;
}

.stx_refresh_off:hover,
.stx_refresh[aria-disabled="true"]:hover { color: #7b8794; border-color: #39454f; }

/* While the request is in the air. Same treatment as the cooldown, because from the player's
   side they are the same thing: the button cannot be pressed right now. */
.stx_refresh_busy { opacity: 0.4; cursor: progress; }

/* ---- extra condition rows ---- */

.stx_condition_class { border-left-color: #d1734f; }
.stx_condition_tech  { border-left-color: #4fd1a8; }

.stx_condition_tech span { margin-right: 8px; }

/* ---- full page link ---- */

.stx_full_page_link {
    display: block;
    margin-top: 8px;
    padding: 7px;
    text-align: center;
    font-size: 11px;
    color: #7e8894;
    text-decoration: none;
    border: 1px dashed #333a42;
    border-radius: 3px;
}

.stx_full_page_link:hover {
    color: #cfd6de;
    border-color: #4a5561;
}

/* ---- menu "new" badge ---- */

.menu_new_badge {
    position: absolute;
    top: -4px;
    right: -6px;
    padding: 0 4px;
    font-size: 8px;
    line-height: 12px;
    font-weight: bold;
    letter-spacing: 0.3px;
    color: #14171a;
    background: linear-gradient(to bottom, #ffd45c, #e8a827);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 100;
}

/* A positioned ancestor for the badge. */
.menu_icon a {
    position: relative;
    z-index: 100;
}

/* The actual fix for the badge being painted under the page content.
   #links (the menu column) and #middle (the page) are both plain floats with no position and no
   z-index, so they share one stacking context and paint in document order: #middle comes later,
   so it covers anything overhanging the menu's right edge. A z-index on the badge cannot beat
   that, because z-index does nothing until some ancestor is positioned. Positioning the menu
   column itself is what lifts the whole thing, badge included, above the page beside it. */
#links {
    position: relative;
    z-index: 2;
}

/* The same marker on the statistics box heading inside the resource settings page. Inline here
   rather than absolutely positioned: it sits after the heading text, not on top of an icon. */
/* The "this is your current class, not the one you held then" note on rebuilt rows. Set on its
   own line so it reads as a footnote to the class rather than as part of the perk list. */
.stx_condition_caveat {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-style: italic;
}

.stx_new_badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 9px;
    line-height: 14px;
    font-weight: bold;
    letter-spacing: 0.3px;
    color: #14171a;
    background: linear-gradient(to bottom, #ffd45c, #e8a827);
    border-radius: 2px;
    vertical-align: middle;
}

/* ---- event table ---- */

/* Fixed layout with declared widths. Eight columns inside a 667px frame will not fit on their
   natural widths, and an auto-layout table resolves that by letting the widest cell push its
   neighbours out from under their own headers - which is what "Ham madde bulundu" sitting on
   top of the planet name and its coordinates was. Fixed widths make every cell responsible for
   its own overflow instead. */
.stx_table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 11px;
}

.stx_table th,
.stx_table td {
    overflow: hidden;
}

/* Percentages, not pixels: the same table is rendered in a 1400px modal and in the print view,
   and fixed pixel widths sized for one leave a comically wide fleet column in the other. Column 5
   (the fleet) is deliberately left unsized and takes the remaining 38%. */
.stx_table th:nth-child(1), .stx_row td:nth-child(1) { width: 8%; }
.stx_table th:nth-child(2), .stx_row td:nth-child(2) { width: 11%; }
.stx_table th:nth-child(3), .stx_row td:nth-child(3) { width: 12%; }
.stx_table th:nth-child(4), .stx_row td:nth-child(4) { width: 12%; }
.stx_table th:nth-child(6), .stx_row td:nth-child(6) { width: 11%; }
.stx_table th:nth-child(7), .stx_row td:nth-child(7) { width: 6%; }
.stx_table th:nth-child(8), .stx_row td:nth-child(8) { width: 2%; }

/* Planet and player names are the one thing here that can be arbitrarily long. Truncate with an
   ellipsis and keep the full value in the title attribute rather than wrapping every row to two
   lines for the sake of one long name. */
.stx_origin .stx_planet,
.stx_target .stx_planet {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stx_table th {
    padding: 5px 6px;
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #7e8894;
    background: #1b1f24;
    border-bottom: 1px solid #333a42;
}

.stx_row td {
    padding: 5px 6px;
    color: #b9c1ca;
    border-bottom: 1px solid #22262b;
    cursor: pointer;
    vertical-align: middle;
}

.stx_row:hover td { background: rgba(107, 164, 216, 0.08); }
.stx_row.alt td   { background: rgba(255, 255, 255, 0.02); }
.stx_row.alt:hover td { background: rgba(107, 164, 216, 0.1); }

.stx_date  { display: block; }
.stx_clock { display: block; color: #656e79; font-size: 10px; }

.stx_planet { display: block; }
.stx_coords { color: #656e79; font-size: 10px; }
.stx_muted  { color: #565f69; }
.stx_dm     { color: #c48fff; }

.stx_badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 2px;
    background: #262c33;
    border: 1px solid #333a42;
    color: #b9c1ca;
    white-space: nowrap;
}

/* A badge carrying a verdict rather than a label: a farm that has come back empty three times
   running, or the waiting time that paid best. Coloured, but kept as a badge rather than promoted
   to a coloured row - it qualifies the line, it is not the line. */
.stx_badge_bad { border-color: #6b3a30; color: #d98b78; }
.stx_badge_good { border-color: #3f6b34; color: #92c47f; }

/* ---- waiting-time bands ----

   The bar carries the comparison and the figure carries the amount. Five averages read against
   each other as bare numbers is work the row can do instead. */

.stx_gap_bar_track {
    display: inline-block;
    width: 60px;
    height: 6px;
    margin-right: 6px;
    vertical-align: middle;
    background: #22262b;
    border-radius: 2px;
    overflow: hidden;
}

.stx_gap_bar {
    display: block;
    height: 100%;
    background: linear-gradient(to right, #3c6791, #6ba4d8);
}

.stx_gap_best .stx_gap_bar { background: linear-gradient(to right, #3f6b34, #92c47f); }

/* Inside the fixed-width outcome column the badge wraps instead. "Ham madde bulundu" does not
   fit on one line at any font size the rest of the table uses, and a badge that refuses to wrap
   simply spills over the next column. */
.stx_outcome .stx_badge {
    white-space: normal;
    line-height: 1.25;
}

.stx_badge_gain_resources,
.stx_badge_gain_ships,
.stx_badge_gain_dark_matter,
.stx_badge_gain_item,
.stx_badge_gain_merchant_trade,
.stx_badge_won,
.stx_badge_harvested,
.stx_badge_clean,
.stx_badge_colonised,
.stx_badge_destroyed,
.stx_badge_hit {
    background: #22301c;
    border-color: #3d5233;
    color: #8fd14f;
}

.stx_badge_loss_of_fleet,
.stx_badge_lost,
.stx_badge_detected,
.stx_badge_spied,
.stx_badge_fleet_lost,
.stx_badge_battle_pirates,
.stx_badge_battle_aliens {
    background: #301c1c;
    border-color: #5a3333;
    color: #e06666;
}

.stx_flag {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 2px;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
    border-radius: 2px;
    font-weight: bold;
    cursor: help;
}

.stx_flag_item       { background: #3b2a52; color: #c48fff; }
.stx_flag_officer    { background: #2a3b52; color: #8ec5ff; }
.stx_flag_pathfinder { background: #2a5245; color: #7fe3d0; }
.stx_flag_event      { background: #524a2a; color: #e3cf7f; }

.stx_chevron {
    color: #565f69;
    transition: transform 0.12s;
    display: inline-block;
}

.stx_row.open .stx_chevron { transform: rotate(180deg); }

/* ---- ship thumbnails ---- */

/* One ship is one tile: the thumbnail with its count written into the bottom corner. The count
   used to be a text node beside the image, which made every ship twice as wide, and a mixed fleet
   then wrapped to one ship per line - eight ship types, eight lines, in every row of the log. */
.stx_ships {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.stx_ship {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.stx_ship img {
    border: 1px solid #2f353c;
    border-radius: 2px;
    display: block;
}

/* Bottom-right of the tile, on a solid strip so it stays readable over any artwork. */
.stx_ship_amount {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 2px;
    font-size: 9px;
    line-height: 11px;
    font-weight: bold;
    color: #e4e9ee;
    background: rgba(8, 10, 12, 0.82);
    border-radius: 2px 0 2px 0;
    pointer-events: none;
}

.stx_ships_small { gap: 4px; }
.stx_ships_small .stx_ship_amount { font-size: 10px; line-height: 12px; }

/* ---- expanded detail ---- */

.stx_detail td {
    padding: 0;
    background: #14171a;
    border-bottom: 1px solid #2b3138;
}

.stx_detail_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    padding: 12px 14px;
}

.stx_detail_block h4 {
    margin: 0 0 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7e8894;
    border-bottom: 1px solid #22262b;
    padding-bottom: 3px;
}

.stx_detail_block dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0;
    font-size: 11px;
}

.stx_detail_block dt { color: #7e8894; }
.stx_detail_block dd { margin: 0; color: #cfd6de; text-align: right; }

.stx_detail_fleet {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.stx_detail_label {
    font-size: 10px;
    text-transform: uppercase;
    color: #7e8894;
    min-width: 60px;
}

.stx_condition_list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
}

.stx_condition {
    padding: 3px 6px;
    margin-bottom: 3px;
    background: #1b1f24;
    border-left: 2px solid #333a42;
    color: #b9c1ca;
}

.stx_condition_item      { border-left-color: #7d4fd1; }
.stx_condition_officer   { border-left-color: #4f7dd1; }
.stx_condition_event     { border-left-color: #d1b84f; }
.stx_condition_loot      { border-left-color: #d18f4f; }

/* Items that were running but did not apply. Set below the list rather than in it, so nothing is
   hidden and nothing is implied. */
.stx_other_items {
    margin: 8px 0 0;
    font-size: 10px;
    line-height: 1.5;
}

.stx_report_link {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: #6ba4d8;
}

/* ---- load more ---- */

.stx_more {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 7px;
    font-size: 11px;
    color: #cfd6de;
    background: linear-gradient(to bottom, #262c33, #1b1f24);
    border: 1px solid #333a42;
    border-radius: 3px;
    cursor: pointer;
}

.stx_more:hover { color: #fff; border-color: #4a5561; }
.stx_more[disabled] { opacity: 0.5; cursor: default; }

.stx_empty {
    margin: 8px 0;
    padding: 14px;
    text-align: center;
    color: #565f69;
    font-size: 11px;
    background: #191d21;
    border: 1px dashed #2b3138;
    border-radius: 3px;
}

/* ---- summary block on the resource settings page ---- */

.stx_teaser {
    padding: 12px 14px 14px;
}

/* The six logs, each opening the modal on its own tab. A grid rather than a row: the Turkish
labels are long enough that a single row would either wrap unevenly or force the labels to
truncate, and these are the page's primary controls. */
.stx_teaser_tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

/* The six buttons on the resource settings page use the same bar as the tabs inside the dialog,
   so the way in and the thing it opens look like one feature rather than two. */
.stx_teaser_more {
    display: block;
    height: 27px;
    padding: 0 8px;
    text-align: center;
    font-size: 12px;
    line-height: 27px;
    color: #cfd6de;
    background: url("/img/icons/41e941f1dba8d329d19555deab2aaf.gif") no-repeat center;
    background-size: 100% 100%;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stx_teaser_more:hover {
    color: #fff;
    filter: brightness(1.45);
}

/* Inside the dialog the strip sits flush under the title bar rather than floating in the body. */
/* Inside the dialog the strip shares its row with the export links, so its own padding comes off
   and the toolbar around it provides the spacing. */
.stx_modal_tabs {
    margin: 0;
    padding: 0 0 6px;
    border-bottom: none;
    flex: 1 1 auto;
}

/* ---- modal ---- */

.stx_modal_backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}

/* The dialog wears the game's own .contentbox frame (see base1.css): a 42x180 sprite tiled with
   repeat-x for the header and footer bands, 35px corner caps, and a double-bordered content area.
   Everything that draws the frame comes from those global rules, so what is left here is only
   what the dialog needs on top of them - the width, the drop shadow, and the header's own layout.

   The other frames in the game are 667px sprites that cannot stretch; this one can, which is why
   it is the only one that works at the width this dialog runs at. */
.stx_modal {
    width: 100%;
    max-width: 1400px;
    margin: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* The frame's own content band is a flat near-black; the panel sits directly on it. */
.stx_modal > .content {
    padding: 0 0 6px;
}

/* .contentbox .header is 30px with its text vertically centred by line-height. The dialog needs
   the title, the export links and the close button on that one line, so it is laid out as a flex
   row on top of the frame rather than being given a background of its own. */
/* Padded clear of the frame's own end caps, which sit 35px in from each side. The title and the
   close button are at the edges here rather than centred, so unlike the section headings they
   have to be kept off the rounded corners by hand.

   Only those two live here now: the export links moved down to the tab row, where a 28px button
   is not fighting a 30px bar for space. */
.stx_modal_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 24px;
}

/* Tabs on the left, exports on the right, on one row under the title bar. */
.stx_modal_toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px 0;
}

.stx_modal_toolbar .stx_actions {
    display: flex;
    gap: 6px;
    padding-bottom: 6px;
}

/* Smaller than a full .btn_blue: these are a secondary action beside the tabs, not the point of
   the row. The class stays for the shared look, the size is trimmed here.

   The snapshot control is a <button> rather than a link, because it produces a file in the browser
   and has no URL behind it. It is listed alongside so the two sit level: a button does not inherit
   the anchor's text-decoration, cursor or font, and left alone it came out a few pixels taller than
   the link beside it. */
.stx_modal_toolbar .stx_action,
.stx_modal_toolbar .stx_snapshot,
.stx_actions .stx_snapshot {
    min-width: 0;
    padding: 3px 9px;
    font-size: 10px;
    line-height: 15px;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* While the picture is being drawn. It takes a moment on a long tab, and a button that looks
   pressable while it is working invites a second press. */
.stx_snapshot_busy {
    opacity: 0.5;
    cursor: progress;
}

.stx_modal_head h2 {
    margin: 0;
    font-size: 13px;
    line-height: 30px;
    color: #6f9fc8;
    font-weight: bold;
    white-space: nowrap;
}

/* The corner caps are absolutely positioned by the global rules and must not be pulled into the
   flex row. */
.stx_modal_head > .c-left,
.stx_modal_head > .c-right {
    flex: 0 0 auto;
}

.stx_modal_close {
    background: none;
    border: none;
    color: #8a939e;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.stx_modal_close:hover { color: #fff; }

.stx_modal_body { padding: 12px 14px 18px; }

.stx_modal_loading {
    padding: 40px;
    text-align: center;
    color: #7e8894;
    font-size: 12px;
}

/* ---- print ---- */

@media print {
    body { background: #fff; color: #000; }

    .stx_intro,
    .stx_actions,
    .stx_tabs,
    .stx_more,
    .stx_expand,
    .stx_chevron,
    .stx_filters {
        display: none !important;
    }

    /* Every detail row is expanded on paper: the reader cannot click, so a printed log that
    hides its detail behind a toggle would be worth less than the screen it came from. */
    .stx_detail { display: table-row !important; }
    .stx_detail[hidden] { display: table-row !important; }

    .stx_tile,
    .stx_trend,
    .stx_best,
    .stx_detail td,
    .stx_condition,
    .stx_empty {
        background: #fff !important;
        border-color: #bbb !important;
    }

    .stx_tile_value,
    .stx_table th,
    .stx_row td,
    .stx_list td,
    .stx_detail_block dd {
        color: #000 !important;
    }

    .stx_tile_label,
    .stx_tile_note,
    .stx_coords,
    .stx_clock,
    .stx_detail_block dt {
        color: #555 !important;
    }

    .stx_row { page-break-inside: avoid; }
    .stx_detail { page-break-inside: avoid; }
}

/* The share control at the top of each statistics tab: one per page, with the line saying what
   sharing will strip out. The note sits beside the button rather than behind a tooltip, because a
   player who has to hover to find out what gets published will not hover. */
.stx_share_bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 8px;
    padding: 6px 8px;
}

.stx_share_bar .stx_share_note {
    flex: 1 1 320px;
    color: #7f8a95;
    font-size: 10px;
    line-height: 1.4;
    text-align: right;
}

.stx_share_form { margin: 0; }

/* Who the report will be readable by, chosen before the snapshot is taken because that is when the
   decision is actually being made. Only drawn for a player who has an alliance to restrict it to. */
.stx_share_audience {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #7f8a95;
}

.stx_share_audience select {
    background: #1b1f24;
    border: 1px solid #2c3238;
    color: #c3ccd6;
    font-size: 10px;
    padding: 2px 4px;
}

/* The game skin hides every native dropdown - body.ogame select { visibility: hidden } - because
   the old interface replaced them all with custom widgets. This panel does not have those widgets,
   so its dropdowns have to opt back in by name. Without this the audience selector and the whole
   filter bar render as invisible boxes: the labels are there, the control is not.

   Specificity has to beat body.ogame select, hence the body prefix. */
body.ogame .stx_filter select,
body.ogame .stx_share_audience select {
    visibility: visible;
}

/* A freshness bar reporting a missed run. The bar itself stays quiet - it is a footnote nine days
   out of ten - and only turns when the figures above it have actually stopped being current. */
.stx_freshness_stale {
    border-color: #6b3b3b;
    background: linear-gradient(to bottom, #2a1f1f, #211919);
}

/* A day a server event was running.

   The chart band sits behind the bars: the point is that a spike has a visible reason, not that
   the reason competes with the spike for attention. */
.stx_trend_event {
    fill: #3a4a5c;
    opacity: 0.35;
}

.stx_event_day {
    margin-left: 4px;
    color: #6ba4d8;
    font-size: 8px;
    vertical-align: middle;
}

.stx_events_table td:first-child { width: 45%; }

/* Flags on an in-flight row. A returning fleet and a holding one are the two states a player asks
   about, so they are marked rather than left to be worked out from the mission name. */
.stx_flag_return  { border-color: #4f8fd1; color: #8ec5ff; }
.stx_flag_holding { border-color: #b8913f; color: #e8c874; }

/* ---------------------------------------------------------------- resource splits and figures

   A total on its own hides what it is made of. On a server where crystal trades at roughly twice
   metal and deuterium above that, "2.8B" is not one number - it is three, and which three decides
   whether the figure is cheap or ruinous. The total keeps its size and colour; the breakdown sits
   under it in the resource colours already used by the production bars, so the composition reads
   without reading. */

.stx_split {
    display: inline-block;
    line-height: 1.25;
    vertical-align: top;
}

.stx_split_total {
    display: block;
    white-space: nowrap;
}

.stx_split_parts {
    display: block;
    font-size: 10px;
    white-space: nowrap;
}

/* Separated by a thin slash rather than whitespace: three abbreviated numbers run together are
   hard to tell apart, and a slash is what the rest of the game uses for resource triples. */
.stx_split_parts > span + span::before {
    content: " / ";
    color: #3d444b;
}

.stx_split_m { color: #b4b4b4; }
.stx_split_c { color: #8ec5ff; }
.stx_split_d { color: #7fe3d0; }

/* An abbreviated figure whose exact value is on the title. Dotted underline so it is visible that
   there is something to hover, the same affordance the tech tooltips use. */
.stx_num {
    border-bottom: 1px dotted rgba(101, 110, 121, 0.5);
    cursor: help;
}

/* A shared snapshot is read, not hovered - a forum reader has no tooltip to open, so the hint
   that one exists is only noise there. */
.stx_frozen .stx_num { border-bottom: none; cursor: default; }

/* The split line inside a headline tile sits between the figure and its label, tight against the
   figure so it reads as part of it rather than as a second statistic. */
.stx_tile_split {
    margin: 2px 0 1px;
    opacity: 0.85;
}

/* The spending table's bar column: a proportion, not a figure, so it takes whatever width is left
   after the three real columns. */
.stx_spend_table .stx_spend_bar_cell { width: 35%; min-width: 80px; }
.stx_spend_table .stx_spend_bar_cell .stx_bar_track { display: block; width: 100%; }

/* ---------------------------------------------------------------- period comparison

   A row of periods rather than a dropdown: five options that are switched between constantly, and
   a native select on this page is hidden by the game's own stylesheet anyway. */

.stx_period_picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 8px;
}

.stx_period_option {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    color: #9aa4ae;
    background: #22272d;
    border: 1px solid #333a42;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
}

.stx_period_option:hover {
    color: #d8dee4;
    border-color: #4a5561;
}

.stx_period_option.active {
    color: #f2f5f8;
    background: #2f4256;
    border-color: #6ba4d8;
}

.stx_period_table td { vertical-align: top; }

/* ---------------------------------------------------------------- active boosters

   Written out, side by side, at the full width of the panel.

   Four layouts got here. A table of item names was a wall of text; a grid of 62px cards turned
   three items into a block that dwarfed the tab; a row of 24px tiles was dense but said nothing
   without a tooltip; and the same tiles inside the per-planet table were both too big for the cell
   and crowding the numbers they were meant to explain. The mistake common to the last two was
   treating a booster as a picture. It is not - it is a name, a percentage and a deadline, and the
   artwork is only there to make the line findable. So the icon is 16px and the words carry it.

   Laid out as a wrapping flex row: one booster is one line, several sit side by side, and a player
   with a dozen of them gets a block that grows sideways before it grows down. */

/* One row per planet: the place on the left, its items beside it. The flat version repeated the
   planet name on every chip, and twenty colonies with three boosters apiece made sixty of them. */
.stx_bchip_table td { vertical-align: middle; }

.stx_bchip_place {
    width: 190px;
    white-space: nowrap;
}

.stx_bchips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stx_bchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px 2px 3px;
    font-size: 11px;
    line-height: 16px;
    color: #b9c1ca;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid #2b3138;
    border-radius: 3px;
    /* The rarity stripe, on the leading edge. Overridden per rarity below. */
    border-left-width: 3px;
    border-left-color: #3a4048;
}

.stx_bchip img {
    display: block;
    border-radius: 2px;
    opacity: 0.9;
}

.stx_bchip_name { color: #cfd6de; }

/* The size of the boost, which is the number the player came to check. */
.stx_bchip_pct {
    color: #a8d47a;
    font-weight: bold;
}

/* Time remaining, set apart on the right of the chip. Short here - "16g", "7sa" - because the row
   is a comparison between four items on one planet, and the exact figure is in the tooltip. */
.stx_bchip_left {
    padding-left: 5px;
    color: #7e8894;
    border-left: 1px solid #2b3138;
}

/* Under a day left. Same signal the officer table uses, for the same reason: it is the one thing
   about a running booster that needs acting on. */
.stx_bchip_expiring { border-color: #4a3a2a; border-left-color: #a05a2c; }
.stx_bchip_expiring .stx_bchip_left { color: #e0a06a; border-left-color: #4a3a2a; }

/* The game's own rarity colours. */
.stx_bchip.r_common   { border-left-color: #834b2d; }
.stx_bchip.r_uncommon { border-left-color: #80868f; }
.stx_bchip.r_rare     { border-left-color: #ba7f23; }
.stx_bchip.r_epic     { border-left-color: #854195; }

/* Expiry outranks rarity: the stripe is decoration, the deadline is not. */
.stx_bchip_expiring.r_common,
.stx_bchip_expiring.r_uncommon,
.stx_bchip_expiring.r_rare,
.stx_bchip_expiring.r_epic { border-left-color: #a05a2c; }

.stx_frozen {
    /* The panel is laid out in Verdana at 12px. Inheriting the forum's Rajdhani at 13px reflows
       every table in it and turns the tile rows into three ragged lines. */
    font-family: Verdana, Arial, SunSans-Regular, sans-serif;
    font-size: 12px;
    line-height: normal;
    color: #f1f1f1;
    text-align: left;

    /* The reason the block came out as a column of text with a blank line between every value.
       .post-content is white-space: pre-wrap, which is right for a post somebody typed - it keeps
       the line breaks he put there - and wrong for a document made of markup, where every newline
       between two tags becomes a visible line break. Reset once here; the value is inherited, so
       everything inside gets it, and the module's own nowrap rules still win where they are set. */
    white-space: normal;
}

/* Green for gains, red for losses. The two carry most of the meaning in these tables - a net line
   is only readable because of them - and they live in the base in-game sheet, not in the module. */
.stx_frozen .undermark { color: #99CC00 !important; }
.stx_frozen .overmark { color: #D43635 !important; }

/* The forum sets these on .post-content and they would otherwise leak into every cell. */
.stx_frozen a { color: #5c8ac1; text-decoration: none; }
.stx_frozen strong { color: inherit; }
.stx_frozen table { border-collapse: collapse; }
.stx_frozen h3 { margin: 0; font-size: 12px; }
.stx_frozen p { margin: 0 0 6px; }

/* A snapshot is a fixed-width document dropped into a fixed-width column, and some of its tables
   are eight columns wide. Without this the whole thread scrolls sideways on a phone. */
.stx_frozen { overflow-x: auto; }

/* ==========================================================================
   The frame around a frozen section.

   Deliberately in the forum's own language - gold on panel, the same as .post-quote - so the block
   reads as a quoted document inside somebody's post rather than as a second page pasted into the
   thread. Only the contents are the game's.
   ========================================================================== */

.stx_share {
    /* The frame is markup too, and it sits inside .post-content, which is white-space: pre-wrap.
       Without this the newlines between the head and the body render as blank lines and push the
       two apart. Set on the frame rather than only on .stx_frozen so the gap between them goes as
       well as the ones inside. */
    white-space: normal;

    margin: 14px 0;
    border: 1px solid var(--panel-border-strong);
    border-radius: var(--radius-sm);
    background: rgba(10, 14, 26, 0.55);
    overflow: hidden;
}

.stx_share_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: rgba(232, 200, 116, 0.06);
    border-bottom: 1px solid var(--panel-border);
}

.stx_share_title {
    font-family: 'Orbitron', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--gold);
}

/* Whose figures these are and when they were taken. Both matter: a report quoted into another
   thread months later still says who it belongs to and how old it is. */
.stx_share_by {
    font-size: 11px;
    color: var(--text-faint);
}

.stx_share_body { padding: 12px 14px; }

/* The line that makes the block worth reading: these numbers were written by the game, and the
   author cannot have edited them. Without it a reader has no way to tell this apart from a table
   somebody typed. */
.stx_share_foot {
    padding: 7px 14px;
    font-size: 10.5px;
    color: var(--text-faint);
    border-top: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.18);
}

.stx_share_missing {
    padding: 11px 14px;
    font-size: 12px;
    color: var(--text-faint);
    font-style: italic;
}

/* What the report hides, said above the editor before the player posts it. Deliberately a notice
   rather than a warning colour: nothing has gone wrong, this is the feature working. */
.stats-privacy-note {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(232, 200, 116, 0.28);
    border-left: 3px solid var(--gold-dim);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(232, 200, 116, 0.06);
}

.stats-privacy-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--gold);
    font-size: 12.5px;
}

.stats-privacy-note p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
}

/* A report its author restricted to his alliance. The chip sits in the byline so a reader who
   cannot see the figures still knows why, and one who can knows the author chose a smaller
   audience than the thread. */
.stx_share_locked {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--gold-dim);
    border-radius: 999px;
    font-size: 10px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}