/* ══════════════════════════════════════════════════════════════════
   components.css — cards, tables, semantic color tokens, anti-patterns
   Part of forge base/ layer. Inline after typography.css.

   Semantic color tokens are consumed by the component library (#82).
   Each aesthetic file overrides their values.
   ══════════════════════════════════════════════════════════════════ */

/* FORGE ANTI-PATTERNS — DO NOT USE
   - No box-shadow with multiple blur layers (glassmorphism)
   - No text-shadow except .c-* colored ASCII blocks and terminal .glow
   - No gradient backgrounds (use flat surface tokens)
   - No border-radius > 8px on content cards
   - No decorative ::before/::after icons (use text or svg)
   - No animation/transition except theme-toggle and tab hover (0.15s max)
*/

/* ── Semantic Color Tokens — Dark ── */
:root, [data-theme="dark"] {
  --success:     #34d399;
  --success-dim: rgba(52,211,153,0.12);
  --warning:     #fbbf24;
  --warning-dim: rgba(251,191,36,0.12);
  --error:       #f87171;
  --error-dim:   rgba(248,113,113,0.12);
  --info:        #60a5fa;
  --info-dim:    rgba(96,165,250,0.12);
}

/* ── Semantic Color Tokens — Light ── */
[data-theme="light"] {
  --success:     #047857;
  --success-dim: rgba(4,120,87,0.1);
  --warning:     #d97706;
  --warning-dim: rgba(217,119,6,0.1);
  --error:       #dc2626;
  --error-dim:   rgba(220,38,38,0.1);
  --info:        #2563eb;
  --info-dim:    rgba(37,99,235,0.1);
}

/* ── Cards ── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
}
.card.accent { border-left: 3px solid var(--accent); }
.card-label {
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 0.5rem;
}
.card-title {
  font-size: 0.9375rem; font-weight: 600;
  color: var(--text); margin-bottom: 0.375rem;
}
.card-body { font-size: 0.875rem; color: var(--text-muted); }

/* ── Tables ── */
.table-wrap {
  overflow-x: auto; margin-bottom: 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--surface); color: var(--text-dim);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem; text-align: left;
  border-bottom: 1px solid var(--border);
  /* No sticky: `.table-wrap` has `overflow-x: auto` which makes it a
     sticky scroll container, so `top: 3rem` would be measured from the
     wrapper — not the viewport — pushing the thead down inside the
     table and making the first tbody row render above it. Page-scroll
     sticky and overflow-x wrappers are incompatible; pick overflow. */
}
tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.875rem;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface); }

/* ─────────────────────────────────────────────────────────────────
   Component Library — phase badges, severity cards, lanes, dep paths,
   arch blocks, eyebrows, item lists, data tables, component boxes
   ════════════════════════════════════════════════════════════════ */

/* ── Phase Badges ── */
.phase {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.phase.m0 { background: var(--success-dim); color: var(--success); }
.phase.m1 { background: var(--warning-dim); color: var(--warning); }
.phase.m2 { background: var(--info-dim); color: var(--info); }
.phase.m3 { background: rgba(192,132,252,0.12); color: #c084fc; }

/* ── Severity Cards ── */
.card.critical { border-left: 3px solid var(--error); }
.card.warning  { border-left: 3px solid var(--warning); }
.card.info     { border-left: 3px solid var(--info); }

/* ── Lane Containers ── */
.lane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.lane-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lane-header.green-h  { background: var(--success-dim); color: var(--success); border-bottom: 1px solid rgba(52,211,153,0.2); }
.lane-header.amber-h  { background: var(--warning-dim); color: var(--warning); border-bottom: 1px solid rgba(251,191,36,0.2); }
.lane-header.cyan-h   { background: var(--info-dim); color: var(--info); border-bottom: 1px solid rgba(96,165,250,0.2); }
.lane-header.purple-h { background: rgba(192,132,252,0.12); color: #c084fc; border-bottom: 1px solid rgba(192,132,252,0.2); }
.lane-header.red-h    { background: var(--error-dim); color: var(--error); border-bottom: 1px solid rgba(248,113,113,0.2); }
.lane-body { padding: 0.75rem; }

/* ── Dependency Paths ── */
.dep-path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.dep-path .arrow    { color: var(--warning); font-weight: 700; }
.dep-path .parallel { color: var(--info); font-weight: 700; }

/* ── Architecture Blocks ── */
pre.arch {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre;
}
.c-green  { color: var(--success); }
.c-amber  { color: var(--warning); }
.c-cyan   { color: var(--info); }
.c-red    { color: var(--error); }
.c-purple { color: #c084fc; }
.c-dim    { color: var(--text-dim); }
.c-bright { color: var(--text); }

/* ── Eyebrow Headers ── */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

/* ── Item Lists ── */
.item-list {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}
.item-list li {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}
.item-list li::before {
  content: "→";
  color: var(--warning);
  font-weight: 700;
  flex-shrink: 0;
}
.item-list li.green-arrow::before  { color: var(--success); }
.item-list li.red-arrow::before    { color: var(--error); }
.item-list li.cyan-arrow::before   { color: var(--info); }
.item-list li.amber-arrow::before  { color: var(--warning); }

/* ── Data Tables ── */
table.data-table {
  width: 100%;
  border-collapse: collapse;
}
table.data-table th {
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  /* No sticky — see .table-wrap/thead th note above. Same constraint:
     any ancestor with overflow-x: auto becomes the sticky scroll
     container and breaks page-scroll sticky. */
}
table.data-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
[data-theme="light"] table.data-table tr:nth-child(even) td { background: rgba(0,0,0,0.025); }
table.data-table tr:hover td { background: rgba(255,255,255,0.04); }
[data-theme="light"] table.data-table tr:hover td { background: rgba(0,0,0,0.04); }
table.data-table td.num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Connectors ── */
.connector {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 0;
  flex-shrink: 0;
}
.connector-dashed {
  height: 1px;
  background: transparent;
  border-top: 1px dashed var(--border);
  margin: 0.5rem 0;
  flex-shrink: 0;
}

/* ── Component Boxes ── */
.component {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  min-width: 80px;
}
.component-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
[data-theme="light"] .component-label { background: rgba(0,0,0,0.02); }
.component-value {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--text);
  padding: 0.375rem 0.5rem;
}

/* ═════════════════════════════════════════════════════════════════
   Info Cards — 3-column summary grid with tier-colored dot + list.
   Use at the top of a split-file doc or architecture page to give
   the reader a scannable "what / why / how" overview before diving
   in. Pair with --arch-* tokens from tokens.md for tier-colored dots.

   Example:
     <div class="info-card-grid">
       <div class="info-card">
         <span class="info-card__dot" style="background:var(--arch-frontend)"></span>
         <h3 class="info-card__title">Frontend</h3>
         <ul class="info-card__list">
           <li>React SPA</li>
           <li>TanStack Router</li>
         </ul>
       </div>
       ...
     </div>
   Source: architecture-diagram-generator skill.
   ════════════════════════════════════════════════════════════════ */
.info-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.info-card__dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.info-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.info-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.info-card__list li { padding: 0.125rem 0; }

/* ══════════════════════════════════════════════════════════════════
   Responsive — collapse gracefully at 768px
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dep-path { flex-wrap: wrap; }

  .component {
    display: flex;
    width: 100%;
    min-width: 0;
  }

  .lane-header,
  .lane-body { padding: 0.5rem; }

  .card { padding: 1rem; }
  .card-label { font-size: 0.625rem; }
  .card-title { font-size: 0.875rem; }

  table.data-table th,
  table.data-table td {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
  }

  .arch { font-size: 0.75rem; }

  .item-list li { gap: 0.25rem; }

  .phase,
  .eyebrow { font-size: 0.625rem; }

  .phase { padding: 0.0625rem 0.375rem; }
}