/* v3 navigation shell (ADMIN_DESIGN.md §5, ADMIN_DESIGN_REFERENCE.md §1,
   plan §10). Sidebar (expanded / 4rem rail), translucent top bar, phone tab
   bar + bottom sheets, popover menus, ⌘K palette. Role tokens only.
   Breakpoints: phone < 40em, tablet 40-64em, desktop >= 64em.
   The document scrolls; bars are sticky / fixed. */

/* ---------- Page frame ---------- */
html:has(.lg-body) {
  scroll-padding-top: calc(var(--bar-height) + var(--space-2));
}
.lg-body {
  overflow: visible;
  height: auto;
  min-height: 100dvh;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  letter-spacing: normal;
}
.lg-skip {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: var(--layer-progress);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--primary);
  color: var(--on-primary);
  transform: translateY(-200%);
}
.lg-skip:focus-visible { transform: none; }

.lg-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
}
html[data-lg-rail] .lg-shell { grid-template-columns: var(--rail-width) minmax(0, 1fr); }
.lg-frame { min-width: 0; display: flex; flex-direction: column; }
.lg-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-8);
  isolation: isolate;
  outline: none;
  /* The header band's fill bleeds sideways (page.css); clip keeps it inside the
     main area without making a scroll box (sticky bars still work). */
  overflow-x: clip;
}

/* ---------- Icon buttons, counts, kbd ---------- */
.lg-icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .lg-icon-btn:hover { background: var(--neutral-tint); color: var(--text); }
}
.lg-icon-btn:active { transform: scale(0.98); }
/* Menu counts (decision 314): red only for action items; others grey. */
.lg-count.lg-count--info { background: var(--neutral-tint); color: var(--text-muted); }
.lg-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--danger-tint);
  color: var(--danger);
  font-size: var(--size-caption);
  line-height: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.lg-kbd {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
  color: var(--text-muted);
}

/* ---------- Sidebar ---------- */
.lg-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-3);
  /* Ledger 2 (decision 314): head and foot pinned; only .lg-nav scrolls. */
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: var(--layer-bar);
}
.lg-sidebar__top { display: flex; flex: none; flex-direction: column; gap: var(--space-3); }
.lg-sidebar__head { display: flex; align-items: center; gap: var(--space-2); }
.lg-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
  color: var(--text);
  text-decoration: none;
}
/* Logo (decision 278): full logo when the sidebar is open, emblem on the rail. */
.lg-brand .lg-brand__full { flex: 1 1 auto; min-inline-size: 0; max-inline-size: 12rem; }
.lg-brand .lg-brand__emblem { display: none; inline-size: 2.25rem; block-size: 2.25rem; }
/* Tenant admin organiser card (decision 298): mark + name + /address under
   the logo; the rail keeps the mark only. */
.lg-brand__org {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.lg-brand__org .lg-orgmark { inline-size: 2rem; block-size: 2rem; }
.lg-brand__org-text { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
.lg-brand__org-name {
  font-size: var(--size-label);
  line-height: var(--leading-label);
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.lg-brand__org-sub { font-size: var(--size-caption); line-height: var(--leading-caption); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-sidebar__collapse svg { transition: transform var(--dur-fast) var(--ease); }
html[data-lg-rail] .lg-sidebar__collapse svg { transform: rotate(180deg); }

.lg-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  /* A launcher, not a text box (decision 314): filled, real keycaps. */
  background: var(--neutral-tint);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .lg-search:hover { background: var(--secondary-fill); color: var(--text); }
}
.lg-search__text { flex: 1; text-align: left; }
/* Phone search at the top of the More sheet (decision 317). */
.lg-search--sheet { block-size: var(--touch-target); margin-block-end: var(--space-3); font-size: 1rem; }
.lg-search__keys { display: inline-flex; gap: var(--space-1); }
.lg-search .lg-kbd {
  min-inline-size: 1.25rem;
  padding: 0 var(--space-1);
  border: 1px solid var(--border-strong);
  border-block-end-width: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--size-caption);
  line-height: 1.125rem;
  text-align: center;
}

/* The menu scrolls on its own; a soft shade shows at an edge with more beyond
   (the "local" covers hide it at the ends; no JS). */
.lg-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
  margin-inline: calc(-1 * var(--space-3));
  padding: var(--space-1) var(--space-3) var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background:
    linear-gradient(var(--surface) 30%, transparent) top / 100% 2rem no-repeat local,
    linear-gradient(transparent, var(--surface) 70%) bottom / 100% 2rem no-repeat local,
    linear-gradient(var(--scroll-shade), transparent) top / 100% 0.75rem no-repeat scroll,
    linear-gradient(transparent, var(--scroll-shade)) bottom / 100% 0.75rem no-repeat scroll;
}
.lg-sidebar__foot { flex: none; padding-block-start: var(--space-2); border-block-start: 1px solid var(--border); }
.lg-who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .lg-who:hover { background: var(--neutral-tint); }
}
.lg-who__icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--neutral-tint);
  color: var(--text-muted);
}
.lg-who__text { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
.lg-who__name { overflow: hidden; font-size: var(--size-label); line-height: var(--leading-label); font-weight: 600;
  white-space: nowrap; text-overflow: ellipsis; }
.lg-who__role { overflow: hidden; color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption);
  white-space: nowrap; text-overflow: ellipsis; }
.lg-who__more { display: inline-flex; color: var(--text-muted); }
.lg-nav__group + .lg-nav__group { margin-top: var(--space-6); }
.lg-nav__label {
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-3);
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
  font-weight: 600;
  color: var(--text-muted);
}
.lg-nav__group-btn { display: none; }
/* Expanded: the group's list sits in place (its popover attribute is only
   used on the rail, so undo the UA popover box here). */
.lg-nav__items {
  display: block;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: none;
  color: inherit;
  list-style: none;
}
.lg-nav__flyout-label { display: none; }
.lg-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease);
}
.lg-nav__link svg { flex: none; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .lg-nav__link:hover { background: var(--neutral-tint); }
}
.lg-nav__link[aria-current="page"] { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.lg-nav__link[aria-current="page"] svg { color: var(--primary); }
.lg-nav__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-nav__empty { margin: 0; padding: var(--space-3); color: var(--text-muted); }

/* Rail: one icon per group, its list opens as a flyout (popover). */
html[data-lg-rail] .lg-sidebar { padding: var(--space-4) var(--space-2); align-items: center; }
html[data-lg-rail] .lg-sidebar__head { flex-direction: column; }
html[data-lg-rail] .lg-sidebar .lg-brand { flex: none; }
html[data-lg-rail] .lg-brand__org { padding: 0; border: 0; background: none; justify-content: center; }
html[data-lg-rail] .lg-sidebar .lg-brand__emblem { display: block; }
/* Sidebar only: phones carry data-lg-rail too and show the full logo in the top bar. */
html[data-lg-rail] .lg-sidebar .lg-brand__full,
html[data-lg-rail] .lg-brand__org-text,
html[data-lg-rail] .lg-search__text,
html[data-lg-rail] .lg-search .lg-kbd,
html[data-lg-rail] .lg-nav__label,
html[data-lg-rail] .lg-nav__empty { display: none; }
html[data-lg-rail] .lg-search { width: var(--control-height); justify-content: center; padding: 0; border-color: transparent; }
html[data-lg-rail] .lg-search__keys,
html[data-lg-rail] .lg-who__text,
html[data-lg-rail] .lg-who__more { display: none; }
html[data-lg-rail] .lg-sidebar__top { align-items: center; }
html[data-lg-rail] .lg-who { justify-content: center; padding: 0; }
html[data-lg-rail] .lg-nav { align-items: center; }
html[data-lg-rail] .lg-nav__group + .lg-nav__group { margin-top: var(--space-2); }
html[data-lg-rail] .lg-nav__group-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
html[data-lg-rail] .lg-nav__group-btn:hover,
html[data-lg-rail] .lg-nav__group-btn.lg-is-current { background: var(--primary-tint); color: var(--primary); }
.lg-nav__dot {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--danger);
}
html[data-lg-rail] .lg-nav__items:not(:popover-open) { display: none; }
html[data-lg-rail] .lg-nav__items:popover-open {
  position: fixed;
  min-width: 13rem;
  padding: var(--space-2);
  border: 1px solid var(--float-border);
  border-radius: var(--radius-card);
  background: var(--raised);
  box-shadow: var(--shadow-menu);
}
html[data-lg-rail] .lg-nav__flyout-label {
  display: block;
  padding: var(--space-1) var(--space-3) var(--space-2);
  font-size: var(--size-caption);
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- Top bar ---------- */
.lg-topbar {
  position: sticky;
  top: 0;
  z-index: var(--layer-bar);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--bar-height);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  /* Ledger 2 (305): the top bar is the same --surface as the header band it joins. */
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) {
  .lg-topbar { background: var(--surface); backdrop-filter: none; }
  .lg-tabbar { background: var(--page); backdrop-filter: none; }
}
.lg-brand--bar { display: none; flex: none; }
.lg-brand--bar .lg-brand__full { flex: none; inline-size: 8.5rem; }
.lg-topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
/* Ledger 2 (decisions 314-316): on desktop the account sits in the sidebar foot,
   the event switcher in the page's header band; the phone-only parts hide. */
.lg-topbar__events,
.lg-avatar { display: none; }
.lg-topbar__events {
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--touch-target);
  padding-inline: var(--space-2);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: var(--size-label);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lg-topbar__events svg { color: var(--text-muted); }

/* Organiser switcher (decision 279): a menu button, not a field. Mark +
   "Working in" over the name + chevron; a fill only on hover / open. */
.lg-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  max-width: 24rem;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease);
}
.lg-switcher:hover, .lg-switcher:has(+ .lg-org-pop:popover-open) { background: var(--neutral-tint); }
.lg-switcher__text { display: flex; flex-direction: column; min-width: 0; }
.lg-switcher__label { font-size: var(--size-caption); line-height: var(--leading-caption); color: var(--text-muted); }
.lg-switcher__name {
  font-weight: 600;
  line-height: var(--leading-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-switcher > svg { flex: none; color: var(--text-muted); }

/* "Event" card (decisions 299, 301): the same shape as "Working in", on event
   pages, every screen size; the one place to switch event (the title is
   plain). Phones: mark + ▾ only, and the platform logo becomes the emblem on
   these pages so everything fits at 360px. */
.lg-topbar__event { display: contents; }
/* Ledger 2 (decision 316): on desktop the switcher is the page title in the
   header band; the bar keeps the card only for tenant admins on phones (315). */
@media (min-width: 40em) {
  .lg-topbar__event { display: none; }
}
.lg-evcard {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  max-width: 24rem;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease);
}
/* Mouse only: iPhone keeps :hover after a tap, which left a grey box (owner). */
@media (hover: hover) { .lg-evcard:hover { background: var(--neutral-tint); } }
.lg-evcard:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.lg-evcard .lg-stub, .lg-evcard .lg-evmark { block-size: 2rem; }
.lg-evcard .lg-stub { inline-size: 2rem; }
.lg-evcard .lg-stub__day, .lg-evcard .lg-stub__month { font-size: var(--size-caption); line-height: 1; }
.lg-evcard__text { display: flex; flex-direction: column; min-width: 0; }
.lg-evcard__label { font-size: var(--size-caption); line-height: var(--leading-caption); color: var(--text-muted); }
.lg-evcard__name { font-weight: 600; line-height: var(--leading-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-evcard > svg { flex: none; color: var(--text-muted); }

/* The organiser's mark: initials (or a globe for all) in a small square. */
.lg-orgmark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--primary-tint);
  color: var(--primary-ink);
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lg-orgmark [hidden] { display: none; }
/* Centre the initials / globe / logo in the square (the globe sat on the
   text baseline and looked high, decision 290). */
.lg-orgmark > :not([hidden]) { display: grid; place-items: center; }
.lg-orgmark svg { display: block; }
.lg-orgmark:has(> .lg-orgmark__logo:not([hidden])) { overflow: hidden; background: var(--surface); }
.lg-orgmark__logo { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 2px; }

.lg-bell { position: relative; }
.lg-bell__dot {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--page);
}
/* ---------- Popover menus (account, bell, organiser) ---------- */
.lg-pop:popover-open {
  position: fixed;
  inset: auto;
  margin: 0;
  width: 20rem;
  max-width: calc(100vw - var(--space-8));
  max-height: min(32rem, calc(100dvh - var(--bar-height) - var(--space-6)));
  overflow: auto;
  padding: var(--space-2);
  border: 1px solid var(--float-border);
  border-radius: var(--radius-card);
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow-menu);
}
.lg-pop__head { display: none; }
.lg-pop__note { margin: 0; padding: var(--space-3); color: var(--text-muted); }
.lg-menu__who { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.lg-menu__name { font-weight: 600; }
.lg-menu__email { font-size: var(--size-caption); color: var(--text-muted); overflow-wrap: anywhere; }
.lg-menu__form { margin: 0; }
.lg-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.lg-menu__item:hover { background: var(--neutral-tint); }
.lg-menu__item svg { color: var(--text-muted); }
.lg-theme { margin: 0 0 var(--space-2); padding: 0 0 var(--space-2); border: 0; border-bottom: 1px solid var(--border); }
.lg-theme__legend { padding: var(--space-1) var(--space-3); font-size: var(--size-caption); font-weight: 600; color: var(--text-muted); }
.lg-theme__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.lg-theme__option:hover { background: var(--neutral-tint); }
.lg-theme__option svg { color: var(--text-muted); }
.lg-theme__option:has(:checked) { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.lg-theme__option:has(:focus-visible) { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.lg-theme__input { position: absolute; opacity: 0; pointer-events: none; }

.lg-org__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height);
  margin-bottom: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text-muted);
}
.lg-org__input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.lg-org__search:focus-within { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
/* The ring sits on the field's box (above), not twice on the bare input. */
.lg-org__input:focus-visible, .lg-palette__input:focus-visible { outline: none; }
.lg-org__list { margin: 0; padding: 0; list-style: none; }
.lg-org__group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--size-caption); font-weight: 600; color: var(--text-muted); }
.lg-org__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lg-org__option:hover { background: var(--neutral-tint); }
.lg-org__option[aria-current="true"] { background: var(--primary-tint); color: var(--primary-ink); }
.lg-org__option[aria-current="true"] .lg-orgmark { background: var(--surface); }
.lg-org__option > svg { flex: none; color: var(--primary); }
.lg-org__text { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-block: var(--space-2); }
.lg-org__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-org__option[aria-current="true"] .lg-org__name { font-weight: 600; }
.lg-org__sub { font-size: var(--size-caption); line-height: var(--leading-caption); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Command palette ---------- */
.lg-palette {
  width: min(36rem, calc(100vw - var(--space-8)));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--float-border);
  border-radius: var(--radius-sheet);
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow-sheet);
}
.lg-palette::backdrop, .lg-sheet::backdrop { background: color-mix(in srgb, var(--text) 35%, transparent); }
.lg-palette__field { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-muted); }
.lg-palette__field:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.lg-palette__input { flex: 1; min-width: 0; height: var(--control-height); border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--size-card-title); outline: none; }
.lg-palette__list { max-height: 50dvh; margin: 0; padding: var(--space-2); overflow: auto; list-style: none; }
.lg-palette__group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--size-caption); font-weight: 600; color: var(--text-muted); }
.lg-palette__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-control); cursor: pointer; }
.lg-palette__item svg { color: var(--text-muted); }
.lg-palette__item[aria-selected="true"] { background: var(--primary-tint); color: var(--primary-ink); }
.lg-palette__empty { margin: 0; padding: var(--space-4); color: var(--text-muted); }
/* Recent organiser rows (decision 293): the switcher's row, mark + name (2 lines) + address. */
.lg-palette__item--org { padding-block: var(--space-1); }
.lg-palette__item--org .lg-orgmark { inline-size: 1.75rem; block-size: 1.75rem; }
.lg-palette__item[aria-selected="true"] .lg-orgmark { background: var(--surface); }
.lg-palette__org { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.lg-palette__org-name {
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.lg-palette__org-sub { font-size: var(--size-caption); line-height: var(--leading-caption); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Phone tab bar + sheets (hidden from 40em) ---------- */
.lg-tabbar { display: none; }
.lg-sheet {
  width: 100%;
  max-width: 100%;
  max-height: 85dvh;
  margin: auto 0 0;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow-sheet);
}
.lg-sheet[open] { display: flex; flex-direction: column; }
.lg-sheet__head { position: relative; display: flex; align-items: center; padding: var(--space-5) var(--space-4) var(--space-2); }
.lg-sheet__head form { margin: 0 0 0 auto; }
.lg-sheet__grip { position: absolute; top: var(--space-2); left: 50%; width: 2.5rem; height: 0.25rem; margin-left: -1.25rem; border-radius: var(--radius-pill); background: var(--border-strong); }
.lg-sheet__title { margin: 0; font-size: var(--size-section); line-height: var(--leading-section); font-weight: 600; }
.lg-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-6); }
.lg-sheet__group { margin: var(--space-4) 0 var(--space-2); font-size: var(--size-label); font-weight: 600; color: var(--text-muted); }
.lg-sheet__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.lg-sheet__list > li + li { border-top: 1px solid var(--border); }
.lg-sheet__row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height-touch); padding: 0 var(--space-4); color: var(--text); text-decoration: none; }
.lg-sheet__row svg { flex: none; color: var(--text-muted); }
.lg-sheet__text { flex: 1; min-width: 0; }
.lg-sheet__account { padding: var(--space-2); }

/* ---------- Tablet and up: popovers drop from their button ---------- */
@media (min-width: 40em) {
  .lg-sheet { width: min(32rem, 100%); margin: auto; border-radius: var(--radius-sheet); }
}

/* ---------- Phone ---------- */
@media (max-width: 39.99em) {
  /* Phone top bar (Ledger 2, decision 315, amends 296, 299, 301): the full logo
     on every page and role, 1.5rem tall. Super admin: logo + organiser ▾ + bell
     + you. Tenant admin: logo + event ▾ ("All events" off event pages) + bell +
     you. The event card is the tenant admin's only (super admins switch event
     in the header band, 316); its words stay for screen readers. */
  .lg-topbar:has(.lg-switcher) .lg-topbar__event { display: none; }
  .lg-topbar__events { display: inline-flex; flex: none; }
  .lg-topbar:has(.lg-evcard) .lg-topbar__events { display: none; }
  .lg-avatar { display: inline-grid; }
  .lg-evcard { position: relative; flex: none; gap: var(--space-1); padding-inline: var(--space-1); }
  .lg-evcard .lg-evmark { block-size: 1.75rem; }
  .lg-evcard__text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:has(.lg-body) {
    scroll-padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--space-2));
  }
  .lg-body { font-size: 1rem; line-height: 1.5rem; }
  .lg-shell, html[data-lg-rail] .lg-shell { grid-template-columns: minmax(0, 1fr); }
  .lg-sidebar { display: none; }
  .lg-main { padding: var(--space-4) var(--space-4) calc(var(--bar-height) + env(safe-area-inset-bottom) + var(--space-6)); }
  .lg-topbar { padding: env(safe-area-inset-top) var(--space-4) 0; height: calc(var(--bar-height) + env(safe-area-inset-top)); }
  .lg-brand--bar { display: flex; }
  /* The super admin's organiser is a mark + small chevron; the name stays for
     screen readers ("Working in …"). Pages that change data name the organiser
     in their header, so the mark alone is safe (296). */
  /* The logo link fills the bar's height: a 44px+ tap area around a 2rem logo (315;
     2rem since 2026-10-09). The image is sized by the box's HEIGHT: logo.css sizes
     it by width, so the stretched box made it 41px tall, hanging below the bar's
     middle onto its bottom line. When the bar is tight (organiser admins'
     "All events"), the logo shrinks inside its box and keeps its shape. */
  .lg-brand--bar { flex: 0 1 auto; min-inline-size: 0; align-self: stretch; align-items: center; }
  .lg-brand--bar .lg-brand__full { inline-size: auto; block-size: 2rem; max-inline-size: 100%; }
  .lg-brand--bar .lg-brand__full img { inline-size: auto; block-size: 100%; max-inline-size: 100%;
    object-fit: contain; object-position: left center; }
  .lg-brand--bar .lg-brand__emblem { display: none; }
  .lg-topbar { gap: var(--space-2); }
  .lg-topbar__end { gap: var(--space-2); }
  .lg-switcher { position: relative; flex: none; gap: var(--space-1); max-width: none; padding-inline: var(--space-1); }
  .lg-switcher .lg-orgmark { inline-size: 2rem; block-size: 2rem; }
  .lg-switcher__text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lg-icon-btn, .lg-switcher { min-width: var(--touch-target); min-height: var(--touch-target); }

  /* Menus become bottom sheets on phones (reference §1). */
  .lg-pop:popover-open {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 85dvh;
    padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: var(--shadow-sheet);
  }
  .lg-pop::backdrop { background: color-mix(in srgb, var(--text) 35%, transparent); }
  .lg-pop__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; }
  .lg-pop__title { margin: 0; font-size: var(--size-section); font-weight: 600; }
  .lg-org__option, .lg-menu__item, .lg-theme__option { min-height: var(--control-height-touch); }
  /* Organiser rows compact (owner, decision 286): a long name wraps to two
     lines instead of "Nepal New Zealand Friendship Society of …". */
  .lg-org__option { min-height: var(--touch-target); }
  .lg-org__option .lg-orgmark { inline-size: 1.75rem; block-size: 1.75rem; }
  .lg-org__text { padding-block: var(--space-1); }
  .lg-org__name {
    font-size: var(--size-card-title);
    line-height: var(--leading-card-title);
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .lg-org__input, .lg-palette__input { font-size: 1rem; }

  .lg-tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--layer-bar);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--page) 86%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
  }
  .lg-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-card);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }
  .lg-tab__label { font-size: var(--size-caption); line-height: var(--leading-caption); }
  .lg-tab[aria-current="page"] { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
  /* Red dot on a tab whose sheet holds a page with a count (plan §11 #12). */
  .lg-tab { position: relative; }
  .lg-tab__dot {
    position: absolute;
    top: var(--space-1);
    right: calc(50% - 1rem);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--danger);
  }
  .lg-palette { margin-top: var(--space-4); }
}

/* ---------- Motion ---------- */
/* Ledger 2 (decision 319 (6)): menus open from their button (shell.js sets the
   transform-origin) and leave the way they came: in --dur-enter, out --dur-exit
   (@starting-style + allow-discrete keep them painted while they go). Phones:
   menus are sheets that slide up and back down. Ctrl K opens instantly (319:
   used many times a day). Reduced motion: fades only (the tokens shorten). */
.lg-pop, html[data-lg-rail] .lg-nav__items[popover] {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--dur-exit) var(--ease), transform var(--dur-exit) var(--ease),
              overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete;
}
.lg-pop:popover-open, .lg-nav__items:popover-open {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-enter);
}
@starting-style {
  .lg-pop:popover-open, .lg-nav__items:popover-open { opacity: 0; transform: scale(0.98); }
}
.lg-sheet {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--dur-exit) var(--ease), transform var(--dur-exit) var(--ease),
              overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete;
}
.lg-sheet[open] { opacity: 1; transform: none; transition-duration: var(--dur-enter); }
@starting-style {
  .lg-sheet[open] { opacity: 0; transform: translateY(100%); }
}
@media (min-width: 40em) {
  .lg-sheet { transform: scale(0.98); }
  @starting-style { .lg-sheet[open] { transform: scale(0.98); } }
}
@media (max-width: 39.99em) {
  .lg-pop { transform: translateY(100%); transform-origin: center bottom; }
  @starting-style { .lg-pop:popover-open { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .lg-pop, html[data-lg-rail] .lg-nav__items[popover], .lg-sheet,
  .lg-pop:popover-open, .lg-sheet[open] { transform: none; }
  @starting-style { .lg-pop:popover-open, .lg-sheet[open], .lg-nav__items:popover-open { transform: none; } }
}

/* Phones (Ledger 2, decision 305): once the header band scrolls away the bar
   names the page (iPhone style) in place of the logo and switchers;
   js/v3/phead.js sets html.lg-band-away and fills the title. */
.lg-topbar__title { display: none; }
@media (max-width: 39.99em) {
  html.lg-band-away .lg-topbar__title {
    display: block;
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--size-card-title);
    line-height: var(--leading-card-title);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    animation: lg-title-in var(--dur-fast) var(--ease);
  }
  html.lg-band-away .lg-topbar > .lg-brand--bar,
  html.lg-band-away .lg-topbar > .lg-topbar__events,
  html.lg-band-away .lg-topbar > .lg-switcher,
  html.lg-band-away .lg-topbar > .lg-topbar__event { display: none; }
}
@keyframes lg-title-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.lg-band-away .lg-topbar__title { animation: none; }
}