/* ===========================================================================
   Admin panel — SELF-CONTAINED.

   This file loads ALONE. It does not layer on ui.css, and must not be made to.

   It did originally, and the page came out wrong: ui.css defines `.rail` as the
   game's horizontal top bar carrying `grid-area: rail`. This panel's left nav
   uses the same class name, inherited that grid area, found no such named area in
   `.alayout`, and was placed in an implicit track at the bottom of the page —
   while `main` collapsed into the 208px sidebar column, which is why the stat
   tiles rendered as a narrow stack. `.btn` and `.hint` collided as well, and
   ui.css's `html, body { height: 100%; overflow: hidden }` left the page unable
   to scroll.

   Two ways out: rename every class here, or stop sharing the stylesheet. Renaming
   would leave the same trap for the next class the game happens to add, so the
   panel is independent instead. The palette tokens below are a deliberate copy of
   the ones in card.css — the cost of that duplication is a colour drifting out of
   sync, which is visible and harmless; the cost of sharing was a broken layout.

   Density is deliberately higher than the game. An operator scans; a player reads.
   =========================================================================== */

* { box-sizing: border-box; }

:root {
  /* Palette — copied from card.css. Keep in sync by eye if the game re-skins. */
  --void: #0a0a0c;
  --iron: #16181d;
  --iron2: #1e2129;
  --gold: #c8a04a;
  --gold-bright: #e8c874;
  --bone: #d8cfc0;
  --parchment: #e8dcc0;
  --blood-bright: #a51e1e;
  --steel: #5a6068;

  --ea-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --ea-body: 'EB Garamond', Garamond, Georgia, serif;
  --serif: Georgia, 'Times New Roman', serif;
}

/* Scrollable, unlike the game shell: an operator reads long lists, and a fixed
   viewport with hidden overflow simply truncated them. */
html, body { margin: 0; height: auto; min-height: 100%; overflow: visible; }

.adminbody {
  padding: 0; margin: 0;
  background: #0a0a0c;
  color: var(--parchment);
  font-family: var(--ea-body), system-ui, sans-serif;
}

/* --- Header --------------------------------------------------------------- */
.ahead {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(198,160,74,.12), rgba(0,0,0,.5));
  position: sticky; top: 0; z-index: 20;
}
.ahead__brand { display: flex; align-items: center; gap: 9px; }
.ahead__sigil { color: var(--gold); font-size: 1.1rem; }
.ahead__title {
  font-family: var(--ea-display, Georgia, serif);
  letter-spacing: .2em; text-transform: uppercase;
  font-size: .95rem; color: var(--gold);
}
.ahead__meta { display: flex; gap: 7px; flex-wrap: wrap; }
.ahead__right { margin-left: auto; }
.ahead__link {
  color: var(--gold); opacity: .75; text-decoration: none; font-size: .8rem;
  letter-spacing: .08em;
}
.ahead__link:hover { opacity: 1; }

.chip {
  font-size: .7rem; letter-spacing: .07em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(198,160,74,.32); background: rgba(0,0,0,.4);
  white-space: nowrap;
}
.chip--live { border-color: #7fa86a; color: #a9d192; }
.chip--warn { border-color: #b9a06a; color: #e0c98a; }
.chip--bad  { border-color: rgba(190,70,60,.7); color: #d98a80; }

/* --- Layout --------------------------------------------------------------- */
/* Explicit COLUMN PLACEMENT on both children, not just implicit order.
   Implicit placement was what made the earlier collision so destructive: a
   stray `grid-area` on one child silently relocated it and squeezed the other.
   Naming the column each child belongs to makes the layout self-correcting. */
.alayout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 46px);
}
.alayout > .rail  { grid-column: 1; grid-row: 1; }
.alayout > .apane { grid-column: 2; grid-row: 1; }

@media (max-width: 820px) {
  .alayout { grid-template-columns: minmax(0, 1fr); }
  .alayout > .rail  { grid-column: 1; grid-row: 1; }
  .alayout > .apane { grid-column: 1; grid-row: 2; }
}

.rail {
  /* `grid-area` reset defensively: this class name exists in the game stylesheet
     as a grid-positioned top bar, and that is exactly what broke this page. */
  grid-area: auto;
  align-self: stretch;
  border-right: 1px solid rgba(198, 160, 74, .24);
  padding: 14px 0;
  background: rgba(0, 0, 0, .35);
  /* Sticky so the nav stays reachable on a long log view without scrolling back. */
  position: sticky;
  top: 46px;
  height: calc(100vh - 46px);
  overflow-y: auto;
}
.rail__group { margin-bottom: 16px; }
.rail__label {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); opacity: .55; padding: 0 16px 6px;
}
.rail__item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent;
  color: var(--parchment, #e8dcc0); opacity: .72;
  font-family: inherit; font-size: .86rem;
  padding: 7px 16px; cursor: pointer;
}
.rail__item:hover { opacity: 1; background: rgba(198,160,74,.07); }
/* Gold left edge marks position: an operator should never have to read the
   heading to know where they are. */
.rail__item.is-on {
  opacity: 1; color: var(--gold-bright, #e6c67a);
  border-left-color: var(--gold); background: rgba(198,160,74,.11);
}

.apane { padding: 22px 26px 70px; max-width: 1180px; }
.sec { display: none; }
.sec.is-on { display: block; }
.sec__h {
  font-family: var(--ea-display, Georgia, serif);
  font-size: 1.5rem; color: var(--gold); margin: 0 0 3px; letter-spacing: .04em;
}
.sec__sub {
  font-family: var(--serif, Georgia, serif); font-style: italic;
  opacity: .68; margin: 0 0 18px; font-size: .88rem; max-width: 74ch;
}

/* --- Sub-tabs ------------------------------------------------------------- */
.subtabs {
  display: flex; gap: 3px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(198,160,74,.28); margin-bottom: 18px;
}
.subtab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--parchment, #e8dcc0); opacity: .6;
  font-family: inherit; font-size: .8rem; letter-spacing: .07em;
  padding: 8px 13px; cursor: pointer;
}
.subtab:hover { opacity: .9; }
.subtab.is-on {
  opacity: 1; color: var(--gold-bright, #e6c67a); border-bottom-color: var(--gold);
}
.tab { display: none; }
.tab.is-on { display: block; }

/* --- Cards, fields -------------------------------------------------------- */
.card {
  border: 1px solid rgba(198,160,74,.3); border-radius: 2px;
  background: rgba(0,0,0,.3); padding: 15px 17px; margin-bottom: 15px;
}
.card__h {
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.card--det > summary { cursor: pointer; margin-bottom: 0; }
.card--det[open] > summary { margin-bottom: 12px; }

.fld { margin-bottom: 14px; }
.fld--narrow { max-width: 260px; }
.fld label {
  display: block; font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 5px;
}
.in {
  width: 100%; font-family: inherit; font-size: .88rem; padding: 8px 10px;
  background: #0d0b08; color: var(--parchment, #e8dcc0);
  border: 1px solid rgba(198,160,74,.42); border-radius: 2px;
}
.in:focus { outline: 0; border-color: var(--gold); }
.in--search { max-width: 320px; }
.in--tiny { max-width: 130px; }
.hint { font-size: .76rem; opacity: .58; margin-top: 5px; line-height: 1.45; }
.hint code, .sec__sub code, .stub code {
  background: rgba(198,160,74,.12); padding: 1px 4px; border-radius: 2px;
  font-size: .92em;
}
.row { display: flex; gap: 13px; flex-wrap: wrap; }
.row > .fld { flex: 1; min-width: 140px; }
.row--tight { gap: 8px; align-items: flex-start; }
.row--tight .in { flex: 1; }
.det { margin-top: 9px; }
.det summary {
  cursor: pointer; font-size: .76rem; color: var(--gold); opacity: .8;
  margin-bottom: 7px;
}

.ck { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; cursor: pointer; }
.ck--big { font-size: .92rem; margin-top: 4px; }

.btns { display: flex; gap: 11px; margin: 6px 0 4px; flex-wrap: wrap; }
/* Provider preset row. Was relying on ui.css and had no rule of its own, so the
   buttons stacked once this file stopped inheriting from the game stylesheet. */
.presets {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(198, 160, 74, .16);
}
.btn {
  font-family: inherit; font-size: .8rem; letter-spacing: .11em;
  text-transform: uppercase; padding: 9px 17px; cursor: pointer;
  border-radius: 2px; background: none;
  border: 1px solid var(--gold); color: var(--gold);
  transition: background 120ms ease;
}
.btn:hover { background: rgba(198,160,74,.14); }
.btn[disabled] { opacity: .4; cursor: default; }
.btn--sm { padding: 6px 12px; font-size: .72rem; }
.btn--go { border-color: #7fa86a; color: #a9d192; }
.btn--go:hover { background: rgba(127,168,106,.16); }
.btn--warn { border-color: rgba(190,70,60,.65); color: #d98a80; }
.btn--warn:hover { background: rgba(190,70,60,.16); }

/* --- Bars, results -------------------------------------------------------- */
.bar { display: flex; gap: 10px; align-items: center; margin-bottom: 13px; }
.bar--wrap { flex-wrap: wrap; }
.bar__note { font-size: .74rem; opacity: .55; margin-left: auto; white-space: nowrap; }

.result {
  margin-top: 11px; padding: 10px 13px; border-radius: 2px; font-size: .84rem;
  border-left: 3px solid var(--gold); background: rgba(198,160,74,.08);
  white-space: pre-wrap; line-height: 1.5;
}
.result.is-ok  { border-left-color: #7fa86a; background: rgba(127,168,106,.1); }
.result.is-bad { border-left-color: #be463c; background: rgba(190,70,60,.1); }

.warnbox {
  border-left: 3px solid #b9a06a; background: rgba(185,160,106,.09);
  padding: 12px 15px; margin-bottom: 17px; font-size: .84rem; line-height: 1.55;
}
.warnbox strong { color: #e0c98a; }

/* --- Statistic tiles ------------------------------------------------------ */
.statgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 11px; margin-bottom: 17px;
}
.stat {
  border: 1px solid rgba(198,160,74,.26); border-radius: 2px;
  background: rgba(0,0,0,.3); padding: 12px 14px;
}
.stat__v {
  font-family: var(--ea-display, Georgia, serif);
  font-size: 1.6rem; color: var(--gold-bright, #e6c67a); line-height: 1.1;
}
.stat__k {
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  opacity: .6; margin-top: 3px;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: .84rem; }
.kv__k { opacity: .55; white-space: nowrap; }
.kv__v { color: var(--gold-bright, #e6c67a); word-break: break-word; }

/* --- Lists ---------------------------------------------------------------- */
.list { display: flex; flex-direction: column; gap: 9px; }
.list--dense { gap: 4px; }
.item {
  border: 1px solid rgba(198,160,74,.24); border-radius: 2px;
  background: rgba(0,0,0,.28); padding: 11px 14px;
}
.item--staging { border-left: 3px solid #b9a06a; }
.item--live { border-left: 3px solid #7fa86a; }
.item--done { border-left: 3px solid rgba(140,140,140,.6); opacity: .72; }
.item__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.item__id {
  font-family: var(--ea-display, Georgia, serif); font-size: 1rem;
  color: var(--gold-bright, #e6c67a); letter-spacing: .09em;
}
.item__meta { font-size: .76rem; opacity: .62; }
.item__acts { margin-left: auto; display: flex; gap: 7px; }
.item__row { margin-top: 8px; display: flex; gap: 7px; flex-wrap: wrap; }

.who {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .77rem; padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(198,160,74,.3); background: rgba(0,0,0,.3);
}
.who.is-off { opacity: .45; text-decoration: line-through; }
.who.is-ready { border-color: #7fa86a; }
.who__dot { width: 6px; height: 6px; border-radius: 50%; background: #7fa86a; }
.who.is-off .who__dot { background: #8a8a8a; }

.empty {
  padding: 26px; text-align: center; opacity: .5; font-style: italic;
  border: 1px dashed rgba(198,160,74,.24); border-radius: 2px;
}

/* --- Log list ------------------------------------------------------------- */
.loglist {
  font-family: ui-monospace, Consolas, monospace; font-size: .76rem;
  border: 1px solid rgba(198,160,74,.22); border-radius: 2px;
  background: rgba(0,0,0,.4); max-height: 62vh; overflow: auto;
}
.logrow {
  display: grid; grid-template-columns: 78px 74px 1fr;
  gap: 10px; padding: 5px 11px;
  border-bottom: 1px solid rgba(198,160,74,.08);
}
.logrow:hover { background: rgba(198,160,74,.06); }
.logrow.is-bad { background: rgba(190,70,60,.1); }
.logrow.is-miss { color: #c7b78e; }
.logrow__ts { opacity: .45; }
.logrow__who { color: var(--gold); opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.logrow__msg { word-break: break-word; }
.logrow__tag {
  color: #a9d192; }
.logrow.is-bad .logrow__tag { color: #d98a80; }

.dump {
  margin-top: 13px; padding: 13px; max-height: 56vh; overflow: auto;
  font-family: ui-monospace, Consolas, monospace; font-size: .74rem;
  border: 1px solid rgba(198,160,74,.24); background: rgba(0,0,0,.45);
  white-space: pre-wrap; word-break: break-word;
}

/* --- Stubs (declared placeholders) ---------------------------------------- */
.stub {
  border: 1px dashed rgba(198,160,74,.34); border-radius: 2px;
  background: rgba(198,160,74,.04); padding: 20px 22px; max-width: 78ch;
}
.stub__tag {
  display: inline-block; font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: #e0c98a;
  border: 1px solid rgba(185,160,106,.5); border-radius: 999px;
  padding: 3px 10px; margin-bottom: 11px;
}
.stub__h {
  font-family: var(--ea-display, Georgia, serif); font-size: 1.15rem;
  color: var(--gold); margin: 0 0 9px;
}
.stub__sub {
  font-family: var(--ea-display, Georgia, serif); font-size: .9rem;
  color: var(--gold); margin: 18px 0 8px; letter-spacing: .06em;
}
.stub p { font-size: .86rem; line-height: 1.6; margin: 0 0 10px; }
/* The rationale, visually subordinate: it explains WHY the feature is absent,
   which matters, but the reader's first need is knowing that it is absent. */
.stub__why { opacity: .68; font-style: italic; }
.stub__list { font-size: .82rem; line-height: 1.65; opacity: .8; padding-left: 20px; margin: 8px 0 0; }

/* --- Art grid ------------------------------------------------------------- */
.artgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px;
}
.artcell { border: 1px solid rgba(198,160,74,.24); border-radius: 2px; overflow: hidden; }
.artcell img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 18%; display: block; }
.artcell.is-missing {
  display: grid; place-items: center; aspect-ratio: 1/1;
  background: rgba(190,70,60,.1); border-color: rgba(190,70,60,.4);
  color: #d98a80; font-size: .62rem; text-align: center; padding: 5px;
}
.artcell__n {
  font-size: .58rem; padding: 3px 5px; opacity: .6; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}