/* Strategy surfaces — Rev 3 interaction layer.
 *
 * WHY A STYLESHEET AND NOT INLINE STYLES. Dash style dicts cannot express
 * :hover, :focus-visible, transitions or keyframes. Everything here is a state
 * or a motion; every static value stays in ui/theme.py so there is exactly one
 * source of truth per token.
 *
 * BUDGETS — asserted by tests/test_design_budget.py, which fails the build if
 * any of these is exceeded:
 *     5 type steps · 2 radii · 3 border declarations · 1 tracked-caps rule
 *     1 elevation · 3 surface steps · 2 durations · 0 new hues
 *
 * Colours here duplicate ui/theme.py by necessity (CSS cannot import Python).
 * The budget test compares the two and fails on drift.
 */

:root{
  --sv-ground:#12161e;
  --sv-surface:#191e2a;
  --sv-lift:#1d2331;          /* hover only, never resting */
  --sv-hairline:#232a38;
  --sv-ink:#e8edf5;
  --sv-subtle:#79839a;
  --sv-dim:#4c5568;
  --sv-shadow:0 1px 2px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.30);
  --sv-ease:cubic-bezier(.2,.6,.3,1);
  --sv-fast:160ms;
  --sv-slow:200ms;
}

/* ── cards ────────────────────────────────────────────────────────────── */
/* One elevation. A card is either at rest or under the cursor, so a Material
   style 5-level scale would be four levels of nothing. */
.sv-card{
  background:var(--sv-surface);
  border-radius:10px;
  transition:background var(--sv-slow) var(--sv-ease),
             box-shadow var(--sv-slow) var(--sv-ease),
             transform var(--sv-slow) var(--sv-ease);
}
.sv-card:hover{
  background:var(--sv-lift);
  box-shadow:var(--sv-shadow);
  transform:translateY(-1px);
}

/* ── leg table ────────────────────────────────────────────────────────── */
/* No row dividers: 22px of column gap and tabular figures already separate the
   rows, so a hairline would only add ink. The hover tint does the work. */
.sv-legs tbody tr td{
  transition:background var(--sv-fast) var(--sv-ease);
}
.sv-legs tbody tr:hover td{
  background:rgba(121,131,154,.07);
}
.sv-legs tbody tr:hover .sv-rowact{opacity:1}
.sv-rowact{
  opacity:0;
  color:var(--sv-dim);
  cursor:pointer;
  transition:opacity var(--sv-fast) var(--sv-ease),
             color var(--sv-fast) var(--sv-ease);
}
.sv-rowact:hover{color:var(--sv-ink)}

/* ── fields ───────────────────────────────────────────────────────────── */
.sv-field{
  transition:border-color var(--sv-fast) var(--sv-ease);
}
.sv-field:hover{border-bottom-color:var(--sv-subtle)}

/* ── skeleton ─────────────────────────────────────────────────────────── */
/* Shaped like the content so the layout does not jump when data lands. Built
   from the hairline with a 7% sweep — no new colour. */
.sv-skel{
  background:var(--sv-hairline);
  border-radius:2px;
  position:relative;
  overflow:hidden;
  display:block;
}
.sv-skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(232,237,245,.07),transparent);
  animation:sv-shimmer 1.35s ease-in-out infinite;
}
@keyframes sv-shimmer{100%{transform:translateX(100%)}}

/* ── tooltips ─────────────────────────────────────────────────────────── */
/* One surface, no border, no arrow. A real element rather than `title`, so it
   can be styled, reaches 11px legibly, and is keyboard-reachable. */
.sv-tip{position:relative;display:inline-flex;align-items:center}
.sv-tip>.sv-bub{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translate(-50%,4px);
  background:#0b0e14;
  color:var(--sv-ink);
  font-family:Inter,sans-serif;
  font-size:11px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
  padding:8px 11px;
  border-radius:10px;
  width:max-content;
  max-width:240px;
  box-shadow:var(--sv-shadow);
  opacity:0;
  pointer-events:none;
  z-index:5;
  transition:opacity var(--sv-fast) var(--sv-ease),
             transform var(--sv-fast) var(--sv-ease);
}
.sv-tip:hover>.sv-bub,
.sv-tip:focus-within>.sv-bub{opacity:1;transform:translate(-50%,0)}

/* ── buttons in empty states ──────────────────────────────────────────── */
.sv-btn{
  background:var(--sv-lift);
  color:var(--sv-ink);
  border:0;
  border-radius:10px;
  font-family:Inter,sans-serif;
  font-size:13px;
  font-weight:600;
  padding:9px 16px;
  cursor:pointer;
  transition:background var(--sv-fast) var(--sv-ease),
             box-shadow var(--sv-fast) var(--sv-ease);
}
.sv-btn:hover{background:#232a3a;box-shadow:var(--sv-shadow)}

/* ── accessibility ────────────────────────────────────────────────────── */
.sv-card:focus-visible,
.sv-btn:focus-visible,
.sv-tip:focus-visible{outline:2px solid #2979ff;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .sv-card,.sv-legs tbody tr td,.sv-rowact,.sv-field,.sv-tip>.sv-bub,.sv-btn{
    transition-duration:.01ms;
  }
  .sv-skel::after{animation:none}
}