/* Ball Monitor public page, on top of shioh-style.css (cells, bands, nav, controls). Only the
   pieces Shioh doesn't cover: tables, bar and line charts, pickers, the home list. */

:root {
  /* chart line colours: dark enough to read on every pastel cell */
  --c1: #000080;
  --c2: #880000;
  --c3: #1d5c2a;
  --c4: #5a2a7a;
  --c5: #7a5200;
  --c6: #333;
}

/* The raspberry cell is too dark for the muted grey (3.9:1) and the red kicker; use full ink there. */
.ss-p5 { --ss-muted: var(--ss-ink); }
.ss-p5 .ss-kicker { color: var(--ss-ink); }

/* Shioh's buttons set display, which would override the hidden attribute. */
[hidden] { display: none !important; }

.small { font-size: 0.85rem; }
.side-about p { margin: 0 0 0.5rem; }
.side-about p:last-child { margin: 0; }

/* ---------- home ---------- */
.home-intro { margin: 0; font-size: 1.05rem; }
.model-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.model-link {
  display: block;
  background: var(--ss-panel);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  color: var(--ss-ink) !important;
  text-decoration: none;
}
.model-link:hover { background: var(--ss-panel-strong); }
.model-link b { font-family: var(--ss-font-head); font-size: 1.05rem; }
.model-link p { margin: 0.15rem 0 0.35rem; color: var(--ss-muted); }

/* ---------- model page ---------- */
.back { font-weight: 600; font-size: 0.9rem; }
.page-head .ss-title { margin-top: 0.5rem; }
.page-head .summary { margin: 0 0 0.6rem; font-size: 1.05rem; }
.subtitle { margin: 0 0 0.8rem; color: var(--ss-muted); }
.note { margin: 0.8rem 0 0; color: var(--ss-muted); font-size: 0.875rem; }
.how p { margin: 0 0 0.6rem; }

/* a view nested in a picker: a section band, not a new cell */
.picked .ss-section:first-child { margin-top: 1rem; }

/* ---------- pickers ---------- */
.pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.pick { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.ss-cell select { max-width: 100%; }

/* ---------- tables ---------- */
.search { width: 260px; max-width: 100%; margin: 0 0 0.7rem; }
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--ss-panel);
  border-radius: 8px;
}
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
th, td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--ss-rule); text-align: left; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
th {
  font-family: var(--ss-font-head);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--ss-rule);
  cursor: pointer;
  user-select: none;
  white-space: normal;
  vertical-align: bottom;
  min-width: 56px;
}
th.sorted.desc::after { content: " ▼"; font-size: 0.65rem; }
th.sorted.asc::after { content: " ▲"; font-size: 0.65rem; }
td.num, th.num { text-align: right; }
td.center, th.center { text-align: center; }
tbody tr:hover { background: rgb(255 255 255 / 0.35); }
td.long { white-space: normal; min-width: 240px; max-width: 460px; }
td.barcell { position: relative; min-width: 76px; }
.cellbar { position: absolute; right: 0.6rem; top: 6px; bottom: 6px; background: rgb(0 0 128 / 0.2); border-radius: 3px; }
.cellval { position: relative; }
td.heat { font-weight: 700; }
td.heat.dark { color: #fff; }
.more { margin-top: 0.7rem; }

/* ---------- horizontal bars ---------- */
.bars { display: grid; gap: 0.45rem; background: var(--ss-panel); border-radius: 8px; padding: 0.8rem; }
.barrow { display: grid; grid-template-columns: minmax(110px, 220px) 1fr 64px; align-items: center; gap: 0.6rem; font-size: 0.92rem; }
.barlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlabel small { color: var(--ss-muted); }
.bartrack { height: 14px; background: rgb(255 255 255 / 0.6); border-radius: 99px; overflow: hidden; }
.barfill { display: block; height: 100%; background: var(--ss-accent); border-radius: 99px; }
.barval { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- line charts ---------- */
.chart-wrap { background: var(--ss-panel); border-radius: 8px; padding: 0.4rem; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--ss-rule); }
.chart .tick { fill: var(--ss-ink); font-size: 12px; }
.chart .axis { fill: var(--ss-ink); font-size: 13px; font-weight: 700; font-family: var(--ss-font-head); }
.chart .marker { fill: #fff; stroke: var(--c2); stroke-width: 2.5; }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.9rem; margin: 0 0 0.4rem; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .nav-models { display: none; }  /* the home page lists every forecast */
  .side-about { display: none; }
  .ss-sidebar { gap: 0; }
  .ss-sidebar .ss-cell { padding-bottom: 0.6rem; }
  .ss-nav { flex-direction: row; flex-wrap: wrap; gap: 0.2rem; }
  .ss-nav hr { display: none; }
  .barrow { grid-template-columns: minmax(90px, 140px) 1fr 54px; }
  .search { width: 100%; }
}

.picked .intro { margin: 0.9rem 0 0; font-weight: 600; }
td a { color: var(--ss-ink); font-weight: 600; }