:root {
  --bg: #f6f7f9;
  --fg: #222;
  --border: #e3e5e8;
  --border-soft: #eef0f3;
  --muted: #6b7280;
  --card: #fff;

  /* margin-to-edge color scale — close/fail intentionally distinct */
  --safe-bg:  #d4f4dd;  --safe-fg:  #1a6b2e;
  --warn-bg:  #fff4c4;  --warn-fg:  #7a5b00;
  --close-bg: #ffb470;  --close-fg: #5a2800;
  --fail-bg:  #d93a3a;  --fail-fg:  #ffffff;
  --none-bg:  #f3f4f6;  --none-fg:  #9ca3af;
  --stale-bg: #fff4c4;  --stale-fg: #7a5b00;
  --ok-bg:    #d4f4dd;  --ok-fg:    #1a6b2e;
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 1rem;
  background: var(--bg);
  color: var(--fg);
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
header h1 { margin: 0; font-size: 1.25rem; }
.meta {
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.meta .sep { opacity: 0.5; }
.meta form { margin: 0; }
.meta button {
  font: inherit;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 4px;
  cursor: pointer;
}
.meta button:hover { background: var(--border-soft); }

.legend {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.legend .swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-right: 0.15rem;
  vertical-align: -0.1em;
}
.legend .swatch.safe  { background: var(--safe-bg); }
.legend .swatch.warn  { background: var(--warn-bg); }
.legend .swatch.close { background: var(--close-bg); }
.legend .swatch.fail  { background: var(--fail-bg); }
.legend .swatch.none  { background: var(--none-bg); }
.legend .swatch.stale { background: var(--stale-bg); }
.legend .sep { opacity: 0.5; margin: 0 0.3rem; }
.legend .half-hint { opacity: 0.9; }

.empty { color: var(--muted); font-style: italic; }

.table-wrap {
  overflow-x: auto;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  border-radius: 4px;
}
table {
  border-collapse: collapse;
  font-size: 0.85rem;
  width: 100%;
  table-layout: fixed;
  min-width: 70rem;
}
th, td {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  text-align: center;
  white-space: normal;
}
th {
  background: var(--border-soft);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
  vertical-align: bottom;
  text-align: center;
}
th .col-label { font-weight: 600; }
th .col-range {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

/* Fixed-width leading columns so remaining ones divide evenly. */
th.col-scp      { width: 7.5rem; }
th.col-last-run { width: 6rem; }

td.col-scp, th.col-scp {
  text-align: left;
  font-weight: 600;
  background: #fafbfc;
  position: sticky;
  left: 0;
  z-index: 2;
}
th.col-scp { z-index: 3; }

td.col-scp .scp-name { line-height: 1.15; }
td.col-scp .scp-activity {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
td.col-scp.activity-old {
  background: var(--stale-bg);
  color: var(--stale-fg);
}
td.col-scp.activity-old .scp-activity {
  color: var(--stale-fg);
  font-weight: 600;
}

/* Last full selfcheck cell — green when fresh, yellow when stale. */
td.ts {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}
td.ts.ok    { background: var(--ok-bg);    color: var(--ok-fg); }
td.ts.stale { background: var(--stale-bg); color: var(--stale-fg); }

.sync-badge {
  display: inline-block;
  background: var(--fail-bg);
  color: var(--fail-fg);
  padding: 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: 0.05em;
}

/* Split cell: top half = QR #1, bottom half = QR #2.
   Background colors come from a vertical 50/50 linear-gradient on the <td>
   itself — bulletproof regardless of row height (no height:1px hack, no
   absolute positioning, no flex stretching). The two halves are simple
   block elements that flow naturally; their text colors (--top-fg/--bot-fg)
   come from the t-{cls}/b-{cls} classes set on the <td>. */
td.split {
  padding: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(
    to bottom,
    var(--top-bg, transparent) 0 50%,
    var(--bot-bg, transparent) 50% 100%
  );
}
td.split .half {
  display: block;
  padding: 0.22rem 0.35rem;
  line-height: 1.15;
  min-height: 1.4rem;
  text-align: center;
  cursor: pointer;
}
td.split .half.top { color: var(--top-fg, inherit); }
td.split .half.bot { color: var(--bot-fg, inherit); border-top: 1px dashed rgba(0,0,0,0.18); }
td.split .half.none { font-weight: 400; }

td.split.t-safe  { --top-bg: var(--safe-bg);  --top-fg: var(--safe-fg);  }
td.split.t-warn  { --top-bg: var(--warn-bg);  --top-fg: var(--warn-fg);  }
td.split.t-close { --top-bg: var(--close-bg); --top-fg: var(--close-fg); }
td.split.t-fail  { --top-bg: var(--fail-bg);  --top-fg: var(--fail-fg);  }
td.split.t-none  { --top-bg: var(--none-bg);  --top-fg: var(--none-fg);  }

td.split.b-safe  { --bot-bg: var(--safe-bg);  --bot-fg: var(--safe-fg);  }
td.split.b-warn  { --bot-bg: var(--warn-bg);  --bot-fg: var(--warn-fg);  }
td.split.b-close { --bot-bg: var(--close-bg); --bot-fg: var(--close-fg); }
td.split.b-fail  { --bot-bg: var(--fail-bg);  --bot-fg: var(--fail-fg);  }
td.split.b-none  { --bot-bg: var(--none-bg);  --bot-fg: var(--none-fg);  }

/* Single-value cell: color class lives directly on the <td> so the background
   fills the full cell regardless of row height. */
td.cell-single {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
td.cell-single.safe  { background: var(--safe-bg);  color: var(--safe-fg); }
td.cell-single.warn  { background: var(--warn-bg);  color: var(--warn-fg); }
td.cell-single.close { background: var(--close-bg); color: var(--close-fg); }
td.cell-single.fail  { background: var(--fail-bg);  color: var(--fail-fg); }
td.cell-single.none  { background: var(--none-bg);  color: var(--none-fg); font-weight: 400; cursor: default; }

td[data-scp].active-cell,
td.split .half.active-cell {
  outline: 2px solid #2962ff;
  outline-offset: -2px;
}

/* ----- Detail panel ----- */
#detail-panel {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  padding: 0.6rem 0.9rem 0.6rem 0.9rem;
  z-index: 100;
  min-width: 18rem;
  max-width: calc(100vw - 1rem);
  font-size: 0.85rem;
}
#detail-panel[hidden] { display: none; }
#detail-panel dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.7rem;
  margin: 0;
}
#detail-panel dt {
  color: var(--muted);
  font-weight: 500;
}
#detail-panel dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
#detail-panel #d-status {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#d-status.tier-safe  { background: var(--safe-bg);  color: var(--safe-fg); }
#d-status.tier-warn  { background: var(--warn-bg);  color: var(--warn-fg); }
#d-status.tier-close { background: var(--close-bg); color: var(--close-fg); }
#d-status.tier-fail  { background: var(--fail-bg);  color: var(--fail-fg); }
#d-status.tier-none  { background: var(--none-bg);  color: var(--none-fg); }

#detail-close {
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.1rem 0.35rem;
}
#detail-close:hover { color: var(--fg); }

@media (max-width: 640px) {
  body { margin: 0.4rem; }
  header h1 { font-size: 1.05rem; }
  .legend { font-size: 0.7rem; }
  table {
    font-size: 0.72rem;
    min-width: 0;   /* let the scroll container govern on mobile */
  }
  th, td { padding: 0.18rem 0.2rem; }

  /* Rotate every column header except the SCP one. Use vertical-lr + rotate(180deg)
     on the wrapper so text reads bottom-to-top (readable when the phone is tilted
     clockwise, i.e. looking at it from the right side) and label appears visually
     ABOVE range after the tilt. Why vertical-lr (not vertical-rl): in vertical-lr,
     block children stack left-to-right; after rotate(180deg) that becomes
     right-to-left, and after the user's CW tilt the original right-side ends up
     on top — putting the DOM-first child (label) on top. */
  th:not(.col-scp) {
    height: 8rem;
    vertical-align: bottom;
    padding: 0.3rem 0.05rem 0.25rem 0.05rem;
    text-align: center;
  }
  th:not(.col-scp) .col-content {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    display: inline-block;
    text-align: left;
    line-height: 1.1;
  }
  th:not(.col-scp) .col-label,
  th:not(.col-scp) .col-range {
    display: block;
    white-space: nowrap;
    margin: 0;
  }
  th:not(.col-scp) .col-range {
    font-size: 0.62rem;
    margin-top: 0.1rem;
  }

  th.col-scp      { width: 5.5rem; }
  th.col-scp .col-range { font-size: 0.62rem; }
  th.col-last-run { width: 2.6rem; }
  td.col-scp .scp-name { font-size: 0.72rem; }
  td.col-scp .scp-activity { font-size: 0.62rem; }
  td.ts {
    font-size: 0.7rem;
    padding: 0.18rem 0.1rem;
  }
  td.split .half { padding: 0.18rem 0.15rem; min-height: 1.2rem; }
  td.cell-single { padding: 0.2rem 0.15rem; }
  .sync-badge {
    display: block;
    margin: 0.1rem 0 0 0;
    padding: 0 0.2rem;
    font-size: 0.6rem;
  }

  #detail-panel {
    left: 0.4rem;
    right: 0.4rem;
    bottom: 0.4rem;
    transform: none;
    min-width: 0;
    font-size: 0.8rem;
  }
}