/* zanbur-ui components. Needs tokens.css first (and fonts.css for Inter / JetBrains Mono).
   Every class starts with zu- so it cannot clash with a page's own CSS; state classes
   (is-on) only mean something inside a zu- block.
   Nothing here styles bare elements: a page opts in class by class.
   Only what a page uses is here (2026-10-15): the bar, buttons, a select and a range, the hub's
   plates, desk, title and caption. The drawing sheets are the sheet core's (sheet.css). */

/* ================================================================ page */
.zu-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
/* the hub: the whole page is a sheet on the desk */
.zu-page--desk { background: var(--desk); color: var(--ink); line-height: 1.55; }
.zu-page *, .zu-page *::before, .zu-page *::after { box-sizing: border-box; }
.zu-page :where(button, input, select, textarea) { font: inherit; color: inherit; }

.zu-link { color: var(--dim); text-decoration: none; }
.zu-link:hover { text-decoration: underline; }

/* ================================================================ top bar
   <header class="zu-topbar">
     <a class="zu-brand" href="/"><svg class="zu-brand__mark">..</svg>
       <b>Zanbur &middot; Layer Load</b><small>tagline</small></a>
     <span class="zu-topbar__grow"></span>
     ...page buttons...
     <div class="zu-account"></div>
   </header> */
.zu-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar);
  padding: 0 var(--gutter);
  background: var(--panel);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.zu-topbar__grow { flex: 1; }
.zu-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.zu-brand__mark { width: 25px; height: 28px; display: block; flex: none; overflow: visible; }
/* The bee, drawn as the video kit draws it: each line runs in thin and thickens as it lands, the
   stinger last and in the brand yellow. The art is zanbur-video-kit/assets/Logo.svg. */
.zu-brand__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 110;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: zu-mark-draw 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.zu-brand__mark path:nth-child(2) { animation-delay: 0.25s; }
.zu-brand__mark path:nth-child(3) { animation-delay: 0.45s; }
.zu-brand__mark path:nth-child(4) { animation-delay: 0.55s; }
.zu-brand__mark path.zu-brand__sting { stroke: var(--brand); animation-delay: 0.8s; }
@keyframes zu-mark-draw {
  from { stroke-dashoffset: 1; stroke-width: 20; opacity: 0; }
  15% { opacity: 1; }
  to { stroke-dashoffset: 0; stroke-width: 110; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .zu-brand__mark path { animation: none; } }
.zu-brand b {
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zu-brand small {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-dim); /* 2026-10-15: --muted read at 3.6:1 */
  letter-spacing: 0.02em;
  margin-left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the account button's place: kept the same size before and after it loads, so nothing jumps */
.zu-account { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 92px; min-height: 36px; flex: none; }
@media (max-width: 520px) { .zu-brand small { display: none; } }
@media (max-width: 359px) { .zu-account { min-width: 60px; } }
@media (min-width: 980px) { .zu-topbar { gap: 18px; } .zu-brand b { font-size: 15.5px; } }

/* The bar appbar.js draws (ZuBar.create): the brand is a link to the front page, the page's own
   controls stand towards the middle, and the account is at the right edge. On a phone it is the
   mark, the app's name and the account; the controls drop down from a button. */
.zu-appbar { position: relative; }
a.zu-brand:hover b { color: var(--accent); }
a.zu-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
.zu-topbar__mid { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The site's own switches (Simple / Advanced, Light / Dark) stand in the middle of the bar on every page,
   whatever the app's name and tagline (audit S8): the brand gives way (its tagline is cut) before they move. */
.zu-topbar__site { display: flex; align-items: center; gap: 8px; }
@media (min-width: 641px) {
  .zu-appbar .zu-topbar__site { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .zu-appbar .zu-brand { max-width: calc(50% - 150px - var(--gutter)); }
  .zu-appbar .zu-brand b { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
.zu-appbar .zu-seg[data-control=level] .zu-btn { min-width: 0; }
.zu-appbar .zu-btn { min-height: 36px; padding: 6px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.zu-appbar .zu-btn.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.zu-account__who { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.zu-appbar .zu-topbar__more { display: none; min-width: 36px; }
@media (max-width: 640px) {
  .zu-appbar .zu-topbar__more:not([hidden]) { display: inline-flex; }
  .zu-appbar .zu-topbar__mid { display: none; position: absolute; right: var(--gutter); top: calc(100% + 4px); z-index: 40; flex-direction: column; align-items: stretch; padding: 8px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
  .zu-appbar.is-open .zu-topbar__mid { display: flex; }
  .zu-appbar .zu-topbar__mid .zu-btn { min-height: var(--tap); }
  /* a phone's bar (2026-10-17, the phone view): the same 56 px, each thing on it a fingertip (44 px) to touch */
  .zu-appbar .zu-btn, .zu-appbar .zu-topbar__mid .zu-btn { min-height: 44px; }
  .zu-appbar .zu-topbar__more { min-width: 44px; }
  .zu-appbar a.zu-brand { min-height: 44px; }
  .zu-appbar .zu-topbar__mid + .zu-topbar__grow { display: none; }
  .zu-appbar .zu-account { min-width: 0; }
  .zu-appbar .zu-brand { flex: 1 1 0; overflow: hidden; }
  .zu-appbar .zu-brand b { overflow: hidden; text-overflow: ellipsis; }
  .zu-appbar .zu-topbar__grow { display: none; }
  .zu-account__who { max-width: 9ch; }
}
/* narrower still, the name gives way to the app's name: who is signed in is the title of "Sign out" */
@media (max-width: 480px) { .zu-account__who { display: none; } }

/* ================================================================ buttons
   .zu-btn                  default: a control on the chrome
   .zu-btn.zu-btn--primary  the one action, orange
   .zu-btn.zu-btn--quiet    a secondary action with no box, blue text
   .zu-btn.zu-btn--drawn    the hub's button, lettered on the sheet (add --primary for ink fill) */
.zu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 9px 12px;
  background: var(--control);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.zu-btn:hover { border-color: var(--accent); color: var(--accent); }
.zu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.zu-btn:disabled, .zu-btn[aria-disabled="true"] { opacity: 0.62; cursor: default; border-color: var(--line-strong); color: var(--text); }
.zu-btn small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-dim); }

.zu-btn--primary { background: var(--hot); border-color: var(--hot); color: var(--on-hot); font-weight: 700; }
.zu-btn--primary:hover { color: var(--on-hot); border-color: var(--hot); filter: brightness(1.06); }
.zu-btn--primary:disabled { border-color: var(--hot); color: var(--on-hot); }

.zu-btn--quiet { background: transparent; border-color: transparent; color: var(--accent); }
.zu-btn--quiet:hover { border-color: transparent; background: var(--accent-dim); }

.zu-btn--drawn {
  min-height: 0;
  padding: 6px 13px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.zu-btn--drawn:hover { border-color: var(--hot); color: var(--hot); }
.zu-btn--drawn.zu-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); filter: none; }
.zu-btn--drawn.zu-btn--primary:hover { background: var(--hot); border-color: var(--hot); color: #fff; }
.zu-btn--drawn:disabled { opacity: 0.55; color: var(--ink); border-color: var(--ink); }
/* on a phone a drawn button still has to be big enough to hit */
@media (max-width: 760px), (pointer: coarse) { .zu-btn--drawn { min-height: var(--tap); } }

/* a row of choices that are one control */
.zu-seg { display: inline-flex; }
.zu-seg .zu-btn { border-radius: 0; font-weight: 600; font-size: 13px; padding: 6px 12px; }
.zu-seg .zu-btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.zu-seg .zu-btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.zu-seg .zu-btn + .zu-btn { border-left: 0; }
.zu-seg .zu-btn.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ================================================================ form controls */
.zu-select {
  min-height: var(--tap);
  max-width: 100%;
  padding: 8px;
  background: var(--control);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: inherit;
}

.zu-select:focus { outline: 2px solid var(--accent-dim); border-color: var(--accent); }
.zu-select:focus-visible, .zu-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the keyboard's place on any link of a kit page (the hub's figures and names, the bar) */
.zu-page a:focus-visible, .zu-topbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zu-range { width: 100%; min-height: var(--tap); margin: 0; accent-color: var(--accent); touch-action: pan-y; }

/* ================================================================ plates (the hub's app cards)
   <a class="zu-plate" href="..">
     <div class="zu-plate__box"><i class="tl"></i><i class="tr"></i><i class="bl"></i><i class="br"></i>
       <svg class="zu-plate__mark">..</svg></div>
     <div class="zu-plate__cap">Layer Load</div><div class="zu-plate__sub">..</div>
     <p class="zu-plate__note">..</p><div class="zu-plate__tags"><span>..</span></div>
     <div class="zu-plate__open">Open &rarr;</div></a> */
.zu-plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 360px));
  gap: 26px;
  padding: 26px 0 34px;
}
.zu-plate { display: block; color: inherit; text-decoration: none; }
.zu-plate__box {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--rule) 23px 23.5px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--rule) 23px 23.5px);
  transition: border-color 0.16s ease;
}
.zu-plate:hover .zu-plate__box, .zu-plate:focus-visible .zu-plate__box { border-color: var(--hot); }
.zu-plate:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.zu-plate__mark { width: 42%; height: auto; }
.zu-plate__box i { position: absolute; width: 9px; height: 9px; font-style: normal; border: 0 solid var(--ink); }
.zu-plate__box i.tl { top: 4px; left: 4px; border-top-width: 1px; border-left-width: 1px; }
.zu-plate__box i.tr { top: 4px; right: 4px; border-top-width: 1px; border-right-width: 1px; }
.zu-plate__box i.bl { bottom: 4px; left: 4px; border-bottom-width: 1px; border-left-width: 1px; }
.zu-plate__box i.br { bottom: 4px; right: 4px; border-bottom-width: 1px; border-right-width: 1px; }
.zu-plate__cap {
  padding: 11px 0 3px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.zu-plate__sub { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); text-align: center; letter-spacing: 0.06em; }

.zu-plate__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.zu-plate__tags span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-light);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) { .zu-plate__box { transition: none; } }

/* ================================================================ the desk the hub's page lies on
   (the drawing sheets themselves are the sheet core's: sheet.js, sheet.css) */
.zu-desk { background: var(--desk); padding: clamp(8px, 2.4vw, 30px); }

/* the title, lettered rather than typeset, with its leader rule */
.zu-title { padding: 40px 0 8px; }
.zu-title h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(22px, 3.6vw, 34px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.16;
}
.zu-leader { display: flex; align-items: center; margin: 13px 0 14px; }
.zu-leader::before { content: ''; width: 46px; height: 2px; background: var(--hot); }
.zu-leader::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.zu-title p { margin: 0; max-width: 68ch; color: var(--ink-light); font-size: var(--fs-md); }

/* a caption under a view, on the sheet */
.zu-caption { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.zu-caption b { font-weight: 700; border-bottom: 1.1px solid var(--ink); padding-bottom: 1px; }
.zu-caption span { color: var(--ink-light); margin-left: 8px; }