/* Kleto brand layer for Kleto Pulse (docs/DESIGN-BRAND.md, 2026-10-19).
   Loaded last, so it sits over the per view stylesheets. It carries the
   kleto.com identity (11a lockup, iridescent chrome accents, title case)
   on top of Pulse's instrument grammar. It never sets a metric outcome
   colour: --up, --warn, --down and the data series stay where they are. */

/* ── The Kleto product lockup ────────────────────────────────────────────
   Standard: docs/DESIGN-BRAND.md "Product lockups". A Kleto product is the
   K tile + its PRODUCT NAME in the KLETO wordmark style (Archivo extended
   caps, optically spaced by scripts/kleto-wordmark/product.py), never a
   text face. The markup keeps its text ("KLETO" + route name + ™) so the
   accessible name, the route branding and the gates do not change: the
   text collapses to zero size and masks draw the lockup. --cap is the cap
   height. The name band is 1.0365 cap tall; the tile geometry is the Pulse
   variant below (the 11a standard is tile 1.4 cap, gap 0.868 cap). */
.topbar__mark, .login__mark {
  --cap: 11px;
  --name: url('/brand/product-pulse.svg?v=565bf876'); --name-w: 6.3007;
  display: inline-flex; align-items: center; gap: 0;
  font-size: 0; letter-spacing: 0; line-height: 1;
}
/* The AI route renders its header into #ai (ai.js chrome('ai')). */
#ai .topbar__mark { --name: url('/brand/product-ai.svg?v=385615ac'); --name-w: 1.7514; }
.login__mark { --cap: 20px; display: flex; margin: 0 0 28px; }
/* Pulse variant (owner, 2026-10-19): the K inside the tile is exactly the
   height of the product name's caps. The K spans the middle half of the
   tile (y 25 to 75 of 100 in kleto-mark.svg), so the tile is 2 caps tall.
   In this app the tile and the product name are plain ink (black/white);
   the iridescence goes on the live pulse dot beside them (owner: "I meant
   the green pulsing dot on the left, not the pulse text"). */
.topbar__mark::before, .login__mark::before {
  content: ''; order: 1; flex: 0 0 auto;
  width: calc(var(--cap) * 2); height: calc(var(--cap) * 2);
  margin-right: calc(var(--cap) * 0.5);
  background: var(--text);
  -webkit-mask: url('/brand/kleto-mark.svg?v=ded60666') center / contain no-repeat;
  mask: url('/brand/kleto-mark.svg?v=ded60666') center / contain no-repeat;
}
/* The login screen uses the same product lockup as the header, larger.
   Rendered against tile + KLETO + PULSE on 2026-10-19: two names of equal
   weight read as one long name, and the tile already says Kleto. KLETO
   alone is for surfaces where the company is the subject (kleto.com). */
.topbar__mark .topbar__live { order: 0; }
/* The live dot: an iridescent chrome bead that turns slowly, with a soft
   violet heartbeat ring. It is the app's heartbeat, not a metric outcome,
   so it leaves --up untouched elsewhere. */
@property --live-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.topbar__live {
  background: conic-gradient(from var(--live-a), #7cf7ff, #b18cff, #ff9ad5, #fff1a8, #7cf7ff);
  animation: live-turn 6s linear infinite, live-beat 2.6s ease-out infinite;
}
@keyframes live-turn { to { --live-a: 360deg; } }
@keyframes live-beat {
  0% { box-shadow: 0 0 0 0 rgba(177, 140, 255, .5); }
  70% { box-shadow: 0 0 0 6px rgba(177, 140, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(177, 140, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .topbar__live { animation: none; } }
/* The product name: the same ink and cut as KLETO, drawn from its SVG. */
.topbar__mark > span:not(.topbar__live), .login__mark > span {
  order: 3; flex: 0 0 auto; display: block;
  width: calc(var(--cap) * var(--name-w)); height: calc(var(--cap) * 1.0365);
  font-size: 0; color: transparent;
  background: var(--text);
  -webkit-mask: var(--name) center / contain no-repeat;
  mask: var(--name) center / contain no-repeat;
}
/* ™ sits after the last letter, its top on the cap line. */
.topbar__mark .tm, .login__mark .tm {
  order: 4; align-self: center; font-size: 8px; line-height: 1;
  margin-left: calc(var(--cap) * 0.18); color: var(--faint);
  transform: translateY(calc(var(--cap) * -0.5 + 2.5px));
}
@media (max-width: 380px) {
  .topbar__mark { --cap: 10px; }
}

/* ── Iridescent chrome accents ───────────────────────────────────────────
   Punctuation, not wallpaper: the focus ring, the active destination, the
   dock selection, primary button hover and a faint card hover glow. */
:root { --iri-soft: linear-gradient(100deg, rgba(124, 247, 255, .55), rgba(177, 140, 255, .55) 35%, rgba(255, 154, 213, .55) 65%, rgba(255, 241, 168, .5)); }
* { --ui-ring-color: var(--ring); --ui-ring: 2px solid var(--ring); }
[data-tip]:focus-visible { outline-color: var(--ring); }
@media (max-width: 759px) { .dock__item:focus-visible { outline-color: var(--ring); } }

/* Active destination: white ink on the faint plate, with an iridescent
   hairline under the label. */
.pulse-primary .ui-row { position: relative; }
.pulse-primary .ui-row[aria-current="page"]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 1px;
  background: var(--iri); pointer-events: none;
}
.pulse-more-links .ui-row[aria-current="page"] { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--iri-soft) border-box; }

/* Dock: the sliding selection plate and the launcher carry an iridescent
   hairline edge instead of a flat border. */
.dock__glow { border-color: transparent; background: linear-gradient(#151515, #151515) padding-box, var(--iri-soft) border-box; }
@media (max-width: 759px) {
  .dock .dock__launcher { border-color: transparent; background: linear-gradient(#141414, #141414) padding-box, var(--iri-soft) border-box; }
  .dock .dock__launcher:hover { background: linear-gradient(#1c1c1c, #1c1c1c) padding-box, var(--iri) border-box; }
}

/* Primary buttons: the palette A white pill with black text. Hover adds
   the chrome glow from kleto.com. Line buttons keep the hairline frame. */
.btn {
  border-radius: 999px; border-color: var(--accent); background: var(--accent); color: #000;
  font-family: var(--body); font-size: 15px; font-weight: 500;
  text-transform: none; letter-spacing: -0.005em;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn:hover:not(:disabled), .ui-btn.solid:hover:not(:disabled) {
  color: #000; background: #fff; border-color: #fff;
  box-shadow: 0 0 0 1px #fff, -12px 6px 30px -12px rgba(124, 247, 255, .55), 12px 8px 30px -12px rgba(255, 154, 213, .5), 0 10px 36px -12px rgba(177, 140, 255, .6);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn--ghost { background: transparent; }
.btn--ghost:not(.acc__rm--armed) { color: var(--dim); border-color: var(--line-strong); }
.btn--ghost:hover:not(:disabled):not(.acc__rm--armed) { background: rgba(255, 255, 255, .06); color: var(--text); border-color: var(--mark); box-shadow: none; }
.ui-btn.solid { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active:not(:disabled) { transform: none; } }

/* Interactive cards: a hairline lift and a faint iridescent under glow. */
.card--link:hover, .card--link:focus-visible {
  border-color: var(--line-strong);
  box-shadow: -14px 10px 36px -24px rgba(124, 247, 255, .45), 14px 12px 36px -24px rgba(255, 154, 213, .4), 0 16px 44px -26px rgba(177, 140, 255, .5);
}
.card--link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── Type: title case headings, no eyebrows, mono stays the data layer ───
   Kleto rules (docs/DESIGN-TASTE.md 2026-10-18): headings, nav, labels and
   buttons are title case, never forced caps; no eyebrows and no decorative
   numbering. Pulse keeps its drafting layer: small Space Mono captions on
   keys, table heads, units and dates, and mono numerals on every readout.
   Hostnames (card and detail names) stay mono lowercase identifiers. */
.section-title::before, .panel__t::before { content: none; }
.panel__title {
  font-family: var(--body); font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: -0.005em;
}
.section-title {
  font-family: var(--body); font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: -0.005em; color: var(--dim);
}
.hero__label { font-family: var(--body); font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; }
.sect__k { font-family: var(--body); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--dim); }
.tile__label, .loading__label, .lh-group__head { text-transform: none; letter-spacing: 0.02em; }
.tile__label { font-size: 11px; }
@media (max-width: 759px) { .dock__item { font-size: 10px; text-transform: none; letter-spacing: 0.01em; } }

/* Page eyebrows are decoration on these pages (the h1 already names the
   page), so they go. The database table group line carries data and stays. */
.bookings-eyebrow, .activity__eyebrow, .domains-eyebrow, .db-head .db-eyebrow, .ai-job-detail .ai-eyebrow, .portfolio__eyebrow { display: none; }
.db-eyebrow { color: var(--faint); }