/* Kosal components. Every value comes from tokens.css; nothing here is a raw colour. */

.ks-root { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Buttons ---------------------------------------------------------------- */
.ks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 500 15px/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-settle), color var(--dur-fast) var(--ease-settle),
    border-color var(--dur-fast) var(--ease-settle), transform var(--dur-base) var(--ease-settle);
}
.ks-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ks-btn--primary {
  position: relative; overflow: hidden; isolation: isolate; color: var(--on-amber); font-weight: 600; letter-spacing: -0.01em;
  background: var(--amber) var(--grad-amber); border-color: color-mix(in srgb, var(--amber) 62%, #000);
  box-shadow: inset 0 1px 0 #ffffff6b, inset 0 -2px 0 #00000024, 0 10px 22px -14px color-mix(in srgb, var(--amber) 90%, transparent);
  transition: transform var(--dur-base) var(--ease-settle), box-shadow var(--dur-base) var(--ease-settle), filter var(--dur-fast) var(--ease-settle);
}
/* On hover a band of dither pixels sweeps across: the ridgeline's print language, in amber light */
.ks-btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(#fff7e0 0.9px, transparent 1.1px) 0 0 / 3px 3px;
  -webkit-mask: linear-gradient(105deg, transparent 35%, #000 48%, #000 52%, transparent 65%) 160% 0 / 260% 100% no-repeat;
          mask: linear-gradient(105deg, transparent 35%, #000 48%, #000 52%, transparent 65%) 160% 0 / 260% 100% no-repeat;
  opacity: .7;
}
.ks-btn--primary:hover { transform: translateY(-1px); filter: saturate(1.08) brightness(1.03);
  box-shadow: inset 0 1px 0 #ffffff80, inset 0 -2px 0 #00000024, 0 14px 26px -14px var(--amber); }
.ks-btn--primary:hover::after { animation: ks-sheen .9s var(--ease-settle) both; }
.ks-btn--primary:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #ffffff4d, inset 0 2px 4px #00000026; }
@keyframes ks-sheen { from { -webkit-mask-position: 160% 0; mask-position: 160% 0; } to { -webkit-mask-position: -60% 0; mask-position: -60% 0; } }
/* The arrow sits in its own small tile, which nudges forward on hover */
.ks-btn .ks-arrow {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0 -8px 0 4px; border-radius: 4px; font-size: 14px; line-height: 1;
  transition: transform var(--dur-base) var(--ease-settle), background-color var(--dur-fast) var(--ease-settle);
}
.ks-btn--primary .ks-arrow { background: color-mix(in srgb, var(--on-amber) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-amber) 10%, transparent); }
.ks-btn--primary:hover .ks-arrow { transform: translateX(3px); background: var(--on-amber); color: var(--amber); }
.ks-btn--secondary { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); border-color: var(--line-strong); }
.ks-btn--secondary:hover { background: var(--surface-2); border-color: var(--jade-deep); }
.ks-btn--secondary .ks-arrow { background: var(--surface-2); color: var(--jade); }
.ks-btn--secondary:hover .ks-arrow { transform: translateX(3px); background: var(--jade-soft); }
.ks-btn--link { min-height: 44px; padding: 0; color: var(--jade); background: none; }
.ks-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ks-btn--link .ks-arrow { width: auto; height: auto; margin: 0; background: none; }
/* The arrow is drawn, not typed, so it sits dead centre in its tile whatever the font's metrics */
.ks-btn--primary .ks-arrow, .ks-btn--secondary .ks-arrow { position: relative; font-size: 0; color: inherit; }
/* Absolutely centred over the whole tile: the hidden "→" text can't push it off-centre */
.ks-btn--primary .ks-arrow::before, .ks-btn--secondary .ks-arrow::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Labels: eyebrow, badge, metric chip ------------------------------------ */
.ks-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 500 11px/16px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.ks-eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--jade); }
.ks-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 3px; border-radius: var(--radius-xs);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--jade-soft);
}
.ks-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--amber); }
.ks-chip {
  display: inline-flex; align-items: baseline; gap: var(--space-2); padding: 6px 10px; border-radius: var(--radius-xs);
  border: 1px solid var(--line); font: 500 13px/20px var(--font-mono); color: var(--ink-muted);
}
.ks-chip b { color: var(--ink); font-weight: 500; }

/* Accent: one serif phrase inside a headline ----------------------------- */
.ks-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Cards ----------------------------------------------------------------- */
.ks-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-settle), background-color var(--dur-base) var(--ease-settle);
}
.ks-card:hover { border-color: var(--line-strong); }
.ks-card__meta { font: 500 11px/16px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.ks-card__title { font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--space-2); }
.ks-card__body { font: 400 15px/24px var(--font-sans); color: var(--ink-muted); margin: 0; }
.ks-card__results { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Ridgeline host and altimeter ------------------------------------------- */
.ks-ridge { overflow: hidden; }
.ks-alt {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity 350ms ease; font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink);
}
.ks-alt i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }
.ks-alt b { position: absolute; left: -0.5px; bottom: 6px; width: 1px; height: 26px; background: var(--ink); opacity: 0.55; }
.ks-alt span {
  position: absolute; left: 0; bottom: 34px; transform: translateX(-50%); white-space: nowrap; padding: 5px 7px 4px;
  border-radius: 5px; background: var(--paper); box-shadow: 0 0 0 1px var(--line);
}

/* Route on the ridgeline (patterns/route.js) ----------------------------- */
.route { position: absolute; left: 0; bottom: 0; z-index: 2; pointer-events: none; }
.route svg { position: absolute; inset: 0; overflow: visible; }
.route path { fill: none; stroke: var(--jade); stroke-width: 1.5; stroke-dasharray: 2 4; }
.route .clip { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform 2.8s var(--ease-settle); }
.route .climber { fill: var(--amber); opacity: 0; transition: opacity .6s ease 2.8s; }
.route.go .clip { transform: none; } .route.go .climber { opacity: 1; }
.wp { position: absolute; width: 0; height: 0; opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .8s var(--ease-settle); transition-delay: calc(var(--i) * 560ms + 200ms); }
.route.go .wp { opacity: 1; transform: none; }
.wp i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--paper); box-shadow: 0 0 0 1.5px var(--jade); }
.wp.end i { background: var(--jade); }
.wp b { position: absolute; left: -.5px; bottom: 6px; width: 1px; height: 22px; background: var(--jade); opacity: .5; }
.wp span { position: absolute; bottom: 30px; left: 0; transform: translateX(-50%); white-space: nowrap; display: grid; gap: 2px; padding: 5px 7px 4px; border-radius: 5px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line); font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.wp span em { font-style: normal; color: var(--ink-faint); letter-spacing: .06em; }
.wp.first span { transform: translateX(-12px); } .wp.last span { transform: translateX(calc(-100% + 12px)); }

@media (prefers-reduced-motion: reduce) {
  .route .clip, .wp { transition: none; } .route .climber { display: none; }
  .ks-btn, .ks-btn .ks-arrow, .ks-card { transition: none; }
  .ks-btn--primary:hover::after { animation: none; }
}