:root {
  color-scheme: dark;
  /* RuneScape money stack colors: yellow coins, white k, green m, blue b */
  --gp-coins: #ffff00;
  --gp-k: #ffffff;
  --gp-m: #00ff80;
  --gp-b: #00ffff;
  --bg: #1e2024;
  --panel: #26292f;
  --border: #3a3e46;
  --text: #d6d8dc;
  --muted: #8b8f98;
  --accent: #e0b23c;
  --ok: #6fd66f;
  --warn: #e07f3c;
  --err: #e05c5c;
}

* { box-sizing: border-box; }

/* Slim themed scrollbars, replaces Alt1's default heavy scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Drag-to-resize corner grip (wired to alt1.addResizeElement) */
#resize-grip {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  z-index: 60;
  cursor: nwse-resize;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 2px,
    var(--muted) 2px,
    var(--muted) 3px
  );
  opacity: 0.45;
}
#resize-grip:hover { opacity: 0.9; }

/* header doubles as a drag-to-move handle inside Alt1 */
body.alt1-window header { cursor: move; }

/* our display rules on <main>/<pre> would otherwise override the UA's [hidden] */
[hidden] { display: none !important; }

/* NB: spacing between flex children uses margins, NOT the flex `gap` property.
   Older Alt1 ships Chromium 83 and flex `gap` needs Chrome 84, so it is a no-op
   there. Grid `gap` (Chrome 66) is fine and kept. The margin fallbacks live in
   the "flex-gap fallbacks" block lower down. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

h1 {
  margin: 0;
  font-size: 15px;
  color: var(--accent);
}

#status { font-size: 11px; color: var(--muted); }
#status[data-state="idle"] { color: var(--ok); }
#status[data-state="unlinked"] { color: var(--warn); }
#status[data-state="error"] { color: var(--err); }
#status[data-state="fighting"] { color: var(--accent); }
#status[data-state="armed"] { color: var(--ok); font-weight: 700; }
#status[data-state="pending"] { color: var(--warn); font-weight: 700; }

main {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

/* ---- tracking mode: compact overlay layout ---- */
/* the app title/status header shows only on the home hub; the tracking overlay
   and each sub-page carry their own heading, so hide it there for more room */
body.mode-tracking header,
body[data-screen="setup"] header,
body[data-screen="stats"] header,
body[data-screen="log"] header { display: none; }
#track-screen { padding: 6px; }

.primary {
  background: var(--accent);
  color: #1b1d21;
  font-weight: 700;
  font-size: 14px;
  padding: 8px;
  width: 100%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.primary:hover { filter: brightness(1.12); }

.track-top { display: flex; align-items: stretch; }
#track-state {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  overflow: hidden;
}
/* the depleting boss HP fill (green), grows from the left, shrinks as HP drops */
#hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(111, 214, 111, 0.28);
  transition: width 0.25s ease;
  z-index: 0;
}
/* the vertical marker line at the player's arm threshold */
#hp-threshold {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  z-index: 1;
}
#track-state-text {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#track-state[data-state="idle"] { color: var(--ok); }
#track-state[data-state="unlinked"] { color: var(--warn); }
#track-state[data-state="fighting"] { color: var(--text); border-color: var(--accent); }
#track-state[data-state="armed"] {
  color: #eafff0;
  border-color: var(--ok);
  box-shadow: 0 0 6px rgba(111, 214, 111, 0.55);
}
#track-state[data-state="armed"] #hp-fill { background: rgba(111, 214, 111, 0.55); }
#track-state[data-state="pending"] { color: #2b1a09; background: var(--warn); border-color: var(--warn); }
#to-setup {
  padding: 0 10px;
  font-size: 14px;
  flex-shrink: 0;
}

/* Amber strip shown only while a sale is pending: countdown + a way out. */
#pending-banner {
  display: flex;
  align-items: center;
  background: rgba(224, 127, 60, 0.14);
  border: 1px solid var(--warn);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
}
#pending-banner[hidden] { display: none; }
#pending-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pending-cancel {
  flex-shrink: 0;
  margin-left: 6px;
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
}

.mini-btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
}
/* - and + flank the session-kills number (undo last / manual +1). Kept a
   touch under the value's 21px line so all three cards stay the same height.
   Muted at rest; hover shows intent (remove = red, add = green). */
.stat-adjust {
  display: flex;
  align-items: center;
}
.stat-adjust .mini-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: transparent;
  border-color: transparent;
  color: rgba(139, 143, 152, 0.5); /* faded until you mean it */
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
#undo-btn:hover {
  border-color: var(--err);
  color: var(--err);
  background: rgba(224, 92, 92, 0.12);
}
#plus-one-btn:hover {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(111, 214, 111, 0.12);
}
.stat-adjust .mini-btn:active { transform: scale(0.9); }
.stat-adjust b { margin: 0 8px; }

.track-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 6px; /* grid gap works in Chromium 83 */
}
.stat {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat b {
  font-size: 17px;
  color: var(--text);
  /* fixed line-height (not a multiplier) so the smaller boss name still centres
     at the same height as the 17px numbers and all three values line up */
  line-height: 21px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat b.boss-value { font-size: 13px; } /* names are longer than a number */
.stat span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
}
.timer-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.timer {
  font: 700 16px/1 Consolas, monospace;
  letter-spacing: 0.06em;
  color: var(--text);
}

.tiny { font-size: 11px; color: var(--muted); }

/* ---- home hub: start action + page nav ---- */
.home-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px; /* grid gap works in Chromium 83 */
}
.nav-btn {
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.home-guide-link { display: block; width: fit-content; margin: 2px auto 0; }

/* ---- full-screen sub-pages (Setup / Stats / Log) ---- */
.page-head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  flex-shrink: 0;
}
.page-head h2 { margin: 0; font-size: 14px; color: var(--accent); }
.back-btn {
  padding: 2px 9px;
  margin-right: 8px;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.section-sub { margin: 10px 0 2px; font-size: 12px; color: var(--accent); }

.game-settings {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}
.game-settings li { margin: 2px 0; }

.start-row { display: flex; align-items: stretch; }
.start-row .primary { flex: 1; }
#new-session-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
}

/* the Log page fills its space and scrolls the log itself, keeping the row of
   buttons pinned at the top */
#page-log { overflow: hidden; }
#page-log .actions { flex-shrink: 0; }
/* keep the stats table header visible while its rows scroll */
#sales thead th { position: sticky; top: 0; background: var(--panel); }

/* ---- home / setup screen ---- */
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  font-size: 11px;
  text-decoration: underline;
  flex-shrink: 0;
}
.link-btn:hover { border: none; filter: brightness(1.15); }

.ok-text { color: var(--ok); font-weight: 700; }
.err-text { color: var(--err); font-weight: 700; }

/* Setup page: detection self-test row + version stamp */
.self-test {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.self-test span { margin-left: 8px; font-size: 11px; min-width: 0; }
.app-version {
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--muted);
}

.readiness {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px; /* grid gap works in Chromium 83 */
  font-size: 11px;
}
.readiness li {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  line-height: 1.25;
}
.readiness li.ok { color: var(--ok); }
.readiness li.bad { color: var(--err); grid-column: 1 / -1; }

/* ---- confirm modal ---- */
#modal-backdrop,
#welcome-backdrop,
#start-backdrop {
  position: fixed;
  /* NB: use top/right/bottom/left, NOT the `inset` shorthand: Alt1's Chromium
     predates `inset` (Chrome 87), where it silently collapses the fixed layer to
     its content size and leaves the rest of the window unblurred. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: rgba(12, 13, 16, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  max-width: 300px;
  width: 100%;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.welcome-modal {
  max-width: 560px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the inner body scrolls; the Close footer stays pinned */
}
.welcome-body {
  overflow-y: auto;
  min-height: 0; /* let this flex child shrink so it can scroll */
}
.welcome-modal h2 {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--accent);
}
.welcome-modal p { margin: 0 0 4px; }
.welcome-modal .flow { font-size: 12px; line-height: 1.3; }
.welcome-modal .hint { font-size: 11px; line-height: 1.3; }
.welcome-modal .modal-actions { margin-top: 5px; flex-shrink: 0; }
.welcome-modal .modal-actions button { padding: 3px 16px; font-size: 12px; }
.modal p { margin: 0 0 12px; }
.modal-actions { display: flex; justify-content: flex-end; }
.modal-actions button { padding: 5px 14px; font-weight: 600; }
.modal-actions button.confirm {
  background: var(--accent);
  color: #1b1d21;
  border-color: var(--accent);
}
.modal-actions button.danger {
  background: var(--err);
  color: #fff;
  border-color: var(--err);
}

.warning {
  background: #4a2f22;
  border: 1px solid var(--warn);
  border-radius: 4px;
  padding: 8px;
}
.warning a { color: var(--accent); }

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}
td:nth-child(2), th:nth-child(2) { text-align: right; }

#no-sales { color: var(--muted); margin: 8px 2px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  margin: 6px 0;
}
button {
  background: #33373f;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
button:hover { border-color: var(--accent); }

.field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0;
  color: var(--text);
}
.field > input,
.field > select { flex: 1 1 90px; }
input,
select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 6px;
  font: inherit;
  font-size: 12px;
  min-width: 0;
}
input:focus,
select:focus { outline: none; border-color: var(--accent); }
input.invalid,
select.invalid { border-color: var(--err); }
.start-modal { max-width: 360px; }
.start-modal h2 { margin: 0 0 8px; font-size: 14px; color: var(--accent); }

.hint { color: var(--muted); font-size: 11px; margin: 6px 0 2px; }

.preview { color: var(--muted); font-size: 11px; white-space: nowrap; }
.preview.invalid { color: var(--err); }

/* GP amounts colored like the game's coin stacks */
.gp-coins { color: var(--gp-coins); }
.gp-k { color: var(--gp-k); }
.gp-m { color: var(--gp-m); }
.gp-b { color: var(--gp-b); }

.toggle {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
}
.toggle input { accent-color: var(--accent); }

#debug-panel {
  margin: 4px 0;
  white-space: pre;
  overflow-x: auto;
  font: 11px/1.5 Consolas, monospace;
  color: var(--text);
  background: var(--bg);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  padding: 6px 8px;
}

#log {
  flex: 1;
  min-height: 60px;
  margin: 4px 0 0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 11px/1.4 Consolas, monospace;
  color: var(--muted);
  background: var(--bg);
  border-radius: 3px;
  padding: 6px;
}

/* ---- flex-gap fallbacks (Chromium 83 has no flex `gap`, Chrome 84+) ----
   Margins reproduce the spacing the flex rows/columns above would have gotten
   from `gap`. Grid containers keep their real `gap` (Chrome 66). */
main > * + * { margin-top: 10px; }
#track-screen > * + * { margin-top: 6px; }
.track-top > * + * { margin-left: 6px; }
.track-meta > * + * { margin-left: 8px; }
.modal-actions > * + * { margin-left: 8px; }
.actions > * { margin-right: 6px; margin-bottom: 6px; }
.field > * { margin-left: 6px; }
.start-row > * + * { margin-left: 8px; }
.toggle input { margin-right: 5px; }

/* ---- compact layout for small overlay windows ---- */
@media (max-height: 380px), (max-width: 470px) {
  header { padding: 3px 8px; }
  h1 { font-size: 12px; }
  #status { font-size: 10px; }
  main { padding: 6px; }
  main > * + * { margin-top: 5px; }
  .primary { padding: 5px; font-size: 13px; }
  #new-session-btn { padding: 5px 9px; font-size: 12px; }
  .nav-btn { padding: 7px 5px; font-size: 12px; }
  .readiness { margin-top: 5px; padding-top: 5px; }
  .readiness li { padding: 2px 5px; }
  .home-guide-link { margin-top: 1px; }
  .field { margin: 4px 0; }
  .hint { margin: 4px 0 2px; }
}

/* very short windows: drop the app-title header on the home hub for the most
   room (sub-pages and the tracking screen already hide it) */
@media (max-height: 250px) {
  body[data-screen="home"] header { display: none; }
}