/* Foll · the bottom band. The shared SuDu preferences component draws its own
   controls and reports its collapsed height (the 64 x 24 px chevron) into
   --sudu-tool-footer. The five app destinations sit directly above it.

   The navigation's ground extends behind the rail rather than floating clear
   of it, so the record never shows through that strip, and the whole band
   clears the home indicator.

   Device insets are read once, in style.css, as --safe-*. Everything here goes
   through those tokens instead of calling env() again, so the home indicator
   clearance is stated in one place and the audit harness can stand in for a
   device by overriding them. */
:root {
  --sudu-tool-footer: calc(24px + var(--safe-bottom, 0px));
  --navigation-clearance: calc(48px + var(--sudu-tool-footer));
}
.shell > aside {
  bottom: 0;
  height: max(var(--navigation-clearance), calc(var(--nav-height, 48px) + var(--safe-bottom, 0px)));
  min-height: max(var(--navigation-clearance), calc(var(--nav-height, 48px) + var(--safe-bottom, 0px)));
  padding: 0 max(12px, calc((100vw - 660px) / 2)) max(var(--sudu-tool-footer), var(--safe-bottom, 0px));
  align-items: center;
  align-content: center;
}
/* The component paints above that ground and keeps its own working targets. */
sudu-preferences, .work-site-rail { position: relative; z-index: 16; }
.work-site-rail {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; flex-direction: column;
  padding-bottom: var(--safe-bottom, 0px);
  border-top: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font: inherit;
}
.work-site-rail button { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.work-site-rail .work-settings-toggle { display: grid; place-items: center; align-self: center; flex: none; width: 64px; height: 24px; min-height: 24px; }
.work-settings-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.work-settings-toggle[aria-expanded=true] svg { transform: rotate(180deg); }
.work-site-rail button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
#suduBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 max(16px, var(--safe-left, 0px)) 4px; }
#suduBar[hidden], #suduBar button[hidden] { display: none; }
#langSwitch, #dmSwatches { display: flex; align-items: center; gap: 8px; }
#langSwitch button { font-size: .875rem; letter-spacing: .06em; }
#langSwitch button[aria-pressed=true] { text-decoration: underline; text-underline-offset: 6px; }
#dmSwatches button { display: grid; place-items: center; }
#dmSwatches span { width: 14px; height: 14px; border: 1px solid var(--line-strong); border-radius: 50%; }
.rail-status { margin: 0; padding: 4px 16px; font-size: .875rem; }
html { scroll-padding-bottom: calc(var(--navigation-clearance) + 76px); }
dialog:has(> .work-site-rail), dialog:has(> sudu-preferences) {
  max-height: calc(var(--visible-height, 100dvh) - var(--sudu-tool-footer) - 24px);
}
@media print { .work-site-rail, sudu-preferences { display: none; } }