/* Linkers kit v1 header styles (web/public/kit/v1/kit.js). One copy for every *.linkers.ooo surface. */
lk-header { display: block; }
/* Defaults for pages whose own theme doesn't define these (zero specificity: a page's :root wins). */
:where(:root) {
  --font-display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-lg: 12px;
  --shadow-pop: 0 4px 32px rgba(0,0,0,0.5);
  --on-accent: #ffffff;
}
/* Header. The brand side (wordmark, page title): linkers.ooo pages put it in their own header, app
   pages get it in the <lk-site-header class="lk-header"> nginx adds; both are styled here, so no app
   keeps a copy. */
.lk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
/* On app pages nginx adds the header itself (infra/nginx/linkers-kit.mjs): <lk-site-header>, a child
   of <body>, as wide as the page's .lk-container. */
lk-site-header.lk-header { max-width: 1400px; margin-left: auto; margin-right: auto; }
/* App entries for the profile menu wait inside <lk-header> until the kit reads them. */
lk-header > a[data-lk-menu] { display: none; }
/* The brand never gets narrower than the wordmark and the page title's longest word: a squeezed
   header wraps the nav's pills instead. The logo keeps its width too, even where an app's own CSS
   sets img { max-width: 100% } (which lets an image shrink to nothing in the width sums); otherwise
   the wordmark ran on under the page title at 768 px (DGGdle, Stocks). */
.lk-header .lk-brand, lk-header .lk-brand { display: flex; align-items: center; gap: 18px; }
.lk-header .lk-brand-link, lk-header .lk-brand-link { text-decoration: none; border-radius: var(--radius-sm); }
h1.wordmark, .lk-header .lk-wordmark, lk-header .lk-wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
.lk-header .lk-wordmark img, lk-header .lk-wordmark img { height: 32px; width: auto; max-width: none; image-rendering: pixelated; }
.lk-header .lk-wordmark .tld, lk-header .lk-wordmark .tld { color: var(--accent); margin-left: var(--wordmark-tld-kern); letter-spacing: var(--wordmark-tld-letter-spacing); }
.lk-header .lk-page-title, lk-header .lk-page-title {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.12em; margin: 0; text-decoration: none;
  border-radius: var(--radius-sm);
}
a.lk-page-title:hover { color: var(--accent); }
lk-header .lk-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
lk-header .lk-nav-list { display: contents; list-style: none; margin: 0; padding: 0; }
lk-header .lk-nav-list > li { display: inline-flex; }

/* Pills */
.lk-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 5px 14px 5px 33px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  transition:
    padding 0.42s cubic-bezier(.55,.05,.25,1),
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
lk-header .lk-pill .glyph {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%) rotate(0deg);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition:
    left 0.42s cubic-bezier(.55,.05,.25,1),
    transform 0.42s cubic-bezier(.55,.05,.25,1),
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
lk-header .lk-pill:hover, lk-header .lk-pill.is-active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
  padding: 5px 33px 5px 14px;
}
lk-header .lk-pill:hover .glyph, lk-header .lk-pill.is-active .glyph {
  left: calc(100% - 27px);
  transform: translateY(-50%) rotate(540deg);
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--accent);
}

/* Focus rings */
.lk-body :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
lk-header .lk-pill:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* Dropdown panels (theme settings, profile) */
.lk-menu-wrap { position: relative; display: inline-flex; }
lk-header .lk-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 300;
  background: var(--bg-surface);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
lk-header .lk-theme-panel {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 220px;
}
lk-header .lk-theme-section { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
lk-header .lk-theme-section-title {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 0;
}
lk-header .lk-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
lk-header .lk-theme-circles { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; }
lk-header .lk-theme-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.12s, outline-color 0.12s;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
lk-header .lk-theme-circle:hover { transform: scale(1.15); }
lk-header .lk-theme-circle.is-active { outline-color: var(--accent); }
.lk-body .lk-theme-circle:focus-visible { outline-color: var(--text-primary); }
lk-header .lk-theme-selected-name { font-size: 11px; color: var(--text-secondary); margin-top: 5px; min-height: 16px; }

lk-header button.lk-swatch-black { background: #000; border-color: rgba(255,255,255,0.2); }
lk-header button.lk-swatch-dark { background: #0d1117; border-color: rgba(255,255,255,0.15); }
lk-header button.lk-swatch-light { background: #dde3ec; border-color: rgba(10,18,36,0.15); }
lk-header button.lk-swatch-white { background: #eef2f8; border-color: rgba(10,18,36,0.12); }
lk-header button.lk-swatch-blue { background: #86b9ee; }
lk-header button.lk-swatch-violet { background: #a66be5; }
lk-header button.lk-swatch-coral { background: #ff9058; }
lk-header button.lk-swatch-red { background: #d7003b; }
lk-header button.lk-swatch-green { background: #99b76f; }
lk-header button.lk-swatch-gold { background: #fbbf24; }
[data-theme="light"] .lk-swatch-accent, [data-theme="white"] .lk-swatch-accent { border-color: rgba(10,18,36,0.20); }
[data-theme="light"] .lk-swatch-blue, [data-theme="white"] .lk-swatch-blue { background: #2c70d4; }
[data-theme="light"] .lk-swatch-violet, [data-theme="white"] .lk-swatch-violet { background: #7a3ec9; }
[data-theme="light"] .lk-swatch-coral, [data-theme="white"] .lk-swatch-coral { background: #cc5a1c; }
[data-theme="light"] .lk-swatch-red, [data-theme="white"] .lk-swatch-red { background: #b0002e; }
[data-theme="light"] .lk-swatch-green, [data-theme="white"] .lk-swatch-green { background: #5b7a34; }
[data-theme="light"] .lk-swatch-gold, [data-theme="white"] .lk-swatch-gold { background: #c8960c; }

lk-header .lk-tint-toggle {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border-hover);
  background: var(--bg-input);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  flex-shrink: 0;
  padding: 0;
}
lk-header .lk-tint-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 0.15s, background 0.15s;
}
lk-header .lk-tint-toggle[aria-checked="true"] { background: var(--accent-dim); border-color: var(--accent-border); }
lk-header .lk-tint-toggle[aria-checked="true"]::after { transform: translateX(18px); background: var(--accent); }
lk-header .lk-tint-toggle:disabled { opacity: 0.35; cursor: default; }

lk-header .lk-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
lk-header .lk-check-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; margin: 0; }

/* Profile menu */
.lk-auth-panel { min-width: 200px; overflow: hidden; padding: 4px 0; }
lk-header .lk-auth-head { padding: 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
lk-header .lk-auth-kicker { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 3px; }
lk-header .lk-auth-name { font-size: 13px; color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
lk-header .lk-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text-secondary);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
lk-header .lk-menu-item:hover, lk-header .lk-menu-item:focus-visible { background: var(--bg-hover); color: var(--text-primary); }
.lk-body .lk-menu-item:focus-visible { outline-offset: -2px; }
lk-header .lk-menu-item.is-danger, lk-header .lk-menu-item.is-danger:hover { color: var(--red); }
lk-header .lk-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Anchored header ("Anchor header while scrolling") with an opaque top gap */
html.is-sticky-header .lk-header {
  position: sticky;
  top: 24px;
  z-index: 200;
  background: var(--bg-base);
}
html.is-sticky-header .lk-header::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: -20px;
  right: -20px;
  height: 24px;
  background: var(--bg-base);
  pointer-events: none;
}

/* Narrow screens: nav wraps under the brand; menus span the nav row. */
@media (max-width: 720px) {
  body.lk-body { padding: 16px 16px 24px; }
  html.is-sticky-header .lk-header { top: 16px; }
  html.is-sticky-header .lk-header::before { height: 16px; left: -16px; right: -16px; }
  .lk-header { flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px; }
  .lk-header .lk-wordmark, lk-header .lk-wordmark { font-size: 21px; gap: 10px; }
  .lk-header .lk-wordmark img, lk-header .lk-wordmark img { height: 28px; }
  lk-header .lk-nav { position: relative; width: 100%; justify-content: flex-start; gap: 6px; }
  lk-header .lk-menu-wrap { position: static; }
  lk-header .lk-panel { left: 0; right: 0; }
  lk-header .lk-auth-panel { min-width: 0; }
}

lk-header .lk-menu-list { list-style: none; margin: 0; padding: 0; }
/* Closed panels stay closed whatever page CSS says about .lk-theme-panel or .lk-panel. */
lk-header .lk-panel[hidden] { display: none !important; }
lk-header .lk-theme-panel:not([hidden]) { display: flex; }
lk-header .lk-auth-slot { display: inline-flex; }

/* Page element rules (label, button:hover) must not restyle the kit's controls. */
lk-header .lk-check-row span { text-transform: none; letter-spacing: normal; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
lk-header button.lk-theme-circle:hover { box-shadow: none; }