/* ============================================================================
   Felix Ihno - components.css   Direction B "Surveyor"   round 3   @version 1.0.0
   ----------------------------------------------------------------------------
   Shippable component layer. Load order:  @import "tokens.css";  then this file.
   RULES (audited):
     - Colour comes ONLY from tokens via var(--color-*) / var(--viz-*). No raw
       hex anywhere in this file. Tints use color-mix() OF tokens.
     - Real CSS states only: :hover, :active, :focus-visible. No preview attrs.
     - Current/selected = ink text + accent left-bar. Never accent TEXT on an
       accent-soft fill (that pattern is an AA fail).
     - Every pointer target has a >=24x24px hit area (min-height / min-width).
     - Works under [data-theme=dark] + [data-accent=green|oxblood] + @media print
       with zero per-component colour overrides. Hover/active darken or lighten
       automatically by mixing the accent toward --color-text (theme-aware).
   Sections: focus ring / buttons / fields / toggle / card / table / nav /
             badge / callout / spark / skeleton / empty / print.
   ========================================================================== */

/* ---------- shared keyboard focus ring (reuses --color-focus-ring) ---------- */
.fi-btn:focus-visible,
.fi-input:focus-visible,
.fi-select:focus-visible,
.fi-toggle:focus-visible,
.fi-nav__item:focus-visible,
.fi-iconbtn:focus-visible,
a.fi-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-focus-ring);
  border-radius: var(--radius-sm);
}

/* ================================ Buttons ================================== */
.fi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 36px; padding: 8px 17px;
  font: var(--weight-semi) var(--text-xs)/1 var(--font-ui);
  letter-spacing: .01em;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
/* mixing accent toward ink darkens in light, lightens in dark - one rule, both themes */
.fi-btn:hover  { background: color-mix(in srgb, var(--color-accent) 90%, var(--color-text)); }
.fi-btn:active { background: color-mix(in srgb, var(--color-accent) 80%, var(--color-text)); transform: translateY(1px); }
.fi-btn:disabled,
.fi-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; background: var(--color-accent); transform: none; }

/* secondary: accent outline + accent label on the page (never on a tint) */
.fi-btn--secondary {
  color: var(--color-accent);
  background: var(--color-surface);
  border-color: var(--color-accent);
}
.fi-btn--secondary:hover {
  background: var(--color-surface);
  color: color-mix(in srgb, var(--color-accent) 78%, var(--color-text));
  border-color: color-mix(in srgb, var(--color-accent) 78%, var(--color-text));
}
.fi-btn--secondary:active { transform: translateY(1px); }
.fi-btn--secondary:disabled,
.fi-btn--secondary[aria-disabled="true"] { color: var(--color-accent); border-color: var(--color-accent); }

/* ghost: accent label, neutral wash on hover (no accent-on-soft) */
.fi-btn--ghost {
  color: var(--color-accent);
  background: transparent;
  border-color: transparent;
}
.fi-btn--ghost:hover  { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.fi-btn--ghost:active { background: color-mix(in srgb, var(--color-text) 11%, transparent); }

/* compact, square-ish icon button - still >=24x24 */
.fi-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; padding: 4px;
  color: var(--color-text-muted); background: transparent;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.fi-iconbtn:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }

/* ================================ Fields =================================== */
.fi-field-label {
  display: block;
  font: var(--weight-semi) var(--text-3xs)/1.4 var(--font-ui);
  letter-spacing: .02em; color: var(--color-text-muted);
}
.fi-input,
.fi-select {
  display: block; width: 100%; min-height: 36px; padding: 8px 11px;
  font: var(--weight-reg) var(--text-xs)/1.4 var(--font-ui);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.fi-input::placeholder { color: var(--color-text-faint); }
.fi-input:hover,
.fi-select:hover { border-color: color-mix(in srgb, var(--color-hairline) 55%, var(--color-text)); }
.fi-input:focus,
.fi-select:focus { outline: none; border-color: var(--color-accent); }
.fi-input:disabled,
.fi-select:disabled { opacity: .5; cursor: not-allowed; }

/* ================================ Toggle =================================== */
.fi-toggle {
  position: relative; display: inline-block;
  width: 40px; min-width: 40px; height: 24px; min-height: 24px;
  padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: var(--color-hairline);
  transition: background var(--motion-base) var(--ease-out);
}
.fi-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-surface); box-shadow: var(--shadow-card);
  transition: transform var(--motion-base) var(--ease-out);
}
.fi-toggle[aria-checked="true"] { background: var(--color-accent); }
.fi-toggle[aria-checked="true"]::after { transform: translateX(16px); background: var(--color-on-accent); }
.fi-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* ================================= Card ==================================== */
.fi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

/* eyebrow / small-caps label */
.fi-eyebrow {
  font: var(--weight-semi) var(--text-3xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-accent);
}

/* ============================== Hairline table ============================= */
.fi-table {
  width: 100%; border-collapse: collapse;
  font: var(--weight-reg) var(--text-2xs)/1.4 var(--font-ui);
  color: var(--color-text);
}
.fi-table th {
  text-align: left; padding: 0 0 8px;
  font: var(--weight-bold) var(--text-3xs)/1 var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-hairline);
}
.fi-table td { padding: 10px 0; border-bottom: 1px solid var(--color-hairline); }
.fi-table tr:last-child td { border-bottom: none; }
.fi-table .fi-num { font-variant-numeric: tabular-nums; text-align: right; }
.fi-table--compact th { padding: 0 0 6px; }
.fi-table--compact td { padding: 5px 0; }

.fi-num { font-variant-numeric: tabular-nums; }

/* ============================== Nav / shell =============================== */
.fi-nav { display: flex; flex-direction: column; gap: 2px; }
.fi-nav__item {
  display: flex; align-items: center; gap: 9px;
  min-height: 36px; padding: 7px 10px; width: 100%;
  font: var(--weight-med) var(--text-2xs)/1 var(--font-ui);
  text-align: left; text-decoration: none; cursor: pointer;
  color: var(--color-text-muted);
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.fi-nav__item:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); color: var(--color-text); }
/* current: INK text + accent left-bar (audit #1 fix - not accent text on soft) */
.fi-nav__item--current {
  color: var(--color-text);
  font-weight: var(--weight-semi);
  background: var(--color-accent-soft);
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.fi-nav__item--current:hover { color: var(--color-text); }

/* ================================ Badge ==================================== */
.fi-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; min-height: 20px;
  font: var(--weight-semi) var(--text-3xs)/1.5 var(--font-ui);
  letter-spacing: .04em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
}
.fi-badge--accent { color: var(--color-accent); border-color: var(--color-accent); background: transparent; }
.fi-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =============================== Callouts ================================= */
/* default = "note" (neutral). Modifiers set one local var: --fi-sig.            */
.fi-callout {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 13px;
  color: var(--color-text);
  background: color-mix(in srgb, var(--fi-sig, var(--color-text-muted)) 7%, var(--color-surface));
  border-left: 3px solid var(--fi-sig, var(--color-text-muted));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.fi-callout__icon  { flex: none; margin-top: 1px; color: var(--fi-sig, var(--color-text-muted)); }
.fi-callout__title { font: var(--weight-semi) var(--text-2xs)/1.3 var(--font-ui); color: var(--fi-sig, var(--color-text-muted)); }
.fi-callout__body  { margin-top: 1px; font-size: var(--text-2xs); line-height: 1.45; color: var(--color-text); }
.fi-callout--info     { --fi-sig: var(--color-signal-info); }
.fi-callout--ok       { --fi-sig: var(--color-signal-ok); }
.fi-callout--tip      { --fi-sig: var(--color-signal-ok); }
.fi-callout--warning  { --fi-sig: var(--color-signal-caution); }
.fi-callout--danger   { --fi-sig: var(--color-signal-danger); }
.fi-callout--question { --fi-sig: var(--color-accent); }

/* =============================== Sparkline ================================ */
.fi-spark { display: block; height: 26px; }
.fi-spark__band  { fill: var(--viz-band); }
.fi-spark__line  { fill: none; stroke: var(--viz-spark); stroke-width: 1.5; }
.fi-spark__point { fill: var(--viz-spark-point); }

/* ============================ Skeleton / loading ========================== */
.fi-skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg,
              var(--color-hairline) 30%, var(--color-border) 50%, var(--color-hairline) 70%);
  background-size: 200% 100%;
  animation: fi-shimmer 1.5s linear infinite;
}
.fi-skeleton--text   { height: 11px; }
.fi-skeleton--avatar { width: 38px; height: 38px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .fi-skeleton { animation: none; } }

/* ============================== Empty state ============================== */
.fi-empty { text-align: center; padding: var(--space-8) var(--space-6); }
.fi-empty__icon  { color: var(--color-text-faint); }
.fi-empty__title { margin: var(--space-3) 0 0; font: var(--weight-semi) var(--text-md)/1.2 var(--font-heading); color: var(--color-text); }
.fi-empty__body  { margin: var(--space-2) auto 0; max-width: 34ch; font-size: var(--text-2xs); line-height: 1.5; color: var(--color-text-muted); }

/* inline text link - colour PLUS underline (colour is never the only cue) */
.fi-link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ================================= Print ================================= */
@media print {
  .fi-card { box-shadow: none; }
  .fi-skeleton { animation: none; }
  /* callouts: drop tint, severity reads by left-rule WEIGHT + the icon */
  .fi-callout { background: transparent; border-left-color: var(--color-text); border-left-width: 1px; }
  .fi-callout__icon,
  .fi-callout__title { color: var(--color-text); }
  .fi-callout--info,
  .fi-callout--ok,
  .fi-callout--tip      { border-left-width: 2px; }
  .fi-callout--warning  { border-left-width: 3px; }
  .fi-callout--danger   { border-left-width: 5px; }
}