/* The koechley.com site bar: the same small row at the top of every page and app, so everything
   links home and feels like one place. Apps keep their own design below it. Self-contained (it
   doesn't rely on an app's colors or fonts), AA contrast. The mark is Popi's: a small California
   poppy (four rounded petals and a center) in --kc-brand-mark, in the 10px slot the old square
   used. On a page that loads /kc-theme.css it takes the theme's tokens (--kc-*) and type roles
   instead, and /kc-theme.js turns the crumbs into one word (the poppy, then "Reading") that opens
   the map of the suite — or, when an app has .kc-appbar, collapses the bar and puts the poppy next
   to the H1 as the suite-map button — and adds the theme picker at the end. A breadcrumb bar
   (.kc-bar-trail, from kc_bar_html($trail, true) on pages that aren't apps) keeps every crumb and
   makes only the last one the switch. Without that script it stays "(poppy) koechley / nate / <app>".
   Markup (or kc_bar_html() in lib.php):
   <nav class="kc-bar" aria-label="koechley.com"><span class="kc-mark" aria-hidden="true"></span>
     <a href="/">koechley</a><span aria-hidden="true">/</span><a href="/nate/">nate</a>
     <span aria-hidden="true">/</span><span aria-current="page">reading</span></nav> */
.kc-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 .5em; margin: 0; padding: 0;
  font: var(--kc-type-ui, 400 14px/1.25rem "Helvetica Neue", Helvetica, Arial, sans-serif); letter-spacing: 0; text-transform: none;
  min-height: 2.75rem;
  color: var(--kc-muted, #6b6b6b);
}
.kc-bar a { color: inherit; text-decoration: none; padding: 10px 0; }
.kc-bar a:hover, .kc-bar a:focus-visible { color: var(--kc-ink, #111111); text-decoration: underline; text-underline-offset: 4px; }
.kc-bar [aria-current] { color: var(--kc-ink, #111111); }
.kc-mark { width: 10px; height: 10px; display: inline-block; flex: none; }
.kc-bar .kc-mark { margin-right: .125em; }
/* The poppy: petals cut from the token color by a mask, with a deeper center. One rule draws it in
   the bar and on the title switch. Change the color with --kc-brand-mark (kc-theme.css). */
.kc-mark, .kc-title-switch-btn::before {
  --kc-poppy: var(--kc-brand-mark, #e06f14);
  background-color: var(--kc-poppy);
  background-image: radial-gradient(circle closest-side, color-mix(in srgb, var(--kc-poppy) 60%, #5a1e00) 30%, transparent 38%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='5' r='4.6'/%3E%3Ccircle cx='15' cy='10' r='4.6'/%3E%3Ccircle cx='10' cy='15' r='4.6'/%3E%3Ccircle cx='5' cy='10' r='4.6'/%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='5' r='4.6'/%3E%3Ccircle cx='15' cy='10' r='4.6'/%3E%3Ccircle cx='10' cy='15' r='4.6'/%3E%3Ccircle cx='5' cy='10' r='4.6'/%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  border-radius: 0;
}
/* The switcher: this app's name, opening the map of the suite. */
.kc-switch { position: relative; }
.kc-switch-btn {
  display: inline-flex; align-items: center; gap: .25em; min-height: 2.75rem; padding: 0; margin: 0;
  font: inherit; color: var(--kc-ink, #111111); background: none; border: 0; cursor: pointer;
}
.kc-switch-btn:focus-visible { outline: var(--kc-focus, 2px solid currentColor); outline-offset: 2px; }
.kc-switch-btn svg { width: 12px; height: 12px; color: var(--kc-muted, #6b6b6b); opacity: 0; transition: opacity var(--kc-dur, .18s), transform var(--kc-dur, .18s); }
.kc-switch-btn:hover svg, .kc-switch-btn:focus-visible svg, .kc-switch-btn[aria-expanded="true"] svg { opacity: 1; }
.kc-switch-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: none) { .kc-switch-btn svg { opacity: 1; } } /* no hover on a phone: always shown */
/* Breadcrumb pages (kc_bar_html(..., true)): every crumb stays; the last one is the switch and
   reads as the current crumb. */
.kc-bar-trail .kc-switch-btn { min-height: 0; padding: 10px 0; }
/* The bar fills its row so the theme picker sits at the far end, and the suite map opens from the
   bar's left edge (the last crumb can sit far right on a phone). */
.kc-bar-trail { position: relative; flex: 1 1 auto; }
.kc-bar-trail .kc-switch { position: static; }
.kc-switch-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 1000; width: min(18rem, calc(100vw - 32px)); max-height: calc(100dvh - 64px); overflow-y: auto;
  padding: .35rem; background: var(--kc-surface, var(--kc-bg, #ffffff)); color: var(--kc-ink, #111111);
  border: 1px solid var(--kc-line, #e8e8e5); border-radius: var(--kc-radius-l, 8px); box-shadow: var(--kc-shadow-float, 0 8px 24px rgb(0 0 0 / .14));
}
.kc-switch-menu[hidden] { display: none; }
/* A cluster's name is a label under a single hairline, not a row: small, muted, never filled. */
.kc-switch-menu h2 {
  margin: .4rem 0 0; padding: .55rem .75rem .15rem; border-top: 1px solid var(--kc-line, #e8e8e5);
  font: var(--kc-type-label, 500 12px/1rem sans-serif); font-variant-caps: var(--kc-label-caps, normal); letter-spacing: var(--kc-label-tracking, 0); text-transform: none; color: var(--kc-muted, #6b6b6b);
}
.kc-switch-menu ul { margin: 0; padding: 0; list-style: none; }
.kc-switch-menu > ul:first-child { display: grid; grid-template-columns: 1fr 1fr; } /* koechley and Nate share a row */
.kc-switch-menu > ul:first-child + h2 { margin-top: .2rem; }
/* An app is a full row you can tap; the one you're in is selected. */
.kc-bar .kc-switch-menu a, .kc-h1-switch .kc-switch-menu a {
  box-sizing: border-box; display: flex; align-items: center; min-height: var(--kc-target, 44px); padding: .25rem .75rem;
  border-radius: var(--kc-radius, 0); color: var(--kc-ink, #111111); font: var(--kc-type-ui, 400 14px/1.25rem sans-serif); text-decoration: none;
}
.kc-bar .kc-switch-menu a:hover, .kc-bar .kc-switch-menu a:focus-visible,
.kc-h1-switch .kc-switch-menu a:hover, .kc-h1-switch .kc-switch-menu a:focus-visible { background: var(--kc-surface-2, #f5f5f3); text-decoration: none; }
.kc-bar .kc-switch-menu a:focus-visible, .kc-h1-switch .kc-switch-menu a:focus-visible { outline: var(--kc-focus, 2px solid currentColor); outline-offset: -3px; }
/* The attribute twice: an app's own `.x .kc-bar a[aria-current]` (Reading has one) must not repaint the text. */
.kc-bar .kc-switch-menu a[aria-current][aria-current], .kc-h1-switch .kc-switch-menu a[aria-current][aria-current] { background: var(--kc-selected-bg, #111111); color: var(--kc-selected-ink, #ffffff); }
/* A product with missions (Home Scout): its name is a plain row, its missions indented under it. */
.kc-switch-menu .kc-switch-parent > span {
  display: flex; align-items: center; min-height: var(--kc-target, 44px); padding: .25rem .75rem; box-sizing: border-box;
  color: var(--kc-ink, #111111); font: var(--kc-type-ui, 400 14px/1.25rem sans-serif);
}
.kc-bar .kc-switch-menu .kc-switch-mission a, .kc-h1-switch .kc-switch-menu .kc-switch-mission a { padding-left: 1.75rem; }
.kc-h1-switch, .kc-title-row { position: relative; }
.kc-title-row { display: block; width: fit-content; max-width: 100%; }
/* When an app has .kc-appbar, the suite switcher moves onto the title row and the top bar hides visually while remaining in DOM for compatibility. */
.kc-bar.kc-bar-consolidated {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
/* H1 stays on the content edge; the suite-map mark sits in its leading padding. */
.kc-appbar h1.kc-title-switch {
  margin: 0; max-width: 100%;
  padding-left: calc(10px + .35em);
}
/* The whole title is the suite-map control. The mark stays in the heading's leading padding;
   the heading itself remains an h1 so apps can still name it and move focus to it. */
.kc-title-switch-btn {
  box-sizing: border-box; position: absolute; z-index: 1;
  left: 0; top: 50%; width: 100%; height: var(--kc-target, 44px);
  margin: 0; padding: 0; border: 0; border-radius: var(--kc-radius, 0);
  background: transparent; cursor: pointer; color: transparent; font-size: 0;
  transform: translateY(-50%);
}
.kc-title-switch-btn::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px;
  transform: translateY(-50%);
  transition: transform var(--kc-dur, .18s);
}
/* A mask clips a ring, so the poppy answers hover by opening a little wider instead. */
.kc-title-switch-btn:hover::before { transform: translateY(-50%) scale(1.2); }
.kc-title-switch-btn:focus-visible { outline: var(--kc-focus, 2px solid #002fa7); outline-offset: 2px; }
.kc-title-switch-btn[aria-expanded="true"]::before { transform: translateY(-50%) scale(1.2); }
.kc-bar-wrap { padding: 12px 16px 0; }
/* Untethered pages follow the system's dark mode; apps that stay light add class="kc-bar kc-light".
   Themed pages (data-kc-theme) get dark from the theme's tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-kc-theme]) .kc-bar:not(.kc-light) { color: #9a9a9a; }
  :root:not([data-kc-theme]) .kc-bar:not(.kc-light) a:hover, :root:not([data-kc-theme]) .kc-bar:not(.kc-light) a:focus-visible, :root:not([data-kc-theme]) .kc-bar:not(.kc-light) [aria-current] { color: #eeeeee; }
}