/* ════════════════════════════════════════════════════════════════
   NOÛS · IURI ANDREAZZA — Design Kit
   02 · COMPONENTS — buttons, chips, cards, quotes, callouts,
        code/terminal, tables, lists, charts, flow diagrams
   ────────────────────────────────────────────────────────────────
   All pieces read theme-aware tokens from nous-tokens.css and obey
   one principle: inner rim-light hairlines over drop shadows.
   ════════════════════════════════════════════════════════════════ */

/* ── SECTION LABEL ──────────────────────────────────────────────── */
.sec-label {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--ls-tracked); text-transform: uppercase;
  color: var(--brass);
}
.sec-label::before { content: ""; width: 24px; height: 1px; background: var(--brass); }

/* Editorial section heading */
.lede { max-width: 60ch; color: var(--bone-dim); font-size: 1.125rem; line-height: 1.55; }
em.mark, .display em { color: var(--brass); }

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 14px 22px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--ls-tracked); text-transform: uppercase;
  border-radius: var(--r-pill);
  transition: all var(--dur-quick) var(--ease-out-quint);
  cursor: pointer; white-space: nowrap; border: 0;
}
.btn-primary { background: var(--brass); color: var(--ink); }
.btn-primary:hover { background: var(--brass-glow); transform: translateY(-2px); box-shadow: var(--glow-brass); }
.btn-ghost { background: transparent; color: var(--bone); box-shadow: var(--rim-strong); }
.btn-ghost:hover { color: var(--brass); box-shadow: var(--rim-brass); }
.btn-accent2 { background: var(--plasma); color: var(--ink); }
.btn-accent2:hover { background: var(--plasma-deep); transform: translateY(-2px); }
.btn-sm { padding: 9px 15px; font-size: 11px; }
.btn .arrow { display: inline-block; transition: transform var(--dur-quick) var(--ease-out-quint); }
.btn:hover .arrow { transform: translateX(4px); }

/* ── CHIPS / TAGS ───────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  box-shadow: var(--rim-strong);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--ls-tracked); text-transform: uppercase;
  color: var(--bone-dim);
}
.chip--accent { color: var(--brass); box-shadow: var(--rim-brass); }
.chip--accent2 { color: var(--plasma); box-shadow: inset 0 0 0 1px var(--plasma); }
.chip--live { color: var(--signal); box-shadow: var(--rim-signal); }
.chip--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 12px var(--signal);
}

/* ── PANEL / CARD BASE ──────────────────────────────────────────── */
.panel {
  border-radius: var(--r-3);
  background: var(--carbon);
  box-shadow: var(--rim-strong);
  padding: var(--sp-7);
}
.panel--gradient { background: var(--grad-panel); }
.panel--spot { background: var(--grad-spot); position: relative; overflow: hidden; }
.panel--spot::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 70%; height: 180%;
  background: radial-gradient(closest-side, var(--tint-brass), transparent 70%);
  pointer-events: none;
}

/* Project card */
.card-project {
  display: flex; flex-direction: column; gap: var(--sp-4);
  border-radius: var(--r-3); padding: var(--sp-5);
  background: var(--grad-panel); box-shadow: var(--rim);
  transition: transform var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quint);
}
.card-project:hover { transform: translateY(-4px); box-shadow: var(--rim-strong), var(--lift); }
.card-project .thumb {
  aspect-ratio: 16/10; border-radius: var(--r-2); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 70% at 20% 0%, var(--tint-brass), transparent 60%),
    radial-gradient(80% 60% at 80% 100%, var(--tint-plasma), transparent 60%),
    var(--grad-panel);
}
.card-project .thumb::after { content: ""; position: absolute; inset: 18px; border: 1px dashed var(--graphite); border-radius: 6px; }
.card-project h4 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-weight: 400; }
.card-project .desc { font-size: 0.9rem; color: var(--bone-dim); line-height: 1.55; }
.card-project .foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute); padding-top: var(--sp-3); border-top: 1px solid var(--graphite); }
.card-project .foot .role { color: var(--brass); }

/* Capability card */
.card-cap {
  position: relative; border-radius: var(--r-3); padding: var(--sp-7);
  background: var(--grad-panel); box-shadow: var(--rim-strong);
  display: flex; flex-direction: column; gap: var(--sp-5);
  min-height: 280px; overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out-quint), transform var(--dur-base) var(--ease-out-quint);
}
.card-cap:hover { box-shadow: var(--rim-brass), var(--lift); transform: translateY(-3px); }
.card-cap .num { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute); }
.card-cap h4 { font-family: var(--font-display); font-size: 2rem; line-height: 1; margin: 0; font-weight: 400; }
.card-cap h4 em { color: var(--brass); font-style: italic; }
.card-cap p { color: var(--bone-dim); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.card-cap .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute); padding-top: var(--sp-3); border-top: 1px solid var(--graphite); }
.card-cap .foot .go { color: var(--brass); }

/* Stat block */
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .num { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 0.95; color: var(--bone); font-weight: 400; }
.stat .num em { color: var(--brass); font-style: normal; }
.stat .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute); }

/* ── PULL QUOTE ─────────────────────────────────────────────────── */
.pull-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.6rem; line-height: 1.35; color: var(--bone);
  border-left: 1px solid var(--brass); padding-left: var(--sp-5);
}
.pull-quote .by { display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute); }
blockquote.editorial {
  margin: 0; padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-3); background: var(--surface-1); box-shadow: var(--rim);
}
blockquote.editorial q { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; line-height: 1.4; quotes: "\201C" "\201D"; }

/* ── STATUS / NOW STRIP ─────────────────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill);
  box-shadow: var(--rim-strong);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--ls-tracked); text-transform: uppercase;
  color: var(--bone-dim);
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal); animation: ds-pulse 2s var(--ease-in-out) infinite; }
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── CALLOUTS ───────────────────────────────────────────────────── */
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--r-3);
  background: var(--surface-1); box-shadow: var(--rim-strong);
}
.callout .ico { width: 22px; height: 22px; flex: none; color: var(--bone-mute); margin-top: 1px; }
.callout .body { display: flex; flex-direction: column; gap: 4px; }
.callout .ttl { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute); }
.callout p { margin: 0; color: var(--bone-dim); font-size: 0.95rem; line-height: 1.55; }
.callout p b { color: var(--bone); font-weight: 500; }
.callout--info   { background: var(--tint-brass);  box-shadow: var(--rim-brass); }
.callout--info   .ico, .callout--info .ttl   { color: var(--brass); }
.callout--accent2{ background: var(--tint-plasma); box-shadow: inset 0 0 0 1px var(--plasma); }
.callout--accent2 .ico, .callout--accent2 .ttl { color: var(--plasma); }
.callout--warn   { background: var(--tint-warn);   box-shadow: var(--rim-warn); }
.callout--warn   .ico, .callout--warn .ttl   { color: var(--warn); }
.callout--signal { background: var(--tint-signal); box-shadow: var(--rim-signal); }
.callout--signal .ico, .callout--signal .ttl { color: var(--signal); }

/* ── CODE BLOCK / TERMINAL ──────────────────────────────────────── */
.code {
  font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.7;
  background: var(--grad-spot); box-shadow: var(--rim-strong);
  border-radius: var(--r-3); padding: var(--sp-5) var(--sp-6);
  overflow-x: auto; color: var(--bone-dim);
}
.code .tok-key { color: var(--brass); }
.code .tok-str { color: var(--plasma); }
.code .tok-com { color: var(--bone-mute); font-style: italic; }
.code .tok-fn  { color: var(--bone); }
.code .tok-num { color: var(--warn); }

.terminal {
  border-radius: var(--r-3); overflow: hidden;
  background: var(--grad-spot); box-shadow: var(--rim-strong);
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7;
}
.terminal .bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--graphite);
}
.terminal .bar .lights { display: flex; gap: 7px; }
.terminal .bar .lights i { width: 11px; height: 11px; border-radius: 50%; display: block; box-shadow: var(--rim); }
.terminal .bar .lights i:nth-child(1) { background: var(--warn); }
.terminal .bar .lights i:nth-child(2) { background: var(--brass-deep); }
.terminal .bar .lights i:nth-child(3) { background: var(--signal); }
.terminal .bar .ttl { font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute); margin-left: auto; }
.terminal .body { padding: var(--sp-5) var(--sp-6); color: var(--bone-dim); white-space: pre-wrap; }
.terminal .body .prompt { color: var(--brass); }
.terminal .body .out { color: var(--bone-mute); }
.terminal .body .ok  { color: var(--signal); }

/* ── TABLES ─────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  text-align: left; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--graphite); font-weight: 400;
}
.table tbody td {
  padding: var(--sp-4); border-bottom: 1px solid var(--graphite);
  color: var(--bone-dim); font-size: 0.95rem;
}
.table tbody tr { transition: background var(--dur-snap); }
.table tbody tr:hover { background: var(--surface-1); }
.table tbody td:first-child { color: var(--bone); }
.table td .accent { color: var(--brass); }
.table td .num { font-family: var(--font-mono); }

/* ── EDITORIAL LISTS ────────────────────────────────────────────── */
.list-dash { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.list-dash li { position: relative; padding-left: 24px; color: var(--bone); font-size: 0.98rem; line-height: 1.5; }
.list-dash li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 13px; height: 1px; background: var(--brass); }

.list-num { list-style: none; padding: 0; margin: 0; counter-reset: ln; display: flex; flex-direction: column; gap: var(--sp-4); }
.list-num li { counter-increment: ln; display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-4); align-items: baseline; }
.list-num li::before { content: counter(ln, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-tracked); color: var(--brass); }
.list-num li .ttl { color: var(--bone); grid-column: 2; }
.list-num li .sub { color: var(--bone-dim); font-size: 0.92rem; line-height: 1.5; margin-top: 4px; grid-column: 2; }

/* ── DATA CHARTS · horizontal bars ──────────────────────────────── */
.barchart { display: flex; flex-direction: column; gap: var(--sp-4); }
.barchart .bar-row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr 54px; gap: var(--sp-4); align-items: center; }
.barchart .bar-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.barchart .bar-track { height: 10px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: var(--rim); overflow: hidden; }
.barchart .bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--brass); width: 0; transition: width var(--dur-slow) var(--ease-out-expo); }
.barchart .bar-fill.is-2 { background: var(--plasma); }
.barchart .bar-val { font-family: var(--font-mono); font-size: 12px; color: var(--brass); text-align: right; }

/* DATA CHARTS · vertical columns */
.columns { display: flex; align-items: flex-end; gap: var(--sp-4); height: 220px; padding-top: var(--sp-4); }
.columns .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); height: 100%; justify-content: flex-end; }
.columns .col .track { width: 100%; max-width: 56px; display: flex; align-items: flex-end; flex: 1; }
.columns .col .fill { width: 100%; border-radius: var(--r-2) var(--r-2) 0 0; background: linear-gradient(180deg, var(--brass) 0%, var(--brass-deep) 100%); box-shadow: var(--rim); height: 0; transition: height var(--dur-slow) var(--ease-out-expo); }
.columns .col .val { font-family: var(--font-mono); font-size: 12px; color: var(--brass); }
.columns .col .cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--bone-mute); }

/* DATA CHARTS · line / area (style an inline SVG) */
.linechart { width: 100%; height: auto; overflow: visible; }
.linechart .lc-grid { stroke: var(--graphite); stroke-width: 1; }
.linechart .lc-axis { stroke: var(--slate); stroke-width: 1; }
.linechart .lc-area { fill: var(--tint-brass); }
.linechart .lc-line { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.linechart .lc-line.is-2 { stroke: var(--plasma); }
.linechart .lc-dot { fill: var(--ink); stroke: var(--brass); stroke-width: 2; }
.linechart .lc-label { fill: var(--bone-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }

/* ── FLOW DIAGRAM ───────────────────────────────────────────────── */
.flow { display: flex; align-items: stretch; gap: var(--sp-5); flex-wrap: wrap; }
.flow-step {
  flex: 1 1 160px; min-width: 150px; position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--r-3);
  background: var(--grad-panel); box-shadow: var(--rim-strong);
}
.flow-step .num { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-tracked); text-transform: uppercase; color: var(--brass); }
.flow-step .ttl { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; }
.flow-step .sub { font-size: 0.85rem; color: var(--bone-dim); line-height: 1.5; }
.flow-step:not(:last-child)::after {
  content: "→"; position: absolute; right: calc(var(--sp-5) * -1 + 2px); top: 50%;
  transform: translate(50%, -50%); color: var(--brass); font-size: 1.1rem;
  font-family: var(--font-mono);
}
@media (max-width: 760px) {
  .flow { flex-direction: column; }
  .flow-step:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: calc(var(--sp-5) * -1); transform: translate(50%, 50%); }
}

/* ── MARQUEE RIBBON ─────────────────────────────────────────────── */
.ribbon { border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--graphite); overflow: hidden; padding: var(--sp-5) 0; }
.ribbon-track { display: flex; gap: var(--sp-7); animation: ds-slide 40s linear infinite; white-space: nowrap; will-change: transform; }
@keyframes ds-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ribbon-item { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); font-style: italic; color: var(--bone); display: inline-flex; align-items: center; gap: var(--sp-7); }
.ribbon-item .star { width: 12px; height: 12px; background: var(--brass); transform: rotate(45deg); }

/* ── REVEAL ON SCROLL ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.05s; } .reveal.d2 { transition-delay: 0.12s; }
.reveal.d3 { transition-delay: 0.2s; }  .reveal.d4 { transition-delay: 0.28s; }