/* Playtime tuning panel. Dark by default -- this gets used next to a running game. */

:root {
  color-scheme: dark;
  --bg: #0e1116;
  --panel: #151a21;
  --panel-2: #1b212a;
  --line: #262e3a;
  --text: #e6edf3;
  --muted: #8b96a5;
  --accent: #4c9aff;
  --accent-ink: #04122b;
  --danger: #ff8a5c;
  --danger-bg: #2a1a12;
  --ok: #56d364;
  --warn-bg: #201a0e;
  --warn-line: #4a3a1a;
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* THE `hidden` ATTRIBUTE LOSES TO ANY AUTHOR `display` RULE. Its UA style is
   `[hidden] { display: none }`, which a class like `.gate { display: grid }` outranks -- so
   `el('login').hidden = true` set the attribute and changed nothing, and the password form
   stayed on screen underneath the panel after logging in. This puts it back in charge for
   every element, so nothing else can grow the same bug later. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
}

.muted { color: var(--muted); }
.spacer { flex: 1; }

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

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  width: min(380px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: grid;
  gap: 14px;
}

.card h1 { margin: 0; font-size: 20px; }
.card p { margin: 0; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; color: var(--muted); }

input[type="password"], input[type="text"], input[type="number"], input[type="search"] {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  width: 100%;
  min-width: 0;
}

input:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font: inherit;
  border-radius: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: #3a4655; }
button:disabled { opacity: .45; cursor: default; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
button.ghost { background: transparent; }

.error {
  color: var(--danger);
  font-size: 13px;
}

/* --- shell ------------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.brand { display: flex; gap: 8px; align-items: baseline; }
.topbar input[type="search"] { max-width: 320px; }

.toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.pill {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.notice {
  margin: 0;
  padding: 10px 18px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-line);
  color: #d9c89a;
  font-size: 13px;
}

main {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 18px 80px;
  align-items: start;
}

@media (max-width: 820px) {
  main { grid-template-columns: minmax(0, 1fr); }
  nav#sections { position: static; max-height: none; }
}

nav#sections {
  position: sticky;
  top: 72px;
  display: grid;
  gap: 2px;
  max-height: calc(100dvh - 140px);
  overflow: auto;
}

nav#sections a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
nav#sections a:hover { background: var(--panel); color: var(--text); }
nav#sections a .n { font-variant-numeric: tabular-nums; opacity: .6; }

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

section.group {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

section.group > h2 {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row.changed { background: color-mix(in srgb, var(--accent) 8%, transparent); }

@media (max-width: 640px) {
  .row { grid-template-columns: minmax(0, 1fr); }
}

.name {
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-word;
}
.help {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: 1px;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ctl input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

.reset {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 8px;
  font-size: 12px;
  visibility: hidden;
}
.row.changed .reset { visibility: visible; }
.reset:hover { color: var(--text); }

.default {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.statusbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 12px;
  padding: 8px 18px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.statusbar .ok { color: var(--ok); }
.statusbar .bad { color: var(--danger); }

.empty { padding: 40px; text-align: center; color: var(--muted); }