/*
 * A — Tessera · components: eyebrow, buttons, evidence labels, tag, card,
 * process strip, KPI, mosaic, mark and logo, icons, rule. Requires tokens.css and base.css.
 */

/* Eyebrow: mono label led by one flat tessera */
.t-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.t-eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--ink); flex: none; }
.t-eyebrow--accent::before { background: var(--smalto); }

/* Buttons */
.t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font: 600 16px/1.2 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background-color var(--dur-ui) var(--ease-settle), border-color var(--dur-ui) var(--ease-settle), color var(--dur-ui) var(--ease-settle); }
.t-btn--primary { background: var(--ink); color: var(--ink-inverse); }
.t-btn--primary:hover { background: var(--graphite); color: var(--on-graphite); }
.t-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.t-btn--secondary:hover { border-color: var(--ink); }
.t-btn--accent { background: var(--smalto); color: var(--on-smalto); }
.t-btn--accent:hover { background: var(--ink-inverse); color: var(--ink); }
.t-btn--text { min-height: 0; padding: 0 0 2px; border: 0; border-bottom: 3px solid var(--smalto); border-radius: 0; background: none; color: var(--ink); }
.t-btn--text:hover { border-bottom-color: var(--ink); }
.t-btn__arrow { position: relative; width: 14px; height: 2px; background: currentColor; transition: width var(--dur-ui) var(--ease-settle); flex: none; }
.t-btn__arrow::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.t-btn:hover .t-btn__arrow { width: 22px; }

/* Evidence labels */
.t-evidence { display: inline-flex; align-items: center; gap: 8px; font: 400 11.5px/1.35 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.t-evidence__tile { width: 10px; height: 10px; flex: none; background: var(--ink); }
.t-evidence--supported .t-evidence__tile { background: transparent; border: 1.5px solid var(--ink); }
.t-evidence--potential .t-evidence__tile, .t-evidence--hypothetical .t-evidence__tile { background: transparent; border: 1.5px dashed var(--muted); }

/* Tag */
.t-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font: 400 11.5px/1.2 var(--font-mono); letter-spacing: 0.04em; color: var(--ink); }

/* Card */
.t-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.t-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }

/* Process strip: tiles joined by the fugue */
.t-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--fugue); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.t-flow__tile { display: flex; flex-direction: column; gap: 8px; min-height: 132px; padding: 14px 16px 16px; background: var(--ink); color: var(--ink-inverse); }
.t-flow__n { font: 400 11px/1 var(--font-mono); letter-spacing: 0.06em; opacity: .72; }
.t-flow__title { font-weight: 600; font-size: 17px; line-height: 1.22; letter-spacing: -0.01em; }
.t-flow__text { font-size: 14px; line-height: 1.45; opacity: .82; }
.t-flow__tile--quiet { background: var(--surface); color: var(--ink); outline: 1px solid var(--line-strong); outline-offset: -1px; }
.t-flow__tile--quiet .t-flow__n, .t-flow__tile--quiet .t-flow__text { opacity: 1; color: var(--muted); }
.t-flow__tile--graphite { background: var(--graphite); color: var(--on-graphite); }
.t-flow__tile--accent { background: var(--smalto); color: var(--on-smalto); }
.t-flow__tile--accent .t-flow__n, .t-flow__tile--accent .t-flow__text { opacity: 1; }

/* KPI / fact */
.t-kpi { display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 3px solid var(--ink); }
.t-kpi--accent { border-top-color: var(--smalto); }
.t-kpi__value { font-weight: 600; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.t-kpi__value--small { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.15; letter-spacing: -0.02em; }
.t-kpi__label { font-size: 14.5px; line-height: 1.45; color: var(--muted); }

/* Mosaic pattern */
.t-mosaic { display: block; width: 100%; height: 100%; }
.t-mz-line { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.t-mz-solid { fill: var(--ink); }
.t-mz-lit { fill: var(--smalto); }

/* MOS-AI-K symbol and lockup */
.t-mark { width: 28px; height: 28px; flex: none; }
.t-mark__ink { fill: currentColor; }
.t-mark__acc { fill: var(--smalto); }
.t-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.012em; }
.t-logo { display: block; height: 22px; width: auto; aspect-ratio: 6038 / 732; flex: none; }
.t-logo__ink { fill: currentColor; }
.t-logo__acc { fill: var(--smalto); }

/* Icons */
.t-icon { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.t-icon .t-ic-acc { fill: currentColor; stroke: none; }
.t-icon--accent .t-ic-acc { fill: var(--smalto); }

/* Rule above a section title */
.t-rule { border: 0; border-top: 3px solid var(--ink); margin: 0; }