@import url('./mail-module.css');
/* Web product chrome (ADR-0056, ADR-0077, ADR-0082; REQ-UX-028…033).
 *
 * Every colour, type step, spacing step, radius, elevation and duration in this file is a custom
 * property of `tokens.css`, which `node scripts/design-tokens.mjs render` generates from
 * `shared/design/tokens.json`. There is no literal colour here, no literal font size and no spacing
 * value that is not a token step (or a `calc()` over one) -- which is what closes audit findings
 * F-W-10 (twelve font sizes, one at 9.17 px) and F-W-11 (a white surface in the dark scheme).
 *
 * The shape is Aura's (ADR-0082 owner decision 4 of 2026-09-26): the radii, the control geometry and
 * the elevation come from the token base's `web.shape` block, and the PrimeReact components keep
 * their own Aura anatomy -- `definePreset(Aura, …)` is handed colour and nothing else.
 *
 * What this file owns: the application frame (module rail or bar, app bar, one command surface,
 * docked Layers pane, map well, attributes pane, one status line, the settings page), the map-control
 * placement, the REQ-PLAT-011 responsive profile and the 1008-px structural breakpoint.
 */

:root {
  /* Frame geometry, all derived from the token ladder. */
  --app-bar-height: calc(var(--egu-control-height) + var(--egu-gap-inline) * 2);
  --app-toolbar-height: calc(var(--egu-control-height) + var(--egu-gap-inline));
  /* The two hairlines the chrome draws are part of the frame's height: the command surface's own
     `border-top` and the top bar's `border-bottom`. Without them the map well and every pane
     below started 2 px inside the top bar and lost those rows behind it (TASK-104b). */
  --app-topbar-height: calc(var(--app-bar-height) + var(--app-toolbar-height) + 2px);
  --app-rail-width: calc(var(--egu-gap-group) * 1.75);
  --app-rail-offset: 0px; /* set by html[data-signed-in="true"] on a wide layout */
  --app-module-bar-height: 0px; /* set by html[data-shell="narrow"] */
  --app-drawer-width: calc(var(--egu-gap-group) * 6.5);
  --app-drawer-offset: 0px; /* set by html[data-drawer="static"] */
  --app-status-height: calc(var(--egu-gap-section) + var(--egu-gap-inline) / 2);
  --app-attributes-height: 0px; /* set by html[data-attributes="open"] */
  --app-bottom-height: calc(var(--app-status-height) + var(--app-attributes-height) + var(--app-module-bar-height));
  --app-content-left: calc(var(--app-rail-offset) + var(--app-drawer-offset));
  /* The map cluster's own square target: at least the touch floor, never below it. */
  --map-icon-size: var(--egu-control-height);
  --map-edge-gap: var(--egu-gap-inline);
  /* The focus ring is the product's, under the product's own names: the library re-declares its own
     `--p-focus-ring-*` in the theme it injects at runtime, so a rule that reads them gets the
     library's 1-px transparent ring back (audit F-W-04, measured again on 2026-09-26). */
  --egu-focus-ring-width: 2px;
  --egu-focus-ring-offset: 2px;
}
/* The library's focus-ring tokens, given the product's values on a selector the theme it injects at
   runtime cannot outweigh (`html[data-theme]` is heavier than the `:root` that theme re-declares).
   This is what makes every PrimeReact control paint the ring: its own rules read these names, and its
   Aura defaults resolve a transparent outline and a two-layer transparent shadow on a secondary
   button -- audit F-W-04's finding, measured again on 2026-09-26. */
html[data-theme] {
  --p-focus-ring-width: var(--egu-focus-ring-width);
  --p-focus-ring-offset: var(--egu-focus-ring-offset);
  --p-focus-ring-style: solid;
  --p-focus-ring-color: var(--egu-focus);
  --p-focus-ring-shadow:
    0 0 0 var(--egu-focus-ring-offset) var(--egu-surface-raised),
    0 0 0 calc(var(--egu-focus-ring-offset) + var(--egu-focus-ring-width)) var(--egu-focus);
}
html[data-input='touch'],
html[data-input='hybrid'] {
  --map-icon-size: var(--egu-control-row-min-height);
}
html[data-drawer='static'] {
  --app-drawer-offset: var(--app-drawer-width);
}
html[data-attributes='open'] {
  --app-attributes-height: calc(var(--egu-gap-group) * 5);
}
/* The attributes pane carries the layer's attribute table as well as the identified feature's
   form (TASK-175), so it asks for the taller of its two heights while a table is open. */
html[data-attributes='open'][data-table='open'] {
  --app-attributes-height: min(52vh, calc(var(--egu-gap-group) * 11));
}
html[data-shell='wide'][data-signed-in='true'] {
  --app-rail-offset: var(--app-rail-width);
}
/* The rail's two states (owner decision, 2026-09-26): labelled, and icon-only. Both stay visible; a
   chevron switches between them and no hamburger exists in this shell. */
html[data-rail='collapsed'] {
  --app-rail-width: calc(var(--egu-control-row-min-height) + var(--egu-gap-inline) * 2);
}
html[data-shell='narrow'][data-signed-in='true'] {
  --app-module-bar-height: calc(var(--egu-control-row-min-height) + var(--egu-gap-inline));
}
/* `compact` multiplies only the section and group distances and the row padding (ADR-0082 §1.3); it
   never touches a type step and never drops a target below its floor. */
html.compact {
  --egu-gap-section: calc(24px * var(--egu-density-compact));
  --egu-gap-group: calc(48px * var(--egu-density-compact));
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--egu-surface-base);
  color: var(--egu-text-primary);
  font-family: var(--egu-font-family);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
main {
  width: 100%;
  height: 100%;
}
.map-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--egu-surface-sunken);
}
/* The map is a well: `surface.sunken`, with an `outline` where it meets a pane (audit F-X-05). */
canvas#scene {
  position: absolute;
  top: var(--app-topbar-height);
  left: var(--app-content-left);
  width: calc(100% - var(--app-content-left));
  height: calc(100% - var(--app-topbar-height) - var(--app-bottom-height));
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: var(--egu-surface-sunken);
  border-left: 1px solid var(--egu-outline);
  transition:
    left var(--egu-motion-slow) ease,
    width var(--egu-motion-slow) ease;
}
html[data-signed-in='false'] canvas#scene {
  border-left: 0;
}
canvas.dragging {
  cursor: grabbing;
}
canvas.editing {
  cursor: move;
}
.icon-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* React owns the chrome layer; only its controls take pointer events. */
#map-ui-root {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
#map-ui-root .app-topbar,
#map-ui-root .module-rail,
#map-ui-root .module-bar,
#map-ui-root .app-drawer,
#map-ui-root .drawer-mask,
#map-ui-root .app-bottom,
#map-ui-root .settings-page,
#map-ui-root .signed-out,
#map-ui-root .docs-page,
#map-ui-root .toast-region,
#map-ui-root .map-search-panel,
#map-ui-root .map-overlays button {
  pointer-events: auto;
}

/* Focus (audit F-W-04, RULE-A11Y-05): every tab stop paints a ring on the control a person can see.
   The three controls PrimeReact focuses through a visually hidden input get the ring on their own
   visible box; `!important` is deliberate here and only here, because the library's own rule targets
   the hidden input and this is the accessibility guarantee the profile measures. */
:where(a, button, summary, input, select, textarea, [tabindex], [role='radio'], [role='option']):focus-visible {
  outline: var(--egu-focus-ring-width) solid var(--egu-focus);
  outline-offset: var(--egu-focus-ring-offset);
}
/* The library's own components take their ring from the tokens set above; this rule is the backstop
   for the ones whose component tokens the preset does not reach. It is the accessibility guarantee
   the P7 profile measures, which is why it is the one place in this file that uses `!important`.
   The ring is a transitioned property: a measurement taken on the transition's first frame reads the
   from-value and reports no ring at all, which is what the probe must wait out. */
html .p-button:focus-visible,
html .p-inputtext:focus-visible,
html .p-select:focus-visible,
html .p-select-label:focus-visible,
html .p-togglebutton:focus-visible,
html .p-inputnumber-input:focus-visible,
html .p-popover-trigger:focus-visible {
  /* Drawn as a ring of shadow rather than an outline: the library's own rule sets
     `outline-color: transparent` on a secondary button and wins the cascade whatever this file does
     (measured on 2026-09-26 -- with `!important` and a heavier selector the width follows this rule
     and the colour still comes back transparent). A two-layer shadow paints the same 2-px ring at the
     same 2-px offset, on a property the library leaves alone for these controls. */
  box-shadow:
    0 0 0 var(--egu-focus-ring-offset) var(--egu-surface-raised),
    0 0 0 calc(var(--egu-focus-ring-offset) + var(--egu-focus-ring-width)) var(--egu-focus) !important;
}
/* The three controls whose focus lands on a visually hidden input: the ring goes on the box a person
   sees (audit F-W-04's redesign). */
html .p-checkbox:has(input:focus-visible) .p-checkbox-box,
html .p-toggleswitch:has(input:focus-visible) .p-toggleswitch-control,
html .p-slider .p-slider-handle:has(input:focus-visible) {
  outline: var(--egu-focus-ring-width) solid var(--egu-focus) !important;
  outline-offset: var(--egu-focus-ring-offset) !important;
}
/* No target below the profile's 24 px floor (SC 2.5.8), including the controls whose hit area is a
   library-rendered box around a visually hidden input. */
.p-checkbox,
.p-checkbox-box {
  width: var(--egu-control-target-min);
  height: var(--egu-control-target-min);
  min-width: var(--egu-control-target-min);
}
.p-checkbox-input {
  width: 100%;
  height: 100%;
}
.p-slider .p-slider-handle {
  width: var(--egu-control-target-min);
  height: var(--egu-control-target-min);
  margin-top: calc(var(--egu-control-target-min) / -2);
  margin-left: calc(var(--egu-control-target-min) / -2);
}
.p-slider .p-slider-handle input {
  width: 100%;
  height: 100%;
}
/* A select showing its placeholder is still text a person reads. */
.p-select .p-select-label.p-placeholder,
.p-select-label[data-p-placeholder] {
  color: var(--egu-text-muted);
}

/* Icons -------------------------------------------------------------------------------------- */
.map-icon {
  display: block;
  width: var(--egu-control-icon-size);
  height: var(--egu-control-icon-size);
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.map-icon .icon-fill {
  fill: currentColor;
  stroke: none;
}
.p-button .map-icon + span {
  margin-left: var(--egu-gap-inline);
}
.icon-button.p-button {
  width: var(--egu-control-height-small);
  height: var(--egu-control-height-small);
  min-width: var(--egu-control-height-small);
  padding: 0;
  color: var(--egu-text-muted);
}
.icon-button.p-button:hover {
  color: var(--egu-text-primary);
}
.icon-button.p-button .map-icon {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
}
/* A link-shaped action inside a sentence or a list row. */
.link-button.p-button {
  padding: 0 calc(var(--egu-gap-inline) / 2);
  height: auto;
  min-height: var(--egu-control-target-min);
  font-size: var(--egu-font-size-body);
  text-decoration: underline;
}

/* App bar + one command surface ---------------------------------------------------------------- */
.app-topbar {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--egu-surface-raised);
  border-bottom: 1px solid var(--egu-outline);
  box-shadow: var(--egu-elevation-raised);
}
.app-bar {
  flex: 0 0 auto;
  min-height: var(--app-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--egu-gap-inline);
  padding: var(--egu-gap-inline) var(--egu-gap-section);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: var(--egu-control-height-small);
  height: var(--egu-control-height-small);
  border-radius: var(--egu-radius-control);
  background: var(--egu-accent);
  color: var(--egu-text-on-accent);
}
.brand-mark.large {
  width: var(--egu-gap-group);
  height: var(--egu-gap-group);
  border-radius: var(--egu-radius-surface);
}
.brand-mark.large .map-icon {
  width: var(--egu-gap-section);
  height: var(--egu-gap-section);
}
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-text strong {
  font-size: var(--egu-font-size-body-strong);
  line-height: var(--egu-line-height-body-strong);
  font-weight: var(--egu-font-weight-body-strong);
}
.brand-text small {
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  color: var(--egu-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Search is the map module's own panel, opened by its own command and anchored under the command
   surface over the map (the owner's decision of 2026-09-26). There is no search field in the chrome. */
.map-search-panel {
  position: absolute;
  z-index: 14;
  top: var(--app-topbar-height);
  left: calc(var(--app-content-left) + var(--egu-gap-section));
  width: min(calc(var(--egu-gap-group) * 12), calc(100vw - var(--app-content-left) - var(--egu-gap-section) * 2));
  padding: var(--egu-gap-control-label);
  background: var(--egu-surface-overlay);
  border: 1px solid var(--egu-outline);
  border-top: 0;
  border-radius: 0 0 var(--egu-radius-surface) var(--egu-radius-surface);
  box-shadow: var(--egu-elevation-overlay);
}
html[data-shell='narrow'] .map-search-panel {
  left: var(--egu-page-margin-narrow);
  width: calc(100vw - var(--egu-page-margin-narrow) * 2);
}
.map-search-panel[hidden] {
  display: none;
}
.topbar-search {
  position: relative;
  display: block;
}
.topbar-search .search-icon {
  position: absolute;
  left: var(--egu-gap-control-label);
  top: 50%;
  transform: translateY(-50%);
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
  color: var(--egu-text-muted);
  z-index: 1;
}
.topbar-search .p-inputtext {
  width: 100%;
  padding-left: calc(var(--egu-gap-control-label) * 3);
  border-radius: var(--egu-radius-pill);
}
.search-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--egu-gap-inline) / 2);
  z-index: 15;
  padding: calc(var(--egu-gap-inline) / 2);
  border-radius: var(--egu-radius-surface);
  background: var(--egu-surface-overlay);
  border: 1px solid var(--egu-outline);
  box-shadow: var(--egu-elevation-overlay);
  max-height: min(60vh, calc(var(--egu-gap-group) * 9));
  overflow-y: auto;
}
.search-suggestions[hidden] {
  display: none;
}
.search-option {
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
  width: 100%;
  min-height: var(--egu-control-row-min-height);
  padding: var(--egu-gap-inline) var(--egu-gap-control-label);
  border: 0;
  border-radius: var(--egu-radius-control);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.search-option strong {
  font-weight: var(--egu-font-weight-body-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-option small {
  font-size: var(--egu-font-size-caption);
  color: var(--egu-text-muted);
}
.search-option:hover,
.search-option[aria-selected='true'] {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
}
.search-note {
  padding: var(--egu-gap-inline) var(--egu-gap-control-label);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
}
.app-bar-end {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
}
.topbar-signin.p-button {
  border-radius: var(--egu-radius-pill);
}

.command-toolbar {
  flex: 0 0 auto;
  min-height: var(--app-toolbar-height);
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  padding: 0 var(--egu-gap-section) var(--egu-gap-inline);
  border-top: 1px solid var(--egu-outline-subtle);
  overflow-x: auto;
  scrollbar-width: thin;
}
/* The overflow trigger is a popover trigger, not a `.p-button`; the size lives on the label so both
   shapes land on the same step instead of falling back to the browser's `smaller`. */
.command-label {
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.command-button {
  display: inline-flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  min-height: var(--egu-control-height);
  padding: 0 var(--egu-gap-control-label);
  border: 0;
  border-radius: var(--egu-radius-control);
  background: transparent;
  color: var(--egu-text-primary);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.command-button .map-icon {
  color: var(--egu-text-muted);
}
.command-button.p-button {
  height: var(--egu-control-height);
  min-height: var(--egu-control-height);
  padding: 0 var(--egu-gap-control-label);
  gap: var(--egu-gap-inline);
  border-radius: var(--egu-radius-control);
  color: var(--egu-text-primary);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  font-weight: var(--egu-font-weight-body);
  white-space: nowrap;
}
.command-button.p-button .map-icon {
  color: var(--egu-text-muted);
}
.command-button.p-button:hover .map-icon {
  color: var(--egu-text-primary);
}
/* The selected command carries the accent indicator as well as the tint (RULE-A11Y-03). */
.command-button.p-button.active {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
  box-shadow: inset 0 -3px 0 0 var(--egu-accent);
}
.command-button.p-button.active .map-icon {
  color: var(--egu-text-on-selection);
}
.command-overflow-panel {
  min-width: calc(var(--egu-gap-group) * 4);
  padding: calc(var(--egu-gap-inline) / 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
}
.command-overflow-panel .command-button.p-button {
  width: 100%;
  justify-content: flex-start;
}

/* Module rail (wide) and module bar (narrow) --------------------------------------------------- */
.module-rail,
.module-bar {
  position: absolute;
  z-index: 13;
  display: flex;
  background: var(--egu-surface-base);
}
.module-rail {
  top: var(--app-topbar-height);
  bottom: 0;
  left: 0;
  width: var(--app-rail-width);
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--egu-gap-inline) 0;
  border-right: 1px solid var(--egu-outline);
  transition: width var(--egu-motion-normal) ease;
}
.module-rail .module-items {
  flex: 1 1 auto;
  min-height: 0;
}
/* The rail's lower region (the owner's correction of 2026-09-26): Administrare, Suport, the settings
   entry and the account entry, in that order, separated from the main list by one hairline and in the
   same order whether the rail is labelled or icon-only. */
.module-rail .module-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
  border-top: 1px solid var(--egu-outline-subtle);
  margin-top: calc(var(--egu-gap-inline) / 2);
  padding-top: var(--egu-gap-inline);
}
.module-rail .module-footer .account-button {
  width: 100%;
  max-width: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--egu-gap-inline) / 4);
  min-height: var(--egu-control-row-min-height);
  border-radius: var(--egu-radius-control);
}
.module-rail .module-footer .account-text {
  align-items: center;
  text-align: center;
}
/* The organisation is the brand’s second line already; the rail’s account entry says the person. */
.module-rail .module-footer .account-text small {
  display: none;
}
.module-rail .module-footer .account-chevron {
  display: none;
}
html[data-rail='collapsed'] .module-rail .module-footer .account-text {
  display: none;
}
/* Below the breakpoint the bar has no footer region of its own: the settings entry sits in the row
   with the modules and the account entry is the app bar's. */
.module-bar .module-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--egu-gap-inline) / 4);
}
.rail-toggle.p-button {
  align-self: flex-end;
  margin-right: calc(var(--egu-gap-inline) / 2);
  min-width: var(--egu-control-target-min);
}
html[data-rail='collapsed'] .module-label {
  display: none;
}
html[data-rail='collapsed'] .rail-toggle.p-button {
  align-self: center;
  margin-right: 0;
}
.module-bar {
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--egu-control-row-min-height) + var(--egu-gap-inline));
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--egu-gap-inline);
  border-top: 1px solid var(--egu-outline);
}
.module-rail .module-items {
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
  overflow-y: auto;
  scrollbar-width: thin;
}
.module-bar .module-items {
  display: flex;
  flex-direction: row;
  gap: calc(var(--egu-gap-inline) / 4);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.module-item.p-button,
.module-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--egu-gap-inline) / 4);
  min-width: var(--egu-control-row-min-height);
  min-height: var(--egu-control-row-min-height);
  padding: calc(var(--egu-gap-inline) / 2) calc(var(--egu-gap-inline) / 2);
  border: 0;
  background: transparent;
  color: var(--egu-text-primary);
  cursor: pointer;
  border-radius: var(--egu-radius-control);
  font: inherit;
}
.module-item .map-icon {
  color: var(--egu-text-muted);
}
.module-item:hover {
  background: var(--egu-surface-raised);
}
.module-item:hover .map-icon {
  color: var(--egu-text-primary);
}
.module-label {
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  max-width: calc(var(--app-rail-width) - var(--egu-gap-inline));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Selected = a 3-px accent bar plus the tint, never the tint alone (ADR-0082 §1.1). */
.module-item.active {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
}
.module-item.active .map-icon {
  color: var(--egu-text-on-selection);
}
.module-rail .module-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--egu-gap-inline) / 2);
  bottom: calc(var(--egu-gap-inline) / 2);
  width: 3px;
  border-radius: var(--egu-radius-pill);
  background: var(--egu-accent);
}
.module-bar .module-item.active::before {
  content: '';
  position: absolute;
  left: calc(var(--egu-gap-inline) / 2);
  right: calc(var(--egu-gap-inline) / 2);
  top: 0;
  height: 3px;
  border-radius: var(--egu-radius-pill);
  background: var(--egu-accent);
}
.module-more-panel {
  min-width: calc(var(--egu-gap-group) * 4);
  width: min(calc(var(--egu-gap-group) * 6), calc(100vw - var(--egu-gap-section)));
  max-height: min(70vh, calc(var(--egu-gap-group) * 10));
  overflow: auto;
  padding: calc(var(--egu-gap-inline) / 2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
}
.module-more-panel .module-item {
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  gap: var(--egu-gap-inline);
}
.module-more-panel .module-label {
  max-width: none;
}
.module-more-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
}
/* "More" below the structural breakpoint: a sheet above the bar, the width of the viewport. */
.module-more-sheet {
  position: absolute;
  z-index: 16;
  left: 0;
  right: 0;
  bottom: calc(var(--egu-control-row-min-height) + var(--egu-gap-inline));
  max-height: min(60vh, calc(var(--egu-gap-group) * 9));
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
  padding: var(--egu-gap-control-label);
  background: var(--egu-surface-overlay);
  border-top: 1px solid var(--egu-outline);
  box-shadow: var(--egu-elevation-overlay);
}
.module-more-sheet[hidden] {
  display: none;
}
.module-more-sheet .module-item {
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  gap: var(--egu-gap-inline);
}
.module-more-sheet .module-label {
  max-width: none;
}
/* A group is one expandable rail item; its children are indented under it, each with its own icon
   (ADR-0077's owner correction of 2026-09-26). */
.module-group {
  display: flex;
  flex-direction: column;
}
.module-group-head.p-button {
  position: relative;
}
.module-group-chevron {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
}
.module-group-items {
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
  padding-left: var(--egu-gap-control-label);
}
.module-group-items[hidden] {
  display: none;
}
html[data-rail='collapsed'] .module-group-items {
  padding-left: 0;
}
html[data-rail='collapsed'] .module-group-chevron {
  display: none;
}
/* A module whose face is a placeholder gets one page, over the module pane. */
.module-placeholder {
  position: absolute;
  z-index: 15;
  top: var(--app-topbar-height);
  left: var(--app-rail-offset);
  right: 0;
  bottom: var(--app-module-bar-height);
  display: grid;
  place-items: center;
  padding: var(--egu-page-margin);
  background: var(--egu-surface-base);
}
.module-placeholder-card {
  display: grid;
  justify-items: center;
  gap: var(--egu-gap-control-label);
  width: min(calc(var(--egu-gap-group) * 10), 100%);
  padding: var(--egu-gap-group) var(--egu-gap-section);
  background: var(--egu-surface-raised);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  box-shadow: var(--egu-elevation-raised);
  text-align: center;
}
.module-placeholder-icon {
  width: var(--egu-gap-section);
  height: var(--egu-gap-section);
  color: var(--egu-text-muted);
}
.module-placeholder-card h1 {
  margin: 0;
  font-size: var(--egu-font-size-subtitle);
  line-height: var(--egu-line-height-subtitle);
  font-weight: var(--egu-font-weight-subtitle);
}
.module-placeholder-card p {
  margin: 0;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}

/* Account -------------------------------------------------------------------------------------- */
.account-button {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  min-height: var(--egu-control-height);
  padding: calc(var(--egu-gap-inline) / 2) var(--egu-gap-inline);
  border: 1px solid transparent;
  border-radius: var(--egu-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  max-width: calc(var(--egu-gap-group) * 6);
}
.account-button:hover {
  background: var(--egu-surface-base);
}
.account-avatar {
  display: grid;
  place-items: center;
  width: var(--egu-control-height-small);
  height: var(--egu-control-height-small);
  border-radius: var(--egu-radius-pill);
  background: var(--egu-accent);
  color: var(--egu-text-on-accent);
  font-size: var(--egu-font-size-caption);
  font-weight: var(--egu-font-weight-body-strong);
}
.account-avatar.large {
  width: var(--egu-gap-group);
  height: var(--egu-gap-group);
  font-size: var(--egu-font-size-body-large);
}
.account-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.account-text span {
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  font-weight: var(--egu-font-weight-body-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(var(--egu-gap-group) * 4);
}
.account-text small {
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  color: var(--egu-text-muted);
}
.account-chevron {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
  color: var(--egu-text-muted);
}
.account-panel {
  width: calc(var(--egu-gap-group) * 6);
  padding: var(--egu-gap-control-label);
}
.account-card {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-control-label);
  padding-bottom: var(--egu-gap-control-label);
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.account-card strong {
  display: block;
  font-size: var(--egu-font-size-body-large);
  line-height: var(--egu-line-height-body-large);
}
.account-card p {
  margin: 0;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.account-admin.p-button,
.account-signout.p-button {
  width: 100%;
  justify-content: center;
  margin-top: var(--egu-gap-inline);
}

/* Layers pane ---------------------------------------------------------------------------------- */
.app-drawer {
  position: absolute;
  z-index: 11;
  top: var(--app-topbar-height);
  bottom: var(--app-bottom-height);
  left: var(--app-rail-offset);
  width: var(--app-drawer-width);
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--egu-surface-raised);
  border-right: 1px solid var(--egu-outline);
  transform: translateX(-100%);
  transition: transform var(--egu-motion-normal) ease;
  visibility: hidden;
}
.app-drawer.open {
  transform: none;
  visibility: visible;
}
html[data-drawer='overlay'] .app-drawer {
  box-shadow: var(--egu-elevation-overlay);
  width: min(var(--app-drawer-width), calc(100vw - var(--egu-gap-group)));
}
.drawer-mask {
  position: absolute;
  z-index: 10;
  inset: var(--app-topbar-height) 0 var(--app-bottom-height) 0;
  background: var(--egu-scrim);
  opacity: 0.4;
}
.drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--egu-gap-inline);
  min-height: var(--egu-control-height);
  padding: var(--egu-gap-inline) var(--egu-gap-control-label);
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.drawer-title {
  margin: 0;
  font-size: var(--egu-font-size-body-strong);
  font-weight: var(--egu-font-weight-body-strong);
}
.drawer-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--egu-gap-inline) / 4);
}
.drawer-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--egu-gap-inline) var(--egu-gap-control-label) var(--egu-gap-section);
}
.panel-heading {
  margin: var(--egu-gap-control-label) 0 var(--egu-gap-inline);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  font-weight: var(--egu-font-weight-body-strong);
}
.panel-note {
  margin: var(--egu-gap-inline) 0;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.panel-note.child {
  margin-left: var(--egu-gap-section);
}
/* The whole row is the toggle target, at least the row height (audit F-W-04). */
.layer-node {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--egu-gap-inline);
  min-height: var(--egu-control-row-min-height);
  padding: calc(var(--egu-gap-inline) / 2) calc(var(--egu-gap-inline) / 2);
  border-radius: var(--egu-radius-control);
}
.layer-node:hover {
  background: var(--egu-surface-base);
}
.layer-node.child {
  margin-left: var(--egu-gap-control-label);
}
.layer-node label {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 8);
  cursor: pointer;
  min-width: 0;
  padding: calc(var(--egu-gap-inline) / 2) 0;
}
.layer-node label span {
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-node small {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An unavailable row says so in words (its reason line); it is never expressed as opacity. */
.layer-node.unavailable label span {
  color: var(--egu-text-muted);
}
.layer-node-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--egu-gap-inline) / 4);
}
.layer-children {
  display: grid;
}
.layer-entry {
  display: grid;
}
.layer-properties-panel {
  width: min(calc(var(--egu-gap-group) * 7), calc(100vw - var(--egu-gap-group)));
  padding: var(--egu-gap-control-label);
}

/* Personal style ("My style", REQ-UX-024, ADR-0074) -------------------------------------------- */
.style-menu-trigger.p-button {
  width: var(--egu-control-target-min);
  height: var(--egu-control-target-min);
  min-width: var(--egu-control-target-min);
}
.style-menu-panel {
  width: min(calc(var(--egu-gap-group) * 6), calc(100vw - var(--egu-gap-group)));
  padding: calc(var(--egu-gap-inline) / 2);
}
.style-menu-item.p-button {
  display: block;
  width: 100%;
  min-height: var(--egu-control-target-min);
  padding: calc(var(--egu-gap-inline) / 2) var(--egu-gap-inline);
  text-align: left;
  border-radius: var(--egu-radius-control);
  font-size: var(--egu-font-size-body);
}
.style-menu-note {
  margin: calc(var(--egu-gap-inline) / 2) var(--egu-gap-inline);
}
.style-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feature-form-layer-row {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  flex-wrap: wrap;
}
.my-style-dialog {
  width: min(calc(var(--egu-gap-group) * 18), calc(100vw - var(--egu-gap-group)));
}

/* Legend and degradation (REQ-UX-021, REQ-VECTOR-015) ------------------------------------------ */
.layer-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--egu-gap-inline);
  margin: 0 0 var(--egu-gap-inline) var(--egu-gap-section);
}
.legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--egu-gap-inline) / 2) var(--egu-gap-control-label);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legend-list li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--egu-gap-inline) / 2);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  color: var(--egu-text-primary);
}
/* A hidden class carries the word as well as the strike, never the strike alone. */
.legend-list li.legend-hidden {
  color: var(--egu-text-muted);
}
.legend-list li.legend-hidden small {
  color: var(--egu-text-muted);
}
.legend-patch {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
  flex: 0 0 auto;
  overflow: visible;
}
.legend-toggle.p-button {
  font-size: var(--egu-font-size-caption);
  min-height: var(--egu-control-target-min);
}
.degradation-glyph.p-button {
  width: var(--egu-control-target-min);
  height: var(--egu-control-target-min);
  min-width: var(--egu-control-target-min);
  color: var(--egu-warning);
}
.degradation-panel {
  width: min(calc(var(--egu-gap-group) * 7), calc(100vw - var(--egu-gap-group)));
  padding: var(--egu-gap-control-label);
}
.degradation-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--egu-gap-inline);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.p-checkbox-indicator[data-unchecked] .map-icon {
  display: none;
}
.p-checkbox-indicator .map-icon {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
  stroke-width: 2.6;
}

/* Dialogs -------------------------------------------------------------------------------------- */
.app-dialog {
  width: min(calc(var(--egu-gap-group) * 13), calc(100vw - var(--egu-gap-section)));
  background: var(--egu-surface-overlay);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  box-shadow: var(--egu-elevation-overlay);
}
.confirm-dialog {
  width: min(calc(var(--egu-gap-group) * 9), calc(100vw - var(--egu-gap-section)));
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--egu-gap-inline);
}
/* The element selector outranks the library's own `.p-dialog-title`, which is an eighteenth size the
   ramp does not have. */
.dialog-title,
html .p-dialog-title {
  font-size: var(--egu-font-size-subtitle);
  line-height: var(--egu-line-height-subtitle);
  font-weight: var(--egu-font-weight-subtitle);
}
.dialog-content {
  display: grid;
  gap: var(--egu-gap-control-label);
}
.dialog-body {
  margin: 0;
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--egu-gap-inline);
}

/* Forms (ADR-0082 §6): label above field, persistent hint, one column, one primary action. ------ */
.field {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 2);
  margin-bottom: var(--egu-gap-control-label);
}
.field-label {
  display: flex;
  align-items: baseline;
  gap: calc(var(--egu-gap-inline) / 2);
  color: var(--egu-text-primary);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  font-weight: var(--egu-font-weight-body-strong);
}
.field-required {
  color: var(--egu-error);
  font-weight: var(--egu-font-weight-body-strong);
}
.field-optional {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  font-weight: var(--egu-font-weight-caption);
}
.field-body {
  display: grid;
}
.field-hint {
  margin: 0;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.field-error {
  margin: 0;
  color: var(--egu-error);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.field[data-invalid='true'] .p-inputtext,
.field[data-invalid='true'] .field-control {
  border-color: var(--egu-error);
}
.field-control {
  width: 100%;
}
.field-group {
  display: grid;
  gap: var(--egu-gap-inline);
  margin-bottom: var(--egu-gap-section);
}
.field-actions {
  display: flex;
  justify-content: flex-start;
  gap: var(--egu-gap-inline);
}
.form-required-note {
  margin: 0 0 var(--egu-gap-control-label);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--egu-gap-inline);
  margin-top: var(--egu-gap-section);
}
.form-refusal {
  margin: 0 0 var(--egu-gap-control-label);
}
.form-refusal:focus-visible {
  outline: var(--egu-focus-ring-width) solid var(--egu-focus);
  outline-offset: var(--egu-focus-ring-offset);
}
.form-refusal-link.p-button {
  margin-left: var(--egu-gap-inline);
}

/* Bottom workspace: attributes pane and one status line ---------------------------------------- */
.app-bottom {
  position: absolute;
  z-index: 11;
  left: var(--app-rail-offset);
  right: 0;
  bottom: var(--app-module-bar-height);
  display: flex;
  flex-direction: column;
  background: var(--egu-surface-raised);
  border-top: 1px solid var(--egu-outline);
}
.attributes-pane {
  height: var(--app-attributes-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.attributes-pane[hidden] {
  display: none;
}
.app-bottom[hidden] {
  display: none;
}
.pane-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--egu-gap-control-label);
  min-height: var(--egu-control-height);
  padding: calc(var(--egu-gap-inline) / 2) var(--egu-gap-control-label);
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.pane-header strong,
.pane-header .pane-title {
  margin: 0;
  font-size: var(--egu-font-size-body-strong);
  font-weight: var(--egu-font-weight-body-strong);
}
.pane-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--egu-gap-inline) var(--egu-gap-section) var(--egu-gap-control-label);
}
.empty-selection {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  margin: var(--egu-gap-inline) 0;
}
.diagnostics-section {
  margin-top: var(--egu-gap-control-label);
  padding-top: var(--egu-gap-inline);
  border-top: 1px solid var(--egu-outline-subtle);
}
.diagnostics-section summary {
  cursor: pointer;
  min-height: var(--egu-control-target-min);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  font-weight: var(--egu-font-weight-body-strong);
}
.diagnostics {
  margin: var(--egu-gap-inline) 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  max-height: calc(var(--egu-gap-group) * 6);
  overflow: auto;
}
/* A label-above-value record list: the feature form, the layer properties, any read-only pair
   (ADR-0082 §6.1; audit F-W-01's 1 380 px gap is what this replaces). */
.record-list {
  margin: 0;
  display: grid;
  gap: 0;
}
.record-list > div {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 4);
  padding: calc(var(--egu-gap-inline) / 2) 0;
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.record-list > div:last-child {
  border-bottom: 0;
}
.record-list dt {
  display: flex;
  align-items: center;
  gap: calc(var(--egu-gap-inline) / 2);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.record-list dd {
  margin: 0;
  color: var(--egu-text-primary);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  overflow-wrap: anywhere;
}

/* Feature form --------------------------------------------------------------------------------- */
.feature-form {
  display: grid;
  gap: var(--egu-gap-control-label);
}
.feature-form-header {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 4);
  padding-bottom: var(--egu-gap-inline);
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.feature-form-header strong {
  font-size: var(--egu-font-size-body-large);
  line-height: var(--egu-line-height-body-large);
  font-weight: var(--egu-font-weight-body-strong);
}
#feature-form-layer {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.feature-form-copied {
  color: var(--egu-success);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.feature-form-raw {
  display: block;
  margin-top: calc(var(--egu-gap-inline) / 4);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  font-family: ui-monospace, monospace;
}
.feature-form-swatch {
  width: var(--egu-gap-inline);
  height: var(--egu-gap-inline);
  border-radius: var(--egu-radius-pill);
  flex: 0 0 auto;
  background: var(--swatch);
}
.feature-form-related {
  margin-top: var(--egu-gap-inline);
}
.feature-form-related h3 {
  margin: 0 0 var(--egu-gap-inline);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  font-weight: var(--egu-font-weight-body-strong);
}
.feature-form-relation {
  margin: 0 0 var(--egu-gap-control-label);
}
.feature-form-relation h4 {
  margin: 0 0 calc(var(--egu-gap-inline) / 4);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  font-weight: var(--egu-font-weight-body-strong);
}
.feature-form-relation-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(var(--egu-gap-inline) / 4);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
/* Two columns of label-above-value pairs on a wide pane (audit F-W-01's redesign). */
@media (min-width: 1200px) {
  .feature-form-rows {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--egu-gap-section);
  }
}

/* Attribute table and the history faces (REQ-UX-038, REQ-EDIT-018) -------------------
   The grid lives inside the attributes pane, which is why that pane asks for its taller height
   whenever a layer's table is open (`html[data-table="open"]`, stamped by `map-shell.jsx`). Every
   length, colour and type size below is a token; nothing here is a literal. */
.attribute-table {
  display: grid;
  gap: var(--egu-gap-control-label);
}
.table-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--egu-gap-control-label);
}
.table-layer-field {
  min-width: calc(var(--egu-gap-group) * 4);
  flex: 0 1 auto;
}
.table-page-size-field {
  min-width: calc(var(--egu-gap-group) * 1.5);
  flex: 0 0 auto;
}
.table-note {
  margin: 0;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.table-notes {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 4);
}
.table-paging {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--egu-gap-control-label);
}
/* The one horizontally scrolling container the layout standard allows: a grid may be wider than
   the pane, and the pane itself never scrolls sideways. */
.table-scroll {
  overflow: auto;
  max-height: calc(var(--egu-gap-group) * 7);
  border: 1px solid var(--egu-outline-subtle);
  border-radius: var(--egu-radius-control);
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
}
.table-scroll th,
.table-scroll td {
  padding: calc(var(--egu-gap-inline) / 2) var(--egu-gap-control-label);
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--egu-outline-subtle);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  white-space: nowrap;
}
.table-scroll th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--egu-surface-raised);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  font-weight: var(--egu-font-weight-body-strong);
}
.table-scroll tr[data-selected='true'] td {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
}
.table-sort.p-button {
  padding-inline: 0;
  min-height: var(--egu-control-target-min);
}
.table-filter {
  margin-top: calc(var(--egu-gap-inline) / 4);
}
.table-select-cell,
.table-action-cell {
  width: var(--egu-control-row-min-height);
  white-space: nowrap;
}
.table-value-cell {
  display: table-cell;
}
.table-value-cell .feature-form-swatch {
  display: inline-block;
  margin-inline-end: calc(var(--egu-gap-inline) / 2);
}

.history-panel {
  display: grid;
  gap: var(--egu-gap-control-label);
  margin-top: var(--egu-gap-inline);
  padding-top: var(--egu-gap-inline);
  border-top: 1px solid var(--egu-outline-subtle);
}
.history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--egu-gap-control-label);
}
.history-head h3 {
  margin: 0;
  font-size: var(--egu-font-size-body-strong);
  line-height: var(--egu-line-height-body);
  font-weight: var(--egu-font-weight-body-strong);
}
.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--egu-gap-control-label);
}
.history-list > li {
  padding-bottom: var(--egu-gap-inline);
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.history-list > li:last-child {
  border-bottom: 0;
}
.history-version-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--egu-gap-control-label);
}
.history-version-state {
  margin-top: var(--egu-gap-inline);
  padding-inline-start: var(--egu-gap-control-label);
  border-inline-start: 2px solid var(--egu-outline-subtle);
}
.history-version-state h5 {
  margin: 0 0 calc(var(--egu-gap-inline) / 4);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  font-weight: var(--egu-font-weight-body-strong);
}
.history-deleted-row {
  display: grid;
  gap: var(--egu-gap-inline);
  justify-items: start;
}
@media (max-width: 640px) {
  .table-scroll {
    max-height: calc(var(--egu-gap-group) * 5);
  }
}

.status-bar {
  min-height: var(--app-status-height);
  display: flex;
  align-items: center;
  gap: var(--egu-gap-control-label);
  padding: 0 var(--egu-gap-control-label);
  color: var(--egu-text-primary);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  overflow: hidden;
  white-space: nowrap;
}
.status-message {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--egu-text-primary);
}
.status-cell {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--egu-gap-inline) / 2);
  padding-left: var(--egu-gap-control-label);
  border-left: 1px solid var(--egu-outline-subtle);
}
.status-key {
  color: var(--egu-text-muted);
}
.status-value {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  gap: calc(var(--egu-gap-inline) / 2);
  align-items: baseline;
}
.status-axis {
  color: var(--egu-text-muted);
}

/* Map overlays: the floating cluster carries map navigation only --------------------------------- */
.map-overlays {
  position: absolute;
  z-index: 5;
  top: var(--app-topbar-height);
  left: var(--app-content-left);
  right: 0;
  bottom: var(--app-bottom-height);
  pointer-events: none;
  transition: left var(--egu-motion-slow) ease;
}
.map-chrome-button.p-button {
  width: var(--map-icon-size);
  min-width: var(--map-icon-size);
  height: var(--map-icon-size);
  min-height: var(--map-icon-size);
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--egu-surface-raised);
  color: var(--egu-text-primary);
  box-shadow: none;
}
.map-chrome-button.p-button:enabled:hover {
  background: var(--egu-surface-base);
  color: var(--egu-text-primary);
}
.map-chrome-button.p-button:enabled:active {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
}
/* The cluster's buttons touch each other inside one rounded container, so their ring is drawn
   inside rather than outside, where the neighbour would clip it. */
html .map-chrome-button.p-button:focus-visible {
  outline-offset: calc(var(--egu-focus-ring-offset) * -1) !important;
  z-index: 1;
}
.map-chrome-button .map-icon {
  width: var(--egu-control-icon-size);
  height: var(--egu-control-icon-size);
}
.map-button-stack {
  position: absolute;
  right: calc(var(--map-edge-gap) + env(safe-area-inset-right));
  bottom: var(--map-edge-gap);
  display: flex;
  flex-direction: column;
  width: var(--map-icon-size);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  overflow: hidden;
  background: var(--egu-surface-raised);
  box-shadow: var(--egu-elevation-raised);
}
.map-button-stack > .p-button {
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.map-button-stack > .p-button:last-of-type {
  border-bottom: 0;
}
.gps-button.p-button {
  position: absolute;
  left: calc(var(--map-edge-gap) + env(safe-area-inset-left));
  bottom: var(--map-edge-gap);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  box-shadow: var(--egu-elevation-raised);
}
.mobile-only {
  display: none;
}
.map-chrome-button.mobile-only {
  display: none;
}
html[data-layout='compact'] .gps-button.mobile-only {
  display: grid;
}
.map-error {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: var(--map-edge-gap);
  transform: translateX(-50%);
  width: min(calc(var(--egu-gap-group) * 13), calc(100% - var(--map-edge-gap) * 2));
  margin: 0;
  padding: var(--egu-gap-control-label) var(--egu-gap-section);
  border-radius: var(--egu-radius-surface);
  background: var(--egu-error-container);
  color: var(--egu-text-on-error-container);
  border: 1px solid var(--egu-error);
  box-shadow: var(--egu-elevation-raised);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  pointer-events: none;
}
.map-error[hidden] {
  display: none;
}

/* The settings page (audit F-X-07, F-W-05): one page, one constrained column, no Save button. ---- */
.settings-page {
  position: absolute;
  z-index: 20;
  top: var(--app-topbar-height);
  left: var(--app-rail-offset);
  right: 0;
  bottom: var(--app-module-bar-height);
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--egu-surface-base);
}
.settings-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--egu-gap-control-label);
  padding: var(--egu-gap-control-label) var(--egu-page-margin);
  background: var(--egu-surface-base);
  border-bottom: 1px solid var(--egu-outline-subtle);
}
/* The one `title` step on the page (ADR-0082 owner decision 8). */
.settings-title {
  margin: 0;
  font-size: var(--egu-font-size-title);
  line-height: var(--egu-line-height-title);
  font-weight: var(--egu-font-weight-title);
}
.settings-column {
  width: 100%;
  max-width: calc(var(--egu-gap-group) * 21);
  margin: 0 auto;
  padding: var(--egu-gap-section) var(--egu-page-margin) var(--egu-gap-group);
  display: grid;
  gap: var(--egu-gap-section);
}
.settings-intro {
  margin: 0;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--egu-gap-section);
  flex-wrap: wrap;
  padding: var(--egu-gap-control-label) 0;
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.settings-row-text {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 4);
  min-width: 0;
  flex: 1 1 calc(var(--egu-gap-group) * 5);
}
.settings-row-label {
  font-size: var(--egu-font-size-body-large);
  line-height: var(--egu-line-height-body-large);
  font-weight: var(--egu-font-weight-body-strong);
}
.settings-row-hint {
  margin: 0;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.settings-row-control {
  flex: 0 1 auto;
  min-width: 0;
}
.settings-sample {
  margin: 0;
  padding: var(--egu-gap-control-label);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  background: var(--egu-surface-raised);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
/* A segmented control whose selected segment carries a check glyph as well as the tint (F-W-17). */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-control);
  overflow: hidden;
}
.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--egu-control-height);
  padding: 0 var(--egu-gap-control-label);
  gap: calc(var(--egu-gap-inline) / 2);
  border: 0;
  border-right: 1px solid var(--egu-outline-subtle);
  border-radius: 0;
  background: transparent;
  color: var(--egu-text-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--egu-font-size-body);
}
.segmented .segment {
  color: var(--egu-text-primary);
}
.segment:hover {
  background: var(--egu-surface-base);
}
.segmented .segment:last-child {
  border-right: 0;
}
.segment .segment-check {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
  visibility: hidden;
}
.segment.selected {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
}
.segment.selected .segment-check {
  visibility: visible;
  color: var(--egu-accent);
}
.accent-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--egu-gap-inline);
  border: 0;
}
.accent-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--egu-gap-inline) / 2);
  min-width: var(--egu-control-row-min-height);
  min-height: var(--egu-control-row-min-height);
  padding: var(--egu-gap-inline);
  border: 1px solid transparent;
  border-radius: var(--egu-radius-control);
  background: transparent;
  color: var(--egu-text-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--egu-font-size-caption);
}
.accent-row .accent-choice {
  color: var(--egu-text-primary);
}
.accent-choice:hover {
  background: var(--egu-surface-raised);
}
.accent-swatch {
  display: grid;
  place-items: center;
  width: var(--egu-control-target-min);
  height: var(--egu-control-target-min);
  border-radius: var(--egu-radius-pill);
  border: 1px solid var(--egu-outline);
  background: var(--egu-accent);
  color: var(--egu-text-on-accent);
}
.accent-swatch .map-icon {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
  stroke-width: 3;
}
/* Each swatch shows its own accent, resolved from the generated per-accent token for that name --
   so the row shows the five choices rather than five copies of the current one. */
.accent-choice[data-accent='system'] .accent-swatch {
  background: var(--egu-accent-system);
}
.accent-choice[data-accent='blue'] .accent-swatch {
  background: var(--egu-accent-blue);
}
.accent-choice[data-accent='teal'] .accent-swatch {
  background: var(--egu-accent-teal);
}
.accent-choice[data-accent='purple'] .accent-swatch {
  background: var(--egu-accent-purple);
}
.accent-choice[data-accent='rose'] .accent-swatch {
  background: var(--egu-accent-rose);
}
.accent-choice.selected {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
}
.accent-name {
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.scale-control {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-control-label);
  flex-wrap: wrap;
}
.scale-end {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
}
.scale-slider {
  flex: 1 1 calc(var(--egu-gap-group) * 4);
  min-width: calc(var(--egu-gap-group) * 3);
}
.scale-value {
  font-variant-numeric: tabular-nums;
  font-size: var(--egu-font-size-body);
  font-weight: var(--egu-font-weight-body-strong);
}

/* Signed out: one card, no chrome for what needs a session (audit F-W-18, removal 19). ----------- */
.signed-out {
  position: absolute;
  z-index: 6;
  inset: var(--app-topbar-height) 0 0 0;
  display: grid;
  place-items: center;
  padding: var(--egu-page-margin);
}
.signed-out-card {
  display: grid;
  justify-items: center;
  gap: var(--egu-gap-control-label);
  width: min(calc(var(--egu-gap-group) * 10), 100%);
  padding: var(--egu-gap-group) var(--egu-gap-section);
  background: var(--egu-surface-raised);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  box-shadow: var(--egu-elevation-raised);
  text-align: center;
}
.signed-out-card h1 {
  margin: 0;
  font-size: var(--egu-font-size-subtitle);
  line-height: var(--egu-line-height-subtitle);
  font-weight: var(--egu-font-weight-subtitle);
}
.signed-out-card p {
  margin: 0;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}

/* One transient confirmation surface ------------------------------------------------------------- */
.toast-region {
  position: absolute;
  z-index: 30;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--app-bottom-height) + var(--egu-gap-section));
  width: min(calc(var(--egu-gap-group) * 10), calc(100vw - var(--egu-gap-section)));
  display: grid;
  gap: var(--egu-gap-inline);
}

/* Add data (ADR-0059 §4) ------------------------------------------------------------------------- */
.add-data-dialog {
  width: min(calc(var(--egu-gap-group) * 18), calc(100vw - var(--egu-gap-section)));
}
.browser-body {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-control-label);
  min-height: min(calc(var(--egu-gap-group) * 10), 70vh);
}
.browser-main {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-control-label);
  min-width: 0;
}
.browser-toolbar {
  display: flex;
  gap: var(--egu-gap-section);
  flex-wrap: wrap;
}
.browser-tenant-field {
  flex: 1 1 calc(var(--egu-gap-group) * 5);
}
.browser-tenant {
  min-width: calc(var(--egu-gap-group) * 4);
}
.browser-counter-row {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-control-label);
  flex-wrap: wrap;
}
.browser-status {
  font-size: var(--egu-font-size-caption);
  color: var(--egu-text-muted);
}
.browser-status.connected {
  color: var(--egu-text-primary);
}
.browser-counter {
  font-size: var(--egu-font-size-body);
  font-weight: var(--egu-font-weight-body-strong);
}
.browser-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  font-size: var(--egu-font-size-caption);
}
.browser-error {
  margin: 0;
  color: var(--egu-error);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.browser-shown {
  font-size: var(--egu-font-size-caption);
  color: var(--egu-text-muted);
}
.browser-list {
  flex: 1 1 auto;
  min-height: calc(var(--egu-gap-group) * 5);
  max-height: min(46vh, calc(var(--egu-gap-group) * 9));
  overflow: auto;
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  padding: calc(var(--egu-gap-inline) / 2);
}
.browser-section header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--egu-gap-inline) var(--egu-gap-inline) calc(var(--egu-gap-inline) / 2);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  font-weight: var(--egu-font-weight-body-strong);
}
.browser-row {
  position: relative;
}
.browser-row-glyph {
  display: grid;
  place-items: center;
  width: var(--egu-control-target-min);
  height: var(--egu-control-target-min);
  color: var(--egu-text-muted);
}
.browser-row-text {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 8);
  min-width: 0;
  padding: calc(var(--egu-gap-inline) / 2) 0;
}
.browser-row-text span {
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-row-text small {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.browser-badge {
  margin-left: auto;
  font-size: var(--egu-font-size-caption);
  padding: calc(var(--egu-gap-inline) / 4) var(--egu-gap-inline);
  border-radius: var(--egu-radius-pill);
  white-space: nowrap;
  background: var(--egu-surface-base);
  color: var(--egu-text-muted);
}
.browser-badge.on-map {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
}
.browser-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--egu-gap-control-label);
  flex-wrap: wrap;
}
.browser-summary {
  font-size: var(--egu-font-size-body);
  color: var(--egu-text-muted);
}
.browser-actions {
  display: flex;
  gap: var(--egu-gap-inline);
  flex-wrap: wrap;
}

/* Administration (REQ-ADMIN-001): a rail of sections beside the work area, the same frame the
   Add-data dialog had before this packet made that dialog single-purpose. ------------------------- */
.admin-dialog {
  width: min(calc(var(--egu-gap-group) * 22), calc(100vw - var(--egu-gap-section)));
}
.admin-dialog .browser-body {
  flex-direction: row;
  gap: 0;
  padding: 0 !important;
  min-height: min(calc(var(--egu-gap-group) * 11), 70vh);
}
.admin-dialog .browser-rail {
  flex: 0 0 calc(var(--egu-gap-group) * 5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
  padding: var(--egu-gap-control-label) var(--egu-gap-inline);
  border-right: 1px solid var(--egu-outline);
  background: var(--egu-surface-base);
  overflow: auto;
}
.browser-rail-item {
  display: flex;
  gap: var(--egu-gap-inline);
  align-items: flex-start;
  text-align: left;
  min-height: var(--egu-control-row-min-height);
  padding: var(--egu-gap-inline) var(--egu-gap-control-label);
  border: 0;
  border-radius: var(--egu-radius-control);
  background: transparent;
  color: var(--egu-text-primary);
  cursor: pointer;
  font: inherit;
}
.browser-rail-item .map-icon {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
  flex: 0 0 auto;
  color: var(--egu-text-muted);
}
.browser-rail-item span {
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 8);
  min-width: 0;
}
.browser-rail-item strong {
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  font-weight: var(--egu-font-weight-body-strong);
}
.browser-rail-item small {
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  color: var(--egu-text-muted);
}
.browser-rail-item:hover {
  background: var(--egu-surface-raised);
}
/* Selected: the accent bar plus the tint, never the tint alone (ADR-0082 §1.1). */
.browser-rail-item.active {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
  box-shadow: inset 3px 0 0 0 var(--egu-accent);
}
.browser-rail-item.active small {
  color: var(--egu-text-on-selection);
}
.admin-dialog .admin-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  padding: var(--egu-gap-section);
}
.browser-connection-row {
  display: flex;
  align-items: flex-end;
  gap: var(--egu-gap-control-label);
  flex-wrap: wrap;
}
.admin-main {
  gap: var(--egu-gap-control-label);
}
.admin-role-note {
  margin-top: auto;
  padding-top: var(--egu-gap-inline);
  font-size: var(--egu-font-size-caption);
  color: var(--egu-text-muted);
}
.admin-notice {
  margin: 0;
  color: var(--egu-success);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--egu-gap-control-label);
  flex-wrap: wrap;
}
/* `flex:0 0 auto` is load-bearing: `.admin-main` became a flex column that scrolls, and a scroll
   container's automatic minimum size is 0, so every table collapsed to its own two hairlines and
   the rows were clipped out of sight -- measured on the deployed shell, 2 px tall (TASK-104b). */
.admin-table-wrap {
  flex: 0 0 auto;
  overflow: auto;
  max-height: min(46vh, calc(var(--egu-gap-group) * 10));
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.admin-table th {
  position: sticky;
  top: 0;
  background: var(--egu-surface-base);
  text-align: left;
  font-weight: var(--egu-font-weight-body-strong);
  font-size: var(--egu-font-size-caption);
  padding: var(--egu-gap-inline) var(--egu-gap-control-label);
  border-bottom: 1px solid var(--egu-outline);
}
.admin-table td {
  padding: var(--egu-gap-inline) var(--egu-gap-control-label);
  border-bottom: 1px solid var(--egu-outline-subtle);
  vertical-align: top;
}
.admin-table tr:last-child td {
  border-bottom: 0;
}
/* An inactive row says so in its own cell; it is never expressed as opacity (RULE-TYPE-04). */
.admin-table tr.inactive td {
  color: var(--egu-text-muted);
}
.admin-key {
  max-width: calc(var(--egu-gap-group) * 7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--egu-font-size-caption);
}
.admin-muted {
  color: var(--egu-text-muted);
}
.admin-row-actions {
  white-space: nowrap;
}
.admin-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--egu-gap-group) * 5), 1fr));
  gap: calc(var(--egu-gap-inline) / 2) var(--egu-gap-control-label);
  max-height: calc(var(--egu-gap-group) * 7);
  overflow: auto;
  padding: var(--egu-gap-inline);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-control);
}
.admin-check {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  min-height: var(--egu-control-target-min);
  font-size: var(--egu-font-size-body);
}
.admin-check label {
  min-width: 0;
  cursor: pointer;
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.admin-chip {
  display: inline-block;
  margin: 0 calc(var(--egu-gap-inline) / 2) calc(var(--egu-gap-inline) / 2) 0;
  padding: calc(var(--egu-gap-inline) / 4) var(--egu-gap-inline);
  border-radius: var(--egu-radius-control);
  background: var(--egu-surface-base);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
}
.admin-scope {
  padding-top: var(--egu-gap-inline);
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 2);
  max-height: calc(var(--egu-gap-group) * 4);
  overflow: auto;
}
.admin-table .browser-badge {
  margin: 0 calc(var(--egu-gap-inline) / 2) calc(var(--egu-gap-inline) / 4) 0;
  display: inline-block;
}
.admin-form {
  display: grid;
  gap: var(--egu-gap-control-label);
  padding: var(--egu-gap-section);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  background: var(--egu-surface-base);
}
.admin-form h3 {
  margin: 0;
  font-size: var(--egu-font-size-body-large);
  line-height: var(--egu-line-height-body-large);
  font-weight: var(--egu-font-weight-body-strong);
}
/* One column, label above field (ADR-0082 §6.1/§6.6); the 220-px label column is gone. */
.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: calc(var(--egu-gap-group) * 11);
}
.admin-form-grid > .field-label {
  margin-top: var(--egu-gap-control-label);
}
.admin-form-grid > .field-label:first-child {
  margin-top: 0;
}
.admin-form-grid > .field-hint {
  margin-top: calc(var(--egu-gap-inline) / 2);
}
.admin-form-grid > .p-inputtext,
.admin-form-grid > .field-control,
.admin-form-grid > .p-select {
  margin-top: calc(var(--egu-gap-inline) / 2);
  width: 100%;
}
.admin-form .browser-actions {
  justify-content: flex-end;
}
.admin-memberships {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--egu-gap-group) * 6), 1fr));
  gap: calc(var(--egu-gap-inline) / 2) var(--egu-gap-section);
}
.admin-membership {
  display: grid;
  grid-template-columns: auto 1fr calc(var(--egu-gap-group) * 3);
  align-items: center;
  gap: var(--egu-gap-inline);
  padding: calc(var(--egu-gap-inline) / 2) 0;
  min-height: var(--egu-control-row-min-height);
}
.admin-membership label {
  display: grid;
  min-width: 0;
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.admin-membership label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-membership small {
  font-size: var(--egu-font-size-caption);
  color: var(--egu-text-muted);
}
.admin-role.field-control {
  width: calc(var(--egu-gap-group) * 3);
}
.admin-tenant-row {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 2);
  max-width: calc(var(--egu-gap-group) * 9);
}
.admin-layer-list {
  max-height: min(44vh, calc(var(--egu-gap-group) * 9));
}
.admin-layer-row {
  grid-template-columns: auto 1fr auto;
}
.admin-upload-row {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-control-label);
  flex-wrap: wrap;
}
.admin-file-button {
  cursor: pointer;
  font-size: var(--egu-font-size-body);
  padding: 0 var(--egu-gap-control-label);
  min-height: var(--egu-control-height);
  display: inline-flex;
  align-items: center;
}
.admin-upload {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 2);
  font-size: var(--egu-font-size-body);
}
.admin-upload progress {
  width: 100%;
  height: var(--egu-gap-inline);
  accent-color: var(--egu-accent);
}

/* The three authoring surfaces (TASK-176) ------------------------------------------------------- */
/* A section inside a section: the authoring half of Layers, the code-list editor and the
   relationship editor each sit under the list they act on, with no new navigation level. */
.admin-authoring {
  display: grid;
  gap: var(--egu-gap-control-label);
}
.admin-authoring h3,
.admin-usage h3,
.admin-form-preview h3 {
  margin: 0;
  font-size: var(--egu-font-size-body-large);
  line-height: var(--egu-line-height-body-large);
  font-weight: var(--egu-font-weight-body-strong);
}
.admin-form h4 {
  margin: 0;
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
  font-weight: var(--egu-font-weight-body-strong);
}
/* One field, or one code-list value, as a bordered group rather than a run of inputs: an
   administrator edits a dozen of them in a row and has to see where one ends (ADR-0082 §6.1). */
.admin-field-list {
  display: grid;
  gap: var(--egu-gap-control-label);
}
.admin-field-row {
  display: grid;
  gap: var(--egu-gap-control-label);
  margin: 0;
  padding: var(--egu-gap-control-label) var(--egu-gap-section) var(--egu-gap-control-label);
  border: 1px solid var(--egu-outline-subtle);
  border-radius: var(--egu-radius-control);
  background: var(--egu-surface-raised);
}
.admin-field-row > legend {
  padding: 0 var(--egu-gap-inline);
  font-size: var(--egu-font-size-caption);
  font-weight: var(--egu-font-weight-body-strong);
  color: var(--egu-text-muted);
}
.admin-field-row .admin-form-grid {
  max-width: none;
}
/* The migration plan: one line per step, and a step that loses data is marked by a word and by its
   own left bar -- never by colour alone (ADR-0082 §1.2). */
.admin-plan {
  display: grid;
  gap: var(--egu-gap-inline);
}
.admin-plan-list {
  margin: 0;
  display: grid;
  gap: calc(var(--egu-gap-inline) / 2);
}
.admin-plan-destructive {
  padding-left: var(--egu-gap-inline);
  box-shadow: inset 3px 0 0 0 var(--egu-error);
}
.admin-plan-warning {
  margin: 0;
  color: var(--egu-error);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
/* The attribute form a definition produces, drawn with the feature editor's own typed inputs. */
.admin-form-preview {
  display: grid;
  gap: var(--egu-gap-control-label);
  padding: var(--egu-gap-section);
  border: 1px dashed var(--egu-outline);
  border-radius: var(--egu-radius-surface);
}
/* Where a code list is used, read out of the layer definitions. */
.admin-usage {
  display: grid;
  gap: var(--egu-gap-inline);
  padding: var(--egu-gap-section);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  background: var(--egu-surface-base);
}
/* Why a control is not offered (ADR-0082 §6.10) and what exactly the server refused. */
.admin-gate-reason,
.admin-refusal-detail,
.admin-page-bound {
  margin: 0;
  font-size: var(--egu-font-size-caption);
  color: var(--egu-text-muted);
}
/* The bounded page the four administration tables share. */
.admin-table-filter {
  align-items: flex-end;
  gap: var(--egu-gap-control-label);
}
.admin-table-filter .admin-page-bound {
  flex: 1 1 100%;
}
.admin-table-paging {
  margin-top: var(--egu-gap-inline);
}

/* The style editor's own surfaces ---------------------------------------------------------------- */
.style-form {
  max-width: none;
}
.admin-style-preview {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-control-label);
  padding: var(--egu-gap-control-label);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-control);
  background: var(--egu-surface-raised);
}
.style-preview-strip {
  background: var(--egu-surface-base);
  border-radius: var(--egu-radius-control);
}
.admin-style-preview-note {
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.admin-style-body {
  display: grid;
  grid-template-columns: minmax(calc(var(--egu-gap-group) * 4), calc(var(--egu-gap-group) * 6)) 1fr;
  gap: var(--egu-gap-section);
  margin-top: var(--egu-gap-control-label);
}
.admin-style-classes {
  display: flex;
  flex-direction: column;
  gap: calc(var(--egu-gap-inline) / 4);
  max-height: calc(var(--egu-gap-group) * 9);
  overflow: auto;
}
.admin-style-class {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  min-height: var(--egu-control-row-min-height);
  padding: calc(var(--egu-gap-inline) / 2) var(--egu-gap-inline);
  border: 1px solid var(--egu-outline-subtle);
  border-radius: var(--egu-radius-control);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--egu-font-size-body);
}
.admin-style-class.active {
  border-color: var(--egu-accent);
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
  box-shadow: inset 3px 0 0 0 var(--egu-accent);
}
.admin-style-class-swatch {
  width: var(--egu-control-icon-size-small);
  height: var(--egu-control-icon-size-small);
  flex: 0 0 auto;
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-control);
  background: var(--swatch, transparent);
}
.admin-style-class-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-style-class-note {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
}
.admin-style-layers {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-control-label);
  margin-top: var(--egu-gap-control-label);
}
.admin-style-layer {
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-control);
  padding: var(--egu-gap-control-label);
}
.admin-style-layer.unsupported {
  border-style: dashed;
}
.admin-style-layer-head {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  flex-wrap: wrap;
  margin-bottom: var(--egu-gap-inline);
}
.admin-style-property {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--egu-gap-control-label);
}
.admin-style-property .field {
  margin-bottom: 0;
}
.admin-style-property-expression {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  font-size: var(--egu-font-size-caption);
  padding-bottom: calc(var(--egu-gap-inline) / 2);
}
.admin-style-colour {
  width: calc(var(--egu-gap-group) + var(--egu-gap-inline));
  height: var(--egu-control-height);
  padding: 0;
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-control);
  background: transparent;
}
.admin-style-number {
  max-width: calc(var(--egu-gap-group) * 3);
}
.admin-style-expression {
  font-family: ui-monospace, monospace;
}

/* Compact profile (REQ-PLAT-011) and the 1008-px structural breakpoint --------------------------- */
html[data-layout='compact'] {
  --app-drawer-width: calc(var(--egu-gap-group) * 6);
}
html[data-layout='compact'][data-attributes='open'] {
  --app-attributes-height: min(40vh, calc(var(--egu-gap-group) * 5));
}
html[data-layout='compact'][data-attributes='open'][data-table='open'] {
  --app-attributes-height: min(60vh, calc(var(--egu-gap-group) * 9));
}
html[data-shell='narrow'] .app-bar {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}
html[data-shell='narrow'] .command-toolbar {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}
html[data-shell='narrow'] .settings-column {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}
html[data-shell='narrow'] .settings-header {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}
html[data-shell='narrow'] .pane-body {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}
/* At 320 CSS px nothing interactive may sit outside the viewport (WCAG 2.2 SC 1.4.10, audit F-W-03):
   the brand text collapses to the mark, the account text to the avatar, and every remaining row
   wraps instead of overflowing. The map canvas is the documented two-dimensional exception. */
@media (max-width: 400px) {
  .brand-text {
    display: none;
  }
  .account-text {
    display: none;
  }
  .account-button {
    max-width: none;
    padding: calc(var(--egu-gap-inline) / 2);
  }
  .status-cell {
    display: none;
  }
  .app-bar {
    gap: calc(var(--egu-gap-inline) / 2);
  }
  .settings-row {
    flex-direction: column;
    gap: var(--egu-gap-inline);
  }
  .settings-row-control {
    width: 100%;
  }
  .segmented {
    width: 100%;
  }
  .segment.p-button {
    flex: 1 1 auto;
    padding: 0 var(--egu-gap-inline);
  }
  .admin-style-body {
    grid-template-columns: 1fr;
  }
  .admin-membership {
    grid-template-columns: auto 1fr;
  }
  .admin-role.field-control {
    grid-column: 2;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .admin-dialog .browser-body {
    flex-direction: column;
  }
  .admin-dialog .browser-rail {
    flex: 0 0 auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--egu-outline);
  }
  .admin-dialog .browser-rail-item small {
    display: none;
  }
  .admin-style-body {
    grid-template-columns: 1fr;
  }
  .admin-membership {
    grid-template-columns: auto 1fr;
  }
  .admin-role.field-control {
    grid-column: 2;
    width: 100%;
  }
}

/* --- TASK-171: the shell says that it is working, and says what failed -------------------------
 *
 * One busy contract (REQ-UX-030, REQ-UX-031): PrimeReact 11's indeterminate `ProgressBar` and its
 * `Skeleton`, placed by these three rules and styled by nothing else. No per-surface spinner, no
 * colour, no font size and no spacing step that is not a token of `tokens.css`. */
/* Out of the flow (`position:absolute`), one pixel, clipped away: present for a reader and for a
   heading walk, invisible on screen, and with no negative margin -- a spacing literal the token
   check would (rightly) flag. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.busy {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  margin: var(--egu-gap-inline) 0;
}
.busy-bar {
  flex: 1 1 auto;
  min-width: calc(var(--egu-gap-group) * 2);
}
.busy-label {
  flex: 0 0 auto;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.busy-rows {
  display: grid;
  gap: calc(var(--egu-gap-inline) / 2);
  margin: var(--egu-gap-inline) 0;
}
/* The layer row's own two states: the checkbox shows and hides, the labelled control beside it
   removes (audit W2-06). A hidden row stays in the pane and says so. */
.layer-node-badge {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.layer-node.layer-node-hidden label > span {
  color: var(--egu-text-muted);
}
/* The 2D/3D command's reason, beside it, when the organisation publishes no 3D content
   (ADR-0082 §6.10, audit W2-05). */
.command-note {
  align-self: center;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
/* The measuring tool's readout and the figure it draws (REQ-UX-036). The panel sits in the map
   overlay layer, which is `pointer-events:none`, so its own actions take pointer events back
   (the same rule `.map-overlays button` already restores inside the Rust UI root). The overlay SVG
   never takes a pointer event: a vertex is a click on the canvas underneath it. */
.measurement-panel {
  position: absolute;
  z-index: 10;
  pointer-events: auto;
  left: calc(var(--map-edge-gap) + env(safe-area-inset-left));
  top: var(--map-edge-gap);
  min-width: calc(var(--egu-gap-group) * 6);
  padding: var(--egu-gap-inline) var(--egu-gap-control-label);
  background: var(--egu-surface-raised);
  color: var(--egu-text-primary);
  border: 1px solid var(--egu-outline);
  border-radius: var(--egu-radius-surface);
  box-shadow: var(--egu-elevation-raised);
}
.measurement-panel > p {
  margin: 0;
}
.measurement-heading {
  font-weight: var(--egu-font-weight-body-strong);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.measurement-result {
  font-variant-numeric: tabular-nums;
}
.measurement-actions {
  display: flex;
  gap: var(--egu-gap-inline);
  margin-top: var(--egu-gap-inline);
}
#measure-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
#measure-overlay .measure-figure {
  fill: var(--egu-selection);
  fill-opacity: 0.35;
  stroke: var(--egu-selection);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#measure-overlay .measure-vertex {
  fill: var(--egu-surface-raised);
  stroke: var(--egu-selection);
  stroke-width: 2;
}

/* The in-flight row of the search listbox (audit W2-09). */
.search-busy {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  padding: calc(var(--egu-gap-inline) / 2) var(--egu-gap-control-label);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}

/* ---------------------------------------------------------------------------------------------
   The edit surface (TASK-173). One strip under the command toolbar while a layer is open for
   editing, the unsaved count beside it, and the conflict with its two actions. Every value is a
   token; nothing here writes a colour, a size or a spacing of its own (ADR-0082 decision 1).
   --------------------------------------------------------------------------------------------- */
.edit-surface {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.edit-toolbar {
  border-top: 0;
  flex-wrap: wrap;
}
.edit-dirty {
  margin: 0;
  padding: 0 var(--egu-gap-section) var(--egu-gap-inline);
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.edit-refusal {
  padding: 0 var(--egu-gap-section) var(--egu-gap-inline);
}
.edit-conflict {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-inline);
  padding-top: var(--egu-gap-inline);
}
.edit-conflict > p {
  margin: 0;
}
/* The feature form's editing half: one labelled field per row, the same rhythm as the settings
   column, so a form and a preference page read as one product. */
.feature-form-editor {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-inline);
  padding-top: var(--egu-gap-inline);
  border-top: 1px solid var(--egu-outline-subtle);
}
.feature-form-editor > h3 {
  margin: 0;
  font-size: var(--egu-font-size-subtitle);
  line-height: var(--egu-line-height-subtitle);
}
html[data-shell='narrow'] .edit-dirty {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}
html[data-shell='narrow'] .edit-refusal {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}

/* --- the `Documente` module's face (REQ-UX-034, ADR-0082 §7) ------------------------
   One list-detail skeleton over the whole content area, exactly where the settings page sits: the
   spaces on the left, one folder's items in the middle, the object's own actions on the right. At
   and below the structural breakpoint the three stack into one column, which is what the
   requirement's compact case asks for. Every colour, size, radius and gap is a token. */
.docs-page {
  position: absolute;
  z-index: 20;
  top: var(--app-topbar-height);
  left: var(--app-rail-offset);
  right: 0;
  bottom: var(--app-module-bar-height);
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--egu-surface-base);
}
.docs-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--egu-gap-control-label);
  flex-wrap: wrap;
  padding: var(--egu-gap-control-label) var(--egu-page-margin);
  background: var(--egu-surface-base);
  border-bottom: 1px solid var(--egu-outline-subtle);
}
.docs-title {
  margin: 0;
  font-size: var(--egu-font-size-title);
  line-height: var(--egu-line-height-title);
  font-weight: var(--egu-font-weight-title);
}
.docs-commands {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  flex-wrap: wrap;
}
.docs-page > .busy,
.docs-page > .form-refusal,
.docs-page > .panel-note {
  margin: 0;
  padding: var(--egu-gap-inline) var(--egu-page-margin);
}
.docs-body {
  display: grid;
  gap: var(--egu-gap-section);
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 2fr);
  padding: var(--egu-gap-section) var(--egu-page-margin) var(--egu-gap-group);
  align-items: start;
}
.docs-spaces {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-inline);
}
.docs-space.p-button {
  display: grid;
  grid-template-columns: var(--egu-control-icon-size) minmax(0, 1fr);
  gap: var(--egu-gap-inline);
  align-items: center;
  justify-content: start;
  text-align: left;
  min-height: var(--egu-control-row-min-height);
  padding: var(--egu-gap-inline);
  border: 1px solid var(--egu-outline-subtle);
  border-radius: var(--egu-radius-control);
  color: var(--egu-text-primary);
}
.docs-space.p-button.active {
  background: var(--egu-selection);
  color: var(--egu-text-on-selection);
}
.docs-space.p-button.active .map-icon {
  color: var(--egu-text-on-selection);
}
.docs-space-name {
  grid-column: 2;
  font-size: var(--egu-font-size-body-strong);
  font-weight: var(--egu-font-weight-body-strong);
  line-height: var(--egu-line-height-body-strong);
}
.docs-space-subject,
.docs-space-quota {
  grid-column: 2;
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.docs-space.p-button.active .docs-space-subject,
.docs-space.p-button.active .docs-space-quota {
  color: var(--egu-text-on-selection);
}
.docs-list {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-inline);
  min-width: 0;
}
.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  flex-wrap: wrap;
}
.docs-paging {
  padding: 0;
}
.docs-name-cell {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  flex-wrap: wrap;
}
.docs-detail {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-inline);
  min-width: 0;
  padding: var(--egu-gap-inline);
  border: 1px solid var(--egu-outline-subtle);
  border-radius: var(--egu-radius-surface);
  background: var(--egu-surface-raised);
}
.docs-detail > h3 {
  margin: 0;
  font-size: var(--egu-font-size-subtitle);
  line-height: var(--egu-line-height-subtitle);
  font-weight: var(--egu-font-weight-subtitle);
}
.docs-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--egu-gap-inline);
  margin: 0;
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.docs-facts dt {
  color: var(--egu-text-muted);
}
.docs-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.docs-digest {
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
  overflow-wrap: anywhere;
}
.docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--egu-gap-inline);
}
.docs-form {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-inline);
  padding-top: var(--egu-gap-inline);
  border-top: 1px solid var(--egu-outline-subtle);
}
.docs-progress {
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-inline);
}
.docs-shares,
.docs-versions,
.docs-attachment-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--egu-gap-inline);
}
.docs-shares > li,
.docs-versions > li {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  flex-wrap: wrap;
  min-height: var(--egu-control-row-min-height);
  font-size: var(--egu-font-size-body);
  line-height: var(--egu-line-height-body);
}
.docs-share-subject,
.docs-share-inherited,
.docs-held-badge {
  color: var(--egu-text-muted);
  font-size: var(--egu-font-size-caption);
  line-height: var(--egu-line-height-caption);
}
.docs-attachment {
  display: flex;
  align-items: center;
  gap: var(--egu-gap-inline);
  flex-wrap: wrap;
}
.docs-attachment-link {
  overflow-wrap: anywhere;
  text-align: left;
}
/* Below the structural breakpoint the three panes become one column, in the order a reader meets
   them: the spaces, the list, then the object they picked (REQ-UX-034's compact case). */
@media (max-width: 1100px) {
  .docs-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
html[data-shell='narrow'] .docs-header {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}
html[data-shell='narrow'] .docs-body {
  padding-left: var(--egu-page-margin-narrow);
  padding-right: var(--egu-page-margin-narrow);
}