/* ============================================================
   Reaction ERP — Command-center skin
   A purely visual layer over theme.css + layout.css: the game
   aesthetic (HUD frames, energy lines, XP shimmer, glow) without
   touching a single component's geometry, markup or behaviour.
   Loaded after layout.css so it only overrides paint; loaded
   before responsive.css so small screens still win.
   Delete this file and the app returns to the plain skin.
   ============================================================ */

:root {
  --hud-line: rgba(0, 112, 192, .34);   /* corner brackets, edge lines  */
  --hud-glow: rgba(0, 112, 192, .22);   /* soft light behind live parts */
  --hud-grid: rgba(35, 55, 75, .045);   /* drafting grid on the ground  */
}
[data-theme="dark"] {
  --hud-line: rgba(124, 196, 255, .30);
  --hud-glow: rgba(64, 156, 255, .30);
  --hud-grid: rgba(124, 196, 255, .05);
}

/* ---------- The ground: a drafting grid behind everything ----------
   The same idea as the login screen's blueprint, at a fraction of the
   strength: panels sit on solid surfaces, so the grid only shows in the
   gutters between them and never behind text. */
.view {
  background-image:
    linear-gradient(var(--hud-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hud-grid) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* ---------- Sidebar: the game menu ---------- */
/* The same grid, in the sidebar's own dark key, plus a glow on whichever
   item is live — the "you are here" of every game menu. */
.sidebar {
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(178deg, var(--c-menu) 0%, var(--c-menu-deep) 100%);
  background-size: 34px 34px, 34px 34px, auto;
}
.sb-item.on {
  box-shadow: 0 3px 10px rgba(0, 90, 158, .4), 0 0 16px var(--hud-glow);
}
.sb-item.on::before { box-shadow: 0 0 8px var(--c-accent); }
.sb-org .mark {
  box-shadow: 0 4px 12px rgba(0, 90, 158, .45), inset 0 1px 0 rgba(255,255,255,.2),
              0 0 18px var(--hud-glow);
}

/* ---------- Topbar: one thin energy line ---------- */
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--c-main), var(--c-accent) 30%, transparent 72%);
  opacity: .5; pointer-events: none;
}

/* ---------- Panels: a hairline of light along the top edge ----------
   Every surface keeps its own background-color from theme.css (both themes);
   only background-image layers are added here, so dark mode needs no
   second copy of any rule. */
/* (a card keeps a plain, even border: the 2 px light along its top read as a
   thicker, coloured top edge — owner, 2026-09-17) */
.section, .agenda-card, .table-wrap {
  background-image: linear-gradient(90deg, var(--hud-line), transparent 45%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: top left;
}
.card { transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--hud-line); box-shadow: 0 4px 18px var(--hud-glow); }

/* ---------- The identity panels get the full targeting frame ----------
   Corner brackets, drawn inset so the rounded corners never clip them.
   Two gradients per corner: one horizontal stroke, one vertical. */
.detail-head {
  background-image:
    linear-gradient(90deg, var(--c-main), var(--c-accent) 30%, transparent 72%),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line));
  background-repeat: no-repeat;
  background-size: 100% 2px, 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px;
  background-position: top left,
    right 9px bottom 9px, right 9px bottom 9px,   /* one bracket, two strokes */
    left 9px bottom 9px,  left 9px bottom 9px;
}

/* The player-portrait frame: a thin gold ring floated off the avatar,
   the way a game frames the character you are playing. */
.detail-avatar, .hero-avatar {
  outline: 2px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  outline-offset: 3px;
}

/* ---------- Progress = XP bars ---------- */
/* A quiet glow everywhere; the light-sweep only where a bar is the point
   of the panel (the dashboard hero, a quest card under the mouse) — fifty
   shimmering bars in a register would be noise, one on the card you are
   about to click is feedback. */
.progress-fill { box-shadow: 0 0 10px var(--hud-glow); position: relative; overflow: hidden; }
.hero .progress-fill::after, .quest:hover .progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  animation: xp-sweep 1.8s ease-in-out infinite;
}
@keyframes xp-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.ring { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ring-c, var(--c-accent)) 40%, transparent)); }

/* ---------- Tables: the register as a readout ---------- */
table.data thead th { box-shadow: inset 0 -2px 0 var(--hud-line); }
table.data tfoot td { box-shadow: inset 0 2px 0 var(--hud-line); }

/* ---------- Buttons: a light sweep across the face on hover ----------
   Solid buttons only — a white sheen over a pale secondary button reads
   as a rendering glitch, not a highlight. */
.btn { position: relative; overflow: hidden; }
.btn:not(.secondary):not(.ghost):not(:disabled):hover::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 44%;
  /* Parked past the right edge, and the animation FILLS FORWARDS to the same
     place. Without both, the sheen finished and then snapped back to the
     pseudo-element's static position — a bright band frozen mid-button, which
     read as the light having stopped half way. */
  left: 120%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent);
  animation: btn-sheen .6s linear forwards;
  pointer-events: none;
}
@keyframes btn-sheen {
  /* -60% clears the left edge by the band's own width, 120% clears the right:
     the light enters and leaves completely instead of appearing and vanishing
     inside the face of the button. */
  from { left: -60%; }
  to   { left: 120%; }
}

/* ---------- Tabs & pills ---------- */
.tab.on svg { filter: drop-shadow(0 0 5px var(--hud-glow)); }
.subtab.on { box-shadow: 0 0 12px var(--hud-glow); }
/* A pill wears a thin ring of its own colour: a badge, not a smudge. */
.pill { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent); }

/* ---------- Modal: the dark header ends in the same energy line ----------
   ::before, because tone-* modals already own .modal-head::after. */
.modal-head::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--c-main), var(--c-accent) 35%, transparent 75%);
  opacity: .65; pointer-events: none;
}

/* ---------- Numbers read as instruments ---------- */
.card .big, .hero-stat .n, .mini-stat .n, .ring .ring-hole {
  font-variant-numeric: tabular-nums;
}

/* ---------- Stillness for those who asked for it ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .progress-fill::after, .quest:hover .progress-fill::after,
  .btn:not(.secondary):not(.ghost):not(:disabled):hover::after { animation: none; content: none; }
}

/* ---------- Second pass (2026-08-30): the small marks of a finished product ----------
   Still paint only. Empty states sit in a soft disc; chip icons carry a
   hairline ring. (The section-title tick and the focus lift were tried
   and removed at the owner's request — do not bring them back.) */
.section > h2 .chip-ic { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-main) 18%, transparent); }
.card h3 .chip-ic { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.empty svg { width: 34px; height: 34px; opacity: .55; padding: 7px; box-sizing: content-box;
  border-radius: 50%; background: var(--surface-3); color: var(--c-main); }
.detail-head h1, .hero .who h1 { letter-spacing: -.025em; }
.tab.on { text-shadow: 0 0 1px currentColor; }
table.data thead th { letter-spacing: .07em; }