/* ============================================================
   BGF Sentinel — shared theme ("Night Orchard", see DESIGN.md)

   Loaded last by the worker app, the supervisor console and the report,
   so it refines each page's own styles without rewriting them. Colour
   tokens stay in each page's :root (same names everywhere); this file
   only adds what all three should share.
   ============================================================ */

:root {
  --accent: var(--glacier);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--glacier) 38%, transparent);
  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 28px rgba(8, 9, 10, 0.35);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
  background: color-mix(in srgb, var(--glacier) 35%, transparent);
  color: var(--bone);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-danger {
  border-radius: var(--r-md);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease), filter 0.18s var(--ease), transform 0.12s var(--ease);
}
.btn-primary {
  background: var(--glacier);
  color: var(--slate);
  border-color: transparent;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn:disabled,
.btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ── Fields ───────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  border-radius: var(--r-md);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--glacier) !important;
  box-shadow: var(--ring);
}
input::placeholder,
textarea::placeholder { color: var(--bone-faint); opacity: 1; }
input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--glacier); }

/* ── Surfaces ─────────────────────────────────────────────── */
.card,
.modal-content,
.report-card { border-radius: var(--r-lg); }

.empty-state {
  border-style: solid;
  border-color: var(--hair);
  background: color-mix(in srgb, var(--slate-2) 70%, transparent);
  color: var(--bone-dim);
  line-height: 1.55;
}

/* Tables read better with the numbers aligned and quieter row hovers. */
table { font-variant-numeric: tabular-nums; }

/* ── Inline icons (replace emoji glyphs) ─────────────────── */
.ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -0.16em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Scrollbars ───────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--hair-light, var(--hair)) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--hair-light, var(--hair)); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Skeleton shimmer (loading placeholders) ─────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--slate-3);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: bgf-shimmer 1.4s var(--ease) infinite;
}
@keyframes bgf-shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}