/* Palette: coolors.co/palette/e63946-f1faee-a8dadc-457b9d-1d3557 */
@font-face {
  font-family: "Space Mono";
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-mono-400.woff2) format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-weight: 700;
  font-display: swap;
  src: url(fonts/space-mono-700.woff2) format("woff2");
}

:root {
  --red: #e63946;
  --honeydew: #f1faee;
  --powder: #a8dadc;
  --blue: #457b9d;
  --navy: #1d3557;
  --u3: #ef7c00;

  --bg: var(--navy);
  --ink: var(--navy);
  --ink-muted: rgb(29 53 87 / 0.6);
  --on-bg: var(--honeydew);
  --card-1: var(--powder);
  --card-2: var(--honeydew);
  --card-3: #fbdcbd;  /* u3, light */
  --badge-s-bg: var(--navy);
  --badge-s-fg: var(--honeydew);
  --badge-u-bg: var(--red);
  --badge-u-fg: var(--honeydew);
  --delay: #b3202f;   /* red, darkened for contrast on light cards */
  --stale-bg: rgb(230 57 70 / 0.16);
  --stale-fg: #8f1a26;

  --header: 36px;
  --board-header: 28px;
  --row: 32px;
  --edge-gap: 0px;  /* extra top gap below the status bar, only in standalone mode */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1d31;
    --ink: var(--honeydew);
    --ink-muted: rgb(241 250 238 / 0.55);
    --card-1: #24405f;  /* navy, lifted */
    --card-2: #1f3a3f;  /* powder, dark */
    --card-3: #3d2814;  /* u3, dark */
    --badge-s-bg: var(--powder);
    --badge-s-fg: var(--navy);
    --delay: #f2727c;   /* red, lifted for contrast on dark cards */
    --stale-bg: rgb(230 57 70 / 0.3);
    --stale-fg: #f8b4ba;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--header) 1fr 1fr 1fr;
  row-gap: 8px;
  padding: calc(env(safe-area-inset-top) + var(--edge-gap)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.2 "Space Mono", ui-monospace, Menlo, monospace;
  -webkit-text-size-adjust: 100%;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px;
  min-width: 0;
  color: var(--on-bg);
}
.page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.status { background: rgb(241 250 238 / 0.14); color: var(--honeydew); }
.page-header.offline .status { background: var(--red); }

.board {
  min-height: 0;
  display: grid;
  grid-template-rows: var(--board-header) 1fr;
  padding: 2px 14px 4px;
  border-radius: 22px;
  background: var(--card-1);
  overflow: hidden;
}
.board[data-board="simmering"] { background: var(--card-2); }
.board[data-board="erdberg"] { background: var(--card-3); }

.board-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
}
.board-header .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-header .stale { display: none; background: var(--stale-bg); color: var(--stale-fg); }
.board-header .stale::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.board.is-stale .stale { display: inline-flex; }

.rows { list-style: none; min-height: 0; overflow: hidden; }

.row {
  height: var(--row);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto 78px;
  align-items: center;
  column-gap: 6px;
  white-space: nowrap;
}
.row.message { grid-template-columns: 1fr; color: var(--ink-muted); }
.row.delayed { cursor: pointer; }

.badge {
  justify-self: start;
  min-width: 42px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--badge-s-bg);
  color: var(--badge-s-fg);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.badge.u { background: var(--badge-u-bg); color: var(--badge-u-fg); }
.badge.u3 { background: var(--u3); }

.dest { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
.planned { font-size: 11px; color: var(--ink-muted); }

.time { text-align: right; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }

.countdown { min-width: 46px; text-align: right; font-size: 11px; color: var(--ink-muted); }
.time sup { font-size: 11px; margin-left: 2px; color: var(--delay); letter-spacing: 0; }
.delayed .time, .delayed .countdown { color: var(--delay); }
.plan-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid var(--ink-muted); margin-left: 4px; vertical-align: 3px;
}

.cancelled .badge, .cancelled .dest, .cancelled .time { opacity: 0.45; }
.cancelled .dest, .cancelled .time { text-decoration: line-through; }
.cancelled .countdown { color: var(--delay); font-weight: 700; }

@media (min-width: 768px) {
  body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: var(--header) 1fr;
    column-gap: 8px;
  }
  .page-header { grid-column: 1 / -1; }
}

/* iOS draws a blur under the status bar in home-screen mode that reaches past the safe area. */
@media (display-mode: standalone) {
  :root { --edge-gap: 20px; }
}