/* DarkTiger component library v1, 2026-09-23. Loads after tokens.css and uses its names only.
   Every component here is assembled, never re-invented per project. */

/* ---------- type ---------- */
.h1, h1 { font-size: var(--t-display-1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; max-width: 20ch; }
.h2, h2 { font-size: var(--t-display-2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-wrap: balance; }
.h3, h3 { font-size: var(--t-display-3); line-height: var(--lh-snug); }
.lead { font-size: var(--t-20); color: var(--graphite); max-width: 65ch; }
.fine { font-size: var(--t-14); color: var(--mute); }
.kick { font-size: var(--t-12); font-weight: 800; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }

/* ---------- layout ---------- */
.section { padding-block: var(--s-8); }
.section + .section { border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid { display: grid; gap: var(--grid-gap); }
.grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
@media (max-width: 1024px) { .grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px)  { .grid.two, .grid.three, .grid.four, .split { grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-2);
  font: inherit; font-size: var(--t-16); font-weight: 700; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--d-fast) var(--e-out), filter var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.btn.sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--t-14); }
.btn.lg { min-height: 56px; padding: 0 var(--s-6); }
.btn.solid { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.destructive { background: var(--err); color: var(--paper); } /* paper, not #fff: white failed on the light error red of every dark scheme (directions lane 2026-09-26) */
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn[data-loading]::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--r-full); animation: dt-spin var(--d-slowest) linear infinite; }
@keyframes dt-spin { to { transform: rotate(360deg); } }

/* ---------- cards ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.card img { border-radius: var(--r-2); margin-bottom: var(--s-3); aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.card .link { margin-top: auto; padding-top: var(--s-3); font-weight: 700; color: var(--accent); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field > span { font-size: var(--t-14); font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--t-16); /* 16px stops iOS zoom */
  min-height: 48px; padding: var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); background: var(--paper); color: var(--ink); width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field .help { font-size: var(--t-12); color: var(--mute); }
.field[data-state="error"] input, .field[data-state="error"] textarea { border-color: var(--err); }
.field[data-state="error"] .help { color: var(--err); }
.hp { position: absolute; left: -9999px; font-size: var(--t-16); }

/* a link that stands on its own line is a target, not prose: give it a real hit area */
.link-standalone { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- notices ---------- */
.notice { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-2); padding: var(--s-4); background: var(--paper-2); }
.notice.info { border-left-color: var(--accent); }
.notice.success { border-left-color: var(--ok); }
.notice.warn { border-left-color: var(--warn); }
.notice.error { border-left-color: var(--err); }

/* ---------- badges, quotes, stats ---------- */
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-2); border-radius: var(--r-full); background: var(--paper-2); border: 1px solid var(--line); font-size: var(--t-12); font-weight: 700; }
.quote { border-top: 2px solid var(--ink); padding-top: var(--s-4); font-size: var(--t-20); }
.quote cite { display: block; margin-top: var(--s-3); font-size: var(--t-14); font-style: normal; color: var(--mute); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-4); }
.stats b { display: block; font-size: var(--t-48); line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { display: block; font-size: var(--t-14); color: var(--mute); margin-top: var(--s-1); }

/* ---------- steps ---------- */
.steps { list-style: none; display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); counter-reset: dt-step; }
.steps li { border-top: 2px solid var(--ink); padding-top: var(--s-3); counter-increment: dt-step; }
.steps li::before { content: counter(dt-step); display: block; font-size: var(--t-32); line-height: 1; color: var(--accent); margin-bottom: var(--s-2); font-variant-numeric: tabular-nums; }

/* ---------- accordion ---------- */
.accordion details { border-top: 1px solid var(--line); padding: var(--s-4) 0; }
.accordion summary { font-weight: 700; cursor: pointer; min-height: 24px; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; float: right; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion p { margin-top: var(--s-2); color: var(--graphite); }

/* ---------- table that stacks ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); }
@media (max-width: 768px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr { border: 1px solid var(--line); border-radius: var(--r-2); margin-bottom: var(--s-3); padding: var(--s-2); }
  .table td { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .table td::before { content: attr(data-label); font-weight: 700; }
}

/* ---------- gallery, marquee ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.gallery img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-2); }

/* ---------- sticky mobile CTA ---------- */
.ctabar { display: none; }
@media (max-width: 640px) {
  body { padding-bottom: 64px; }
  .ctabar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0 0; z-index: 30; height: 56px; padding-bottom: env(safe-area-inset-bottom); background: var(--plate); }
  .ctabar a { display: flex; align-items: center; justify-content: center; color: var(--plate-ink); font-weight: 700; text-decoration: none; }
  .ctabar a.go { background: var(--accent); color: var(--accent-ink); }
}

/* ---------- spacing utilities, so no component ever needs a style attribute ---------- */
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }