/* Base: tokens, reset, shared controls. Page layouts live in their own files. */

:root {
  color-scheme: dark;

  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1f232c;
  --line: #2c323e;
  --line-strong: #3b4252;
  --text: #e8eaf0;
  --muted: #9aa3b2;

  /* One color per job (Rule 7). */
  --tone-primary: #3e7bfa;
  --tone-danger: #e5484d;
  --tone-success: #30a46c;
  --tone-live: #e93d82;
  --tone-vod: #8e4ec6;
  --tone-history: #f76b15;
  --tone-mail: #12a594;
  --tone-star: #ffc53d;

  --border: 2px;
  --radius: clamp(8px, 0.5vw + 6px, 14px);
  --space-1: clamp(4px, 0.3vw + 3px, 8px);
  --space-2: clamp(8px, 0.6vw + 6px, 14px);
  --space-3: clamp(12px, 1.2vw + 8px, 24px);
  --space-4: clamp(16px, 2vw + 10px, 36px);
  --step--1: clamp(0.8rem, 0.15vw + 0.76rem, 0.875rem);
  --step-0: clamp(0.94rem, 0.2vw + 0.88rem, 1rem);
  --step-1: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem);
  --step-2: clamp(1.3rem, 1vw + 1.05rem, 1.8rem);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.45;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--tone-primary);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: var(--step--1);
}

/* Controls */

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

input {
  width: 100%;
  min-width: 0;
  padding: var(--space-2);
  background: var(--bg);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: var(--border) solid var(--tone-primary);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  min-height: 2.5em;
  background: transparent;
  border: var(--border) solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-primary {
  background: var(--tone-primary);
  border-color: var(--tone-primary);
  color: #fff;
}

.btn-danger {
  border-color: var(--tone-danger);
  color: var(--tone-danger);
}

.btn-mail {
  border-color: var(--tone-mail);
  color: var(--tone-mail);
}

.btn-small {
  min-height: 2.1em;
  padding: 2px var(--space-2);
  font-size: var(--step--1);
}

.error {
  color: var(--tone-danger);
}

/* Top bar shared by every signed-in page: brand, nav, account each own their part. */

.shell-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: calc(var(--safe-top) + var(--space-2)) calc(var(--safe-right) + var(--space-3)) var(--space-2)
    calc(var(--safe-left) + var(--space-3));
  background: var(--surface);
  border-bottom: var(--border) solid var(--line);
}

.bar-brand {
  font-weight: 700;
  font-size: var(--step-1);
}

.bar-nav {
  display: flex;
  gap: var(--space-3);
  margin-right: auto;
  overflow-x: auto;
}

.bar-nav a {
  padding: var(--space-1) 0;
  color: var(--muted);
  text-decoration: none;
  border-bottom: var(--border) solid transparent;
}

.bar-nav a.tone-live {
  --tone: var(--tone-live);
}

.bar-nav a.tone-vod {
  --tone: var(--tone-vod);
}

.bar-nav a.tone-history {
  --tone: var(--tone-history);
}

.bar-nav a.tone-mail {
  --tone: var(--tone-mail);
}

.bar-nav a:hover,
.bar-nav a[aria-current="page"] {
  color: var(--tone);
  border-bottom-color: var(--tone);
}

.bar-account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.bar-account .username {
  color: var(--muted);
}

/* Tones for text accents */

.tone-live {
  color: var(--tone-live);
}

.tone-vod {
  color: var(--tone-vod);
}

.tone-history {
  color: var(--tone-history);
}

.tone-mail {
  color: var(--tone-mail);
}