/**
 * TS Tickets — shared surface, color, and control tokens.
 * Load after ui-action-layout.css; page-specific rules may follow.
 */
:root {
  --blue-1: #9ec3d8;
  --blue-2: #5f95b2;
  --blue-3: #386f8b;
  --green: #3b7c5b;
  --red: #a53737;
  --amber: #946c2f;
  --ink: #20262d;
  --muted: #66727e;
  --line: #d8e0e6;
  --panel: #ffffff;
  --surface: #f4f7f9;
  --field: #fbfcfd;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  --bg-page: color-mix(in oklab, var(--surface) 94%, var(--ink));
  --bg-elevated: #ffffff;
  --bg-sunken: color-mix(in oklab, var(--ink) 4.5%, var(--surface));
  --bg-tint: color-mix(in oklab, var(--blue-1) 14%, var(--surface));
  --bg-tint-strong: color-mix(in oklab, var(--blue-1) 22%, white);
  --bg-hover: color-mix(in oklab, var(--ink) 6%, var(--surface));
  --bg-selected: color-mix(in oklab, var(--blue-1) 26%, white);

  --ink-soft: color-mix(in oklab, var(--ink) 72%, white);
  --text-body: #364652;

  --hairline: color-mix(in oklab, var(--line) 42%, transparent);
  --hairline-strong: color-mix(in oklab, var(--line) 72%, transparent);
  --border-input: color-mix(in oklab, var(--line) 88%, var(--blue-3));
  --border-input-hover: color-mix(in oklab, var(--blue-2) 35%, var(--line));

  --sem-success-bg: color-mix(in oklab, var(--green) 12%, white);
  --sem-success-fg: color-mix(in oklab, var(--green) 38%, var(--ink));
  --sem-warn-bg: color-mix(in oklab, var(--amber) 11%, white);
  --sem-warn-fg: color-mix(in oklab, var(--amber) 48%, var(--ink));
  --sem-danger-bg: color-mix(in oklab, var(--red) 9%, white);
  --sem-danger-fg: color-mix(in oklab, var(--red) 38%, var(--ink));
  --sem-info-bg: color-mix(in oklab, var(--blue-2) 9%, white);

  --shadow-xs: 0 1px 0 color-mix(in oklab, var(--ink) 6%, transparent);
  --shadow-sm: 0 4px 14px color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-md: 0 12px 36px color-mix(in oklab, var(--ink) 12%, transparent);
  --shadow-lg: 0 22px 56px color-mix(in oklab, var(--ink) 16%, transparent);
  --ring-focus: color-mix(in oklab, var(--blue-2) 55%, white);

  color-scheme: light;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-base: 14px;
  --leading: 1.5;
}

/* --- Appearance: system (OS) / forced light / forced dark (`ui-theme-pref.js`) --- */
html[data-color-scheme="light"] {
  color-scheme: light;
  --blue-1: #9ec3d8;
  --blue-2: #5f95b2;
  --blue-3: #386f8b;
  --green: #3b7c5b;
  --red: #a53737;
  --amber: #946c2f;
  --ink: #20262d;
  --muted: #66727e;
  --line: #d8e0e6;
  --panel: #ffffff;
  --surface: #f4f7f9;
  --field: #fbfcfd;
  --bg-page: color-mix(in oklab, var(--surface) 94%, var(--ink));
  --bg-elevated: #ffffff;
  --bg-sunken: color-mix(in oklab, var(--ink) 4.5%, var(--surface));
  --bg-tint: color-mix(in oklab, var(--blue-1) 14%, var(--surface));
  --bg-tint-strong: color-mix(in oklab, var(--blue-1) 22%, white);
  --bg-hover: color-mix(in oklab, var(--ink) 6%, var(--surface));
  --bg-selected: color-mix(in oklab, var(--blue-1) 26%, white);
  --ink-soft: color-mix(in oklab, var(--ink) 72%, white);
  --text-body: #364652;
  --hairline: color-mix(in oklab, var(--line) 42%, transparent);
  --hairline-strong: color-mix(in oklab, var(--line) 72%, transparent);
  --border-input: color-mix(in oklab, var(--line) 88%, var(--blue-3));
  --border-input-hover: color-mix(in oklab, var(--blue-2) 35%, var(--line));
  --sem-success-bg: color-mix(in oklab, var(--green) 12%, white);
  --sem-success-fg: color-mix(in oklab, var(--green) 38%, var(--ink));
  --sem-warn-bg: color-mix(in oklab, var(--amber) 11%, white);
  --sem-warn-fg: color-mix(in oklab, var(--amber) 48%, var(--ink));
  --sem-danger-bg: color-mix(in oklab, var(--red) 9%, white);
  --sem-danger-fg: color-mix(in oklab, var(--red) 38%, var(--ink));
  --sem-info-bg: color-mix(in oklab, var(--blue-2) 9%, white);
  --shadow-xs: 0 1px 0 color-mix(in oklab, var(--ink) 6%, transparent);
  --shadow-sm: 0 4px 14px color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-md: 0 12px 36px color-mix(in oklab, var(--ink) 12%, transparent);
  --shadow-lg: 0 22px 56px color-mix(in oklab, var(--ink) 16%, transparent);
  --ring-focus: color-mix(in oklab, var(--blue-2) 55%, white);
}

html[data-color-scheme="system"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  html[data-color-scheme="system"] {
    color-scheme: dark;
    --blue-1: #4a6f82;
    --blue-2: #6a9fb8;
    --blue-3: #8ab8cc;
    --green: #5cb88a;
    --red: #e07070;
    --amber: #d4a85c;
    --ink: #e8ecf0;
    --muted: #94a3b8;
    --line: #334155;
    --panel: #1a222c;
    --surface: #121820;
    --field: #161d27;
    --bg-page: color-mix(in oklab, var(--surface) 88%, black);
    --bg-elevated: #1a222c;
    --bg-sunken: color-mix(in oklab, white 6%, var(--surface));
    --bg-tint: color-mix(in oklab, var(--blue-3) 12%, var(--surface));
    --bg-tint-strong: color-mix(in oklab, var(--blue-2) 18%, var(--surface));
    --bg-hover: color-mix(in oklab, white 9%, var(--surface));
    --bg-selected: color-mix(in oklab, var(--blue-2) 22%, var(--surface));
    --ink-soft: color-mix(in oklab, var(--ink) 78%, var(--surface));
    --text-body: #d1dae6;
    --hairline: color-mix(in oklab, var(--line) 55%, transparent);
    --hairline-strong: color-mix(in oklab, var(--line) 78%, transparent);
    --border-input: color-mix(in oklab, var(--line) 70%, var(--blue-2));
    --border-input-hover: color-mix(in oklab, var(--blue-3) 40%, var(--line));
    --sem-success-bg: color-mix(in oklab, var(--green) 16%, var(--surface));
    --sem-success-fg: color-mix(in oklab, var(--green) 55%, var(--ink));
    --sem-warn-bg: color-mix(in oklab, var(--amber) 14%, var(--surface));
    --sem-warn-fg: color-mix(in oklab, var(--amber) 55%, var(--ink));
    --sem-danger-bg: color-mix(in oklab, var(--red) 14%, var(--surface));
    --sem-danger-fg: color-mix(in oklab, var(--red) 55%, var(--ink));
    --sem-info-bg: color-mix(in oklab, var(--blue-2) 14%, var(--surface));
    --shadow-xs: 0 1px 0 color-mix(in oklab, black 35%, transparent);
    --shadow-sm: 0 4px 18px color-mix(in oklab, black 45%, transparent);
    --shadow-md: 0 12px 40px color-mix(in oklab, black 55%, transparent);
    --shadow-lg: 0 22px 60px color-mix(in oklab, black 60%, transparent);
    --ring-focus: color-mix(in oklab, var(--blue-3) 65%, var(--surface));
  }
}

html[data-color-scheme="dark"] {
  color-scheme: dark;
  --blue-1: #4a6f82;
  --blue-2: #6a9fb8;
  --blue-3: #8ab8cc;
  --green: #5cb88a;
  --red: #e07070;
  --amber: #d4a85c;
  --ink: #e8ecf0;
  --muted: #94a3b8;
  --line: #334155;
  --panel: #1a222c;
  --surface: #121820;
  --field: #161d27;
  --bg-page: color-mix(in oklab, var(--surface) 88%, black);
  --bg-elevated: #1a222c;
  --bg-sunken: color-mix(in oklab, white 6%, var(--surface));
  --bg-tint: color-mix(in oklab, var(--blue-3) 12%, var(--surface));
  --bg-tint-strong: color-mix(in oklab, var(--blue-2) 18%, var(--surface));
  --bg-hover: color-mix(in oklab, white 9%, var(--surface));
  --bg-selected: color-mix(in oklab, var(--blue-2) 22%, var(--surface));
  --ink-soft: color-mix(in oklab, var(--ink) 78%, var(--surface));
  --text-body: #d1dae6;
  --hairline: color-mix(in oklab, var(--line) 55%, transparent);
  --hairline-strong: color-mix(in oklab, var(--line) 78%, transparent);
  --border-input: color-mix(in oklab, var(--line) 70%, var(--blue-2));
  --border-input-hover: color-mix(in oklab, var(--blue-3) 40%, var(--line));
  --sem-success-bg: color-mix(in oklab, var(--green) 16%, var(--surface));
  --sem-success-fg: color-mix(in oklab, var(--green) 55%, var(--ink));
  --sem-warn-bg: color-mix(in oklab, var(--amber) 14%, var(--surface));
  --sem-warn-fg: color-mix(in oklab, var(--amber) 55%, var(--ink));
  --sem-danger-bg: color-mix(in oklab, var(--red) 14%, var(--surface));
  --sem-danger-fg: color-mix(in oklab, var(--red) 55%, var(--ink));
  --sem-info-bg: color-mix(in oklab, var(--blue-2) 14%, var(--surface));
  --shadow-xs: 0 1px 0 color-mix(in oklab, black 35%, transparent);
  --shadow-sm: 0 4px 18px color-mix(in oklab, black 45%, transparent);
  --shadow-md: 0 12px 40px color-mix(in oklab, black 55%, transparent);
  --shadow-lg: 0 22px 60px color-mix(in oklab, black 60%, transparent);
  --ring-focus: color-mix(in oklab, var(--blue-3) 65%, var(--surface));
}

.theme-pref {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  background: var(--bg-sunken);
  overflow: hidden;
}

.theme-pref button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: inset -1px 0 0 var(--hairline);
}

.theme-pref button:last-child {
  box-shadow: none;
}

.theme-pref button:hover {
  background: var(--bg-hover);
  color: var(--text-body);
}

.theme-pref button[aria-pressed="true"] {
  background: var(--bg-elevated);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--hairline-strong),
    inset -1px 0 0 var(--hairline);
}

.theme-pref button[aria-pressed="true"]:last-child {
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

.theme-pref button:focus-visible {
  outline-offset: -2px;
  z-index: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--bg-page);
  color: var(--ink);
  font: var(--text-base) / var(--leading) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 10px 18px;
  background: var(--bg-elevated);
  border-bottom: none;
  box-shadow: var(--shadow-xs), 0 12px 24px color-mix(in oklab, var(--ink) 4%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--blue-1) 42%, white),
    color-mix(in oklab, var(--blue-1) 18%, white)
  );
  color: var(--blue-3);
  font-weight: 900;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 55%, transparent);
}

header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
}

button {
  appearance: none;
  min-height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--text-body);
  padding: 8px 14px;
  font: inherit;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

button:hover {
  background: var(--bg-hover);
}

button:active {
  transform: translateY(0.5px);
}

button:focus-visible {
  outline: 2px solid var(--ring-focus);
  outline-offset: 2px;
}

button.primary {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--blue-2) 92%, white) 0%,
    var(--blue-2) 100%
  );
  color: #fff;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 22%, transparent), var(--shadow-xs);
}

button.primary:hover {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--blue-2) 88%, white) 0%,
    color-mix(in oklab, var(--blue-3) 55%, var(--blue-2)) 100%
  );
}

button.secondary {
  background: var(--bg-elevated);
  color: var(--text-body);
  box-shadow: var(--shadow-xs);
}

button.secondary:hover {
  background: var(--bg-sunken);
}

button.ghost {
  background: transparent;
  color: var(--blue-3);
  font-weight: 700;
}

button.ghost:hover {
  background: var(--bg-tint);
  color: var(--blue-3);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="time"],
input[type="date"],
input[type="number"],
select,
textarea {
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  font: inherit;
}

input[type="text"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
  border-color: var(--border-input-hover);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue-2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue-1) 38%, transparent);
  background: var(--bg-elevated);
}

pre {
  font-family: var(--font-mono);
}