/* ============================================================
   TRANSHOW — components.css
   Canonical component styles. Single source of truth for
   buttons, inputs, tags, cards, icons and the brand's signature
   utilities (grain, scrim, poster furniture).
   Load AFTER colors_and_type.css. Motion lives in interactions.css.
   ============================================================ */

/* ---- Icon (mask) -----------------------------------------------
   The icon set is stroke:currentColor, so an <img> renders black.
   Official usage: a masked span that tints with `color`.
     <span class="ts-icon" style="--icon:url('assets/icons/truck.svg')"></span>
   Size with width/height or font-size-relative (1em) via .ts-icon--em. */
.ts-icon { --icon: none; /* @kind other */ display: inline-block; width: 24px; height: 24px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat; }
.ts-icon--em { width: 1em; height: 1em; }
.ts-icon--sm { width: 18px; height: 18px; }
.ts-icon--lg { width: 32px; height: 32px; }

/* ---- Buttons ---------------------------------------------------
   Pair with interactions.css (.ts-btn) for hover/press motion:
     class="ts-btn ts-btn--primary"  ← one class set, colors + motion */
.ts-btn {
  font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: .02em;
  text-transform: uppercase; border-radius: var(--r-sm); padding: 12px 22px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.ts-btn--primary { background: var(--accent); color: var(--on-accent); }
.ts-btn--outline { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.ts-btn--ghost   { background: transparent; color: var(--fg-muted); }
.ts-btn--sm { padding: 8px 14px; font-size: 13px; }
.ts-btn[disabled], .ts-btn--disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ---- Inputs ---------------------------------------------------- */
.ts-field { display: block; }
.ts-field > .ts-label { display: block; font-size: 12px; color: var(--fg-muted); margin-bottom: 6px; letter-spacing: .02em; }
.ts-input {
  width: 100%; box-sizing: border-box; background: var(--bg-elev);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 13px; color: var(--fg); font-family: var(--font-body); font-size: 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease; outline: none;
}
.ts-input::placeholder { color: var(--fg-faint); }
.ts-input:focus, .ts-input.focus { border-color: var(--focus); box-shadow: var(--focus-ring); }

/* ---- Tags / badges --------------------------------------------- */
.ts-tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  color: var(--fg-muted); }
.ts-tag--gold { color: var(--accent); border-color: rgba(191,163,105,.45); }
.on-light .ts-tag--gold { color: var(--ts-gold-deep); border-color: rgba(154,131,80,.55); }

/* ---- Cards / panels -------------------------------------------- */
.ts-card { background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; }
.ts-panel { background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px; }
.ts-tile { background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px; }
.on-light .ts-card { box-shadow: 0 12px 30px rgba(15,21,26,.10); }
.on-light .ts-tile { background: var(--bg-raised); }

/* Panel section heading (the gold uppercase kicker used in demos) */
.ts-panel-h { font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }

/* ---- Nav furniture ---------------------------------------------- */
.ts-lang { display: inline-flex; gap: 2px; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 2px; }
.ts-lang > * { font-size: 11px; padding: 4px 9px; border-radius: var(--r-pill);
  color: var(--fg-muted); text-transform: uppercase; font-weight: 700;
  background: transparent; border: none; cursor: pointer; font-family: var(--font-body); }
.ts-lang > .on { background: var(--accent); color: var(--on-accent); }
.ts-wa { display: inline-flex; align-items: center; gap: 7px; background: var(--accent);
  color: var(--on-accent); font-weight: 700; font-size: 13px; padding: 8px 14px;
  border-radius: var(--r-pill); white-space: nowrap; text-decoration: none; cursor: pointer; }

/* ============================================================
   SIGNATURE UTILITIES — what makes a surface read "Transhow"
   ============================================================ */

/* Film grain overlay — add to a positioned container (or body via .ts-grain--fixed) */
.ts-grain { position: relative; }
.ts-grain::after, .ts-grain--fixed::after { content: ""; pointer-events: none; opacity: .05; z-index: 2;
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ts-grain--fixed::after { position: fixed; }

/* Protection scrim — keeps type legible over photography */
.ts-scrim-bottom { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,11,14,.45) 0%, rgba(8,11,14,0) 30%, rgba(8,11,14,.08) 58%, rgba(8,11,14,.9) 100%); }

/* Poster furniture — caption over a full-width hairline rule */
.ts-rule-caption { display: block; }
.ts-rule-caption > .t { font-size: 15px; color: var(--fg); opacity: .92; }
.ts-rule-caption::after { content: ""; display: block; height: 1px;
  background: var(--line-strong); margin-top: 12px; }

/* Year / place stamp */
.ts-stamp { font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--fg-muted); letter-spacing: .02em; }