/* The public site's stylesheet: the dashboard's skin, ported.
 *
 * Self-contained on purpose - the pages are mirrored onto a static host, so
 * nothing here may lean on app.css, but the palette and the core rules are
 * copied from it so the two read as the same console. The chart variables are
 * a contract, not a convention: the server-rendered SVG writes
 * fill="var(--text)" and stroke="var(--chart-axis)" into its markup. */
:root {
  color-scheme: dark;

  --bg:        #11131a;
  --card:      #181b24;
  --sunk:      #12151d;
  --line:      #262b38;
  --line-soft: #222834;
  --edge:      #394052;

  --text:      #d8dde8;
  --text-dim:  #9aa4b8;
  --text-mute: #7c869c;

  --accent:     #8ab4f8;
  --accent-bg:  #1d3b63;

  --good:      #3fb950;
  --bad:       #f85149;
  --warn:      #f0883e;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #9a5fe0;
  --series-6: #2aa5c0;
  --series-7: #d0508e;
  --series-8: #8a9a2c;

  --chart-surface: #181b24;
  --chart-grid:    #232936;
  --chart-axis:    #333b4d;
  --chart-ink:     #7c869c;

  /* The support-kill bars' two segments. */
  --transport: #e3c62a;
  --miner:     #9a5fe0;
}

body { font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
      margin: 0; padding: 1.5rem; background: var(--bg); color: var(--text) }

/* The page floats in space: two star tiles at co-prime sizes (so the repeat
   never reads as a grid) and a faint nebula wash, all fixed behind the
   cards, which stay opaque. Pure CSS gradients - nothing fetched, nothing
   random, the same sky on every render. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 45% at 85% -5%, rgba(74, 58, 138, .18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 5% 105%, rgba(30, 64, 110, .16), transparent 70%),
    radial-gradient(1.3px 1.3px at 22px 34px, rgba(216, 221, 232, .85) 50%, transparent 100%),
    radial-gradient(1px 1px at 143px 107px, rgba(154, 164, 184, .7) 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 235px 61px, rgba(138, 180, 248, .8) 50%, transparent 100%),
    radial-gradient(1px 1px at 78px 189px, rgba(216, 221, 232, .55) 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 187px 226px, rgba(201, 180, 240, .6) 50%, transparent 100%),
    radial-gradient(1px 1px at 41px 130px, rgba(154, 164, 184, .5) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 310px 170px, rgba(216, 221, 232, .75) 50%, transparent 100%),
    radial-gradient(1px 1px at 108px 291px, rgba(138, 180, 248, .5) 50%, transparent 100%),
    radial-gradient(1px 1px at 269px 305px, rgba(216, 221, 232, .6) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 56px 9px, rgba(240, 200, 140, .6) 50%, transparent 100%),
    radial-gradient(1px 1px at 331px 88px, rgba(154, 164, 184, .55) 50%, transparent 100%),
    radial-gradient(1px 1px at 163px 351px, rgba(216, 221, 232, .5) 50%, transparent 100%);
  background-size:
    100% 100%, 100% 100%,
    373px 373px, 373px 373px, 373px 373px, 373px 373px, 373px 373px, 373px 373px,
    541px 541px, 541px 541px, 541px 541px, 541px 541px, 541px 541px, 541px 541px;
}
h1 { font-size: 1.1rem; margin: 0 0 .25rem }
h1 a { color: var(--text) }
h2 { font-size: .95rem; margin: 0 0 .6rem; color: var(--accent) }
h3 { font-size: .95rem; margin: .8rem 0 .3rem; color: var(--text-dim) }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
nav a:hover, a.tile:hover { text-decoration: none }

nav { display: flex; gap: .3rem; margin: 1rem 0; flex-wrap: wrap;
     border-bottom: 1px solid var(--line); padding-bottom: .6rem }
nav a { padding: .35rem .8rem; border-radius: 6px 6px 0 0; color: var(--text-dim) }
nav a:hover { background: #1b1f2b }
nav a.on { background: var(--accent-bg); color: #e8eefc }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
      padding: 1rem; min-width: 0; overflow-x: auto }
.wide { grid-column: 1/-1 }
.card.live { border-left: 2px solid var(--accent) }
.card.live > h2::after {
  content: "live"; margin-left: .5rem; vertical-align: middle;
  font-size: .6em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .1rem .35rem; border-radius: 3px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}

table { border-collapse: collapse; width: 100% }
td, th { text-align: left; padding: .2rem .5rem .2rem 0; white-space: normal }
td.nowrap, th.nowrap, .num { white-space: nowrap }
th { color: var(--text-mute); font-weight: normal; border-bottom: 1px solid var(--line) }
th.sub { font-size: .85em }
th.band { border-bottom: none; color: var(--text-dim) }
th.sortable { cursor: pointer; user-select: none }
th.sortable:hover { color: var(--text) }
th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
th.sortable::after { content: " \25B2"; font-size: .7em; opacity: .18 }
th.sortable[data-sorted]::after { opacity: .7 }
th.sortable[data-sorted="desc"]::after { content: " \25BC" }
.num { text-align: right; font-variant-numeric: tabular-nums }
tr:not([class]):hover > td { background: var(--line-soft) }
.scroll { max-height: 24rem; overflow: auto }
.card.grow .scroll { max-height: max(24rem, calc(100vh - 22rem)) }
table.snug { width: auto }
table.snug td, table.snug th { padding-right: 1.2rem }
.muted { color: var(--text-mute) }
td.muted { color: var(--text-mute) }

tr.live { position: relative; background: color-mix(in srgb, var(--accent) 7%, transparent) }
tr.live > td:first-child { box-shadow: inset 2px 0 var(--accent); padding-left: .5rem }

.tag { font-size: .8rem; padding: 0 .35rem; border-radius: 4px;
      background: var(--line); color: var(--text-dim); white-space: nowrap }
.tag.good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good) }
.outcome { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em }
.outcome.win { color: var(--good) }
.outcome.loss { color: var(--bad) }
.outcome.tie { color: var(--text-dim) }

.tiles { display: flex; gap: .6rem; flex-wrap: wrap }
.tile { flex: 1 1 9rem; background: var(--sunk); border: 1px solid var(--line-soft);
       border-radius: 8px; padding: .5rem .7rem; color: var(--text) }
a.tile:hover { border-color: var(--accent) }
.tile-head { display: flex; align-items: center; gap: .4rem; color: var(--text-dim); font-size: .85rem }
.tile-value { font-size: 1.25rem; font-variant-numeric: tabular-nums; margin-top: .15rem }
.tile-rate { font-size: .8rem; margin-top: .1rem }

input, select { font: inherit; background: var(--bg); color: var(--text);
      border: 1px solid var(--edge); border-radius: 5px; padding: .35rem .5rem }
.searchbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem }
.searchbar input[type=search] { min-width: 12rem }
.searchbar label { display: inline-flex; gap: .3rem; align-items: center }

.site-foot { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid var(--line);
            color: var(--text-mute); font-size: .85rem }

.chart { display: block; width: 100%; height: auto; overflow: visible }
.chart-scroll { overflow-x: auto; overflow-y: hidden }
.chart-wide { width: auto; min-width: 100%; max-width: none }
.chart a { cursor: pointer }
.chart-card { display: flex; flex-direction: column; gap: .3rem }
.chart-title { font-size: .9rem; color: var(--text-dim) }
.chart-note { font-size: .8rem; color: var(--text-mute) }
.chart-empty { padding: 1.2rem 0; color: var(--text-mute); font-size: .85rem }
.chart .hit { fill: transparent }
.chart .hit:hover { fill: color-mix(in srgb, var(--series-1) 10%, transparent) }
.chart-legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-dim) }
.chart-legend .key { display: inline-flex; align-items: center; gap: .3rem }
.chart-legend .key i { width: .8rem; height: .2rem; border-radius: 1px; display: inline-block }
.chart-table { margin-top: .3rem }
.chart-table table { font-size: .9em }
.chart-table summary { font-size: .9em; color: var(--text-mute); cursor: pointer }
.chart-table .scroll { max-height: 16rem; overflow-y: auto }

/* The global other-corps setting, off by default: opponents' rows, their
   dropdown options, the everyone-scope charts and the opponents block stay
   hidden until the nav toggle lets them in. Without scripts the CSS default
   stands and the site shows the home corps. */
tr[data-ours="0"] { display: none }
body.show-others tr[data-ours="0"] { display: table-row }
option[data-ours="0"] { display: none }
body.show-others option[data-ours="0"] { display: block }
.others-chart { display: none }
body.show-others .others-chart { display: block }
body.show-others .ours-chart { display: none }
.others-block { display: none }
body.show-others .others-block { display: block }
.navset { margin-left: auto; display: inline-flex; gap: .8rem; align-items: center }
.navset .others { display: inline-flex; gap: .35rem; align-items: center;
                 color: var(--text-dim); font-size: .9rem; cursor: pointer }
.navset select { font-size: .9rem; padding: .2rem .35rem }

/* The careers compare figure: one chart pair per metric, the dropdown's
   pick wearing .on. */
.metric-chart { display: none }
.metric-chart.on { display: block }

/* The instant chart readout: a floating label following the cursor. */
.chart-readout {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .3rem .5rem; font-size: .78rem; line-height: 1.35;
  white-space: pre-line; max-width: 22rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

/* A breakdown card is hidden until its chart column is clicked. public.js
   moves the card under the clicked chart and marks it open; without scripts
   the anchor's own :target does the revealing. */
.card.breakdown { display: none }
.card.breakdown:target, .card.breakdown.open { display: block }

/* The hand-authored pages: prose from the content store rendered into a
   card, images from the legacy archive kept inside it. The module-image
   class comes with the ported battleship-roles table; the size cap keeps a
   screenshot from swallowing the column. */
.article { line-height: 1.6 }
.article p { margin: .5rem 0 }
.article img { max-width: 100%; height: auto; border-radius: 4px }
.article img.module-image { width: 32px; height: 32px; vertical-align: middle }
.article table { width: auto }
.article td, .article th { padding: .25rem .8rem .25rem 0; vertical-align: middle }
.article time { color: var(--text-mute); font-size: .85rem }
.article-list { margin: 0; padding-left: 1.2rem }
.article-list li { margin: .35rem 0 }

details { margin: .5rem 0 }
details > summary { cursor: pointer; color: var(--text-dim); padding: .25rem 0;
                  display: flex; align-items: center; gap: .4rem; list-style: none }
details > summary::-webkit-details-marker { display: none }
details > summary::before { content: "\25B8"; font-size: .8em; opacity: .7;
                  transition: transform .12s }
details[open] > summary::before { transform: rotate(90deg) }
details > summary:hover { color: #c9d3e6 }