/* ---------------------------------------------------------------------------
   The panel reads as a printed spec sheet, not a dashboard.

   Two ideas carry the whole thing and everything else follows from them:

   1. A masthead. The server's name is the largest thing on the page and it sits
      on a full-bleed black rule. That rule is the heaviest line here and it
      belongs to the server, not to any section.

   2. A label column. Section labels live in a fixed 168px column and never
      move; content sits to the right of them. Rules run edge to edge rather
      than around a container, which is why nothing on this page needs a box.

   One hue. Grey and weight do every job colour would otherwise do; the accent
   appears only where something is wrong and wants a person.
   --------------------------------------------------------------------------- */

:root {
  --paper:   #f7f6f3;
  --ink:     #16150f;
  --mid:     #757169;
  --faint:   #a39e94;
  --hair:    #dedad0;   /* between sections */
  --row:     #e6e3da;   /* between table rows */
  --edge:    #cfcabd;   /* input and secondary button borders */
  --accent:  #9c3c2c;

  --gutter:  64px;
  --label:   168px;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ masthead */

.masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px var(--gutter) 22px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
}

/* The flag, drawn rather than loaded, so the panel carries a mark without
   depending on an image file. */
.mark {
  width: 15px;
  height: 22px;
  flex: none;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%);
}

.wordmark span {
  font-size: 19px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.whoami {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a857c;
}

.bleed { height: 1px; background: var(--ink); }
.rule  { height: 1px; background: var(--hair); border: 0; }

/* ----------------------------------------------------------------------- nav */

nav {
  display: flex;
  gap: 30px;
  padding: 0 var(--gutter);
  flex-wrap: wrap;
}

nav a {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a857c;
  text-decoration: none;
  padding: 15px 0 13px;
}

nav a:hover { color: var(--ink); }

/* Inset shadow, not a border: a border would shift the text by a pixel when it
   appears, and the whole row would jog as you move between pages. */
nav a.on {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ink);
}

nav .count { color: var(--accent); font-weight: 600; }

/* -------------------------------------------------------------------- section */

.row {
  display: grid;
  grid-template-columns: var(--label) 1fr;
  padding: 24px var(--gutter);
}

.row > .label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 4px;
}

.row > .body { min-width: 0; }

h1 {
  font-size: 27px;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.sub { font-size: 13.5px; color: var(--mid); margin-top: 5px; }

.muted { color: var(--mid); }
.mono { font-variant-numeric: tabular-nums; }
.right { text-align: right; }

/* Only where something is wrong and wants a person. */
.flag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.note {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

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

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 0 11px;
}

th + th, td + td { padding-left: 18px; }

td {
  padding: 10px 0;
  border-top: 1px solid var(--row);
  vertical-align: baseline;
  font-size: 14px;
}

td.name { font-size: 15px; font-weight: 500; }
td.num  { font-size: 15px; text-align: right; white-space: nowrap; }
td.when { font-size: 12.5px; color: var(--faint); text-align: right; white-space: nowrap; }

tbody a { color: var(--ink); text-decoration: none; }
tbody a:hover { color: var(--accent); }

/* --------------------------------------------------------------------- lines */

/* The log, and every other place a record reads as a sentence rather than a row. */
.lines { display: flex; flex-direction: column; gap: 11px; }

.line {
  display: grid;
  grid-template-columns: 1fr 128px;
  align-items: baseline;
  gap: 18px;
}

.line b { font-weight: 600; }
.line .at { font-size: 12.5px; color: var(--faint); text-align: right; }

/* -------------------------------------------------------------------- record */

.record {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.record .k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.record .v { font-size: 21px; font-weight: 500; margin-top: 3px; }
.record .v small { font-size: 13px; color: var(--faint); font-weight: 400; }

/* ------------------------------------------------------------ inputs, buttons */

input[type=text], input[type=number], input[type=search] {
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 12px;
}

input:focus { outline: none; border-color: var(--ink); }
input::placeholder { color: var(--faint); }

.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 20px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { background: rgba(22, 21, 15, 0.06); }

.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: #2d2b20; }

.btn.quiet { border-color: var(--edge); color: var(--mid); font-weight: 400; }
.btn.quiet:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.btn.small { padding: 5px 13px; font-size: 11.5px; }

/* A form that lives on one line: reason, duration, then the verbs. */
.act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.act .grow { flex: 1 1 200px; min-width: 0; }

.inline { display: flex; gap: 8px; justify-content: flex-end; }
.inline input[type=text] { width: 150px; }

.search { display: flex; gap: 10px; margin-bottom: 20px; }
.search input { flex: 1; }

/* ------------------------------------------------------------------ copy box */

textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 0;
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  padding: 10px 12px;
  resize: vertical;
}

textarea:focus { outline: none; border-color: var(--ink); }

/* ------------------------------------------------------------------ swatches */

.swatches { display: flex; flex-wrap: wrap; gap: 10px 22px; }

.swatch { display: flex; align-items: center; gap: 8px; }

/* Squared off, like everything else here. A round dot would be the only circle
   on the page. */
.swatch .chip {
  width: 14px;
  height: 14px;
  border: 1px solid var(--edge);
}

.swatch code { border-bottom: none; font-size: 12px; }

/* ---------------------------------------------------------------------- tabs */

.tabs { display: flex; gap: 24px; margin-bottom: 18px; }

.tabs a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
  padding-bottom: 4px;
}

.tabs a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* -------------------------------------------------------------------- fields */

/* Label above the thing, the same shape as .record. Every control on this page
   used to rely on a title attribute to say what it was, which meant an unlabelled
   0 sitting next to a Steam ID and nothing to tell you it was immunity. */
.field { display: flex; flex-direction: column; gap: 5px; }

.field > .k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* A field that shows rather than edits, sized to sit level with the inputs. */
.field > .ro {
  font-size: 13.5px;
  color: var(--mid);
  padding: 8px 0;
  white-space: nowrap;
}

/* -------------------------------------------------------------------- admins */

.admin { padding: 22px 0; border-top: 1px solid var(--row); }
.admin:first-child { border-top: none; padding-top: 0; }

.admin-head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.admin-foot { margin-top: 16px; display: flex; gap: 10px; }

/* The page changes mode here, from editing people who exist to creating one who
   does not. That is worth the heaviest line on the page, which is otherwise used
   only under the masthead. */
.newadmin { padding-top: 6px; }

.flags { display: flex; flex-wrap: wrap; gap: 7px 20px; }

.flags label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mid);
  cursor: pointer;
}

.flags input { accent-color: var(--ink); }
.flags input:checked + span { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------- console */

.console {
  border: 1px solid var(--edge);
  padding: 15px 18px;
  margin-top: 16px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 58vh;
  overflow: auto;
}

/* --------------------------------------------------------------------- login */

.signin {
  max-width: 460px;
  margin: 110px auto;
  padding: 0 24px;
  text-align: center;
}

.signin .mark { margin: 0 auto 22px; width: 20px; height: 29px; }

.signin h1 {
  font-size: 20px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}

.signin p { margin-top: 12px; color: var(--mid); }
.signin .go { margin-top: 34px; }
.signin .go .btn { padding: 11px 26px; font-size: 13px; }

.alert {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 10px 14px;
  margin-top: 20px;
  font-size: 13px;
  text-align: left;
}

code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  border-bottom: 1px solid var(--edge);
}

/* --------------------------------------------------------------- narrow view */

@media (max-width: 900px) {
  :root { --gutter: 24px; }

  /* The label column stops being a column and becomes a heading. Squeezing it
     narrower would leave the tracked labels breaking mid-word. */
  .row { grid-template-columns: 1fr; }
  .row > .label { padding: 0 0 12px; }

  .record { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .line { grid-template-columns: 1fr; gap: 2px; }
  .line .at { text-align: left; }
}