body.admin {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #222;
  background: #f7f7f7;
}

.admin-nav {
  background: #2d4059;
  padding: 0.75em 1.5em;
  display: flex;
  /* Wraps because this nav now spans the whole admin area rather than just the
     booking pages: six links and a button do not fit a phone on one line, and
     without this the last of them are simply off the side of the screen. */
  flex-wrap: wrap;
  gap: 0.75em 1.5em;
  align-items: center;
}

.admin-nav a {
  color: #fff;
  text-decoration: none;
}

.admin-nav a:hover {
  text-decoration: underline;
}

.admin-logout-form {
  margin: 0 0 0 auto;
}

.admin-inline-form {
  display: inline;
}

.admin-inline-form button {
  background: none;
  border: 1px solid #b00020;
  color: #b00020;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  cursor: pointer;
}

.admin-logout-form button {
  background: none;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.3em 0.8em;
  border-radius: 4px;
  cursor: pointer;
}

.admin-main {
  max-width: 900px;
  margin: 2em auto;
  padding: 0 1.5em;
}

.admin-login {
  max-width: 320px;
  margin: 4em auto;
  padding: 2em;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.admin-login label,
.admin-form label {
  display: block;
  margin-top: 1em;
  font-weight: 600;
}

.admin-login input,
.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  margin-top: 0.3em;
  font-size: 1em;
}

.admin-form select.admin-inline-select {
  width: auto;
  display: inline-block;
  margin-right: 0.5em;
}

.admin-hint {
  margin: 0.3em 0 0;
  color: #666;
  font-size: 0.9em;
}

.admin-login button,
.admin-form-actions button {
  margin-top: 1.5em;
  padding: 0.5em 1.5em;
  background: #2d4059;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.admin-form-actions {
  margin-top: 1.5em;
  display: flex;
  gap: 1em;
  align-items: center;
}

.admin-error {
  color: #b00020;
}

.admin-status {
  color: #1a7a2e;
}

.admin-success {
  color: #1a7a2e;
}

.admin-failure {
  color: #b00020;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.6em 0.8em;
  border-bottom: 1px solid #ddd;
}

.admin-table th {
  background: #eee;
}

.admin-table tr.admin-next-run {
  background: #fff3cd;
  font-weight: 600;
}

/* ---- Analytics ------------------------------------------------------ */

.admin-main:has(.an-cards) { max-width: 1040px; }

.an-warn, .an-note {
  border-radius: 5px;
  padding: 0.9em 1.1em;
  margin-bottom: 1.4em;
  font-size: 0.92em;
}
.an-warn { background: #fdecea; border: 1px solid #f3b6ae; }
.an-note { background: #eef2f7; border: 1px solid #d5dbe3; }
.an-warn p, .an-note p { margin: 0.4em 0 0; }
.an-warn pre {
  margin: 0.6em 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.86em;
  color: #7a2018;
}

.an-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.6em;
  align-items: baseline;
  margin-bottom: 1.4em;
}
.an-range, .an-sitepick { display: flex; flex-wrap: wrap; gap: 0.5em; }
.an-range a, .an-sitepick a {
  font-size: 0.85em;
  text-decoration: none;
  color: #2d4059;
  border: 1px solid #d5dbe3;
  border-radius: 999px;
  padding: 0.25em 0.8em;
  background: #fff;
}
.an-range a.on, .an-sitepick a.on {
  background: #2d4059;
  border-color: #2d4059;
  color: #fff;
}
.an-range a:hover, .an-sitepick a:hover { border-color: #2d4059; }

.an-cards { display: flex; flex-wrap: wrap; gap: 1em; margin-bottom: 1.8em; }
.an-card {
  flex: 1 1 150px;
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 6px;
  padding: 0.9em 1em;
}
.an-card .n { display: block; font-size: 1.7em; color: #2d4059; line-height: 1.1; }
.an-card .l { display: block; font-size: 0.78em; color: #6b7c91; margin-top: 0.25em; }
.an-card.muted .n { color: #8f9bab; }

.an-sub { font-weight: normal; font-size: 0.7em; color: #6b7c91; }

/* One height for the whole chart, so dragging the grip moves the plot, the
   label gutter and the crosshair together instead of leaving them behind. */
.an-chart {
  --an-h: 300px;
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 6px;
  padding: 0.9em 1em;
}
.an-plot { position: relative; padding-left: 3.4em; height: var(--an-h); }
.an-canvas, .an-chart svg { height: 100%; }
.an-chart svg { display: block; width: 100%; }

/* The grip. A full-width bar rather than a corner handle: the chart only
   resizes one way, and a wide target is easier to grab. */
.an-grip {
  height: 11px;
  margin: 0.15em 0 -0.2em;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.an-grip::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: #d4dae2;
}
.an-grip:hover::before, .an-grip:focus-visible::before { background: #9fb0c4; }
.an-grip:focus-visible { outline: 2px solid #1f6f9c; outline-offset: 2px; }
.an-chart.sizing { user-select: none; }
.an-chart.sizing .an-grip::before { background: #2d4059; }

/* Labels live in HTML, not in the SVG: the plot is stretched to the page width
   with preserveAspectRatio="none", which would smear text sideways. */
.an-ylabels {
  position: absolute;
  left: 0;
  top: 0;
  width: 3.1em;
  height: 100%;
  font-size: 0.75em;
  color: #8f9bab;
  font-variant-numeric: tabular-nums;
}
.an-ylabels span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

/* Own positioning context for the plotted area, so the crosshair's left:X%
   means "across the chart" and not "across the chart plus its label gutter". */
.an-canvas { position: relative; }

.an-cross {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: #2d4059;
  opacity: 0.45;
  pointer-events: none;
}

.an-tip {
  position: absolute;
  top: 0.4em;
  z-index: 5;
  min-width: 9em;
  background: #fff;
  border: 1px solid #d5dbe3;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(28, 40, 55, 0.15);
  padding: 0.5em 0.65em;
  font-size: 0.78em;
  pointer-events: none;
  margin-left: 0.6em;
  margin-right: 0.6em;
}
.an-tip .d { font-weight: 600; color: #2d4059; margin-bottom: 0.35em; }
.an-tip > div { display: flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.an-tip b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.an-tip .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.an-tip .t { border-top: 1px solid #eceff3; margin-top: 0.35em; padding-top: 0.35em; color: #6b7c91; }
.an-tip .q { color: #8f9bab; }
.an-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.75em;
  color: #6b7c91;
  margin-top: 0.5em;
}

.an-table { width: 100%; border-collapse: collapse; font-size: 0.9em; background: #fff; }
.an-table th, .an-table td { text-align: left; padding: 0.45em 0.6em; border-bottom: 1px solid #eceff3; }
.an-table th { font-weight: 600; color: #6b7c91; font-size: 0.85em; }
.an-table td.num, .an-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table td.muted { color: #8f9bab; }
.an-table td.path {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.92em;
  word-break: break-all;
}

.an-columns { display: flex; flex-wrap: wrap; gap: 1.5em; }
.an-columns > div { flex: 1 1 320px; min-width: 0; }

.an-empty { color: #6b7c91; font-size: 0.9em; }
.an-foot { color: #6b7c91; font-size: 0.8em; margin-top: 2.2em; line-height: 1.6; }

.an-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.4em;
  margin: 0.8em 0 0;
  padding: 0;
  font-size: 0.82em;
}
.an-legend li { display: flex; align-items: center; gap: 0.45em; }
.an-legend .sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.an-legend a,
.an-legend .nm { color: #2d4059; text-decoration: none; }
.an-legend a:hover { text-decoration: underline; }
.an-legend .n { color: #6b7c91; font-variant-numeric: tabular-nums; }

/* Rows the chart leaves out: still worth reading, not worth counting. */
.an-table tr.aside .path,
.an-table tr.aside .num { color: #93a0b0; }
.an-table tr.aside .path { font-style: italic; }
.an-table .tag {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0 0.4em;
  border-radius: 2px;
  font-size: 0.75em;
  font-style: normal;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.an-table .tag.probe { background: #f6dede; color: #8d3b3b; }
.an-table .tag.admin { background: #e4e9f0; color: #5a6b80; }

.an-hint {
  margin: -0.3em 0 0.7em;
  font-size: 0.8em;
  color: #8f9bab;
}

.an-scope {
  margin: 0 0 0.6em;
  font-size: 0.85em;
  color: #2d4059;
  font-weight: 600;
}
.an-scope span { color: #8f9bab; font-weight: normal; }

.an-table tr.on td { background: #eef2f7; }

/* ---------- admin hub ---------- */

.admin-nav-sep {
    display: inline-block;
    width: 1px;
    height: 1em;
    background: #c3ccd7;
    margin: 0 0.3em;
    vertical-align: -0.15em;
}

.admin-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-top: 1.5em;
}

.admin-tile {
    flex: 1 1 15em;
    display: block;
    padding: 1.1em 1.2em;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.admin-tile:hover {
    border-color: #2d4059;
    box-shadow: 0 1px 4px rgba(45, 64, 89, 0.12);
}

.admin-tile-name {
    display: block;
    font-size: 1.15em;
    font-weight: 600;
    color: #2d4059;
}

.admin-tile-note {
    display: block;
    margin-top: 0.4em;
    font-size: 0.88em;
    color: #6b7c91;
    line-height: 1.45;
}

.admin-tile-warn { color: #a6362a; }

/* Count of reports waiting, on the hub tile and beside a category name. */
.admin-badge {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 0.4em;
    margin-left: 0.4em;
    background: #a6362a;
    color: #fff;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    vertical-align: 0.15em;
}

/* The category table has eleven columns and will not fit a phone. Scrolling the
   table itself keeps the rest of the page from sliding sideways with it. */
.an-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.an-scroll .an-table { min-width: 40rem; }

/* The separators only earn their space on one line. */
@media (max-width: 40rem) {
    .admin-nav-sep { display: none; }
    .admin-logout-form { margin-left: 0; }
}

/* ---------- trivia report queue ---------- */

.admin-report {
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 0.9em 1.1em;
    margin-bottom: 0.9em;
}

.admin-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em;
    margin-bottom: 0.6em;
}

.admin-reason { font-weight: 600; color: #2d4059; }

.admin-report-meta { font-size: 0.82em; color: #8f9bab; }
.admin-report-meta code { font-size: 0.95em; }

/* Where the report stands. "new" is the only one that needs to catch the eye. */
.admin-chip {
    margin-left: auto;
    padding: 0.1em 0.6em;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-chip-new { background: #fdecea; color: #a6362a; }
.admin-chip-valid { background: #fff4e0; color: #8a5a12; }
.admin-chip-fixed { background: #e7f4ea; color: #2f6b3d; }
.admin-chip-rejected { background: #eef2f7; color: #6b7c91; }

.admin-q { margin: 0 0 0.3em; line-height: 1.5; }
.admin-a { margin: 0 0 0.3em; color: #2d4059; }
.admin-cite { margin: 0; font-size: 0.82em; color: #8f9bab; }
.admin-gone { margin: 0 0 0.5em; color: #a6362a; font-size: 0.9em; }

.admin-comment {
    margin: 0.7em 0 0;
    padding: 0.5em 0.8em;
    border-left: 3px solid #c3ccd7;
    background: #f7f9fb;
    color: #41506b;
    font-size: 0.9em;
}

.admin-reviewed {
    margin: 0.7em 0 0;
    font-size: 0.82em;
    color: #6b7c91;
}

.admin-triage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.9em;
    padding-top: 0.8em;
    border-top: 1px solid #eceff3;
}

.admin-note-label { font-size: 0.82em; color: #6b7c91; }

.admin-triage input[type="text"] {
    flex: 1 1 12em;
    min-width: 0;
    padding: 0.35em 0.5em;
    border: 1px solid #c3ccd7;
    border-radius: 4px;
    font: inherit;
    font-size: 0.9em;
}

.admin-verdicts { display: flex; gap: 0.4em; }

.admin-verdicts button {
    padding: 0.35em 0.8em;
    border: 1px solid #c3ccd7;
    border-radius: 4px;
    background: #f7f9fb;
    color: #2d4059;
    font: inherit;
    font-size: 0.88em;
    cursor: pointer;
}

.admin-verdicts button:hover { border-color: #2d4059; background: #eef2f7; }
.admin-verdicts .admin-reopen { color: #6b7c91; }

@media (max-width: 40rem) {
    .admin-triage input[type="text"] { flex-basis: 100%; }
    .admin-verdicts { flex-wrap: wrap; }
}