/* Reusable component classes, ported from the Tusome Design System's
   components/components.css. Class-based so hover/press/focus states
   are real transitions, not JS. */

/* ---------- Brand lockup ----------
   The "stamped" mark (ink T on a torn tape patch, /assets/tusome-mark.svg) is
   self-contained and holds on any ground, so one file serves the light nav
   card, the ink footer and the light 404/privacy pages. Only the wordmark
   colour switches. Favicons and the manifest pull from the same logo pack. */
.tu-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--lockup-gap);
  min-width: 0;
  background: none;
  border: none;
  text-decoration: none;
}
.tu-lockup:hover { background: none; }
.tu-lockup__mark {
  display: block;
  width: var(--lockup-icon);
  height: var(--lockup-icon);
  flex-shrink: 0;
  border-radius: 0;
}
.tu-lockup__mark--app {
  width: var(--lockup-icon);
  height: var(--lockup-icon);
}
/* Header lockup: the compact 32px mark + a 19px wordmark, per the navbar
   spec — held constant, smaller than the footer/loader tokens. */
.site-header .tu-lockup {
  gap: var(--space-3);
}
.site-header .tu-lockup__mark--app {
  width: 32px;
  height: 32px;
}
.site-header .tu-lockup__word {
  height: auto;
  font-size: 19px;
  letter-spacing: -.005em;
}
.tu-lockup__word {
  display: flex;
  align-items: center;
  height: var(--lockup-icon);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lockup-text);
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.tu-lockup--on-dark .tu-lockup__word { color: var(--cream); }

/* Wordmark on its own, no mark. The header carries the brand in type
   alone, so the word has to hold at every width and never drops out. */
.tu-lockup--wordmark .tu-lockup__word { display: flex; height: auto; }

@media (max-width: 359px) {
  .tu-lockup__word { display: none; }
  .tu-lockup--wordmark .tu-lockup__word { display: flex; }
}

/* ---------- Button ---------- */
.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--hard-sm);
  transition: transform var(--snap), box-shadow var(--snap), background var(--snap);
}
.ts-btn:hover { transform: var(--lift); box-shadow: var(--hard); background: var(--cream); }
.ts-btn:active { transform: var(--press); box-shadow: var(--hard-none); }
.ts-btn--primary { background: var(--tape); }
.ts-btn--primary:hover { background: var(--tape-2); }
.ts-btn--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.ts-btn--dark:hover { background: var(--ink-2); }
.ts-btn--ghost {
  background: transparent;
  border-color: var(--ink);
  box-shadow: none;
}
.ts-btn--ghost:hover { background: var(--tape); box-shadow: none; }
.ts-btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: 14px; box-shadow: var(--hard); }
.ts-btn--lg:hover { box-shadow: var(--hard-lg); }
.ts-btn--block { width: 100%; }
/* An icon set before the label to name the action. Sized to the type, held
   at that size, and never the only carrier of meaning: the label stays. */
.ts-btn__icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  margin-right: calc(var(--space-1) * -1);
}
.ts-btn[disabled] {
  color: var(--ink-3);
  border-color: var(--ink-3);
  background: var(--paper-2);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ---------- Eyebrow ---------- */
/* Body face at a lighter weight, not the display face: an eyebrow set in
   Archivo Black reads as the same voice as the heading it sits above,
   just smaller, which flattens the hierarchy instead of establishing
   one. Body weight 600 at a slightly larger size, in the mid ink tone,
   reads as a distinct, quieter label the eye passes through on the way
   to the heading. */
.ts-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-size-eyebrow);
  letter-spacing: var(--text-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
/* The tape-chip variant is a small filled badge, not a reading label, so
   it keeps the bold display face every other badge in the system uses. */
.ts-eyebrow--tape {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: var(--text-ls-label);
  color: var(--ink);
  background: var(--tape);
  padding: 4px var(--space-2);
}

/* ---------- Card ---------- */
.ts-card {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--hard);
  transition: transform var(--snap), box-shadow var(--snap);
}
.ts-card--lift:hover { transform: var(--lift); box-shadow: var(--hard-lg); }
.ts-card--pasted { transform: rotate(-.4deg); }
.ts-card--dark { background: var(--slate); color: var(--cream); }
.ts-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--ink);
  color: var(--cream);
  border-bottom: var(--border);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  min-height: 36px;
}
.ts-card__head--tape { background: var(--tape); color: var(--ink); }
.ts-card__body { padding: var(--space-5); }

/* ---------- Text highlight (marker) ----------
   Same inline highlighter pattern as the learner app, where key words
   get a tape-yellow wash. On the landing page section titles use the
   blue variant so emphasis reads as annotation, not a CTA chip. The
   fill is a solid slab with the system's hard offset shadow so it
   sits in the same language as cards and buttons. */
.ts-hl {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.05em 0.16em 0.08em;
  margin: 0 0.04em;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.ts-hl--tape {
  background: var(--tape);
}
.ts-hl--blue {
  background: color-mix(in srgb, var(--blue) 30%, var(--blue-soft));
}
h2:has(.ts-hl) { line-height: 1.18; }

/* ---------- Tape label ---------- */
.ts-tape {
  display: inline-block;
  background: var(--tape);
  color: var(--ink);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-size-hand-sm);
  line-height: 1.25;
  padding: var(--space-2) var(--space-4);
  transform: rotate(var(--tape-rotate));
  clip-path: var(--tape-clip);
  filter: drop-shadow(2px 3px 0 rgba(23, 21, 18, .28));
}

/* ---------- Annotation (handwritten margin note) ---------- */
.ts-annot {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--blue);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-size-hand);
  line-height: 1.3;
  transform: rotate(-1.4deg);
  max-width: 34ch;
}

/* ---------- Badge ---------- */
.ts-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: var(--border-w-thin) solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  padding: 3px var(--space-2);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
}
.ts-badge--green { background: var(--green-soft); border-color: var(--green); color: var(--green); }

/* ---------- Progress steps ---------- */
.ts-steps { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); }
.ts-steps__seg { flex: 1; height: 6px; border: var(--border-w-thin) solid var(--ink); background: var(--cream); }
.ts-steps__seg--done { background: var(--green); }
.ts-steps__seg--current { background: var(--tape); }

/* ---------- Stamp ---------- */
.ts-stamp {
  display: inline-block;
  border: var(--border-w) solid currentColor;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.ts-stamp--green { color: var(--green); }

/* ---------- Page frame ---------- */
.ts-page {
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--hard-lg);
  padding: var(--gutter-page);
  width: 100%;
}
@media (max-width: 759px) {
  .ts-page { padding: var(--gutter-page-mobile); }
}