/*
 * Support console.
 *
 * DELIBERATELY NOT THE CUSTOMER APP'S DESIGN.
 *
 * The customer app is a dark, quiet, considered thing you look at for
 * pleasure. This is an instrument. It should never be mistaken for the
 * product -- partly because a support agent switching between the two must
 * always know which one they are typing into, and partly because anything
 * that reads a stranger's collection should feel like a tool with a log,
 * not an app.
 *
 * So: system fonts, high density, hairlines, one accent used only for
 * actions and errors. Nothing decorative.
 */

:root {
  --ground: #fbfbfa;
  --panel: #ffffff;
  --rule: #e2e2dd;
  --ink: #17181a;
  --muted: #6b6d70;
  --accent: #7a2d0c;      /* the same burnt orange the app uses for risk */
  --accent-soft: #fdf4ef;
  --warn: #8a5a00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #101113;
    --panel: #17181b;
    --rule: #2a2c30;
    --ink: #eceded;
    --muted: #9a9da2;
    --accent: #e8846a;
    --accent-soft: #241a17;
    --warn: #d8a44a;
  }
}

* { box-sizing: border-box; }

/* THE `hidden` ATTRIBUTE MUST WIN.
 *
 * `hidden` works by a UA rule of `display: none`, and ANY author rule with
 * a display wins over it -- `.centre { display: flex }` below did exactly
 * that, so the signed-out panel stayed on screen above the signed-in app.
 * Every assertion still passed, because the app really had rendered; only
 * looking at the page showed it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
}

.mono, .mono input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* ---- chrome ---- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.mark { color: var(--accent); }
.who { display: flex; align-items: center; gap: 12px; }
.agent {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

main { max-width: 1080px; margin: 0 auto; padding: 20px; }

.centre {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.centre h1 { margin: 0; font-size: 22px; }

/* ---- panels ---- */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.panel-head h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.count {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
}

/* ---- form ---- */

.row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.row:last-child { margin-bottom: 0; }
.grow { flex: 1; }

.field { display: block; }
.label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
}
input[type="text"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font: inherit;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.primary { background: var(--accent); color: #fff; }
.primary:hover { filter: brightness(1.08); }
.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.ghost:hover { border-color: var(--muted); }

.note, .muted { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.fine {
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 24px;
}

/* ---- status ---- */

.status {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  margin: 0 0 14px;
}
.status.error {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.status.warn { border-color: var(--warn); color: var(--warn); }

/* ---- tables ---- */

table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
tbody tr:last-child td { border-bottom: 0; }

/* Wide tables scroll inside their panel rather than the page. */
.panel { overflow-x: auto; }

.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: 12.5px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .row { flex-direction: column; align-items: stretch; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
}