/* Shell only. Design tokens for the Lemko theme live in tree/theme.css (lane 1 owns them);
   other modules import that file rather than defining their own colours. */
*, *::before, *::after { box-sizing: border-box; }
/* The browser's own [hidden]{display:none} loses to any author rule that sets display, so an
   element toggled with el.hidden stayed visible. The tree's empty .status overlay (display:flex,
   z-index 6) covered the whole viewport and ate every click, drag and wheel. Make hidden win. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { font-family: "Alegreya Sans", system-ui, sans-serif; display: flex; flex-direction: column; }
#app { flex: 1; min-height: 0; overflow: auto; }
#app > .rk { height: 100%; } /* the tree sizes itself to 100vh; under the header it takes what is left */

/* Lanes 2-4 were built before theme.css existed and use their own variable names with fallback
   values on :root. `html:root` outranks those :root blocks, so every name resolves to the theme
   (and follows its dark mode). Only colours and fonts are mapped; sizes stay each module's own. */
html:root {
  --rk-color-bg: var(--linen); --rk-color-surface: var(--tag); --rk-color-border: var(--tag-edge);
  --rk-color-text: var(--ink); --rk-color-text-muted: var(--ink-soft);
  --rk-color-primary: var(--red); --rk-color-primary-contrast: var(--red-ink); --rk-color-danger: var(--red);
  --rk-font-heading: var(--font-caps);
  --rk-bg: var(--linen); --rk-card: var(--tag); --rk-border: var(--tag-edge); --rk-text: var(--ink); --rk-accent: var(--red);
  --lemko-bg: var(--linen); --lemko-card-bg: var(--tag); --lemko-border: var(--tag-edge); --lemko-ink: var(--ink);
  --lemko-muted: var(--ink-soft); --lemko-accent: var(--red); --lemko-font: var(--font-body);
}

/* ---------- shared header: H5 walnut boards + carved fretwork eave, E1 Lemko band (mockups/7-finalists) ----------
   The pictures are CSS images set by app.js (--hd-*); the walnut stays walnut in both themes (darker at night). */
/* z-index 20, unchanged: the header and the wide (>=900px) person panel no longer share any
   vertical space at all (tree/tree.css .rk-panel's top/height, in its `min-width:900px` block),
   so neither can eat the other's clicks — see that rule's comment for what this replaced. */
#app-header { flex: none; position: relative; isolation: isolate; z-index: 20; color: #F6EFE2; background: #2A1A10;
  --focus: var(--focus-wood); }   /* the walnut is dark in both themes: theme.css's ring for wood */
#app-header .wood { position: absolute; left: 0; right: 0; top: 0; height: 94px; z-index: 0;
  background: var(--hd-wood) left top / auto 94px no-repeat, #2A1A10; }
#app-header .hin { position: relative; z-index: 2; height: 94px; padding: 0 22px 26px 18px; display: flex; align-items: center; gap: 14px; }
#app-header .band { position: relative; z-index: 1; height: var(--hd-band-h, 22.5px);
  background: var(--hd-band) left top / var(--hd-band-w, 30px) var(--hd-band-h, 22.5px) repeat-x; }
#app-header .band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0)); }
#app-header .over { position: absolute; left: 0; right: 0; top: 66px; height: 42px; z-index: 3; pointer-events: none;
  background: var(--hd-val) left top / auto 42px no-repeat; }
#app-header .brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; flex: none; border-radius: 6px; }
#app-header .crest { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 -1px 0 rgba(0,0,0,.55)); }
#app-header .crest svg { width: 100%; height: 100%; display: block; overflow: visible; }
#app-header .wm { font: 700 36px/1 "Philosopher", var(--font-caps); letter-spacing: .01em;
  text-shadow: 0 -1px 0 rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.14); }
/* nav and tools sit in the row itself; .drawer only becomes a box in the phone menu (.compact) */
#app-header .drawer { display: contents; }
#app-header nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
#app-header .tools { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
#app-header .drawer > :first-child { margin-left: auto; }
#app-header nav a, #app-header .tools button, #app-header .menu { font: 700 15.5px var(--font-body); color: inherit; text-decoration: none;
  background: rgba(14,9,5,.40); border: 1px solid rgba(255,245,230,.16); padding: 0 12px; min-height: 44px;
  display: inline-flex; align-items: center; border-radius: 6px; cursor: pointer; white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
#app-header nav a:hover, #app-header .tools button:hover, #app-header .menu:hover { background: rgba(14,9,5,.58); border-color: rgba(255,245,230,.3); }
#app-header nav a[aria-current="page"] { background: rgba(14,9,5,.66); box-shadow: inset 0 2px 4px rgba(0,0,0,.45); position: relative; }
#app-header nav a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px;
  background: var(--hd-mark) repeat-x; background-size: auto 3px; }
#app-header .ticon { width: 17px; height: 17px; margin-right: 6px; flex: none; }
#app-header .menu { display: none; }
@media (max-width: 1000px) {
  #app-header .hin { gap: 8px; padding-left: 10px; padding-right: 10px; }
  #app-header .wm { font-size: 26px; }
  #app-header .crest { width: 40px; height: 40px; }
  #app-header .tools { margin-left: 6px; }
  #app-header nav a, #app-header .tools button { padding: 0 8px; font-size: 14px; }
}
/* Phone menu: app.js sets .compact when the row does not fit, .open while the list is shown. */
#app-header.compact .menu { display: inline-flex; margin-left: auto; }
#app-header.compact .drawer { display: none; position: absolute; right: 8px; top: calc(100% + var(--hd-band-h, 22.5px) + 6px);
  width: max-content; min-width: 230px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 140px); overflow-y: auto;
  flex-direction: column; gap: 8px; padding: 10px; background: #2A1A10; border: 1px solid rgba(255,245,230,.22);
  border-radius: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); }
#app-header.compact.open .drawer { display: flex; }
#app-header.compact .drawer nav, #app-header.compact .drawer .tools { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
#app-header.compact .drawer .tools { padding-top: 8px; border-top: 1px solid rgba(255,245,230,.18); }
#app-header.compact .drawer nav a, #app-header.compact .drawer .tools button { font-size: 16px; padding: 0 14px; }
#app-header.compact .drawer :only-child.tools { padding-top: 0; border-top: 0; }
@media (max-width: 340px) { #app-header .wm { display: none; } }

/* ---------- the other pages (sign-in, join, reset, calendar, My branches, branch admin) ----------
   Linen with the ribbon's weave behind them, and their cards are C2 rushnyk towels like the tree's. */
#app:is([data-route="login"], [data-route="join"], [data-route="reset"], [data-route="calendar"], [data-route="admin"]) {
  background: repeating-linear-gradient(0deg, var(--weave) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--weave) 0 1px, transparent 1px 3px), var(--linen);
}
/* .rk-towel: the tree card's towel (tree.css .card .body): linen in both themes with its weave and a
   dashed seam. .stripe adds the red double stripe at the top, .hem the embroidered band at the
   bottom (stitch masks from carpathian.js, set on <html> by app.js). Text on it is dark in both
   themes, so the modules' colour names are remapped inside it (every pair >= 5:1, most >= 7:1). */
.rk-towel {
  --rk-color-text: var(--towel-ink); --rk-color-text-muted: var(--towel-ink2); --rk-color-bg: var(--towel);
  --rk-color-surface: var(--s-bg); --rk-color-border: var(--towel-ink2);
  --rk-color-primary: var(--ring-ink); --rk-color-primary-contrast: var(--board-ink); --rk-color-danger: var(--ring-ink);
  --lemko-ink: var(--towel-ink); --lemko-muted: var(--towel-ink2); --lemko-accent: var(--ring-ink);
  --lemko-border: var(--towel-ink2); --lemko-card-bg: var(--towel);
  position: relative; color: var(--towel-ink); color-scheme: light; border: 0; border-radius: 3px;
  background: repeating-linear-gradient(0deg, var(--towel-weave) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--towel-weave) 0 1px, transparent 1px 3px), var(--towel);
  outline: 1.5px dashed var(--towel-seam); outline-offset: -4.5px;
  box-shadow: 0 3px 8px rgba(30,18,8,.2), 0 1px 2px rgba(30,18,8,.22);
}
.rk-towel.stripe {
  background: linear-gradient(var(--ribbon-stitch), var(--ribbon-stitch)) 0 7px/100% 3px no-repeat,
    linear-gradient(var(--ribbon-stitch), var(--ribbon-stitch)) 0 12px/100% 1px no-repeat,
    repeating-linear-gradient(0deg, var(--towel-weave) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--towel-weave) 0 1px, transparent 1px 3px), var(--towel);
}
.rk-towel.hem::before, .rk-towel.hem::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 9px; height: 12px; pointer-events: none; }
.rk-towel.hem::before { background: var(--ribbon-stitch); -webkit-mask: var(--rk-rush-r) left bottom/auto 12px repeat-x; mask: var(--rk-rush-r) left bottom/auto 12px repeat-x; }
.rk-towel.hem::after { background: var(--towel-ink); -webkit-mask: var(--rk-rush-k) left bottom/auto 12px repeat-x; mask: var(--rk-rush-k) left bottom/auto 12px repeat-x; }
/* things on the towel take theme.css's ring for linen (the page's pale blue vanishes on it at night);
   a towel that is itself focusable (a branch link) keeps the page's ring, which is drawn outside it */
.rk-towel :focus-visible { outline-color: var(--focus-linen) !important; }

/* ---------- print: the page itself on white paper, without the header, tools and backdrop ---------- */
@media print {
  html:root {
    color-scheme: light !important;
    --linen: #fff !important; --linen-2: #fff !important; --weave: transparent !important; --tag: #fff !important;
    --ink: #000 !important; --ink-soft: #333 !important; --ink-faint: #555 !important; --line: #555 !important;
    --towel: #fff !important; --towel-ink: #000 !important; --towel-ink2: #333 !important; --towel-av: #eee !important;
    --towel-weave: transparent !important; --towel-seam: #777 !important; --fringe: #999 !important;
    --ribbon: #fff !important; --ribbon-ink: #000 !important; --ribbon-ink2: #333 !important; --ribbon-edge: #999 !important;
    --ring-bg: #fff !important; --ring-ink: #000 !important; --c-ln: #555 !important; --red: #000 !important;
    --s-bg: #fff !important; --s-ink: #000 !important;
  }
  html, body { height: auto; background: #fff !important; color: #000; }
  body { display: block; }
  #app { overflow: visible; background: none !important; }
  #app > .rk { height: 100vh; }   /* the tree's canvas is absolutely placed: it needs a height, one page */
  .rk-panel:not(.on) { display: none !important; }
  #app-header, .rk .toolbar, .rk .hint, .rk .sbox, .rk-scrim, .rk-toast,
  .rk-btn, .rk-row-actions, .rk-inline-form, .cal-candle { display: none !important; }
  .rk .vp { background: #fff !important; }
  .rk .card .body, .rk-towel { box-shadow: none !important; }
  .rk-towel { outline-color: #777 !important; break-inside: avoid; }
  .rk .card, .cal-item, .rk-row { break-inside: avoid; }
}