/*
  shared.css — THE canonical shared visual system (Part C, canon §10).
  BYTE-IDENTICAL across every clone. Projects never re-theme this file.
  app.css and view CSS may add LAYOUT ONLY (grid placement, widths) — no token redefinition,
  no re-theming of shared components, no raw hex values outside this file.
*/

:root {
  /* --- Color tokens --- */
  --fw-bg: #0a0c10;
  --fw-panel: #11141a;
  --fw-panel-raised: #161a22;
  --fw-panel-sunken: #0e1117;
  --fw-line: #1f2530;
  --fw-line-strong: #2a3140;
  --fw-text: #e8ecf2;
  --fw-text-dim: #8b94a6;
  --fw-text-mute: #5b6577;
  --fw-accent: #c8d4e6;
  --fw-success: #7cdca2;
  --fw-on-accent: #0a0c10;
  --fw-warning: #f0c674;
  --fw-error: #f08a8a;
  --fw-info: #c8d4e6;

  --fw-success-soft: rgba(124, 220, 162, .12);
  --fw-warning-soft: rgba(240, 198, 116, .12);
  --fw-error-soft: rgba(240, 138, 138, .12);
  --fw-neutral-soft: rgba(139, 148, 166, .12);

  /* --- Type families --- */
  --fw-sans: -apple-system, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --fw-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* --- Spacing --- */
  --fw-space-1: 4px;
  --fw-space-2: 8px;
  --fw-space-3: 12px;
  --fw-space-4: 16px;
  --fw-space-5: 24px;
  --fw-space-6: 32px;
  --fw-space-7: 48px;
  --fw-space-8: 76px;

  /* --- Radius --- */
  --fw-radius-sm: 6px;
  --fw-radius-base: 10px;
  --fw-radius-pill: 999px;

  /* --- Motion --- */
  --fw-ease: cubic-bezier(.22, .61, .36, 1);
  --fw-dur: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fw-dur: 0ms; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fw-bg);
  color: var(--fw-text);
  font-family: var(--fw-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3, h4 { margin: 0; font-weight: 300; color: var(--fw-text); }
h1 { font-size: clamp(40px, 6vw, 82px); letter-spacing: -0.055em; line-height: 1.0; }
h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.045em; }
h3 { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.035em; }
h4 { font-size: 18px; font-weight: 400; letter-spacing: -0.01em; }

.fw-label {
  font-family: var(--fw-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fw-text-dim);
}
.fw-index {
  font-family: var(--fw-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fw-text-mute);
}

a { color: var(--fw-accent); text-decoration: none; }
a:hover { color: var(--fw-text); }

/* --- Card --- */
.fw-card {
  background: var(--fw-panel);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius-base);
  padding: clamp(12px, 2vw, 24px);
  transition: border-color var(--fw-dur) var(--fw-ease);
}
.fw-card:hover { border-color: var(--fw-line-strong); }
.fw-card--raised { background: var(--fw-panel-raised); }
.fw-card--sunken { background: var(--fw-panel-sunken); }

/* --- Buttons --- */
.fw-btn {
  font-family: var(--fw-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--fw-radius-pill);
  border: 1px solid var(--fw-line);
  background: transparent;
  color: var(--fw-text);
  padding: 10px 20px;
  cursor: pointer;
  transition: color var(--fw-dur) var(--fw-ease), border-color var(--fw-dur) var(--fw-ease), background var(--fw-dur) var(--fw-ease);
}
.fw-btn:hover { border-color: var(--fw-line-strong); }
.fw-btn:disabled, .fw-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.fw-btn--primary { background: var(--fw-success); border-color: var(--fw-success); color: var(--fw-on-accent); }
.fw-btn--secondary { background: var(--fw-panel-raised); }
.fw-btn--ghost { border-color: transparent; }
.fw-btn--danger { border-color: var(--fw-error); color: var(--fw-error); background: var(--fw-error-soft); }
.fw-btn--danger:hover:not(:disabled) { background: var(--fw-error); color: var(--fw-on-accent); border-color: var(--fw-error); }

/* --- Inputs --- */
.fw-input, select.fw-input {
  background: var(--fw-panel-sunken);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius-sm);
  color: var(--fw-text);
  padding: 8px 12px;
  font-family: var(--fw-sans);
  font-size: 14px;
  transition: border-color var(--fw-dur) var(--fw-ease);
}
.fw-input:focus { outline: none; border-color: var(--fw-line-strong); }

/* --- Dropzone --- */
.fw-dropzone {
  border: 1px dashed var(--fw-line-strong);
  border-radius: var(--fw-radius-base);
  padding: var(--fw-space-6);
  text-align: center;
  color: var(--fw-text-dim);
  transition: border-color var(--fw-dur) var(--fw-ease);
}
.fw-dropzone.is-active { border-color: var(--fw-success); color: var(--fw-text); }

/* --- Table --- */
/* Sticky headers require a BOUNDED scroll container (canon §10 / SK-12). position:sticky on
   thead th / the first column does nothing unless the scroll parent has a constrained height;
   without max-height the wrap grows to full content height and the PAGE scrolls instead, so the
   header never sticks. Both scrollbars must live inside .fw-table-wrap. We also use
   border-collapse:separate with explicit cell borders so sticky cells paint their own borders
   (with border-collapse:collapse a sticky cell drops its borders while scrolling). This lives
   ONLY in shared.css — no view re-implements the container. */
.fw-table-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius-base);
}
.fw-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.fw-table thead th {
  position: sticky; top: 0;
  z-index: 2;
  background: var(--fw-panel-raised);
  font-family: var(--fw-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--fw-text-dim);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--fw-line);
  white-space: nowrap;
}
.fw-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--fw-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.fw-table td.fw-num, .fw-table th.fw-num { font-family: var(--fw-mono); text-align: right; font-variant-numeric: tabular-nums; }
.fw-table tbody tr:hover { background: var(--fw-panel-raised); }
.fw-table .fw-row-index {
  position: sticky; left: 0;
  z-index: 1;
  background: var(--fw-panel);
  color: var(--fw-text-mute);
  font-family: var(--fw-mono);
  font-size: 11px;
}
/* Corner cell (first header th) is sticky on BOTH axes with the highest z-index. */
.fw-table thead th.fw-row-index { z-index: 3; }
.fw-table-meta { font-family: var(--fw-mono); font-size: 11px; color: var(--fw-text-mute); padding: 8px 4px; }
.fw-table tfoot td { font-weight: 600; border-top: 1px solid var(--fw-line-strong); background: var(--fw-panel-raised); }

/* --- Pills --- */
.fw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fw-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: var(--fw-radius-pill);
  padding: 4px 12px;
  background: var(--fw-neutral-soft); color: var(--fw-text-dim);
}
.fw-pill--success { background: var(--fw-success-soft); color: var(--fw-success); }
.fw-pill--warning { background: var(--fw-warning-soft); color: var(--fw-warning); }
.fw-pill--error { background: var(--fw-error-soft); color: var(--fw-error); }
.fw-pill--neutral { background: var(--fw-neutral-soft); color: var(--fw-text-dim); }

/* --- Freshness edge (left border on list rows) --- */
.fw-edge-fresh { border-left: 3px solid var(--fw-success); }
.fw-edge-stale { border-left: 3px solid var(--fw-warning); }
.fw-edge-error { border-left: 3px solid var(--fw-error); }
.fw-edge-unknown { border-left: 3px solid var(--fw-text-mute); }
.fw-edge-active { border-left: 3px solid var(--fw-accent); }

/* --- State blocks --- */
.fw-empty, .fw-loading, .fw-error, .fw-info {
  padding: var(--fw-space-6);
  text-align: center;
  color: var(--fw-text-dim);
  font-size: 14px;
}
.fw-error { color: var(--fw-error); }
.fw-info { color: var(--fw-accent); }

/* --- Positive / negative numeric styling --- */
.fw-pos { color: var(--fw-success); }
.fw-neg { color: var(--fw-error); }

/* --- App chrome (header/nav/content/footer) --- */
.fw-shell { display: flex; flex-direction: column; min-height: 100vh; }
.fw-header {
  height: 56px;
  display: flex; align-items: center; gap: var(--fw-space-3);
  padding: 0 var(--fw-space-5);
  background: rgba(10, 12, 16, .94);
  border-bottom: 1px solid var(--fw-line);
  font-family: var(--fw-mono);
}
.fw-brand { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fw-text); }
.fw-header-chip {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fw-text-dim); border: 1px solid var(--fw-line); border-radius: var(--fw-radius-pill);
  padding: 3px 10px;
}
.fw-body { flex: 1; display: flex; }
.fw-nav { width: 248px; border-right: 1px solid var(--fw-line); padding: var(--fw-space-4) 0; }
.fw-nav-list { list-style: none; margin: 0; padding: 0; }
.fw-nav-item {
  display: flex; align-items: center; gap: var(--fw-space-3);
  padding: 10px var(--fw-space-5);
  color: var(--fw-text-dim);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: color var(--fw-dur) var(--fw-ease), border-color var(--fw-dur) var(--fw-ease);
}
.fw-nav-item:hover { color: var(--fw-text); }
.fw-nav-item.is-active { color: var(--fw-text); border-left-color: var(--fw-success); }
.fw-nav-item.is-disabled { color: var(--fw-text-mute); cursor: not-allowed; opacity: 0.5; }
.fw-content { flex: 1; background: var(--fw-bg); padding: var(--fw-space-5); overflow: auto; }
.fw-footer {
  display: flex; justify-content: space-between;
  padding: var(--fw-space-3) var(--fw-space-5);
  background: rgba(10, 12, 16, .94);
  border-top: 1px solid var(--fw-line);
  font-family: var(--fw-mono); font-size: 11px; color: var(--fw-text-mute);
}