/* The root takes the layout slot; the viewport fills it and scrolls. A flex
   column, so a root with only a max-height (or a flex share of its parent)
   still hands the viewport a definite size to scroll within.
   Both base rules weigh nothing (`:where`), so a caller's class always wins —
   a pinned pane's `position: sticky`, a popup body's `flex` — whatever order
   the stylesheets load in. */
:where(._root_1ebfs_7) {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

:where(._viewport_1ebfs_15) {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overscroll-behavior: contain;

  /* Its own stacking context: the content's z-indexes (sticky headers and
     columns, a lifted Gantt bar) stay inside it, so the bars — later siblings
     — always paint over them instead of sliding under a frozen pane. */
  isolation: isolate;
}

._viewport_1ebfs_15:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
}

/* The overlay bar: drawn over the content's edge, never beside it. Hidden at
   rest; Base UI marks it `data-scrolling` while the content moves and clears
   it 500ms after it stops — the fade adds the rest of the ~0.9s linger. */
._scrollbar_1ebfs_35 {
  padding: 2px;
  opacity: 0;
  transition: opacity 0.4s ease 0.15s;
  pointer-events: none;
}

/* Base UI positions the bar along the edge; the size across it is ours. */
._scrollbar_1ebfs_35[data-orientation='vertical'] {
  width: 9px;
}

._scrollbar_1ebfs_35[data-orientation='horizontal'] {
  height: 9px;
}

._scrollbar_1ebfs_35[data-scrolling] {
  opacity: 1;
  transition: opacity 0.1s ease;
  pointer-events: auto;
}

._thumb_1ebfs_57 {
  border-radius: var(--r-pill);
  background: var(--g400);
  opacity: 0.6;
}

._thumb_1ebfs_57[data-orientation='vertical'] {
  width: 100%;
}

._thumb_1ebfs_57[data-orientation='horizontal'] {
  height: 100%;
}

._thumb_1ebfs_57:hover {
  opacity: 0.85;
}
/* The mark's own box is the scene: its bottom edge is the waterline the orca
   dives through, so anything past it must stay clipped. */
._root_2r9x5_3 {
  display: block;
  overflow: hidden;
}

._sun_2r9x5_8 {
  fill: var(--logo-orca-sun);
}

/* The orca moves on three nested layers so each axis gets its own physics:
   .orcaX drifts at constant speed, .orcaY rises and falls under gravity, and
   .orca pitches about its own centre. One transform can't do that — it eases
   both axes together, which flattens every parabola into a straight line. */
._orca_2r9x5_13 {
  fill: var(--logo-orca-ink);
  transform-box: fill-box;
  transform-origin: center;
}

._drop_2r9x5_22 {
  fill: var(--logo-orca-ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

._root_2r9x5_3[data-playing='true'] ._orcaX_2r9x5_13 {
  animation: _orcaX_2r9x5_13 var(--run) both;
}

._root_2r9x5_3[data-playing='true'] ._orcaY_2r9x5_13 {
  animation: _orcaY_2r9x5_13 var(--run) both;
}

._root_2r9x5_3[data-playing='true'] ._orca_2r9x5_13 {
  animation: _orcaPitch_2r9x5_1 var(--run) both;
}

/* Duration and delay come per drop from splash.ts (flight time is set by
   how high the drop is thrown). Forwards-only fill: a drop waiting for its
   launch stays hidden instead of holding its stretched launch pose, which
   would poke over the waterline. */
._root_2r9x5_3[data-playing='true'] ._dropX_2r9x5_45 {
  animation-name: _dropDrift_2r9x5_1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

._root_2r9x5_3[data-playing='true'] ._drop_2r9x5_22 {
  animation-name: _dropFlight_2r9x5_1;
  animation-fill-mode: forwards;
}

/* The run (--run = RUN_MS, 1300 ms) under one gravity g = 5000 viewBox
   units/s² (GRAVITY in splash.ts — the spray falls under the same pull):
     0–80     the leap tops out, 16 up (t = √(2·16/g))
     80–521   falls 486 to below the waterline (t = √(2·486/g))
     521–601  under water, out of sight, swims back left
     601–1044 breaches and climbs 490 to the apex, slowing (t = √(2·490/g))
     1044–1133 drops the last 20 into the resting pose (t = √(2·20/g))
     1133–1300 the landing is absorbed and the pose settles
   Rising segments ease out quadratically and falling ones ease in
   quadratically — exactly the curve of constant acceleration. */
@keyframes _orcaY_2r9x5_13 {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1);
  }

  6.15% {
    transform: translateY(-16px);
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33);
  }

  40.08% {
    transform: translateY(470px);
    animation-timing-function: linear;
  }

  46.23% {
    transform: translateY(470px);
    animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1);
  }

  80.31% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33);
  }

  87.15% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  93.85% {
    transform: translateY(8px);
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: translateY(0);
  }
}

/* Constant horizontal speed through the dive and the breach; it only eases
   off as the orca comes down into its resting place. */
@keyframes _orcaX_2r9x5_13 {
  0% {
    transform: translateX(0);
    animation-timing-function: linear;
  }

  40.08% {
    transform: translateX(120px);
    animation-timing-function: linear;
  }

  46.23% {
    transform: translateX(-170px);
    animation-timing-function: cubic-bezier(0.5, 0.5, 0.75, 1);
  }

  87.15%,
  100% {
    transform: translateX(0);
  }
}

/* The nose follows the arc: it tips over more and more as the orca falls,
   points up as it breaches, and levels off as the climb slows at the apex. */
@keyframes _orcaPitch_2r9x5_1 {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33);
  }

  40.08% {
    transform: rotate(80deg);
    animation-timing-function: linear;
  }

  46.23% {
    transform: rotate(-55deg);
    animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1);
  }

  80.31% {
    transform: rotate(5deg);
    animation-timing-function: ease-in-out;
  }

  93.85% {
    transform: rotate(-1deg);
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes _dropDrift_2r9x5_1 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--drift));
  }
}

/* A thrown drop: decelerates to the top of its arc and accelerates back down
   (quadratic out, then in). It is stretched along its motion while fast and
   rounds out at the top, where it momentarily stops. */
@keyframes _dropFlight_2r9x5_1 {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.7, 1.5);
    animation-timing-function: cubic-bezier(0.33, 0.67, 0.67, 1);
  }

  50% {
    opacity: 1;
    transform: translateY(var(--rise)) scale(1);
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0.33);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(0.75, 1.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._root_2r9x5_3[data-playing='true'] ._orcaX_2r9x5_13,
  ._root_2r9x5_3[data-playing='true'] ._orcaY_2r9x5_13,
  ._root_2r9x5_3[data-playing='true'] ._orca_2r9x5_13,
  ._root_2r9x5_3[data-playing='true'] ._dropX_2r9x5_45,
  ._root_2r9x5_3[data-playing='true'] ._drop_2r9x5_22 {
    animation: none;
  }
}
/* Shared MOCK pill — same visual treatment in every card. The
   per-field variant adds left spacing + inline-block / vertical
   alignment so it can sit after an inline label without nudging
   the baseline. */

._pill_1ia68_6 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--dashboard-mock-bg);
  border-radius: var(--r-pill);
}

._badge_1ia68_17 {
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
}
._leaf_e57kb_1 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  /* One line since the subtitles went: lighter than the group headers, on the group's guide line. */
  padding: 8px 10px;
  color: var(--sidebar-text);
  text-decoration: none;
  cursor: pointer;

  /* Its own stacking context: the band below stays inside it, under the icon and label. */
  isolation: isolate;
}

/*
 * The hover and active band starts at the active mark on the guide line (9px
 * left: the group's 8px padding + the 1px line) and runs out through the
 * sidebar's 12px right padding to its edge, like the group header's.
 */
._leaf_e57kb_1::after {
  content: '';
  position: absolute;
  inset: 0 -12px 0 -9px;
  z-index: var(--z-base);
  background: transparent;
  transition: background 0.15s ease;
}

._leaf_e57kb_1:hover::after {
  background: var(--sidebar-hover-bg);
}

._leafActive_e57kb_35 {
  color: var(--sidebar-accent);
}

._leafActive_e57kb_35::after,
._leafActive_e57kb_35:hover::after {
  background: var(--sidebar-active-bg);
}

._leafActive_e57kb_35 ._title_e57kb_44 {
  font-weight: 600;
}

/* The active mark sits ON the group's guide line (the parent's 8px padding + the 1px line). */
._leafActive_e57kb_35::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: var(--r-sm);
  background: var(--sidebar-accent);
}

._icon_e57kb_60 {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex-shrink: 0;
}

/* Over the band. */
._icon_e57kb_60,
._text_e57kb_72 {
  position: relative;
  z-index: var(--z-raised-1);
}

/* Quieter than the group headers' icons until the item is active. */
._icon_e57kb_60 svg {
  opacity: 0.85;
}

._leafActive_e57kb_35 ._icon_e57kb_60 svg {
  opacity: 1;
}

._text_e57kb_72 {
  display: flex;
  min-width: 0;
  flex: 1;
}

._titleRow_e57kb_92 {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

._title_e57kb_44 {
  flex: 1;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._leafDisabled_e57kb_112 {
  opacity: 0.45;
  cursor: default;
}

._leafDisabled_e57kb_112:hover::after {
  background: transparent;
}
._group_2sl0g_1 {
  display: flex;
  flex-direction: column;
}

._header_2sl0g_6 {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;

  /* Full width: out through the sidebar's 12px side padding, so its band meets both edges. */
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 9px 22px;
  color: var(--sidebar-text);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}

._header_2sl0g_6:hover {
  background: var(--sidebar-hover-bg);
}

._headerActive_2sl0g_33 {
  color: var(--sidebar-accent);
  background: var(--sidebar-group-active-bg);
}

._headerActive_2sl0g_33 ._icon_2sl0g_38 {
  color: var(--sidebar-accent);
}

._headerExpanded_2sl0g_42 {
  color: var(--sidebar-text);
}

._headerExpanded_2sl0g_42._headerActive_2sl0g_33 {
  color: var(--sidebar-accent);
}

._icon_2sl0g_38 {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

._label_2sl0g_59 {
  flex: 1;
  text-align: left;
}

._chevron_2sl0g_64 {
  transition: transform 0.18s ease;
  color: var(--sidebar-chevron);
}

._chevronOpen_2sl0g_69 {
  transform: rotate(-180deg);
  color: var(--sidebar-chevron-open);
}

._children_2sl0g_74 {
  display: flex;
  flex-direction: column;
}

._childrenInner_2sl0g_79 {
  display: flex;
  flex-direction: column;
  gap: 2px;

  /* The guide line drops from the centre of the group's icon (10px padding + half its 24px box), so the items read as that group's children. */
  margin-left: 21px;
  padding: 2px 0 4px 8px;
  border-left: 1px solid var(--sidebar-border);
}

/* ---------- Collapsed sidebar mode ---------- */

._groupCollapsed_2sl0g_92 ._header_2sl0g_6 {
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 9px;
  border-radius: var(--r-2xl);
  gap: 0;
}
._sidebar_11mma_1 {
  background: var(--sidebar-background);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w, 260px);
  z-index: var(--z-sidebar);
  overflow: hidden;
  transition: width 0.2s ease;
}

/* The scroller inside the fixed shell: the shell keeps its frame, this holds
   the padded column that scrolls. */
._sidebarScroll_11mma_19 {
  flex: 1 1 auto;
}

._sidebarBody_11mma_23 {
  display: flex;
  flex-direction: column;
  padding: 18px 12px 16px;
  gap: 14px;
}

._sidebarCollapsed_11mma_30 {
  padding: 18px 8px 16px;
}

._sidebarHeader_11mma_34 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 6px;
}

._sidebarCollapsed_11mma_30 ._sidebarHeader_11mma_34 {
  padding: 0 0 6px;
  justify-content: center;
}

._brand_11mma_46 {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

._sidebarCollapsed_11mma_30 ._brand_11mma_46 {
  cursor: pointer;
  transition: background 0.15s ease;
}

._sidebarCollapsed_11mma_30 ._brand_11mma_46:hover {
  background: var(--sidebar-hover-bg);
}

._logo_11mma_69 {
  width: 36px;
  height: 36px;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

._brandText_11mma_76 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  margin-left: 4px;
}

._brandProject_11mma_85 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sidebar-active-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._brandSuperapp_11mma_95 {
  font-size: var(--fs-xs);
  font-weight: 300;
  color: var(--sidebar-accent);
  line-height: 0.9;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

._brandChevron_11mma_104 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-text);
  opacity: 0;
  transform: translateX(-6px) scale(0.7);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

._sidebarCollapsed_11mma_30 ._brand_11mma_46:hover ._logo_11mma_69 {
  opacity: 0;
  transform: scale(0.6);
}

._sidebarCollapsed_11mma_30 ._brand_11mma_46:hover ._brandChevron_11mma_104 {
  opacity: 1;
  transform: translateX(0) scale(1);
}

._nav_11mma_127 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

._collapseToggle_11mma_134 {
  appearance: none;
  border: 0;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-toggle);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.15s ease, color 0.15s ease;
}

._collapseToggle_11mma_134:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
}

/* Need help? sits apart from the product groups, pinned to the bottom. */
._helpSection_11mma_157 {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--sidebar-border);
}

/* Narrow viewport, expanded: the sidebar floats over the content (which stays
   laid out beside the collapsed rail) above a dimmed backdrop, on its own
   layer above the TopBar (which shares --z-sidebar). */
._sidebarOverlay_11mma_166 {
  width: 240px;
  z-index: var(--z-sidebar-overlay);
  box-shadow: var(--shadow-drawer);
}

._backdrop_11mma_172 {
  position: fixed;
  inset: 0;
  z-index: var(--z-sidebar-overlay);
  background: var(--modal-backdrop);
}
/* The trigger's neutral defaults — zero specificity (`:where`), so whatever
   the trigger renders (a KebabButton, a toolbar button) styles itself without
   racing this file's load order. */
:where(._trigger_1w8e0_4) {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

._positioner_1w8e0_14 {
  z-index: var(--z-popover);
  outline: none;
}

._popup_1w8e0_19 {
  background: var(--color-surface);
  color: var(--navy);
  border-radius: var(--r-3xl);
  border: 1px solid var(--navy-soft);
  box-shadow: 0 14px 36px rgb(17 24 39 / 18%);
  padding: 6px;
  outline: none;
  min-width: 200px;
}

._item_1w8e0_30 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-xl);
  color: var(--navy);
  font: 500 var(--fs-sm) var(--f-body);
  cursor: pointer;
  text-align: left;
  outline: none;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

._item_1w8e0_30[data-highlighted] {
  background: var(--g50);
}

._item_1w8e0_30[data-popup-open] {
  background: var(--g50);
}

._item_1w8e0_30[data-disabled] {
  color: var(--g400);
  cursor: not-allowed;
}

._separator_1w8e0_59 {
  height: 1px;
  background: var(--separator);
  margin: 4px 8px;
}
._trigger_1mqb8_1 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--navy);
  font: inherit;
  transition: background 0.15s;

  /* Lets the button shrink below its name, so the name can ellipsize. */
  min-width: 0;
}

._trigger_1mqb8_1:hover {
  background: var(--g100);
}

._buildingIcon_1mqb8_22 {
  color: var(--color-success);
  flex-shrink: 0;
}

._chev_1mqb8_27 {
  color: var(--g500);
  flex-shrink: 0;
}

._projectName_1mqb8_32 {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--navy);
  letter-spacing: -0.005em;

  /* On a crowded breadcrumb the name ellipsizes, like the schedule picker's,
     rather than wrapping the top bar onto two lines. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._placeholder_1mqb8_45 {
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--g500);
  padding: 4px 6px;
}

._syncLink_1mqb8_52 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--navy);
  text-decoration: none;
  transition: background 0.15s;
}

._syncLink_1mqb8_52:hover {
  background: var(--g100);
}

._reconnect_1mqb8_69 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--color-warn);
  color: var(--color-warn);
  padding: 4px 10px;
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

._reconnect_1mqb8_69:hover {
  background: var(--color-warn-bg);
}
._trigger_1dere_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 7px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--g700);
  cursor: pointer;
}

._trigger_1dere_1:hover {
  border-color: var(--g400);
}

._trigger_1dere_1:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

/* Breadcrumb variant — borderless, to match the ProjectSelector trigger when the
   picker lives in the TopBar breadcrumb. */
._triggerBreadcrumb_1dere_27 {
  gap: 10px;
  max-width: 260px;
  padding: 4px 6px;
  font-size: var(--fs-sm);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--navy);

  /* Shares a crowded breadcrumb with the project picker: both shrink and
     ellipsize instead of one crumb taking all the room. */
  min-width: 0;
}

._triggerBreadcrumb_1dere_27:hover {
  background: var(--g100);
}

._triggerBreadcrumb_1dere_27 ._icon_1dere_46 {
  color: var(--color-success);
}

._icon_1dere_46 {
  color: var(--g500);
  flex: none;
}

._chevron_1dere_55 {
  color: var(--g500);
  flex: none;
  margin-left: auto;
}

._triggerLabel_1dere_61 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Widen the shared popup so the two-line import rows breathe. */
._popup_1dere_68 {
  min-width: 252px;
}

._sectionLabel_1dere_72 {
  padding: 8px 12px 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--g500);
}

._check_1dere_81 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex: none;
  color: var(--info);
}

._scheduleName_1dere_90 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._logo_1dere_96 {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

._importText_1dere_103 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._vendor_1dere_110 {
  font-weight: 600;
}

._format_1dere_114 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._createGlyph_1dere_119 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex: none;
  color: var(--info);
}

._createLabel_1dere_128 {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._hiddenInput_1dere_135 {
  display: none;
}
._backdrop_12wtl_1 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: var(--z-dialog);
}

._panel_12wtl_8 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  background: var(--color-surface);
  border-radius: var(--r-xl);
  padding: 24px;
  max-width: calc(100vw - 48px);

  /* Bounded by the viewport. The panel is centred with a translate, so without
     this a tall one grows past BOTH edges at once — its title and its actions off
     screen, and nothing to scroll, because the overflow is outside the page. */
  max-height: calc(100vh - 48px);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Size variants */
._sm_12wtl_30 { width: 360px; }
._md_12wtl_31 { width: 480px; }
._lg_12wtl_32 { width: 560px; }

._title_12wtl_34 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--g800);
  margin: 0;
}

._description_12wtl_41 {
  font-size: var(--fs-sm);
  color: var(--g600);
  margin: 0;
  line-height: 1.5;
}

/* Scroll body — bordered top and bottom so the region reads as bounded. It takes
   whatever height the title and footer leave and scrolls inside it, so those two
   stay put however long the content gets. `min-height: 0` is what lets a flex
   child shrink below its content at all. */
._body_12wtl_52 {
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}

._bodyContent_12wtl_59 {
  padding: 12px 0;
}

/* the bottom rule separates the body from a footer; without one it is just a stray line */
._bodyLast_12wtl_64 {
  border-bottom: none;
}

._bodyContentLast_12wtl_68 {
  padding-bottom: 0;
}

/* Footer action row — sits below the body separator. */
._footer_12wtl_73 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
._button_1cwf3_1 {
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

._button_1cwf3_1:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._primary_1cwf3_16 {
  background: var(--navy);
  color: var(--color-surface);
  border: none;
}

._primary_1cwf3_16:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

._ghost_1cwf3_27 {
  background: transparent;
  color: var(--g600);
  border: 1px solid var(--g200);
  font-weight: 500;
}

._ghost_1cwf3_27:hover:not(:disabled) {
  background: var(--g50);
  border-color: var(--g300);
}

/* Promoted from the Scheduler toolbar's hand-rolled Add task button, so the
   drawer's step and the toolbar are one button, not two lookalikes. Its
   rounder corner is restated as `.sized.accent`, since `.sized` sets its own. */
._accent_1cwf3_41 {
  background: var(--info);
  color: var(--color-surface);
  border: 1px solid var(--info);
  border-radius: var(--r-xl);
}

._accent_1cwf3_41:hover:not(:disabled) {
  filter: brightness(0.95);
}

/* ---- promoted variants (from the Project Merge PmButton) ------------------ */
._secondary_1cwf3_54 {
  background: var(--color-surface);
  color: var(--navy);
  border: 1px solid var(--g200);
}

._secondary_1cwf3_54:hover:not(:disabled) {
  border-color: var(--navy);
}

._danger_1cwf3_64 {
  background: var(--color-surface);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

._danger_1cwf3_64:hover:not(:disabled) {
  background: var(--color-error-bg);
}

._dangerSolid_1cwf3_74 {
  background: var(--color-error);
  color: var(--white);
  border: 1px solid transparent;
}

._dangerSolid_1cwf3_74:hover:not(:disabled) {
  background: var(--pm-danger-solid-hover);
}

/* ---- sized layout: opt-in fixed-height flex row (32 / 40px) --------------- *
 * Applied only when a `size` prop is passed, so legacy padding-sized consumers
 * (ConnectProviderPage) render exactly as before. `md` (default sized) = 40px. */
._sized_1cwf3_41 {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

._sized_1cwf3_41 svg {
  flex-shrink: 0;
}

._sized_1cwf3_41:active:not(:disabled) {
  transform: translateY(1px);
}

._sm_1cwf3_105 {
  height: 32px;
  font-size: var(--fs-xs);
  padding: 0 12px;
}

._block_1cwf3_111 {
  width: 100%;
}

._sized_1cwf3_41._accent_1cwf3_41 {
  border-radius: var(--r-xl);
}
._form_16kdq_1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._label_16kdq_7 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
}

._input_16kdq_13 {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--g800);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

._input_16kdq_13:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
  border-color: var(--info);
}

._input_16kdq_13:disabled {
  background: var(--g100);
  color: var(--g500);
}

/* Push the action buttons to the right within the Modal footer row. */
._spacer_16kdq_35 {
  flex: 1;
}
/* A compact row: the item's visual, what is waiting, and when. */
._row_qjm82_2 {
  gap: 8px;
  padding: 6px 10px;
  align-items: flex-start;
}

/* Whatever the feature puts in front of its item, held to one size. */
._visual_qjm82_9 {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Not seen yet: a dot on the visual's corner. */
._unreadDot_qjm82_20 {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background: var(--amber);
  box-shadow: 0 0 0 1.5px var(--color-surface);
}

._content_qjm82_31 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 4px;
}

._text_qjm82_40,
._detail_qjm82_41 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._text_qjm82_40 {
  font-size: var(--fs-xs);
}

._detail_qjm82_41 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}

/* When, on the viewer's clock; never squeezed by a long text. */
._time_qjm82_57 {
  flex-shrink: 0;
  padding-top: 5px;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._dismiss_qjm82_64 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: var(--r-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--g400);
}

._dismiss_qjm82_64:hover {
  background: var(--g100);
  color: var(--g700);
}
/* Under the bell, to its right edge, dressed as the menu's popup. */
._peek_1nrxt_2 {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  padding: 6px;
  background: var(--color-surface);
  color: var(--navy);
  border: 1px solid var(--navy-soft);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-popover);
  animation: _peek-in_1nrxt_1 0.15s ease-out;
}

@keyframes _peek-in_1nrxt_1 {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* The menu's row, as a button: the same body, the same measure. */
._row_1nrxt_24 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--r-xl);
  text-align: left;
  color: inherit;
  font: inherit;
}

._row_1nrxt_24:hover {
  background: var(--g100);
}

@media (prefers-reduced-motion: reduce) {
  ._peek_1nrxt_2 {
    animation: none;
  }
}
._bell_1rcoi_1 {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-2xl);
  color: var(--sidebar-text);
  transition: background 0.15s ease;
}

._bell_1rcoi_1:hover,
._bell_1rcoi_1[data-popup-open] {
  background: var(--sidebar-hover-bg);
}

._bellIcon_1rcoi_15 {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The bell itself, apart from the badge, so only the bell swings. */
._glyph_1rcoi_25 {
  display: inline-flex;
  transform-origin: 50% 0;
}

/* One rock from side to side, pivoting at the top, settling as a bell does. */
._swinging_1rcoi_31 {
  animation: _swing_1rcoi_31 0.6s ease-in-out;
}

@keyframes _swing_1rcoi_31 {
  0% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  35% { transform: rotate(-11deg); }
  55% { transform: rotate(7deg); }
  75% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

/* No swing for anyone whose system asks for less motion; the class then simply stays. */
@media (prefers-reduced-motion: reduce) {
  ._swinging_1rcoi_31 {
    animation: none;
  }
}

._badge_1rcoi_51 {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

._popup_1rcoi_68 {
  width: 320px;
}

._items_1rcoi_72 {
  max-height: min(60vh, 420px);
}

._empty_1rcoi_76 {
  padding: 16px 12px;
  font: 500 var(--fs-xs) var(--f-body);
  color: var(--g500);
  text-align: center;
}

/* Today / Yesterday / Earlier, over the rows of that day. */
._day_1rcoi_84 {
  padding: 8px 10px 2px;
  font: 600 var(--fs-2xs) var(--f-body);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
._avatar_6qfv2_1 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-circle);
  font-weight: 700;
  line-height: 1;
  font-family: var(--f-body);
  cursor: default;
  user-select: none;
}

._neutral_6qfv2_14 {
  background: var(--g100);
  color: var(--g700);
}

._solid_6qfv2_19 {
  background: var(--sidebar-text);
  color: var(--color-surface);
  font-weight: 600;
}

._tinted_6qfv2_25 {
  background: color-mix(in srgb, var(--avatar-color) 14%, var(--color-surface));
  color: color-mix(in srgb, var(--avatar-color) 78%, var(--navy));
}
/* Stands in for an avatar, at the avatar's size, when there is nobody to show. */
._icon_1hpg3_2 {
  width: 24px;
  height: 24px;
  border-radius: var(--r-circle);
  background: var(--g50);
  color: var(--g500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* An alert's group icon, at the size of the chat avatar beside it. */
._icon_iedsc_2 {
  width: 24px;
  height: 24px;
  border-radius: var(--r-circle);
  background: var(--g50);
  color: var(--g600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* A distress button or a restricted-area entry: the one group that is urgent. */
._safety_iedsc_14 {
  background: var(--alert-safety-bg);
  color: var(--red);
}
/* Where the peek hangs from: the bell, as a box of its own. */
._anchor_1phtv_2 {
  position: relative;
  display: inline-flex;
}
._trigger_mfhwf_1 {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--r-2xl);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease;
}

._trigger_mfhwf_1:hover,
._trigger_mfhwf_1[data-popup-open] {
  background: var(--sidebar-hover-bg);
}

._triggerCollapsed_mfhwf_21 {
  justify-content: center;
  padding: 6px;
}


._meta_mfhwf_27 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

._name_mfhwf_35 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._org_mfhwf_46 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sidebar-subtext);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Popup ---------- */

._popup_mfhwf_59 {
  width: 300px;
  padding: 6px;
}

._popoverHeader_mfhwf_64 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 6px;
}

._avatarLg_mfhwf_73 {
  width: 38px;
  height: 38px;
  border-radius: var(--r-circle);
  background: var(--g100);
  color: var(--g600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

._identity_mfhwf_84 { min-width: 0; flex: 1; }

._identityRow_mfhwf_86 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

._identityName_mfhwf_93 {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._identityEmail_mfhwf_99 {
  font-size: var(--fs-xs);
  color: var(--g500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._menuIcon_mfhwf_107 {
  color: var(--g500);
  flex-shrink: 0;
  display: inline-flex;
}

._menuLabel_mfhwf_113 { flex: 1; }

._langSelect_mfhwf_115 {
  border: 1px solid var(--navy-soft);
  background: var(--color-surface);
  border-radius: var(--r-xl);
  padding: 3px 8px 3px 10px;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._langOptionActive_mfhwf_130 {
  background: var(--blue-tint);
  color: var(--blue);
}

._langOptionActive_mfhwf_130[data-highlighted] {
  background: var(--blue-tint-soft);
}
._topbar_1d2lb_1 {
  position: fixed;
  top: 0;
  left: var(--sidebar-w, 260px);
  right: 0;
  height: var(--topbar-h, 56px);
  background: var(--sidebar-background);
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  padding: 0 var(--s-5);
  gap: var(--s-4);
  z-index: var(--z-topbar);
  transition: left 0.2s ease;
}

/* Portfolio button */
._portfolioBtn_1d2lb_18 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--sidebar-text);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

._portfolioBtn_1d2lb_18:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}

._portfolioLabel_1d2lb_43 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-top: 1px;
}

/* Vertical divider */
._divider_1d2lb_51 {
  display: block;
  width: 1px;
  height: 18px;
  background: var(--sidebar-border);
  flex-shrink: 0;
}

/* Breadcrumb */
._breadcrumb_1d2lb_60 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sidebar-chevron);
  min-width: 0;

  /* On a narrow bar the crumbs clip (the page name ellipsizes first) instead of
     running under the actions. Both pickers portal their menus, so nothing
     inside needs to escape this box. */
  overflow: hidden;
}

._pageName_1d2lb_73 {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--sidebar-active-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right actions */
._actions_1d2lb_83 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Constrain the sidebar bell/user-menu buttons to fit the topbar */
._bellWrap_1d2lb_92 > button {
  padding: 6px 8px;
  border-radius: var(--r-xl);
}

._userMenuWrap_1d2lb_97 > button {
  padding: 4px;
  border-radius: var(--r-xl);
  width: auto;
}

/* Reconnecting pill */
._reconnectingPill_1d2lb_104 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-right: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-warn);
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn);
  border-radius: var(--r-pill);
}

._reconnectingDot_1d2lb_118 {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--color-warn);
  animation: _pulse_1d2lb_1 1.2s infinite ease-in-out;
}

@keyframes _pulse_1d2lb_1 {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Provider (re)connect prompt — shown next to notifications when a provider
   session lapses (e.g. expired Genba). Amber severity, matching the banner. */
._reconnectBtn_1d2lb_133 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-right: 4px;
  border-radius: var(--r-sm);
  border: 1px solid var(--amber);
  background: var(--sev-high-bg);
  color: var(--sev-high-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

._reconnectBtn_1d2lb_133:hover {
  filter: brightness(0.97);
}

/* Trusstor reconnect reads as a black chip (white text) to set it apart from
   the amber Genba prompt when both are shown. */
._reconnectBtn_1d2lb_133[data-provider='trusstor'] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--color-surface);
}

/* Narrow viewport (set by useSidebarCollapse — the shell's one breakpoint):
   the portfolio and provider buttons drop to icon-only — both carry an
   aria-label — to leave the breadcrumb room. */
body[data-viewport='narrow'] ._portfolioLabel_1d2lb_43,
body[data-viewport='narrow'] ._reconnectLabel_1d2lb_165 {
  display: none;
}
/* The one page-header look: the same title and subtitle on every page. */
._header_1o8mz_2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  min-width: 0;
}

._text_1o8mz_10 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

._titleRow_1o8mz_17 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

._title_1o8mz_17 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy);
}

._subtitle_1o8mz_34 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--g500);
}

._bar_1o8mz_42 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* Titles off: only the badge and the controls are left, on the right. */
._titlesHidden_1o8mz_50 {
  justify-content: flex-end;
}
._wrap_17mqa_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 560px;
}

._kicker_17mqa_8 {
  font: 600 10px/1 var(--f-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--g500);
}

._body_17mqa_15 { color: var(--g600); font-size: var(--fs-sm); line-height: 1.5; }
/*
 * Every page's frame. The shell's content area has no padding of its own:
 * the gutters live here, so no page has to cancel them.
 */
._page_81il4_5 {
  --page-gutter: 28px;

  min-width: 0;
}

body[data-viewport='narrow'] ._page_81il4_5 {
  --page-gutter: 16px;
}

/* A flow page: a padded column that scrolls with the app. */
._flow_81il4_16 {
  padding: var(--s-5) var(--page-gutter) 40px;
}

._flow_81il4_16._withHead_81il4_20 ._head_81il4_20 {
  margin-bottom: var(--s-5);
}

/* A fill page: exactly the content area's height; the body owns the scroll. */
._fill_81il4_25 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

._fill_81il4_25 ._head_81il4_20 {
  flex: 0 0 auto;

  /* The 8px below leaves room for a toolbar that opens the body; an inset body adds the rest of the 20px. */
  padding: var(--s-5) var(--page-gutter) var(--s-2);
}

._fill_81il4_25 ._body_81il4_39 {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* An inset fill body: the page gutters, 20px below the header (or the top). */
._inset_81il4_48 ._body_81il4_39 {
  padding: var(--s-5) var(--page-gutter) var(--s-6);
}

._inset_81il4_48._withHead_81il4_20 ._body_81il4_39 {
  padding-top: var(--s-3);
}
/* A header slot a page portals into: no box of its own, so what it holds lays out as the header's own children. */
._slot_9jfc9_2 {
  display: contents;
}
._root_10ddp_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  padding: 32px;
  color: var(--g600);
  font-size: var(--fs-sm);
  text-align: center;
}

._root_10ddp_1._compact_10ddp_14 {
  min-height: 0;
  padding: var(--s-2) var(--s-3);
}
._dot_72wmi_1 { color: var(--text-secondary); opacity: 0.6; margin: 0 var(--s-2); }
._synced_72wmi_2 { font-style: italic; }

/* Refresh control next to "Last synced …" — a quiet
   icon button that spins while a sync is in flight. */
._refresh_72wmi_6 {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--s-2);
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--r-md);
  line-height: 0;
}
._refresh_72wmi_6:hover:not(:disabled) { color: var(--text-primary); }
._refresh_72wmi_6:disabled { cursor: default; opacity: 0.6; }

._spinning_72wmi_23 svg { animation: _portfolio-sync-spin_72wmi_1 0.8s linear infinite; }

@keyframes _portfolio-sync-spin_72wmi_1 {
  to { transform: rotate(360deg); }
}
._tile_dx5y6_1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--r-3xl);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
}
._label_dx5y6_10    { font-size: var(--fs-xs); color: var(--text-secondary, #6b7280); }
._valueRow_dx5y6_11 { display: flex; align-items: baseline; gap: 4px; }
._value_dx5y6_11    { font-size: var(--fs-3xl); font-weight: 700; color: var(--text-primary, #111827); }
._unit_dx5y6_13     { font-size: var(--fs-sm); color: var(--text-secondary, #6b7280); }

._subline_dx5y6_15,
._delta_dx5y6_16    { font-size: var(--fs-xs); color: var(--text-secondary, #6b7280); }

._tile_dx5y6_1[data-direction='down'] ._value_dx5y6_11 { color: var(--accent-warning, #c0392b); }
._tile_dx5y6_1[data-direction='up']   ._value_dx5y6_11 { color: var(--accent-success, #1f8a3f); }
._strip_10zsi_1 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
._wrap_1qo4i_1      { display: inline-flex; gap: 6px; align-items: center; }

/* Each state sets its tint as --badge-bg, so the photo panel can lay the same
   tint over an opaque white base (a bare 10% tint vanishes over a photo). */
._lifecycle_1qo4i_5,
._schedule_1qo4i_6  { --badge-bg: var(--surface-chip); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--r-pill); background: var(--badge-bg); color: var(--text-primary); }
._lifecycle_1qo4i_5[data-state='active']   { --badge-bg: var(--chip-success-tint);       color: var(--accent-success); }
._schedule_1qo4i_6[data-state='onTrack']   { --badge-bg: var(--chip-success-tint);       color: var(--accent-success); }
._schedule_1qo4i_6[data-state='minorDelay']{ --badge-bg: var(--chip-attention-amber-bg); color: var(--amber); }
._schedule_1qo4i_6[data-state='late']      { --badge-bg: var(--chip-warning-tint);       color: var(--accent-warning); }
._schedule_1qo4i_6[data-state='noData']    { --badge-bg: var(--chip-neutral-tint);       color: var(--text-secondary); }

._onImage_1qo4i_13 ._lifecycle_1qo4i_5,
._onImage_1qo4i_13 ._schedule_1qo4i_6 { background-color: var(--surface-card); background-image: linear-gradient(var(--badge-bg), var(--badge-bg)); }
._positioner_1yrs0_1 {
  /* Above all overlays (incl. the fullscreen floor-plan modal at --z-popover)
     so the tooltip is never hidden behind the layer it's anchored within. */
  z-index: var(--z-tooltip);

  /* Non-interactive hint (already `disableHoverablePopup`): never capture
     pointer events, so the popup can't block hovering an element it visually
     overlaps — e.g. a full-size popup covering tightly-packed, scaled-down
     floor-plan chips and swallowing their hover. */
  pointer-events: none;
}

/* Marker variant — the navy popup family used when the trigger is a visual data
   element (portfolio milestone diamonds and progress bar, the inventory reorder
   tick, a clipped row name) rather than an icon or label needing a hint.
   Single-line by default, which is what a short label wants. */
._popupMarker_1yrs0_17 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-popover);
  transform-origin: var(--transform-origin);
  transition-property: opacity, transform;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

._popupMarker_1yrs0_17[data-starting-style] { opacity: 0; transform: scale(0.94) translateY(3px); }
._popupMarker_1yrs0_17[data-ending-style]   { opacity: 0; transform: scale(0.96); }

/* Bare popup: the content brings its own surface. */
._popupCard_1yrs0_39 {
  transition: opacity 0.12s ease;
}

._popupCard_1yrs0_39[data-starting-style],
._popupCard_1yrs0_39[data-ending-style] {
  opacity: 0;
}

/* Opt-in wrapping, for a marker popup carrying sentences rather than a label.
   Declared after `.popupMarker` so it wins the `white-space` tie. */
._popupWrap_1yrs0_50 {
  max-width: 320px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

/* Muted supporting line under a TooltipContent title. Explicitly block:
   the marker popup stacks children via its own flex column, but the hint
   variant's `.popup` is a plain block — inline spans there run the title
   and every line together into one unbroken sentence. */
._contentSub_1yrs0_61 {
  display: block;
  font-weight: 400;
  opacity: 0.72;
}

/* `divided`: a supporting line that starts a new group. */
._contentGroup_1yrs0_68 {
  margin-top: var(--s-1);
  padding-top: var(--s-1);
  border-top: 1px solid var(--g500);
}

/* Matches trusstor_dashboard's TrusstorTooltip "cleanStyle": grey600 fill,
   white text, 4px radius, soft shadow, no arrow. */
._popup_1yrs0_17 {
  max-width: 260px;
  width: max-content;
  padding: 4px 8px;
  border-radius: var(--r-md);
  background: var(--g600);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.35;
  white-space: pre-line;
  box-shadow: var(--shadow-tooltip);
}
/* Frosted block on the card's photo panel: white text over a translucent,
   blurred pane, so it reads over any photo or the fallback gradient. */
._card_a6uf1_3 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid var(--portfolio-photo-frost-border);
  border-radius: var(--r-2xl);
  background: var(--portfolio-photo-frost-bg);
  backdrop-filter: blur(6px);
  color: var(--white);
}

._label_a6uf1_15  { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
._person_a6uf1_16 { display: flex; flex-direction: column; min-width: 0; }
._name_a6uf1_17   { overflow: hidden; font-size: var(--fs-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
._phone_a6uf1_18  { font-size: var(--fs-2xs); color: var(--white); text-decoration: none; opacity: 0.9; }
._phone_a6uf1_18:hover { text-decoration: underline; }
._more_a6uf1_20   { align-self: flex-start; font-size: var(--fs-2xs); font-weight: 600; opacity: 0.85; cursor: default; }
/* Layers, bottom to top: fallback gradient (the panel's own background) +
   faint building → photo (fades in once loaded) → scrim → content. */
._panel_x7uiu_3 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  overflow: hidden;
  background: var(--portfolio-photo-fallback);
  color: var(--white);
}

._fallbackIcon_x7uiu_16 {
  position: absolute;
  top: 38px;
  right: 14px;
  display: inline-flex;
  opacity: 0.16;
}

._photo_x7uiu_24 {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  animation: _photo-fade-in_x7uiu_1 0.3s ease-out;
}

@keyframes _photo-fade-in_x7uiu_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

._scrim_x7uiu_37  { position: absolute; inset: 0; background: var(--portfolio-photo-scrim); }

._top_x7uiu_39,
._bottom_x7uiu_40 { position: relative; }

._top_x7uiu_39    { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
._bottom_x7uiu_40 { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

._star_x7uiu_45 {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--r-circle);
  background: var(--portfolio-photo-star-bg);
  backdrop-filter: blur(4px);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--white);
}

._star_x7uiu_45:hover                 { background: var(--portfolio-photo-star-bg-hover); }
._star_x7uiu_45[data-favorite='true'] { color: var(--amber); }

._identity_x7uiu_66 { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
._name_x7uiu_67     { font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; text-shadow: var(--portfolio-photo-text-shadow); overflow-wrap: anywhere; }

._location_x7uiu_69 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: var(--fs-xs);
  color: var(--white);
  text-decoration: none;
  opacity: 0.92;
}

._location_x7uiu_69:hover { text-decoration: underline; opacity: 1; }

/* A very narrow card turns the panel into a banner across its top, with the
   manager beside the name rather than under it. */
@container portfolio-card (width < 640px) {
  ._panel_x7uiu_3   { min-height: 140px; }
  ._bottom_x7uiu_40  { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  ._manager_x7uiu_87 { flex: none; }
}
._head_4gs2x_1  { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
._title_4gs2x_2 { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g600); }
._metric_xteok_1  { min-width: 0; }
._head_xteok_2    { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: var(--fs-2xs); color: var(--g500); }
._label_xteok_3   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
._figures_xteok_4 { flex: none; white-space: nowrap; }
._value_xteok_5   { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); }

._metric_xteok_1[data-tone='warn'] ._value_xteok_5 { color: var(--accent-attention-dark); }
._metric_xteok_1[data-tone='bad'] ._value_xteok_5  { color: var(--red); }
._context_xteok_9[data-tone='good']       { color: var(--accent-success); }
._context_xteok_9[data-tone='bad']        { color: var(--red); }

._track_xteok_12 { position: relative; height: 4px; margin-top: 5px; border-radius: var(--r-pill); background: var(--g100); }
._band_xteok_13  { position: absolute; inset-block: 0; border-radius: var(--r-pill); background: var(--portfolio-metric-band); }
._fill_xteok_14  { position: absolute; inset-block: 0; left: 0; border-radius: var(--r-pill); background: var(--info); }
._tick_xteok_15  { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--text-primary); transform: translateX(-50%); }

._metric_xteok_1[data-tone='good'] ._fill_xteok_14 { background: var(--accent-success); }
._metric_xteok_1[data-tone='warn'] ._fill_xteok_14 { background: var(--amber); }
._metric_xteok_1[data-tone='bad'] ._fill_xteok_14  { background: var(--red); }
._section_10fd4_1 { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
._grid_10fd4_2    { display: grid; grid-template-columns: repeat(var(--performance-columns, 2), minmax(0, 1fr)); gap: 12px 22px; }
._trend_10fd4_3   { display: inline-flex; align-items: center; gap: 2px; }
._wrap_qq7hd_1          { display: flex; flex-direction: column; gap: 4px; }
._count_qq7hd_2         { font-size: var(--fs-xs); color: var(--g600); white-space: nowrap; }
._count_qq7hd_2 b       { color: var(--text-primary); }
._ends_qq7hd_4          { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--g500); }
._end_qq7hd_4           { display: inline-flex; align-items: center; gap: 3px; }

._track_qq7hd_7         { position: relative; height: 14px; }

._rail_qq7hd_9          {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--g200);
  border-radius: var(--r-pill);
  pointer-events: none;
}

/* Full-width transparent hover target above the rail/fill but below the dots —
   hovering it (the gaps between dots) shows the timeline-progress tooltip. */
._hoverLayer_qq7hd_23 {
  position: absolute;
  inset: 0;
}

._dot_qq7hd_28           {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  background: var(--g200);
  transform: translate(-50%, -50%);
  cursor: default;
}

._fill_qq7hd_39 {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--accent-success, #1f8a3f);
  border-radius: var(--r-pill);
  pointer-events: none;
}
._fill_qq7hd_39[data-delayed='true']  { background: var(--accent-warning, #c0392b); }
._dot_qq7hd_28[data-state='done']     { background: var(--accent-success, #1f8a3f); }
._dot_qq7hd_28[data-state='delayed']  { background: var(--accent-warning, #c0392b); }

/* data-state='upcoming' keeps the default grey from .dot */
._caption_qq7hd_54 {
  font-size: var(--fs-xs);
  color: var(--accent-warning, #c0392b);
}

/* Compact styled tooltip (Base UI popup) — same navy/white family as the
   monitor floor popovers, sized for a short label (milestone name / %). */

/* The popup styling that used to live here now comes from ui/Tooltip's
   `marker` variant (which composes ui/MilestoneTooltip's `.tip`), so the navy
   look has exactly one home. See frontend/CLAUDE.md. */
._grid_jmn6n_1    { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
._span_jmn6n_2    { grid-column: 1 / -1; display: grid; }

._box_jmn6n_4 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
}

._box_jmn6n_4[data-tone='late'] { background: var(--portfolio-milestone-late-bg); border-color: var(--portfolio-milestone-late-border); }

/* The strip's milestone marker, rotated into a diamond and coloured by tone. */
._diamond_jmn6n_17 {
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: var(--r-sm);
  transform: rotate(45deg);
  background: var(--g300);
}

._box_jmn6n_4[data-tone='late'] ._diamond_jmn6n_17    { background: var(--red); }
._box_jmn6n_4[data-tone='onTrack'] ._diamond_jmn6n_17 { background: var(--accent-success); }

._text_jmn6n_30    { min-width: 0; }
._title_jmn6n_31   { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g500); }
._name_jmn6n_32    { font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
._status_jmn6n_33  { font-size: var(--fs-2xs); color: var(--g500); }
._box_jmn6n_4[data-tone='late'] ._status_jmn6n_33 { color: var(--red); font-weight: 600; }
/* The card is a size container: its sections lay themselves out by the
   card's own width, so the same card reads well in a narrow list and on a
   wide screen. */
._card_6n1eu_4 {
  container: portfolio-card / inline-size;
  overflow: hidden;
  border-radius: var(--r-3xl);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}

._card_6n1eu_4:hover { border-color: var(--border-strong); }

._layout_6n1eu_15     { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 236px; }
._body_6n1eu_16       { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px 16px; }
._divider_6n1eu_17    { height: 1px; background: var(--border-subtle); }
._milestones_6n1eu_18 { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Wide: a bigger photo, and — when there are milestones — Performance beside
   them with a rule between, its bars stacked in one column (read by
   Performance through --performance-columns). With no milestones Performance
   keeps the whole width and its two columns. */
@container portfolio-card (width >= 1000px) {
  ._layout_6n1eu_15 { grid-template-columns: 280px minmax(0, 1fr); }
  ._body_6n1eu_16   { padding: 16px 20px; }

  ._body_6n1eu_16:has(> ._milestones_6n1eu_18) {
    --performance-columns: 1;

    display: grid;
    grid-template-columns: minmax(300px, 380px) 1px minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
  }

  ._divider_6n1eu_17 { align-self: stretch; width: 1px; height: auto; }
}

/* Very narrow: the photo becomes a banner across the top. */
@container portfolio-card (width < 640px) {
  ._layout_6n1eu_15 { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
._item_1p92u_1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r-2xl);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
}
._head_1p92u_10     { display: flex; align-items: center; gap: 8px; }
._icon_1p92u_11     { display: inline-flex; align-items: center; color: var(--text-secondary, #6b7280); }
._site_1p92u_12     { font-weight: 600; font-size: var(--fs-sm); color: var(--text-primary, #111827); }
._ago_1p92u_13      { margin-left: auto; font-size: var(--fs-xs); color: var(--text-secondary, #6b7280); }
._text_1p92u_14     { font-size: var(--fs-sm); color: var(--text-secondary, #6b7280); }

/* Loveable-style: extremely soft tinted backgrounds per severity.
   Tokens live in tokens.css (--alert-*-tint / --alert-*-border). */
._item_1p92u_1[data-severity='high']       { background: var(--alert-high-tint); border-color: var(--alert-high-border); }
._item_1p92u_1[data-severity='high'] ._icon_1p92u_11 { color: var(--accent-warning); }
._item_1p92u_1[data-severity='med']        { background: var(--alert-med-tint);  border-color: var(--alert-med-border); }
._item_1p92u_1[data-severity='med'] ._icon_1p92u_11  { color: var(--accent-attention); }
._item_1p92u_1[data-severity='low']        { background: var(--surface-card); }
._rail_mur64_1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-3xl);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #e4e7ec);
}
._titleRow_mur64_10  { display: flex; align-items: center; gap: 8px; }
._titleIcon_mur64_11 { display: inline-flex; align-items: center; color: var(--info, #2b679e); }
._title_mur64_10     { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary, #111827); }
._list_mur64_13      { display: flex; flex-direction: column; gap: 8px; }
/* ---------- Portfolio Overview loading skeleton ----------
   Mirrors the live portfolio layout one-for-one so loaded → loading
   doesn't reflow. Reuses the same shimmer animation pattern as
   DashboardSkeleton (single shared keyframe + per-element --wave stagger). */

._page_dq7wq_6 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---------- Shared shimmer atom -----------------------------------
   Same gradient + keyframe as DashboardSkeleton so the surfaces pulse
   identically. */
._shimmer_dq7wq_15 {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g200) 45%,
    var(--g100) 90%
  );
  background-size: 220% 100%;
  border-radius: var(--r-lg);
  animation: _dorca-portfolio-skel-shimmer_dq7wq_1 1.6s ease-in-out infinite;
  animation-delay: var(--wave, 0s);
  flex-shrink: 0;
}

@keyframes _dorca-portfolio-skel-shimmer_dq7wq_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- KPI strip — 5 stat cards ------------------------------- */
._kpiStrip_dq7wq_37 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

._kpiTile_dq7wq_43 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r-3xl);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

._kpiLabel_dq7wq_53 {
  width: 70%;
  height: 11px;
}

._kpiValue_dq7wq_58 {
  width: 56px;
  height: 28px;
}

._kpiSub_dq7wq_63 {
  width: 50%;
  height: 10px;
}

/* Per-tile wave stagger so the strip pulses left-to-right. */
._kpiTile_dq7wq_43:nth-child(1) { --wave: 0s;    }
._kpiTile_dq7wq_43:nth-child(2) { --wave: 0.06s; }
._kpiTile_dq7wq_43:nth-child(3) { --wave: 0.12s; }
._kpiTile_dq7wq_43:nth-child(4) { --wave: 0.18s; }
._kpiTile_dq7wq_43:nth-child(5) { --wave: 0.24s; }

/* ---------- Body — projects column + alerts rail ------------------- */
._body_dq7wq_76 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

@media (width <= 1100px) {
  ._body_dq7wq_76 { grid-template-columns: 1fr; }
}

._projects_dq7wq_87 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ---------- Project card ------------------------------------------- */
._card_dq7wq_95 {
  container: portfolio-card-skeleton / inline-size;
  overflow: hidden;
  border-radius: var(--r-3xl);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

/* Per-card wave stagger so the column pulses top-down. */
._card_dq7wq_95:nth-child(1) { --wave: 0s;    }
._card_dq7wq_95:nth-child(2) { --wave: 0.08s; }
._card_dq7wq_95:nth-child(3) { --wave: 0.16s; }
._card_dq7wq_95:nth-child(4) { --wave: 0.24s; }

._cardLayout_dq7wq_109 {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 236px;
}

/* The photo panel's place: a soft block, its text shimmers at the foot. */
._cardPhoto_dq7wq_116 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px;
  background: var(--g50);
}

._cardName_dq7wq_125 {
  height: 18px;
}

._cardManager_dq7wq_129 {
  width: 100%;
  height: 40px;
  border-radius: var(--r-2xl);
}

._cardBody_dq7wq_135 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
}

._cardBars_dq7wq_143 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
}

._cardBar_dq7wq_143 {
  height: 22px;
  border-radius: var(--r-lg);
}

._cardDivider_dq7wq_154 {
  height: 1px;
  background: var(--border-subtle);
}

._cardMilestones_dq7wq_159 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

._cardMilestoneBar_dq7wq_166 {
  height: 40px;
  border-radius: var(--r-xl);
}

._cardBoxes_dq7wq_171 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

._cardBox_dq7wq_171 {
  height: 54px;
  border-radius: var(--r-2xl);
}

@container portfolio-card-skeleton (width >= 1000px) {
  ._cardLayout_dq7wq_109  { grid-template-columns: 280px minmax(0, 1fr); }
  ._cardBody_dq7wq_135    { display: grid; grid-template-columns: minmax(300px, 380px) 1px minmax(0, 1fr); gap: 0 24px; align-items: start; padding: 16px 20px; }
  ._cardBars_dq7wq_143    { grid-template-columns: minmax(0, 1fr); }
  ._cardDivider_dq7wq_154 { align-self: stretch; width: 1px; height: auto; }
}

@container portfolio-card-skeleton (width < 640px) {
  ._cardLayout_dq7wq_109 { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  ._cardPhoto_dq7wq_116  { min-height: 140px; }
}

/* ---------- Cross-Project Alerts rail ------------------------------ */
._rail_dq7wq_195 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-3xl);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

._railTitleRow_dq7wq_205 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._railTitleIcon_dq7wq_211 {
  width: 16px;
  height: 16px;
  border-radius: var(--r-lg);
}

._railTitle_dq7wq_205 {
  width: 160px;
  height: 12px;
}

._railList_dq7wq_222 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._alertItem_dq7wq_228 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-2xl);
  background: var(--g50);
  border: 1px solid var(--border-subtle);
}

/* Per-row wave stagger so the (longer) alerts list pulses top-down. */
._alertItem_dq7wq_228:nth-child(1) { --wave: 0s;    }
._alertItem_dq7wq_228:nth-child(2) { --wave: 0.06s; }
._alertItem_dq7wq_228:nth-child(3) { --wave: 0.12s; }
._alertItem_dq7wq_228:nth-child(4) { --wave: 0.18s; }
._alertItem_dq7wq_228:nth-child(5) { --wave: 0.24s; }
._alertItem_dq7wq_228:nth-child(6) { --wave: 0.30s; }

._alertHead_dq7wq_246 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._alertIcon_dq7wq_252 {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
}

._alertSite_dq7wq_258 {
  width: 96px;
  height: 12px;
}

._alertAgo_dq7wq_263 {
  margin-left: auto;
  width: 44px;
  height: 10px;
}

._alertText_dq7wq_269 {
  height: 11px;
}
._page_fmgbl_1 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0;
}

._body_fmgbl_8 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

._projects_fmgbl_15 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

._errorBanner_fmgbl_22 {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-alert, #fff3f3);
  border-radius: var(--r-xl);
}

/* ---- empty state (no synced sites yet) ------------------------------------ */
._empty_fmgbl_32 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 72px 24px;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

._emptyIcon_fmgbl_45 {
  width: 60px;
  height: 60px;
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  background: var(--g100);
  color: var(--g400);
}

._emptyTitle_fmgbl_55 {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy);
}

._emptyBody_fmgbl_63 {
  margin: 0;
  max-width: 420px;
  font-size: var(--fs-sm);
  color: var(--g500);
  line-height: 1.5;
}

._emptyCta_fmgbl_71 {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  background: var(--sidebar-accent);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

._emptyCta_fmgbl_71:hover {
  opacity: 0.9;
}
/* ---------- Floor view card ---------- */
._floorCard_1fwcx_2 {
  margin: 0;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
}

._floorPlan_1fwcx_14 {
  width: 88px;
  height: 88px;
  border-radius: var(--r-sm);
  background: var(--g50);
  border: 1px solid var(--g100);
  position: relative;
}

._floorPlan_1fwcx_14 svg {
  display: block;
  width: 100%;
  height: 100%;
}

._floorInfo_1fwcx_29 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

._floorLabel_1fwcx_36 {
  font-size: var(--fs-xs);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

._floorName_1fwcx_43 {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
}

._floorStats_1fwcx_50 {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

._floorStat_1fwcx_50 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._statValue_1fwcx_62 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}

._statLabel_1fwcx_69 {
  font-size: var(--fs-2xs);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ---------- Static card header (Live Summary / Safety Alerts) ----------
   Mirrors `.sectionHeader`'s metrics; the leading 16px icon sits in the
   slot the collapsible sections give their chevron. */
._cardHeader_1fwcx_79 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  color: var(--navy);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
}

._cardHeaderIcon_1fwcx_90 {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--info);
}

._cardHeaderIconAlert_1fwcx_98 {
  color: var(--red);
}

._cardHeaderTitle_1fwcx_102 {
  flex: 1;
}

._cardBody_1fwcx_106 {
  display: flex;
  flex-direction: column;
  padding: 0 16px 12px;
}

._viewAllButton_1fwcx_112 {
  appearance: none;
  border: none;
  background: transparent;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--info);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: color 120ms ease;
}

._viewAllButton_1fwcx_112:hover {
  color: var(--navy);
}

._viewAllButton_1fwcx_112:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Live Summary stat grid ---------- */
._summaryGrid_1fwcx_136 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 16px;
}

._summaryTile_1fwcx_143 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  background: var(--g50);
  border-radius: var(--r-xl);
}

._summaryValue_1fwcx_153 {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}

._summaryLabel_1fwcx_160 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--g500);
  text-align: center;
}

/* ---------- Generic row/list styles used by tab contents ---------- */
._list_1fwcx_170 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

/* ---------- Collapsible sections (Professions / Managers / Equipment) ---------- */
._sections_1fwcx_178 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Section header row — wraps the toggle <button> and the right-aligned
   actions slot (e.g. <ClearFiltersButton/>) so the action sits outside
   the toggle button rather than nested inside it. */
._sectionHeaderRow_1fwcx_187 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
}

._sectionActions_1fwcx_194 {
  display: inline-flex;
  align-items: center;
}

/* "Off site" cue on rows that exist only because the user filtered them
   but the underlying worker / manager isn't currently present. The row
   stays interactive (so the user can untoggle) but reads as "this is in
   your filter set, not on the building right now". */
._rowOffSite_1fwcx_203 {
  opacity: 0.55;
}

._offSiteTag_1fwcx_207 {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--r-md);
  background: var(--g100);
  color: var(--g600);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

._section_1fwcx_77 {
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

._sectionHeader_1fwcx_77 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
}

._sectionHeaderRow_1fwcx_187:has(> ._sectionHeader_1fwcx_77:hover) {
  /* The whole header strip lights up, count included — not just the toggle. */
  background: var(--g50);
}

._sectionChevron_1fwcx_249 {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--g600);
  transition: transform 160ms ease;
  transform: rotate(-90deg); /* chevron points right when collapsed */
}

._sectionChevronOpen_1fwcx_259 {
  transform: rotate(0); /* chevron points down when open */
}

._sectionTitle_1fwcx_263 {
  flex: 1;
}

._sectionCount_1fwcx_267 {
  color: var(--g500);
  font-weight: 500;
  font-size: var(--fs-sm);
}

._sectionBody_1fwcx_273 {
  display: flex;
  flex-direction: column;
  padding: 0 16px 12px;
}

._sectionBody_1fwcx_273[hidden] {
  display: none;
}

._sectionEmpty_1fwcx_283 {
  padding: 4px 0 12px;
  color: var(--g400);
  font-size: var(--fs-sm);
}

/* ---------- Profession row (LeftRail Professions section) ----------
   Flat layout (separator-driven, no card border) so the row blends into
   the section body — matches the manager/equipment rows above and
   trusstor's design. Distinct from `.row` (used by Activities / Issues /
   Safety) which is still the bordered-card variant. */
._professionRow_1fwcx_294 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid var(--separator);
}

._professionRow_1fwcx_294:last-child {
  border-bottom: none;
}

/* Toggle behaviour shared by all three LeftRail row kinds. The whole row is
   the click target; the inner Checkbox is presentational. Mirrors
   trusstor_dashboard's `FilterCard` pattern. */
._rowToggle_1fwcx_310 {
  cursor: pointer;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
  border-radius: var(--r-md);
  outline: none;
  transition: background 120ms ease;
}

._rowToggle_1fwcx_310:hover {
  background: var(--g50);
}

._rowToggle_1fwcx_310:focus-visible {
  outline: 2px solid var(--floor-selected-fill);
  outline-offset: -2px;
}

._rowSelected_1fwcx_330 {
  background: var(--g50);
}

/* Coloured profession pill: trade icon + tradeGroup label, background
   tinted by the profession's `backgroundColor`. Mirrors trusstor's
   `.tradeChip` shape (rounded-rect, white text, icon + label). */
._tradeChip_1fwcx_336 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-md);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  max-width: 220px;
}

._tradeChipLabel_1fwcx_351 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sub-trade text after the chip (contractor / specialty). */
._contractorText_1fwcx_358 {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--g700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count on the right — single number, no /total, no caption (matches
   trusstor image 7). */
._professionRowCount_1fwcx_369 {
  margin-left: auto;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

/* ---------- Manager row (LeftRail Managers section) ---------- */
._managerRow_1fwcx_378 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._managerRow_1fwcx_378:last-child {
  border-bottom: none;
}

._managerRowAvatar_1fwcx_392 {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

._managerRowName_1fwcx_405 {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._managerRowRole_1fwcx_413 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--g100);
  color: var(--g700);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Equipment row (LeftRail Equipment section) ---------- */
._equipmentRow_1fwcx_426 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._equipmentRow_1fwcx_426:last-child {
  border-bottom: none;
}

._equipmentRowIcon_1fwcx_440 {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

._equipmentRowName_1fwcx_447 {
  flex: 1;
  font-weight: 500;
}

._equipmentRowCount_1fwcx_452 {
  font-weight: 700;
  color: var(--navy);
  font-size: var(--fs-sm);
}

._equipmentRowCountTotal_1fwcx_458 {
  color: var(--g500);
  font-weight: 500;
  margin-left: 0;
}

/* ---------- Safety Log (mirrors trusstor's `Alerts.tsx`) ---------- */
._safetyLog_1fwcx_465 {
  display: flex;
  flex-direction: column;
  padding: 4px 0 16px;
}

._safetyLogTitle_1fwcx_471 {
  margin: 0;
  padding: 12px 16px 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0;
}

._safetyEmpty_1fwcx_480 {
  padding: 8px 0;
  color: var(--g400);
  font-size: var(--fs-sm);
}

._safetyEmptyLive_1fwcx_486 {
  padding: 14px 16px;
  color: var(--g500);
  font-size: var(--fs-sm);
  font-style: italic;
  text-align: center;
}

/* Hairline rule with centred caps text — matches trusstor's
   `LineDividerWithText`: lines flank the label on either side. */
._lineDivider_1fwcx_496 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 8px;
  color: var(--g500);
}

._lineDivider_1fwcx_496::before,
._lineDivider_1fwcx_496::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--g100);
}

._lineDividerText_1fwcx_512 {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--g500);
  flex: 0 0 auto;
}

._safetyList_1fwcx_521 {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

/* Virtualized EVENTS LOG — only on-screen rows are rendered. `height` is
   set inline to the virtualizer's total size; each row is absolutely
   positioned via an inline transform. The divider sits on this wrapper
   because the inner `.safetyRow` is always its wrapper's last child. */
._safetyVirtualList_1fwcx_531 {
  position: relative;
  width: 100%;
}

._safetyVirtualRow_1fwcx_536 {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  border-bottom: 1px solid var(--g50);
}

/* Two-line row: the violation title gets a full line so long names are
   never truncated; time / floor / chip sit on the line below it.
   `data-critical="true"` flips the row `color` from safety-orange to red
   so the inline icon (currentColor) tints accordingly. */
._safetyRow_1fwcx_530 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 8px 0;
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--g50);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--safety-alert-orange);
}

._safetyRow_1fwcx_530:hover ._safetyRowTitle_1fwcx_564,
._safetyRow_1fwcx_530:focus-visible ._safetyRowTitle_1fwcx_564 {
  text-decoration: underline;
}

._safetyRow_1fwcx_530[data-critical='true'] {
  color: var(--red);
}

._safetyRow_1fwcx_530:last-child {
  border-bottom: none;
}

._safetyRowTop_1fwcx_577 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

._safetyRowBottom_1fwcx_584 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 24px; /* line up under the title — past icon + gap */
}

._safetyRowIcon_1fwcx_591 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* No truncation — the title wraps to a second line if a violation name
   is unusually long. */
._safetyRowTitle_1fwcx_564 {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
}

._safetyRowMeta_1fwcx_610 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Chip sits at the end of the meta line — it now has most of a full
   line, and the title above is where long names are read in full. */
._safetyRowChip_1fwcx_620 {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  max-width: 60%;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--profession-fallback-color);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Inline-SVG wrapper for trade pictograms. Trusstor's icons ship with
   hardcoded fills (not `currentColor`), so we recolor via the same CSS
   `filter: invert(...) hue-rotate(...)` pipeline trusstor uses in its
   `TrusstorIconShared` styles (`.white`, `.blue`, etc). The white filter
   below is byte-identical to trusstor's. The `--trade-icon-filter`
   custom property lets callers override the recipe per icon if needed. */
._icon_13ssb_7 {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  line-height: 0;
}

._icon_13ssb_7 svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: var(--trade-icon-filter, none);
}
/* Canonical trade pill — shared across MonitorPage WorkforceTab,
   IssuesPage ProfessionsFilter, and the MultiSelect collapsible group.
   Geometry + typography copied from MonitorPage's `.tradeChip` so the
   visual stays identical across surfaces. Background colour is inline
   from the consumer.

   Off-grid pixel values (6px gap, 4px/10px padding) are intentional to
   match Trusstor's `ProfessionDisplayWithTradeIcon` pill — closer-than-
   `--s-2` (8px) chip geometry produces the compact pictogram + label
   pairing the design system wants. */
._pill_1pn12_11 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-md);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  max-width: 220px;

  /* Fill + foreground are set inline via `professionChipStyle`; this is the
     resting default (neutral fallback) for the no-colour case. */
  background: var(--profession-fallback-color);
}

/* Compact variant for dense rows (scheduler label column, ~28px row height).
   Keeps the same anatomy (icon + label, same fill/foreground pairing) at a
   smaller scale, and — unlike the canonical chip — SHRINKS with its container
   (min-width:0 + 100% cap) so a fixed grid column truncates the label instead
   of overflowing the cell. Off-grid 2px/8px paddings mirror the canonical
   pill's intentionally-tighter-than---s-2 geometry one step down. */
._pillSm_1pn12_35 {
  /* em-relative geometry so the whole badge scales with its font-size. The
     scheduler re-scopes --fs-2xs by the geometric zoom (on .matrix), so the
     padding, gap, and the 1em icon (see ProfessionPill compact) magnify in
     lockstep with the label — mirroring ui/Pill's .pill,
     without depending on --sched-zoom being inherited here. 0.4em/0.2em/0.8em ==
     the prior 4px/2px/8px at the 10px base, so nothing changes at zoom 1. */
  gap: 0.4em;
  padding: 0.2em 0.8em;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1px;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

._label_1pn12_51 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Flex item: needs min-width:0 to shrink below its content so the ellipsis
     actually engages in a width-constrained pill (else the pill just grows). */
  min-width: 0;
}
._root_1fims_1 {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--g300);
  border-radius: var(--r-sm);
  color: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}

._root_1fims_1[data-presentational] {
  cursor: inherit;

  /* Pass clicks through to the clickable parent row so it owns the toggle
     and the checkbox never steals focus. */
  pointer-events: none;
}

._root_1fims_1[data-disabled] {
  cursor: default;
  opacity: 0.5;
}

._root_1fims_1:hover:not([data-presentational], [data-disabled]) {
  border-color: var(--g500);
}

._root_1fims_1:focus-visible {
  outline: 2px solid var(--floor-selected-fill);
  outline-offset: 1px;
}

._root_1fims_1[data-checked] {
  background: var(--navy);
  border-color: var(--navy);
}

._indicator_1fims_45 {
  display: inline-grid;
  place-items: center;
  line-height: 0;
}
._button_1xxi1_1 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  color: var(--g800);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

._button_1xxi1_1:hover {
  text-decoration-thickness: 2px;
}

._button_1xxi1_1:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Mirror of trusstor's `shared/components/Loader/styles.module.scss`:
   a 4px ring, light grey base + brand-coloured top edge, rotating
   linearly. Tokens swap trusstor's `#f3f3f3` for `--g100` and
   `#212a35` for `--navy` so the loader picks up d-orca's palette. */
._loading_10zjr_5 {
  border: 4px solid var(--g100);
  border-top: 4px solid var(--navy);
  border-radius: var(--r-circle);
  margin: auto;
  animation: _dorca-loader-spin_10zjr_1 2s linear infinite;
  box-sizing: border-box;
}

@keyframes _dorca-loader-spin_10zjr_1 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  ._loading_10zjr_5 { animation-duration: 6s; }
}
._title_1kirf_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Trusstor's popup icon is always safety-orange, critical or not. */
._titleIcon_1kirf_8 {
  display: inline-flex;
  color: var(--safety-alert-orange);
}

._fields_1kirf_13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

._type_1kirf_20 {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--navy);
}

._fieldRow_1kirf_26 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}

/* Label + bold value on one underlined line — Trusstor's detail row. */
._field_1kirf_13 {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--g100);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._fieldValue_1kirf_43 {
  font-weight: 600;
}

._loading_1kirf_47 {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

._error_1kirf_53 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--red);
}

._footerSpacer_1kirf_59 {
  flex: 1;
}
/* Trusstor's `TrusstorSwitcher`: pill-shaped grey rail with a white
   active segment + soft shadow. Lifted from
   shared/components/TrusstorSwitcher/styles.module.scss. */
._root_qjw1t_4 {
  display: inline-flex;
  align-items: center;
  background: var(--g100);
  border-radius: var(--r-pill);
  padding: 4px;

  /* Compact content-driven pill matching Trusstor's TrusstorSwitcher.
     `inline-flex` + content-sized segments keep the chip tight when
     dropped into a flex row (e.g. ContractorAnalysis personnelHeader)
     — `width: 100%` here previously made the pill consume the entire
     row, swallowing the DateRangePicker. */
  width: fit-content;
}

._segment_qjw1t_19 {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--g500);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;

  /* Each segment gets a comfortable minimum so 1- to 3-char labels
     (`7d`, `14d`, `30d`) sit on roughly the same width without
     forcing `flex: 1` (which over-expands inside a flex parent). */
  min-width: 64px;
  padding: 0 var(--s-3);
  height: 28px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color 120ms, color 120ms, box-shadow 120ms;

  /* Row so an optional badge sits to the right of the (width-reserved) label. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Reserve the bold (selected) width for the label so selecting a segment never
   changes its width — otherwise neighbouring toolbar items shift by ~1px when
   the selection moves between labels of different lengths. */
._label_qjw1t_48 {
  display: inline-grid;
  place-items: center;
}
._label_qjw1t_48 > span { grid-area: 1 / 1; }

._label_qjw1t_48::after {
  content: attr(data-label);
  grid-area: 1 / 1;
  font-weight: 600;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Count chip after the label — info-blue, e.g. a "+12 today" hint. */
._badge_qjw1t_64 {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--info-tint);
  color: var(--info);
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

._segment_qjw1t_19:hover { color: var(--navy); }

._segmentSelected_qjw1t_78 {
  background: var(--color-surface);
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

/* ---- sm: compact pill ---- */
._sm_qjw1t_86 {
  padding: 2px;
}

._sm_qjw1t_86 ._segment_qjw1t_19 {
  min-width: 0;
  height: 22px;
  padding: 0 var(--s-2);
  font-size: var(--fs-2xs);
}

/* ---- outlined: joined bordered boxes (Trusstor's calendar range switch) --- */
._outlined_qjw1t_98 {
  padding: 0;
  background: transparent;
  border-radius: var(--r-md);
}

._outlined_qjw1t_98 ._segment_qjw1t_19 {
  height: 32px;
  min-width: 88px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--g500);
  font-weight: 400;
}

._outlined_qjw1t_98 ._segment_qjw1t_19 + ._segment_qjw1t_19 {
  margin-left: -1px;
}

._outlined_qjw1t_98 ._segment_qjw1t_19:first-child {
  border-radius: var(--r-md) 0 0 var(--r-md);
}

._outlined_qjw1t_98 ._segment_qjw1t_19:last-child {
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* The selected box rides over its neighbours' shared borders, ringed in navy. */
._outlined_qjw1t_98 ._segmentSelected_qjw1t_78 {
  position: relative;
  z-index: var(--z-raised-1);
  border-color: var(--navy);
  color: var(--navy);
  font-weight: 500;
  box-shadow: none;
}

/* ---- joined: one bordered group, hairline separators, info-tinted pick ---- */
._joined_qjw1t_137 {
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  overflow: hidden;
}

._joined_qjw1t_137 ._segment_qjw1t_19 {
  height: auto;
  min-width: 0;
  padding: 5px var(--s-4);
  border-radius: 0;
  color: var(--g600);
}

._joined_qjw1t_137 ._segment_qjw1t_19 + ._segment_qjw1t_19 {
  border-left: 1px solid var(--ops-card-border);
}

._joined_qjw1t_137 ._segment_qjw1t_19:hover {
  background: var(--ops-pill-hover);
}

._joined_qjw1t_137 ._segmentSelected_qjw1t_78,
._joined_qjw1t_137 ._segmentSelected_qjw1t_78:hover {
  background: var(--info-tint);
  color: var(--info);
  box-shadow: none;
}

/* ---- wrap: separate pills that wrap onto more lines, navy pick ---- */
._wrap_qjw1t_170 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

._wrap_qjw1t_170 ._segment_qjw1t_19 {
  height: auto;
  min-width: 0;
  padding: var(--s-1) 10px;
  border-radius: var(--r-md);
  background: var(--g100);
  color: var(--g700);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

._wrap_qjw1t_170 ._segment_qjw1t_19:hover {
  background: var(--g200);
  color: var(--g700);
}

._wrap_qjw1t_170 ._segmentSelected_qjw1t_78,
._wrap_qjw1t_170 ._segmentSelected_qjw1t_78:hover {
  background: var(--navy);
  color: var(--color-surface);
  font-weight: 500;
  box-shadow: none;
}

/* The count reads as part of the label — "Overdue (3)" — not a chip. */
._wrap_qjw1t_170 ._badge_qjw1t_64 {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Reserve the wrap pick's own weight, not the base bold. */
._wrap_qjw1t_170 ._label_qjw1t_48::after {
  font-weight: 500;
}
/* Same shimmer atom as the Portfolio/Dashboard/Monitor skeletons: a gradient
   that sweeps across each placeholder, staggered per card via --wave. */
@keyframes _dorca-activities-skel-shimmer_12wkb_1 {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

._list_12wkb_8 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Mirrors the real card grid so the skeleton occupies the same footprint. */
._card_12wkb_15 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
}

._icon_12wkb_26,
._lineTitle_12wkb_27,
._lineMeta_12wkb_28,
._pill_12wkb_29 {
  background: linear-gradient(90deg, var(--g100) 0%, var(--g200) 45%, var(--g100) 90%);
  background-size: 220% 100%;
  animation: _dorca-activities-skel-shimmer_12wkb_1 1.6s ease-in-out infinite;
  animation-delay: var(--wave, 0s);
}

._icon_12wkb_26 {
  width: 32px;
  height: 32px;
  border-radius: var(--r-lg);
}

._body_12wkb_42 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

._lineTitle_12wkb_27 {
  width: 40%;
  height: 16px;
  border-radius: var(--r-sm);
}

._lineMeta_12wkb_28 {
  width: 65%;
  height: 12px;
  border-radius: var(--r-sm);
}

._bulb_12wkb_61 {
  width: 100%;
  height: 72px;
  border-radius: var(--r-lg);
  background: var(--g50);
  border: 1px solid var(--g200);
}

._right_12wkb_69 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}

._pill_12wkb_29 {
  width: 88px;
  height: 14px;
  border-radius: var(--r-sm);
}
._backdrop_owli6_1 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: var(--z-dialog);
  animation: _discard-backdrop-in_owli6_1 0.2s ease;
}

@keyframes _discard-backdrop-in_owli6_1 {
  from { opacity: 0; }
}

/* The panel eases in rather than appearing — an instant swap over a freshly
   dimmed host reads as a glitch, not a question. */
@keyframes _discard-panel-in_owli6_1 {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }
}

._panel_owli6_22 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  background: var(--color-surface);
  border-radius: var(--r-xl);
  padding: 24px;
  width: 360px;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: _discard-panel-in_owli6_1 0.22s cubic-bezier(0.2, 0.8, 0.25, 1);
}

._title_owli6_39 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--g800);
  margin: 0;
}

._description_owli6_46 {
  font-size: var(--fs-sm);
  color: var(--g600);
  margin: 0;
  line-height: 1.5;
}

._actions_owli6_53 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

._cancelBtn_owli6_60 {
  background: transparent;
  border: 1px solid var(--g300);
  color: var(--g700);
  padding: 6px 16px;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  cursor: pointer;
  transition: background 0.1s;
}

._cancelBtn_owli6_60:hover {
  background: var(--g50);
}

._confirmBtn_owli6_76 {
  background: var(--status-rejected-text);
  color: var(--color-surface);
  border: none;
  padding: 6px 16px;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--f-body);
  cursor: pointer;
  transition: opacity 0.1s;
}

._confirmBtn_owli6_76:hover {
  opacity: 0.88;
}

._confirmBtn_owli6_76:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stacked layout — used whenever `altAction` exists (the similar-name guard):
   full-width rows fit long quoted labels without wrapping and give big tap
   targets. The recommended exit is navy — red stays reserved for destructive
   confirms, which keep the classic row above. */
._actionsStacked_owli6_102 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

._stackPrimaryBtn_owli6_109 {
  background: var(--navy);
  color: var(--color-surface);
  border: 1px solid var(--navy);
  padding: 9px 16px;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--f-body);
  cursor: pointer;
  transition: opacity 0.1s;
}

._stackPrimaryBtn_owli6_109:hover {
  opacity: 0.88;
}

._stackGhostBtn_owli6_126 {
  padding: 9px 16px;
}

._stackTextBtn_owli6_131 {
  background: none;
  border: none;
  align-self: center;
  color: var(--g600);
  font-size: var(--fs-xs);
  font-family: var(--f-body);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 8px;
}
/* Variables declaration */
.rdp-root {
  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */

  --rdp-day-height: 44px; /* The height of the day cells. */
  --rdp-day-width: 44px; /* The width of the day cells. */

  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
  --rdp-day_button-height: 42px; /* The height of the day cells. */
  --rdp-day_button-width: 42px; /* The width of the day cells. */

  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */

  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */

  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */

  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */

  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
  --rdp-range_middle-color: inherit; /* The color of the range text. */

  --rdp-range_start-color: white; /* The color of the range text. */
  --rdp-range_start-background: linear-gradient(
    var(--rdp-gradient-direction),
    transparent 50%,
    var(--rdp-range_middle-background-color) 50%
  ); /* Used for the background of the start of the selected range. */
  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */

  --rdp-range_end-background: linear-gradient(
    var(--rdp-gradient-direction),
    var(--rdp-range_middle-background-color) 50%,
    transparent 50%
  ); /* Used for the background of the end of the selected range. */
  --rdp-range_end-color: white; /* The color of the range text. */
  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */

  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */

  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-gradient-direction: 90deg;

  --rdp-animation_duration: 0.3s;
  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
}

.rdp-root[dir="rtl"] {
  --rdp-gradient-direction: -90deg;
}

.rdp-root[data-broadcast-calendar="true"] {
  --rdp-outside-opacity: unset;
}

/* Root of the component. */
.rdp-root {
  position: relative; /* Required to position the navigation toolbar. */
  box-sizing: border-box;
}

.rdp-root * {
  box-sizing: border-box;
}

.rdp-day {
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}

.rdp-day_button {
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  justify-content: center;
  align-items: center;
  display: flex;

  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
  border: var(--rdp-day_button-border);
  border-radius: var(--rdp-day_button-border-radius);
}

.rdp-day_button:disabled {
  cursor: revert;
}

.rdp-caption_label {
  z-index: 1;

  position: relative;
  display: inline-flex;
  align-items: center;

  white-space: nowrap;
  border: 0;
}

.rdp-dropdown:focus-visible ~ .rdp-caption_label {
  outline: 5px auto Highlight;
  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
  outline: 5px auto -webkit-focus-ring-color;
}

.rdp-button_next,
.rdp-button_previous {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  appearance: none;

  width: var(--rdp-nav_button-width);
  height: var(--rdp-nav_button-height);
}

.rdp-button_next:disabled,
.rdp-button_next[aria-disabled="true"],
.rdp-button_previous:disabled,
.rdp-button_previous[aria-disabled="true"] {
  cursor: revert;

  opacity: var(--rdp-nav_button-disabled-opacity);
}

.rdp-chevron {
  display: inline-block;
  fill: var(--rdp-accent-color);
}

.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
  transform: rotate(180deg);
  transform-origin: 50%;
}

.rdp-dropdowns {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rdp-dropdown-gap);
}
.rdp-dropdown {
  z-index: 2;

  /* Reset */
  opacity: 0;
  appearance: none;
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  border: none;
  line-height: inherit;
}

.rdp-dropdown_root {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-month_caption {
  display: flex;
  align-content: center;
  height: var(--rdp-nav-height);
  font-weight: bold;
  font-size: large;
}

.rdp-root[data-nav-layout="around"] .rdp-month,
.rdp-root[data-nav-layout="after"] .rdp-month {
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-month_caption {
  justify-content: center;
  margin-inline-start: var(--rdp-nav_button-width);
  margin-inline-end: var(--rdp-nav_button-width);
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-button_previous {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
}

.rdp-root[data-nav-layout="around"] .rdp-button_next {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
  justify-content: center;
}

.rdp-months {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rdp-months-gap);
  max-width: fit-content;
}

.rdp-month_grid {
  border-collapse: collapse;
}

.rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;

  display: flex;
  align-items: center;

  height: var(--rdp-nav-height);
}

.rdp-weekday {
  opacity: var(--rdp-weekday-opacity);
  padding: var(--rdp-weekday-padding);
  font-weight: 500;
  font-size: smaller;
  text-align: var(--rdp-weekday-text-align);
  text-transform: var(--rdp-weekday-text-transform);
}

.rdp-week_number {
  opacity: var(--rdp-week_number-opacity);
  font-weight: 400;
  font-size: small;
  height: var(--rdp-week_number-height);
  width: var(--rdp-week_number-width);
  border: var(--rdp-week_number-border);
  border-radius: var(--rdp-week_number-border-radius);
  text-align: var(--rdp-weeknumber-text-align);
}

/* DAY MODIFIERS */
.rdp-today:not(.rdp-outside) {
  color: var(--rdp-today-color);
}

.rdp-selected {
  font-weight: bold;
  font-size: large;
}

.rdp-selected .rdp-day_button {
  border: var(--rdp-selected-border);
}

.rdp-outside {
  opacity: var(--rdp-outside-opacity);
}

.rdp-disabled:not(.rdp-selected) {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-hidden {
  visibility: hidden;
  color: var(--rdp-range_start-color);
}

.rdp-range_start {
  background: var(--rdp-range_start-background);
}

.rdp-range_start .rdp-day_button {
  background-color: var(--rdp-range_start-date-background-color);
  color: var(--rdp-range_start-color);
}

.rdp-range_middle {
  background-color: var(--rdp-range_middle-background-color);
}

.rdp-range_middle .rdp-day_button {
  border: unset;
  border-radius: unset;
  color: var(--rdp-range_middle-color);
}

.rdp-range_end {
  background: var(--rdp-range_end-background);
  color: var(--rdp-range_end-color);
}

.rdp-range_end .rdp-day_button {
  color: var(--rdp-range_start-color);
  background-color: var(--rdp-range_end-date-background-color);
}

.rdp-range_start.rdp-range_end {
  background: revert;
}

.rdp-focusable {
  cursor: pointer;
}

@keyframes rdp-slide_in_left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_in_right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_out_left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes rdp-slide_out_right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.rdp-weeks_before_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_before_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

@keyframes rdp-fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rdp-fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.rdp-caption_after_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_after_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
/* Shared trigger chrome (the calendar+value+chevron button) and the
   inline SVG icon recoloring. Composed via `composes:` from each
   field's local CSS module. */

._trigger_wlg5h_5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}
._trigger_wlg5h_5:hover { border-color: var(--g400); }
._trigger_wlg5h_5[data-popup-open] { border-color: var(--info); }

._trigger_wlg5h_5:disabled {
  background: var(--g50);
  color: var(--g400);
  cursor: not-allowed;
}
._trigger_wlg5h_5:disabled:hover { border-color: var(--border); }

._trigger_wlg5h_5:disabled ._leadingIcon_wlg5h_31,
._trigger_wlg5h_5:disabled ._trailingIcon_wlg5h_32 { color: var(--g400); }

._value_wlg5h_34 { flex: 1; text-align: start; }
._placeholder_wlg5h_35 { color: var(--g400); flex: 1; text-align: start; }

/* Inlined trusstor SVGs render `#141414` strokes; rules below paint
   them through `currentColor` so the field can tint them. */
._leadingIcon_wlg5h_31, ._trailingIcon_wlg5h_32 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
._leadingIcon_wlg5h_31 { width: 18px; height: 18px; color: var(--g700, #424b58); }
._trailingIcon_wlg5h_32 { width: 16px; height: 16px; color: var(--g500); }
._leadingIcon_wlg5h_31 svg, ._trailingIcon_wlg5h_32 svg { width: 100%; height: 100%; display: block; }

._leadingIcon_wlg5h_31 svg [stroke]:not([stroke="none"]),
._trailingIcon_wlg5h_32 svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

._leadingIcon_wlg5h_31 svg [fill]:not([fill="none"]),
._trailingIcon_wlg5h_32 svg [fill]:not([fill="none"]) { fill: currentColor; }
/* Shared trigger chrome (the calendar+value+chevron button) and the
   inline SVG icon recoloring. Composed via `composes:` from each
   field's local CSS module. */._trigger_wlg5h_5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}._trigger_wlg5h_5:hover { border-color: var(--g400); }._trigger_wlg5h_5[data-popup-open] { border-color: var(--info); }._trigger_wlg5h_5:disabled {
  background: var(--g50);
  color: var(--g400);
  cursor: not-allowed;
}._trigger_wlg5h_5:disabled:hover { border-color: var(--border); }._trigger_wlg5h_5:disabled ._leadingIcon_wlg5h_31,
._trigger_wlg5h_5:disabled ._trailingIcon_wlg5h_32 { color: var(--g400); }._value_wlg5h_34 { flex: 1; text-align: start; }._placeholder_wlg5h_35 { color: var(--g400); flex: 1; text-align: start; }/* Inlined trusstor SVGs render `#141414` strokes; rules below paint
   them through `currentColor` so the field can tint them. */._leadingIcon_wlg5h_31, ._trailingIcon_wlg5h_32 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._leadingIcon_wlg5h_31 { width: 18px; height: 18px; color: var(--g700, #424b58); }._trailingIcon_wlg5h_32 { width: 16px; height: 16px; color: var(--g500); }._leadingIcon_wlg5h_31 svg, ._trailingIcon_wlg5h_32 svg { width: 100%; height: 100%; display: block; }._leadingIcon_wlg5h_31 svg [stroke]:not([stroke="none"]),
._trailingIcon_wlg5h_32 svg [stroke]:not([stroke="none"]) { stroke: currentColor; }._leadingIcon_wlg5h_31 svg [fill]:not([fill="none"]),
._trailingIcon_wlg5h_32 svg [fill]:not([fill="none"]) { fill: currentColor; }/* Shared popup chrome + react-day-picker overrides used by every
   date picker on the analytics page. Composed via `composes:` from
   each field's local CSS module.
   v: 2026-05-06 — multi-month side-by-side. */._popup_1j6ff_6 {
  background: var(--color-surface);
  border-radius: var(--r-3xl);
  box-shadow: 0 8px 24px rgb(17 24 39 / 16%), 0 0 0 1px rgb(17 24 39 / 6%);
  padding: 16px 20px;
  font-family: var(--f-body);
  color: var(--navy);
}._popup_1j6ff_6 .rdp-root {
  --rdp-day-width: 36px;
  --rdp-day-height: 36px;
  --rdp-accent-color: var(--navy);
  --rdp-nav-button-color: var(--navy);
  --rdp-today-color: var(--navy);

  margin: 0;
  padding: 0;
}/* react-day-picker v9 defaults the months container to
   `flex-wrap: wrap; max-width: fit-content`, which both clamps width
   AND stacks multiple months on top of each other. Override to a
   non-wrapping row so DateRangeField's `numberOfMonths={2}` sits
   side-by-side. Single-month layouts (DateField, DateTimeField) still
   work — only one month, just laid out as a 1-item flex row. */._popup_1j6ff_6 .rdp-months {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 16px;
}._popup_1j6ff_6 .rdp-month {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month_grid {
  width: 100%;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month { position: relative; }._popup_1j6ff_6 .rdp-month_caption {
  position: relative;
  z-index: var(--z-raised-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 600;
  height: 32px;
  padding: 0;
  margin-bottom: 12px;
}._popup_1j6ff_6 .rdp-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-raised-2);
}._popup_1j6ff_6 .rdp-button_previous,
._popup_1j6ff_6 .rdp-button_next {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--navy);
  width: 28px;
  height: 28px;
  border-radius: var(--r-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._popup_1j6ff_6 .rdp-button_previous:hover,
._popup_1j6ff_6 .rdp-button_next:hover { background: var(--g50); }/* react-day-picker v9 inlines its own SVG chevrons whose fill is
   `--rdp-accent-color`. Force the inner shapes to inherit
   `currentColor` so blue defaults never leak through. */._popup_1j6ff_6 .rdp-button_previous svg,
._popup_1j6ff_6 .rdp-button_next svg { fill: currentColor; color: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [fill]:not([fill="none"]),
._popup_1j6ff_6 .rdp-button_next svg [fill]:not([fill="none"]) { fill: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [stroke]:not([stroke="none"]),
._popup_1j6ff_6 .rdp-button_next svg [stroke]:not([stroke="none"]) { stroke: currentColor; }._popup_1j6ff_6 .rdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 6px;
}._popup_1j6ff_6 .rdp-weekday {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
  padding: 6px 0;
  text-transform: none;
}._popup_1j6ff_6 .rdp-weeks { display: flex; flex-direction: column; gap: 2px; }._popup_1j6ff_6 .rdp-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}._popup_1j6ff_6 .rdp-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}._popup_1j6ff_6 .rdp-day .rdp-day_button {
  position: relative;
  z-index: var(--z-raised-1);
}._popup_1j6ff_6 .rdp-day_button {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms, color 120ms;
}._popup_1j6ff_6 .rdp-day_button:hover:not(:disabled) { background: var(--g50); }._popup_1j6ff_6 .rdp-outside .rdp-day_button,
._popup_1j6ff_6 .rdp-disabled .rdp-day_button {
  color: var(--g300);
  cursor: default;
}._popup_1j6ff_6 .rdp-disabled .rdp-day_button:hover { background: transparent; }._popup_1j6ff_6 .rdp-selected .rdp-day_button,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button {
  background: var(--navy);
  color: var(--color-surface);
  font-weight: 600;
}/* Inverse on hover so the digit stays readable when the cursor is
   over the filled selected day. */._popup_1j6ff_6 .rdp-selected .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button:hover {
  background: var(--color-surface);
  color: var(--navy);
}/* Range pill: middle days get a full-cell light-blue band; start
   and end days get a half-band that flows out from the navy circle
   so the band visually connects to the middle days. The band lives
   on a `::before` underneath the day button, which keeps its
   circular fill on top. */._popup_1j6ff_6 .rdp-range_middle::before,
._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before,
._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-range_middle::before { left: 0; right: 0; }._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before {
  left: 50%;
  right: 0;
}._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  left: 0;
  right: 50%;
}._popup_1j6ff_6 .rdp-range_middle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}/* Live preview: while the user has picked a start but not yet an end,
   paint the same band/circle on the days between `from` and the
   hovered cell so the range is visible as the cursor moves. The
   "Forward"/"Backward" suffix tells the half-band which side of the
   hovered cell to flow toward — back to where `from` sits. */._popup_1j6ff_6 .rdp-previewMiddle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewMiddle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}._popup_1j6ff_6 .rdp-previewEndForward::before,
._popup_1j6ff_6 .rdp-previewEndBackward::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewEndForward::before { left: 0; right: 50%; }._popup_1j6ff_6 .rdp-previewEndBackward::before { left: 50%; right: 0; }/* Hovered preview end stays in the same grey-circle hover state as
   any normal day button — no navy fill until the user commits. The
   half-band (::before above) hints where the range will reach. */._popup_1j6ff_6 .rdp-previewEndForward .rdp-day_button,
._popup_1j6ff_6 .rdp-previewEndBackward .rdp-day_button {
  background: var(--g50);
  color: var(--navy);
  font-weight: 500;
}
/* Sit above dialog surfaces (--z-dialog: 1000), matching SingleSelect and
   PhoneField. The popover portals to <body>, so it competes with the dialog
   layer instead of nesting inside it — without this the calendar opens BEHIND
   any modal that hosts a DateField (the delivery-order and issue form dialogs).
   It belongs on the positioner, not the popup: Base UI's popup is
   `position: static`, and z-index is inert on a static element. Applied only
   when the caller opts in with `elevated`. */
._positioner_u5xry_8 { z-index: var(--z-dialog-popover); }

._trigger_u5xry_10 { }
._value_u5xry_11 { }
._placeholder_u5xry_12 { }
._popup_u5xry_13 { }

/* The icon-only trigger: a ghost calendar button that lights on hover / open. */
._iconTrigger_u5xry_16 {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--g500);
  cursor: pointer;
}

._iconTrigger_u5xry_16:hover,
._iconTrigger_u5xry_16[data-popup-open] {
  background: var(--color-surface);
  color: var(--navy);
}
._input_1pp6l_1 {
  padding: 8px 0;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--g800);
  border: none;
  border-bottom: 1px solid var(--description-border-color, var(--g200));
  background: transparent;
  width: 100%;
  outline: none;
  box-sizing: border-box;
}
/* ── SelectButton ─────────────────────────────────────────────────────────── */
._button_1gbfu_2 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  color: var(--g800);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  transition: border-color 120ms ease;
}

._button_1gbfu_2:hover {
  border-color: var(--g400);
}

._button_1gbfu_2:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._leftIcon_1gbfu_30 {
  flex-shrink: 0;
  color: var(--g500);
  display: flex;
  align-items: center;
}

._text_1gbfu_37 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._textPlaceholder_1gbfu_44 {
  color: var(--g500);
}

._textValue_1gbfu_48 {
  color: var(--g800);
}

._actions_1gbfu_52 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

._clearBtn_1gbfu_59 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--g500);
  cursor: pointer;
  border-radius: var(--r-sm);
  padding: 0;
  transition: background 100ms ease;
}

._clearBtn_1gbfu_59:hover {
  background: var(--g50);
  color: var(--g700);
}

._chevron_1gbfu_79 {
  color: var(--g500);
  flex-shrink: 0;
}
._container_1r8op_1 {
  position: relative;
  width: 100%;
}

._dropdown_1r8op_6 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-dropdown);
  z-index: var(--z-dialog-popover);
  max-height: 320px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

._dropdownBody_1r8op_22 {
  padding: 4px 0;
}

/* "—" clear option at the top of the list */
._clearItem_1r8op_27 {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--g500);
  text-align: left;
  box-sizing: border-box;
}

._clearItem_1r8op_27:hover {
  background: var(--g50);
}

/* Trade group section */
._group_1r8op_46 {
  display: flex;
  flex-direction: column;
}

._groupHeader_1r8op_51 {
  padding: 6px 12px;
  background: var(--g50);
  color: var(--g600);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--g100);
  border-bottom: 1px solid var(--g100);
}

/* Profession row inside a group */
._profRow_1r8op_63 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  transition: background 80ms ease;
}

._profRow_1r8op_63:hover {
  background: var(--g50);
}

/* Colored pill (trade icon + trade name) */
._profPill_1r8op_83 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-md);
  background: var(--g300);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 60%;
}

._profPillIcon_1r8op_99 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
}

._profPillLabel_1r8op_107 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Plain contractor/specialty text after the pill */
._profSub_1r8op_114 {
  font-size: var(--fs-sm);
  color: var(--g800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
._container_j90f7_1 {
  position: relative;
  width: 100%;
}

._dropdown_j90f7_6 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-dropdown);
  z-index: var(--z-dialog-popover);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

._dropdownBody_j90f7_22 {
  padding: 4px 0;
}

._dropdownItem_j90f7_26 {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--g800);
  text-align: left;
  box-sizing: border-box;
  transition: background 80ms ease;
}

._dropdownItem_j90f7_26:hover {
  background: var(--g50);
}

._dropdownItemText_j90f7_46 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._canvas_18kab_1 {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  user-select: none;
}

/* Read-only mount (issue drawer's location viewer): no edit affordance. */
._readOnly_18kab_10 {
  cursor: default;
}

._svgWrap_18kab_14 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._svgWrap_18kab_14 svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Overlay that exactly covers the rendered plan (positioned in JS from the
   measured SVG box). Pins are absolutely placed as a percentage of it, so they
   track plan features instead of the letterboxed container. */
._pinLayer_18kab_32 {
  position: absolute;
  pointer-events: none;
}

/* Name of the hovered/active area, revealed at its centre so the reader can
   tell which highlighted region is which. Read-only viewer only. */
._areaLabel_18kab_39 {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1px var(--s-2);
  border-radius: var(--r-md);
  background: var(--color-surface);
  border: 1px solid var(--blue);
  color: var(--navy);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-chip);
  z-index: var(--z-raised-2);
}

/* Pins sit on top of the SVG. `pointer-events: none` lets the click pass
   through to the polygon underneath, so tapping next to an existing pin
   adds another pin instead of being absorbed by the marker. */
._pin_18kab_32 {
  position: absolute;

  /* Center the marker tip on the click point. */
  transform: translate(-50%, -100%);
  pointer-events: none;

  /* One layer below `.areaLabel` so the hovered area's name reads on top of the
     pins instead of being hidden behind them (they overlap in the same area). */
  z-index: var(--z-raised-1);
  display: flex;
  filter: drop-shadow(var(--shadow-pin));
}
/* ── Container (relative anchor for the popper) ─────────────────────────── */
._container_1naaq_2 {
  position: relative;
  width: 100%;
}

/* ── Popper panel ────────────────────────────────────────────────────────── */

/* Pinned to the viewport (not the trigger) so the popper sits IN LINE with
   the issue dialog instead of dropping out of view from the trigger row's
   position deep inside the form. Issue dialog is centered, width 360px:
   - popper opens to its RIGHT (left edge = viewport center + 180 half-width
     + 8px gap)
   - top edge matches the dialog's topmost possible position (5vh, since the
     dialog max-height is ~63vh and is vertically centered) */
._popper_1naaq_16 {
  position: fixed;
  top: 50%;
  left: calc(50vw + 188px);
  transform: translateY(-50%);
  width: 380px;
  max-height: 63vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--r-xl);
  padding: 12px;
  box-shadow: var(--shadow-popover);
  z-index: var(--z-dialog-popover);
  box-sizing: border-box;
  overflow: hidden;
}

/* Top bar: Done + heading */
._popperHeader_1naaq_35 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-shrink: 0;
}

._doneBtn_1naaq_43 {
  padding: 4px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--g700);
  background: var(--color-surface);
  color: var(--g800);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 100ms ease;
}

._doneBtn_1naaq_43:hover {
  background: var(--g50);
}

._popperTitle_1naaq_60 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g700);
}

/* ── Tab switcher pill ────────────────────────────────────────────────────── */
._tabSwitcher_1naaq_67 {
  display: flex;
  align-items: center;
  background: var(--g50);
  border-radius: var(--r-pill);
  padding: 2px;
  margin-bottom: 10px;
  flex-shrink: 0;
  gap: 2px;
}

._tabBtn_1naaq_78 {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--g600);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  transition: background 120ms ease, color 120ms ease;
}

._tabBtnActive_1naaq_92 {
  background: var(--color-surface);
  color: var(--g800);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

/* ── Floor plan placeholder ──────────────────────────────────────────────── */
._floorPlanPlaceholder_1naaq_100 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--g400);
  text-align: center;
  padding: 24px 16px;
}

/* ── Floor plan: floor list view ─────────────────────────────────────────── */
._floorList_1naaq_112 {
  flex: 1;
}

._floorListBody_1naaq_116 {
  display: flex;
  flex-direction: column;
}

._floorListRow_1naaq_121 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--g100);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--g800);
  text-align: left;
}

._floorListRow_1naaq_121:hover {
  background: var(--g50);
}

._floorListNick_1naaq_140 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._floorListBadge_1naaq_147 {
  background: var(--info-tint);
  color: var(--info);
  border-radius: var(--r-2xl);
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Floor plan: drill-in detail view ────────────────────────────────────── */
._floorDetail_1naaq_158 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._floorDetailHeader_1naaq_165 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--g100);
}

._floorDetailBack_1naaq_172 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g700);
  cursor: pointer;
  text-align: left;
}

._floorDetailBack_1naaq_172:hover {
  background: var(--g50);
}

._floorDetailClear_1naaq_191 {
  border: none;
  background: transparent;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--info);
  cursor: pointer;
}

._floorDetailClear_1naaq_191:hover {
  text-decoration: underline;
}

._floorDetailSvgWrap_1naaq_205 {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g50);
  min-height: 220px;
  padding: 8px;
  overflow: hidden;
}

._floorDetailMsg_1naaq_217 {
  font-size: var(--fs-xs);
  color: var(--g400);
}

._floorDetailHint_1naaq_222 {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--g800);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--r-3xl);
  pointer-events: none;
  opacity: 0.85;
}

/* Scrollable list */
._listBody_1naaq_237 {
  flex: 1;
}

._emptyMsg_1naaq_241 {
  font-size: var(--fs-sm);
  color: var(--g400);
  text-align: center;
  padding: 16px 0;
  margin: 0;
}

/* ── Floor group ─────────────────────────────────────────────────────────── */
._floorGroup_1naaq_250 {
  margin-bottom: 4px;
}

._floorHeader_1naaq_254 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
  text-align: left;
  border-radius: var(--r-md);
  transition: background 100ms ease;
}

._floorHeader_1naaq_254:hover {
  background: var(--g50);
}

._floorChevron_1naaq_276 {
  flex-shrink: 0;
  color: var(--g500);
  transition: transform 150ms ease;
}

._floorChevronCollapsed_1naaq_282 {
  transform: rotate(-90deg);
}

._floorNick_1naaq_286 {
  flex: 1;
}

/* ── Area rows ───────────────────────────────────────────────────────────── */
._areaList_1naaq_291 {
  padding-left: 8px;
}

._areaRow_1naaq_295 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--g800);
  text-align: left;
  border-radius: var(--r-md);
  transition: background 100ms ease;
  box-sizing: border-box;
}

._areaRow_1naaq_295:hover {
  background: var(--g50);
}

._areaNick_1naaq_317 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._wrapper_v2de3_1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

._lockIcon_v2de3_9 {
  display: flex;
  align-items: center;
  color: var(--g700);
  flex-shrink: 0;
}

._label_v2de3_16 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g800);
  line-height: 1;
}

._hint_v2de3_23 {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--g500);
  line-height: 1;
}
._backdrop_1kkp1_1 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
}

._dialog_1kkp1_11 {
  background: var(--color-surface);
  border-radius: var(--r-xl);
  width: min(360px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);

  /* visible so popovers (date picker, profession dropdown, etc.) can
     escape the dialog edge. The dialog's rounded corners still render
     correctly because no child has a background that extends past them. */
  overflow: visible;
  position: relative;
  padding: 16px;
  box-sizing: border-box;
  gap: 0;
}

/* Focusable only to keep focus (and Escape) inside on a click on its body —
   not a control, so no ring of its own. */
._dialog_1kkp1_11:focus {
  outline: none;
}

._iconsRow_1kkp1_36 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

/* Description heading + input */
._descriptionSection_1kkp1_44 {
  margin-bottom: 4px;
}

/* The task a new issue is raised against — read-only context, not a field. */
._linkedTask_1kkp1_49 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._linkedTaskLabel_1kkp1_59 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._descriptionHeading_1kkp1_67 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g800);
  margin: 0 0 4px;
  padding: 0;
  line-height: 1.3;
}

._descriptionRequired_1kkp1_76 {
  color: var(--g500);
  margin-left: 1px;
}

/* Metadata section */
._metadataSection_1kkp1_82 {
  border-top: 1px solid var(--g100);
  border-bottom: 1px solid var(--g100);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  margin-top: 8px;
}

._metadataRow_1kkp1_92 {
  display: flex;
  align-items: center;
}

/* react-datepicker wraps customInput in its own divs that default to
   inline width. Force them to fill the row so the SelectButton trigger
   matches the other metadata rows. */
._metadataRow_1kkp1_92 .react-datepicker-wrapper,
._metadataRow_1kkp1_92 .react-datepicker__input-container {
  width: 100%;
  display: block;
}

/* Due date wrap: the ui/DateField fills the row, the × clear button sits
   inside on the trailing edge so it doesn't widen the row. */
._dueDateWrap_1kkp1_108 {
  position: relative;
  width: 100%;
}

._dueDateClear_1kkp1_113 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: var(--r-circle);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--g500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

._dueDateClear_1kkp1_113:hover {
  background: var(--g100);
  color: var(--g700);
}

/* Add Media disabled button — mirrors SelectButton visually */
._addMediaBtn_1kkp1_139 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  color: var(--g500);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: not-allowed;
  box-sizing: border-box;
  text-align: left;
  opacity: 0.5;
}

._addMediaText_1kkp1_158 {
  flex: 1;
  color: var(--g500);
}

/* Hairline divider above Private row */
._privateDivider_1kkp1_164 {
  height: 1px;
  background: var(--g100);
  margin: 4px 0 0;
}

._privateRow_1kkp1_170 {
  display: flex;
  align-items: center;
  padding: 10px 0 6px;
}

/* Footer */
._saveError_1kkp1_177 {
  margin: var(--s-2) 0 0;
  color: var(--color-error);
  font-size: var(--fs-sm);
}

._footer_1kkp1_183 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0;
  margin-top: 4px;
}

._cancelBtn_1kkp1_192 {
  background: transparent;
  border: none;
  color: var(--g700);
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--r-md);
}

._cancelBtn_1kkp1_192:hover {
  background: var(--g50);
}

._saveBtn_1kkp1_207 {
  background: var(--g800);
  border: none;
  color: var(--color-surface);
  padding: 6px 16px;
  border-radius: var(--r-lg);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
}

._saveBtn_1kkp1_207:disabled {
  background: var(--g300);
  cursor: not-allowed;
}

._saveBtn_1kkp1_207:not(:disabled):hover {
  opacity: 0.9;
}

/* The status chip's shape — one for the whole app. Colour is the caller's:
   each page maps its own statuses to a tone class.

   Padding is em-relative so it scales with the chip's own font-size: the
   scheduler re-scopes --fs-xs by its geometric zoom, so the padding magnifies
   in lockstep with the text. 0.25em/0.75em == 3px/9px at the 12px base. */
._pill_1abr5_7 {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.75em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
/* The delivery board header's settings kebab, shared. `html button:where(…)`
   weighs two type selectors: one more than the global reset's `button { … }`
   (which can load after this file), and less than any single class — so the
   base always beats the reset, and a call site's class always beats the base,
   whatever order the stylesheets load in. */
html button:where(._kebab_38w8o_6) {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  padding: 6px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--g400);
  cursor: pointer;
}

html button:where(._kebab_38w8o_6:hover:not(:disabled), ._kebab_38w8o_6[data-popup-open]) {
  color: var(--g600);
  background: var(--g50);
}

html button:where(._kebab_38w8o_6:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}
._list_1fkt4_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

._empty_1fkt4_7 {
  padding: var(--s-7);
  text-align: center;
  color: var(--g500);
  font-size: var(--fs-sm);
}

/* Infinite-scroll trigger — a 1px-tall marker the IntersectionObserver watches
   to reveal the next page. Kept at 1px (not 0) because some browsers don't
   deliver intersection callbacks for zero-area elements. Effectively invisible. */
._sentinel_1fkt4_17 {
  height: 1px;
}

/* A clickable card's chrome — hairline border, r-xl, hover and focus ring.
   Shared with the Monitor's list cards (`composes`). */
._cardChrome_1fkt4_23 {
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

._cardChrome_1fkt4_23:hover {
  border-color: var(--g300);
}

._cardChrome_1fkt4_23:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* One shape at every width: the name and its status share the top row — the
   status is what a manager triages on — the body's lines sit under them, and
   the risk readings close the card as a footer. */
._card_1fkt4_23 {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'icon title status'
    'icon body body'
    'icon foot foot';
  gap: var(--s-2) var(--s-3);
  align-items: start;
  width: 100%;
  text-align: left;
  padding: var(--s-4);
}

/* Wrapper so the unseen dot can sit to the left of the icon without affecting layout. */
._typeIconWrapper_1fkt4_60 {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

._typeIcon_1fkt4_60 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-lg);
}

/* "N unread comments" label — grey italic, shown in the title row. */
._unreadLabel_1fkt4_78 {
  font-size: var(--fs-sm);
  color: var(--g500);
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}

._tone_activity_1fkt4_86 {
  background: var(--info-tint);
  color: var(--info);
}

._tone_issue_1fkt4_91 {
  background: var(--sev-critical-bg);
  color: var(--sev-critical-text);
}

._body_1fkt4_96 {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

._title_1fkt4_104 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

/* An issue's icon-and-value fields under its name: due, location, trade. */
._meta_1fkt4_111 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--g500);
}

._metaItem_1fkt4_120 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

/* An activity's lines (ActivityLines): the trade's pill then plain text, the
   progress bar then plain text — few marks, one ink. */
._line_1fkt4_128 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--g600);
}

._lineText_1fkt4_137 {
  min-width: 0;
}

._meter_1fkt4_141 {
  --meter-width: 96px;
}

/* The % leads its line in a darker ink; its colour says nothing about
   status — the chip does. Tabular figures keep the bars' ends aligned. */
._progress_1fkt4_147 {
  min-width: 4ch;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--g800);
}

/* The footer: the risk readings (and an issue's Complete action), set off by
   a hairline — context, read after the status and the lines. */
._foot_1fkt4_156 {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--g100);
}

/* Status pill + kebab on one row (status to the left of the 3-dots). */
._statusRow_1fkt4_167 {
  grid-area: status;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* The issue's status control (Complete, Submit for review, Undo, Review), at
   the footer's trailing edge. */
._statusAction_1fkt4_177 {
  margin-left: auto;
}

._kebab_1fkt4_181 {
  /* In-flow as the first item of the right column (top-aligned card grid), so it
     sits ABOVE the status pill — not absolutely positioned over it. */
  width: 24px;
  height: 24px;
  padding: 0;
}

/* Destructive menu entry (Delete issue) — danger text, same hover affordance. */
._menuDanger_1fkt4_190 {
  color: var(--color-error);
}

/* Error line inside the delete-confirm modal (request failed, modal stays open). */
._deleteError_1fkt4_195 {
  margin: 0;
  color: var(--color-error);
  font-size: var(--fs-sm);
}

/* --- Title row: the name, its tags, an issue's inline toggles --- */
._titleRow_1fkt4_202 {
  grid-area: title;
  display: flex;
  flex-wrap: wrap; /* a long name keeps its width; the tags drop under it */
  align-items: center;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
}

._titleActions_1fkt4_211 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
}

/* Priority / safety state shown to a viewer who cannot change it — and the
   box the toggle buttons below share. */
._stateIcon_1fkt4_220 {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Small icon toggle buttons (critical + safety) — mirrors board.module.css .iconBtn */
._iconBtn_1fkt4_229 {
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 0;
  color: var(--g500);
}

._iconBtn_1fkt4_229:hover:not(:disabled) {
  background: var(--g100);
  color: var(--g700);
}

._iconBtn_1fkt4_229:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

._iconBtnFilled_1fkt4_250 {
  color: var(--amber);
}

._iconBtnSafety_1fkt4_254 {
  color: var(--brand-blue-light);
}

/* Keep the active fill colour on hover — the generic .iconBtn:hover would
   otherwise grey them out. */
._iconBtnFilled_1fkt4_250:hover:not(:disabled) {
  color: var(--amber);
}

._iconBtnSafety_1fkt4_254:hover:not(:disabled) {
  color: var(--brand-blue-light);
}

/* The reject reason. */
._reason_fvlf2_2 {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  padding: var(--s-2);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--g800);
  box-sizing: border-box;
}

._reason_fvlf2_2:focus {
  outline: none;
  border-color: var(--info);
}

._error_fvlf2_20 {
  margin: var(--s-2) 0 0;
  color: var(--color-error);
  font-size: var(--fs-sm);
}
/* An issue's one status control (Complete, Submit for review, Undo, Review) —
   the same button on the card's footer and in the drawer's head. */
._action_1i57g_3 {
  padding: 4px 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--g700);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}

._action_1i57g_3:hover {
  background: var(--g50);
  border-color: var(--g300);
}

._action_1i57g_3:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Top to bottom: the question (late only), the two dates, what moves. */
._body_12z2c_2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  color: var(--g800);
}

/* ── The late question: two answers as side-by-side cards ── */

._question_12z2c_11 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

._prompt_12z2c_21 {
  /* A legend sits outside the fieldset's flex flow, so it spaces itself. */
  margin-bottom: var(--s-2);
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._options_12z2c_30 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

._option_12z2c_30 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: 10px var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

._option_12z2c_30:hover { border-color: var(--g400); }

._option_12z2c_30[data-checked] {
  border-color: var(--navy);
  background: var(--navy-soft);
}

._option_12z2c_30:has(input:focus-visible) {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._option_12z2c_30 input {
  margin: 2px 0 0;
  accent-color: var(--navy);
}

/* The card shows the focus; the radio inside it does not ring it twice. */
._option_12z2c_30 input:focus-visible { outline: none; }

._optionText_12z2c_67 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._optionText_12z2c_67 strong {
  font-size: var(--fs-sm);
  color: var(--navy);
}

._optionText_12z2c_67 small {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--g600);
}

/* ── The ledger: planned and actual on one baseline ── */

._ledger_12z2c_86 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

._cell_12z2c_94 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--s-3) 14px;
}

._cell_12z2c_94 + ._cell_12z2c_94 { border-left: 1px solid var(--border); }

._cell_12z2c_94 dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
}

._cell_12z2c_94 dd { margin: 0; }

/* The same height as the date field's trigger, so a plain date and the
   picker next to it share a baseline. */
._value_12z2c_114 {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

/* Early reads as done, late as the ladder's overdue — the same pairs the
   rung chips use. */
._variance_12z2c_126 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}

._variance_12z2c_126[data-tone='early'],
._variance_12z2c_126[data-tone='onTime'] {
  background: var(--gantt-status-done-bg);
  color: var(--gantt-status-done-fg);
}

._variance_12z2c_126[data-tone='late'] {
  background: var(--area-status-overdue-bg);
  color: var(--area-status-overdue-fg);
}

/* ── What the answer moves ── */

._impact_12z2c_148 {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

._impactToggle_12z2c_154 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--s-3) 14px;
  cursor: pointer;
}

._impactToggle_12z2c_154 > :first-child { margin-top: 2px; }

._impactText_12z2c_164 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._impactText_12z2c_164 small {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--g600);
}

._declined_12z2c_179 {
  margin: -4px 14px var(--s-3) 40px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--area-status-overdue-fg);
}

._disclosure_12z2c_186 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: var(--s-2) 14px;
  border: 0;
  border-top: 1px solid var(--separator);
  background: var(--g50);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g700);
  text-align: start;
  cursor: pointer;
}

._disclosure_12z2c_186:hover { color: var(--navy); }

._disclosure_12z2c_186:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
}

/* The collapse affordance every expandable row uses (MatrixTable's .caret). */
._caret_12z2c_210 {
  display: inline-flex;
  transition: transform 0.15s ease;
}

._caret_12z2c_210[data-collapsed='true'] { transform: rotate(-90deg); }

._moves_12z2c_218 {
  max-height: 200px;
  border-top: 1px solid var(--separator);
}

._moveList_12z2c_223 {
  margin: 0;
  padding: 0;
  list-style: none;
}

._move_12z2c_218 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-3);
  padding: var(--s-2) 14px;
  font-size: var(--fs-xs);
}

._move_12z2c_218 + ._move_12z2c_218 { border-top: 1px solid var(--separator); }

._moveName_12z2c_239 {
  grid-column: 1 / -1;
  overflow: hidden;
  font-weight: 600;
  color: var(--g800);
  text-overflow: ellipsis;
  white-space: nowrap;
}

._moveDates_12z2c_248 {
  font-variant-numeric: tabular-nums;
  color: var(--g600);
}

._moveShift_12z2c_253 {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--g700);
}

._quiet_12z2c_259 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
}

/* Pushes the actions to the end of the footer row. */
._spacer_12z2c_266 { flex: 1; }

@media (width <= 440px) {
  ._options_12z2c_30,
  ._ledger_12z2c_86 { grid-template-columns: 1fr; }

  ._cell_12z2c_94 + ._cell_12z2c_94 {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
._list_1fkt4_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}._empty_1fkt4_7 {
  padding: var(--s-7);
  text-align: center;
  color: var(--g500);
  font-size: var(--fs-sm);
}/* Infinite-scroll trigger — a 1px-tall marker the IntersectionObserver watches
   to reveal the next page. Kept at 1px (not 0) because some browsers don't
   deliver intersection callbacks for zero-area elements. Effectively invisible. */._sentinel_1fkt4_17 {
  height: 1px;
}/* A clickable card's chrome — hairline border, r-xl, hover and focus ring.
   Shared with the Monitor's list cards (`composes`). */._cardChrome_1fkt4_23 {
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}._cardChrome_1fkt4_23:hover {
  border-color: var(--g300);
}._cardChrome_1fkt4_23:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}/* One shape at every width: the name and its status share the top row — the
   status is what a manager triages on — the body's lines sit under them, and
   the risk readings close the card as a footer. */._card_1fkt4_23 {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'icon title status'
    'icon body body'
    'icon foot foot';
  gap: var(--s-2) var(--s-3);
  align-items: start;
  width: 100%;
  text-align: left;
  padding: var(--s-4);
}/* Wrapper so the unseen dot can sit to the left of the icon without affecting layout. */._typeIconWrapper_1fkt4_60 {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}._typeIcon_1fkt4_60 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-lg);
}/* "N unread comments" label — grey italic, shown in the title row. */._unreadLabel_1fkt4_78 {
  font-size: var(--fs-sm);
  color: var(--g500);
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}._tone_activity_1fkt4_86 {
  background: var(--info-tint);
  color: var(--info);
}._tone_issue_1fkt4_91 {
  background: var(--sev-critical-bg);
  color: var(--sev-critical-text);
}._body_1fkt4_96 {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}._title_1fkt4_104 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}/* An issue's icon-and-value fields under its name: due, location, trade. */._meta_1fkt4_111 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--g500);
}._metaItem_1fkt4_120 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}/* An activity's lines (ActivityLines): the trade's pill then plain text, the
   progress bar then plain text — few marks, one ink. */._line_1fkt4_128 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--g600);
}._lineText_1fkt4_137 {
  min-width: 0;
}._meter_1fkt4_141 {
  --meter-width: 96px;
}/* The % leads its line in a darker ink; its colour says nothing about
   status — the chip does. Tabular figures keep the bars' ends aligned. */._progress_1fkt4_147 {
  min-width: 4ch;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--g800);
}/* The footer: the risk readings (and an issue's Complete action), set off by
   a hairline — context, read after the status and the lines. */._foot_1fkt4_156 {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--g100);
}/* Status pill + kebab on one row (status to the left of the 3-dots). */._statusRow_1fkt4_167 {
  grid-area: status;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}/* The issue's status control (Complete, Submit for review, Undo, Review), at
   the footer's trailing edge. */._statusAction_1fkt4_177 {
  margin-left: auto;
}._kebab_1fkt4_181 {
  /* In-flow as the first item of the right column (top-aligned card grid), so it
     sits ABOVE the status pill — not absolutely positioned over it. */
  width: 24px;
  height: 24px;
  padding: 0;
}/* Destructive menu entry (Delete issue) — danger text, same hover affordance. */._menuDanger_1fkt4_190 {
  color: var(--color-error);
}/* Error line inside the delete-confirm modal (request failed, modal stays open). */._deleteError_1fkt4_195 {
  margin: 0;
  color: var(--color-error);
  font-size: var(--fs-sm);
}/* --- Title row: the name, its tags, an issue's inline toggles --- */._titleRow_1fkt4_202 {
  grid-area: title;
  display: flex;
  flex-wrap: wrap; /* a long name keeps its width; the tags drop under it */
  align-items: center;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
}._titleActions_1fkt4_211 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
}/* Priority / safety state shown to a viewer who cannot change it — and the
   box the toggle buttons below share. */._stateIcon_1fkt4_220 {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}/* Small icon toggle buttons (critical + safety) — mirrors board.module.css .iconBtn */._iconBtn_1fkt4_229 {
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 0;
  color: var(--g500);
}._iconBtn_1fkt4_229:hover:not(:disabled) {
  background: var(--g100);
  color: var(--g700);
}._iconBtn_1fkt4_229:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}._iconBtnFilled_1fkt4_250 {
  color: var(--amber);
}._iconBtnSafety_1fkt4_254 {
  color: var(--brand-blue-light);
}/* Keep the active fill colour on hover — the generic .iconBtn:hover would
   otherwise grey them out. */._iconBtnFilled_1fkt4_250:hover:not(:disabled) {
  color: var(--amber);
}._iconBtnSafety_1fkt4_254:hover:not(:disabled) {
  color: var(--brand-blue-light);
}
/* Monitor list cards — Trusstor's main-page activity / issue items, drawn with
   the Activities & Issues page's card chrome (hairline border, r-xl, hover),
   filled with the Live Summary tile grey on the rail's white. */
._card_1zl90_4 {
  display: flex;
  flex-direction: column;
  background: var(--g50);
  color: var(--navy);
}

._head_1zl90_12 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: 10px 10px 10px var(--s-3);
}

._spacer_1zl90_19 {
  flex: 1;
}

._activityTitle_1zl90_23 {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* The activity's trade line sits under a hairline, Trusstor-style. */
._foot_1zl90_33 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--g100);
}

._trade_1zl90_42 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

._contractor_1zl90_49 {
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._areasDone_1zl90_56 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g700);
}

._areasDone_1zl90_56 svg {
  color: var(--color-success-mid);
}

._due_1zl90_70 {
  gap: var(--s-1);
  flex-shrink: 0;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--chip-neutral-tint);
  color: var(--g600);
}

._dueOverdue_1zl90_79 {
  background: var(--chip-warning);
  color: var(--red);
}

._issueTitle_1zl90_84 {
  padding: 0 var(--s-3) 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

._details_1zl90_91 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 10px var(--s-3) var(--s-3);
  border-top: 1px solid var(--g100);
}

._details_1zl90_91:empty {
  display: none;
}

._detail_1zl90_91 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--g600);
}

._detail_1zl90_91 > svg {
  flex-shrink: 0;
  color: var(--g500);
}

/* The issue's status move (Complete / Review / …), bottom-right under a hairline. */
._statusAction_1zl90_117 {
  display: flex;
  justify-content: flex-end;
  padding: 10px var(--s-3);
  border-top: 1px solid var(--g100);
}
._thumbButton_1esv5_1 {
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
}

._thumbButton_1esv5_1:hover {
  opacity: 0.85;
}

._img_1esv5_17 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._placeholder_1esv5_24 {
  width: 96px;
  height: 96px;
  background: var(--g100);
  border-radius: var(--r-lg);
  animation: _pulse_1esv5_1 1.4s ease-in-out infinite;
}

@keyframes _pulse_1esv5_1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

._errorBox_1esv5_37 {
  width: 96px;
  height: 96px;
  background: var(--g50);
  border: 1px dashed var(--g200);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

._errorIcon_1esv5_48 {
  font-size: var(--fs-2xl);
  color: var(--g400);
}
._empty_1thd0_1 {
  color: var(--g500);
  font-size: var(--fs-xs);
}

._list_1thd0_6 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._item_1thd0_15 {
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--g800);
  background: var(--color-surface);
}

._itemPending_1thd0_24 {
  opacity: 0.5;
}

._itemHeader_1thd0_28 {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--g500);
  margin-bottom: 4px;
}

._textContent_1thd0_36 {
  white-space: pre-wrap;
  word-break: break-word;
}

._nonTextContent_1thd0_41 {
  color: var(--g500);
  font-style: italic;
}
._composer_1ba0z_1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--g100);
  background: var(--color-surface);
  flex-shrink: 0;
}

._attachBtn_1ba0z_12 {
  width: 36px;
  height: 36px;
  border-radius: var(--r-circle);
  border: 1px solid var(--g200);
  background: var(--color-surface);
  color: var(--g700);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

._attachBtn_1ba0z_12:hover:not(:disabled) {
  background: var(--g50);
}

._attachBtn_1ba0z_12:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._fileInputHidden_1ba0z_38 {
  display: none;
}

._textarea_1ba0z_42 {
  flex: 1;
  resize: none;
  padding: 8px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--g800);
  outline: none;
  box-sizing: border-box;
}

._textarea_1ba0z_42:focus {
  border-color: var(--info);
}

._sendBtn_1ba0z_59 {
  padding: 8px 16px;
  border: none;
  border-radius: var(--r-lg);
  background: var(--g800);
  color: var(--color-surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

._sendBtn_1ba0z_59:disabled {
  background: var(--g300);
  cursor: not-allowed;
}

._sendBtn_1ba0z_59:not(:disabled):hover {
  opacity: 0.9;
}

/* A full-width line under the row: a refused photo's reason, the length count. */
._footnote_1ba0z_82 {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-xs);
}

._error_1ba0z_90 {
  color: var(--color-error);
}

._counter_1ba0z_94 {
  margin-left: auto;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}
._backdrop_621u9_1 {
  position: fixed;
  inset: 0;
  background: var(--lightbox-backdrop);
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
}

._imageWrap_621u9_11 {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

._image_621u9_11 {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

._loadingTxt_621u9_26 {
  color: var(--color-surface);
  font-size: var(--fs-sm);
}

._closeBtn_621u9_31 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-circle);
  border: none;
  background: var(--lightbox-button-bg);
  color: var(--color-surface);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}

._navBtn_621u9_46 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--r-circle);
  border: none;
  background: var(--lightbox-button-bg);
  color: var(--color-surface);
  font-size: var(--fs-3xl);
  line-height: 1;
  cursor: pointer;
}
._prevBtn_621u9_60 { left: 16px; }
._nextBtn_621u9_61 { right: 16px; }
._closeBtn_621u9_31:hover, ._navBtn_621u9_46:hover { opacity: 0.85; }
/* Fills the remaining drawer height: header + scrollable thread + pinned composer. */
._chat_b2rr9_2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._title_b2rr9_10 {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._scroll_b2rr9_19 {
  flex: 1;
  min-height: 0;
}
/* The dropdown popup card shared by SingleSelect, MultiSelect, GroupedSelect
   and PhoneField: surface, border, shadow, type, and a flex column so the
   ScrollArea inside fills the popup's max-height and scrolls. Each popup
   composes it and sets only its own size. */._surface_mm5gd_5 {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  padding: var(--s-1);
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._trigger_16n8e_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}

._trigger_16n8e_1:hover:not(:disabled) { border-color: var(--g400); }
._trigger_16n8e_1[data-popup-open] { border-color: var(--info); }

._trigger_16n8e_1:disabled {
  background: var(--g100);
  color: var(--g500);
  cursor: not-allowed;
}

._value_16n8e_26 { flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
._placeholder_16n8e_27 { color: var(--g400); }

._icon_16n8e_29 {
  color: var(--g500);
  margin-inline-start: var(--s-2);
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
._icon_16n8e_29 svg { width: 100%; height: 100%; display: block; }
._icon_16n8e_29 svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* Sit above dialog/drawer surfaces (z-dialog = 1000) so the popup is usable
   when a SingleSelect is embedded inside a modal — otherwise the portaled
   popup renders behind the overlay and clicks fall through to the backdrop. */
._positioner_16n8e_45 {
  z-index: var(--z-dialog-popover);
}

._popup_16n8e_49 {
  min-width: var(--anchor-width, 220px);
  max-height: 280px;
}

._item_16n8e_55 {
  display: flex;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  outline: none;
}

._item_16n8e_55[data-highlighted] { background: var(--info-tint-soft); }
._item_16n8e_55[data-selected]    { background: var(--info-tint); color: var(--info); }
/* Shared right-side drawer shell — Base UI Dialog backdrop + sliding panel +
   a corner close button. The component (Drawer.tsx) drives enter/exit through
   Base UI's [data-starting-style]/[data-ending-style] transition idiom; the
   legacy keyframe modifiers further down remain for the feature drawers that
   still compose these classes directly (ActivitiesPage). */._overlay_1udj8_7 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
  transition: opacity 180ms ease-out;
}._overlay_1udj8_7[data-starting-style] {
  opacity: 0;
}._overlay_1udj8_7[data-ending-style] {
  opacity: 0;
  transition: opacity 200ms ease-in;
}._panel_1udj8_24 {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: var(--z-dialog);
  width: min(520px, 92vw);

  /* The panel's inner padding and gap live on the scroller's viewport; a
     panelClassName retunes them through these. */
  --drawer-pad: var(--s-6);
  --drawer-gap: var(--s-5);

  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}._panelScroll_1udj8_44 {
  flex: 1;
}._panelBody_1udj8_48 {
  display: flex;
  flex-direction: column;
  padding: var(--drawer-pad);
  gap: var(--drawer-gap);
}._panel_1udj8_24[data-starting-style] {
  transform: translateX(100%);
}._panel_1udj8_24[data-ending-style] {
  transform: translateX(100%);
  transition: transform 200ms cubic-bezier(0.55, 0, 0.7, 0.1);
}/* Respect users who prefer reduced motion — appear/disappear instantly
   (no transition means Base UI unmounts without waiting). */@media (prefers-reduced-motion: reduce) {
  ._overlay_1udj8_7,
  ._panel_1udj8_24 {
    transition: none;
  }
}/* ── Legacy phase classes — composed by the ActivitiesPage feature
   drawers that still hand-roll their shells. The component above no longer
   uses them. ─────────────────────────────────────────────────────────────── */._legacyOverlay_1udj8_77 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  justify-content: flex-end;
  background: var(--modal-backdrop);
}._legacyPanel_1udj8_86 {
  position: relative;
  width: min(520px, 92vw);
  height: 100%;
  padding: var(--s-6);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}._overlayOpen_1udj8_98    { animation: _overlayFadeIn_1udj8_1 180ms ease-out forwards; }._panelOpen_1udj8_99      { animation: _panelSlideIn_1udj8_1  220ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }@keyframes _overlayFadeIn_1udj8_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}@keyframes _panelSlideIn_1udj8_1 {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}@media (prefers-reduced-motion: reduce) {
  ._overlayOpen_1udj8_98,
  ._panelOpen_1udj8_99 {
    animation: none;
  }
}/* Shared icon-button base (transparent square button with a hover fill),
   composed by the corner close and any in-panel icon buttons. */._iconBtn_1udj8_120 {
  display: inline-flex;
  padding: var(--s-1);
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  color: var(--g500);
  cursor: pointer;
}._iconBtn_1udj8_120:hover {
  background: var(--g100);
}._close_1udj8_134 {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);

  /* Over the body's ScrollArea: a later positioned sibling, it would otherwise
     paint over the button and take its clicks. */
  z-index: var(--z-raised-1);
}/* ── Companion panel (the Drawer's `companion` slot) ─────────────────────
   Docked immediately left of the drawer panel, its own scroll — the issue
   drawer's "set locations" idiom, generalized. Lives INSIDE the popup (Base
   UI dismisses on outside presses), so the popup never scrolls or clips: the
   body scrolls in `.panelScroll`. */._companion_1udj8_151 {
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: min(460px, 46vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}/* Enter slides out from behind the drawer; exit reverses it. The parent
   keeps the panel mounted through the exit and unmounts on animationend. */._companionOpen_1udj8_166 {
  animation: _companionIn_1udj8_1 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}._companionClosing_1udj8_170 {
  animation: _companionOut_1udj8_1 180ms ease-in forwards;
  pointer-events: none;
}@keyframes _companionIn_1udj8_1 {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}@keyframes _companionOut_1udj8_1 {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(24px);
  }
}@media (prefers-reduced-motion: reduce) {
  ._companionOpen_1udj8_166,
  ._companionClosing_1udj8_170 {
    animation: none;
  }
}._companionClose_1udj8_206 {
}._companionScroll_1udj8_210 {
  flex: 1;
  min-height: 0;
}._companionBody_1udj8_215 {
  padding: var(--s-6);
}

/* The right-side drawer shell lives in the shared ui/Drawer primitive; these
   compose it so ActivityDrawer keeps its own class names, structure (focus trap,
   companion panel) and deferred slide-out, with the shell defined in one place.
   `.iconBtn` is composed here too because the companion panel's close reuses it. */

/* The legacy flex-shell classes: this drawer hand-rolls its own lifecycle
   (and hosts the locations companion inside the overlay's flex row), so it
   keeps the pre-Base-UI shell the shared component no longer uses. */
._overlay_12mqh_9     { }
._panel_12mqh_10       { }
._overlayOpen_12mqh_11 { }
._panelOpen_12mqh_12   { }
._iconBtn_12mqh_4     { }
._close_12mqh_14       { }

._head_12mqh_16 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-right: var(--s-7);
}

._id_12mqh_23 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--g500);
}

._titleLine_12mqh_30 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

._title_12mqh_30 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--navy);
}

._pills_12mqh_44 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* The issue's status control, under the pills. */
._statusAction_12mqh_51 {
  align-self: flex-start;
}

/* The neutral tone for the flag chips (ui/Pill) beside the status chip. */
._metaTone_12mqh_56 {
  background: var(--g100);
  color: var(--g600);
}

._divider_12mqh_61 {
  height: 1px;
  background: var(--separator);
}

._grid_12mqh_66 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin: 0;
}

/* Label and value inline on one row; the fixed-width label keeps the values
   aligned in a tidy column. */
._field_12mqh_75 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--s-3);
}

._fieldLabel_12mqh_82 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 110px;
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._fieldIcon_12mqh_95 {
  display: inline-flex;
  color: var(--g400);
}

._fieldValue_12mqh_100 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

/* ── "View set locations" — toggle (in drawer) opens a companion panel ──────── */
._locToggle_12mqh_107 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  align-self: flex-start;
  margin-top: calc(var(--s-2) * -1);
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--info);
  cursor: pointer;
}

._locToggle_12mqh_107:hover {
  text-decoration: underline;
}

._locToggleActive_12mqh_127 {
  text-decoration: underline;
}

._locChevron_12mqh_131 {
  display: inline-flex;
  transition: transform 150ms ease;
}

/* Right-chevron flips to point back at the drawer while the panel is open. */
._locChevronOpen_12mqh_137 {
  transform: rotate(180deg);
}

/* Companion panel: docked immediately left of the drawer, its own scroll,
   so the drawer's comment thread is never displaced. */
._locCompanion_12mqh_143 {
  position: relative;
  width: min(460px, 46vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

/* Enter slides out from behind the drawer; exit reverses it. The parent keeps
   the panel mounted through the exit animation and unmounts on animationend. */
._locCompanionOpen_12mqh_156 {
  animation: _locCompanionIn_12mqh_1 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

._locCompanionClosing_12mqh_160 {
  animation: _locCompanionOut_12mqh_1 180ms ease-in forwards;
  pointer-events: none;
}

@keyframes _locCompanionIn_12mqh_1 {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes _locCompanionOut_12mqh_1 {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._locCompanionOpen_12mqh_156,
  ._locCompanionClosing_12mqh_160 {
    animation: none;
  }

  ._locChevron_12mqh_131 {
    transition: none;
  }
}

._locCompanionHead_12mqh_200 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--separator);
}

._locCompanionTitle_12mqh_208 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._locCompanionClose_12mqh_217 {
}

._locPickerBar_12mqh_221 {
  display: flex;
  padding: var(--s-2) var(--s-5);
  background: var(--g50);
  border-bottom: 1px solid var(--g100);
}

._locCanvas_12mqh_228 {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: var(--s-3);
  background: var(--color-surface);
}

._locMsg_12mqh_239 {
  font-size: var(--fs-xs);
  color: var(--g400);
}

/* Names of the highlighted areas on the active floor. Hovering/tapping a chip
   highlights its region on the plan (and vice versa) — the swatch and border
   darken to match the plan's active-area shade. */
._locAreas_12mqh_247 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-top: 1px solid var(--g100);
}

._locAreaChip_12mqh_257 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 7px;
  border-radius: var(--r-pill);
  background: var(--g50);
  border: 1px solid var(--g100);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g700);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

._locAreaChip_12mqh_257:hover,
._locAreaChip_12mqh_257._locAreaChipActive_12mqh_274 {
  background: var(--blue-tint);
  border-color: var(--blue);
  color: var(--navy);
}

._locAreaSwatch_12mqh_280 {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--floor-area-selected-fill);
  border: 1px solid var(--g300);
  transition: background 120ms ease, border-color 120ms ease;
}

._locAreaChip_12mqh_257:hover ._locAreaSwatch_12mqh_280,
._locAreaChip_12mqh_257._locAreaChipActive_12mqh_274 ._locAreaSwatch_12mqh_280 {
  background: var(--floor-area-active-fill);
  border-color: var(--blue);
}

/* Placed after the chip/swatch base rules so the override actually wins the
   cascade (equal specificity → later source order). */
@media (prefers-reduced-motion: reduce) {
  ._locAreaChip_12mqh_257,
  ._locAreaSwatch_12mqh_280 {
    transition: none;
  }
}

._section_12mqh_305 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._sectionTitle_12mqh_311 {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._description_12mqh_320 {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g700);
}

._riskDetail_12mqh_327 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

._riskRow_12mqh_334 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._riskLabel_12mqh_340 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._riskReasons_12mqh_346 {
  font-size: var(--fs-xs);
  color: var(--g600);
}

._depDetail_12mqh_351 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

._depGroup_12mqh_358 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._depGroupLabel_12mqh_364 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
  margin-bottom: 2px;
}

._depRow_12mqh_371 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding: 2px 0;
}

._depName_12mqh_379 {
  font-size: var(--fs-sm);
  color: var(--navy);
}

._depMeta_12mqh_384 {
  font-size: var(--fs-xs);
  color: var(--g600);
  white-space: nowrap;
}
/* A small chip outlined in gold: gold text + gold border on a transparent fill. */
._tag_4nz1b_2 {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--critical-path-tag-fg);
  background: transparent;
  border: 1px solid var(--critical-path-tag-fg);
  padding: 0 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
._row_15r9n_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

/* Compact rows live inside a fixed grid column — fill it and let the pill's
   own min-width:0 + ellipsis do the truncation. */
._rowCompact_15r9n_10 {
  max-width: 100%;
}

/* Narrow table cells (Productivity Activities `truncate`): shrink to the cell
   so the pill's 220px cap + the contractor's ellipsis clip, and a hover tooltip
   (added in ProfessionPill) reveals the full value — the admin Tags cell pattern. */
._rowTruncate_15r9n_17 {
  max-width: 100%;
  overflow: hidden;
}

._contractor_15r9n_22 {
  color: var(--g600);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Tones for the shared chip (ui/Pill) — one per display-status tone. */
._tone_ok_1ttwk_2 {
  color: var(--color-success);
  background: var(--color-success-bg);
}

._tone_warn_1ttwk_7 {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}

._tone_danger_1ttwk_12 {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}

._tone_done_1ttwk_18 {
  color: var(--color-success);
  background: var(--color-success-bg);
}

/* Awaiting review is orange, as on the area board (issue review stage). */
._tone_review_1ttwk_24 {
  color: var(--area-status-review-fg);
  background: var(--area-status-review-bg);
}

._tone_neutral_1ttwk_29 {
  color: var(--g500);
  background: var(--g100);
}
._section_qzyhv_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) 0;
}

._title_qzyhv_8 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._line_qzyhv_17 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._value_qzyhv_23 {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  font-size: var(--fs-md);
  font-weight: 700;
}

._label_qzyhv_31 {
  color: var(--navy);
}

._dot_qzyhv_35 {
  color: var(--g400);
}

._reason_qzyhv_39 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--g500);
}

/* Severity tones — mirror RiskBadge.module.css so cards and drawer match. */
._none_qzyhv_46 {
  color: var(--g300);
}

._low_qzyhv_50 {
  color: var(--g500);
}

._mid_qzyhv_54 {
  color: var(--color-warn);
}

._high_qzyhv_58 {
  color: var(--red);
}
._root_1dpxn_1  { display: flex; flex-direction: column; min-height: 0; }

._list_1dpxn_3  {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 4px 16px 0;
  border-bottom: 1px solid var(--separator);
  background: var(--color-surface);
}

._tab_1dpxn_12 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g600);
  cursor: pointer;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
._tab_1dpxn_12[data-selected]       { color: var(--g800); }
._tab_1dpxn_12:hover:not([data-disabled]) { color: var(--g800); background: var(--g50); }

/* Base UI marks a disabled tab with `data-disabled`, never the native attribute. */
._tab_1dpxn_12[data-disabled]       { opacity: 0.5; cursor: default; }
._tab_1dpxn_12:focus-visible        { outline: 2px solid var(--info-tint); outline-offset: -2px; }

._indicator_1dpxn_33 {
  position: absolute;
  bottom: -1px;
  left: var(--active-tab-left);
  width: var(--active-tab-width);
  height: 2px;
  background: var(--info);
  transition: left 180ms ease, width 180ms ease;
}

._panel_1dpxn_43 { flex: 1; min-height: 0; display: flex; flex-direction: column; }
._select_8zfmx_1 {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  background: var(--g50);
  color: var(--g800);
  cursor: pointer;
  min-width: 0;
}._lagInput_8zfmx_15 {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px 5px;
  font-size: var(--fs-xs);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
  text-align: right;
}._lagInput_8zfmx_15:focus-visible,
._select_8zfmx_1:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._delBtn_8zfmx_32 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px;
  color: var(--g500);
  cursor: pointer;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._delBtn_8zfmx_32:hover {
  background: var(--gantt-status-blocked-bg);
  color: var(--gantt-status-blocked-fg);
}

._backdrop_71l63_1 {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 38%);
  z-index: var(--z-drawer-backdrop);
  animation: _backdropFade_71l63_1 180ms ease-out;
}

@keyframes _backdropFade_71l63_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

._drawer_71l63_14 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: 440px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-drawer-right);
  animation: _drawerSlide_71l63_1 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes _drawerSlide_71l63_1 {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  ._backdrop_71l63_1,
  ._drawer_71l63_14 {
    animation: none;
  }

  ._subtaskRow_71l63_40 {
    transition: none;
  }
}

._header_71l63_45 {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}

._headerTop_71l63_51 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* Identity block: which group the task belongs to, what it is called, when it
   runs. The name is the drawer's title (it used to be the generic "Task
   details", with the name repeated at the top of the Overview). */

._identity_71l63_62 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Where the task sits — group, then the summaries above it — as ONE quiet
   line over the title. It never wraps: crumbs shrink (outer ones first) and
   ellipsize, the nearest parent keeps the most room. */
._trail_71l63_71 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--g500);
  white-space: nowrap;
}

._crumb_71l63_84 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
}

/* The nearest parent is the most telling crumb, so it gives up width last. */
._crumb_71l63_84:last-child { flex-shrink: 0.2; }

._crumbText_71l63_95 { overflow: hidden; text-overflow: ellipsis; }

._crumbSep_71l63_97 { flex-shrink: 0; color: var(--g400); }

._crumbLink_71l63_99 { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
._crumbLink_71l63_99:hover { color: var(--g800); text-decoration: underline; }

._groupDot_71l63_102 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  flex-shrink: 0;
}

/* The task's name is the drawer's subject — the one big line in the header. */
._title_71l63_110 {
  margin: 4px 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--g800);
  overflow-wrap: anywhere;
}

._headerDates_71l63_119 {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--g600);
  font-variant-numeric: tabular-nums;
}

._iconBtn_71l63_126 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: var(--r-lg);
  cursor: pointer;
  color: var(--g600);
  display: inline-flex;
}

._iconBtn_71l63_126:hover {
  background: var(--g100);
  color: var(--g800);
}

._headerMeta_71l63_142 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

._body_71l63_149 { flex: 1; }

._bodyContent_71l63_151 {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._field_71l63_158 { display: flex; flex-direction: column; gap: 4px; }

._field_71l63_158 label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}

._field_71l63_158 input,
._field_71l63_158 select,
._field_71l63_158 textarea {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 9px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
}

._field_71l63_158 input:focus-visible,
._field_71l63_158 select:focus-visible,
._field_71l63_158 textarea:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}

._field_71l63_158 input:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}

/* Why a field above went inert: the work has been observed, so its plan is a
   record. See docs/specs/2026-09-20-observed-work-is-frozen-amendment.md. */
._freezeHint_71l63_195 {
  margin: -4px 0 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* Read-only group chip shown for a sub-task: a sub-task inherits its parent's
   group, so there's no GroupSelect — the group is fixed. Sits in the same field
   slot the select would occupy so the form layout stays aligned. */
._groupReadonlyChip_71l63_204 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  color: var(--g800);
  background: var(--g50);
}

._row_71l63_216 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* GroupSelect — replaces the native <select> for the Group field so we can
   offer an inline "create new group" footer. */
._groupSelectTrigger_71l63_220 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 9px;
  background: var(--color-surface);
  color: var(--g800);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

._groupSelectTrigger_71l63_220:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}

._groupSelectValue_71l63_243 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._groupSelectPopup_71l63_249 {
  min-width: 240px;
}

._groupSelectCreateRow_71l63_253 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 6px 8px 4px;
}

._groupSelectCreateInput_71l63_261 {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 8px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
  width: 100%;
  box-sizing: border-box;
}

._groupSelectCreateInput_71l63_261:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}

._groupSelectCreateBtn_71l63_278 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--info-tint);
  color: var(--info);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

._groupSelectCreateBtn_71l63_278:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._groupSelectCreateBtn_71l63_278:hover:not(:disabled) {
  background: var(--info);
  color: var(--color-surface);
}

._toggle_71l63_305 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--g700);
  cursor: pointer;
}

/* ── Task colour picker (edit tab) ─────────────────────────────────────────── */
._swatchRow_71l63_315 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

._swatch_71l63_315 {
  appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

._swatch_71l63_315:focus-visible,
._swatchCustom_71l63_333:focus-within {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}

._swatchSelected_71l63_338 {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--info);
}

._swatchDefault_71l63_342 { background: var(--color-surface); }

._swatchDefaultMark_71l63_344 {
  width: 18px;
  height: 1.5px;
  border-radius: var(--r-sm);
  background: var(--g400);
  transform: rotate(-45deg);
}

._swatchCustom_71l63_333 {
  background: var(--g100);
  color: var(--g500);
  overflow: hidden;
}

._swatchCustomMark_71l63_358 {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

._swatchCustomInput_71l63_365 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  box-sizing: border-box;
}

/* A drawer section: a hairline above, and its small uppercase title. Every
   section of the drawer (dependencies, sub-tasks, the log) composes these. */
._panelSection_71l63_379 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--separator);
}

._panelSectionTitle_71l63_385 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}

._depsSection_71l63_394 {
}

._depsTitle_71l63_398 {
}

._depsSubtitle_71l63_402 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
  margin: 8px 0 6px;
}

._depRow_71l63_409 {
  display: grid;
  grid-template-columns: 1fr 90px 64px 28px;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}

._depTaskName_71l63_417 {
  font-size: var(--fs-xs);
  color: var(--g800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._depSelect_71l63_425 {
}

._depLag_71l63_429 {
}

._depDelBtn_71l63_433 {
}

._depAddRow_71l63_437 {
  display: grid;
  grid-template-columns: 1fr 90px 64px auto auto;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}

._depAddBtn_71l63_445 {
  appearance: none;
  background: var(--info-tint);
  border: 1px solid var(--info);
  color: var(--info);
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
}

._depAddBtn_71l63_445:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._depAddToggle_71l63_462 {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--g600);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
}

._depAddToggle_71l63_462:hover:not(:disabled) {
  background: var(--g50);
  border-color: var(--info);
  color: var(--info);
}

._depAddToggle_71l63_462:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._depAddToggleIcon_71l63_489 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: var(--fs-sm);
  line-height: 1;
  font-weight: 600;
}

._depAddCancel_71l63_500 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px;
  color: var(--g500);
  cursor: pointer;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

._depAddCancel_71l63_500:hover {
  background: var(--g100);
  color: var(--g800);
}

._depEmpty_71l63_518 {
  font-size: var(--fs-xs);
  color: var(--g500);
  font-style: italic;
  margin: 4px 0;
}

._readonlyDepsList_71l63_525 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

._readonlyDepChip_71l63_527 {
  font-size: var(--fs-xs);
  color: var(--g800);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
._readonlyDepMeta_71l63_538 { color: var(--g500); }

._footer_71l63_540 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--separator);
  background: var(--g50);
  flex-shrink: 0;
}

._spacer_71l63_550 { flex: 1; }

/* Outlined, not filled: a solid red Delete was the loudest thing in the drawer,
   louder than the Overview's own step. Destructive stays findable, never the
   headline. 1px less padding pays for the border, so the box keeps its size. */
._deleteBtn_71l63_555  { background: var(--color-surface); color: var(--color-error); border: 1px solid var(--color-error-border); padding: 6px 13px; border-radius: var(--r-lg); cursor: pointer; font-size: var(--fs-xs); font-weight: 600; }
._deleteBtn_71l63_555:hover:not(:disabled) { background: var(--color-error-bg); }
._deleteBtn_71l63_555:disabled { opacity: 0.45; cursor: not-allowed; }
._cancelBtn_71l63_558  { background: transparent; border: 0; padding: 7px 14px; cursor: pointer; color: var(--g700); font-size: var(--fs-xs); }
._saveBtn_71l63_559    { background: var(--info); border: 0; color: var(--color-surface); padding: 7px 14px; border-radius: var(--r-lg); cursor: pointer; font-size: var(--fs-xs); font-weight: 600; }
._saveBtn_71l63_559:disabled { opacity: 0.5; cursor: not-allowed; }

._fieldError_71l63_562 { color: var(--red); font-size: var(--fs-2xs); margin-top: 2px; }

._tabsRoot_71l63_564 { flex: 1; min-height: 0; display: flex; flex-direction: column; }
._createBody_71l63_565 { flex: 1; min-height: 0; display: flex; flex-direction: column; }
._tabsList_71l63_566 { /* layout/border handled by the Tabs primitive's own module */ }

/* ── Overview tab ─────────────────────────────────────────────────────────── */

._overviewActions_71l63_570 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
._actionHelper_71l63_571    { margin: 0; font-size: var(--fs-xs); color: var(--red); }

/* ── Subtasks (summary task drawer) ───────────────────────────────────────── */
._subtaskSection_71l63_574 {
}

._subtaskTitle_71l63_578 {
}
._subtaskList_71l63_581 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

._subtaskRow_71l63_40 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
._subtaskRow_71l63_40:hover { background: var(--g50); border-color: var(--g400); }

._subtaskName_71l63_599 {
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._subtaskMeta_71l63_608 { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
._subtaskDates_71l63_609 { font-size: var(--fs-xs); color: var(--g600); white-space: nowrap; }
._subtaskProgress_71l63_610 { font-size: var(--fs-xs); font-weight: 600; color: var(--g700); min-width: 34px; text-align: right; }

._readonlyGrid_71l63_612    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
._readonlyValue_71l63_613   { margin: 0; font-size: var(--fs-sm); color: var(--g800); }
._readonlyNotes_71l63_614   { margin: 0; font-size: var(--fs-sm); color: var(--g800); white-space: pre-wrap; }
/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. */

/* The field skin, shared by free-text inputs (via composes) and the trigger. */
._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}

/* Room for the caret affordance inside the field. */
._withCaret_1h55q_8 { padding-right: 32px; }

._combo_1h55q_8 { position: relative; }

/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */
._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */
._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }

/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */
._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }

._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }

/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */
._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}

._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}

._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}

/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */
._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}

._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}

._opt_1h55q_9:hover { background: var(--status-planned-bg); }

/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */
._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}

/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */
._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }
/* The evidence an item asks for, as a row of small tags shared by the Edit
   tab's list, the checklist rows and the capture form — one look for "this
   check needs a photo" wherever it is said. */
._tags_ouv29_4 { display: flex; gap: 4px; flex-wrap: wrap; }

._tag_ouv29_4 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-2xs);
  line-height: 16px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--g50);
  color: var(--g600);
  border: 1px solid var(--separator);
  white-space: nowrap;
}

/* Required evidence blocks the tick, so it is the one that stands out. */
._required_ouv29_21 { color: var(--status-for-review-text); background: var(--status-for-review-bg); border-color: transparent; }
._section_1exce_1  { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--separator); display: flex; flex-direction: column; gap: 8px; }
._title_1exce_2    { margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--g500); font-weight: 600; }
._subtitle_1exce_3 { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--g600); }
._provenance_1exce_4 { margin: 0; font-size: var(--fs-xs); color: var(--g600); }
._empty_1exce_5    { margin: 0; padding: 12px; text-align: center; font-size: var(--fs-xs); color: var(--g500); border: 1px dashed var(--g200); border-radius: var(--r-md); }
._error_1exce_6    { margin: 0; font-size: var(--fs-xs); color: var(--red); }

/* One row per item: its number, its words and tags, and its actions. Rows are
   separated by hairlines rather than boxed, so the list reads as one list. */
._list_1exce_10     { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
._list_1exce_10 > li + li { border-top: 1px solid var(--separator); }
._item_1exce_12     { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; padding: 6px 0; font-size: var(--fs-sm); color: var(--g800); }
._itemLocked_1exce_13 { grid-template-columns: 18px 1fr; }
._ordinal_1exce_14  { font-size: var(--fs-xs); color: var(--g500); font-variant-numeric: tabular-nums; padding-top: 3px; text-align: right; }
._itemMain_1exce_15 { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 1px; line-height: 1.35; }
._itemContent_1exce_16 { overflow-wrap: anywhere; }
._itemGuidance_1exce_17 { overflow-wrap: anywhere; font-style: italic; color: var(--g600); }
._itemActions_1exce_18 { display: flex; gap: 2px; }
._iconBtn_1exce_19  { width: 28px; height: 28px; padding: 0; border-color: transparent; }
._caretUp_1exce_20  { display: inline-flex; transform: rotate(180deg); transition: transform 0.15s ease; }

._editor_1exce_22   { padding: 10px 12px; border: 1px solid var(--separator); border-radius: var(--r-md); background: var(--g50); display: flex; flex-direction: column; gap: 10px; }
._field_1exce_23    { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--g700); }
._field_1exce_23 input { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 8px; font: inherit; font-size: var(--fs-sm); background: var(--color-surface); }
._field_1exce_23 input:focus-visible { outline: 2px solid var(--info-tint); border-color: var(--info); }

/* The evidence each tick must carry: a label column and a control column,
   so the three kinds read as one table rather than three stacked forms. */
._evidenceGrid_1exce_29 { display: flex; flex-direction: column; gap: 6px; }
._segRow_1exce_30   { display: grid; grid-template-columns: minmax(96px, auto) 1fr; align-items: center; gap: 8px; }
._segLabel_1exce_31 { font-size: var(--fs-xs); color: var(--g600); }

._editorFooter_1exce_33 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
._footerNote_1exce_34 { margin: 0 auto 0 0; font-size: var(--fs-xs); color: var(--g600); }
._addBtn_1exce_35   { align-self: flex-start; gap: 4px; }
._amendBtn_1exce_36 { align-self: flex-start; }
._row_1g35g_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._chip_1g35g_9 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--chip-bg);
  color: var(--chip-fg, var(--color-surface));
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-md);
  font-weight: 500;
  line-height: 1;
  max-width: 100%;
}

._icon_1g35g_22 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chip-fg, var(--color-surface));
  flex: 0 0 auto;
}

._icon_1g35g_22 svg {
  display: block;
  width: 16px;
  height: 16px;
}

._icon_1g35g_22 svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

._icon_1g35g_22 svg [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

._text_1g35g_44 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

._contractor_1g35g_51 {
  color: var(--g600);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
/* The dropdown popup card shared by SingleSelect, MultiSelect, GroupedSelect
   and PhoneField: surface, border, shadow, type, and a flex column so the
   ScrollArea inside fills the popup's max-height and scrolls. Each popup
   composes it and sets only its own size. */._surface_mm5gd_5 {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  padding: var(--s-1);
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}
._trigger_8y8bf_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}
._trigger_8y8bf_1:hover:not(:disabled) { border-color: var(--g400); }

._trigger_8y8bf_1:disabled {
  background: var(--g100);
  color: var(--g500);
  cursor: not-allowed;
}
._trigger_8y8bf_1[data-popup-open] { border-color: var(--info); }

._value_8y8bf_25 { flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
._placeholder_8y8bf_26 { color: var(--g400); }

._icon_8y8bf_28 {
  color: var(--g500);
  margin-inline-start: var(--s-2);
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
._icon_8y8bf_28 svg { width: 100%; height: 100%; display: block; }
._icon_8y8bf_28 svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* The positioner is the fixed/portaled element; it must float above overlays
   such as the scheduler task drawer (--z-drawer) — mirrors the shared Menu
   wrapper. Without this the popup renders behind the drawer. */
._positioner_8y8bf_44 {
  z-index: var(--z-popover);
  outline: none;
}

/* When the select is rendered inside a Base UI Dialog, the portaled popup
   must clear the dialog layer (--z-dialog: 1000) or it opens invisibly
   behind the backdrop. Applied via the `inDialog` prop. */
._positionerInDialog_8y8bf_52 {
  z-index: var(--z-dialog-popover);
}

._popup_8y8bf_56 {
  min-width: var(--anchor-width, 240px);
  max-height: 320px;
}

._group_8y8bf_62 + ._group_8y8bf_62 { border-top: 1px solid var(--separator); margin-top: var(--s-1); padding-top: var(--s-1); }

._groupHeader_8y8bf_64 {
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g500);
}

._item_8y8bf_72 { display: flex; align-items: center; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); cursor: pointer; outline: none; }
._item_8y8bf_72[data-highlighted] { background: var(--info-tint-soft); }
._item_8y8bf_72[data-selected]    { background: var(--info-tint); color: var(--info); }

/* Leading "clear" item (clearable pickers) — muted, sits above the groups. */
._clearItem_8y8bf_77 {
  display: flex;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  outline: none;
  color: var(--g500);
}
._clearItem_8y8bf_77[data-highlighted] { background: var(--info-tint-soft); }
/* Trigger, value, popup, group headers, options and the clear item are all
   owned by the shared GroupedSelect (see GroupedSelect.module.css). Only the
   disabled-state hint below the picker is local to ProfessionPicker. */
._hint_1qujr_4 {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--g500);
}
/* The track's width is the consumer's to set, through a custom property
   rather than `width` itself, so no two stylesheets fight over one property. */
._track_y0gf7_3 {
  display: inline-block;
  flex-shrink: 0;
  width: var(--meter-width, 100%);
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--g100);
  overflow: hidden;
}

._fill_y0gf7_13 {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--info);
}
/* The checklist card: the promise's definition of done, ticked as the work is
   inspected. One frame around the whole list; the rows inside are separated
   by hairlines rather than boxed again, so the card reads as one checklist,
   not a stack of cards. */
._card_n9hrp_5    { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--separator); border-radius: var(--r-lg); background: var(--color-surface); }
._header_n9hrp_6  { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
._title_n9hrp_7   { margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--g500); font-weight: 600; }
._count_n9hrp_8   { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--g600); font-variant-numeric: tabular-nums; }
._countOpen_n9hrp_9 { color: var(--status-for-review-text); font-weight: 600; }
._countDone_n9hrp_10 { color: var(--gantt-status-done-fg); font-weight: 600; }
._note_n9hrp_11    { margin: 0; font-size: var(--fs-xs); color: var(--g600); }

._list_n9hrp_13    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
._list_n9hrp_13 > li + li { border-top: 1px solid var(--separator); }
._item_n9hrp_15    { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }

/* The row: checkbox, then the words with the evidence tags under them. */
._row_n9hrp_18     { display: grid; grid-template-columns: 16px 1fr; gap: 3px 10px; align-items: start; font-size: var(--fs-sm); color: var(--g800); cursor: pointer; line-height: 1.35; }
._row_n9hrp_18 > :first-child { margin-top: 2px; }
._rowText_n9hrp_20 { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
._rowDisabled_n9hrp_21 { cursor: default; }
._rowChecked_n9hrp_22 ._content_n9hrp_22 { color: var(--g500); }

/* Guidance sits in the words' column, under no checkbox. */
._guidance_n9hrp_25 { margin: 0; padding: 8px 0 8px 26px; font-size: var(--fs-sm); color: var(--g600); font-style: italic; line-height: 1.35; }

/* Everything below the row lines up with the words, not the checkbox. */
._indent_n9hrp_28  { margin-left: 26px; }

._evidence_n9hrp_30 { display: flex; gap: 10px; align-items: flex-start; }
._evidenceText_n9hrp_31 { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--g700); min-width: 0; }
._comment_n9hrp_32 { white-space: pre-wrap; overflow-wrap: anywhere; }
._board_n9hrp_33   { color: var(--g600); }
._by_n9hrp_34      { color: var(--g500); }
._thumb_n9hrp_35   { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--separator); flex-shrink: 0; background: var(--g50); }
._thumbRow_n9hrp_36 { display: flex; align-items: center; gap: 8px; }

/* The capture: what this tick has to carry, filled in before it is saved. */
._capture_n9hrp_39 { padding: 10px 12px; background: var(--g50); border: 1px solid var(--separator); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 10px; }
._captureNote_n9hrp_40 { margin: 0; font-size: var(--fs-xs); color: var(--g600); }
._field_n9hrp_41   { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
._fieldLabel_n9hrp_42 { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--g700); }

._input_n9hrp_44 {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 8px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--g800);
  background: var(--color-surface);
}
._input_n9hrp_44 { min-width: 0; }
._input_n9hrp_44:focus-visible { outline: 2px solid var(--info-tint); border-color: var(--info); }
._error_n9hrp_56   { font-size: var(--fs-xs); color: var(--red); }

/* The 黒板's three fields side by side, framed like the plate they fill. */
._blackboard_n9hrp_59 { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 8px; border: 1px dashed var(--g300); border-radius: var(--r-md); background: var(--color-surface); }
._captureFooter_n9hrp_60 { display: flex; justify-content: flex-end; gap: 8px; }

/* A reader's tick: the state as a mark, not a control. */
._readMark_n9hrp_63 { display: inline-flex; align-items: center; justify-content: center; color: var(--gantt-status-done-fg); }
._root_12ll0_1 {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  touch-action: none;
  user-select: none;
}

._control_12ll0_10 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

._control_12ll0_10[data-disabled] {
  cursor: default;
  opacity: 0.55;
}

._track_12ll0_23 {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--g100);
}

/* Filled portion from min → current value. */
._indicator_12ll0_32 {
  position: absolute;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--info);
}

._thumb_12ll0_39 {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  border: 2px solid var(--info);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

._thumb_12ll0_39:hover {
  transform: scale(1.12);
}

._thumb_12ll0_39[data-dragging] {
  transform: scale(1.18);
}

._thumb_12ll0_39:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  ._thumb_12ll0_39 { transition: none; }
  ._thumb_12ll0_39:hover, ._thumb_12ll0_39[data-dragging] { transform: none; }
}
/* What both looks are made of: a floor button beside a wrapping track of zone
   cells. Each surface brings the rest (its sizes, borders, colours) through
   its own classes. */
._row_175w0_4 {
  display: flex;
  align-items: stretch;
}

._floorName_175w0_9 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._floorCount_175w0_16 {
  font-size: var(--fs-3xs);
  color: var(--g400);
  font-variant-numeric: tabular-nums;
}

._track_175w0_22 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
}

/* Vertical pan keeps scrolling the drawer; a sweep is horizontal. */
._cell_175w0_30 { touch-action: pan-y; }

._floorBtn_175w0_32:focus-visible,
._cell_175w0_30:focus-visible { outline: 2px solid var(--info); }

/* While a sweep is in flight the whole grid reads as one gesture surface. */
._sweeping_175w0_36,
._sweeping_175w0_36 ._cell_175w0_30 { cursor: crosshair; }
/* Frameless: the commit block is the card, and a card inside a card in a
   440 px drawer reads as clutter. */
._section_1rzmw_3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._header_1rzmw_9 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

._title_1rzmw_16 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--g800);
}

._bigPercent_1rzmw_23 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--info);
  font-variant-numeric: tabular-nums;
}

/* ── State line under the slider ──────────────────────────────────────────── */
._stateLine_1rzmw_31 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.4;
}

/* Subtle "auto from areas" cue — quieter than the manual-override / assign hints. */
._autoHint_1rzmw_39 {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--g500);
  line-height: 1.4;
}

/* Shared reset for the inline link-style buttons (assign hint + edit-areas). */
._linkButton_1rzmw_47 {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--info);
}

._assignLink_1rzmw_56 {
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
}
._assignLink_1rzmw_56:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }

/* ── Area block — status meter + the tap-cycle / drag-spread status board ─── */
._areaBlock_1rzmw_65 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--separator);
}

/* ── Meter — passive key with live counts (not a tool). One bar, one segment
     per status present, each as wide as its share of the areas: never wraps,
     never lists a zero. Segments animate their width as a stroke rolls the
     counts. ────────────────────────────────────────────────────────────────── */
._meter_1rzmw_77 {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 28px;
  border-radius: var(--r-md);
  overflow: hidden;
}

._segment_1rzmw_86 {
  /* flex-grow is the count (inline). Basis 0 so widths are pure proportion;
     the min-width keeps the mark + count legible on the thinnest slice. */
  flex: 0 1 0;
  min-width: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  transition: flex-grow 160ms ease;
}
._segment_1rzmw_86:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
._segment_1rzmw_86:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
._segment_1rzmw_86:only-child  { border-radius: var(--r-md); }

._segmentCount_1rzmw_106 {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The label yields first: a slim segment keeps its mark and count and lets
   the word truncate (the full text stays in the title / a11y label). */
._segmentLabel_1rzmw_114 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Micro row — the one-line how-to ──────────────────────────────────────── */
._microRow_1rzmw_122 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

._microHint_1rzmw_129 {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--g500);
  line-height: 1.4;
}

/* ── Board — one flush track of zone cells per floor, over the shared
     FloorZoneGrid (which owns the row / track structure and the sweep). ───── */
._board_1rzmw_138 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}

._floorRow_1rzmw_145 {
  gap: 8px;
  animation: _floorIn_1rzmw_1 260ms ease both;
}

@keyframes _floorIn_1rzmw_1 {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Floor handle — press to cycle the whole floor's status as one big cell. */
._floorBtn_1rzmw_156 {
  appearance: none;
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding: 2px 6px 2px 2px;
  background: transparent;
  border: 0;
  border-right: 2px solid var(--g200);
  border-radius: 0;
  transition: border-color 140ms ease, background-color 140ms ease;
}
._floorBtn_1rzmw_156:focus-visible { outline-offset: 1px; border-radius: var(--r-md); }

._floorName_1rzmw_173 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g600);
  line-height: 1.2;
}

._floorCount_1rzmw_180 {
  font-weight: 600;
  line-height: 1.2;
}

/* The track — cells sit flush so each floor reads as a mini status meter. */
._track_1rzmw_186 { gap: 3px; }

/* Cell — tap to cycle its status; drag across cells to spread the anchor's. */
._cell_1rzmw_189 {
  appearance: none;
  flex: 1 1 76px;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 9px;
  border: 0;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  transition: background-color 160ms ease, color 160ms ease, transform 80ms ease;
}

/* Only the reporting board's buttons press — a reader's board renders plain divs. */
button._cell_1rzmw_189, button._floorBtn_1rzmw_156 { cursor: pointer; }
button._cell_1rzmw_189:active { transform: scale(0.97); }
._cell_1rzmw_189:focus-visible { outline-offset: 1px; }

._cellName_1rzmw_213 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tag hours the IoT counted in the area — quieter than the name, never wraps,
   pushed against the mark so the name keeps the room. */
._cellHours_1rzmw_221 {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--fs-2xs);
  font-weight: 600;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._cellMark_1rzmw_231 { display: inline-flex; align-items: center; flex: 0 0 auto; }

/* Hover-capable pointers only (touch just taps): the tap-preview dashes on cells
   and the floor-handle affordance both live here. */
@media (hover: hover) {
  /* Hover = tap preview: a dashed stroke in the colour of what the tap does
     (`--tap-preview`, below), whatever Trusstor currently calls the area. */
  button._cell_1rzmw_189:hover { outline: 2px dashed var(--tap-preview); outline-offset: -2px; }
  button._floorBtn_1rzmw_156:hover { background: var(--g100); border-right-color: var(--g400); border-radius: var(--r-md) 0 0 var(--r-md); }
}

/* What a tap on the cell does (`nextAreaAction`, one class per action) → its
   preview colour: green where it reports the area done, the neutral it falls
   back to where it takes a report back, review orange where a Limited user
   submits it for review — and where a manager's tap opens that review. */
._tapsComplete_1rzmw_246       { --tap-preview: var(--gantt-status-done-fg); }
._tapsPlanned_1rzmw_247        { --tap-preview: var(--gantt-status-planned-fg); }

._tapsReadyForReview_1rzmw_249,
._tapsReview_1rzmw_250         { --tap-preview: var(--area-status-review-fg); }

/* Mid-stroke preview — "wet paint": already recolored, dashed until committed. */
button._cell_1rzmw_189._wet_1rzmw_253 {
  outline: 2px dashed var(--g500);
  outline-offset: -2px;
  opacity: 0.85;
}

/* ── Tone pairs, one per `AREA_TONE` (nothing promised yet paints as planned,
     never started but late as overdue) — shared by meter segments and cells.
     The same gantt status tokens as the task pill, so the drawer speaks one
     color language.
     Compound (element + status) selectors make the colour win by SPECIFICITY
     rather than source order — it no longer depends on being declared last. ── */
._cell_1rzmw_189._planned_1rzmw_265,  ._segment_1rzmw_86._planned_1rzmw_265  { background: var(--gantt-status-planned-bg);  color: var(--gantt-status-planned-fg); }

/* Trusstor's own readings of the area: started is yellow, awaiting review is
   orange, late is red — delayed and overdue share it, the flag mark tells them
   apart. */
._cell_1rzmw_189._progress_1rzmw_270, ._segment_1rzmw_86._progress_1rzmw_270 { background: var(--area-status-progress-bg); color: var(--area-status-progress-fg); }
._cell_1rzmw_189._delayed_1rzmw_271,  ._segment_1rzmw_86._delayed_1rzmw_271  { background: var(--area-status-delayed-bg);  color: var(--area-status-delayed-fg); }
._cell_1rzmw_189._overdue_1rzmw_272,  ._segment_1rzmw_86._overdue_1rzmw_272  { background: var(--area-status-overdue-bg);  color: var(--area-status-overdue-fg); }
._cell_1rzmw_189._review_1rzmw_273,   ._segment_1rzmw_86._review_1rzmw_273   { background: var(--area-status-review-bg);   color: var(--area-status-review-fg); }
._cell_1rzmw_189._done_1rzmw_274,     ._segment_1rzmw_86._done_1rzmw_274     { background: var(--gantt-status-done-bg);    color: var(--gantt-status-done-fg); }

@media (prefers-reduced-motion: reduce) {
  ._floorRow_1rzmw_145 { animation: none; }
  ._cell_1rzmw_189, ._floorBtn_1rzmw_156, ._segment_1rzmw_86 { transition: none; }
}
._root_uptt8_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

._body_uptt8_8 {
  flex: 1;
}

._bodyContent_uptt8_12 {
  padding: 16px 20px 20px;
}

._loading_uptt8_16 {
  padding: 24px 20px;
  color: var(--g500);
  font-size: var(--fs-sm);
}

._intro_uptt8_22 {
  margin: 0 0 14px;
  color: var(--g600);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Field / administrative: one switch, the rest of the review follows it. */
._kind_uptt8_30 { margin-bottom: 14px; }

._row_uptt8_32 {
  display: grid;
  grid-template-columns: 22px 92px 1fr;
  column-gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--separator);
}

._mark_uptt8_41 {
  width: 18px;
  height: 18px;
  border-radius: var(--r-circle);
  display: grid;
  place-items: center;
  margin-top: 1px;
  font-size: var(--fs-2xs);
  box-sizing: border-box;
}

._ok_uptt8_52 ._mark_uptt8_41 { background: var(--gantt-status-done-bg); color: var(--gantt-status-done-fg); }
._need_uptt8_53 ._mark_uptt8_41 { border: 2px dashed var(--status-for-review-text); }

/* A fact has nothing to fill, so it gets a dot — an empty ring would read as a
   checkbox still waiting for its ✓. */
._info_uptt8_57 ._mark_uptt8_41::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--g300);
}

._label_uptt8_65 {
  padding-top: 2px;
  color: var(--g500);
  font-size: var(--fs-sm);
}

._need_uptt8_53 ._label_uptt8_65 { color: var(--navy); font-weight: 600; }

._value_uptt8_73 {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._inline_uptt8_79 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._prompt_uptt8_86 {
  margin: 0 0 8px;
  color: var(--g700);
}

._map_uptt8_91 { margin-top: 8px; }

._muted_uptt8_93 { color: var(--g500); }

._hint_uptt8_95 {
  display: block;
  margin-top: 4px;
  color: var(--g500);
  font-size: var(--fs-xs);
}

._good_uptt8_102 { color: var(--gantt-status-done-fg); }

._failed_uptt8_104 { color: var(--status-rejected-text); }

._linkBtn_uptt8_106 {
  border: 0;
  background: none;
  padding: 0;
  color: var(--info);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

._note_uptt8_118 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--g50);
  border: 1px solid var(--g100);
  color: var(--g700);
  font-size: var(--fs-sm);
}

._warn_uptt8_131 { margin: 8px 0 0; background: var(--status-for-review-bg); border-color: transparent; color: var(--status-for-review-text); }
._bad_uptt8_132 { background: var(--status-rejected-bg); border-color: transparent; color: var(--status-rejected-text); }

._check_uptt8_134 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

._footer_uptt8_141 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--g100);
  background: var(--color-surface);
}

._grow_uptt8_150 { flex: 1; }
._grid_1atvc_1 {
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-surface);
}

._floor_1atvc_8 { border-bottom: 1px solid var(--separator); }

._floor_1atvc_8:last-child { border-bottom: 0; }

._floorBtn_1atvc_12 {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  min-height: 32px;
  border: 0;
  border-right: 1px solid var(--separator);
  background: var(--g50);
  color: var(--g600);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;

  /* The count appears and grows as a sweep runs; the row must not reflow
     around it, so the name keeps the full width and nothing wraps. */
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

._floorBtn_1atvc_12:hover { color: var(--info); }
._floorBtn_1atvc_12[aria-pressed='true'] { color: var(--info); font-weight: 600; }

/* A badge in the corner, out of the name's way: it comes and goes with the
   selection, so it must not take part in the row's layout. */
._floorCount_1atvc_40 {
  position: absolute;
  top: 1px;
  right: 3px;
  line-height: 1;
  pointer-events: none;
}

._zone_1atvc_48 {
  flex: 1 0 48px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-left: 1px solid var(--separator);
  background: none;
  color: var(--g600);
  font: inherit;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

._zone_1atvc_48:hover:not(:disabled) { background: var(--g50); }

/* Read-only: the map still reads, it just no longer asks. The selected cells
   keep their fill — they are the answer the field already gave. */
._zone_1atvc_48:disabled,
._floorBtn_1atvc_12:disabled {
  cursor: default;
  opacity: 0.75;
}

/* Mid-sweep preview — "wet paint": already shown in its next state, dashed
   until the release commits it. */
._zone_1atvc_48._wet_1atvc_74 {
  outline: 2px dashed var(--info);
  outline-offset: -2px;
  opacity: 0.85;
}

._zone_1atvc_48[aria-pressed='true'] {
  background: var(--info-tint);
  color: var(--info);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--info);
}

._zone_1atvc_48:focus-visible,
._floorBtn_1atvc_12:focus-visible { outline-offset: -2px; }

._empty_1atvc_90 {
  margin: 0;
  color: var(--g500);
  font-size: var(--fs-sm);
}
._body_18ppi_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._field_18ppi_7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._fieldLabel_18ppi_13 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g700);
}

/* ── Granularity segmented control ──────────────────────────────────────── */
._segmented_18ppi_20 {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--g100);
  border-radius: var(--r-md);
  align-self: flex-start;
}

._segment_18ppi_20 {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--g600);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}
._segment_18ppi_20:hover:not(:disabled) { color: var(--g800); }

._segment_18ppi_20[aria-pressed='true'] {
  background: var(--color-surface);
  color: var(--g800);
  box-shadow: var(--shadow-card);
}
._segment_18ppi_20:disabled { opacity: 0.45; cursor: not-allowed; }

._segmentCount_18ppi_53 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  background: var(--g100);
  border-radius: var(--r-pill);
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}
._segment_18ppi_20[aria-pressed='true'] ._segmentCount_18ppi_53 { background: var(--g50); color: var(--g700); }

/* ── Number inputs (default + per-row) ──────────────────────────────────── */
._durationInput_18ppi_66 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._durationInput_18ppi_66 input {
  width: 56px;
  padding: 5px 8px;
  font-size: var(--fs-xs);
  text-align: right;
  color: var(--g800);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

._durationInput_18ppi_66 input:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

._unit_18ppi_88 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}

/* ── Per-subtask rows ───────────────────────────────────────────────────── */
._subtasks_18ppi_94 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._rowList_18ppi_100 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._rowScroll_18ppi_109 {
  max-height: 220px;
}

._row_18ppi_100 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
}

._rowOrder_18ppi_122 {
  flex: 0 0 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g600);
  background: var(--g100);
  border-radius: var(--r-pill);
}

._rowLabel_18ppi_135 {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--g800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Scheduling mode ────────────────────────────────────────────────────── */
._modeHint_18ppi_146 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.4;
}

/* Link config + live diagram, side by side. */
._linkRow_18ppi_154 {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Shared link controls (dependencies mode): one type + gap for the chain,
   stacked as a compact column next to the diagram. */
._linkControls_18ppi_162 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

._linkSelect_18ppi_169 {
  padding: 5px 6px;
  font-size: var(--fs-xs);
  color: var(--g800);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

._linkSelect_18ppi_169:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

/* ── Mode diagram (3 bars, chained vs parallel) ─────────────────────────── */
._modeDiagram_18ppi_184 {
  display: block;
  padding: 8px 10px;
  background: var(--g50);
  border-radius: var(--r-md);
  box-sizing: content-box;
}

._diagramBar_18ppi_192 {
  fill: var(--info);
  opacity: 0.8;

  /* Geometry properties are CSS-animatable (SVG2) — the bars glide between
     the chained and parallel layouts; unsupported browsers just snap. */
  transition: x 200ms ease, y 200ms ease, width 200ms ease;
}

/* Mirror the real Gantt dependency arrows (Arrows.module.css: g500 stroke). */
._diagramArrow_18ppi_202 {
  stroke: var(--g500);
  stroke-width: 1.5;
  fill: none;
}
._diagramArrowHead_18ppi_207 { fill: var(--g500); }

/* Push the footer actions to the right (Modal footer is flex). */
._footerSpacer_18ppi_210 { flex: 1; }
._wrap_npune_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._toolbar_npune_7 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

._summary_npune_14 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
}

._splitBtn_npune_20 {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  cursor: pointer;
  white-space: nowrap;
}

._splitBtn_npune_20:hover { text-decoration: underline; }

._note_npune_35 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.5;
}
/* The Overview's first block. It leads the tab by POSITION and by what it
   holds — the ladder, the board, the promise rows — so it needs no frame of its
   own; a boxed card only drew a line around content the rest of the tab already
   flows with. */
._root_1y70k_5 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The promise rows. `ReviewRow` brings its own grid from the review's module —
   this only spaces the group and styles what sits inside a row's value cell. */
._rows_1y70k_13 {
  display: flex;
  flex-direction: column;
}

._rowGap_1y70k_18 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

._rowValue_1y70k_25 {
  font-size: var(--fs-sm);
  color: var(--g800);
}

._rowPrompt_1y70k_30 {
  font-size: var(--fs-sm);
  color: var(--g500);
}

._rowNote_1y70k_35 {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}

._rowLink_1y70k_41 {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--info);
  cursor: pointer;
  white-space: nowrap;
}

._rowLink_1y70k_41:hover { text-decoration: underline; }

/* The area map, unfolded in place — this is where the Locations tab went. */
._areaEditor_1y70k_56 {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--separator);
}

/* What stands between the task and its step — the step itself is the drawer
   footer's button (`TaskStepActions`). */
._hint_1y70k_64 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}

._good_1y70k_73 { color: var(--gantt-status-done-fg); }
._select_8zfmx_1 {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  background: var(--g50);
  color: var(--g800);
  cursor: pointer;
  min-width: 0;
}._lagInput_8zfmx_15 {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px 5px;
  font-size: var(--fs-xs);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
  text-align: right;
}._lagInput_8zfmx_15:focus-visible,
._select_8zfmx_1:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._delBtn_8zfmx_32 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px;
  color: var(--g500);
  cursor: pointer;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._delBtn_8zfmx_32:hover {
  background: var(--gantt-status-blocked-bg);
  color: var(--gantt-status-blocked-fg);
}._backdrop_71l63_1 {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 38%);
  z-index: var(--z-drawer-backdrop);
  animation: _backdropFade_71l63_1 180ms ease-out;
}@keyframes _backdropFade_71l63_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}._drawer_71l63_14 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: 440px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-drawer-right);
  animation: _drawerSlide_71l63_1 240ms cubic-bezier(0.16, 1, 0.3, 1);
}@keyframes _drawerSlide_71l63_1 {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}@media (prefers-reduced-motion: reduce) {
  ._backdrop_71l63_1,
  ._drawer_71l63_14 {
    animation: none;
  }

  ._subtaskRow_71l63_40 {
    transition: none;
  }
}._header_71l63_45 {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}._headerTop_71l63_51 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}/* Identity block: which group the task belongs to, what it is called, when it
   runs. The name is the drawer's title (it used to be the generic "Task
   details", with the name repeated at the top of the Overview). */._identity_71l63_62 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}/* Where the task sits — group, then the summaries above it — as ONE quiet
   line over the title. It never wraps: crumbs shrink (outer ones first) and
   ellipsize, the nearest parent keeps the most room. */._trail_71l63_71 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--g500);
  white-space: nowrap;
}._crumb_71l63_84 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
}/* The nearest parent is the most telling crumb, so it gives up width last. */._crumb_71l63_84:last-child { flex-shrink: 0.2; }._crumbText_71l63_95 { overflow: hidden; text-overflow: ellipsis; }._crumbSep_71l63_97 { flex-shrink: 0; color: var(--g400); }._crumbLink_71l63_99 { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }._crumbLink_71l63_99:hover { color: var(--g800); text-decoration: underline; }._groupDot_71l63_102 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  flex-shrink: 0;
}/* The task's name is the drawer's subject — the one big line in the header. */._title_71l63_110 {
  margin: 4px 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--g800);
  overflow-wrap: anywhere;
}._headerDates_71l63_119 {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--g600);
  font-variant-numeric: tabular-nums;
}._iconBtn_71l63_126 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: var(--r-lg);
  cursor: pointer;
  color: var(--g600);
  display: inline-flex;
}._iconBtn_71l63_126:hover {
  background: var(--g100);
  color: var(--g800);
}._headerMeta_71l63_142 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}._body_71l63_149 { flex: 1; }._bodyContent_71l63_151 {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}._field_71l63_158 { display: flex; flex-direction: column; gap: 4px; }._field_71l63_158 label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}._field_71l63_158 input,
._field_71l63_158 select,
._field_71l63_158 textarea {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 9px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
}._field_71l63_158 input:focus-visible,
._field_71l63_158 select:focus-visible,
._field_71l63_158 textarea:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._field_71l63_158 input:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}/* Why a field above went inert: the work has been observed, so its plan is a
   record. See docs/specs/2026-09-20-observed-work-is-frozen-amendment.md. */._freezeHint_71l63_195 {
  margin: -4px 0 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}/* Read-only group chip shown for a sub-task: a sub-task inherits its parent's
   group, so there's no GroupSelect — the group is fixed. Sits in the same field
   slot the select would occupy so the form layout stays aligned. */._groupReadonlyChip_71l63_204 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  color: var(--g800);
  background: var(--g50);
}._row_71l63_216 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }/* GroupSelect — replaces the native <select> for the Group field so we can
   offer an inline "create new group" footer. */._groupSelectTrigger_71l63_220 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 9px;
  background: var(--color-surface);
  color: var(--g800);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}._groupSelectTrigger_71l63_220:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._groupSelectValue_71l63_243 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._groupSelectPopup_71l63_249 {
  min-width: 240px;
}._groupSelectCreateRow_71l63_253 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 6px 8px 4px;
}._groupSelectCreateInput_71l63_261 {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 8px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
  width: 100%;
  box-sizing: border-box;
}._groupSelectCreateInput_71l63_261:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._groupSelectCreateBtn_71l63_278 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--info-tint);
  color: var(--info);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}._groupSelectCreateBtn_71l63_278:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}._groupSelectCreateBtn_71l63_278:hover:not(:disabled) {
  background: var(--info);
  color: var(--color-surface);
}._toggle_71l63_305 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--g700);
  cursor: pointer;
}/* ── Task colour picker (edit tab) ─────────────────────────────────────────── */._swatchRow_71l63_315 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }._swatch_71l63_315 {
  appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}._swatch_71l63_315:focus-visible,
._swatchCustom_71l63_333:focus-within {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._swatchSelected_71l63_338 {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--info);
}._swatchDefault_71l63_342 { background: var(--color-surface); }._swatchDefaultMark_71l63_344 {
  width: 18px;
  height: 1.5px;
  border-radius: var(--r-sm);
  background: var(--g400);
  transform: rotate(-45deg);
}._swatchCustom_71l63_333 {
  background: var(--g100);
  color: var(--g500);
  overflow: hidden;
}._swatchCustomMark_71l63_358 {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}._swatchCustomInput_71l63_365 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  box-sizing: border-box;
}/* A drawer section: a hairline above, and its small uppercase title. Every
   section of the drawer (dependencies, sub-tasks, the log) composes these. */._panelSection_71l63_379 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--separator);
}._panelSectionTitle_71l63_385 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}._depsSection_71l63_394 {
}._depsTitle_71l63_398 {
}._depsSubtitle_71l63_402 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
  margin: 8px 0 6px;
}._depRow_71l63_409 {
  display: grid;
  grid-template-columns: 1fr 90px 64px 28px;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}._depTaskName_71l63_417 {
  font-size: var(--fs-xs);
  color: var(--g800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._depSelect_71l63_425 {
}._depLag_71l63_429 {
}._depDelBtn_71l63_433 {
}._depAddRow_71l63_437 {
  display: grid;
  grid-template-columns: 1fr 90px 64px auto auto;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}._depAddBtn_71l63_445 {
  appearance: none;
  background: var(--info-tint);
  border: 1px solid var(--info);
  color: var(--info);
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
}._depAddBtn_71l63_445:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._depAddToggle_71l63_462 {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--g600);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
}._depAddToggle_71l63_462:hover:not(:disabled) {
  background: var(--g50);
  border-color: var(--info);
  color: var(--info);
}._depAddToggle_71l63_462:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._depAddToggleIcon_71l63_489 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: var(--fs-sm);
  line-height: 1;
  font-weight: 600;
}._depAddCancel_71l63_500 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px;
  color: var(--g500);
  cursor: pointer;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._depAddCancel_71l63_500:hover {
  background: var(--g100);
  color: var(--g800);
}._depEmpty_71l63_518 {
  font-size: var(--fs-xs);
  color: var(--g500);
  font-style: italic;
  margin: 4px 0;
}._readonlyDepsList_71l63_525 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }._readonlyDepChip_71l63_527 {
  font-size: var(--fs-xs);
  color: var(--g800);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}._readonlyDepMeta_71l63_538 { color: var(--g500); }._footer_71l63_540 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--separator);
  background: var(--g50);
  flex-shrink: 0;
}._spacer_71l63_550 { flex: 1; }/* Outlined, not filled: a solid red Delete was the loudest thing in the drawer,
   louder than the Overview's own step. Destructive stays findable, never the
   headline. 1px less padding pays for the border, so the box keeps its size. */._deleteBtn_71l63_555  { background: var(--color-surface); color: var(--color-error); border: 1px solid var(--color-error-border); padding: 6px 13px; border-radius: var(--r-lg); cursor: pointer; font-size: var(--fs-xs); font-weight: 600; }._deleteBtn_71l63_555:hover:not(:disabled) { background: var(--color-error-bg); }._deleteBtn_71l63_555:disabled { opacity: 0.45; cursor: not-allowed; }._cancelBtn_71l63_558  { background: transparent; border: 0; padding: 7px 14px; cursor: pointer; color: var(--g700); font-size: var(--fs-xs); }._saveBtn_71l63_559    { background: var(--info); border: 0; color: var(--color-surface); padding: 7px 14px; border-radius: var(--r-lg); cursor: pointer; font-size: var(--fs-xs); font-weight: 600; }._saveBtn_71l63_559:disabled { opacity: 0.5; cursor: not-allowed; }._fieldError_71l63_562 { color: var(--red); font-size: var(--fs-2xs); margin-top: 2px; }._tabsRoot_71l63_564 { flex: 1; min-height: 0; display: flex; flex-direction: column; }._createBody_71l63_565 { flex: 1; min-height: 0; display: flex; flex-direction: column; }._tabsList_71l63_566 { /* layout/border handled by the Tabs primitive's own module */ }/* ── Overview tab ─────────────────────────────────────────────────────────── */._overviewActions_71l63_570 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }._actionHelper_71l63_571    { margin: 0; font-size: var(--fs-xs); color: var(--red); }/* ── Subtasks (summary task drawer) ───────────────────────────────────────── */._subtaskSection_71l63_574 {
}._subtaskTitle_71l63_578 {
}._subtaskList_71l63_581 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }._subtaskRow_71l63_40 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}._subtaskRow_71l63_40:hover { background: var(--g50); border-color: var(--g400); }._subtaskName_71l63_599 {
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._subtaskMeta_71l63_608 { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }._subtaskDates_71l63_609 { font-size: var(--fs-xs); color: var(--g600); white-space: nowrap; }._subtaskProgress_71l63_610 { font-size: var(--fs-xs); font-weight: 600; color: var(--g700); min-width: 34px; text-align: right; }._readonlyGrid_71l63_612    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }._readonlyValue_71l63_613   { margin: 0; font-size: var(--fs-sm); color: var(--g800); }._readonlyNotes_71l63_614   { margin: 0; font-size: var(--fs-sm); color: var(--g800); white-space: pre-wrap; }

._section_1os1l_1 {
}

._title_1os1l_5 {
}

._empty_1os1l_9 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  font-style: italic;
}

._list_1os1l_16 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._item_1os1l_25 {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: flex-start;
}

._dot_1os1l_32 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  margin-top: 5px;
  background: var(--g400);
}

/* Structured server-log kinds (phase 2). Colour groups the timeline by concern:
   status/progress = info, area edits = amber, completion = green, comment/system
   = neutral. */
._dot_status_1os1l_43   { background: var(--info); }
._dot_progress_1os1l_44 { background: var(--info); }
._dot_location_1os1l_45 { background: var(--amber); }
._dot_check_1os1l_46    { background: var(--green); }
._dot_comment_1os1l_47  { background: var(--g400); }
._dot_system_1os1l_48   { background: var(--g400); }
._dot_stock_1os1l_49    { background: var(--amber); }

._body_1os1l_51 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
._text_1os1l_52 { margin: 0; font-size: var(--fs-sm); color: var(--g800); line-height: 1.4; }
._time_1os1l_53 { font-size: var(--fs-xs); color: var(--g500); }
/* Status tones for the shared chip (ui/Pill). */

._statusDone_cfkux_3    { background: var(--gantt-status-done-bg);    color: var(--gantt-status-done-fg); }
._statusPlanned_cfkux_4 { background: var(--gantt-status-planned-bg); color: var(--gantt-status-planned-fg); }
._statusBlocked_cfkux_5 { background: var(--gantt-status-blocked-bg); color: var(--gantt-status-blocked-fg); }

/* The lifecycle LADDER's rungs (lib/ladder.ts — 2026-09-18 commit UX design,
   decision 2): one vocabulary for the rail chip, the drawer header and the
   Activities page. Tones reuse the gantt-status and area-status pairs, every
   ground solid; late is the area board's red — delayed and overdue share it,
   and overdue carries the FLAG mark (LadderChip, the Work Plan's bar), as on
   the area board; the
   two OUTLINED rungs are the positions rather than the states. In progress is
   the area board's yellow (TaskProgressSection), so a working task reads the
   same as its working areas — "committed"
   (promised, nothing to report yet) and "areas done" (Trusstor says every area
   is complete; a human still has to say done). Each rung also exposes its
   ground as --rung-bg, so a surface can lay it over an opaque base (the Work
   Plan's bars cross tinted day columns). */

/* One class per rung TONE (`RUNG_TONE`): delayed and overdue share the late red. */
._rungPlanned_cfkux_22    { --rung-bg: var(--gantt-status-planned-bg); background: var(--rung-bg); color: var(--gantt-status-planned-fg); }
._rungBlocked_cfkux_23    { --rung-bg: var(--gantt-status-blocked-bg); background: var(--rung-bg); color: var(--gantt-status-blocked-fg); }
._rungCommitted_cfkux_24  { --rung-bg: var(--color-surface); background: var(--rung-bg); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
._rungProgress_cfkux_25   { --rung-bg: var(--area-status-progress-bg); background: var(--rung-bg); color: var(--area-status-progress-fg); }
._rungLate_cfkux_26       { --rung-bg: var(--area-status-overdue-bg); background: var(--rung-bg); color: var(--area-status-overdue-fg); }
._rungAreasDone_cfkux_27  { --rung-bg: var(--color-surface); background: var(--rung-bg); color: var(--gantt-status-done-fg); box-shadow: inset 0 0 0 1.5px var(--gantt-status-done-fg); }
._rungDone_cfkux_28       { --rung-bg: var(--gantt-status-done-bg); background: var(--rung-bg); color: var(--gantt-status-done-fg); }
/* Planned ── Committed ── Done in the drawer header: three stops joined by
   rungs, the list IS the diagram. */
._ladder_9ir70_3 {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: start;
  gap: 8px;

  /* Sits under the identity block, above the tabs. */
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

._stop_9ir70_15 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  font-size: var(--fs-xs);
  color: var(--g400);
  position: relative;
}

/* The rung between stops is drawn by the stop that FOLLOWS it. */
._stop_9ir70_15 + ._stop_9ir70_15::before {
  content: '';
  position: absolute;
  top: 5px;
  right: calc(100% - 8px);
  width: calc(100% + 8px);
  height: 2px;
  background: var(--g200);
  border-radius: var(--r-sm);
}

/* Grid columns 2 and 4 are the rungs' room; the stops sit in 1, 3, 5. */
._stop_9ir70_15:nth-child(2) { grid-column: 3; }
._stop_9ir70_15:nth-child(3) { grid-column: 5; }
._stop_9ir70_15:nth-child(1) { grid-column: 1; }

._pip_9ir70_43 {
  width: 12px;
  height: 12px;
  border-radius: var(--r-circle);
  border: 2px solid var(--g300);
  background: var(--color-surface);
  box-sizing: border-box;
}

._past_9ir70_52 { color: var(--g600); }

._past_9ir70_52 ._pip_9ir70_43 { background: var(--g400); border-color: var(--g400); }

._past_9ir70_52 + ._stop_9ir70_15::before,
._now_9ir70_57 + ._stop_9ir70_15::before { background: var(--g200); }

._past_9ir70_52 + ._past_9ir70_52::before,
._past_9ir70_52 + ._now_9ir70_57::before { background: var(--g400); }

._now_9ir70_57 { color: var(--navy); font-weight: 600; }
._now_9ir70_57 ._pip_9ir70_43 { background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 4px var(--navy-soft); }
._now_9ir70_57._blocked_9ir70_64 ._pip_9ir70_43 { background: var(--gantt-status-blocked-fg); border-color: var(--gantt-status-blocked-fg); box-shadow: 0 0 0 4px var(--gantt-status-blocked-bg); }
._now_9ir70_57._done_9ir70_65 ._pip_9ir70_43 { background: var(--gantt-status-done-fg); border-color: var(--gantt-status-done-fg); box-shadow: 0 0 0 4px var(--gantt-status-done-bg); }

._stopLabel_9ir70_67 { white-space: nowrap; }
._stopSub_9ir70_68 { font-weight: 400; font-size: var(--fs-2xs); color: var(--g500); min-height: 12px; white-space: nowrap; }
._chips_9vyqb_1 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._chip_9vyqb_1 {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--g200);
  background: var(--color-surface);
  color: var(--g700);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

._chip_9vyqb_1[aria-checked='true'] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--color-surface);
}
._title_1p15t_1 {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  font-weight: 600;
}

/* What every leaf shares, asked once: two labelled rows above the list. */
._shared_1p15t_8 {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--separator);
}

._list_1p15t_17 {
  margin: 0;
  padding: 0;
  list-style: none;
}

._leaf_1p15t_23 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--fs-sm);
}

._name_1p15t_33 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._sub_1p15t_40,
._gap_1p15t_41 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--g500);
}

._gap_1p15t_41 { color: var(--status-for-review-text); }

._off_1p15t_51 ._name_1p15t_33 {
  color: var(--g400);
  text-decoration: line-through;
}
._wrap_hxf6l_1     { display: flex; flex-direction: column; height: 100%; min-height: 0; }
._thread_hxf6l_2   { flex: 1; min-height: 0; }
._threadContent_hxf6l_3 { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
._empty_hxf6l_4    { margin: auto; color: var(--g500); font-size: var(--fs-sm); text-align: center; }

._message_hxf6l_6  { background: var(--g50); border-radius: var(--r-lg); padding: 8px 12px; max-width: 80%; align-self: flex-start; display: flex; flex-direction: column; gap: 4px; }
._message_hxf6l_6._mine_hxf6l_7 { align-self: flex-end; background: var(--info-tint); }
._head_hxf6l_8     { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--g600); }
._author_hxf6l_9   { font-weight: 600; color: var(--g700); }
._time_hxf6l_10     { color: var(--g500); }
._body_hxf6l_11     { margin: 0; font-size: var(--fs-sm); color: var(--g800); white-space: pre-wrap; }
._attachments_hxf6l_12 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 4px; max-width: 240px; }
._thumb_hxf6l_13    { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; }
._thumb_hxf6l_13 img{ width: 100%; height: 100%; object-fit: cover; display: block; }
._legacyName_hxf6l_15 { display: block; padding: 4px 6px; font-size: var(--fs-xs); color: var(--g500); overflow-wrap: anywhere; }
._more_hxf6l_16     { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 50%); color: var(--color-surface); font-weight: 600; font-size: var(--fs-md); }

._composer_hxf6l_18 { border-top: 1px solid var(--separator); padding: 10px 12px; background: var(--color-surface); display: flex; flex-direction: column; gap: 6px; }
._pending_hxf6l_19  { display: flex; gap: 6px; flex-wrap: wrap; }
._pendingThumb_hxf6l_20 { position: relative; width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; }
._pendingThumb_hxf6l_20 img { width: 100%; height: 100%; object-fit: cover; }
._pendingThumb_hxf6l_20._uploading_hxf6l_22 img { opacity: 0.5; }
._pendingThumb_hxf6l_20 button { position: absolute; top: -4px; right: -4px; background: var(--g800); color: var(--color-surface); border: 0; border-radius: var(--r-circle); width: 18px; height: 18px; cursor: pointer; }
._error_hxf6l_24    { margin: 0; font-size: var(--fs-xs); color: var(--red); }

/* Where the composer would be on a task that is not committed yet. */
._gate_hxf6l_27     { margin: 0; padding: 10px 12px; border-top: 1px solid var(--g100); font-size: var(--fs-xs); color: var(--g500); }
._input_hxf6l_28    { width: 100%; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px 10px; font-family: inherit; font-size: var(--fs-sm); }
._composerActions_hxf6l_29 { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
._sendBtn_hxf6l_30  { background: var(--info); color: var(--color-surface); border: 0; padding: 6px 14px; border-radius: var(--r-lg); font-weight: 600; font-size: var(--fs-xs); cursor: pointer; }
._sendBtn_hxf6l_30:disabled { opacity: 0.5; cursor: not-allowed; }
._list_19swn_1 {
  /* Fills the panel body (Panel `fill`) and scrolls past it — the ScrollArea
     root; its viewport is the scroller. The HEIGHT cap is not here — it lives
     on the pair's grid items (`.rowEqual > *`, LogisticsPage.module.css),
     because a max-height clamp mixing px with an intrinsically-unresolvable
     percentage silently drops. This list only needs to take whatever height
     the capped card gives it. */
  flex: 1 1 auto;
}._items_19swn_11 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}._row_19swn_4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);

  /* Right gutter: the badge and tank close the row, and with the kebab column
     gone they would sit flush against the list's scroll edge. */
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--separator);

  /* The row's one affordance: open the detail drawer (the kebab is gone,
     same as the delivery cards). Inline action buttons carry their own
     cursor already. */
  cursor: pointer;
}._row_19swn_4:focus-visible,
._row_19swn_4:has(> ._rowOpen_19swn_38:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}/* In-flight delete: fade the row's content under a centered status label. */._row_19swn_4[data-deleting] {
  pointer-events: none;
}._row_19swn_4[data-deleting] > :not(._deletingOverlay_19swn_49) {
  opacity: 0.3;
}._deletingOverlay_19swn_49 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._row_19swn_4:last-child {
  border-bottom: none;
}/* The row div itself is not clickable; interactive controls (kebab menu,
   inline Renew/update-link action buttons) live inside it. */._main_19swn_70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}._provName_19swn_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}._deleteItem_19swn_86 {
  color: var(--color-error);
}/* Both text lines are single-line-with-ellipsis (same treatment as the delivery
   panel's `.material` / `.meta`). The material name is free text up to 120 chars
   and can arrive as one unbroken token, which does not wrap and ran straight out
   of the card. Clamping (rather than wrapping) also keeps rows a uniform height —
   the full name is on the update dialog. Relies on `.main { min-width: 0 }`:
   without it the flex item refuses to shrink below its content and the ellipsis
   never engages. */._name_19swn_97,
._meta_19swn_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._name_19swn_97 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_19swn_91 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._provenance_19swn_115 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* "Delivery takes ~Nd" on the provenance line, text-only — a step up from the
   line's own muted grey (not the `.hint` line's amber/red, which is reserved
   for urgency), just enough emphasis to read as a small data figure. The
   tooltip it opens carries the CONCLUSION (the tick-consistent "Order by
   <date>" deadline plus provenance), so nothing here duplicates it. Dotted
   underline (not the `.hint` line's solid-on-hover one) marks it as a hover
   target, not a click target.

   Plain inline, not inline-flex: the Tooltip trigger renders THIS span
   itself (Base UI merges its props onto it, no wrapper), so whatever box
   type it declares is what sits in the provenance line's text flow. An
   inline-flex box computes its own baseline from its flex line rather than
   the text inside it, which floated this segment off the "Started … ·
   admin · …" siblings' shared baseline — inline text needs no flex
   properties at all, so the box-baseline mismatch cannot recur. */._deliveryTakes_19swn_135 {
  color: var(--g600);
  font-weight: 600;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}/* Badge on top, duration cap beneath — the tank is its own sibling column
   between `.side` and `.endCol`, so this stack carries both figures the tank
   itself has no room for. */._side_19swn_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;

  /* Centered with the tank beside it — the badge/cap stack and the tank read
     as one gauge, so they share the row's vertical middle (the kebab alone
     stays pinned to the top corner). */
  align-self: center;
}._badge_19swn_160 {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Transparent, so the urgent tone's visible border costs no height. Without
     it an urgent badge was 20px against everyone else's 18px, and the bar
     beneath it dropped 2px out of line with the duration on exactly those
     rows — the ones already shouting for attention. */
  border: 1px solid transparent;
}._badge_19swn_160[data-tone='ok'] {
  color: var(--color-success);
  background: var(--color-success-bg);
}._badge_19swn_160[data-tone='warn'] {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}._badge_19swn_160[data-tone='urgent'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}._badge_19swn_160[data-tone='check'] {
  color: var(--g600);
  background: var(--g50);
  border: 1px dashed var(--g400);
}/* The time-remaining tank now lives in the `ReorderTickTank` component; this
   only supplies the row layout the panel needs (vertically centred beside the
   badge). */._tankInRow_19swn_198 {
  align-self: center;
}/* Truck hint line — additive to the band, one tone per row (amber/reorder or red/gap). */._hint_19swn_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Rendered as a <button> whenever the line has somewhere to go, so the button
     chrome has to be reset here — the two forms must be pixel-identical, and a
     line that shifts when it becomes clickable is a bug nobody looks for. */
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}/* The affordance follows the ELEMENT, not the tone: a line is a <button> only
   when it has somewhere to go, and every tone can now be one — an incoming line
   jumps to its delivery just as the gap line does. Keyed on the tone, the green
   line was clickable and said nothing about it. Underline on hover only, the
   same rule the row's other actions follow. */button._hint_19swn_121 {
  cursor: pointer;
  text-decoration: none;
}button._hint_19swn_121:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}._hint_19swn_121[data-tone='reorder'] { color: var(--color-warn); }._hint_19swn_121[data-tone='gap'] { color: var(--color-error); }._hint_19swn_121[data-tone='incoming'] { color: var(--color-success); }/* Actionable text on a row: bold italic, underlined ONLY on hover — the
   underline is the affordance, not decoration. */._action_19swn_244 {
  font: inherit;
  font-weight: 700;
  font-style: italic;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: none;
}._action_19swn_244:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }._action_19swn_244:disabled {
  opacity: 0.5;
  cursor: default;
}._renewAsk_19swn_263 {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
}/* A landed-but-late arrival keeps the overdue tone the in-flight note wore —
   the fact it turned up does not make its lateness good news. */._renewAskLate_19swn_274 {
  color: var(--color-warn);
}._addBtn_19swn_278 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--status-planned-text);
  background: var(--status-planned-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}._addBtn_19swn_278:disabled {
  opacity: 0.5;
  cursor: default;
}/* An in-flight delivery past its own ETA. Amber, not green: something is still
   coming, but its date has gone by and nobody has seen it — that is a prompt to
   chase, not reassurance that the material is covered. */._hint_19swn_121[data-tone='late'] { color: var(--color-warn); }/* The arrival named on a ran-out row. It answers the question the line is
   asking, so it carries weight against the muted provenance text around it. */._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}/* When an arrival phrase names a known delivery it becomes a jump link. Same
   button-reset discipline as .hint so the note stays pixel-identical to its
   plain-span form — a phrase that shifts the moment it gains a target is a bug
   nobody looks for. Underline on hover only; the chevron slides like .hint's.
   `.renewAskJump` is the covered row's "New delivery arrived…" phrase; it takes
   the same reset but keeps the LINE's own colour and weight (amber when the
   arrival was late), which a fixed navy would strip. */button._arrivalNote_19swn_302,
button._renewAskJump_19swn_311 {
  display: inline-flex;
  align-items: center;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}button._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}button._renewAskJump_19swn_311 {
  color: inherit;
}button._arrivalNote_19swn_302:hover,
button._renewAskJump_19swn_311:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:hover ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}._durationCap_19swn_350 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}._durationCap_19swn_350[data-tone='ok'] { color: var(--color-success); }._durationCap_19swn_350[data-tone='warn'] { color: var(--color-warn); }._durationCap_19swn_350[data-tone='urgent'] { color: var(--color-error); }/* The trailing "goes somewhere" mark. Decoration, not a control: it inherits
   the line's tone via currentColor so it reads as part of the sentence. */._jumpMark_19swn_342 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  opacity: 0.65;
  transition: opacity 120ms ease, transform 120ms ease;
}button._hint_19swn_121:hover ._jumpMark_19swn_342,
button._hint_19swn_121:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}@media (prefers-reduced-motion: reduce) {
  ._jumpMark_19swn_342 {
    transition: opacity 120ms ease;
  }

  button._hint_19swn_121:hover ._jumpMark_19swn_342,
  button._hint_19swn_121:focus-visible ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342 {
    transform: none;
  }
}/* ---- Untracked material: a delivery exists, no stock record does ----
   A faint diagonal hatch rather than a solid tint or a coloured rail: the row
   holds no figures, and the hatch says "nothing here yet" without competing
   with the tones that DO carry meaning on this panel (green/amber/red are
   states of a real estimate; this row has no estimate to be in a state). */._row_19swn_4[data-untracked] {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 14px
  );
}/* `.side` centers itself so the badge/cap stack reads as one gauge WITH the
   tank beside it. A row with NO tank has nothing to centre against, so its
   badge belongs at the top-right corner like the row's title, not floating in
   the vertical middle. Two such rows: the untracked placeholder ("Not tracked")
   and a ran-out tracked row ("Ran out") — both render no gauge, so the rule is
   generic across them rather than special-cased to one. */._row_19swn_4[data-untracked] ._side_19swn_145,
._row_19swn_4[data-needscheck] ._side_19swn_145 {
  align-self: flex-start;
}/* Dashed like the needsCheck badge — both say "there is no figure here", which
   is a different claim from any number. */._badge_19swn_160[data-tone='untracked'] {
  color: var(--info);
  background: var(--info-tint);
  border: 1px dashed var(--info);
}._hint_19swn_121[data-tone='untracked'] {
  color: var(--info);
}/* The untracked row's note and its action on one line, the way a tracked row
   keeps `Sync` beside the sentence it answers. */._untrackedLine_19swn_432 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}/* The untracked row's Add-stock action. Unchanged from when it sat in the side
   column — only its position moved, next to the note it answers. */._sideAction_19swn_441 {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}._sideAction_19swn_441:hover:not(:disabled) {
  color: var(--navy);
}._sideAction_19swn_441:disabled {
  opacity: 0.5;
  cursor: default;
}/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}/* Classes below this line are copied from DeliveryPipeline.module.css — the
   card body is the list row's content, transplanted onto a kanban card, so
   the trail/arrival chips keep pixel-identical styling. *//* In-flight delete: fade the card's content under a centered status label
   (same treatment as the pipeline row). */._deletingOverlay_1wksx_7 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* Statuses dropdown + "+ New delivery", side by side in the panel header. */._headerActions_1wksx_19 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}/* Same treatment as the inventory panel's header action — the one rule,
   composed, so the two panels' buttons (and their disabled state) cannot
   drift apart. */._addBtn_1wksx_28 {
}._deleteItem_1wksx_32 {
  color: var(--color-error);
}/* Every text line on the card is single-line-with-ellipsis. Clamping (rather
   than wrapping) keeps cards a uniform width — the full note is on the edit
   dialog. Relies on `.cardMain { min-width: 0 }`: without it the flex item
   refuses to shrink below its content and the ellipsis never engages. */._material_1wksx_40,
._meta_1wksx_41 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._material_1wksx_40 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_1wksx_41 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}/* The in-flight negotiation trail: a filled chip per date the supplier
   actually gave, a dashed ghost chip for whichever is still awaited — see
   `renderTrail` in BoardCard.tsx. Retired once a card arrives, where
   `.dateList` below takes over. */._dates_1wksx_64 {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* arrows sit mid-chip, not on the text baseline */
  gap: 6px;
  margin-top: 4px;
}._dateChip_1wksx_72 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xl);
  background: var(--g50);
  border: 1px solid var(--separator);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
}._dateChip_1wksx_72 b {
  font-weight: 700;
}._dateLabel_1wksx_89 {
  font-size: var(--fs-2xs);
  color: var(--g500);

  /* .dateChip has no flex-basis, so under width pressure the browser can
     shrink it below its max-content size and wrap this label's words
     ("Replied by" -> "Replied" / "by"). Keep it one line like the fixed
     .dateRowLabel column does for the settled-card summary. */
  white-space: nowrap;
}._chipArrow_1wksx_100 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* Dashed placeholder standing in for the date the trail is still waiting on —
   Requested before a request went out, Answered before the supplier replies.
   Composes with `.dateChip` for the shared padding/layout; only the border
   and fill differ from a filled chip. */._chipGhost_1wksx_109 {
  border-style: dashed;
  border-color: var(--g300);
  background: none;
}/* The amber "pending" word — inside a ghost chip, and reused verbatim for the
   footer's due-placeholder "pending" span, so "waiting on a date" reads the
   same wherever it shows up on the card. */._ghostHint_1wksx_118 {
  color: var(--color-warn);
  font-weight: 650;
}/* The arrived date summary: Requested / Answered / Arrived, one row each,
   always all three, once a card has landed — see `renderArrival` in
   BoardCard.tsx. The in-flight trail above stays a chip row; this is a
   plain list, since a settled card has more to say (three dates, not one
   open question) than a chip row comfortably holds. */._dateList_1wksx_63 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}._dateRow_1wksx_96 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
}/* Fixed width, not a hard column count: labels are short in every locale
   this product ships (Requested/Replied by/ETA/Arrived; 希望/返答/到着予定/到着),
   so one em-relative width lines every value up without the English label
   dictating a raw pixel figure. nowrap guards the widest label ("Replied
   by") from breaking onto two lines at odd zoom levels. */._dateRowLabel_1wksx_96 {
  flex: 0 0 5.75em;
  font-size: var(--fs-2xs);
  color: var(--g500);
  white-space: nowrap;
}._dateRowValue_1wksx_154 {
  font-weight: 700;
  color: var(--navy);
}/* The one settled FACT on the card, not an ask or a reply — the row a
   Delivered-column card is actually scanned for. */._dateArrived_1wksx_161 {
  color: var(--color-success);
}/* How the arrival landed against the agreed date. Sits beside the Arrived
   row's value and carries the tone alone — same grammar as the trail's
   ghost hint above. */._variance_1wksx_168 {
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-2xs);
}._varOnTime_1wksx_174 {
  color: var(--color-success);
}/* Early is not a win on a just-in-time site — nobody booked the crane or the
   yard for it. Informational grey, not green. */._varEarly_1wksx_180 {
  color: var(--g500);
}._varLate_1wksx_184 {
  color: var(--color-error);
}/* Agreed deadline, in the card footer. */._due_1wksx_189 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._dueLate_1wksx_196 {
  color: var(--color-error);
}/* Stands where the deadline would be, so an undated card reads as "waiting on
   a date" rather than as one nobody has filled in. Muted, like any other
   label — the amber "pending" span beside it (`.ghostHint`) is what carries
   the awaited tone now, not the whole line. */._duePending_1wksx_204 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g500);
}/* The footer's "pending" sits beside the label, not inside a date chip, so it
   must pin its own size to the label's — otherwise it inherits the card's
   base size and floats off the shared baseline. */._duePendingHint_1wksx_214 {
  font-size: var(--fs-xs);
  line-height: inherit;
}/* Name + amount on one line. The name clamps and the amount does not: a long
   material name must lose characters before the figure disappears. */._materialLine_1wksx_221 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;

  /* Clears the card's star, which sits over this line's right end. */
  padding-right: var(--s-5);
}._cardStar_1wksx_231 {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
}._materialLine_1wksx_221 ._material_1wksx_40 {
  flex: 0 1 auto;
  min-width: 0;
}._qty_1wksx_242 {
  flex: none;
  margin-left: auto;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}/* Jump target: a card named elsewhere on the board, flashed after the scroll
   lands. An absolutely-positioned overlay rather than a background on `.card`
   itself, so it cannot fight the delete treatment or the card's own border,
   and so it can be remounted per jump to replay the animation.

   The animation itself is the shared Components/ui/JumpFlash, composed
   below — the same one the pipeline row, the progress tracker's column jump
   and the Help Center's search landing use: one visual language for "here is
   the thing you asked for". */._jumpFlash_1wksx_261 {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: var(--z-raised-1);
}/* Board frame — values from the approved mockup. */._board_1wksx_272 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-1) 0;
}/* Columns share the row evenly: equal grow from a zero basis, so three columns
   and eight columns each divide the width the same way. `min-width` (not
   shrink) is the floor — past it the row overflows into the board's ScrollArea rather
   than squeezing cards into unreadable slivers. 280px is the width a column
   settled at under the old `max-width` cap with the three seeded statuses, so
   the cap became the floor: the layout the board shipped with is now the
   narrowest a column ever gets, not the widest. */._column_1wksx_286 {
  flex: 1 0 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  height: 440px;

  /* The cap holds in every mode: search mode lets a column SHRINK to its
     matches (below), but never grow past the working height — past it the
     column's own stack scrolls. */
  max-height: 440px;
  background: var(--g50);
  border-radius: var(--r-xl);
  padding: 6px 10px 10px;
}/* Search mode: the fixed working height gives way to content, up to the cap —
   the row is as tall as the column with the most matches, and the rest
   stretch to line up with it. `stretch` (not flex-start) is what keeps the
   emptied columns from collapsing to ragged stubs beside the one that
   matched. */._board_1wksx_272[data-searching] {
  align-items: stretch;
}._board_1wksx_272[data-searching] ._column_1wksx_286 {
  height: auto;
}._columnGrip_1wksx_315 {
  display: flex;
  justify-content: center;
  color: var(--g300);
  padding: 2px 0 4px;
  cursor: grab;
  touch-action: none;
  flex: none;
}._columnGrip_1wksx_315:hover {
  color: var(--g500);
}/* The edit lock: no sensors, so no drag to promise. */._board_1wksx_272[data-locked] ._columnGrip_1wksx_315 {
  cursor: default;
}._columnHead_1wksx_334 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px 4px 10px;
  flex: none;
}._columnName_1wksx_342 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* The column-header count pill and the drawer's `.ddCount` are one style —
   declared together so they can't drift. */._count_1wksx_350,
._ddCount_1wksx_348 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  background: var(--g100);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}/* A column's cards: the ScrollArea root takes the column's remaining height,
   its viewport (`.stack`) is the scroller — jump-to-card scrolls it by class. */._stackFrame_1wksx_363 {
  flex: 1 1 auto;
}._stack_1wksx_362 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}._card_1wksx_38 {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  flex: none;
}._card_1wksx_38[data-deleting] {
  opacity: 0.3;
}/* The DragOverlay ghost — see BoardCardPreview. Fixed width: a column-hosted
   card takes its width from the column's own flex sizing, but
   this one is portalled to document.body with no such parent, so it needs
   its own. `--shadow-popover` reads as "lifted" against the board the way
   `--shadow-card` never could — the point is that this card is no longer
   resting in a column. `cursor: grabbing`, not the row's own pointer
   affordance: the real card underneath already shows the drag is live. */._cardPreview_1wksx_393 {
  width: 240px;
  box-shadow: var(--shadow-popover);
  cursor: grabbing;
}._cardHoverPreview_1wksx_399 {
  width: 260px;
  box-shadow: var(--shadow-popover);
}._cardMain_1wksx_38 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}._cardFoot_1wksx_417 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}._overdueBadge_1wksx_424 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-pill);
  padding: 0 7px;
}._columnEmpty_1wksx_434 {
  border: 1px dashed var(--g200);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  font-size: var(--fs-2xs);
  color: var(--g400);
  text-align: center;
  flex: none;
}._showAll_1wksx_444 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}/* Statuses dropdown (board header) — values from the approved mockup. The
   kebab trigger opens a real base-ui Menu ("Manage statuses"); selecting that
   item opens the management panel below, which stays a custom popover (not a
   base-ui Menu) because it hosts inline rename/add <input>s that need to keep
   focus while open, which a base-ui Menu.Popup (built to close on interaction
   and manage its own roving focus) actively fights. */._statusesRoot_1wksx_461 {
  position: relative;
}._dropdownPanel_1wksx_465 {
  /* On <body>, pinned under the trigger by StatusesMenu (top/right inline):
     the board card clips its overflow, so the panel lives outside it. */
  position: fixed;
  z-index: var(--z-popover);
  width: 250px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-dropdown);
}._ddTitle_1wksx_478 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px 8px 4px;
}._ddRow_1wksx_487 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px;
  border-radius: var(--r-sm);
}._ddRow_1wksx_487:hover {
  background: var(--g50);
}._ddName_1wksx_499 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}._ddCount_1wksx_348 {
  flex: none; /* pill styling shared with .count above */
}/* A status row's kebab: the shared KebabButton, tightened to the row. */._ddKebab_1wksx_515 {
  padding: 2px;
}._ddAdd_1wksx_519 {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--info);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}._ddAdd_1wksx_519:hover {
  background: var(--g50);
}._ddAdd_1wksx_519:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._ddInput_1wksx_542 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--info);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  background: var(--color-surface);
}._ddInput_1wksx_542:disabled {
  opacity: 0.6;
}._menuWhy_1wksx_559 {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g500);
}/* A multi-material card's line rows (design 2026-09-14 §4.2): the first two
   materials in full under the ref/destination row, each with its amount right
   — then a count for the rest, so a three-material card is no taller than
   today's plus one row. */._lineRow_1wksx_570 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}._lineName_1wksx_577 {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* What a row is about, at a glance: the package before each material line,
   the building before the supplier. Muted so it guides the eye without
   outweighing the text; centred, since an icon has no baseline. */._fieldIcon_1wksx_591 {
  flex: none;
  display: inline-flex;
  align-self: center;
  color: var(--g400);
}._moreLines_1wksx_598 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}

/* Stock tab — own stylesheet: TaskPanel.module.css is grandfathered at the
   600-line quality-gate cap and may not grow, so the four `.field` rules the
   drawer's other tabs share are copied here rather than composed across
   modules (not available with CSS Modules as used in this codebase). */

._body_lr955_6 {
  /* The tab's own scroll region (a ScrollArea root): the drawer's `Tabs.Panel`
     is a flex column that hands its height down, so without `flex: 1;
     min-height: 0` a long claim list runs under the footer instead of
     scrolling (the Locations tab's `.wrap` does the same). */
  flex: 1;
  min-height: 0;
}

._bodyContent_lr955_15 {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._scope_lr955_22 { margin: 0; font-size: var(--fs-xs); color: var(--g500); }

._claimBlock_lr955_24 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--separator);
}

._claimBlock_lr955_24:last-of-type { border-bottom: none; }

/* A material nobody is editing: its cart item (`StockCartItem`) is its own
   box, so the block adds no separator of its own. */
._foldedBlock_lr955_36 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* A claim's top line is Material | Unit — the unit is picked first because
   everything below it (per-piece figures, subtotals, the total) is expressed
   in it. It must fit the 440px drawer (400px inside its padding). Grid items
   default to `min-width: auto`, which lets a control's intrinsic width push
   the right column out of the drawer — `min-width: 0` on each cell makes the
   tracks the authority and the controls (all `width: 100%`) fit. */
._row_lr955_49 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
  align-items: start;
}

._row_lr955_49 > ._field_lr955_2 { min-width: 0; }

/* Copied verbatim from TaskPanel.module.css's `.field` group (lines ~136-161)
   — see the note above. */
._field_lr955_2 { display: flex; flex-direction: column; gap: 4px; }

._field_lr955_2 label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}

/* Same skin as the row's PickCombo triggers (ui/PickCombo `.input`) so the
   cells of a claim line up as one control strip; the locked unit wears it
   too, so every value in the row sits in the same shape as its neighbours. */
._field_lr955_2 input,
._field_lr955_2 textarea,
._field_lr955_2 ._lockedValue_lr955_75 {
  width: 100%;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  background: var(--white);
  color: var(--navy);
}

._field_lr955_2 input:focus-visible,
._field_lr955_2 textarea:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}

._field_lr955_2 input[aria-invalid] {
  border-color: var(--color-error);
}

/* Read-only field values — the unit the site's stock sets, and the quantity
   the chosen elements compute. Same "you can't edit this" treatment as the
   delivery form's locked unit. */
._field_lr955_2 ._lockedValue_lr955_75 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--g50);
  color: var(--g500);
}

/* Why the Quantity field cannot be typed into, said next to the number. */

/* The computed quantity sits a clear step below the Material/Unit line (or
   the types block), not flush against it — it is a result, not a fourth
   field of the same group. */
._quantityField_lr955_113 { margin-top: 12px; }

/* The amount and its context on one line: the figure leads, the rest trails
   it in grey and wraps when it must. */
._figures_lr955_117 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
}

/* The context figures travel together, so a wrap never strands the drawn
   separator at the start of a line — it only ever sits BETWEEN them. */
._context_lr955_129 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}

._context_lr955_129 > * + *::before {
  content: '·';
  margin-right: var(--s-2);
  color: var(--g400);
}

._amount_lr955_143 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* The figure that holds the names: a real control, so a tap and the keyboard
   reach the tooltip, not the pointer alone. */
._others_lr955_152 {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--info);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* The types block: one boxed list, a header, a row per CAD type (its chosen
   elements and a Select… link), and the summed quantity as a footer. */
._types_lr955_166 {
  margin-top: 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  overflow: hidden;
}

._typesHead_lr955_173,
._typesTotal_lr955_174 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  background: var(--g50);
}

._typesHead_lr955_173 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}

._typesTotal_lr955_174 {
  border-top: 1px solid var(--g200);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._typesTotal_lr955_174 b { font-size: var(--fs-sm); color: var(--navy); }

._typeRow_lr955_199 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--g200);
}

._typeInfo_lr955_208 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._typeName_lr955_215 { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }

._typeMeta_lr955_217 { font-size: var(--fs-xs); color: var(--g500); }

/* The per-floor split under a type's line when the task spans several
   floors — "{floor} · {n}" per floor; navy where some are chosen there. */
._typeSplit_lr955_221 { font-size: var(--fs-xs); color: var(--g400); }

._typeSplitChosen_lr955_223 { color: var(--navy); font-weight: 600; }

/* The subtotal of the chosen elements, with how many they are under it. */
._typeSub_lr955_226 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--g800);
  text-align: right;
}

._typeSub_lr955_226 small {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
  margin-top: 2px;
}

/* All three are bare inline text buttons — one shared rule rather than three
   near-identical blocks; only the colour and decoration differ. */
._backToCad_lr955_243,
._selectLink_lr955_244 {
  align-self: flex-start;
  font: inherit;
  font-size: var(--fs-xs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

._backToCad_lr955_243 { color: var(--info); }

/* "← Back to materials" and the truck share a line; on the list the truck
   sits there alone (ruling 2026-09-16). */
._topRow_lr955_258 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

._topRow_lr955_258:only-child,
._topRow_lr955_258 > *:only-child { margin-left: auto; }

._selectLink_lr955_244 { color: var(--info); text-decoration: underline; }

._hint_lr955_270 { margin: 0; font-size: var(--fs-xs); color: var(--g500); }

._noTakeoff_lr955_272 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--navy);
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn);
  border-radius: var(--r-md);
  padding: 8px 10px;
}

._banner_lr955_282 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--navy);
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

._bannerActions_lr955_294 { display: flex; gap: 8px; }

._bannerActions_lr955_294 button {
  font: inherit;
  font-weight: 700;
  border-radius: var(--r-md);
  border: 1px solid var(--navy-line);
  background: var(--color-surface);
  padding: 4px 10px;
  cursor: pointer;
}

._outcomeBox_lr955_306 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-xs);
  border-radius: var(--r-md);
  padding: 8px 10px;
}

._outcomeBox_lr955_306[data-tone='idle'] { color: var(--g500); background: none; padding: 0; }
._outcomeBox_lr955_306[data-tone='ok'] { color: var(--navy); background: var(--color-success-bg); }
._outcomeBox_lr955_306[data-tone='warn'] { color: var(--navy); background: var(--color-warn-bg); }
._outcomeBox_lr955_306[data-tone='error'] { color: var(--color-error); background: var(--color-error-bg); }

/* The one red-text treatment the tab uses for a figure the user has to act on
   — an add the checkout could not make, and the shortfall on an inventory
   row. Both compose it so the two stay the same red. */
._errorText_lr955_323 { color: var(--color-error); font-weight: 600; }

/* ---------- An order on its way (`StockOrderCard`) ---------- */

/* The board card's own surface, shrunk into the checkout's review: same
   tokens, so the order reads as the same object it is on the Logistics board. */
._joinCard_lr955_329 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--navy);
}

._joinTop_lr955_340 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}

._joinRef_lr955_347 { font-weight: 700; }

/* The board card's own quantity: pushed to the right edge of the line,
   whatever the pills before it. Composed rather than re-derived — the join
   card is that card shrunk, so its figure wears the same skin (its `--fs-xs`
   is what the box already sets on its text). */
._joinQty_lr955_353 {
}

._joinMeta_lr955_357,
._joinAfter_lr955_358 { color: var(--g600); }

._joinError_lr955_360 { }

/* Hosts Inventory Levels' own "not tracked" row (a list item there). */
._untrackedList_lr955_363 { list-style: none; margin: 0; padding: 0; }

._inventoryBox_lr955_365 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;

  /* The row's one affordance: open the record in the companion beside the
     drawer — the same tap the Inventory Levels rows and the site map's area
     drawer answer to. */
  cursor: pointer;
}

._inventoryBox_lr955_365:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

._inventoryMain_lr955_386 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}

._claimLine_lr955_395 { color: var(--g600); }
._gapLine_lr955_396 { }

/* The empty tab: the tile sits in the middle of what is otherwise blank. */
._emptyWrap_lr955_399 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Alignment is the caller's — centred inside the empty tile, left of a list
   (`.addBtnStart`) — so the button itself carries none. */
._addBtn_lr955_407 {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 1px dashed var(--info);
  border-radius: var(--r-md);
  padding: 6px 12px;
  cursor: pointer;
}

._addBtnStart_lr955_407 {
  align-self: flex-start;
}

._loading_lr955_425 { margin: 0; padding: 16px 20px; font-size: var(--fs-sm); color: var(--g500); }

/* A reader's view of the task's claims (no `tasks.execute`): one line per
   material, the amount at the end. */
._readList_lr955_429 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

._readItem_lr955_431 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--fs-sm);
  color: var(--g800);
}
._readQty_lr955_440 { color: var(--g500); white-space: nowrap; }
/* The 10-cell stock gauge, rendered by the Logistics inventory row. Layout
   that differs by surface (e.g. `align-self`) is applied by the caller via
   `className`. */
._tank_1ak19_4 {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  width: 12px;
  flex: none;
}

._cellSolid_1ak19_12,
._cellSpent_1ak19_13 {
  height: 3px;

  /* On a 3px-tall cell this renders identically to 1.5px — the corner curve
     is capped at half the height either way. */
  border-radius: var(--r-pill);
}

/* Same tokens as the badge beside it — the tank and the badge report one
   state. */
._tank_1ak19_4[data-tone='ok'] ._cellSolid_1ak19_12 { background: var(--color-success); }
._tank_1ak19_4[data-tone='warn'] ._cellSolid_1ak19_12 { background: var(--color-warn); }
._tank_1ak19_4[data-tone='urgent'] ._cellSolid_1ak19_12 { background: var(--color-error); }

._cellSpent_1ak19_13 { box-shadow: inset 0 0 0 1px var(--g300); }
._list_19swn_1 {
  /* Fills the panel body (Panel `fill`) and scrolls past it — the ScrollArea
     root; its viewport is the scroller. The HEIGHT cap is not here — it lives
     on the pair's grid items (`.rowEqual > *`, LogisticsPage.module.css),
     because a max-height clamp mixing px with an intrinsically-unresolvable
     percentage silently drops. This list only needs to take whatever height
     the capped card gives it. */
  flex: 1 1 auto;
}

._items_19swn_11 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

._row_19swn_4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);

  /* Right gutter: the badge and tank close the row, and with the kebab column
     gone they would sit flush against the list's scroll edge. */
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--separator);

  /* The row's one affordance: open the detail drawer (the kebab is gone,
     same as the delivery cards). Inline action buttons carry their own
     cursor already. */
  cursor: pointer;
}

._row_19swn_4:focus-visible,
._row_19swn_4:has(> ._rowOpen_19swn_38:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* In-flight delete: fade the row's content under a centered status label. */
._row_19swn_4[data-deleting] {
  pointer-events: none;
}

._row_19swn_4[data-deleting] > :not(._deletingOverlay_19swn_49) {
  opacity: 0.3;
}

._deletingOverlay_19swn_49 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}

._row_19swn_4:last-child {
  border-bottom: none;
}

/* The row div itself is not clickable; interactive controls (kebab menu,
   inline Renew/update-link action buttons) live inside it. */
._main_19swn_70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}

._provName_19swn_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

._deleteItem_19swn_86 {
  color: var(--color-error);
}

/* Both text lines are single-line-with-ellipsis (same treatment as the delivery
   panel's `.material` / `.meta`). The material name is free text up to 120 chars
   and can arrive as one unbroken token, which does not wrap and ran straight out
   of the card. Clamping (rather than wrapping) also keeps rows a uniform height —
   the full name is on the update dialog. Relies on `.main { min-width: 0 }`:
   without it the flex item refuses to shrink below its content and the ellipsis
   never engages. */
._name_19swn_97,
._meta_19swn_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._name_19swn_97 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._meta_19swn_91 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._provenance_19swn_115 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}

/* "Delivery takes ~Nd" on the provenance line, text-only — a step up from the
   line's own muted grey (not the `.hint` line's amber/red, which is reserved
   for urgency), just enough emphasis to read as a small data figure. The
   tooltip it opens carries the CONCLUSION (the tick-consistent "Order by
   <date>" deadline plus provenance), so nothing here duplicates it. Dotted
   underline (not the `.hint` line's solid-on-hover one) marks it as a hover
   target, not a click target.

   Plain inline, not inline-flex: the Tooltip trigger renders THIS span
   itself (Base UI merges its props onto it, no wrapper), so whatever box
   type it declares is what sits in the provenance line's text flow. An
   inline-flex box computes its own baseline from its flex line rather than
   the text inside it, which floated this segment off the "Started … ·
   admin · …" siblings' shared baseline — inline text needs no flex
   properties at all, so the box-baseline mismatch cannot recur. */
._deliveryTakes_19swn_135 {
  color: var(--g600);
  font-weight: 600;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

/* Badge on top, duration cap beneath — the tank is its own sibling column
   between `.side` and `.endCol`, so this stack carries both figures the tank
   itself has no room for. */
._side_19swn_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;

  /* Centered with the tank beside it — the badge/cap stack and the tank read
     as one gauge, so they share the row's vertical middle (the kebab alone
     stays pinned to the top corner). */
  align-self: center;
}

._badge_19swn_160 {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Transparent, so the urgent tone's visible border costs no height. Without
     it an urgent badge was 20px against everyone else's 18px, and the bar
     beneath it dropped 2px out of line with the duration on exactly those
     rows — the ones already shouting for attention. */
  border: 1px solid transparent;
}

._badge_19swn_160[data-tone='ok'] {
  color: var(--color-success);
  background: var(--color-success-bg);
}

._badge_19swn_160[data-tone='warn'] {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}

._badge_19swn_160[data-tone='urgent'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}

._badge_19swn_160[data-tone='check'] {
  color: var(--g600);
  background: var(--g50);
  border: 1px dashed var(--g400);
}

/* The time-remaining tank now lives in the `ReorderTickTank` component; this
   only supplies the row layout the panel needs (vertically centred beside the
   badge). */
._tankInRow_19swn_198 {
  align-self: center;
}

/* Truck hint line — additive to the band, one tone per row (amber/reorder or red/gap). */
._hint_19swn_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Rendered as a <button> whenever the line has somewhere to go, so the button
     chrome has to be reset here — the two forms must be pixel-identical, and a
     line that shifts when it becomes clickable is a bug nobody looks for. */
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}

/* The affordance follows the ELEMENT, not the tone: a line is a <button> only
   when it has somewhere to go, and every tone can now be one — an incoming line
   jumps to its delivery just as the gap line does. Keyed on the tone, the green
   line was clickable and said nothing about it. Underline on hover only, the
   same rule the row's other actions follow. */
button._hint_19swn_121 {
  cursor: pointer;
  text-decoration: none;
}

button._hint_19swn_121:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

._hint_19swn_121[data-tone='reorder'] { color: var(--color-warn); }
._hint_19swn_121[data-tone='gap'] { color: var(--color-error); }
._hint_19swn_121[data-tone='incoming'] { color: var(--color-success); }

/* Actionable text on a row: bold italic, underlined ONLY on hover — the
   underline is the affordance, not decoration. */
._action_19swn_244 {
  font: inherit;
  font-weight: 700;
  font-style: italic;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: none;
}
._action_19swn_244:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }

._action_19swn_244:disabled {
  opacity: 0.5;
  cursor: default;
}

._renewAsk_19swn_263 {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
}

/* A landed-but-late arrival keeps the overdue tone the in-flight note wore —
   the fact it turned up does not make its lateness good news. */
._renewAskLate_19swn_274 {
  color: var(--color-warn);
}

._addBtn_19swn_278 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--status-planned-text);
  background: var(--status-planned-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}

._addBtn_19swn_278:disabled {
  opacity: 0.5;
  cursor: default;
}

/* An in-flight delivery past its own ETA. Amber, not green: something is still
   coming, but its date has gone by and nobody has seen it — that is a prompt to
   chase, not reassurance that the material is covered. */
._hint_19swn_121[data-tone='late'] { color: var(--color-warn); }

/* The arrival named on a ran-out row. It answers the question the line is
   asking, so it carries weight against the muted provenance text around it. */
._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}

/* When an arrival phrase names a known delivery it becomes a jump link. Same
   button-reset discipline as .hint so the note stays pixel-identical to its
   plain-span form — a phrase that shifts the moment it gains a target is a bug
   nobody looks for. Underline on hover only; the chevron slides like .hint's.
   `.renewAskJump` is the covered row's "New delivery arrived…" phrase; it takes
   the same reset but keeps the LINE's own colour and weight (amber when the
   arrival was late), which a fixed navy would strip. */
button._arrivalNote_19swn_302,
button._renewAskJump_19swn_311 {
  display: inline-flex;
  align-items: center;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

button._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}

button._renewAskJump_19swn_311 {
  color: inherit;
}

button._arrivalNote_19swn_302:hover,
button._renewAskJump_19swn_311:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:hover ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}

._durationCap_19swn_350 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

._durationCap_19swn_350[data-tone='ok'] { color: var(--color-success); }
._durationCap_19swn_350[data-tone='warn'] { color: var(--color-warn); }
._durationCap_19swn_350[data-tone='urgent'] { color: var(--color-error); }

/* The trailing "goes somewhere" mark. Decoration, not a control: it inherits
   the line's tone via currentColor so it reads as part of the sentence. */
._jumpMark_19swn_342 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  opacity: 0.65;
  transition: opacity 120ms ease, transform 120ms ease;
}

button._hint_19swn_121:hover ._jumpMark_19swn_342,
button._hint_19swn_121:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  ._jumpMark_19swn_342 {
    transition: opacity 120ms ease;
  }

  button._hint_19swn_121:hover ._jumpMark_19swn_342,
  button._hint_19swn_121:focus-visible ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342 {
    transform: none;
  }
}

/* ---- Untracked material: a delivery exists, no stock record does ----
   A faint diagonal hatch rather than a solid tint or a coloured rail: the row
   holds no figures, and the hatch says "nothing here yet" without competing
   with the tones that DO carry meaning on this panel (green/amber/red are
   states of a real estimate; this row has no estimate to be in a state). */
._row_19swn_4[data-untracked] {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 14px
  );
}

/* `.side` centers itself so the badge/cap stack reads as one gauge WITH the
   tank beside it. A row with NO tank has nothing to centre against, so its
   badge belongs at the top-right corner like the row's title, not floating in
   the vertical middle. Two such rows: the untracked placeholder ("Not tracked")
   and a ran-out tracked row ("Ran out") — both render no gauge, so the rule is
   generic across them rather than special-cased to one. */
._row_19swn_4[data-untracked] ._side_19swn_145,
._row_19swn_4[data-needscheck] ._side_19swn_145 {
  align-self: flex-start;
}

/* Dashed like the needsCheck badge — both say "there is no figure here", which
   is a different claim from any number. */
._badge_19swn_160[data-tone='untracked'] {
  color: var(--info);
  background: var(--info-tint);
  border: 1px dashed var(--info);
}

._hint_19swn_121[data-tone='untracked'] {
  color: var(--info);
}



/* The untracked row's note and its action on one line, the way a tracked row
   keeps `Sync` beside the sentence it answers. */
._untrackedLine_19swn_432 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* The untracked row's Add-stock action. Unchanged from when it sat in the side
   column — only its position moved, next to the note it answers. */
._sideAction_19swn_441 {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

._sideAction_19swn_441:hover:not(:disabled) {
  color: var(--navy);
}

._sideAction_19swn_441:disabled {
  opacity: 0.5;
  cursor: default;
}
/* The Stock tab's list as a cart (contract v14): a material that is not being
   edited folds to an item, one checkout bar counts what needs ordering, and
   the review sorts the list once. Tokens only. */

/* Bare inline text buttons: the item's Edit / Remove, its jump to an order,
   and the review's Back. */
._textButton_1d1iy_7 {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* The tab's one primary action — the checkout bar's "Review order" and the
   review's own. */
._primary_1d1iy_17 {
  margin-left: auto;
  font: inherit;
  font-weight: 700;
  color: var(--color-surface);
  background: var(--info);
  border: none;
  border-radius: var(--r-md);
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}

._primary_1d1iy_17:disabled { opacity: 0.5; cursor: default; }

/* ---------- One material, folded ---------- */

._item_1d1iy_34 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

._itemTop_1d1iy_43 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

._itemName_1d1iy_49 { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }

._itemQty_1d1iy_51 {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--navy);
}

._itemWhat_1d1iy_60 { font-size: var(--fs-xs); color: var(--g500); }

._itemStatus_1d1iy_62 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--g600);
}

/* Where the material stands, as a dot: the same four tones the outcome box
   reads in. */
._dot_1d1iy_72 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  flex: none;
}

._dot_1d1iy_72[data-tone='ok'] { background: var(--color-success); }
._dot_1d1iy_72[data-tone='info'] { background: var(--info); }
._dot_1d1iy_72[data-tone='warn'] { background: var(--color-warn); }
._dot_1d1iy_72[data-tone='err'] { background: var(--color-error); }

._jump_1d1iy_84 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: inherit;
}

._jump_1d1iy_84:hover { color: var(--info); }

._itemActs_1d1iy_94 {
  margin-left: auto;
  display: flex;
  gap: 12px;
}

/* A review row's own Edit / Remove — the page no longer carries them for a
   material that is still to be ordered. */
._lineActs_1d1iy_102 {
  display: flex;
  gap: var(--s-3);
  margin-left: var(--s-3);
}

._act_1d1iy_108 {
  color: var(--info);
  font-weight: 600;
}

/* ---------- The checkout bar, under the list ---------- */

._checkout_1d1iy_116 {
  /* Pinned to the bottom of the tab's scroll region (Niv, 2026-09-16):
     the bar is the list's footer, so it sits above Cancel/Save whatever the
     list's height, and free space falls above it rather than below. Works
     because `.body` (TaskPanelStockTab.module.css) is a `flex: 1` column —
     once the content outgrows the region there is no free space and the
     margin collapses, leaving the bar after the last material as before.
     This REVERSES the earlier "never pinned" rule of the same day, which
     pulled the bar up to the content to kill a dead band above it. */
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--info-tint-soft);
  border: 1px solid var(--info-tint);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--navy);
}

/* ---------- The review ---------- */

._group_1d1iy_139 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._groupHead_1d1iy_145 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._groupLabel_1d1iy_153 {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A group's material box: white for the new order, the info blue for an add
   to an order on its way, amber for one that lands late or needs a change. */
._box_1d1iy_161 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--color-surface);
  padding: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--navy);
}

._box_1d1iy_161[data-tone='info'] { background: var(--info-tint-soft); border-color: var(--info-tint); }
._box_1d1iy_161[data-tone='warn'] { background: var(--color-warn-bg); border-color: var(--color-warn); }

._line_1d1iy_102 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-sm);
}

._lineQty_1d1iy_183 {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._boxNote_1d1iy_190 { margin: 0; color: var(--g500); }

._late_1d1iy_192 { margin: 0; font-weight: 600; }

._reviewFoot_1d1iy_194 {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

._ghost_1d1iy_202 {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g600);
}

/* The foot's primary follows Back rather than pushing away from it. */
._reviewFoot_1d1iy_194 ._primary_1d1iy_17 { margin-left: 0; }

/* ---------- The truck beside "Back to materials" (ruling 2026-09-16) ------ */

._truckWrap_1d1iy_215 { position: relative; display: inline-flex; }

._truck_1d1iy_215 {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--g600);
  cursor: pointer;
}

._truckOpen_1d1iy_227 { color: var(--info); }

/* The count on the truck's shoulder: a white ring keeps it clear of the
   strokes, and the shadow softens it against the drawer. */
._badge_1d1iy_231 {
  position: absolute;
  top: -3px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--color-error);
  box-shadow: 0 0 0 2px var(--color-surface);
  color: var(--color-surface);
  font-size: var(--fs-3xs);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

._panel_1d1iy_251 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-inline-popover);
  width: 260px;
  display: flex;
  flex-direction: column;
  padding: 8px 10px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover);
}

._panelHead_1d1iy_266 {
  margin: 0 0 4px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._panelRow_1d1iy_275 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--g100);
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

._panelRow_1d1iy_275:last-of-type { border-bottom: 0; }
._panelRow_1d1iy_275:hover { color: var(--info); }

._panelQty_1d1iy_294 {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._panelReview_1d1iy_301 {
  align-self: flex-end;
  margin-top: 8px;
}
/* An order's link back to the Scheduler task(s) it was raised from: the board
   card's icon-only pill and the delivery drawer's "Raised from task" blocks. */

/* ---------- Card pill ---------- */
._pill_1w2bb_5 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--s-2);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--info-tint);
  color: var(--info);
  vertical-align: -1px;
}

/* ---------- Drawer block ---------- */
._block_1w2bb_18 {
  flex: none;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  overflow: hidden;
}

._head_1w2bb_25 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--info-tint-soft);
  border-bottom: 1px solid var(--g100);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--info);
}

._open_1w2bb_40 {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--info);
  cursor: pointer;
}

._open_1w2bb_40:hover {
  text-decoration: underline;
}

._open_1w2bb_40:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._body_1w2bb_63 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-3);
  font-family: var(--f-body);
}

._name_1w2bb_71 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
  overflow-wrap: anywhere;
}

._path_1w2bb_78 {
  font-size: var(--fs-xs);
  color: var(--g500);
  overflow-wrap: anywhere;
}

._facts_1w2bb_84 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--g600);
}

/* The " · " between facts is drawn, not written — it is punctuation. */
._facts_1w2bb_84 > * + *::before {
  content: '·';
  margin-right: var(--s-2);
  color: var(--g400);
}

._booked_1w2bb_100 {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-1);
  padding: 6px 9px;
  border: 1px solid var(--g100);
  border-radius: var(--r-sm);
  background: var(--g50);
  font-size: var(--fs-xs);
  color: var(--g600);
}

/* The types and the floors: two groups on one line. The types give way
   (ellipsis) before the floors or the amount do. */
._bookedWhat_1w2bb_115 {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

._bookedKinds_1w2bb_121 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A rule and a lighter grey set the floors apart from the types. */
._bookedFloors_1w2bb_129 {
  flex: none;
  margin-left: var(--s-2);
  padding-left: var(--s-2);
  border-left: 1px solid var(--g200);
  color: var(--g500);
  white-space: nowrap;
}

/* A count that stands for more than it says — the tooltip holds the rest. */
._more_1w2bb_139 {
  color: var(--info);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

._booked_1w2bb_100 b {
  flex: none;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

._removed_1w2bb_153 {
  margin: 0;
  padding: var(--s-2) var(--s-3) var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g500);
}

/* The spelled-out count beside the icon (drawer rows only). */
._pillCount_1w2bb_162 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
}
/* Search box — extracted from the Project Merge GenbaPane/TrusstorPane.
   This is the single source of truth for the search shape
   (radius/border/background/height/icon); the TopBar renders this same
   component for its decorative search. */

._searchBox_1hv88_6 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--g300);
  border-radius: var(--r-xl);
  padding: 0 10px 0 12px;
  height: 38px;
  background: var(--g50);
  color: var(--g500);
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

._searchBox_1hv88_6:focus-within {
  border-color: var(--navy);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--navy-soft);
  color: var(--g700);
}

._searchInput_1hv88_27 {
  background: none;
  border: 0;
  outline: none;
  font-family: var(--f-jp);
  font-size: var(--fs-sm);
  color: var(--g800);
  width: 100%;
}

._searchInput_1hv88_27::placeholder {
  color: var(--g500);
}

._clear_1hv88_41 {
  border: 0;
  background: transparent;
  color: var(--g400);
  padding: 2px;
  border-radius: var(--r-sm);
  display: inline-flex;
}

._clear_1hv88_41:hover {
  color: var(--navy);
  background: var(--g100);
}

._hint_1hv88_55 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 2px 6px;
  background: var(--color-surface);
  color: var(--g500);
}
._list_19swn_1 {
  /* Fills the panel body (Panel `fill`) and scrolls past it — the ScrollArea
     root; its viewport is the scroller. The HEIGHT cap is not here — it lives
     on the pair's grid items (`.rowEqual > *`, LogisticsPage.module.css),
     because a max-height clamp mixing px with an intrinsically-unresolvable
     percentage silently drops. This list only needs to take whatever height
     the capped card gives it. */
  flex: 1 1 auto;
}._items_19swn_11 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}._row_19swn_4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);

  /* Right gutter: the badge and tank close the row, and with the kebab column
     gone they would sit flush against the list's scroll edge. */
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--separator);

  /* The row's one affordance: open the detail drawer (the kebab is gone,
     same as the delivery cards). Inline action buttons carry their own
     cursor already. */
  cursor: pointer;
}._row_19swn_4:focus-visible,
._row_19swn_4:has(> ._rowOpen_19swn_38:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}/* In-flight delete: fade the row's content under a centered status label. */._row_19swn_4[data-deleting] {
  pointer-events: none;
}._row_19swn_4[data-deleting] > :not(._deletingOverlay_19swn_49) {
  opacity: 0.3;
}._deletingOverlay_19swn_49 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._row_19swn_4:last-child {
  border-bottom: none;
}/* The row div itself is not clickable; interactive controls (kebab menu,
   inline Renew/update-link action buttons) live inside it. */._main_19swn_70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}._provName_19swn_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}._deleteItem_19swn_86 {
  color: var(--color-error);
}/* Both text lines are single-line-with-ellipsis (same treatment as the delivery
   panel's `.material` / `.meta`). The material name is free text up to 120 chars
   and can arrive as one unbroken token, which does not wrap and ran straight out
   of the card. Clamping (rather than wrapping) also keeps rows a uniform height —
   the full name is on the update dialog. Relies on `.main { min-width: 0 }`:
   without it the flex item refuses to shrink below its content and the ellipsis
   never engages. */._name_19swn_97,
._meta_19swn_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._name_19swn_97 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_19swn_91 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._provenance_19swn_115 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* "Delivery takes ~Nd" on the provenance line, text-only — a step up from the
   line's own muted grey (not the `.hint` line's amber/red, which is reserved
   for urgency), just enough emphasis to read as a small data figure. The
   tooltip it opens carries the CONCLUSION (the tick-consistent "Order by
   <date>" deadline plus provenance), so nothing here duplicates it. Dotted
   underline (not the `.hint` line's solid-on-hover one) marks it as a hover
   target, not a click target.

   Plain inline, not inline-flex: the Tooltip trigger renders THIS span
   itself (Base UI merges its props onto it, no wrapper), so whatever box
   type it declares is what sits in the provenance line's text flow. An
   inline-flex box computes its own baseline from its flex line rather than
   the text inside it, which floated this segment off the "Started … ·
   admin · …" siblings' shared baseline — inline text needs no flex
   properties at all, so the box-baseline mismatch cannot recur. */._deliveryTakes_19swn_135 {
  color: var(--g600);
  font-weight: 600;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}/* Badge on top, duration cap beneath — the tank is its own sibling column
   between `.side` and `.endCol`, so this stack carries both figures the tank
   itself has no room for. */._side_19swn_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;

  /* Centered with the tank beside it — the badge/cap stack and the tank read
     as one gauge, so they share the row's vertical middle (the kebab alone
     stays pinned to the top corner). */
  align-self: center;
}._badge_19swn_160 {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Transparent, so the urgent tone's visible border costs no height. Without
     it an urgent badge was 20px against everyone else's 18px, and the bar
     beneath it dropped 2px out of line with the duration on exactly those
     rows — the ones already shouting for attention. */
  border: 1px solid transparent;
}._badge_19swn_160[data-tone='ok'] {
  color: var(--color-success);
  background: var(--color-success-bg);
}._badge_19swn_160[data-tone='warn'] {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}._badge_19swn_160[data-tone='urgent'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}._badge_19swn_160[data-tone='check'] {
  color: var(--g600);
  background: var(--g50);
  border: 1px dashed var(--g400);
}/* The time-remaining tank now lives in the `ReorderTickTank` component; this
   only supplies the row layout the panel needs (vertically centred beside the
   badge). */._tankInRow_19swn_198 {
  align-self: center;
}/* Truck hint line — additive to the band, one tone per row (amber/reorder or red/gap). */._hint_19swn_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Rendered as a <button> whenever the line has somewhere to go, so the button
     chrome has to be reset here — the two forms must be pixel-identical, and a
     line that shifts when it becomes clickable is a bug nobody looks for. */
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}/* The affordance follows the ELEMENT, not the tone: a line is a <button> only
   when it has somewhere to go, and every tone can now be one — an incoming line
   jumps to its delivery just as the gap line does. Keyed on the tone, the green
   line was clickable and said nothing about it. Underline on hover only, the
   same rule the row's other actions follow. */button._hint_19swn_121 {
  cursor: pointer;
  text-decoration: none;
}button._hint_19swn_121:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}._hint_19swn_121[data-tone='reorder'] { color: var(--color-warn); }._hint_19swn_121[data-tone='gap'] { color: var(--color-error); }._hint_19swn_121[data-tone='incoming'] { color: var(--color-success); }/* Actionable text on a row: bold italic, underlined ONLY on hover — the
   underline is the affordance, not decoration. */._action_19swn_244 {
  font: inherit;
  font-weight: 700;
  font-style: italic;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: none;
}._action_19swn_244:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }._action_19swn_244:disabled {
  opacity: 0.5;
  cursor: default;
}._renewAsk_19swn_263 {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
}/* A landed-but-late arrival keeps the overdue tone the in-flight note wore —
   the fact it turned up does not make its lateness good news. */._renewAskLate_19swn_274 {
  color: var(--color-warn);
}._addBtn_19swn_278 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--status-planned-text);
  background: var(--status-planned-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}._addBtn_19swn_278:disabled {
  opacity: 0.5;
  cursor: default;
}/* An in-flight delivery past its own ETA. Amber, not green: something is still
   coming, but its date has gone by and nobody has seen it — that is a prompt to
   chase, not reassurance that the material is covered. */._hint_19swn_121[data-tone='late'] { color: var(--color-warn); }/* The arrival named on a ran-out row. It answers the question the line is
   asking, so it carries weight against the muted provenance text around it. */._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}/* When an arrival phrase names a known delivery it becomes a jump link. Same
   button-reset discipline as .hint so the note stays pixel-identical to its
   plain-span form — a phrase that shifts the moment it gains a target is a bug
   nobody looks for. Underline on hover only; the chevron slides like .hint's.
   `.renewAskJump` is the covered row's "New delivery arrived…" phrase; it takes
   the same reset but keeps the LINE's own colour and weight (amber when the
   arrival was late), which a fixed navy would strip. */button._arrivalNote_19swn_302,
button._renewAskJump_19swn_311 {
  display: inline-flex;
  align-items: center;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}button._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}button._renewAskJump_19swn_311 {
  color: inherit;
}button._arrivalNote_19swn_302:hover,
button._renewAskJump_19swn_311:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:hover ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}._durationCap_19swn_350 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}._durationCap_19swn_350[data-tone='ok'] { color: var(--color-success); }._durationCap_19swn_350[data-tone='warn'] { color: var(--color-warn); }._durationCap_19swn_350[data-tone='urgent'] { color: var(--color-error); }/* The trailing "goes somewhere" mark. Decoration, not a control: it inherits
   the line's tone via currentColor so it reads as part of the sentence. */._jumpMark_19swn_342 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  opacity: 0.65;
  transition: opacity 120ms ease, transform 120ms ease;
}button._hint_19swn_121:hover ._jumpMark_19swn_342,
button._hint_19swn_121:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}@media (prefers-reduced-motion: reduce) {
  ._jumpMark_19swn_342 {
    transition: opacity 120ms ease;
  }

  button._hint_19swn_121:hover ._jumpMark_19swn_342,
  button._hint_19swn_121:focus-visible ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342 {
    transform: none;
  }
}/* ---- Untracked material: a delivery exists, no stock record does ----
   A faint diagonal hatch rather than a solid tint or a coloured rail: the row
   holds no figures, and the hatch says "nothing here yet" without competing
   with the tones that DO carry meaning on this panel (green/amber/red are
   states of a real estimate; this row has no estimate to be in a state). */._row_19swn_4[data-untracked] {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 14px
  );
}/* `.side` centers itself so the badge/cap stack reads as one gauge WITH the
   tank beside it. A row with NO tank has nothing to centre against, so its
   badge belongs at the top-right corner like the row's title, not floating in
   the vertical middle. Two such rows: the untracked placeholder ("Not tracked")
   and a ran-out tracked row ("Ran out") — both render no gauge, so the rule is
   generic across them rather than special-cased to one. */._row_19swn_4[data-untracked] ._side_19swn_145,
._row_19swn_4[data-needscheck] ._side_19swn_145 {
  align-self: flex-start;
}/* Dashed like the needsCheck badge — both say "there is no figure here", which
   is a different claim from any number. */._badge_19swn_160[data-tone='untracked'] {
  color: var(--info);
  background: var(--info-tint);
  border: 1px dashed var(--info);
}._hint_19swn_121[data-tone='untracked'] {
  color: var(--info);
}/* The untracked row's note and its action on one line, the way a tracked row
   keeps `Sync` beside the sentence it answers. */._untrackedLine_19swn_432 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}/* The untracked row's Add-stock action. Unchanged from when it sat in the side
   column — only its position moved, next to the note it answers. */._sideAction_19swn_441 {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}._sideAction_19swn_441:hover:not(:disabled) {
  color: var(--navy);
}._sideAction_19swn_441:disabled {
  opacity: 0.5;
  cursor: default;
}/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}/* Classes below this line are copied from DeliveryPipeline.module.css — the
   card body is the list row's content, transplanted onto a kanban card, so
   the trail/arrival chips keep pixel-identical styling. *//* In-flight delete: fade the card's content under a centered status label
   (same treatment as the pipeline row). */._deletingOverlay_1wksx_7 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* Statuses dropdown + "+ New delivery", side by side in the panel header. */._headerActions_1wksx_19 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}/* Same treatment as the inventory panel's header action — the one rule,
   composed, so the two panels' buttons (and their disabled state) cannot
   drift apart. */._addBtn_1wksx_28 {
}._deleteItem_1wksx_32 {
  color: var(--color-error);
}/* Every text line on the card is single-line-with-ellipsis. Clamping (rather
   than wrapping) keeps cards a uniform width — the full note is on the edit
   dialog. Relies on `.cardMain { min-width: 0 }`: without it the flex item
   refuses to shrink below its content and the ellipsis never engages. */._material_1wksx_40,
._meta_1wksx_41 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._material_1wksx_40 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_1wksx_41 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}/* The in-flight negotiation trail: a filled chip per date the supplier
   actually gave, a dashed ghost chip for whichever is still awaited — see
   `renderTrail` in BoardCard.tsx. Retired once a card arrives, where
   `.dateList` below takes over. */._dates_1wksx_64 {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* arrows sit mid-chip, not on the text baseline */
  gap: 6px;
  margin-top: 4px;
}._dateChip_1wksx_72 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xl);
  background: var(--g50);
  border: 1px solid var(--separator);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
}._dateChip_1wksx_72 b {
  font-weight: 700;
}._dateLabel_1wksx_89 {
  font-size: var(--fs-2xs);
  color: var(--g500);

  /* .dateChip has no flex-basis, so under width pressure the browser can
     shrink it below its max-content size and wrap this label's words
     ("Replied by" -> "Replied" / "by"). Keep it one line like the fixed
     .dateRowLabel column does for the settled-card summary. */
  white-space: nowrap;
}._chipArrow_1wksx_100 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* Dashed placeholder standing in for the date the trail is still waiting on —
   Requested before a request went out, Answered before the supplier replies.
   Composes with `.dateChip` for the shared padding/layout; only the border
   and fill differ from a filled chip. */._chipGhost_1wksx_109 {
  border-style: dashed;
  border-color: var(--g300);
  background: none;
}/* The amber "pending" word — inside a ghost chip, and reused verbatim for the
   footer's due-placeholder "pending" span, so "waiting on a date" reads the
   same wherever it shows up on the card. */._ghostHint_1wksx_118 {
  color: var(--color-warn);
  font-weight: 650;
}/* The arrived date summary: Requested / Answered / Arrived, one row each,
   always all three, once a card has landed — see `renderArrival` in
   BoardCard.tsx. The in-flight trail above stays a chip row; this is a
   plain list, since a settled card has more to say (three dates, not one
   open question) than a chip row comfortably holds. */._dateList_1wksx_63 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}._dateRow_1wksx_96 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
}/* Fixed width, not a hard column count: labels are short in every locale
   this product ships (Requested/Replied by/ETA/Arrived; 希望/返答/到着予定/到着),
   so one em-relative width lines every value up without the English label
   dictating a raw pixel figure. nowrap guards the widest label ("Replied
   by") from breaking onto two lines at odd zoom levels. */._dateRowLabel_1wksx_96 {
  flex: 0 0 5.75em;
  font-size: var(--fs-2xs);
  color: var(--g500);
  white-space: nowrap;
}._dateRowValue_1wksx_154 {
  font-weight: 700;
  color: var(--navy);
}/* The one settled FACT on the card, not an ask or a reply — the row a
   Delivered-column card is actually scanned for. */._dateArrived_1wksx_161 {
  color: var(--color-success);
}/* How the arrival landed against the agreed date. Sits beside the Arrived
   row's value and carries the tone alone — same grammar as the trail's
   ghost hint above. */._variance_1wksx_168 {
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-2xs);
}._varOnTime_1wksx_174 {
  color: var(--color-success);
}/* Early is not a win on a just-in-time site — nobody booked the crane or the
   yard for it. Informational grey, not green. */._varEarly_1wksx_180 {
  color: var(--g500);
}._varLate_1wksx_184 {
  color: var(--color-error);
}/* Agreed deadline, in the card footer. */._due_1wksx_189 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._dueLate_1wksx_196 {
  color: var(--color-error);
}/* Stands where the deadline would be, so an undated card reads as "waiting on
   a date" rather than as one nobody has filled in. Muted, like any other
   label — the amber "pending" span beside it (`.ghostHint`) is what carries
   the awaited tone now, not the whole line. */._duePending_1wksx_204 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g500);
}/* The footer's "pending" sits beside the label, not inside a date chip, so it
   must pin its own size to the label's — otherwise it inherits the card's
   base size and floats off the shared baseline. */._duePendingHint_1wksx_214 {
  font-size: var(--fs-xs);
  line-height: inherit;
}/* Name + amount on one line. The name clamps and the amount does not: a long
   material name must lose characters before the figure disappears. */._materialLine_1wksx_221 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;

  /* Clears the card's star, which sits over this line's right end. */
  padding-right: var(--s-5);
}._cardStar_1wksx_231 {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
}._materialLine_1wksx_221 ._material_1wksx_40 {
  flex: 0 1 auto;
  min-width: 0;
}._qty_1wksx_242 {
  flex: none;
  margin-left: auto;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}/* Jump target: a card named elsewhere on the board, flashed after the scroll
   lands. An absolutely-positioned overlay rather than a background on `.card`
   itself, so it cannot fight the delete treatment or the card's own border,
   and so it can be remounted per jump to replay the animation.

   The animation itself is the shared Components/ui/JumpFlash, composed
   below — the same one the pipeline row, the progress tracker's column jump
   and the Help Center's search landing use: one visual language for "here is
   the thing you asked for". */._jumpFlash_1wksx_261 {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: var(--z-raised-1);
}/* Board frame — values from the approved mockup. */._board_1wksx_272 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-1) 0;
}/* Columns share the row evenly: equal grow from a zero basis, so three columns
   and eight columns each divide the width the same way. `min-width` (not
   shrink) is the floor — past it the row overflows into the board's ScrollArea rather
   than squeezing cards into unreadable slivers. 280px is the width a column
   settled at under the old `max-width` cap with the three seeded statuses, so
   the cap became the floor: the layout the board shipped with is now the
   narrowest a column ever gets, not the widest. */._column_1wksx_286 {
  flex: 1 0 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  height: 440px;

  /* The cap holds in every mode: search mode lets a column SHRINK to its
     matches (below), but never grow past the working height — past it the
     column's own stack scrolls. */
  max-height: 440px;
  background: var(--g50);
  border-radius: var(--r-xl);
  padding: 6px 10px 10px;
}/* Search mode: the fixed working height gives way to content, up to the cap —
   the row is as tall as the column with the most matches, and the rest
   stretch to line up with it. `stretch` (not flex-start) is what keeps the
   emptied columns from collapsing to ragged stubs beside the one that
   matched. */._board_1wksx_272[data-searching] {
  align-items: stretch;
}._board_1wksx_272[data-searching] ._column_1wksx_286 {
  height: auto;
}._columnGrip_1wksx_315 {
  display: flex;
  justify-content: center;
  color: var(--g300);
  padding: 2px 0 4px;
  cursor: grab;
  touch-action: none;
  flex: none;
}._columnGrip_1wksx_315:hover {
  color: var(--g500);
}/* The edit lock: no sensors, so no drag to promise. */._board_1wksx_272[data-locked] ._columnGrip_1wksx_315 {
  cursor: default;
}._columnHead_1wksx_334 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px 4px 10px;
  flex: none;
}._columnName_1wksx_342 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* The column-header count pill and the drawer's `.ddCount` are one style —
   declared together so they can't drift. */._count_1wksx_350,
._ddCount_1wksx_348 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  background: var(--g100);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}/* A column's cards: the ScrollArea root takes the column's remaining height,
   its viewport (`.stack`) is the scroller — jump-to-card scrolls it by class. */._stackFrame_1wksx_363 {
  flex: 1 1 auto;
}._stack_1wksx_362 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}._card_1wksx_38 {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  flex: none;
}._card_1wksx_38[data-deleting] {
  opacity: 0.3;
}/* The DragOverlay ghost — see BoardCardPreview. Fixed width: a column-hosted
   card takes its width from the column's own flex sizing, but
   this one is portalled to document.body with no such parent, so it needs
   its own. `--shadow-popover` reads as "lifted" against the board the way
   `--shadow-card` never could — the point is that this card is no longer
   resting in a column. `cursor: grabbing`, not the row's own pointer
   affordance: the real card underneath already shows the drag is live. */._cardPreview_1wksx_393 {
  width: 240px;
  box-shadow: var(--shadow-popover);
  cursor: grabbing;
}._cardHoverPreview_1wksx_399 {
  width: 260px;
  box-shadow: var(--shadow-popover);
}._cardMain_1wksx_38 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}._cardFoot_1wksx_417 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}._overdueBadge_1wksx_424 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-pill);
  padding: 0 7px;
}._columnEmpty_1wksx_434 {
  border: 1px dashed var(--g200);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  font-size: var(--fs-2xs);
  color: var(--g400);
  text-align: center;
  flex: none;
}._showAll_1wksx_444 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}/* Statuses dropdown (board header) — values from the approved mockup. The
   kebab trigger opens a real base-ui Menu ("Manage statuses"); selecting that
   item opens the management panel below, which stays a custom popover (not a
   base-ui Menu) because it hosts inline rename/add <input>s that need to keep
   focus while open, which a base-ui Menu.Popup (built to close on interaction
   and manage its own roving focus) actively fights. */._statusesRoot_1wksx_461 {
  position: relative;
}._dropdownPanel_1wksx_465 {
  /* On <body>, pinned under the trigger by StatusesMenu (top/right inline):
     the board card clips its overflow, so the panel lives outside it. */
  position: fixed;
  z-index: var(--z-popover);
  width: 250px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-dropdown);
}._ddTitle_1wksx_478 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px 8px 4px;
}._ddRow_1wksx_487 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px;
  border-radius: var(--r-sm);
}._ddRow_1wksx_487:hover {
  background: var(--g50);
}._ddName_1wksx_499 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}._ddCount_1wksx_348 {
  flex: none; /* pill styling shared with .count above */
}/* A status row's kebab: the shared KebabButton, tightened to the row. */._ddKebab_1wksx_515 {
  padding: 2px;
}._ddAdd_1wksx_519 {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--info);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}._ddAdd_1wksx_519:hover {
  background: var(--g50);
}._ddAdd_1wksx_519:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._ddInput_1wksx_542 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--info);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  background: var(--color-surface);
}._ddInput_1wksx_542:disabled {
  opacity: 0.6;
}._menuWhy_1wksx_559 {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g500);
}/* A multi-material card's line rows (design 2026-09-14 §4.2): the first two
   materials in full under the ref/destination row, each with its amount right
   — then a count for the rest, so a three-material card is no taller than
   today's plus one row. */._lineRow_1wksx_570 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}._lineName_1wksx_577 {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* What a row is about, at a glance: the package before each material line,
   the building before the supplier. Muted so it guides the eye without
   outweighing the text; centred, since an icon has no baseline. */._fieldIcon_1wksx_591 {
  flex: none;
  display: inline-flex;
  align-self: center;
  color: var(--g400);
}._moreLines_1wksx_598 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}/* Stock tab — own stylesheet: TaskPanel.module.css is grandfathered at the
   600-line quality-gate cap and may not grow, so the four `.field` rules the
   drawer's other tabs share are copied here rather than composed across
   modules (not available with CSS Modules as used in this codebase). */._body_lr955_6 {
  /* The tab's own scroll region (a ScrollArea root): the drawer's `Tabs.Panel`
     is a flex column that hands its height down, so without `flex: 1;
     min-height: 0` a long claim list runs under the footer instead of
     scrolling (the Locations tab's `.wrap` does the same). */
  flex: 1;
  min-height: 0;
}._bodyContent_lr955_15 {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}._scope_lr955_22 { margin: 0; font-size: var(--fs-xs); color: var(--g500); }._claimBlock_lr955_24 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--separator);
}._claimBlock_lr955_24:last-of-type { border-bottom: none; }/* A material nobody is editing: its cart item (`StockCartItem`) is its own
   box, so the block adds no separator of its own. */._foldedBlock_lr955_36 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}/* A claim's top line is Material | Unit — the unit is picked first because
   everything below it (per-piece figures, subtotals, the total) is expressed
   in it. It must fit the 440px drawer (400px inside its padding). Grid items
   default to `min-width: auto`, which lets a control's intrinsic width push
   the right column out of the drawer — `min-width: 0` on each cell makes the
   tracks the authority and the controls (all `width: 100%`) fit. */._row_lr955_49 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
  align-items: start;
}._row_lr955_49 > ._field_lr955_2 { min-width: 0; }/* Copied verbatim from TaskPanel.module.css's `.field` group (lines ~136-161)
   — see the note above. */._field_lr955_2 { display: flex; flex-direction: column; gap: 4px; }._field_lr955_2 label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}/* Same skin as the row's PickCombo triggers (ui/PickCombo `.input`) so the
   cells of a claim line up as one control strip; the locked unit wears it
   too, so every value in the row sits in the same shape as its neighbours. */._field_lr955_2 input,
._field_lr955_2 textarea,
._field_lr955_2 ._lockedValue_lr955_75 {
  width: 100%;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  background: var(--white);
  color: var(--navy);
}._field_lr955_2 input:focus-visible,
._field_lr955_2 textarea:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._field_lr955_2 input[aria-invalid] {
  border-color: var(--color-error);
}/* Read-only field values — the unit the site's stock sets, and the quantity
   the chosen elements compute. Same "you can't edit this" treatment as the
   delivery form's locked unit. */._field_lr955_2 ._lockedValue_lr955_75 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--g50);
  color: var(--g500);
}/* Why the Quantity field cannot be typed into, said next to the number. *//* The computed quantity sits a clear step below the Material/Unit line (or
   the types block), not flush against it — it is a result, not a fourth
   field of the same group. */._quantityField_lr955_113 { margin-top: 12px; }/* The amount and its context on one line: the figure leads, the rest trails
   it in grey and wraps when it must. */._figures_lr955_117 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
}/* The context figures travel together, so a wrap never strands the drawn
   separator at the start of a line — it only ever sits BETWEEN them. */._context_lr955_129 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}._context_lr955_129 > * + *::before {
  content: '·';
  margin-right: var(--s-2);
  color: var(--g400);
}._amount_lr955_143 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}/* The figure that holds the names: a real control, so a tap and the keyboard
   reach the tooltip, not the pointer alone. */._others_lr955_152 {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--info);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}/* The types block: one boxed list, a header, a row per CAD type (its chosen
   elements and a Select… link), and the summed quantity as a footer. */._types_lr955_166 {
  margin-top: 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  overflow: hidden;
}._typesHead_lr955_173,
._typesTotal_lr955_174 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  background: var(--g50);
}._typesHead_lr955_173 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}._typesTotal_lr955_174 {
  border-top: 1px solid var(--g200);
  font-size: var(--fs-xs);
  color: var(--g600);
}._typesTotal_lr955_174 b { font-size: var(--fs-sm); color: var(--navy); }._typeRow_lr955_199 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--g200);
}._typeInfo_lr955_208 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}._typeName_lr955_215 { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }._typeMeta_lr955_217 { font-size: var(--fs-xs); color: var(--g500); }/* The per-floor split under a type's line when the task spans several
   floors — "{floor} · {n}" per floor; navy where some are chosen there. */._typeSplit_lr955_221 { font-size: var(--fs-xs); color: var(--g400); }._typeSplitChosen_lr955_223 { color: var(--navy); font-weight: 600; }/* The subtotal of the chosen elements, with how many they are under it. */._typeSub_lr955_226 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--g800);
  text-align: right;
}._typeSub_lr955_226 small {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
  margin-top: 2px;
}/* All three are bare inline text buttons — one shared rule rather than three
   near-identical blocks; only the colour and decoration differ. */._backToCad_lr955_243,
._selectLink_lr955_244 {
  align-self: flex-start;
  font: inherit;
  font-size: var(--fs-xs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}._backToCad_lr955_243 { color: var(--info); }/* "← Back to materials" and the truck share a line; on the list the truck
   sits there alone (ruling 2026-09-16). */._topRow_lr955_258 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}._topRow_lr955_258:only-child,
._topRow_lr955_258 > *:only-child { margin-left: auto; }._selectLink_lr955_244 { color: var(--info); text-decoration: underline; }._hint_lr955_270 { margin: 0; font-size: var(--fs-xs); color: var(--g500); }._noTakeoff_lr955_272 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--navy);
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn);
  border-radius: var(--r-md);
  padding: 8px 10px;
}._banner_lr955_282 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--navy);
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn);
  border-radius: var(--r-md);
  padding: 10px 12px;
}._bannerActions_lr955_294 { display: flex; gap: 8px; }._bannerActions_lr955_294 button {
  font: inherit;
  font-weight: 700;
  border-radius: var(--r-md);
  border: 1px solid var(--navy-line);
  background: var(--color-surface);
  padding: 4px 10px;
  cursor: pointer;
}._outcomeBox_lr955_306 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-xs);
  border-radius: var(--r-md);
  padding: 8px 10px;
}._outcomeBox_lr955_306[data-tone='idle'] { color: var(--g500); background: none; padding: 0; }._outcomeBox_lr955_306[data-tone='ok'] { color: var(--navy); background: var(--color-success-bg); }._outcomeBox_lr955_306[data-tone='warn'] { color: var(--navy); background: var(--color-warn-bg); }._outcomeBox_lr955_306[data-tone='error'] { color: var(--color-error); background: var(--color-error-bg); }/* The one red-text treatment the tab uses for a figure the user has to act on
   — an add the checkout could not make, and the shortfall on an inventory
   row. Both compose it so the two stay the same red. */._errorText_lr955_323 { color: var(--color-error); font-weight: 600; }/* ---------- An order on its way (`StockOrderCard`) ---------- *//* The board card's own surface, shrunk into the checkout's review: same
   tokens, so the order reads as the same object it is on the Logistics board. */._joinCard_lr955_329 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--navy);
}._joinTop_lr955_340 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}._joinRef_lr955_347 { font-weight: 700; }/* The board card's own quantity: pushed to the right edge of the line,
   whatever the pills before it. Composed rather than re-derived — the join
   card is that card shrunk, so its figure wears the same skin (its `--fs-xs`
   is what the box already sets on its text). */._joinQty_lr955_353 {
}._joinMeta_lr955_357,
._joinAfter_lr955_358 { color: var(--g600); }._joinError_lr955_360 { }/* Hosts Inventory Levels' own "not tracked" row (a list item there). */._untrackedList_lr955_363 { list-style: none; margin: 0; padding: 0; }._inventoryBox_lr955_365 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;

  /* The row's one affordance: open the record in the companion beside the
     drawer — the same tap the Inventory Levels rows and the site map's area
     drawer answer to. */
  cursor: pointer;
}._inventoryBox_lr955_365:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}._inventoryMain_lr955_386 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}._claimLine_lr955_395 { color: var(--g600); }._gapLine_lr955_396 { }/* The empty tab: the tile sits in the middle of what is otherwise blank. */._emptyWrap_lr955_399 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}/* Alignment is the caller's — centred inside the empty tile, left of a list
   (`.addBtnStart`) — so the button itself carries none. */._addBtn_lr955_407 {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 1px dashed var(--info);
  border-radius: var(--r-md);
  padding: 6px 12px;
  cursor: pointer;
}._addBtnStart_lr955_407 {
  align-self: flex-start;
}._loading_lr955_425 { margin: 0; padding: 16px 20px; font-size: var(--fs-sm); color: var(--g500); }/* A reader's view of the task's claims (no `tasks.execute`): one line per
   material, the amount at the end. */._readList_lr955_429 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }._readItem_lr955_431 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--fs-sm);
  color: var(--g800);
}._readQty_lr955_440 { color: var(--g500); white-space: nowrap; }._select_8zfmx_1 {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  background: var(--g50);
  color: var(--g800);
  cursor: pointer;
  min-width: 0;
}._lagInput_8zfmx_15 {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px 5px;
  font-size: var(--fs-xs);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
  text-align: right;
}._lagInput_8zfmx_15:focus-visible,
._select_8zfmx_1:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._delBtn_8zfmx_32 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px;
  color: var(--g500);
  cursor: pointer;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._delBtn_8zfmx_32:hover {
  background: var(--gantt-status-blocked-bg);
  color: var(--gantt-status-blocked-fg);
}._backdrop_71l63_1 {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 38%);
  z-index: var(--z-drawer-backdrop);
  animation: _backdropFade_71l63_1 180ms ease-out;
}@keyframes _backdropFade_71l63_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}._drawer_71l63_14 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: 440px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-drawer-right);
  animation: _drawerSlide_71l63_1 240ms cubic-bezier(0.16, 1, 0.3, 1);
}@keyframes _drawerSlide_71l63_1 {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}@media (prefers-reduced-motion: reduce) {
  ._backdrop_71l63_1,
  ._drawer_71l63_14 {
    animation: none;
  }

  ._subtaskRow_71l63_40 {
    transition: none;
  }
}._header_71l63_45 {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}._headerTop_71l63_51 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}/* Identity block: which group the task belongs to, what it is called, when it
   runs. The name is the drawer's title (it used to be the generic "Task
   details", with the name repeated at the top of the Overview). */._identity_71l63_62 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}/* Where the task sits — group, then the summaries above it — as ONE quiet
   line over the title. It never wraps: crumbs shrink (outer ones first) and
   ellipsize, the nearest parent keeps the most room. */._trail_71l63_71 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--g500);
  white-space: nowrap;
}._crumb_71l63_84 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
}/* The nearest parent is the most telling crumb, so it gives up width last. */._crumb_71l63_84:last-child { flex-shrink: 0.2; }._crumbText_71l63_95 { overflow: hidden; text-overflow: ellipsis; }._crumbSep_71l63_97 { flex-shrink: 0; color: var(--g400); }._crumbLink_71l63_99 { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }._crumbLink_71l63_99:hover { color: var(--g800); text-decoration: underline; }._groupDot_71l63_102 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  flex-shrink: 0;
}/* The task's name is the drawer's subject — the one big line in the header. */._title_71l63_110 {
  margin: 4px 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--g800);
  overflow-wrap: anywhere;
}._headerDates_71l63_119 {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--g600);
  font-variant-numeric: tabular-nums;
}._iconBtn_71l63_126 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: var(--r-lg);
  cursor: pointer;
  color: var(--g600);
  display: inline-flex;
}._iconBtn_71l63_126:hover {
  background: var(--g100);
  color: var(--g800);
}._headerMeta_71l63_142 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}._body_71l63_149 { flex: 1; }._bodyContent_71l63_151 {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}._field_71l63_158 { display: flex; flex-direction: column; gap: 4px; }._field_71l63_158 label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}._field_71l63_158 input,
._field_71l63_158 select,
._field_71l63_158 textarea {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 9px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
}._field_71l63_158 input:focus-visible,
._field_71l63_158 select:focus-visible,
._field_71l63_158 textarea:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._field_71l63_158 input:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}/* Why a field above went inert: the work has been observed, so its plan is a
   record. See docs/specs/2026-09-20-observed-work-is-frozen-amendment.md. */._freezeHint_71l63_195 {
  margin: -4px 0 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}/* Read-only group chip shown for a sub-task: a sub-task inherits its parent's
   group, so there's no GroupSelect — the group is fixed. Sits in the same field
   slot the select would occupy so the form layout stays aligned. */._groupReadonlyChip_71l63_204 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  color: var(--g800);
  background: var(--g50);
}._row_71l63_216 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }/* GroupSelect — replaces the native <select> for the Group field so we can
   offer an inline "create new group" footer. */._groupSelectTrigger_71l63_220 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 9px;
  background: var(--color-surface);
  color: var(--g800);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}._groupSelectTrigger_71l63_220:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._groupSelectValue_71l63_243 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._groupSelectPopup_71l63_249 {
  min-width: 240px;
}._groupSelectCreateRow_71l63_253 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 6px 8px 4px;
}._groupSelectCreateInput_71l63_261 {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 8px;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--g800);
  width: 100%;
  box-sizing: border-box;
}._groupSelectCreateInput_71l63_261:focus-visible {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._groupSelectCreateBtn_71l63_278 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--info-tint);
  color: var(--info);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}._groupSelectCreateBtn_71l63_278:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}._groupSelectCreateBtn_71l63_278:hover:not(:disabled) {
  background: var(--info);
  color: var(--color-surface);
}._toggle_71l63_305 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--g700);
  cursor: pointer;
}/* ── Task colour picker (edit tab) ─────────────────────────────────────────── */._swatchRow_71l63_315 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }._swatch_71l63_315 {
  appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}._swatch_71l63_315:focus-visible,
._swatchCustom_71l63_333:focus-within {
  outline: 2px solid var(--info-tint);
  border-color: var(--info);
}._swatchSelected_71l63_338 {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--info);
}._swatchDefault_71l63_342 { background: var(--color-surface); }._swatchDefaultMark_71l63_344 {
  width: 18px;
  height: 1.5px;
  border-radius: var(--r-sm);
  background: var(--g400);
  transform: rotate(-45deg);
}._swatchCustom_71l63_333 {
  background: var(--g100);
  color: var(--g500);
  overflow: hidden;
}._swatchCustomMark_71l63_358 {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}._swatchCustomInput_71l63_365 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  box-sizing: border-box;
}/* A drawer section: a hairline above, and its small uppercase title. Every
   section of the drawer (dependencies, sub-tasks, the log) composes these. */._panelSection_71l63_379 {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--separator);
}._panelSectionTitle_71l63_385 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  font-weight: 600;
}._depsSection_71l63_394 {
}._depsTitle_71l63_398 {
}._depsSubtitle_71l63_402 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
  margin: 8px 0 6px;
}._depRow_71l63_409 {
  display: grid;
  grid-template-columns: 1fr 90px 64px 28px;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}._depTaskName_71l63_417 {
  font-size: var(--fs-xs);
  color: var(--g800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._depSelect_71l63_425 {
}._depLag_71l63_429 {
}._depDelBtn_71l63_433 {
}._depAddRow_71l63_437 {
  display: grid;
  grid-template-columns: 1fr 90px 64px auto auto;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}._depAddBtn_71l63_445 {
  appearance: none;
  background: var(--info-tint);
  border: 1px solid var(--info);
  color: var(--info);
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
}._depAddBtn_71l63_445:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._depAddToggle_71l63_462 {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--g600);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
}._depAddToggle_71l63_462:hover:not(:disabled) {
  background: var(--g50);
  border-color: var(--info);
  color: var(--info);
}._depAddToggle_71l63_462:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._depAddToggleIcon_71l63_489 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: var(--fs-sm);
  line-height: 1;
  font-weight: 600;
}._depAddCancel_71l63_500 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px;
  color: var(--g500);
  cursor: pointer;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._depAddCancel_71l63_500:hover {
  background: var(--g100);
  color: var(--g800);
}._depEmpty_71l63_518 {
  font-size: var(--fs-xs);
  color: var(--g500);
  font-style: italic;
  margin: 4px 0;
}._readonlyDepsList_71l63_525 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }._readonlyDepChip_71l63_527 {
  font-size: var(--fs-xs);
  color: var(--g800);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}._readonlyDepMeta_71l63_538 { color: var(--g500); }._footer_71l63_540 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--separator);
  background: var(--g50);
  flex-shrink: 0;
}._spacer_71l63_550 { flex: 1; }/* Outlined, not filled: a solid red Delete was the loudest thing in the drawer,
   louder than the Overview's own step. Destructive stays findable, never the
   headline. 1px less padding pays for the border, so the box keeps its size. */._deleteBtn_71l63_555  { background: var(--color-surface); color: var(--color-error); border: 1px solid var(--color-error-border); padding: 6px 13px; border-radius: var(--r-lg); cursor: pointer; font-size: var(--fs-xs); font-weight: 600; }._deleteBtn_71l63_555:hover:not(:disabled) { background: var(--color-error-bg); }._deleteBtn_71l63_555:disabled { opacity: 0.45; cursor: not-allowed; }._cancelBtn_71l63_558  { background: transparent; border: 0; padding: 7px 14px; cursor: pointer; color: var(--g700); font-size: var(--fs-xs); }._saveBtn_71l63_559    { background: var(--info); border: 0; color: var(--color-surface); padding: 7px 14px; border-radius: var(--r-lg); cursor: pointer; font-size: var(--fs-xs); font-weight: 600; }._saveBtn_71l63_559:disabled { opacity: 0.5; cursor: not-allowed; }._fieldError_71l63_562 { color: var(--red); font-size: var(--fs-2xs); margin-top: 2px; }._tabsRoot_71l63_564 { flex: 1; min-height: 0; display: flex; flex-direction: column; }._createBody_71l63_565 { flex: 1; min-height: 0; display: flex; flex-direction: column; }._tabsList_71l63_566 { /* layout/border handled by the Tabs primitive's own module */ }/* ── Overview tab ─────────────────────────────────────────────────────────── */._overviewActions_71l63_570 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }._actionHelper_71l63_571    { margin: 0; font-size: var(--fs-xs); color: var(--red); }/* ── Subtasks (summary task drawer) ───────────────────────────────────────── */._subtaskSection_71l63_574 {
}._subtaskTitle_71l63_578 {
}._subtaskList_71l63_581 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }._subtaskRow_71l63_40 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}._subtaskRow_71l63_40:hover { background: var(--g50); border-color: var(--g400); }._subtaskName_71l63_599 {
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._subtaskMeta_71l63_608 { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }._subtaskDates_71l63_609 { font-size: var(--fs-xs); color: var(--g600); white-space: nowrap; }._subtaskProgress_71l63_610 { font-size: var(--fs-xs); font-weight: 600; color: var(--g700); min-width: 34px; text-align: right; }._readonlyGrid_71l63_612    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }._readonlyValue_71l63_613   { margin: 0; font-size: var(--fs-sm); color: var(--g800); }._readonlyNotes_71l63_614   { margin: 0; font-size: var(--fs-sm); color: var(--g800); white-space: pre-wrap; }

/* The element list — takes the Stock tab body's place inside the drawer's
   tab panel (a flex column), so it is itself a flex column that hands its
   height down to the scrolling rows region. Own module: TaskPanel.module.css
   is grandfathered at the quality-gate cap and may not grow. */

._picker_13lnq_6 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

._back_13lnq_13 {
  margin: 12px 20px 0;
}

._head_13lnq_18 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 20px 12px;
  border-bottom: 1px solid var(--g200);
}

._head_13lnq_18 b { font-size: var(--fs-sm); color: var(--navy); }

._head_13lnq_18 span { font-size: var(--fs-xs); color: var(--g500); }

._filter_13lnq_30 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--g200);
}

._tool_13lnq_38 {
  font: inherit;
  font-size: var(--fs-2xs);
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 6px 9px;
  white-space: nowrap;
  cursor: pointer;
}

/* The scroll region: everything above and below it stays put. */
._rows_13lnq_51 {
  flex: 1;
  min-height: 0;
}

/* A type's header line. A button that folds the section when the material
   has several types (chevron at the far right); a plain label when it has
   one. Same look either way. */
._section_13lnq_59 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 20px;
  font: inherit;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--g500);
  background: var(--g50);
  border: 0;
  border-bottom: 1px solid var(--g200);
}

button._section_13lnq_59 { cursor: pointer; }

._section_13lnq_59:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }

/* A floor's band header, when the task spans several floors — the type
   header's shape in the info tint with the floor in navy; a button that
   folds every section under it. Absent on one floor. */
._band_13lnq_83 {
  color: var(--navy);
  font-weight: 700;
  background: var(--info-tint);
}

/* "· n taken" on the band, lighter than the floor. */
._bandTaken_13lnq_91 { font-weight: 500; color: var(--g600); }

/* One element, or one folded group: checkbox | text | figure. A <label>
   for a member (the whole row toggles its box), a focusable div for a group
   (the row folds, only the box picks). */
._row_13lnq_51 {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 20px;
  border-bottom: 1px solid var(--g100);
  font-size: var(--fs-xs);
  cursor: pointer;
}

._row_13lnq_51:hover { background: var(--info-tint); }

._row_13lnq_51:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }

/* A group row looks like any other row — no tint; its members are told
   apart by their indent alone. The class stays for the focus/role styling. */
._groupRow_13lnq_113 { background: inherit; }

._child_13lnq_115 { padding-left: 46px; }

._child_13lnq_115 ._line1_13lnq_117 { font-weight: 500; }

._takenRow_13lnq_119 { opacity: 0.55; cursor: not-allowed; }

._line1_13lnq_117 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 600;
}

._line2_13lnq_129 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

/* The Revit id, small and monospaced. */
._rid_13lnq_139 { font-family: var(--f-mono); color: var(--g400); }

._qty_13lnq_141 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--g800);
  white-space: nowrap;
}

/* The group row's counter — how many of its free members to take. */
._counter_13lnq_152 {
  width: 52px;
  font: inherit;
  text-align: right;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: 4px 6px;
}

._counter_13lnq_152:disabled { background: var(--g50); color: var(--g400); }

/* The collapse chevron — the CLAUDE.md rule: ChevronDownIcon in an
   inline-flex span that rotates −90° when closed. */
._caret_13lnq_167 {
  display: inline-flex;
  align-items: center;
  color: var(--g500);
  transition: transform 0.15s ease;
}

._caret_13lnq_167[data-collapsed='true'] { transform: rotate(-90deg); }

/* "× n" — how many elements the group folds. */
._pill_13lnq_177 {
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--navy);
  background: var(--g200);
  padding: 1px 7px;
  border-radius: var(--r-pill);
}

/* "taken by {task}" on a member another task holds. */
._who_13lnq_187 {
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-warn);
  background: var(--color-warn-bg);
  padding: 1px 6px;
  border-radius: var(--r-md);
}

._summary_13lnq_196 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 20px;
  border-top: 1px solid var(--g200);
  background: var(--g50);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._summary_13lnq_196 b { font-size: var(--fs-md); color: var(--navy); }

/* The drawer's bottom bar while the list is open — the drawer's own footer
   and buttons (TaskPanel.module.css), composed rather than copied, with the
   buttons pushed right since there is no Delete on this side. */
._footer_13lnq_212 {
  justify-content: flex-end;
}

._cancel_13lnq_217 { }

._confirm_13lnq_219 { }
._tile_v11q4_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--s-2) 0;
  text-align: center;
}

/* The drawer host centres the tile itself, so the tile owns no outer space. */
._tile_v11q4_1[data-variant='drawer'] {
  padding: 0;
}

._icon_v11q4_15 {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-2xl);
  background: var(--info-tint);
  color: var(--info);
}

._title_v11q4_25 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._body_v11q4_32 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* Narrow column: wrap the sentence early rather than let it run the drawer's
   full width, and open the leading up to match. */
._tile_v11q4_1[data-variant='drawer'] ._body_v11q4_32 {
  max-width: 260px;
  line-height: 1.5;
}
/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }/* Similar-name UI shared by BOTH logistics forms (delivery Material + stock
   Material): the under-field nudge, and the canonical dropdown chip styles the
   two form stylesheets compose from (house pattern — see the DateField family
   composing from ui/DatePicker). */._nudge_g3uto_5 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-warn);
}/* The hard blocks speak in red; the suggestion above stays amber. */._nudge_g3uto_5[data-tone='error'] {
  color: var(--color-error);
}._nudgeBtn_g3uto_20 {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}/* Green, not amber: the chip marks the SAFE pick (the existing name); the
   amber treatments mark the risky one. */._comboChip_g3uto_33 {
  margin-left: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--color-success-bg);
  color: var(--color-success);
  white-space: nowrap;
}._comboOptStrong_g3uto_44 {
  font-weight: 600;
}

/* DeliveryOrderForm's own skin. Field/combo/footer chrome is shared with
   StockEntryDialog via dialogChrome.module.css; the delivery-specific pieces
   (date rows, merge-on-arrival block, seeded-value marking) live here. The
   form renders inside two hosts — DeliveryOrderDialog's popup and the
   delivery drawer's Edit tab — so nothing in this file may assume dialog
   chrome around it. */

._field_npat2_8 { }
._label_npat2_9 { }
._combo_npat2_10 { }
._comboList_npat2_11 { }
._comboOpt_npat2_12 { }
._comboInput_npat2_13 { }
._caretBtn_npat2_14 { }

._input_npat2_16 { }
._footer_npat2_17 { }
._saveBtn_npat2_18 { }

._note_npat2_20 {
  min-height: 64px;
  resize: vertical;
}

/* The three workflow dates side by side, each with its own label. Wider than
   the 400px stock dialog so three ui/DateField triggers (calendar icon + date +
   chevron) sit side by side without squeezing the date text. */
._rowFields_npat2_28 { display: flex; gap: var(--s-3); }
._rowFields_npat2_28 ._field_npat2_8 { flex: 1; min-width: 0; }

/* Optional dates: ui/DateField's onChange is non-nullable, so a clear button is
   what keeps a date unsettable — same pattern as the issues form dialog. It
   overlays the trigger's trailing chevron, so it carries the trigger's own
   background rather than `transparent`, which would show both glyphs at once. */
._dateWrap_npat2_35 { position: relative; width: 100%; }

._dateClear_npat2_37 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--g500);
  cursor: pointer;
}

._dateClear_npat2_37:hover { color: var(--navy); }

/* Merge-on-arrival block. Tinted and inset so it reads as a consequence of the
   status change above it, not as another field of the delivery itself. */
._mergeBox_npat2_61 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--info-tint);
}

._mergeToggle_npat2_70 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

/* A read-only value shown in the shape of an input: the merge box's remaining
   count and the picked material's locked unit both use it. One class, since the
   grey "you can't edit this" treatment is identical. Compound with `.input` to
   beat the composed base on specificity — see dialogChrome.module.css. */
._input_npat2_16._lockedValue_npat2_85 {
  display: flex;
  align-items: center;
  background: var(--g50);
  color: var(--g500);
}

._mergeHint_npat2_92 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._fieldAsk_npat2_97 { }

._mergeTotal_npat2_99 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* A value the SYSTEM inferred, not the user. Amber marks it as a suggestion to
   be checked; the colour drops once the field stops holding our value. Colour
   only — the border stays neutral so it is not read as an error state.
   Text inputs: compound with `.input` to beat the composed base on specificity
   rather than source order (see dialogChrome.module.css). The unit field is a
   ui/PickCombo trigger — a <button> with no `.input` of its own to compound
   with — so the type selector supplies the extra specificity there, as it
   does on the supplier's filterable trigger, an <input> without `.input`. */
._input_npat2_16._prefilled_npat2_114,
button._prefilled_npat2_114,
input._prefilled_npat2_114 {
  color: var(--color-warn);
  font-weight: 600;
}

/* The date fields wear it on the `.dateWrap` wrapper, not an `.input`, so the
   colour has to reach the Popover trigger button inside; there is no `.input`
   on that element to compete with. */
._dateWrap_npat2_35._prefilled_npat2_114,
._dateWrap_npat2_35._prefilled_npat2_114 button {
  color: var(--color-warn);
  font-weight: 600;
}

._seedNote_npat2_130 { }

/* A required field's mark, drawn rather than typed so the i18n label stays
   just the field name. Generated content does join the accessible name
   ("Destination *"); aria-required carries the state for screen readers. */
._required_npat2_135::after {
  content: ' *';
  color: var(--color-error);
}

/* Footnotes under a field (hints, warnings, seed notes, the supplier's text
   links, where a suggested figure came from) sit a step in from the field's
   left edge, so they read as belonging to the input above rather than as a
   second label. Muted — a footnote to the field, not a second label. */
._fieldHint_npat2_144 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--g500);
  line-height: 1.4;
  margin-top: 4px;
}

/* The same footnote under a value the SYSTEM put there — how it was worked
   out or where it was carried from. Amber like the value it explains (ruling
   2026-09-15): the reason wears the colour of the suggestion. */
._seedHint_npat2_156 {
  color: var(--color-warn);
}

/* A value the arithmetic forbids, as opposed to one merely worth checking. */
._fieldWarn_npat2_162 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-error);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 4px;
}

/* Inside a field the column's own gap already spaces the footnote from its
   input; the margin is only for a footnote standing outside one. */
._field_npat2_8 > ._fieldHint_npat2_144,
._field_npat2_8 > ._fieldWarn_npat2_162 {
  margin-top: 0;
}

/* Bolded close-match option row — the chip itself is CloseMatchChip. */
._comboOptStrong_npat2_180 {
}

/* Where this create came from — the Scheduler's "Create delivery" hand-off.
   Sits above Material, an informational note rather than a field. */
._origin_npat2_186 {
  background: var(--info-tint);
  color: var(--info);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-size: var(--fs-xs);
  margin-bottom: 12px;
}

/* What Create also does — the Stock tab checkout's adds to orders already on
   their way. The info note's look (the origin line's family), with the truck
   mark, directly above Cancel / Create. */
._footerNote_npat2_198 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  background: var(--info-tint-soft);
  border: 1px solid var(--info-tint);
  border-radius: var(--r-md);
  padding: 9px 11px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--navy);
}

._footerNote_npat2_198 svg {
  flex: none;
  margin-top: 2px;
  color: var(--info);
}
/* Similar-name UI shared by BOTH logistics forms (delivery Material + stock
   Material): the under-field nudge, and the canonical dropdown chip styles the
   two form stylesheets compose from (house pattern — see the DateField family
   composing from ui/DatePicker). */
._nudge_g3uto_5 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-warn);
}

/* The hard blocks speak in red; the suggestion above stays amber. */
._nudge_g3uto_5[data-tone='error'] {
  color: var(--color-error);
}

._nudgeBtn_g3uto_20 {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

/* Green, not amber: the chip marks the SAFE pick (the existing name); the
   amber treatments mark the risky one. */
._comboChip_g3uto_33 {
  margin-left: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--color-success-bg);
  color: var(--color-success);
  white-space: nowrap;
}

._comboOptStrong_g3uto_44 {
  font-weight: 600;
}
/* Similar-name UI shared by BOTH logistics forms (delivery Material + stock
   Material): the under-field nudge, and the canonical dropdown chip styles the
   two form stylesheets compose from (house pattern — see the DateField family
   composing from ui/DatePicker). */._nudge_g3uto_5 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-warn);
}/* The hard blocks speak in red; the suggestion above stays amber. */._nudge_g3uto_5[data-tone='error'] {
  color: var(--color-error);
}._nudgeBtn_g3uto_20 {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}/* Green, not amber: the chip marks the SAFE pick (the existing name); the
   amber treatments mark the risky one. */._comboChip_g3uto_33 {
  margin-left: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--color-success-bg);
  color: var(--color-success);
  white-space: nowrap;
}._comboOptStrong_g3uto_44 {
  font-weight: 600;
}/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }/* DeliveryOrderForm's own skin. Field/combo/footer chrome is shared with
   StockEntryDialog via dialogChrome.module.css; the delivery-specific pieces
   (date rows, merge-on-arrival block, seeded-value marking) live here. The
   form renders inside two hosts — DeliveryOrderDialog's popup and the
   delivery drawer's Edit tab — so nothing in this file may assume dialog
   chrome around it. */._field_npat2_8 { }._label_npat2_9 { }._combo_npat2_10 { }._comboList_npat2_11 { }._comboOpt_npat2_12 { }._comboInput_npat2_13 { }._caretBtn_npat2_14 { }._input_npat2_16 { }._footer_npat2_17 { }._saveBtn_npat2_18 { }._note_npat2_20 {
  min-height: 64px;
  resize: vertical;
}/* The three workflow dates side by side, each with its own label. Wider than
   the 400px stock dialog so three ui/DateField triggers (calendar icon + date +
   chevron) sit side by side without squeezing the date text. */._rowFields_npat2_28 { display: flex; gap: var(--s-3); }._rowFields_npat2_28 ._field_npat2_8 { flex: 1; min-width: 0; }/* Optional dates: ui/DateField's onChange is non-nullable, so a clear button is
   what keeps a date unsettable — same pattern as the issues form dialog. It
   overlays the trigger's trailing chevron, so it carries the trigger's own
   background rather than `transparent`, which would show both glyphs at once. */._dateWrap_npat2_35 { position: relative; width: 100%; }._dateClear_npat2_37 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--g500);
  cursor: pointer;
}._dateClear_npat2_37:hover { color: var(--navy); }/* Merge-on-arrival block. Tinted and inset so it reads as a consequence of the
   status change above it, not as another field of the delivery itself. */._mergeBox_npat2_61 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--info-tint);
}._mergeToggle_npat2_70 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}/* A read-only value shown in the shape of an input: the merge box's remaining
   count and the picked material's locked unit both use it. One class, since the
   grey "you can't edit this" treatment is identical. Compound with `.input` to
   beat the composed base on specificity — see dialogChrome.module.css. */._input_npat2_16._lockedValue_npat2_85 {
  display: flex;
  align-items: center;
  background: var(--g50);
  color: var(--g500);
}._mergeHint_npat2_92 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}._fieldAsk_npat2_97 { }._mergeTotal_npat2_99 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}/* A value the SYSTEM inferred, not the user. Amber marks it as a suggestion to
   be checked; the colour drops once the field stops holding our value. Colour
   only — the border stays neutral so it is not read as an error state.
   Text inputs: compound with `.input` to beat the composed base on specificity
   rather than source order (see dialogChrome.module.css). The unit field is a
   ui/PickCombo trigger — a <button> with no `.input` of its own to compound
   with — so the type selector supplies the extra specificity there, as it
   does on the supplier's filterable trigger, an <input> without `.input`. */._input_npat2_16._prefilled_npat2_114,
button._prefilled_npat2_114,
input._prefilled_npat2_114 {
  color: var(--color-warn);
  font-weight: 600;
}/* The date fields wear it on the `.dateWrap` wrapper, not an `.input`, so the
   colour has to reach the Popover trigger button inside; there is no `.input`
   on that element to compete with. */._dateWrap_npat2_35._prefilled_npat2_114,
._dateWrap_npat2_35._prefilled_npat2_114 button {
  color: var(--color-warn);
  font-weight: 600;
}._seedNote_npat2_130 { }/* A required field's mark, drawn rather than typed so the i18n label stays
   just the field name. Generated content does join the accessible name
   ("Destination *"); aria-required carries the state for screen readers. */._required_npat2_135::after {
  content: ' *';
  color: var(--color-error);
}/* Footnotes under a field (hints, warnings, seed notes, the supplier's text
   links, where a suggested figure came from) sit a step in from the field's
   left edge, so they read as belonging to the input above rather than as a
   second label. Muted — a footnote to the field, not a second label. */._fieldHint_npat2_144 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--g500);
  line-height: 1.4;
  margin-top: 4px;
}/* The same footnote under a value the SYSTEM put there — how it was worked
   out or where it was carried from. Amber like the value it explains (ruling
   2026-09-15): the reason wears the colour of the suggestion. */._seedHint_npat2_156 {
  color: var(--color-warn);
}/* A value the arithmetic forbids, as opposed to one merely worth checking. */._fieldWarn_npat2_162 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-error);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 4px;
}/* Inside a field the column's own gap already spaces the footnote from its
   input; the margin is only for a footnote standing outside one. */._field_npat2_8 > ._fieldHint_npat2_144,
._field_npat2_8 > ._fieldWarn_npat2_162 {
  margin-top: 0;
}/* Bolded close-match option row — the chip itself is CloseMatchChip. */._comboOptStrong_npat2_180 {
}/* Where this create came from — the Scheduler's "Create delivery" hand-off.
   Sits above Material, an informational note rather than a field. */._origin_npat2_186 {
  background: var(--info-tint);
  color: var(--info);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-size: var(--fs-xs);
  margin-bottom: 12px;
}/* What Create also does — the Stock tab checkout's adds to orders already on
   their way. The info note's look (the origin line's family), with the truck
   mark, directly above Cancel / Create. */._footerNote_npat2_198 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  background: var(--info-tint-soft);
  border: 1px solid var(--info-tint);
  border-radius: var(--r-md);
  padding: 9px 11px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--navy);
}._footerNote_npat2_198 svg {
  flex: none;
  margin-top: 2px;
  color: var(--info);
}
/* Why a delivery line's unit is locked, and the way out (UnitChoiceNote). The
   amber line and the link compose from the similar-name nudge; the note and
   the choice box from the order form's own hint and merge box. */
._warn_65fcs_4 { }

._link_65fcs_6 { }

._note_65fcs_8 { }

._choice_65fcs_10 {
  align-items: flex-start;
  margin-top: var(--s-1);
}

._choiceTitle_65fcs_16 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}

._option_65fcs_22 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}

._optionHint_65fcs_31 { }
/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }

/* The order dialog's materials table. Field/combo chrome is the shared
   dialogChrome skin (the same one DeliveryOrderForm and StockEntryDialog wear);
   only the grid, the remove column and the add button live here. */

._field_1u55s_5 { }
._label_1u55s_6 { }
._combo_1u55s_7 { }
._comboList_1u55s_8 { }
._comboOpt_1u55s_9 { }
._comboInput_1u55s_10 { }
._caretBtn_1u55s_11 { }
._input_1u55s_12 { }

/* 10 px apart (design 2026-09-14 §4.1) — close enough to read as one table,
   far enough that a row's own notice line does not crowd the next row. */
._rows_1u55s_16 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._lineBlock_1u55s_22 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Material takes the room; amount and unit are fixed so the columns line up
   down the table however long a material name is. */
._row_1u55s_16 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--logistics-amount-col-width) var(--logistics-unit-col-width) 24px;
  gap: var(--s-2);
  align-items: center;
}

._amount_1u55s_37 { text-align: right; }

/* The empty field's name reads like every other field's — flush left; only a
   typed number sits right. */
._amount_1u55s_37::placeholder { text-align: left; }

._input_1u55s_12._lockedValue_1u55s_43 {
  display: flex;
  align-items: center;
  background: var(--g50);
  color: var(--g500);
}

/* A locked amount keeps the typed amount's right edge. */
._input_1u55s_12._lockedValue_1u55s_43._amount_1u55s_37 { justify-content: flex-end; }

/* Amber while a seeded amount is untouched (only the first row is ever
   seeded; see `computeSeeded`), or while an amount saved in another unit waits
   to be re-entered (`unitWas`, any row) — `.input` compounds for the
   specificity the shared chrome needs (see dialogChrome.module.css). */
._input_1u55s_12._prefilled_1u55s_57 {
  color: var(--color-warn);
  font-weight: 600;
}

/* What we suggested, kept visible after an override so the change reads as a
   comparison. */
._seedNote_1u55s_64 { }

._removeBtn_1u55s_66 {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--g500);
  cursor: pointer;
}

._removeBtn_1u55s_66:hover {
  color: var(--color-error);
  background: var(--color-error-bg);
}

/* The last row cannot be removed, but its grid column stays so the three
   fields above and below it keep their width. */
._removeSpacer_1u55s_87 { display: block; width: 24px; }

/* The shared dashed add button — the same one the Scheduler's Stock tab uses
   to add a claim row. */
._addBtn_1u55s_91 {
  align-self: flex-start;
  margin-top: 10px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 1px dashed var(--info);
  border-radius: var(--r-md);
  padding: 6px 12px;
  cursor: pointer;
}

._comboOptStrong_1u55s_105 { font-weight: 600; }

._fieldWarn_1u55s_107 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--color-error);
  font-weight: 600;
  line-height: 1.4;
}
/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }/* Similar-name UI shared by BOTH logistics forms (delivery Material + stock
   Material): the under-field nudge, and the canonical dropdown chip styles the
   two form stylesheets compose from (house pattern — see the DateField family
   composing from ui/DatePicker). */._nudge_g3uto_5 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-warn);
}/* The hard blocks speak in red; the suggestion above stays amber. */._nudge_g3uto_5[data-tone='error'] {
  color: var(--color-error);
}._nudgeBtn_g3uto_20 {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}/* Green, not amber: the chip marks the SAFE pick (the existing name); the
   amber treatments mark the risky one. */._comboChip_g3uto_33 {
  margin-left: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--color-success-bg);
  color: var(--color-success);
  white-space: nowrap;
}._comboOptStrong_g3uto_44 {
  font-weight: 600;
}/* DeliveryOrderForm's own skin. Field/combo/footer chrome is shared with
   StockEntryDialog via dialogChrome.module.css; the delivery-specific pieces
   (date rows, merge-on-arrival block, seeded-value marking) live here. The
   form renders inside two hosts — DeliveryOrderDialog's popup and the
   delivery drawer's Edit tab — so nothing in this file may assume dialog
   chrome around it. */._field_npat2_8 { }._label_npat2_9 { }._combo_npat2_10 { }._comboList_npat2_11 { }._comboOpt_npat2_12 { }._comboInput_npat2_13 { }._caretBtn_npat2_14 { }._input_npat2_16 { }._footer_npat2_17 { }._saveBtn_npat2_18 { }._note_npat2_20 {
  min-height: 64px;
  resize: vertical;
}/* The three workflow dates side by side, each with its own label. Wider than
   the 400px stock dialog so three ui/DateField triggers (calendar icon + date +
   chevron) sit side by side without squeezing the date text. */._rowFields_npat2_28 { display: flex; gap: var(--s-3); }._rowFields_npat2_28 ._field_npat2_8 { flex: 1; min-width: 0; }/* Optional dates: ui/DateField's onChange is non-nullable, so a clear button is
   what keeps a date unsettable — same pattern as the issues form dialog. It
   overlays the trigger's trailing chevron, so it carries the trigger's own
   background rather than `transparent`, which would show both glyphs at once. */._dateWrap_npat2_35 { position: relative; width: 100%; }._dateClear_npat2_37 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--g500);
  cursor: pointer;
}._dateClear_npat2_37:hover { color: var(--navy); }/* Merge-on-arrival block. Tinted and inset so it reads as a consequence of the
   status change above it, not as another field of the delivery itself. */._mergeBox_npat2_61 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--info-tint);
}._mergeToggle_npat2_70 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}/* A read-only value shown in the shape of an input: the merge box's remaining
   count and the picked material's locked unit both use it. One class, since the
   grey "you can't edit this" treatment is identical. Compound with `.input` to
   beat the composed base on specificity — see dialogChrome.module.css. */._input_npat2_16._lockedValue_npat2_85 {
  display: flex;
  align-items: center;
  background: var(--g50);
  color: var(--g500);
}._mergeHint_npat2_92 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}._fieldAsk_npat2_97 { }._mergeTotal_npat2_99 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}/* A value the SYSTEM inferred, not the user. Amber marks it as a suggestion to
   be checked; the colour drops once the field stops holding our value. Colour
   only — the border stays neutral so it is not read as an error state.
   Text inputs: compound with `.input` to beat the composed base on specificity
   rather than source order (see dialogChrome.module.css). The unit field is a
   ui/PickCombo trigger — a <button> with no `.input` of its own to compound
   with — so the type selector supplies the extra specificity there, as it
   does on the supplier's filterable trigger, an <input> without `.input`. */._input_npat2_16._prefilled_npat2_114,
button._prefilled_npat2_114,
input._prefilled_npat2_114 {
  color: var(--color-warn);
  font-weight: 600;
}/* The date fields wear it on the `.dateWrap` wrapper, not an `.input`, so the
   colour has to reach the Popover trigger button inside; there is no `.input`
   on that element to compete with. */._dateWrap_npat2_35._prefilled_npat2_114,
._dateWrap_npat2_35._prefilled_npat2_114 button {
  color: var(--color-warn);
  font-weight: 600;
}._seedNote_npat2_130 { }/* A required field's mark, drawn rather than typed so the i18n label stays
   just the field name. Generated content does join the accessible name
   ("Destination *"); aria-required carries the state for screen readers. */._required_npat2_135::after {
  content: ' *';
  color: var(--color-error);
}/* Footnotes under a field (hints, warnings, seed notes, the supplier's text
   links, where a suggested figure came from) sit a step in from the field's
   left edge, so they read as belonging to the input above rather than as a
   second label. Muted — a footnote to the field, not a second label. */._fieldHint_npat2_144 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--g500);
  line-height: 1.4;
  margin-top: 4px;
}/* The same footnote under a value the SYSTEM put there — how it was worked
   out or where it was carried from. Amber like the value it explains (ruling
   2026-09-15): the reason wears the colour of the suggestion. */._seedHint_npat2_156 {
  color: var(--color-warn);
}/* A value the arithmetic forbids, as opposed to one merely worth checking. */._fieldWarn_npat2_162 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-error);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 4px;
}/* Inside a field the column's own gap already spaces the footnote from its
   input; the margin is only for a footnote standing outside one. */._field_npat2_8 > ._fieldHint_npat2_144,
._field_npat2_8 > ._fieldWarn_npat2_162 {
  margin-top: 0;
}/* Bolded close-match option row — the chip itself is CloseMatchChip. */._comboOptStrong_npat2_180 {
}/* Where this create came from — the Scheduler's "Create delivery" hand-off.
   Sits above Material, an informational note rather than a field. */._origin_npat2_186 {
  background: var(--info-tint);
  color: var(--info);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-size: var(--fs-xs);
  margin-bottom: 12px;
}/* What Create also does — the Stock tab checkout's adds to orders already on
   their way. The info note's look (the origin line's family), with the truck
   mark, directly above Cancel / Create. */._footerNote_npat2_198 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  background: var(--info-tint-soft);
  border: 1px solid var(--info-tint);
  border-radius: var(--r-md);
  padding: 9px 11px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--navy);
}._footerNote_npat2_198 svg {
  flex: none;
  margin-top: 2px;
  color: var(--info);
}
/* The order form's Supplier field and its inline mini-form. Field, label,
   hint and the clear button are the form's own, composed so the supplier row
   wears the same skin as its neighbours. */
._field_11lk6_4 { }
._label_11lk6_5 { }
._input_11lk6_6 { }
._hint_11lk6_7 { }
._error_11lk6_8 { }
._wrap_11lk6_9 { }
._clear_11lk6_10 { }

/* "Edit supplier" under the combo and "Cancel" under the draft — quiet text
   links; the order's own Save is the only button. */
._textLink_11lk6_14 {
  align-self: flex-start;
  padding: 0 0 0 var(--s-1);
  border: none;
  background: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-link);
  cursor: pointer;
}

._textLink_11lk6_14:hover { text-decoration: underline; }

/* The inline add/edit form, inset like the merge box so it reads as a
   sub-step of the Supplier field. */
._mini_11lk6_30 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--g50);
}

/* The box's heading — the form's label voice in the title's ink, so it reads
   as the box's own heading, not one more field. */
._miniTitle_11lk6_42 { }
._mini_11lk6_30 ._miniTitle_11lk6_42 { color: var(--navy); }

._pair_11lk6_45 { display: flex; gap: var(--s-2); }
._pair_11lk6_45 > * { flex: 1; min-width: 0; }
/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }

/* The modal chrome around DeliveryOrderForm — backdrop, panel, title, Cancel.
   Overlay/panel chrome is shared with StockEntryDialog via
   dialogChrome.module.css; everything the FORM itself wears lives in
   DeliveryOrderForm.module.css, co-located with the form. */

._backdrop_1qyh3_6 { }

/* Wider than the 400px stock dialog — three dates share a row. */
._popup_1qyh3_9 {
  width: var(--logistics-wide-dialog-width);
}

._title_1qyh3_14 { }
._body_1qyh3_15 { }
._bodyScroll_1qyh3_16 { }
._cancelBtn_1qyh3_17 { }

/* A save that failed, reported in the dialog itself — for a host with no
   toast stack (the Scheduler task drawer). */
._error_1qyh3_21 {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--fs-sm);
}
/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }/* The modal chrome around DeliveryOrderForm — backdrop, panel, title, Cancel.
   Overlay/panel chrome is shared with StockEntryDialog via
   dialogChrome.module.css; everything the FORM itself wears lives in
   DeliveryOrderForm.module.css, co-located with the form. */._backdrop_1qyh3_6 { }/* Wider than the 400px stock dialog — three dates share a row. */._popup_1qyh3_9 {
  width: var(--logistics-wide-dialog-width);
}._title_1qyh3_14 { }._body_1qyh3_15 { }._bodyScroll_1qyh3_16 { }._cancelBtn_1qyh3_17 { }/* A save that failed, reported in the dialog itself — for a host with no
   toast stack (the Scheduler task drawer). */._error_1qyh3_21 {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--fs-sm);
}/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }

/* The report StockDeliveryDialog turns into when the order was created but an
   add to an order already on its way was refused — in the delivery dialog's
   own chrome, composed rather than copied. */

._backdrop_fdymz_5 { }
._popup_fdymz_6 { }
._title_fdymz_7 { }
._cancelBtn_fdymz_8 { }
._error_fdymz_9 { }
._footer_fdymz_10 { }
/* Shared right-side drawer shell — Base UI Dialog backdrop + sliding panel +
   a corner close button. The component (Drawer.tsx) drives enter/exit through
   Base UI's [data-starting-style]/[data-ending-style] transition idiom; the
   legacy keyframe modifiers further down remain for the feature drawers that
   still compose these classes directly (ActivitiesPage). */

._overlay_1udj8_7 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
  transition: opacity 180ms ease-out;
}

._overlay_1udj8_7[data-starting-style] {
  opacity: 0;
}

._overlay_1udj8_7[data-ending-style] {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

._panel_1udj8_24 {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: var(--z-dialog);
  width: min(520px, 92vw);

  /* The panel's inner padding and gap live on the scroller's viewport; a
     panelClassName retunes them through these. */
  --drawer-pad: var(--s-6);
  --drawer-gap: var(--s-5);

  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

._panelScroll_1udj8_44 {
  flex: 1;
}

._panelBody_1udj8_48 {
  display: flex;
  flex-direction: column;
  padding: var(--drawer-pad);
  gap: var(--drawer-gap);
}

._panel_1udj8_24[data-starting-style] {
  transform: translateX(100%);
}

._panel_1udj8_24[data-ending-style] {
  transform: translateX(100%);
  transition: transform 200ms cubic-bezier(0.55, 0, 0.7, 0.1);
}

/* Respect users who prefer reduced motion — appear/disappear instantly
   (no transition means Base UI unmounts without waiting). */
@media (prefers-reduced-motion: reduce) {
  ._overlay_1udj8_7,
  ._panel_1udj8_24 {
    transition: none;
  }
}

/* ── Legacy phase classes — composed by the ActivitiesPage feature
   drawers that still hand-roll their shells. The component above no longer
   uses them. ─────────────────────────────────────────────────────────────── */

._legacyOverlay_1udj8_77 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  justify-content: flex-end;
  background: var(--modal-backdrop);
}

._legacyPanel_1udj8_86 {
  position: relative;
  width: min(520px, 92vw);
  height: 100%;
  padding: var(--s-6);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

._overlayOpen_1udj8_98    { animation: _overlayFadeIn_1udj8_1 180ms ease-out forwards; }
._panelOpen_1udj8_99      { animation: _panelSlideIn_1udj8_1  220ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes _overlayFadeIn_1udj8_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes _panelSlideIn_1udj8_1 {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  ._overlayOpen_1udj8_98,
  ._panelOpen_1udj8_99 {
    animation: none;
  }
}

/* Shared icon-button base (transparent square button with a hover fill),
   composed by the corner close and any in-panel icon buttons. */
._iconBtn_1udj8_120 {
  display: inline-flex;
  padding: var(--s-1);
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  color: var(--g500);
  cursor: pointer;
}

._iconBtn_1udj8_120:hover {
  background: var(--g100);
}

._close_1udj8_134 {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);

  /* Over the body's ScrollArea: a later positioned sibling, it would otherwise
     paint over the button and take its clicks. */
  z-index: var(--z-raised-1);
}

/* ── Companion panel (the Drawer's `companion` slot) ─────────────────────
   Docked immediately left of the drawer panel, its own scroll — the issue
   drawer's "set locations" idiom, generalized. Lives INSIDE the popup (Base
   UI dismisses on outside presses), so the popup never scrolls or clips: the
   body scrolls in `.panelScroll`. */

._companion_1udj8_151 {
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: min(460px, 46vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

/* Enter slides out from behind the drawer; exit reverses it. The parent
   keeps the panel mounted through the exit and unmounts on animationend. */
._companionOpen_1udj8_166 {
  animation: _companionIn_1udj8_1 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

._companionClosing_1udj8_170 {
  animation: _companionOut_1udj8_1 180ms ease-in forwards;
  pointer-events: none;
}

@keyframes _companionIn_1udj8_1 {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes _companionOut_1udj8_1 {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._companionOpen_1udj8_166,
  ._companionClosing_1udj8_170 {
    animation: none;
  }
}

._companionClose_1udj8_206 {
}

._companionScroll_1udj8_210 {
  flex: 1;
  min-height: 0;
}

._companionBody_1udj8_215 {
  padding: var(--s-6);
}
._list_19swn_1 {
  /* Fills the panel body (Panel `fill`) and scrolls past it — the ScrollArea
     root; its viewport is the scroller. The HEIGHT cap is not here — it lives
     on the pair's grid items (`.rowEqual > *`, LogisticsPage.module.css),
     because a max-height clamp mixing px with an intrinsically-unresolvable
     percentage silently drops. This list only needs to take whatever height
     the capped card gives it. */
  flex: 1 1 auto;
}._items_19swn_11 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}._row_19swn_4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);

  /* Right gutter: the badge and tank close the row, and with the kebab column
     gone they would sit flush against the list's scroll edge. */
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--separator);

  /* The row's one affordance: open the detail drawer (the kebab is gone,
     same as the delivery cards). Inline action buttons carry their own
     cursor already. */
  cursor: pointer;
}._row_19swn_4:focus-visible,
._row_19swn_4:has(> ._rowOpen_19swn_38:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}/* In-flight delete: fade the row's content under a centered status label. */._row_19swn_4[data-deleting] {
  pointer-events: none;
}._row_19swn_4[data-deleting] > :not(._deletingOverlay_19swn_49) {
  opacity: 0.3;
}._deletingOverlay_19swn_49 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._row_19swn_4:last-child {
  border-bottom: none;
}/* The row div itself is not clickable; interactive controls (kebab menu,
   inline Renew/update-link action buttons) live inside it. */._main_19swn_70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}._provName_19swn_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}._deleteItem_19swn_86 {
  color: var(--color-error);
}/* Both text lines are single-line-with-ellipsis (same treatment as the delivery
   panel's `.material` / `.meta`). The material name is free text up to 120 chars
   and can arrive as one unbroken token, which does not wrap and ran straight out
   of the card. Clamping (rather than wrapping) also keeps rows a uniform height —
   the full name is on the update dialog. Relies on `.main { min-width: 0 }`:
   without it the flex item refuses to shrink below its content and the ellipsis
   never engages. */._name_19swn_97,
._meta_19swn_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._name_19swn_97 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_19swn_91 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._provenance_19swn_115 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* "Delivery takes ~Nd" on the provenance line, text-only — a step up from the
   line's own muted grey (not the `.hint` line's amber/red, which is reserved
   for urgency), just enough emphasis to read as a small data figure. The
   tooltip it opens carries the CONCLUSION (the tick-consistent "Order by
   <date>" deadline plus provenance), so nothing here duplicates it. Dotted
   underline (not the `.hint` line's solid-on-hover one) marks it as a hover
   target, not a click target.

   Plain inline, not inline-flex: the Tooltip trigger renders THIS span
   itself (Base UI merges its props onto it, no wrapper), so whatever box
   type it declares is what sits in the provenance line's text flow. An
   inline-flex box computes its own baseline from its flex line rather than
   the text inside it, which floated this segment off the "Started … ·
   admin · …" siblings' shared baseline — inline text needs no flex
   properties at all, so the box-baseline mismatch cannot recur. */._deliveryTakes_19swn_135 {
  color: var(--g600);
  font-weight: 600;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}/* Badge on top, duration cap beneath — the tank is its own sibling column
   between `.side` and `.endCol`, so this stack carries both figures the tank
   itself has no room for. */._side_19swn_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;

  /* Centered with the tank beside it — the badge/cap stack and the tank read
     as one gauge, so they share the row's vertical middle (the kebab alone
     stays pinned to the top corner). */
  align-self: center;
}._badge_19swn_160 {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Transparent, so the urgent tone's visible border costs no height. Without
     it an urgent badge was 20px against everyone else's 18px, and the bar
     beneath it dropped 2px out of line with the duration on exactly those
     rows — the ones already shouting for attention. */
  border: 1px solid transparent;
}._badge_19swn_160[data-tone='ok'] {
  color: var(--color-success);
  background: var(--color-success-bg);
}._badge_19swn_160[data-tone='warn'] {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}._badge_19swn_160[data-tone='urgent'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}._badge_19swn_160[data-tone='check'] {
  color: var(--g600);
  background: var(--g50);
  border: 1px dashed var(--g400);
}/* The time-remaining tank now lives in the `ReorderTickTank` component; this
   only supplies the row layout the panel needs (vertically centred beside the
   badge). */._tankInRow_19swn_198 {
  align-self: center;
}/* Truck hint line — additive to the band, one tone per row (amber/reorder or red/gap). */._hint_19swn_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Rendered as a <button> whenever the line has somewhere to go, so the button
     chrome has to be reset here — the two forms must be pixel-identical, and a
     line that shifts when it becomes clickable is a bug nobody looks for. */
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}/* The affordance follows the ELEMENT, not the tone: a line is a <button> only
   when it has somewhere to go, and every tone can now be one — an incoming line
   jumps to its delivery just as the gap line does. Keyed on the tone, the green
   line was clickable and said nothing about it. Underline on hover only, the
   same rule the row's other actions follow. */button._hint_19swn_121 {
  cursor: pointer;
  text-decoration: none;
}button._hint_19swn_121:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}._hint_19swn_121[data-tone='reorder'] { color: var(--color-warn); }._hint_19swn_121[data-tone='gap'] { color: var(--color-error); }._hint_19swn_121[data-tone='incoming'] { color: var(--color-success); }/* Actionable text on a row: bold italic, underlined ONLY on hover — the
   underline is the affordance, not decoration. */._action_19swn_244 {
  font: inherit;
  font-weight: 700;
  font-style: italic;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: none;
}._action_19swn_244:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }._action_19swn_244:disabled {
  opacity: 0.5;
  cursor: default;
}._renewAsk_19swn_263 {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
}/* A landed-but-late arrival keeps the overdue tone the in-flight note wore —
   the fact it turned up does not make its lateness good news. */._renewAskLate_19swn_274 {
  color: var(--color-warn);
}._addBtn_19swn_278 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--status-planned-text);
  background: var(--status-planned-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}._addBtn_19swn_278:disabled {
  opacity: 0.5;
  cursor: default;
}/* An in-flight delivery past its own ETA. Amber, not green: something is still
   coming, but its date has gone by and nobody has seen it — that is a prompt to
   chase, not reassurance that the material is covered. */._hint_19swn_121[data-tone='late'] { color: var(--color-warn); }/* The arrival named on a ran-out row. It answers the question the line is
   asking, so it carries weight against the muted provenance text around it. */._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}/* When an arrival phrase names a known delivery it becomes a jump link. Same
   button-reset discipline as .hint so the note stays pixel-identical to its
   plain-span form — a phrase that shifts the moment it gains a target is a bug
   nobody looks for. Underline on hover only; the chevron slides like .hint's.
   `.renewAskJump` is the covered row's "New delivery arrived…" phrase; it takes
   the same reset but keeps the LINE's own colour and weight (amber when the
   arrival was late), which a fixed navy would strip. */button._arrivalNote_19swn_302,
button._renewAskJump_19swn_311 {
  display: inline-flex;
  align-items: center;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}button._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}button._renewAskJump_19swn_311 {
  color: inherit;
}button._arrivalNote_19swn_302:hover,
button._renewAskJump_19swn_311:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:hover ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}._durationCap_19swn_350 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}._durationCap_19swn_350[data-tone='ok'] { color: var(--color-success); }._durationCap_19swn_350[data-tone='warn'] { color: var(--color-warn); }._durationCap_19swn_350[data-tone='urgent'] { color: var(--color-error); }/* The trailing "goes somewhere" mark. Decoration, not a control: it inherits
   the line's tone via currentColor so it reads as part of the sentence. */._jumpMark_19swn_342 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  opacity: 0.65;
  transition: opacity 120ms ease, transform 120ms ease;
}button._hint_19swn_121:hover ._jumpMark_19swn_342,
button._hint_19swn_121:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}@media (prefers-reduced-motion: reduce) {
  ._jumpMark_19swn_342 {
    transition: opacity 120ms ease;
  }

  button._hint_19swn_121:hover ._jumpMark_19swn_342,
  button._hint_19swn_121:focus-visible ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342 {
    transform: none;
  }
}/* ---- Untracked material: a delivery exists, no stock record does ----
   A faint diagonal hatch rather than a solid tint or a coloured rail: the row
   holds no figures, and the hatch says "nothing here yet" without competing
   with the tones that DO carry meaning on this panel (green/amber/red are
   states of a real estimate; this row has no estimate to be in a state). */._row_19swn_4[data-untracked] {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 14px
  );
}/* `.side` centers itself so the badge/cap stack reads as one gauge WITH the
   tank beside it. A row with NO tank has nothing to centre against, so its
   badge belongs at the top-right corner like the row's title, not floating in
   the vertical middle. Two such rows: the untracked placeholder ("Not tracked")
   and a ran-out tracked row ("Ran out") — both render no gauge, so the rule is
   generic across them rather than special-cased to one. */._row_19swn_4[data-untracked] ._side_19swn_145,
._row_19swn_4[data-needscheck] ._side_19swn_145 {
  align-self: flex-start;
}/* Dashed like the needsCheck badge — both say "there is no figure here", which
   is a different claim from any number. */._badge_19swn_160[data-tone='untracked'] {
  color: var(--info);
  background: var(--info-tint);
  border: 1px dashed var(--info);
}._hint_19swn_121[data-tone='untracked'] {
  color: var(--info);
}/* The untracked row's note and its action on one line, the way a tracked row
   keeps `Sync` beside the sentence it answers. */._untrackedLine_19swn_432 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}/* The untracked row's Add-stock action. Unchanged from when it sat in the side
   column — only its position moved, next to the note it answers. */._sideAction_19swn_441 {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}._sideAction_19swn_441:hover:not(:disabled) {
  color: var(--navy);
}._sideAction_19swn_441:disabled {
  opacity: 0.5;
  cursor: default;
}/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}/* Classes below this line are copied from DeliveryPipeline.module.css — the
   card body is the list row's content, transplanted onto a kanban card, so
   the trail/arrival chips keep pixel-identical styling. *//* In-flight delete: fade the card's content under a centered status label
   (same treatment as the pipeline row). */._deletingOverlay_1wksx_7 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* Statuses dropdown + "+ New delivery", side by side in the panel header. */._headerActions_1wksx_19 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}/* Same treatment as the inventory panel's header action — the one rule,
   composed, so the two panels' buttons (and their disabled state) cannot
   drift apart. */._addBtn_1wksx_28 {
}._deleteItem_1wksx_32 {
  color: var(--color-error);
}/* Every text line on the card is single-line-with-ellipsis. Clamping (rather
   than wrapping) keeps cards a uniform width — the full note is on the edit
   dialog. Relies on `.cardMain { min-width: 0 }`: without it the flex item
   refuses to shrink below its content and the ellipsis never engages. */._material_1wksx_40,
._meta_1wksx_41 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._material_1wksx_40 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_1wksx_41 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}/* The in-flight negotiation trail: a filled chip per date the supplier
   actually gave, a dashed ghost chip for whichever is still awaited — see
   `renderTrail` in BoardCard.tsx. Retired once a card arrives, where
   `.dateList` below takes over. */._dates_1wksx_64 {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* arrows sit mid-chip, not on the text baseline */
  gap: 6px;
  margin-top: 4px;
}._dateChip_1wksx_72 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xl);
  background: var(--g50);
  border: 1px solid var(--separator);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
}._dateChip_1wksx_72 b {
  font-weight: 700;
}._dateLabel_1wksx_89 {
  font-size: var(--fs-2xs);
  color: var(--g500);

  /* .dateChip has no flex-basis, so under width pressure the browser can
     shrink it below its max-content size and wrap this label's words
     ("Replied by" -> "Replied" / "by"). Keep it one line like the fixed
     .dateRowLabel column does for the settled-card summary. */
  white-space: nowrap;
}._chipArrow_1wksx_100 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* Dashed placeholder standing in for the date the trail is still waiting on —
   Requested before a request went out, Answered before the supplier replies.
   Composes with `.dateChip` for the shared padding/layout; only the border
   and fill differ from a filled chip. */._chipGhost_1wksx_109 {
  border-style: dashed;
  border-color: var(--g300);
  background: none;
}/* The amber "pending" word — inside a ghost chip, and reused verbatim for the
   footer's due-placeholder "pending" span, so "waiting on a date" reads the
   same wherever it shows up on the card. */._ghostHint_1wksx_118 {
  color: var(--color-warn);
  font-weight: 650;
}/* The arrived date summary: Requested / Answered / Arrived, one row each,
   always all three, once a card has landed — see `renderArrival` in
   BoardCard.tsx. The in-flight trail above stays a chip row; this is a
   plain list, since a settled card has more to say (three dates, not one
   open question) than a chip row comfortably holds. */._dateList_1wksx_63 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}._dateRow_1wksx_96 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
}/* Fixed width, not a hard column count: labels are short in every locale
   this product ships (Requested/Replied by/ETA/Arrived; 希望/返答/到着予定/到着),
   so one em-relative width lines every value up without the English label
   dictating a raw pixel figure. nowrap guards the widest label ("Replied
   by") from breaking onto two lines at odd zoom levels. */._dateRowLabel_1wksx_96 {
  flex: 0 0 5.75em;
  font-size: var(--fs-2xs);
  color: var(--g500);
  white-space: nowrap;
}._dateRowValue_1wksx_154 {
  font-weight: 700;
  color: var(--navy);
}/* The one settled FACT on the card, not an ask or a reply — the row a
   Delivered-column card is actually scanned for. */._dateArrived_1wksx_161 {
  color: var(--color-success);
}/* How the arrival landed against the agreed date. Sits beside the Arrived
   row's value and carries the tone alone — same grammar as the trail's
   ghost hint above. */._variance_1wksx_168 {
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-2xs);
}._varOnTime_1wksx_174 {
  color: var(--color-success);
}/* Early is not a win on a just-in-time site — nobody booked the crane or the
   yard for it. Informational grey, not green. */._varEarly_1wksx_180 {
  color: var(--g500);
}._varLate_1wksx_184 {
  color: var(--color-error);
}/* Agreed deadline, in the card footer. */._due_1wksx_189 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._dueLate_1wksx_196 {
  color: var(--color-error);
}/* Stands where the deadline would be, so an undated card reads as "waiting on
   a date" rather than as one nobody has filled in. Muted, like any other
   label — the amber "pending" span beside it (`.ghostHint`) is what carries
   the awaited tone now, not the whole line. */._duePending_1wksx_204 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g500);
}/* The footer's "pending" sits beside the label, not inside a date chip, so it
   must pin its own size to the label's — otherwise it inherits the card's
   base size and floats off the shared baseline. */._duePendingHint_1wksx_214 {
  font-size: var(--fs-xs);
  line-height: inherit;
}/* Name + amount on one line. The name clamps and the amount does not: a long
   material name must lose characters before the figure disappears. */._materialLine_1wksx_221 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;

  /* Clears the card's star, which sits over this line's right end. */
  padding-right: var(--s-5);
}._cardStar_1wksx_231 {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
}._materialLine_1wksx_221 ._material_1wksx_40 {
  flex: 0 1 auto;
  min-width: 0;
}._qty_1wksx_242 {
  flex: none;
  margin-left: auto;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}/* Jump target: a card named elsewhere on the board, flashed after the scroll
   lands. An absolutely-positioned overlay rather than a background on `.card`
   itself, so it cannot fight the delete treatment or the card's own border,
   and so it can be remounted per jump to replay the animation.

   The animation itself is the shared Components/ui/JumpFlash, composed
   below — the same one the pipeline row, the progress tracker's column jump
   and the Help Center's search landing use: one visual language for "here is
   the thing you asked for". */._jumpFlash_1wksx_261 {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: var(--z-raised-1);
}/* Board frame — values from the approved mockup. */._board_1wksx_272 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-1) 0;
}/* Columns share the row evenly: equal grow from a zero basis, so three columns
   and eight columns each divide the width the same way. `min-width` (not
   shrink) is the floor — past it the row overflows into the board's ScrollArea rather
   than squeezing cards into unreadable slivers. 280px is the width a column
   settled at under the old `max-width` cap with the three seeded statuses, so
   the cap became the floor: the layout the board shipped with is now the
   narrowest a column ever gets, not the widest. */._column_1wksx_286 {
  flex: 1 0 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  height: 440px;

  /* The cap holds in every mode: search mode lets a column SHRINK to its
     matches (below), but never grow past the working height — past it the
     column's own stack scrolls. */
  max-height: 440px;
  background: var(--g50);
  border-radius: var(--r-xl);
  padding: 6px 10px 10px;
}/* Search mode: the fixed working height gives way to content, up to the cap —
   the row is as tall as the column with the most matches, and the rest
   stretch to line up with it. `stretch` (not flex-start) is what keeps the
   emptied columns from collapsing to ragged stubs beside the one that
   matched. */._board_1wksx_272[data-searching] {
  align-items: stretch;
}._board_1wksx_272[data-searching] ._column_1wksx_286 {
  height: auto;
}._columnGrip_1wksx_315 {
  display: flex;
  justify-content: center;
  color: var(--g300);
  padding: 2px 0 4px;
  cursor: grab;
  touch-action: none;
  flex: none;
}._columnGrip_1wksx_315:hover {
  color: var(--g500);
}/* The edit lock: no sensors, so no drag to promise. */._board_1wksx_272[data-locked] ._columnGrip_1wksx_315 {
  cursor: default;
}._columnHead_1wksx_334 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px 4px 10px;
  flex: none;
}._columnName_1wksx_342 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* The column-header count pill and the drawer's `.ddCount` are one style —
   declared together so they can't drift. */._count_1wksx_350,
._ddCount_1wksx_348 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  background: var(--g100);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}/* A column's cards: the ScrollArea root takes the column's remaining height,
   its viewport (`.stack`) is the scroller — jump-to-card scrolls it by class. */._stackFrame_1wksx_363 {
  flex: 1 1 auto;
}._stack_1wksx_362 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}._card_1wksx_38 {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  flex: none;
}._card_1wksx_38[data-deleting] {
  opacity: 0.3;
}/* The DragOverlay ghost — see BoardCardPreview. Fixed width: a column-hosted
   card takes its width from the column's own flex sizing, but
   this one is portalled to document.body with no such parent, so it needs
   its own. `--shadow-popover` reads as "lifted" against the board the way
   `--shadow-card` never could — the point is that this card is no longer
   resting in a column. `cursor: grabbing`, not the row's own pointer
   affordance: the real card underneath already shows the drag is live. */._cardPreview_1wksx_393 {
  width: 240px;
  box-shadow: var(--shadow-popover);
  cursor: grabbing;
}._cardHoverPreview_1wksx_399 {
  width: 260px;
  box-shadow: var(--shadow-popover);
}._cardMain_1wksx_38 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}._cardFoot_1wksx_417 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}._overdueBadge_1wksx_424 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-pill);
  padding: 0 7px;
}._columnEmpty_1wksx_434 {
  border: 1px dashed var(--g200);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  font-size: var(--fs-2xs);
  color: var(--g400);
  text-align: center;
  flex: none;
}._showAll_1wksx_444 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}/* Statuses dropdown (board header) — values from the approved mockup. The
   kebab trigger opens a real base-ui Menu ("Manage statuses"); selecting that
   item opens the management panel below, which stays a custom popover (not a
   base-ui Menu) because it hosts inline rename/add <input>s that need to keep
   focus while open, which a base-ui Menu.Popup (built to close on interaction
   and manage its own roving focus) actively fights. */._statusesRoot_1wksx_461 {
  position: relative;
}._dropdownPanel_1wksx_465 {
  /* On <body>, pinned under the trigger by StatusesMenu (top/right inline):
     the board card clips its overflow, so the panel lives outside it. */
  position: fixed;
  z-index: var(--z-popover);
  width: 250px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-dropdown);
}._ddTitle_1wksx_478 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px 8px 4px;
}._ddRow_1wksx_487 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px;
  border-radius: var(--r-sm);
}._ddRow_1wksx_487:hover {
  background: var(--g50);
}._ddName_1wksx_499 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}._ddCount_1wksx_348 {
  flex: none; /* pill styling shared with .count above */
}/* A status row's kebab: the shared KebabButton, tightened to the row. */._ddKebab_1wksx_515 {
  padding: 2px;
}._ddAdd_1wksx_519 {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--info);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}._ddAdd_1wksx_519:hover {
  background: var(--g50);
}._ddAdd_1wksx_519:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._ddInput_1wksx_542 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--info);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  background: var(--color-surface);
}._ddInput_1wksx_542:disabled {
  opacity: 0.6;
}._menuWhy_1wksx_559 {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g500);
}/* A multi-material card's line rows (design 2026-09-14 §4.2): the first two
   materials in full under the ref/destination row, each with its amount right
   — then a count for the rest, so a three-material card is no taller than
   today's plus one row. */._lineRow_1wksx_570 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}._lineName_1wksx_577 {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* What a row is about, at a glance: the package before each material line,
   the building before the supplier. Muted so it guides the eye without
   outweighing the text; centred, since an icon has no baseline. */._fieldIcon_1wksx_591 {
  flex: none;
  display: inline-flex;
  align-self: center;
  color: var(--g400);
}._moreLines_1wksx_598 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }

/* Read-only delivery detail. The shared ui/Drawer owns the panel box (width,
   padding, scroll, slide-in); this file only lays out the content. */

._head_d6f48_4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);

  /* Clear of the shell's absolutely-positioned corner close button. */
  padding-right: var(--s-6);
}

._eyebrow_d6f48_14 {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._eyebrowStar_d6f48_26 {
  margin-left: var(--s-1);
}

._ref_d6f48_30 {
  color: var(--g400);
}

._title_d6f48_34 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);

  /* An item name is free text up to 120 chars — wrap it rather than overflow. */
  overflow-wrap: anywhere;
}

/* The delivery's board column, in the board's own words, in the column's tone
   (deliveryTone.ts) — the colour its calendar chip carries; red while it is
   late. Delivered is grey: its Synced / Not synced pill carries the colour.
   Data-attribute rather than the row's `tone_*` classes: this is a static
   badge, not a trigger. */
._pill_d6f48_51 {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

._pill_d6f48_51[data-tone='danger'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}

._pill_d6f48_51[data-tone='neutral'] {
  color: var(--g500);
  background: var(--g100);
}

._pill_d6f48_51[data-tone='status'] {
  color: var(--navy);
  background: color-mix(in srgb, var(--order-tone) 16%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--order-tone) 45%, transparent);
}

/* A synced order's mark beside its column pill: the stock is reconciled, the
   order is history. The success pill's green. */
._pillSynced_d6f48_80 {
  color: var(--color-success);
  background: var(--color-success-bg);
}

/* The header's badge row: the column pill, and Synced beside it. */
._pills_d6f48_86 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* The Delivered field's on-time / early / overdue verdict — the board card's
   own classes (one source: DeliveryBoard.module.css). Its only difference is
   the size: it inherits the field's text instead of the card's 2xs, and the
   higher-specificity selector wins that without an injection-order fight. */
._variance_d6f48_96 { }
._fields_d6f48_97 ._variance_d6f48_96 { font-size: inherit; }
._varOnTime_d6f48_98 { }
._varEarly_d6f48_99 { }
._varLate_d6f48_100 { }

._fields_d6f48_97 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}

/* Label left, value right — a scannable record rather than a form. */
._field_d6f48_97 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

._fieldLabel_d6f48_120 {
  flex: none;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._fieldValue_d6f48_130 {
  margin: 0;
  text-align: right;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  overflow-wrap: anywhere;
}

._noteBlock_d6f48_139 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);

  /* Bounded so a 500-char note scrolls inside the panel instead of pushing the
     rest of the record out of view. */
  min-height: 0;
}

._noteScroll_d6f48_149 {
  max-height: 40vh;
}

._note_d6f48_139 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--navy);
  white-space: pre-wrap;

  /* The reason the row overflowed: a long note can be one unbroken token, which
     `normal` wrapping refuses to break. */
  overflow-wrap: anywhere;
}

/* ---------- Tabs ----------
   The shared ui/Tabs carries the look (underline indicator, hover); these
   carry the layout. The negative margin cancels the Drawer panel's own
   padding (--s-6 — ui/Drawer/Drawer.module.css) so the list's hairline runs
   the panel's full width, and the list pads the same amount back so the tab
   labels stay aligned with the content above. */
._tabsRoot_d6f48_172 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 calc(-1 * var(--s-6));
}

._tabsList_d6f48_180 {
  padding-left: var(--s-6);
  padding-right: var(--s-6);
}

._tabPanel_d6f48_185 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

._tabBody_d6f48_192 {
  padding: var(--s-4) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* The Edit panel is keepMounted, and Base UI hides an inactive panel with the
   `hidden` ATTRIBUTE — whose UA-level `display: none` loses to any author
   `display`. Without this, `display: flex` above resurrects the hidden panel
   and Overview renders with the whole edit form stacked under it. */
._tabPanel_d6f48_185[hidden] {
  display: none;
}

/* ---------- Delete (Edit tab's secondary slot) ----------
   Sits in the form footer's slot the dialog uses for Cancel; the auto margin
   pushes it to the far side of Save — the destructive act keeps its own
   corner. Filled red, matching the scheduler Task drawer's Delete — the one
   delete-button look across the app's record drawers. The fill comes from
   the chrome's own `dangerBtn` (never composed OVER `cancelBtn`'s grey —
   equal-specificity composes battles are decided by injection order). */
._deleteBtn_d6f48_214 {
  margin-right: auto;
}

._deleteBtn_d6f48_214:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* A synced order's (or a stale page's) Delete: faded and inert; the tooltip, where there is one, says why. */
._deleteBtn_d6f48_214[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The Supplier value: semibold name, its contact line muted beneath. */
._supplierName_d6f48_231 {
  display: block;
  font-weight: 600;
}

._supplierContact_d6f48_236 {
  display: block;
  font-size: var(--fs-xs);
  color: var(--g500);
}

._supplierContact_d6f48_236 a {
  color: inherit;
  text-decoration: underline;
}

._copyPhone_d6f48_247 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--g500);
  cursor: pointer;
  vertical-align: middle;
}

._copyPhone_d6f48_247:hover {
  color: var(--navy);
}
/* Bottom-center toast stack. Translated from merge/styles.css.
   `--toast-lift-h` (the height in px of a page-level dock in the same slot,
   set on <html>) raises it by that height plus the slot gap; unset, the two
   terms cancel and the stack sits at the slot's bottom. */

._wrap_145jn_6 {
  position: fixed;
  bottom: calc(
    var(--toast-slot-bottom) + var(--toast-lift-h, calc(-1 * var(--toast-slot-gap))) + var(--toast-slot-gap)
  );
  transition: bottom 0.2s ease;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--toast-slot-gap);
  z-index: var(--z-toast);
  align-items: center;
  pointer-events: none;
}

._toast_145jn_22 {
  min-width: 320px;
  max-width: 460px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-modal);
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: _toastIn_145jn_1 0.32s var(--ease-toast-in) both;
}

._icon_145jn_38 {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

._success_145jn_44 ._icon_145jn_38 {
  color: var(--turq);
}

._error_145jn_48 {
  background: var(--pm-toast-error-bg);
}

._error_145jn_48 ._icon_145jn_38 {
  color: var(--pm-toast-error-icon);
}

._body_145jn_56 {
  flex: 1;
  line-height: 1.35;
}

._body_145jn_56 b {
  font-weight: 600;
}

._sub_145jn_65 {
  font-size: var(--fs-2xs);
  color: var(--pm-toast-sub);
  margin-top: 2px;
  font-family: var(--f-mono);
}

._close_145jn_72 {
  border: 0;
  background: transparent;
  color: var(--pm-toast-close);
  padding: 3px;
  border-radius: var(--r-sm);
  display: inline-flex;
}

._close_145jn_72:hover {
  color: var(--white);
  background: var(--pm-toast-close-hover);
}

@keyframes _toastIn_145jn_1 {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  ._toast_145jn_22 {
    animation-duration: 0.001ms;
  }
}
/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }/* Similar-name UI shared by BOTH logistics forms (delivery Material + stock
   Material): the under-field nudge, and the canonical dropdown chip styles the
   two form stylesheets compose from (house pattern — see the DateField family
   composing from ui/DatePicker). */._nudge_g3uto_5 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-warn);
}/* The hard blocks speak in red; the suggestion above stays amber. */._nudge_g3uto_5[data-tone='error'] {
  color: var(--color-error);
}._nudgeBtn_g3uto_20 {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}/* Green, not amber: the chip marks the SAFE pick (the existing name); the
   amber treatments mark the risky one. */._comboChip_g3uto_33 {
  margin-left: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--color-success-bg);
  color: var(--color-success);
  white-space: nowrap;
}._comboOptStrong_g3uto_44 {
  font-weight: 600;
}

/* Overlay/panel/field/combo/footer chrome is shared with DeliveryOrderDialog —
   see dialogChrome.module.css. Only this dialog's width and its stock-specific
   fields (span row, sync figures, prefill notes) live here. */

._backdrop_1qcg9_5 { }

._popup_1qcg9_7 {

  /* The delivery dialog's width: the Material row (material · quantity ·
     unit) needs the same room it has there. */
  width: var(--logistics-wide-dialog-width);
}

._title_1qcg9_15 { }
._body_1qcg9_16 { }
._bodyScroll_1qcg9_17 { }
._field_1qcg9_18 { }
._label_1qcg9_19 { }
._combo_1qcg9_20 { }
._comboList_1qcg9_21 { }
._comboOpt_1qcg9_22 { }
._comboInput_1qcg9_23 { }

._input_1qcg9_25 { }
._caretBtn_1qcg9_26 { }
._footer_1qcg9_27 { }
._cancelBtn_1qcg9_28 { }
._saveBtn_1qcg9_29 { }
._fieldAsk_1qcg9_30 { }

._comboGroup_1qcg9_32 {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g400);
  padding: 7px 12px 3px;
}

._comboNew_1qcg9_41 {
  font-weight: 650;
  color: var(--status-planned-text);
  border-bottom: 1px solid var(--separator);
}

/* A label with its ⓘ beside it (the icon stays outside the <label>). */
._labelRow_1qcg9_49 { display: flex; align-items: center; gap: var(--s-1); }

/* Amount + unit side by side, each with its own label. */
._rowFields_1qcg9_52 { display: flex; gap: var(--s-3); }
._rowFields_1qcg9_52 ._field_1qcg9_18 { flex: 1; }

/* The Material section's one row, like the delivery dialog's material line:
   the material takes the room, amount and unit are fixed (the same 88/104 px
   columns). Absent the pair (a sync), the material fills the row. Notes wrap
   under the whole row. */
._materialRow_1qcg9_59 { display: flex; flex-wrap: wrap; column-gap: var(--s-2); }
._materialCell_1qcg9_60 { flex: 1 1 0; min-width: 0; }

/* A long name or the example placeholder ends in "…" rather than clipping. */
._materialCell_1qcg9_60 input { text-overflow: ellipsis; }

._amountCell_1qcg9_65 { flex: 0 0 var(--logistics-amount-col-width); }
._unitCell_1qcg9_66 { flex: 0 0 var(--logistics-unit-col-width); }
._rowNotes_1qcg9_67 { flex-basis: 100%; display: flex; flex-direction: column; }
._spanRow_1qcg9_68 { display: flex; align-items: center; gap: var(--s-2); }

/* Compound with `.input`: it narrows the field's width, which the composed
   `.input` base (width: 100%) would otherwise win on source order. */
._input_1qcg9_25._spanInput_1qcg9_72 { width: 88px; }
._spanCaption_1qcg9_73 { font-size: var(--fs-sm); color: var(--g600); }

/* Follow-up under the lead-time input — explains why the field appeared at all
   (this material has no delivery history to measure a lead from). */
._leadHint_1qcg9_77 {
  font-size: var(--fs-2xs);
  color: var(--g500);
  line-height: 1.5;
}

/* Provenance note under a prefilled field — explains where the number came
   from. Muted and small: it is a footnote to the input, not a second label. */
._fieldHint_1qcg9_85 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}

/* The footnote under a figure the SYSTEM put there and the user may correct —
   an estimate, or an amount carried from the delivery. Amber like the figure
   (ruling 2026-09-15). Locked facts (Arrived, the merged total) and questions
   to the user keep the muted `.fieldHint`. */
._seedHint_1qcg9_94 {
  color: var(--color-warn);
}

/* Read-only figures inside the sync block: a fact from the delivery record, or
   a sum of two fields above. Styled as inputs so the block reads as one form,
   but visibly not editable. */

/* Compound selectors (`.input.X`) so these win over the composed `.input` base
   on specificity, not source order — see dialogChrome.module.css. Every use of
   these modifiers sits on an `.input` element. */
._input_1qcg9_25._lockedField_1qcg9_106 {
  background: var(--g50);
  color: var(--g500);
  display: flex;
  align-items: center;
}

/* Louder than .fieldHint — this one says the numbers may not be addable. */
._fieldWarn_1qcg9_114 {
  font-size: var(--fs-2xs);
  color: var(--color-warn);
}

/* A value the SYSTEM put here, not the user. Amber marks it as a suggestion to
   be checked; the colour drops the moment the field stops holding our figure.
   Colour only — the border stays neutral so a prefilled field is not mistaken
   for one in an error state. Compound with `.input` to beat the composed base. */
._input_1qcg9_25._prefilled_1qcg9_123 {
  color: var(--color-warn);
  font-weight: 600;
}

/* "Estimated N" — the figure the system suggested, kept visible after the user
   overrides it so the change reads as a comparison and can be undone from
   memory. Amber (Niv ruling 2026-08-12): it is our estimate, the same colour the
   live field wears while it still holds our value — and it matches the
   delivery-order dialog, whose equivalent note is already amber. */
._seedNote_1qcg9_133 {
  font-size: var(--fs-2xs);
  color: var(--color-warn);
}

/* "was N days · rate" — the material's PRIOR stored figure, i.e. what is being
   replaced. Ink, not amber: it is history, not something we are proposing now,
   so it must not read as a second live estimate beside the amber one above. */
._wasNote_1qcg9_141 {
  font-size: var(--fs-2xs);
  color: var(--navy);
}

/* Says once, up front, what the amber values below are. Tinted rather than bare
   text so it reads as a property of the form, and sits above the first field so
   it is seen before anything is judged. */
._prefillBanner_1qcg9_149 {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--color-warn-bg);
  color: var(--color-warn);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
}

/* Bolded close-match option row — the chip itself is CloseMatchChip. */
._comboOptStrong_1qcg9_161 {
}

/* The cross-unit warning's two ways out — the form's other inline link look. */
._mismatchLinks_1qcg9_166 {
  display: inline-flex;
  gap: var(--s-3);
  margin-left: var(--s-2);
}

._mismatchLink_1qcg9_166 { }
._infoTip_1afmw_1 {
  display: inline-flex;
  align-items: center;
  color: var(--g400);
  cursor: help;
}

._infoTip_1afmw_1:hover,
._infoTip_1afmw_1:focus-visible {
  color: var(--g600);
}
/* The delete's inline failure line — the task drawer has no toast stack, so
   the companion says it itself, in the delivery dialog's own error look. */
._error_uru7d_3 {
  margin: 0 0 var(--s-4);
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--fs-sm);
}
/* AlertDrawerHost's placeholder state, shown inside the shared drawer.module.css
   overlay/panel while useUnifiedList's queries resolve (or, rarely, when the
   alert's item can't be found). The real content swaps in <ActivityDrawer>
   once the item resolves — this is deliberately minimal, not a skeleton of
   the full drawer layout. */
._state_18c7x_6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  padding: var(--s-6);
  text-align: center;
  color: var(--g500);
  font-size: var(--fs-sm);
}

._spinner_18c7x_19 {
  display: inline-flex;
  color: var(--g400);
  animation: _alertDrawerHostSpin_18c7x_1 0.8s linear infinite;
}

@keyframes _alertDrawerHostSpin_18c7x_1 {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._spinner_18c7x_19 {
    animation: none;
  }
}
/* ---------- Rail list (Activities / Issues layer) ----------
   One card filling the rail: a title that stays put while the Activities &
   Issues page's own cards scroll beneath it, on white like the Workforce cards. */
._list_pjh7v_4 {
  display: flex;
  flex-direction: column;
  margin: 14px var(--s-4);

  /* Fill the rail top to bottom (minus the margins), however short the list. */
  min-height: calc(100% - 28px);
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);

  /* `clip`, not `hidden`: rounds the corners without becoming a scroll
     container, which would stop the title below from sticking. */
  overflow: clip;
}

/* Title + filter pills stay put while the cards scroll beneath them. */
._listHead_pjh7v_22 {
  position: sticky;
  top: 0;
  z-index: var(--z-raised-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px var(--s-4) var(--s-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--g100);
}

._listTitle_pjh7v_34 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._listCount_pjh7v_41 {
  color: var(--g500);
  font-weight: 500;
}

._listBody_pjh7v_46 {
  flex: 1;
  padding: 6px var(--s-3) var(--s-3);
}

/* Trusstor's due-date sections: a caret header over a stack of cards. */
._groupHeader_pjh7v_52 {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 10px var(--s-1);
  border: none;
  background: transparent;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

/* Collapse affordance — the codebase's caret (MatrixTable `.caret`). */
._caret_pjh7v_69 {
  display: inline-flex;
  color: var(--g600);
  transition: transform 0.15s ease;
}

._caretCollapsed_pjh7v_76 {
  transform: rotate(-90deg);
}

._groupCards_pjh7v_80 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: 6px;
}

._empty_pjh7v_87 {
  margin: 0;
  padding: 10px var(--s-1);
  font-size: var(--fs-sm);
  color: var(--g400);
}

/* ---------- Building chips (Activities / Issues layer) ----------
   An activity chip is the workforce chip (`.slabProfChip`). An issue chip is
   Trusstor's ProfessionIssuesChip: a 20px pill of segments (glyph + count,
   star, flag), each after the first behind a 12px hairline. */
._issueChip_pjh7v_98 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--s-1);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

._chipSegment_pjh7v_107 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0 var(--s-1);
  font-size: var(--fs-xs);
  font-weight: 500;
}

._chipSegment_pjh7v_107 + ._chipSegment_pjh7v_107 {
  border-left: 1px solid currentColor;
  height: 12px;
}
/* The "live" ring pulse, shared: `composes` it onto a small round dot. Green by
   default; set `--pulse-strong` / `--pulse-soft` on the dot for another colour. */._pulse_bblje_3 {
  box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong));
  animation: _dorca-live-pulse_bblje_1 1.4s ease-out infinite;
}@keyframes _dorca-live-pulse_bblje_1 {
  0% { box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong)); }
  70% { box-shadow: 0 0 0 6px var(--pulse-soft, var(--live-pulse-soft)); }
  100% { box-shadow: 0 0 0 0 var(--pulse-soft, var(--live-pulse-soft)); }
}@media (prefers-reduced-motion: reduce) {
  ._pulse_bblje_3 {
    animation: none;
  }
}
/* The mode tag; the replay bar's own REPLAY tag is the same one. */
._modeTag_1tkha_2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.6px;
}

._modeLive_1tkha_13 {
  background: var(--g100);
  color: var(--navy);
}

._modeDot_1tkha_19 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background: var(--green);
}

._modeReplay_1tkha_27 {
  background: var(--amber);
  color: var(--navy);
}

/* Row container for the rail + main-view + drawer overlay. The drawer is
   absolutely positioned (`top: 0; bottom: 0`) and resolves against this
   element, keeping it scoped below the header. */
._body_1tkha_36 {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  color: var(--navy);
  font-family: var(--f-body);
  letter-spacing: 0.25px;
}

._leftRail_1tkha_46 {
  flex: 0 0 var(--monitor-leftrail-w);
  min-width: var(--monitor-leftrail-w);
  max-width: var(--monitor-leftrail-w);
  background: var(--g50);
  display: flex;
  flex-direction: column;
  z-index: var(--z-raised-2);
}

/* Fullscreen covers the sidebar and top bar. The rail becomes a panel with a
   real edge, for its collapse handle to grow out of. */
._fullscreen_1tkha_58 {
  position: fixed;
  inset: 0;
  z-index: var(--z-map-fullscreen);
  display: flex;
  flex-direction: column;
  background: var(--g50);
}

/* The fullscreen header: a slim bar holding the controls. */
._header_1tkha_68 {
  flex: 0 0 auto;
}

._fullscreen_1tkha_58 ._header_1tkha_68 {
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ops-card-border);
  background: var(--color-surface);
}

._fullscreenControls_1tkha_79 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._fullscreen_1tkha_58 ._leftRail_1tkha_46 {
  border-right: 1px solid var(--ops-card-border);
  transition: margin-left 0.5s var(--ease-out-expo);
}

._fullscreen_1tkha_58 ._leftRail_1tkha_46[data-collapsed='true'] {
  margin-left: calc(-1 * var(--monitor-leftrail-w));
  border-right: 0;
  visibility: hidden;
  transition:
    margin-left 0.5s var(--ease-out-expo),
    visibility 0s 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  ._fullscreen_1tkha_58 ._leftRail_1tkha_46,
  ._fullscreen_1tkha_58 ._leftRail_1tkha_46[data-collapsed='true'] {
    transition: none;
  }
}

._content_1tkha_106 {
  position: relative;
  flex: 1 1 auto;
}

._mainView_1tkha_111 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Default LeftRail view — a single scrolling stack of cards on the gray
   field. Each card (LiveSummary, the Workforce sections, SafetyAlerts)
   provides its own white shell; the stack just handles inset + spacing. */
._cardStack_1tkha_121 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}

/* The card stack stays mounted (so "back" is instant); when the safety
   view is shown it is display:none. The attribute selector beats
   `.cardStack`'s own `display: flex`. */
._cardStack_1tkha_121[hidden] {
  display: none;
}

._safetyView_1tkha_135 {
  display: flex;
  flex-direction: column;
}

/* "Back" control above the full safety view (activeTab === 'safety'). */
._backRow_1tkha_141 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--g100);
  cursor: pointer;
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}

._backRow_1tkha_141:hover {
  background: var(--g50);
  color: var(--navy);
}
/* `html button:where(…)` weighs two type selectors: more than the global
   `button` reset, less than any class, so a call site's class always wins
   whatever order the stylesheets load in (as KebabButton). */
html button:where(._iconButton_y4rzo_4) {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;

  /* Square around a narrow glyph (− / +) too. */
  min-width: 30px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  color: var(--g700);
  line-height: 1;
  cursor: pointer;
}

html button:where(._iconButton_y4rzo_4:hover:not(:disabled)) {
  background: var(--g50);
}

html button:where(._iconButton_y4rzo_4:disabled) {
  opacity: 0.5;
  cursor: default;
}
/* Shared MOCK pill — same visual treatment in every card. The
   per-field variant adds left spacing + inline-block / vertical
   alignment so it can sit after an inline label without nudging
   the baseline. */._pill_1ia68_6 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--dashboard-mock-bg);
  border-radius: var(--r-pill);
}._badge_1ia68_17 {
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
}
/* MockPill's shape, tone swapped to primary. */
._beta_113g5_2 {
  background: hsl(var(--primary) / 10%);
  color: hsl(var(--primary));
}
/* Outlined pill left of the layer switch; a teal tint while the bar is open. */
._toggle_1uu4y_2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 120ms,
    color 120ms,
    border-color 120ms;
}

._toggle_1uu4y_2:hover {
  border-color: var(--g300);
  color: var(--navy);
}

._toggle_1uu4y_2[aria-pressed='true'] {
  border-color: hsl(var(--primary) / 40%);
  background: hsl(var(--primary) / 10%);
  color: hsl(var(--primary));
  font-weight: 600;
}
/* The day pills and the calendar icon read as one rail. */
._days_ns50p_2 {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
  border-radius: var(--r-pill);
  background: var(--g100);
}
/* The "live" ring pulse, shared: `composes` it onto a small round dot. Green by
   default; set `--pulse-strong` / `--pulse-soft` on the dot for another colour. */._pulse_bblje_3 {
  box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong));
  animation: _dorca-live-pulse_bblje_1 1.4s ease-out infinite;
}@keyframes _dorca-live-pulse_bblje_1 {
  0% { box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong)); }
  70% { box-shadow: 0 0 0 6px var(--pulse-soft, var(--live-pulse-soft)); }
  100% { box-shadow: 0 0 0 0 var(--pulse-soft, var(--live-pulse-soft)); }
}@media (prefers-reduced-motion: reduce) {
  ._pulse_bblje_3 {
    animation: none;
  }
}
/* The bar's LIVE button. --live-ring: the red of a live state's ring and border. */
._live_l05fk_2 {
  --live-ring: color-mix(in srgb, var(--red) 55%, transparent);

  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--g500);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
}

._live_l05fk_2:hover {
  border-color: var(--g300);
  color: var(--navy);
}

._dot_l05fk_25 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background: var(--g300);
}

._dotLive_l05fk_32 {

  --pulse-strong: var(--live-ring);
  --pulse-soft: color-mix(in srgb, var(--red) 0%, transparent);

  background: var(--red);
}

/* Live safety alerts raised while away from live. */
._liveAlerting_l05fk_43,
._liveAlerting_l05fk_43:hover {
  border-color: var(--live-ring);
  color: var(--red);
}

._live_l05fk_2[aria-pressed='true'] {
  border-color: var(--g100);
  background: var(--g50);
  color: var(--navy);
}
/* The "live" ring pulse, shared: `composes` it onto a small round dot. Green by
   default; set `--pulse-strong` / `--pulse-soft` on the dot for another colour. */._pulse_bblje_3 {
  box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong));
  animation: _dorca-live-pulse_bblje_1 1.4s ease-out infinite;
}@keyframes _dorca-live-pulse_bblje_1 {
  0% { box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong)); }
  70% { box-shadow: 0 0 0 6px var(--pulse-soft, var(--live-pulse-soft)); }
  100% { box-shadow: 0 0 0 0 var(--pulse-soft, var(--live-pulse-soft)); }
}@media (prefers-reduced-motion: reduce) {
  ._pulse_bblje_3 {
    animation: none;
  }
}/* The mode tag; the replay bar's own REPLAY tag is the same one. */._modeTag_1tkha_2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.6px;
}._modeLive_1tkha_13 {
  background: var(--g100);
  color: var(--navy);
}._modeDot_1tkha_19 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background: var(--green);
}._modeReplay_1tkha_27 {
  background: var(--amber);
  color: var(--navy);
}/* Row container for the rail + main-view + drawer overlay. The drawer is
   absolutely positioned (`top: 0; bottom: 0`) and resolves against this
   element, keeping it scoped below the header. */._body_1tkha_36 {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  color: var(--navy);
  font-family: var(--f-body);
  letter-spacing: 0.25px;
}._leftRail_1tkha_46 {
  flex: 0 0 var(--monitor-leftrail-w);
  min-width: var(--monitor-leftrail-w);
  max-width: var(--monitor-leftrail-w);
  background: var(--g50);
  display: flex;
  flex-direction: column;
  z-index: var(--z-raised-2);
}/* Fullscreen covers the sidebar and top bar. The rail becomes a panel with a
   real edge, for its collapse handle to grow out of. */._fullscreen_1tkha_58 {
  position: fixed;
  inset: 0;
  z-index: var(--z-map-fullscreen);
  display: flex;
  flex-direction: column;
  background: var(--g50);
}/* The fullscreen header: a slim bar holding the controls. */._header_1tkha_68 {
  flex: 0 0 auto;
}._fullscreen_1tkha_58 ._header_1tkha_68 {
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ops-card-border);
  background: var(--color-surface);
}._fullscreenControls_1tkha_79 {
  display: flex;
  align-items: center;
  gap: 12px;
}._fullscreen_1tkha_58 ._leftRail_1tkha_46 {
  border-right: 1px solid var(--ops-card-border);
  transition: margin-left 0.5s var(--ease-out-expo);
}._fullscreen_1tkha_58 ._leftRail_1tkha_46[data-collapsed='true'] {
  margin-left: calc(-1 * var(--monitor-leftrail-w));
  border-right: 0;
  visibility: hidden;
  transition:
    margin-left 0.5s var(--ease-out-expo),
    visibility 0s 0.5s;
}@media (prefers-reduced-motion: reduce) {
  ._fullscreen_1tkha_58 ._leftRail_1tkha_46,
  ._fullscreen_1tkha_58 ._leftRail_1tkha_46[data-collapsed='true'] {
    transition: none;
  }
}._content_1tkha_106 {
  position: relative;
  flex: 1 1 auto;
}._mainView_1tkha_111 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}/* Default LeftRail view — a single scrolling stack of cards on the gray
   field. Each card (LiveSummary, the Workforce sections, SafetyAlerts)
   provides its own white shell; the stack just handles inset + spacing. */._cardStack_1tkha_121 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}/* The card stack stays mounted (so "back" is instant); when the safety
   view is shown it is display:none. The attribute selector beats
   `.cardStack`'s own `display: flex`. */._cardStack_1tkha_121[hidden] {
  display: none;
}._safetyView_1tkha_135 {
  display: flex;
  flex-direction: column;
}/* "Back" control above the full safety view (activeTab === 'safety'). */._backRow_1tkha_141 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--g100);
  cursor: pointer;
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}._backRow_1tkha_141:hover {
  background: var(--g50);
  color: var(--navy);
}
/* Where the bar floats, in and out of fullscreen: over the whole screen, bottom centre. */
._dock_1xa3p_2 {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: var(--z-floating-dock);
  width: min(1040px, 100vw - 32px);
  transform: translateX(-50%);
}

/* Replay time bar: a white card floating at the bottom of the screen. */
._bar_1xa3p_12 {
  margin: 0 16px 14px;
  padding: 10px 16px 8px;
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover), var(--shadow-card);
  color: var(--navy);
  user-select: none;
  animation: _bar-rise_1xa3p_1 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  ._bar_1xa3p_12 {
    animation: none;
  }
}

@keyframes _bar-rise_1xa3p_1 {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

._row_1xa3p_37 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._play_1xa3p_43 {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-circle);
  background: hsl(var(--primary));
  box-shadow: var(--shadow-pin);
  color: var(--color-surface);
  cursor: pointer;
  transition: filter 0.12s ease;
}

._play_1xa3p_43:hover:not(:disabled) {
  filter: brightness(1.1);
}

._play_1xa3p_43:disabled {
  opacity: 0.5;
  cursor: default;
}

._clock_1xa3p_67 {
  min-width: 56px;
  font-size: var(--fs-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

._date_1xa3p_74 {
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-xs);
  line-height: 1.25;
  color: var(--g500);
}

._date_1xa3p_74 b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._tag_1xa3p_89 {
}

/* Clips to an ellipsis; the padding keeps the key boxes' borders, which
   reach past the line, inside the clip. */
._hint_1xa3p_95 {
  overflow: hidden;
  min-width: 0;
  margin-left: 4px;
  padding-block: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-2xs);
  color: var(--g400);
}

._hint_1xa3p_95 kbd {
  padding: 0 4px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--g50);
  color: var(--g600);
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: 500;
}

._spacer_1xa3p_117 {
  flex: 1;
}

/* Under the track: the lanes' day counts and the badges / lanes switch. */
._footer_1xa3p_122 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 12px 0;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g400);
}

._legendItem_1xa3p_132 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

._legendDot_1xa3p_139 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
}

._viewLink_1xa3p_145 {
  padding-block: 3px;
  border-radius: var(--r-pill);
  background: var(--g200);
  background-clip: content-box;
  color: transparent;
  line-height: 8px;
}

._skeleton_1xa3p_154 ._legendDot_1xa3p_139 {
  background: var(--g200);
}

._viewLink_1xa3p_145 {
  padding: 0;
  border: 0;
  background: none;
  color: hsl(var(--primary));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

._viewLink_1xa3p_145:hover {
  text-decoration: underline;
}

/* While the next day loads: the day that was on screen, as a still picture. */
._held_1xa3p_173 {
  opacity: var(--replay-held-opacity);
  filter: grayscale(1);
}

/* With no day to hold: a sample day drawn in grey, pulsing (DayTrack's skeleton
   look). The ink and the text pill are set here, once, for this module's legend
   and for ReplayTrack's rules; text keeps its width under the pill. */
._skeleton_1xa3p_154 {
  --skeleton-ink: var(--g200);
  --skeleton-pill: linear-gradient(var(--skeleton-ink) 0 0) center / 100% 8px no-repeat;

  animation: _skeleton-pulse_1xa3p_1 1.4s ease-in-out infinite;
}

._skeleton_1xa3p_154 ._legendItem_1xa3p_132,
._skeleton_1xa3p_154 ._viewLink_1xa3p_145 {
  border-radius: var(--r-pill);
  background: var(--skeleton-pill);
  color: transparent;
}

._skeleton_1xa3p_154 ._legendDot_1xa3p_139 {
  visibility: hidden;
}

@keyframes _skeleton-pulse_1xa3p_1 {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._skeleton_1xa3p_154 {
    animation: none;
  }
}

/* The loading line along the bar's bottom edge, inside its rounded corners. */
._loadLine_1xa3p_212 {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  overflow: hidden;
  height: 2px;
}

._loadLine_1xa3p_212::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  border-radius: var(--r-pill);
  background: hsl(var(--primary));
  animation: _load-slide_1xa3p_1 1.1s ease-in-out infinite;
}

@keyframes _load-slide_1xa3p_1 {
  to {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._loadLine_1xa3p_212::after {
    left: 0;
    width: 100%;
    opacity: 0.4;
    animation: none;
  }
}
/* Replay day track: headcount curve, hatched future, hour ticks, framing
   lines, event markers and the playhead, all positioned in % of the window.
   Top to bottom: the curve, then (badges) the badge row and the hours, or
   (lanes) the hours and one row per lane (--lanes, set inline). --below is
   everything under the curve; the layers that span the curve stop above it. */
._track_15ppq_6 {
  --curve-h: 38px;
  --axis-h: 12px;
  --row-h: 22px;
  --row-gap: 2px;
  --lane-px: calc(var(--row-h) + var(--row-gap));
  --under-curve: calc(var(--curve-h) + var(--row-gap));
  --below: calc(var(--row-h) + var(--axis-h) + 2 * var(--row-gap));

  position: relative;
  height: calc(var(--curve-h) + var(--below));
  margin-top: 18px;
  cursor: pointer;
  touch-action: none;
}

._track_15ppq_6[data-markers='lanes'] {
  --below: calc(var(--axis-h) + 2 * var(--row-gap) + var(--lanes) * var(--lane-px));
}

/* The time axis: the track minus the knob's half hit area on each side (left/right set from TRACK_INSET_PX). */
._plot_15ppq_27 {
  position: absolute;
  top: 0;
  bottom: 0;
}

._curve_15ppq_33 {
  position: absolute;
  inset: 0 0 14px;
  width: 100%;
  height: var(--curve-h);
}

._area_15ppq_40 {
  fill: hsl(var(--primary) / 16%);
}

._line_15ppq_44 {
  fill: none;
  stroke: hsl(var(--primary));
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* Above the hatched future (drawn after it), which covers a day not yet started. */
._empty_15ppq_52 {
  position: absolute;
  z-index: var(--z-raised-1);
  inset: 0 0 var(--below);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  color: var(--g400);
}

._future_15ppq_62 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--below);
  border-left: 1px dashed var(--g200);
  background: repeating-linear-gradient(135deg, var(--g50) 0 6px, transparent 6px 12px);
  cursor: not-allowed;
}

/* No data yet: from the window's start to the day's first snapshot. */
._noDataLine_15ppq_73 {
  stroke: var(--g400);
  stroke-width: 1.6;
  stroke-dasharray: 1.5 3.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

._ticks_15ppq_81 {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--axis-h);
  font-size: var(--fs-2xs);
  color: var(--g400);
  font-variant-numeric: tabular-nums;
}

._track_15ppq_6[data-markers='lanes'] ._ticks_15ppq_81 {
  top: var(--under-curve);
  bottom: auto;
}

._ticks_15ppq_81 span {
  position: absolute;
  transform: translateX(-50%);
}

._dashed_15ppq_102 {
  position: absolute;
  top: 0;
  bottom: var(--below);
  width: 0;
  border-left: 1.5px dashed var(--g300);
  pointer-events: none;
}

._dashed_15ppq_102 i {
  position: absolute;
  left: 4px;
  font-size: var(--fs-2xs);
  font-style: normal;
  font-weight: 500;
  color: var(--g500);
  white-space: nowrap;
}

._dashed_15ppq_102[data-at='top'] {
  top: -14px;
}

._dashed_15ppq_102[data-at='top'] i {
  top: -1px;
}

._dashed_15ppq_102[data-at='bottom'] i {
  bottom: 1px;
}

._dashed_15ppq_102[data-flip='true'] i {
  right: 4px;
  left: auto;
}

/* Marker rows span the plot; each clusters its own markers and is its own
   stacking context, so a marker's --layer (severity) orders it within the row
   while the whole row stays under the playhead. */
._badgeRow_15ppq_141,
._curveRow_15ppq_142,
._lane_15ppq_143 {
  position: absolute;
  z-index: var(--z-raised-2);
  right: 0;
  left: 0;
  height: var(--row-h);
}

._badgeRow_15ppq_141 {
  top: var(--under-curve);
}

._curveRow_15ppq_142 {
  top: 1px;
}

._lane_15ppq_143 {
  top: calc(var(--under-curve) + var(--axis-h) + var(--row-gap) + var(--lane) * var(--lane-px));
}

/* The lane's rail, under its markers. */
._lane_15ppq_143::before {
  position: absolute;
  inset: 8px 0;
  border-radius: var(--r-sm);
  background: var(--g50);
  content: '';
}

._marker_15ppq_172 {
  position: absolute;
  top: 2px;
  z-index: var(--layer);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  padding: 0;
  border: 2px solid var(--color-surface);
  border-radius: var(--r-circle);
  background: var(--c);
  box-shadow: var(--shadow-pin);
  color: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease;
}

._cluster_15ppq_194 {
  width: auto;
  min-width: 18px;
  margin-left: 0;
  padding: 0 4px;
  border-radius: var(--r-pill);
  translate: -50% 0;
  font-variant-numeric: tabular-nums;
}

._marker_15ppq_172:hover,
._marker_15ppq_172:focus-visible {
  z-index: calc(var(--z-inline-popover) + 1); /* over every kind's layer (0-5) */
  transform: scale(1.2);
}

._head_15ppq_210 {
  position: absolute;
  top: -4px;
  z-index: var(--z-raised-3); /* the knob sits over the markers it overlaps */
  bottom: calc(var(--below) - 2px);
  width: 2px;
  background: var(--navy);
  transform: translateX(-1px);
  pointer-events: none;
}

._knob_15ppq_221 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: grab;
}

._knob_15ppq_221::after {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid hsl(var(--primary));
  border-radius: var(--r-circle);
  background: var(--color-surface);
  box-shadow: var(--shadow-chip);
  transform: translate(-50%, -50%);
  transition: box-shadow 0.15s ease;
  content: '';
}

._knob_15ppq_221:hover::after,
._track_15ppq_6[data-scrubbing] ._knob_15ppq_221::after {
  box-shadow: var(--shadow-chip), 0 0 0 4px hsl(var(--primary) / 25%);
}

._track_15ppq_6[data-scrubbing],
._track_15ppq_6[data-scrubbing] ._knob_15ppq_221 {
  cursor: grabbing;
}

/* The skeleton look (DayTrack): a sample day in grey. The ink, the text pill and
   the pulse come from ReplayBar.module.css's .skeleton on the same element. */
._skeleton_15ppq_259 ._area_15ppq_40 {
  fill: var(--g100);
}

._skeleton_15ppq_259 ._line_15ppq_44,
._skeleton_15ppq_259 ._noDataLine_15ppq_73 {
  stroke: var(--skeleton-ink);
}

._skeleton_15ppq_259 ._dashed_15ppq_102 {
  border-left-color: var(--skeleton-ink);
}

._skeleton_15ppq_259 ._marker_15ppq_172 {
  background: var(--skeleton-ink);
  box-shadow: none;
  color: transparent;
}

._skeleton_15ppq_259 ._marker_15ppq_172 > * {
  visibility: hidden;
}

._skeleton_15ppq_259 ._dashed_15ppq_102 i,
._skeleton_15ppq_259 ._ticks_15ppq_81 span {
  border-radius: var(--r-pill);
  background: var(--skeleton-pill);
  color: transparent;
}

._skeleton_15ppq_259 ._head_15ppq_210 {
  display: none;
}
/* The "live" ring pulse, shared: `composes` it onto a small round dot. Green by
   default; set `--pulse-strong` / `--pulse-soft` on the dot for another colour. */._pulse_bblje_3 {
  box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong));
  animation: _dorca-live-pulse_bblje_1 1.4s ease-out infinite;
}@keyframes _dorca-live-pulse_bblje_1 {
  0% { box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong)); }
  70% { box-shadow: 0 0 0 6px var(--pulse-soft, var(--live-pulse-soft)); }
  100% { box-shadow: 0 0 0 0 var(--pulse-soft, var(--live-pulse-soft)); }
}@media (prefers-reduced-motion: reduce) {
  ._pulse_bblje_3 {
    animation: none;
  }
}

._mainView_1qluf_1 {
  /* Card shells fill the full main-view width (white surface, no gray page
     margins). `none` removes the old shared cap on `.card` / `.specialAreas`;
     the building *inside* the card is bounded separately (see `.buildingWrap`). */
  --main-section-max-width: none;

  display: flex;
  flex-direction: column;
  height: 100%;

  /* Page-gray field. The building-view and Special-Areas cards below each
     supply their own white surface, mirroring the LeftRail card stack. */
  background: var(--g50);
}

._body_1qluf_16 {
  flex: 1;
  min-height: 0;
}

._bodyViewport_1qluf_21 {
  /* Top padding matches `.cardStack` in the LeftRail (14px) so the building
     card and the Live Summary card sit on the same baseline. The bottom clears
     the floating replay bar while it is open (MainView sets the variable). */
  padding: 14px 28px calc(28px + var(--replay-bar-clearance));

  /* Vertical stack: the building card on top, the Special Areas card beneath.
     Both cards fill the full width (white surface), so there are no dead gray
     margins when zoomed out / on wide views. The building *inside* its card is
     bounded to the dashboard's size (see `.buildingWrap`) and sits centred with
     white space beside it — the dashboard's Visual Site Overview pattern. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}

/* ---------- Card shells (Building view + Special Areas) ----------
   Two discrete card surfaces. The building view's `.buildingWrap` stays
   untouched below — its width/centering geometry is what `BuildingViewSvg`'s
   one-shot `getBBox()` measurement relies on, so this wrapper supplies the
   visual chrome only (border + shadow) and leaves layout to the child. */
._card_1qluf_3 {
  width: 100%;
  max-width: var(--main-section-max-width);
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

._cardHeaderRow_1qluf_54 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--g100);
}

/* Matches LeftRail `.cardHeader` typography (`leftRail.module.css:79-104`)
   so the building card title sits visually level with the Live Summary /
   Safety Alerts card titles on the same baseline. */
._cardHeaderTitle_1qluf_66 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._buildingWrap_1qluf_4 {
  /* The building fills its card at its original, larger size. The card itself
     fills the full main-view width, so there are no dead gray margins; the cap
     holds the building to its prior max on ultra-wide / zoomed-out views, where
     `margin-inline: auto` centres it with white card space beside it (not gray
     page). BuildingViewSvg re-measures its anchors (ResizeObserver) on resize. */
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 18px;
}

/* ---------- Special areas (now a card) ---------- */
._specialAreas_1qluf_3 {
  width: 100%;
  max-width: var(--main-section-max-width);
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);

  /* Inner head/rows carry their own 20px horizontal padding (so the grid
     columns line up); the card adds 8px on each side so the rounded rows
     don't bleed into the card border. */
  padding: 16px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Same shape as `.cardHeaderTitle` above so both card titles read as one
   family — `.cardHeaderTitle` sits in a bordered card-header row, this one
   doesn't (it pads off the card's own top inset), but the type is identical. */
._specialAreasTitle_1qluf_110 {
  margin: 0;
  padding: 0 20px 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._specialAreasHead_1qluf_118 {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  gap: 16px;
  padding: 8px 20px 6px;

  /* Transparent on the now-white page; row tint below provides the visual
     contrast that used to come from the inverted page/card scheme. */
  background: transparent;
  border-radius: var(--r-2xl);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.1px;
}

._specialAreasHeadInfo_1qluf_134 {
  justify-self: end;
}

._specialAreaRow_1qluf_138 {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;

  /* Gray fill against the white page — the inverse of the old palette so
     each card still reads as a discrete tile after the page flip. */
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-2xl);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

._specialAreaRow_1qluf_138:hover {
  border-color: var(--g200);
  box-shadow: var(--shadow-row-hover);
}

._areaTitle_1qluf_158 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._areaTitleRow_1qluf_164 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._areaIcon_1qluf_170 {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--g500);
}

._areaName_1qluf_178 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}

._areaMeta_1qluf_185 {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--g500);
  font-size: var(--fs-xs);
  padding-left: 32px;
}

._areaMetaItem_1qluf_194 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

._resourceRow_1qluf_200 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._profChip_1qluf_206 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.3;
  max-width: 240px;
}

._profChipCount_1qluf_219 {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--chip-overlay-md);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
}

._profChipLabel_1qluf_231 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._managerChip_1qluf_237 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: var(--r-pill);
  background: var(--color-surface);
  border: 1px solid var(--g200);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}

._managerChipInitials_1qluf_251 {
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--g100);
  color: var(--g700);
  font-size: var(--fs-2xs);
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}

._equipChip_1qluf_263 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 3px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
}

._equipChipCount_1qluf_276 {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-sm);
  background: var(--chip-overlay-sm);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

._info_1qluf_288 {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  font-size: var(--fs-xs);
  color: var(--g500);
}

._infoIcon_1qluf_297 {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--red);
}

._infoBadge_1qluf_306 {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: var(--amber);
  color: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  display: inline-grid;
  place-items: center;
}

._infoOperator_1qluf_322 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: 500;
}

._areaEmpty_1qluf_331 {
  flex: 1;
  padding: 10px 16px;

  /* Now sits inside a `--g50` row, so the pill needs a darker tint to
     read as a discrete element instead of blending into the row. */
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  color: var(--g500);
  font-size: var(--fs-sm);
  text-align: center;
  font-weight: 400;
}

._buildingViewWrap_1qluf_346 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

._building_1qluf_4 {
  width: 100%;

  /* No fixed aspect-ratio: the injected SVG carries its own viewBox and
     `preserveAspectRatio="xMidYMid meet"` (stamped on fetch). Fixing the
     ratio here would letterbox real Trusstor SVGs that aren't 3:4. */
}

._building_1qluf_4 > svg {
  /* Width-driven sizing; height follows the SVG's intrinsic viewBox.
     Forcing a max-height here would letterbox SVGs whose aspect ratio is
     taller than the available box; the body scrolls, so any
     spillover scrolls. */
  width: 100%;
  height: auto;
  display: block;
}

/* Absolutely-positioned overlay layer that sits on top of the injected SVG;
   ChipOverlayCell coordinates are computed in container pixels from each
   `chip<floorId>` element's bounding rect. */
._chipOverlay_1qluf_374 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

._chipOverlayCell_1qluf_380 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  /* `visible`, not `hidden`: the cell is sized to the slab marker, and its
     chip row is scaled (see `.chipRow`) to fit the floor pitch — clipping to
     the marker box cut the pills off when the tower rendered small. Scaling
     already keeps chips within their floor band, so there's nothing to clip. */
  overflow: visible;

  /* Restore pointer events on the cell only — the parent .chipOverlay has
     pointer-events:none so non-chip areas pass clicks to the floor
     overlay beneath. The hover popover wires up via onMouseEnter on this
     element, so we must opt back in here. Cells also forward their click
     to the floor overlay via JS so chip-area clicks still select the floor. */
  pointer-events: auto;
  cursor: pointer;
}

._building_1qluf_4 svg {
  /* Width-driven sizing; height follows the SVG's viewBox. The cap on
     `.building > svg` further constrains tall SVGs so they don't push
     SpecialAreas off-screen on short viewports. */
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ---------- Floor click + hover overlay (mirrors trusstor_dashboard) ----------
   Trusstor SVGs ship `floor<n>` markers as invisible `<rect fill="none">`
   shapes — `pointer-events: visiblePainted` (the SVG default) skips them
   so the SVG element itself is unhoverable AND unclickable. We don't try
   to fix the SVG; we render an HTML button per floor, positioned at the
   floor anchor's bounding rect, and apply hover/selected state on that
   button. Works for every Trusstor SVG variant we've seen. */
._floorOverlay_1qluf_418 {
  position: absolute;
  inset: 0;

  /* Container is click-through; only the cells below opt back in. */
  pointer-events: none;
}

._floorOverlayCell_1qluf_426 {
  position: absolute;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: background 120ms ease, opacity 120ms ease;
}

._floorOverlayCell_1qluf_426:hover {
  background: var(--floor-hover-fill);
}

._floorOverlayCell_1qluf_426:focus-visible {
  outline: 2px solid var(--floor-selected-fill);
  outline-offset: -2px;
}

._floorOverlayCellSelected_1qluf_447 {
  background: var(--floor-selected-fill);
  opacity: 0.7;
}

._floorOverlayCellSelected_1qluf_447:hover {
  /* Don't dim the selected tint with the hover layer; selected wins. */
  background: var(--floor-selected-fill);
  opacity: 0.7;
}

/* ---------- Side-rail badges (alerts + hoists) ---------- */

/* Same overlay-anchor pattern as `.chipOverlay`/`.floorOverlay`: container is
   click-through, individual badge buttons opt back in. Anchored to the
   `alert<id>` and `elevator<id>` markers stamped in the Trusstor SVG. */
._alertOverlay_1qluf_463,
._elevatorOverlay_1qluf_464 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Per-anchor cell wrapper. The badge inside has fixed pixel dimensions and
   the cell's `top` / `left` are computed in JS via trusstor's offset
   formula (`svgHelpers.ts`) — the cell does NOT centre using grid because
   that would re-centre against the anchor's bounding rect rather than
   following trusstor's edge-anchored shift. The cell sizes to its child
   (the badge button), so `pointer-events: auto` only "claims" the badge
   footprint — clicks elsewhere fall through to lower overlays. We need
   pointer events on for Base UI's `Tooltip.Trigger` to detect hover. */
._alertOverlayCell_1qluf_478,
._elevatorOverlayCell_1qluf_479 {
  position: absolute;
  pointer-events: auto;
}

._alertBadge_1qluf_484,
._hoistBadge_1qluf_485 {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;

  /* Keep the badge at its declared pixel size — the global reset
     (`reset.css: img, svg { max-width: 100% }`) otherwise shrinks the
     glyph to the anchor cell's width, which can be a few pixels when
     Trusstor stamps tiny rects as anchors. */
  flex-shrink: 0;
}

/* `color` on the button drives the SVG `currentColor` inside, so the
   only place hex values live is `tokens.css`. */
._alertBadge_1qluf_484 {
  color: var(--safety-alert-orange);
}

._alertBadge_1qluf_484[data-severity='critical'] {
  color: var(--safety-alert-red);
}

._hoistBadge_1qluf_485 {
  color: var(--hoist-glyph-fill);
}

._alertBadge_1qluf_484 svg,
._hoistBadge_1qluf_485 svg {
  max-width: none;
  width: auto;
  height: auto;
}

._alertBadge_1qluf_484:focus-visible,
._hoistBadge_1qluf_485:focus-visible {
  outline: 2px solid var(--floor-selected-fill);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}

/* Count avatar pinned top-right of each badge — mirrors trusstor's
   `.avatar` rule on both `SafetyIcon` and `HoistIcon`. */
._alertBadgeCount_1qluf_536 {
  position: absolute;
  top: -6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border-radius: var(--r-circle);
  background: var(--badge-avatar-bg);
  color: var(--badge-avatar-text);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--badge-avatar-shadow);
}

._hoistBadgeCount_1qluf_553 {
  position: absolute;
  top: -4px;
  right: 0;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: var(--r-circle);
  background: var(--badge-avatar-bg);
  color: var(--badge-avatar-text);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--badge-avatar-shadow);
}

/* A floor's chip row (ChipRow): the chips' own box, scaled by ChipRow (see `chipScale` in BuildingViewSvg)
   from the slab's left edge and vertical centre, so chips stay on their floor
   line while the cell keeps the slab's size. */
._chipRow_1qluf_387 {
  display: inline-flex;
  flex: none;
  gap: 4px;
  align-items: center;
  transform-origin: left center;
}

/* Natural width, never squeezed: the row decides what fits by measuring these. */
._chipSlot_1qluf_582 {
  display: inline-flex;
  flex-shrink: 0;
}

/* "+N" — the chips that didn't fit the slab. */
._chipMore_1qluf_588 {
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g600);
}

/* A chip (or the "+N" tag) that doesn't fit: still mounted and measurable,
   but out of flow and unseen. */
._chipOverflow_1qluf_597 {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

._slabProfChip_1qluf_603 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1.2;

  /* Max-width is set inline (PROF_CHIP_MAX_PX, or the row's room when that
     is less) in BuildingViewSvg, so it's intentionally not capped here. */
}

._slabProfChipCount_1qluf_618 {
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--chip-overlay-md);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

._slabProfChipLabel_1qluf_630 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._slabEquipChip_1qluf_636 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 5px;
  border-radius: var(--r-sm);
  background: var(--color-surface);
  border: 1px solid var(--g200);
  color: var(--navy);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.2;
}

/* Per-type icon inside an equipment / utility slab chip — sized to match
   the rest of the chip text. The asset itself is a coloured PNG/SVG so we
   can't tint via `currentColor`, just constrain its box. */
._slabEquipIcon_1qluf_653 {
  width: 12px;
  height: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Manager slab chip: pill carrying a coloured initials avatar + the
   manager's full name. The whole pill uses the manager's backgroundColor
   at low alpha for the body, with the avatar disk at full saturation —
   mirrors trusstor_dashboard's ManagerChip. */
._slabManagerChip_1qluf_664 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  border-radius: var(--r-pill);
  background-blend-mode: lighten;

  /* Inline `style` sets `backgroundColor` to the manager's brand colour;
     the `chip-overlay-md` token brings it down to a soft pill shade so
     light-coloured initials stay legible. */
  background-image: linear-gradient(var(--chip-overlay-md), var(--chip-overlay-md));
  color: var(--navy);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.2;

  /* Max-width is set inline (MANAGER_CHIP_MAX_PX, or the row's room when
     that is less) in BuildingViewSvg, so it's intentionally not capped here. */
}

._slabManagerAvatar_1qluf_685 {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

._slabManagerName_1qluf_698 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}

._slabEquipCount_1qluf_705 {
  display: inline-grid;
  place-items: center;
  min-width: 13px;
  height: 13px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--navy);
}

/* Utility chip on the building slab — same shape as the equipment chip
   so they line up visually. The optional `liveDot` rendered inside is
   the green pulsing indicator for "live" scissor lifts. */
._slabUtilityChip_1qluf_718 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 5px;
  border-radius: var(--r-sm);
  background: var(--color-surface);
  border: 1px solid var(--g200);
  color: var(--navy);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.2;
  position: relative;
}

/* Pulsing green dot — same animation in the slab chip and the popover; the
   shared pulse stills under prefers-reduced-motion. */
._liveDot_1qluf_735 {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--green);
  flex-shrink: 0;
}

/* ---------- Floor-chip hover popover (mirrors trusstor's floor details panel) ----------
   Rendered via portal in document.body, positioned absolutely from the
   computed left/top in the JS. Dark surface for visual separation from
   the building view. Tag list inside is admin-only — gated upstream by
   the `isAdmin` prop, so no role-aware CSS needed here. */

/* Visual rules only — Base UI's `Tooltip.Positioner` handles the layout
   (position, z-index, portal, flipping) and exposes the available
   viewport space as `--available-width` / `--available-height` CSS
   vars, plus `--transform-origin` pointing back at the trigger so a
   `scale()` animation grows out of the chip. We hook into Base UI's
   `[data-starting-style]` / `[data-ending-style]` attributes on the
   popup to drive a fade + scale transition. */

/* Compact dark tooltip used by the side-rail alert + hoist badges.
   Same visual family as `.floorPopover` (navy + white text + lift-fade
   transitions) but narrower and tighter padding because the content is
   text-heavy / chip-heavy rather than the full per-floor breakdown. */
._sideBadgeTooltip_1qluf_762 {
  width: min(280px, var(--available-width, 280px));
  max-height: var(--available-height, 60vh);
  background: var(--navy);
  color: var(--color-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-xs);
  transform-origin: var(--transform-origin);
  transition-property: opacity, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

._sideBadgeTooltipBody_1qluf_778 {
  padding: 10px 12px;
}

._floorPopoverBody_1qluf_782 {
  padding: 14px 16px;
}

._sideBadgeTooltip_1qluf_762[data-starting-style] {
  opacity: 0;
  transform: scale(0.94) translateY(4px);
}

._sideBadgeTooltip_1qluf_762[data-ending-style] {
  opacity: 0;
  transform: scale(0.96);
  transition-duration: 120ms;
}

/* ---- Alert tooltip body ---- */
._alertTooltipList_1qluf_798 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

._alertTooltipItem_1qluf_806 {
  padding: 6px 0;
  border-bottom: 1px solid var(--inverse-bg-light);
  line-height: 1.3;
}

._alertTooltipItem_1qluf_806:last-child {
  border-bottom: none;
}

._alertTooltipItem_1qluf_806[data-critical] {
  color: var(--color-surface);
  font-weight: 600;
}

/* ---- Hoist tooltip body ----
   Mirrors trusstor's `HoistIcon` tooltip layout (`HoistIcon.tsx:62-176`):
     - Header row: area nick on the leading edge; time-spent label +
       value stacked vertically on the trailing edge.
     - Operator row: small location-pin glyph + "Hoist operator" label,
       sandwiched between thin dividers.
     - Crew chips OR centred "no workers found" empty state.
   Uses the existing `--inverse-bg-*` tokens (white-on-navy overlays). */
._hoistTooltipBody_1qluf_829 {
  display: flex;
  flex-direction: column;
}

._hoistTooltipBlock_1qluf_834 {
  display: flex;
  flex-direction: column;
}

._hoistTooltipHeader_1qluf_839 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}

._hoistTooltipAreaNick_1qluf_847 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-surface);
  line-height: 1.2;
}

._hoistTooltipTime_1qluf_854 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

._hoistTooltipTimeLabel_1qluf_862 {
  font-size: var(--fs-xs);
  color: var(--inverse-text-medium);
  font-weight: 400;
}

._hoistTooltipTimeValue_1qluf_868 {
  font-size: var(--fs-xs);
  color: var(--color-surface);
  font-weight: 500;
}

._hoistTooltipOperatorRow_1qluf_874 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--inverse-bg-medium);
  border-bottom: 1px solid var(--inverse-bg-medium);
  color: var(--inverse-text-strong);
  font-size: var(--fs-xs);
}

._hoistTooltipOperatorIcon_1qluf_885 {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;

  /* Defeat the global `reset.css` `max-width: 100%` so the icon stays
     at its declared 18px regardless of any narrow flex-shrunk parent. */
  max-width: none;
}

._hoistTooltipChips_1qluf_896 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 10px;
}

._hoistTooltipEmpty_1qluf_903 {
  margin: 0;
  padding: 12px 0 4px;
  color: var(--inverse-text-soft);
  font-size: var(--fs-xs);
  text-align: center;
}

._hoistTooltipManagerChip_1qluf_911 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-xs);
}

._hoistTooltipManagerAvatar_1qluf_921 {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-circle);
  background: var(--inverse-bg-medium);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-surface);
}

._hoistTooltipManagerName_1qluf_933 {
  font-weight: 500;
}

._hoistTooltipProfChip_1qluf_937 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-xs);
}

._hoistTooltipProfCount_1qluf_947 {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--chip-overlay-md);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

._hoistTooltipProfLabel_1qluf_959 {
  font-weight: 500;
}

._hoistTooltipDivider_1qluf_963 {
  border: 0;
  height: 1px;
  background: var(--inverse-bg-medium);
  margin: 10px 0;
}

/* Portalled to <body>: without this they paint behind fullscreen. On the
   positioner, since Base UI's popup is static and ignores z-index. */
._tooltipPositioner_1qluf_972 {
  z-index: var(--z-popover);
}

._floorPopover_1qluf_759 {
  width: min(380px, var(--available-width, 380px));
  max-height: var(--available-height, 80vh);
  background: var(--navy);
  color: var(--color-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  display: flex;
  flex-direction: column;
  transform-origin: var(--transform-origin);
  transition-property: opacity, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Entering state — Base UI sets data-starting-style on first render of
   the popup. Fade + lift in toward the chip. */
._floorPopover_1qluf_759[data-starting-style] {
  opacity: 0;
  transform: scale(0.94) translateY(4px);
}

/* Exiting state — fade out symmetrically when the tooltip closes. */
._floorPopover_1qluf_759[data-ending-style] {
  opacity: 0;
  transform: scale(0.96);
  transition-duration: 120ms;
}

._floorPopoverTitle_1qluf_1005 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--color-surface);
}

._floorPopoverList_1qluf_1012 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._floorPopoverTrade_1qluf_1021 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._floorPopoverChip_1qluf_1027 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
}

._floorPopoverEquipList_1qluf_1039 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._floorPopoverEquipChip_1qluf_1048 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-lg);
  background: var(--inverse-bg-light);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
}

._floorPopoverEquipIcon_1qluf_1061 {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;

  /* Equipment icons are dark-on-light originally; brighten in the dark
     popover so they don't disappear into the navy surface. */
  filter: invert(1) brightness(1.1);
}

/* Manager strip at the top of the popover — one row per manager with the
   coloured initials avatar + the full name. Matches trusstor's
   ManagerChipsTooltip layout. */
._floorPopoverManagerList_1qluf_1075 {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._floorPopoverManager_1qluf_1075 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--color-surface);
}

._floorPopoverManagerAvatar_1qluf_1092 {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

._floorPopoverManagerName_1qluf_1105 {
  font-weight: 500;
}

._floorPopoverEquipCount_1qluf_1109 {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--inverse-bg-medium);
  font-weight: 700;
}

._floorPopoverTagList_1qluf_1117 {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._floorPopoverTag_1qluf_1117 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 6px 8px;
  background: var(--inverse-bg-faint);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--inverse-text-strong);
}

._floorPopoverTagField_1qluf_1138 {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

._floorPopoverTagLabel_1qluf_1144 {
  color: var(--inverse-text-soft);
  font-weight: 500;
}

._floorPopoverTagId_1qluf_1149 {
  font-family: var(--f-mono);
  letter-spacing: 0.2px;
}

._floorPopoverTagTimestamp_1qluf_1154 {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--inverse-text-medium);
  letter-spacing: 0.1px;
}

/* Per-utility list inside the floor popover — one row per scissor-lift /
   hoist tag, with name and (for live scissor lifts) a "live" pill. */
._floorPopoverUtilityList_1qluf_1163 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._floorPopoverUtility_1qluf_1163 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--inverse-bg-light);
  border-radius: var(--r-sm);
  color: var(--inverse-text-strong);
  font-size: var(--fs-xs);
  font-weight: 500;
}

._floorPopoverUtilityName_1qluf_1184 {
  flex: 1;
}

._liveBadge_1qluf_1188 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--live-badge-bg);
  color: var(--green);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* (Legacy dark-card styles removed — see Special Areas table-row styles above.) */

/* ---- Replay (Site Time Machine) ---- */

/* An amber frame while the card shows a past minute. */
._replaying_1qluf_1207 {
  box-shadow:
    0 0 0 2px var(--amber),
    var(--shadow-card);
}

/* While another replay day loads, the frame on screen stays, dimmed. */
._buildingLoading_1qluf_1214 ._chipOverlay_1qluf_374 {
  opacity: var(--replay-held-opacity);
  filter: grayscale(1);
  pointer-events: none;
}

/* The bar's REPLAY tag, beside the card title. */
._replayFailed_1qluf_1221 {
  margin: 0 16px 8px;
  color: var(--red);
  font-size: var(--fs-xs);
}

/* Fullscreen's narrow special-areas column: no fixed name column, and the info
   column takes only what a row needs. */
._fullscreenColumns_1qluf_1229 ._specialAreasHead_1qluf_118,
._fullscreenColumns_1qluf_1229 ._specialAreaRow_1qluf_138 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 8px;
}

._fullscreenColumns_1qluf_1229 ._specialAreasHead_1qluf_118 > :last-child {
  display: none;
}
/* A building chip's hover card, inside the navy `marker` tooltip popup. */
._card_1bbzl_2 {
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 6px var(--s-1);
}

._header_1bbzl_9 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--inverse-bg-medium);
}

._kindIcon_1bbzl_17 {
  display: inline-flex;
  color: var(--inverse-text-medium);
}

._contractor_1bbzl_22 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--inverse-text-strong);
}

._items_1bbzl_28 {
  list-style: none;
  margin: 0;
  padding: 0;
}

._item_1bbzl_28 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-2) 0;
}

._item_1bbzl_28 + ._item_1bbzl_28 {
  border-top: 1px solid var(--inverse-bg-medium);
}

._itemTitle_1bbzl_45 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--inverse-text-strong);
}

._metaRow_1bbzl_54 {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Each meta after the first sits behind a hairline divider. */
._meta_1bbzl_54 + ._meta_1bbzl_54 {
  padding-left: 10px;
  border-left: 1px solid var(--inverse-bg-medium);
}

._meta_1bbzl_54 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--inverse-text-medium);
}

._overdue_1bbzl_75 {
  color: var(--red);
}
/* Crossed replay events over the building: floor pulses and toasts. `--c` is
   the event's marker colour. */
._layer_z3f4d_3 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

._pulse_z3f4d_9 {
  position: absolute;
  border-radius: var(--r-md);
  animation: _floor-pulse_z3f4d_1 1.6s ease-out 3;
}

@keyframes _floor-pulse_z3f4d_1 {
  from {
    background: color-mix(in srgb, var(--c) 22%, transparent);
    box-shadow: inset 0 0 0 2px var(--c);
  }

  to {
    background: transparent;
    box-shadow: inset 0 0 0 2px transparent;
  }
}

/* Right of the building, vertically centred on its anchor floor; fades out
   just before the controller drops it (4.2 s). */
._toast_z3f4d_29 {
  position: absolute;
  min-width: 220px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--g100);
  border-left: 3px solid var(--c);
  border-radius: var(--r-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover);
  color: var(--g800);
  font-size: var(--fs-xs);
  font-weight: 500;
  transform: translateY(-50%);
  animation:
    _toast-in_z3f4d_1 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3),
    _toast-out_z3f4d_1 0.5s ease-in 3.7s forwards;
}

._toast_z3f4d_29 i {
  float: right;
  margin-left: 10px;
  color: var(--g400);
  font-size: var(--fs-2xs);
  font-style: normal;
}

._toast_z3f4d_29 b {
  display: block;
  color: var(--c);
  font-size: var(--fs-sm);
  font-weight: 600;
}

._toast_z3f4d_29 span {
  color: var(--g600);
  font-weight: 400;
}

@keyframes _toast-in_z3f4d_1 {
  from {
    opacity: 0;
    transform: translate(-8px, -50%);
  }
}

@keyframes _toast-out_z3f4d_1 {
  to {
    opacity: 0;
  }
}

/* No motion: the pulse is not drawn (its job is to catch the eye) and the toast
   just appears, then goes. */
@media (prefers-reduced-motion: reduce) {
  ._pulse_z3f4d_9 {
    animation: none;
  }

  ._toast_z3f4d_29 {
    animation: _toast-out_z3f4d_1 0.01s linear 4.19s forwards;
  }
}
/* ---------- Shared building-silhouette skeleton ----------
   Generic rectangle skyscraper outline used by:
     - MonitorPage (snapshot-load shimmer + BuildingViewSvg's SVG-fetch
       loading state) — defaults to fixed 30px-per-row tracking.
     - DashboardPage (snapshot-load shimmer + BuildingViewSvg's SVG-fetch
       loading state on the locked-height Visual Site Overview card)
       — opts in to `flexFill` so the tower scales to the card body.

   Visual treatment is identical in both modes; only the row-sizing
   track differs. The two `*FlexFill` modifier classes layer on top of
   the defaults via React's `${default} ${modifier}` className pattern
   (see `BuildingSkeleton.tsx`). */

._tower_1vakk_14 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}

/* Opts into the Dashboard-style sizing: the tower renders at the
   same natural aspect ratio as the loaded BuildingViewSvg image
   (Trusstor building SVGs are roughly square in their viewBox), so
   when the skeleton swaps for the live SVG there's no visible size
   or position jump. `aspect-ratio: 1 / 1` paired with `width: 100%`
   from the base `.tower` yields a square at body-width × body-width.
   `max-height: 100%` keeps it from overflowing on short cards. */
._towerFlexFill_1vakk_29 {
  aspect-ratio: 1 / 1;
  max-height: 100%;
  flex-shrink: 0;
}

._floorStack_1vakk_35 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

._floorStackFlexFill_1vakk_41 {
  flex: 1 1 auto;
  min-height: 0;
}

/* Floor row — default fixed 30px (Monitor). Each row is a flex strip
   carrying [alert-badge gutter | floor-number | floor-band], centred
   horizontally so the band lands roughly in the middle of the card. */
._floorRow_1vakk_49 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 30px;
  position: relative;
}

/* flex-fill variant: rows distribute across whatever parent height is
   available, with a low min-height so 20 rows never grow past their
   container even on small screens. */
._floorRowFlexFill_1vakk_61 {
  flex: 1 1 0;
  min-height: 14px;
  height: auto;
}

/* Per-row shimmer cascade — pulses top → bottom so the eye reads
   "the tower is being constructed floor by floor". */
._floorRow_1vakk_49:nth-child(1)  { --wave: 0.00s; }
._floorRow_1vakk_49:nth-child(2)  { --wave: 0.04s; }
._floorRow_1vakk_49:nth-child(3)  { --wave: 0.08s; }
._floorRow_1vakk_49:nth-child(4)  { --wave: 0.12s; }
._floorRow_1vakk_49:nth-child(5)  { --wave: 0.16s; }
._floorRow_1vakk_49:nth-child(6)  { --wave: 0.20s; }
._floorRow_1vakk_49:nth-child(7)  { --wave: 0.24s; }
._floorRow_1vakk_49:nth-child(8)  { --wave: 0.28s; }
._floorRow_1vakk_49:nth-child(9)  { --wave: 0.32s; }
._floorRow_1vakk_49:nth-child(10) { --wave: 0.36s; }
._floorRow_1vakk_49:nth-child(11) { --wave: 0.40s; }
._floorRow_1vakk_49:nth-child(12) { --wave: 0.44s; }
._floorRow_1vakk_49:nth-child(13) { --wave: 0.48s; }
._floorRow_1vakk_49:nth-child(14) { --wave: 0.52s; }
._floorRow_1vakk_49:nth-child(15) { --wave: 0.56s; }
._floorRow_1vakk_49:nth-child(16) { --wave: 0.60s; }
._floorRow_1vakk_49:nth-child(17) { --wave: 0.64s; }
._floorRow_1vakk_49:nth-child(18) { --wave: 0.68s; }
._floorRow_1vakk_49:nth-child(19) { --wave: 0.72s; }
._floorRow_1vakk_49:nth-child(20) { --wave: 0.76s; }

/* Floor-number placeholder pill in the inner-left gutter. */
._floorNumber_1vakk_91 {
  width: 22px;
  height: 8px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  opacity: 0.55;
}

/* Constant-width slim rectangle. Stacked vertically, the bands form
   one tall narrow tower: side borders = walls, bottom borders =
   floor dividers. Top/bottom rows carry the building's roof / ground
   edges via the first/last-child overrides below. */
._floorBand_1vakk_103 {
  position: relative;
  height: 100%;
  width: 22%;
  flex: 0 0 22%;
  background: var(--g50);
  border-left: 1px solid var(--g300);
  border-right: 1px solid var(--g300);
  border-bottom: 1px solid var(--g100);
  display: flex;
  align-items: center;
  overflow: hidden;
}

._floorRow_1vakk_49:first-child ._floorBand_1vakk_103 { border-top:    1px solid var(--g300); }
._floorRow_1vakk_49:last-child  ._floorBand_1vakk_103 { border-bottom: 1px solid var(--g300); }

/* Chip strip overlaid on the band — left-aligned + nowrap so the
   chips read as work happening on a specific floor. */
._floorChipRow_1vakk_122 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0 8px;
  min-width: 0;
  width: 100%;
  justify-content: flex-start;
}

._floorChip_1vakk_122 {
  height: 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

/* Outer-left gutter that hosts the alert badge — matches the
   FloorAlertBadge anchor in the live BuildingViewSvg, which sits on
   the left side of the building between the floor-number column and
   the building wall. */
._floorBadgeCol_1vakk_143 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 100%;
}

/* Three subtle tones so the slab chips don't all read as one solid
   block — hints that real chips will arrive in different brand
   colours when the live data lands. */
._tone_a_1vakk_154 {
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g200) 45%,
    var(--g100) 90%
  );
  background-size: 220% 100%;
}

._tone_b_1vakk_164 {
  background: linear-gradient(
    90deg,
    var(--g200) 0%,
    var(--g300) 45%,
    var(--g200) 90%
  );
  background-size: 220% 100%;
  opacity: 0.85;
}

._tone_c_1vakk_175 {
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g300) 45%,
    var(--g100) 90%
  );
  background-size: 220% 100%;
  opacity: 0.75;
}

/* Mid-tower alert badge — sits in the left gutter of one floor, just
   outside the building wall and to the left of the floor number. */
._floorBadge_1vakk_143 {
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--g300);
  animation: none;
  opacity: 0.85;
}

/* ---------- Shimmer atom -----------------------------------------
   Identical to the gradient + keyframe used by MonitorSkeleton and
   DashboardSkeleton — duplicated locally so this component is
   self-contained and consumers don't need to wire the animation. */
._shimmer_1vakk_201 {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g200) 45%,
    var(--g100) 90%
  );
  background-size: 220% 100%;
  border-radius: var(--r-lg);
  animation: _dorca-building-skel-shimmer_1vakk_1 1.6s ease-in-out infinite;
  animation-delay: var(--wave, 0s);
  flex-shrink: 0;
}

@keyframes _dorca-building-skel-shimmer_1vakk_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* FloorSvg — inline-injected SVG primitive. The container is laid out by
   the caller; the SVG fills it. */
._svg_11jxr_3 {
  width: 100%;
  height: 100%;
  display: block;
}

._svg_11jxr_3 svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Highlight semantics: a matched `area<id>` node receives
   `data-highlight="true"` (set imperatively in FloorSvg.tsx). The fill
   tint mirrors `--floor-selected-fill` — the same translucent blue
   trusstor's `paintSelectedAreas` paints. */
._svg_11jxr_3 [data-highlight="true"] {
  fill: var(--floor-selected-fill);
  fill-opacity: 0.4;
  transition: fill-opacity 120ms ease;
}

/* Loading + error placeholders share the SVG's container box so layout
   doesn't jump between states. */
._state_11jxr_27 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
/* Slide-in drawer — overlays the LeftRail at the same width and z-stack so
   it visually replaces the rail while open. Sidebar (--sidebar-w) sits to
   its left; the drawer starts where LeftRail starts. Width matches the
   LeftRail so the rest of the page geometry is unchanged. */
._drawer_s7dg9_5 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--monitor-leftrail-w);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-drawer);
  z-index: var(--z-floor-overlay);
  animation: _slideInLeft_s7dg9_1 180ms ease-out;
}

@keyframes _slideInLeft_s7dg9_1 {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

._header_s7dg9_24 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--g100);
  flex-shrink: 0;
}

._titleStack_s7dg9_33 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._label_s7dg9_40 {
  font-size: var(--fs-xs);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

._title_s7dg9_33 {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.1;
}

._headerActions_s7dg9_55 {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

._iconBtn_s7dg9_61 {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  border: 1px solid var(--g100);
  background: var(--color-surface);
  color: var(--g500);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

._iconBtn_s7dg9_61:hover {
  background: var(--g50);
  color: var(--navy);
}

._body_s7dg9_79 {
  flex: 1;
  min-height: 0;
}

._bodyViewport_s7dg9_84 {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

/* SVG framing — the floor plan sits in its own bordered frame so the
   skeleton and "no plan" placeholders share the same dimensions. */
._svgFrame_s7dg9_94 {
  width: 100%;
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Stack: the SVG itself, the area click/hover overlay, and the worker chip
   layer all share the same coordinate system. `position: relative` here
   anchors the absolutely-positioned overlays underneath. */
._svgStack_s7dg9_108 {
  position: relative;
  width: 100%;
}

/* Fixed aspect-ratio so floor switches don't cause a height jump — the
   skeleton (.skeletonOutline below) and the empty placeholder share the
   same 4:3 box. The SVG fills it via width/height: 100% and centres its
   own content via `preserveAspectRatio="xMidYMid meet"`. */
._svgWrap_s7dg9_117 {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

._svgWrap_s7dg9_117 > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Per-area highlight is applied via a `\3c style>` element injected into
   `document.head` by FloorDrawer.tsx — see the `dorca-floor-area-highlight`
   stylesheet built in the area-highlight effect. We use CSS injection
   (rather than inline-style DOM mutation) because the SVG was getting
   re-injected by React on rerender, wiping any element-level mutations.
   Stylesheet rules persist across SVG re-mounts and use `!important` to
   defeat any presentation attributes / inline styles inside the SVG. */

._workersOverlay_s7dg9_139 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Stack of per-trade chips at one workers anchor — translates -50%/-50%
   so the stack centres on the SVG anchor's centre regardless of how
   many chips are inside it. Each chip is colored inline by the trade's
   `backgroundColor`, so we don't bake a default fill here.

   When an area holds many workers the single column used to grow past the
   area's bottom edge. `flex-wrap` + a capped `max-height` make the chips wrap
   into a second (then third) column once the column runs out of vertical room,
   so the stack stays compact and centred on the anchor instead of spilling
   over the area boundary. `align-content: center` keeps the wrapped columns
   centred on the anchor too. */
._workersChipStack_s7dg9_156 {
  position: absolute;

  /* Centre the (possibly wrapped) stack on the SVG anchor, then scale it to
     fit the area outline. `--chip-scale` is set per-area in FloorPlanView so a
     crowded area shrinks its chips instead of spilling over the boundary; the
     scale is around the centre, so the block stays centred on the anchor. */
  transform: translate(-50%, -50%) scale(var(--chip-scale, 1));
  transform-origin: center;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  align-content: center;
  gap: 3px;

  /* Caps the column at roughly three chips before it wraps into the next
     column, keeping the block compact; the per-area `--chip-scale` then shrinks
     that wrapped block to fit inside the area outline. */
  max-height: 84px;
  pointer-events: none;
}

._workersChip_s7dg9_156 {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-md);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: var(--shadow-chip);

  /* `pointer-events` is inherited — the parent `.workersChipStack` sets
     `none` so clicks fall through to the SVG area underneath, but we
     re-enable it on the chip so the native `title=` tooltip fires on
     hover. */
  pointer-events: auto;
}

/* Equipment chip — different look from worker chips so the kind is
   distinguishable at a glance. White background with the per-type icon
   and a small count; mirrors trusstor's floor-plan equipment badge. */
._equipmentChip_s7dg9_201 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px 3px 5px;
  border-radius: var(--r-md);
  background: var(--color-surface);
  border: 1px solid var(--g200);
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: var(--shadow-chip);

  /* Re-enable hover over the `.workersChipStack` (pointer-events: none) so the
     tooltip fires — same as `.workersChip`. */
  pointer-events: auto;
}

._equipmentChipIcon_s7dg9_220 {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Manager pin / Personnel-list avatar — initials disk in the manager's
   brand colour. Used standalone on the floor plan (no name, to keep the
   plan uncluttered) and as the row icon in the Personnel tab. */
._managerAvatar_s7dg9_230 {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  color: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  flex-shrink: 0;

  /* Re-enable hover over the `.workersChipStack` (pointer-events: none) so the
     tooltip fires — same as `.workersChip`. */
  pointer-events: auto;
}

._equipmentChipCount_s7dg9_247 {
  line-height: 1;
}

/* Utility chip — same visual family as the equipment chip (white pill
   with navy icon + count) so the in-area chip stack reads consistently.
   When at least one scissor lift in this area is "live" we render an
   adjacent green pulsing dot. */
._utilityChip_s7dg9_255 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px 3px 5px;
  border-radius: var(--r-md);
  background: var(--color-surface);
  border: 1px solid var(--g200);
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: var(--shadow-chip);
  position: relative;

  /* Re-enable hover over the `.workersChipStack` (pointer-events: none) so the
     tooltip fires — same as `.workersChip`. */
  pointer-events: auto;
}

._liveDot_s7dg9_275 {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--green);
  box-shadow: 0 0 0 0 var(--live-pulse-strong);
  animation: _dorca-live-pulse_s7dg9_1 1.4s ease-out infinite;
  flex-shrink: 0;
}

@keyframes _dorca-live-pulse_s7dg9_1 {
  0% { box-shadow: 0 0 0 0 var(--live-pulse-strong); }
  70% { box-shadow: 0 0 0 6px var(--live-pulse-soft); }
  100% { box-shadow: 0 0 0 0 var(--live-pulse-soft); }
}

/* ---------- Fullscreen modal (rendered via React portal to document.body) ---------- */

._modalBackdrop_s7dg9_293 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  display: grid;
  place-items: center;
  z-index: var(--z-popover);
  padding: 32px;
  animation: _modalFadeIn_s7dg9_1 160ms ease-out;
}

@keyframes _modalFadeIn_s7dg9_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

._modalCard_s7dg9_309 {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  width: min(680px, 80vw);
  max-height: 80vh;
  box-shadow: var(--shadow-modal);
  animation: _modalCardIn_s7dg9_1 200ms ease-out;
}

._modalCardViewport_s7dg9_319 {
  padding: 24px 32px;
}

@keyframes _modalCardIn_s7dg9_1 {
  from { transform: translateY(8px); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

._modalClose_s7dg9_328 {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  border: 1px solid var(--g100);
  background: var(--color-surface);
  color: var(--g500);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

._modalClose_s7dg9_328:hover {
  background: var(--g50);
  color: var(--navy);
}

/* ---------- Skeleton + empty ---------- */

._skeleton_s7dg9_114 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._skeletonOutline_s7dg9_114 {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g50) 50%,
    var(--g100) 100%
  );
  background-size: 200% 100%;
  animation: _floorDrawerShimmer_s7dg9_1 1.4s infinite ease-in-out;
}

@keyframes _floorDrawerShimmer_s7dg9_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* "No floor plan available" — flat tile, no animation. Same 4:3 box as
   the skeleton and the rendered SVG so layout doesn't jump between
   states. */
._empty_s7dg9_380 {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background: var(--g50);
  border: 1px dashed var(--g200);
  display: grid;
  place-items: center;
  color: var(--g500);
  font-size: var(--fs-sm);
  padding: 24px;
  text-align: center;
}

/* ---------- Tab bar ---------- */

._tabBar_s7dg9_396 {
  display: flex;
  border-top: 1px solid var(--g100);
  border-bottom: 1px solid var(--g100);
  flex-shrink: 0;
}

._tab_s7dg9_396 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--g500);
  font-family: var(--f-body);
  transition: background 120ms ease, color 120ms ease;
  position: relative;
}

._tab_s7dg9_396 + ._tab_s7dg9_396::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--g100);
}

._tab_s7dg9_396:hover {
  background: var(--g50);
}

._tabActive_s7dg9_435 {
  background: var(--g50);
  border-bottom-color: var(--navy);
  color: var(--navy);
}

._tabIconRow_s7dg9_441 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._tabIcon_s7dg9_441 {
  display: inline-grid;
  place-items: center;
  color: inherit;
}

._tabCount_s7dg9_453 {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1;
}

._tabLabel_s7dg9_459 {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ---------- Tab panel + rows ---------- */

._tabPanel_s7dg9_468 {
  flex: 1;
  min-height: 0;
}

._list_s7dg9_473 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Personnel tab grouped into Managers / Professions / Equipment sections. */
._sections_s7dg9_483 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Collapsible section header — chevron + uppercase label, full-width click
   target. Mirrors the cert-group header in SafetyComplianceCard. */
._sectionHeader_s7dg9_491 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
}

._sectionTitle_s7dg9_504 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

._chevron_s7dg9_512 {
  display: inline-flex;
  line-height: 0;
  color: var(--g500);
  transition: transform 0.15s ease;
}

._chevronOpen_s7dg9_519 {
  transform: rotate(90deg);
}

._row_s7dg9_523 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-md);
}

/* An activity's or issue's row is a button: the whole row opens its drawer. */
._rowButton_s7dg9_535 {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

._rowButton_s7dg9_535:hover {
  border-color: var(--g300);
}

._rowButton_s7dg9_535:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._rowStripe_s7dg9_552 {
  width: 3px;
  align-self: stretch;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

._rowMain_s7dg9_559 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._rowTitle_s7dg9_567 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._rowSub_s7dg9_576 {
  font-size: var(--fs-xs);
  color: var(--g500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._rowMeta_s7dg9_584 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  flex-shrink: 0;
}

._severityChip_s7dg9_591 {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-circle);
  font-size: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
}

._severityCritical_s7dg9_602 {
  background: var(--color-warn-bg);
  color: var(--red);
}

._emptyMsg_s7dg9_607 {
  padding: 24px 8px;
  text-align: center;
  color: var(--g500);
  font-size: var(--fs-sm);
}
/* The look every edge handle shares; the call site's class places, shapes and
   animates it. `html button:where(…)` weighs two type selectors: more than the
   global `button` reset, less than any class, so the call site always wins
   whatever order the stylesheets load in (as KebabButton). An open handle
   (`data-open`) rides its panel as a close affordance and doesn't react to hover. */
html button:where(._handle_w7xa5_6) {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ops-card-border);
  background: var(--color-surface);
  color: var(--g400);
  box-shadow: var(--shadow-calendar-handle);
  cursor: pointer;
}

html button:where(._handle_w7xa5_6:hover:not([data-open='true'])) {
  color: var(--g500);
  box-shadow: var(--shadow-calendar-handle-hover);
}

html button:where(._handle_w7xa5_6:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

._icon_w7xa5_28 {
  display: inline-flex;
  flex: none;
  transition: transform 0.38s var(--ease-spring);
}

html button:where(._handle_w7xa5_6:hover:not([data-open='true'])) ._icon_w7xa5_28 {
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  ._icon_w7xa5_28 {
    transition: none;
  }
}
._glyph_1b947_1 {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
}
/* The "live" ring pulse, shared: `composes` it onto a small round dot. Green by
   default; set `--pulse-strong` / `--pulse-soft` on the dot for another colour. */._pulse_bblje_3 {
  box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong));
  animation: _dorca-live-pulse_bblje_1 1.4s ease-out infinite;
}@keyframes _dorca-live-pulse_bblje_1 {
  0% { box-shadow: 0 0 0 0 var(--pulse-strong, var(--live-pulse-strong)); }
  70% { box-shadow: 0 0 0 6px var(--pulse-soft, var(--live-pulse-soft)); }
  100% { box-shadow: 0 0 0 0 var(--pulse-soft, var(--live-pulse-soft)); }
}@media (prefers-reduced-motion: reduce) {
  ._pulse_bblje_3 {
    animation: none;
  }
}/* The mode tag; the replay bar's own REPLAY tag is the same one. */._modeTag_1tkha_2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.6px;
}._modeLive_1tkha_13 {
  background: var(--g100);
  color: var(--navy);
}._modeDot_1tkha_19 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background: var(--green);
}._modeReplay_1tkha_27 {
  background: var(--amber);
  color: var(--navy);
}/* Row container for the rail + main-view + drawer overlay. The drawer is
   absolutely positioned (`top: 0; bottom: 0`) and resolves against this
   element, keeping it scoped below the header. */._body_1tkha_36 {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  color: var(--navy);
  font-family: var(--f-body);
  letter-spacing: 0.25px;
}._leftRail_1tkha_46 {
  flex: 0 0 var(--monitor-leftrail-w);
  min-width: var(--monitor-leftrail-w);
  max-width: var(--monitor-leftrail-w);
  background: var(--g50);
  display: flex;
  flex-direction: column;
  z-index: var(--z-raised-2);
}/* Fullscreen covers the sidebar and top bar. The rail becomes a panel with a
   real edge, for its collapse handle to grow out of. */._fullscreen_1tkha_58 {
  position: fixed;
  inset: 0;
  z-index: var(--z-map-fullscreen);
  display: flex;
  flex-direction: column;
  background: var(--g50);
}/* The fullscreen header: a slim bar holding the controls. */._header_1tkha_68 {
  flex: 0 0 auto;
}._fullscreen_1tkha_58 ._header_1tkha_68 {
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ops-card-border);
  background: var(--color-surface);
}._fullscreenControls_1tkha_79 {
  display: flex;
  align-items: center;
  gap: 12px;
}._fullscreen_1tkha_58 ._leftRail_1tkha_46 {
  border-right: 1px solid var(--ops-card-border);
  transition: margin-left 0.5s var(--ease-out-expo);
}._fullscreen_1tkha_58 ._leftRail_1tkha_46[data-collapsed='true'] {
  margin-left: calc(-1 * var(--monitor-leftrail-w));
  border-right: 0;
  visibility: hidden;
  transition:
    margin-left 0.5s var(--ease-out-expo),
    visibility 0s 0.5s;
}@media (prefers-reduced-motion: reduce) {
  ._fullscreen_1tkha_58 ._leftRail_1tkha_46,
  ._fullscreen_1tkha_58 ._leftRail_1tkha_46[data-collapsed='true'] {
    transition: none;
  }
}._content_1tkha_106 {
  position: relative;
  flex: 1 1 auto;
}._mainView_1tkha_111 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}/* Default LeftRail view — a single scrolling stack of cards on the gray
   field. Each card (LiveSummary, the Workforce sections, SafetyAlerts)
   provides its own white shell; the stack just handles inset + spacing. */._cardStack_1tkha_121 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}/* The card stack stays mounted (so "back" is instant); when the safety
   view is shown it is display:none. The attribute selector beats
   `.cardStack`'s own `display: flex`. */._cardStack_1tkha_121[hidden] {
  display: none;
}._safetyView_1tkha_135 {
  display: flex;
  flex-direction: column;
}/* "Back" control above the full safety view (activeTab === 'safety'). */._backRow_1tkha_141 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--g100);
  cursor: pointer;
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}._backRow_1tkha_141:hover {
  background: var(--g50);
  color: var(--navy);
}/* Where the bar floats, in and out of fullscreen: over the whole screen, bottom centre. */._dock_1xa3p_2 {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: var(--z-floating-dock);
  width: min(1040px, 100vw - 32px);
  transform: translateX(-50%);
}/* Replay time bar: a white card floating at the bottom of the screen. */._bar_1xa3p_12 {
  margin: 0 16px 14px;
  padding: 10px 16px 8px;
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover), var(--shadow-card);
  color: var(--navy);
  user-select: none;
  animation: _bar-rise_1xa3p_1 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}@media (prefers-reduced-motion: reduce) {
  ._bar_1xa3p_12 {
    animation: none;
  }
}@keyframes _bar-rise_1xa3p_1 {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}._row_1xa3p_37 {
  display: flex;
  align-items: center;
  gap: 12px;
}._play_1xa3p_43 {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-circle);
  background: hsl(var(--primary));
  box-shadow: var(--shadow-pin);
  color: var(--color-surface);
  cursor: pointer;
  transition: filter 0.12s ease;
}._play_1xa3p_43:hover:not(:disabled) {
  filter: brightness(1.1);
}._play_1xa3p_43:disabled {
  opacity: 0.5;
  cursor: default;
}._clock_1xa3p_67 {
  min-width: 56px;
  font-size: var(--fs-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}._date_1xa3p_74 {
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-xs);
  line-height: 1.25;
  color: var(--g500);
}._date_1xa3p_74 b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._tag_1xa3p_89 {
}/* Clips to an ellipsis; the padding keeps the key boxes' borders, which
   reach past the line, inside the clip. */._hint_1xa3p_95 {
  overflow: hidden;
  min-width: 0;
  margin-left: 4px;
  padding-block: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-2xs);
  color: var(--g400);
}._hint_1xa3p_95 kbd {
  padding: 0 4px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--g50);
  color: var(--g600);
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: 500;
}._spacer_1xa3p_117 {
  flex: 1;
}/* Under the track: the lanes' day counts and the badges / lanes switch. */._footer_1xa3p_122 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 12px 0;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g400);
}._legendItem_1xa3p_132 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}._legendDot_1xa3p_139 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
}._viewLink_1xa3p_145 {
  padding-block: 3px;
  border-radius: var(--r-pill);
  background: var(--g200);
  background-clip: content-box;
  color: transparent;
  line-height: 8px;
}._skeleton_1xa3p_154 ._legendDot_1xa3p_139 {
  background: var(--g200);
}._viewLink_1xa3p_145 {
  padding: 0;
  border: 0;
  background: none;
  color: hsl(var(--primary));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}._viewLink_1xa3p_145:hover {
  text-decoration: underline;
}/* While the next day loads: the day that was on screen, as a still picture. */._held_1xa3p_173 {
  opacity: var(--replay-held-opacity);
  filter: grayscale(1);
}/* With no day to hold: a sample day drawn in grey, pulsing (DayTrack's skeleton
   look). The ink and the text pill are set here, once, for this module's legend
   and for ReplayTrack's rules; text keeps its width under the pill. */._skeleton_1xa3p_154 {
  --skeleton-ink: var(--g200);
  --skeleton-pill: linear-gradient(var(--skeleton-ink) 0 0) center / 100% 8px no-repeat;

  animation: _skeleton-pulse_1xa3p_1 1.4s ease-in-out infinite;
}._skeleton_1xa3p_154 ._legendItem_1xa3p_132,
._skeleton_1xa3p_154 ._viewLink_1xa3p_145 {
  border-radius: var(--r-pill);
  background: var(--skeleton-pill);
  color: transparent;
}._skeleton_1xa3p_154 ._legendDot_1xa3p_139 {
  visibility: hidden;
}@keyframes _skeleton-pulse_1xa3p_1 {
  50% {
    opacity: 0.55;
  }
}@media (prefers-reduced-motion: reduce) {
  ._skeleton_1xa3p_154 {
    animation: none;
  }
}/* The loading line along the bar's bottom edge, inside its rounded corners. */._loadLine_1xa3p_212 {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  overflow: hidden;
  height: 2px;
}._loadLine_1xa3p_212::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  border-radius: var(--r-pill);
  background: hsl(var(--primary));
  animation: _load-slide_1xa3p_1 1.1s ease-in-out infinite;
}@keyframes _load-slide_1xa3p_1 {
  to {
    left: 100%;
  }
}@media (prefers-reduced-motion: reduce) {
  ._loadLine_1xa3p_212::after {
    left: 0;
    width: 100%;
    opacity: 0.4;
    animation: none;
  }
}

._main_4ey4m_1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 14px 16px;
}

._center_4ey4m_10 {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

._stage_4ey4m_16 {
  flex: 1;
  min-height: 0;
}

._stageViewport_4ey4m_21 {
  display: flex;
  justify-content: safe center;
  align-items: flex-start;
  height: 100%;
}

._stageViewport_4ey4m_21[data-pan='pannable'] {
  cursor: grab;
}

._stageViewport_4ey4m_21[data-pan='panning'] {
  cursor: grabbing;
  user-select: none;
}

._zoom_4ey4m_37 {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: var(--z-raised-4);
  display: flex;
  gap: 10px;
}

._playSlot_4ey4m_46 {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: var(--z-raised-4);
}

._areas_4ey4m_53 {
  min-height: 0;
}

/* It floats over all three columns, not inside the building's. */
._barDock_4ey4m_58 {
  transition: transform 0.5s var(--ease-out-expo);
}

._barDock_4ey4m_58[data-collapsed='true'] {
  transform: translate(-50%, 100%);
}

._barInner_4ey4m_67 {
  transition: visibility 0s;
}

._barDock_4ey4m_58[data-collapsed='true'] ._barInner_4ey4m_67 {
  visibility: hidden;
  transition: visibility 0s 0.5s;
}

/* The half circles (ui/EdgeHandle) that collapse fullscreen's panels, riding
   each panel's edge. `left`: the rail's handle moves on the panel's own timing. */
._edgeHandle_4ey4m_78 {
  position: absolute;
  z-index: var(--z-raised-4);
  justify-content: center;
  transition:
    left 0.5s var(--ease-out-expo),
    width 0.38s var(--ease-spring),
    height 0.38s var(--ease-spring),
    margin 0.38s var(--ease-spring),
    color 0.2s ease,
    box-shadow 0.25s ease;
}

/* The rail's: the panel's own fill, so it reads as part of the panel. */
._railHandle_4ey4m_92 {
  top: 50%;
  left: calc(var(--monitor-leftrail-w) - 1px);
  width: 26px;
  height: 68px;
  margin-top: -34px;
  border-left: 0;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--g50);
}

._railHandle_4ey4m_92[aria-expanded='false'] {
  left: 0;
}

._railHandle_4ey4m_92:hover {
  width: 38px;
  height: 92px;
  margin-top: -46px;
}

._barHandle_4ey4m_114 {
  bottom: calc(100% - 1px);
  left: 50%;
  width: 68px;
  height: 24px;
  margin-left: -34px;
  border-bottom: 0;
  border-radius: var(--r-pill) var(--r-pill) 0 0;
}

._barHandle_4ey4m_114:hover {
  width: 92px;
  height: 34px;
  margin-left: -46px;
}

@media (prefers-reduced-motion: reduce) {
  ._edgeHandle_4ey4m_78,
  ._barDock_4ey4m_58,
  ._barInner_4ey4m_67,
  ._barDock_4ey4m_58[data-collapsed='true'] ._barInner_4ey4m_67 {
    transition: none;
  }
}
/* ──────────────────────────────────────────────────────────────────────────
   Monitor page skeleton — mirrors the real layout so the swap from
   skeleton → live content doesn't reflow the page. Three pieces of
   choreography:
     1. A single shared shimmer keyframe drives every block, so the page
        breathes in unison instead of fragments scintillating independently.
     2. Wave delays per row (`--wave`) cascade the shimmer left-to-right
        and top-to-bottom — the eye reads it as "content is arriving".
     3. Block widths are deliberately uneven — uniform skeletons read as
        generic placeholders, jagged ones read as real content loading.
   ────────────────────────────────────────────────────────────────────── */

._skeleton_1pbbp_13 {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  background: var(--g50);
  color: var(--navy);
  font-family: var(--f-body);
}

/* ---------- Shared shimmer atom ------------------------------------------ */
._shimmer_1pbbp_25 {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g200) 45%,
    var(--g100) 90%
  );
  background-size: 220% 100%;
  border-radius: var(--r-lg);
  animation: _dorca-skel-shimmer_1pbbp_1 1.6s ease-in-out infinite;

  /* Each row sets `--wave` (in seconds) for a staggered cascade. */
  animation-delay: var(--wave, 0s);
  flex-shrink: 0;
}

@keyframes _dorca-skel-shimmer_1pbbp_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Left rail — card stack -------------------------------------- */
._leftRail_1pbbp_49 {
  flex: 0 0 var(--monitor-leftrail-w);
  min-width: var(--monitor-leftrail-w);
  max-width: var(--monitor-leftrail-w);
  background: var(--g50);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  z-index: var(--z-raised-2);
  overflow: hidden;
}

/* White card shell — mirrors the real `.section` card so the loaded cards
   drop straight in without a reflow. */
._card_1pbbp_64 {
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
}

/* Per-card shimmer wave cascading top -> bottom (inherited by each card's
   shimmer blocks via the `--wave` custom property). */
._card_1pbbp_64:nth-child(1) { --wave: 0s; }
._card_1pbbp_64:nth-child(2) { --wave: 0.08s; }
._card_1pbbp_64:nth-child(3) { --wave: 0.16s; }
._card_1pbbp_64:nth-child(4) { --wave: 0.24s; }
._card_1pbbp_64:nth-child(5) { --wave: 0.32s; }

._cardHeader_1pbbp_79 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
}

._headerIcon_1pbbp_86 {
  width: 16px;
  height: 16px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

._headerTitle_1pbbp_93 {
  width: 104px;
  height: 13px;
  border-radius: var(--r-md);
}

._headerExtra_1pbbp_99 {
  width: 34px;
  height: 12px;
  border-radius: var(--r-md);
  margin-left: auto;
  opacity: 0.7;
}

/* ---------- Live Summary card — 2x2 stat grid --------------------------- */
._summaryGrid_1pbbp_108 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 16px;
}

._summaryTile_1pbbp_115 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 10px;
  background: var(--g50);
  border-radius: var(--r-xl);
}

._tileValue_1pbbp_125 {
  width: 42px;
  height: 22px;
  border-radius: var(--r-md);
}

._tileLabel_1pbbp_131 {
  width: 72px;
  height: 9px;
  border-radius: var(--r-md);
  opacity: 0.7;
}

/* ---------- Filter + Safety card bodies --------------------------------- */
._cardBody_1pbbp_139 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px 14px;
}

._row_1pbbp_146 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}

._checkbox_1pbbp_153 {
  width: 16px;
  height: 16px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

/* Trade chip pill (rounded, full-height, brand-coloured in the real UI). */
._chipPill_1pbbp_161 {
  height: 22px;
  border-radius: var(--r-pill);
  flex: 0 1 auto;
}

._avatar_1pbbp_167 {
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

._iconBox_1pbbp_174 {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

._rowText_1pbbp_181 {
  height: 12px;
  border-radius: var(--r-md);
  flex: 0 1 auto;
}

._rowMeta_1pbbp_187 {
  height: 10px;
  border-radius: var(--r-md);
  margin-left: auto;
  opacity: 0.6;
}

._rowCount_1pbbp_194 {
  width: 22px;
  height: 13px;
  border-radius: var(--r-md);
  margin-left: auto;
}

/* Two-line safety-alert row — title line above, meta line below. */
._safetyRow_1pbbp_202 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._safetyLine1_1pbbp_208 {
  height: 12px;
  border-radius: var(--r-md);
}

._safetyLine2_1pbbp_213 {
  height: 9px;
  border-radius: var(--r-md);
  opacity: 0.6;
}

/* ---------- Main view ----------------------------------------------------
   Matches the loaded `MainView` (`mainView.module.css`): gray field, the
   white surface is provided by each card below. Padding mirrors the
   loaded `.body` so the swap doesn't reflow vertically. */
._mainView_1pbbp_223 {
  /* Mirror of `mainView.module.css`'s declaration on the same selector —
     descendants of either `.mainView` inherit the same value, so the
     building-view and Special-Areas cards stay width-locked across the
     skeleton → loaded swap. Keep these two declarations in sync. */
  --main-section-max-width: 1400px;

  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--g50);
}

._mainBody_1pbbp_237 {
  flex: 1;
  min-height: 0;
}

._mainBodyViewport_1pbbp_242 {
  padding: 14px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ---------- Building card --------------------------------------------------
   Same chrome as the loaded `.card` in mainView.module.css — keeps the card
   shell stable across the skeleton → live swap. The header row carries the
   shimmer title + legend pills. */
._buildingCard_1pbbp_254 {
  width: 100%;
  max-width: var(--main-section-max-width);
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

._cardHeaderRow_1pbbp_265 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--g100);
}

._legend_1pbbp_274 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._legendChip_1pbbp_280 {
  width: 70px;
  height: 12px;
  border-radius: var(--r-md);
  opacity: 0.7;
}

/* ---------- Building silhouette -----------------------------------------
   Sits inside `.buildingCard`; matches the loaded `.buildingWrap` padding
   (14px 20px 18px) so the tower lands at the same vertical offset. */
._buildingWrap_1pbbp_288 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 18px;
}

/* Building tower styles moved to `@components/BuildingSkeleton/`
   (shared between MonitorSkeleton and DashboardSkeleton). */

/* ---------- Special Areas card -----------------------------------------
   Same chrome as the loaded `.specialAreas` in mainView.module.css —
   the card outline + shadow stay stable across the skeleton → live swap;
   only the title bar, column headers, and row contents shimmer. */
._specialAreas_1pbbp_303 {
  width: 100%;
  max-width: var(--main-section-max-width);
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  padding: 16px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._specialAreasTitle_1pbbp_319 {
  width: 140px;
  height: 14px;
  border-radius: var(--r-md);

  /* Horizontal padding-from-card matches the loaded title (20px); inset
     accounts for the card's own 8px horizontal padding. */
  margin: 0 0 6px 12px;
}

._specialAreasHead_1pbbp_329 {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  gap: 16px;
  padding: 8px 20px 6px;
}

._headCell_1pbbp_336 {
  height: 12px;
  border-radius: var(--r-md);
  opacity: 0.6;
}

._areaRow_1pbbp_342 {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-2xl);
}

/* Cascade the four area rows. The first row is `nth-child(3)` because
   the title and head row precede them in the parent. */
._areaRow_1pbbp_342:nth-child(3) { --wave: 0s; }
._areaRow_1pbbp_342:nth-child(4) { --wave: 0.1s; }
._areaRow_1pbbp_342:nth-child(5) { --wave: 0.2s; }
._areaRow_1pbbp_342:nth-child(6) { --wave: 0.3s; }

._areaTitleCol_1pbbp_360 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

._areaTitleHead_1pbbp_367 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._areaIcon_1pbbp_374 {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
}

._areaName_1pbbp_380 {
  height: 14px;
  border-radius: var(--r-md);
}

._areaMeta_1pbbp_385 {
  height: 10px;
  border-radius: var(--r-md);
  margin-left: 32px;
  opacity: 0.55;
}

._areaResourceRow_1pbbp_392 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

._areaChip_1pbbp_399 {
  height: 22px;
  border-radius: var(--r-pill);
}

._chip_prof_1pbbp_404 {
  background: linear-gradient(
    90deg,
    var(--g200) 0%,
    var(--g300) 45%,
    var(--g200) 90%
  );
  background-size: 220% 100%;
}

._chip_manager_1pbbp_414 {
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g200) 45%,
    var(--g100) 90%
  );
  background-size: 220% 100%;
  opacity: 0.85;
}

._chip_equip_1pbbp_425 {
  height: 22px;
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--g300) 0%,
    var(--g400) 45%,
    var(--g300) 90%
  );
  background-size: 220% 100%;
  opacity: 0.7;
}

._areaInfoCol_1pbbp_438 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 22px;
}

._areaAlert_1pbbp_445 {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  opacity: 0.8;
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  ._shimmer_1pbbp_25,
  ._tab_1pbbp_455,
  ._tabActive_1pbbp_456,
  ._tone_a_1pbbp_457,
  ._tone_b_1pbbp_458,
  ._tone_c_1pbbp_459,
  ._chip_prof_1pbbp_404,
  ._chip_manager_1pbbp_414,
  ._chip_equip_1pbbp_425 {
    animation: none;
    background: var(--g100);
  }
}
/* ---------- Dashboard / Command Center loading skeleton ----------
   Mirrors the real grid one-for-one so loaded → loading doesn't
   reflow. Reuses the same shimmer animation pattern as
   MonitorSkeleton (single shared keyframe + per-card --wave stagger). */

._skeleton_15xka_6 {
  flex: 1 1 auto;
}

/* Uncapped, like the live RGL canvas. The grid is an inline-size container so
   card heights can mirror DashboardGrid's square-cell math exactly:
   cell = (width − 11 × 14px gutters) / 12 cols, and a card spanning h rows is
   h cells + (h − 1) gutters tall. Tall cards are h=5, short cards h=3 (see
   layout.defaults DEFAULT_LAYOUT), so the loaded → loading swap stays
   reflow-free at any viewport width / zoom. */
._grid_15xka_16 {
  width: 100%;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: start;

  --cell: calc((100cqw - 11 * 14px) / 12);
  --card-row-h: calc(5 * var(--cell) + 4 * 14px);
  --card-row-h-summary: calc(3 * var(--cell) + 2 * 14px);
}

/* ---------- Shared shimmer atom -----------------------------------
   Same gradient + keyframe as MonitorSkeleton so the two pages pulse
   identically. */
._shimmer_15xka_32 {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g200) 45%,
    var(--g100) 90%
  );
  background-size: 220% 100%;
  border-radius: var(--r-lg);
  animation: _dorca-dash-skel-shimmer_15xka_1 1.6s ease-in-out infinite;
  animation-delay: var(--wave, 0s);
  flex-shrink: 0;
}

@keyframes _dorca-dash-skel-shimmer_15xka_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Card shell -------------------------------------------- */
._card_15xka_54 {
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

._spanFull_15xka_65  { grid-column: span 12; }
._spanHalf_15xka_66  { grid-column: span 6;  }
._spanThird_15xka_67 { grid-column: span 4;  }

@media (width <= 1100px) {
  ._spanHalf_15xka_66,
  ._spanThird_15xka_67 { grid-column: span 12; }
}

._heightTall_15xka_74  { height: var(--card-row-h, 540px); }
._heightShort_15xka_75 { height: var(--card-row-h-summary, 340px); }

/* Per-card wave stagger so the page pulses top-down. */
._card_15xka_54:nth-child(1) { --wave: 0s;    }
._card_15xka_54:nth-child(2) { --wave: 0.06s; }
._card_15xka_54:nth-child(3) { --wave: 0.12s; }
._card_15xka_54:nth-child(4) { --wave: 0.18s; }
._card_15xka_54:nth-child(5) { --wave: 0.24s; }
._card_15xka_54:nth-child(6) { --wave: 0.30s; }
._card_15xka_54:nth-child(7) { --wave: 0.36s; }
._card_15xka_54:nth-child(8) { --wave: 0.42s; }
._card_15xka_54:nth-child(9) { --wave: 0.48s; }
._card_15xka_54:nth-child(10) { --wave: 0.54s; }
._card_15xka_54:nth-child(11) { --wave: 0.60s; }

._cardHeader_15xka_90 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--g100);
}

._headerTitle_15xka_99 {
  width: 120px;
  height: 12px;
}

._headerExtra_15xka_104 {
  width: 60px;
  height: 12px;
}

._cardBody_15xka_109 {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* Building tower styles moved to `@components/BuildingSkeleton/`
   (shared between MonitorSkeleton and DashboardSkeleton). */

/* ---------- Workforce Status ------------------------------------- */
._workforce_15xka_123 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

._statRow_15xka_131 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

._statTile_15xka_137 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

._statIcon_15xka_144 {
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
}

._statValue_15xka_150 {
  width: 48px;
  height: 24px;
}

._statLabel_15xka_155 {
  width: 56px;
  height: 10px;
}

._tradeList_15xka_160 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

._tradeRow_15xka_169 {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  align-items: center;
  gap: 12px;
}

._tradeName_15xka_176 {
  height: 10px;
}

._tradeBar_15xka_180 {
  height: 8px;
  border-radius: var(--r-pill);
}

._tradeRatio_15xka_185 {
  height: 10px;
}

/* ---------- Project Progress ------------------------------------- */
._progress_15xka_190 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

._progressHeadline_15xka_198 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._ringSmall_15xka_204 {
  width: 64px;
  height: 64px;
  border-radius: var(--r-circle);
  background: var(--g100);
}

._progressMeta_15xka_211 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._progressMetaTitle_15xka_217 {
  width: 160px;
  height: 14px;
}

._progressMetaSub_15xka_222 {
  width: 120px;
  height: 10px;
}

._phases_15xka_227 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  /* Grow to fill the card and spread the rows top-to-bottom so the shimmer
     occupies the whole body instead of clustering at the top. */
  flex: 1;
  justify-content: space-between;
  gap: 10px;
}

._phaseRow_15xka_241 {
  display: grid;

  /* Match the live card's .phase grid: icon, name (flex), fixed track, pct. */
  grid-template-columns: 20px 1fr 120px 44px;
  align-items: center;
  gap: 10px;
}

._phaseIcon_15xka_250 {
  width: 14px;
  height: 14px;
  border-radius: var(--r-circle);
}

._phaseName_15xka_256 {
  height: 10px;
}

._phaseBar_15xka_260 {
  height: 6px;
  border-radius: var(--r-pill);
}

._phasePct_15xka_265 {
  height: 10px;
}

/* ---------- Master Schedule -------------------------------------- */
._schedule_15xka_270 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._scheduleMonths_15xka_276 {
  display: grid;
  grid-template-columns: 180px 50px repeat(12, 1fr);
  gap: 8px;
  padding-bottom: 6px;
}

._scheduleMonths_15xka_276 ._monthCell_15xka_283:nth-child(1),
._scheduleMonths_15xka_276 ._monthCell_15xka_283:nth-child(2) {
  visibility: hidden;
}

._monthCell_15xka_283 {
  width: 24px;
  height: 8px;
}

._scheduleRow_15xka_293 {
  display: grid;
  grid-template-columns: 180px 50px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

._scheduleLabel_15xka_301 {
  height: 14px;
  width: 70%;
}

._schedulePct_15xka_306 {
  height: 12px;
  width: 32px;
}

._scheduleTrack_15xka_311 {
  position: relative;
  height: 20px;
}

._scheduleBar_15xka_316 {
  position: absolute;
  top: 4px;
  height: 12px;
  border-radius: var(--r-pill);
}

/* ---------- Activities Feed -------------------------------------- */
._feed_15xka_324 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  overflow: hidden;
}

._feedItem_15xka_335 {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
}

._feedIcon_15xka_341 {
  width: 36px;
  height: 36px;
  border-radius: var(--r-lg);
}

._feedBody_15xka_347 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._feedTopRow_15xka_353 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

._feedTitle_15xka_360 {
  height: 12px;
}

._feedPill_15xka_364 {
  width: 58px;
  height: 14px;
  border-radius: var(--r-pill);
}

._feedMeta_15xka_370 {
  height: 10px;
}

/* ---------- Safety & Compliance ---------------------------------- */
._safety_15xka_375 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

._safetyHeadline_15xka_382 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}

._safetyValue_15xka_390 {
  width: 80px;
  height: 30px;
}

._safetyLabel_15xka_395 {
  width: 120px;
  height: 10px;
}

._safetyTiles_15xka_400 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

._safetyTile_15xka_400 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--g50);
  border-radius: var(--r-xl);
  padding: 12px;
}

._safetyTileLabel_15xka_416 {
  width: 60px;
  height: 9px;
}

._safetyTileValue_15xka_421 {
  width: 32px;
  height: 22px;
}

._safetyFooter_15xka_426 {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--g100);
}

._safetyFooterRow_15xka_436 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._safetyFooterIcon_15xka_442 {
  width: 14px;
  height: 14px;
  border-radius: var(--r-sm);
}

._safetyFooterText_15xka_448 {
  height: 10px;
}

/* ---------- Delivery --------------------------------------------- */
._delivery_15xka_453 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

._deliveryRows_15xka_460 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._deliveryRow_15xka_460 {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}

._deliveryIcon_15xka_476 {
  width: 40px;
  height: 40px;
  border-radius: var(--r-xl);
}

._deliveryText_15xka_482 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._deliveryName_15xka_488 {
  height: 12px;
  width: 60%;
}

._deliveryMeta_15xka_493 {
  height: 10px;
  width: 85%;
}

._deliveryPill_15xka_498 {
  width: 62px;
  height: 18px;
  border-radius: var(--r-pill);
}

._inventory_15xka_504 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._inventoryRow_15xka_510 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._inventoryName_15xka_516 {
  height: 11px;
  width: 45%;
}

._inventoryBar_15xka_521 {
  height: 6px;
  border-radius: var(--r-pill);
}

/* Matches the shared <Button size="md"> (40px tall, --r-md) so the loaded ↔
   loading swap doesn't reflow. */
._deliveryButton_15xka_528 {
  height: 40px;
  border-radius: var(--r-md);
  margin-top: 2px;
}

/* ---------- Weather Impact --------------------------------------- */
._weather_15xka_535 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

@media (width <= 900px) {
  ._weather_15xka_535 { grid-template-columns: 1fr; }
}

/* Forecast ribbon row (mirrors ForecastRibbon: a row of selectable day cells). */
._weatherWrap_15xka_546 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._weatherRibbon_15xka_552 {
  display: flex;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--g100);
}

._weatherRibbonCell_15xka_559 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
}

._weatherRibbonDay_15xka_571 { width: 38px; height: 10px; }
._weatherRibbonIcon_15xka_572 { width: 18px; height: 18px; border-radius: var(--r-pill); }
._weatherRibbonTemp_15xka_573 { width: 46px; height: 9px; }
._weatherRibbonCondition_15xka_574 { width: 40px; height: 9px; }

._weatherAssessment_15xka_576 { min-width: 0; }

._weatherSectionTitle_15xka_578 {
  width: 180px;
  height: 10px;
  margin-bottom: 10px;
  display: block;
}

._weatherTiles_15xka_585 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

._weatherTile_15xka_585 {
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._weatherTileHead_15xka_601 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

._weatherTileName_15xka_608 {
  height: 12px;
  width: 60%;
}

._weatherTileRisk_15xka_613 {
  width: 44px;
  height: 14px;
  border-radius: var(--r-pill);
}

._weatherTileDetail_15xka_619 {
  height: 10px;
  width: 92%;
}

._weatherSide_15xka_624 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._weatherSidePanel_15xka_630 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._weatherSideTitle_15xka_636 {
  width: 130px;
  height: 10px;
}

._weatherSideRow_15xka_641 {
  height: 30px;
  border-radius: var(--r-lg);
}

/* ---------- AI Agent --------------------------------------------- */
._ai_15xka_647 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._aiInput_15xka_653 {
  height: 48px;
  border-radius: var(--r-2xl);
}

._aiChips_15xka_658 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._aiChip_15xka_658 {
  height: 28px;
  border-radius: var(--r-pill);
}
/* Shared shell for every Dashboard card.
   Owns the visual chrome (white surface, hairline, shadow, radius)
   plus the header layout (title row + optional subtitle, optional
   right-aligned slot). Individual cards style their body content in
   their own module and compose this shell via <DashboardCard>. */

._card_1au4f_7 {
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: 100%; /* fill the react-grid-layout cell */
}

/* ---------- Header ---------- */
._header_1au4f_20 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--g100);
}

._headerText_1au4f_29 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Single-line header: subtitle sits beside the title, wrapping under it
   only when the card is too narrow. Keeps the header short for
   height-constrained cards (e.g. the collapsed AI Agent). Center-aligned —
   the title is an inline-flex with a zero-line-height icon first, which
   makes its baseline unusable for cross-axis alignment. */
._headerTextInline_1au4f_41 {
  flex-flow: row wrap;
  align-items: center;
  gap: 2px 12px;
}

._title_1au4f_47 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* `prose` variant — sentence case, larger size. Used by the AI Agent
   card where the heading reads as a product name rather than a label. */
._title_1au4f_47._titleProse_1au4f_61 {
  font-size: var(--fs-md);
  letter-spacing: normal;
  text-transform: none;
}

._titleIcon_1au4f_67 {
  display: inline-flex;
  line-height: 0;
}

._subtitle_1au4f_72 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
}

._headerRight_1au4f_78 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* While the dashboard layout is being edited, DashboardGrid overlays a hide
   control in this exact corner (see `data-dashboard-editing` in DashboardGrid.tsx),
   which otherwise paints over whatever a card puts here — the schedule's
   "More options", the alerts card's today filter, Delivery's "View all".
   Yield the slot for the duration of the edit instead of letting the two
   collide. `visibility` rather than `display` so the header keeps its
   dimensions and nothing reflows on entering/leaving edit mode. */
[data-dashboard-editing] ._headerRight_1au4f_78 {
  visibility: hidden;
}

/* ---------- Body ---------- */

/* Shared region applied to EVERY card body (default or custom `bodyClassName`).
   Owns the sizing + scroll: it fills the remaining card height, can shrink below
   its content (`min-*: 0`), and scrolls on BOTH axes when a hand-resized card is
   too small to show its content. The card itself is `overflow: hidden`, so the
   scrollbars live inside the card. */
._bodyRegion_1au4f_103 {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

._body_1au4f_103 {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* ---------- Activity Alerts body styles ----------
   Card shell + header come from <DashboardCard>. Copied from the retired
   mock feed card's CSS module with the entity/action classes swapped for
   severity ones — see ActivityAlertsCard.tsx's severityClasses(). */

._newTodayButton_1jg5x_6 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 4px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--g500);
  cursor: pointer;
}

._newTodayButton_1jg5x_6:hover {
  color: var(--navy);
  background: var(--g100);
}

._newTodayActive_1jg5x_22 {
  color: var(--info);
  background: var(--info-tint);
}

/* Header meta: the fixed nightly schedule (with the refresh control beside
   it), plus — only when the probe has seen a newer sweep — the "changes are
   available" line beneath. */
._subtitleStack_1jg5x_30 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Refresh control beside the card title — same quiet icon-button treatment as
   the Portfolio header's (PortfolioPage/PageHeader): colour-only hover, dimmed
   while disabled, and the svg spins while a sync is in flight. Spacing from the
   title comes from the shared header <h2>'s gap. */
._refreshButton_1jg5x_40 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--r-md);
  line-height: 0;
}

._refreshButton_1jg5x_40:hover:not(:disabled) { color: var(--text-primary); }
._refreshButton_1jg5x_40:disabled { cursor: default; opacity: 0.6; }

._spinning_1jg5x_56 svg { animation: _activityAlertsSpin_1jg5x_1 0.8s linear infinite; }

@keyframes _activityAlertsSpin_1jg5x_1 {
  to { transform: rotate(360deg); }
}

/* The "a sweep landed since you fetched" notice. A button (the whole sentence
   refreshes on click), styled as a quiet info line so it reads as a header
   aside rather than an alert row. */
._changesAvailable_1jg5x_65 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  text-align: left;
  cursor: pointer;
}

._changesAvailable_1jg5x_65:hover {
  text-decoration: underline;
}

._body_1jg5x_81 {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Alerts list ---------- */
._list_1jg5x_90 {
  list-style: none;
  margin: 0;
  padding: 8px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._dayHeading_1jg5x_99 {
  margin: 4px 0 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ---------- Section headers (Activities / Issues / Deliveries & Stock) ---------- */
._sectionHeading_1jg5x_109 {
  margin: 10px 0 0;
}

._sectionHeadingButton_1jg5x_113 {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

._sectionLabel_1jg5x_129 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._sectionHeadingButton_1jg5x_113:hover ._sectionLabel_1jg5x_129 {
  color: var(--info);
}

._sectionCount_1jg5x_139 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g500);
}

._sectionChevron_1jg5x_145 {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: var(--g500);
  transition: transform 160ms ease;
}

._sectionChevronOpen_1jg5x_153 {
  transform: rotate(180deg);
}

/* Day-closing rule below each day's last row (skipped on the final day).
   flex-shrink: 0 is load-bearing — the list is a flex column whose content
   overflows, and an empty flex item (min-height resolves to 0) would otherwise
   be collapsed to 0px height under the container's shrink pressure. */
._dayDivider_1jg5x_161 {
  flex-shrink: 0;
  height: 1px;
  background: var(--g100);

  /* The row hover surface extends 6px below its text into the list gap; without
     this the divider sits only 8px under it and the two light greys crowd.
     6px here restores a full row-gap of clear air above the line. */
  margin-top: 6px;
}


/* A day inside the 7-day window with nothing to report. */
._dayEmpty_1jg5x_174 {
  font-size: var(--fs-xs);
  color: var(--g400);
}

._item_1jg5x_179 {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  border-radius: var(--r-lg);

  /* Negative margin + matching padding lets the hover surface extend past the
     content on all four sides, so the highlight reads as a target the row sits
     inside rather than a box clamped to the text. The row's own footprint in
     the list is unchanged. */
  margin: -6px -10px;
  padding: 6px 10px;
  transition: background-color 120ms ease-out;
}

._item_1jg5x_179:hover {
  /* The lightest grey in the ramp — enough to read as a hover target against
     the white card without the row looking selected or disabled. */
  background: var(--g50);
}

/* Deliveries & Stock rows carry no drawer — the row itself isn't a control,
   only its "View in Logistics ›" link is, so it drops the pointer cursor and
   hover fill that would otherwise imply the whole row is clickable. */
._item_1jg5x_179._itemStatic_1jg5x_205,
._expandedItem_1jg5x_206._itemStatic_1jg5x_205 {
  cursor: default;
}

._item_1jg5x_179._itemStatic_1jg5x_205:hover,
._expandedItem_1jg5x_206._itemStatic_1jg5x_205:hover {
  background: none;
}

._entering_1jg5x_215 {
  animation: _activityAlertsEnter_1jg5x_1 320ms ease-out;
}

/* Expanded group members (Option C): threaded off a vertical connector line
   under the group's 36px icon column — no fill, no per-member icons. */
._expandedSection_1jg5x_221 {
  display: block;
  margin-top: 2px;
}

._expandedList_1jg5x_226 {
  list-style: none;
  margin: 0 0 0 17px; /* centre the rail under the parent's 36px icon */
  padding: 2px 0 4px;
  border-left: 2px solid var(--g100);
  display: flex;
  flex-direction: column;
}

._expandedItem_1jg5x_206 {
  display: block;

  /* margin-left offsets the hover surface off the connector rail; the reduced
     padding-left keeps the text at the same indent as before. */
  margin-left: 10px;
  padding: 7px 10px 7px 11px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

._expandedItem_1jg5x_206:hover {
  background: var(--g50);
}

/* Inline collapse chevron after the group sentence — rotates when open. */
._expandChevron_1jg5x_252 {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 4px;

  /* Nudge 1px below the text centre — the chevron glyph's mass sits high in its
     box and reads as too high when perfectly centred. */
  margin-top: 1px;
  color: var(--g500);
  transition: transform 160ms ease;
}

._expandChevronOpen_1jg5x_265 {
  transform: rotate(180deg);
}

@keyframes _activityAlertsEnter_1jg5x_1 {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

._icon_1jg5x_274 {
  width: 36px;
  height: 36px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  line-height: 0;
}

/* Substitution note: the design gave `--danger-tint` for the critical
   background, which doesn't exist in tokens.css. Using the tokens the old
   card's `.iconRfi` / `.pillUrgent` rules referenced instead (both convey
   the same "danger" red, at the two tints the shell already established). */
._iconCritical_1jg5x_287 { background: var(--status-rejected-bg);   color: var(--red); }
._iconWarning_1jg5x_288  { background: var(--status-for-review-bg); color: var(--status-for-review-text); }
._iconInfo_1jg5x_289     { background: var(--g100);                 color: var(--g600); }

/* Good-news types (completed / milestone-reached) — success green. */
._iconSuccess_1jg5x_292  { background: var(--color-success-bg);     color: var(--color-success); }

/* Per-item content layout. Renamed from `.body` (which would have
   collided with the shared shell's body slot). */
._itemBody_1jg5x_296 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._bodyTop_1jg5x_303 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

._itemTitle_1jg5x_310 {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

/* The title/sentence text truncates with an ellipsis; the trailing marker
   (critical-path zap or expand chevron) stays pinned inline beside it rather
   than being pushed to a second line when the name is long. */
._titleText_1jg5x_322 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Critical-path marker beside the title — the SAME gold icon-tag the Progress
   Tracker pins to its columns (matrixTable.module.css `.critTag`), so the cue
   reads identically across surfaces. */
._criticalMark_1jg5x_332 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 5px;
  padding: 1px 3px;
  border: 1px solid var(--critical-path-tag-fg);
  border-radius: var(--r-sm);
  color: var(--critical-path-tag-fg);
  vertical-align: -2px;
}

/* Safety marker beside an issue's title — the SAME filled blue shield the
   Activities & Issues page uses (IssuesPage/Board/icons SafetyShieldFilledIcon),
   so the cue reads identically across surfaces. */
._safetyIcon_1jg5x_348 {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 5px;
  line-height: 0;
}

/* The old value in a before→after change: struck, quiet grey. */
._beforeChip_1jg5x_357 {
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--g100);
  color: var(--g500);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._chipArrow_1jg5x_367 {
  color: var(--g400);
  white-space: pre;
}

/* Key-detail chip — the "after" value of a before→after change (reschedule's
   new date, risk-up's new level). Always info-blue: it marks the new fact, not
   a severity. Shape here; colour in the modifier. */
._keyChip_1jg5x_375 {
  padding: 0 6px;
  border-radius: var(--r-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

._keyInfo_1jg5x_383 { background: var(--info-tint); color: var(--info); }

._pill_1jg5x_285 {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;

  /* Reserved so the dashed variants below do not sit a border taller than the
     filled ones in the same list — the same trick the inventory badges use. */
  border: 1px solid transparent;
}

._pillCritical_1jg5x_400 { background: var(--dashboard-urgent-bg);  color: var(--red); }
._pillWarning_1jg5x_401  { background: var(--status-for-review-bg); color: var(--status-for-review-text); }
._pillInfo_1jg5x_402     { background: var(--info-tint);             color: var(--info); }
._pillSuccess_1jg5x_403  { background: var(--color-success-bg);      color: var(--color-success); }

/* The two "there is no figure here" groups — Ran out and Not tracked — reuse
   the inventory panel's dashed badges instead of a severity fill, so the same
   claim wears the same mark on both surfaces. Dashed, not tinted: it is not a
   quieter severity, it is a different kind of statement. */
._pillRanOut_1jg5x_409 {
  background: var(--g50);
  color: var(--g600);
  border: 1px dashed var(--g400);
}

._pillUntracked_1jg5x_415 {
  background: var(--info-tint);
  color: var(--info);
  border: 1px dashed var(--info);
}

._bodySub_1jg5x_421 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

._itemSubtitle_1jg5x_428 {
  font-size: var(--fs-xs);
  color: var(--g600);
}

/* ---------- Loading / empty / error states ---------- */
._stateMsg_1jg5x_434 {
  padding: 24px 20px;
  font-size: var(--fs-sm);
  color: var(--g500);
  text-align: center;
}

._skeletonList_1jg5x_441 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 20px 16px;
}

._skeletonRow_1jg5x_448 {
  height: 44px;
  border-radius: var(--r-lg);
  background: var(--g100);
  animation: _activityAlertsPulse_1jg5x_1 1.4s ease-in-out infinite;
}

@keyframes _activityAlertsPulse_1jg5x_1 {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

._sentinel_1jg5x_460 {
  height: 1px;
}

/* ---------- Group row hover tooltip (member preview) ---------- */

/* The group-preview tooltip popup — self-contained (navy chip + enter/exit
   animation) rather than borrowing MilestoneTooltip's private `.tip` class. */

/* LAYOUT ONLY. This block renders as the `content` of a shared
   `<Tooltip variant="marker">`, so the navy ground, padding, radius, shadow and
   the scale-in animation all come from `ui/Tooltip`'s `.popupMarker`. Declaring
   them again here nested a second navy box inside the first — two shadows, two
   paddings, a visible box-in-a-box. Same trim `HoverTooltip.module.css` and
   `MilestoneStrip/styles.module.css` got when they moved onto the shared popup. */
._groupTip_1jg5x_475 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}

/* One member per row, dash-bulleted like a list ("- Ceiling      Jul 22"). */
._groupTipRow_1jg5x_483 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

._groupTipBullet_1jg5x_490 {
  margin-right: 6px;
}

._groupTipName_1jg5x_494 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._groupTipZap_1jg5x_500 {
  display: inline-flex;
  margin-left: 3px;
  vertical-align: -1px;
  color: var(--critical-path-tag-fg);
}

._groupTipDate_1jg5x_507 {
  flex-shrink: 0;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

._groupTipMore_1jg5x_513 {
  opacity: 0.75;
}

/* The trailing deep-link keeps its own line width: it sits in a flex row beside
   the subtitle, and as a shrinkable item a long subtitle squeezed it until the
   label broke across two lines ("View in / Logistics ›"), which reads as two
   links. `flex: none` hands the shrinking to the subtitle, which is prose and
   wraps cleanly. */
._viewInPage_1jg5x_522 {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}

._viewInPage_1jg5x_522:hover {
  text-decoration: underline;
}
/* Above the composer, left-aligned with its box, wrapping as the column narrows. */
._followUps_1ciin_2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The card's single line: scrolls sideways under a finger or a trackpad, with
   an overlay bar rather than one taking a line of its own, and fades at the right edge so a
   question cut off reads as "more this way", not as the end of the list. */
._rowFrame_1ciin_11 {
  mask-image: linear-gradient(to right, #000 88%, transparent);
}

._row_1ciin_11 {
  flex-wrap: nowrap;
}

/* Something to say, not somewhere to go: a white pill with a hairline border,
   a step quieter than the composer it sits on. Wraps inside itself on the page
   — a question cut off is a different question. */
._chip_1ciin_22 {
  max-width: 100%;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--g700);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
  box-shadow: var(--ai-shadow-sm);
  transition: border-color 0.15s, color 0.15s;
}

/* On one line every chip keeps its whole question and the row scrolls instead,
   at the card's own chip size. */
._row_1ciin_11 ._chip_1ciin_22 {
  flex-shrink: 0;
  max-width: none;
  white-space: nowrap;
  font-size: var(--fs-xs);
}

._chip_1ciin_22:hover {
  border-color: var(--g400);
  color: var(--navy);
}

._chip_1ciin_22:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  ._chip_1ciin_22 {
    transition: none;
  }
}
/* Export-mode selection frame. Hover shows a soft blue ring; selected shows a
   stronger one that overrides hover. Raised above the page's export overlay,
   which swallows every click that misses a selectable item. */
._selectable_uegvg_4 {
  position: relative;
  cursor: pointer;
  border-radius: var(--r-xl);
  transition:
    box-shadow 0.2s,
    transform 0.15s;
  z-index: var(--z-raised-2);
}

/* The item is one checkbox: a click meant to select it must not reach a sort
   header, a search box or the chart-type switcher inside it. */
._selectable_uegvg_4 > * {
  pointer-events: none;
}

._selectable_uegvg_4:hover,
._selectable_uegvg_4:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-blue-light);
  transform: scale(1.005);
}

._selected_uegvg_27,
._selected_uegvg_27:hover,
._selected_uegvg_27:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-blue);
}
._chartContainer_1mx67_1 {
  position: relative;
  margin: 8px 0;
  padding: 12px 8px 4px;
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  background-color: var(--color-surface);
  overflow: hidden;
}

/* Chart-type switcher — a small pill in the top-right corner of the card.
   Sits above the chart with z-index so it doesn't get covered by Apex's
   own overlays. */
._typeSwitcher_1mx67_14 {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: var(--z-raised-2);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background-color: var(--g100);
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  box-shadow: var(--ai-shadow-tile);
}

._typeButton_1mx67_29 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--g500);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

._typeButton_1mx67_29:hover {
  color: var(--brand-blue);
  background-color: var(--ai-surface-overlay-strong);
}

._typeButton_1mx67_29:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 1px;
}

._typeButton_1mx67_29:active {
  transform: scale(0.94);
}

._typeButton_1mx67_29 svg {
  display: block;
}

._typeButtonActive_1mx67_65 {
  color: var(--color-surface);
  background-color: var(--brand-blue);
  box-shadow: 0 1px 3px var(--brand-blue-glow);
}

._typeButtonActive_1mx67_65:hover {
  color: var(--color-surface);
  background-color: var(--brand-blue);
}
._lightbox_1vpaw_1 {
  outline: none;
  position: fixed;
  inset: 0;
  background: var(--lightbox-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-lightbox);
  padding: 40px;
  cursor: zoom-out;
}

._lightbox_1vpaw_1 img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-2xl);
  background: var(--surface-card);
}
/* A thumbnail beside the text, not a picture the answer is built around: the
   steps are the answer, and a click opens the screenshot full size. */
._figure_vlvfe_3 {
  display: inline-block;
  width: 240px;
  max-width: 100%;
  margin: 4px 0 8px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  background-color: var(--color-surface);
  overflow: hidden;
  vertical-align: top;
}

._zoom_vlvfe_15 {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

._image_vlvfe_24 {
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: cover;
  object-position: top left;
  background-color: var(--g50);
}

._caption_vlvfe_34 {
  padding: 4px 8px;
  border-top: 1px solid var(--g200);
  font-size: var(--fs-xs);
  color: var(--g600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._tableContainer_166l9_1 {
  overflow: hidden;
  max-width: 100%;
  border-radius: var(--r-xl);
  margin: 8px 0;
  border: 1px solid var(--g200);

  /* Rendered inside the answer's bubble, between its paragraphs — but that
     bubble is grey in the dashboard card, and the rows must read as a card
     against either. Set white explicitly rather than inherit. */
  background-color: var(--color-surface);

  /* The card arrives as one piece; its rows then deal in below (see
     `tbody tr`). Ends on `transform: none` so the settled card creates no
     containing block for the sticky header or the badge popover. */
  animation: _cardIn_166l9_1 320ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both;
}

@keyframes _cardIn_166l9_1 {
  from { transform: translateY(8px) scale(0.985); }
  to   { transform: none; }
}

/* Toolbar above the table — title, row count, status summary, search.
   `flex-wrap` lets the search drop to a new line on narrow widths. */
._toolbar_166l9_26 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--g50);
  border-bottom: 1px solid var(--g200);
  flex-wrap: wrap;
}

._toolbarLeft_166l9_37 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--g500);
  flex-wrap: wrap;
}

._title_166l9_46 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._titleDivider_166l9_52 {
  width: 1px;
  height: 14px;
  background-color: var(--g300);
}

._summaryCount_166l9_58 {
  font-weight: 600;
  color: var(--navy);
}

._summaryDivider_166l9_63 {
  width: 1px;
  height: 12px;
  background-color: var(--g200);
}

._summaryItem_166l9_69 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

._summaryDot_166l9_76 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
}

._summaryDot_166l9_76._success_166l9_82  { background-color: var(--color-success-mid); }
._summaryDot_166l9_76._progress_166l9_83 { background-color: var(--brand-blue); }
._summaryDot_166l9_76._warning_166l9_84  { background-color: var(--color-warn); }
._summaryDot_166l9_76._critical_166l9_85 { background-color: var(--sev-critical-text); }
._summaryDot_166l9_76._neutral_166l9_86  { background-color: var(--g400); }

._searchWrapper_166l9_88 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--color-surface);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  color: var(--g400);
}

._searchWrapper_166l9_88:focus-within {
  border-color: var(--brand-blue);
}

._searchInput_166l9_103 {
  border: none;
  outline: none;
  font-size: var(--fs-xs);
  color: var(--navy);
  background: transparent;
  width: 80px;
  font-family: inherit;
}

._searchInput_166l9_103::placeholder {
  color: var(--g400);
}

/* The table's scrolling frame (a ScrollArea root). */
._tableScroll_166l9_118 {
  max-height: 400px;
}

._table_166l9_1 {
  width: 100%;
  border-spacing: 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  table-layout: auto;
}

/* Sticky sortable headers. Active = currently sorted; hover = invitation. */
._headerCell_166l9_131 {
  padding: 8px 12px;
  text-align: start;
  font-weight: 600;
  color: var(--navy);
  background-color: var(--g50);
  border-bottom: 2px solid var(--g200);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
  position: sticky;
  top: 0;
  z-index: var(--z-raised-2);
}

._headerCell_166l9_131:hover {
  background-color: var(--g100);
}

._headerCell_166l9_131:not(:last-child) {
  border-right: 1px solid var(--g100);
}

._headerCellActive_166l9_155 {
  background-color: var(--g100);
}

._headerContent_166l9_159 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

._sortIcon_166l9_165 {
  font-size: var(--fs-2xs);
  opacity: 0.7;
}

._alignCenter_166l9_170 { text-align: center; }
._alignRight_166l9_171  { text-align: end; }

._cell_166l9_173 {
  padding: 8px 12px;
  text-align: start;
  color: var(--navy);
  border-bottom: 1px solid var(--g50);
  vertical-align: top;
}

._cell_166l9_173:not(:last-child) {
  border-right: 1px solid var(--g50);
}

._emptyValue_166l9_185 {
  color: var(--g300);
  font-style: italic;
}

._rowEven_166l9_190 {
  background-color: var(--ai-row-stripe);
}

._table_166l9_1 tbody tr {
  transition: background-color 0.1s ease;

  /* Rows deal in one after another. `--row-i` is set inline by AiTable and
     capped there, so a long table finishes as fast as a short one and the
     rows past the cap land together. Sorting and filtering keep the row
     keys, so only the first paint animates. */
  animation: _rowIn_166l9_1 260ms ease-out both;
  animation-delay: calc(140ms + var(--row-i, 0) * 35ms);
}

@keyframes _rowIn_166l9_1 {
  from { transform: translateY(4px); }
  to   { transform: none; }
}

._table_166l9_1 tbody tr:hover {
  background-color: var(--ai-row-hover) !important;
}

._table_166l9_1 tbody tr:hover ._copyButton_166l9_214 {
  opacity: 1;
}

._table_166l9_1 tbody tr:last-child ._cell_166l9_173,
._table_166l9_1 tbody tr:last-child ._actionCell_166l9_219 {
  border-bottom: none;
}

._actionHeader_166l9_223 {
  width: 32px;
  min-width: 32px;
  background-color: var(--g50);
  border-bottom: 2px solid var(--g200);
  position: sticky;
  top: 0;
  z-index: var(--z-raised-2);
}

._actionCell_166l9_219 {
  width: 32px;
  min-width: 32px;
  padding: 0;
  text-align: center;
  border-bottom: 1px solid var(--g50);
}

._copyButton_166l9_214 {
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-md);
  color: var(--g400);
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
  display: inline-flex;
  align-items: center;
}

._copyButton_166l9_214:hover {
  background-color: var(--g100);
}

._copyCheck_166l9_260 {
  color: var(--color-success-mid);
  display: inline-flex;
}

._dateCell_166l9_265 {
  white-space: nowrap;
}

/* Badge list — used by `badge_list` cells. The +N overflow tag reveals
   a popover on hover with all entries (no JS — pure CSS hover). */
._badgeList_166l9_271 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

._badgeTag_166l9_278 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-lg);
  background-color: var(--brand-blue-pale);
  border: 1px solid var(--brand-blue-border-soft);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  line-height: 1.5;
}

._badgeMoreWrapper_166l9_293 {
  position: relative;
  display: inline-flex;
}

._badgeMore_166l9_293 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-lg);
  background-color: var(--g100);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

._badgeMore_166l9_293:hover {
  background-color: var(--brand-blue-tint);
  color: var(--brand-blue);
}

._badgePopover_166l9_317 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  max-width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  box-shadow: var(--ai-shadow-popover);
  z-index: var(--z-inline-popover);
}

._badgeMoreWrapper_166l9_293:hover ._badgePopover_166l9_317 {
  display: flex;
}

._numberCell_166l9_337 {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Progress bar cell. Three colour bands: high (green), mid (blue), low (yellow). */
._progressWrapper_166l9_343 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}

._progressBar_166l9_350 {
  flex: 1;
  height: 6px;
  border-radius: var(--r-md);
  background-color: var(--g100);
  overflow: hidden;
}

._progressFillHigh_166l9_358,
._progressFillMid_166l9_359,
._progressFillLow_166l9_360 {
  height: 100%;
  border-radius: var(--r-md);
  transition: width 0.3s ease;

  /* Grows from the start edge once its row has landed. Inherits the row's
     `--row-i`, so the bars sweep down the table in the same rhythm. */
  transform-origin: 0 50%;
  animation: _fillIn_166l9_1 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(320ms + var(--row-i, 0) * 35ms);
}

@keyframes _fillIn_166l9_1 {
  from { transform: scaleX(0); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ._tableContainer_166l9_1,
  ._table_166l9_1 tbody tr,
  ._progressFillHigh_166l9_358,
  ._progressFillMid_166l9_359,
  ._progressFillLow_166l9_360 {
    animation-duration: 0.001ms;
    animation-delay: 0ms;
  }
}

._progressFillHigh_166l9_358 { background-color: var(--color-success-mid); }
._progressFillMid_166l9_359  { background-color: var(--brand-blue); }
._progressFillLow_166l9_360  { background-color: var(--color-warn); }

._progressLabel_166l9_392 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  white-space: nowrap;
}

._professionCell_166l9_399 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._trendPositive_166l9_405,
._trendNegative_166l9_406,
._trendNeutral_166l9_407 {
  font-size: var(--fs-xs);
  white-space: nowrap;
  font-weight: 600;
}

._trendPositive_166l9_405 { color: var(--color-success); }
._trendNegative_166l9_406 { color: var(--sev-critical-text); }
._trendNeutral_166l9_407  { color: var(--g500); font-weight: 500; }

/* Status chips — five variants. Background is a low-opacity tint; text is the
   solid version of the same hue. */
._chip_166l9_419 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-2xl);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}

._chip_166l9_419._success_166l9_82  { background-color: var(--status-completed-bg);   color: var(--color-success); }
._chip_166l9_419._progress_166l9_83 { background-color: var(--brand-blue-tint);       color: var(--brand-blue); }
._chip_166l9_419._warning_166l9_84  { background-color: var(--sev-med-bg);            color: var(--color-warn); }
._chip_166l9_419._critical_166l9_85 { background-color: var(--sev-critical-bg);       color: var(--sev-critical-text); }
._chip_166l9_419._neutral_166l9_86  { background-color: var(--g50);                   color: var(--g500); }

._noResults_166l9_434 {
  padding: 16px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--g400);
}

/* A breakdown grouped by one column: the group's value heads its rows, with
   how many there are, and the grouped column itself leaves the grid. */
._groupRow_166l9_443 td {
  padding: 6px 12px;
  background-color: var(--g50);
  border-top: 1px solid var(--g200);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}

._groupCount_166l9_452 {
  margin-left: 6px;
  font-weight: 400;
  color: var(--g500);
}
/* The forecast as a row of day cards, in the material the dashboard's own
   forecast ribbon is made of, so the two surfaces agree on what a day looks
   like. Each card is read top to bottom the way a day is read off a gate
   board: which day, what sky and how warm, and whether work is at risk. */

._cards_iaohz_6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

._card_iaohz_6 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  background: var(--g50);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._when_iaohz_27 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  align-items: baseline;
  color: var(--g500);
}

._today_iaohz_35 {
  font-weight: 600;
  color: var(--navy);
}

/* The sky and the temperatures share a line: the icon is the day's weather at
   a glance, the high is the number a manager plans the day around, the low
   sits beside it smaller. */
._sky_iaohz_43 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
  color: var(--g700);
}

._temps_iaohz_51 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

._high_iaohz_58 {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
}

._low_iaohz_65 {
  font-size: var(--fs-sm);
  color: var(--g500);
}

._condition_iaohz_70 {
  color: var(--g700);
}

/* Risk to work in the dashboard's own weather palette, so the two surfaces
   agree on what medium looks like. */
._risk_iaohz_76 {
  align-self: flex-start;
  margin-top: var(--s-1);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  background: var(--status-completed-bg);
  color: var(--dashboard-teal);
}

._card_iaohz_6[data-risk='medium'] ._risk_iaohz_76 {
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
}

._card_iaohz_6[data-risk='high'] ._risk_iaohz_76 {
  background: var(--status-rejected-bg);
  color: var(--status-rejected-text);
}
/* Under the answer, left-aligned with its bubble, wrapping as the column narrows. */
._links_1qisa_2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The composer's opener chips, one size down: the same family of "go somewhere" affordance. */
._link_1qisa_2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  color: var(--navy);
  font-size: var(--fs-sm);
  text-decoration: none;
  box-shadow: var(--ai-shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

._link_1qisa_2:hover {
  border-color: var(--g300);
  box-shadow: var(--ai-shadow-md);
}

._link_1qisa_2:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

._icon_1qisa_36,
._arrow_1qisa_37 {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--g500);
}

._title_1qisa_43 {
  font-weight: 600;
  white-space: nowrap;
}

/* The record's name can be a sentence; it gives way before the page's name does. */
._facets_1qisa_49 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g500);
}

@media (prefers-reduced-motion: reduce) {
  ._link_1qisa_2 {
    transition: none;
  }
}
/* Under the answer's links, sharing its line with the thumbs: muted, so it
   reads as a footnote, not as part of the reply. Inline text, so it wraps between sources the way a
   sentence does — a source cut off is a source the reader cannot see was
   checked. */
._receipt_1eiim_5 {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--g500);
}

._lead_1eiim_12 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: bottom;
}

._separator_1eiim_19 {
  color: var(--g400);
}

/* A source that could not be read. The warning tone the transcript's data-gap
   line uses — this names the source that line is about. */
._failed_1eiim_25 {
  color: var(--color-warn);
}
/* The receipt and the surface's actions on one line, wrapping when the column
   is too narrow for both. A child that needs a line of its own — the report a
   thumbs-down opens — takes the full width and drops below. */
._meta_vkk6t_4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}
/* The live status line. The answer starts only once the model has read what
   it needs, so this is the only thing moving for what can be tens of seconds —
   it sits beside the surface's dots and is replaced wholesale by the answer. */
._label_dz5dj_4 {
  font-size: var(--fs-sm);
  color: var(--g600);
  animation: _statusIn_dz5dj_1 0.2s ease-out;
}

/* A tool the turn reached for did not answer. Same line, different state —
   the label stays so the user can see WHICH source went quiet. */
._failed_dz5dj_12 {
  color: var(--color-warn);
}

._failedNote_dz5dj_16 {
  margin-inline-start: 6px;
  font-size: var(--fs-xs);
  opacity: 0.85;
}

@keyframes _statusIn_dz5dj_1 {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  ._label_dz5dj_4 { animation: none; }
}
/* AI Agent card — inline transcript. Tokens only (see tokens.css). */

/* Cap the scroll region, but stay shorter than half a short mobile viewport
   so the in-card list doesn't double-scroll against the page on phones. */
._list_127lv_5 {
  max-height: min(360px, 50vh);
}

._listBody_127lv_9 {
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* Inset the content from the overlay bar, so it sits aside the
     (right-aligned) user bubbles instead of on top of their text. */
  padding: 4px 10px 4px 4px;

  /* Drawings size themselves against the CARD, not the viewport: the card is
     a resizable cell on the dashboard grid, so the same viewport holds both a
     full-row card and a three-column one. Named because CSS Modules does not
     scope container-name — the identifier is global, keep it specific. */
  container: ai-agent-card-transcript / inline-size;
}

._message_127lv_25 { display: flex; }
._message_127lv_25._user_127lv_26 { justify-content: flex-end; }
._message_127lv_25._assistant_127lv_27 { justify-content: flex-start; }

/* Bubble + rich-content nudge stack vertically within one side's column,
   so the nudge sits beneath the bubble rather than floating beside it. */
._column_127lv_31 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 80%;
}
._message_127lv_25._user_127lv_26 ._column_127lv_31 { align-items: flex-end; }
._message_127lv_25._assistant_127lv_27 ._column_127lv_31 { align-items: flex-start; }

/* A table or chart wants the whole transcript width; the bubble above it
   still shrink-wraps its text. */
._column_127lv_31._columnWide_127lv_42 { max-width: 100%; }

/* The drawings and the nudge are BOTH rendered, and the width picks one: a
   table with a handful of columns is unreadable under ~560px (the same floor
   the activities card list uses), so a narrow card points at the full page
   instead. */
._drawings_127lv_48 {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 6px;
}

@container ai-agent-card-transcript (width >= 560px) {
  ._drawings_127lv_48 { display: flex; }
  ._nudge_127lv_57 { display: none; }
}

._bubble_127lv_60 {
  max-width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-xl);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

._message_127lv_25._user_127lv_26 ._bubble_127lv_60 {
  background: var(--dashboard-teal);
  color: var(--color-surface);
  border-bottom-right-radius: var(--r-sm);
}

._message_127lv_25._assistant_127lv_27 ._bubble_127lv_60 {
  background: var(--g50);
  color: var(--g800);
  border-bottom-left-radius: var(--r-sm);
}

/* One bubble holds the whole answer: prose, and the drawings between it. */
._answer_127lv_81 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._userText_127lv_87 { margin: 0; }
._markdown_127lv_88 :first-child { margin-top: 0; }
._markdown_127lv_88 :last-child { margin-bottom: 0; }

._nudge_127lv_57 {
  align-self: flex-start;
  display: inline-flex;
  padding: 7px 11px;
  border: 1px dashed var(--g300);
  border-radius: var(--r-lg);
  background: var(--g50);
  color: var(--g600);
  font-size: var(--fs-xs);
  text-decoration: none;
  cursor: pointer;
}
._nudge_127lv_57:hover { border-color: var(--g500); color: var(--g700); }

/* Visible keyboard focus — the global reset clears the UA outline, so
   interactive elements must restore one explicitly. */
._nudge_127lv_57:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* A stopped answer — the reader's doing, so muted rather than a warning. */
._stopped_127lv_113 {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--g500);
}

._error_127lv_119 {
  padding: 8px 11px;
  border-radius: var(--r-lg);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--fs-xs);
}

/* The wait: the dots, then the status line saying what is being read. */
._waiting_127lv_128 { display: flex; align-items: center; gap: 4px; }

._typing_127lv_130 { display: inline-flex; gap: 4px; padding: 11px 12px; }

._typing_127lv_130 span {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--g400);
  animation: _blink_127lv_1 1.2s infinite ease-in-out both;
}
._typing_127lv_130 span:nth-child(2) { animation-delay: 0.2s; }
._typing_127lv_130 span:nth-child(3) { animation-delay: 0.4s; }

@keyframes _blink_127lv_1 {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

/* Respect reduced-motion: hold the dots at a steady dim state. */
@media (prefers-reduced-motion: reduce) {
  ._typing_127lv_130 span { animation: none; opacity: 0.6; }
}
/* ---------- AI Agent body styles ----------
   Card shell + header come from <DashboardCard>. */

._titleIconInfo_l3r2r_4 {
  display: inline-flex;
  color: var(--info);
  line-height: 0;
}

._body_l3r2r_10 {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Collapsed (no open conversation): the body fills the card height via the
   shared body-region, so center the input + suggestion chips vertically instead
   of leaving a large gap below them. `safe` degrades centering to top-alignment
   if the user resizes the card below the content height (minH is 1), keeping
   the input visible instead of clipping it. The roomier pill and chips below
   are sized for the default 2-cell height, so the group fills the cell rather
   than floating in it. Once expanded, the conversation fills the space and the
   input sits beneath it (default top alignment). */
._bodyCollapsed_l3r2r_25 {
  justify-content: safe center;
  gap: 14px;
}

._bodyCollapsed_l3r2r_25 ._inputWrap_l3r2r_30 {
  padding: 14px 18px;
}

._bodyCollapsed_l3r2r_25 ._input_l3r2r_30 {
  font-size: var(--fs-md);
}

._bodyCollapsed_l3r2r_25 ._chip_l3r2r_38 {
  padding: 8px 14px;
}

/* Expanded: the transcript (first child — CardMessages' list) grows to fill
   the card so the input pins to the bottom. The child selector reaches across
   the module boundary; `max-height: none` lifts the list's own 360px cap,
   which is redundant here because the grid cell already bounds the body. */
._bodyExpanded_l3r2r_46 > :first-child {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

._inputWrap_l3r2r_30 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-2xl);
  transition: border-color 0.15s ease;
}

/* Focus cue lives on the pill wrapper (border tint), not the inner input —
   a hard outline inside the rounded pill reads as a stray box. Mirrors the
   full AI Agent page's ChatInput treatment. */
._inputWrap_l3r2r_30:focus-within {
  border-color: var(--navy);
}

._input_l3r2r_30 {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--g600);
  outline: none;
}

._input_l3r2r_30::placeholder { color: var(--g500); }

._sendButton_l3r2r_82 {
  appearance: none;
  background: var(--dashboard-teal);
  color: var(--color-surface);
  border: 0;
  border-radius: var(--r-pill);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

._chips_l3r2r_96 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._chip_l3r2r_38 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  color: var(--g700);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

._chip_l3r2r_38 :first-child {
  color: var(--g500);
}

._sendButton_l3r2r_82:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._chip_l3r2r_38:hover {
  border-color: var(--g300);
}

._headerActions_l3r2r_130 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* Visible keyboard focus — the global reset clears the UA outline, so every
   interactive element restores one. The text input is covered by the
   `.inputWrap:focus-within` border tint above instead. */
._sendButton_l3r2r_82:focus-visible,
._chip_l3r2r_38:focus-visible,
._newChatBtn_l3r2r_143:focus-visible,
._fullViewBtn_l3r2r_144:focus-visible,
._collapseBtn_l3r2r_145:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._fullViewBtn_l3r2r_144 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--dashboard-teal);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

._newChatBtn_l3r2r_143 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--g700);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

._newChatBtn_l3r2r_143:hover {
  border-color: var(--g300);
}

._collapseBtn_l3r2r_145 {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  color: var(--g500);
  cursor: pointer;
}
/* Segmented switch (radiogroup of pill buttons). Shared granularity/zoom
   control — keep the look in one place so every surface stays in sync. */
._group_5temp_3 {
  display: inline-flex;
  background: var(--g100);
  border-radius: var(--r-xl);
  padding: 3px;
}

._button_5temp_10 {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: var(--r-lg);
  color: var(--g600);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

._button_5temp_10:hover {
  color: var(--g800);
}

._active_5temp_27,
._active_5temp_27:hover {
  background: var(--color-surface);
  color: var(--g800);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}
/* ---------- Master Schedule body styles ----------
   Card shell + header come from <DashboardCard>. */

._legend_1gz84_4 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

._legendItem_1gz84_13 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--g600);
}

._legendDot_1gz84_21 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

._dotCritical_1gz84_28  { background: var(--red); }
._dotOnTrack_1gz84_29   { background: var(--status-completed-text); }

._dotMilestone_1gz84_31 {
  /* Diamond outline */
  width: 9px;
  height: 9px;
  background: transparent;
  border: 1.5px solid var(--g500);
  border-radius: 0;
  transform: rotate(45deg);
}

._dotsButton_1gz84_41 {
  padding: 4px;
}

/* ---------- Body / Gantt ---------- */
._body_1gz84_46 {
  padding: 8px 20px 20px;
  position: relative;

  /* Flex column so the month axis stays pinned while the rows scroll: the
     card is a fixed-height grid cell, .months is flex-shrink:0, and .grid
     takes the remaining height and scrolls (see below). */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;

  /* Fixed column widths shared by the month axis, the rows and the
     today-line overlay — keep all three in sync via these variables. */
  --gantt-label-w: 180px;
  --gantt-pct-w: 50px;

  /* Indent per nesting level for summary-task rows (label column only, so the
     pct + track columns stay aligned across depths). Mirrors the Scheduler's
     per-level indent. */
  --ms-indent: 16px;

  /* Fixed row + axis heights — load-bearing: the frozen list pane and the
     timeline pane are SEPARATE scroll boxes, so their rows only line up if
     both use the exact same heights. */
  --ms-row-h: 46px;
  --ms-axis-h: 46px;
}

/* Centered message for the load-failed / no-schedule states. */
._stateMsg_1gz84_76 {
  /* Center the single message line in the card body (the body is the
     position:relative Gantt container, so fill it and center). Matches the
     centered empty states of the Project Progress / Weather cards. */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--g500);
  font-size: var(--fs-sm);
}

/* Two panes side by side: the frozen group list (fixed width) + the timeline
   scroller (fills the rest). The horizontal scrollbar therefore belongs to the
   timeline pane and starts after the group list — and the timeline's overflow
   clips its bars/diamonds so they can't bleed into the list. */
._panes_1gz84_94 {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  position: relative; /* anchor for the jump-to-today button */
}

/* Floating "jump to today" pill — appears at the edge toward today when the
   today line is scrolled out of view. */
._todayJump_1gz84_104 {
  position: absolute;
  top: 12px;
  z-index: var(--z-raised-2);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 10px 5px 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--info);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
._todayJumpLeft_1gz84_121 { left: calc(var(--gantt-label-w) + var(--gantt-pct-w) + 8px); }
._todayJumpRight_1gz84_122 { right: 8px; }

/* Left pane: names + %. Vertical position mirrored from the timeline scroller
   via JS (it has no scrollbar of its own); never scrolls horizontally. */
._frozenPane_1gz84_126 {
  flex-shrink: 0;
  width: calc(var(--gantt-label-w) + var(--gantt-pct-w));
  overflow: hidden;
  position: relative;
}

/* Header spacer above the rows, matched to the axis height so the first row in
   each pane starts at the same Y. Sticky so it stays while the list scrolls. */
._frozenCorner_1gz84_135 {
  height: var(--ms-axis-h);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: var(--z-raised-2);
}

._frozenRow_1gz84_143 {
  display: grid;
  grid-template-columns: var(--gantt-label-w) var(--gantt-pct-w);
  align-items: center;
  height: var(--ms-row-h);
  border-top: 1px solid var(--g50);
}

/* Right pane: the timeline. Owns BOTH scrollbars; the axis + grid grow to the
   fixed-px track width so the content overflows and scrolls horizontally. */
._scroller_1gz84_153 {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

/* Axis: year row + tick row, pinned to the top while the rows scroll. */
._axis_1gz84_160 {
  position: sticky;
  top: 0;
  width: var(--track-w);
  min-width: 100%;
  height: var(--ms-axis-h);
  box-sizing: border-box;
  background: var(--color-surface);
  z-index: var(--z-raised-2); /* above bars/diamonds during vertical scroll */
  padding: 6px 0 8px;
  font-size: var(--fs-xs);
  color: var(--g600);
}
._years_1gz84_173 { position: relative; height: 16px; }

._year_1gz84_173 {
  position: absolute;
  top: 0;
  padding-left: 6px;
  font-weight: 600;
  color: var(--g600);
  border-left: 1px solid var(--g100);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}
._ticks_1gz84_186 { position: relative; height: 16px; }

/* Fraction-positioned tick label (month name / day-of-month). */
._month_1gz84_51 {
  position: absolute;
  top: 0;
  padding-left: 6px;
  white-space: nowrap;
}

/* Week-of-month marker (day view) — bold so the week buckets stand out. */
._weekLabel_1gz84_197 {
  position: absolute;
  top: 0;
  padding-left: 6px;
  white-space: nowrap;
  font-weight: 700;
  color: var(--navy);
}

._grid_1gz84_51 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--track-w);
  min-width: 100%;

  /* The today + gridline overlays live inside .grid (inset 0) so they scroll
     with the rows; the scroller owns the actual overflow. `isolation` scopes
     the z-index layering (gridlines < rows < today) to this subtree. */
  isolation: isolate;
}

/* One timeline row — height-locked to the frozen list's rows so they align. */
._trackRow_1gz84_220 {
  display: flex;
  align-items: center;
  height: var(--ms-row-h);
  border-top: 1px solid var(--g50);

  /* Above the shared gridline overlay (z-base), below the today line. */
  position: relative;
  z-index: var(--z-raised-1);
}

._rowLabel_1gz84_231 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  min-width: 0; /* allow the name to ellipsis within the fixed label column */

  /* Indent ONLY the label by nesting depth (set inline as --ms-depth). */
  padding-left: calc(var(--ms-depth, 0) * var(--ms-indent));
}

/* Text stack (name + status) beside the collapse chevron. */
._rowLabelText_1gz84_243 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* re-enable ellipsis inside the flex row */
}

/* Collapse/expand chevron for group + summary rows. */
._chevron_1gz84_251 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--g500);
  font-size: var(--fs-2xs);
  line-height: 1;
}
._chevron_1gz84_251:hover { color: var(--navy); }
._chevron_1gz84_251 svg { display: block; transition: transform 120ms ease; }

/* Collapsed: rotate the down-chevron to point right (same glyph as the
   project selector caret). */
._chevronCollapsed_1gz84_272 svg { transform: rotate(-90deg); }

._chevronSpacer_1gz84_274 {
  width: 14px;
  flex-shrink: 0;
}

/* (Row-name tooltip reuses the shared MilestoneTooltip `.tip` + `.tipWrap`.) */

._rowName_1gz84_281 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nested summary rows read lighter than the bold navy group header. */
._rowNested_1gz84_291 ._rowName_1gz84_281 {
  font-weight: 500;
  color: var(--g600);
}

._rowStatus_1gz84_296 {
  font-size: var(--fs-xs);
  font-weight: 500;
}

._rowStatusDelayed_1gz84_301 { color: var(--red);   }
._rowStatusOnTrack_1gz84_302 { color: var(--status-completed-text);      }
._rowStatusPending_1gz84_303 { color: var(--g500);  }

._rowPct_1gz84_305 {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g600);
  text-align: left;
}

._track_1gz84_220 {
  position: relative;
  height: 26px;
  width: 100%;
  background: transparent;
}

/* Single gridline layer spanning the whole grid (drawn once, not per row).
   Pinned to the track column like the today overlay; sits behind the rows. */
._gridlines_1gz84_321 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Dense (day) granularity: a CSS gradient instead of thousands of span nodes —
   `--grid-step` (px per day) is set inline by the TSX. */
._gridlinesDense_1gz84_330 {
  background-image: repeating-linear-gradient(
    to right,
    var(--g100) 0 1px,
    transparent 1px var(--grid-step, 8px)
  );
}

/* Faint vertical gridline (week/month), full grid height inside .gridlines. */
._gridline_1gz84_321 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--g100);
}

/* Coarser gridline — the next unit up (month lines in week view, week lines in
   day view, year lines in month view). Darker than the fine gridline so the
   larger buckets read clearly. */
._gridlineCoarse_1gz84_350 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--g200);
}

._bar_1gz84_358 {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  z-index: var(--z-raised-1);
  cursor: pointer; /* click → open in the Scheduler at this activity's start */
}
._bar_1gz84_358:hover { filter: brightness(0.94); }

._bar_1gz84_358:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

._barCritical_1gz84_381 { background: var(--dashboard-critical-bar); }
._barOnTrack_1gz84_382  { background: var(--dashboard-ontrack-bar); }
._barPending_1gz84_383  { background: var(--g300); }

._barLabel_1gz84_385 {
  text-overflow: ellipsis;
  overflow: hidden;

  /* Don't let the bar label steal the pointer from an overlapping milestone
     diamond (Mission 4). */
  pointer-events: none;
}

/* Milestone diamond — mirrors the legend chip: outline diamond centered on
   its date. Surface fill masks the gridline / bar running behind it. */
._milestone_1gz84_396 {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  background: var(--color-surface);
  border: 1.5px solid var(--g500);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: var(--z-raised-2); /* above .bar (z-raised-1) */
  pointer-events: auto; /* explicit: diamond owns the pointer over the bar */
  cursor: pointer; /* click → open in the Scheduler at this milestone's date */
}
._milestone_1gz84_396:hover { border-color: var(--navy); }

._milestone_1gz84_396:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* Transparent hit pad (~21px) so the diamond is reliably hoverable even when
   it sits on top of a task bar (Mission 4). */
._milestone_1gz84_396::before {
  content: '';
  position: absolute;
  inset: -6px;
}

/* "Today" marker — vertical dashed line + label. The overlay spans the whole
   timeline pane, so the line's `left` percentage supplied by the TSX is an
   honest fraction of the timeline window. Label sits at the gridline's head. */
._todayOverlay_1gz84_426 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-raised-2);
}

._today_1gz84_104 {
  position: absolute;
  top: 0;
  bottom: -2px;
  width: 0;
  border-left: 1.5px dashed var(--info);
}

._todayLabel_1gz84_441 {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  color: var(--info);
  background: var(--color-surface);
  padding: 0 4px;
}
/* What a reader is told about their standing instruction — before saving, in
   the settings dialog, and every morning above the insights. Quiet amber
   marks: these are things to know, not errors. */

._lines_1hgzw_5 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._line_1hgzw_5 {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--navy);
}

._line_1hgzw_5::before {
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--color-warn);
  content: '';
}

._check_1hgzw_33 {
  padding: 8px 10px;
  border-radius: var(--r-lg);
  background: var(--color-warn-bg);
}

._checking_1hgzw_39,
._clear_1hgzw_40,
._previewPending_1hgzw_41 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
}

/* A busy line: the ring, then what is on its way. */
._checking_1hgzw_39,
._previewPending_1hgzw_41 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nested, so it outranks the Loader's own ring whatever order the sheets load in. */
._checking_1hgzw_39 ._spinner_1hgzw_56,
._previewPending_1hgzw_41 ._spinner_1hgzw_56 {
  flex: none;
  margin: 0;
  border-width: 2px;
}

/* Above the insights: the reader's own instruction, and how today went. */
._panel_1hgzw_64 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--brand-blue-deep);
  border-radius: var(--r-lg);
  background: var(--white);
}

._panelLabel_1hgzw_75,
._previewLabel_1hgzw_76 {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-blue-deep);
}

/* The preview is the summary's own prose, so it reads like the instruction's note. */
._note_1hgzw_86,
._previewSummary_1hgzw_87 {
  max-width: 72ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--navy);
}

/* Today's summary, before saving: the brief's words on a quiet card, and the
   question the reader decides on beneath them. */
._preview_1hgzw_41 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--brand-blue-border-soft);
  border-radius: var(--r-lg);
  background: var(--brand-blue-pale);
}

._previewAsk_1hgzw_107 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}
/* The written passage, and it looks like the assistant's: a panel washed in
   the brand blue this product's AI surfaces glow with, with the sparkles mark
   at its head. Whatever it sits on — the brief's ruled white sheet, or a
   dashboard card — is quieter than it is. A reader tells written from read by
   material, before reading a word.

   Placement (margins) belongs to the host surface; everything inside the
   panel belongs here. */

._panel_od0s2_10 {
  padding: 16px 20px 14px;
  border: 1px solid var(--brand-blue-border-soft);
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, var(--brand-blue-pale) 0%, var(--brand-blue-bg-soft) 50%, var(--brand-blue-pale) 100%);
  background-size: 220% 220%;
  box-shadow: var(--ai-shadow-sm);

  /* The wash drifts, slowly enough that nobody sees it move — only that the
     panel is alive in a way the surface under it is not. */
  animation: _ledeDrift_od0s2_1 16s ease-in-out infinite alternate;
}

@keyframes _ledeDrift_od0s2_1 {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

._head_od0s2_28 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* The mark the assistant wears everywhere, on the tint it glows with. */
._mark_od0s2_36 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-circle);
  background: var(--brand-blue-tint);
  color: var(--brand-blue-deep);
  box-shadow: 0 0 0 4px var(--brand-blue-focus-ring);

  /* And the mark breathes: the halo swells and settles, the way the data-flow
     dots do around the orca next door. */
  animation: _markBreathe_od0s2_1 3.6s ease-in-out infinite;
}

@keyframes _markBreathe_od0s2_1 {
  0%, 100% { box-shadow: 0 0 0 3px var(--brand-blue-focus-ring); }
  50% { box-shadow: 0 0 0 8px var(--brand-blue-focus-ring); }
}

._label_od0s2_57 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-blue-deep);
}

/* Three at most, so they read as a short list rather than a column of prose.
   No markers: the panel already says this whole passage is the written one,
   and numbering would imply a sequence where there is only priority. */
._list_od0s2_67 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._insight_od0s2_76 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* A hairline between insights, not a card around each: they are paragraphs of
   one written passage, told apart without being boxed. */
._insight_od0s2_76 + ._insight_od0s2_76 {
  padding-top: 14px;
  border-top: 1px solid var(--brand-blue-border-soft);
}

/* The state of the site: the passage a manager reads instead of the ledger,
   set a step larger than the items under it. */
._overview_od0s2_91 {
  max-width: 72ch;
  margin: 0 0 16px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--navy);
}

/* The long status, in the same voice as the short one and set apart from it by
   a rule rather than a box: it is the same passage continued, not an aside. */
._overviewDetail_od0s2_101 {
  max-width: 72ch;
  margin: 10px 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--brand-blue-border-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--g600);
}

._subhead_od0s2_111 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-blue-deep);
}

._quiet_od0s2_118 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--g600);
}

/* Severity leads the headline, in the product's own status colours: red for
   what can stop work, amber for follow-up, the assistant's blue for context. */
._severity_od0s2_126 {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: var(--r-lg);
  background: var(--brand-blue-tint);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 1px;
  color: var(--brand-blue-deep);
}

._severity_od0s2_126[data-severity='critical'] {
  background: var(--color-error-bg);
  color: var(--color-error);
}

._severity_od0s2_126[data-severity='warning'] {
  background: var(--color-warn-bg);
  color: var(--navy);
}

._headline_od0s2_150 {
  max-width: 72ch;
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}

._why_od0s2_159 {
  max-width: 62ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g600);
}

/* The way to the long version: it sits at the end of the sentence it extends,
   quiet, reading as text rather than as a control until you are near it. */
._more_od0s2_169 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--brand-blue-deep);
  cursor: pointer;
  white-space: nowrap;
}

._more_od0s2_169:hover {
  text-decoration: underline;
}

._more_od0s2_169:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* The product's disclosure caret, rotated when closed (frontend/CLAUDE.md). */
._caret_od0s2_194 {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease;
}

._caret_od0s2_194[data-collapsed='true'] {
  transform: rotate(-90deg);
}

._detail_od0s2_204 {
  max-width: 62ch;
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--g600);
}

._foot_od0s2_212 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 6px 0 0;
}

/* The question, in bordered blue — the one thing in the passage you can
   press, and it says what it will ask. */
._ask_od0s2_222 {
  max-width: 60ch;
  padding: 5px 10px;
  border: 1px solid var(--brand-blue-border-soft);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: var(--brand-blue-deep);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

._ask_od0s2_222:hover {
  border-color: var(--brand-blue-light);
  background: var(--brand-blue-pale);
}

/* Which reading this rests on: that section's own mark, and — where the
   surface holds the reading — a jump to it. */
._from_od0s2_245 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--g500);
  text-decoration: none;
}

a._from_od0s2_245:hover {
  color: var(--navy);
  text-decoration: underline;
}

/* The same mark the brief's ledger lines wear, at the size a footnote takes:
   filled when the section was read, hollow when nobody looked. */
._fromMark_od0s2_261 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--g300);
}

._from_od0s2_245[data-state='rows'] ._fromMark_od0s2_261 {
  background: var(--color-warn);
}

._from_od0s2_245[data-state='none'] ._fromMark_od0s2_261 {
  background: var(--color-success-mid);
}

._from_od0s2_245[data-state='unavailable'] ._fromMark_od0s2_261,
._from_od0s2_245[data-state='unconfirmed'] ._fromMark_od0s2_261 {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--g400);
}

/* Write again: a quiet round control at the far end of the head, reading as
   part of the panel's furniture until it is wanted. It turns while the new
   reading is being written. */
._regenerate_od0s2_285 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-circle);
  background: none;
  color: var(--brand-blue-deep);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

._regenerate_od0s2_285:hover:not(:disabled) {
  border-color: var(--brand-blue-border-soft);
  background: var(--color-surface);
}

._regenerate_od0s2_285:disabled {
  color: var(--g400);
  cursor: default;
}

._regenerateIcon_od0s2_311 {
  display: inline-flex;
}

._regenerateIcon_od0s2_311[data-spinning='true'] {
  animation: _regenerateSpin_od0s2_1 0.9s linear infinite;
}

@keyframes _regenerateSpin_od0s2_1 {
  to { transform: rotate(360deg); }
}

/* Writing, failed, or read-and-quiet: one centred line in the space the list
   would take, so the panel never collapses to a bare heading. */
._notice_od0s2_325 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--g600);
}

._noticeLine_od0s2_338 {
  margin: 0;
}

._retry_od0s2_342 {
  padding: 6px 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}

._retry_od0s2_342:hover {
  border-color: var(--g300);
}

/* A failed rewrite leaves the earlier reading in place and says so above it. */
._failedAgain_od0s2_358 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  color: var(--g600);
}

._ask_od0s2_222:focus-visible,
._from_od0s2_245:focus-visible,
._regenerate_od0s2_285:focus-visible,
._retry_od0s2_342:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  ._panel_od0s2_10,
  ._mark_od0s2_36,
  ._regenerateIcon_od0s2_311[data-spinning='true'] {
    animation: none;
  }

  ._ask_od0s2_222,
  ._regenerate_od0s2_285 {
    transition: none;
  }
}
/* The morning card. The panel inside it is the assistant's own written
   passage (`briefInsights.module.css`) — this file owns only the card's
   frame around it: where the panel sits, and what the card says when there
   is no panel to show. */

._body_1jrb0_6 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
}

/* The greeting and the day, on one line: the sheet's masthead at card scale.
   It sits above the written passage rather than in the header, where the
   card's own name lives. */
._dateline_1jrb0_16 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

._day_1jrb0_23 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* The way to the full sheet, in the header where a card's secondary action
   lives everywhere else on this dashboard. */
._open_1jrb0_30 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--brand-blue-deep);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

._open_1jrb0_30:hover {
  border-color: var(--brand-blue-light);
  background: var(--brand-blue-pale);
}

._open_1jrb0_30:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

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

/* The day, and — only when the reader has narrowed their brief — how much of it
   is hidden. One row so the two read as one piece of provenance rather than as a
   heading and a warning. */
._dateline_1jrb0_16 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

._muted_1jrb0_73 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}
/* ---------- Project Progress body styles ----------
   Card shell + header come from <DashboardCard>. This module styles
   the card-specific content (ring, phase list) plus the title icon
   tint and the SPI affordance in the header-right slot. */

._titleIconTeal_ar8jy_6 {
  display: inline-flex;
  color: var(--dashboard-teal);
  line-height: 0;
}

._spi_ar8jy_12 {
  font-size: var(--fs-xs);
  color: var(--g500);
  letter-spacing: 0.3px;
}

._body_ar8jy_18 {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}

._stateMsg_ar8jy_27 {
  margin: auto;
  color: var(--g500);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ---------- Headline (ring + text) ---------- */
._headlineRow_ar8jy_35 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._ringWrap_ar8jy_41 {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

._ring_ar8jy_41 {
  width: 64px;
  height: 64px;
  display: block;
}

._ringValue_ar8jy_54 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--dashboard-teal);
}

._headlineText_ar8jy_64 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._headlineTitle_ar8jy_71 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._headlineMeta_ar8jy_77 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._headlineNote_ar8jy_82 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--amber);
  font-weight: 500;
  margin-top: 2px;
}

/* ---------- Phase list ---------- */
._phases_ar8jy_93 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._phase_ar8jy_93 {
  display: grid;
  grid-template-columns: 20px 1fr 120px 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: var(--fs-sm);
}

._phaseIcon_ar8jy_110 {
  display: inline-flex;
  line-height: 0;
}

._iconComplete_ar8jy_115   { color: var(--dashboard-teal); }
._iconInProgress_ar8jy_116 { color: var(--dashboard-teal); }
._iconPending_ar8jy_117    { color: var(--g300); }

._phaseName_ar8jy_119 {
  color: var(--g700);
}

._phaseBar_ar8jy_123 {
  height: 6px;
  background: var(--g100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

._phaseFill_ar8jy_130 {
  height: 100%;
  background: var(--dashboard-teal);
  border-radius: var(--r-pill);
}

._phasePct_ar8jy_136 {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--g600);
  font-weight: 500;
}
/* ---------- Delivery body styles ----------
   Card shell + header come from <DashboardCard>. */

._titleIconTruck_11k3u_4 {
  display: inline-flex;
  color: var(--dashboard-teal);
  line-height: 0;
}

._viewAll_11k3u_10 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--info);
  text-decoration: none;
  white-space: nowrap;
}

._viewAll_11k3u_10:hover {
  text-decoration: underline;
}

/* Error / all-clear one-liner in place of the list. */
._stateLine_11k3u_23 {
  font-size: var(--fs-xs);
  color: var(--g500);
  padding: 6px 0;
}

/* Loading skeleton — same pulse idiom as the Activity Alerts card. */
._skeletonList_11k3u_30 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._skeletonRow_11k3u_36 {
  height: 44px;
  border-radius: var(--r-lg);
  background: var(--g100);
  animation: _deliveryPulse_11k3u_1 1.4s ease-in-out infinite;
}

@keyframes _deliveryPulse_11k3u_1 {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

._body_11k3u_48 {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Alert strip ----------
   The four Deliveries & Stock groups, in the System Alerts card's own pill
   palette: fill by severity, dashed for the two "there is no figure here"
   groups. Each pill is a multi-select filter over the list below — all off
   means everything shows. */
._strip_11k3u_62 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._stripPill_11k3u_68 {
  display: inline-block;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

/* The strip's pills are buttons; the list rows reuse the same classes as
   inert badges, so the interactive affordances bind to the element, not the
   class. */
button._stripPill_11k3u_68 {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

button._stripPill_11k3u_68:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* Pressed = part of the filter. A ring in the pill's own colour — the fill
   already carries severity, so state gets a new channel. */
._stripPill_11k3u_68[aria-pressed='true'] {
  box-shadow: 0 0 0 2px currentcolor;
}

/* The other pills while a filter is on: still live, visibly not selected. */
._stripPill_11k3u_68[data-dimmed] {
  opacity: 0.55;
}

._stripGap_11k3u_104 {
  background: var(--dashboard-urgent-bg);
  color: var(--red);
}

/* .stripPill doubled for specificity: these carry a border that must survive
   button.stripPill's border reset. */
._stripPill_11k3u_68._stripRanOut_11k3u_111 {
  background: var(--g50);
  color: var(--g600);
  border: 1px dashed var(--g400);
}

._stripLate_11k3u_117 {
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
}

._stripPill_11k3u_68._stripUntracked_11k3u_122 {
  background: var(--info-tint);
  color: var(--info);
  border: 1px dashed var(--info);
}

/* ---------- Alert rows ---------- */
._alertList_11k3u_129 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._alertRow_11k3u_137 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}

._rowMain_11k3u_145 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._rowName_11k3u_152 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._rowMeta_11k3u_161 {
  font-size: var(--fs-2xs);
  color: var(--g500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "+N more" / "Less" — the fold on the capped list. Grey and unweighted so
   it never reads as another row; same look as the KPI tile's fold. */
._moreButton_11k3u_171 {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g500);
  cursor: pointer;
  border-radius: var(--r-sm);
}

._moreButton_11k3u_171:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

._moreButton_11k3u_171:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}
/* ---------- Safety & Compliance body styles ----------
   Card shell + header come from <DashboardCard>. */

._body_1lolz_4 {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}

._stateMsg_1lolz_13 {
  margin: auto;
  color: var(--g500);
  font-size: var(--fs-sm);
}

/* ---------- Open-issues headline ---------- */
._headline_1lolz_20 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: 2px;
}

._headlineValue_1lolz_28 {
  font-family: var(--f-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.02em;
}

._headlineLabel_1lolz_37 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* ---------- KPI tiles ---------- */
._tiles_1lolz_46 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

._tile_1lolz_46 {
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

._tileLabel_1lolz_63 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g500);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

._tileValue_1lolz_71 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

/* ---------- Sections ---------- */
._section_1lolz_80 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--g100);
  padding-top: 10px;
}

._sectionTitle_1lolz_88 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g500);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

._empty_1lolz_100 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g400);
}

._list_1lolz_106 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* "Show N more" / "Show less" toggle under a capped section list. */
._showMore_1lolz_116 {
  appearance: none;
  background: none;
  border: 0;
  margin: 2px 0 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--info);
  cursor: pointer;
  align-self: flex-start;
}

._showMore_1lolz_116:hover {
  text-decoration: underline;
}

._showMore_1lolz_116:focus-visible,
._certGroupHeader_1lolz_137:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Open-issue rows ---------- */
._issueRow_1lolz_144 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
}

._issueTitle_1lolz_152 {
  color: var(--g800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._issueLoc_1lolz_159 {
  color: var(--g500);
  white-space: nowrap;
}

._dot_1lolz_164 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
}

._dotHigh_1lolz_170 { background: var(--red); }
._dotMed_1lolz_171  { background: var(--amber); }

/* ---------- High-risk activity rows ---------- */
._activityRow_1lolz_174 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--g800);
}

._activityIcon_1lolz_183 {
  display: inline-flex;
  line-height: 0;
}

._iconHot_1lolz_188 { color: var(--amber); }
._iconPpe_1lolz_189 { color: var(--info); }
._iconOther_1lolz_190 { color: var(--g500); }

._activityLabel_1lolz_192 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._activityLoc_1lolz_198 {
  color: var(--g500);
  white-space: nowrap;
}

/* ---------- Certification rows ----------
   Two lines so a long certificate name (which truncates) can never hide the
   worker — the name + due sit on line 1, the worker on line 2. */
._certRow_1lolz_206 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--fs-xs);
  color: var(--g800);
}

._certMain_1lolz_214 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._certNameText_1lolz_220 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

._certPerson_1lolz_229 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g500);
}

._certDue_1lolz_237 {
  white-space: nowrap;
  font-weight: 500;
}

._certOverdue_1lolz_242 { color: var(--red); }
._certSoon_1lolz_243    { color: var(--g500); }

/* ---------- Grouped certs (one certificate, several workers) ---------- */
._certGroup_1lolz_137 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._certGroupHeader_1lolz_137 {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: var(--g800);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
}

._chevron_1lolz_269 {
  display: inline-flex;
  line-height: 0;
  color: var(--g500);
  transition: transform 0.15s ease;
}

._chevronOpen_1lolz_276 {
  transform: rotate(90deg);
}

._certGroupCount_1lolz_280 {
  font-size: var(--fs-2xs);
  color: var(--g500);
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-pill);
  padding: 1px 6px;
  white-space: nowrap;
}

._certGroupList_1lolz_290 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._certGroupRow_1lolz_299 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--g700);
}
/* ---------- Weather Impact body styles ----------
   Card shell + header come from <DashboardCard>. */

._titleIconInfo_1cf3t_4 {
  display: inline-flex;
  color: var(--info);
  line-height: 0;
}

._conditionsRow_1cf3t_10 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

._condition_1cf3t_10 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--g600);
}

._condition_1cf3t_10 :first-child { color: var(--amber); }

/* ---------- Body grid ---------- */

/* Rows: ribbon / content (assessment + side) / disclaimer. The middle row
   takes ALL the free height — without an explicit template, align-content's
   default `stretch` spreads the cell's spare height across every row, which
   inflates the forecast-day tiles and floats the disclaimer mid-card. */
._body_1cf3t_32 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 14px 20px 18px;
}

@media (width <= 900px) {
  ._body_1cf3t_32 {
    grid-template-columns: 1fr;

    /* One column → one row per child: ribbon / assessment / side / disclaimer.
       Keep the assessment as the stretch row and the disclaimer at the bottom. */
    grid-template-rows: auto 1fr auto auto;
  }
}

._assessment_1cf3t_50 { min-width: 0; }

._assessmentHead_1cf3t_52 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 24px;
}

._sectionTitle_1cf3t_61 {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g600);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* ---------- Activity grid pagination (top-right nav) ---------- */
._activityNav_1cf3t_71 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._activityNavStatus_1cf3t_77 {
  min-width: 30px;
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}

._activityNavBtn_1cf3t_86 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--g600);
  cursor: pointer;
  line-height: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
}

._activityNavBtn_1cf3t_86:hover:not(:disabled),
._activityNavBtn_1cf3t_86:focus-visible:not(:disabled) {
  background: var(--g100);
  color: var(--navy);
  border-color: var(--g300);
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

._activityNavBtn_1cf3t_86:disabled {
  opacity: 0.4;
  cursor: default;
}

._navIconPrev_1cf3t_116 {
  display: inline-flex;
  line-height: 0;
  transform: rotate(180deg);
}

._tiles_1cf3t_122 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@keyframes _activitySlideNext_1cf3t_1 {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes _activitySlidePrev_1cf3t_1 {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

._slideNext_1cf3t_138 { animation: _activitySlideNext_1cf3t_1 260ms ease; }
._slidePrev_1cf3t_139 { animation: _activitySlidePrev_1cf3t_1 260ms ease; }

@media (prefers-reduced-motion: reduce) {
  ._slideNext_1cf3t_138,
  ._slidePrev_1cf3t_139 { animation: none; }
}

@media (width <= 560px) {
  ._tiles_1cf3t_122 { grid-template-columns: 1fr; }
}

._tile_1cf3t_122 {
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._tileHead_1cf3t_160 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

._tileName_1cf3t_167 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._risk_1cf3t_173 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

._riskLow_1cf3t_182    { background: var(--status-completed-bg); color: var(--dashboard-teal); }
._riskMedium_1cf3t_183 { background: var(--status-for-review-bg);  color: var(--status-for-review-text); }
._riskHigh_1cf3t_184   { background: var(--status-rejected-bg);   color: var(--red); }

._tileDetail_1cf3t_186 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.35;
}

/* ---------- Side panels ---------- */
._side_1cf3t_194 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._sidePanel_1cf3t_200 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._sidePanelTitle_1cf3t_206 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g600);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

._sidePanelTitle_1cf3t_206 :first-child {
  color: var(--g500);
  line-height: 0;
}

._sideList_1cf3t_223 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._sideRow_1cf3t_232 {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  font-size: var(--fs-xs);
  color: var(--g700);
  line-height: 1.35;
}

._sideRowWarning_1cf3t_244 {
  background: var(--dashboard-mock-bg);
  border: 1px solid var(--dashboard-warning-border);
}

._sideRowInfo_1cf3t_249 {
  background: var(--g50);
  border: 1px solid var(--g100);
}

._sideRowIcon_1cf3t_254 {
  display: inline-flex;
  line-height: 0;
  color: var(--g500);
  margin-top: 2px;
}

._sideRowWarning_1cf3t_244 ._sideRowIcon_1cf3t_254 { color: var(--amber); }
._sideRowInfo_1cf3t_249 ._sideRowIcon_1cf3t_254    { color: var(--info);  }

/* "All clear" empty state — soft positive tint, reuses the low-risk palette */
._sideRowClear_1cf3t_265 {
  background: var(--status-completed-bg);
  border: 1px solid var(--status-completed-bg);
  color: var(--g700);
}
._sideRowClear_1cf3t_265 ._sideRowIcon_1cf3t_254 { color: var(--dashboard-teal); }

._stateMsg_1cf3t_272 {
  padding: 18px 20px;
  font-size: var(--fs-sm);
  color: var(--g600);
}

/* No-data body: the card keeps its full laid-out height, so center the single
   message line both ways in the card body. */
._bodyEmpty_1cf3t_280 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---------- Advisory pagination ---------- */
._advisoryPagination_1cf3t_288 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 2px 0 0;
}

._advisoryPageBtn_1cf3t_296 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g600);
  cursor: pointer;
  line-height: 1.4;
  transition: background 120ms, color 120ms;
}

._advisoryPageBtn_1cf3t_296:hover,
._advisoryPageBtn_1cf3t_296:focus-visible {
  background: var(--g100);
  color: var(--navy);
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

/* Equipment name prefix — bold inline label before advisory text */
._advisoryEquipment_1cf3t_321 {
  font-weight: 600;
  color: var(--navy);
}

/* Muted empty-state line when no activity insights are available */
._emptyLine_1cf3t_327 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  font-style: italic;
}

/* Tiny AI disclaimer, spans the full body width, pinned to the card's
   bottom-right (its row is the last track of the body grid; the 1fr
   content row above absorbs any spare height). */
._disclaimer_1cf3t_337 {
  grid-column: 1 / -1;
  align-self: end;
  margin: 8px 0 0;
  text-align: right;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

/* ---------- Forecast ribbon (7-day selector strip) ---------- */
._ribbon_1cf3t_347 {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--g100);
  margin-bottom: var(--s-3);
  grid-column: 1 / -1;
}

._ribbonDay_1cf3t_356 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-1);
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  font-family: inherit;
}

._ribbonDay_1cf3t_356:hover:not([aria-pressed='true']) {
  background: var(--g100);
  border-color: var(--g200);
}

._ribbonDaySelected_1cf3t_376 {
  border-color: var(--info);
  background: var(--info-tint-soft);
}

._ribbonHead_1cf3t_381 {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

._ribbonDayLabel_1cf3t_387 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--navy);
}

._ribbonDate_1cf3t_393 {
  font-size: var(--fs-2xs);
  color: var(--g600);
}

._ribbonTemp_1cf3t_398 {
  font-size: var(--fs-2xs);
  color: var(--g600);
  text-align: center;
  line-height: 1.3;
}

/* ---------- One-word weather condition (inside ribbon cells) ---------- */
._ribbonCondition_1cf3t_406 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g600);
}

/* Loading state for the section BELOW the ribbon — spans both columns so the
   ribbon stays static and clickable while a newly-selected day loads. */
._bodyLoading_1cf3t_414 {
  grid-column: 1 / -1;
}

/* ---------- Enriched tile lines (action + timeframe) ---------- */
._tileAction_1cf3t_419 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g700);
  line-height: 1.35;
  margin-top: 6px;
}

._tileWhen_1cf3t_427 {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 2px 7px;
  margin-top: 5px;
  background: var(--status-planned-bg);
  color: var(--status-planned-text);
}
/* ---------- Workforce Status card body styles ----------
   Card shell + header come from <DashboardCard>. This module only
   styles the card body's content: stat-row, trade list, and shift
   footer. */

._body_3561s_6 {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Top stat row ---------- */
._stats_3561s_16 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

._stat_3561s_16 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

._statIcon_3561s_30 {
  color: var(--g500);
  line-height: 0;
  margin-bottom: 4px;
  display: inline-flex;
}

._statMissing_3561s_37 ._statIcon_3561s_30 { color: var(--red); }

._statValue_3561s_39 {
  font-family: var(--f-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

._statMissing_3561s_37 ._statValue_3561s_39 { color: var(--red); }

._statLabel_3561s_49 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---------- Trade bars ---------- */
._tradeList_3561s_58 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Flex-fill the remaining card body so the trade list scrolls
   inside whatever space is left after the stats row + shift
   footer. Real sites carry many more professions than Lovable's
   4-row fixture, so internal scroll is the default. */
._tradeScroll_3561s_71 {
  flex: 1 1 auto;
}

._tradeRow_3561s_75 {
  display: grid;
  grid-template-columns: 80px 1fr 48px;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-xs);
}

._tradeName_3561s_83 {
  color: var(--navy);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._tradeBar_3561s_91 {
  height: 8px;
  background: var(--g100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

._tradeBarFill_3561s_98 {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 240ms ease;
}

._tradeRatio_3561s_104 {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
  text-align: right;
}

/* ---------- Shift footer ---------- */
._shift_3561s_113 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--g500);
  padding-top: 6px;
  border-top: 1px dashed var(--g100);
}

._shiftIcon_3561s_123 {
  font-size: var(--fs-sm);
}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.react-grid-item:hover > .react-resizable-handle {
  opacity: 1;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
/* Hosts react-grid-layout. The wrapper is the positioning context for the
   edit-mode snap-grid backdrop, which is rendered as one square per empty cell
   (see DashboardGrid) and aligned to RGL's cells.

   Deliberately uncapped: WidthProvider measures this wrapper, and DashboardGrid
   derives the square cell size from RGL's resolved column width, so the grid
   fills the page and the cells scale with it at any viewport width / zoom. */
._wrap_rivbi_8 {
  width: 100%;
  position: relative;
}

._grid_rivbi_13 {
  width: 100%;
  position: relative;
}

/* Each grid item is positioned absolutely by RGL; the card (a <section>) fills
   it. Target `> section` (not `> *`) so RGL's resize-handle sibling keeps its
   own size instead of stretching to the full card height. */
._cell_rivbi_21 > section {
  height: 100%;
}

/* ---------------- Edit mode ---------------- */

/* Snap-grid backdrop: a layer of rounded squares, one per EMPTY cell, sitting
   behind the grid. Each square is positioned/sized by DashboardGrid with the
   exact cell geometry, so cards cover their own cells perfectly (no peeking)
   and empty cells — including ones revealed while dragging — show a square. */
._backdrop_rivbi_31 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-base);
}

._slot_rivbi_38 {
  position: absolute;
  background-color: var(--g100);
  border-radius: var(--r-3xl);
}

/* The whole card is the drag target in edit mode — most discoverable. */
._grid_rivbi_13._editing_rivbi_45 .react-grid-item {
  cursor: move;
}

/* Resize grip: our own element, rendered through RGL's `resizeHandle` prop
   (see DashboardGrid). It keeps the library's `react-resizable-handle(-se)`
   classes for the drag-cancel selector and the built-in hide outside edit mode
   (`.react-resizable-hide`); these rules just override the bundled hover-only
   opacity + ::after arrow glyph and place our inline-SVG diagonal lines. */
._grid_rivbi_13._editing_rivbi_45 ._resizeHandle_rivbi_54 {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  right: 4px;
  bottom: 4px;
  opacity: 0.9;
  color: var(--g600);
  cursor: se-resize;
}

._grid_rivbi_13._editing_rivbi_45 ._resizeHandle_rivbi_54::after {
  content: none;
}

/* Per-card hide control: an 18px ✕ pinned to the cell's top-right corner,
   mirroring the resize grip's footprint at the opposite corner so the two
   edit affordances read as one pair. Mounted only while editing (DashboardGrid
   renders it conditionally), so no hide/show rule is needed here.

   Raised above the card's own positioned layers — the button is a later sibling
   of the card <section>, but a card that establishes its own z-index would
   otherwise paint over it.

   The hashed class name doubles as RGL's `draggableCancel` selector, so this
   rule set and DashboardGrid's DRAG_CANCEL must keep referring to the same
   class. */
._hideButton_rivbi_82 {
  position: absolute;

  /* Inset rather than tucked into the corner: at 4px it read as part of the
     card's rounded border instead of a control sitting on the card. */
  top: 10px;
  right: 10px;
  z-index: var(--z-raised-2);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  background-color: var(--color-surface);
  color: var(--g500);
  cursor: pointer;
}

._hideButton_rivbi_82:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Real control, not decoration: keyboard users must see where focus is. */
._hideButton_rivbi_82:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
  border-color: var(--red);
  color: var(--red);
}

/* Drag/resize placeholder: the snap target under the card while dragging or
   resizing — the cell that dictates where the card lands. Fully transparent by
   design: the edit-mode snap-grid backdrop already marks the cells, so the
   landing spot needs no paint of its own. The rule must stay even so — RGL's
   bundled stylesheet paints this red by default. */
._grid_rivbi_13 .react-grid-placeholder {
  background: none;
  border: none;
}
._controls_hpj7f_1 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* The "Default ▾" trigger and the inline name input below are sized to match
   the shared Button `size="md"` (40px tall, --r-md, --fs-sm) so the two
   top-level controls — and the edit-mode row — read as one matched pair. */

/* "Default ▾" trigger showing the active layout name */
._trigger_hpj7f_12 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 220px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--g200);
  background: var(--color-surface);
  color: var(--navy);
  font: 600 var(--fs-sm) var(--f-body);
  cursor: pointer;
}

._trigger_hpj7f_12:hover {
  background: var(--g50);
}

._triggerLabel_hpj7f_31 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Edit-mode "Save ▾" trigger ----------
   Mirrors the shared Button `variant="primary" size="md"` (filled navy, 40px,
   --r-md, --fs-sm/600) so it matches the non-edit row's primary button — Base
   UI's Popover.Trigger renders its own <button>, so we style it directly
   rather than wrapping the shared Button (which doesn't forward a ref). */
._saveTrigger_hpj7f_42 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--color-surface);
  font: 600 var(--fs-sm) var(--f-body);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

._saveTrigger_hpj7f_42:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

/* ---------- Edit-mode save popover ---------- */
._savePopup_hpj7f_63 {
  width: 260px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--navy-soft);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-popover);
  outline: none;
}

._saveForm_hpj7f_73 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._saveInput_hpj7f_79 {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--navy);
  font: 500 var(--fs-sm) var(--f-body);
  outline: none;
}

._saveInput_hpj7f_79:focus {
  border-color: var(--sidebar-accent);
}

/* ---------- Popover ---------- */

/* Deliberately BELOW the topbar rather than at --z-popover. These popovers are
   anchored to the dashboard header, which scrolls away with the content: Base UI
   keeps the popup glued to its trigger, so at --z-popover it slid up and painted
   over the app chrome. At this rung the topbar covers it on the way out while it
   still sits above the cards. */
._positioner_hpj7f_103 {
  z-index: var(--z-under-chrome);
  outline: none;
}

._popup_hpj7f_108 {
  width: 280px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--navy-soft);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-popover);
  outline: none;
}

._popupTitle_hpj7f_118 {
  margin: 2px 6px 8px;
  font: 700 var(--fs-2xs) var(--f-body);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--g600);
}

._listScroll_hpj7f_126 {
  margin: 0 0 8px;
  max-height: 260px;
}

._list_hpj7f_126 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._row_hpj7f_140 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 0;
  border-radius: var(--r-xl);
  background: none;
  color: var(--navy);
  font: 500 var(--fs-sm) var(--f-body);
  text-align: left;
  cursor: pointer;
}

._row_hpj7f_140:hover {
  background: var(--g50);
}

._rowActive_hpj7f_160 {
  background: var(--ops-select-tint);
}

._rowSelect_hpj7f_164 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

._check_hpj7f_179 {
  flex-shrink: 0;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-accent);
}

._rowName_hpj7f_188 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rowActions_hpj7f_194 {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

._row_hpj7f_140:hover ._rowActions_hpj7f_194 {
  opacity: 1;
}

._iconBtn_hpj7f_205 {
  display: inline-flex;
  padding: 5px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--g600);
  cursor: pointer;
}

._iconBtn_hpj7f_205:hover {
  background: var(--g100);
  color: var(--navy);
}

._renameForm_hpj7f_220 {
  padding: 4px 8px;
}

._renameInput_hpj7f_224 {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--navy);
  font: 500 var(--fs-sm) var(--f-body);
  outline: none;
}

._renameInput_hpj7f_224:focus {
  border-color: var(--sidebar-accent);
}

/* ---------- Edit-mode cards popover (per-card visibility) ---------- */

/* Count pill on the "Cards n/total ▾" trigger. The trigger itself reuses
   `.trigger` above (neutral 40px select style), so only the pill is new. Mono
   digits + pill radius so the ratio reads as a value, not as another word. */
._cardsCount_hpj7f_245 {
  flex-shrink: 0;
  padding: 4px 7px;
  border: 1px solid var(--g100);
  border-radius: var(--r-pill);
  background: var(--g50);
  color: var(--g500);
  font: 500 var(--fs-2xs) var(--f-mono);
  line-height: 1;
}

/* Shares `.popup`'s surface/border/shadow; wider because card titles are long
   (e.g. "Critical Path Schedule"). Compound selector so the override wins by
   SPECIFICITY (0,2,0) rather than by being declared after `.popup` — the same
   reason TaskProgressSection.module.css compounds its status colours. Stylelint
   has `no-descending-specificity` off, so source-order reliance would have no
   safety net if these rules were ever reordered. */
._popup_hpj7f_108._cardsPopup_hpj7f_262 {
  width: 288px;
}

._cardList_hpj7f_266 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Fits the current 9 cards without scrolling; scrolls if more are added. */
._cardScroll_hpj7f_275 {
  max-height: 380px;
}

/* The three rules below are variants of the layout-switcher popover's row above,
   not new components: same flex row, icon slot and truncating label. They
   `composes` it so the shared declarations live in one place and only the real
   deltas are stated here — hover, gap, font and colour can no longer drift
   between the two lists. `composes` is this codebase's idiom for exactly this
   (see ui/Drawer/Drawer.module.css). */

/* Fixed-height rows — unlike `.row`, whose height is padding-driven — so the
   list scans as an even column of toggles. */
._cardRow_hpj7f_288 {
  height: 34px;
  padding: 0 8px;
  border-radius: var(--r-md);
}

._eyeSlot_hpj7f_295 {

  /* Muted rather than the switcher's accent: an eye states visibility, it isn't
     a selection tick. `.cardRowHidden` mutes it further. */
  color: var(--g600);
}

._cardName_hpj7f_303 {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hidden card: the row recedes so "off" is readable down the column without
   inspecting each eye glyph. */
._cardRowHidden_hpj7f_299 ._cardName_hpj7f_303 {
  color: var(--g400);
}

._cardRowHidden_hpj7f_299 ._eyeSlot_hpj7f_295 {
  color: var(--g300);
}

._cardsFoot_hpj7f_319 {
  margin: 8px 6px 2px;
  font: 400 var(--fs-xs) var(--f-body);
  line-height: 1.4;
  color: var(--g500);
}
/* ---------- Dashboard / Command Center page ----------
   Mirrors the Lovable "Project Command Center" layout: a 12-column
   grid of cards. Every card uses the shared <DashboardCard> shell
   from `Cards/_shared/`; this stylesheet only owns the page chrome
   (shared height variables) and the building-
   view body slot. */

._page_dmm1j_8 {
  display: flex;
  flex-direction: column;
  color: var(--navy);
  font-family: var(--f-body);
  letter-spacing: 0.25px;
}

/* Fallback shown when the monitor snapshot fails to load. Inline
   `style` was the previous home for the padding; lifted here to keep
   layout off the JSX. */
._snapshotError_dmm1j_19 {
  margin: 0;
  padding: 2rem;
}

/* Shown in place of the grid when every card in the active layout is
   hidden. Takes the body's flex slot so the canvas keeps its height
   instead of collapsing to two lines of text. */
._allHidden_dmm1j_27 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 0 32px;
  text-align: center;
}

._allHiddenTitle_dmm1j_38 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._allHiddenHint_dmm1j_46 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g500);
}

/* Body slot for the Visual Site Overview card. The shared building
   skeleton owns its own outer wrapper and `BuildingViewSvg` unwraps
   the loadingFallback (see its `loadingFallback` branch), so the
   skeleton renders as a direct child of this body and inherits its
   flex-fill height without any descendant tricks. */
._buildingBody_dmm1j_58 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 20px 18px;
}

/* The loaded BuildingViewSvg renders its SVG at natural width-driven
   size — width = body content area, height = width × viewBox aspect
   (typically ~1:1 for Trusstor building SVGs, so a square). Anchor
   the skeleton to match: both render in the top of the body at the
   same width × width square, so the swap is a content replacement
   with zero size or position change.

   The container nesting depth varies (`<BuildingViewSvg>` wraps the
   loaded state in `<div.buildingViewWrap><div.building><svg>` but
   renders the skeleton as a direct child fragment), but in either
   case the FIRST descendant div is what holds the content — its
   aspect ratio is what the user perceives. Constraining the
   skeleton's tower via `flexFill`'s `aspect-ratio: 1` (see
   `BuildingSkeleton.tsx`) and leaving the loaded SVG at its natural
   size keeps them visually identical. */

/* Non-blocking layout-fetch-error notice. Rendered below the header
   controls so it never interrupts the dashboard grid. Styled to
   match the shared info-banner token set. */
._layoutFetchError_dmm1j_85 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 0 4px;
  background: var(--banner-info-bg);
  color: var(--banner-info-text);
  border: 1px solid #ffe658;
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.2px;
}

._panel_h1b5p_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 0;
}

._titleRow_h1b5p_14 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--g600);
}

._title_h1b5p_14 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g700);
}

._stats_h1b5p_30 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

._stat_h1b5p_30 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--s-2) var(--s-1);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--g50);
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms;
}

._stat_h1b5p_30[aria-pressed='true'] {
  border-color: var(--navy);
}

._stat_h1b5p_30[data-tone='active'][aria-pressed='true'] {
  border-color: var(--color-success-mid);
}

._stat_h1b5p_30[data-tone='idle'][aria-pressed='true'] {
  border-color: var(--color-warn);
}

._stat_h1b5p_30[data-tone='active'] {
  background: hsl(var(--success) / 10%);
}

._stat_h1b5p_30[data-tone='idle'] {
  background: rgb(254 185 83 / 16%);
}

._statValue_h1b5p_71 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

._stat_h1b5p_30[data-tone='active'] ._statValue_h1b5p_71 {
  color: var(--color-success);
}

._stat_h1b5p_30[data-tone='idle'] ._statValue_h1b5p_71 {
  color: var(--color-warn);
}

._statLabel_h1b5p_86 {
  font-size: var(--fs-2xs);
  color: var(--g500);
  margin-top: 1px;
}

._warnBanner_h1b5p_92 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--color-error-bg);
  color: var(--color-error);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

._warnBanner_h1b5p_92[aria-pressed='true'] {
  border-color: currentColor;
}

._searchField_h1b5p_112 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--g50);
  color: var(--g400);
}

._searchField_h1b5p_112:focus-within {
  border-color: var(--info);
  color: var(--info);
  background: var(--color-surface);
}

._searchInput_h1b5p_129 {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._searchInput_h1b5p_129::placeholder {
  color: var(--g400);
}

._chips_h1b5p_144 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

._chip_h1b5p_144 {
  padding: 3px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g600);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

._chip_h1b5p_144:hover {
  background: var(--g50);
  color: var(--navy);
}

._chip_h1b5p_144[data-active='true'] {
  background: rgb(24 164 30 / 10%);
  border-color: var(--color-success-mid);
  color: var(--color-success);
  font-weight: 600;
}

._list_h1b5p_174 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._listScroll_h1b5p_182 {
  flex: 1;
}

._empty_h1b5p_186 {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  color: var(--g400);
  font-size: var(--fs-sm);
}

._row_h1b5p_193 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 120ms;
}

._row_h1b5p_193:hover {
  background: var(--g50);
}

._row_h1b5p_193[data-selected='true'] {
  background: hsl(var(--primary) / 10%);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 30%);
  border-radius: var(--r-lg);
}

/* row dot is rendered by <StatusDot> — see ui/StatusDot */
._rowDotOffset_h1b5p_220 {
  margin-top: 6px;
}

._rowBody_h1b5p_224 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._rowTop_h1b5p_232,
._rowBottom_h1b5p_233 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

._assetName_h1b5p_240 {
  margin-right: auto; /* the flag and the status sit together on the right */
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}

._statusText_h1b5p_247 {
  font-size: var(--fs-2xs);
  font-weight: 700;
}

._statusText_h1b5p_247[data-status='active'] {
  color: var(--color-success);
}

._statusText_h1b5p_247[data-status='idle'] {
  color: var(--color-warn);
}


._assetMeta_h1b5p_261,
._assetLocation_h1b5p_262 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}
._flag_aema0_1 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0.1em 0.5em;
  font-size: var(--fs-2xs);
  font-weight: 600;
  background: var(--color-error-bg);
  color: var(--color-error);
  white-space: nowrap;
}
._dot_1qjxi_1 {
  display: block;
  flex: none;
  border-radius: var(--r-circle);
}

._dot_1qjxi_1[data-animate='true'] {
  animation: _pulse_1qjxi_1 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes _pulse_1qjxi_1 {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
._skeleton_y42lm_1 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}

._plan_y42lm_11 {
  width: clamp(200px, 50%, 340px);
  height: auto;
  overflow: visible;
}

._wall_y42lm_17 {
  fill: none;
  stroke: var(--g300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: _planWallDraw_y42lm_1 3.2s ease-in-out infinite;
}

._wall_y42lm_17:nth-of-type(2) { animation-delay: 0.15s; }
._wall_y42lm_17:nth-of-type(3) { animation-delay: 0.3s; }
._wall_y42lm_17:nth-of-type(4) { animation-delay: 0.45s; }
._wall_y42lm_17:nth-of-type(5) { animation-delay: 0.6s; }
._wall_y42lm_17:nth-of-type(6) { animation-delay: 0.75s; }

@keyframes _planWallDraw_y42lm_1 {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  38% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  76% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  90%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

._room_y42lm_62 {
  fill: var(--blue-tint-soft);
  stroke: none;
  opacity: 0;
  animation: _planRoomGlow_y42lm_1 3.2s ease-in-out infinite;
}

@keyframes _planRoomGlow_y42lm_1 {
  0%,
  42% {
    opacity: 0;
  }

  58%,
  76% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
  }
}

._dot_y42lm_86 {
  fill: var(--color-surface);
  stroke: var(--blue);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: _planDotPop_y42lm_1 3.2s ease-in-out infinite;
}

@keyframes _planDotPop_y42lm_1 {
  0%,
  52% {
    opacity: 0;
    transform: scale(0.4);
  }

  64% {
    opacity: 1;
    transform: scale(1.2);
  }

  70%,
  76% {
    opacity: 1;
    transform: scale(1);
  }

  90%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

._label_y42lm_121 {
  font-size: var(--fs-xs);
  color: var(--g400);
  animation: _planLabelPulse_y42lm_1 2s ease-in-out infinite;
}

@keyframes _planLabelPulse_y42lm_1 {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._wall_y42lm_17,
  ._room_y42lm_62,
  ._dot_y42lm_86,
  ._label_y42lm_121 {
    animation: none;
  }

  /* Static blueprint instead of the draw-in loop. */
  ._wall_y42lm_17 {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  ._room_y42lm_62,
  ._dot_y42lm_86 {
    opacity: 1;
  }
}
/* Floor-plan overlay for the equipment site map. Mirrors the monitor's
   floor-view chip language (MonitorPage/MainView/floorDrawer.module.css),
   scoped to a single selected asset: the area tint is injected into
   document.head by EquipmentFloorPlan.tsx (`dorca-equipment-area-highlight`);
   this module positions the SVG + the one equipment chip over it. */

._svgStack_1kad5_7 {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  animation: _planReveal_1kad5_1 0.32s ease-out;
}

@keyframes _planReveal_1kad5_1 {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

._svgWrap_1kad5_22 {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

._svgWrap_1kad5_22 > svg {
  width: 100%;
  height: 100%;
  display: block;
}

._overlay_1kad5_36 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Centres the chip on the SVG anchor's centre (translate -50%/-50%), matching
   `.workersChipStack` in the monitor. */
._chipStack_1kad5_44 {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Equipment chip — same white pill + per-type icon as the monitor's
   `.equipmentChip`. Here it carries the asset name (one selected asset, not a
   count), so it caps its width and ellipsises rather than growing over the
   plan. */
._equipmentChip_1kad5_51 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 160px;
  padding: 3px 8px 3px 5px;
  border-radius: var(--r-md);
  background: var(--color-surface);
  border: 1px solid var(--g200);
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: var(--shadow-chip);

  /* Re-enable hover over the pointer-events:none overlay so the Tooltip fires. */
  pointer-events: auto;
  animation: _chipPop_1kad5_1 0.28s ease-out;
}

@keyframes _chipPop_1kad5_1 {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.9);
  }

  60% {
    transform: translateY(-1px) scale(1.03);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

._equipmentChipIcon_1kad5_90 {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

._equipmentChipLabel_1kad5_97 {
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  ._svgStack_1kad5_7,
  ._equipmentChip_1kad5_51 {
    animation: none;
  }
}
._panel_k780q_1 {
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  min-height: 0;
  overflow: hidden;
}

._header_k780q_13 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--separator);
}

._title_k780q_22 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g700);
}

._canvas_k780q_31 {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: var(--s-3);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 23px, var(--separator) 23px, var(--separator) 24px),
    repeating-linear-gradient(90deg, transparent 0, transparent 23px, var(--separator) 23px, var(--separator) 24px);
  background-color: var(--g50);
  padding: var(--s-4);
  min-height: 0;
  overflow: hidden;
}

._canvasLabel_k780q_47 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g500);
}

._placeholder_k780q_55 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g400);
  font-size: var(--fs-sm);
  animation: _placeholderReveal_k780q_1 0.32s ease-out;
}

@keyframes _placeholderReveal_k780q_1 {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._placeholder_k780q_55 {
    animation: none;
  }
}
._panel_36401_1 {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  min-height: 0;
  overflow: hidden;
}

._scroll_36401_12 {
  flex: 1;
}

._body_36401_16 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: 0 var(--s-4) var(--s-4);
}

._header_36401_23 {
  position: sticky;
  top: 0;
  z-index: var(--z-raised-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-4);
  padding-bottom: var(--s-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--separator);
}

._titleRow_36401_36 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--g600);
}

._title_36401_36 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g700);
}

._closeBtn_36401_52 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--g500);
  cursor: pointer;
}

._closeBtn_36401_52:hover {
  background: var(--g50);
  color: var(--navy);
}

._identity_36401_71 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--separator);
}

._assetName_36401_79 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
}

._identityMeta_36401_86 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

._codeChip_36401_92 {
  padding: 2px var(--s-2);
  background: var(--g50);
  color: var(--g700);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

._statusInline_36401_102 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

._statusInline_36401_102[data-status='active']      { color: hsl(var(--success)); }
._statusInline_36401_102[data-status='idle']        { color: hsl(var(--warning)); }

._facts_36401_114 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin: 0;
}

._fact_36401_114 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-2);
  background: var(--g50);
  border-radius: var(--r-lg);
}

._factLabel_36401_130 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._factValue_36401_139 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}

._section_36401_146 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._sectionHeader_36401_152 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--g600);
}

._sectionTitle_36401_159 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._sectionTitleRow_36401_166 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._trendingIcon_36401_172 {
  color: var(--color-success);
  flex-shrink: 0;
  display: flex;
}

/* Dimmed placeholder copy inside sections that don't have a data source
   wired yet (weekly utilisation, movement timeline, maintenance schedule).
   When a section gets real data, replace the .pendingNote child with the
   real content; the .section wrapper stays. */
._pendingNote_36401_180 {
  margin: 0;
  padding: var(--s-3);
  background: var(--g50);
  border-radius: var(--r-xl);
  color: var(--g500);
  font-size: var(--fs-xs);
  font-style: italic;
}
._chart_1b9le_1 {
  padding: var(--s-2) var(--s-2) 0 0;
  border-radius: var(--r-xl);
  background: var(--g50);
}

._average_1b9le_7 {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
}

._valueLabel_1b9le_14 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  fill: var(--g600);
}

/* A day still on its way: a placeholder bar that breathes until it lands. */
._loadingBar_1b9le_21 {
  animation: _loading-pulse_1b9le_1 1.2s ease-in-out infinite;
}

@keyframes _loading-pulse_1b9le_1 {
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  ._loadingBar_1b9le_21 { animation: none; }
}
/* The section title doubles as the collapse toggle. */
._toggle_zg3du_2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

._caret_zg3du_14 {
  display: inline-flex;
  transition: transform 0.15s ease;
}

._caret_zg3du_14[data-collapsed='true'] {
  transform: rotate(-90deg);
}

._timeline_zg3du_23 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._timelineItem_zg3du_31 {
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
}

._timelineItem_zg3du_31:last-child {
  padding-bottom: 0;
}

._timelineRail_zg3du_42 {
  position: relative;
  width: 10px;
  flex: none;
  display: flex;
  justify-content: center;
}

._timelineRail_zg3du_42::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: calc(var(--s-3) * -1);
  left: 50%;
  width: 1px;
  background: var(--g200);
  transform: translateX(-0.5px);
}

._timelineItem_zg3du_31:last-child ._timelineRail_zg3du_42::before {
  display: none;
}

._timelineDot_zg3du_65 {
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: var(--r-circle);
  flex: none;
  z-index: var(--z-raised-1);
}

._timelineDot_zg3du_65[data-status='active']      { background: hsl(var(--success)); }
._timelineDot_zg3du_65[data-status='idle']        { background: hsl(var(--warning)); }

._timelineBody_zg3du_78 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._timelineHead_zg3du_84 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--navy);
  font-weight: 600;
}

._timelineSep_zg3du_93 {
  color: var(--g400);
  font-weight: 400;
}

._timelineLabel_zg3du_98 {
  font-weight: 500;
}

._timelineLocation_zg3du_102 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}
._header_vy5zz_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

._titleIcon_vy5zz_8 {
  display: flex;
  flex-shrink: 0;
  color: var(--navy);
}

/* Smaller than Button's `sm`, to sit level with the section title. Scoped under
   .header so it outweighs the button's own size class. */
._header_vy5zz_1 ._add_vy5zz_16 {
  height: 24px;
  padding: 0 var(--s-2);
  gap: 4px;
}

._note_vy5zz_22 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}
._row_1dmso_1 {
  padding: var(--s-3);
  border-radius: var(--r-xl);
  background: var(--g50);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 2px var(--s-3);
}

._title_1dmso_11 {
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}

._meta_1dmso_18 {
  grid-column: 1 / -1;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._chip_1dmso_24[data-urgency='overdue'] {
  background: var(--status-rejected-bg);
  color: var(--status-rejected-text);
}

._chip_1dmso_24[data-urgency='today'] {
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
}

._chip_1dmso_24[data-urgency='upcoming'] {
  background: var(--status-planned-bg);
  color: var(--status-planned-text);
}

._chip_1dmso_24[data-urgency='done'] {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}
._groupLabel_136go_1 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g400);
}

._list_136go_9 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._note_136go_18 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}
._log_slcs5_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._toggle_slcs5_7 {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
  cursor: pointer;
}

._caret_slcs5_22 {
  display: inline-flex;
  transition: transform 0.15s ease;
}

._caret_slcs5_22[data-collapsed='true'] {
  transform: rotate(-90deg);
}

._list_slcs5_31 {
  list-style: none;
  margin: 0;
  padding: 0;
}

._record_slcs5_37 {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--g100);
  font-size: var(--fs-xs);
}

._record_slcs5_37:last-child {
  border-bottom: 0;
}

._date_slcs5_51 {
  font-variant-numeric: tabular-nums;
  color: var(--g500);
}

._what_slcs5_56 {
  min-width: 0;
  color: var(--navy);
}

._who_slcs5_61 {
  color: var(--g500);
}

._timing_slcs5_65 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--status-completed-text);
}

._timing_slcs5_65[data-late='true'] {
  color: var(--status-rejected-text);
}
._field_1h3sv_1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--g600);
  font-weight: 500;
}

._required_1h3sv_10 {
  margin-left: 2px;
  color: var(--red);
}

._input_1h3sv_15 {
  padding: 11px 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

._input_1h3sv_15::placeholder {
  color: var(--g400);
}

._input_1h3sv_15:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint-soft);
}

._input_1h3sv_15:disabled {
  background: var(--g100);
  color: var(--g500);
  cursor: not-allowed;
}

._hint_1h3sv_42 {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--g500);
  line-height: 1.4;
}
._form_1mmdk_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._field_1mmdk_7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

._label_1mmdk_15 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

._required_1mmdk_21 {
  margin-left: 2px;
  color: var(--red);
}

._repeatRow_1mmdk_26 {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}

._interval_1mmdk_32 {
  width: 88px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
}

._spacer_1mmdk_38 {
  flex: 1;
}
._body_10yoz_1 {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--s-5);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

._body_10yoz_1[data-has-detail='true'] {
  grid-template-columns: 380px minmax(0, 1fr) 360px;
}

._mapZone_10yoz_14 {
  display: contents;
}

/* Error panel — mirrors IssuesPage.module.css. Used by the SiteNotLinked,
   UpstreamError, and generic-error branches in EquipmentPage.tsx. */
._errorPanel_10yoz_20 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--g600);
}

._retry_10yoz_30 {
  background: var(--info);
  color: var(--color-surface);
  padding: 6px 14px;
  border-radius: var(--r-lg);
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
}
._wrap_bqfgk_1 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
}

._icon_bqfgk_11 {
  display: inline-flex;
  color: var(--g400);
}

._input_bqfgk_16 {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;

  /* ~36px total with the wrap's border — level with the segmented view
     switch and the filter pills so the row reads as one control height. */
  padding: 7px 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);

  /* Chromium applies placeholder truncation from the INPUT's own
     text-overflow, not the ::placeholder rule — set it here so a narrow slot
     ellipsizes the sentence instead of clipping it mid-word. */
  text-overflow: ellipsis;
}

._input_bqfgk_16::placeholder {
  color: var(--g400);

  /* The placeholder is a full sentence; in narrow slots it must truncate
     with an ellipsis instead of clipping mid-word. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The slim filter row inside the ActivitiesPage header block (below the view
   row). Background and the block's bottom border belong to the header. */
._bar_61wo5_3 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;

  /* 28px on the left: the page title's edge. */
  padding: var(--s-2) var(--s-6) var(--s-2) 28px;
}

/* Search box: absorbs free space after the trigger, capped so it doesn't
   stretch across the whole row. */
._searchSlot_61wo5_16 {
  flex: 1 1 auto;
  min-width: 170px;
  max-width: 420px;
  align-self: center;
}

/* Stable wrapper for the Clear button (which renders null at count 0).
   Hidden while empty — as a flex child it would otherwise cost a phantom
   row-gap next to the search. */
._clearWrap_61wo5_26 {
  display: inline-flex;
  flex: none;
}

._clearWrap_61wo5_26:empty {
  display: none;
}

/* A filter the panel has no control for (see LinkOnlyFilterChips): the
   active pill's look, with its own remove button. */
._chip_61wo5_37 {
  flex: none;
  cursor: default;
}

._chipRemove_61wo5_42 {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

._chipRemove_61wo5_42:hover {
  background: var(--ops-pill-hover);
}
/* The "Filters" trigger chip in the slim filter row. Outlined so it reads as
   a control; tinted while any filter is active. */
._pill_wza9b_3 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 6px var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--g700);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

._pill_wza9b_3:hover {
  background: var(--ops-pill-hover);
}

/* Declared before .pillActive so an active trigger still tints. */
._pillOutlined_wza9b_24 {
  border-color: var(--ops-card-border);
  background: var(--color-surface);
}

._pillActive_wza9b_23 {
  background: var(--info-tint);
  color: var(--info);
}

._pillActive_wza9b_23:hover {
  background: var(--info-tint);
}

/* Icon-only trigger: square-ish hit target, no label beside the glyph. */
._pillIconOnly_wza9b_39 {
  padding: 7px 8px;
}

._icon_wza9b_43 {
  display: inline-flex;
  color: var(--g500);
}

._chevron_wza9b_48 {
  display: inline-flex;
  color: var(--g400);
}

._pillActive_wza9b_23 ._icon_wza9b_43,
._pillActive_wza9b_23 ._chevron_wza9b_48 {
  color: var(--info);
}
._chip_1n6r5_1 {
  gap: var(--chip-gap, 0.5em);
  max-width: 100%;
  overflow: hidden;
}

/* Its own box, so a chip squeezed narrower than its label (the rail's hovered
   row) ends the label in an ellipsis; a flex box's bare text can't. */
._label_1n6r5_9 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The "promised" mark: a filled point in the chip's own colour. */
._mark_1n6r5_16 {
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--r-circle);
  background: currentColor;
  flex-shrink: 0;
}

._dot_1n6r5_24 {
  display: inline-block;

  /* 10/12 of --fs-xs: 10px at the 12px base, and magnified with the text
     inside the Gantt grid, which re-scopes the font tokens by the zoom — not
     the page-wide --sched-zoom, which also reaches the toolbar and drawer. */
  width: calc(var(--fs-xs) * 10 / 12);
  height: calc(var(--fs-xs) * 10 / 12);
  border-radius: var(--r-circle);
  vertical-align: middle;
}

/* "+N d" after a late rung's label, in its own ink. */
._late_1n6r5_37 {
  font-weight: 600;
}

/* Overdue's mark: the flag in the rung's ink, in place of the filled point.
   Sized in em, so it scales with the pill's text — the scheduler's zoom
   re-scopes --fs-xs, and a fixed-pixel icon stayed behind (1em == the 12px
   icon at the 12px base). */
._flag_1n6r5_45 {
  display: inline-flex;
  flex-shrink: 0;
}

._flag_1n6r5_45 > svg {
  width: 1em;
  height: 1em;
}

/* Overdue as a dot: the flag itself, bare — the compound selector outranks the
   rung's ground. */
._dot_1n6r5_24._flagDot_1n6r5_57 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
}

/* The bare flag fills its dot, so it grows with it. */
._dot_1n6r5_24._flagDot_1n6r5_57 > svg {
  width: 100%;
  height: 100%;
}

/* The squeezed rail's dot: committed fills in navy rather than keeping its
   outline, which reads as an empty ring at dot size. The attribute outranks the
   rung's ground; the legend swatches (asSwatch) keep the outline. */
._markDot_1n6r5_73[data-rung='committed'] {
  background: var(--navy);
  box-shadow: none;
}
/* Filter control center: an in-flow sidebar on the page's left edge, part of
   the layout (content beside it reflows when it opens/collapses). */
._panel_13qfk_3 {
  flex: none;
  width: 280px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--ops-card-border);
}

._panelHeader_13qfk_13 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--ops-card-border);
}

._panelTitle_13qfk_21 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._closeBtn_13qfk_30 {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1);
  background: none;
  border: none;
  border-radius: var(--r-md);
  color: var(--g500);
  cursor: pointer;
}

._closeBtn_13qfk_30:hover {
  background: var(--g50);
  color: var(--navy);
}

._panelBody_13qfk_46 {
  flex: 1;
  min-height: 0;
}

._panelContent_13qfk_51 {
  padding-bottom: var(--s-6);
}

._section_13qfk_55 {
  padding: var(--s-1) var(--s-3);
  border-bottom: 1px solid var(--g100);
}

._sectionHeader_13qfk_60 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

._sectionChevron_13qfk_72 {
  display: inline-flex;
  color: var(--g400);
  transition: transform 0.15s ease;
}

._sectionChevronCollapsed_13qfk_78 {
  transform: rotate(-90deg);
}

._sectionTitle_13qfk_82 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

/* Active-filter count badge — keeps applied filters discoverable while the
   section is collapsed. */
._sectionCount_13qfk_91 {
  margin-left: auto;
  min-width: 18px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--info-tint);
  color: var(--info);
  font-size: var(--fs-xs);
  font-weight: 600;
}

._sectionBody_13qfk_105 {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-2);
}

._row_13qfk_111 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2);
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

._row_13qfk_111:hover {
  background: var(--g50);
}

._rowSelected_13qfk_131 {
  background: var(--info-tint-soft);
}

._rowSelected_13qfk_131:hover {
  background: var(--info-tint);
}

/* Square check-mark box, shared by checkbox and radio rows for one visual
   language (single- vs multi-select is conveyed by behaviour and ARIA). */
._box_13qfk_141 {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--g300);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-surface);
}

/* Filled state: white check on info-blue. */
._rowSelected_13qfk_131 ._box_13qfk_141 {
  background: var(--info);
  border-color: var(--info);
}

/* Per-option glyph between the check box and the label. */
._rowIcon_13qfk_160 {
  display: inline-flex;
  flex: none;
  color: var(--g400);
}

._rowSelected_13qfk_131 ._rowIcon_13qfk_160 {
  color: var(--info);
}

._rowLabel_13qfk_170 {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Hairline between two option groups inside one section (Activities:
   statuses vs attribute toggles). */
._rowDivider_13qfk_179 {
  height: 1px;
  margin: var(--s-2);
  background: var(--g100);
}

/* Shared popup chrome + react-day-picker overrides used by every
   date picker on the analytics page. Composed via `composes:` from
   each field's local CSS module.
   v: 2026-05-06 — multi-month side-by-side. */._popup_1j6ff_6 {
  background: var(--color-surface);
  border-radius: var(--r-3xl);
  box-shadow: 0 8px 24px rgb(17 24 39 / 16%), 0 0 0 1px rgb(17 24 39 / 6%);
  padding: 16px 20px;
  font-family: var(--f-body);
  color: var(--navy);
}._popup_1j6ff_6 .rdp-root {
  --rdp-day-width: 36px;
  --rdp-day-height: 36px;
  --rdp-accent-color: var(--navy);
  --rdp-nav-button-color: var(--navy);
  --rdp-today-color: var(--navy);

  margin: 0;
  padding: 0;
}/* react-day-picker v9 defaults the months container to
   `flex-wrap: wrap; max-width: fit-content`, which both clamps width
   AND stacks multiple months on top of each other. Override to a
   non-wrapping row so DateRangeField's `numberOfMonths={2}` sits
   side-by-side. Single-month layouts (DateField, DateTimeField) still
   work — only one month, just laid out as a 1-item flex row. */._popup_1j6ff_6 .rdp-months {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 16px;
}._popup_1j6ff_6 .rdp-month {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month_grid {
  width: 100%;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month { position: relative; }._popup_1j6ff_6 .rdp-month_caption {
  position: relative;
  z-index: var(--z-raised-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 600;
  height: 32px;
  padding: 0;
  margin-bottom: 12px;
}._popup_1j6ff_6 .rdp-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-raised-2);
}._popup_1j6ff_6 .rdp-button_previous,
._popup_1j6ff_6 .rdp-button_next {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--navy);
  width: 28px;
  height: 28px;
  border-radius: var(--r-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._popup_1j6ff_6 .rdp-button_previous:hover,
._popup_1j6ff_6 .rdp-button_next:hover { background: var(--g50); }/* react-day-picker v9 inlines its own SVG chevrons whose fill is
   `--rdp-accent-color`. Force the inner shapes to inherit
   `currentColor` so blue defaults never leak through. */._popup_1j6ff_6 .rdp-button_previous svg,
._popup_1j6ff_6 .rdp-button_next svg { fill: currentColor; color: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [fill]:not([fill="none"]),
._popup_1j6ff_6 .rdp-button_next svg [fill]:not([fill="none"]) { fill: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [stroke]:not([stroke="none"]),
._popup_1j6ff_6 .rdp-button_next svg [stroke]:not([stroke="none"]) { stroke: currentColor; }._popup_1j6ff_6 .rdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 6px;
}._popup_1j6ff_6 .rdp-weekday {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
  padding: 6px 0;
  text-transform: none;
}._popup_1j6ff_6 .rdp-weeks { display: flex; flex-direction: column; gap: 2px; }._popup_1j6ff_6 .rdp-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}._popup_1j6ff_6 .rdp-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}._popup_1j6ff_6 .rdp-day .rdp-day_button {
  position: relative;
  z-index: var(--z-raised-1);
}._popup_1j6ff_6 .rdp-day_button {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms, color 120ms;
}._popup_1j6ff_6 .rdp-day_button:hover:not(:disabled) { background: var(--g50); }._popup_1j6ff_6 .rdp-outside .rdp-day_button,
._popup_1j6ff_6 .rdp-disabled .rdp-day_button {
  color: var(--g300);
  cursor: default;
}._popup_1j6ff_6 .rdp-disabled .rdp-day_button:hover { background: transparent; }._popup_1j6ff_6 .rdp-selected .rdp-day_button,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button {
  background: var(--navy);
  color: var(--color-surface);
  font-weight: 600;
}/* Inverse on hover so the digit stays readable when the cursor is
   over the filled selected day. */._popup_1j6ff_6 .rdp-selected .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button:hover {
  background: var(--color-surface);
  color: var(--navy);
}/* Range pill: middle days get a full-cell light-blue band; start
   and end days get a half-band that flows out from the navy circle
   so the band visually connects to the middle days. The band lives
   on a `::before` underneath the day button, which keeps its
   circular fill on top. */._popup_1j6ff_6 .rdp-range_middle::before,
._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before,
._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-range_middle::before { left: 0; right: 0; }._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before {
  left: 50%;
  right: 0;
}._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  left: 0;
  right: 50%;
}._popup_1j6ff_6 .rdp-range_middle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}/* Live preview: while the user has picked a start but not yet an end,
   paint the same band/circle on the days between `from` and the
   hovered cell so the range is visible as the cursor moves. The
   "Forward"/"Backward" suffix tells the half-band which side of the
   hovered cell to flow toward — back to where `from` sits. */._popup_1j6ff_6 .rdp-previewMiddle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewMiddle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}._popup_1j6ff_6 .rdp-previewEndForward::before,
._popup_1j6ff_6 .rdp-previewEndBackward::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewEndForward::before { left: 0; right: 50%; }._popup_1j6ff_6 .rdp-previewEndBackward::before { left: 50%; right: 0; }/* Hovered preview end stays in the same grey-circle hover state as
   any normal day button — no navy fill until the user commits. The
   half-band (::before above) hints where the range will reach. */._popup_1j6ff_6 .rdp-previewEndForward .rdp-day_button,
._popup_1j6ff_6 .rdp-previewEndBackward .rdp-day_button {
  background: var(--g50);
  color: var(--navy);
  font-weight: 500;
}
/* The window's dates in one box with the week steps at its ends
   (Trusstor's calendar bar). */
._range_7jikf_3 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--color-surface);
}

/* Bare chevrons inside the box (scoped: beats the Button's own ghost
   border and padding whatever the stylesheet order). */
._range_7jikf_3 ._step_7jikf_15 {
  width: 28px;
  height: 30px;
  padding: 0;
  border: 0;
  color: var(--g700);
}

/* The dates: the calendar's trigger. */
._rangeText_7jikf_24 {
  appearance: none;
  align-self: stretch;
  min-width: 10em;
  padding: 0 var(--s-1);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

._rangeText_7jikf_24:hover,
._rangeText_7jikf_24[data-popup-open] {
  background: var(--g50);
}

._rangeText_7jikf_24:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
}

/* The popover portals to <body>: lift it over the page like the other date
   pickers' (z-index belongs on the positioner — Base UI's popup is static). */
._positioner_7jikf_52 {
  z-index: var(--z-dialog-popover);
}

/* The shared calendar chrome (DatePicker/calendarStyles.module.css). */
._popup_7jikf_57 {
}

/* The window's length, above the month. */
._length_7jikf_62 {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-3);
}
._chip_199qu_1 { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: var(--r-pill); font-size: var(--fs-xs); line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
._open_199qu_2 { background: var(--status-for-review-bg); color: var(--status-for-review-text); }
._done_199qu_3 { background: var(--g50); color: var(--g600); }
/* Amber milestone diamond, inline and vertically centered with the adjacent text. */
._marker_1d60s_2 {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--amber);
}
/* The navy popup chrome now comes from ui/Tooltip's `marker` variant — this
   file keeps only the trigger box and the section layout callers compose. */

/* Real box so the trigger has geometry to hover; inherits the card cursor. */
._triggerWrapper_16pcx_5 {
  display: inline-flex;
}

._section_16pcx_9 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._section_16pcx_9 + ._section_16pcx_9 {
  margin-top: var(--s-2);
}

._rowName_16pcx_19 {
  font-weight: 500;
}
/* DependencyTooltip-specific styles.
   The shared popup/triggerWrapper/section/rowName rules live in HoverTooltip.module.css. */

._sectionHeader_27ael_4 {
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._row_27ael_12 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._rowName_27ael_18 {
  font-weight: 500;
}

._rowMeta_27ael_22 {
  font-weight: 400;
  opacity: 0.72;
}
/* The card footer's risk readings: each score with its headline reason after
   it in plain text — one quiet line that wraps as the list narrows. */
._badges_itvss_3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
}

._badgeGroup_itvss_10 {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
}

._badge_itvss_3 {
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

._none_itvss_22 {
  color: var(--g300);
}

._low_itvss_26 {
  color: var(--g500);
}

._mid_itvss_30 {
  color: var(--color-warn);
}

._high_itvss_34 {
  color: var(--red);
}

._reason_itvss_38 {
  font-size: var(--fs-xs);
  color: var(--g500);
  white-space: nowrap;
}
._bulb_1hbj3_1 {
  width: 100%;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._header_1hbj3_12 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

._headerLabel_1hbj3_18 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._content_1hbj3_26 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

/* Two-sided bulb content: left detail rows, right-aligned extras (comments).
   Wraps rather than squeezes — the comments block can't shrink (nowrap label),
   so without the wrap it eats its width out of the detail values and breaks
   "Admin user" mid-word once the bulb drops under ~300px. */
._split_1hbj3_36 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-2) var(--s-4);
}

._split_1hbj3_36 > ._rows_1hbj3_43 {
  min-width: 0;
}

/* The detail rows take the leftover width, which is also what pushes the
   comments block to the right edge — the grow does the job justify-content
   used to, and leaves no free space for it to distribute. Once wrapped, the
   comments sit on their own line beneath. */
._split_1hbj3_36 > ._rows_1hbj3_43:first-child {
  flex: 1 1 auto;
}

/* Detail rows — a 2-column label/value dl grid */
._rows_1hbj3_43 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 0;
}

/* Icon + uppercase label, matching the drawer's field labels. */
._rowLabel_1hbj3_66 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
  white-space: nowrap;
}

._rowLabelIcon_1hbj3_78 {
  display: inline-flex;
  color: var(--g400);
}

._rowValue_1hbj3_83 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g800);
  font-weight: 500;
  min-width: 0;
  word-break: break-word;
  margin: 0;
}

._wrap_ejax8_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-5);
  min-height: 55vh;
}

._icon_ejax8_12 {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-2xl);
  background: var(--info-tint);
  color: var(--info);
  margin-bottom: var(--s-1);
}

._title_ejax8_23 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._body_ejax8_30 {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-sm);
  color: var(--g500);
}

._cta_ejax8_37 {
  margin-top: var(--s-2);
  align-self: center;
  white-space: nowrap;
  border: 1px solid var(--info);
  border-radius: var(--r-xl);
  background: var(--info);
}

._cta_ejax8_37:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  filter: brightness(0.95);
}

._hint_ejax8_52 {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--g400);
}
._shortcut_1bkts_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1.5px dashed var(--g300);
  border-radius: var(--r-xl);
  background: transparent;
  color: var(--info);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

._shortcut_1bkts_1:hover {
  border-color: var(--info);
  background: var(--info-tint);
}

._shortcut_1bkts_1:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._plus_1bkts_29 {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--info);
  color: var(--color-surface);
  font-size: var(--fs-sm);
  line-height: 1;
}
._rail_1kk2g_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._panel_1kk2g_7 {
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  padding: var(--s-4);
}

._panelTitle_1kk2g_14 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g600);
}

._panelTitleIcon_1kk2g_26 {
  display: inline-flex;
  color: var(--g500);
}

._empty_1kk2g_31 {
  margin: 0;
  padding: var(--s-2) 0;
  font-size: var(--fs-sm);
  color: var(--g500);
}

/* Workforce Summary */
._wfRow_1kk2g_39 {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}

._wfStat_1kk2g_45 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

._wfValue_1kk2g_53 {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
}

._wfMissing_1kk2g_60 {
  color: var(--color-warn);
}

._wfAttendance_1kk2g_64 {
  color: var(--color-success);
}

._wfLabel_1kk2g_68 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

/* Trade Matrix */
._tmTable_1kk2g_77 {
  display: flex;
  flex-direction: column;
}

._tmRow_1kk2g_82 {
  display: grid;
  grid-template-columns: 1.7fr 0.7fr 0.7fr 0.6fr 1fr;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--separator);
}

._tmRow_1kk2g_82:last-child {
  border-bottom: none;
}

._tmHead_1kk2g_95 {
  padding-bottom: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g500);
}

._tmTrade_1kk2g_104 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

._tmTradeName_1kk2g_111 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._tmContractor_1kk2g_117 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._tmNumCol_1kk2g_122 {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._tmNumLow_1kk2g_128 {
  font-weight: 700;
  color: var(--color-warn);
}

._tmPlanned_1kk2g_133 {
  color: var(--g500);
}

._tmCertCol_1kk2g_137 {
  display: flex;
  justify-content: center;
}

._tmCertOk_1kk2g_142 {
  display: inline-flex;
  color: var(--color-success);
}

._tmCertBad_1kk2g_147 {
  display: inline-flex;
  color: var(--red);
}

._tmLoc_1kk2g_152 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* Site Location Map */
._smList_1kk2g_158 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._smRow_1kk2g_164 {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 26px;
  padding: var(--s-1) var(--s-2);
  overflow: hidden;
  background: var(--g50);
  border-radius: var(--r-md);
}

._smFill_1kk2g_176 {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ops-floor-bar);
  border-radius: var(--r-md);
}

._smLabel_1kk2g_183 {
  position: relative;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}

._smCount_1kk2g_190 {
  position: relative;
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--g500);
}
/* Level pill, matched to the D-ORCA filter pills (filterPill.module.css). */
._trigger_9p3r4_2 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 6px var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--ops-pill-bg);
  color: var(--g700);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
._trigger_9p3r4_2:hover { background: var(--ops-pill-hover); }

._icon_9p3r4_17 { display: inline-flex; color: var(--g500); }
._chevron_9p3r4_18 { display: inline-flex; color: var(--g400); }

._item_9p3r4_20 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
._item_9p3r4_20 svg { color: var(--info); }
/* Split sort pill, matched to the D-ORCA filter pills (filterPill.module.css):
   [ direction arrow | sort name ], one 6px-radius grey pill. */
._group_1dfc3_3 {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--ops-pill-bg);
  overflow: hidden;
}

/* Direction toggle — a down arrow (descending) that rotates to up (ascending).
   Kept visible but disabled for the neutral sorts, so the pill keeps its shape. */
._dir_1dfc3_14 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px 6px 10px;
  border: 0;
  border-right: 1px solid var(--ops-card-border);
  background: transparent;
  color: var(--g500);
  cursor: pointer;
}
._dir_1dfc3_14:hover:not(:disabled) { background: var(--ops-pill-hover); color: var(--navy); }
._dir_1dfc3_14:disabled { color: var(--g300); cursor: default; }
._dir_1dfc3_14 svg { transition: transform 0.15s ease; }
._dir_1dfc3_14[data-dir='asc'] svg { transform: rotate(180deg); }

/* Sort name — click cycles to the next sort. */
._body_1dfc3_31 {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px 6px var(--s-3);
  border: 0;
  background: transparent;
  color: var(--g700);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
._body_1dfc3_31:hover { background: var(--ops-pill-hover); }

/* All labels stacked in one grid cell: the column sizes to the WIDEST label, so
   the visible name never changes the pill width as you cycle. */
._nameWrap_1dfc3_47 {
  display: inline-grid;
  place-items: center start;
}

._nameWrap_1dfc3_47 > span {
  grid-area: 1 / 1;
  white-space: nowrap;
}
._ghost_1dfc3_56 { visibility: hidden; }

/* Caret — opens the dropdown to pick any sort directly (separate from the body). */
._caret_1dfc3_59 {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px 6px 4px;
  border: 0;
  background: transparent;
  color: var(--g400);
  cursor: pointer;
}
._caret_1dfc3_59:hover { background: var(--ops-pill-hover); color: var(--navy); }

._item_1dfc3_70 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
._item_1dfc3_70 svg { color: var(--info); }
/* Single source for the tone→fill colour used by every progress bar in the
   tracker (floor rollup bar + dependency mini-bars). */
._track_1neiy_3 {
  position: relative;
  overflow: hidden;
  background: var(--tracker-bar-track);
}

._fill_1neiy_9 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
._fillComplete_1neiy_15 { background: var(--tracker-complete-dot); }
._fillAtRisk_1neiy_16   { background: var(--tracker-risk-dot); }
._fillBlocked_1neiy_17  { background: var(--tracker-blocked-dot); }
/* Inline count chips: ◂N predecessors (amber), N▸ successors (blue). */
._chips_2id3a_2 {
  display: inline-flex;
  gap: var(--s-1);
  cursor: default;
  outline: none;
}

._chip_2id3a_2 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  padding: 0 6px;
  border-radius: var(--r-pill);
}
._chipArrow_2id3a_19 { font-size: var(--fs-3xs); line-height: 1; }
._chipPred_2id3a_20 { color: var(--tracker-pred-fg); background: var(--tracker-pred-bg); }
._chipSucc_2id3a_21 { color: var(--tracker-succ-fg); background: var(--tracker-succ-bg); }

._chips_2id3a_2:hover ._chip_2id3a_2,
._chips_2id3a_2:focus-visible ._chip_2id3a_2 { filter: brightness(0.96); }

/* The card's list scrolls in a ScrollArea, whose viewport already contains
   overscroll: a long list scrolled to its end must not chain the wheel into the
   grid — a grid scroll slides the chips away and the dismissal net closes the
   card mid-read. */
._cardScroll_2id3a_30 {
  flex: 1 1 auto;
}

/* Hover preview card listing the dependencies. */
._card_2id3a_30 {
  width: 272px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-popover);
  font-size: var(--fs-sm);
  color: var(--navy);
  transform-origin: var(--transform-origin);
}

._cardHead_2id3a_49 {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--ops-card-border);
  font-weight: 700;
}

._group_2id3a_55 { padding: var(--s-3) var(--s-4); }
._group_2id3a_55 + ._group_2id3a_55 { border-top: 1px solid var(--ops-card-border); }

._groupTitle_2id3a_58 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--s-2);
}
._groupTitle_2id3a_58._pred_2id3a_68 { color: var(--tracker-pred-fg); }
._groupTitle_2id3a_58._succ_2id3a_69 { color: var(--tracker-succ-fg); }
._groupArrow_2id3a_70 { font-size: var(--fs-xs); }

._groupCount_2id3a_72 {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--g500);
}

._row_2id3a_78 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) 0;
}

/* Clickable variant (a <button>): bleeds into the group padding so the hover
   pill spans edge to edge, same treatment as the filter popups' options. */
._rowJumpable_2id3a_88 {
  width: calc(100% + 2 * var(--s-2));
  margin: 0 calc(-1 * var(--s-2));
  padding: var(--s-1) var(--s-2);
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

._rowJumpable_2id3a_88:hover,
._rowJumpable_2id3a_88:focus-visible {
  background: var(--g50);
}

/* Jump arrow: collapsed to NOTHING at rest (zero width, and the negative
   margin cancels the row's flex gap), then animates open on hover/focus so
   the bar/% group visibly slides left to make room for it. */
._rowJumpArrow_2id3a_109 {
  width: 0;
  margin-left: calc(-1 * var(--s-3));
  overflow: hidden;
  flex: none;
  text-align: right;
  color: var(--tracker-succ-fg);
  font-weight: 700;
  opacity: 0;
  transition: width 0.15s ease, margin-left 0.15s ease, opacity 0.12s ease;
}

._rowJumpable_2id3a_88:hover ._rowJumpArrow_2id3a_109,
._rowJumpable_2id3a_88:focus-visible ._rowJumpArrow_2id3a_109 {
  width: 14px;
  margin-left: 0;
  opacity: 1;
}

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

._rowName_2id3a_134 {
  /* Absorbs the row's slack so the bar/% group sits flush right even in the
     jumpable rows, whose collapsed arrow slot would otherwise leave
     space-between splitting the leftover into both gaps. */
  flex: 1;
  min-width: 0;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An uncommitted neighbour: plan work upstream/downstream with no column. */
._rowTag_2id3a_147 {
  flex-shrink: 0;
  font-size: var(--fs-3xs);
  color: var(--g500);
}

._rowRight_2id3a_153 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

._rowPct_2id3a_160 {
  font-weight: 600;
  font-size: var(--fs-xs);
  width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Dependency mini-bar — TrackBar (TrackBar.tsx) provides the track/fill. */
._mini_2id3a_169 {
  width: 56px;
  height: 5px;
  border-radius: var(--r-pill);
}
/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}
/* Four-pane frozen grid (Excel-style): corner + header strip on top, label
   column + body below. Only .scroller's viewport scrolls — its bars therefore
   start at the data region (after the label column, below the header). The
   header/label panes are overflow:hidden viewports; MatrixTable mirrors the
   body's scrollLeft/scrollTop onto them in its scroll handler. The frame
   carries the grid's outer top/left border (cells carry right/bottom), so
   the four panes still read as one continuous grid with no doubled seams:
   the corner/label cells' border-right draws the label|data seam, the
   corner/header cells' border-bottom draws the header|body seam. */
._frame_ai4ii_10 {
  --tracker-label-w: 240px;

  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ops-card-border);
  border-left: 1px solid var(--ops-card-border);
}

._topRow_ai4ii_21 {
  display: flex;
  flex: none;
}

._corner_ai4ii_26 {
  flex: none;
  width: var(--tracker-label-w);
  background: var(--tracker-surface);
}

._headerViewport_ai4ii_32 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

._bottomRow_ai4ii_38 {
  display: flex;
  flex: 1;
  min-height: 0;
}

._labelViewport_ai4ii_44 {
  flex: none;
  width: var(--tracker-label-w);
  overflow: hidden;
}

._scroller_ai4ii_2 {
  flex: 1;
  min-width: 0;
}

/* Pane grids size to their TRACKS (width: max-content), so the body pane's
   scrollWidth is exactly N×140px and the header grid mirrors it 1:1;
   min-width: 100% still lets them fill the pane when columns are few. Row
   heights come from the inline gridTemplateRows (see MatrixTable). */
._headerGrid_ai4ii_59,
._labelGrid_ai4ii_60,
._bodyGrid_ai4ii_61 {
  display: grid;
}

._headerGrid_ai4ii_59,
._bodyGrid_ai4ii_61 {
  width: max-content;
  min-width: 100%;
}

._colHead_ai4ii_71,
._floorLabel_ai4ii_72,
._zoneLabel_ai4ii_73 {
  background: var(--tracker-surface);
}

/* Crosshair hover: only 3 cells are washed — the hovered cell (.hit, strong) plus
   its column header and row label (.mark, medium). Toggled by MatrixTable, whose
   delegation hangs on .frame so one listener covers all four panes and the
   queries resolve across them (a cell's header lives in the header pane, its
   label in the label pane).
   The wash is a positioned ::after overlay (not an inset box-shadow): data cells
   render an OPAQUE status/floor fill that would hide a box-shadow, so an empty,
   planned or idle cell showed no hover feedback. The ::after is the last box in
   tree order, so it paints ABOVE the fill and the StatusMark alike; it stays
   translucent so the glyph reads through, and pointer-events:none keeps clicks
   and the crosshair delegation (closest('[data-row]')) unaffected.
   NOTE: every marked element must be POSITIONED for inset:0 to anchor — data
   cells are `position: relative` (matrixCell.module.css); the corner, column
   heads and row labels get `position: relative` below (their old
   `position: sticky`, which used to provide this, is gone with the pane
   layout). The same rule anchors the header's absolutely-positioned furniture
   (.gear, .bottomBar, .colAssignee). */
._corner_ai4ii_26,
._colHead_ai4ii_71,
._floorLabel_ai4ii_72,
._zoneLabel_ai4ii_73 {
  position: relative;
}

._mark_ai4ii_78::after,
._hit_ai4ii_77::after,
._cornerToggle_ai4ii_103:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

._mark_ai4ii_78::after,
._cornerToggle_ai4ii_103:hover::after {
  background: var(--tracker-crosshair);
}

._hit_ai4ii_77::after {
  background: var(--tracker-crosshair-hit);
}

._corner_ai4ii_26,
._colHead_ai4ii_71,
._floorLabel_ai4ii_72,
._zoneLabel_ai4ii_73 {
  padding: var(--s-2) var(--s-3);
  border-right: 1px solid var(--ops-card-border);
  border-bottom: 1px solid var(--ops-card-border);
}

._corner_ai4ii_26 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

/* The whole corner cell collapses / expands every floor; its hover wash reuses the
   crosshair overlay group above (a translucent layer the label + caret read through). */
._cornerToggle_ai4ii_103 { cursor: pointer; }

/* Caret pinned to the right edge of the cell. */
._collapseAllCaret_ai4ii_144 { margin-left: auto; display: inline-flex; transition: transform 0.15s ease; }

/* Expanded → chevron points up ("collapse all"); collapsed → down ("expand all"). */
._collapseAllCaret_ai4ii_144[data-collapsed='false'] { transform: rotate(180deg); }

/* Taller fixed floor so the extra profession line (below the title, above the
   %/milestone line) fits without the flow content colliding with the pinned
   bottom dependency bar. min-height is now redundant with (but harmless
   alongside) MatrixTable's explicit gridTemplateRows — the header track is
   set to HEADER_ROW_H from visibleRows.ts; keep the two numbers in sync. */
._colHead_ai4ii_71 { display: flex; flex-direction: column; min-height: 130px; }

/* Title + %/milestone group, kept together at the top of the cell. */
._colTop_ai4ii_157 { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }

/* Task title: shrink to its actual 1–2 lines (so the % below sticks right under
   it instead of floating below a reserved 2-line box), clamping longer names to
   two lines. The shared header height stays fixed via .colHead's min-height. */
._colName_ai4ii_162 {
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.35;
  max-height: calc(2 * 1.35em);
  flex: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Profession — pinned absolutely just above the predecessors/successors bar
   (same mechanism as .bottomBar, relative to the positioned cell), so it always
   sits at the bottom regardless of how tall the title/% flow content is. */
._colAssignee_ai4ii_93 {
  position: absolute;
  right: var(--s-3);
  bottom: 30px; /* clears the .bottomBar (bottom: var(--s-2)) beneath it */

  /* Right-anchored, shrink-wrapped to the pill, and capped at a modest width so
     the pill never sprawls across the cell — a trade label longer than this
     ellipsizes (the pill's own min-width:0 + overflow:hidden chain). Tune
     max-width to taste. */
  max-width: 78px;
  text-align: right;
  overflow: hidden;
}
._colSub_ai4ii_191  { display: flex; align-items: center; font-size: var(--fs-xs); color: var(--g500); }

/* Space the milestone diamond off the % (the shared MilestoneMarker owns its look). */
._milestoneSpacing_ai4ii_194 { margin-left: var(--s-1); }

/* On-time risk badge (clock + level) — coloured by severity, matching the Daily
   List. Sits in the bottom-left stack, above the critical-path badge. */
._risk_ai4ii_198 { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; font-size: var(--fs-xs); }
._riskLow_ai4ii_199  { color: var(--g500); }
._riskMid_ai4ii_200  { color: var(--color-warn); }
._riskHigh_ai4ii_201 { color: var(--red); }

/* Activity headers are clickable (open the drawer) and reserve a bottom strip for
   the pinned bottom bar + top-right space for the settings kebab. The cell is
   position:relative (see the crosshair NOTE above), which acts as the containing
   block for both. */
._colHeadActivity_ai4ii_207 {
  padding-bottom: 42px; /* room for the risk + critical stack pinned bottom-left */
  padding-right: calc(var(--s-3) + 18px);
  cursor: pointer;
}
._colHeadActivity_ai4ii_207:hover ._colName_ai4ii_162 { text-decoration: underline; }

/* Zero-box wrapper that catches menu clicks (see ActivitySettingsMenu). */
._gearWrap_ai4ii_215 { display: contents; }

/* The settings kebab (ui/KebabButton), top-right of an activity header. */
._gear_ai4ii_93 {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  padding: 2px;
}

/* Pinned bottom bar: short gold critical tag (left, shrinks) + dep chips (right). */
._bottomBar_ai4ii_93 {
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-2);
  display: flex;
  align-items: flex-end; /* chips align with the bottom of the left stack (⚡) */
  gap: var(--s-2);
}

/* Bottom-left stack: on-time risk (top) over critical-path badge (bottom). */
._leftStack_ai4ii_237 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
}

._depSlot_ai4ii_244 {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
}

/* Gold critical-path badge (icon only), matching the Daily List tag's gold. */
._critTag_ai4ii_251 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 3px;
  border: 1px solid var(--critical-path-tag-fg);
  border-radius: var(--r-sm);
  color: var(--critical-path-tag-fg);
}

._floorLabel_ai4ii_72 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 52px;
  font-weight: 700;
  background: var(--tracker-surface);
  border-top: 2px solid var(--tracker-rule);
  cursor: pointer;
  text-align: left;
}

._zoneLabel_ai4ii_73 {
  padding-left: calc(var(--s-7) + var(--s-4));
  color: var(--g700);
  font-size: var(--fs-sm);
}

._caret_ai4ii_280 {
  display: inline-flex;
  align-items: center;
  color: var(--g500);
  transition: transform 0.15s ease;
}
._caret_ai4ii_280[data-collapsed='true'] { transform: rotate(-90deg); }

._empty_ai4ii_288 {
  padding: var(--s-5);
  text-align: center;
  color: var(--g500);
}

/* Dependency-jump landing flash: an overlay pinned to the target column's grid
   tracks (header pane gets a twin), pulsing twice in the info blue and fading
   out. pointer-events off so cells stay clickable mid-flash; MatrixTable
   unmounts it on animationend. */
._jumpFlash_ai4ii_298 {
  pointer-events: none;
  z-index: var(--z-raised-2);
}
._cell_dtmsh_1 {
  min-height: 34px;
  background: var(--tracker-surface);
  border-right: 1px solid var(--ops-card-border);
  border-bottom: 1px solid var(--ops-card-border);
  display: flex;

  /* Positioning context for the crosshair hover wash (.mark/.hit ::after in
     matrixTable.module.css), which must overlay the opaque status/floor fills. */
  position: relative;
}

._filled_dtmsh_13 { align-items: stretch; }

/* Empty cell = no activity assigned to this area (not a 0% activity). A subtle
   diagonal hatch tells the two apart at a glance. */
._empty_dtmsh_17 {
  background: repeating-linear-gradient(
    -45deg,
    var(--tracker-surface),
    var(--tracker-surface) 6px,
    var(--tracker-empty-stripe) 6px,
    var(--tracker-empty-stripe) 7px
  );
}

/* Floor (rollup) rows are taller than the compact area rows + a thick top
   rule. min-height is now redundant with (but harmless alongside) the
   explicit gridTemplateRows track MatrixTable sets — the floor track is
   FLOOR_ROW_H from visibleRows.ts; keep the two numbers in sync. */
._floorCell_dtmsh_31 {
  min-height: 56px;
  border-top: 2px solid var(--tracker-rule);
}

/* Area (leaf) status cell — fills the WHOLE cell with the vivid status colour,
   just the status mark centred (label on hover). */
._status_dtmsh_38 {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Editable area cell (task columns): the status fill IS the click target — a
   button doing what a tap does for this user (reports it, or opens its review).
   Resets the native button chrome so it reads exactly like the static fill, plus
   a subtle brighten on hover to signal it's clickable. */
._editable_dtmsh_50 {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
._editable_dtmsh_50:hover { filter: brightness(1.06); }

._planned_dtmsh_61    { background: var(--tracker-status-planned-bg);  color: var(--tracker-status-planned-fg); }
._inProgress_dtmsh_62 { background: var(--tracker-status-progress-bg); color: var(--tracker-status-progress-fg); }
._completed_dtmsh_63  { background: var(--tracker-status-done-bg);     color: var(--tracker-status-done-fg); }
._blocked_dtmsh_64    { background: var(--tracker-status-blocked-bg);  color: var(--tracker-status-blocked-fg); }
._review_dtmsh_65     { background: var(--area-status-review-bg);      color: var(--area-status-review-fg); }

/* Floor rollup — full-cell two-tone progress fill to the %: 0% neutral, 1–99%
   blue fill over a pale-blue remainder, 100% green. */
._floorFill_dtmsh_69 {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
._floorIdle_dtmsh_75     { background: var(--tracker-floor-idle); }
._floorProgress_dtmsh_76 { background: var(--tracker-floor-progress-track); }
._floorDone_dtmsh_77     { background: var(--tracker-floor-done); }
._floorBar_dtmsh_78 { position: absolute; left: 0; top: 0; bottom: 0; }
._floorProgress_dtmsh_76 ._floorBar_dtmsh_78 { background: var(--tracker-floor-progress); }
._floorDone_dtmsh_77 ._floorBar_dtmsh_78     { background: var(--tracker-floor-done); }

._floorPct_dtmsh_82 {
  position: relative;
  padding-left: var(--s-3);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--navy);
}

/* Navy (default) reads over both the mid-blue fill and the pale track, so the % stays
   legible wherever the fixed-offset label lands relative to the % fill boundary. */
._floorDone_dtmsh_77 ._floorPct_dtmsh_82 { color: var(--tracker-status-done-fg); }

/* RTLS-coupled — a small corner mark over the fill. */
._coupled_dtmsh_95 {
  position: absolute;
  top: 2px;
  right: 3px;
  display: inline-flex;
  color: var(--tracker-coupled);
}
/* Muted and centered — a filter miss, not an onboarding moment. */
._root_z2k0w_2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6);
}

._text_z2k0w_10 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--g500);
  text-align: center;
}
._loading_zgon9_1 {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  color: var(--g500);
  font-size: var(--fs-sm);

  /* Delay-gated visibility: the card is mounted on the swap's FIRST commit
     (so the view switches instantly), but the message only becomes visible if
     the body takes longer than the delay to arrive. A fast mount (the normal
     case — windowed grid + cached CPM) therefore never flashes "Loading…";
     a genuinely slow one (cold fetch, huge schedule) fades it in. */
  opacity: 0;
  animation: _loading-appear_zgon9_1 0.15s ease 0.25s forwards;
}

@keyframes _loading-appear_zgon9_1 {
  to { opacity: 1; }
}
._card_xwomh_1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--ops-surface);
  overflow: hidden;
}

._header_xwomh_10 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--tracker-surface);
  border-bottom: 1px solid var(--ops-card-border);
}

._headerLeft_xwomh_20 { display: flex; align-items: center; gap: var(--s-3); }
._title_xwomh_21 { font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; }

._legend_xwomh_23 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--g700);
}

/* The "hide 100%" toggle leads the legend row, ahead of the status glyphs.
   The box itself is the shared ui/Checkbox — no input styling here. */
._hideDone_xwomh_33 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-right: var(--s-2);
  cursor: pointer;
  user-select: none;
}

/* Legend status marks — the SAME glyphs the cells render (ring / half-disc /
   check), coloured so each reads on the white legend strip. */
._legendGlyph_xwomh_44 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-3);
}
._legendGlyphPlanned_xwomh_49 { color: var(--g400); }
._legendGlyphProgress_xwomh_50 { color: var(--tracker-status-progress-bg); }
._legendGlyphDone_xwomh_51 { color: var(--tracker-status-done-bg); }

._coupledIcon_xwomh_53 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-3);
  color: var(--tracker-coupled);
}

._empty_xwomh_60 { padding: var(--s-6); text-align: center; color: var(--g500); }

/* The grid's interaction zone (layout hold, QA F-61): an event boundary only — no box of its own. */
._holdZone_xwomh_63 { display: contents; }

/* Cross-generation dependency jump: pulse the level select so the silent
   generation switch registers alongside the flashed column. Same cadence as
   the shared Components/ui/JumpFlash the column flash composes. */
._generationFlash_xwomh_68 {
  display: inline-flex;
  border-radius: var(--r-md);
  animation: _generationFlash_xwomh_68 1.6s ease-out both;
}

@keyframes _generationFlash_xwomh_68 {
  0%, 14% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 45%, transparent); }
  28% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent); }
  42% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 45%, transparent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  ._generationFlash_xwomh_68 { animation-name: _generationFlashReduced_xwomh_1; }

  @keyframes _generationFlashReduced_xwomh_1 {
    0%, 55% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 30%, transparent); }
    100% { box-shadow: 0 0 0 3px transparent; }
  }
}
._canvas_109wz_1 {
  position: relative;
}

._groupBg_109wz_5,
._taskBg_109wz_6 {
  /* height and top are set via inline style for virtualisation */
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--separator);
}

._groupBg_109wz_5 {
  background: var(--g50);
}

._taskBg_109wz_6 {
  background: var(--color-surface);
}

/* ── Weekend column overlays ──────────────────────────────────────────
   Soft tint behind every weekend column (Sat=blue, Sun=red per JP
   calendar convention). Sits above row backgrounds but below markers and
   bars, so weekends are visible at a glance without obscuring task data. */

._saturdayCol_109wz_27,
._sundayCol_109wz_28 {
  position: absolute;
  top: 0;

  /* height is set via inline style to span all rows */
  pointer-events: none;
  z-index: var(--z-base);
}

._saturdayCol_109wz_27 { background: var(--gantt-weekend-saturday-bg-soft); }
._sundayCol_109wz_28   { background: var(--gantt-weekend-sunday-bg-soft); }

/* Generic rest-day column: used when a rest day falls on a weekday other
   than Sat/Sun (e.g. Friday in a Sun–Thu work calendar). Reuses the
   saturday soft tint as a neutral indicator so task bars remain legible. */
._restCol_109wz_43     { background: var(--gantt-weekend-saturday-bg-soft); }

/* ── Grid column lines ────────────────────────────────────────────────── */

._gridLine_109wz_47,
._gridLineMajor_109wz_48 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid var(--gantt-gridline);
  pointer-events: none;
  z-index: var(--z-base);
}

._gridLineMajor_109wz_48 {
  border-left-color: var(--gantt-gridline-major);
}

/* ── Marker vertical lines ────────────────────────────────────────────── */

._marker_109wz_64 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid;   /* color set inline via style prop */
  pointer-events: none;
  z-index: var(--z-raised-2);
}

._markerToday_109wz_74 {
  border-left-style: dashed;
}

/* Range band — translucent shaded region between two dates. */
._markerRange_109wz_79 {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--gantt-range-overlay);
  border-left: 1px solid;   /* color set inline */
  border-right: 1px solid;  /* color set inline */
  pointer-events: none;
  z-index: var(--z-raised-1);
}

/* Small pill label anchored to the top of a line or range. */
._markerLabel_109wz_91 {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  padding: 1px 4px;
  white-space: nowrap;
  color: var(--g700);
  pointer-events: none;
}
/* The Gantt canvas's rest-column tint is absolutely placed at a pixel x; here
   it sits in a day column of the cell's own grid instead. Doubled-up selector
   (class + attribute) so the placement wins over the Gantt's single-class
   rule whatever order the stylesheets load in. */
._col_f4k1p_5[aria-hidden] {
  position: static;
  grid-row: 1;
  align-self: stretch;
}

/* Today: the whole column in the current month's blue (the Gantt's
   .periodCurrent tint), under the marks — the header's today column carried
   down. */
._today_f4k1p_14 {
  grid-row: 1;
  align-self: stretch;
  background: var(--info-tint);
}
._frame_18rty_1 {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: var(--s-3) var(--s-6) var(--s-5);
}/* The grid's box: the border, corners and card chrome; .grid inside scrolls. */._gridFrame_18rty_9 {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}/* ONE scroll container, two columns — the rail and the days. Every row is a
   `display: contents` pair of cells, so the rail stays pinned left while the
   header stays pinned on top, both inside the same scroll box. A day never
   narrows past the Gantt's week-zoom column; below that the days scroll
   sideways under the rail, as the Gantt's do. `--wp-days` (set inline) is the
   number of day columns.

   The rail keeps the Gantt's meta columns (PROFESSION · PROGRESS · STATUS, on
   its own column tokens) beside a task-name column narrower than the Gantt's:
   the plan is read across the days, not down the names. Grouped by profession
   the band already names the trade, so that column is dropped. */._grid_18rty_8 {
  /* Promise rows are two lines tall — a Trusstor calendar card's name over
     its facts — taller than the Gantt's single-line row. */
  --wp-row-h: 52px;
  --wp-name-col: 180px;
  --wp-rail-cols: 1fr var(--gantt-col-trade) var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-trade) + var(--gantt-col-ppc) + var(--gantt-col-status) + 3 * var(--s-2));

  display: grid;
  grid-template-columns:
    calc(var(--wp-name-col) + var(--wp-rail-meta) + 2 * var(--s-4))
    minmax(calc(var(--wp-days) * 24px), 1fr);
  grid-auto-rows: min-content;
  align-content: start;
}._grid_18rty_8[data-without-profession] {
  --wp-rail-cols: 1fr var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-ppc) + var(--gantt-col-status) + 2 * var(--s-2));
}/* The frame of every rail (left) cell. Opaque: the days scroll under it.
   The two frames are composed by every row component and sit under
   :where() — zero specificity — so a row's own overrides (a tinted lane, a
   group band) win whatever order the stylesheets load in. */:where(._railCell_18rty_54) {
  position: sticky;
  left: 0;
  z-index: var(--z-raised-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: var(--wp-row-h);
  padding: var(--s-1) var(--s-4);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--separator);
  background: var(--color-surface);
}/* The Gantt rail's columns — TASK NAME · PROFESSION · PROGRESS · STATUS — so
   the Scheduler's rail cells drop straight in (see .grid for the template). */:where(._railGrid_18rty_71) {
  display: grid;
  grid-template-columns: var(--wp-rail-cols);
  column-gap: var(--s-2);
}/* The frame of every timeline (right) cell: one grid column per day, the
   Gantt's faint day lines and heavier week lines painted as backgrounds
   rather than a node per day. Marks are placed by `grid-column`, all on
   row 1, stacked in source order. */:where(._timeCell_18rty_81) {
  display: grid;
  grid-template-columns: repeat(var(--wp-days), minmax(0, 1fr));
  grid-template-rows: var(--wp-row-h);
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--separator);
  background-image:
    linear-gradient(to right, var(--gantt-gridline-major) 1px, transparent 1px),
    linear-gradient(to right, var(--gantt-gridline) 1px, transparent 1px);
  background-size:
    calc(700% / var(--wp-days)) 100%,
    calc(100% / var(--wp-days)) 100%;
}._empty_18rty_96,
._noMatches_18rty_97 {
  grid-column: 1 / -1;
}._empty_18rty_96 {
  padding: var(--s-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--g500);
}
/* The pinned lane reads as its own band: a tinted row above the promises. */
._rail_1ze0x_2 {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-1);
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  background: var(--g50);
}

._time_1ze0x_12 {
  grid-template-rows: minmax(56px, auto);
  align-items: start;
  background-color: var(--g50);
}

._head_1ze0x_19 {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._heading_1ze0x_27 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._notes_1ze0x_33 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}

/* One day's chips, stacked. */
._cell_1ze0x_39 {
  position: relative;
  z-index: var(--z-raised-1);
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: var(--s-1) 3px;
}

._chip_1ze0x_50 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--navy);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

._chip_1ze0x_50:hover {
  border-color: var(--g400);
}

._chip_1ze0x_50:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

/* Past its due date: the Daily List's overdue tone. */
._chip_1ze0x_50[data-late] {
  border-color: transparent;
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Completed (shown when its box is checked): faded, done with. */
._chip_1ze0x_50[data-completed] {
  opacity: 0.55;
}

/* Critical: the critical card's hairline (after `late`, so it survives it). */
._chip_1ze0x_50[data-critical] {
  border-color: var(--ops-critical-edge);
}

._title_1ze0x_94 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

._star_1ze0x_101 {
  flex-shrink: 0;
  color: var(--amber);
}

._more_1ze0x_106 {
  color: var(--g500);
}
._headerCorner_o2xyx_1 {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  /* Clip the always-rendered header grid so it can't spill past the (animating)
     column width while collapsed / mid-expand. */
  overflow: hidden;
}

._headerCornerCollapsed_o2xyx_13 {
  justify-content: center;
}

/* Same grid-template-columns and padding as .groupRow / .taskRow so column
   titles line up with the values below. The toggle button is absolutely
   positioned (see .collapseBtn) so it doesn't shrink the 1fr task track. */
._headerGrid_o2xyx_20 {
  display: grid;
  grid-template-columns: 1fr calc(var(--gantt-col-trade) * var(--sched-zoom, 1)) calc(var(--gantt-col-ppc) * var(--sched-zoom, 1)) calc(var(--gantt-col-status) * var(--sched-zoom, 1));
  column-gap: calc(8px * var(--sched-zoom, 1));
  width: 100%;
  align-items: center;
  padding: 0 calc(16px * var(--sched-zoom, 1));
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g500);
  opacity: 1;

  /* Delay the fade-in so the titles appear only after the expand transition
     (matches .page's 260ms --gantt-label-col animation) has mostly played —
     otherwise they'd show while the column is still narrow. */
  transition: opacity 120ms ease 160ms;
}

/* Collapsed: hidden + inert, and fades out fast (no delay) on minimize. */
._headerGridHidden_o2xyx_41 {
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease;
}

@media (prefers-reduced-motion: reduce) {
  ._headerGrid_o2xyx_20,
  ._headerGridHidden_o2xyx_41 {
    transition: none;
  }
}

/* The frame both edge-anchored icon buttons share — the labels-collapse toggle
   and the row kebab: pinned to the right edge, centred on the row, no chrome. */
._collapseBtn_o2xyx_19,
._kebab_o2xyx_57 {
  appearance: none;
  position: absolute;
  right: calc(6px * var(--sched-zoom, 1));
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

._collapseBtn_o2xyx_19 {
  /* Box + offset scale with zoom (like the icon below) so the button shrinks
     with the columns/text instead of overflowing the Status title at low zoom. */
  width: calc(28px * var(--sched-zoom, 1));
  height: calc(28px * var(--sched-zoom, 1));
  color: var(--g500);
  transition: right 260ms cubic-bezier(0.4, 0, 0.2, 1), transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

._collapseBtn_o2xyx_19 svg {
  display: block;

  /* Override the inline 16×16 attrs so the labels-collapse icon scales too. */
  width: calc(16px * var(--sched-zoom, 1));
  height: calc(16px * var(--sched-zoom, 1));
}

/* Stay absolute in both states so the button slides with the column edge
   instead of snapping between layout modes. Centre it with the percentage
   mirror of the classic centring trick: right:50% puts its right edge on the
   column's centre line, translateX(50%) pulls it back by half its own width.
   No column-width or zoom numbers, so it's centred at every zoom — and since it
   still anchors by `right`, it keeps sliding with the column edge on collapse. */
._headerCornerCollapsed_o2xyx_13 ._collapseBtn_o2xyx_19 {
  right: 50%;
  transform: translate(50%, -50%);
}

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

._colTask_o2xyx_105 { padding-left: 0; }

/* Column order: TASK NAME · PROFESSION · PROGRESS · STATUS. Alignment, header
   and body alike: PROGRESS is a number column so it right-aligns (tabular
   digits + "%" line up down the column); PROFESSION and STATUS center their
   pill under a centered title (see RailCells .cell). The
   task-name column (.colTask) stays left — indented WBS tree, centering would
   fight the hierarchy indentation. The grids' column-gap keeps neighbours
   apart, so no cell needs its own inline padding. */
._colMeta_o2xyx_114 { text-align: center; }

._colPpc_o2xyx_116 { text-align: right; }

/* Header titles truncate as their column narrows (mirrors the mockup) so
   "PROGRESS"/"PROFESSION" ellipsize instead of overflowing into each other. */
._headerGrid_o2xyx_20 ._colMeta_o2xyx_114 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rows_o2xyx_126 {
  /* position: relative and minHeight are set via inline style for virtualisation */
  overflow: hidden;
}

._groupRow_o2xyx_17 {
  display: grid;
  grid-template-columns: 1fr calc(var(--gantt-col-trade) * var(--sched-zoom, 1)) calc(var(--gantt-col-ppc) * var(--sched-zoom, 1)) calc(var(--gantt-col-status) * var(--sched-zoom, 1));
  column-gap: calc(8px * var(--sched-zoom, 1));
  align-items: center;

  /* height is set via inline style for virtualisation */
  background: var(--g50);
  border-bottom: 1px solid var(--separator);
  padding: 0 calc(16px * var(--sched-zoom, 1));
  font-weight: 600;
  color: var(--g800);
  box-sizing: border-box;
}

._groupHeader_o2xyx_146 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--sched-zoom, 1));
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  overflow: hidden;
}

._groupHeader_o2xyx_146:hover {
  color: var(--info);
}

._chevron_o2xyx_165 {
  font-size: var(--fs-3xs);
  color: var(--g500);
  width: calc(12px * var(--sched-zoom, 1));
  display: inline-flex;
  justify-content: center;
}

._wbs_o2xyx_173 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
  min-width: calc(30px * var(--sched-zoom, 1));
  flex-shrink: 0;
}

._groupName_o2xyx_182 {
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._taskRow_o2xyx_17 {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--separator);
  display: grid;
  grid-template-columns: 1fr calc(var(--gantt-col-trade) * var(--sched-zoom, 1)) calc(var(--gantt-col-ppc) * var(--sched-zoom, 1)) calc(var(--gantt-col-status) * var(--sched-zoom, 1));
  column-gap: calc(8px * var(--sched-zoom, 1));
  align-items: center;
  width: 100%;

  /* height is set via inline style for virtualisation */
  padding: 0 calc(16px * var(--sched-zoom, 1));
  font: inherit;
  text-align: left;
  color: var(--g700);
  cursor: pointer;
  box-sizing: border-box;
}

._taskRow_o2xyx_17:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
}

/* A summary task expanded → reads as a group divider: tinted band + heavier
   label, matching .groupRow. Collapsed, the class is dropped → normal task lane. */
._taskRowAsGroup_o2xyx_216 {
  background: var(--g50);
  color: var(--g800);
}

._taskRowAsGroup_o2xyx_216 ._taskName_o2xyx_221 {
  font-weight: 600;
}

/* Hover-only kebab — uses the row's absolute positioning context as its anchor.
   Hidden it is transparent and parked 6px to the right; the row's hover fades
   it in and slides it home. */
._kebab_o2xyx_57 {
  /* Scale with zoom so the menu button shrinks with the row instead of staying
     full-size (and oversized) when zoomed out. No padding: the zoom-scaled
     glyph fills the zoom-scaled box (KebabButton's 6px would crush it). */
  width: calc(24px * var(--sched-zoom, 1));
  height: calc(24px * var(--sched-zoom, 1));
  padding: 0;
  border-radius: var(--r-md);
  color: var(--g600);
  opacity: 0;

  /* Hidden, it waits 6px out to the right; it slides in as the status glides
     aside (RailCells' --kebab-lane), trailing it by 40ms so the two read as one
     gesture. */
  transform: translate(calc(6px * var(--sched-zoom, 1)), -50%);
  transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background 120ms ease-out;
}

/* Keyboard focus only — see RailCells' Commit button for why not :focus-within. */
._taskRow_o2xyx_17:hover ._kebab_o2xyx_57,
._taskRow_o2xyx_17:is(:focus-visible, :has(:focus-visible)) ._kebab_o2xyx_57,
._groupRow_o2xyx_17:hover ._kebab_o2xyx_57,
._groupRow_o2xyx_17:is(:focus-visible, :has(:focus-visible)) ._kebab_o2xyx_57,
._kebabOpen_o2xyx_251 {
  opacity: 1;
  transform: translateY(-50%);
  transition-delay: 40ms, 40ms, 0ms;
}

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

._kebab_o2xyx_57:hover,
._kebab_o2xyx_57:focus-visible {
  background: var(--g100);
  color: var(--g800);
  outline: none;
}

._kebab_o2xyx_57 svg {
  display: block;

  /* Override the intrinsic 14×14 so the glyph scales with zoom too. */
  width: calc(14px * var(--sched-zoom, 1));
  height: calc(14px * var(--sched-zoom, 1));
}

/* Destructive row-menu action (delete) — tints the item + its icon red so the
   irreversible action reads as distinct from the additive ones above it. */
._menuItemDanger_o2xyx_278 {
  color: var(--red);
}

/* Hide the kebab when the label column is collapsed — there's no space for it. */
._rowsCollapsed_o2xyx_283 ._kebab_o2xyx_57 {
  display: none;
}

._taskRow_o2xyx_17:hover {
  background: var(--g50);
}

._taskRowSelected_o2xyx_291,
._taskRowSelected_o2xyx_291:hover {
  background: var(--info-tint);
}

/* ── Sticky group/summary headers overlay ─────────────────────────────────── */

/* Pinned copies of the current group + ancestor summaries. Display-only: the
   layer is click-through so all interaction stays on the real rows beneath. */

/* The browser pins this under the title (`top` set inline to the header height),
   so the pinned headers never drift with the scroll. Zero height + a first-child
   slot in the label column gives sticky a top anchor without affecting layout;
   the absolute header copies render below it. */
._stickyLayer_o2xyx_305 {
  position: sticky;
  top: 0;
  height: 0;
  z-index: var(--z-raised-2);
  pointer-events: none;
}

/* Opaque grey fill for every pinned header — groups and summaries alike — so
   the scrolling rows can't bleed through (a leaf .taskRow is normally
   transparent). Scoped to .stickyLayer so it doesn't touch the real rows;
   groups already get g50 from .groupRow. */
._stickyLayer_o2xyx_305 ._taskRow_o2xyx_17 {
  background: var(--g50);
}

/* The pinned rows are interactive (toggle / select) — re-enable pointer events
   the layer turns off, and show the click affordance. Gaps between rows keep the
   layer's pointer-events: none, so they stay click-through to the canvas. */
._stickyLayer_o2xyx_305 ._groupRow_o2xyx_17,
._stickyLayer_o2xyx_305 ._taskRow_o2xyx_17 {
  pointer-events: auto;
  cursor: pointer;
}

._taskNameCell_o2xyx_330 {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--sched-zoom, 1));

  /* No fixed indent: the chevron (or its same-width spacer) plus the flex gap
     supplies the 22px that aligns a depth-0 task name under the group name.
     Deeper rows add `depth * INDENT_PER_LEVEL_PX` of padding-left inline. */
  overflow: hidden;
}

/* Collapse toggle on a summary task row. Reuses the group chevron glyph; sized
   to match the same-width spacer leaves reserve so names line up across rows. */
._taskChevron_o2xyx_343 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}

._taskChevron_o2xyx_343:hover {
  color: var(--info);
}

/* Same width as .chevron so a leaf's name sits exactly where a summary's does. */
._chevronSpacer_o2xyx_361 {
  width: calc(12px * var(--sched-zoom, 1));
  flex-shrink: 0;
}

._taskName_o2xyx_221 {
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Amber "!" mark after a task's name — a stock claim on it now exceeds the
   current CAD ceiling (spec §8). Fixed 16px circle regardless of zoom (unlike
   .milestoneMark) since it's a status indicator, not a geometric drawing. */
._stockFlag_o2xyx_376 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-circle);
  background: var(--amber);
  color: var(--accent-attention-dark);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
}

._milestoneMark_o2xyx_375 {
  color: var(--amber);
  flex-shrink: 0;

  /* Pin the diamond to the end of the name column (the `1fr` track) instead of
     letting it trail the name text — so it lands in the same spot on every row
     regardless of how long or truncated the name is. A couple px off the
     absolute edge so it doesn't sit flush against the column boundary. */
  margin-left: auto;
  margin-right: 2px;

  /* Nudge up slightly so it reads level with the meta cells beside it rather
     than sitting a touch low. */
  transform: translateY(calc(-1px * var(--sched-zoom, 1)));

  /* Inline SVG width/height attrs are fixed at 10; CSS overrides them so the
     diamond scales with the geometric zoom. */
  width: calc(10px * var(--sched-zoom, 1));
  height: calc(10px * var(--sched-zoom, 1));
}

._ppc_o2xyx_413 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
  font-variant-numeric: tabular-nums;
}

/* Collapsed mode: only the WBS number shows. The grid collapses to one column
   wide enough for "12.34"; .colMeta cells are hidden so layout stays clean. */
._rowsCollapsed_o2xyx_283 ._groupRow_o2xyx_17,
._rowsCollapsed_o2xyx_283 ._taskRow_o2xyx_17 {
  grid-template-columns: 1fr;
  padding: 0 8px;
}

._rowsCollapsed_o2xyx_283 ._colMeta_o2xyx_114 {
  display: none;
}

._rowsCollapsed_o2xyx_283 ._groupName_o2xyx_182,
._rowsCollapsed_o2xyx_283 ._taskName_o2xyx_221,
._rowsCollapsed_o2xyx_283 ._stockFlag_o2xyx_376,
._rowsCollapsed_o2xyx_283 ._milestoneMark_o2xyx_375 {
  display: none;
}

._rowsCollapsed_o2xyx_283 ._taskNameCell_o2xyx_330 {
  padding-left: 0;
  justify-content: center;
  gap: 6px;
}

/* Collapsed-label mode shows the WBS number. Summary tasks KEEP their collapse
   chevron so sub-tasks stay collapsible here too (matching group rows); only
   leaf rows drop the empty spacer so their number stays centered. */
._rowsCollapsed_o2xyx_283 ._chevronSpacer_o2xyx_361 {
  display: none;
}

/* Groups keep their chevron in collapsed mode so the row stays clickable
   as a group-collapse toggle — bumped to a readable size since it's now
   one of only two glyphs in the row. */
._rowsCollapsed_o2xyx_283 ._groupHeader_o2xyx_146 {
  justify-content: center;
  width: 100%;
  gap: 6px;
}

/* Per-row chevrons keep their base (expanded-mode) size in collapsed mode — the
   bumped glyph read too heavy beside the bare WBS numbers. */

._rowsCollapsed_o2xyx_283 ._wbs_o2xyx_173 {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--g700);
}

/* Right-click-on-arrow context menu (expand all / collapse all). Inline (not
   portaled) so it stays inside .page and visible in native fullscreen; the
   fixed backdrop captures the click-away. */
._arrowMenuBackdrop_o2xyx_473 {
  position: fixed;
  inset: 0;
  z-index: var(--z-popover);
}

._arrowMenu_o2xyx_473 {
  position: fixed;
  min-width: 168px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

._arrowMenuItem_o2xyx_491 {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 7px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--g800);
  border-radius: var(--r-sm);
  cursor: pointer;
}

._arrowMenuItem_o2xyx_491:hover {
  background: var(--g100);
}
._cell_1otvc_1 {
  display: flex;
  align-items: center;

  /* `safe`: content wider than a squeezed cell starts at its left edge and
     ellipsizes, instead of overflowing both sides (clipping "Administration"
     to "iministrati"). */
  justify-content: safe center;
  min-width: 0;
  overflow: hidden;
}

._admin_1otvc_13,
._rollup_1otvc_14 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-xs);
  color: var(--g500);
  white-space: nowrap;
}

/* The squeezed Administrative glyph. */
._admin_1otvc_13[role='img'] {
  display: inline-flex;
  flex-shrink: 0;
}

._dash_1otvc_29 { color: var(--g400); }

._status_1otvc_31 {
  gap: 6px;

  /* What the row kebab covers of this cell (`KEBAB_LANE` in lib/labelPanel)
     plus a hairline, so a shrunk pill's edge clears the kebab. */
  --kebab-lane: calc(17px * var(--sched-zoom, 1));

  transition: padding-right 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Squeezed: the cell reaches over the row's 16px right padding to the panel
   edge, so the dot centres in the column as the eye sees it, not 8px left of
   it. Its lane is then the kebab's whole footprint (6px inset + 24px button). */
._statusSqueezed_1otvc_44 {
  margin-right: calc(-16px * var(--sched-zoom, 1));

  --kebab-lane: calc(30px * var(--sched-zoom, 1));
}

/* At rest the status is centred in its cell. While the row is hovered (or
   keyboard-focused, or its menu is open) the kebab comes in, so the cell gives
   up the kebab's lane and the status glides over to centre in what's left. */
[data-rail-row]:is(:hover, :focus-visible, :has(:focus-visible, [data-popup-open])) ._status_1otvc_31 {
  padding-right: var(--kebab-lane);
}

/* A pill (never the squeezed rail's dot, which wears .chip too) shrinks into
   that space whole: dot and shape kept, padding and gap tightened first, and
   only a label that still doesn't fit ellipsizes. */
[data-rail-row]:is(:hover, :focus-visible, :has(:focus-visible, [data-popup-open])) ._status_1otvc_31:not(._statusSqueezed_1otvc_44) ._chip_1otvc_57 {
  width: 100%;
  padding-inline: 0.5em;

  --chip-gap: 0.35em;
}

._chip_1otvc_57 {
  max-width: 100%;
  transition: padding 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Every pill fills the status column (a small inset each side), so all the
   rail's pills share one width — the column's — at no per-row cost. A hovered
   row's narrower cell narrows its pill with it. */
._status_1otvc_31:not(._statusSqueezed_1otvc_44) ._chip_1otvc_57 {
  width: calc(100% - 8px * var(--sched-zoom, 1));
  justify-content: center;
}

/* After .chip, so it outranks that rule's transition. */
@media (prefers-reduced-motion: reduce) {
  ._status_1otvc_31,
  ._chip_1otvc_57 { transition: none; }
}

/* The squeezed roll-up: a progress ring, 14/12 of --fs-xs so it scales with
   the zoom like the leaves' dots (LadderChip .dot). */
._ring_1otvc_88 {
  width: calc(var(--fs-xs) * 14 / 12);
  height: calc(var(--fs-xs) * 14 / 12);
  flex-shrink: 0;
}

._ringTrack_1otvc_94,
._ringFill_1otvc_95 {
  fill: none;
  stroke-width: 2.4;
}

._ringTrack_1otvc_94 { stroke: var(--g200); }
._ringFill_1otvc_95 { stroke: var(--gantt-status-done-fg); }
._ringDone_1otvc_102 { fill: var(--gantt-status-done-fg); }

._ringCheck_1otvc_104 {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The Commit button shows only while its row is hovered or holds keyboard
   focus; it then takes the chip's place. The row opts in with `data-rail-row`. */
._commitBtn_1otvc_114 {
  --commit-display: inline-flex;

  display: none;
  align-items: center;
  height: calc(24px * var(--sched-zoom, 1));
  padding: 0 calc(10px * var(--sched-zoom, 1));
  border: 0;
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--color-surface);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

._commitBtn_1otvc_114:hover { background: var(--g700); }

/* The labelled button shrinks into the cell's hover space like the pill does
   (the kebab takes the rest): padding tightened, and shown as a block so its
   label can ellipsize, which a flex box's bare text can't. */
._commitBtn_1otvc_114:not(._commitIcon_1otvc_137) {
  --commit-display: inline-block;

  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: calc(24px * var(--sched-zoom, 1));
  padding-inline: calc(6px * var(--sched-zoom, 1));
}

/* Squeezed: an icon button that fits the status cell. */
._commitIcon_1otvc_137 {
  justify-content: center;
  flex-shrink: 0;
  width: calc(24px * var(--sched-zoom, 1));
  padding: 0;
}

/* Keyboard focus only (`:focus-visible`, not `:focus-within`): clicking a row
   focuses it and closing its drawer hands focus back, which must not leave the
   hover buttons up once the pointer has gone. */
[data-rail-row]:is(:hover, :focus-visible, :has(:focus-visible)) ._commitBtn_1otvc_114 { display: var(--commit-display); }

[data-rail-row]:is(:hover, :focus-visible, :has(:focus-visible)) ._commitBtn_1otvc_114 ~ :is(._chip_1otvc_57, ._rollup_1otvc_14, ._ring_1otvc_88) { display: none; }

/* A promise's checklist count beside its progress. */
._checks_1otvc_164 { margin-left: 4px; }
._frame_18rty_1 {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: var(--s-3) var(--s-6) var(--s-5);
}/* The grid's box: the border, corners and card chrome; .grid inside scrolls. */._gridFrame_18rty_9 {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}/* ONE scroll container, two columns — the rail and the days. Every row is a
   `display: contents` pair of cells, so the rail stays pinned left while the
   header stays pinned on top, both inside the same scroll box. A day never
   narrows past the Gantt's week-zoom column; below that the days scroll
   sideways under the rail, as the Gantt's do. `--wp-days` (set inline) is the
   number of day columns.

   The rail keeps the Gantt's meta columns (PROFESSION · PROGRESS · STATUS, on
   its own column tokens) beside a task-name column narrower than the Gantt's:
   the plan is read across the days, not down the names. Grouped by profession
   the band already names the trade, so that column is dropped. */._grid_18rty_8 {
  /* Promise rows are two lines tall — a Trusstor calendar card's name over
     its facts — taller than the Gantt's single-line row. */
  --wp-row-h: 52px;
  --wp-name-col: 180px;
  --wp-rail-cols: 1fr var(--gantt-col-trade) var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-trade) + var(--gantt-col-ppc) + var(--gantt-col-status) + 3 * var(--s-2));

  display: grid;
  grid-template-columns:
    calc(var(--wp-name-col) + var(--wp-rail-meta) + 2 * var(--s-4))
    minmax(calc(var(--wp-days) * 24px), 1fr);
  grid-auto-rows: min-content;
  align-content: start;
}._grid_18rty_8[data-without-profession] {
  --wp-rail-cols: 1fr var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-ppc) + var(--gantt-col-status) + 2 * var(--s-2));
}/* The frame of every rail (left) cell. Opaque: the days scroll under it.
   The two frames are composed by every row component and sit under
   :where() — zero specificity — so a row's own overrides (a tinted lane, a
   group band) win whatever order the stylesheets load in. */:where(._railCell_18rty_54) {
  position: sticky;
  left: 0;
  z-index: var(--z-raised-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: var(--wp-row-h);
  padding: var(--s-1) var(--s-4);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--separator);
  background: var(--color-surface);
}/* The Gantt rail's columns — TASK NAME · PROFESSION · PROGRESS · STATUS — so
   the Scheduler's rail cells drop straight in (see .grid for the template). */:where(._railGrid_18rty_71) {
  display: grid;
  grid-template-columns: var(--wp-rail-cols);
  column-gap: var(--s-2);
}/* The frame of every timeline (right) cell: one grid column per day, the
   Gantt's faint day lines and heavier week lines painted as backgrounds
   rather than a node per day. Marks are placed by `grid-column`, all on
   row 1, stacked in source order. */:where(._timeCell_18rty_81) {
  display: grid;
  grid-template-columns: repeat(var(--wp-days), minmax(0, 1fr));
  grid-template-rows: var(--wp-row-h);
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--separator);
  background-image:
    linear-gradient(to right, var(--gantt-gridline-major) 1px, transparent 1px),
    linear-gradient(to right, var(--gantt-gridline) 1px, transparent 1px);
  background-size:
    calc(700% / var(--wp-days)) 100%,
    calc(100% / var(--wp-days)) 100%;
}._empty_18rty_96,
._noMatches_18rty_97 {
  grid-column: 1 / -1;
}._empty_18rty_96 {
  padding: var(--s-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--g500);
}/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}/* Four-pane frozen grid (Excel-style): corner + header strip on top, label
   column + body below. Only .scroller's viewport scrolls — its bars therefore
   start at the data region (after the label column, below the header). The
   header/label panes are overflow:hidden viewports; MatrixTable mirrors the
   body's scrollLeft/scrollTop onto them in its scroll handler. The frame
   carries the grid's outer top/left border (cells carry right/bottom), so
   the four panes still read as one continuous grid with no doubled seams:
   the corner/label cells' border-right draws the label|data seam, the
   corner/header cells' border-bottom draws the header|body seam. */._frame_ai4ii_10 {
  --tracker-label-w: 240px;

  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ops-card-border);
  border-left: 1px solid var(--ops-card-border);
}._topRow_ai4ii_21 {
  display: flex;
  flex: none;
}._corner_ai4ii_26 {
  flex: none;
  width: var(--tracker-label-w);
  background: var(--tracker-surface);
}._headerViewport_ai4ii_32 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}._bottomRow_ai4ii_38 {
  display: flex;
  flex: 1;
  min-height: 0;
}._labelViewport_ai4ii_44 {
  flex: none;
  width: var(--tracker-label-w);
  overflow: hidden;
}._scroller_ai4ii_2 {
  flex: 1;
  min-width: 0;
}/* Pane grids size to their TRACKS (width: max-content), so the body pane's
   scrollWidth is exactly N×140px and the header grid mirrors it 1:1;
   min-width: 100% still lets them fill the pane when columns are few. Row
   heights come from the inline gridTemplateRows (see MatrixTable). */._headerGrid_ai4ii_59,
._labelGrid_ai4ii_60,
._bodyGrid_ai4ii_61 {
  display: grid;
}._headerGrid_ai4ii_59,
._bodyGrid_ai4ii_61 {
  width: max-content;
  min-width: 100%;
}._colHead_ai4ii_71,
._floorLabel_ai4ii_72,
._zoneLabel_ai4ii_73 {
  background: var(--tracker-surface);
}/* Crosshair hover: only 3 cells are washed — the hovered cell (.hit, strong) plus
   its column header and row label (.mark, medium). Toggled by MatrixTable, whose
   delegation hangs on .frame so one listener covers all four panes and the
   queries resolve across them (a cell's header lives in the header pane, its
   label in the label pane).
   The wash is a positioned ::after overlay (not an inset box-shadow): data cells
   render an OPAQUE status/floor fill that would hide a box-shadow, so an empty,
   planned or idle cell showed no hover feedback. The ::after is the last box in
   tree order, so it paints ABOVE the fill and the StatusMark alike; it stays
   translucent so the glyph reads through, and pointer-events:none keeps clicks
   and the crosshair delegation (closest('[data-row]')) unaffected.
   NOTE: every marked element must be POSITIONED for inset:0 to anchor — data
   cells are `position: relative` (matrixCell.module.css); the corner, column
   heads and row labels get `position: relative` below (their old
   `position: sticky`, which used to provide this, is gone with the pane
   layout). The same rule anchors the header's absolutely-positioned furniture
   (.gear, .bottomBar, .colAssignee). */._corner_ai4ii_26,
._colHead_ai4ii_71,
._floorLabel_ai4ii_72,
._zoneLabel_ai4ii_73 {
  position: relative;
}._mark_ai4ii_78::after,
._hit_ai4ii_77::after,
._cornerToggle_ai4ii_103:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}._mark_ai4ii_78::after,
._cornerToggle_ai4ii_103:hover::after {
  background: var(--tracker-crosshair);
}._hit_ai4ii_77::after {
  background: var(--tracker-crosshair-hit);
}._corner_ai4ii_26,
._colHead_ai4ii_71,
._floorLabel_ai4ii_72,
._zoneLabel_ai4ii_73 {
  padding: var(--s-2) var(--s-3);
  border-right: 1px solid var(--ops-card-border);
  border-bottom: 1px solid var(--ops-card-border);
}._corner_ai4ii_26 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* The whole corner cell collapses / expands every floor; its hover wash reuses the
   crosshair overlay group above (a translucent layer the label + caret read through). */._cornerToggle_ai4ii_103 { cursor: pointer; }/* Caret pinned to the right edge of the cell. */._collapseAllCaret_ai4ii_144 { margin-left: auto; display: inline-flex; transition: transform 0.15s ease; }/* Expanded → chevron points up ("collapse all"); collapsed → down ("expand all"). */._collapseAllCaret_ai4ii_144[data-collapsed='false'] { transform: rotate(180deg); }/* Taller fixed floor so the extra profession line (below the title, above the
   %/milestone line) fits without the flow content colliding with the pinned
   bottom dependency bar. min-height is now redundant with (but harmless
   alongside) MatrixTable's explicit gridTemplateRows — the header track is
   set to HEADER_ROW_H from visibleRows.ts; keep the two numbers in sync. */._colHead_ai4ii_71 { display: flex; flex-direction: column; min-height: 130px; }/* Title + %/milestone group, kept together at the top of the cell. */._colTop_ai4ii_157 { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }/* Task title: shrink to its actual 1–2 lines (so the % below sticks right under
   it instead of floating below a reserved 2-line box), clamping longer names to
   two lines. The shared header height stays fixed via .colHead's min-height. */._colName_ai4ii_162 {
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.35;
  max-height: calc(2 * 1.35em);
  flex: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}/* Profession — pinned absolutely just above the predecessors/successors bar
   (same mechanism as .bottomBar, relative to the positioned cell), so it always
   sits at the bottom regardless of how tall the title/% flow content is. */._colAssignee_ai4ii_93 {
  position: absolute;
  right: var(--s-3);
  bottom: 30px; /* clears the .bottomBar (bottom: var(--s-2)) beneath it */

  /* Right-anchored, shrink-wrapped to the pill, and capped at a modest width so
     the pill never sprawls across the cell — a trade label longer than this
     ellipsizes (the pill's own min-width:0 + overflow:hidden chain). Tune
     max-width to taste. */
  max-width: 78px;
  text-align: right;
  overflow: hidden;
}._colSub_ai4ii_191  { display: flex; align-items: center; font-size: var(--fs-xs); color: var(--g500); }/* Space the milestone diamond off the % (the shared MilestoneMarker owns its look). */._milestoneSpacing_ai4ii_194 { margin-left: var(--s-1); }/* On-time risk badge (clock + level) — coloured by severity, matching the Daily
   List. Sits in the bottom-left stack, above the critical-path badge. */._risk_ai4ii_198 { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; font-size: var(--fs-xs); }._riskLow_ai4ii_199  { color: var(--g500); }._riskMid_ai4ii_200  { color: var(--color-warn); }._riskHigh_ai4ii_201 { color: var(--red); }/* Activity headers are clickable (open the drawer) and reserve a bottom strip for
   the pinned bottom bar + top-right space for the settings kebab. The cell is
   position:relative (see the crosshair NOTE above), which acts as the containing
   block for both. */._colHeadActivity_ai4ii_207 {
  padding-bottom: 42px; /* room for the risk + critical stack pinned bottom-left */
  padding-right: calc(var(--s-3) + 18px);
  cursor: pointer;
}._colHeadActivity_ai4ii_207:hover ._colName_ai4ii_162 { text-decoration: underline; }/* Zero-box wrapper that catches menu clicks (see ActivitySettingsMenu). */._gearWrap_ai4ii_215 { display: contents; }/* The settings kebab (ui/KebabButton), top-right of an activity header. */._gear_ai4ii_93 {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  padding: 2px;
}/* Pinned bottom bar: short gold critical tag (left, shrinks) + dep chips (right). */._bottomBar_ai4ii_93 {
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-2);
  display: flex;
  align-items: flex-end; /* chips align with the bottom of the left stack (⚡) */
  gap: var(--s-2);
}/* Bottom-left stack: on-time risk (top) over critical-path badge (bottom). */._leftStack_ai4ii_237 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
}._depSlot_ai4ii_244 {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
}/* Gold critical-path badge (icon only), matching the Daily List tag's gold. */._critTag_ai4ii_251 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 3px;
  border: 1px solid var(--critical-path-tag-fg);
  border-radius: var(--r-sm);
  color: var(--critical-path-tag-fg);
}._floorLabel_ai4ii_72 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 52px;
  font-weight: 700;
  background: var(--tracker-surface);
  border-top: 2px solid var(--tracker-rule);
  cursor: pointer;
  text-align: left;
}._zoneLabel_ai4ii_73 {
  padding-left: calc(var(--s-7) + var(--s-4));
  color: var(--g700);
  font-size: var(--fs-sm);
}._caret_ai4ii_280 {
  display: inline-flex;
  align-items: center;
  color: var(--g500);
  transition: transform 0.15s ease;
}._caret_ai4ii_280[data-collapsed='true'] { transform: rotate(-90deg); }._empty_ai4ii_288 {
  padding: var(--s-5);
  text-align: center;
  color: var(--g500);
}/* Dependency-jump landing flash: an overlay pinned to the target column's grid
   tracks (header pane gets a twin), pulsing twice in the info blue and fading
   out. pointer-events off so cells stay clickable mid-flash; MatrixTable
   unmounts it on animationend. */._jumpFlash_ai4ii_298 {
  pointer-events: none;
  z-index: var(--z-raised-2);
}
/* A group band spans the grid's two columns without a box of its own: the
   Gantt's group row (RowLabels .groupRow) — tinted, heavier label. */
._group_sjunm_2 {
  display: contents;
}

._rail_sjunm_7 {
  min-height: var(--gantt-row-h);
  background: var(--g50);
  font-weight: 600;
  color: var(--g800);
}

._time_sjunm_15 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: var(--gantt-row-h);
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--separator);
  background: var(--g50);
}

._count_sjunm_26 {
  font-size: var(--fs-xs);
  color: var(--g500);
  white-space: nowrap;
}

._toggle_sjunm_32 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: inherit;
  text-align: left;
}

._toggle_sjunm_32:hover {
  color: var(--info);
}

._toggle_sjunm_32:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* The Progress Tracker's collapse caret: rotates -90deg when collapsed. */
._caret_sjunm_51 {
}
/* Heights/line-heights are wrapped in calc(... * var(--sched-zoom, 1)) so the
   header's internal rows scale with the geometric zoom (the .header container
   height is scaled too — they must stay in sync). --sched-zoom is set on
   .matrix (an ancestor) and defaults to 1, so 100% zoom is byte-for-byte the
   original layout. Borders stay 1px (hairlines don't scale). */
._header_1lin2_2 {
  position: relative;

  /* height is set via inline style (headerHeightFor(zoom) * zoom-scale) so it
     adapts between 76px (Day, four rows) and 60px (Week / Month, three rows). */
  background: var(--g50);
  border-bottom: 1px solid var(--border);
}

._periodRow_1lin2_15 {
  position: relative;
  height: calc(22px * var(--sched-zoom, 1));
  border-bottom: 1px solid var(--separator);
}

._period_1lin2_15 {
  position: absolute;
  top: 0;
  height: calc(22px * var(--sched-zoom, 1));
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g700);
  border-right: 1px solid var(--separator);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

._periodCurrent_1lin2_37 {
  background: var(--info-tint);
  color: var(--info);
}

/* ── Day-zoom rows: per-day cells stacked under the month strip ──────── */

._weekdayRow_1lin2_44,
._dayNumberRow_1lin2_45,
._rokuyoRow_1lin2_46 {
  position: relative;
  border-bottom: 1px solid var(--separator);
}

._weekdayRow_1lin2_44   { height: calc(16px * var(--sched-zoom, 1)); }
._dayNumberRow_1lin2_45 { height: calc(22px * var(--sched-zoom, 1)); }
._rokuyoRow_1lin2_46    { height: calc(16px * var(--sched-zoom, 1)); border-bottom: 0; }

._dayCell_1lin2_55 {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-right: 1px solid var(--separator);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Shared typography between the per-day weekday abbreviation cell and the
   week-zoom week-number cell. */
._weekdayCell_1lin2_69,
._weekNumberCell_1lin2_70 {
  height: calc(16px * var(--sched-zoom, 1));
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g600);
}

/* Week-zoom: a single cell spanning one week, labelled with the week number.
   Spans ~168px so it needs no compact font or weekend coloring. Composes
   .dayCell in the TSX for the shared layout block — only the deltas live here. */
._weekNumberCell_1lin2_70 {
  white-space: nowrap;
  overflow: hidden;
}

._dayNumberCell_1lin2_85 {
  height: calc(22px * var(--sched-zoom, 1));
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g800);
}

._rokuyoCell_1lin2_92 {
  height: calc(16px * var(--sched-zoom, 1));
  font-size: var(--fs-3xs);
  color: var(--g500);
  letter-spacing: -0.02em;
}

/* Week zoom — 24px columns can't fit 3-char EN weekdays at the normal
   font, so shrink one notch across all three rich rows. */
._weekdayCell_1lin2_69._compact_1lin2_101   { font-size: var(--fs-3xs); }
._dayNumberCell_1lin2_85._compact_1lin2_101 { font-size: var(--fs-2xs); }

._rokuyoCell_1lin2_92._compact_1lin2_101    {
  font-size: var(--fs-3xs);
  letter-spacing: -0.05em;
}

/* Weekend coloring — Sat=blue, Sun=red, per JP calendar convention.
   Applied to each per-day cell across all three rows; the cell bg is
   the soft tint, the text takes the saturated color. */
._cellSaturday_1lin2_112 {
  background: var(--gantt-weekend-saturday-bg);
  color: var(--gantt-weekend-saturday-fg);
}

._cellSunday_1lin2_117 {
  background: var(--gantt-weekend-sunday-bg);
  color: var(--gantt-weekend-sunday-fg);
}

/* Generic rest-day cell: used when a rest day falls on a weekday other
   than Sat/Sun (e.g. Friday in a Sun–Thu work calendar). Neutral tint
   so the JP visual convention for Sat/Sun remains dominant. */
._cellRest_1lin2_125 {
  background: var(--gantt-weekend-saturday-bg-soft);
  color: var(--g500);
}

/* ── Week / Month zoom: original tick + sub-tick rows ────────────────── */

._tickRow_1lin2_132 {
  position: relative;
  height: calc(24px * var(--sched-zoom, 1));
}

._tick_1lin2_132 {
  position: absolute;
  top: 0;
  height: calc(24px * var(--sched-zoom, 1));
  border-left: 1px solid var(--separator);
  padding-left: 4px;
}

._tickLabel_1lin2_145 {
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: calc(24px * var(--sched-zoom, 1));
}

._subTickRow_1lin2_151 {
  position: relative;
  height: calc(12px * var(--sched-zoom, 1));
}

._subTick_1lin2_151 {
  position: absolute;
  top: 0;
  height: calc(12px * var(--sched-zoom, 1));
  border-left: 1px solid var(--separator);
}

._subTickLabel_1lin2_163 {
  position: absolute;
  top: -1px;
  left: 2px;
  font-size: var(--fs-3xs);
  color: var(--g400);
  line-height: calc(12px * var(--sched-zoom, 1));
}
._frame_18rty_1 {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: var(--s-3) var(--s-6) var(--s-5);
}/* The grid's box: the border, corners and card chrome; .grid inside scrolls. */._gridFrame_18rty_9 {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}/* ONE scroll container, two columns — the rail and the days. Every row is a
   `display: contents` pair of cells, so the rail stays pinned left while the
   header stays pinned on top, both inside the same scroll box. A day never
   narrows past the Gantt's week-zoom column; below that the days scroll
   sideways under the rail, as the Gantt's do. `--wp-days` (set inline) is the
   number of day columns.

   The rail keeps the Gantt's meta columns (PROFESSION · PROGRESS · STATUS, on
   its own column tokens) beside a task-name column narrower than the Gantt's:
   the plan is read across the days, not down the names. Grouped by profession
   the band already names the trade, so that column is dropped. */._grid_18rty_8 {
  /* Promise rows are two lines tall — a Trusstor calendar card's name over
     its facts — taller than the Gantt's single-line row. */
  --wp-row-h: 52px;
  --wp-name-col: 180px;
  --wp-rail-cols: 1fr var(--gantt-col-trade) var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-trade) + var(--gantt-col-ppc) + var(--gantt-col-status) + 3 * var(--s-2));

  display: grid;
  grid-template-columns:
    calc(var(--wp-name-col) + var(--wp-rail-meta) + 2 * var(--s-4))
    minmax(calc(var(--wp-days) * 24px), 1fr);
  grid-auto-rows: min-content;
  align-content: start;
}._grid_18rty_8[data-without-profession] {
  --wp-rail-cols: 1fr var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-ppc) + var(--gantt-col-status) + 2 * var(--s-2));
}/* The frame of every rail (left) cell. Opaque: the days scroll under it.
   The two frames are composed by every row component and sit under
   :where() — zero specificity — so a row's own overrides (a tinted lane, a
   group band) win whatever order the stylesheets load in. */:where(._railCell_18rty_54) {
  position: sticky;
  left: 0;
  z-index: var(--z-raised-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: var(--wp-row-h);
  padding: var(--s-1) var(--s-4);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--separator);
  background: var(--color-surface);
}/* The Gantt rail's columns — TASK NAME · PROFESSION · PROGRESS · STATUS — so
   the Scheduler's rail cells drop straight in (see .grid for the template). */:where(._railGrid_18rty_71) {
  display: grid;
  grid-template-columns: var(--wp-rail-cols);
  column-gap: var(--s-2);
}/* The frame of every timeline (right) cell: one grid column per day, the
   Gantt's faint day lines and heavier week lines painted as backgrounds
   rather than a node per day. Marks are placed by `grid-column`, all on
   row 1, stacked in source order. */:where(._timeCell_18rty_81) {
  display: grid;
  grid-template-columns: repeat(var(--wp-days), minmax(0, 1fr));
  grid-template-rows: var(--wp-row-h);
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--separator);
  background-image:
    linear-gradient(to right, var(--gantt-gridline-major) 1px, transparent 1px),
    linear-gradient(to right, var(--gantt-gridline) 1px, transparent 1px);
  background-size:
    calc(700% / var(--wp-days)) 100%,
    calc(100% / var(--wp-days)) 100%;
}._empty_18rty_96,
._noMatches_18rty_97 {
  grid-column: 1 / -1;
}._empty_18rty_96 {
  padding: var(--s-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--g500);
}
/* The rail's column titles pin to BOTH edges: above the rail cells, and above
   the day header when the days scroll sideways. The titles themselves are the
   Gantt's (RowLabels .headerGrid). */
._railHead_1dttu_4 {
  top: 0;
  z-index: var(--z-raised-4);
  align-items: flex-end;
  padding: 0 0 var(--s-2);
  border-bottom-color: var(--border);
  background: var(--g50);
}

/* The Gantt's column titles (RowLabels .headerGrid) on this rail's columns —
   scoped so the override wins over the Gantt's own template. */
._railHead_1dttu_4 ._titles_1dttu_16 {
  grid-template-columns: var(--wp-rail-cols);
  padding: 0 var(--s-4);
}

/* The Gantt's header rows (TimelineHeader.module.css), laid on this grid's
   day columns instead of pixel offsets: month band, week, weekday, day. */
._timeHead_1dttu_23 {
  position: sticky;
  top: 0;
  z-index: var(--z-raised-3);
  display: grid;
  grid-template-columns: repeat(var(--wp-days), minmax(0, 1fr));
  align-content: end;
  min-width: 0;
  border-bottom: 1px solid var(--border);
  background: var(--g50);
}

/* The Gantt places these cells absolutely; here the grid places them. */
._timeHead_1dttu_23 > div {
  position: static;
  min-width: 0;
  border-bottom: 1px solid var(--separator);
}

/* Today: the column in the current month's colours (the Gantt's
   .periodCurrent), from the week row down; its labels in the same ink. */
._timeHead_1dttu_23 > ._today_1dttu_44 {
  background: var(--info-tint);
}

._timeHead_1dttu_23 > [data-today] {
  color: var(--info);
}
/* The Gantt's task bar (Bars.module.css .taskBar), toned by the rung instead
   of the task's plan colour — the rung's pale ground as the fill, its ink as
   the border; no progress band — and two lines tall, like a Trusstor
   calendar card: the name over its facts. It sits 4px inside its row. */
._bar_w85p3_5 {
  position: relative;
  z-index: var(--z-raised-1);
  grid-row: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: calc(var(--wp-row-h) - 8px);
  margin: 0 1px;
  border: 1px solid currentcolor;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* [data-rung] doubles the specificity so these win over the rung class
   whatever order the stylesheets load in: the rung's ground laid over the
   surface — opaque, like the Gantt's bars, where it crosses today's column or
   a rest day — and the Gantt's card shadow instead of the committed rung's
   outline ring. */
._bar_w85p3_5[data-rung],
._overrun_w85p3_25[data-rung] {
  background-image: linear-gradient(var(--rung-bg), var(--rung-bg));
  background-color: var(--color-surface);
}

._bar_w85p3_5[data-rung] {
  box-shadow: var(--shadow-card);
}

._bar_w85p3_5[data-cut-left] {
  margin-left: 0;
  border-left-style: dashed;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

._bar_w85p3_5[data-cut-right] {
  margin-right: 0;
  border-right-style: dashed;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* The card's two lines. */
._body_w85p3_49 {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 var(--s-2);
}

._line_w85p3_60 {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

._name_w85p3_70 {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gantt-bar-text);
}

/* Overdue, flagged as Trusstor flags it — in the rung's own ink, as are the
   days late after the name. */
._flag_w85p3_78 {
  display: inline-flex;
  flex-shrink: 0;
}

._late_w85p3_83 {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--s-1);
}

._facts_w85p3_89 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: var(--fs-2xs);
  color: var(--g600);
  white-space: nowrap;
  overflow: hidden;
}

._fact_w85p3_89 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
}

/* The overrun: from the day after the planned end to today, a plain stretch
   in the overdue rung's own tone — its fill and ink come from the rung class —
   joined to the bar it runs on from. */
._overrun_w85p3_25[data-rung] {
  /* Above the day shading, as the bar is — else rest days and today tint it. */
  position: relative;
  z-index: var(--z-raised-1);
  grid-row: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: calc(var(--wp-row-h) - 8px);
  margin-right: 1px;
  border: 1px solid currentcolor;
  border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  overflow: hidden;
}

._overrun_w85p3_25[data-lone] {
  margin-left: 1px;
  border-left: 1px solid currentcolor;
  border-radius: var(--r-lg);
}
._frame_18rty_1 {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: var(--s-3) var(--s-6) var(--s-5);
}/* The grid's box: the border, corners and card chrome; .grid inside scrolls. */._gridFrame_18rty_9 {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}/* ONE scroll container, two columns — the rail and the days. Every row is a
   `display: contents` pair of cells, so the rail stays pinned left while the
   header stays pinned on top, both inside the same scroll box. A day never
   narrows past the Gantt's week-zoom column; below that the days scroll
   sideways under the rail, as the Gantt's do. `--wp-days` (set inline) is the
   number of day columns.

   The rail keeps the Gantt's meta columns (PROFESSION · PROGRESS · STATUS, on
   its own column tokens) beside a task-name column narrower than the Gantt's:
   the plan is read across the days, not down the names. Grouped by profession
   the band already names the trade, so that column is dropped. */._grid_18rty_8 {
  /* Promise rows are two lines tall — a Trusstor calendar card's name over
     its facts — taller than the Gantt's single-line row. */
  --wp-row-h: 52px;
  --wp-name-col: 180px;
  --wp-rail-cols: 1fr var(--gantt-col-trade) var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-trade) + var(--gantt-col-ppc) + var(--gantt-col-status) + 3 * var(--s-2));

  display: grid;
  grid-template-columns:
    calc(var(--wp-name-col) + var(--wp-rail-meta) + 2 * var(--s-4))
    minmax(calc(var(--wp-days) * 24px), 1fr);
  grid-auto-rows: min-content;
  align-content: start;
}._grid_18rty_8[data-without-profession] {
  --wp-rail-cols: 1fr var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-ppc) + var(--gantt-col-status) + 2 * var(--s-2));
}/* The frame of every rail (left) cell. Opaque: the days scroll under it.
   The two frames are composed by every row component and sit under
   :where() — zero specificity — so a row's own overrides (a tinted lane, a
   group band) win whatever order the stylesheets load in. */:where(._railCell_18rty_54) {
  position: sticky;
  left: 0;
  z-index: var(--z-raised-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: var(--wp-row-h);
  padding: var(--s-1) var(--s-4);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--separator);
  background: var(--color-surface);
}/* The Gantt rail's columns — TASK NAME · PROFESSION · PROGRESS · STATUS — so
   the Scheduler's rail cells drop straight in (see .grid for the template). */:where(._railGrid_18rty_71) {
  display: grid;
  grid-template-columns: var(--wp-rail-cols);
  column-gap: var(--s-2);
}/* The frame of every timeline (right) cell: one grid column per day, the
   Gantt's faint day lines and heavier week lines painted as backgrounds
   rather than a node per day. Marks are placed by `grid-column`, all on
   row 1, stacked in source order. */:where(._timeCell_18rty_81) {
  display: grid;
  grid-template-columns: repeat(var(--wp-days), minmax(0, 1fr));
  grid-template-rows: var(--wp-row-h);
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--separator);
  background-image:
    linear-gradient(to right, var(--gantt-gridline-major) 1px, transparent 1px),
    linear-gradient(to right, var(--gantt-gridline) 1px, transparent 1px);
  background-size:
    calc(700% / var(--wp-days)) 100%,
    calc(100% / var(--wp-days)) 100%;
}._empty_18rty_96,
._noMatches_18rty_97 {
  grid-column: 1 / -1;
}._empty_18rty_96 {
  padding: var(--s-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--g500);
}
/* A promise is a pair of cells in the grid's two columns, no box of its own;
   hovering or selecting either half lights both, as a Gantt row does. */
._row_1ojfr_3 {
  display: contents;
}

/* The rail row: the Gantt rail's four columns (the frame's .railGrid). */
._rail_1ojfr_7 {
  cursor: pointer;
}

._time_1ojfr_13 {
  cursor: pointer;
}

._row_1ojfr_3:hover ._rail_1ojfr_7,
._row_1ojfr_3:hover ._time_1ojfr_13 {
  background-color: var(--g50);
}

/* The open drawer's promise: the Gantt's selected-row tint. The rail stays
   opaque (the tint is layered over the surface) so days never show through. */
._row_1ojfr_3[data-selected] ._rail_1ojfr_7 {
  background-image: linear-gradient(var(--info-tint), var(--info-tint));
  background-color: var(--color-surface);
}

._row_1ojfr_3[data-selected] ._time_1ojfr_13 {
  background-color: var(--info-tint);
}

/* ---- the task-name column ------------------------------------------------ */

._name_1ojfr_36 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: var(--g700);
  text-align: left;
}

._name_1ojfr_36:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._danger_1ojfr_50 {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-error);
}

._assignee_1ojfr_56 {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  white-space: nowrap;
}

/* ---- the day track ------------------------------------------------------- */
._frame_18rty_1 {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: var(--s-3) var(--s-6) var(--s-5);
}

/* The grid's box: the border, corners and card chrome; .grid inside scrolls. */
._gridFrame_18rty_9 {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* ONE scroll container, two columns — the rail and the days. Every row is a
   `display: contents` pair of cells, so the rail stays pinned left while the
   header stays pinned on top, both inside the same scroll box. A day never
   narrows past the Gantt's week-zoom column; below that the days scroll
   sideways under the rail, as the Gantt's do. `--wp-days` (set inline) is the
   number of day columns.

   The rail keeps the Gantt's meta columns (PROFESSION · PROGRESS · STATUS, on
   its own column tokens) beside a task-name column narrower than the Gantt's:
   the plan is read across the days, not down the names. Grouped by profession
   the band already names the trade, so that column is dropped. */
._grid_18rty_8 {
  /* Promise rows are two lines tall — a Trusstor calendar card's name over
     its facts — taller than the Gantt's single-line row. */
  --wp-row-h: 52px;
  --wp-name-col: 180px;
  --wp-rail-cols: 1fr var(--gantt-col-trade) var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-trade) + var(--gantt-col-ppc) + var(--gantt-col-status) + 3 * var(--s-2));

  display: grid;
  grid-template-columns:
    calc(var(--wp-name-col) + var(--wp-rail-meta) + 2 * var(--s-4))
    minmax(calc(var(--wp-days) * 24px), 1fr);
  grid-auto-rows: min-content;
  align-content: start;
}

._grid_18rty_8[data-without-profession] {
  --wp-rail-cols: 1fr var(--gantt-col-ppc) var(--gantt-col-status);
  --wp-rail-meta: calc(var(--gantt-col-ppc) + var(--gantt-col-status) + 2 * var(--s-2));
}

/* The frame of every rail (left) cell. Opaque: the days scroll under it.
   The two frames are composed by every row component and sit under
   :where() — zero specificity — so a row's own overrides (a tinted lane, a
   group band) win whatever order the stylesheets load in. */
:where(._railCell_18rty_54) {
  position: sticky;
  left: 0;
  z-index: var(--z-raised-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: var(--wp-row-h);
  padding: var(--s-1) var(--s-4);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--separator);
  background: var(--color-surface);
}

/* The Gantt rail's columns — TASK NAME · PROFESSION · PROGRESS · STATUS — so
   the Scheduler's rail cells drop straight in (see .grid for the template). */
:where(._railGrid_18rty_71) {
  display: grid;
  grid-template-columns: var(--wp-rail-cols);
  column-gap: var(--s-2);
}

/* The frame of every timeline (right) cell: one grid column per day, the
   Gantt's faint day lines and heavier week lines painted as backgrounds
   rather than a node per day. Marks are placed by `grid-column`, all on
   row 1, stacked in source order. */
:where(._timeCell_18rty_81) {
  display: grid;
  grid-template-columns: repeat(var(--wp-days), minmax(0, 1fr));
  grid-template-rows: var(--wp-row-h);
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--separator);
  background-image:
    linear-gradient(to right, var(--gantt-gridline-major) 1px, transparent 1px),
    linear-gradient(to right, var(--gantt-gridline) 1px, transparent 1px);
  background-size:
    calc(700% / var(--wp-days)) 100%,
    calc(100% / var(--wp-days)) 100%;
}

._empty_18rty_96,
._noMatches_18rty_97 {
  grid-column: 1 / -1;
}

._empty_18rty_96 {
  padding: var(--s-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--g500);
}
/* One line of counts, dot-separated; each count a quiet toggle. */
._summary_r956p_2 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--g600);
}

._fact_r956p_11 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The dot sits in the gap, outside the toggle's hover and pressed fill. */
._fact_r956p_11 + ._fact_r956p_11 {
  margin-left: var(--s-2);
}

._fact_r956p_11 + ._fact_r956p_11::before {
  content: '·';
  position: absolute;
  left: calc(var(--s-2) / -2);
  transform: translateX(-50%);
  color: var(--g400);
  pointer-events: none;
}

button._fact_r956p_11 {
  cursor: pointer;
}

button._fact_r956p_11:hover {
  background: var(--ops-pill-hover);
  color: var(--navy);
}

button._fact_r956p_11[aria-pressed='true'] {
  background: var(--info-tint);
  color: var(--info);
  font-weight: 600;
}

button._fact_r956p_11:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}
._toolbar_1geok_1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--ops-card-border);
}

._grouping_1geok_11 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

._groupLabel_1geok_17 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* The Work Plan fills the page body beside the filter panel, like the tracker:
   toolbar and strip on top, the grid taking the rest. */
._card_98p1j_3 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--ops-surface);
  overflow: hidden;
}
/* Both views share ONE page shell so the toolbar is identical and never reflows
   when switching Daily List ↔ Progress Tracker. Each body owns its own scroll;
   the header and toolbar stay put, on the page colour. */
._page_e54nw_4 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ONE header row: FilterBar (trigger + search + clear) and the page's date
   picker at the left, the view tabs at the right. */
._header_e54nw_13 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--ops-card-border);
}

/* Left cell — may shrink; the search enforces its own usable minimum. */
._headerLeft_e54nw_21 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

/* FilterBar takes up to a comfortable search width and yields when the row
   is tight. */
._filterSlot_e54nw_30 {
  flex: 0 1 600px;
  min-width: 0;
}

._total_e54nw_35 {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--g600);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The view tabs sit on the header's own bottom rule: no list background or
   rule of their own, their indicator lands on the header's border. Scoped so
   these beat the Tabs module whatever order the stylesheets load in. */
._header_e54nw_13 ._viewTabs_e54nw_46 {
  align-self: stretch;
  justify-content: flex-end;
}

._header_e54nw_13 ._viewTabList_e54nw_51 {
  padding: 0 var(--s-4) 0 0;
  border-bottom: 0;
  background: transparent;
}

/* List actions restyle the shared <Button> to the Scheduler toolbar's action
   recipes (its todayBtn / primaryBtn) so the two operations surfaces read
   alike: info-blue primary, quiet surface secondary, --r-xl corners. Scoped
   under .listActions so the overrides reliably beat the Button module's own
   rules regardless of CSS import order. No trailing margins: the row's gap
   spaces them and its right edge must align flush with the item cards. */
._listActions_e54nw_60 ._markAllReadBtn_e54nw_63 {
  align-self: center;
  white-space: nowrap;
  border-color: var(--border);
  border-radius: var(--r-xl);
  color: var(--g800);
  font-weight: 500;
}

._listActions_e54nw_60 ._markAllReadBtn_e54nw_63:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--g50);
}

._listActions_e54nw_60 ._createBtn_e54nw_77 {
  align-self: center;
  white-space: nowrap;
  border: 1px solid var(--info);
  border-radius: var(--r-xl);
  background: var(--info);
}

._listActions_e54nw_60 ._createBtn_e54nw_77:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  filter: brightness(0.95);
}

/* Content row: filter sidebar (in-flow) + the active view's body. */
._content_e54nw_92 {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  background: var(--ops-surface);
}

/* List + right rail. Flex, not the old 1fr/480px grid with a viewport media
   query: the filter panel is in-flow and takes 280px off this row without the
   viewport ever changing, so a media query can't tell "the rail fits" from "the
   rail is squeezing the list into a 170px ribbon". The bases below are the whole
   rule, and they resolve continuously — no breakpoint to cross:

     ≥1020px  the rail sits at its full 480px and the list takes the rest
     660–1020 both share the shortfall, so the list keeps ~340px minimum
     <660px   nothing fits side by side; the rail wraps under the list

   The rail reaches 480px exactly where the two bases + gap total 1020, which is
   why there's no snap when it pins. */
._body_e54nw_112 {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

._bodyContent_e54nw_118 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-3) var(--s-6) var(--s-5);
}

._left_e54nw_126 {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

/* Handed to RightRail as a className — the rail owns its own look, this page
   owns its width. */
._rail_e54nw_136 {
  flex: 1 1 300px;
  max-width: 480px;
  min-width: 0;
}

._trackerBody_e54nw_142 {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

/* UI trial: the list actions sit above the card list (the search moved into
   the FilterBar itself). Kind scope tabs anchor the left edge; the action
   buttons keep the right. */
._listActions_e54nw_60 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  justify-content: flex-end;
}

._listActions_e54nw_60 > :first-child {
  margin-right: auto;
}

/* Dismissible chip for the alert descriptor (?alertType=&alertDay=) the
   dashboard's Activity Alerts card deep-links with. Same shape/tokens as the
   FilterBar's active FilterPill (filterPill.module.css .pill/.pillActive) —
   this page's module has no chip of its own to reuse, so the active-pill
   look is mirrored here rather than inventing new tokens. */
._alertFilterChip_e54nw_169 {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 6px var(--s-3);
  border: 1px solid var(--info);
  border-radius: var(--r-lg);
  background: var(--ops-pill-bg);
  color: var(--info);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

._alertFilterChip_e54nw_169:hover {
  background: var(--ops-pill-hover);
}
._card_6okcv_1 {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 180px;
  transition: box-shadow 160ms, border-color 160ms;
}

._card_6okcv_1:hover:not(._selected_6okcv_12) {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--g300);
}

/* Selected state: 1px solid --info border + 1px inset ring of --info,
   stacked with the existing card-selected drop shadow. The inset ring
   reads as a 2px accent without changing the box-model (no layout
   shift relative to unselected cards). */
._selected_6okcv_12 {
  border-color: var(--info);
  box-shadow:
    inset 0 0 0 1px var(--info),
    var(--shadow-card-selected);
}

._header_6okcv_28 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  color: var(--navy);
}

/* Icon chip sits inside the card body (no longer on a yellow band).
   Background is a neutral chip in resting state; recolors to
   --info-tint when the card is selected. */
._icon_6okcv_39 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--g50);
  border-radius: var(--r-md);
  transition: background-color 160ms;
}

._selected_6okcv_12 ._icon_6okcv_39 {
  background: var(--info-tint);
}

._title_6okcv_54 {
  flex: 1;
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

._description_6okcv_63 {
  margin: 0;
  padding: var(--s-4);
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

._selectedBody_6okcv_72 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
}

._filters_6okcv_79 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

._submit_6okcv_85 {
  appearance: none;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-4);
  background: var(--navy);
  color: var(--color-surface);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms;
}

._submit_6okcv_85:hover:not(:disabled) { background: var(--g800); }

._submit_6okcv_85:disabled {
  background: var(--g200);
  color: var(--g500);
  cursor: not-allowed;
}

._submitArrow_6okcv_113 { font-weight: 400; }
/* Shared trigger chrome (the calendar+value+chevron button) and the
   inline SVG icon recoloring. Composed via `composes:` from each
   field's local CSS module. */._trigger_wlg5h_5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}._trigger_wlg5h_5:hover { border-color: var(--g400); }._trigger_wlg5h_5[data-popup-open] { border-color: var(--info); }._trigger_wlg5h_5:disabled {
  background: var(--g50);
  color: var(--g400);
  cursor: not-allowed;
}._trigger_wlg5h_5:disabled:hover { border-color: var(--border); }._trigger_wlg5h_5:disabled ._leadingIcon_wlg5h_31,
._trigger_wlg5h_5:disabled ._trailingIcon_wlg5h_32 { color: var(--g400); }._value_wlg5h_34 { flex: 1; text-align: start; }._placeholder_wlg5h_35 { color: var(--g400); flex: 1; text-align: start; }/* Inlined trusstor SVGs render `#141414` strokes; rules below paint
   them through `currentColor` so the field can tint them. */._leadingIcon_wlg5h_31, ._trailingIcon_wlg5h_32 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._leadingIcon_wlg5h_31 { width: 18px; height: 18px; color: var(--g700, #424b58); }._trailingIcon_wlg5h_32 { width: 16px; height: 16px; color: var(--g500); }._leadingIcon_wlg5h_31 svg, ._trailingIcon_wlg5h_32 svg { width: 100%; height: 100%; display: block; }._leadingIcon_wlg5h_31 svg [stroke]:not([stroke="none"]),
._trailingIcon_wlg5h_32 svg [stroke]:not([stroke="none"]) { stroke: currentColor; }._leadingIcon_wlg5h_31 svg [fill]:not([fill="none"]),
._trailingIcon_wlg5h_32 svg [fill]:not([fill="none"]) { fill: currentColor; }/* Shared popup chrome + react-day-picker overrides used by every
   date picker on the analytics page. Composed via `composes:` from
   each field's local CSS module.
   v: 2026-05-06 — multi-month side-by-side. */._popup_1j6ff_6 {
  background: var(--color-surface);
  border-radius: var(--r-3xl);
  box-shadow: 0 8px 24px rgb(17 24 39 / 16%), 0 0 0 1px rgb(17 24 39 / 6%);
  padding: 16px 20px;
  font-family: var(--f-body);
  color: var(--navy);
}._popup_1j6ff_6 .rdp-root {
  --rdp-day-width: 36px;
  --rdp-day-height: 36px;
  --rdp-accent-color: var(--navy);
  --rdp-nav-button-color: var(--navy);
  --rdp-today-color: var(--navy);

  margin: 0;
  padding: 0;
}/* react-day-picker v9 defaults the months container to
   `flex-wrap: wrap; max-width: fit-content`, which both clamps width
   AND stacks multiple months on top of each other. Override to a
   non-wrapping row so DateRangeField's `numberOfMonths={2}` sits
   side-by-side. Single-month layouts (DateField, DateTimeField) still
   work — only one month, just laid out as a 1-item flex row. */._popup_1j6ff_6 .rdp-months {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 16px;
}._popup_1j6ff_6 .rdp-month {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month_grid {
  width: 100%;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month { position: relative; }._popup_1j6ff_6 .rdp-month_caption {
  position: relative;
  z-index: var(--z-raised-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 600;
  height: 32px;
  padding: 0;
  margin-bottom: 12px;
}._popup_1j6ff_6 .rdp-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-raised-2);
}._popup_1j6ff_6 .rdp-button_previous,
._popup_1j6ff_6 .rdp-button_next {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--navy);
  width: 28px;
  height: 28px;
  border-radius: var(--r-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._popup_1j6ff_6 .rdp-button_previous:hover,
._popup_1j6ff_6 .rdp-button_next:hover { background: var(--g50); }/* react-day-picker v9 inlines its own SVG chevrons whose fill is
   `--rdp-accent-color`. Force the inner shapes to inherit
   `currentColor` so blue defaults never leak through. */._popup_1j6ff_6 .rdp-button_previous svg,
._popup_1j6ff_6 .rdp-button_next svg { fill: currentColor; color: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [fill]:not([fill="none"]),
._popup_1j6ff_6 .rdp-button_next svg [fill]:not([fill="none"]) { fill: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [stroke]:not([stroke="none"]),
._popup_1j6ff_6 .rdp-button_next svg [stroke]:not([stroke="none"]) { stroke: currentColor; }._popup_1j6ff_6 .rdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 6px;
}._popup_1j6ff_6 .rdp-weekday {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
  padding: 6px 0;
  text-transform: none;
}._popup_1j6ff_6 .rdp-weeks { display: flex; flex-direction: column; gap: 2px; }._popup_1j6ff_6 .rdp-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}._popup_1j6ff_6 .rdp-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}._popup_1j6ff_6 .rdp-day .rdp-day_button {
  position: relative;
  z-index: var(--z-raised-1);
}._popup_1j6ff_6 .rdp-day_button {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms, color 120ms;
}._popup_1j6ff_6 .rdp-day_button:hover:not(:disabled) { background: var(--g50); }._popup_1j6ff_6 .rdp-outside .rdp-day_button,
._popup_1j6ff_6 .rdp-disabled .rdp-day_button {
  color: var(--g300);
  cursor: default;
}._popup_1j6ff_6 .rdp-disabled .rdp-day_button:hover { background: transparent; }._popup_1j6ff_6 .rdp-selected .rdp-day_button,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button {
  background: var(--navy);
  color: var(--color-surface);
  font-weight: 600;
}/* Inverse on hover so the digit stays readable when the cursor is
   over the filled selected day. */._popup_1j6ff_6 .rdp-selected .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button:hover {
  background: var(--color-surface);
  color: var(--navy);
}/* Range pill: middle days get a full-cell light-blue band; start
   and end days get a half-band that flows out from the navy circle
   so the band visually connects to the middle days. The band lives
   on a `::before` underneath the day button, which keeps its
   circular fill on top. */._popup_1j6ff_6 .rdp-range_middle::before,
._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before,
._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-range_middle::before { left: 0; right: 0; }._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before {
  left: 50%;
  right: 0;
}._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  left: 0;
  right: 50%;
}._popup_1j6ff_6 .rdp-range_middle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}/* Live preview: while the user has picked a start but not yet an end,
   paint the same band/circle on the days between `from` and the
   hovered cell so the range is visible as the cursor moves. The
   "Forward"/"Backward" suffix tells the half-band which side of the
   hovered cell to flow toward — back to where `from` sits. */._popup_1j6ff_6 .rdp-previewMiddle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewMiddle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}._popup_1j6ff_6 .rdp-previewEndForward::before,
._popup_1j6ff_6 .rdp-previewEndBackward::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewEndForward::before { left: 0; right: 50%; }._popup_1j6ff_6 .rdp-previewEndBackward::before { left: 50%; right: 0; }/* Hovered preview end stays in the same grey-circle hover state as
   any normal day button — no navy fill until the user commits. The
   half-band (::before above) hints where the range will reach. */._popup_1j6ff_6 .rdp-previewEndForward .rdp-day_button,
._popup_1j6ff_6 .rdp-previewEndBackward .rdp-day_button {
  background: var(--g50);
  color: var(--navy);
  font-weight: 500;
}
/* Same portal/z-index constraint as DateField (see its stylesheet): the popover
   portals to <body>, so it competes with the dialog layer rather than nesting
   inside it, and without this it opens BEHIND any modal that hosts the field.
   It belongs on the positioner, not the popup — Base UI's popup is
   `position: static`, and z-index is inert on a static element. Latent today
   (both call sites are Analytics cards, not modals); fixed so the first one
   that lands in a dialog doesn't rediscover it. */
._positioner_1ja3c_8 { z-index: var(--z-dialog-popover); }

._trigger_1ja3c_10 { }
._value_1ja3c_11 { }
._placeholder_1ja3c_12 { }
._popup_1ja3c_13 { }
._icon_qqo4l_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Inline SVGs use `currentColor`; the header's text colour is navy. */
  color: var(--navy);
}

._icon_qqo4l_1 svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* The dropdown popup card shared by SingleSelect, MultiSelect, GroupedSelect
   and PhoneField: surface, border, shadow, type, and a flex column so the
   ScrollArea inside fills the popup's max-height and scrolls. Each popup
   composes it and sets only its own size. */._surface_mm5gd_5 {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  padding: var(--s-1);
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}
._trigger_17vdy_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}
._trigger_17vdy_1:hover { border-color: var(--g400); }
._trigger_17vdy_1[data-popup-open] { border-color: var(--info); }

._value_17vdy_19 { flex: 1; text-align: start; }
._placeholder_17vdy_20 { color: var(--g400); }

._count_17vdy_22 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--s-2);
  background: var(--info);
  color: var(--color-surface);
  border-radius: var(--r-circle);
  font-weight: 600;
}

._icon_17vdy_35 {
  color: var(--g500);
  margin-inline-start: var(--s-2);
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
._icon_17vdy_35 svg { width: 100%; height: 100%; display: block; }
._icon_17vdy_35 svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

._positioner_17vdy_48 {
  z-index: var(--z-dialog-popover);
}

._popup_17vdy_52 {
  min-width: 260px;
  max-height: 320px;
}

/* Two-level grouping: top-level header (caps, e.g. tradeGroup like "SYSTEMS"),
   then inner groups under it (profession-level like "Stitch Works"). The
   `.topLevelGroup + .topLevelGroup` divider sits between consecutive top-level
   buckets; the `.group + .group` divider continues to sit between consecutive
   inner groups in single-level callers. */
._topLevelGroup_17vdy_60 + ._topLevelGroup_17vdy_60 { border-top: 1px solid var(--separator); margin-top: var(--s-2); padding-top: var(--s-2); }
._topLevelHeader_17vdy_64 { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--g600); font-weight: 700; }

._group_17vdy_61 + ._group_17vdy_61 { border-top: 1px solid var(--separator); margin-top: var(--s-1); padding-top: var(--s-1); }
._groupHeader_17vdy_67 { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--g500); }

/* Collapsible inner-group chip row: [checkbox] [expand-button → pill +
   count + chevron]. The expand button owns the toggle-collapsed click;
   the checkbox owns the select-all click. Background colour comes from
   `groupColor` (profession's brand colour or a hash fallback). */
._chipRow_17vdy_73 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--navy);
}
._chipRow_17vdy_73:hover { background: var(--g50); }

._chipExpand_17vdy_82 {
  appearance: none;
  border: 0;
  background: transparent;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0;
  cursor: pointer;
  color: inherit;
  min-width: 0;
}

/* Wraps `<TradePill>` + the selected/total count so they share spacing
   inside the chevron row. The pill itself owns its styling now (see
   `Components/ui/TradePill`). */
._chipGroup_17vdy_100 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

._chipCount_17vdy_107 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 var(--s-2);
  background: var(--chip-count-bg);
  border-radius: var(--r-pill);

  /* nearest token to the original 11px — `--fs-2xs` (10px) reads slightly
     tighter so we use `--fs-xs` (12px) for a stable count badge. */
  font-size: var(--fs-xs);
  font-weight: 600;
}

._chevron_17vdy_122 {
  color: var(--g500);
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
}
._chevron_17vdy_122 svg { width: 100%; height: 100%; display: block; }
._chevron_17vdy_122 svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
._chevronOpen_17vdy_133 { transform: rotate(180deg); }

._row_17vdy_135 { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); cursor: pointer; }
._row_17vdy_135:hover { background: var(--info-tint-soft); }
._rowLabel_17vdy_137 { flex: 1; }
/* Shared trigger chrome (the calendar+value+chevron button) and the
   inline SVG icon recoloring. Composed via `composes:` from each
   field's local CSS module. */._trigger_wlg5h_5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
}._trigger_wlg5h_5:hover { border-color: var(--g400); }._trigger_wlg5h_5[data-popup-open] { border-color: var(--info); }._trigger_wlg5h_5:disabled {
  background: var(--g50);
  color: var(--g400);
  cursor: not-allowed;
}._trigger_wlg5h_5:disabled:hover { border-color: var(--border); }._trigger_wlg5h_5:disabled ._leadingIcon_wlg5h_31,
._trigger_wlg5h_5:disabled ._trailingIcon_wlg5h_32 { color: var(--g400); }._value_wlg5h_34 { flex: 1; text-align: start; }._placeholder_wlg5h_35 { color: var(--g400); flex: 1; text-align: start; }/* Inlined trusstor SVGs render `#141414` strokes; rules below paint
   them through `currentColor` so the field can tint them. */._leadingIcon_wlg5h_31, ._trailingIcon_wlg5h_32 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._leadingIcon_wlg5h_31 { width: 18px; height: 18px; color: var(--g700, #424b58); }._trailingIcon_wlg5h_32 { width: 16px; height: 16px; color: var(--g500); }._leadingIcon_wlg5h_31 svg, ._trailingIcon_wlg5h_32 svg { width: 100%; height: 100%; display: block; }._leadingIcon_wlg5h_31 svg [stroke]:not([stroke="none"]),
._trailingIcon_wlg5h_32 svg [stroke]:not([stroke="none"]) { stroke: currentColor; }._leadingIcon_wlg5h_31 svg [fill]:not([fill="none"]),
._trailingIcon_wlg5h_32 svg [fill]:not([fill="none"]) { fill: currentColor; }/* Shared popup chrome + react-day-picker overrides used by every
   date picker on the analytics page. Composed via `composes:` from
   each field's local CSS module.
   v: 2026-05-06 — multi-month side-by-side. */._popup_1j6ff_6 {
  background: var(--color-surface);
  border-radius: var(--r-3xl);
  box-shadow: 0 8px 24px rgb(17 24 39 / 16%), 0 0 0 1px rgb(17 24 39 / 6%);
  padding: 16px 20px;
  font-family: var(--f-body);
  color: var(--navy);
}._popup_1j6ff_6 .rdp-root {
  --rdp-day-width: 36px;
  --rdp-day-height: 36px;
  --rdp-accent-color: var(--navy);
  --rdp-nav-button-color: var(--navy);
  --rdp-today-color: var(--navy);

  margin: 0;
  padding: 0;
}/* react-day-picker v9 defaults the months container to
   `flex-wrap: wrap; max-width: fit-content`, which both clamps width
   AND stacks multiple months on top of each other. Override to a
   non-wrapping row so DateRangeField's `numberOfMonths={2}` sits
   side-by-side. Single-month layouts (DateField, DateTimeField) still
   work — only one month, just laid out as a 1-item flex row. */._popup_1j6ff_6 .rdp-months {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 16px;
}._popup_1j6ff_6 .rdp-month {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month_grid {
  width: 100%;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month { position: relative; }._popup_1j6ff_6 .rdp-month_caption {
  position: relative;
  z-index: var(--z-raised-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 600;
  height: 32px;
  padding: 0;
  margin-bottom: 12px;
}._popup_1j6ff_6 .rdp-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-raised-2);
}._popup_1j6ff_6 .rdp-button_previous,
._popup_1j6ff_6 .rdp-button_next {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--navy);
  width: 28px;
  height: 28px;
  border-radius: var(--r-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._popup_1j6ff_6 .rdp-button_previous:hover,
._popup_1j6ff_6 .rdp-button_next:hover { background: var(--g50); }/* react-day-picker v9 inlines its own SVG chevrons whose fill is
   `--rdp-accent-color`. Force the inner shapes to inherit
   `currentColor` so blue defaults never leak through. */._popup_1j6ff_6 .rdp-button_previous svg,
._popup_1j6ff_6 .rdp-button_next svg { fill: currentColor; color: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [fill]:not([fill="none"]),
._popup_1j6ff_6 .rdp-button_next svg [fill]:not([fill="none"]) { fill: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [stroke]:not([stroke="none"]),
._popup_1j6ff_6 .rdp-button_next svg [stroke]:not([stroke="none"]) { stroke: currentColor; }._popup_1j6ff_6 .rdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 6px;
}._popup_1j6ff_6 .rdp-weekday {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
  padding: 6px 0;
  text-transform: none;
}._popup_1j6ff_6 .rdp-weeks { display: flex; flex-direction: column; gap: 2px; }._popup_1j6ff_6 .rdp-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}._popup_1j6ff_6 .rdp-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}._popup_1j6ff_6 .rdp-day .rdp-day_button {
  position: relative;
  z-index: var(--z-raised-1);
}._popup_1j6ff_6 .rdp-day_button {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms, color 120ms;
}._popup_1j6ff_6 .rdp-day_button:hover:not(:disabled) { background: var(--g50); }._popup_1j6ff_6 .rdp-outside .rdp-day_button,
._popup_1j6ff_6 .rdp-disabled .rdp-day_button {
  color: var(--g300);
  cursor: default;
}._popup_1j6ff_6 .rdp-disabled .rdp-day_button:hover { background: transparent; }._popup_1j6ff_6 .rdp-selected .rdp-day_button,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button {
  background: var(--navy);
  color: var(--color-surface);
  font-weight: 600;
}/* Inverse on hover so the digit stays readable when the cursor is
   over the filled selected day. */._popup_1j6ff_6 .rdp-selected .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button:hover {
  background: var(--color-surface);
  color: var(--navy);
}/* Range pill: middle days get a full-cell light-blue band; start
   and end days get a half-band that flows out from the navy circle
   so the band visually connects to the middle days. The band lives
   on a `::before` underneath the day button, which keeps its
   circular fill on top. */._popup_1j6ff_6 .rdp-range_middle::before,
._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before,
._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-range_middle::before { left: 0; right: 0; }._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before {
  left: 50%;
  right: 0;
}._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  left: 0;
  right: 50%;
}._popup_1j6ff_6 .rdp-range_middle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}/* Live preview: while the user has picked a start but not yet an end,
   paint the same band/circle on the days between `from` and the
   hovered cell so the range is visible as the cursor moves. The
   "Forward"/"Backward" suffix tells the half-band which side of the
   hovered cell to flow toward — back to where `from` sits. */._popup_1j6ff_6 .rdp-previewMiddle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewMiddle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}._popup_1j6ff_6 .rdp-previewEndForward::before,
._popup_1j6ff_6 .rdp-previewEndBackward::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewEndForward::before { left: 0; right: 50%; }._popup_1j6ff_6 .rdp-previewEndBackward::before { left: 50%; right: 0; }/* Hovered preview end stays in the same grey-circle hover state as
   any normal day button — no navy fill until the user commits. The
   half-band (::before above) hints where the range will reach. */._popup_1j6ff_6 .rdp-previewEndForward .rdp-day_button,
._popup_1j6ff_6 .rdp-previewEndBackward .rdp-day_button {
  background: var(--g50);
  color: var(--navy);
  font-weight: 500;
}
/* Portal/stacking fix, same as DateField and the range pickers: the popover
   portals to <body> and competes with the dialog layer, so without this it
   opens BEHIND any modal hosting the field. It has to sit on the POSITIONER —
   this stylesheet previously carried a `z-index` on `.timePopup`, which was
   inert: Base UI's popup is `position: static`, and z-index does nothing on a
   static element. */
._positioner_11i29_7 { z-index: var(--z-dialog-popover); }

._trigger_11i29_9 { }
._value_11i29_10 { }
._placeholder_11i29_11 { }
._popup_11i29_12 { }

/* Time-of-day row that sits below the calendar grid inside the popup,
   matching trusstor's IncidentReport datepicker. Re-uses the same
   trigger box as the outer date trigger so the visual weight matches. */
._timeTrigger_11i29_17 {
  margin-top: 12px;
}
._timeValue_11i29_21 { }
._timePlaceholder_11i29_22 { }
._clockIcon_11i29_23 { }
._timeChevron_11i29_24 { }

/* The slot popup. Width matches the trigger ("--anchor-width" is exposed
   by Base-UI's Positioner) so the menu reads as a continuation of the
   trigger field rather than a narrow column floating beside it. Height
   shows ~7 slots at a time with the rest reachable via scroll. */
._timePopup_11i29_4 {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  padding: var(--s-1);
  min-width: var(--anchor-width, 220px);
  max-height: 280px;
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._timeItem_11i29_45 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--s-2) var(--s-3);
  margin: 2px 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  outline: none;
  font-size: var(--fs-sm);
  color: var(--navy);
  user-select: none;
  transition: background-color 80ms ease, color 80ms ease;
}

._timeItem_11i29_45[data-highlighted] {
  background: var(--info-tint-soft);
}

._timeItem_11i29_45[data-selected] {
  background: var(--info-tint);
  color: var(--info);
  font-weight: 600;
}

/* When the user keyboards onto an already-selected item, both attrs land
   at once — keep the selected tint and just darken slightly to read as
   "active". Without this rule the highlight tint wins and the row reads
   as "merely hovered", losing the selected affordance. */
._timeItem_11i29_45[data-selected][data-highlighted] {
  background: var(--info-tint);
  color: var(--info);
}
/* frontend/src/Components/Pages/AnalyticsPage/Cards/ScissorLiftExportCard.module.css */
._notice_ujbk9_2 {
  padding: var(--s-2) var(--s-3);
  background: var(--info-tint-soft);
  color: var(--info);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
}
._link_127or_1 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-row-gap: var(--s-1);
  column-gap: var(--s-4);
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--separator);
  text-decoration: none;
  color: var(--navy);
  transition: background-color 120ms;
}

._link_127or_1:hover { background: var(--g50); }

._cardTitle_127or_15 {
  font-weight: 600;
  font-size: var(--fs-sm);
  grid-column: 1;
  grid-row: 1;
}

._timeAgo_127or_22 {
  font-size: var(--fs-sm);
  color: var(--g500);
  grid-column: 2;
  grid-row: 1;
  place-self: start end;
}

._meta_127or_30 {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--g600);
  min-width: 0;
}

._metaLabel_127or_41 {
  color: var(--g600);
}

._divider_127or_45 {
  width: 1px;
  height: 12px;
  background: var(--separator);
  flex: none;
}

._subtitle_127or_52 {
  color: var(--g600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (width <= 720px) {
  ._meta_127or_30 {
    flex-wrap: wrap;
    gap: var(--s-2);
  }
}

/* Clear the final row's bottom border so it doesn't visually double the
   wrapping panel's own bottom border. The row's host is an <li> rendered
   by RecentReportsRail; we target the last <li> globally because that
   class belongs to another module. */
li:last-child > ._link_127or_1 {
  border-bottom: 0;
}
/* The recent-reports section is wrapped in a single outlined panel
   that matches the action-card chrome (outline + radius, no resting
   shadow). Heading sits inside the panel as a top row, separated
   from the list by a 1px --separator rule. */
._section_l58ay_5 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-7);
}

._heading_l58ay_13 {
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--separator);
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--navy);
}

/* Empty-state line — no more dashed border (which would conflict with
   the panel chrome). Centered, muted, lives inside the panel. */
._empty_l58ay_25 {
  padding: var(--s-5) 0;
  color: var(--g500);
  text-align: center;
  font-size: var(--fs-sm);
}

._list_l58ay_32 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._item_l58ay_40 { margin: 0; }
/* Visual-only mockup. Panel chrome mirrors the action-card and
   recent-reports panels so all three siblings share one panel
   language on the analytics page. */
._panel_10nui_4 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._header_10nui_14 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

._iconWrap_10nui_20 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--blue);
  flex: none;
}

._titleBlock_10nui_30 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

._title_10nui_30 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}

._subtitle_10nui_46 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
}

/* Search field — pill-shaped neutral input. Not wired to any handler;
   typing is allowed but Enter submits nowhere. */
._searchField_10nui_55 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--g50);
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-4);
}

._searchIcon_10nui_64 {
  display: inline-flex;
  color: var(--g400);
  flex: none;
}

._input_10nui_70 {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._input_10nui_70::placeholder { color: var(--g500); }

/* Example query chips — static (no interactive role). When the AI
   endpoint is wired, these become buttons that prefill the input. */
._chips_10nui_85 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

._chip_10nui_85 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g700);
  cursor: pointer;
  transition:
    background-color 120ms,
    border-color 120ms,
    color 120ms;
}

._chip_10nui_85:hover {
  background: var(--info-tint);
  border-color: var(--info);
  color: var(--info);
}
/* The page body: the cards section, then the recent reports. Both sit on the
   shell's page colour; the differentiation between them comes from the
   per-card and recent-panel chrome. The gutters come from ui/PageLayout. */
._page_1dt96_4 {
  display: flex;
  flex-direction: column;
}

._cardsSection_1dt96_9 {
  display: flex;
  justify-content: center;
  padding-bottom: var(--s-6);
}

._cardsInner_1dt96_15 {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  width: 100%;
  max-width: 1400px;
}

._grid_1dt96_23 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

._recentSection_1dt96_29 {
  display: flex;
  justify-content: center;
}

._recentInner_1dt96_34 {
  width: 100%;
  max-width: 1400px;
}

@media (width <= 1280px) { ._grid_1dt96_23 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (width <= 1000px) { ._grid_1dt96_23 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (width <= 640px)  { ._grid_1dt96_23 { grid-template-columns: 1fr; } }
/* The page tour's three pieces: the dark sheet with a hole, the ring that
   hugs the hole, and the bulb that explains it. Everything is fixed to the
   viewport and re-measured on scroll; the page underneath stays live. */

._sheet_38ans_5 {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-page-tour-sheet);
  pointer-events: none;
}

/* The painted area swallows clicks; the unpainted hole lets them through to
   the highlighted feature — that is the whole trick. */
._sheet_38ans_5 path {
  fill: var(--tour-sheet);
  fill-rule: evenodd;
  pointer-events: auto;
}

._ring_38ans_22 {
  position: fixed;
  z-index: var(--z-page-tour-ring);
  pointer-events: none;
  border-radius: var(--r-2xl);
  box-shadow: 0 0 0 2px var(--blue), 0 0 0 8px var(--tour-ring-glow);

  /* Position and size are NOT transitioned: the ring, the hole in the sheet
     and the bulb are all placed from one eased rect (see useEasedRect), so a
     CSS transition here would put the ring on a second, slower schedule and
     tear the three pieces apart. Only the fade in and out is CSS. */
  transition: opacity 0.2s;
}

._ring_38ans_22[data-action] {
  animation: _pulse_38ans_1 1.6s ease-in-out infinite;
}

@keyframes _pulse_38ans_1 {
  0%, 100% { box-shadow: 0 0 0 2px var(--blue), 0 0 0 6px var(--tour-ring-glow); }
  50% { box-shadow: 0 0 0 2px var(--blue), 0 0 0 14px var(--tour-ring-glow-soft); }
}

._bulb_38ans_45 {
  position: fixed;
  z-index: var(--z-page-tour-bulb);
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 16px 18px 14px;
  background: var(--tour-bulb-bg);
  color: var(--tour-bulb-text);
  border: 1px solid var(--tour-bulb-edge);
  border-radius: var(--r-3xl);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  box-shadow: var(--shadow-popover);
  outline: none;

  /* Placed from the same eased rect as the ring — see the note above. */
}

._bulb_38ans_45[data-mode='modal'] {
  width: 420px;
  padding: 24px 26px 20px;
}

/* The tail: a rotated square on whichever edge faces the feature. */
._bulb_38ans_45::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--tour-bulb-bg);
  border: 1px solid var(--tour-bulb-edge);
  transform: rotate(45deg);
}

._bulb_38ans_45[data-side='right']::before { left: -9px; top: var(--tail); clip-path: polygon(0 0, 0 100%, 100% 100%); }
._bulb_38ans_45[data-side='left']::before { right: -9px; top: var(--tail); clip-path: polygon(0 0, 100% 0, 100% 100%); }
._bulb_38ans_45[data-side='bottom']::before { top: -9px; left: var(--tail); clip-path: polygon(0 0, 100% 0, 0 100%); }
._bulb_38ans_45[data-side='top']::before { bottom: -9px; left: var(--tail); clip-path: polygon(100% 0, 100% 100%, 0 100%); }

._bulb_38ans_45[data-mode='modal']::before,
._bulb_38ans_45[data-side='inside']::before { display: none; }

._head_38ans_88 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Wraps the shared LightbulbIcon: the glyph sizes itself, this only tints it
   and keeps it from shrinking beside a long step label. */
._icon_38ans_97 {
  display: inline-flex;
  flex: none;
  color: var(--tour-accent);
}

._step_38ans_103 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tour-muted);
}

/* Centres the CloseIcon glyph in a round hit target — no font metrics here,
   the mark is an SVG. */
._close_38ans_112 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--r-circle);
  background: none;
  color: var(--tour-muted);
  cursor: pointer;
}

._close_38ans_112:hover { background: var(--navy-soft); }

._title_38ans_128 {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

._bulb_38ans_45[data-mode='modal'] ._title_38ans_128 { font-size: var(--fs-xl); }

._body_38ans_138 { margin: 0 0 8px; }
._body_38ans_138:last-of-type { margin-bottom: 0; }
._body_38ans_138 b { font-weight: 600; }

._figure_38ans_142 {
  margin: 10px 0 8px;
  border: 1px solid var(--tour-bulb-edge);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--color-surface);
}

._figure_38ans_142 svg { display: block; width: 100%; height: auto; }

._caption_38ans_152 {
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--tour-muted);
  background: var(--tour-caption-bg);
  border-top: 1px solid var(--tour-bulb-edge);
}

._hint_38ans_160 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--tour-hint-border);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  font-weight: 600;
}

._hintDot_38ans_173 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--blue);
  animation: _blink_38ans_1 1.2s ease-in-out infinite;
}

@keyframes _blink_38ans_1 { 50% { opacity: 0.25; } }

._foot_38ans_183 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

._bulb_38ans_45[data-mode='modal'] ._foot_38ans_183 { margin-top: 20px; }

._dots_38ans_192 {
  display: flex;
  gap: 4px;
  margin-right: auto;
}

._dots_38ans_192 i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--navy-line);
}

._dots_38ans_192 i[data-on] {
  width: 14px;
  border-radius: var(--r-md);
  background: var(--tour-accent);
}

._spacer_38ans_211 { margin-left: auto; }

._btn_38ans_213 {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: var(--tour-accent);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

._btn_38ans_213:hover { background: var(--navy-soft); }
._btn_38ans_213[data-primary] { background: var(--navy); color: var(--white); }
._btn_38ans_213[data-primary]:hover { background: var(--tour-primary-hover); }
._btn_38ans_213[data-quiet] { color: var(--tour-muted); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  /* The movement itself is already unanimated here — the engine sets the
     displayed rect straight to the measurement. This kills what is left. */
  ._ring_38ans_22 { transition: none; }
  ._ring_38ans_22[data-action], ._hintDot_38ans_173 { animation: none; }
}
/* Looks like the text it replaced: no chrome until you reach for it. An
   underline shows on hover, and a heavier one while this is the filter driving
   the panels — underlined rather than tinted, because the colour slot is
   spoken for by severity, and a filter is a state of the page, not a change
   in how bad the alert is. */
._button_1n8l4_6 {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.12s ease;
}

._button_1n8l4_6:hover {
  text-decoration-color: currentcolor;
}

._button_1n8l4_6:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._button_1n8l4_6[aria-pressed='true'] {
  text-decoration-color: currentcolor;
  text-decoration-thickness: 2px;
}

._button_1n8l4_6[data-severity='critical'] { color: var(--color-error); }

/* The palette's own `--amber`, the MOCK pill's colour — Delivery late and Not
   tracked have to read as amber next to Stock gap's red, and the darker
   warning tokens (`--sev-high-text`, `--status-for-review-text`) both land
   closer to brown at this size. */
._button_1n8l4_6[data-severity='warning'] { color: var(--amber); }
._grid_19iyg_1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

._card_19iyg_7 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}

._value_19iyg_17 {
  font-family: var(--f-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

._label_19iyg_25 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* The figure inside a sub-line — "5 of 10", the material names — reads a
   shade darker than the words around it. */
._label_19iyg_25 b {
  font-weight: 600;
  color: var(--g700);
}

@media (width <= 900px) {
  ._grid_19iyg_1 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Severity in the tile's own form. The number is tinted, the card is NOT —
   a full border turns one tile into a boxed alarm and reads as "this card is
   broken" rather than "one material needs ordering". */
._card_19iyg_7[data-tone='urgent'] ._value_19iyg_17 { color: var(--color-error); }
._card_19iyg_7[data-tone='warn'] ._value_19iyg_17 { color: var(--amber); }

/* Delivered, not synced also says when things are fine — a green figure at
   zero (ruling 2026-09-24). The alerts tile keeps navy at zero: an absence of
   alerts is not an achievement to celebrate. */
._card_19iyg_7[data-tone='good'] ._value_19iyg_17 { color: var(--color-success); }

/* WHICH alerts, on one line — the number alone can't distinguish "overdue to
   order" from "ran out" from "a delivery nobody has chased". Ordered
   worst-first and absent entirely at zero.

   Every reason is always shown, wrapping onto a second line when they do
   not fit — nothing folds behind "+N more". */
._reasons_19iyg_61 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
}

._reason_19iyg_61 {
  display: inline-flex;
  align-items: baseline;
}

/* No gap before it — the comma belongs to the reason it follows. The space
   that separates one reason from the next is the flex gap above. */
._reasonSep_19iyg_77 {
  color: var(--g500);
}

/* A reason is one of the filter controls (`KpiFilterButton`); the weight is
   what marks it as a member of the list rather than prose around it. */
._reasonButton_19iyg_83 {
  font-weight: 600;
}

/* A tile that is itself a filter control (Critical orders, Delivered, not
   synced): the button fills the card, so the whole tile takes the click, and
   the whole tile answers the hover. Two classes, so it beats the control's own
   underline. */
._card_19iyg_7:has(._cardButton_19iyg_91) {
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

._card_19iyg_7:has(._cardButton_19iyg_91:hover),
._card_19iyg_7:has(._cardButton_19iyg_91:focus-visible) {
  transform: translateY(-3px);
  border-color: var(--navy);
  box-shadow: var(--shadow-popover);
}

._card_19iyg_7:has(._cardButton_19iyg_91[aria-pressed='true']) {
  border-color: var(--navy);
  background: var(--g50);
}

._card_19iyg_7 ._cardButton_19iyg_91 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  margin: calc(-1 * var(--s-4));
  padding: var(--s-4);
  border-radius: var(--r-lg);
  text-align: left;
  text-decoration: none;
}

._cardGo_19iyg_121,
._cardClear_19iyg_122 {
  position: absolute;
  top: 50%;
  right: var(--s-4);
  display: inline-flex;
  color: var(--navy);
  translate: -8px -50%;
  opacity: 0;
  transition: opacity 0.18s ease, translate 0.18s ease;
}

._cardButton_19iyg_91:hover ._cardGo_19iyg_121,
._cardButton_19iyg_91:focus-visible ._cardGo_19iyg_121,
._cardButton_19iyg_91[aria-pressed='true'] ._cardClear_19iyg_122 {
  translate: 0 -50%;
  opacity: 1;
}

._cardButton_19iyg_91[aria-pressed='true'] ._cardGo_19iyg_121 {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  ._card_19iyg_7:has(._cardButton_19iyg_91),
  ._cardGo_19iyg_121,
  ._cardClear_19iyg_122 {
    transition: none;
  }

  ._card_19iyg_7:has(._cardButton_19iyg_91:hover),
  ._card_19iyg_7:has(._cardButton_19iyg_91:focus-visible) {
    transform: none;
  }
}
._panel_9fluj_1 {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  overflow: hidden;
}

._head_9fluj_10 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  row-gap: var(--s-2);
  padding: var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._heading_9fluj_21 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

._icon_9fluj_28 {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

._title_9fluj_34 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

._subtitle_9fluj_43 {
  margin: 2px 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._headerRight_9fluj_50 {
  flex-shrink: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._body_9fluj_57 {
  padding: var(--s-4);
}

/* Opt-in (Panel `fill`): the body fills a stretched panel and becomes a flex
   column, so a scrollable child sized to grow (`flex: 1 1 auto` +
   `min-height: 0` + `overflow-y: auto`) fills it and scrolls rather than
   growing the card. */
._bodyFill_9fluj_65 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Warning tone — a soft amber alert card with an amber title + icon, and no
   header divider so it reads as one cohesive alert block (AI Restock Alert). */
._panel_9fluj_1[data-tone='warning'] {
  background: var(--color-warn-bg);
  border-color: var(--color-warn);
}

._panel_9fluj_1[data-tone='warning'] ._head_9fluj_10 {
  padding-bottom: 0;
  border-bottom: none;
}

._panel_9fluj_1[data-tone='warning'] ._title_9fluj_34,
._panel_9fluj_1[data-tone='warning'] ._icon_9fluj_28 {
  color: var(--color-warn);
}
._list_19swn_1 {
  /* Fills the panel body (Panel `fill`) and scrolls past it — the ScrollArea
     root; its viewport is the scroller. The HEIGHT cap is not here — it lives
     on the pair's grid items (`.rowEqual > *`, LogisticsPage.module.css),
     because a max-height clamp mixing px with an intrinsically-unresolvable
     percentage silently drops. This list only needs to take whatever height
     the capped card gives it. */
  flex: 1 1 auto;
}._items_19swn_11 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}._row_19swn_4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);

  /* Right gutter: the badge and tank close the row, and with the kebab column
     gone they would sit flush against the list's scroll edge. */
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--separator);

  /* The row's one affordance: open the detail drawer (the kebab is gone,
     same as the delivery cards). Inline action buttons carry their own
     cursor already. */
  cursor: pointer;
}._row_19swn_4:focus-visible,
._row_19swn_4:has(> ._rowOpen_19swn_38:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}/* In-flight delete: fade the row's content under a centered status label. */._row_19swn_4[data-deleting] {
  pointer-events: none;
}._row_19swn_4[data-deleting] > :not(._deletingOverlay_19swn_49) {
  opacity: 0.3;
}._deletingOverlay_19swn_49 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._row_19swn_4:last-child {
  border-bottom: none;
}/* The row div itself is not clickable; interactive controls (kebab menu,
   inline Renew/update-link action buttons) live inside it. */._main_19swn_70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}._provName_19swn_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}._deleteItem_19swn_86 {
  color: var(--color-error);
}/* Both text lines are single-line-with-ellipsis (same treatment as the delivery
   panel's `.material` / `.meta`). The material name is free text up to 120 chars
   and can arrive as one unbroken token, which does not wrap and ran straight out
   of the card. Clamping (rather than wrapping) also keeps rows a uniform height —
   the full name is on the update dialog. Relies on `.main { min-width: 0 }`:
   without it the flex item refuses to shrink below its content and the ellipsis
   never engages. */._name_19swn_97,
._meta_19swn_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._name_19swn_97 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_19swn_91 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._provenance_19swn_115 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* "Delivery takes ~Nd" on the provenance line, text-only — a step up from the
   line's own muted grey (not the `.hint` line's amber/red, which is reserved
   for urgency), just enough emphasis to read as a small data figure. The
   tooltip it opens carries the CONCLUSION (the tick-consistent "Order by
   <date>" deadline plus provenance), so nothing here duplicates it. Dotted
   underline (not the `.hint` line's solid-on-hover one) marks it as a hover
   target, not a click target.

   Plain inline, not inline-flex: the Tooltip trigger renders THIS span
   itself (Base UI merges its props onto it, no wrapper), so whatever box
   type it declares is what sits in the provenance line's text flow. An
   inline-flex box computes its own baseline from its flex line rather than
   the text inside it, which floated this segment off the "Started … ·
   admin · …" siblings' shared baseline — inline text needs no flex
   properties at all, so the box-baseline mismatch cannot recur. */._deliveryTakes_19swn_135 {
  color: var(--g600);
  font-weight: 600;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}/* Badge on top, duration cap beneath — the tank is its own sibling column
   between `.side` and `.endCol`, so this stack carries both figures the tank
   itself has no room for. */._side_19swn_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;

  /* Centered with the tank beside it — the badge/cap stack and the tank read
     as one gauge, so they share the row's vertical middle (the kebab alone
     stays pinned to the top corner). */
  align-self: center;
}._badge_19swn_160 {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Transparent, so the urgent tone's visible border costs no height. Without
     it an urgent badge was 20px against everyone else's 18px, and the bar
     beneath it dropped 2px out of line with the duration on exactly those
     rows — the ones already shouting for attention. */
  border: 1px solid transparent;
}._badge_19swn_160[data-tone='ok'] {
  color: var(--color-success);
  background: var(--color-success-bg);
}._badge_19swn_160[data-tone='warn'] {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}._badge_19swn_160[data-tone='urgent'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}._badge_19swn_160[data-tone='check'] {
  color: var(--g600);
  background: var(--g50);
  border: 1px dashed var(--g400);
}/* The time-remaining tank now lives in the `ReorderTickTank` component; this
   only supplies the row layout the panel needs (vertically centred beside the
   badge). */._tankInRow_19swn_198 {
  align-self: center;
}/* Truck hint line — additive to the band, one tone per row (amber/reorder or red/gap). */._hint_19swn_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Rendered as a <button> whenever the line has somewhere to go, so the button
     chrome has to be reset here — the two forms must be pixel-identical, and a
     line that shifts when it becomes clickable is a bug nobody looks for. */
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}/* The affordance follows the ELEMENT, not the tone: a line is a <button> only
   when it has somewhere to go, and every tone can now be one — an incoming line
   jumps to its delivery just as the gap line does. Keyed on the tone, the green
   line was clickable and said nothing about it. Underline on hover only, the
   same rule the row's other actions follow. */button._hint_19swn_121 {
  cursor: pointer;
  text-decoration: none;
}button._hint_19swn_121:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}._hint_19swn_121[data-tone='reorder'] { color: var(--color-warn); }._hint_19swn_121[data-tone='gap'] { color: var(--color-error); }._hint_19swn_121[data-tone='incoming'] { color: var(--color-success); }/* Actionable text on a row: bold italic, underlined ONLY on hover — the
   underline is the affordance, not decoration. */._action_19swn_244 {
  font: inherit;
  font-weight: 700;
  font-style: italic;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: none;
}._action_19swn_244:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }._action_19swn_244:disabled {
  opacity: 0.5;
  cursor: default;
}._renewAsk_19swn_263 {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
}/* A landed-but-late arrival keeps the overdue tone the in-flight note wore —
   the fact it turned up does not make its lateness good news. */._renewAskLate_19swn_274 {
  color: var(--color-warn);
}._addBtn_19swn_278 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--status-planned-text);
  background: var(--status-planned-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}._addBtn_19swn_278:disabled {
  opacity: 0.5;
  cursor: default;
}/* An in-flight delivery past its own ETA. Amber, not green: something is still
   coming, but its date has gone by and nobody has seen it — that is a prompt to
   chase, not reassurance that the material is covered. */._hint_19swn_121[data-tone='late'] { color: var(--color-warn); }/* The arrival named on a ran-out row. It answers the question the line is
   asking, so it carries weight against the muted provenance text around it. */._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}/* When an arrival phrase names a known delivery it becomes a jump link. Same
   button-reset discipline as .hint so the note stays pixel-identical to its
   plain-span form — a phrase that shifts the moment it gains a target is a bug
   nobody looks for. Underline on hover only; the chevron slides like .hint's.
   `.renewAskJump` is the covered row's "New delivery arrived…" phrase; it takes
   the same reset but keeps the LINE's own colour and weight (amber when the
   arrival was late), which a fixed navy would strip. */button._arrivalNote_19swn_302,
button._renewAskJump_19swn_311 {
  display: inline-flex;
  align-items: center;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}button._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}button._renewAskJump_19swn_311 {
  color: inherit;
}button._arrivalNote_19swn_302:hover,
button._renewAskJump_19swn_311:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:hover ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}._durationCap_19swn_350 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}._durationCap_19swn_350[data-tone='ok'] { color: var(--color-success); }._durationCap_19swn_350[data-tone='warn'] { color: var(--color-warn); }._durationCap_19swn_350[data-tone='urgent'] { color: var(--color-error); }/* The trailing "goes somewhere" mark. Decoration, not a control: it inherits
   the line's tone via currentColor so it reads as part of the sentence. */._jumpMark_19swn_342 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  opacity: 0.65;
  transition: opacity 120ms ease, transform 120ms ease;
}button._hint_19swn_121:hover ._jumpMark_19swn_342,
button._hint_19swn_121:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}@media (prefers-reduced-motion: reduce) {
  ._jumpMark_19swn_342 {
    transition: opacity 120ms ease;
  }

  button._hint_19swn_121:hover ._jumpMark_19swn_342,
  button._hint_19swn_121:focus-visible ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342 {
    transform: none;
  }
}/* ---- Untracked material: a delivery exists, no stock record does ----
   A faint diagonal hatch rather than a solid tint or a coloured rail: the row
   holds no figures, and the hatch says "nothing here yet" without competing
   with the tones that DO carry meaning on this panel (green/amber/red are
   states of a real estimate; this row has no estimate to be in a state). */._row_19swn_4[data-untracked] {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 14px
  );
}/* `.side` centers itself so the badge/cap stack reads as one gauge WITH the
   tank beside it. A row with NO tank has nothing to centre against, so its
   badge belongs at the top-right corner like the row's title, not floating in
   the vertical middle. Two such rows: the untracked placeholder ("Not tracked")
   and a ran-out tracked row ("Ran out") — both render no gauge, so the rule is
   generic across them rather than special-cased to one. */._row_19swn_4[data-untracked] ._side_19swn_145,
._row_19swn_4[data-needscheck] ._side_19swn_145 {
  align-self: flex-start;
}/* Dashed like the needsCheck badge — both say "there is no figure here", which
   is a different claim from any number. */._badge_19swn_160[data-tone='untracked'] {
  color: var(--info);
  background: var(--info-tint);
  border: 1px dashed var(--info);
}._hint_19swn_121[data-tone='untracked'] {
  color: var(--info);
}/* The untracked row's note and its action on one line, the way a tracked row
   keeps `Sync` beside the sentence it answers. */._untrackedLine_19swn_432 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}/* The untracked row's Add-stock action. Unchanged from when it sat in the side
   column — only its position moved, next to the note it answers. */._sideAction_19swn_441 {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}._sideAction_19swn_441:hover:not(:disabled) {
  color: var(--navy);
}._sideAction_19swn_441:disabled {
  opacity: 0.5;
  cursor: default;
}/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}

/* Classes below this line are copied from DeliveryPipeline.module.css — the
   card body is the list row's content, transplanted onto a kanban card, so
   the trail/arrival chips keep pixel-identical styling. */

/* In-flight delete: fade the card's content under a centered status label
   (same treatment as the pipeline row). */
._deletingOverlay_1wksx_7 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}

/* Statuses dropdown + "+ New delivery", side by side in the panel header. */
._headerActions_1wksx_19 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Same treatment as the inventory panel's header action — the one rule,
   composed, so the two panels' buttons (and their disabled state) cannot
   drift apart. */
._addBtn_1wksx_28 {
}

._deleteItem_1wksx_32 {
  color: var(--color-error);
}

/* Every text line on the card is single-line-with-ellipsis. Clamping (rather
   than wrapping) keeps cards a uniform width — the full note is on the edit
   dialog. Relies on `.cardMain { min-width: 0 }`: without it the flex item
   refuses to shrink below its content and the ellipsis never engages. */
._material_1wksx_40,
._meta_1wksx_41 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._material_1wksx_40 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._meta_1wksx_41 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* The in-flight negotiation trail: a filled chip per date the supplier
   actually gave, a dashed ghost chip for whichever is still awaited — see
   `renderTrail` in BoardCard.tsx. Retired once a card arrives, where
   `.dateList` below takes over. */
._dates_1wksx_64 {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* arrows sit mid-chip, not on the text baseline */
  gap: 6px;
  margin-top: 4px;
}

._dateChip_1wksx_72 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xl);
  background: var(--g50);
  border: 1px solid var(--separator);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
}

._dateChip_1wksx_72 b {
  font-weight: 700;
}

._dateLabel_1wksx_89 {
  font-size: var(--fs-2xs);
  color: var(--g500);

  /* .dateChip has no flex-basis, so under width pressure the browser can
     shrink it below its max-content size and wrap this label's words
     ("Replied by" -> "Replied" / "by"). Keep it one line like the fixed
     .dateRowLabel column does for the settled-card summary. */
  white-space: nowrap;
}

._chipArrow_1wksx_100 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}

/* Dashed placeholder standing in for the date the trail is still waiting on —
   Requested before a request went out, Answered before the supplier replies.
   Composes with `.dateChip` for the shared padding/layout; only the border
   and fill differ from a filled chip. */
._chipGhost_1wksx_109 {
  border-style: dashed;
  border-color: var(--g300);
  background: none;
}

/* The amber "pending" word — inside a ghost chip, and reused verbatim for the
   footer's due-placeholder "pending" span, so "waiting on a date" reads the
   same wherever it shows up on the card. */
._ghostHint_1wksx_118 {
  color: var(--color-warn);
  font-weight: 650;
}

/* The arrived date summary: Requested / Answered / Arrived, one row each,
   always all three, once a card has landed — see `renderArrival` in
   BoardCard.tsx. The in-flight trail above stays a chip row; this is a
   plain list, since a settled card has more to say (three dates, not one
   open question) than a chip row comfortably holds. */
._dateList_1wksx_63 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

._dateRow_1wksx_96 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
}

/* Fixed width, not a hard column count: labels are short in every locale
   this product ships (Requested/Replied by/ETA/Arrived; 希望/返答/到着予定/到着),
   so one em-relative width lines every value up without the English label
   dictating a raw pixel figure. nowrap guards the widest label ("Replied
   by") from breaking onto two lines at odd zoom levels. */
._dateRowLabel_1wksx_96 {
  flex: 0 0 5.75em;
  font-size: var(--fs-2xs);
  color: var(--g500);
  white-space: nowrap;
}

._dateRowValue_1wksx_154 {
  font-weight: 700;
  color: var(--navy);
}

/* The one settled FACT on the card, not an ask or a reply — the row a
   Delivered-column card is actually scanned for. */
._dateArrived_1wksx_161 {
  color: var(--color-success);
}

/* How the arrival landed against the agreed date. Sits beside the Arrived
   row's value and carries the tone alone — same grammar as the trail's
   ghost hint above. */
._variance_1wksx_168 {
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-2xs);
}

._varOnTime_1wksx_174 {
  color: var(--color-success);
}

/* Early is not a win on a just-in-time site — nobody booked the crane or the
   yard for it. Informational grey, not green. */
._varEarly_1wksx_180 {
  color: var(--g500);
}

._varLate_1wksx_184 {
  color: var(--color-error);
}

/* Agreed deadline, in the card footer. */
._due_1wksx_189 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}

._dueLate_1wksx_196 {
  color: var(--color-error);
}

/* Stands where the deadline would be, so an undated card reads as "waiting on
   a date" rather than as one nobody has filled in. Muted, like any other
   label — the amber "pending" span beside it (`.ghostHint`) is what carries
   the awaited tone now, not the whole line. */
._duePending_1wksx_204 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g500);
}

/* The footer's "pending" sits beside the label, not inside a date chip, so it
   must pin its own size to the label's — otherwise it inherits the card's
   base size and floats off the shared baseline. */
._duePendingHint_1wksx_214 {
  font-size: var(--fs-xs);
  line-height: inherit;
}

/* Name + amount on one line. The name clamps and the amount does not: a long
   material name must lose characters before the figure disappears. */
._materialLine_1wksx_221 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;

  /* Clears the card's star, which sits over this line's right end. */
  padding-right: var(--s-5);
}

._cardStar_1wksx_231 {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
}

._materialLine_1wksx_221 ._material_1wksx_40 {
  flex: 0 1 auto;
  min-width: 0;
}

._qty_1wksx_242 {
  flex: none;
  margin-left: auto;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}

/* Jump target: a card named elsewhere on the board, flashed after the scroll
   lands. An absolutely-positioned overlay rather than a background on `.card`
   itself, so it cannot fight the delete treatment or the card's own border,
   and so it can be remounted per jump to replay the animation.

   The animation itself is the shared Components/ui/JumpFlash, composed
   below — the same one the pipeline row, the progress tracker's column jump
   and the Help Center's search landing use: one visual language for "here is
   the thing you asked for". */
._jumpFlash_1wksx_261 {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: var(--z-raised-1);
}

/* Board frame — values from the approved mockup. */

._board_1wksx_272 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-1) 0;
}

/* Columns share the row evenly: equal grow from a zero basis, so three columns
   and eight columns each divide the width the same way. `min-width` (not
   shrink) is the floor — past it the row overflows into the board's ScrollArea rather
   than squeezing cards into unreadable slivers. 280px is the width a column
   settled at under the old `max-width` cap with the three seeded statuses, so
   the cap became the floor: the layout the board shipped with is now the
   narrowest a column ever gets, not the widest. */
._column_1wksx_286 {
  flex: 1 0 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  height: 440px;

  /* The cap holds in every mode: search mode lets a column SHRINK to its
     matches (below), but never grow past the working height — past it the
     column's own stack scrolls. */
  max-height: 440px;
  background: var(--g50);
  border-radius: var(--r-xl);
  padding: 6px 10px 10px;
}

/* Search mode: the fixed working height gives way to content, up to the cap —
   the row is as tall as the column with the most matches, and the rest
   stretch to line up with it. `stretch` (not flex-start) is what keeps the
   emptied columns from collapsing to ragged stubs beside the one that
   matched. */
._board_1wksx_272[data-searching] {
  align-items: stretch;
}

._board_1wksx_272[data-searching] ._column_1wksx_286 {
  height: auto;
}

._columnGrip_1wksx_315 {
  display: flex;
  justify-content: center;
  color: var(--g300);
  padding: 2px 0 4px;
  cursor: grab;
  touch-action: none;
  flex: none;
}

._columnGrip_1wksx_315:hover {
  color: var(--g500);
}

/* The edit lock: no sensors, so no drag to promise. */
._board_1wksx_272[data-locked] ._columnGrip_1wksx_315 {
  cursor: default;
}

._columnHead_1wksx_334 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px 4px 10px;
  flex: none;
}

._columnName_1wksx_342 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}

/* The column-header count pill and the drawer's `.ddCount` are one style —
   declared together so they can't drift. */
._count_1wksx_350,
._ddCount_1wksx_348 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  background: var(--g100);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

/* A column's cards: the ScrollArea root takes the column's remaining height,
   its viewport (`.stack`) is the scroller — jump-to-card scrolls it by class. */
._stackFrame_1wksx_363 {
  flex: 1 1 auto;
}

._stack_1wksx_362 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._card_1wksx_38 {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  flex: none;
}

._card_1wksx_38[data-deleting] {
  opacity: 0.3;
}

/* The DragOverlay ghost — see BoardCardPreview. Fixed width: a column-hosted
   card takes its width from the column's own flex sizing, but
   this one is portalled to document.body with no such parent, so it needs
   its own. `--shadow-popover` reads as "lifted" against the board the way
   `--shadow-card` never could — the point is that this card is no longer
   resting in a column. `cursor: grabbing`, not the row's own pointer
   affordance: the real card underneath already shows the drag is live. */
._cardPreview_1wksx_393 {
  width: 240px;
  box-shadow: var(--shadow-popover);
  cursor: grabbing;
}

._cardHoverPreview_1wksx_399 {
  width: 260px;
  box-shadow: var(--shadow-popover);
}

._cardMain_1wksx_38 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

._cardFoot_1wksx_417 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

._overdueBadge_1wksx_424 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-pill);
  padding: 0 7px;
}

._columnEmpty_1wksx_434 {
  border: 1px dashed var(--g200);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  font-size: var(--fs-2xs);
  color: var(--g400);
  text-align: center;
  flex: none;
}

._showAll_1wksx_444 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}

/* Statuses dropdown (board header) — values from the approved mockup. The
   kebab trigger opens a real base-ui Menu ("Manage statuses"); selecting that
   item opens the management panel below, which stays a custom popover (not a
   base-ui Menu) because it hosts inline rename/add <input>s that need to keep
   focus while open, which a base-ui Menu.Popup (built to close on interaction
   and manage its own roving focus) actively fights. */

._statusesRoot_1wksx_461 {
  position: relative;
}

._dropdownPanel_1wksx_465 {
  /* On <body>, pinned under the trigger by StatusesMenu (top/right inline):
     the board card clips its overflow, so the panel lives outside it. */
  position: fixed;
  z-index: var(--z-popover);
  width: 250px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-dropdown);
}

._ddTitle_1wksx_478 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px 8px 4px;
}

._ddRow_1wksx_487 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px;
  border-radius: var(--r-sm);
}

._ddRow_1wksx_487:hover {
  background: var(--g50);
}

._ddName_1wksx_499 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}

._ddCount_1wksx_348 {
  flex: none; /* pill styling shared with .count above */
}

/* A status row's kebab: the shared KebabButton, tightened to the row. */
._ddKebab_1wksx_515 {
  padding: 2px;
}

._ddAdd_1wksx_519 {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--info);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}

._ddAdd_1wksx_519:hover {
  background: var(--g50);
}

._ddAdd_1wksx_519:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._ddInput_1wksx_542 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--info);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  background: var(--color-surface);
}

._ddInput_1wksx_542:disabled {
  opacity: 0.6;
}

._menuWhy_1wksx_559 {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g500);
}

/* A multi-material card's line rows (design 2026-09-14 §4.2): the first two
   materials in full under the ref/destination row, each with its amount right
   — then a count for the rest, so a three-material card is no taller than
   today's plus one row. */
._lineRow_1wksx_570 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}

._lineName_1wksx_577 {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What a row is about, at a glance: the package before each material line,
   the building before the supplier. Muted so it guides the eye without
   outweighing the text; centred, since an icon has no baseline. */
._fieldIcon_1wksx_591 {
  flex: none;
  display: inline-flex;
  align-self: center;
  color: var(--g400);
}

._moreLines_1wksx_598 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}
._star_gbjei_1 {
  display: inline-flex;
  flex: none;
  line-height: 0;
  color: var(--g400);
}

._star_gbjei_1[data-critical='true'] {
  color: var(--amber);
}

._toggle_gbjei_12 {
  padding: 2px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
}

._toggle_gbjei_12:hover {
  background: var(--g100);
}
/* Muted, centered, quiet — the same register as the panels' guided empty
   states, without their icon tile or CTA: a filter miss is not an onboarding
   moment. */
._noMatch_1jfec_4 {
  margin: 0;
  padding: var(--s-2) 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
  text-align: center;
}
/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }

/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */

._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}

/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */
._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}

/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */
._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}

._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}

/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */
._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}

._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }

._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */
._input_e94hp_83 { }

._combo_e94hp_87 { }

._comboList_e94hp_89 { }

._comboOpt_e94hp_91 { }

/* Room for the caret affordance inside the combo input. */
._comboInput_e94hp_94 { }

._caretBtn_e94hp_96 { }

/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */
._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */
._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}

._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }

._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}

._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }
._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }
._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }

/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */
._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }
._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }
._list_19swn_1 {
  /* Fills the panel body (Panel `fill`) and scrolls past it — the ScrollArea
     root; its viewport is the scroller. The HEIGHT cap is not here — it lives
     on the pair's grid items (`.rowEqual > *`, LogisticsPage.module.css),
     because a max-height clamp mixing px with an intrinsically-unresolvable
     percentage silently drops. This list only needs to take whatever height
     the capped card gives it. */
  flex: 1 1 auto;
}._items_19swn_11 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}._row_19swn_4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);

  /* Right gutter: the badge and tank close the row, and with the kebab column
     gone they would sit flush against the list's scroll edge. */
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--separator);

  /* The row's one affordance: open the detail drawer (the kebab is gone,
     same as the delivery cards). Inline action buttons carry their own
     cursor already. */
  cursor: pointer;
}._row_19swn_4:focus-visible,
._row_19swn_4:has(> ._rowOpen_19swn_38:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}/* In-flight delete: fade the row's content under a centered status label. */._row_19swn_4[data-deleting] {
  pointer-events: none;
}._row_19swn_4[data-deleting] > :not(._deletingOverlay_19swn_49) {
  opacity: 0.3;
}._deletingOverlay_19swn_49 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._row_19swn_4:last-child {
  border-bottom: none;
}/* The row div itself is not clickable; interactive controls (kebab menu,
   inline Renew/update-link action buttons) live inside it. */._main_19swn_70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}._provName_19swn_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}._deleteItem_19swn_86 {
  color: var(--color-error);
}/* Both text lines are single-line-with-ellipsis (same treatment as the delivery
   panel's `.material` / `.meta`). The material name is free text up to 120 chars
   and can arrive as one unbroken token, which does not wrap and ran straight out
   of the card. Clamping (rather than wrapping) also keeps rows a uniform height —
   the full name is on the update dialog. Relies on `.main { min-width: 0 }`:
   without it the flex item refuses to shrink below its content and the ellipsis
   never engages. */._name_19swn_97,
._meta_19swn_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._name_19swn_97 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_19swn_91 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._provenance_19swn_115 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* "Delivery takes ~Nd" on the provenance line, text-only — a step up from the
   line's own muted grey (not the `.hint` line's amber/red, which is reserved
   for urgency), just enough emphasis to read as a small data figure. The
   tooltip it opens carries the CONCLUSION (the tick-consistent "Order by
   <date>" deadline plus provenance), so nothing here duplicates it. Dotted
   underline (not the `.hint` line's solid-on-hover one) marks it as a hover
   target, not a click target.

   Plain inline, not inline-flex: the Tooltip trigger renders THIS span
   itself (Base UI merges its props onto it, no wrapper), so whatever box
   type it declares is what sits in the provenance line's text flow. An
   inline-flex box computes its own baseline from its flex line rather than
   the text inside it, which floated this segment off the "Started … ·
   admin · …" siblings' shared baseline — inline text needs no flex
   properties at all, so the box-baseline mismatch cannot recur. */._deliveryTakes_19swn_135 {
  color: var(--g600);
  font-weight: 600;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}/* Badge on top, duration cap beneath — the tank is its own sibling column
   between `.side` and `.endCol`, so this stack carries both figures the tank
   itself has no room for. */._side_19swn_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;

  /* Centered with the tank beside it — the badge/cap stack and the tank read
     as one gauge, so they share the row's vertical middle (the kebab alone
     stays pinned to the top corner). */
  align-self: center;
}._badge_19swn_160 {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Transparent, so the urgent tone's visible border costs no height. Without
     it an urgent badge was 20px against everyone else's 18px, and the bar
     beneath it dropped 2px out of line with the duration on exactly those
     rows — the ones already shouting for attention. */
  border: 1px solid transparent;
}._badge_19swn_160[data-tone='ok'] {
  color: var(--color-success);
  background: var(--color-success-bg);
}._badge_19swn_160[data-tone='warn'] {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}._badge_19swn_160[data-tone='urgent'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}._badge_19swn_160[data-tone='check'] {
  color: var(--g600);
  background: var(--g50);
  border: 1px dashed var(--g400);
}/* The time-remaining tank now lives in the `ReorderTickTank` component; this
   only supplies the row layout the panel needs (vertically centred beside the
   badge). */._tankInRow_19swn_198 {
  align-self: center;
}/* Truck hint line — additive to the band, one tone per row (amber/reorder or red/gap). */._hint_19swn_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Rendered as a <button> whenever the line has somewhere to go, so the button
     chrome has to be reset here — the two forms must be pixel-identical, and a
     line that shifts when it becomes clickable is a bug nobody looks for. */
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}/* The affordance follows the ELEMENT, not the tone: a line is a <button> only
   when it has somewhere to go, and every tone can now be one — an incoming line
   jumps to its delivery just as the gap line does. Keyed on the tone, the green
   line was clickable and said nothing about it. Underline on hover only, the
   same rule the row's other actions follow. */button._hint_19swn_121 {
  cursor: pointer;
  text-decoration: none;
}button._hint_19swn_121:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}._hint_19swn_121[data-tone='reorder'] { color: var(--color-warn); }._hint_19swn_121[data-tone='gap'] { color: var(--color-error); }._hint_19swn_121[data-tone='incoming'] { color: var(--color-success); }/* Actionable text on a row: bold italic, underlined ONLY on hover — the
   underline is the affordance, not decoration. */._action_19swn_244 {
  font: inherit;
  font-weight: 700;
  font-style: italic;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: none;
}._action_19swn_244:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }._action_19swn_244:disabled {
  opacity: 0.5;
  cursor: default;
}._renewAsk_19swn_263 {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
}/* A landed-but-late arrival keeps the overdue tone the in-flight note wore —
   the fact it turned up does not make its lateness good news. */._renewAskLate_19swn_274 {
  color: var(--color-warn);
}._addBtn_19swn_278 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--status-planned-text);
  background: var(--status-planned-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}._addBtn_19swn_278:disabled {
  opacity: 0.5;
  cursor: default;
}/* An in-flight delivery past its own ETA. Amber, not green: something is still
   coming, but its date has gone by and nobody has seen it — that is a prompt to
   chase, not reassurance that the material is covered. */._hint_19swn_121[data-tone='late'] { color: var(--color-warn); }/* The arrival named on a ran-out row. It answers the question the line is
   asking, so it carries weight against the muted provenance text around it. */._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}/* When an arrival phrase names a known delivery it becomes a jump link. Same
   button-reset discipline as .hint so the note stays pixel-identical to its
   plain-span form — a phrase that shifts the moment it gains a target is a bug
   nobody looks for. Underline on hover only; the chevron slides like .hint's.
   `.renewAskJump` is the covered row's "New delivery arrived…" phrase; it takes
   the same reset but keeps the LINE's own colour and weight (amber when the
   arrival was late), which a fixed navy would strip. */button._arrivalNote_19swn_302,
button._renewAskJump_19swn_311 {
  display: inline-flex;
  align-items: center;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}button._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}button._renewAskJump_19swn_311 {
  color: inherit;
}button._arrivalNote_19swn_302:hover,
button._renewAskJump_19swn_311:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:hover ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}._durationCap_19swn_350 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}._durationCap_19swn_350[data-tone='ok'] { color: var(--color-success); }._durationCap_19swn_350[data-tone='warn'] { color: var(--color-warn); }._durationCap_19swn_350[data-tone='urgent'] { color: var(--color-error); }/* The trailing "goes somewhere" mark. Decoration, not a control: it inherits
   the line's tone via currentColor so it reads as part of the sentence. */._jumpMark_19swn_342 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  opacity: 0.65;
  transition: opacity 120ms ease, transform 120ms ease;
}button._hint_19swn_121:hover ._jumpMark_19swn_342,
button._hint_19swn_121:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}@media (prefers-reduced-motion: reduce) {
  ._jumpMark_19swn_342 {
    transition: opacity 120ms ease;
  }

  button._hint_19swn_121:hover ._jumpMark_19swn_342,
  button._hint_19swn_121:focus-visible ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342 {
    transform: none;
  }
}/* ---- Untracked material: a delivery exists, no stock record does ----
   A faint diagonal hatch rather than a solid tint or a coloured rail: the row
   holds no figures, and the hatch says "nothing here yet" without competing
   with the tones that DO carry meaning on this panel (green/amber/red are
   states of a real estimate; this row has no estimate to be in a state). */._row_19swn_4[data-untracked] {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 14px
  );
}/* `.side` centers itself so the badge/cap stack reads as one gauge WITH the
   tank beside it. A row with NO tank has nothing to centre against, so its
   badge belongs at the top-right corner like the row's title, not floating in
   the vertical middle. Two such rows: the untracked placeholder ("Not tracked")
   and a ran-out tracked row ("Ran out") — both render no gauge, so the rule is
   generic across them rather than special-cased to one. */._row_19swn_4[data-untracked] ._side_19swn_145,
._row_19swn_4[data-needscheck] ._side_19swn_145 {
  align-self: flex-start;
}/* Dashed like the needsCheck badge — both say "there is no figure here", which
   is a different claim from any number. */._badge_19swn_160[data-tone='untracked'] {
  color: var(--info);
  background: var(--info-tint);
  border: 1px dashed var(--info);
}._hint_19swn_121[data-tone='untracked'] {
  color: var(--info);
}/* The untracked row's note and its action on one line, the way a tracked row
   keeps `Sync` beside the sentence it answers. */._untrackedLine_19swn_432 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}/* The untracked row's Add-stock action. Unchanged from when it sat in the side
   column — only its position moved, next to the note it answers. */._sideAction_19swn_441 {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}._sideAction_19swn_441:hover:not(:disabled) {
  color: var(--navy);
}._sideAction_19swn_441:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The shared ui/Drawer owns the panel box (width, padding, scroll,
   slide-in); this file only lays out the content. */

._head_11jt3_4 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding-right: var(--s-6);
}

._identity_11jt3_12 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-width: 0;
}

/* Icon on a colour tint — the area's own colour (`AREA_COLOR_TOKEN`, one of
   the six fixed `var(--sitemap-…)` tokens), never a raw hex. The token
   travels in as a custom property so this rule stays colour-agnostic. */
._iconTint_11jt3_22 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--tint) 16%, var(--white));
  color: var(--tint);
}

._titleBlock_11jt3_34 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._title_11jt3_34 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  overflow-wrap: anywhere;
}

._renameInput_11jt3_51 {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--info);
  border-radius: var(--r-md);
  padding: 1px var(--s-1);
  width: 100%;
}

._meta_11jt3_62 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* Padding matches `ui/Drawer`'s own `.close` (`--s-1`), and the icon it
   wraps is sized to 18px in the JSX to match `.close`'s `CloseIcon` — same
   hit-area box. The `top` nudge pulls that box up so its vertical center
   lands on `.close`'s (positioned at `top: var(--s-4)` inside a panel with
   `--s-6` padding — `--s-6` minus `--s-4` is exactly `--s-2`), without
   disturbing the header's flex flow (`position: relative` keeps its layout
   space, just offsets the paint). */
._kebabBtn_11jt3_75 {
  padding: var(--s-1);
  border-radius: var(--r-md);
  position: relative;
  top: calc(-1 * var(--s-2));
}

._deleteItem_11jt3_82 {
  color: var(--color-error);
}

/* Blocked (the area still holds stock): keep the item red but clearly
   inert — `ui/Menu` greys disabled items, this one stays on-tone faded. */
._deleteItem_11jt3_82[data-disabled] {
  color: var(--color-error);
  opacity: 0.38;
}

/* The why, sitting right under the faded item inside the menu popup. */
._deleteWhy_11jt3_94 {
  margin: 0;
  padding: 0 var(--s-3) var(--s-2);
  max-width: 240px;
  color: var(--color-error);
  font-size: var(--fs-2xs);
  line-height: 1.45;
}

/* ---------- Stock section ---------- */

._stockSection_11jt3_105 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}

._sectionTitle_11jt3_114 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._empty_11jt3_124 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g500);
}

/* The stock rows themselves reuse `InventoryLevels.module.css` (`.list`,
   `.row`, `.main`, ...) via `InventoryRowCore` — this file only lays out
   what is unique to the drawer. */

/* The Inventory panel's `.list` grows to fill its card (`flex: 1 1 520px`)
   — right there, wrong here: inside the drawer's flex column that basis
   claims 520px however few rows there are and parks the sync note and the
   picker at the bottom of that band. The drawer panel scrolls itself, so
   the rows just take their own height. `composes` keeps the row styling
   and lets the overrides win regardless of module injection order. */
._stockList_11jt3_141 {
  flex: 0 0 auto;
  overflow-y: visible;
}

._syncNote_11jt3_147 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}

/* ---------- Add-stock picker ---------- */

._picker_11jt3_156 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);

  /* On top of the drawer's own section gap: the toggle reads as its own
     block below the stock section's rule, not as that section's footer. */
  padding-top: var(--s-3);
}

._pickerToggle_11jt3_166 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--info);
  cursor: pointer;
}

._pickerToggle_11jt3_166:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Collapse/expand affordance — the repo-wide convention (frontend/CLAUDE.md):
   ChevronDownIcon in an inline-flex span, rotated -90deg while collapsed. */
._caret_11jt3_188 {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease;
}

._caret_11jt3_188[data-collapsed='true'] {
  transform: rotate(-90deg);
}

._pickerBody_11jt3_198 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._pickerSearch_11jt3_204 {
  width: 100%;
}

._pickerList_11jt3_208 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

._pickerScroll_11jt3_217 {
  max-height: 220px;
}

._pickerRow_11jt3_221 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-md);
}

._pickerRow_11jt3_221:hover {
  background: var(--g50);
}

._pickerName_11jt3_234 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._tag_11jt3_243 {
  flex: none;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g500);
  background: var(--g100);
}

._addBtn_11jt3_254 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--info);
  border-radius: var(--r-circle);
  background: transparent;
  color: var(--info);
  cursor: pointer;
}

._addBtn_11jt3_254:hover {
  background: var(--info-tint);
}
._destructiveItem_dzetf_1 {
  color: var(--color-error);
}
/* Panel title slot (composed in SiteMap.tsx instead of a plain string) — the
   blueprint thumbnail + the current floor's name in bold, sitting above the
   panel's own subtitle. Reuses the same quiet grid-pattern thumbnail that
   used to sit in the toolbar's base-plan label; the plan name now lives only
   here, so the toolbar below starts directly with its buttons. */
._headerTitleRow_12ozn_6 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

._headerPlanName_12ozn_13 {
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A quiet blueprint thumbnail — a grid pattern (two repeating gradients over
   a flat fill) standing in for the base plan itself, not a real preview. */
._basePlanThumb_12ozn_23 {
  flex-shrink: 0;
  width: 36px;
  height: 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--g200);
  background-color: var(--g50);
  background-image:
    repeating-linear-gradient(0deg, var(--g100) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--g100) 0 1px, transparent 1px 6px);
}

/* Toolbar (Panel headerRight) — the navy/outlined draw/place controls, a
   divider, and the icon-only cluster (layers, zoom ±, ⋯). `flex-wrap` keeps
   the cluster from squeezing awkwardly if the Panel's heading column crowds
   it — the buttons wrap onto a second line rather than shrinking. */
._toolbar_12ozn_39 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: var(--s-2);
}

/* Shared toolbar-button base — `.toolbarBtnPrimary` / `.toolbarBtnSecondary`
   set colour + border, `.toolbarBtnIcon` narrows the padding for the
   icon-only square buttons. Kept as one base + modifiers (not one block per
   button) to avoid repeating the same declarations across five buttons. */
._toolbarBtn_12ozn_47 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  line-height: 1;
  border-radius: var(--r-lg);
  padding: 7px 11px;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

._toolbarBtn_12ozn_47:disabled {
  opacity: 0.5;
  cursor: default;
}

._toolbarBtnPrimary_12ozn_47 {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--white);
}

._toolbarBtnPrimary_12ozn_47:hover:not(:disabled) {
  opacity: 0.92;
}

/* Engaged state while draw mode is active — an inset ring, since the resting
   state is already solid navy. */
._toolbarBtnPrimary_12ozn_47[data-active] {
  box-shadow: inset 0 0 0 2px var(--white);
}

._toolbarBtnSecondary_12ozn_47 {
  border: 1px solid var(--border);
  background: var(--color-surface);
  color: var(--g700);
}

._toolbarBtnSecondary_12ozn_47:hover:not(:disabled) {
  background: var(--g50);
}

/* Engaged state while equipment placement owns the stage — same navy fill
   the primary button uses at rest, so both tools read as "on" the same way. */
._toolbarBtnSecondary_12ozn_47[data-active] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

._toolbarBtnIcon_12ozn_48 {
  padding: 7px;
  gap: 0;
}

._toolbarDivider_12ozn_109 {
  width: 1px;
  height: 22px;
  flex-shrink: 0;
  background: var(--separator);
}

/* Layers menu (toolbar) — overrides `ui/Menu`'s default popup/item chrome at
   the call site: compact density (32-ish px rows vs. the shared 10px-padded
   default) and a token shadow/radius pairing that matches the panel's other
   popovers. `.layerCheck` is a fixed 16px slot so both items' labels stay
   aligned whether or not their `CheckIcon` is present — the shared
   `Menu.CheckboxItem` only exposes `data-checked`/`aria-checked`, no visible
   indicator of its own. */
._layersPopup_12ozn_123 {
  min-width: 160px;
  padding: 4px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-popover);
}

._layerItem_12ozn_130 {
  padding: 6px 12px;
  min-height: 32px;
}

._layerCheck_12ozn_119 {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-accent);
}

/* Loading placeholder — a plain shimmer box at roughly the stage's live height,
   so the panel doesn't jump once the map data lands. */
._shimmer_12ozn_147 {
  min-height: 320px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--g50) 25%, var(--g100) 37%, var(--g50) 63%);
  background-size: 400% 100%;
  animation: _shimmerSweep_12ozn_1 1.4s ease infinite;
}

@keyframes _shimmerSweep_12ozn_1 {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._shimmer_12ozn_147 {
    animation: none;
  }
}

/* -------- Fullscreen overlay (expanded) --------
   The card's normal state is a plain flow child of Panel/LogisticsPage's
   grid (no positioning rules needed here) — `[data-expanded='true']` is the
   ONLY thing that turns it into a fixed VIEWPORT overlay, above the
   sidebar/topbar entirely (`--z-map-fullscreen(-backdrop)`, 44/45, both sit
   above `--z-topbar`/`--z-sidebar`, 20 — tokens.css). The backdrop is a
   SIBLING `<div>` (SiteMap.tsx), not a wrapper, mounted only while expanded;
   it dims the FULL viewport, while the card sits inset 16px within it — that
   16px gap is what reads as the dimmed margin around the card, now on every
   edge (including over the sidebar/topbar) rather than just the content
   area. No dependency on `--sidebar-w`/`--topbar-h` any more — the overlay
   covers past them, so the sidebar's collapsed/expanded width no longer
   changes anything here. */
._backdrop_12ozn_184 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: var(--z-map-fullscreen-backdrop);
}

._card_12ozn_191[data-expanded='true'] {
  position: fixed;
  inset: 16px;
  z-index: var(--z-map-fullscreen);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-popover);
}

/* Panel (`Panel.tsx`) renders a `<section>` as the card's only child — it
   already owns its own internal flex-column layout (head/body), this just
   makes that section (and, via `.bodyFill`, its body) fill the fixed card's
   full height instead of sizing to content, so the toolbar sits pinned on
   top and the stage below gets the entire remaining height to center in. */
._card_12ozn_191[data-expanded='true'] > section {
  flex: 1 1 auto;
  min-height: 0;
}

/* -------- MapStage -------- */

._stageOuter_12ozn_212 {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 240px;
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  background: var(--g50);
}

/* The frame's scroller — overlay bars, both axes (a zoomed plan pans). */
._stageScroll_12ozn_224 {
  flex: 1 1 auto;
}

._stageViewport_12ozn_228 {
  /* Centers the aspect-bound `.stageInner` (width set inline in
     MapStage.tsx — see its comment) inside whatever box the frame (`.stageOuter`)
     resolves to, in BOTH modes: the fixed `pinnedHeight` the in-flow
     (now full-row) card pins itself to, and the flexed remainder of the
     fullscreen card's column (`[data-expanded='true']` below). `safe
     center`, not plain `center`: PLAIN center makes an overflowing flex item
     center on BOTH sides of the container equally, and because it's
     alignment (not margin) doing the centering, the browser only ever
     creates scrollable range on ONE side — half the zoomed-in overflow
     becomes permanently unreachable by drag-to-pan/scrollbars alike. `safe`
     asks the browser to fall back to start alignment the moment the item no
     longer fits, so at zoom > 1 the full (now wider/taller than the
     container) `.stageInner` sits flush instead and the WHOLE overflow
     scrolls into view; at zoom 1, where it still fits, `safe center`
     behaves identically to plain `center` — a no-op for that case. */
  display: flex;
  align-items: safe center;
  justify-content: safe center;
}

/* Drag-to-pan cursor feedback (view mode only — `useStagePan` only sets
   `data-pannable` while the stage isn't a draw/place/set-radius tool).
   `data-panning` (set for the duration of an actual drag) wins over the
   resting `grab` via source order. */
._stageOuter_12ozn_212[data-pannable='true'] {
  cursor: grab;
}

._stageOuter_12ozn_212[data-panning='true'] {
  cursor: grabbing;
}

/* Fullscreen only: the stage becomes the flexed remainder of the card's
   column (toolbar above, legend below) instead of pinning to a fixed height
   the way the in-flow (base `.stageOuter`, above) case does. */
._stageOuter_12ozn_212[data-expanded='true'] {
  flex: 1 1 auto;
  min-height: 0;
}

/* The whole point of the inline `width` (MapStage.tsx) is to be NARROWER
   than `.stageOuter` at zoom 1, so the base flex centering above has room to
   letterbox it — `min-width: 0` overrides the browser's default flex-basis
   (auto, which would otherwise floor a block child's width at its content
   size) and `flex-shrink: 0` stops the browser silently shrinking an
   over-width `.stageInner` back down to fit at zoom > 1, which would discard
   the overflow drag-to-pan needs to scroll (default `flex-shrink: 1` only
   ever fires once the child's own specified width exceeds the container's —
   never true at zoom 1, always true above it). */
._stageInner_12ozn_229 {
  position: relative;
  min-width: 0;
  flex-shrink: 0;
}

._stack_12ozn_284 {
  position: relative;
  width: 100%;
}

/* Overrides FloorSvg's own `.svg :global(svg) { height: 100% }` rule — here the
   svg must keep its intrinsic aspect ratio (height: auto) so the overlay and
   the chip layer's x/vbWidth% positions land exactly on the blueprint. */
._floorSvgWrap_12ozn_292 {
  display: block;
  width: 100%;
}

._floorSvgWrap_12ozn_292 > svg {
  display: block;
  width: 100%;
  height: auto;
}

._overlay_12ozn_303 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Flat translucent fill, no outline (spec §4.0) — the colour itself comes from
   `AREA_COLOR_TOKEN` inline (`style={{ fill: ... }}`), one of the six fixed
   `var(--sitemap-…)` tokens. */
._areaPolygon_12ozn_313 {
  fill-opacity: 0.28;
  stroke: none;
  transition: fill-opacity 120ms ease;
  cursor: pointer;
  pointer-events: auto;
}

._areaPolygon_12ozn_313:hover,
._areaPolygonSelected_12ozn_322 {
  fill-opacity: 0.45;
}

/* While a draw/place tool owns the stage (`MapStage`'s `data-mode`), the area
   polygons and chip layer must stop intercepting clicks themselves — a draw
   click landing inside an existing area, or under an equipment chip, is a new
   vertex, not a selection or a drag. The click then falls through to the
   overlay `<svg>`'s own `onClick`, which is what actually drives the tool. */
._stageOuter_12ozn_212[data-mode='interactive'] ._areaPolygon_12ozn_313,
._stageOuter_12ozn_212[data-mode='interactive'] ._areaChip_12ozn_332,
._stageOuter_12ozn_212[data-mode='interactive'] ._equipmentChip_12ozn_333 {
  pointer-events: none;
}

/* A transient boundary, not an area — dashed stroke in the equipment's own
   accent (spec §4.0) + a very faint fill of the same colour, no pointer
   interaction of its own. `fill`/`stroke` are set inline per-equipment
   (`EQUIPMENT_ACCENT_TOKEN`, one of the six existing `--sitemap-…` tokens);
   this class only owns the shared shape. The overlay's viewBox is in plan
   units (often thousands of units wide) — WITHOUT `non-scaling-stroke`,
   `stroke-width`/`stroke-dasharray` are drawn in that user space and get
   scaled down to sub-pixel on screen, so the dash pattern disappears into a
   soft plain edge. `non-scaling-stroke` computes the stroke in screen pixels
   instead, so 1.5px/6 5 mean what they say regardless of plan scale. */
._radiusCircle_12ozn_347 {
  fill-opacity: 0.07;
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Invisible wide-stroke twin of `.radiusCircle` — `pointer-events: stroke`
   restricts hit-testing to the ring itself (not its fill), so this is a
   grabbable EDGE, not a click-anywhere-inside-the-circle target. Same
   plan-unit-vs-screen-pixel issue as `.radiusCircle` above: without
   `non-scaling-stroke` a 14-unit-wide stroke can shrink to a sliver on
   screen at typical plan scales, and the grab target shrinks with it —
   `non-scaling-stroke` keeps it a real ~14px on screen at any zoom. */
._radiusHit_12ozn_362 {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: ns-resize;
}

._chipLayer_12ozn_371 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Shared chip anchor — a centered vertical stack (icon tile, name pill, an
   optional colour pill below) pinned at the area/equipment's plan point.
   `.areaChip`/`.equipmentChip` only differ in cursor affordance (click vs.
   drag) and in resetting the native <button> chrome for the area's case. */
._chipStack_12ozn_381 {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 160px;
  border: none;
  background: none;
  padding: 0;
  pointer-events: auto;
}

._areaChip_12ozn_332 {
  cursor: pointer;
}

._equipmentChip_12ozn_333 {
  cursor: grab;
}

/* Icon tile — white, tinted by `--tint` (area colour) via `currentColor`;
   equipment leaves `--tint` unset and falls back to navy. Square for areas,
   round (`.chipIconTileRound`) for equipment. */
._chipIconTile_12ozn_405 {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-xl);
  background: var(--color-surface);
  border: 1px solid var(--g200);
  box-shadow: var(--shadow-chip);
  color: var(--tint, var(--navy));
}

._chipIconTileRound_12ozn_405 {
  border-radius: var(--r-circle);
}

/* Name pill — shared by both chip kinds. Equipment nests the remove
   affordance inside it; area's is text-only. */
._chipNameLabel_12ozn_425 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: var(--r-md);
  background: var(--color-surface);
  border: 1px solid var(--g100);
  box-shadow: var(--shadow-card);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--g700);
}

._chipLabel_12ozn_441 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Materials-count pill — area chips only, shown when the area has ≥1
   material. Background is the area's own colour token, set inline. */
._chipMaterialsPill_12ozn_449 {
  padding: 1px 6px;
  border-radius: var(--r-pill);
  color: var(--white);
  font-size: var(--fs-3xs);
  font-weight: 700;
  white-space: nowrap;
}

._chipRemoveBtn_12ozn_458 {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--g400);
  padding: 0;
  cursor: pointer;
}

._chipRemoveBtn_12ozn_458:hover {
  color: var(--color-error);
}

/* -------- Legend -------- */

._legend_12ozn_475 {
  display: flex;
  gap: var(--s-4);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}

._legendItem_12ozn_483 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g600);
}

._legendSwatch_12ozn_492 {
  width: 12px;
  height: 12px;
  border-radius: var(--r-sm);
  background: var(--info);
  opacity: 0.45;
}

._legendRing_12ozn_500 {
  width: 12px;
  height: 12px;
  border-radius: var(--r-circle);
  border: 1px dashed var(--g400);
}

/* -------- Draw mode — draft path + vertices --------
   Matches the backoffice `react-lasso-select` tool exactly (spec addendum):
   ONE dashed white polyline through every placed point AND the live cursor —
   not a separate "placed" line plus a distinct cursor segment, so the
   in-progress edge reads identically to the already-placed ones — plus
   hollow white square vertex handles (`<rect>`, not `<circle>`). Stroke
   widths are drawn in plan units, which collapse to sub-pixel on a real
   (often thousands-of-units-wide) blueprint viewBox — `vector-effect:
   non-scaling-stroke` computes them in screen pixels instead.
   `.draftVertex`'s `width`/`height` are sized in SiteMap.tsx (fill geometry
   isn't a stroke, `non-scaling-stroke` can't fix that) off the overlay's own
   screen CTM. */
._draftPath_12ozn_519 {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  stroke-dasharray: 3;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  pointer-events: none;
  animation: _draftPathMarch_12ozn_1 0.5s linear infinite;
}

/* Marching-ants dash crawl, matching the lasso reference. `-6`: one full
   dash+gap cycle of the `3`-unit dasharray (3 dash + 3 gap = 6). */
@keyframes _draftPathMarch_12ozn_1 {
  to {
    stroke-dashoffset: -6;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._draftPath_12ozn_519 {
    animation: none;
  }
}

._draftVertex_12ozn_516 {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Once ≥3 points are down, the first vertex is an ACTUAL close target — a
   click within the screen-based threshold (`CLOSE_THRESHOLD_PX` in
   SiteMap.tsx) OR a direct click on this handle closes the polygon. It sits
   at the same size as every other handle at rest; growing on hover is the
   whole affordance (mirrors the backoffice editor), so re-enable pointer
   events just for this one rect (`.draftLayer` is `pointer-events: none`)
   and grow it via `transform: scale` rather than swapping width/height —
   `transform-box: fill-box` + `transform-origin: center` scales an SVG
   shape from its own center instead of the viewBox origin.
   `pointer-events: fill`, not `auto` — `auto` resolves to SVG's own default
   (`visiblePainted`), which only counts the STROKE as hit-testable here
   because `.draftVertex` sets `fill: none`; the rect's interior (most of its
   on-screen box) would silently pass hover/click through to whatever is
   stacked underneath (the interactive overlay `<svg>`). `fill` hit-tests the
   whole shape as if it were filled, regardless of the actual `fill` value. */
._draftVertexClosable_12ozn_567 {
  stroke-width: 2;
  pointer-events: fill;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 120ms ease;
}

._draftVertexClosable_12ozn_567:hover {
  transform: scale(1.4);
}

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

/* -------- Equipment placement (Task 9) -------- */

._placeEquipmentWrap_12ozn_588 {
  position: relative;
}

._draftRadiusLine_12ozn_592 {
  fill: none;
  stroke: var(--info);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

/* -------- ⋯ menu / plan switch popover (Task 10) -------- */

/* Wide enough for the master-detail picker's rail + live preview (see
   PlanPicker.module.css's `.picker`, fixed at 420px tall) without letting
   either pane feel cramped. */
._planPickerPopup_12ozn_605 {
  width: 760px;
  max-width: 92vw;
  max-height: 80vh;
}

._hintLayer_12ozn_611 {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  pointer-events: none;
}

._hintRow_12ozn_618 {
  display: flex;
  gap: var(--s-2);
}

._hintChip_12ozn_623 {
  border-radius: var(--r-sm);
  background: var(--navy);
  color: var(--color-surface);
  font-family: var(--f-mono);
  font-size: var(--fs-3xs);
  padding: 3px 8px;
  box-shadow: var(--shadow-chip);
}

/* -------- Draw mode — dim the WHOLE stage --------
   While a draw/place tool owns the stage, wash everything below the draft
   layer — blueprint, area polygons/tints, area+equipment chips, radius
   circles — so the in-progress polygon and the hint chips read as the sole
   focus. Flat black, lighter than the backoffice lasso reference's own 50%
   (see `--sitemap-draw-dim` in tokens.css) — no brightness filter, no
   cutout. A full-stage layer rather than a filter on
   `.floorSvgWrap` alone: the blueprint filter left the SVG-rendered
   areas/radii and the HTML chip layer at full brightness, since both paint
   in siblings above `.floorSvgWrap`, not inside it. Sits above the
   blueprint/areas/chips and below `.draftLayer` in MapStage.tsx's `.stack`
   (DOM order = paint order for these `position: absolute` siblings);
   `pointer-events: none` so it never shadows the interactive overlay `<svg>`
   beneath it. Always mounted — opacity (not display/mount) drives the fade
   so the transition below plays both ways. */
._drawDim_12ozn_648 {
  position: absolute;
  inset: 0;
  background: var(--sitemap-draw-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

._stageOuter_12ozn_212[data-mode='interactive'] ._drawDim_12ozn_648 {
  opacity: 1;
}

/* The in-progress polygon's own SVG layer — same viewBox/positioning as the
   interactive overlay `<svg>` above, but stacked above `.drawDim` so the
   draft stays full-brightness while everything beneath it dims.
   `pointer-events: none`: the draft's own shapes are already non-interactive
   (`.draftVertex`/`.draftPath`), and the click/move handlers live on the
   interactive overlay `<svg>` underneath — this layer must never intercept
   and swallow those. */
._draftLayer_12ozn_557 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* NewAreaDialog composes the shared modal chrome (backdrop/popup/field/label/
   input/footer/cancelBtn/saveBtn from panels/dialogChrome.module.css, the same
   way StockEntryDialog does) and adds only the icon-grid and colour-row
   pickers, which nothing else in Logistics has yet. */

._popup_15s1l_6 {
  width: 340px;
}

._iconGrid_15s1l_10,
._colorRow_15s1l_11 {
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: var(--s-2);
}

._iconOption_15s1l_17,
._swatch_15s1l_18 {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

._iconOption_15s1l_17 {
  background: var(--g50);
  color: var(--g600);
}

._iconOption_15s1l_17:hover {
  background: var(--g100);
}

._selected_15s1l_39 {
  border-color: var(--navy);
}

._iconOption_15s1l_17._selected_15s1l_39 {
  color: var(--navy);
  background: var(--status-planned-bg);
}

._swatch_15s1l_18._selected_15s1l_39 {
  box-shadow: inset 0 0 0 2px var(--white);
}
/* Shared base for a clickable picker-list row — the layout/typography
   `EquipmentCatalog`'s equipment list and `PlanPicker`'s floor list both
   need identically, including the resting hover background. Consumed via
   `composes:` from each file's own `.row`, which layers its real deltas
   (padding, font-weight) on top; a consumer with its own EXTRA hover
   treatment (e.g. a text-color change) adds a bare `.row:hover` rule of its
   own for just that property — no `composes` needed there, since the
   composed element already carries this file's hashed class and this
   `.row:hover` rule fires on it directly. */._row_mnlez_4 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  border: none;
  border-radius: var(--r-md);
  background: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g700);
  text-align: left;
  cursor: pointer;
}._row_mnlez_4:hover {
  background: var(--g50);
}
/* Master–detail base-plan chooser (Option A). Fixed height so the picker
   never grows the card it sits inside — the same frame serves the first-run
   empty state (embedded in the Panel body) and the ⋯ "Change base plan…"
   dialog (embedded in a Dialog.Popup). */
._picker_gryty_5 {
  display: flex;
  height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-surface);
}

/* Fullscreen overlay only (SiteMap's `expanded` prop, threaded as a data
   attribute — mirrors `.stageOuter[data-expanded='true']`'s own treatment):
   the fixed 420px height is replaced by flexing to fill the overlay's
   available column height. `.rail`'s list and `.preview`'s frame are already
   `flex: 1 1 auto; min-height: 0` below, so this alone is enough to make the
   list scroll internally and the preview grow into the freed space, with the
   footer bar staying pinned at the pane's bottom. Not applied to the
   ⋯ "Change base plan…" surface — that one is a centered modal (fixed
   `.planPickerPopup` sizing in SiteMap.module.css) independent of the card's
   expanded state. */
._picker_gryty_5[data-expanded='true'] {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* -------- left rail: search + floor list -------- */

._rail_gryty_17 {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--separator);
}

._railTitle_gryty_41 {
  padding: var(--s-3) var(--s-3) var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._railTitle_gryty_41 small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._search_gryty_56 {
  margin: 0 var(--s-2) var(--s-2);

  /* SearchInput's own root is `flex: 1` for toolbar ROWS; in this flex COLUMN
     that grows it vertically whenever the list beneath collapses (e.g. a
     zero-match query), ballooning the pill into an ellipse. Pin it. */
  flex: none;
}

._listScroll_gryty_65 {
  flex: 1 1 auto;
}

._list_gryty_65 {
  margin: 0;
  padding: 0 var(--s-2) var(--s-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._row_gryty_78 {
  padding: 6px var(--s-2);
}

._row_gryty_78[data-selected] {
  background: var(--info-tint);
  color: var(--info);
  font-weight: 600;
}

._rowName_gryty_89 {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

._tag_gryty_96 {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--g400);
}

._tagSaved_gryty_105 {
  color: var(--color-success);
}

/* Selected state wins over the saved/empty distinction, same cascade as the
   approved mock. */
._row_gryty_78[data-selected] ._tag_gryty_96 {
  color: var(--info);
}

/* -------- right pane: live blueprint preview -------- */

._preview_gryty_17 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--g50);
}

._previewFrame_gryty_125 {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s-5);
}

._previewPrompt_gryty_131 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--s-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--g400);
}

._previewBar_gryty_143 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--separator);
  background: var(--color-surface);
}

._previewName_gryty_152 {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._spacer_gryty_162 {
  flex: 1 1 auto;
}

._useBtn_gryty_166 {
  border: 1px solid var(--navy);
  border-radius: var(--r-lg);
  background: var(--navy);
  color: var(--white);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px var(--s-3);
  cursor: pointer;
}

._useBtn_gryty_166:hover:not(:disabled) {
  opacity: 0.92;
}

._useBtn_gryty_166:disabled {
  opacity: 0.45;
  cursor: default;
}
/* Shared base for a clickable picker-list row — the layout/typography
   `EquipmentCatalog`'s equipment list and `PlanPicker`'s floor list both
   need identically, including the resting hover background. Consumed via
   `composes:` from each file's own `.row`, which layers its real deltas
   (padding, font-weight) on top; a consumer with its own EXTRA hover
   treatment (e.g. a text-color change) adds a bare `.row:hover` rule of its
   own for just that property — no `composes` needed there, since the
   composed element already carries this file's hashed class and this
   `.row:hover` rule fires on it directly. */._row_mnlez_4 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  border: none;
  border-radius: var(--r-md);
  background: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g700);
  text-align: left;
  cursor: pointer;
}._row_mnlez_4:hover {
  background: var(--g50);
}

._card_1e86k_1 {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--s-1);
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 200px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover);
  padding: var(--s-2);
}

._title_1e86k_18 {
  margin: 0;
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

._list_1e86k_28 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._row_1e86k_37 {
  padding: var(--s-2);
  font-weight: 500;
}

._row_1e86k_37:hover {
  color: var(--navy);
}

._name_1e86k_47 {
  flex: 1;
}
._list_1sacg_1 {
  /* The pair's grid items are height-capped (`.rowEqual > *`) and the Panel
     clips its overflow — without a scrolling body, an expanded chart taller
     than the cap would be CLIPPED, its bottom unreachable. Same fill-and-
     scroll shape as the inventory list; the ScrollArea is the scroller. */
  flex: 1 1 auto;
}

._items_1sacg_9 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

._item_1sacg_9 {
  border-bottom: 1px solid var(--separator);
}

._item_1sacg_9:last-child {
  border-bottom: none;
}

/* The whole row is the expand affordance — a button styled as the row it
   used to be, so the hit target is the row and not a 12px chevron. */
._row_1sacg_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

/* Same ring the page's other controls wear (KpiCards); inset so it stays
   inside the card's padding rather than clipping against it. */
._row_1sacg_2:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

/* Collapse/expand affordance per CLAUDE.md: ChevronDownIcon, rotated -90deg
   when collapsed. Same shape as the progress matrix's `.caret`. */
._caret_1sacg_49 {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--g400);
  transition: transform 0.15s ease;
}

._caret_1sacg_49[data-collapsed='true'] {
  transform: rotate(-90deg);
}

._left_1sacg_62 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._name_1sacg_68 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._when_1sacg_75 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._amount_1sacg_81 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g700);
}

._amountSub_1sacg_92 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--g400);
}

/* The empty line: fills the panel body's column and centres in it, so the
   message sits mid-card rather than hugging the header. */
._empty_1sacg_101 {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--s-4) 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g500);
  text-align: center;
}
._detail_1vy3g_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-1) 0 var(--s-4);
  border-bottom: 1px solid var(--separator);
  font-family: var(--f-body);
}

/* ---- tiles ---- */
._tiles_1vy3g_11 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

._tile_1vy3g_11 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--s-3);
  border-radius: var(--r-md);
  background: var(--g50);
}

/* The two projections read in the planned blue — what is projected, not
   recorded — matching the chart's dashed series. */
._tileProjected_1vy3g_28 { background: var(--status-planned-bg); }
._tileProjected_1vy3g_28 ._tileValue_1vy3g_29 { color: var(--status-planned-text); }

._tileLabel_1vy3g_31 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._tileValue_1vy3g_29 {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy);
}

._tileValue_1vy3g_29 small {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--g500);
}

._projectionNote_1vy3g_53 {
  margin: calc(-1 * var(--s-2)) 0 0;
  font-size: var(--fs-2xs);
  color: var(--g400);
  line-height: 1.5;
}

/* ---- chart ---- */
._chartBar_1vy3g_61 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Over time's range switch, tucked under the chart bar at its right edge. */
._outlookBar_1vy3g_69 {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-2);
}

._chartName_1vy3g_75 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
}

._chart_1vy3g_61 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._legend_1vy3g_87 {
  display: flex;
  gap: var(--s-4);
  font-size: var(--fs-2xs);
  color: var(--g600);
}

._legend_1vy3g_87 span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._swatchRecorded_1vy3g_100 {
  width: 12px;
  height: 8px;
  border-radius: var(--r-sm);
  background: var(--bar-blue);
}

._swatchRecordedLine_1vy3g_107 {
  width: 12px;
  height: 0;
  border-top: 2px solid var(--g700);
}

._swatchProjected_1vy3g_113 {
  width: 12px;
  height: 0;
  border-top: 2px dashed var(--status-planned-text);
}

._tooltip_1vy3g_119 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  box-shadow: var(--shadow-popover);
}

._tooltipWhen_1vy3g_132 { font-weight: 600; }

/* ---- table ---- */
._table_1vy3g_135 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

._table_1vy3g_135 th {
  padding: 6px 0;
  border-bottom: 1px solid var(--separator);
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._table_1vy3g_135 td {
  padding: 7px 0;
  border-bottom: 1px solid var(--separator);
  color: var(--g700);
}

._table_1vy3g_135 tr:last-child td { border-bottom: none; }

/* Compound with `.table` so the alignment beats `.table th`'s left. */
._table_1vy3g_135 ._num_1vy3g_161 {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Before the figure, not after: a tag trailing the number would push it off
   the column the other rows' figures sit on. */
._tag_1vy3g_169 {
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  background: var(--color-warn-bg);
  color: var(--color-warn);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

._tagEdited_1vy3g_182 {
  background: var(--status-planned-bg);
  color: var(--status-planned-text);
}
._list_19swn_1 {
  /* Fills the panel body (Panel `fill`) and scrolls past it — the ScrollArea
     root; its viewport is the scroller. The HEIGHT cap is not here — it lives
     on the pair's grid items (`.rowEqual > *`, LogisticsPage.module.css),
     because a max-height clamp mixing px with an intrinsically-unresolvable
     percentage silently drops. This list only needs to take whatever height
     the capped card gives it. */
  flex: 1 1 auto;
}._items_19swn_11 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}._row_19swn_4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);

  /* Right gutter: the badge and tank close the row, and with the kebab column
     gone they would sit flush against the list's scroll edge. */
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--separator);

  /* The row's one affordance: open the detail drawer (the kebab is gone,
     same as the delivery cards). Inline action buttons carry their own
     cursor already. */
  cursor: pointer;
}._row_19swn_4:focus-visible,
._row_19swn_4:has(> ._rowOpen_19swn_38:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}/* In-flight delete: fade the row's content under a centered status label. */._row_19swn_4[data-deleting] {
  pointer-events: none;
}._row_19swn_4[data-deleting] > :not(._deletingOverlay_19swn_49) {
  opacity: 0.3;
}._deletingOverlay_19swn_49 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._row_19swn_4:last-child {
  border-bottom: none;
}/* The row div itself is not clickable; interactive controls (kebab menu,
   inline Renew/update-link action buttons) live inside it. */._main_19swn_70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}._provName_19swn_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}._deleteItem_19swn_86 {
  color: var(--color-error);
}/* Both text lines are single-line-with-ellipsis (same treatment as the delivery
   panel's `.material` / `.meta`). The material name is free text up to 120 chars
   and can arrive as one unbroken token, which does not wrap and ran straight out
   of the card. Clamping (rather than wrapping) also keeps rows a uniform height —
   the full name is on the update dialog. Relies on `.main { min-width: 0 }`:
   without it the flex item refuses to shrink below its content and the ellipsis
   never engages. */._name_19swn_97,
._meta_19swn_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._name_19swn_97 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_19swn_91 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._provenance_19swn_115 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* "Delivery takes ~Nd" on the provenance line, text-only — a step up from the
   line's own muted grey (not the `.hint` line's amber/red, which is reserved
   for urgency), just enough emphasis to read as a small data figure. The
   tooltip it opens carries the CONCLUSION (the tick-consistent "Order by
   <date>" deadline plus provenance), so nothing here duplicates it. Dotted
   underline (not the `.hint` line's solid-on-hover one) marks it as a hover
   target, not a click target.

   Plain inline, not inline-flex: the Tooltip trigger renders THIS span
   itself (Base UI merges its props onto it, no wrapper), so whatever box
   type it declares is what sits in the provenance line's text flow. An
   inline-flex box computes its own baseline from its flex line rather than
   the text inside it, which floated this segment off the "Started … ·
   admin · …" siblings' shared baseline — inline text needs no flex
   properties at all, so the box-baseline mismatch cannot recur. */._deliveryTakes_19swn_135 {
  color: var(--g600);
  font-weight: 600;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}/* Badge on top, duration cap beneath — the tank is its own sibling column
   between `.side` and `.endCol`, so this stack carries both figures the tank
   itself has no room for. */._side_19swn_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;

  /* Centered with the tank beside it — the badge/cap stack and the tank read
     as one gauge, so they share the row's vertical middle (the kebab alone
     stays pinned to the top corner). */
  align-self: center;
}._badge_19swn_160 {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Transparent, so the urgent tone's visible border costs no height. Without
     it an urgent badge was 20px against everyone else's 18px, and the bar
     beneath it dropped 2px out of line with the duration on exactly those
     rows — the ones already shouting for attention. */
  border: 1px solid transparent;
}._badge_19swn_160[data-tone='ok'] {
  color: var(--color-success);
  background: var(--color-success-bg);
}._badge_19swn_160[data-tone='warn'] {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}._badge_19swn_160[data-tone='urgent'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}._badge_19swn_160[data-tone='check'] {
  color: var(--g600);
  background: var(--g50);
  border: 1px dashed var(--g400);
}/* The time-remaining tank now lives in the `ReorderTickTank` component; this
   only supplies the row layout the panel needs (vertically centred beside the
   badge). */._tankInRow_19swn_198 {
  align-self: center;
}/* Truck hint line — additive to the band, one tone per row (amber/reorder or red/gap). */._hint_19swn_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Rendered as a <button> whenever the line has somewhere to go, so the button
     chrome has to be reset here — the two forms must be pixel-identical, and a
     line that shifts when it becomes clickable is a bug nobody looks for. */
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}/* The affordance follows the ELEMENT, not the tone: a line is a <button> only
   when it has somewhere to go, and every tone can now be one — an incoming line
   jumps to its delivery just as the gap line does. Keyed on the tone, the green
   line was clickable and said nothing about it. Underline on hover only, the
   same rule the row's other actions follow. */button._hint_19swn_121 {
  cursor: pointer;
  text-decoration: none;
}button._hint_19swn_121:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}._hint_19swn_121[data-tone='reorder'] { color: var(--color-warn); }._hint_19swn_121[data-tone='gap'] { color: var(--color-error); }._hint_19swn_121[data-tone='incoming'] { color: var(--color-success); }/* Actionable text on a row: bold italic, underlined ONLY on hover — the
   underline is the affordance, not decoration. */._action_19swn_244 {
  font: inherit;
  font-weight: 700;
  font-style: italic;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: none;
}._action_19swn_244:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }._action_19swn_244:disabled {
  opacity: 0.5;
  cursor: default;
}._renewAsk_19swn_263 {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
}/* A landed-but-late arrival keeps the overdue tone the in-flight note wore —
   the fact it turned up does not make its lateness good news. */._renewAskLate_19swn_274 {
  color: var(--color-warn);
}._addBtn_19swn_278 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--status-planned-text);
  background: var(--status-planned-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}._addBtn_19swn_278:disabled {
  opacity: 0.5;
  cursor: default;
}/* An in-flight delivery past its own ETA. Amber, not green: something is still
   coming, but its date has gone by and nobody has seen it — that is a prompt to
   chase, not reassurance that the material is covered. */._hint_19swn_121[data-tone='late'] { color: var(--color-warn); }/* The arrival named on a ran-out row. It answers the question the line is
   asking, so it carries weight against the muted provenance text around it. */._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}/* When an arrival phrase names a known delivery it becomes a jump link. Same
   button-reset discipline as .hint so the note stays pixel-identical to its
   plain-span form — a phrase that shifts the moment it gains a target is a bug
   nobody looks for. Underline on hover only; the chevron slides like .hint's.
   `.renewAskJump` is the covered row's "New delivery arrived…" phrase; it takes
   the same reset but keeps the LINE's own colour and weight (amber when the
   arrival was late), which a fixed navy would strip. */button._arrivalNote_19swn_302,
button._renewAskJump_19swn_311 {
  display: inline-flex;
  align-items: center;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}button._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}button._renewAskJump_19swn_311 {
  color: inherit;
}button._arrivalNote_19swn_302:hover,
button._renewAskJump_19swn_311:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:hover ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}._durationCap_19swn_350 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}._durationCap_19swn_350[data-tone='ok'] { color: var(--color-success); }._durationCap_19swn_350[data-tone='warn'] { color: var(--color-warn); }._durationCap_19swn_350[data-tone='urgent'] { color: var(--color-error); }/* The trailing "goes somewhere" mark. Decoration, not a control: it inherits
   the line's tone via currentColor so it reads as part of the sentence. */._jumpMark_19swn_342 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  opacity: 0.65;
  transition: opacity 120ms ease, transform 120ms ease;
}button._hint_19swn_121:hover ._jumpMark_19swn_342,
button._hint_19swn_121:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}@media (prefers-reduced-motion: reduce) {
  ._jumpMark_19swn_342 {
    transition: opacity 120ms ease;
  }

  button._hint_19swn_121:hover ._jumpMark_19swn_342,
  button._hint_19swn_121:focus-visible ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342 {
    transform: none;
  }
}/* ---- Untracked material: a delivery exists, no stock record does ----
   A faint diagonal hatch rather than a solid tint or a coloured rail: the row
   holds no figures, and the hatch says "nothing here yet" without competing
   with the tones that DO carry meaning on this panel (green/amber/red are
   states of a real estimate; this row has no estimate to be in a state). */._row_19swn_4[data-untracked] {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 14px
  );
}/* `.side` centers itself so the badge/cap stack reads as one gauge WITH the
   tank beside it. A row with NO tank has nothing to centre against, so its
   badge belongs at the top-right corner like the row's title, not floating in
   the vertical middle. Two such rows: the untracked placeholder ("Not tracked")
   and a ran-out tracked row ("Ran out") — both render no gauge, so the rule is
   generic across them rather than special-cased to one. */._row_19swn_4[data-untracked] ._side_19swn_145,
._row_19swn_4[data-needscheck] ._side_19swn_145 {
  align-self: flex-start;
}/* Dashed like the needsCheck badge — both say "there is no figure here", which
   is a different claim from any number. */._badge_19swn_160[data-tone='untracked'] {
  color: var(--info);
  background: var(--info-tint);
  border: 1px dashed var(--info);
}._hint_19swn_121[data-tone='untracked'] {
  color: var(--info);
}/* The untracked row's note and its action on one line, the way a tracked row
   keeps `Sync` beside the sentence it answers. */._untrackedLine_19swn_432 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}/* The untracked row's Add-stock action. Unchanged from when it sat in the side
   column — only its position moved, next to the note it answers. */._sideAction_19swn_441 {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}._sideAction_19swn_441:hover:not(:disabled) {
  color: var(--navy);
}._sideAction_19swn_441:disabled {
  opacity: 0.5;
  cursor: default;
}/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}/* Classes below this line are copied from DeliveryPipeline.module.css — the
   card body is the list row's content, transplanted onto a kanban card, so
   the trail/arrival chips keep pixel-identical styling. *//* In-flight delete: fade the card's content under a centered status label
   (same treatment as the pipeline row). */._deletingOverlay_1wksx_7 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* Statuses dropdown + "+ New delivery", side by side in the panel header. */._headerActions_1wksx_19 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}/* Same treatment as the inventory panel's header action — the one rule,
   composed, so the two panels' buttons (and their disabled state) cannot
   drift apart. */._addBtn_1wksx_28 {
}._deleteItem_1wksx_32 {
  color: var(--color-error);
}/* Every text line on the card is single-line-with-ellipsis. Clamping (rather
   than wrapping) keeps cards a uniform width — the full note is on the edit
   dialog. Relies on `.cardMain { min-width: 0 }`: without it the flex item
   refuses to shrink below its content and the ellipsis never engages. */._material_1wksx_40,
._meta_1wksx_41 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._material_1wksx_40 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_1wksx_41 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}/* The in-flight negotiation trail: a filled chip per date the supplier
   actually gave, a dashed ghost chip for whichever is still awaited — see
   `renderTrail` in BoardCard.tsx. Retired once a card arrives, where
   `.dateList` below takes over. */._dates_1wksx_64 {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* arrows sit mid-chip, not on the text baseline */
  gap: 6px;
  margin-top: 4px;
}._dateChip_1wksx_72 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xl);
  background: var(--g50);
  border: 1px solid var(--separator);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
}._dateChip_1wksx_72 b {
  font-weight: 700;
}._dateLabel_1wksx_89 {
  font-size: var(--fs-2xs);
  color: var(--g500);

  /* .dateChip has no flex-basis, so under width pressure the browser can
     shrink it below its max-content size and wrap this label's words
     ("Replied by" -> "Replied" / "by"). Keep it one line like the fixed
     .dateRowLabel column does for the settled-card summary. */
  white-space: nowrap;
}._chipArrow_1wksx_100 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* Dashed placeholder standing in for the date the trail is still waiting on —
   Requested before a request went out, Answered before the supplier replies.
   Composes with `.dateChip` for the shared padding/layout; only the border
   and fill differ from a filled chip. */._chipGhost_1wksx_109 {
  border-style: dashed;
  border-color: var(--g300);
  background: none;
}/* The amber "pending" word — inside a ghost chip, and reused verbatim for the
   footer's due-placeholder "pending" span, so "waiting on a date" reads the
   same wherever it shows up on the card. */._ghostHint_1wksx_118 {
  color: var(--color-warn);
  font-weight: 650;
}/* The arrived date summary: Requested / Answered / Arrived, one row each,
   always all three, once a card has landed — see `renderArrival` in
   BoardCard.tsx. The in-flight trail above stays a chip row; this is a
   plain list, since a settled card has more to say (three dates, not one
   open question) than a chip row comfortably holds. */._dateList_1wksx_63 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}._dateRow_1wksx_96 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
}/* Fixed width, not a hard column count: labels are short in every locale
   this product ships (Requested/Replied by/ETA/Arrived; 希望/返答/到着予定/到着),
   so one em-relative width lines every value up without the English label
   dictating a raw pixel figure. nowrap guards the widest label ("Replied
   by") from breaking onto two lines at odd zoom levels. */._dateRowLabel_1wksx_96 {
  flex: 0 0 5.75em;
  font-size: var(--fs-2xs);
  color: var(--g500);
  white-space: nowrap;
}._dateRowValue_1wksx_154 {
  font-weight: 700;
  color: var(--navy);
}/* The one settled FACT on the card, not an ask or a reply — the row a
   Delivered-column card is actually scanned for. */._dateArrived_1wksx_161 {
  color: var(--color-success);
}/* How the arrival landed against the agreed date. Sits beside the Arrived
   row's value and carries the tone alone — same grammar as the trail's
   ghost hint above. */._variance_1wksx_168 {
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-2xs);
}._varOnTime_1wksx_174 {
  color: var(--color-success);
}/* Early is not a win on a just-in-time site — nobody booked the crane or the
   yard for it. Informational grey, not green. */._varEarly_1wksx_180 {
  color: var(--g500);
}._varLate_1wksx_184 {
  color: var(--color-error);
}/* Agreed deadline, in the card footer. */._due_1wksx_189 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._dueLate_1wksx_196 {
  color: var(--color-error);
}/* Stands where the deadline would be, so an undated card reads as "waiting on
   a date" rather than as one nobody has filled in. Muted, like any other
   label — the amber "pending" span beside it (`.ghostHint`) is what carries
   the awaited tone now, not the whole line. */._duePending_1wksx_204 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g500);
}/* The footer's "pending" sits beside the label, not inside a date chip, so it
   must pin its own size to the label's — otherwise it inherits the card's
   base size and floats off the shared baseline. */._duePendingHint_1wksx_214 {
  font-size: var(--fs-xs);
  line-height: inherit;
}/* Name + amount on one line. The name clamps and the amount does not: a long
   material name must lose characters before the figure disappears. */._materialLine_1wksx_221 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;

  /* Clears the card's star, which sits over this line's right end. */
  padding-right: var(--s-5);
}._cardStar_1wksx_231 {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
}._materialLine_1wksx_221 ._material_1wksx_40 {
  flex: 0 1 auto;
  min-width: 0;
}._qty_1wksx_242 {
  flex: none;
  margin-left: auto;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}/* Jump target: a card named elsewhere on the board, flashed after the scroll
   lands. An absolutely-positioned overlay rather than a background on `.card`
   itself, so it cannot fight the delete treatment or the card's own border,
   and so it can be remounted per jump to replay the animation.

   The animation itself is the shared Components/ui/JumpFlash, composed
   below — the same one the pipeline row, the progress tracker's column jump
   and the Help Center's search landing use: one visual language for "here is
   the thing you asked for". */._jumpFlash_1wksx_261 {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: var(--z-raised-1);
}/* Board frame — values from the approved mockup. */._board_1wksx_272 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-1) 0;
}/* Columns share the row evenly: equal grow from a zero basis, so three columns
   and eight columns each divide the width the same way. `min-width` (not
   shrink) is the floor — past it the row overflows into the board's ScrollArea rather
   than squeezing cards into unreadable slivers. 280px is the width a column
   settled at under the old `max-width` cap with the three seeded statuses, so
   the cap became the floor: the layout the board shipped with is now the
   narrowest a column ever gets, not the widest. */._column_1wksx_286 {
  flex: 1 0 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  height: 440px;

  /* The cap holds in every mode: search mode lets a column SHRINK to its
     matches (below), but never grow past the working height — past it the
     column's own stack scrolls. */
  max-height: 440px;
  background: var(--g50);
  border-radius: var(--r-xl);
  padding: 6px 10px 10px;
}/* Search mode: the fixed working height gives way to content, up to the cap —
   the row is as tall as the column with the most matches, and the rest
   stretch to line up with it. `stretch` (not flex-start) is what keeps the
   emptied columns from collapsing to ragged stubs beside the one that
   matched. */._board_1wksx_272[data-searching] {
  align-items: stretch;
}._board_1wksx_272[data-searching] ._column_1wksx_286 {
  height: auto;
}._columnGrip_1wksx_315 {
  display: flex;
  justify-content: center;
  color: var(--g300);
  padding: 2px 0 4px;
  cursor: grab;
  touch-action: none;
  flex: none;
}._columnGrip_1wksx_315:hover {
  color: var(--g500);
}/* The edit lock: no sensors, so no drag to promise. */._board_1wksx_272[data-locked] ._columnGrip_1wksx_315 {
  cursor: default;
}._columnHead_1wksx_334 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px 4px 10px;
  flex: none;
}._columnName_1wksx_342 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* The column-header count pill and the drawer's `.ddCount` are one style —
   declared together so they can't drift. */._count_1wksx_350,
._ddCount_1wksx_348 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  background: var(--g100);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}/* A column's cards: the ScrollArea root takes the column's remaining height,
   its viewport (`.stack`) is the scroller — jump-to-card scrolls it by class. */._stackFrame_1wksx_363 {
  flex: 1 1 auto;
}._stack_1wksx_362 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}._card_1wksx_38 {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  flex: none;
}._card_1wksx_38[data-deleting] {
  opacity: 0.3;
}/* The DragOverlay ghost — see BoardCardPreview. Fixed width: a column-hosted
   card takes its width from the column's own flex sizing, but
   this one is portalled to document.body with no such parent, so it needs
   its own. `--shadow-popover` reads as "lifted" against the board the way
   `--shadow-card` never could — the point is that this card is no longer
   resting in a column. `cursor: grabbing`, not the row's own pointer
   affordance: the real card underneath already shows the drag is live. */._cardPreview_1wksx_393 {
  width: 240px;
  box-shadow: var(--shadow-popover);
  cursor: grabbing;
}._cardHoverPreview_1wksx_399 {
  width: 260px;
  box-shadow: var(--shadow-popover);
}._cardMain_1wksx_38 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}._cardFoot_1wksx_417 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}._overdueBadge_1wksx_424 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-pill);
  padding: 0 7px;
}._columnEmpty_1wksx_434 {
  border: 1px dashed var(--g200);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  font-size: var(--fs-2xs);
  color: var(--g400);
  text-align: center;
  flex: none;
}._showAll_1wksx_444 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}/* Statuses dropdown (board header) — values from the approved mockup. The
   kebab trigger opens a real base-ui Menu ("Manage statuses"); selecting that
   item opens the management panel below, which stays a custom popover (not a
   base-ui Menu) because it hosts inline rename/add <input>s that need to keep
   focus while open, which a base-ui Menu.Popup (built to close on interaction
   and manage its own roving focus) actively fights. */._statusesRoot_1wksx_461 {
  position: relative;
}._dropdownPanel_1wksx_465 {
  /* On <body>, pinned under the trigger by StatusesMenu (top/right inline):
     the board card clips its overflow, so the panel lives outside it. */
  position: fixed;
  z-index: var(--z-popover);
  width: 250px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-dropdown);
}._ddTitle_1wksx_478 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px 8px 4px;
}._ddRow_1wksx_487 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px;
  border-radius: var(--r-sm);
}._ddRow_1wksx_487:hover {
  background: var(--g50);
}._ddName_1wksx_499 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}._ddCount_1wksx_348 {
  flex: none; /* pill styling shared with .count above */
}/* A status row's kebab: the shared KebabButton, tightened to the row. */._ddKebab_1wksx_515 {
  padding: 2px;
}._ddAdd_1wksx_519 {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--info);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}._ddAdd_1wksx_519:hover {
  background: var(--g50);
}._ddAdd_1wksx_519:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._ddInput_1wksx_542 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--info);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  background: var(--color-surface);
}._ddInput_1wksx_542:disabled {
  opacity: 0.6;
}._menuWhy_1wksx_559 {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g500);
}/* A multi-material card's line rows (design 2026-09-14 §4.2): the first two
   materials in full under the ref/destination row, each with its amount right
   — then a count for the rest, so a three-material card is no taller than
   today's plus one row. */._lineRow_1wksx_570 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}._lineName_1wksx_577 {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* What a row is about, at a glance: the package before each material line,
   the building before the supplier. Muted so it guides the eye without
   outweighing the text; centred, since an icon has no baseline. */._fieldIcon_1wksx_591 {
  flex: none;
  display: inline-flex;
  align-self: center;
  color: var(--g400);
}._moreLines_1wksx_598 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._controls_k7swj_1 {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

._search_k7swj_7 {
  width: 320px;
}

/* The view switch the Delivered column used to carry: a link-toned button,
   its icon inline with the label. */
._viewSwitch_k7swj_13 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--info);
  cursor: pointer;
  white-space: nowrap;
}

._viewSwitch_k7swj_13:hover { text-decoration: underline; }

/* A full-width panel has no neighbour to take its height from, so the list
   caps itself — the same height as the Inventory / Waste pair — and scrolls. */
._list_k7swj_32 {
  max-height: 340px;
}

/* What a row unfolds to: its materials, or a material's deliveries. */
._detail_k7swj_37 {
  list-style: none;
  margin: 0 0 var(--s-2);
  padding: 0 0 0 var(--s-3);
}

._detail_k7swj_37 li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 3px 0;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g600);
}

._detail_k7swj_37 b {
  font-weight: 600;
  color: var(--g700);
  white-space: nowrap;
}

/* The arrival verdict's tones — the board's, composed rather than borrowed
   from its stylesheet (the detail drawer does the same). */
._varOnTime_k7swj_61 { }
._varEarly_k7swj_62 { }
._varLate_k7swj_63 { }
/* The delivery drawer's materials table — one row per line: the material
   with what booked it and its task chip underneath, the amount right, and the
   "Raised from task" blocks on a rail under an expanded row. The drawer's own
   field list keeps its label-left/value-right shape; this is a table because
   a line has more than one fact. */

._table_4hrld_7 {
  display: flex;
  flex-direction: column;
  padding: var(--s-3) 0 0;
}

/* The header is a two-column grid — the name, the amount flush right; a row
   lays out the same way (name, then its stock action, then the amount), and
   a row that can open leads with a caret (see .toggle). */
._headRow_4hrld_16 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: 0 0 var(--s-1);
  border-bottom: 1px solid var(--separator);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._amountCol_4hrld_30 { text-align: right; }

._lineBlock_4hrld_32 {
  display: flex;
  flex-direction: column;
}

._row_4hrld_37 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

/* A row with tasks behind it: the caret and the name are the toggle; the
   stock action beside them is a button of its own, so it cannot nest. */
._toggle_4hrld_15 {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* The rhythm, measured in the browser from the two rules: header rule →
   first name is the first row's own --s-3 (the header's padding sits ABOVE
   its rule and does not count); last name → the rule below is the tab body's
   --s-3 gap, so the last row carries no padding underneath. 12px each. */
._headRow_4hrld_16 + ._lineBlock_4hrld_32 > ._row_4hrld_37 { padding-top: var(--s-3); }
._lineBlock_4hrld_32:last-child > ._row_4hrld_37 { padding-bottom: 0; }

._caret_4hrld_68 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--g500);
  transition: transform 0.15s ease;
}

._caret_4hrld_68[data-collapsed='true'] { transform: rotate(-90deg); }

._name_4hrld_78 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  overflow-wrap: anywhere;
}

/* What booked this material and the task chip — a footnote to the name, not
   a second label. */
._sub_4hrld_92 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._amount_4hrld_30 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  text-align: right;
}

/* The opened row's cards, on a thin rail at the edge, tied to the row above
   by the tint the task chip wears. A column with a gap, so two tasks' cards
   read as two cards rather than one box with a seam. */
._rail_4hrld_113 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  padding: var(--s-2) 0 0 12px;
  border-left: 2px solid var(--info-tint);
}
/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}

._day_zmclx_1 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 6px 6px 4px;
  border-right: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
  cursor: pointer;
  transition: background 0.15s ease;
}

._day_zmclx_1:hover {
  background: var(--g50);
}

._day_zmclx_1[data-outside='true']:not(:hover) {
  background: var(--ops-surface);
}

._day_zmclx_1[data-selected='true'],
._day_zmclx_1[data-selected='true']:not(:hover) {
  background: var(--ops-select-tint);
  box-shadow: inset 0 0 0 1.5px var(--ops-select-edge);
}

/* Jumped to from the side column. */
._flash_zmclx_28 {
}

._number_zmclx_32 {
  align-self: flex-start;
  min-width: 22px;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--g600);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

._day_zmclx_1[data-outside='true'] ._number_zmclx_32 {
  color: var(--g300);
}

._day_zmclx_1[data-today='true'] ._number_zmclx_32 {
  background: var(--navy);
  color: var(--color-surface);
}

._chip_zmclx_54 {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 2px 5px 2px 6px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--order-tone);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--order-tone) 11%, var(--color-surface));
  color: var(--navy);
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

._chip_zmclx_54[data-mode='week'] {
  align-items: flex-start;
  padding: 5px 7px;
  white-space: normal;
}

._star_zmclx_80 {
  display: inline-flex;
  flex: none;
  color: var(--amber);
}

._text_zmclx_86 {
  overflow: hidden;
  text-overflow: ellipsis;
}

._text_zmclx_86 b {
  font-weight: 600;
}

._more_zmclx_95 {
  align-self: flex-start;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--info);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

._more_zmclx_95:hover {
  background: var(--g100);
  text-decoration: underline;
}
._legend_z7ip8_1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--g600);
  font-size: var(--fs-xs);
}

/* A filter: picked entries stay full strength, the others fade back while any is picked. */
._entry_z7ip8_11 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -3px -6px;
  padding: 3px 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}

._entry_z7ip8_11:hover {
  background: var(--g50);
}

._entry_z7ip8_11[aria-pressed='true'] {
  background: var(--g100);
  color: var(--navy);
  font-weight: 600;
}

._legend_z7ip8_1[data-filtered='true'] ._entry_z7ip8_11[aria-pressed='false'] {
  opacity: 0.45;
}

._entry_z7ip8_11::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--r-sm);
  background: var(--order-tone);
}

/* Delivered has no color of its own: its sub-statuses carry them. */
._entry_z7ip8_11[data-plain]::before {
  display: none;
}

/* Delivered and its sub-statuses, outlined as one. */
._group_z7ip8_57 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 3px;
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
}

._group_z7ip8_57 ._entry_z7ip8_11 {
  margin: 0;
  padding: 2px 7px;
}

._subStatuses_z7ip8_71 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

._subStatuses_z7ip8_71::before {
  content: '';
  width: 1px;
  height: 14px;
  margin: 0 3px;
  background: var(--g200);
}

._caret_z7ip8_85 {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--g500);
  cursor: pointer;
}

._caret_z7ip8_85:hover {
  background: var(--g50);
  color: var(--navy);
}

/* Deliberate exception to the app's caret (down open, right folded): this one
   sits at the group's end, so it points out (right) folded and back in (left)
   open, toward where the group folds. */
._caretIcon_z7ip8_106 {
  display: inline-flex;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

._caretIcon_z7ip8_106[data-open='true'] {
  transform: rotate(90deg);
}

._separator_z7ip8_116 {
  width: 1px;
  height: 16px;
  background: var(--g200);
}

@media (prefers-reduced-motion: reduce) {
  ._entry_z7ip8_11,
  ._caretIcon_z7ip8_106 {
    transition: none;
  }
}
._head_1a1i8_1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 24px 12px 28px;
}

._title_1a1i8_9 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
}

._subtitle_1a1i8_15 {
  margin: 2px 0 0;
  color: var(--g500);
  font-size: var(--fs-xs);
}

._nav_1a1i8_21 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}

._arrow_1a1i8_28 {
  width: 32px;
  padding: 0;
}

._period_1a1i8_33 {
  min-width: 128px;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: center;
}

._end_1a1i8_40 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
._card_hks3i_1 {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--ops-card-border);
  border-left: 3px solid var(--order-tone);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  color: var(--navy);
  font-size: var(--fs-xs);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

._card_hks3i_1:hover {
  box-shadow: var(--shadow-calendar-card-hover);
}

._title_hks3i_21,
._facts_hks3i_22 {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

._title_hks3i_21 {
  font-size: var(--fs-sm);
  font-weight: 600;
}

._cargo_hks3i_33 {
  display: block;
  margin-top: 2px;
  color: var(--g700);
}

._facts_hks3i_22 {
  margin-top: 2px;
  color: var(--g500);
  font-size: var(--fs-2xs);
}

._late_hks3i_45 {
  color: var(--red);
  font-weight: 500;
  white-space: nowrap;
}
._rail_1qfjb_1 {
  min-height: 0;
}

._content_1qfjb_5 section + section {
  margin-top: 14px;
}

._title_1qfjb_9 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--g600);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._title_1qfjb_9 em {
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--g100);
  font-size: var(--fs-2xs);
  font-style: normal;
  font-weight: 500;
}

._titleLate_1qfjb_30 {
  color: var(--red);
}

._empty_1qfjb_34 {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--g200);
  border-radius: var(--r-xl);
  color: var(--g400);
  font-size: var(--fs-xs);
  text-align: center;
}
._body_1k0oc_1 {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  min-height: 0;
  padding: 0 24px 20px 28px;
}

._gridFrame_1k0oc_10 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-3xl);
  background: var(--color-surface);
}

._weekdays_1k0oc_20 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--separator);
  color: var(--g500);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

._weekdays_1k0oc_20 span {
  padding: 8px 10px;
}

._gridScroll_1k0oc_35 {
  flex: 1;
  min-height: 0;
}

._gridViewport_1k0oc_40 {
  height: 100%;
}

._grid_1k0oc_10 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, 1fr);
  min-height: 100%;
}

@media (width <= 1000px) {
  ._body_1k0oc_1 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
  }
}
/* The shared edge handle's look (ui/EdgeHandle); here its place, shape and motion. */
._handle_t7g5w_2 {
  position: fixed;
  z-index: var(--z-delivery-calendar);
  top: 50%;
  right: 0;
  width: 26px;
  height: 68px;
  margin-top: -34px;
  padding: 0 0 0 7px;
  border-right: 0;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  transition:
    width 0.38s var(--ease-spring),
    height 0.38s var(--ease-spring),
    margin-top 0.38s var(--ease-spring),
    padding 0.3s ease,
    color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.5s var(--ease-out-expo);
}

._handle_t7g5w_2:hover:not([data-open='true']) {
  width: 50px;
  height: 96px;
  margin-top: -48px;
  padding-left: 16px;
}

/* Open, the handle rides the panel's edge, poking out over the sidebar. */
._handle_t7g5w_2[data-open='true'] {
  width: 22px;
  padding-left: 4px;
  transform: translateX(calc(var(--sidebar-w) - 100vw));
}

._panel_t7g5w_37 {
  position: fixed;
  z-index: var(--z-delivery-calendar);
  inset: var(--topbar-h) 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--ops-card-border);
  background: var(--ops-surface);
  box-shadow: var(--shadow-drawer-right);
  color: var(--navy);
  transform: translateX(102%);
  visibility: hidden;
  transition:
    transform 0.5s var(--ease-out-expo),
    visibility 0s 0.5s,
    left 0.2s ease;
}

._panel_t7g5w_37[data-open='true'] {
  transform: none;
  visibility: visible;
  transition:
    transform 0.5s var(--ease-out-expo),
    left 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  ._handle_t7g5w_2,
  ._panel_t7g5w_37,
  ._panel_t7g5w_37[data-open='true'] {
    transition: none;
  }
}
._list_19swn_1 {
  /* Fills the panel body (Panel `fill`) and scrolls past it — the ScrollArea
     root; its viewport is the scroller. The HEIGHT cap is not here — it lives
     on the pair's grid items (`.rowEqual > *`, LogisticsPage.module.css),
     because a max-height clamp mixing px with an intrinsically-unresolvable
     percentage silently drops. This list only needs to take whatever height
     the capped card gives it. */
  flex: 1 1 auto;
}._items_19swn_11 {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}._row_19swn_4 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);

  /* Right gutter: the badge and tank close the row, and with the kebab column
     gone they would sit flush against the list's scroll edge. */
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--separator);

  /* The row's one affordance: open the detail drawer (the kebab is gone,
     same as the delivery cards). Inline action buttons carry their own
     cursor already. */
  cursor: pointer;
}._row_19swn_4:focus-visible,
._row_19swn_4:has(> ._rowOpen_19swn_38:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}/* In-flight delete: fade the row's content under a centered status label. */._row_19swn_4[data-deleting] {
  pointer-events: none;
}._row_19swn_4[data-deleting] > :not(._deletingOverlay_19swn_49) {
  opacity: 0.3;
}._deletingOverlay_19swn_49 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._row_19swn_4:last-child {
  border-bottom: none;
}/* The row div itself is not clickable; interactive controls (kebab menu,
   inline Renew/update-link action buttons) live inside it. */._main_19swn_70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-family: var(--f-body);
}._provName_19swn_79 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}._deleteItem_19swn_86 {
  color: var(--color-error);
}/* Both text lines are single-line-with-ellipsis (same treatment as the delivery
   panel's `.material` / `.meta`). The material name is free text up to 120 chars
   and can arrive as one unbroken token, which does not wrap and ran straight out
   of the card. Clamping (rather than wrapping) also keeps rows a uniform height —
   the full name is on the update dialog. Relies on `.main { min-width: 0 }`:
   without it the flex item refuses to shrink below its content and the ellipsis
   never engages. */._name_19swn_97,
._meta_19swn_91 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._name_19swn_97 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_19swn_91 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._provenance_19swn_115 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* "Delivery takes ~Nd" on the provenance line, text-only — a step up from the
   line's own muted grey (not the `.hint` line's amber/red, which is reserved
   for urgency), just enough emphasis to read as a small data figure. The
   tooltip it opens carries the CONCLUSION (the tick-consistent "Order by
   <date>" deadline plus provenance), so nothing here duplicates it. Dotted
   underline (not the `.hint` line's solid-on-hover one) marks it as a hover
   target, not a click target.

   Plain inline, not inline-flex: the Tooltip trigger renders THIS span
   itself (Base UI merges its props onto it, no wrapper), so whatever box
   type it declares is what sits in the provenance line's text flow. An
   inline-flex box computes its own baseline from its flex line rather than
   the text inside it, which floated this segment off the "Started … ·
   admin · …" siblings' shared baseline — inline text needs no flex
   properties at all, so the box-baseline mismatch cannot recur. */._deliveryTakes_19swn_135 {
  color: var(--g600);
  font-weight: 600;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}/* Badge on top, duration cap beneath — the tank is its own sibling column
   between `.side` and `.endCol`, so this stack carries both figures the tank
   itself has no room for. */._side_19swn_145 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;

  /* Centered with the tank beside it — the badge/cap stack and the tank read
     as one gauge, so they share the row's vertical middle (the kebab alone
     stays pinned to the top corner). */
  align-self: center;
}._badge_19swn_160 {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Transparent, so the urgent tone's visible border costs no height. Without
     it an urgent badge was 20px against everyone else's 18px, and the bar
     beneath it dropped 2px out of line with the duration on exactly those
     rows — the ones already shouting for attention. */
  border: 1px solid transparent;
}._badge_19swn_160[data-tone='ok'] {
  color: var(--color-success);
  background: var(--color-success-bg);
}._badge_19swn_160[data-tone='warn'] {
  color: var(--color-warn);
  background: var(--color-warn-bg);
}._badge_19swn_160[data-tone='urgent'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}._badge_19swn_160[data-tone='check'] {
  color: var(--g600);
  background: var(--g50);
  border: 1px dashed var(--g400);
}/* The time-remaining tank now lives in the `ReorderTickTank` component; this
   only supplies the row layout the panel needs (vertically centred beside the
   badge). */._tankInRow_19swn_198 {
  align-self: center;
}/* Truck hint line — additive to the band, one tone per row (amber/reorder or red/gap). */._hint_19swn_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;

  /* Rendered as a <button> whenever the line has somewhere to go, so the button
     chrome has to be reset here — the two forms must be pixel-identical, and a
     line that shifts when it becomes clickable is a bug nobody looks for. */
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}/* The affordance follows the ELEMENT, not the tone: a line is a <button> only
   when it has somewhere to go, and every tone can now be one — an incoming line
   jumps to its delivery just as the gap line does. Keyed on the tone, the green
   line was clickable and said nothing about it. Underline on hover only, the
   same rule the row's other actions follow. */button._hint_19swn_121 {
  cursor: pointer;
  text-decoration: none;
}button._hint_19swn_121:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}._hint_19swn_121[data-tone='reorder'] { color: var(--color-warn); }._hint_19swn_121[data-tone='gap'] { color: var(--color-error); }._hint_19swn_121[data-tone='incoming'] { color: var(--color-success); }/* Actionable text on a row: bold italic, underlined ONLY on hover — the
   underline is the affordance, not decoration. */._action_19swn_244 {
  font: inherit;
  font-weight: 700;
  font-style: italic;
  color: var(--info);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: none;
}._action_19swn_244:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }._action_19swn_244:disabled {
  opacity: 0.5;
  cursor: default;
}._renewAsk_19swn_263 {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--navy);
}/* A landed-but-late arrival keeps the overdue tone the in-flight note wore —
   the fact it turned up does not make its lateness good news. */._renewAskLate_19swn_274 {
  color: var(--color-warn);
}._addBtn_19swn_278 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--status-planned-text);
  background: var(--status-planned-bg);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}._addBtn_19swn_278:disabled {
  opacity: 0.5;
  cursor: default;
}/* An in-flight delivery past its own ETA. Amber, not green: something is still
   coming, but its date has gone by and nobody has seen it — that is a prompt to
   chase, not reassurance that the material is covered. */._hint_19swn_121[data-tone='late'] { color: var(--color-warn); }/* The arrival named on a ran-out row. It answers the question the line is
   asking, so it carries weight against the muted provenance text around it. */._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}/* When an arrival phrase names a known delivery it becomes a jump link. Same
   button-reset discipline as .hint so the note stays pixel-identical to its
   plain-span form — a phrase that shifts the moment it gains a target is a bug
   nobody looks for. Underline on hover only; the chevron slides like .hint's.
   `.renewAskJump` is the covered row's "New delivery arrived…" phrase; it takes
   the same reset but keeps the LINE's own colour and weight (amber when the
   arrival was late), which a fixed navy would strip. */button._arrivalNote_19swn_302,
button._renewAskJump_19swn_311 {
  display: inline-flex;
  align-items: center;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}button._arrivalNote_19swn_302 {
  font-weight: 700;
  color: var(--navy);
}button._renewAskJump_19swn_311 {
  color: inherit;
}button._arrivalNote_19swn_302:hover,
button._renewAskJump_19swn_311:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:hover ._jumpMark_19swn_342,
button._renewAskJump_19swn_311:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}._durationCap_19swn_350 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}._durationCap_19swn_350[data-tone='ok'] { color: var(--color-success); }._durationCap_19swn_350[data-tone='warn'] { color: var(--color-warn); }._durationCap_19swn_350[data-tone='urgent'] { color: var(--color-error); }/* The trailing "goes somewhere" mark. Decoration, not a control: it inherits
   the line's tone via currentColor so it reads as part of the sentence. */._jumpMark_19swn_342 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  opacity: 0.65;
  transition: opacity 120ms ease, transform 120ms ease;
}button._hint_19swn_121:hover ._jumpMark_19swn_342,
button._hint_19swn_121:focus-visible ._jumpMark_19swn_342 {
  opacity: 1;
  transform: translateX(2px);
}@media (prefers-reduced-motion: reduce) {
  ._jumpMark_19swn_342 {
    transition: opacity 120ms ease;
  }

  button._hint_19swn_121:hover ._jumpMark_19swn_342,
  button._hint_19swn_121:focus-visible ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:hover ._jumpMark_19swn_342,
  button._arrivalNote_19swn_302:focus-visible ._jumpMark_19swn_342 {
    transform: none;
  }
}/* ---- Untracked material: a delivery exists, no stock record does ----
   A faint diagonal hatch rather than a solid tint or a coloured rail: the row
   holds no figures, and the hatch says "nothing here yet" without competing
   with the tones that DO carry meaning on this panel (green/amber/red are
   states of a real estimate; this row has no estimate to be in a state). */._row_19swn_4[data-untracked] {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 7px,
    color-mix(in srgb, var(--info) 4%, transparent) 14px
  );
}/* `.side` centers itself so the badge/cap stack reads as one gauge WITH the
   tank beside it. A row with NO tank has nothing to centre against, so its
   badge belongs at the top-right corner like the row's title, not floating in
   the vertical middle. Two such rows: the untracked placeholder ("Not tracked")
   and a ran-out tracked row ("Ran out") — both render no gauge, so the rule is
   generic across them rather than special-cased to one. */._row_19swn_4[data-untracked] ._side_19swn_145,
._row_19swn_4[data-needscheck] ._side_19swn_145 {
  align-self: flex-start;
}/* Dashed like the needsCheck badge — both say "there is no figure here", which
   is a different claim from any number. */._badge_19swn_160[data-tone='untracked'] {
  color: var(--info);
  background: var(--info-tint);
  border: 1px dashed var(--info);
}._hint_19swn_121[data-tone='untracked'] {
  color: var(--info);
}/* The untracked row's note and its action on one line, the way a tracked row
   keeps `Sync` beside the sentence it answers. */._untrackedLine_19swn_432 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}/* The untracked row's Add-stock action. Unchanged from when it sat in the side
   column — only its position moved, next to the note it answers. */._sideAction_19swn_441 {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}._sideAction_19swn_441:hover:not(:disabled) {
  color: var(--navy);
}._sideAction_19swn_441:disabled {
  opacity: 0.5;
  cursor: default;
}/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}/* Classes below this line are copied from DeliveryPipeline.module.css — the
   card body is the list row's content, transplanted onto a kanban card, so
   the trail/arrival chips keep pixel-identical styling. *//* In-flight delete: fade the card's content under a centered status label
   (same treatment as the pipeline row). */._deletingOverlay_1wksx_7 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* Statuses dropdown + "+ New delivery", side by side in the panel header. */._headerActions_1wksx_19 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}/* Same treatment as the inventory panel's header action — the one rule,
   composed, so the two panels' buttons (and their disabled state) cannot
   drift apart. */._addBtn_1wksx_28 {
}._deleteItem_1wksx_32 {
  color: var(--color-error);
}/* Every text line on the card is single-line-with-ellipsis. Clamping (rather
   than wrapping) keeps cards a uniform width — the full note is on the edit
   dialog. Relies on `.cardMain { min-width: 0 }`: without it the flex item
   refuses to shrink below its content and the ellipsis never engages. */._material_1wksx_40,
._meta_1wksx_41 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._material_1wksx_40 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}._meta_1wksx_41 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}/* The in-flight negotiation trail: a filled chip per date the supplier
   actually gave, a dashed ghost chip for whichever is still awaited — see
   `renderTrail` in BoardCard.tsx. Retired once a card arrives, where
   `.dateList` below takes over. */._dates_1wksx_64 {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* arrows sit mid-chip, not on the text baseline */
  gap: 6px;
  margin-top: 4px;
}._dateChip_1wksx_72 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-xl);
  background: var(--g50);
  border: 1px solid var(--separator);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
}._dateChip_1wksx_72 b {
  font-weight: 700;
}._dateLabel_1wksx_89 {
  font-size: var(--fs-2xs);
  color: var(--g500);

  /* .dateChip has no flex-basis, so under width pressure the browser can
     shrink it below its max-content size and wrap this label's words
     ("Replied by" -> "Replied" / "by"). Keep it one line like the fixed
     .dateRowLabel column does for the settled-card summary. */
  white-space: nowrap;
}._chipArrow_1wksx_100 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}/* Dashed placeholder standing in for the date the trail is still waiting on —
   Requested before a request went out, Answered before the supplier replies.
   Composes with `.dateChip` for the shared padding/layout; only the border
   and fill differ from a filled chip. */._chipGhost_1wksx_109 {
  border-style: dashed;
  border-color: var(--g300);
  background: none;
}/* The amber "pending" word — inside a ghost chip, and reused verbatim for the
   footer's due-placeholder "pending" span, so "waiting on a date" reads the
   same wherever it shows up on the card. */._ghostHint_1wksx_118 {
  color: var(--color-warn);
  font-weight: 650;
}/* The arrived date summary: Requested / Answered / Arrived, one row each,
   always all three, once a card has landed — see `renderArrival` in
   BoardCard.tsx. The in-flight trail above stays a chip row; this is a
   plain list, since a settled card has more to say (three dates, not one
   open question) than a chip row comfortably holds. */._dateList_1wksx_63 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}._dateRow_1wksx_96 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
}/* Fixed width, not a hard column count: labels are short in every locale
   this product ships (Requested/Replied by/ETA/Arrived; 希望/返答/到着予定/到着),
   so one em-relative width lines every value up without the English label
   dictating a raw pixel figure. nowrap guards the widest label ("Replied
   by") from breaking onto two lines at odd zoom levels. */._dateRowLabel_1wksx_96 {
  flex: 0 0 5.75em;
  font-size: var(--fs-2xs);
  color: var(--g500);
  white-space: nowrap;
}._dateRowValue_1wksx_154 {
  font-weight: 700;
  color: var(--navy);
}/* The one settled FACT on the card, not an ask or a reply — the row a
   Delivered-column card is actually scanned for. */._dateArrived_1wksx_161 {
  color: var(--color-success);
}/* How the arrival landed against the agreed date. Sits beside the Arrived
   row's value and carries the tone alone — same grammar as the trail's
   ghost hint above. */._variance_1wksx_168 {
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-2xs);
}._varOnTime_1wksx_174 {
  color: var(--color-success);
}/* Early is not a win on a just-in-time site — nobody booked the crane or the
   yard for it. Informational grey, not green. */._varEarly_1wksx_180 {
  color: var(--g500);
}._varLate_1wksx_184 {
  color: var(--color-error);
}/* Agreed deadline, in the card footer. */._due_1wksx_189 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}._dueLate_1wksx_196 {
  color: var(--color-error);
}/* Stands where the deadline would be, so an undated card reads as "waiting on
   a date" rather than as one nobody has filled in. Muted, like any other
   label — the amber "pending" span beside it (`.ghostHint`) is what carries
   the awaited tone now, not the whole line. */._duePending_1wksx_204 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g500);
}/* The footer's "pending" sits beside the label, not inside a date chip, so it
   must pin its own size to the label's — otherwise it inherits the card's
   base size and floats off the shared baseline. */._duePendingHint_1wksx_214 {
  font-size: var(--fs-xs);
  line-height: inherit;
}/* Name + amount on one line. The name clamps and the amount does not: a long
   material name must lose characters before the figure disappears. */._materialLine_1wksx_221 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;

  /* Clears the card's star, which sits over this line's right end. */
  padding-right: var(--s-5);
}._cardStar_1wksx_231 {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
}._materialLine_1wksx_221 ._material_1wksx_40 {
  flex: 0 1 auto;
  min-width: 0;
}._qty_1wksx_242 {
  flex: none;
  margin-left: auto;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}/* Jump target: a card named elsewhere on the board, flashed after the scroll
   lands. An absolutely-positioned overlay rather than a background on `.card`
   itself, so it cannot fight the delete treatment or the card's own border,
   and so it can be remounted per jump to replay the animation.

   The animation itself is the shared Components/ui/JumpFlash, composed
   below — the same one the pipeline row, the progress tracker's column jump
   and the Help Center's search landing use: one visual language for "here is
   the thing you asked for". */._jumpFlash_1wksx_261 {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: var(--z-raised-1);
}/* Board frame — values from the approved mockup. */._board_1wksx_272 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-1) 0;
}/* Columns share the row evenly: equal grow from a zero basis, so three columns
   and eight columns each divide the width the same way. `min-width` (not
   shrink) is the floor — past it the row overflows into the board's ScrollArea rather
   than squeezing cards into unreadable slivers. 280px is the width a column
   settled at under the old `max-width` cap with the three seeded statuses, so
   the cap became the floor: the layout the board shipped with is now the
   narrowest a column ever gets, not the widest. */._column_1wksx_286 {
  flex: 1 0 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  height: 440px;

  /* The cap holds in every mode: search mode lets a column SHRINK to its
     matches (below), but never grow past the working height — past it the
     column's own stack scrolls. */
  max-height: 440px;
  background: var(--g50);
  border-radius: var(--r-xl);
  padding: 6px 10px 10px;
}/* Search mode: the fixed working height gives way to content, up to the cap —
   the row is as tall as the column with the most matches, and the rest
   stretch to line up with it. `stretch` (not flex-start) is what keeps the
   emptied columns from collapsing to ragged stubs beside the one that
   matched. */._board_1wksx_272[data-searching] {
  align-items: stretch;
}._board_1wksx_272[data-searching] ._column_1wksx_286 {
  height: auto;
}._columnGrip_1wksx_315 {
  display: flex;
  justify-content: center;
  color: var(--g300);
  padding: 2px 0 4px;
  cursor: grab;
  touch-action: none;
  flex: none;
}._columnGrip_1wksx_315:hover {
  color: var(--g500);
}/* The edit lock: no sensors, so no drag to promise. */._board_1wksx_272[data-locked] ._columnGrip_1wksx_315 {
  cursor: default;
}._columnHead_1wksx_334 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px 4px 10px;
  flex: none;
}._columnName_1wksx_342 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}/* The column-header count pill and the drawer's `.ddCount` are one style —
   declared together so they can't drift. */._count_1wksx_350,
._ddCount_1wksx_348 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  background: var(--g100);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}/* A column's cards: the ScrollArea root takes the column's remaining height,
   its viewport (`.stack`) is the scroller — jump-to-card scrolls it by class. */._stackFrame_1wksx_363 {
  flex: 1 1 auto;
}._stack_1wksx_362 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}._card_1wksx_38 {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  flex: none;
}._card_1wksx_38[data-deleting] {
  opacity: 0.3;
}/* The DragOverlay ghost — see BoardCardPreview. Fixed width: a column-hosted
   card takes its width from the column's own flex sizing, but
   this one is portalled to document.body with no such parent, so it needs
   its own. `--shadow-popover` reads as "lifted" against the board the way
   `--shadow-card` never could — the point is that this card is no longer
   resting in a column. `cursor: grabbing`, not the row's own pointer
   affordance: the real card underneath already shows the drag is live. */._cardPreview_1wksx_393 {
  width: 240px;
  box-shadow: var(--shadow-popover);
  cursor: grabbing;
}._cardHoverPreview_1wksx_399 {
  width: 260px;
  box-shadow: var(--shadow-popover);
}._cardMain_1wksx_38 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}._cardFoot_1wksx_417 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}._overdueBadge_1wksx_424 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-pill);
  padding: 0 7px;
}._columnEmpty_1wksx_434 {
  border: 1px dashed var(--g200);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  font-size: var(--fs-2xs);
  color: var(--g400);
  text-align: center;
  flex: none;
}._showAll_1wksx_444 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}/* Statuses dropdown (board header) — values from the approved mockup. The
   kebab trigger opens a real base-ui Menu ("Manage statuses"); selecting that
   item opens the management panel below, which stays a custom popover (not a
   base-ui Menu) because it hosts inline rename/add <input>s that need to keep
   focus while open, which a base-ui Menu.Popup (built to close on interaction
   and manage its own roving focus) actively fights. */._statusesRoot_1wksx_461 {
  position: relative;
}._dropdownPanel_1wksx_465 {
  /* On <body>, pinned under the trigger by StatusesMenu (top/right inline):
     the board card clips its overflow, so the panel lives outside it. */
  position: fixed;
  z-index: var(--z-popover);
  width: 250px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-dropdown);
}._ddTitle_1wksx_478 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px 8px 4px;
}._ddRow_1wksx_487 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px;
  border-radius: var(--r-sm);
}._ddRow_1wksx_487:hover {
  background: var(--g50);
}._ddName_1wksx_499 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}._ddCount_1wksx_348 {
  flex: none; /* pill styling shared with .count above */
}/* A status row's kebab: the shared KebabButton, tightened to the row. */._ddKebab_1wksx_515 {
  padding: 2px;
}._ddAdd_1wksx_519 {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--info);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}._ddAdd_1wksx_519:hover {
  background: var(--g50);
}._ddAdd_1wksx_519:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}._ddInput_1wksx_542 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--info);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  background: var(--color-surface);
}._ddInput_1wksx_542:disabled {
  opacity: 0.6;
}._menuWhy_1wksx_559 {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g500);
}/* A multi-material card's line rows (design 2026-09-14 §4.2): the first two
   materials in full under the ref/destination row, each with its amount right
   — then a count for the rest, so a three-material card is no taller than
   today's plus one row. */._lineRow_1wksx_570 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}._lineName_1wksx_577 {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* What a row is about, at a glance: the package before each material line,
   the building before the supplier. Muted so it guides the eye without
   outweighing the text; centred, since an icon has no baseline. */._fieldIcon_1wksx_591 {
  flex: none;
  display: inline-flex;
  align-self: center;
  color: var(--g400);
}._moreLines_1wksx_598 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }/* Shared modal chrome for the LogisticsPage dialogs (StockEntryDialog and
   DeliveryOrderDialog). Both are centred modals with the same overlay, panel,
   field, combobox and footer skin; only their width and a few bespoke fields
   differ. Consumed via `composes:` so the class names stay identical in the TSX
   (styles.backdrop, styles.popup, …) while the rules live in one place.
   Same cross-module `composes` pattern as ui/DateField ← ui/DatePicker. */._backdrop_e94hp_5 {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--modal-backdrop);
}/* Width is intentionally absent — each dialog composes this and sets its own
   (the stock dialog is 400px, the delivery-order dialog 560px for three dates).
   Capped to the viewport: a twenty-material order outgrows any screen, and an
   uncapped centred panel pushed its title and its Create button off both
   edges with nothing to scroll. The title stays put; `.body` scrolls. */._popup_e94hp_5 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  max-height: calc(100dvh - 2 * var(--s-4));
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-body);
}/* Everything under the title — the hosted form. It is the part that scrolls
   once the popup hits its cap. The 2px inset keeps the fields' focus rings
   from being clipped by the scroll box. */._body_e94hp_19 {
  min-height: 0;
  margin: -2px;
}._bodyScroll_e94hp_44 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 2px;
}/* The form's footer (Cancel / Create) pinned to the bottom of the scrolling
   body, so the action stays reachable however long the form grows. Scoped to
   `.bodyScroll`, so the drawers that render the same forms keep their own footer. */._bodyScroll_e94hp_44 ._footer_e94hp_54 {
  position: sticky;
  bottom: -2px;
  background: var(--white);
  padding-bottom: 2px;
}._title_e94hp_61 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}._field_e94hp_68 { display: flex; flex-direction: column; gap: 5px; }._label_e94hp_70 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}/* Field skin and combo shell — the rules live in ui/PickCombo (the pick-only
   dropdown), composed here so the dialogs' FREE-TEXT combos (typed-filter
   material/unit fields) wear the same skin without a copied block. The
   dialogs' amber/locked/computed modifiers override this base's colour and
   background; because a composed base can land after the modifiers in the
   bundle, those modifiers use COMPOUND selectors (`.input.prefilled`, …) to
   win on specificity rather than order. */._input_e94hp_83 { }._combo_e94hp_87 { }._comboList_e94hp_89 { }._comboOpt_e94hp_91 { }/* Room for the caret affordance inside the combo input. */._comboInput_e94hp_94 { }._caretBtn_e94hp_96 { }/* What we suggested, kept visible after an override so the change reads as a
   comparison. Clamped: the dispatch note runs to 500 characters. */._seedNote_e94hp_100 {
  display: block;
  padding-left: var(--s-1);
  font-size: var(--fs-2xs);
  color: var(--color-warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* The one hint fragment that is an instruction rather than provenance —
   "correct it if it's off" under an estimated count. Red (error ink, not the
   amber of estimates) so it stands apart from the footnote it ends. */._fieldAsk_e94hp_113 {
  color: var(--color-error);
  font-weight: 600;
}._footer_e94hp_54 { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }._cancelBtn_e94hp_120,
._saveBtn_e94hp_121,
._dangerBtn_e94hp_122 {
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}._cancelBtn_e94hp_120 { background: var(--g100); color: var(--g600); }._saveBtn_e94hp_121 { background: var(--status-planned-text); color: var(--white); }._saveBtn_e94hp_121:disabled { opacity: 0.5; cursor: default; }/* The destructive act's fill — the scheduler Task drawer's Delete look,
   carried here so a composing class never has to FIGHT the grey cancel fill
   (equal-specificity `composes` battles are decided by stylesheet injection
   order, which varies by chunk). */._dangerBtn_e94hp_122 { background: var(--red); color: var(--color-surface); }._dangerBtn_e94hp_122:not([aria-disabled='true']):hover { opacity: 0.92; }/* Read-only delivery detail. The shared ui/Drawer owns the panel box (width,
   padding, scroll, slide-in); this file only lays out the content. */._head_d6f48_4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);

  /* Clear of the shell's absolutely-positioned corner close button. */
  padding-right: var(--s-6);
}._eyebrow_d6f48_14 {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}._eyebrowStar_d6f48_26 {
  margin-left: var(--s-1);
}._ref_d6f48_30 {
  color: var(--g400);
}._title_d6f48_34 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);

  /* An item name is free text up to 120 chars — wrap it rather than overflow. */
  overflow-wrap: anywhere;
}/* The delivery's board column, in the board's own words, in the column's tone
   (deliveryTone.ts) — the colour its calendar chip carries; red while it is
   late. Delivered is grey: its Synced / Not synced pill carries the colour.
   Data-attribute rather than the row's `tone_*` classes: this is a static
   badge, not a trigger. */._pill_d6f48_51 {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}._pill_d6f48_51[data-tone='danger'] {
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}._pill_d6f48_51[data-tone='neutral'] {
  color: var(--g500);
  background: var(--g100);
}._pill_d6f48_51[data-tone='status'] {
  color: var(--navy);
  background: color-mix(in srgb, var(--order-tone) 16%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--order-tone) 45%, transparent);
}/* A synced order's mark beside its column pill: the stock is reconciled, the
   order is history. The success pill's green. */._pillSynced_d6f48_80 {
  color: var(--color-success);
  background: var(--color-success-bg);
}/* The header's badge row: the column pill, and Synced beside it. */._pills_d6f48_86 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}/* The Delivered field's on-time / early / overdue verdict — the board card's
   own classes (one source: DeliveryBoard.module.css). Its only difference is
   the size: it inherits the field's text instead of the card's 2xs, and the
   higher-specificity selector wins that without an injection-order fight. */._variance_d6f48_96 { }._fields_d6f48_97 ._variance_d6f48_96 { font-size: inherit; }._varOnTime_d6f48_98 { }._varEarly_d6f48_99 { }._varLate_d6f48_100 { }._fields_d6f48_97 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}/* Label left, value right — a scannable record rather than a form. */._field_d6f48_97 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}._fieldLabel_d6f48_120 {
  flex: none;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}._fieldValue_d6f48_130 {
  margin: 0;
  text-align: right;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  overflow-wrap: anywhere;
}._noteBlock_d6f48_139 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);

  /* Bounded so a 500-char note scrolls inside the panel instead of pushing the
     rest of the record out of view. */
  min-height: 0;
}._noteScroll_d6f48_149 {
  max-height: 40vh;
}._note_d6f48_139 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--navy);
  white-space: pre-wrap;

  /* The reason the row overflowed: a long note can be one unbroken token, which
     `normal` wrapping refuses to break. */
  overflow-wrap: anywhere;
}/* ---------- Tabs ----------
   The shared ui/Tabs carries the look (underline indicator, hover); these
   carry the layout. The negative margin cancels the Drawer panel's own
   padding (--s-6 — ui/Drawer/Drawer.module.css) so the list's hairline runs
   the panel's full width, and the list pads the same amount back so the tab
   labels stay aligned with the content above. */._tabsRoot_d6f48_172 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 calc(-1 * var(--s-6));
}._tabsList_d6f48_180 {
  padding-left: var(--s-6);
  padding-right: var(--s-6);
}._tabPanel_d6f48_185 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}._tabBody_d6f48_192 {
  padding: var(--s-4) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}/* The Edit panel is keepMounted, and Base UI hides an inactive panel with the
   `hidden` ATTRIBUTE — whose UA-level `display: none` loses to any author
   `display`. Without this, `display: flex` above resurrects the hidden panel
   and Overview renders with the whole edit form stacked under it. */._tabPanel_d6f48_185[hidden] {
  display: none;
}/* ---------- Delete (Edit tab's secondary slot) ----------
   Sits in the form footer's slot the dialog uses for Cancel; the auto margin
   pushes it to the far side of Save — the destructive act keeps its own
   corner. Filled red, matching the scheduler Task drawer's Delete — the one
   delete-button look across the app's record drawers. The fill comes from
   the chrome's own `dangerBtn` (never composed OVER `cancelBtn`'s grey —
   equal-specificity composes battles are decided by injection order). */._deleteBtn_d6f48_214 {
  margin-right: auto;
}._deleteBtn_d6f48_214:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}/* A synced order's (or a stale page's) Delete: faded and inert; the tooltip, where there is one, says why. */._deleteBtn_d6f48_214[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}/* The Supplier value: semibold name, its contact line muted beneath. */._supplierName_d6f48_231 {
  display: block;
  font-weight: 600;
}._supplierContact_d6f48_236 {
  display: block;
  font-size: var(--fs-xs);
  color: var(--g500);
}._supplierContact_d6f48_236 a {
  color: inherit;
  text-decoration: underline;
}._copyPhone_d6f48_247 {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--g500);
  cursor: pointer;
  vertical-align: middle;
}._copyPhone_d6f48_247:hover {
  color: var(--navy);
}
/* A material's stock action — the Inventory row's own, in its own look. */
._stockAction_1f06f_2 { }

/* Its stock is reconciled: the drawer header's green Synced pill. */
._syncedTag_1f06f_5 { }
._page_zpg9h_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}




/* The Materials segment — one frame around the delivery board, the inventory
   list, and the waste list, because ONE search (in its head) covers exactly
   those three. The frame is what scopes the search visually: a bare pill
   floating between rows would read as page-wide. Ground sits between the page
   (--g50) and the cards (white) so the band groups without competing. */
._segment_zpg9h_15 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  background: color-mix(in srgb, var(--color-surface) 55%, var(--g50));
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
}

._segmentHead_zpg9h_25 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0 var(--s-1);
}

._segmentEyebrow_zpg9h_34 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g500);
}

._segmentSub_zpg9h_44 {
  margin: 1px 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* The pill stretches inside this cap (SearchInput is flex: 1), so the box
   yields room on narrow screens instead of crushing the segment title; when
   even its 200px floor no longer fits beside the title, the head wraps and the
   box takes the full row under it (never wider than the frame). */
._segmentSearch_zpg9h_55 {
  display: flex;
  flex: 1 1 200px;
  max-width: 380px;
  min-width: min(200px, 100%);
}

._row_zpg9h_62 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: start;
}

/* Equal-height columns (Niv ruling 2026-09-03): the pair is always ONE band.
   Each panel sizes to its content up to the shared cap below (~7 stock rows
   plus chrome); the taller one drives, the sibling stretches to match, and
   content past the cap scrolls INSIDE its own panel (both lists fill their
   capped card — see InventoryLevels/ExpandableList module.css). The cap sits
   on the GRID ITEMS, not the inner lists: a `max(520px, 100%)` clamp on a
   list cannot work — a percentage that cannot resolve during the intrinsic
   pass drops the whole max-height declaration (verified live in Chrome), so
   the row must be bounded from the outside. */
._rowEqual_zpg9h_78 {
  align-items: stretch;
}

._rowEqual_zpg9h_78 > * {
  max-height: 620px;
}

/* A row holding one full-width panel. `.page` is the flex column that supplies
   the vertical rhythm between rows, so this needs no gap of its own — only to
   stop being a two-column grid. */
._rowFull_zpg9h_89 {
  display: block;
}

/* The Site Map row: now a single full-width panel (the AI Restock Alert
   card it used to share `.row` with is gone), so the slot just uses
   `.rowFull` like the delivery board above it. The panel's expand is a fixed
   full-viewport overlay owned entirely by `<SiteMap>` itself (see
   SiteMap.module.css's `.card[data-expanded]`) — a `position: fixed` card
   ignores its ancestor's placement, so no grid-spanning class is needed here
   for that either way. The slot div + testid stay (LogisticsPage.test.tsx),
   and `mapExpanded`/`onToggleExpanded` still thread the `expanded` prop
   through from here. */

._stack_zpg9h_103 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._banner_zpg9h_109 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g700);
}

._banner_zpg9h_109 button {
  appearance: none;
  height: 32px;
  padding: 0 var(--s-3);
  background: var(--navy);
  color: var(--color-surface);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

@media (width <= 1000px) {
  ._row_zpg9h_62 {
    grid-template-columns: 1fr;
  }
}
/* ---------- Dashboard / Command Center loading skeleton ----------
   Mirrors the real grid one-for-one so loaded → loading doesn't
   reflow. Reuses the same shimmer animation pattern as
   MonitorSkeleton (single shared keyframe + per-card --wave stagger). */._skeleton_15xka_6 {
  flex: 1 1 auto;
}/* Uncapped, like the live RGL canvas. The grid is an inline-size container so
   card heights can mirror DashboardGrid's square-cell math exactly:
   cell = (width − 11 × 14px gutters) / 12 cols, and a card spanning h rows is
   h cells + (h − 1) gutters tall. Tall cards are h=5, short cards h=3 (see
   layout.defaults DEFAULT_LAYOUT), so the loaded → loading swap stays
   reflow-free at any viewport width / zoom. */._grid_15xka_16 {
  width: 100%;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: start;

  --cell: calc((100cqw - 11 * 14px) / 12);
  --card-row-h: calc(5 * var(--cell) + 4 * 14px);
  --card-row-h-summary: calc(3 * var(--cell) + 2 * 14px);
}/* ---------- Shared shimmer atom -----------------------------------
   Same gradient + keyframe as MonitorSkeleton so the two pages pulse
   identically. */._shimmer_15xka_32 {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g200) 45%,
    var(--g100) 90%
  );
  background-size: 220% 100%;
  border-radius: var(--r-lg);
  animation: _dorca-dash-skel-shimmer_15xka_1 1.6s ease-in-out infinite;
  animation-delay: var(--wave, 0s);
  flex-shrink: 0;
}@keyframes _dorca-dash-skel-shimmer_15xka_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}/* ---------- Card shell -------------------------------------------- */._card_15xka_54 {
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}._spanFull_15xka_65  { grid-column: span 12; }._spanHalf_15xka_66  { grid-column: span 6;  }._spanThird_15xka_67 { grid-column: span 4;  }@media (width <= 1100px) {
  ._spanHalf_15xka_66,
  ._spanThird_15xka_67 { grid-column: span 12; }
}._heightTall_15xka_74  { height: var(--card-row-h, 540px); }._heightShort_15xka_75 { height: var(--card-row-h-summary, 340px); }/* Per-card wave stagger so the page pulses top-down. */._card_15xka_54:nth-child(1) { --wave: 0s;    }._card_15xka_54:nth-child(2) { --wave: 0.06s; }._card_15xka_54:nth-child(3) { --wave: 0.12s; }._card_15xka_54:nth-child(4) { --wave: 0.18s; }._card_15xka_54:nth-child(5) { --wave: 0.24s; }._card_15xka_54:nth-child(6) { --wave: 0.30s; }._card_15xka_54:nth-child(7) { --wave: 0.36s; }._card_15xka_54:nth-child(8) { --wave: 0.42s; }._card_15xka_54:nth-child(9) { --wave: 0.48s; }._card_15xka_54:nth-child(10) { --wave: 0.54s; }._card_15xka_54:nth-child(11) { --wave: 0.60s; }._cardHeader_15xka_90 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--g100);
}._headerTitle_15xka_99 {
  width: 120px;
  height: 12px;
}._headerExtra_15xka_104 {
  width: 60px;
  height: 12px;
}._cardBody_15xka_109 {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}/* Building tower styles moved to `@components/BuildingSkeleton/`
   (shared between MonitorSkeleton and DashboardSkeleton). *//* ---------- Workforce Status ------------------------------------- */._workforce_15xka_123 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}._statRow_15xka_131 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}._statTile_15xka_137 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}._statIcon_15xka_144 {
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
}._statValue_15xka_150 {
  width: 48px;
  height: 24px;
}._statLabel_15xka_155 {
  width: 56px;
  height: 10px;
}._tradeList_15xka_160 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}._tradeRow_15xka_169 {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  align-items: center;
  gap: 12px;
}._tradeName_15xka_176 {
  height: 10px;
}._tradeBar_15xka_180 {
  height: 8px;
  border-radius: var(--r-pill);
}._tradeRatio_15xka_185 {
  height: 10px;
}/* ---------- Project Progress ------------------------------------- */._progress_15xka_190 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}._progressHeadline_15xka_198 {
  display: flex;
  align-items: center;
  gap: 14px;
}._ringSmall_15xka_204 {
  width: 64px;
  height: 64px;
  border-radius: var(--r-circle);
  background: var(--g100);
}._progressMeta_15xka_211 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}._progressMetaTitle_15xka_217 {
  width: 160px;
  height: 14px;
}._progressMetaSub_15xka_222 {
  width: 120px;
  height: 10px;
}._phases_15xka_227 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  /* Grow to fill the card and spread the rows top-to-bottom so the shimmer
     occupies the whole body instead of clustering at the top. */
  flex: 1;
  justify-content: space-between;
  gap: 10px;
}._phaseRow_15xka_241 {
  display: grid;

  /* Match the live card's .phase grid: icon, name (flex), fixed track, pct. */
  grid-template-columns: 20px 1fr 120px 44px;
  align-items: center;
  gap: 10px;
}._phaseIcon_15xka_250 {
  width: 14px;
  height: 14px;
  border-radius: var(--r-circle);
}._phaseName_15xka_256 {
  height: 10px;
}._phaseBar_15xka_260 {
  height: 6px;
  border-radius: var(--r-pill);
}._phasePct_15xka_265 {
  height: 10px;
}/* ---------- Master Schedule -------------------------------------- */._schedule_15xka_270 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}._scheduleMonths_15xka_276 {
  display: grid;
  grid-template-columns: 180px 50px repeat(12, 1fr);
  gap: 8px;
  padding-bottom: 6px;
}._scheduleMonths_15xka_276 ._monthCell_15xka_283:nth-child(1),
._scheduleMonths_15xka_276 ._monthCell_15xka_283:nth-child(2) {
  visibility: hidden;
}._monthCell_15xka_283 {
  width: 24px;
  height: 8px;
}._scheduleRow_15xka_293 {
  display: grid;
  grid-template-columns: 180px 50px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}._scheduleLabel_15xka_301 {
  height: 14px;
  width: 70%;
}._schedulePct_15xka_306 {
  height: 12px;
  width: 32px;
}._scheduleTrack_15xka_311 {
  position: relative;
  height: 20px;
}._scheduleBar_15xka_316 {
  position: absolute;
  top: 4px;
  height: 12px;
  border-radius: var(--r-pill);
}/* ---------- Activities Feed -------------------------------------- */._feed_15xka_324 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  overflow: hidden;
}._feedItem_15xka_335 {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
}._feedIcon_15xka_341 {
  width: 36px;
  height: 36px;
  border-radius: var(--r-lg);
}._feedBody_15xka_347 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}._feedTopRow_15xka_353 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}._feedTitle_15xka_360 {
  height: 12px;
}._feedPill_15xka_364 {
  width: 58px;
  height: 14px;
  border-radius: var(--r-pill);
}._feedMeta_15xka_370 {
  height: 10px;
}/* ---------- Safety & Compliance ---------------------------------- */._safety_15xka_375 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}._safetyHeadline_15xka_382 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}._safetyValue_15xka_390 {
  width: 80px;
  height: 30px;
}._safetyLabel_15xka_395 {
  width: 120px;
  height: 10px;
}._safetyTiles_15xka_400 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}._safetyTile_15xka_400 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--g50);
  border-radius: var(--r-xl);
  padding: 12px;
}._safetyTileLabel_15xka_416 {
  width: 60px;
  height: 9px;
}._safetyTileValue_15xka_421 {
  width: 32px;
  height: 22px;
}._safetyFooter_15xka_426 {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--g100);
}._safetyFooterRow_15xka_436 {
  display: flex;
  align-items: center;
  gap: 8px;
}._safetyFooterIcon_15xka_442 {
  width: 14px;
  height: 14px;
  border-radius: var(--r-sm);
}._safetyFooterText_15xka_448 {
  height: 10px;
}/* ---------- Delivery --------------------------------------------- */._delivery_15xka_453 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}._deliveryRows_15xka_460 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}._deliveryRow_15xka_460 {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}._deliveryIcon_15xka_476 {
  width: 40px;
  height: 40px;
  border-radius: var(--r-xl);
}._deliveryText_15xka_482 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}._deliveryName_15xka_488 {
  height: 12px;
  width: 60%;
}._deliveryMeta_15xka_493 {
  height: 10px;
  width: 85%;
}._deliveryPill_15xka_498 {
  width: 62px;
  height: 18px;
  border-radius: var(--r-pill);
}._inventory_15xka_504 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}._inventoryRow_15xka_510 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}._inventoryName_15xka_516 {
  height: 11px;
  width: 45%;
}._inventoryBar_15xka_521 {
  height: 6px;
  border-radius: var(--r-pill);
}/* Matches the shared <Button size="md"> (40px tall, --r-md) so the loaded ↔
   loading swap doesn't reflow. */._deliveryButton_15xka_528 {
  height: 40px;
  border-radius: var(--r-md);
  margin-top: 2px;
}/* ---------- Weather Impact --------------------------------------- */._weather_15xka_535 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}@media (width <= 900px) {
  ._weather_15xka_535 { grid-template-columns: 1fr; }
}/* Forecast ribbon row (mirrors ForecastRibbon: a row of selectable day cells). */._weatherWrap_15xka_546 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}._weatherRibbon_15xka_552 {
  display: flex;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--g100);
}._weatherRibbonCell_15xka_559 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
}._weatherRibbonDay_15xka_571 { width: 38px; height: 10px; }._weatherRibbonIcon_15xka_572 { width: 18px; height: 18px; border-radius: var(--r-pill); }._weatherRibbonTemp_15xka_573 { width: 46px; height: 9px; }._weatherRibbonCondition_15xka_574 { width: 40px; height: 9px; }._weatherAssessment_15xka_576 { min-width: 0; }._weatherSectionTitle_15xka_578 {
  width: 180px;
  height: 10px;
  margin-bottom: 10px;
  display: block;
}._weatherTiles_15xka_585 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}._weatherTile_15xka_585 {
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r-xl);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}._weatherTileHead_15xka_601 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}._weatherTileName_15xka_608 {
  height: 12px;
  width: 60%;
}._weatherTileRisk_15xka_613 {
  width: 44px;
  height: 14px;
  border-radius: var(--r-pill);
}._weatherTileDetail_15xka_619 {
  height: 10px;
  width: 92%;
}._weatherSide_15xka_624 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}._weatherSidePanel_15xka_630 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}._weatherSideTitle_15xka_636 {
  width: 130px;
  height: 10px;
}._weatherSideRow_15xka_641 {
  height: 30px;
  border-radius: var(--r-lg);
}/* ---------- AI Agent --------------------------------------------- */._ai_15xka_647 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}._aiInput_15xka_653 {
  height: 48px;
  border-radius: var(--r-2xl);
}._aiChips_15xka_658 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}._aiChip_15xka_658 {
  height: 28px;
  border-radius: var(--r-pill);
}
/* The Logistics loading skeleton. The shimmer is the dashboard skeleton's own
   (one gradient, one keyframe), composed rather than re-declared. */
._shimmer_h2i91_3 {
  display: block;
  border-radius: var(--r-md);
}


._line_h2i91_10 {
  width: 280px;
  height: 14px;
}

._kpis_h2i91_15 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

._tile_h2i91_21 {
  height: 96px;
  border-radius: var(--r-3xl);
}

._board_h2i91_26 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

._column_h2i91_32 {
  height: 260px;
  border-radius: var(--r-3xl);
}

._panel_h2i91_37 {
  height: 320px;
  border-radius: var(--r-3xl);
}

._map_h2i91_42 {
  height: 360px;
  border-radius: var(--r-3xl);
}

@media (width <= 1000px) {
  ._kpis_h2i91_15 {
    grid-template-columns: repeat(2, 1fr);
  }
}
._dock_y1b1u_1 {
  position: fixed;
  left: 50%;
  bottom: var(--toast-slot-bottom);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: calc(100% - 2 * var(--s-7));
  padding: 9px 9px 9px var(--s-3);
  background: var(--color-surface);
  color: var(--navy);
  border: 1px solid var(--g100);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-modal);
  animation: _dockIn_y1b1u_1 0.42s var(--ease-toast-in) both;
}

@keyframes _dockIn_y1b1u_1 {
  from {
    opacity: 0;
    transform: translate(-50%, 18px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._dock_y1b1u_1 {
    animation: none;
  }
}

._icon_y1b1u_38 {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-2xl);
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
}

._message_y1b1u_49 {
  min-width: 0;
}

._title_y1b1u_53 {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
}

._sub_y1b1u_59 {
  display: block;
  font-size: var(--fs-xs);
  color: var(--g500);
}

._action_y1b1u_65 {
  flex: none;
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-xs);
  cursor: pointer;
  border: 0;
  border-radius: var(--r-2xl);
  padding: var(--s-2) 14px;
  background: var(--navy);
  color: var(--white);
}
._state_1ah27_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--s-7));
  padding: var(--s-6);
  color: var(--g600);
}
/* Centered card chassis for the not-found / error / empty branches of the
   analytics report pages. Modeled on Trusstor's InvestigationReportEmptyPage
   but adapted to D-ORCA design tokens (no raw rgba, no hardcoded heights). */

._root_1mdos_5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: calc(100vh - var(--s-7));
  padding: var(--s-6);
  text-align: center;
}

/* Icon chip — sits at the top of the panel. Color of the glyph inside
   comes from currentColor so the SVG inherits via the .icon-* variant. */
._iconChip_1mdos_18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-1);
  border-radius: var(--r-md);
  background: var(--g50);
}

._iconChip_1mdos_18 svg {
  width: 60px;
  height: 60px;
}

._iconWarning_1mdos_32  { color: var(--g600); }
._iconInfo_1mdos_33     { color: var(--info); }
._iconAlert_1mdos_34    { color: var(--color-error); }

._title_1mdos_36 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy);
}

._description_1mdos_44 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
  max-width: 480px;
}

._action_1mdos_52 {
  margin-top: var(--s-2);
}

/* Compact variant — inline inside a section card (no icon chip, shorter box,
   smaller muted title). Mirrors the report page's previous per-section error
   treatment. */
._compact_1mdos_59 {
  min-height: 160px;
  padding: var(--s-4);
  gap: var(--s-3);
}

._compact_1mdos_59 ._title_1mdos_36 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g600);
}

._compact_1mdos_59 ._action_1mdos_52 {
  margin-top: 0;
}
._backLink_1fwc9_1 {
  color: var(--info);
  text-decoration: underline;
  font-size: var(--fs-sm);
}
._retryButton_10tn8_1 {
  appearance: none;
  background: var(--info);
  color: var(--color-surface);
  border: 0;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}

._retryButton_10tn8_1:hover {
  background: var(--navy);
}

._retryButton_10tn8_1:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}
/* Shared editable header strip for analytics report pages. The CSS is
   the existing DailyRoute/ObserveLocation header CSS, copied here as
   the single source of truth. */

._header_inv52_5 {
  /* Spans the content area edge-to-edge: the report page is a bleed PageLayout. */
  background: var(--color-surface);
}

._headerInner_inv52_10 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-7);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "back  date"
    "title title";
  gap: var(--s-2) var(--s-4);
  align-items: start;
}

._back_inv52_23       { grid-area: back; }
._dateGroup_inv52_24  { grid-area: date; }

._back_inv52_23 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-7);
  height: var(--s-7);
  border-radius: var(--r-md);
  color: var(--navy);
  text-decoration: none;
  font-size: var(--fs-lg);
  line-height: 1;
  margin-top: var(--s-1);
}

._back_inv52_23:hover {
  background: var(--g50);
}

._titleBlock_inv52_44 {
  grid-area: title;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

._titleRow_inv52_52 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._title_inv52_44 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  cursor: text;
  outline: none;
}

._renameBtn_inv52_69 {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--s-1);
  border-radius: var(--r-sm);
  color: var(--g600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

._renameBtn_inv52_69:hover {
  background: var(--g50);
  color: var(--navy);
}

._renameBtn_inv52_69:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._subtitle_inv52_92 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
  line-height: 1.4;
  cursor: text;
  outline: none;
}

._title_inv52_44:focus,
._subtitle_inv52_92:focus {
  outline: none;
}

._dateGroup_inv52_24 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--navy);
  font-size: var(--fs-sm);
  margin-top: var(--s-2);
}

._date_inv52_24 {
  white-space: nowrap;
}

._rightSlot_inv52_120 {
  /* Optional right-side cell — sits next to the date group (above the title
     row). Consumers pass a Menu / button / etc. as `rightSlot`. */
  display: inline-flex;
  align-items: center;
  margin-top: var(--s-2);
}
._card_1vctt_1 {
  padding: var(--s-3) var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

._name_1vctt_9 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--navy);
  line-height: 1.3;
}

._meta_1vctt_17 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._idChip_1vctt_27 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  padding: 2px var(--s-2);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  color: var(--g700);
}

._divider_1vctt_37 {
  opacity: 0.5;
}

._tail_1vctt_41 {
  color: var(--g600);
}

/* Tag-reassignment warning — soft-pink pill below the meta line.
   Mirrors Trusstor's `.differentTagNameWarningContainer`: pale rose
   background with dark text (informational, not alarming). */
._reassignWarning_1vctt_48 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: var(--color-warning-soft-bg);
  color: var(--navy);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._warningIcon_1vctt_61 {
  flex: none;
  width: 16px;
  height: 16px;
}
._rail_1ohgw_1 {
  display: flex;
  flex-direction: column;
}

/* The frame is the white card. It wraps both the heading ("12 Route")
   and the listbox so they read as a single unit. Border + rounded
   corners + `overflow: hidden` (so the selected-row tint clips at the
   rounded outer corners). Mirrors trusstor's `TimelineList` shell. */
._frame_1ohgw_10 {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  overflow: hidden;
}

._heading_1ohgw_19 {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

/* List is now just the row stack — chrome lives on `.frame`. */
._list_1ohgw_29 {
  display: flex;
  flex-direction: column;
  position: relative;

  --bullet-col: 48px;
  --bullet-size: 26px;
}

/* Each row is laid out as `bullet column | content column`. The button
   itself has no chrome — the visual card is the parent `.list`. */
._card_1ohgw_40 {
  display: grid;
  grid-template-columns: var(--bullet-col) 1fr;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  position: relative;
  z-index: var(--z-raised-1);
}

/* Internal divider lives on `.cardBody` (col 2) only — the bullet column
   stays uninterrupted so the connecting line threads cleanly through
   the bullets without being crossed by horizontal hairlines. */
._list_1ohgw_29 > ._card_1ohgw_40:not(:last-child) ._cardBody_1ohgw_56 {
  border-bottom: 1px solid var(--separator);
}

._card_1ohgw_40:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
}

/* ---------- Connecting line (per-row segment) -------------------------- */

/* `::before` on each row in the bullet column. Middle rows fill the row
   vertically; first/last rows start/end at their bullet's centre
   (approximated as 50% of the row height). The bullet's own background
   fill paints over the line at the bullet's position. */
._card_1ohgw_40::before {
  content: '';
  position: absolute;
  left: calc(var(--bullet-col) / 2 - 1px);
  width: 2px;
  top: 0;
  bottom: 0;
  background: var(--separator);
  z-index: var(--z-base);
  pointer-events: none;
}

._list_1ohgw_29 > ._card_1ohgw_40:first-child::before { top: 50%; }
._list_1ohgw_29 > ._card_1ohgw_40:last-child::before  { bottom: 50%; }

/* ---------- Bullet (left column, inside the card) ---------------------- */
._bullet_1ohgw_90 {
  position: relative;
  z-index: var(--z-raised-1);
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: var(--r-circle);
  background: var(--g100);
  color: var(--g700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  flex: none;
  place-self: center center;
  transition: background-color 120ms, color 120ms;
}

._card_1ohgw_40._selected_1ohgw_108 ._bullet_1ohgw_90 {
  background: var(--navy);
  color: var(--color-surface);
}

/* Optional `markedIndex` marker (e.g. the at-incident stop on the
   Incident Report). A hairline danger ring layered on top of the
   selected/unselected bullet styles so the marker stays visible even
   when the user navigates away from the row. */
._card_1ohgw_40._marked_1ohgw_117 ._bullet_1ohgw_90 {
  box-shadow: 0 0 0 2px var(--safety-alert-red);
}

/* ---------- Card body (content column) --------------------------------- */

/* Owns its padding so the selection tint covers from col 2's left edge
   (right next to the bullet column) out to the card's right border, and
   clips at the rounded corners thanks to `.list`'s `overflow: hidden`.
   The bullet column stays untinted regardless.

   Two stacked flex rows rather than one shared grid: the top row (floor +
   co-presence) and the bottom row (area + times + duration) size
   independently, so a wide floor name can't reserve dead space under the
   short area code and shove the duration past the frame edge. */
._cardBody_1ohgw_56 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  transition: background-color 120ms;
}

._card_1ohgw_40:hover ._cardBody_1ohgw_56 {
  background: var(--g50);
}

._card_1ohgw_40._selected_1ohgw_108 ._cardBody_1ohgw_56 {
  background: var(--info-tint);
}

/* ---------- Inner content (two flex rows) ------------------------------ */
._topRow_1ohgw_150,
._bottomRow_1ohgw_151 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

/* Floor takes the slack on the top row and pushes the co-presence chip to
   the far edge; it ellipsises rather than forcing the row wider. */
._floor_1ohgw_160 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._coPresence_1ohgw_171 {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g600);
}

._card_1ohgw_40._selected_1ohgw_108 ._coPresence_1ohgw_171 {
  color: var(--info);
}

/* Bottom row: area sits at the left edge; the time range and its duration
   are packed together, side by side, right after it. The time range holds
   its intrinsic width but is the one element allowed to shrink (with an
   ellipsis) when the rail is narrow, so the duration is never clipped. */
._area_1ohgw_189 {
  flex: none;
  color: var(--g500);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

._times_1ohgw_196 {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g500);
  font-size: var(--fs-sm);
}

._duration_1ohgw_207 {
  flex: none;
  color: var(--g600);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}
._row_gjsvn_1 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  list-style: none;
}

._left_gjsvn_9 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  flex: 1 1 auto;
  color: var(--g600);
}

._label_gjsvn_18 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._chip_gjsvn_28 {
  flex: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--s-3);
  border-radius: var(--r-pill);
  color: var(--color-surface);
  white-space: nowrap;

  /* Trade names arrive lowercase from upstream (tradeId) — present them in
     title case to match Trusstor's `formatTradeName` behaviour. */
  text-transform: capitalize;
}

/* Fallback chip styling — used when no upstream backgroundColor is passed
   (e.g. equipment type chips, where the value is descriptive text not a
   trade label). Restores the dark text + subtle neutral background. */
._chipNeutral_gjsvn_46 {
  background: var(--g50);
  border: 1px solid var(--separator);
  color: var(--g700);
  text-transform: none;
}

._warning_gjsvn_53 {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-error);
}
._list_1gb3g_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}



._skeleton_1gb3g_12 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._empty_1gb3g_22 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--g500);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._error_1gb3g_32 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  color: var(--color-error);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._errorMessage_1gb3g_42 {
  flex: 1 1 auto;
}

._retry_1gb3g_46 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  color: var(--navy);
  cursor: pointer;
}

._retry_1gb3g_46:hover {
  background: var(--g50);
}
._empty_1al4z_1 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--g500);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._list_1al4z_11 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._row_1al4z_20 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  background: var(--color-surface);
}

._name_1al4z_31 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  font-weight: 500;
}

._type_1al4z_38 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  padding: 2px var(--s-2);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  color: var(--g700);
}
/* Personnel row inside the StopDetail panel. Two-line layout on the left
   (name + entity pill on top, tagId + optional profession below) with the
   time range right-aligned on the row's top line. */

._row_1ermv_5 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  list-style: none;
}

._main_1ermv_13 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._topLine_1ermv_21 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

._name_1ermv_28 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Neutral gray pill — same visual weight as Trusstor's TagEntityCard. */
._entityPill_1ermv_39 {
  flex: none;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--g50);
  color: var(--g700);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: capitalize;
}

._subLine_1ermv_51 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
}

._tagId_1ermv_60 {
  font-family: var(--f-mono);
}

._divider_1ermv_64 {
  color: var(--g300);
}

._profession_1ermv_68 {
  text-transform: capitalize;
}

._time_1ermv_72 {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  color: var(--g600);
  white-space: nowrap;
  padding-top: 2px;
}

._timeLine_1ermv_85 {
  display: block;
}
._list_hc2bf_1 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._row_hc2bf_10 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
}

/* Left cluster: tag glyph + name. Splits the row into "identity" (left)
   and "metadata" (right, profession chip) so `justify-content: space-between`
   pushes them to opposite edges. */
._identity_hc2bf_24 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: var(--g600);
}

._name_hc2bf_32 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._professionChip_hc2bf_42 {
  flex: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  padding: 2px var(--s-2);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  color: var(--g700);
}

._empty_hc2bf_53 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--g500);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}
._detail_18v4f_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

/* Header structured as Trusstor's LocationHeader:
   row 1: small uppercase "LOCATION N" eyebrow (full-width label above)
   row 2: floor name on the left, duration top-right
   row 3: area code on the left, arrival-departure time on the right */
._header_18v4f_17 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._eyebrow_18v4f_23 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g500);
}

._floorRow_18v4f_32 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

._floor_18v4f_32 {
  flex: 1 1 auto;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--navy);
}

._duration_18v4f_46 {
  flex: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
}

._subRow_18v4f_53 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g500);
}

._time_18v4f_62 {
  flex: none;
  margin-left: auto;
  font-family: var(--f-mono);
  color: var(--g600);
}

._area_18v4f_69 {
  font-family: var(--f-mono);
  padding: 2px var(--s-2);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  color: var(--g700);
}

._section_18v4f_78 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--separator);
}

._sectionHeading_18v4f_86 {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g600);
}
/* Daily Route page layout. The editable header is now owned by the shared
   <ReportHeader> component (see Reports/shared/ReportHeader/), and the
   loading / error / not-found / empty states are owned by the shared
   <PageLoader>, <ReportErrorState>, <ReportNotFoundState>, and
   <ReportEmptyState>. This file only carries the page-specific layout:
   the centred content wrapper and the three-pane body. */

._page_y98dt_8 {
  padding: 0;
  min-height: 100%;
}

/* ---------- Content wrapper (narrower, centred) ----------------------- */
._content_y98dt_14 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------- Three-pane body ------------------------------------------ */

/* StopsRail (rail) stays compact; StopDetail (middle) takes the bulk of
   the horizontal space; FloorSvg (right) caps narrower so the floor plan
   doesn't dominate. */
._body_y98dt_28 {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1.6fr) minmax(280px, 360px);
  gap: var(--s-4);
  align-items: start;
}

/* StopDetail + FloorSvg pin to the top of their grid cells while the user
   scrolls down through a long StopsRail. */
._pinned_y98dt_37 {
  position: sticky;
  top: var(--s-3);
  max-height: calc(100vh - var(--s-7));
}

/* Wrap FloorSvg in a card-style pane with a fixed aspect ratio so the
   inline SVG has a real box to fill. */
._floorPane_y98dt_45 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

._floorPane_y98dt_45 > * {
  width: 100%;
  height: 100%;
}
/* Shared panel chrome for analytics report pages. Promoted from
   ContractorAnalysis — height removed (CA sets its own via className),
   `flush` mode added (suppresses chrome for nested-card composition,
   e.g. ObserveLocation's VisitsCard + HourlyHistogram inside one shell). */

._root_3urr2_6 {
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Suppresses the card chrome so the component can be nested inside a
   shared outer shell. Title + body still render. */
._flush_3urr2_18 {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
._identity_s4i4w_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._name_s4i4w_7 {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--navy);
}

._meta_s4i4w_14 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--g600);
  font-size: var(--fs-sm);
}

._idChip_s4i4w_22 {
  font-family: var(--f-mono);
  padding: 2px var(--s-2);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  color: var(--g700);
}

._divider_s4i4w_31 {
  color: var(--g400);
}

._tail_s4i4w_35 {
  color: var(--g700);
}

/* Chip grid: flex-wrap so any number of events stack into rows. The chip
   widths are content-driven so short violations don't get padded out and
   long ones don't truncate prematurely. */
._chipGrid_s4i4w_42 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

._chip_s4i4w_42 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--g100);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  max-width: 100%;
}

._chipClickable_s4i4w_62 {
  cursor: pointer;
  text-align: start;
  transition: background 120ms, border-color 120ms, transform 120ms;
}

._chipClickable_s4i4w_62:hover {
  background: var(--g200);
}

._chipClickable_s4i4w_62:focus-visible {
  outline: 2px solid var(--focus-ring, var(--safety-alert-red));
  outline-offset: 2px;
}

._chipClickable_s4i4w_62:active {
  transform: translateY(1px);
}

._chip_s4i4w_42._chipCritical_s4i4w_81 {
  border-color: var(--safety-alert-red);
}

._dot_s4i4w_85 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--safety-alert-orange);
  flex-shrink: 0;
}

._chipCritical_s4i4w_81 ._dot_s4i4w_85 {
  background: var(--safety-alert-red);
}

/* The chip-grid location badge — a small ringed circle that displays the
   stop number the safety event maps to. Sized by component-local custom
   properties so the dimensions read as intent (not raw pixels) and stay
   easy to tune without hunting for magic numbers. */
._floorBadge_s4i4w_101 {
  --badge-size: 22px;
  --badge-ring: 2.5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-size);
  height: var(--badge-size);
  border: var(--badge-ring) solid var(--safety-alert-red);
  border-radius: var(--r-circle);
  background: var(--g100);
  color: var(--navy);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}

._chipLabel_s4i4w_124 {
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._chipMeta_s4i4w_132 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g600);
  white-space: nowrap;
}
._list_1gtm4_1 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._empty_1gtm4_10 {
  padding: var(--s-3);
  color: var(--g600);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._dot_1gtm4_17 {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  background: var(--safety-alert-orange);
}

._dotCritical_1gtm4_25 {
  background: var(--safety-alert-red);
}
._detail_1v0sr_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

/* Header structured as trusstor's LocationHeader:
   row 1: small uppercase "LOCATION N" eyebrow (with optional incident badge)
   row 2: floor name on the left, duration top-right
   row 3: area code on the left, arrival-departure time on the right */
._header_1v0sr_17 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._eyebrow_1v0sr_23 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g500);
}

._incidentBadge_1v0sr_35 {
  display: inline-flex;
  color: var(--color-error);
}

._floorRow_1v0sr_40 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

._floor_1v0sr_40 {
  flex: 1 1 auto;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--navy);
}

._duration_1v0sr_54 {
  flex: none;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
}

._subRow_1v0sr_61 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g500);
}

._area_1v0sr_70 {
  font-family: var(--f-mono);
  padding: 2px var(--s-2);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-sm);
  color: var(--g700);
}

._time_1v0sr_79 {
  flex: none;
  margin-left: auto;
  font-family: var(--f-mono);
  color: var(--g600);
}

._section_1v0sr_86 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--separator);
}

._sectionHeading_1v0sr_94 {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g600);
}
/* Incident Report page layout. The editable header is owned by the shared
   <ReportHeader>; loading / error / not-found / empty states are owned by
   the shared chassis components. This file carries only the page-specific
   layout (page wrapper, centred content, three-pane body, floor pane) and
   the `±N mins` window badge that's passed into <ReportHeader rightSlot>. */

._page_1hfai_7 {
  padding: 0;
  min-height: 100%;
}

/* ---------- Content wrapper (narrower, centred) ----------------------- */
._content_1hfai_13 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------- Three-pane body ------------------------------------------ */
._body_1hfai_23 {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1.6fr) minmax(280px, 360px);
  gap: var(--s-4);
  align-items: start;
}

._pinned_1hfai_30 {
  position: sticky;
  top: var(--s-3);
  max-height: calc(100vh - var(--s-7));
}

._floorPane_1hfai_36 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

._floorPane_1hfai_36 > * {
  width: 100%;
  height: 100%;
}

/* ---------- Header rightSlot: ±N mins window badge ------------------- */

._windowBadge_1hfai_55 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  color: var(--g700);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
._root_1bd6w_1 {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-4) var(--s-6);
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

._floor_1bd6w_12 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

._icon_1bd6w_18 {
  width: 36px;
  height: 36px;
  background: var(--g50);
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  color: var(--g500);
}

._floorName_1bd6w_28 {
  font-size: var(--fs-lg);
  font-weight: 600;
}

._areas_1bd6w_33 {
  font-size: var(--fs-xs);
  color: var(--g400);
}

._stat_1bd6w_38 {
  text-align: center;
}

._statLabel_1bd6w_42 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._statValue_1bd6w_47 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-top: 2px;
}
._title_u3vrv_1 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-md);
  font-weight: 600;
}

._row_u3vrv_7 {
  display: flex;
  justify-content: space-between;
  padding: var(--s-2) 0;
  font-size: var(--fs-sm);
}

._label_u3vrv_14 {
  color: var(--g500);
}

._skeleton_u3vrv_18 {
  height: 14px;
  background: var(--g50);
  border-radius: var(--r-md);
  margin: 6px 0;
}
/* 160px: minimum chart height that keeps 24 hourly bars legible at default
   font scale — verified against Trusstor's PeriodsGraph reference. */
._sized_1t507_3 {
  height: 160px;
  width: 100%;
}

._title_1t507_8 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-md);
  font-weight: 600;
}

._chart_1t507_14 {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* Renders below the chart's right edge, aligned with where the recharts
   x-axis labels sit. The `right: 4px` matches the BarChart `margin.right`
   so this label visually continues the tick sequence past the last bar. */
._trailingTick_1t507_24 {
  position: absolute;
  bottom: 0;
  right: 4px;
  font-size: var(--fs-2xs);
  color: var(--g500);

  /* Recharts pads its axis labels by a few px below the chart body; nudge
     into the same baseline so this overlay reads as a peer of the rendered
     ticks rather than a stray label. */
  transform: translateY(-2px);
  pointer-events: none;
}

._skeleton_1t507_38 {
  height: calc(100% - 28px);
  background: var(--g50);
  border-radius: var(--r-md);
}
/* Layout mirrors trusstor's PeriodsGraph.scss exactly (verified against
   the running trusstor instance — row height 84px, 26 cubes per row, left
   column 240px with borders on both sides, period bar 10px tall centered
   vertically). */

._root_16oi6_6 {
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

/* ── Header row ──────────────────────────────────────────────────────── */

._headerRow_16oi6_14 {
  display: flex;
  align-items: stretch;
  font-size: var(--fs-xs);
  color: var(--g500);
  border-bottom: 1px solid var(--g100);
  height: 48px;
}

/* Left header — 240px wide, holds the "Personnel" mainTitle on the left
   and the "Total Time" column label on the right (space-between). Borders
   on both sides act as table column dividers. */
._leftHeader_16oi6_26 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 240px;
  flex-shrink: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 1px solid var(--g100);
  border-right: 1px solid var(--g100);
}

._mainTitle_16oi6_37 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  text-transform: capitalize;
}

._headerTotal_16oi6_44 {
  font-size: var(--fs-xs);
  color: var(--g500);
  text-transform: capitalize;
}

/* Right header — 13 tick labels distributed evenly across the lane
   width (first flush-left, last flush-right, rest evenly between).
   The labels are informational only; they don't need to be pixel-aligned
   to the 26-cube grid below — the period bars themselves carry exact
   hour positioning, and even distribution reads cleaner than
   cube-aligned absolute positions (which crowd the first pair). */
._ticksLane_16oi6_56 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) 0;
}

._tick_16oi6_56 {
  white-space: nowrap;
}

/* ── Data row ────────────────────────────────────────────────────────── */

._row_16oi6_70 {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--g100);

  /* Explicit height (not min-height) so children's `height: 100%` resolves
     correctly. With min-height alone, flex children that opt into
     `height: 100%` collapse to 0, since `height: 100%` ignores
     min-height on the parent. */
  height: 84px;
}

._row_16oi6_70:last-child {
  border-bottom: 0;
}

/* Left row side — 240px wide, holds the tag icon + name + profession on
   the left and the total-time value on the right (space-between). Borders
   match the header to keep the column dividers continuous. */
._leftRowSide_16oi6_89 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 240px;
  flex-shrink: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 1px solid var(--g100);
  border-right: 1px solid var(--g100);
}

._who_16oi6_100 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  flex: 1 1 auto;
}

._whoText_16oi6_108 {
  min-width: 0;
  flex: 1 1 auto;
}

._avatar_16oi6_113 {
  width: 28px;
  height: 28px;
  border-radius: var(--r-circle);
  background: var(--g50);
  display: grid;
  place-items: center;
  color: var(--g500);
  flex-shrink: 0;
}

._avatarImg_16oi6_124 {
  width: 14px;
  height: 14px;
  display: block;
}

._name_16oi6_130 {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

._profession_16oi6_139 {
  color: var(--g400);
  font-size: var(--fs-xs);
  text-transform: capitalize;
}

._total_16oi6_145 {
  font-size: var(--fs-sm);
  color: var(--g500);
  flex-shrink: 0;
  margin-left: var(--s-3);
}

/* Cells lane — flex container holding 26 cubes (24 hour cells + 2 cushion
   at right). Matches trusstor's `.graphContainer` exactly. */
._cells_16oi6_154 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  position: relative;

  /* No explicit `height: 100%` — let `align-items: stretch` on `.row`
     plus the row's explicit height (84px) propagate naturally. Setting
     `height: 100%` here previously broke flex stretching because the
     row used min-height. */
}

._cube_16oi6_166 {
  flex: 1 1 0;
  min-width: 6px;
  height: 100%;

  /* Right-edge hairline draws the per-hour grid line. Matches trusstor's
     `.cube { box-shadow: 1px 0 0 $grey100 }` byte-for-byte. */
  box-shadow: 1px 0 0 var(--g100);
}

._period_16oi6_176 {
  position: absolute;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);

  /* No min-width — periods below MIN_PERIOD_HOURS (≈7.2 min) receive `width: 0`
     from the TSX (mirrors trusstor's `getPeriodWidth` which returns '0px' for
     short spans). Without this filter, every minute-by-minute ping renders as
     a hairline and the row reads as tally marks. */
  background: var(--blue);
}

/* ── States ──────────────────────────────────────────────────────────── */

._empty_16oi6_191 {
  padding: var(--s-4) var(--s-5);
  color: var(--g400);
  font-size: var(--fs-sm);
}

._skeleton_16oi6_197 {
  padding: var(--s-4) var(--s-5);
}

._skeletonRow_16oi6_201 {
  height: 28px;
  background: var(--g50);
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
}
._title_1bm7x_1 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-md);
  font-weight: 600;
}

._list_1bm7x_7 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._empty_1bm7x_16 {
  color: var(--g400);
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
}

._errorWrap_1bm7x_22 {
  color: var(--g400);
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._retry_1bm7x_31 {
  background: transparent;
  border: 1px solid var(--g200);
  padding: 4px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-xs);
}
._title_q4dly_1 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-md);
  font-weight: 600;
}

._listScroll_q4dly_7 {
  /* 320px caps the visible list to roughly 8 rows before scrolling —
     keeps the aside from dwarfing the right-side main panel when a busy
     day produces many safety events. */
  max-height: 320px;
}

._list_q4dly_7 {
  margin: 0;
  padding: 0;
  list-style: none;
}

._dot_q4dly_20 {
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  flex-shrink: 0;

  /* default: "high" severity — safety-alert-orange */
  background: var(--safety-alert-orange);
}

._dotCritical_q4dly_30 {
  /* critical: safety-alert-red */
  background: var(--safety-alert-red);
}

._empty_q4dly_35 {
  color: var(--g400);
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
}

._errorWrap_q4dly_41 {
  color: var(--g400);
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._retry_q4dly_50 {
  background: transparent;
  border: 1px solid var(--g200);
  padding: 4px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-xs);
}
._title_8xwxj_1 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-md);
  font-weight: 600;
}

._eqRow_8xwxj_7 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-1);
  background: var(--g50);
  border-radius: var(--r-lg);
}

._eqRow_8xwxj_7:last-child {
  margin-bottom: 0;
}

._icon_8xwxj_21 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

._iconImg_8xwxj_30 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

._body_8xwxj_37 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._eqName_8xwxj_43 {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._eqTypeNick_8xwxj_51 {
  color: var(--g400);
  font-size: var(--fs-xs);
}

._empty_8xwxj_56 {
  color: var(--g400);
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
}
/* ObserveLocation page layout. The editable header is now owned by the
   shared <ReportHeader> component, and loading / error / not-found
   states are owned by the shared chassis components. This file only
   carries the page-specific layout: centred content wrapper, two-column
   body (left aside / right main), and the visits-card wrapper that
   composes VisitsCard + HourlyHistogram inside one shared shell. */

._page_14tr6_8 {
  padding: 0;
  min-height: 100%;
}

/* ---------- Content wrapper ---------------------------------------------- */

._content_14tr6_15 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------- Two-column body ---------------------------------------------- */

._body_14tr6_26 {
  display: grid;
  grid-template-columns: minmax(260px, 300px) 1fr;
  gap: var(--s-4);
  align-items: start;
}

/* Left aside: stacked panels */
._aside_14tr6_34 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Right main section: visits + histogram on top row, personnel below */
._main_14tr6_41 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Shared shell around the (flush) VisitsCard + HourlyHistogram. Renders the
   single card chrome that trusstor's design wraps both panels in — no inner
   seam between text and chart. */
._visitsCard_14tr6_50 {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--s-4);
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--s-4) var(--s-5);
}

._visitsChart_14tr6_60 {
  /* 120px: Recharts ResponsiveContainer needs a concrete height in jsdom +
     production (the histogram's own .root collapses to 100% inside flush
     mode). 120 matches the natural height of the visits text block to the
     left, so the shared card has a balanced rhythm. */
  min-height: 120px;
}

/* ---------- Responsive --------------------------------------------------- */

@media (width <= 1024px) {
  ._body_14tr6_26 {
    grid-template-columns: 1fr;
  }

  ._visitsCard_14tr6_50 {
    grid-template-columns: 1fr;
  }
}
/* Shared popup chrome + react-day-picker overrides used by every
   date picker on the analytics page. Composed via `composes:` from
   each field's local CSS module.
   v: 2026-05-06 — multi-month side-by-side. */._popup_1j6ff_6 {
  background: var(--color-surface);
  border-radius: var(--r-3xl);
  box-shadow: 0 8px 24px rgb(17 24 39 / 16%), 0 0 0 1px rgb(17 24 39 / 6%);
  padding: 16px 20px;
  font-family: var(--f-body);
  color: var(--navy);
}._popup_1j6ff_6 .rdp-root {
  --rdp-day-width: 36px;
  --rdp-day-height: 36px;
  --rdp-accent-color: var(--navy);
  --rdp-nav-button-color: var(--navy);
  --rdp-today-color: var(--navy);

  margin: 0;
  padding: 0;
}/* react-day-picker v9 defaults the months container to
   `flex-wrap: wrap; max-width: fit-content`, which both clamps width
   AND stacks multiple months on top of each other. Override to a
   non-wrapping row so DateRangeField's `numberOfMonths={2}` sits
   side-by-side. Single-month layouts (DateField, DateTimeField) still
   work — only one month, just laid out as a 1-item flex row. */._popup_1j6ff_6 .rdp-months {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 16px;
}._popup_1j6ff_6 .rdp-month {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month_grid {
  width: 100%;
  margin: 0;
  padding: 0;
}._popup_1j6ff_6 .rdp-month { position: relative; }._popup_1j6ff_6 .rdp-month_caption {
  position: relative;
  z-index: var(--z-raised-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 600;
  height: 32px;
  padding: 0;
  margin-bottom: 12px;
}._popup_1j6ff_6 .rdp-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-raised-2);
}._popup_1j6ff_6 .rdp-button_previous,
._popup_1j6ff_6 .rdp-button_next {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--navy);
  width: 28px;
  height: 28px;
  border-radius: var(--r-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._popup_1j6ff_6 .rdp-button_previous:hover,
._popup_1j6ff_6 .rdp-button_next:hover { background: var(--g50); }/* react-day-picker v9 inlines its own SVG chevrons whose fill is
   `--rdp-accent-color`. Force the inner shapes to inherit
   `currentColor` so blue defaults never leak through. */._popup_1j6ff_6 .rdp-button_previous svg,
._popup_1j6ff_6 .rdp-button_next svg { fill: currentColor; color: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [fill]:not([fill="none"]),
._popup_1j6ff_6 .rdp-button_next svg [fill]:not([fill="none"]) { fill: currentColor; }._popup_1j6ff_6 .rdp-button_previous svg [stroke]:not([stroke="none"]),
._popup_1j6ff_6 .rdp-button_next svg [stroke]:not([stroke="none"]) { stroke: currentColor; }._popup_1j6ff_6 .rdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 6px;
}._popup_1j6ff_6 .rdp-weekday {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
  padding: 6px 0;
  text-transform: none;
}._popup_1j6ff_6 .rdp-weeks { display: flex; flex-direction: column; gap: 2px; }._popup_1j6ff_6 .rdp-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}._popup_1j6ff_6 .rdp-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}._popup_1j6ff_6 .rdp-day .rdp-day_button {
  position: relative;
  z-index: var(--z-raised-1);
}._popup_1j6ff_6 .rdp-day_button {
  appearance: none;
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms, color 120ms;
}._popup_1j6ff_6 .rdp-day_button:hover:not(:disabled) { background: var(--g50); }._popup_1j6ff_6 .rdp-outside .rdp-day_button,
._popup_1j6ff_6 .rdp-disabled .rdp-day_button {
  color: var(--g300);
  cursor: default;
}._popup_1j6ff_6 .rdp-disabled .rdp-day_button:hover { background: transparent; }._popup_1j6ff_6 .rdp-selected .rdp-day_button,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button {
  background: var(--navy);
  color: var(--color-surface);
  font-weight: 600;
}/* Inverse on hover so the digit stays readable when the cursor is
   over the filled selected day. */._popup_1j6ff_6 .rdp-selected .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_start .rdp-day_button:hover,
._popup_1j6ff_6 .rdp-range_end .rdp-day_button:hover {
  background: var(--color-surface);
  color: var(--navy);
}/* Range pill: middle days get a full-cell light-blue band; start
   and end days get a half-band that flows out from the navy circle
   so the band visually connects to the middle days. The band lives
   on a `::before` underneath the day button, which keeps its
   circular fill on top. */._popup_1j6ff_6 .rdp-range_middle::before,
._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before,
._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-range_middle::before { left: 0; right: 0; }._popup_1j6ff_6 .rdp-range_start:not(.rdp-range_end)::before {
  left: 50%;
  right: 0;
}._popup_1j6ff_6 .rdp-range_end:not(.rdp-range_start)::before {
  left: 0;
  right: 50%;
}._popup_1j6ff_6 .rdp-range_middle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}/* Live preview: while the user has picked a start but not yet an end,
   paint the same band/circle on the days between `from` and the
   hovered cell so the range is visible as the cursor moves. The
   "Forward"/"Backward" suffix tells the half-band which side of the
   hovered cell to flow toward — back to where `from` sits. */._popup_1j6ff_6 .rdp-previewMiddle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewMiddle .rdp-day_button {
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 500;
}._popup_1j6ff_6 .rdp-previewEndForward::before,
._popup_1j6ff_6 .rdp-previewEndBackward::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--info-tint);
  z-index: var(--z-base);
}._popup_1j6ff_6 .rdp-previewEndForward::before { left: 0; right: 50%; }._popup_1j6ff_6 .rdp-previewEndBackward::before { left: 50%; right: 0; }/* Hovered preview end stays in the same grey-circle hover state as
   any normal day button — no navy fill until the user commits. The
   half-band (::before above) hints where the range will reach. */._popup_1j6ff_6 .rdp-previewEndForward .rdp-day_button,
._popup_1j6ff_6 .rdp-previewEndBackward .rdp-day_button {
  background: var(--g50);
  color: var(--navy);
  font-weight: 500;
}
/* Same portal/z-index constraint as DateField (see its stylesheet): the popover
   portals to <body>, so it competes with the dialog layer rather than nesting
   inside it, and without this it opens BEHIND any modal that hosts the field.
   It belongs on the positioner, not the popup — Base UI's popup is
   `position: static`, and z-index is inert on a static element. Latent today
   (both call sites are Analytics cards, not modals); fixed so the first one
   that lands in a dialog doesn't rediscover it. */
._positioner_vd44b_8 { z-index: var(--z-dialog-popover); }

/* Pill-style date range picker chrome. The calendar popup chrome itself is
   composed from `DatePicker/calendarStyles.module.css` so this component
   shares the same react-day-picker overrides (multi-month layout, range
   pill band, day buttons) as the field-style `DateRangeField`. */

._trigger_vd44b_15 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-lg);
  padding: var(--s-1) var(--s-3);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
  line-height: 1;
  min-height: 32px;
}

._trigger_vd44b_15:hover {
  border-color: var(--g400);
}

._trigger_vd44b_15[data-popup-open] {
  border-color: var(--info);
}

._trigger_vd44b_15:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._label_vd44b_45 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._popup_vd44b_52 {
}

/* The popup takes focus itself on a pointer open — no ring for that. */
._popup_vd44b_52:focus { outline: none; }

/* Status on the left (the pick-an-end hint), view controls on the right. */
._footer_vd44b_60 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
  border-top: 1px solid var(--border);
}

._footerHint_vd44b_70 {
  font-size: var(--fs-sm);
  color: var(--g600);
}

._body_vd44b_75 {
  display: flex;
  gap: var(--s-3);
}

/* Quick ranges, a column left of the calendar. */
._presets_vd44b_81 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 196px;
  padding-inline-end: var(--s-3);
  border-inline-end: 1px solid var(--border);
}

._preset_vd44b_81 {
  appearance: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  border: 0;
  background: transparent;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--g800);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

._preset_vd44b_81:hover { background: var(--g50); }

/* The dates a preset picks — scannable, secondary to its name. */
._presetHint_vd44b_111 {
  font-size: var(--fs-xs);
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}

/* The option matching the current selection. */
._preset_vd44b_81[aria-pressed='true'] {
  background: var(--g100);
  font-weight: 600;
}

/* "All dates" heads the list, set off from the ranges below it. */
._clearPreset_vd44b_124 {
  margin-bottom: var(--s-1);
  box-shadow: 0 1px 0 var(--border);
  border-radius: var(--r-md) var(--r-md) 0 0;
}

._preset_vd44b_81:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
}

/* Today, ringed — the calendar's anchor ("where am I") at a glance. */
._popup_vd44b_52 .rdp-today:not(.rdp-selected) .rdp-day_button {
  box-shadow: inset 0 0 0 1.5px var(--info);
  color: var(--info);
  font-weight: 700;
}

/* Month arrows in the header's grey, not black — navigation, not content. The
   shared calendar styles paint the chevron in the button's currentColor. */
._popup_vd44b_52 .rdp-button_previous,
._popup_vd44b_52 .rdp-button_next { color: var(--g500); }

._popup_vd44b_52 .rdp-button_previous:hover,
._popup_vd44b_52 .rdp-button_next:hover { color: var(--navy); }
._root_xhl3s_1 {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: var(--s-3);
  width: 100%;
}

._card_xhl3s_8 {
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-height: 84px;
}

._label_xhl3s_19 {
  font-size: var(--fs-xs);
  color: var(--g500);
  font-weight: 500;
}

._valueRow_xhl3s_25 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--navy);
}

._iconCircle_xhl3s_32 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  width: 22px;
  height: 22px;
}

._value_xhl3s_25 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.1;
}

._tradeChip_xhl3s_48 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--chip-cyan-bg);
  color: var(--chip-cyan-text);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  align-self: flex-start;
  margin-top: 2px;
}

/* Slot for the real `ProfessionChip` — keeps the same baseline rhythm as
   the fallback `.tradeChip` so the card height doesn't jump when the
   profession catalog resolves. */
._tradeChipWrap_xhl3s_65 {
  align-self: flex-start;
  margin-top: 2px;
}

@media (width <= 1100px) {
  ._root_xhl3s_1 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Shared "icon-circle then label-over-value" block used by the chart
   averages strip and the locations panel header. Centralises the
   32×32 icon-circle + tabular-metadata structure that previously lived
   inline in WorkersHoursChart (`.averageBlock`) and LocationDistribution
   (`.statBlock`). */

._root_1qbwz_7 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._icon_1qbwz_13 {
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  background: var(--g50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--g500);
}

._meta_1qbwz_24 {
  display: flex;
  flex-direction: column;
}

._label_1qbwz_29 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._value_1qbwz_34 {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--navy);
}
/* Card chrome (background, padding) lives in `PanelCard`. This file
   owns the chart-specific bits AND the pinned-height override: the two
   ContractorAnalysis panels share a fixed 380px height so their vertical
   edges line up. The value covers the chart at default font scale
   without overflow — see Trusstor V2's pinned-pane layout. */

._panelPinned_4zb9e_7 {
  height: 380px;
}

._title_4zb9e_11 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._titleBars_4zb9e_18 { color: var(--chart-cyan); }
._titleLine_4zb9e_19 { color: var(--line-purple); }

._averages_4zb9e_21 {
  display: flex;
  gap: var(--s-7);
  align-items: center;
}

._chart_4zb9e_27 {
  width: 100%;
  flex: 1 1 auto;
  min-height: 240px;
}

._legend_4zb9e_33 {
  display: flex;
  gap: var(--s-5);
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--g600);
}

._legendItem_4zb9e_41 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

._legendDot_4zb9e_47 {
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  display: inline-block;
}

._legendDotBar_4zb9e_54  { background: var(--chart-cyan); }
._legendDotLine_4zb9e_55 { background: var(--line-purple); }

/* ---------- Custom Recharts tooltip ---------- */

/* Two-section card — dark navy header strip carrying the full date,
   white body with one colored-dot row per series. Mirrors trusstor V2's
   chart tooltip. */
._tooltip_4zb9e_62 {
  background: var(--color-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
  min-width: 160px;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  pointer-events: none;
}

._tooltipHeader_4zb9e_73 {
  background: var(--g700);
  color: var(--inverse-text-strong);
  padding: var(--s-2) var(--s-3);
  font-weight: 500;
  letter-spacing: 0.01em;
}

._tooltipBody_4zb9e_81 {
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  color: var(--navy);
}

._tooltipRow_4zb9e_89 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._tooltipDot_4zb9e_95 {
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  flex: 0 0 10px;
  display: inline-block;
}

._tooltipText_4zb9e_103 {
  white-space: nowrap;
}
/* Card chrome (background, padding) lives in `PanelCard`. This file
   owns the location-list-specific bits AND the pinned-height override:
   the two ContractorAnalysis panels share a fixed 380px so their vertical
   edges line up. See WorkersHoursChart.module.css for the rationale. */

._panelPinned_5mxgp_6 {
  height: 380px;
}

._header_5mxgp_10 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

._title_5mxgp_17 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._headerStats_5mxgp_24 {
  display: flex;
  gap: var(--s-7);
}

._subheader_5mxgp_29 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--separator);
  padding-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--g600);
}

._groupSelect_5mxgp_39 {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
  color: var(--navy);
  font-weight: 500;
  padding: var(--s-1) var(--s-6) var(--s-1) var(--s-2);
  border-radius: var(--r-md);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--g500) 50%),
                    linear-gradient(135deg, var(--g500) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

._groupSelect_5mxgp_39:hover {
  border-color: var(--g200);
}

._groupSelect_5mxgp_39:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._list_5mxgp_65 {
  /* Grow to fill the card; scroll only if the catalog has more rows than
     the available height. Removing the fixed cap lets the panel match the
     chart card vertically when there's room. */
  flex: 1 1 auto;
}

._listBody_5mxgp_72 {
  display: flex;
  flex-direction: column;
  padding-right: var(--s-2);
}

/* Row layout mirrors trusstor's `GraphRow`:
   - flex row with a left-aligned label, an inline bar track that takes the
     remaining width, and a right-aligned percent value
   - thin grey divider line between rows (no gap)
   - tight vertical rhythm so a long catalog (30+ rows) fits in one card
     without dwarfing the chart panel next to it. */
._row_5mxgp_84 {
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--separator);
  min-height: 26px;
}

._rowLabel_5mxgp_92 {
  flex: 0 0 110px;
  min-width: 110px;
  padding: var(--s-1) var(--s-2);
  color: var(--g500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* No fill on the track — trusstor renders the bar floating inside the
   row's whitespace rather than over a grey rail. The container only
   anchors the absolute-positioned fill. */
._rowBarTrack_5mxgp_107 {
  position: relative;
  flex: 1 1 auto; 
  align-self: center;
  height: 100%;
}

._rowBarFill_5mxgp_114 {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--chart-cyan);

  /* square ends — matches trusstor's $blue100 fill */

  /* Mount-time animation — scale from 0 → 1 along the left edge so each
     bar visually "draws in" when the row first lands. Mirrors trusstor's
     `popUp` + `transition: width 1s ease-out` on the same surface. Uses
     scaleX so we don't reflow / repaint the row's grid every frame. */
  transform-origin: left center;
  animation: _barGrowIn_5mxgp_1 800ms ease-out;
}

@keyframes _barGrowIn_5mxgp_1 {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  ._rowBarFill_5mxgp_114 { animation: none; }
}

._rowPercent_5mxgp_138 {
  flex: 0 0 100px;
  padding: var(--s-1) var(--s-2);
  text-align: right;
  color: var(--g600);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
._page_ohems_1 {
  padding: 0;
  min-height: 100%;
}

._banner_ohems_6 {
  background: var(--banner-soft-blue);
}

._bannerInner_ohems_10 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-7) var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "back  title placeholder"
    "stats stats stats";
  gap: var(--s-4) var(--s-3);
  align-items: start;
}

._back_ohems_23 {
  grid-area: back;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  color: var(--navy);
  text-decoration: none;
  font-size: var(--fs-lg);
  line-height: 1;
  box-shadow: var(--shadow-card);
}

._back_ohems_23:hover {
  background: var(--g50);
}

._title_ohems_43 {
  grid-area: title;
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  text-align: center;
  color: var(--navy);
  line-height: 1.2;
}

._titleName_ohems_54 {
  font-weight: 700;
}

._titleSpacer_ohems_58 {
  grid-area: placeholder;
  width: 36px;
}

._stats_ohems_63 {
  grid-area: stats;
  margin-top: var(--s-2);
}

._content_ohems_68 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._personnelHeader_ohems_77 {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

._personnelTitle_ohems_83 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

._body_ohems_93 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

._inlineErrorBanner_ohems_99 {
  max-width: 1400px;
  margin: var(--s-4) auto 0;
  padding: var(--s-3) var(--s-4);
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-sm);
}

._retryButton_ohems_113 {
  appearance: none;
  background: var(--color-surface);
  color: var(--color-error);
  border: 1px solid var(--color-error);
  border-radius: var(--r-md);
  padding: var(--s-1) var(--s-3);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

._retryButton_ohems_113:hover {
  background: var(--color-error);
  color: var(--color-surface);
}

._retryButton_ohems_113:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

@media (width <= 1024px) {
  ._body_ohems_93 { grid-template-columns: 1fr; }
}
._spinner_158ji_1 {
  display: inline-flex;
  margin-left: var(--s-2);
  color: var(--g400);
  animation: _pendingSpin_158ji_1 0.8s linear infinite;
}

@keyframes _pendingSpin_158ji_1 {
  to { transform: rotate(360deg); }
}
._sidebar_1nxx3_1 {
  border-right: 1px solid var(--border);
  background: var(--sidebar-background);
  width: 220px;
  flex-shrink: 0;
}

._sidebarBody_1nxx3_8 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--s-4) 0 var(--s-6);
  box-sizing: border-box;
}

._sectionHeader_1nxx3_16 {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--g500);
  padding: 0 var(--s-4) var(--s-2) var(--s-5);
}

._tree_1nxx3_24 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 var(--s-1);
}

._item_1nxx3_31 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-1);
  background: none;
  border: none;
  border-radius: var(--r-lg);
  cursor: grab;
  text-align: left;
  color: var(--sidebar-text);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  transition: background 0.12s;
}

._item_1nxx3_31:hover {
  background: var(--sidebar-hover-bg);
}

._itemSaving_1nxx3_52,
._itemSaving_1nxx3_52:hover {
  background: none;
  opacity: 0.55;
  cursor: progress;
}

._active_1nxx3_59 {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 500;
}

._active_1nxx3_59 ._folderIcon_1nxx3_65 {
  color: var(--sidebar-accent);
}

._folderIcon_1nxx3_65 {
  flex-shrink: 0;
  color: var(--g400);
  transition: color 0.12s;
}

._item_1nxx3_31:hover ._folderIcon_1nxx3_65 {
  color: var(--sidebar-text);
}

._chevronWrap_1nxx3_79 {
  width: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-chevron);
}

._chevron_1nxx3_79 {
  transition: transform 0.18s ease;
}

._chevronOpen_1nxx3_92 {
  transform: rotate(90deg);
}

._label_1nxx3_96 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._dropTarget_1nxx3_104 {
  background: var(--sidebar-hover-bg);
  outline: 1px solid var(--sidebar-accent);
  outline-offset: -1px;
}

._renameField_1nxx3_110 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._renameInput_1nxx3_118 {
  width: 100%;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--sidebar-accent);
  border-radius: var(--r-md);
  padding: 1px var(--s-2);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-accent) 25%, transparent);
}

._renameInputError_1nxx3_132 {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 25%, transparent);
}

._renameError_1nxx3_137 {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--color-error);
}

@keyframes _shimmer_1nxx3_1 {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.65; }
}

._skeletonList_1nxx3_148 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--s-2);
}

._skeletonRow_1nxx3_155 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 30px;
  border-radius: var(--r-lg);
  animation: _shimmer_1nxx3_1 1.4s ease-in-out infinite;
}

._skeletonIcon_1nxx3_164 {
  width: 14px;
  height: 14px;
  border-radius: var(--r-sm);
  background: var(--g300);
  flex-shrink: 0;
}

._skeletonLabel_1nxx3_172 {
  height: 10px;
  border-radius: var(--r-sm);
  background: var(--g300);
}

@keyframes _folderDragReject_1nxx3_1 {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

._dragRejected_1nxx3_186 {
  animation: _folderDragReject_1nxx3_1 0.4s ease;
  outline: 2px solid var(--danger, #c0392b);
  outline-offset: -2px;
}

._menu_qt6ls_1 {
  position: fixed;
  z-index: var(--z-popover);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 8%);
  padding: var(--s-1) 0;
  min-width: 148px;
  display: flex;
  flex-direction: column;
}

._item_qt6ls_14 {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-4);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.1s;
}

._item_qt6ls_14:hover {
  background: var(--docs-surface-hover);
}

._danger_qt6ls_32 {
  color: var(--danger, #c0392b);
}

._danger_qt6ls_32:hover {
  background: var(--danger-tint, rgb(192 57 43 / 8%));
}
._bar_udvvk_1 {
  display: flex;
  align-items: center;
  gap: var(--s-3);

  /* 28px on the left: the page title's edge. */
  padding: var(--s-2) var(--s-4) var(--s-2) 28px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

._searchWrap_udvvk_12 {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

._searchIcons_udvvk_19 {
  position: absolute;
  left: var(--s-3);
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--g400);
  pointer-events: none;
}

._searchInput_udvvk_29 {
  width: 100%;
  height: 36px;
  padding: 0 var(--s-3) 0 calc(var(--s-3) + 24px);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--g400);
  background: var(--docs-surface);
  outline: none;
  cursor: text;
}

._uploadBtn_udvvk_43 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--s-4);
  background: var(--sidebar-accent);
  border: none;
  border-radius: var(--r-xl);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--f-body);
  white-space: nowrap;
  color: var(--color-surface);
  cursor: pointer;
}

._uploadBtn_udvvk_43:hover {
  opacity: 0.88;
}

/* List ⇄ grid switch — a two-button segment, the active side tinted. */
._viewSwitch_udvvk_65 {
  display: inline-flex;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  overflow: hidden;
  flex-shrink: 0;
}

._viewBtn_udvvk_75 {
  display: grid;
  place-items: center;
  width: 40px;
  border: none;
  background: none;
  color: var(--g400);
  cursor: pointer;
}

._viewBtn_udvvk_75:hover {
  color: var(--navy);
}

._viewBtn_udvvk_75:focus-visible {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: -2px;
}

._viewBtnActive_udvvk_94,
._viewBtnActive_udvvk_94:hover {
  background: var(--info-tint);
  color: var(--sidebar-accent);
}
/* The shared chip (ui/Pill), kept to its content's width in a column. */
._place_1n31j_2 {
  align-self: flex-start;
}

._status_approved_1n31j_6 {
  background: var(--doc-approved-bg);
  color: var(--doc-approved-text);
}

._status_in_review_1n31j_11 {
  background: var(--doc-in-review-bg);
  color: var(--doc-in-review-text);
}

._status_draft_1n31j_16 {
  background: var(--doc-draft-bg);
  color: var(--doc-draft-text);
}

._status_rejected_1n31j_21 {
  background: var(--doc-rejected-bg);
  color: var(--doc-rejected-text);
}

._status_superseded_1n31j_26 {
  background: var(--doc-superseded-bg);
  color: var(--doc-superseded-text);
}._group_s09gx_1 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

._versionChip_s09gx_8 {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--sidebar-accent);
  background: hsl(var(--doc-primary) / 20%);
}

/* Over an image the translucent chip vanishes — give it a solid ground. */
._overlay_s09gx_20 ._versionChip_s09gx_8 {
  background: var(--color-surface);
}
._icon_1rykx_1 {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--g400);
}

._image_1rykx_7 {
  color: var(--doc-type-image);
}

._pdf_1rykx_11 {
  color: var(--doc-type-pdf);
}

._sheet_1rykx_15 {
  color: var(--doc-type-sheet);
}

._cad_1rykx_19 {
  color: var(--doc-type-cad);
}

/* Word/text/slides and anything unrecognised stay neutral — colour is
   reserved for the families a user picks out at a glance. */
._doc_1rykx_25 {
  color: var(--g500);
}

._other_1rykx_29 {
  color: var(--g400);
}
._field_7sspr_1 {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

._input_7sspr_8 {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--sidebar-accent);
  border-radius: var(--r-md);
  padding: 1px var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--f-body);
  color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-accent) 25%, transparent);
  line-height: 1.35;
}

._inputError_7sspr_25 {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 25%, transparent);
}

._suffix_7sspr_30 {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--f-body);
  color: var(--g500);
}

._error_7sspr_38 {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--color-error);
}
._tableWrap_rzvqi_1 {
  flex: 1;
  min-width: 0;
  background: var(--docs-surface);
}

._table_rzvqi_1 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  color: var(--navy);
}

/* Column widths */
._colName_rzvqi_15    { width: 32%; min-width: 220px; }
._colDesc_rzvqi_16    { width: 30%; min-width: 200px; }
._colVersion_rzvqi_17 { width: 14%; }
._colStatus_rzvqi_18  { width: 8%; }

._statusCell_rzvqi_20 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

._awaitingChip_rzvqi_27 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--doc-in-review-text);
  white-space: nowrap;
}
._colSize_rzvqi_33    { width: 8%; }
._colUpdated_rzvqi_34 { width: 8%; }

/* Header */
._headerRow_rzvqi_37 {
  position: sticky;
  top: 0;
  z-index: var(--z-raised-2);
  background: var(--color-surface);
}

._th_rzvqi_44 {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--g400);
  border-bottom: 1px solid var(--separator);
  white-space: nowrap;
}

._sortBtn_rzvqi_55 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--g400);
  font-family: var(--f-body);
  padding: 0;
}

._sortBtn_rzvqi_55:hover {
  color: var(--navy);
}

/* Rows */
._row_rzvqi_75 {
  border-bottom: 1px solid var(--separator);
  transition: background 0.1s;
  cursor: pointer;
}

._row_rzvqi_75:hover {
  background: var(--docs-surface-hover);
}

._row_rzvqi_75:focus-visible {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: -2px;
}

._rowSelected_rzvqi_90 {
  background: var(--info-tint-soft);
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
}

._rowSelected_rzvqi_90:hover {
  background: var(--info-tint);
}

._rowSaving_rzvqi_99,
._rowSaving_rzvqi_99:hover {
  background: transparent;
  opacity: 0.55;
  cursor: progress;
}

/* A menu is open: hover falls silent everywhere but its target. */
._menuOpen_rzvqi_107 ._row_rzvqi_75:not(._rowSelected_rzvqi_90):hover {
  background: transparent;
}

._td_rzvqi_111 {
  padding: var(--s-3) var(--s-4);
  vertical-align: middle;
}

/* Name cell */
._nameCell_rzvqi_117 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

._folderRowIcon_rzvqi_123 {
  flex-shrink: 0;
  color: var(--g400);
}

._parentRowLabel_rzvqi_128 {
  display: block;
  font-weight: 500;
  color: var(--g500);
  line-height: 1.35;
}

._folderNameCell_rzvqi_135 {
  min-height: calc(var(--fs-sm) * 1.35 + var(--fs-xs) * 1.4 + 2px);
  align-items: center;
}

._docName_rzvqi_140 {
  display: block;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  overflow-wrap: anywhere;
}


/* Description */
._descText_rzvqi_150 {
  color: var(--g600);
  line-height: 1.45;
}

/* Size */
._sizeText_rzvqi_156 {
  color: var(--g500);
  white-space: nowrap;
}

/* Updated */
._updatedCell_rzvqi_162 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._updatedDate_rzvqi_168 {
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  font-size: var(--fs-xs);
}

._updatedBy_rzvqi_175 {
  font-size: var(--fs-xs);
  color: var(--g400);
}

/* Empty state */
._emptyCell_rzvqi_181 {
  text-align: center;
  padding: 64px var(--s-4);
  color: var(--g400);
  font-size: var(--fs-sm);
  vertical-align: middle;
}

._emptyIcon_rzvqi_189 {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-3);
  color: var(--g200);
}

/* Loading skeleton — mirrors the row layout so the table reads as filling in */
@keyframes _docTableShimmer_rzvqi_1 {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.65; }
}

._skeletonRow_rzvqi_202 {
  border-bottom: 1px solid var(--separator);
  opacity: calc(1 - var(--slot) * 0.06);  /* Each row a step fainter than the last */
}

._skeletonBar_rzvqi_207 {
  height: 12px;
  border-radius: var(--r-sm);
  background: var(--g200);
  animation: _docTableShimmer_rzvqi_1 1.4s ease-in-out infinite;
}

._skeletonBarSub_rzvqi_214 {
  height: 9px;
  width: 40%;
  margin-top: 6px;
  border-radius: var(--r-sm);
  background: var(--g200);
  animation: _docTableShimmer_rzvqi_1 1.4s ease-in-out infinite;
}

._dropTarget_rzvqi_223 {
  background: var(--docs-surface-hover);
  outline: 1px solid var(--sidebar-accent);
  outline-offset: -1px;
}

/* Drag rejection shake */
@keyframes _docDragReject_rzvqi_1 {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

._dragRejected_rzvqi_238 {
  animation: _docDragReject_rzvqi_1 0.4s ease;
  outline: 2px solid var(--danger, #c0392b);
  outline-offset: -2px;
}._gridWrap_stize_1 {
  flex: 1;
  min-width: 0;
  background: var(--docs-surface);
}

._gridBody_stize_7 {
  padding: var(--s-4);
}

._grid_stize_1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: var(--s-3);
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

._grid_stize_1 > li {
  display: flex;
  min-width: 0;
}

._grid_stize_1 > li > ._card_stize_26 {
  flex: 1;
}

/* One card: preview on top, caption below. Folders and the back card share
   the shape so the grid reads as one surface. */
._card_stize_26 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--g100);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font-family: var(--f-body);
  transition: border-color 0.12s, box-shadow 0.12s;
}

._card_stize_26:hover {
  border-color: var(--g200);
  box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
}

._card_stize_26:focus-visible {
  outline: 2px solid var(--sidebar-accent);
  outline-offset: -2px;
}

._cardSaving_stize_56,
._cardSaving_stize_56:hover {
  border-color: var(--g100);
  box-shadow: none;
  opacity: 0.55;
  cursor: progress;
}

._cardSelected_stize_64,
._cardSelected_stize_64:hover {
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 1px var(--sidebar-accent) inset;
}

/* A menu is open: hover falls silent everywhere but its target. */
._menuOpen_stize_71 ._card_stize_26:not(._cardSelected_stize_64):hover {
  border-color: var(--g100);
  box-shadow: none;
}

._preview_stize_76 {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--g50);
  border-bottom: 1px solid var(--separator);
  overflow: hidden;
}

/* Folder and back glyphs sit in the preview like an icon would. */
._glyph_stize_87 {
  color: var(--g400);
}

._glyphParent_stize_91 {
  color: var(--g500);
}

/* The table's VersionBadge, on a band along the preview's bottom edge. */
._band_stize_96 {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  padding: var(--s-5) var(--s-2) 6px;
}

._bandOverImage_stize_104 {
  background: var(--doc-overlay-scrim);
}

._caption_stize_108 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-2) var(--s-3) 9px;
  min-width: 0;
}

/* Renaming: the name and meta stay in the flow but invisible, holding the
   card's height, and the editor floats over them — so opening an editor
   never resizes the card, or the row it sits in. */
._ghost_stize_120 {
  visibility: hidden;
}

._renameOverlay_stize_124 {
  position: absolute;
  inset: var(--s-2) var(--s-3) auto;
}

._name_stize_129 {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._nameMuted_stize_139 {
  font-weight: 500;
  color: var(--g500);
}

._metaRow_stize_144 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-width: 0;
}

._meta_stize_144 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty state — the same copy and icon as the table's. */
._empty_stize_161 {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: 64px var(--s-4);
  color: var(--g400);
  font-size: var(--fs-sm);
}

._emptyIcon_stize_172 {
  color: var(--g200);
}

/* Thumbnail — fills the square; `cover` because these are previews, not
   the document itself (the drawer shows it whole). */
._thumbnail_stize_178 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes _gridShimmer_stize_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

._thumbnailSkeleton_stize_189 {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--g100) 0%, var(--g50) 50%, var(--g100) 100%);
  background-size: 200% 100%;
  animation: _gridShimmer_stize_1 1.4s infinite ease-in-out;
}

/* Loading skeleton — card-shaped, so the grid reads as filling in. Each slot
   is a step fainter than the last (the 18th at ~15%), so the placeholders
   trail off rather than stop. */
._skeletonSlot_stize_200 {
  display: flex;
  min-width: 0;
  opacity: calc(1 - var(--slot) * 0.05);
}

._skeletonSlot_stize_200 > ._card_stize_26 {
  flex: 1;
}

@keyframes _gridCardPulse_stize_1 {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.65; }
}

._skeletonCard_stize_215 {
  cursor: default;
  animation: _gridCardPulse_stize_1 1.4s ease-in-out infinite;
}

._skeletonPreview_stize_220 {
  background: var(--g100);
}

._skeletonBar_stize_224 {
  display: block;
  height: 12px;
  border-radius: var(--r-sm);
  background: var(--g200);
}

._skeletonBarSub_stize_231 {
  height: 9px;
  width: 40%;
  margin-top: 6px;
}

/* Drag & drop — the table's states, on a card. */
._dropTarget_stize_238,
._dropTarget_stize_238:hover {
  background: var(--docs-surface-hover);
  border-color: var(--sidebar-accent);
}

@keyframes _gridDragReject_stize_1 {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

._dragRejected_stize_252 {
  animation: _gridDragReject_stize_1 0.4s ease;
  outline: 2px solid var(--danger, #c0392b);
  outline-offset: -2px;
}
._previewBox_1c5x6_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 160px;
  border-radius: var(--r-xl);
  background: var(--g50);
  border: 1px solid var(--separator);
  overflow: hidden;
}

._previewImage_1c5x6_14 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._previewBoxPdf_1c5x6_20 {
  width: 160px;
  height: 220px;
  align-self: center;
}

._previewCanvas_1c5x6_26 {
  width: 130px;
  height: 184px;
  box-shadow: var(--shadow-page);
  border-radius: var(--r-sm);
}

@keyframes _shimmer_1c5x6_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

._previewSkeleton_1c5x6_38 {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--g100) 0%,
    var(--g50) 50%,
    var(--g100) 100%
  );
  background-size: 200% 100%;
  animation: _shimmer_1c5x6_1 1.4s infinite ease-in-out;
}

/* Page-shaped placeholder matching the rendered canvas footprint. */
._previewSkeletonPdf_1c5x6_52 {
  width: 130px;
  height: 184px;
  border-radius: var(--r-sm);
}

._previewText_1c5x6_58 {
  font-size: var(--fs-sm);
  color: var(--g400);
}

._previewSize_1c5x6_63 {
  font-size: var(--fs-xs);
  color: var(--g300);
}
._backdrop_tlx9k_1 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: var(--z-dialog);
}

._panel_tlx9k_8 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: calc(100vw - var(--s-5));
  max-height: calc(100vh - var(--s-6));
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

._title_tlx9k_25 {
  margin: 0;
  padding: var(--s-5) var(--s-5) var(--s-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--g800);
  font-family: var(--f-body);
  word-break: break-all;
}

._grid_tlx9k_35 {
  display: flex;
  gap: var(--s-3);
  padding: 0 var(--s-5);
}

._card_tlx9k_41 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 220px;
  flex-shrink: 0;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--g50);
}

._cardHeader_tlx9k_53 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
}

._versionNum_tlx9k_60 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._latestBadge_tlx9k_66 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sidebar-accent);
  background: hsl(var(--doc-primary) / 10%);
  padding: 1px 6px;
  border-radius: var(--r-md);
}

._cardMeta_tlx9k_76 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._metaItem_tlx9k_82 {
  font-size: var(--fs-xs);
  color: var(--g600);
  font-family: var(--f-body);
}

._downloadBtn_tlx9k_88 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  background: var(--sidebar-accent);
  border: none;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--f-body);
  color: var(--color-surface);
  cursor: pointer;
}

._downloadBtn_tlx9k_88:hover:not(:disabled) {
  opacity: 0.88;
}

._downloadBtn_tlx9k_88:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._downloadSpinner_tlx9k_113 {
  display: inline-flex;
  animation: _downloadSpin_tlx9k_113 0.8s linear infinite;
}

@keyframes _downloadSpin_tlx9k_113 {
  to {
    transform: rotate(360deg);
  }
}

._error_tlx9k_124 {
  margin: 0;
  padding: var(--s-3) var(--s-5) 0;
  font-size: var(--fs-xs);
  color: var(--sev-high-text);
  font-family: var(--f-body);
}

._actions_tlx9k_132 {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-4);
  border-top: 1px solid var(--border);
}

._closeBtn_tlx9k_140 {
  height: 32px;
  padding: 0 var(--s-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--f-body);
  background: transparent;
  border: 1px solid var(--g300);
  color: var(--g700);
  cursor: pointer;
  transition: background 0.1s;
}

._closeBtn_tlx9k_140:hover {
  background: var(--g50);
}
._versionEntry_1jpk6_1 {
  display: flex;
  gap: var(--s-3);
}

._versionTimeline_1jpk6_6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}

._versionDot_1jpk6_14 {
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  border: 2px solid var(--g300);
  background: var(--color-surface);
  flex-shrink: 0;
}

._versionDotLatest_1jpk6_23 {
  border-color: var(--sidebar-accent);
  background: var(--sidebar-accent);
}

._versionLine_1jpk6_28 {
  flex: 1;
  width: 2px;
  background: var(--separator);
  margin: 3px 0;
  min-height: 16px;
}

/* The timeline reads as one thread, so the last dot doesn't trail a line. */
._versionEntry_1jpk6_1:last-child ._versionLine_1jpk6_28 {
  display: none;
}

._versionBody_1jpk6_41 {
  flex: 1;
  padding-bottom: var(--s-4);
}

._versionHeader_1jpk6_46 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 4px;
}

._versionNum_1jpk6_53 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._versionDesc_1jpk6_59 {
  font-size: var(--fs-xs);
  color: var(--g600);
  margin: 0 0 6px;
  line-height: 1.45;
}

._decision_1jpk6_66 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 6px;
  padding: 6px var(--s-2);
  border-left: 2px solid var(--separator);
  background: var(--docs-surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

._decisionRejected_1jpk6_77 {
  border-left-color: var(--doc-rejected-text);
}

._decisionMeta_1jpk6_81 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._decisionComment_1jpk6_86 {
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.45;
}

._approvalActions_1jpk6_92 {
  display: flex;
  gap: var(--s-2);
  margin-bottom: 6px;
}

._decisionSpinner_1jpk6_98 {
  display: inline-flex;
  margin-right: var(--s-1);
  vertical-align: -2px;
  animation: _decisionSpin_1jpk6_98 0.8s linear infinite;
}

@keyframes _decisionSpin_1jpk6_98 {
  to {
    transform: rotate(360deg);
  }
}

._approvalBtn_1jpk6_111 {
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--f-body);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--navy);
  cursor: pointer;
}

._approvalBtn_1jpk6_111:hover:not(:disabled) {
  background: var(--docs-surface-hover);
}

._approvalBtn_1jpk6_111:disabled {
  opacity: 0.5;
  cursor: default;
}

._approveBtn_1jpk6_132 {
  border-color: var(--doc-approved-text);
  color: var(--doc-approved-text);
}

._rejectBtn_1jpk6_137 {
  border-color: var(--doc-rejected-text);
  color: var(--doc-rejected-text);
}

._decisionForm_1jpk6_142 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: 6px;
}

._decisionLabel_1jpk6_149 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g600);
}

._decisionInput_1jpk6_155 {
  width: 100%;
  padding: var(--s-2);
  font-size: var(--fs-xs);
  font-family: var(--f-body);
  color: var(--navy);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  background: var(--color-surface);
  resize: vertical;
}

._decisionFormActions_1jpk6_167 {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}

._decisionCancel_1jpk6_173 {
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-family: var(--f-body);
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
}

/* Matches the drawer's own download error, which sits in its stylesheet. */
._downloadError_1jpk6_184 {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--sev-high-text);
  font-family: var(--f-body);
}

._versionMeta_1jpk6_191 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

._versionMetaItem_1jpk6_197 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--g400);
}

._versionActions_1jpk6_205 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

._versionActionBtn_1jpk6_212 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: var(--r-md);
  color: var(--navy);
  opacity: 0.55;
  cursor: pointer;
}

._versionActionBtn_1jpk6_212:hover {
  opacity: 1;
  background: hsl(var(--doc-secondary));
}
/* The shared drawer pads and scrolls the panel; the header just underlines itself. */
._header_12kvh_2 {
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._name_12kvh_7 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px;
  padding-right: var(--s-7); /* a long name must not run under the X */
  line-height: 1.3;
  overflow-wrap: anywhere;
}

._description_12kvh_17 {
  font-size: var(--fs-xs);
  color: var(--g500);
  margin: 0;
  line-height: 1.4;
}

._body_12kvh_24 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._metaGrid_12kvh_30 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-3);
}

._metaItem_12kvh_36 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._metaLabel_12kvh_42 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--g400);
}

._metaValue_12kvh_50 {
  font-size: var(--fs-sm);
  color: var(--navy);
  font-weight: 500;
}

._section_12kvh_56 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._sectionLabel_12kvh_62 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--g400);
}

/* Holds the preview's footprint while its code-split chunk loads, so the drawer
 * body doesn't jump. Mirrors FilePreview's .previewBox box metrics. */
._actionsStack_12kvh_72 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._actions_12kvh_72 {
  display: flex;
  gap: var(--s-2);
}

._downloadError_12kvh_83 {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--sev-high-text);
  font-family: var(--f-body);
}

._downloadBtn_12kvh_90 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  background: var(--sidebar-accent);
  border: none;
  border-radius: var(--r-xl);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--f-body);
  color: var(--color-surface);
  cursor: pointer;
}

._downloadBtn_12kvh_90:hover {
  opacity: 0.88;
}

._downloadBtn_12kvh_90:disabled {
  cursor: default;
  opacity: 0.7;
}

._downloadSpinner_12kvh_116 {
  display: inline-flex;
  animation: _downloadSpin_12kvh_116 0.8s linear infinite;
}

@keyframes _downloadSpin_12kvh_116 {
  to {
    transform: rotate(360deg);
  }
}

._compareBtn_12kvh_127 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  background: hsl(var(--doc-secondary));
  border: none;
  border-radius: var(--r-xl);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}

._compareBtn_12kvh_127:hover {
  filter: brightness(0.96);
}

/* The timeline container; each entry styles itself (VersionEntry.module.css). */
._versionList_12kvh_149 {
  display: flex;
  flex-direction: column;
}._backdrop_15jo5_1 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: var(--z-dialog);
}

._panel_15jo5_8 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  display: flex;
  flex-direction: column;
  width: 560px;
  max-width: calc(100vw - var(--s-5));
  background: var(--color-surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

._header_15jo5_24 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
}

._title_15jo5_32 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--g800);
  font-family: var(--f-body);
}

._closeBtn_15jo5_40 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: calc(var(--s-1) * -1) calc(var(--s-1) * -1) calc(var(--s-1) * -1) 0;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--g500);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

._closeBtn_15jo5_40:hover {
  background: var(--g50);
  color: var(--g700);
}

._field_15jo5_61 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--s-5);
}

._field_15jo5_61 + ._field_15jo5_61 {
  margin-top: var(--s-4);
}

._label_15jo5_72 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
  font-family: var(--f-body);
}

._destinationField_15jo5_79 {
  gap: var(--s-1);
}

._folderName_15jo5_83 {
  font-size: var(--fs-sm);
  color: var(--g800);
  font-family: var(--f-body);
  font-weight: 500;
}

._input_15jo5_90 {
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--g800);
  transition: border-color 0.1s, box-shadow 0.1s;
}

._input_15jo5_90:focus {
  outline: none;
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 3px var(--sidebar-active-bg);
}

/* ── Drop zone ───────────────────────────────────────────────── */

._dropZone_15jo5_111 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  cursor: pointer;
  background: var(--g50);
  transition: border-color 0.15s, background 0.15s;
}

._dropZone_15jo5_111:hover,
._dropZoneDragging_15jo5_126 {
  border-color: var(--sidebar-accent);
  background: var(--sidebar-active-bg);
}

._dropZone_15jo5_111:focus-visible {
  outline: none;
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 3px var(--sidebar-active-bg);
}

._dropIcon_15jo5_137 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  border: 1px solid var(--border);
  color: var(--sidebar-accent);
}

._dropZoneDragging_15jo5_126 ._dropIcon_15jo5_137 {
  border-color: var(--sidebar-accent);
}

._dropTitle_15jo5_153 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g700);
  font-family: var(--f-body);
}

._dropHint_15jo5_160 {
  font-size: var(--fs-xs);
  color: var(--g500);
  font-family: var(--f-body);
}

._hiddenInput_15jo5_166 {
  display: none;
}

/* ── Selected-file card ──────────────────────────────────────── */

._fileCard_15jo5_172 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--g50);
}

._fileIcon_15jo5_182 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--r-lg);
  background: var(--color-surface);
  border: 1px solid var(--border);
  color: var(--sidebar-accent);
}

._fileMeta_15jo5_195 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

._fileName_15jo5_203 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g800);
  font-family: var(--f-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._fileSize_15jo5_213 {
  font-size: var(--fs-xs);
  color: var(--g500);
  font-family: var(--f-body);
}

._removeBtn_15jo5_219 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--g500);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

._removeBtn_15jo5_219:hover:not(:disabled) {
  background: var(--color-error-bg);
  color: var(--color-error);
}

._removeBtn_15jo5_219:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Messages ────────────────────────────────────────────────── */

._error_15jo5_246 {
  margin: var(--s-3) 0 0;
  padding: 0 var(--s-5);
  font-size: var(--fs-xs);
  color: var(--sev-high-text);
  font-family: var(--f-body);
}

._progress_15jo5_254 {
  margin: var(--s-3) var(--s-5) 0;
  height: 4px;
  border-radius: var(--r-sm);
  background: var(--g200);
  overflow: hidden;
}

._progressBar_15jo5_262 {
  height: 100%;
  border-radius: var(--r-sm);
  background: var(--sidebar-accent);
  transition: width 0.15s linear;
}

._progressBarIndeterminate_15jo5_269 {
  width: 35%;
  animation: _uploadSweep_15jo5_1 1.1s ease-in-out infinite;
}

@keyframes _uploadSweep_15jo5_1 {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

._versionMessage_15jo5_279 {
  /* Breathing room before the destination below it. */
  margin: 0 0 var(--s-3);
  padding: 0 var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g700);
  font-family: var(--f-body);
}

/* ── Footer actions ──────────────────────────────────────────── */

._actions_15jo5_291 {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--g50);
}

._cancelBtn_15jo5_301,
._confirmBtn_15jo5_302 {
  height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--f-body);
  cursor: pointer;
  transition: background 0.1s, opacity 0.1s;
}

._cancelBtn_15jo5_301 {
  background: var(--color-surface);
  border: 1px solid var(--g300);
  color: var(--g700);
}

._cancelBtn_15jo5_301:hover {
  background: var(--g100);
}

._confirmBtn_15jo5_302 {
  background: var(--sidebar-accent);
  border: none;
  color: var(--color-surface);
}

._confirmBtn_15jo5_302:hover:not(:disabled) {
  opacity: 0.88;
}

._confirmBtn_15jo5_302:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._approvalToggle_15jo5_338 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  cursor: pointer;
  user-select: none;
}

._approvalToggle_15jo5_338 > :first-child {
  margin-top: 1px;
}

._approvalToggleDisabled_15jo5_350 {
  opacity: 0.5;
  pointer-events: none;
}

._approvalToggleText_15jo5_355 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Dims the label alone, not the whole row: the hint next to it explains WHY
   the box is off, so it has to stay readable. */
._approvalToggleBlocked_15jo5_363 ._approvalToggleLabel_15jo5_363 {
  opacity: 0.5;
}

._approvalToggle_15jo5_338:has([data-disabled]) {
  cursor: default;
}

._approvalToggleLabel_15jo5_363 {
  font-size: var(--fs-sm);
  color: var(--navy);
}

._approvalToggleHint_15jo5_376 {
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.4;
}._page_jueag_1 {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--color-surface);
  overflow: hidden;
}

/* The toolbar closes the header block, on the page colour; the tree and table below are white. */
._barRow_jueag_12 {
  grid-column: 1 / -1;
  background: var(--g50);
}

._tableArea_jueag_17 {
  display: flex;
  overflow: hidden;
  min-height: 0;
}

._stateMessage_jueag_23 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g500);
  font-size: var(--fs-sm);
}
._stage_1ez56_1 {
  width: 100%;
  height: 100%;
}

._stageBody_1ez56_6 {
  position: relative;
  display: grid;
  place-items: center;
}

._overlay_1ez56_12 {
  position: absolute;
  pointer-events: auto;
  cursor: default;
}
/* The drawing surface — grows with zoomed content (the viewer scrolls it),
   centres the content when it is smaller than the viewer. */
._stage_gf5sj_3 {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  width: max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay sized to the CONTENT rect, not the letterboxed stage — geometry
   keeps its percentage anchor at any display size. */
._overlayBox_gf5sj_16 {
  position: absolute;
}

._overlayCanvas_gf5sj_20 {
  position: absolute;
  inset: 0;
  touch-action: none;
}

._overlayActive_gf5sj_26 {
  cursor: crosshair;
}

._overlaySelect_gf5sj_30 {
  cursor: default;
}

/* The text tool's floating box — anchored at the box's top-left, box-wide.
   A live preview of the stamp, not a form control: transparent over the
   content, ink in the active color (inline), only a ring marking the box. */
._textInput_gf5sj_37 {
  position: absolute;
  min-width: 60px;

  /* Zero padding — the baked stamp draws from the box's exact top-left, so
     any inset here would make the text jump on commit. */
  padding: 0;
  font-family: var(--f-body);
  line-height: 1.35; /* matches the baked TEXT_LINE_HEIGHT */
  caret-color: var(--sidebar-accent);
  background: transparent;
  border: none;
  border-radius: var(--r-lg);

  /* The ring is the box's only visible bound (no placeholder, no fill) — a
     shadow, not a border, so it never insets the text. Accent even when
     unfocused: the dialog's focus management can blur the input. */
  box-shadow: 0 0 0 2px var(--sidebar-accent);
  resize: none;
  overflow: hidden;
  transform-origin: top left;
  animation: _markupTextInputIn_gf5sj_1 0.12s ease-out;
}

._textInput_gf5sj_37:focus {
  outline: none;
}

@keyframes _markupTextInputIn_gf5sj_1 {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
._toolbar_8g56n_1 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-3);
  padding: 0;
}

._toolGroup_8g56n_9 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

._toolGroup_8g56n_9 + ._toolGroup_8g56n_9 {
  padding-left: var(--s-4);
  border-left: 1px solid var(--border);
}

._toolBtn_8g56n_20 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  color: var(--g600);
  cursor: pointer;
}

._toolBtn_8g56n_20:hover:not(:disabled) {
  background: var(--g50);
  color: var(--navy);
}

._toolBtn_8g56n_20:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._toolBtnActive_8g56n_44,
._toolBtnActive_8g56n_44:hover:not(:disabled) {
  background: var(--info-tint);
  border-color: var(--navy-line);
  color: var(--info);
}

/* Letter-glyph format toggles (B / I / U) and direction chips. */
._boldBtn_8g56n_52 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 700;
}

._italicBtn_8g56n_58 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-style: italic;
}

._underlineBtn_8g56n_64 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  text-decoration: underline;
}

._directionBtn_8g56n_70 {
  width: auto;
  padding: 0 var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

._swatch_8g56n_78 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;

  /* A hairline, so a white swatch has an edge — never a ring around the
     color, which would read as part of it. */
  border: 1px solid var(--navy-line);
  border-radius: var(--r-circle);
  color: var(--white);
  cursor: pointer;
}

._swatch_8g56n_78:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Light fills take a dark check instead. */
._swatchLight_8g56n_100 {
  color: var(--navy);
}

._widthSliderWrap_8g56n_104 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

._widthLabel_8g56n_110 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--g400);
  cursor: pointer;
}

._widthSlider_8g56n_104 {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 16px;
  margin: 0;
  align-self: center;
  background: transparent;
  cursor: pointer;
}

._widthSlider_8g56n_104::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--g200);
}

._widthSlider_8g56n_104::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--width-thumb-size, 8px);
  height: var(--width-thumb-size, 8px);
  margin-top: calc((4px - var(--width-thumb-size, 8px)) / 2);
  border: none;
  border-radius: var(--r-circle);
  background: var(--sidebar-accent);
  box-shadow: var(--shadow-chip);
}

._widthSlider_8g56n_104::-moz-range-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--g200);
  border: none;
}

._widthSlider_8g56n_104::-moz-range-thumb {
  width: var(--width-thumb-size, 8px);
  height: var(--width-thumb-size, 8px);
  border: none;
  border-radius: var(--r-circle);
  background: var(--sidebar-accent);
  box-shadow: var(--shadow-chip);
}

._widthSlider_8g56n_104:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Small centred number input — the text font size. */
._zoomInput_8g56n_169 {
  width: 56px;
  height: 28px;
  padding: 0 var(--s-1);
  font-size: var(--fs-xs);
  font-family: var(--f-body);
  color: var(--g700);
  text-align: center;
  border: 1px solid var(--g300);
  border-radius: var(--r-md);
  background: var(--color-surface);
}

/* The custom-color picker: a conic "rainbow" ring (built from the palette
   tokens) around the native input, so it still reads as "pick any color"
   after a chosen color fills its centre. */

/* The picker is the spectrum itself, with the picked color — if there is one —
   as a dot inside the ring. The input lies over the whole disc, invisible: it
   is the click target only, never what is displayed. */
._customSwatchRing_8g56n_189 {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--r-circle);
  background: conic-gradient(
    var(--markup-red),
    var(--markup-amber),
    var(--markup-green),
    var(--markup-blue),
    var(--color-cad-trade-hvac),
    var(--markup-red)
  );
}

._customSwatchRing_8g56n_189:has(:disabled) {
  opacity: 0.4;
}

._customSwatchDot_8g56n_210 {
  position: absolute;
  inset: 3px;
  border-radius: var(--r-circle);
}

._customSwatchCheck_8g56n_216 {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  filter: drop-shadow(0 0 1px var(--navy));
  pointer-events: none;
}

/* The native color input, reduced to an invisible click target over the ring. */
._customSwatch_8g56n_189 {
  position: absolute;
  inset: 0;
  appearance: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: var(--r-circle);
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

._customSwatch_8g56n_189::-webkit-color-swatch-wrapper {
  padding: 0;
}

._customSwatch_8g56n_189::-webkit-color-swatch {
  border: none;
  border-radius: var(--r-circle);
}
/* The tools float over the document rather than taking a strip of the page:
   reading is the default state, and they appear only for drawing. */
._bar_1k121_3 {
  position: absolute;
  bottom: 60px;
  left: 50%;
  z-index: var(--z-canvas-overlay);
  display: flex;
  align-items: center;
  max-width: calc(100vw - 48px);
  padding: 6px 10px;
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover);
  transform: translateX(-50%);
}

._barBody_1k121_19 {
  display: flex;
  align-items: center;
}
/* The strip beneath the document, and the look its two clusters share — the
   pager and the zoom cluster import `.group`/`.btn` from here, so they stay
   identical. */

._row_150qg_5 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  height: var(--annotations-strip-h);
  padding: 0 16px;
  border-top: 1px solid var(--separator);
  background: rgb(255 255 255 / 70%);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._zoom_150qg_18 {
  margin-left: auto;
}

._group_150qg_2 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

._btn_150qg_2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--g300);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--g700);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

._btn_150qg_2:hover:not(:disabled) {
  background: var(--g50);
  border-color: var(--g400);
}

._btn_150qg_2:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
._label_tgaw3_1 {
  min-width: 68px;
  color: var(--g700);
  font-size: var(--fs-xs);
  text-align: center;

  /* Fixed-width digits: the label must not shift as the page number grows. */
  font-variant-numeric: tabular-nums;
}
._field_ve9kg_1 {
  position: relative;
  display: inline-flex;
}

._input_ve9kg_6 {
  width: 56px;
  height: 28px;
  padding: 0 16px 0 var(--s-1);
  border: 1px solid var(--g300);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--g700);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  text-align: center;
  appearance: textfield;
}

._input_ve9kg_6::-webkit-inner-spin-button,
._input_ve9kg_6::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

._suffix_ve9kg_26 {
  position: absolute;
  top: 50%;
  right: 5px;
  color: var(--g500);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  pointer-events: none;
  transform: translateY(-50%);
}
._stage_1ris9_1 {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  background: var(--g100);
}

._viewer_1ris9_10 {
  flex: 1;
}

._viewerBody_1ris9_14 {
  display: grid;
  place-items: center;
  padding: 24px;
}

/* The strip's place, held while the document loads: hiding it outright would
   let the viewer measure itself 44px too tall and pick a fit-zoom that no
   longer fits once the strip arrives. */
._stripPlaceholder_1ris9_23 {
  flex: 0 0 auto;
  height: var(--annotations-strip-h);
}

._loadError_1ris9_28 {
  margin: auto;
  color: var(--red);
  font-size: var(--fs-sm);
}

._skeleton_1ris9_34 {
  position: absolute;
  inset: 24px;
  border-radius: var(--r-lg);
  background: var(--g200);
  animation: _pulse_1ris9_1 1.4s ease-in-out infinite;
}

@keyframes _pulse_1ris9_1 {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
._card_1r8sh_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 8px 8px;
  padding: 10px;
  border: 1px solid var(--info);
  border-radius: var(--r-xl);
  background: var(--info-tint-soft, var(--g50));
}

._head_1r8sh_12 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

._title_1r8sh_18 {
  font-size: var(--fs-xs);
  font-weight: 600;
}

._marks_1r8sh_23 {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._note_1r8sh_29 {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-xs);
}

._note_1r8sh_29:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

._error_1r8sh_42 {
  margin: 0;
  color: var(--red);
  font-size: var(--fs-2xs);
}

._actions_1r8sh_48 {
  display: flex;
  gap: 6px;
}

._discard_1r8sh_53,
._save_1r8sh_54 {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--g600);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

._save_1r8sh_54 {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

._discard_1r8sh_53:hover {
  background: var(--g50);
}

._save_1r8sh_54:hover:not(:disabled) {
  background: var(--g800);
}

._save_1r8sh_54:disabled {
  opacity: 0.5;
  cursor: default;
}
._bar_1mq4w_1 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--separator);
}

._back_1mq4w_12 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--g600);
  cursor: pointer;
}

._back_1mq4w_12:hover:not(:disabled) {
  background: var(--g50);
}

._back_1mq4w_12:disabled {
  opacity: 0.4;
  cursor: default;
}

._names_1mq4w_34 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

._docName_1mq4w_41 {
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

._version_1mq4w_50 {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--g50);
  color: var(--g600);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

._spacer_1mq4w_60 {
  flex: 1;
}

/* The primary action, in the shape the rest of D-ORCA uses for one — the
   documents bar's upload button. */
._annotate_1mq4w_66 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--s-4);
  border: none;
  border-radius: var(--r-xl);
  background: var(--sidebar-accent);
  color: var(--color-surface);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

._annotate_1mq4w_66:hover:not(:disabled) {
  opacity: 0.88;
}

._annotate_1mq4w_66:disabled {
  opacity: 0.5;
  cursor: default;

  /* The hover belongs to .annotateAnchor above it, which explains the disabled
     state — the button must not swallow the pointer. */
  pointer-events: none;
}

._annotateAnchor_1mq4w_91 {
  display: inline-flex;
}
._row_9c5rs_1 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--r-xl);
}

._row_9c5rs_1:hover {
  background: var(--g50);
}

._rowOff_9c5rs_13 ._rowMain_9c5rs_13 {
  opacity: 0.45;
}

._checkbox_9c5rs_17 {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 6px 0 0;
  accent-color: var(--info);
  cursor: pointer;
}

._avatar_9c5rs_26 {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-circle);
  background: var(--info);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

._rowMain_9c5rs_13 {
  flex: 1;
  min-width: 0;
}

._author_9c5rs_45 {
  display: block;
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The date, with the delete button under it rather than beside it. */
._rowSide_9c5rs_55 {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

._when_9c5rs_63 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  white-space: nowrap;
}

._note_9c5rs_69 {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--g600);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

._marks_9c5rs_80 {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-2xs);
  color: var(--g400);
}

._delete_9c5rs_87 {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--g400);
  cursor: pointer;
  opacity: 0;
}

._row_9c5rs_1:hover ._delete_9c5rs_87,
._delete_9c5rs_87:focus-visible {
  opacity: 1;
}

._delete_9c5rs_87:hover {
  background: var(--g100);
  color: var(--navy);
}
._panel_19qhk_1 {
  display: flex;
  flex: 0 0 272px;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--separator);
  box-shadow: var(--shadow-drawer);
  z-index: var(--z-raised-2);
}

._head_19qhk_12 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
}

._title_19qhk_19 {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--g500);
}

._count_19qhk_28 {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: var(--g400);
}

._listWrap_19qhk_34 {
  flex: 1;
}

._list_19qhk_34 {
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
}

._empty_19qhk_44 {
  flex: 1;
  margin: 0;
  padding: 24px 16px;
  font-size: var(--fs-xs);
  color: var(--g400);
  text-align: center;
}

._foot_19qhk_53 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--separator);
}

._download_19qhk_61,
._downloadGhost_19qhk_62 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--s-4);
  border: none;
  border-radius: var(--r-xl);
  background: var(--sidebar-accent);
  color: var(--color-surface);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

._downloadGhost_19qhk_62 {
  border: 1px solid var(--sidebar-accent);
  background: transparent;
  color: var(--sidebar-accent);
}

._download_19qhk_61:hover,
._downloadGhost_19qhk_62:hover {
  opacity: 0.88;
}

._download_19qhk_61:disabled,
._downloadGhost_19qhk_62:disabled {
  opacity: 0.5;
  cursor: default;

  /* The hover belongs to .downloadAnchor, which says why. */
  pointer-events: none;
}

._downloadAnchor_19qhk_95 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._retry_19qhk_105 {
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-blue);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

._error_19qhk_115 {
  margin: 0;
  color: var(--red);
  font-size: var(--fs-2xs);
}
._content_1p8n0_1 {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: var(--white);
  box-shadow: var(--shadow-page);
}

/* Still measured and still loading — just not visible yet. */
._pending_1p8n0_10 {
  visibility: hidden;
}
._chip_2l4c7_1 {
  position: fixed;
  z-index: var(--z-tooltip);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 240px;
  padding: 6px 9px;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-chip);
  pointer-events: none;
}

._author_2l4c7_16 {
  font-size: var(--fs-2xs);
  font-weight: 600;
}

._when_2l4c7_21 {
  font-size: var(--fs-3xs);
  opacity: 0.75;
}

._note_2l4c7_26 {
  font-size: var(--fs-3xs);
  opacity: 0.85;
  line-height: 1.35;
}
._page_xrica_1 {
  /* The bottom strip's height, owned here: the body reserves it while the
     document loads, and ControlsRow fills it. The fit-zoom is measured
     against the viewer, so the two must never disagree. */
  --annotations-strip-h: 44px;

  /* Fills the page body: the document, its sidebar and the strip beneath own
     the space, and each scrolls on its own. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--g50);
}

._body_xrica_16 {
  display: flex;
  flex: 1;
  min-height: 0;
}
._pill_1md6t_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
  box-shadow: var(--shadow-card);
}

._pillLabel_1md6t_15 {
  color: var(--g600);
}

._pillValue_1md6t_19 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

/* Red-tinted treatment for the Exceptions pill (count card). */
._pillAlert_1md6t_26 {
  background: var(--sev-critical-bg);
  border-color: var(--sev-critical-bg);
  color: var(--sev-critical-text);
}

._pillAlert_1md6t_26 ._pillLabel_1md6t_15,
._pillAlert_1md6t_26 ._pillValue_1md6t_19 {
  color: var(--sev-critical-text);
}
._panel_1ess7_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
}

._head_1ess7_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

._heading_1ess7_19 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--info);
}

._title_1ess7_31 {
  color: var(--info);
}

._meta_1ess7_35 {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--g500);
}

._count_1ess7_42 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._grid_1ess7_48 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

._tile_1ess7_54 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms;
  appearance: none;
  font: inherit;
  color: inherit;
}

._tile_1ess7_54:hover {
  border-color: var(--g300);
  box-shadow: var(--shadow-card-hover);
}

._tile_1ess7_54[data-active='true'] {
  border-color: var(--color-success-mid);
  box-shadow: 0 0 0 1px var(--color-success-mid) inset, var(--shadow-card-hover);
}

._tileSelectedDot_1ess7_81 {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--g200);
}

._tile_1ess7_54[data-active='true'] ._tileSelectedDot_1ess7_81 {
  background: var(--color-success-mid);
}

._tileHead_1ess7_95 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

._glyphBox_1ess7_101 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-lg);
  background: var(--info-tint);
  color: var(--info);
}

._tileTitle_1ess7_112 {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._tileStages_1ess7_119 {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--g500);
}

._tileFoot_1ess7_126 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
}

._healthLabel_1ess7_134 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g500);
}

._bar_1ess7_143 {
  display: block;
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--g100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

._barFill_1ess7_153 {
  display: block;
  height: 100%;
  background: var(--color-success-mid);
  border-radius: var(--r-pill);
}

._healthValue_1ess7_160 {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

@media (width <= 1100px) {
  ._grid_1ess7_48 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
._panel_bez00_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
}

._head_bez00_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

._heading_bez00_19 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--info);
}

._title_bez00_26 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._legend_bez00_34 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

._legendItem_bez00_43 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._legendDot_bez00_52 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--g300);
}

._legendDot_bez00_52[data-status='complete']    { background: var(--color-success-mid); }
._legendDot_bez00_52[data-status='in-progress'] { background: var(--info); }
._legendDot_bez00_52[data-status='delayed']     { background: var(--amber); }
._legendDot_bez00_52[data-status='pending']     { background: var(--g400); }

._row_bez00_64 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
}

._stage_bez00_70 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms;
  appearance: none;
  font: inherit;
  color: inherit;
}

._stage_bez00_70:hover {
  border-color: var(--g300);
}

/* The active stage carries a stronger 2px border in its status colour
   so the link between the lifecycle row and the Stage Detail panel
   below is unambiguous. */
._stage_bez00_70[data-active='true'] {
  border-width: 2px;
  padding: calc(var(--s-4) - 1px);
}

._stage_bez00_70[data-status='complete'][data-active='true']    { border-color: var(--color-success-mid); }
._stage_bez00_70[data-status='in-progress'][data-active='true'] { border-color: var(--info); }
._stage_bez00_70[data-status='delayed'][data-active='true']     { border-color: var(--amber); }
._stage_bez00_70[data-status='pending'][data-active='true']     { border-color: var(--g400); }

._stageHead_bez00_104 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
}

._stageGlyph_bez00_111 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--info-tint);
  color: var(--info);
}

._stageIndex_bez00_122 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g500);
}

._stageStatusDot_bez00_131 {
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  background: var(--g300);
}

._stage_bez00_70[data-status='complete']    ._stageStatusDot_bez00_131 { background: var(--color-success-mid); }
._stage_bez00_70[data-status='in-progress'] ._stageStatusDot_bez00_131 { background: var(--info); }
._stage_bez00_70[data-status='delayed']     ._stageStatusDot_bez00_131 { background: var(--amber); }
._stage_bez00_70[data-status='pending']     ._stageStatusDot_bez00_131 { background: var(--g400); }

._stageBody_bez00_143 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._stageTitle_bez00_149 {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
}

._stageOwner_bez00_156 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._barWrap_bez00_161 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-2);
}

._bar_bez00_161 {
  display: block;
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--g100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

._barFill_bez00_178 {
  display: block;
  height: 100%;
  background: var(--g300);
  border-radius: var(--r-pill);
}

._stage_bez00_70[data-status='complete']    ._barFill_bez00_178 { background: var(--color-success-mid); }
._stage_bez00_70[data-status='in-progress'] ._barFill_bez00_178 { background: var(--info); }
._stage_bez00_70[data-status='delayed']     ._barFill_bez00_178 { background: var(--amber); }
._stage_bez00_70[data-status='pending']     ._barFill_bez00_178 { background: var(--g400); }

._barValue_bez00_190 {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._stageFoot_bez00_197 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

._due_bez00_204 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._pill_bez00_212 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

._stage_bez00_70[data-status='complete']    ._pill_bez00_212 { background: var(--status-completed-bg);  color: var(--status-completed-text); }
._stage_bez00_70[data-status='in-progress'] ._pill_bez00_212 { background: var(--info-tint);            color: var(--info); }
._stage_bez00_70[data-status='delayed']     ._pill_bez00_212 { background: var(--status-for-review-bg); color: var(--status-for-review-text); }
._stage_bez00_70[data-status='pending']     ._pill_bez00_212 { background: var(--g100);                 color: var(--g600); }

@media (width <= 1100px) {
  ._row_bez00_64 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
._panel_37wns_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
}

._head_37wns_12 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

._heading_37wns_19 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

._glyphBox_37wns_25 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background: var(--info-tint);
  color: var(--info);
}

._headingText_37wns_36 {
  display: flex;
  flex-direction: column;
}

._eyebrow_37wns_41 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--info);
}

._title_37wns_50 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--navy);
}

._action_37wns_58 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 6px var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms;
}

._action_37wns_58:hover {
  border-color: var(--g300);
}

._action_37wns_58:disabled {
  color: var(--g400);
  cursor: not-allowed;
  border-color: var(--separator);
}

._action_37wns_58:disabled:hover {
  border-color: var(--separator);
}

._facts_37wns_89 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

._fact_37wns_89 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
}

._factLabel_37wns_105 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g500);
}

._factValue_37wns_117 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._itemsBlock_37wns_124 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
}

._itemsHead_37wns_134 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

._itemsTitle_37wns_141 {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._itemsCount_37wns_148 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._itemsCount_37wns_148 strong {
  color: var(--navy);
}

._items_37wns_124 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

._item_37wns_124 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._item_37wns_124[data-done='true'] {
  background: var(--flow-status-done-bg);
  border-color: var(--flow-status-done-bg);
  color: var(--navy);
}

._blockers_37wns_186 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._blockersTitle_37wns_192 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g600);
}

._blockersList_37wns_204 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

._blocker_37wns_186 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px var(--s-3);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._blockerDot_37wns_225 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  flex-shrink: 0;
}

._blocker_37wns_186[data-severity='high'] {
  background: var(--flow-sev-high-bg);
  border-color: var(--flow-sev-high-bg);
}

._blocker_37wns_186[data-severity='high'] ._blockerDot_37wns_225 {
  background: var(--sev-critical-text);
}

._blocker_37wns_186[data-severity='medium'] {
  background: var(--flow-sev-med-bg);
  border-color: var(--flow-sev-med-bg);
}

._blocker_37wns_186[data-severity='medium'] ._blockerDot_37wns_225 {
  background: var(--amber);
}

@media (width <= 1100px) {
  ._facts_37wns_89 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._items_37wns_124 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
._panel_16sh0_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
}

._head_16sh0_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

._heading_16sh0_19 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

._glyphBox_16sh0_25 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--sev-critical-bg);
  color: var(--sev-critical-text);
}

._title_16sh0_36 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._count_16sh0_44 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._list_16sh0_50 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

._exception_16sh0_59 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 120ms, transform 120ms;
}

._exception_16sh0_59:hover {
  box-shadow: var(--shadow-card-hover);
}

._exception_16sh0_59[data-active='true'] {
  box-shadow: 0 0 0 1px var(--navy) inset;
}

._exception_16sh0_59[data-severity='high'] {
  background: var(--flow-sev-high-bg);
  border-color: var(--flow-sev-high-bg);
}

._exception_16sh0_59[data-severity='medium'] {
  background: var(--flow-sev-med-bg);
  border-color: var(--flow-sev-med-bg);
}

._exceptionHead_16sh0_93 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

._exceptionDot_16sh0_99 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  flex-shrink: 0;
}

._exception_16sh0_59[data-severity='high']   ._exceptionDot_16sh0_99 { background: var(--sev-critical-text); }
._exception_16sh0_59[data-severity='medium'] ._exceptionDot_16sh0_99 { background: var(--amber); }

._exceptionTitle_16sh0_109 {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._exceptionBody_16sh0_116 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g700);
  line-height: 1.5;
}

._exceptionFoot_16sh0_123 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: 2px;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g600);
}
._panel_quycd_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
}

._head_quycd_12 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

._heading_quycd_18 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--info);
}

._title_quycd_25 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._meta_quycd_33 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g500);
}

._grid_quycd_40 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
}

._card_quycd_46 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
}

._cardHead_quycd_56 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

._dot_quycd_62 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--g300);
}

._card_quycd_46[data-status='complete']    ._dot_quycd_62 { background: var(--color-success-mid); }
._card_quycd_46[data-status='in-progress'] ._dot_quycd_62 { background: var(--info); }
._card_quycd_46[data-status='delayed']     ._dot_quycd_62 { background: var(--amber); }
._card_quycd_46[data-status='pending']     ._dot_quycd_62 { background: var(--g400); }

._stage_quycd_74 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g500);
}

._owner_quycd_83 {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._doneRow_quycd_90 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
}

@media (width <= 1100px) {
  ._grid_quycd_40 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Flow View page body — rounded panels stacked vertically on the page colour. */

._page_ji0g8_3 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  color: var(--navy);
  font-family: var(--f-body);
}

/* Two-column row used for Stage Detail (left, wider) + Exception
   Layer (right, narrower). Collapses to a single column under
   1100px so neither panel becomes unreadable. */
._row_ji0g8_14 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

@media (width <= 1100px) {
  ._row_ji0g8_14 {
    grid-template-columns: 1fr;
  }
}
._hero_uj35f_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

._top_uj35f_11 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: start;
}

._identity_uj35f_18 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

._kicker_uj35f_25 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g500);
}

._nameRow_uj35f_34 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

._name_uj35f_34 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

._scope_uj35f_50 {
  margin: var(--s-1) 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
}

._statusPill_uj35f_57 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

._statusDot_uj35f_70 {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: currentColor;
}

._statusPill_uj35f_57[data-status='on-track'] {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

._statusPill_uj35f_57[data-status='at-risk'] {
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
}

._statusPill_uj35f_57[data-status='delayed'],
._statusPill_uj35f_57[data-status='blocked'] {
  background: var(--status-rejected-bg);
  color: var(--status-rejected-text);
}

._metrics_uj35f_93 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, max-content);
  gap: var(--s-5);
  margin: 0;
}

._metric_uj35f_93 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._metricLabel_uj35f_107 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g500);
}

._metricValue_uj35f_116 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._progressBlock_uj35f_124 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--separator);
}

._progressHead_uj35f_132 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

._progressLabel_uj35f_138 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g500);
}

._progressValue_uj35f_147 {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}

._progressBar_uj35f_155 {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--g100);
  overflow: hidden;
}

._progressFill_uj35f_163 {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--info), var(--blue));
  transition: width 240ms ease;
}

._milestone_uj35f_171 {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._milestoneTitle_uj35f_180 {
  font-weight: 600;
  color: var(--g700);
}

._milestoneDate_uj35f_185 {
  color: var(--g500);
}

@media (width <= 900px) {
  ._top_uj35f_11 {
    grid-template-columns: 1fr;
  }

  ._metrics_uj35f_93 {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
  }
}
._panel_p1pc0_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  overflow: hidden;
}


._head_p1pc0_12 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._headLeft_p1pc0_21 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._title_p1pc0_28 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._subtitle_p1pc0_36 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._count_p1pc0_43 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._list_p1pc0_49 {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

._row_p1pc0_56 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._row_p1pc0_56:last-child {
  border-bottom: none;
}

._marker_p1pc0_69 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--g300);
  flex-shrink: 0;
}

._row_p1pc0_56[data-status='in-progress'] ._marker_p1pc0_69 {
  background: var(--info);
  box-shadow: 0 0 0 3px var(--info-tint);
}

._row_p1pc0_56[data-status='scheduled'] ._marker_p1pc0_69 {
  background: var(--g400);
}

._row_p1pc0_56[data-status='staging'] ._marker_p1pc0_69 {
  background: var(--amber);
}

._row_p1pc0_56[data-status='completed'] ._marker_p1pc0_69 {
  background: var(--color-success-mid);
}

._main_p1pc0_94 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._taskTitle_p1pc0_101 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._row_p1pc0_56[data-status='completed'] ._taskTitle_p1pc0_101 {
  color: var(--g500);
  text-decoration: line-through;
  text-decoration-color: var(--g300);
}

._taskMeta_p1pc0_114 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._statusPill_p1pc0_120 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._statusPill_p1pc0_120[data-status='scheduled'] {
  background: var(--g100);
  color: var(--g700);
}

._statusPill_p1pc0_120[data-status='in-progress'] {
  background: var(--info-tint);
  color: var(--info);
}

._statusPill_p1pc0_120[data-status='staging'] {
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
}

._statusPill_p1pc0_120[data-status='completed'] {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}
._panel_lx13r_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  overflow: hidden;
}


._head_lx13r_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._title_lx13r_21 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._count_lx13r_29 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._empty_lx13r_35 {
  margin: 0;
  padding: var(--s-5);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g500);
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

._list_lx13r_48 {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

._alert_lx13r_55 {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._alert_lx13r_55:last-child {
  border-bottom: none;
}

._icon_lx13r_66 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  flex-shrink: 0;
}

._alert_lx13r_55[data-severity='critical'] ._icon_lx13r_66 {
  background: var(--sev-critical-bg);
  color: var(--sev-critical-text);
}

._alert_lx13r_55[data-severity='high'] ._icon_lx13r_66 {
  background: var(--sev-high-bg);
  color: var(--sev-high-text);
}

._alert_lx13r_55[data-severity='medium'] ._icon_lx13r_66 {
  background: var(--sev-med-bg);
  color: var(--sev-med-text);
}

._alert_lx13r_55[data-severity='low'] ._icon_lx13r_66 {
  background: var(--info-tint);
  color: var(--info);
}

._body_lx13r_96 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  flex: 1;
}

._alertHead_lx13r_104 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

._alertTitle_lx13r_111 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._timestamp_lx13r_118 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
  flex-shrink: 0;
}

._alertBody_lx13r_125 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--g600);
}

._action_lx13r_133 {
  appearance: none;
  align-self: flex-start;
  margin-top: var(--s-1);
  padding: 0;
  background: transparent;
  color: var(--info);
  border: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

._action_lx13r_133::after {
  content: '›';
  font-size: var(--fs-md);
  line-height: 1;
}

._action_lx13r_133:hover {
  text-decoration: underline;
}
._panel_1m554_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  overflow: hidden;
}

._head_1m554_11 {
  padding: var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._title_1m554_16 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._subtitle_1m554_24 {
  margin: 2px 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._body_1m554_31 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  flex: 1;
}

._toggleGrid_1m554_39 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

._toggle_1m554_39 {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g600);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}

._toggle_1m554_39:hover {
  background: var(--g100);
}

._toggle_1m554_39[data-active='true'] {
  background: var(--info-tint);
  border-color: var(--info);
  color: var(--info);
}

._toggleDot_1m554_73 {
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  border: 2px solid var(--g300);
  flex-shrink: 0;
}

._toggle_1m554_39[data-active='true'] ._toggleDot_1m554_73 {
  background: var(--info);
  border-color: var(--info);
}

._toggleLabel_1m554_87 {
  flex: 1;
  min-width: 0;
}

._field_1m554_92 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._fieldLabel_1m554_98 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g500);
}

._textarea_1m554_107 {
  appearance: none;
  resize: vertical;
  width: 100%;
  padding: var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._textarea_1m554_107:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 3px var(--info-tint);
}

._footer_1m554_126 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

._hint_1m554_133 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._submit_1m554_139 {
  appearance: none;
  height: 36px;
  padding: 0 var(--s-4);
  background: var(--navy);
  color: var(--color-surface);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

._submit_1m554_139:hover {
  background: var(--g800);
}

._updates_1m554_158 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--g50);
  border-top: 1px solid var(--separator);
}

._updatesTitle_1m554_167 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g500);
}

._updatesList_1m554_176 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._updateItem_1m554_185 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
}

._updateDot_1m554_194 {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--color-success-mid);
}

._updateBody_1m554_201 {
  color: var(--g700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._updateTime_1m554_208 {
  color: var(--g500);
  font-size: var(--fs-2xs);
}

@media (width <= 600px) {
  ._toggleGrid_1m554_39 {
    grid-template-columns: 1fr;
  }
}
._panel_10d2w_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  overflow: hidden;
}

._head_10d2w_11 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._title_10d2w_20 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._count_10d2w_28 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._grid_10d2w_34 {
  list-style: none;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}

._card_10d2w_44 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  transition: border-color 120ms ease, background 120ms ease;
}

._card_10d2w_44:hover {
  background: var(--color-surface);
  border-color: var(--info);
}

._icon_10d2w_60 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  color: var(--info);
  flex-shrink: 0;
}

._body_10d2w_73 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._codeRow_10d2w_80 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._code_10d2w_80 {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--g500);
}

._newPill_10d2w_94 {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 var(--s-1);
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

._docTitle_10d2w_109 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._meta_10d2w_119 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._panel_1gwgw_1 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  overflow: hidden;
}

._head_1gwgw_8 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  border-bottom: 1px solid var(--separator);
  flex-wrap: wrap;
}

._headLeft_1gwgw_18 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._title_1gwgw_25 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._subtitle_1gwgw_33 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._summary_1gwgw_40 {
  display: grid;
  grid-auto-flow: column;
  gap: var(--s-5);
  margin: 0;
}

._summaryItem_1gwgw_47 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._summaryLabel_1gwgw_53 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g500);
}

._summaryValue_1gwgw_62 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
}

._summaryValue_1gwgw_62[data-tone='warn'] {
  color: var(--color-warn);
}

._table_1gwgw_74 {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._table_1gwgw_74 thead th {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g500);
  background: var(--g50);
  border-bottom: 1px solid var(--separator);
}

._table_1gwgw_74 tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--separator);
  color: var(--navy);
  vertical-align: middle;
}

._table_1gwgw_74 tbody tr:last-child td {
  border-bottom: none;
}

._table_1gwgw_74 tbody tr[data-flagged='true'] {
  background: var(--color-warn-bg);
}

._muted_1gwgw_109 {
  color: var(--g600);
}

._numCol_1gwgw_113,
._perfCol_1gwgw_114 {
  width: 1%;
  white-space: nowrap;
}

._perfCol_1gwgw_114 {
  min-width: 180px;
  width: 22%;
}

._workerCell_1gwgw_124 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._avatar_1gwgw_130 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-circle);
  background: var(--navy);
  color: var(--color-surface);
  font-family: var(--f-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

._workerName_1gwgw_145 {
  font-weight: 600;
}

._levelPill_1gwgw_149 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

._levelPill_1gwgw_149[data-level='expert'] {
  background: var(--info-tint);
  color: var(--info);
}

._levelPill_1gwgw_149[data-level='senior'] {
  background: var(--brand-blue-pale);
  color: var(--brand-blue-deep);
}

._levelPill_1gwgw_149[data-level='mid'] {
  background: var(--g100);
  color: var(--g700);
}

._levelPill_1gwgw_149[data-level='junior'],
._levelPill_1gwgw_149[data-level='apprentice'] {
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
}

._perfCell_1gwgw_182 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._perfValue_1gwgw_188 {
  min-width: 40px;
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._perfValue_1gwgw_188[data-tier='high'] {
  color: var(--color-success);
}

._perfValue_1gwgw_188[data-tier='low'] {
  color: var(--color-warn);
}

._perfBar_1gwgw_204 {
  position: relative;
  flex: 1;
  min-width: 80px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--g100);
  overflow: hidden;
}

._perfFill_1gwgw_214 {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
}

._perfFill_1gwgw_214[data-tier='high'] {
  background: var(--color-success-mid);
}

._perfFill_1gwgw_214[data-tier='mid'] {
  background: var(--info);
}

._perfFill_1gwgw_214[data-tier='low'] {
  background: var(--color-warn);
}

@media (width <= 800px) {
  ._summary_1gwgw_40 {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
}
._panel_1xlo8_1 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  overflow: hidden;
}

._head_1xlo8_8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--separator);
}

._headLeft_1xlo8_17 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._title_1xlo8_24 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._subtitle_1xlo8_32 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._pending_1xlo8_39 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-2);
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._list_1xlo8_54 {
  list-style: none;
  margin: 0;
  padding: var(--s-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

._card_1xlo8_63 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
}

._card_1xlo8_63[data-pending='true'] {
  background: var(--color-surface);
  border-left: 3px solid var(--color-warn);
  padding-left: calc(var(--s-4) - 2px);
}

._cardHead_1xlo8_79 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
}

._avatar_1xlo8_86 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  background: var(--info);
  color: var(--color-surface);
  font-family: var(--f-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

._identity_1xlo8_101 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._fromName_1xlo8_107 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._fromRole_1xlo8_114 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._timestamp_1xlo8_120 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
  flex-shrink: 0;
}

._body_1xlo8_127 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g700);
  flex: 1;
}

._actions_1xlo8_136 {
  display: flex;
  gap: var(--s-2);
}

._respond_1xlo8_141,
._snooze_1xlo8_142 {
  appearance: none;
  height: 30px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

._respond_1xlo8_141 {
  background: var(--navy);
  color: var(--color-surface);
  border: none;
}

._respond_1xlo8_141:hover {
  background: var(--g800);
}

._snooze_1xlo8_142 {
  background: var(--color-surface);
  color: var(--g600);
  border: 1px solid var(--border);
}

._snooze_1xlo8_142:hover {
  background: var(--g50);
}

._resolved_1xlo8_175 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--status-completed-text);
}

._resolved_1xlo8_175::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: currentColor;
}

@media (width <= 1100px) {
  ._list_1xlo8_54 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 700px) {
  ._list_1xlo8_54 {
    grid-template-columns: 1fr;
  }
}
._page_1luc5_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

._grid_1luc5_7 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s-4);
}

._grid_1luc5_7 > * {
  min-width: 0;
}

@media (width <= 1100px) {
  ._grid_1luc5_7 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}
button._button_15c25_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g700);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

button._button_15c25_1:hover:not(:disabled) {
  color: var(--white);
  background: var(--sidebar-accent);
  border-color: var(--sidebar-accent);
}

button._button_15c25_1:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._popup_15c25_28 {
  min-width: 160px;
  padding: var(--s-1);
}

._item_15c25_33 {
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
}

._itemIcon_15c25_38 {
  flex: none;
  width: 22px;
  height: 22px;
}

._soon_15c25_44 {
  margin-left: auto;
  padding-left: var(--s-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g400);
  white-space: nowrap;
}._card_1ch6b_1 {
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}

/* Previous content stays readable but dimmed while the next timeframe loads,
   under a thin sweeping line along the top edge. */
._refreshing_1ch6b_13 {
  position: relative;
  overflow: hidden;
}

._refreshing_1ch6b_13 > * {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

._refreshing_1ch6b_13::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 2px;
  background: var(--sidebar-accent);
  animation: _dorca-prod-refresh-sweep_1ch6b_1 1.2s ease-in-out infinite;
}

@keyframes _dorca-prod-refresh-sweep_1ch6b_1 {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  ._refreshing_1ch6b_13::before {
    width: 100%;
    animation: none;
  }
}
._bar_1kfha_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
}

._left_1kfha_11 {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

._label_1kfha_17 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-right: var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g500);
  border-right: 1px solid var(--border-subtle);
  white-space: nowrap;
}

._options_1kfha_32 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

._option_1kfha_32 {
  padding: var(--s-2) var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g600);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

._option_1kfha_32:hover:not(._active_1kfha_52) {
  color: var(--navy);
  background: var(--g100);
}

._option_1kfha_32._active_1kfha_52 {
  color: var(--sidebar-accent);
  background: var(--prod-tone-teal-bg-light);
  border-color: var(--sidebar-accent);
}

._rangePicker_1kfha_63 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-left: var(--s-3);
  border-left: 1px solid var(--border-subtle);
}

._dateFieldWrap_1kfha_71 {
  width: 150px;
}

._rangeArrow_1kfha_75 {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--g400);
}

._showing_1kfha_82 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g500);
  white-space: nowrap;
}

._showing_1kfha_82 strong {
  color: var(--navy);
}

@media (width <= 760px) {
  ._bar_1kfha_1 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
}._cardTop_1wnoc_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

._iconBox_1wnoc_8 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-xl);
  border-width: 1px;
  border-style: solid;
}

._iconBox_1wnoc_8[data-tone='green'] {
  color: var(--prod-tone-green-fg);
  background: var(--prod-tone-green-bg);
  border-color: var(--prod-tone-green-border);
}

._iconBox_1wnoc_8[data-tone='amber'] {
  color: var(--prod-tone-amber-fg);
  background: var(--prod-tone-amber-bg);
  border-color: var(--prod-tone-amber-border);
}

._iconBox_1wnoc_8[data-tone='teal'] {
  color: var(--prod-tone-teal-fg);
  background: var(--prod-tone-teal-bg);
  border-color: var(--prod-tone-teal-border);
}

._iconBox_1wnoc_8[data-tone='slate'] {
  color: var(--prod-tone-slate-fg);
  background: var(--prod-tone-slate-bg);
  border-color: var(--prod-tone-slate-border);
}

._iconBox_1wnoc_8[data-tone='red'] {
  color: var(--prod-tone-red-fg);
  background: var(--prod-tone-red-bg);
  border-color: var(--prod-tone-red-border);
}

._badge_1wnoc_49 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--g400);
}

._trend_1wnoc_57 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

._trendValue_1wnoc_67 {
  font-variant-numeric: tabular-nums;
}

._trend_1wnoc_57[data-direction='up'] {
  color: var(--prod-trend-up);
}

._trend_1wnoc_57[data-direction='down'] {
  color: var(--prod-trend-down);
}

._value_1wnoc_79 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
}

._label_1wnoc_89 {
  margin: var(--s-1) 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--g600);
}

._sublabel_1wnoc_98 {
  margin: var(--s-1) 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g400);
}

._extremesBody_1wnoc_105 {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
}

._extremeList_1wnoc_112 {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._extremeRow_1wnoc_121 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

._extremeName_1wnoc_128 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._extremePill_1wnoc_138 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-xl);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  border: 1px solid var(--border-subtle);
  font-weight: 700;
}

._extremePill_1wnoc_138[data-rank='best'] {
  background: var(--prod-tone-green-bg);
  color: var(--prod-tone-green-fg);
}

._extremePill_1wnoc_138[data-rank='worst'] {
  background: var(--prod-tone-red-bg);
  color: var(--prod-tone-red-fg);
}

._extremeRank_1wnoc_161 {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-inline-end: 4px;
  opacity: 0.85;
}

/* Placement only — the glyph's look is InfoTip's. */
._infoTip_1wnoc_170 {
  margin-left: var(--s-1);
  vertical-align: middle;
  position: relative;
  top: -2px;
}._strip_14na7_1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

._strip_14na7_1 > * {
  min-width: 0;
}

@media (width <= 1280px) {
  ._strip_14na7_1 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width <= 760px) {
  ._strip_14na7_1 {
    grid-template-columns: 1fr 1fr;
  }
}._list_zerlh_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

._line_zerlh_10 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

._mark_zerlh_16 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  /* Optically centres the glyph against the first line of text. */
  margin-top: 1px;
  color: var(--color-error);
}

._line_zerlh_10[data-satisfied='true'] ._mark_zerlh_16 {
  color: var(--color-success);
}

._lineBody_zerlh_31 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._lineText_zerlh_37 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._line_zerlh_10[data-satisfied='true'] ._lineText_zerlh_37 {
  color: var(--g500);
}

._lineWhy_zerlh_47 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--g600);
}

._cta_zerlh_54 {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.15s ease;
}

._cta_zerlh_54:hover {
  background: var(--g50);
}._root_dp274_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._summary_dp274_7 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0;
  border: none;
  background: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
  text-align: left;
  cursor: pointer;
}

._measured_dp274_21 {
  font-weight: 500;
  color: var(--navy);
}

._separator_dp274_26 {
  color: var(--g400);
}

._shortfall_dp274_30 {
  color: var(--g600);
}

/* Per project convention: ChevronDownIcon rotated -90deg when collapsed —
   never a text glyph. */
._caret_dp274_36 {
  display: inline-flex;
  align-items: center;
  color: var(--g500);
  transition: transform 0.15s ease;
}

._caret_dp274_36[data-collapsed='true'] {
  transform: rotate(-90deg);
}

._detail_dp274_47 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--g50);
}

._note_dp274_58 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--g600);
  max-width: 62ch;
}._header_10fxs_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

._title_10fxs_9 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--navy);
}

._title_10fxs_9[data-size='sm'] {
  font-size: var(--fs-sm);
}

._title_10fxs_9[data-size='md'] {
  font-size: var(--fs-md);
}

._title_10fxs_9 svg {
  color: var(--sidebar-accent);
}

._meta_10fxs_31 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--g400);
}
._chart_1bzfc_1 {
  width: 100%;
  height: 160px;
}._tooltip_7fqpc_1 {
  overflow: hidden;
  font-family: var(--f-body);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
}

._tooltipHeader_7fqpc_10 {
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--inverse-text-strong);
  background: var(--g700);
}

._tooltipBody_7fqpc_18 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
}

._tooltipRow_7fqpc_25 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

._tooltipDot_7fqpc_31 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
}

._tooltipText_7fqpc_37 {
  font-size: var(--fs-xs);
  color: var(--g700);
}._root_1xnrh_1 {
  flex: 1;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-6) var(--s-4);
  text-align: center;
}

._message_1xnrh_13 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
}

._hint_1xnrh_20 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}._footer_qa93v_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--separator);
}

._legend_qa93v_11 {
  display: flex;
  gap: var(--s-4);
}

._legendItem_qa93v_16 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._periodAvg_qa93v_25 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._periodAvgValue_qa93v_31 {
  color: var(--color-success);
}

._titleRow_qa93v_35 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

._infoIcon_qa93v_41 {
  display: inline-flex;
  align-items: center;
  color: var(--g400);
  cursor: help;
}

._infoIcon_qa93v_41:hover {
  color: var(--g600);
}._bands_jp0c2_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

._band_jp0c2_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._bandTop_jp0c2_13 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

._bandLabel_jp0c2_19 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g700);
}

._bandPct_jp0c2_25 {
  font-family: var(--f-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}

._track_jp0c2_32 {
  width: 100%;
  height: 6px;
  background: var(--g100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

._fill_jp0c2_40 {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  will-change: width;
}

._fill_jp0c2_40[data-tone='green'] {
  background: var(--green);
}

._fill_jp0c2_40[data-tone='amber'] {
  background: var(--amber);
}

._fill_jp0c2_40[data-tone='red'] {
  background: var(--red);
}

._fill_jp0c2_40[data-tone='slate'] {
  background: var(--g300);
}

._note_jp0c2_63 {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--g400);
  border-top: 1px solid var(--separator);
}
._pill_z9euw_1 {
  display: inline-flex;
  align-items: center;
  height: calc(1.4 * var(--fs-sm));
  padding: 0 var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
}

._pill_z9euw_1[data-tone='high'] {
  color: var(--status-completed-text);
  background: var(--status-completed-bg);
  border-color: var(--finance-insight-border-green);
}

._pill_z9euw_1[data-tone='medium'] {
  color: var(--status-for-review-text);
  background: var(--status-for-review-bg);
  border-color: var(--dashboard-warning-border);
}

._pill_z9euw_1[data-tone='low'] {
  color: var(--status-rejected-text);
  background: var(--status-rejected-bg);
  border-color: var(--finance-insight-border-red);
}

/* Neutral, not red — a data gap ("not computable"), distinct from a low score. */
._pill_z9euw_1[data-tone='data-issue'] {
  color: var(--prod-tone-slate-fg);
  background: var(--prod-tone-slate-bg);
  border-color: var(--prod-tone-slate-border);
}
._cell_17z6r_1 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

._track_17z6r_7 {
  flex: 0 1 120px;
  min-width: 32px;
  height: 6px;
  background: var(--g100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

._fill_17z6r_16 {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
}

._fill_17z6r_16[data-band='excellent'] {
  background: var(--green);
}

._fill_17z6r_16[data-band='good'] {
  background: var(--blue);
}

._fill_17z6r_16[data-band='fair'] {
  background: var(--amber);
}

._fill_17z6r_16[data-band='poor'] {
  background: var(--red);
}

._value_17z6r_38 {
  flex-shrink: 0;
  font-weight: 700;
  white-space: nowrap;
}

._value_17z6r_38[data-band='excellent'],
._value_17z6r_38[data-band='good'] {
  color: var(--color-success);
}

._value_17z6r_38[data-band='fair'] {
  color: var(--accent-attention);
}

._value_17z6r_38[data-band='poor'] {
  color: var(--red);
}

._unmeasured_17z6r_57 {
  color: var(--g400);
}/* Shared table chrome for the Breakdown panels (Location, Subcontractor,
   …). Each panel supplies its own columns but reuses these classes so the
   table reads identically across tabs. */

._table_1of0z_5 {
  width: 100%;
  border-collapse: collapse;

  /* Fixed layout so column widths come from each panel's own <colgroup>
     (its co-located *.module.css), NOT the current page's cell content —
     otherwise paging re-measures the longest text and the columns visibly jump
     between pages. Column widths are per-panel because every tab has different
     columns; only the fixed-layout mechanism + min-width live here. min-width
     keeps the columns legible on narrow viewports (the .wrap scrolls instead). */
  table-layout: fixed;
  min-width: 820px;
}

._th_1of0z_19 {
  padding: 0 var(--s-4) var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;

  /* Wrap (not nowrap): under fixed layout a narrow numeric column would clip a
     two-word header like "PLANNED HOURS"; wrapping keeps it fully readable. */
  white-space: normal;
  color: var(--g400);
}

/* Header cell content: the sort button plus an optional ⓘ explanation icon.
   The ⓘ stays beside its label; a long label wraps inside the button instead. */
._thInner_1of0z_36 {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-1);
}

/* Placement only — the glyph's look is InfoTip's. */
._infoTip_1of0z_44 {
  flex-shrink: 0;
}

/* Sortable header: a bare button that inherits the .th text styling so only the
   click affordance + arrow are added. */
._sortBtn_1of0z_50 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

._sortBtn_1of0z_50:hover {
  color: var(--g600);
}

._sortArrow_1of0z_71 {
  font-size: 0.8em;
  opacity: 0.3;
}

._sortArrow_1of0z_71[data-active='false'] {
  font-size: 1.2em;
}

._sortArrow_1of0z_71[data-active='true'] {
  opacity: 1;
  color: var(--navy);
}

._tr_1of0z_85 {
  border-top: 1px solid var(--separator);
  transition: background-color 120ms ease;
}

/* Only a row with an action (activities, location) shows the hand. */
._trAction_1of0z_91 {
  cursor: pointer;
}

._tr_1of0z_85:hover {
  background: var(--g50);
}

._td_1of0z_99 {
  padding: var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  white-space: nowrap;

  /* Fixed layout gives each cell a fixed width; clip + ellipsis any plain-text
     cell that exceeds it (cells with their own truncating inner span — name,
     team — or their own overflow handling are unaffected). */
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--g700);
}

._name_1of0z_113 {
  font-weight: 600;
  color: var(--navy);
}

/* Truncating inner span for the name cell — an ellipsis keeps a long name from
   widening the column, and the full value is revealed via tooltip on hover.
   The width cap lives on this block span (not the <td>): `table-layout: auto`
   ignores max-width on cells, but always honours it on a block child, so both
   the ellipsis and the overflow measurement stay deterministic. */
._nameText_1of0z_123 {
  display: block;
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name as the row's keyboard-reachable control; the reset strips the
   button chrome, this keeps the ellipsis measurable and the focus visible. */
._nameButton_1of0z_133 {
  display: block;
  min-width: 0;
  text-align: left;
  border-radius: var(--r-sm);
}

._nameButton_1of0z_133:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Name + optional trailing glyph on one line; the text keeps its ellipsis. */
._nameInner_1of0z_146 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

._nameTrailing_1of0z_153 {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--g400);
  opacity: 0.6;
  transition: opacity 120ms ease, color 120ms ease;
}

/* A row that leaves the page (the activities tab): the name reads as a link
   on hover and its arrow lights up, so it is told apart from a row that opens
   a drawer (location) or does nothing (workers). */
._trLink_1of0z_164:hover ._nameText_1of0z_123 {
  text-decoration: underline;
  text-underline-offset: 2px;
}

._trLink_1of0z_164:hover ._nameTrailing_1of0z_153 {
  opacity: 1;
  color: var(--navy);
}

._issue_1of0z_174 {
  white-space: normal;
  color: var(--g600);
}

._teamText_1of0z_179 {
  display: block;
  max-width: 22ch;
  overflow: hidden;
}

._paginationCell_1of0z_185 {
  padding: var(--s-2);
  border-top: 1px solid var(--separator);
}

._pagination_1of0z_185 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-4);
}

._paginationRange_1of0z_198 {
  margin-inline-start: var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--g500);
}

._pageSizeLabel_1of0z_206 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._pageSizeSelect_1of0z_215 {
  padding: 2px var(--s-1);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g700);
  background: none;
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  cursor: pointer;
}

._pageSizeSelect_1of0z_215:hover {
  border-color: var(--g400);
}

._pageBtn_1of0z_230 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-1);
  color: var(--navy);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color 120ms ease;
}

._pageBtn_1of0z_230:hover:not(:disabled) {
  background: var(--g50);
}

._pageBtn_1of0z_230:disabled {
  color: var(--g300);
  cursor: default;
}

/* Compact multi-value cell: the first chips inline plus a “+N” overflow chip
   (each revealing its detail on hover), so a long list never grows the row
   height. */
._multiCell_1of0z_255 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

._floorChip_1of0z_261 {
  flex: none;
  padding: 0 var(--s-2);
  border-radius: var(--r-md);
  background: var(--g100);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.8;
  color: var(--g700);
  white-space: nowrap;
  cursor: default;
}
._colLocation_66iq1_1 { width: 12%; }
._colProductivity_66iq1_2 { width: 22%; }
._colActual_66iq1_3 { width: 9%; }
._colSpi_66iq1_4 { width: 9%; }
._colUtil_66iq1_5 { width: 9%; }
._colConfidence_66iq1_6 { width: 12%; }
._colIssue_66iq1_7 { width: 26%; }
._colName_1rx28_1 { width: 14%; }
._colTrade_1rx28_2 { width: 15%; }
._colProductivity_1rx28_3 { width: 19%; }
._colActual_1rx28_4 { width: 9%; }
._colWorkers_1rx28_5 { width: 9%; }
._colIssue_1rx28_6 { width: 26%; }
._colActivity_wb141_1 { width: 22%; }
._colLocation_wb141_2 { width: 10%; }
._colTeam_wb141_3 { width: 14%; }
._colPlanned_wb141_4 { width: 10%; }
._colActual_wb141_5 { width: 9%; }
._colProductivity_wb141_6 { width: 15%; }
._colSpi_wb141_7 { width: 8%; }
._colConfidence_wb141_8 { width: 12%; }
._colWorker_1a01r_1 { width: 22%; }
._colProfession_1a01r_2 { width: 22%; }
._colProductivity_1a01r_3 { width: 41%; }
._colActual_1a01r_4 { width: 15%; }

._note_1a01r_6 {
  margin: 0 0 var(--s-5) 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--g500);
}

._variance_1a01r_14 {
  font-weight: 600;
}

._variance_1a01r_14[data-tone='high'] {
  color: var(--red);
}

._variance_1a01r_14[data-tone='elevated'] {
  color: var(--accent-attention);
}

._variance_1a01r_14[data-tone='none'] {
  color: var(--g500);
}
/* The drawer CONTENT idiom, applied from a drawer's own component alongside
   its module: a head clear of the shell's corner close button, an uppercase
   eyebrow, a display title, and the same eyebrow as a section title. The
   shell (overlay, slide, close button) is Drawer.module.css. */

._head_q7pba_6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding-right: var(--s-6);
}

._eyebrow_q7pba_14,
._sectionTitle_q7pba_15 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
}

._sectionTitle_q7pba_15 {
  margin: 0;
}

._title_q7pba_28 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}
/* Five tiles on a two-column grid; productivity, the headline, spans both. */
._grid_1nba7_2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

._tile_1nba7_8 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}

._tile_1nba7_8[data-wide='true'] {
  grid-column: 1 / -1;
}

._value_1nba7_22 {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

._value_1nba7_22[data-key='productivity'] {
  font-size: var(--fs-2xl);
}
._list_xeovc_1 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._item_xeovc_9 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--separator);
}

._item_xeovc_9:last-child {
  border-bottom: none;
}

._who_xeovc_21 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-width: 0;
}

._workers_xeovc_29 {
  flex: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._figures_xeovc_36 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-3);
}

._days_xeovc_43 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--g600);
  white-space: nowrap;
}

._empty_xeovc_51 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g400);
}

/* The line for members with no profession: a plain label where the pill would be. */
._noProfession_xeovc_59 {
  font-size: var(--fs-xs);
  color: var(--g500);
}
._footer_1dvus_1 {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--separator);
}
/* The shared drawer owns the overlay, the slide and the close button, and
   drawerContent.module.css the head/eyebrow/title idiom; this lays out the
   rest: pills, the figure tiles, the confidence row, the professions. */

/* The activity drawer's width (TaskPanel: 440px), so the two read as one kind of panel. */
._panel_x0vul_6 {
  width: min(440px, 92vw);

  --drawer-pad: var(--s-5);
  --drawer-gap: var(--s-4);
}

._status_x0vul_13 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
}

/* Data confidence, on its own line between the figures and the professions. */
._confidenceRow_x0vul_20 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}

._confidenceLabel_x0vul_30 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
}

._section_x0vul_39 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* The loading shimmer every Productivity skeleton is built from: one sweeping
   keyframe, with a per-item `--wave` stagger so a group pulses in sequence
   rather than in lockstep. */

._shimmer_1ubzc_5 {
  display: block;
  border-radius: var(--r-md);
  background: linear-gradient(
    90deg,
    var(--g200) 0%,
    var(--g100) 50%,
    var(--g200) 100%
  );
  background-size: 220% 100%;
  animation: _dorca-prod-skel-shimmer_1ubzc_1 1.6s ease-in-out infinite;
  animation-delay: var(--wave, 0s);
}

@keyframes _dorca-prod-skel-shimmer_1ubzc_1 {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Static placeholder for users who asked for no motion. */
@media (prefers-reduced-motion: reduce) {
  ._shimmer_1ubzc_5 {
    animation: none;
    background: var(--g200);
  }
}
._icon_l4qiu_1 { width: 18px; height: 18px; border-radius: var(--r-md); }
._title_l4qiu_2 { width: 150px; height: 14px; }
._meta_l4qiu_3 { width: 78px; height: 10px; }._headerCell_hspwm_1 {
  height: calc(1.4 * var(--fs-2xs));
}

._cellBox_hspwm_5 {
  display: flex;
  align-items: center;
  height: calc(1.4 * var(--fs-sm));
}

._cell_hspwm_5 {
  height: 12px;
}

._pagerControls_hspwm_15 {
  width: 220px;
  height: calc(1.4 * var(--fs-xs) + 6px);
}
._wrapper_r088l_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._tabBar_r088l_7 {
  align-self: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}

._tabList_r088l_14 {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
}

._tab_r088l_7 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g500);
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

._tab_r088l_7:hover:not([aria-selected='true']) {
  color: var(--navy);
  background: var(--g50);
}

._tab_r088l_7[aria-selected='true'] {
  color: var(--navy);
  background: var(--g50);
}

._placeholder_r088l_46 {
  margin: 0;
  padding: var(--s-7);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--g400);
}

@media (width <= 760px) {
  ._tabBar_r088l_7 {
    align-self: stretch;
  }
}
._list_1m1og_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

._row_1m1og_10 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}

._row_1m1og_10[data-severity='high'] {
  background: var(--alert-high-tint);
  border-color: var(--alert-high-border);
}

._row_1m1og_10[data-severity='medium'] {
  background: var(--alert-med-tint);
  border-color: var(--alert-med-border);
}

._row_1m1og_10[data-severity='low'] {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}

._dot_1m1og_34 {
  flex-shrink: 0;
  margin-top: 6px;
}

._rowBody_1m1og_39 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
  min-width: 0;
}

._rowHead_1m1og_47 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1);
}

._rowTitle_1m1og_54 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._metaChip_1m1og_61 {
  padding: 1px var(--s-2);
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--g400);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  white-space: nowrap;
}

._rowDetail_1m1og_74 {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._review_1m1og_81 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--s-1);
  align-self: center;
  padding: var(--s-1) var(--s-3);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--sidebar-accent);
  background: none;
  border: 1px solid var(--sidebar-accent);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

._review_1m1og_81:hover {
  color: var(--sidebar-accent);
  border-color: var(--sidebar-accent);
}

._review_1m1og_81:disabled {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  cursor: not-allowed;
}

._empty_1m1og_111 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

._emptyMark_1m1og_122 {
  display: inline-flex;
  align-items: center;
  color: var(--color-success);
}

@media (width <= 600px) {
  ._row_1m1og_10 {
    flex-wrap: wrap;
  }

  ._review_1m1og_81 {
    align-self: flex-start;
  }
}._strip_ofvj4_1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

._top_ofvj4_7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

._iconBox_ofvj4_14 { width: 34px; height: 34px; border-radius: var(--r-xl); }
._trend_ofvj4_15 { width: 70px; height: 14px; }
._value_ofvj4_16 { width: 56%; height: 30px; }
._label_ofvj4_17 { width: 42%; height: 10px; margin-top: var(--s-3); }
._sublabel_ofvj4_18 { width: 72%; height: 10px; margin-top: var(--s-2); }

@media (width <= 1280px) {
  ._strip_ofvj4_1 { grid-template-columns: repeat(3, 1fr); }
}

@media (width <= 760px) {
  ._strip_ofvj4_1 { grid-template-columns: 1fr 1fr; }
}._chart_2677o_1 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}

._bucket_2677o_8 {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

._bars_2677o_16 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-1);
  width: 100%;
  height: 92px;
}

._bar_2677o_16 { width: 40%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
._tickLabel_2677o_26 { width: 60%; height: 10px; margin-top: var(--s-2); }
._tickPct_2677o_27 { width: 40%; height: 8px; margin-top: var(--s-1); }

._footer_2677o_29 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--separator);
}

._legend_2677o_38 { width: 180px; height: 12px; }
._periodAvg_2677o_39 { width: 110px; height: 12px; }._bands_1m2qn_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

._band_1m2qn_1 { display: flex; flex-direction: column; gap: var(--s-2); }

._bandTop_1m2qn_9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._bandLabel_1m2qn_15 { width: 120px; height: 10px; }
._bandPct_1m2qn_16 { width: 32px; height: 10px; }
._track_1m2qn_17 { height: 6px; border-radius: var(--r-pill); }

._note_1m2qn_19 { width: 90%; height: 10px; margin-top: var(--s-4); }
._list_zj32r_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

._row_zj32r_7 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}

._severityDot_zj32r_16 { width: 8px; height: 8px; border-radius: var(--r-circle); margin-top: 6px; flex-shrink: 0; }
._body_zj32r_17 { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-width: 0; }
._title_zj32r_18 { width: 38%; height: 12px; }
._detail_zj32r_19 { width: 86%; height: 10px; }
._action_zj32r_20 { width: 72px; height: 14px; flex-shrink: 0; }._page_cstm8_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

._lowerGrid_cstm8_7 {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: var(--s-4);
}

._lowerGrid_cstm8_7 > * {
  min-width: 0;
}

@media (width <= 1100px) {
  ._lowerGrid_cstm8_7 {
    grid-template-columns: 1fr;
  }
}
._rail_16821_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 260px;
  flex-shrink: 0;
  height: 100%;
}

._card_16821_10,
._filters_16821_11 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}

._filters_16821_11 {
  flex: 1 1 auto;
}

._cardTitle_16821_23 {
  font-family: var(--f-body);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--g500);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

._stat_16821_33 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 6px 0;
}

._stat_16821_33 + ._stat_16821_33 {
  border-top: 1px solid var(--separator);
  padding-top: 10px;
  margin-top: 2px;
}

._statIcon_16821_46 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
}

._tone_navy_16821_59   { background: var(--navy-soft);             color: var(--navy); }
._tone_green_16821_60  { background: var(--status-completed-bg);   color: var(--dashboard-teal-deep); }
._tone_amber_16821_61  { background: var(--status-for-review-bg);  color: var(--status-for-review-text); }
._tone_red_16821_62    { background: var(--status-rejected-bg);    color: var(--status-rejected-text); }
._tone_blue_16821_63   { background: var(--info-tint);             color: var(--info); }

._statText_16821_65 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._statLabel_16821_71 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.2;
}

._statValue_16821_78 {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-top: 1px;
}

._filters_16821_11 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

._label_16821_93 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._label_16821_93 span {
  font-weight: 500;
}
._card_owfln_1 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}

._centered_owfln_12 {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  min-height: 116px;
  justify-content: center;
  padding: var(--s-5);
}

/* ── Icon variant (Overview tab) ───────────────────────────────── */

._icon_owfln_24 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-lg);
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 700;
  flex-shrink: 0;
}

._tone_navy_owfln_37   { background: var(--navy-soft);            color: var(--navy); }
._tone_blue_owfln_38   { background: var(--info-tint);            color: var(--info); }
._tone_amber_owfln_39  { background: var(--status-for-review-bg); color: var(--status-for-review-text); }
._tone_red_owfln_40    { background: var(--status-rejected-bg);   color: var(--status-rejected-text); }
._tone_green_owfln_41  { background: var(--status-completed-bg);  color: var(--dashboard-teal-deep); }

._text_owfln_43 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._value_owfln_50 {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

._label_owfln_58 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--navy);
}

._sub_owfln_65 {
  font-family: var(--f-body);
  font-size: var(--fs-2xs);
  color: var(--g500);
}

/* ── Centered variant (Costs / Budget / Payments tabs) ─────────── */

._valueCentered_owfln_73 {
  font-family: var(--f-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
}

._valueTone_navy_owfln_80   { color: var(--navy); }
._valueTone_blue_owfln_81   { color: var(--info); }
._valueTone_amber_owfln_82  { color: var(--status-for-review-text); }
._valueTone_red_owfln_83    { color: var(--red); }
._valueTone_green_owfln_84  { color: var(--dashboard-teal-deep); }

._labelCentered_owfln_86 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--g600);
}
/* ── KPI strip ─────────────────────────────────────────────────── */

._kpiRow_4neax_3 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

/* ── Two-up row (Budget vs Actual + Heatmap) ───────────────────── */

._row_4neax_11 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: stretch;
}

._panel_4neax_18 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

._panelTitle_4neax_26 {
  margin: 0 0 var(--s-4) 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

/* ── Budget vs Actual by Trade ─────────────────────────────────── */

._tradeList_4neax_36 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

._tradeRow_4neax_42 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._tradeHead_4neax_48 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

._tradeName_4neax_54 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
}

._tradeValue_4neax_61 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--g600);
}

._tradeTrack_4neax_67 {
  height: 8px;
  background: var(--g100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

._tradeFill_4neax_74 {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 240ms ease;
}

._tone_red_4neax_80    { background: var(--red); }
._tone_pink_4neax_81   { background: var(--finance-trade-pink); }
._tone_green_4neax_82  { background: var(--dashboard-teal); }
._tone_purple_4neax_83 { background: var(--finance-trade-purple); }

/* ── Cost Heatmap by Floor ─────────────────────────────────────── */

._heatmap_4neax_87 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._heatRow_4neax_93 {
  display: grid;
  grid-template-columns: 32px 1fr 40px;
  align-items: center;
  gap: var(--s-3);
}

._heatFloor_4neax_100 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--g600);
  font-weight: 600;
}

._heatBar_4neax_107 {
  height: 22px;
  background: transparent;
  border-radius: var(--r-md);
  position: relative;
}

._heatFill_4neax_114 {
  height: 100%;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 240ms ease;
  min-width: 60px;
}

._heatGreen_4neax_124 { background: var(--dashboard-teal); }
._heatRed_4neax_125   { background: var(--red); }

._heatAmount_4neax_127 {
  font-family: var(--f-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-surface);
}

._heatPct_4neax_134 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: right;
}

._heatPctRed_4neax_141 { color: var(--red); }
._heatPctMuted_4neax_142 { color: var(--g500); }

/* ── AI Financial Insights ─────────────────────────────────────── */

._insights_4neax_146 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

._insightList_4neax_154 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._insightRow_4neax_160 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--g50);
  border-radius: var(--r-lg);
}

._insightDot_4neax_169 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  flex-shrink: 0;
}

._dotRed_4neax_176   { background: var(--red); }
._dotGreen_4neax_177 { background: var(--dashboard-teal); }

._insightBody_4neax_179 {
  flex: 1;
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._insightPill_4neax_187 {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  flex-shrink: 0;
}

._pillRed_4neax_200   { background: var(--status-rejected-bg);  color: var(--status-rejected-text);  border-color: var(--finance-insight-border-red); }
._pillGreen_4neax_201 { background: var(--status-completed-bg); color: var(--status-completed-text); border-color: var(--finance-insight-border-green); }

@media (width <= 1400px) {
  ._kpiRow_4neax_3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ._row_4neax_11    { grid-template-columns: 1fr; }
}
._kpiRow_1cuxb_1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

._liveTrack_1cuxb_7 {
  width: 80%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--g100);
  margin-top: var(--s-2);
}

._liveFill_1cuxb_15 {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--info);
}

._liveLink_1cuxb_21 {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--info);
  text-decoration: none;
  cursor: pointer;
}

._liveLink_1cuxb_21:hover { text-decoration: underline; }

/* ── Tables row ─────────────────────────────────────────────────── */

._tablesRow_1cuxb_37 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: start;
}

._panel_1cuxb_44 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

._panelTitle_1cuxb_52 {
  margin: 0 0 var(--s-4) 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._table_1cuxb_37 {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._table_1cuxb_37 thead th {
  text-align: left;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  padding: 0 var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--separator);
}

._table_1cuxb_37 tbody td {
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--separator);
  color: var(--navy);
  vertical-align: middle;
}

._table_1cuxb_37 tbody tr:last-child td { border-bottom: none; }

._alignRight_1cuxb_86  { text-align: right; }
._alignCenter_1cuxb_87 { text-align: center; }
._bold_1cuxb_88        { font-weight: 700; }

._tradeDot_1cuxb_90 {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  margin-right: var(--s-2);
  vertical-align: middle;
}

._dot_electrical_1cuxb_99   { background: var(--gantt-color-electrical); }
._dot_plumbing_1cuxb_100     { background: var(--finance-trade-pink); }
._dot_concrete_1cuxb_101     { background: var(--amber); }
._dot_hvac_1cuxb_102         { background: var(--dashboard-teal); }
._dot_steel_1cuxb_103        { background: var(--finance-trade-purple); }
._dot_general-labor_1cuxb_104 { background: var(--g500); }

._statusDot_1cuxb_106 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--r-circle);
}

._statusActive_1cuxb_113  { background: var(--dashboard-teal); }
._statusIdle_1cuxb_114    { background: var(--amber); }
._statusOffline_1cuxb_115 { background: var(--g400); }

@media (width <= 1400px) {
  ._kpiRow_1cuxb_1    { grid-template-columns: 1fr; }
  ._tablesRow_1cuxb_37 { grid-template-columns: 1fr; }
}
._pill_wg1a6_1 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

._green_wg1a6_14 {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

._amber_wg1a6_19 {
  background: var(--status-for-review-bg);
  color: var(--status-for-review-text);
}

._blue_wg1a6_24 {
  background: var(--info-tint);
  color: var(--info);
}

._red_wg1a6_29 {
  background: var(--status-rejected-bg);
  color: var(--status-rejected-text);
}

._gray_wg1a6_34 {
  background: var(--g100);
  color: var(--g600);
}
._kpiRow_1n3l2_1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

/* ── Allocation table ──────────────────────────────────────────── */

._panel_1n3l2_9 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

._panelTitle_1n3l2_17 {
  margin: 0 0 var(--s-4) 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._table_1n3l2_25 {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._table_1n3l2_25 thead th {
  text-align: left;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  padding: 0 var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--separator);
}

._table_1n3l2_25 tbody td {
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--separator);
  color: var(--navy);
  vertical-align: middle;
}

._table_1n3l2_25 tbody tr:last-child td { border-bottom: none; }

._alignRight_1n3l2_51  { text-align: right; }
._alignCenter_1n3l2_52 { text-align: center; }
._bold_1n3l2_53        { font-weight: 600; }
._muted_1n3l2_54       { color: var(--g500); }

._varianceUnder_1n3l2_56 { color: var(--dashboard-teal-deep); font-weight: 600; }
._varianceOver_1n3l2_57  { color: var(--red); font-weight: 600; }

._progressCol_1n3l2_59 {
  width: 180px;
  min-width: 140px;
}

._progressTrack_1n3l2_64 {
  height: 8px;
  background: var(--g100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

._progressFill_1n3l2_71 {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 240ms ease;
}

._progressGreen_1n3l2_77 { background: var(--dashboard-teal); }
._progressRed_1n3l2_78   { background: var(--red); }

@media (width <= 1400px) {
  ._kpiRow_1n3l2_1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
._panel_fa78j_1 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

._panelHead_fa78j_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

._panelTitle_fa78j_17 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._panelSubtitle_fa78j_25 {
  margin: 2px 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._newBtn_fa78j_32 {
  appearance: none;
  border: none;
  height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-lg);
  background: var(--finance-action-bg);
  color: var(--color-surface);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

._newBtn_fa78j_32:hover { background: var(--finance-action-bg-hover); }

._table_fa78j_52 {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._table_fa78j_52 thead th {
  text-align: left;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  padding: 0 var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--separator);
}

._table_fa78j_52 tbody td {
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--separator);
  color: var(--navy);
  vertical-align: middle;
}

._table_fa78j_52 tbody tr:last-child td { border-bottom: none; }

._alignRight_fa78j_78  { text-align: right; }
._alignCenter_fa78j_79 { text-align: center; }
._bold_fa78j_80        { font-weight: 700; }
._muted_fa78j_81       { color: var(--g600); }
._mono_fa78j_82        { font-family: var(--f-mono); font-size: var(--fs-xs); }

._iconBtn_fa78j_84 {
  appearance: none;
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--g500);
}

._iconBtn_fa78j_84:hover {
  background: var(--g100);
  color: var(--navy);
}
._group_2pfce_1 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

._groupHead_2pfce_9 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-4);
  gap: var(--s-4);
}

._groupTitle_2pfce_17 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._groupBudget_2pfce_25 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._cards_2pfce_31 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

._card_2pfce_31 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--g50);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  padding: var(--s-4);
}

._cardSelected_2pfce_48 {
  background: var(--ops-select-tint);
  border-color: var(--ops-select-edge);
  box-shadow: 0 0 0 1px var(--ops-select-edge);
}

._cardHead_2pfce_54 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}

._supplier_2pfce_61 {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._tick_2pfce_68 {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-circle);
  background: var(--ops-select-edge);
  color: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: 700;
}

._price_2pfce_81 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
}

._tone_green_2pfce_88   { color: var(--dashboard-teal-deep); }
._tone_amber_2pfce_89   { color: var(--status-for-review-text); }
._tone_red_2pfce_90     { color: var(--red); }
._tone_neutral_2pfce_91 { color: var(--navy); }

._lead_2pfce_93 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
  margin-top: 2px;
}

._scope_2pfce_100 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g600);
  margin-bottom: var(--s-2);
}

._selectBtn_2pfce_107 {
  appearance: none;
  border: 1px solid var(--separator);
  background: var(--color-surface);
  height: 32px;
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  width: 100%;
}

._selectBtn_2pfce_107:hover {
  background: var(--g100);
}

._selectedPill_2pfce_125 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: var(--r-md);
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid var(--finance-insight-border-green);
  width: max-content;
  padding: 0 var(--s-3);
}

@media (width <= 1200px) {
  ._cards_2pfce_31 { grid-template-columns: 1fr 1fr; }
}

@media (width <= 800px) {
  ._cards_2pfce_31 { grid-template-columns: 1fr; }
}
._panel_fa78j_1 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

._panelHead_fa78j_9 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

._panelTitle_fa78j_17 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._panelSubtitle_fa78j_25 {
  margin: 2px 0 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._newBtn_fa78j_32 {
  appearance: none;
  border: none;
  height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-lg);
  background: var(--finance-action-bg);
  color: var(--color-surface);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

._newBtn_fa78j_32:hover { background: var(--finance-action-bg-hover); }

._table_fa78j_52 {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._table_fa78j_52 thead th {
  text-align: left;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  padding: 0 var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--separator);
}

._table_fa78j_52 tbody td {
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--separator);
  color: var(--navy);
  vertical-align: middle;
}

._table_fa78j_52 tbody tr:last-child td { border-bottom: none; }

._alignRight_fa78j_78  { text-align: right; }
._alignCenter_fa78j_79 { text-align: center; }
._bold_fa78j_80        { font-weight: 700; }
._muted_fa78j_81       { color: var(--g600); }
._mono_fa78j_82        { font-family: var(--f-mono); font-size: var(--fs-xs); }

._iconBtn_fa78j_84 {
  appearance: none;
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--g500);
}

._iconBtn_fa78j_84:hover {
  background: var(--g100);
  color: var(--navy);
}
._kpiRow_16mcf_1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

/* ── Schedule table ───────────────────────────────────────────── */

._panel_16mcf_9 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-2xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
}

._panelTitle_16mcf_17 {
  margin: 0 0 var(--s-4) 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy);
}

._table_16mcf_25 {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}

._table_16mcf_25 thead th {
  text-align: left;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g500);
  padding: 0 var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--separator);
}

._table_16mcf_25 tbody td {
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--separator);
  color: var(--navy);
  vertical-align: middle;
}

._table_16mcf_25 tbody tr:last-child td { border-bottom: none; }

._alignCenter_16mcf_51 { text-align: center; }
._bold_16mcf_52        { font-weight: 700; }
._muted_16mcf_53       { color: var(--g600); }
._mono_16mcf_54        { font-family: var(--f-mono); font-size: var(--fs-xs); }

@media (width <= 1400px) {
  ._kpiRow_16mcf_1 { grid-template-columns: 1fr; }
}
._page_vpuq0_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

._tabList_vpuq0_7 {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-3xl);
  background: var(--ops-pill-bg);
  margin-bottom: var(--s-4);
}

._tab_vpuq0_7 {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px var(--s-4);
  border-radius: var(--r-xl);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g600);
  cursor: pointer;
  transition: background 120ms, color 120ms, box-shadow 120ms;
  line-height: 1.2;
}

._tab_vpuq0_7:hover {
  color: var(--navy);
}

._tab_vpuq0_7[aria-selected='true'] {
  background: var(--color-surface);
  color: var(--navy);
  font-weight: 700;
  box-shadow: var(--shadow-card);
}

._layout_vpuq0_43 {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: stretch;
}

._content_vpuq0_50 {
  min-width: 0;
}

._panel_vpuq0_54 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  outline: none;
}

@media (width <= 1100px) {
  ._layout_vpuq0_43 {
    grid-template-columns: 1fr;
  }
}
._root_1ctzw_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  min-width: 0;
  padding: 0 var(--s-1);
}

/* ─── Header ─────────────────────────────────────────────── */

._header_1ctzw_12 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-3);
}

._headerIcon_1ctzw_19 {
  color: var(--sidebar-accent);
  display: inline-flex;
}

._headerTitle_1ctzw_24 {
  flex: 1;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Red pill — total unread across all channels */
._headerCount_1ctzw_34 {
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 2px 7px;
  min-width: 22px;
  text-align: center;
  line-height: 1.4;
}

/* "+" button in the header — opens the create-channel modal. */
._createButton_1ctzw_47 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--sidebar-accent);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

._createButton_1ctzw_47:hover {
  background: var(--sidebar-active-bg);
  border-color: var(--sidebar-accent);
}

._createButton_1ctzw_47:focus-visible {
  outline: none;
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 3px var(--sidebar-active-bg);
}

._createIcon_1ctzw_73 {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1;
}

/* ─── Search ─────────────────────────────────────────────── */

._searchRow_1ctzw_81 {
  position: relative;
  margin: 0 var(--s-3) var(--s-3);
}

._searchIcon_1ctzw_86 {
  position: absolute;
  top: 50%;
  left: var(--s-3);
  transform: translateY(-50%);
  color: var(--g400);
  pointer-events: none;
  display: inline-flex;
}

._searchInput_1ctzw_96 {
  width: 100%;
  height: 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 0 var(--s-3) 0 var(--s-7);
  font-size: var(--fs-xs);
  font-family: var(--f-body);
  background: var(--g50);
  color: var(--g700);
}

._searchInput_1ctzw_96:focus {
  outline: none;
  border-color: var(--sidebar-accent);
  background: var(--color-surface);
}

/* ─── Kind filter (All / DMs / Channels) ─────────────────── */

._filterRow_1ctzw_116 {
  margin: 0 var(--s-3) var(--s-2);
}

/* ─── Groups ─────────────────────────────────────────────── */

._groups_1ctzw_122 {
  flex: 1;
}

._groupsBody_1ctzw_126 {
  padding: var(--s-1) var(--s-2) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._noResults_1ctzw_133 {
  padding: var(--s-4) var(--s-3);
  font-size: var(--fs-xs);
  color: var(--g500);
  text-align: center;
}

._empty_1ctzw_140 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-6) var(--s-3);
  text-align: center;
}

._emptyIcon_1ctzw_149 {
  display: inline-flex;
  color: var(--g300);
  margin-bottom: var(--s-1);
}

._emptyTitle_1ctzw_155 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g700);
}

._emptyHint_1ctzw_161 {
  font-size: var(--fs-xs);
  color: var(--g500);
}
._item_84t3t_1 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2);
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--g700);
  width: 100%;
}

._item_84t3t_1:hover {
  background: var(--sidebar-hover-bg);
}

._item_84t3t_1:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
}

._itemActive_84t3t_25,
._itemActive_84t3t_25:hover {
  background: var(--chat-conversation-selected-bg);
}

._avatar_84t3t_30 {
  align-self: center;
}

/* A white edge keeps teal/green avatars from melting into the selected row. */
._itemActive_84t3t_25 ._avatar_84t3t_30 {
  box-shadow: 0 0 0 2px var(--color-surface);
}

._itemBody_84t3t_39 {
  flex: 1;
  min-width: 0;
}

/* Name row: channel name on left, time + badge on right */
._itemTopRow_84t3t_45 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

._itemName_84t3t_52 {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--g800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._itemActive_84t3t_25 ._itemName_84t3t_52 {
  color: var(--sidebar-active-text);
  font-weight: 700;
}

._itemTime_84t3t_67 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  white-space: nowrap;
}

/* Teal badge — unread count per channel */
._unreadBadge_84t3t_74 {
  background: var(--sidebar-accent);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}

._itemSubtitle_84t3t_86 {
  font-size: var(--fs-xs);
  color: var(--g400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

._previewAuthor_84t3t_95 {
  font-weight: 600;
  color: var(--g500);
}

/* Unread state — bolder name + teal dot at the end of the name row. */
._itemUnread_84t3t_101 ._itemName_84t3t_52 {
  color: var(--g800);
  font-weight: 700;
}

._itemUnread_84t3t_101 ._itemSubtitle_84t3t_86,
._itemUnread_84t3t_101 ._previewAuthor_84t3t_95 {
  color: var(--g700);
  font-weight: 600;
}

._itemUnread_84t3t_101 ._itemTime_84t3t_67 {
  color: var(--g700);
  font-weight: 600;
}

._unreadDot_84t3t_117 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--sidebar-accent);
  flex-shrink: 0;
}

/* Numbered unread badge — same teal as the dot, sized for 1–3 digit counts. */
._unreadCountBadge_84t3t_126 {
  background: var(--sidebar-accent);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
  flex-shrink: 0;
}._root_10et4_1 {
  appearance: none;
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--g300);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease;
}

._root_10et4_1[data-checked] {
  background: var(--navy);
}

._root_10et4_1[data-disabled] {
  cursor: default;
  opacity: 0.5;
}

._root_10et4_1:hover:not([data-disabled], [data-checked]) {
  background: var(--g400);
}

._root_10et4_1:focus-visible {
  outline: 2px solid var(--floor-selected-fill);
  outline-offset: 2px;
}

._thumb_10et4_35 {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  transition: transform 150ms ease;
}

._thumb_10et4_35[data-checked] {
  transform: translateX(12px);
}

@media (prefers-reduced-motion: reduce) {
  ._root_10et4_1,
  ._thumb_10et4_35 {
    transition: none;
  }
}
._row_tsoba_1 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 14px;
}

._logo_tsoba_8 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-2xl);
  background: var(--g50);
}

._muted_tsoba_19 {
  opacity: 0.6;
}

._text_tsoba_23 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._name_tsoba_31 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g800);
}

._nameMuted_tsoba_37 {
  color: var(--g600);
}

._line_tsoba_41 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--g600);
}

._comingSoon_tsoba_49 {
  flex: none;
  color: var(--g600);
  background: var(--g100);
}

._disconnect_tsoba_55:not([data-disabled]) {
  color: var(--color-error);
}
._root_1dv70_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
}

._header_1dv70_8 {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

._headerText_1dv70_14 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._title_1dv70_21 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--g800);
}

._hint_1dv70_28 {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--g600);
}

._close_1dv70_35 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--g500);
  cursor: pointer;
}

._close_1dv70_35:hover {
  background: var(--g50);
}

._failed_1dv70_54 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-error);
}

._list_1dv70_60 {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
}

._item_1dv70_68 + ._item_1dv70_68 {
  border-top: 1px solid var(--border-subtle);
}

._privacy_1dv70_72 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g600);
}
._root_17xim_1 {
  margin-top: auto;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
}

._trigger_17xim_7 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-xl);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g700);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

._trigger_17xim_7:hover,
._trigger_17xim_7[data-popup-open] {
  background: var(--sidebar-active-bg);
  border-color: var(--sidebar-accent);
}

._trigger_17xim_7:focus-visible {
  outline: none;
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 3px var(--sidebar-active-bg);
}

._icons_17xim_37 {
  display: inline-flex;
  align-items: center;
}

._logo_17xim_42 {
  display: inline-flex;
  padding: 3px;
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-circle);
}

._logo_17xim_42 + ._logo_17xim_42 {
  margin-left: -7px;
}

._label_17xim_54 {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}

._manage_17xim_62 {
  font-size: var(--fs-xs);
  color: var(--sidebar-accent);
}

._positioner_17xim_67 {
  z-index: var(--z-popover);
  outline: none;
}

._popup_17xim_72 {
  width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-popover);
  outline: none;
}

/* A square turned 45deg with two borders showing, pointing back at the button. */
._arrow_17xim_82 {
  width: 12px;
  height: 12px;
  background: var(--color-surface);
  border-left: 1px solid var(--ops-card-border);
  border-bottom: 1px solid var(--ops-card-border);
  transform: rotate(45deg);
}

._arrow_17xim_82[data-side='right'] {
  left: -7px;
}
._backdrop_12wtl_1 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: var(--z-dialog);
}._panel_12wtl_8 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  background: var(--color-surface);
  border-radius: var(--r-xl);
  padding: 24px;
  max-width: calc(100vw - 48px);

  /* Bounded by the viewport. The panel is centred with a translate, so without
     this a tall one grows past BOTH edges at once — its title and its actions off
     screen, and nothing to scroll, because the overflow is outside the page. */
  max-height: calc(100vh - 48px);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 12px;
}/* Size variants */._sm_12wtl_30 { width: 360px; }._md_12wtl_31 { width: 480px; }._lg_12wtl_32 { width: 560px; }._title_12wtl_34 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--g800);
  margin: 0;
}._description_12wtl_41 {
  font-size: var(--fs-sm);
  color: var(--g600);
  margin: 0;
  line-height: 1.5;
}/* Scroll body — bordered top and bottom so the region reads as bounded. It takes
   whatever height the title and footer leave and scrolls inside it, so those two
   stay put however long the content gets. `min-height: 0` is what lets a flex
   child shrink below its content at all. */._body_12wtl_52 {
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}._bodyContent_12wtl_59 {
  padding: 12px 0;
}/* the bottom rule separates the body from a footer; without one it is just a stray line */._bodyLast_12wtl_64 {
  border-bottom: none;
}._bodyContentLast_12wtl_68 {
  padding-bottom: 0;
}/* Footer action row — sits below the body separator. */._footer_12wtl_73 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}._root_1ctzw_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  min-width: 0;
  padding: 0 var(--s-1);
}/* ─── Header ─────────────────────────────────────────────── */._header_1ctzw_12 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-3);
}._headerIcon_1ctzw_19 {
  color: var(--sidebar-accent);
  display: inline-flex;
}._headerTitle_1ctzw_24 {
  flex: 1;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--g700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}/* Red pill — total unread across all channels */._headerCount_1ctzw_34 {
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 2px 7px;
  min-width: 22px;
  text-align: center;
  line-height: 1.4;
}/* "+" button in the header — opens the create-channel modal. */._createButton_1ctzw_47 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--sidebar-accent);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}._createButton_1ctzw_47:hover {
  background: var(--sidebar-active-bg);
  border-color: var(--sidebar-accent);
}._createButton_1ctzw_47:focus-visible {
  outline: none;
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 3px var(--sidebar-active-bg);
}._createIcon_1ctzw_73 {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1;
}/* ─── Search ─────────────────────────────────────────────── */._searchRow_1ctzw_81 {
  position: relative;
  margin: 0 var(--s-3) var(--s-3);
}._searchIcon_1ctzw_86 {
  position: absolute;
  top: 50%;
  left: var(--s-3);
  transform: translateY(-50%);
  color: var(--g400);
  pointer-events: none;
  display: inline-flex;
}._searchInput_1ctzw_96 {
  width: 100%;
  height: 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 0 var(--s-3) 0 var(--s-7);
  font-size: var(--fs-xs);
  font-family: var(--f-body);
  background: var(--g50);
  color: var(--g700);
}._searchInput_1ctzw_96:focus {
  outline: none;
  border-color: var(--sidebar-accent);
  background: var(--color-surface);
}/* ─── Kind filter (All / DMs / Channels) ─────────────────── */._filterRow_1ctzw_116 {
  margin: 0 var(--s-3) var(--s-2);
}/* ─── Groups ─────────────────────────────────────────────── */._groups_1ctzw_122 {
  flex: 1;
}._groupsBody_1ctzw_126 {
  padding: var(--s-1) var(--s-2) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}._noResults_1ctzw_133 {
  padding: var(--s-4) var(--s-3);
  font-size: var(--fs-xs);
  color: var(--g500);
  text-align: center;
}._empty_1ctzw_140 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-6) var(--s-3);
  text-align: center;
}._emptyIcon_1ctzw_149 {
  display: inline-flex;
  color: var(--g300);
  margin-bottom: var(--s-1);
}._emptyTitle_1ctzw_155 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g700);
}._emptyHint_1ctzw_161 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._root_tad81_1 {
  display: flex;
  flex-direction: column;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--separator);
  background: var(--color-surface);
}._titleRow_tad81_9 {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}._identity_tad81_15 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}._identity_tad81_15:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--r-md);
}._titleBlock_tad81_36 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}._title_tad81_9 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--g800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}._meta_tad81_52 {
  font-size: var(--fs-xs);
  color: var(--g500);
}._iconBtn_tad81_57 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--g400);
  border-radius: var(--r-md);
  cursor: pointer;
  flex-shrink: 0;
}._iconBtn_tad81_57:hover {
  background: var(--g100);
  color: var(--g700);
}._iconBtn_tad81_57:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}._actions_tad81_81 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}/* the destructive one: same button, red on hover and focus */._deleteBtn_tad81_88:hover {
  background: var(--error-subtle, #fff0f0);
  color: var(--error);
}._deleteBtn_tad81_88:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}/* Search box — extracted from the Project Merge GenbaPane/TrusstorPane.
   This is the single source of truth for the search shape
   (radius/border/background/height/icon); the TopBar renders this same
   component for its decorative search. */._searchBox_1hv88_6 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--g300);
  border-radius: var(--r-xl);
  padding: 0 10px 0 12px;
  height: 38px;
  background: var(--g50);
  color: var(--g500);
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}._searchBox_1hv88_6:focus-within {
  border-color: var(--navy);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--navy-soft);
  color: var(--g700);
}._searchInput_1hv88_27 {
  background: none;
  border: 0;
  outline: none;
  font-family: var(--f-jp);
  font-size: var(--fs-sm);
  color: var(--g800);
  width: 100%;
}._searchInput_1hv88_27::placeholder {
  color: var(--g500);
}._clear_1hv88_41 {
  border: 0;
  background: transparent;
  color: var(--g400);
  padding: 2px;
  border-radius: var(--r-sm);
  display: inline-flex;
}._clear_1hv88_41:hover {
  color: var(--navy);
  background: var(--g100);
}._hint_1hv88_55 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 2px 6px;
  background: var(--color-surface);
  color: var(--g500);
}

/* New-conversation / edit-channel dialog. It speaks the comms sidebar's own
   vocabulary, so the header and empty-state rules are composed straight
   from ChatList (and the close button from ChatHeader). */

._backdrop_28crg_5 {
}

._panel_28crg_9 {
  width: 420px;
  overflow: hidden;
}

/* Sections carry their own padding. Compound selector: wins over the composed base whatever the bundle order. */
._panel_28crg_9._panel_28crg_9 {
  padding: 0;
  gap: 0;
}

/* ─── Header ─────────────────────────────────────────────── */

._header_28crg_23 {
}

._headerIcon_28crg_27 {
}

._title_28crg_31 {
  margin: 0;
}

._closeBtn_28crg_36 {
}

/* ─── Tabs and member rows share the sidebar's hover / selected look ─── */

._tabs_28crg_42 {
  display: flex;
  gap: var(--s-1);
  padding: 0 var(--s-4) var(--s-3);
}

._tab_28crg_42,
._member_28crg_49 {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
}

._tab_28crg_42 {
  gap: 6px;
  height: 30px;
  padding: 0 var(--s-3);
  color: var(--g600);
  background: transparent;
  border-radius: var(--r-lg);
}

._member_28crg_49 {
  gap: var(--s-3);
  padding: 7px var(--s-2);
  color: var(--g800);
  border-radius: var(--r-md);
}

._tab_28crg_42:hover,
._member_28crg_49:hover {
  background: var(--sidebar-hover-bg);
}

._selected_28crg_80 {
  font-weight: 700;
  color: var(--sidebar-active-text);
  background: var(--chat-channel-active-bg);
  border-color: var(--chat-channel-active-border);
}

._selected_28crg_80:hover {
  background: var(--chat-channel-active-hover-bg);
}

._tabIcon_28crg_91 {
  display: inline-flex;
  color: var(--g400);
}

._selected_28crg_80 ._tabIcon_28crg_91 {
  color: var(--sidebar-accent);
}

/* ─── Body ───────────────────────────────────────────────── */

._body_28crg_102 {
  padding: var(--s-2) var(--s-2) var(--s-3);
  border-top: 1px solid var(--separator);
}

._section_28crg_107 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._section_28crg_107 + ._section_28crg_107 {
  margin-top: var(--s-3);
}

._sectionTitle_28crg_117 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--g500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

._sectionCount_28crg_130 {
  font-size: var(--fs-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sidebar-accent);
}

/* The name field wears ui/SearchInput's box, so it matches the search below it */
._nameBox_28crg_138 {
}

._nameInput_28crg_142 {
}

/* Block wrapper — the search box is `flex: 1` and collapses in a flex column */
._fieldRow_28crg_147 {
  margin: 0 var(--s-2);
}

/* Fixed height (not max-height) so filtering the list never resizes the
   dialog — short result sets leave empty space instead of collapsing it. */
._members_28crg_153 {
  height: 236px;
  margin-top: var(--s-1);
}

._membersBody_28crg_158 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The current user — always a member, shown but not toggleable */
._memberFixed_28crg_165 {
  cursor: default;
}

._memberFixed_28crg_165:hover {
  background: transparent;
}

._memberName_28crg_173 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._memberYou_28crg_181 {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--g400);
}

._tick_28crg_187 {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--color-surface);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-circle);
}

._selected_28crg_80 ._tick_28crg_187 {
  background: var(--sidebar-accent);
  border-color: var(--sidebar-accent);
}

._noResults_28crg_202 {
  margin: auto; /* Centers within the fixed-height list */
}

/* ─── Footer ─────────────────────────────────────────────── */

._footer_28crg_209 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--separator);
}

._summary_28crg_217 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._summaryText_28crg_227 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Surface-coloured ring separates the overlapping avatars */
._stackItem_28crg_234 {
  display: inline-flex;
  padding: 2px;
  background: var(--color-surface);
  border-radius: var(--r-circle);
}

._stackItem_28crg_234 + ._stackItem_28crg_234 {
  margin-left: -4px;
}

._cancelBtn_28crg_245,
._submitBtn_28crg_246 {
  padding: 7px var(--s-3);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: none;
  border-radius: var(--r-lg);
  cursor: pointer;
}

._cancelBtn_28crg_245 {
  color: var(--g600);
  background: transparent;
}

._submitBtn_28crg_246 {
  color: var(--color-surface);
  background: var(--sidebar-accent);
}

._cancelBtn_28crg_245:hover:not(:disabled) {
  background: var(--sidebar-hover-bg);
}

._submitBtn_28crg_246:hover:not(:disabled) {
  opacity: 0.92;
}

._cancelBtn_28crg_245:disabled,
._submitBtn_28crg_246:disabled {
  opacity: 0.5;
  cursor: default;
}
/* What the two info dialogs (conversation, message) share: a muted line, a section heading, its list and the name in a row. */

._muted_ia2l5_3 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--g500);
}

._sectionTitle_ia2l5_9 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g500);
}

._list_ia2l5_18 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._name_ia2l5_26 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--g700);
}
._meta_1ualr_1 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._row_1ualr_7 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-1);
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--g700);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

._row_1ualr_7:hover:not(:disabled),
._row_1ualr_7:focus-visible {
  background: var(--g100);
  outline: none;
}

._row_1ualr_7:disabled {
  cursor: default;
}

._badge_1ualr_32 {
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g500);
}

._you_1ualr_39 {
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._rowIcon_1ualr_45 {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--g400);
}

._tile_1ualr_51 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--g100);
  color: var(--g600);
  font-size: var(--fs-xs);
  font-weight: 700;
}

._root_tad81_1 {
  display: flex;
  flex-direction: column;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--separator);
  background: var(--color-surface);
}

._titleRow_tad81_9 {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}

._identity_tad81_15 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

._identity_tad81_15:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

._titleBlock_tad81_36 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._title_tad81_9 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--g800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._meta_tad81_52 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._iconBtn_tad81_57 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--g400);
  border-radius: var(--r-md);
  cursor: pointer;
  flex-shrink: 0;
}

._iconBtn_tad81_57:hover {
  background: var(--g100);
  color: var(--g700);
}

._iconBtn_tad81_57:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._actions_tad81_81 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* the destructive one: same button, red on hover and focus */
._deleteBtn_tad81_88:hover {
  background: var(--error-subtle, #fff0f0);
  color: var(--error);
}

._deleteBtn_tad81_88:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

._player_6q95i_1 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 32px;
  min-width: 0;
}

._playBtn_6q95i_9 {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--r-circle);
  background: var(--navy);
  color: var(--color-surface);
  cursor: pointer;
}

._playBtn_6q95i_9:hover {
  filter: brightness(1.25);
}

._elapsed_6q95i_27,
._total_6q95i_28 {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

._elapsed_6q95i_27 {
  width: 28px;
  color: var(--g700);
}

._total_6q95i_28 {
  color: var(--g400);
}

/* The scrubber is a native range input so it drags, clicks and takes the
   keyboard; the browser's look is replaced with the navy track and knob.
   --progress is set inline from the current position. */
._scrubber_6q95i_46 {
  flex: 1;
  min-width: 80px;
  height: 12px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

._scrubber_6q95i_46:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

._scrubber_6q95i_46::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-md);
  background: linear-gradient(to right, var(--navy) var(--progress), var(--g100) var(--progress));
}

._scrubber_6q95i_46::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  border: 2px solid var(--navy);
  box-sizing: border-box;
}

._scrubber_6q95i_46::-moz-range-track {
  height: 4px;
  border-radius: var(--r-md);
  background: var(--g100);
}

._scrubber_6q95i_46::-moz-range-progress {
  height: 4px;
  border-radius: var(--r-md);
  background: var(--navy);
}

._scrubber_6q95i_46::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  border: 2px solid var(--navy);
  box-sizing: border-box;
}
._imageLink_1q1mc_1 {
  display: inline-block;
  border-radius: var(--r-lg);
  overflow: hidden;
}

._image_1q1mc_1 {
  max-width: 280px;
  max-height: 200px;
  display: block;
  border-radius: var(--r-lg);
}

._fileChip_1q1mc_14 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--g50);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-xs);
  color: var(--g700);
  text-decoration: none;
  max-width: 280px;
  cursor: pointer;
  font-family: inherit;
}

._fileChip_1q1mc_14:hover {
  background: var(--g100);
}

/* not yet on the server: nothing to download */
._fileChipLocal_1q1mc_35,
._fileChipLocal_1q1mc_35:hover {
  background: var(--g50);
  cursor: default;
}

._fileChip_1q1mc_14:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Inline-render placeholder while an image/voice attachment's bytes load. */
._imagePlaceholder_1q1mc_47 {
  width: 280px;
  height: 160px;
  border-radius: var(--r-lg);
  background: var(--g100);
}

._attachmentError_1q1mc_54 {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  line-height: 1;
  padding: 0 var(--s-3);
  border-radius: var(--r-lg);
  background: var(--g50);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._fileName_1q1mc_67 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

._fileSize_1q1mc_74 {
  color: var(--g500);
  flex-shrink: 0;
}

._voice_1q1mc_79 {
  width: min(100%, 340px);
  height: 32px;
}
._row_1jt9s_1 {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
}

._row_1jt9s_1:hover {
  background: var(--g50);
}

._rowMenuOpen_1jt9s_11 {
  background: var(--g50);
}

._rowMenuOpen_1jt9s_11 ._timeGrouped_1jt9s_15 {
  opacity: 1;
}

._rowPending_1jt9s_19 {
  opacity: 0.6;
}

._rowFailed_1jt9s_23 {
  background: var(--color-error-bg);
}

._statusPending_1jt9s_27 {
  font-size: var(--fs-2xs);
  color: var(--g500);
  font-style: italic;
}

/* a grouped row's delivery status, under its body */
._statusRow_1jt9s_34 {
  margin-top: 2px;
}

._statusFailed_1jt9s_38 {
  font-size: var(--fs-2xs);
  color: var(--color-error);
  font-weight: 600;
}

._avatar_1jt9s_44 {
  margin-top: 5px;
}

._avatarSpacer_1jt9s_48 {
  width: 25px;
  flex-shrink: 0;
}

._rowGrouped_1jt9s_53 {
  padding-top: 1px;
  padding-bottom: 1px;
}

._body_1jt9s_58 {
  flex: 1;
  min-width: 0;
}

._meta_1jt9s_63 {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  margin-bottom: 2px;
  justify-content: space-between;
}

._metaLeft_1jt9s_71 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

._author_1jt9s_77 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g800);
}

._time_1jt9s_15 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}

._metaRight_1jt9s_88 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

._mark_1jt9s_94 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--g400);
  line-height: 0;
}

._mark_1jt9s_94[data-mark='sent'] {
  color: var(--color-error);
}

._mark_1jt9s_94[data-mark='read'] {
  color: var(--color-success);
}

._readProgress_1jt9s_110 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  line-height: 1;
  white-space: nowrap;
}

._textRow_1jt9s_117 {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
}

._textRow_1jt9s_117 ._text_1jt9s_117 {
  flex: 1;
  min-width: 0;
}

._timeGrouped_1jt9s_15 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 120ms ease;
}

._row_1jt9s_1:hover ._timeGrouped_1jt9s_15 {
  opacity: 1;
}

/* Hidden anchor for the context menu — positioned absolutely at right-click coords */
._contextAnchor_1jt9s_142 {
  position: fixed;
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: none;
}

._contextPopup_1jt9s_152 {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
  padding: var(--s-1);
  min-width: 140px;
  outline: none;
}

._contextItem_1jt9s_162,
._contextItemDanger_1jt9s_163 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

._contextItem_1jt9s_162 {
  color: var(--g700);
}

._contextItem_1jt9s_162:hover {
  background: var(--g100);
}

._contextItemDanger_1jt9s_163 {
  color: var(--color-error);
}

._contextItemDanger_1jt9s_163:hover {
  background: var(--color-error-bg);
}

._contextSeparator_1jt9s_194 {
  height: 1px;
  background: var(--separator);
  margin: var(--s-1) var(--s-2);
}

._editRow_1jt9s_200 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-1);
  padding-bottom: var(--s-2);
}

._editTextarea_1jt9s_208 {
  width: 100%;
  min-height: 60px;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  font: inherit;
  color: inherit;
  resize: vertical;
  outline: none;
}

._editTextarea_1jt9s_208:focus {
  border-color: var(--info);
}

._editActions_1jt9s_225 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  justify-content: flex-end;
}

._editErrorMsg_1jt9s_232 {
  font-size: var(--fs-2xs);
  color: var(--color-error);
  margin-right: auto;
}

._editCancel_1jt9s_238,
._editSave_1jt9s_239 {
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

._editCancel_1jt9s_238 {
  background: transparent;
  color: var(--g600);
}

._editCancel_1jt9s_238:hover {
  background: var(--g100);
}

._editSave_1jt9s_239 {
  background: var(--info);
  color: var(--white);
}

._editedTag_1jt9s_263 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  font-weight: 400;
}

._youTag_1jt9s_269 {
  font-size: var(--fs-2xs);
  color: var(--g500);
  font-weight: 500;
}

._text_1jt9s_117 {
  font-size: var(--fs-xs);
  color: var(--g700);
  white-space: pre-wrap;
  word-break: break-word;
}

._attachments_1jt9s_282 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

._attachments_1jt9s_282:first-child {
  margin-top: 0;
}

._mentionChip_1jt9s_293 {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin: 0 1px;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: inherit;
  background: var(--info-tint);
  color: var(--info);
  cursor: pointer;
  white-space: nowrap;
  vertical-align: baseline;
}

._mentionChip_1jt9s_293:hover {
  filter: brightness(0.96);
  text-decoration: underline;
}

._mentionChip_1jt9s_293:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 1px;
}

._mention_activity_1jt9s_320 {
  background: var(--comms-mention-activity-bg);
  color: var(--comms-mention-activity-fg);
}

._mention_member_1jt9s_325 {
  background: var(--comms-mention-bg);
  color: var(--comms-mention-fg);
}


._rowDeleted_1jt9s_331 ._author_1jt9s_77 {
  color: var(--g400);
}

._deletedPlaceholder_1jt9s_335 {
  font-style: italic;
  color: var(--g400);
  font-size: var(--fs-xs);
}

._actions_1jt9s_341 {
  position: absolute;
  top: var(--s-2);
  right: var(--s-3);
  display: none;
  gap: var(--s-1);
}

._row_1jt9s_1 {
  position: relative;
}

._row_1jt9s_1:hover ._actions_1jt9s_341 {
  display: flex;
}

._deleteBtn_1jt9s_357 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: var(--g100);
  color: var(--g500);
  border-radius: var(--r-md);
  cursor: pointer;
  flex-shrink: 0;
}

._deleteBtn_1jt9s_357:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

._deleteBtn_1jt9s_357:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

._retryBtn_1jt9s_381 {
  border: none;
  background: transparent;
  color: var(--color-error);
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
._root_higjc_1 {
  flex: 1;
  background: var(--color-surface);
  min-height: 0;
  position: relative;
}

._viewport_higjc_8 {
  display: flex;
  flex-direction: column;
}

._list_higjc_13 {
  display: flex;
  flex-direction: column;
  padding: var(--s-1) 0 var(--s-3);
}

._empty_higjc_19 {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-7);
  color: var(--g500);
  text-align: center;
}

._emptyIcon_higjc_30 {
  color: var(--g300);
  display: inline-flex;
}

._emptyTitle_higjc_35 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--g700);
}

._emptyMeta_higjc_41 {
  font-size: var(--fs-xs);
  color: var(--g400);
}

._emptyHint_higjc_46 {
  font-size: var(--fs-sm);
  color: var(--g500);
}

._loadingMore_higjc_51 {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--g400);
  padding: var(--sp-2) 0;
}

._dateSeparator_higjc_58 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-1);

  &::before,
  &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--g200);
  }
}

._dateSeparatorLabel_higjc_73 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  white-space: nowrap;
}

._unreadDivider_higjc_79 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-1);

  &::before,
  &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sidebar-accent);
  }
}

._unreadDividerLabel_higjc_94 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--sidebar-accent);
  white-space: nowrap;
}

/* The "unread above" pill: the jump button's look, pinned to the top instead.
   It floats over the scroll root rather than sitting in the flow, so showing or
   hiding it never moves the messages under it. */
._unreadAboveBtn_higjc_104,
._scrollToBottomBtn_higjc_105 {
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  color: var(--g600);
  cursor: pointer;
  font-size: var(--fs-xs);
  z-index: var(--z-raised-1);

  &:hover {
    background: var(--g50);
  }
}

._scrollToBottomBtn_higjc_105 {
  position: sticky;
  bottom: var(--s-3);
}

._unreadAboveBtn_higjc_104 {
  position: absolute;
  top: var(--s-3);
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  color: var(--sidebar-accent);
}

._chevronUp_higjc_139 {
  display: inline-flex;
  line-height: 0;
  transform: rotate(180deg);
}

._newMessageBadge_higjc_145 {
  background: var(--g700);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 1px var(--s-1);
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}
._group_1jh9n_1 + ._group_1jh9n_1 {
  margin-top: var(--s-4);
}

._list_1jh9n_5 {
  gap: var(--s-2);
}

._row_1jh9n_9 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

._when_1jh9n_16 {
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  color: var(--g400);
  font-variant-numeric: tabular-nums;
}

/* the same mark the thread shows: green beside a reader, red beside someone who has not */
._mark_1jh9n_24 {
  flex-shrink: 0;
  display: inline-flex;
  line-height: 0;
}

._markRead_1jh9n_30 {
  color: var(--color-success);
}

._markUnread_1jh9n_34 {
  color: var(--color-error);
}
._root_ltoqu_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--separator);
  background: var(--color-surface);
}

._inputRow_ltoqu_10 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._tools_ltoqu_16 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
}

._iconBtn_ltoqu_23 {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--g500);
  border-radius: var(--r-lg);
  cursor: pointer;
  flex-shrink: 0;
}

._iconBtn_ltoqu_23:hover {
  background: var(--g50);
  color: var(--g700);
}

/* Wraps a tool button so its hint still shows while the button is disabled */
._toolHint_ltoqu_43 {
  display: inline-flex;
}

._iconBtn_ltoqu_23:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._iconBtn_ltoqu_23:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._iconBtnRecording_ltoqu_57 {
  background: var(--color-error-bg);
  color: var(--color-error);
}

._iconBtnRecording_ltoqu_57:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

._editorWrap_ltoqu_67 {
  flex: 1;
  position: relative;
  min-width: 0;
}

._editor_ltoqu_67 {
  min-height: 36px;
  max-height: 120px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
}

._editable_ltoqu_81 {
  min-height: 34px;
  padding: 8px var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--g800);
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
}

._editor_ltoqu_67:focus-within {
  border-color: var(--info);
  outline: 2px solid var(--info);
  outline-offset: 0;
}

._editorEmpty_ltoqu_99::before {
  content: attr(data-placeholder);
  color: var(--g400);
  pointer-events: none;
}

._tokenChip_ltoqu_105 {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--info-tint);
  color: var(--info);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

._token_activity_ltoqu_120 {
  background: var(--comms-mention-activity-bg);
  color: var(--comms-mention-activity-fg);
}

._token_member_ltoqu_125 {
  background: var(--comms-mention-bg);
  color: var(--comms-mention-fg);
}

._sendBtn_ltoqu_130 {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--g200);
  color: var(--color-surface);
  border-radius: var(--r-lg);
  cursor: not-allowed;
  flex-shrink: 0;
}

._sendBtnActive_ltoqu_144 {
  background: var(--info);
  cursor: pointer;
}

._sendBtnActive_ltoqu_144:hover {
  filter: brightness(1.05);
}

._sendBtn_ltoqu_130:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

._charCount_ltoqu_158 {
  font-size: var(--fs-xs);
  color: var(--g400);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}

._charCountOver_ltoqu_167 {
  color: var(--color-error);
  font-weight: 600;
}

._hiddenInput_ltoqu_172 {
  display: none;
}

._voicePreviewWrap_ltoqu_176 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

._maxLengthLabel_ltoqu_184 {
  font-size: var(--fs-xs);
  color: var(--accent-attention-dark);
  padding: 0 var(--s-1);
}

._noticeRow_ltoqu_190 {
  font-size: var(--fs-xs);
  color: var(--accent-attention-dark);
  padding: 0 var(--s-3);
}

/* Slides in, then fades out just as the hook drops it (--notice-ms). */
._noticeTimed_ltoqu_197 {
  animation:
    _noticeIn_ltoqu_1 0.2s ease-out,
    _noticeOut_ltoqu_1 0.3s ease-in calc(var(--notice-ms) - 0.3s) forwards;
}

@keyframes _noticeIn_ltoqu_1 {
  from { opacity: 0; transform: translateY(4px); }
}

@keyframes _noticeOut_ltoqu_1 {
  to { opacity: 0; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  ._noticeTimed_ltoqu_197 { animation: none; }
}

._errorRow_ltoqu_215 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  padding: 0 var(--s-3);
}
._popup_1euu6_1 {
  position: absolute;
  bottom: 100%;
  left: var(--s-5);
  margin-bottom: var(--s-2);
  width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._header_1euu6_17 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--separator);
}

._title_1euu6_25 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--g500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

._backBtn_1euu6_33 {
  border: none;
  background: transparent;
  color: var(--info);
  font-size: var(--fs-xs);
  font-family: inherit;
  cursor: pointer;
  padding: 2px var(--s-1);
}

._backBtn_1euu6_33:hover {
  text-decoration: underline;
}

._search_1euu6_47 {
  margin: var(--s-2) var(--s-3);
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 var(--s-2);
  font-size: var(--fs-xs);
  font-family: var(--f-body);
  background: var(--g50);
  color: var(--g700);
}

._search_1euu6_47:focus {
  outline: none;
  border-color: var(--info);
  background: var(--color-surface);
}

._list_1euu6_65 {
  list-style: none;
  margin: 0;
  padding: var(--s-1) 0 var(--s-2);
}

._listScroll_1euu6_71 {
  max-height: 220px;
}

._item_1euu6_75 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--g700);
}

._itemActive_1euu6_85 {
  background: var(--sidebar-active-bg);
  color: var(--g800);
}

._item_1euu6_75:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: -2px;
}

._itemLabel_1euu6_95 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._kindDot_1euu6_102 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  flex-shrink: 0;
}

._kind_activity_1euu6_109 {
  background: var(--comms-mention-activity-fg);
}

._kind_member_1euu6_113 {
  background: var(--comms-mention-fg);
}

._empty_1euu6_117 {
  padding: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--g500);
  text-align: center;
}

@keyframes _mentionShimmer_1euu6_1 {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.65; }
}

._skeletonItem_1euu6_129 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  animation: _mentionShimmer_1euu6_1 1.4s ease-in-out infinite;
}

._skeletonDot_1euu6_137 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--g300);
  flex-shrink: 0;
}

._skeletonLabel_1euu6_145 {
  height: 10px;
  border-radius: var(--r-sm);
  background: var(--g300);
}
._pendingList_1b2kk_1 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

._pendingItem_1b2kk_10 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  background: var(--g50);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-xs);
  color: var(--g700);
  max-width: 240px;
}

._pendingItemError_1b2kk_24 {
  border-color: var(--color-error);
}

._pendingStatus_1b2kk_28 {
  font-size: var(--fs-2xs, var(--fs-xs));
  color: var(--g500);
  flex-shrink: 0;
}

._pendingItemError_1b2kk_24 ._pendingStatus_1b2kk_28 {
  color: var(--color-error);
}

._pendingThumb_1b2kk_38 {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--r-md);
}

._pendingFileLabel_1b2kk_45 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}

._pendingFileName_1b2kk_52 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

._pendingRemoveBtn_1b2kk_59 {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--g500);
  border-radius: var(--r-md);
  cursor: pointer;
}

._pendingRemoveBtn_1b2kk_59:hover {
  background: var(--g100);
  color: var(--g700);
}
._bar_1ecwk_1 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  min-width: 0;
}

._player_1ecwk_13 {
  flex: 1;
}

._barError_1ecwk_17 {
  border-color: var(--color-error);
}

._status_1ecwk_21 {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}

._barError_1ecwk_17 ._status_1ecwk_21 {
  color: var(--color-error);
}

._removeBtn_1ecwk_31 {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--g500);
  border-radius: var(--r-md);
  cursor: pointer;
}

._removeBtn_1ecwk_31:hover {
  background: var(--g100);
  color: var(--g700);
}
._wave_dq20s_1 {
  flex: 1;
  min-width: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
}

._bar_dq20s_12 {
  flex-shrink: 0;
  width: 3px;
  border-radius: var(--r-sm);
  background: var(--color-error);
  opacity: 0.75;
  transition: height 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  ._bar_dq20s_12 { transition: none; }
}
._recordingBar_h7lzp_1 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-3) 0 var(--s-1);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-lg);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--fs-sm);
  min-width: 0;
}

._iconBtn_h7lzp_16 {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--color-error);
  cursor: pointer;
}

._iconBtn_h7lzp_16:hover {
  background: var(--color-error-border);
}

._iconBtn_h7lzp_16:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 1px;
}

._recordingDot_h7lzp_40 {
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--color-error);
  animation: _pulse_h7lzp_1 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

._recordingTime_h7lzp_49 {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@keyframes _pulse_h7lzp_1 {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  ._recordingDot_h7lzp_40 { animation: none; }
}
._thread_vpghx_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-1) var(--s-5);
}
._panels_1tmd3_1 {
  flex: 1;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s-4);
  min-height: 0;
}

._card_1tmd3_9 {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--ops-card-border);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 0;
}

._threadCard_1tmd3_20 {
  min-width: 0;
}

/* Shown in the thread area until the user picks a channel from the sidebar. */
._threadEmpty_1tmd3_25 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6);
  text-align: center;
  color: var(--g500);
}

._threadEmptyIcon_1tmd3_37 {
  color: var(--g300);
}

._threadEmptyTitle_1tmd3_41 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g700);
}

._threadEmptyHint_1tmd3_47 {
  font-size: var(--fs-xs);
  color: var(--g500);
}
._panel_sckw7_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 0;
}

._titleRow_sckw7_14 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--info);
}

._title_sckw7_14 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g700);
}

._stats_sckw7_30 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

._stat_sckw7_30 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--s-2) var(--s-1);
  border-radius: var(--r-lg);
  background: var(--g50);
}

._stat_sckw7_30[data-tone='live'] {
  background: var(--info-tint);
}

._stat_sckw7_30[data-tone='alert'] {
  background: hsl(var(--destructive) / 10%);
}

._statValue_sckw7_55 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

._stat_sckw7_30[data-tone='live'] ._statValue_sckw7_55 {
  color: hsl(var(--camera-info));
}

._stat_sckw7_30[data-tone='alert'] ._statValue_sckw7_55 {
  color: hsl(var(--destructive));
}

._statLabel_sckw7_70 {
  font-size: var(--fs-2xs);
  color: var(--g500);
  margin-top: 1px;
}

._searchField_sckw7_76 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: var(--g50);
  color: var(--g400);
}

._searchField_sckw7_76:focus-within {
  border-color: var(--info);
  color: var(--info);
  background: var(--color-surface);
}

._searchInput_sckw7_93 {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._searchInput_sckw7_93::placeholder {
  color: var(--g400);
}

._chips_sckw7_108 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

._chip_sckw7_108 {
  padding: 3px 10px;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  background: var(--color-surface);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--g600);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

._chip_sckw7_108:hover {
  background: var(--g50);
  color: var(--navy);
}

._chip_sckw7_108[data-active='true'] {
  background: var(--info-tint);
  border-color: var(--info);
  color: var(--info);
  font-weight: 600;
}

._list_sckw7_138 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._listScroll_sckw7_146 {
  flex: 1;
}

._empty_sckw7_150 {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  color: var(--g400);
  font-size: var(--fs-sm);
}

._row_sckw7_157 {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 120ms;
}

._row_sckw7_157:hover {
  background: var(--g50);
}

/* Selection matches the equipment asset registry — primary tint + ring. */
._row_sckw7_157[data-selected='true'] {
  background: hsl(var(--primary) / 10%);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 30%);
}

._rowBody_sckw7_183 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

._cameraName_sckw7_191 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._cameraMeta_sckw7_200 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}

._rowAlert_sckw7_205 {
  flex: none;
  display: flex;
  color: var(--red);
}
._video_1miea_1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._video_1miea_1[data-variant='modal'] {
  border-radius: var(--r-2xl);
}

._placeholder_1miea_13 {
  display: flex;
  color: var(--g300);
}

._placeholder_1miea_13[data-variant='feed'][data-status='live'] {
  color: var(--blue);
  opacity: 0.55;
}

._placeholder_1miea_13[data-variant='modal'] {
  color: var(--inverse-text-soft);
}
._panel_3mtil_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  min-height: 0;
  overflow: hidden;
}

._header_3mtil_14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--separator);
}

._title_3mtil_23 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g700);
}

._gridToggle_3mtil_32 {
  display: flex;
  gap: var(--s-1);
  padding: 3px;
  border-radius: var(--r-lg);
}

._gridButton_3mtil_39 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--s-1) var(--s-2);
  border: none;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--g500);
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

._gridButton_3mtil_39:hover {
  color: var(--navy);
}

._gridButton_3mtil_39[data-active='true'] {
  background: hsl(var(--primary));
  color: var(--white);
  box-shadow: var(--shadow-card);
}

._grid_3mtil_32 {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: calc((100% - (var(--cols) - 1) * var(--s-3)) / var(--cols));
  gap: var(--s-3);
  padding: var(--s-2);
}

._gridScroll_3mtil_73 {
  flex: 1;
  min-height: 0;
}

._empty_3mtil_78 {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
  color: var(--g400);
  font-size: var(--fs-sm);
}

._tile_3mtil_86 {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  border: 1px solid hsl(var(--camera-info) / 30%);
  border-radius: var(--r-xl);
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: 0 0 0 1px hsl(var(--camera-info) / 30%);
  transition: border-color 120ms, box-shadow 120ms;
}

._selectBtn_3mtil_99 {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

._tile_3mtil_86:hover {
  box-shadow: 0 0 0 1px hsl(var(--camera-info) / 30%), var(--shadow-card-hover);
}

._tile_3mtil_86[data-status='offline'] {
  border-color: hsl(var(--warning) / 30%);
  box-shadow: 0 0 0 1px hsl(var(--warning) / 30%);
}

._tile_3mtil_86[data-status='alert'] {
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 1px hsl(var(--destructive));
  animation: _alertPulse_3mtil_1 1.6s ease-in-out infinite;
}

._tile_3mtil_86[data-selected='true']:not([data-status='alert'], [data-status='offline']) {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--primary));
}

._badge_3mtil_135 {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-raised-1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: var(--r-md);
  background: var(--inverse-text-strong);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g600);
  box-shadow: var(--shadow-card);
}

._expand_3mtil_154 {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: var(--z-raised-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  background: var(--inverse-text-strong);
  color: var(--g700);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
  box-shadow: var(--shadow-card);
}

._tile_3mtil_86:hover ._expand_3mtil_154,
._expand_3mtil_154:focus-visible {
  opacity: 1;
}

._expand_3mtil_154:hover {
  background: var(--white);
  color: var(--navy);
}

._badge_3mtil_135[data-status='alert'] {
  color: var(--red);
}

._viewport_3mtil_187 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;

  --checker-square: var(--g50);
  --checker-base: var(--color-surface);

  background-image: conic-gradient(var(--checker-square) 90deg, transparent 90deg 180deg, var(--checker-square) 180deg 270deg, transparent 270deg);
  background-size: 18px 18px;
  background-color: var(--checker-base);
}

._viewport_3mtil_187[data-status='offline'] {
  --checker-square: var(--g100);
  --checker-base: var(--g50);

  opacity: 0.55;
}

._viewport_3mtil_187[data-status='alert'] {
  --checker-square: var(--color-error-bg);
  --checker-base: var(--surface-alert);
}

@keyframes _alertPulse_3mtil_1 {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

._alertPill_3mtil_220 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--r-md);
  background: var(--red);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-chip);
}

._caption_3mtil_238 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--separator);
}

._tileName_3mtil_246 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._tileMeta_3mtil_255 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}
._panel_agrc7_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  min-height: 0;
  overflow: hidden;
}

._header_agrc7_14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--separator);
}

._titleRow_agrc7_23 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--red);
}

._title_agrc7_23 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g700);
}

._close_agrc7_39 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--g400);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

._close_agrc7_39:hover {
  background: var(--g50);
  color: var(--navy);
}

._list_agrc7_58 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._listScroll_agrc7_67 {
  flex: 1;
}

._empty_agrc7_71 {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  color: var(--g400);
  font-size: var(--fs-sm);
}

._card_agrc7_78 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
}

._card_agrc7_78[data-severity='high'] {
  background-color: hsl(var(--destructive) / 10%);
  border-color: hsl(var(--destructive) / 30%);
}

._card_agrc7_78[data-severity='medium'] {
  background-color: hsl(var(--warning) / 10%);
  border-color: hsl(var(--warning) / 30%);
}

/* --info is a hex; --camera-info is its HSL-triple companion. */
._card_agrc7_78[data-severity='low'] {
  background-color: hsl(var(--camera-info) / 10%);
  border-color: hsl(var(--camera-info) / 30%);
}

._cardHead_agrc7_103 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._eventTitle_agrc7_109 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
}

._card_agrc7_78[data-severity='high'] ._eventTitle_agrc7_109  { color: var(--red); }
._card_agrc7_78[data-severity='medium'] ._eventTitle_agrc7_109 { color: var(--amber); }
._card_agrc7_78[data-severity='low'] ._eventTitle_agrc7_109    { color: var(--blue); }

._meta_agrc7_119 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

._metaItem_agrc7_125 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  color: var(--g600);
}

._snapshot_agrc7_133 {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 5;
  border-radius: var(--r-md);
  background: hsl(var(--camera-secondary) / 30%);
  border: 1px solid var(--navy-line);
  color: var(--g400);
}
._backdrop_8wjos_1 {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: var(--lightbox-backdrop);
}

._popup_8wjos_8 {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) clamp(var(--s-6), 6vw, 96px);
}

._header_8wjos_18 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

._heading_8wjos_25 {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}

._titles_8wjos_32 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._name_8wjos_39 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._meta_8wjos_49 {
  font-size: var(--fs-sm);
  color: var(--inverse-text-medium);
}

._badge_8wjos_54 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-md);
  background: var(--inverse-bg-medium);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inverse-text-strong);
}

._badge_8wjos_54[data-status='alert'] {
  color: var(--red);
  background: var(--color-error-bg);
}

._close_8wjos_73 {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--r-lg);
  background: var(--lightbox-button-bg);
  color: var(--white);
  cursor: pointer;
  transition: background 120ms;
}

._close_8wjos_73:hover {
  background: var(--inverse-bg-medium);
}

._viewport_8wjos_92 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  border-radius: var(--r-2xl);
  background-image: conic-gradient(var(--inverse-bg-light) 90deg, transparent 90deg 180deg, var(--inverse-bg-light) 180deg 270deg, transparent 270deg);
  background-size: 28px 28px;
  background-color: var(--inverse-bg-faint);
}

._viewport_8wjos_92[data-status='offline'] { opacity: 0.55; }

._viewport_8wjos_92[data-status='alert'] {
  animation: _modalAlertPulse_8wjos_1 1.6s ease-in-out infinite;
}

@keyframes _modalAlertPulse_8wjos_1 {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}


._alertPill_8wjos_117 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--r-lg);
  background: var(--red);
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-chip);
}
._eventsToggle_r6dgh_1 {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--g700);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

._eventsToggle_r6dgh_1:hover {
  background: var(--g50);
  color: var(--navy);
}

._eventsToggle_r6dgh_1[data-active='true'] {
  border-color: hsl(var(--destructive));
  background: var(--color-error-bg);
  color: var(--color-error);
}

._eventsCount_r6dgh_29 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: var(--white);
  font-size: var(--fs-3xs);
  font-weight: 700;
  line-height: 1;
}

._body_r6dgh_44 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 0.9fr);
  gap: var(--s-5);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

._body_r6dgh_44[data-events-open='false'] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
}
/* Shared pane pieces: spinner, page buttons, status chips, skeleton, state panel.
   Translated from merge/styles.css onto DS + --pm-* tokens. */

/* ---- spinner -------------------------------------------------------------- */
._spin_1tzc0_5 {
  display: inline-flex;
  animation: _spin_1tzc0_5 1s linear infinite;
  transform-origin: center;
}

._spin_1tzc0_5 svg {
  display: block;
}

@keyframes _spin_1tzc0_5 {
  to {
    transform: rotate(360deg);
  }
}

/* ---- status / state chips ------------------------------------------------- */
._chip_1tzc0_22 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  line-height: 1.3;
  white-space: nowrap;
}

._chipJp_1tzc0_36 {
  font-family: var(--f-jp);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: var(--fs-2xs);
}

._sActive_1tzc0_43 {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

._sPre_1tzc0_48 {
  background: var(--info-tint);
  color: var(--info);
}

._sDone_1tzc0_53 {
  background: var(--g100);
  color: var(--g600);
}

._sEnabled_1tzc0_58 {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

._sDisabled_1tzc0_63 {
  background: var(--g100);
  color: var(--g500);
}

._linked_1tzc0_68 {
  background: var(--pm-linked-chip-bg);
  color: var(--pm-linked-text);
}

._dot_1tzc0_73 {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: currentColor;
}

/* ---- skeleton list -------------------------------------------------------- */
._paneList_1tzc0_81 {
  flex: 1;
}

._paneListBody_1tzc0_85 {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._skelRow_1tzc0_92 {
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

._skelTop_1tzc0_101 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

._skel_1tzc0_92 {
  display: block;
  width: var(--skel-w, 100%);
  background: linear-gradient(
    90deg,
    var(--g100) 25%,
    var(--pm-skeleton-highlight) 37%,
    var(--g100) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--r-sm);
  animation: _shimmer_1tzc0_1 1.4s ease infinite;
}

._skelTitle_1tzc0_121 {
  height: 13px;
}

._skelMeta_1tzc0_125 {
  width: 64px;
  height: 11px;
  flex-shrink: 0;
}

._skelSub_1tzc0_131 {
  height: 10px;
}

@keyframes _shimmer_1tzc0_1 {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* ---- state panel (empty / error / connect) -------------------------------- */
._paneState_1tzc0_146 {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px 28px;
  text-align: center;
}

._paneStateInner_1tzc0_154 {
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

._si_1tzc0_162 {
  width: 52px;
  height: 52px;
  border-radius: var(--r-2xl);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

._siNeutral_1tzc0_171 {
  background: var(--g100);
  color: var(--g500);
}

._siError_1tzc0_176 {
  background: var(--color-error-bg);
  color: var(--color-error);
}

._siConnect_1tzc0_181 {
  background: var(--pm-genba-soft);
  color: var(--pm-genba-connect);
}

._paneStateTitle_1tzc0_186 {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

._paneStateBody_1tzc0_194 {
  font-size: var(--fs-xs);
  color: var(--g500);
  margin: 6px 0 0;
  line-height: 1.5;
}

._paneStateActions_1tzc0_201 {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  ._spin_1tzc0_5,
  ._skel_1tzc0_92 {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
  }
}
/* Center bridge — the seam where two worlds become one.
   Translated from merge/styles.css. */

._bridge_q99qa_4 {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 78px;
}

/* ---- connector: dashed rail + two provenance nodes ------------------------ */
._connector_q99qa_15 {
  position: relative;
  width: 100%;
  height: 2px;
}

._rail_q99qa_21 {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--g200) 0 6px, transparent 6px 12px);
}

._railArmed_q99qa_31 {
  background: var(--prov-merged);
  box-shadow: 0 0 0 1px var(--pm-linked-rail-glow);
}

._node_q99qa_36 {
  width: 12px;
  height: 12px;
  border-radius: var(--r-circle);
  border: 2px solid var(--g200);
  background: var(--color-surface);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

._nodeL_q99qa_47 {
  left: -6px;
}

._nodeR_q99qa_51 {
  right: -6px;
}

._nodeFilledL_q99qa_55 {
  border-color: var(--prov-daitec);
  background: var(--prov-daitec);
}

._nodeFilledR_q99qa_60 {
  border-color: var(--sidebar-accent);
  background: var(--sidebar-accent);
}

/* ---- card ----------------------------------------------------------------- */
._card_q99qa_66 {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

._icon_q99qa_75 {
  width: 46px;
  height: 46px;
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  margin: 18px auto 0;
  transition: background 0.2s, color 0.2s;
}

._iconIdle_q99qa_85 {
  background: var(--g100);
  color: var(--g400);
}

._iconArmed_q99qa_90 {
  background: var(--pm-linked-icon-bg);
  color: var(--pm-linked-text);
}

._iconLinking_q99qa_95 {
  background: var(--info-tint);
  color: var(--info);
}

._iconSuccess_q99qa_100 {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

._iconConflict_q99qa_105 {
  background: var(--color-error-bg);
  color: var(--color-error);
}

._body_q99qa_110 {
  padding: 12px 14px 16px;
  text-align: center;
}

._lead_q99qa_115 {
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._leadMuted_q99qa_122 {
  color: var(--g500);
  font-weight: 500;
}

._hint_q99qa_127 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 5px;
  line-height: 1.45;
}

/* ---- staged-pair mini preview --------------------------------------------- */
._stagePair_q99qa_135 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0 4px;
  text-align: left;
}

._stageSide_q99qa_143 {
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: 8px 9px;
  background: var(--g50);
  position: relative;
}

._stageEmpty_q99qa_151 {
  border-style: dashed;
  background: transparent;
}

._stageKey_q99qa_156 {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

._stageGenba_q99qa_166 ._stageKey_q99qa_156 {
  color: var(--pm-genba-stage-key);
}

._stageTrusstor_q99qa_170 ._stageKey_q99qa_156 {
  color: var(--dashboard-teal-deep);
}

._stageEmpty_q99qa_151 ._stageKey_q99qa_156 {
  color: var(--g400);
}

._stageVal_q99qa_178 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  margin-top: 3px;
  line-height: 1.25;
}

._stageValJp_q99qa_186 {
  font-family: var(--f-jp);
}

._stageCode_q99qa_190 {
  font-family: var(--f-mono);
  font-size: var(--fs-3xs);
  color: var(--g500);
  margin-top: 1px;
}

._stageNotSel_q99qa_197 {
  font-size: var(--fs-xs);
  color: var(--g400);
  font-weight: 500;
  margin-top: 3px;
}

._pin_q99qa_204 {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
}

._stageGenba_q99qa_166 ._pin_q99qa_204 {
  background: var(--prov-daitec);
}

._stageTrusstor_q99qa_170 ._pin_q99qa_204 {
  background: var(--sidebar-accent);
}

._stageJoin_q99qa_218 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--prov-merged);
}

._joinLine_q99qa_226 {
  flex: 1;
  height: 1px;
  background: var(--prov-merged);
  opacity: 0.5;
}

/* ---- D-ORCA name field ---------------------------------------------------- */
._nameField_q99qa_234 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0 2px;
  text-align: left;
}

._nameLabel_q99qa_242 {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g500);
}

._nameInput_q99qa_250 {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--navy);
  font: inherit;
  font-size: var(--fs-sm);
  font-family: var(--f-jp);
  transition: border-color 0.15s, box-shadow 0.15s;
}

._nameInput_q99qa_250::placeholder {
  color: var(--g400);
}

._nameInput_q99qa_250:focus {
  outline: none;
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 3px var(--pm-linked-rail-glow);
}

._nameInput_q99qa_250:disabled {
  background: var(--g50);
  color: var(--g500);
}

/* success — unified site card */
._stageUnified_q99qa_280 {
  background: var(--status-completed-bg);
  border-color: transparent;
}

._stageKeyUnified_q99qa_285 {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--status-completed-text);
}

._stageCodeUnified_q99qa_293 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--g700);
  margin-top: 3px;
}

/* ---- error + actions ------------------------------------------------------ */
._err_q99qa_301 {
  margin: 0 14px 14px;
  padding: 9px 11px;
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-md);
  font-size: var(--fs-2xs);
  color: var(--color-error);
  line-height: 1.45;
  display: flex;
  gap: 8px;
}

._err_q99qa_301 svg {
  flex-shrink: 0;
  margin-top: 1px;
}

._actions_q99qa_319 {
  padding: 0 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- responsive: below ~960px the board stacks, so the bridge stops being a
   horizontal seam between two panes and becomes a compact sticky commit strip
   that hugs the bottom of the viewport. The connector rail/nodes only make
   sense between side-by-side panes, so they're hidden. -------------------- */
@media (width <= 960px) {
  ._bridge_q99qa_4 {
    position: sticky;
    top: auto;
    bottom: 12px;
    padding-top: 0;
    z-index: var(--z-raised-2);
  }

  ._connector_q99qa_15 {
    display: none;
  }

  ._card_q99qa_66 {
    box-shadow: var(--shadow-modal);
  }

  ._icon_q99qa_75 {
    margin-top: 14px;
  }
}
/* Site row (Genba site / Trusstor project). Consumes --pane-accent and
   --pane-soft set by the enclosing pane. Translated from merge/styles.css. */

._row_1c43g_4 {
  position: relative;
  text-align: left;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--f-body);
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

._selectable_1c43g_19 {
  cursor: pointer;
}

._selectable_1c43g_19:hover {
  border-color: var(--pane-accent);
  box-shadow: var(--shadow-card-hover);
}

._selectable_1c43g_19:focus-visible {
  outline: none;
  border-color: var(--pane-accent);
  box-shadow: 0 0 0 3px var(--pane-soft), var(--shadow-card-hover);
}

._selected_1c43g_34 {
  border-color: var(--pane-accent);
  background: var(--pane-soft);
  box-shadow: inset 2px 0 0 var(--pane-accent), var(--shadow-card-hover);
}

._selected_1c43g_34::after {
  content: '';
  position: absolute;
  top: 11px;
  right: 11px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-circle);
  background: var(--pane-accent);
  box-shadow: 0 0 0 3px var(--pane-soft);
}

._linkedRow_1c43g_52 {
  background: var(--g50);
  border-style: dashed;
  border-color: var(--g200);
  cursor: default;
}

._linkedRow_1c43g_52 ._nm_1c43g_59 {
  color: var(--g600);
}

._disabled_1c43g_63 {
  opacity: 0.62;
  cursor: default;
}

._rowMain_1c43g_68 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

._rowName_1c43g_75 {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

._nm_1c43g_59 {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--navy);
  line-height: 1.3;
}

._nmJp_1c43g_88 {
  font-family: var(--f-jp);
}

._nmEn_1c43g_92 {
  font-size: var(--fs-2xs);
  color: var(--g400);
  font-weight: 500;
  margin-top: 1px;
}

._rowCode_1c43g_99 {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--g500);
  white-space: nowrap;
  padding-top: 2px;
}

._rowMeta_1c43g_107 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._addr_1c43g_114 {
  font-size: var(--fs-xs);
  color: var(--g500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

._addrJp_1c43g_123 {
  font-family: var(--f-jp);
}

._addr_1c43g_114 svg {
  color: var(--g300);
  flex-shrink: 0;
}

._dates_1c43g_132 {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--g500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

._dates_1c43g_132 svg {
  color: var(--g300);
}

._linkedNote_1c43g_145 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  color: var(--g500);
  margin-top: 1px;
}

._linkedNote_1c43g_145 svg {
  color: var(--prov-merged);
  flex-shrink: 0;
}

._linkedNote_1c43g_145 b {
  font-family: var(--f-mono);
  color: var(--g600);
  font-weight: 500;
}
/* Board pane chrome shared by GenbaPane and TrusstorPane. Each pane's own
   module sets --pane-accent / --pane-soft / --pane-text, which cascade to the
   mark, eyebrow and SiteRow. Translated from merge/styles.css. */

._pane_s3poo_5 {
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 560px;
  min-width: 0;
}

/* ---- head ----------------------------------------------------------------- */
._head_s3poo_18 {
  padding: 15px 16px 14px;
  border-bottom: 1px solid var(--separator);
  display: flex;
  flex-direction: column;
  gap: 13px;
}

._id_s3poo_26 {
  display: flex;
  align-items: center;
  gap: 11px;
}

._mark_s3poo_32 {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--pane-soft);
  border: 1px solid var(--separator);
  overflow: hidden;
}

._mark_s3poo_32 img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

._idText_s3poo_51 {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

._eyebrow_s3poo_58 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pane-text);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

._name_s3poo_70 {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
  margin-top: 3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

._count_s3poo_82 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--g400);
  white-space: nowrap;
  align-self: flex-start;
  padding-top: 2px;
}

/* ---- tools ---------------------------------------------------------------- */
._tools_s3poo_92 {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---- list + footer -------------------------------------------------------- */
._list_s3poo_99 {
  flex: 1;
}

._listBody_s3poo_103 {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* Genba Plus pane (left). Shared chrome lives in pane.module.css; this module
   sets the pane's accent vars and styles its status filter. */

._genba_j6svt_4 {
  --pane-accent: var(--prov-daitec);
  --pane-soft: var(--pm-genba-soft);
  --pane-text: var(--pm-genba-text);
}

/* ---- status filter -------------------------------------------------------- */
._statusFilter_j6svt_11 {
  display: flex;
  align-items: center;
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
}

._statusFilter_j6svt_11 button {
  padding: 0 10px;
  height: 34px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--color-surface);
  border: 0;
  color: var(--g500);
  border-left: 1px solid var(--g200);
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}

._statusFilter_j6svt_11 button:first-child {
  border-left: 0;
}

._statusOn_j6svt_37 {
  background: var(--navy) !important;
  color: var(--white) !important;
}

._statusFilter_j6svt_11 button:not(._statusOn_j6svt_37):hover {
  background: var(--g50);
  color: var(--navy);
}
/* Trusstor pane (right). Shared chrome lives in pane.module.css; this module
   sets the pane's accent vars and widens its brand mark. */

._trusstor_shwk3_4 {
  --pane-accent: var(--sidebar-accent);
  --pane-soft: var(--pm-trusstor-soft);
  --pane-text: var(--dashboard-teal-deep);
}

/* Trusstor's brand asset is a wide wordmark, not a square glyph — give it a
   rectangular slot so it reads (Genba's mark stays square). Scoped under
   .trusstor so it outranks pane.module.css's .mark regardless of load order. */
._trusstor_shwk3_4 ._wordmark_shwk3_13 {
  width: auto;
  padding: 0 9px;
}

._trusstor_shwk3_4 ._wordmark_shwk3_13 img {
  width: auto;
  height: 15px;
  max-width: 96px;
}
/* Upstream brand badge — extracted from ExistingLinks / UnlinkModal. The
   square edge is driven by --badge-size (default set by the component); the
   inner asset sizes scale from it so a custom size stays proportional. */

._badge_fuh5s_5 {
  --badge-size: 30px;

  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--separator);
  overflow: hidden;
}

._badge_fuh5s_5 img {
  width: calc(var(--badge-size) * 0.633);
  height: calc(var(--badge-size) * 0.633);
  object-fit: contain;
}

._badgeGenba_fuh5s_24 {
  background: var(--pm-genba-badge-bg);
}

/* Wide Trusstor wordmark — overrides the square width + img sizing. */
._badgeTrusstor_fuh5s_29 {
  background: var(--pm-trusstor-badge-bg);
  width: auto;
  padding: 0 calc(var(--badge-size) * 0.233);
}

._badgeTrusstor_fuh5s_29 img {
  width: auto;
  height: calc(var(--badge-size) * 0.367);
  max-width: calc(var(--badge-size) * 2);
}
/* Existing links — collapsible section. Translated from merge/styles.css. */

._section_1au2k_3 {
  margin-top: 22px;
  background: var(--color-surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

._head_1au2k_12 {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.14s;
}

._head_1au2k_12:hover {
  background: var(--g50);
}

._chev_1au2k_30 {
  color: var(--g400);
  display: inline-flex;
  transition: transform 0.18s;
}

._chevOpen_1au2k_36 {
  transform: rotate(90deg);
}

._title_1au2k_40 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g500);
}

._count_1au2k_49 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--white);
  background: var(--prov-merged);
  border-radius: var(--r-pill);
  padding: 1px 9px;
}

._spacer_1au2k_58 {
  flex: 1;
}

._hint_1au2k_62 {
  font-family: var(--f-jp);
  font-size: var(--fs-2xs);
  color: var(--g400);
}

._body_1au2k_68 {
  border-top: 1px solid var(--separator);
}

._row_1au2k_72 {
  display: grid;
  grid-template-columns: 1fr 190px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--separator);
  transition: background 0.14s;
}

._row_1au2k_72:last-child {
  border-bottom: 0;
}

._row_1au2k_72:hover {
  background: var(--g50);
}

._end_1au2k_90 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._endRight_1au2k_97 {
  flex-direction: row-reverse;
  text-align: right;
}

._info_1au2k_102 {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

._nm_1au2k_108 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._nmJp_1au2k_117 {
  font-family: var(--f-jp);
}

._cd_1au2k_121 {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--g500);
  margin-top: 1px;
}

._mid_1au2k_128 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* The D-ORCA name is the primary identity of the row — it reads above the
   join chain + minted id. */
._siteName_1au2k_138 {
  max-width: 100%;
  text-align: center;
}

._chain_1au2k_143 {
  color: var(--prov-merged);
  display: inline-flex;
}

._sid_1au2k_148 {
  font-family: var(--f-mono);
  font-size: var(--fs-3xs);
  color: var(--g400);
  letter-spacing: 0.02em;
}

._when_1au2k_155 {
  font-family: var(--f-mono);
  font-size: var(--fs-3xs);
  color: var(--g400);
}

._actions_1au2k_161 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._empty_1au2k_167 {
  padding: 30px 18px;
  text-align: center;
  color: var(--g500);
  font-size: var(--fs-xs);
}

/* ---- responsive: stack each link row on narrow widths --------------------- */
@media (width <= 720px) {
  ._row_1au2k_72 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  ._endRight_1au2k_97 {
    flex-direction: row;
    text-align: left;
  }

  ._mid_1au2k_128 {
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  ._actions_1au2k_161 {
    justify-content: flex-start;
  }
}
/* Unlink confirmation modal. Translated from merge/styles.css, on the Base UI
   Dialog primitive. */

._backdrop_z6c34_4 {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: var(--z-dialog);
  animation: _fadeIn_z6c34_1 0.18s ease both;
}

@keyframes _fadeIn_z6c34_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

._modal_z6c34_22 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-dialog);
  width: calc(100vw - 48px);
  max-width: 460px;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: _modalIn_z6c34_1 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes _modalIn_z6c34_1 {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(14px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

._head_z6c34_49 {
  padding: 20px 22px 0;
  display: flex;
  gap: 13px;
}

._headIcon_z6c34_55 {
  width: 40px;
  height: 40px;
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--color-error-bg);
  color: var(--color-error);
}

._title_z6c34_66 {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
  color: var(--navy);
}

._desc_z6c34_74 {
  font-size: var(--fs-sm);
  color: var(--g600);
  margin: 6px 0 0;
  line-height: 1.5;
}

._pair_z6c34_81 {
  margin: 16px 22px 0;
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  background: var(--g50);
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
}

._pairEnd_z6c34_92 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

._pairEndRight_z6c34_99 {
  text-align: right;
}

._pairNm_z6c34_103 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._pairNmJp_z6c34_112 {
  font-family: var(--f-jp);
}

._pairCd_z6c34_116 {
  font-family: var(--f-mono);
  font-size: var(--fs-3xs);
  color: var(--g500);
  margin-top: 1px;
}

._pairIcon_z6c34_123 {
  color: var(--g400);
  flex-shrink: 0;
  display: inline-flex;
}

._note_z6c34_129 {
  margin: 14px 22px 0;
  font-size: var(--fs-2xs);
  color: var(--g500);
  line-height: 1.5;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

._note_z6c34_129 svg {
  flex-shrink: 0;
  color: var(--g400);
  margin-top: 1px;
}

._foot_z6c34_145 {
  padding: 18px 22px 20px;
  display: flex;
  gap: 9px;
  justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  ._backdrop_z6c34_4,
  ._modal_z6c34_22 {
    animation-duration: 0.001ms;
  }
}
/* Project Merge page shell + board grid. The gutters and header come from
   the route frame (ui/PageFrame); the page only centres its content. */

._shell_3bnkb_4 {
  max-width: 1560px;
  margin: 0 auto;
}

/* ---- board ---------------------------------------------------------------- */
._board_3bnkb_10 {
  display: grid;
  grid-template-columns: 1fr 184px 1fr;
  gap: 16px;
  align-items: start;
}

/* ---- responsive: stack below ~960px --------------------------------------- */
@media (width <= 960px) {
  ._head_3bnkb_19 {
    flex-direction: column;
    gap: 16px;
  }

  ._board_3bnkb_10 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* The dropdown popup card shared by SingleSelect, MultiSelect, GroupedSelect
   and PhoneField: surface, border, shadow, type, and a flex column so the
   ScrollArea inside fills the popup's max-height and scrolls. Each popup
   composes it and sets only its own size. */._surface_mm5gd_5 {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  padding: var(--s-1);
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
}

._control_1jcfl_1 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._control_1jcfl_1:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint-soft);
}

._trigger_1jcfl_12 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  border-right: 1px solid var(--g200);
  padding-right: var(--s-2);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

._flag_1jcfl_26 {
  font-size: var(--fs-md);
  line-height: 1;
}

._dial_1jcfl_31 {
  color: var(--g600);
}

._chevron_1jcfl_35 {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--g500);
}

._chevron_1jcfl_35 svg {
  width: 100%;
  height: 100%;
  display: block;
}

._number_1jcfl_48 {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  outline: none;
}

._error_1jcfl_59 {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--red);
  line-height: 1.4;
}

/* Sit above dialog surfaces, matching SingleSelect. */
._positioner_1jcfl_67 {
  z-index: var(--z-dialog-popover);
}

._popup_1jcfl_71 {
  min-width: 280px;
  max-height: 280px;
}

._item_1jcfl_77 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  outline: none;
}

._item_1jcfl_77[data-highlighted] {
  background: var(--info-tint-soft);
}

._item_1jcfl_77[data-selected] {
  background: var(--info-tint);
  color: var(--info);
}

._itemDial_1jcfl_96 {
  margin-inline-start: auto;
  color: var(--g500);
}
._section_69ts9_1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--s-2);
  border-top: 1px solid var(--separator);
}

/* Pre-expansion: just the "Add certificate" button, aligned start. */
._sectionCollapsed_69ts9_10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

._sectionLabel_69ts9_16 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

._row_69ts9_22 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._rowName_69ts9_30 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._rowDate_69ts9_38 {
  color: var(--g400);
  white-space: nowrap;
}

._removeBtn_69ts9_43 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--r-lg);
  background: none;
  color: var(--g300);
  cursor: pointer;
}

._removeBtn_69ts9_43:hover {
  background: var(--g100);
  color: var(--navy);
}

._draftRow_69ts9_61 {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

._nameWrap_69ts9_67 {
  position: relative;
  flex: 1;
  min-width: 0;
}

._dateWrap_69ts9_73 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._fieldLabel_69ts9_79 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

/* In-dialog dropdown — no portal, so no z-index fight with the modal. */
._suggestions_69ts9_86 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-raised-2);
  margin-top: 2px;
  max-height: 180px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
}

._suggestionsBody_69ts9_102 {
  padding: var(--s-1);
}

._suggestionGroup_69ts9_106 {
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--g400);
}

._suggestion_69ts9_86 {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font-size: var(--fs-sm);
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

._suggestion_69ts9_86:hover {
  background: var(--g100);
}

._error_69ts9_131 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--red);
}
._form_qp32t_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._topRow_qp32t_7 {
  display: flex;
  gap: var(--s-3);
}

._topRow_qp32t_7 > * {
  flex: 1;
  min-width: 0;
}

._formField_qp32t_17 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._formLabel_qp32t_23 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

._requiredMark_qp32t_29 {
  margin-left: 2px;
  color: var(--red);
}

._footerSpacer_qp32t_34 {
  flex: 1;
}

._emptyHint_qp32t_38 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--g500);
}

._hintLink_qp32t_44 {
  color: var(--info);
}
._text_zvsm1_1 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._footerSpacer_zvsm1_7 {
  flex: 1;
}/* ── Live badge ──────────────────────────────────────────────────────────── */
._liveBadge_1e8ef_2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--g100);
  color: var(--g600);
}

._liveDot_1e8ef_14 {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circle);
  background: var(--g400);
}

._liveOn_1e8ef_21 ._liveDot_1e8ef_14 { background: var(--green); }
._liveOn_1e8ef_21 { color: var(--g700); }
._liveOff_1e8ef_23 ._liveDot_1e8ef_14 { background: var(--amber); }

/* Toolbar button that shows/hides the filter sidebar. Filled state = open. */
._filterToggle_1e8ef_26 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--g400);
  cursor: pointer;
  flex-shrink: 0;
}

._filterToggle_1e8ef_26:hover {
  color: var(--navy);
}

._filterToggleOn_1e8ef_44 {
  background: var(--g100);
  color: var(--navy);
  border-color: var(--g300);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
._sidebar_1e8ef_51 {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--separator);
}

._sidebarBody_1e8ef_57 {
  padding: var(--s-4);
}

._sidebarHeader_1e8ef_61 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}

._sidebarTitle_1e8ef_68 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

._clearBtn_1e8ef_74 {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  color: var(--g500);
}

._clearBtn_1e8ef_74:hover { color: var(--navy); }

._filterGroup_1e8ef_85 {
  border-bottom: 1px solid var(--separator);
  padding: var(--s-2) 0;
}

._filterHeader_1e8ef_90 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-body);
  text-align: left;
}

._filterChevron_1e8ef_103 {
  display: inline-flex;
  align-items: center;
  color: var(--g400);
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

._filterChevronOpen_1e8ef_111 {
  transform: rotate(0deg);
}

._filterTitle_1e8ef_115 {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--g600);
}

._filterCount_1e8ef_122 {
  color: var(--g400);
  font-weight: 600;
}

._filterRows_1e8ef_127 {
  padding: 4px 0 2px 20px;
}

._checkRow_1e8ef_131 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
  min-width: 0;
}

._checkRow_1e8ef_131 input {
  flex-shrink: 0;
}

._filterPill_1e8ef_146 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

._filterPill_1e8ef_146 > * {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}

/* Contractor shown beside the trade chip in plain grey (trusstor parity). */
._filterContractor_1e8ef_162 {
  color: var(--g500);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._filterRowCount_1e8ef_170 {
  margin-left: auto;
  padding-left: 6px;
  color: var(--g500);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── Cells ───────────────────────────────────────────────────────────────── */
._pill_1e8ef_180 {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--g100);
  color: var(--g600);
}

._toneGood_1e8ef_190 { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--g700); }
._toneAlert_1e8ef_191 { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }

/* Wraps the Linked-to pill so its full label can surface in a tooltip while the
   pill itself truncates with an ellipsis. */
._linkedWrap_1e8ef_195 {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
}

/* Icon glyphs (status / last-seen / battery) — navy outline, centred in the cell. */
._glyph_1e8ef_202 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  line-height: 0;
  cursor: default;
}

._certBadge_1e8ef_211 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: default;
}

._certCount_1e8ef_222 {
  font-weight: 700;
  opacity: 0.7;
}

._noTagsText_1e8ef_227 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--navy);
}
/* Shared admin-tab table: sortable header, rows, cells, empty state.
   Consumed by the admin tab tables (tags, professions, users, management)
   — the declarations are verified identical between them. Page chrome lives
   separately in adminPageLayout.module.css. */

._tableWrap_24odc_6 {
  flex: 1;
  min-width: 0;
}

._table_24odc_6 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._headerRow_24odc_18 {
  position: sticky;
  top: 0;
  z-index: var(--z-raised-1);
  background: var(--color-surface);
}

._th_24odc_25 {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--g400);
  border-bottom: 1px solid var(--separator);
  white-space: nowrap;
}

._thCenter_24odc_36 { text-align: center; }
._thNarrow_24odc_37 { width: 72px; }
._thMedium_24odc_38 { width: 150px; }

._sortBtn_24odc_40 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--g400);
  font-family: var(--f-body);
  padding: 0;
}

._sortBtn_24odc_40:hover { color: var(--navy); }

._row_24odc_57 {
  border-bottom: 1px solid var(--separator);
  transition: background 0.1s;
}

._row_24odc_57:hover { background: var(--g50); }

._td_24odc_64 {
  padding: var(--s-3) var(--s-4);
  white-space: nowrap;
}

._tdCenter_24odc_69 { text-align: center; }

._muted_24odc_71 { color: var(--g300); }

._empty_24odc_73 {
  padding: var(--s-7);
  text-align: center;
  color: var(--g400);
  font-size: var(--fs-sm);
}
._actionBtn_7jtxl_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--r-lg);
  background: none;
  color: var(--g300);
  cursor: pointer;
}

._actionBtn_7jtxl_1:hover {
  background: var(--g100);
  color: var(--navy);
}

._actionsCell_7jtxl_19 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Admin page styling: the full-bleed tab shell plus the page chrome every
   admin tab shares (page header, toolbar with search + count, body). Tabs
   import this directly for the shared classes; tab-specific classes live in
   each tab's own styles.module.css. Table styles: adminTable.module.css. */

/* Fill the page body so the tabs, sidebar and table own their own scroll.
   Merges with the shared Tabs `.root` (flex column). */
._root_ac3d9_7 {
  flex: 1 1 auto;
  min-height: 0;
}

._page_ac3d9_13 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--color-surface);
}

._pageHeader_ac3d9_21 {
  padding: var(--s-5) 28px;
  border-bottom: 1px solid var(--separator);
}

._toolbar_ac3d9_26 {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

._toolbarSpacer_ac3d9_33 {
  flex: 1;
}

._searchWrap_ac3d9_37 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--g400);
  min-width: 260px;
}

._searchInput_ac3d9_49 {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--navy);
  width: 100%;
}

._count_ac3d9_59 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._body_ac3d9_64 {
  display: flex;
  flex: 1;
  min-height: 0;
}
/* ── Active toggle (role="switch") ───────────────────────────────────────── */
._toggle_o314z_2 {
  position: relative;
  width: 36px;
  height: 20px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--g300);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

._toggle_o314z_2:disabled {
  opacity: 0.5;
  cursor: default;
}

._toggleOn_o314z_20 {
  background: var(--green);
}

._toggleKnob_o314z_24 {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-circle);
  background: var(--color-surface);
  transition: transform 0.15s ease;
}

._toggleOn_o314z_20 ._toggleKnob_o314z_24 {
  transform: translateX(16px);
}

._editBtn_o314z_39 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--r-lg);
  background: none;
  color: var(--g400);
  cursor: pointer;
}

._editBtn_o314z_39:hover {
  background: var(--g100);
  color: var(--navy);
}
._swatchGrid_ggny6_1 {
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: var(--s-2);
}

._swatch_ggny6_1 {
  width: 32px;
  height: 32px;
  border-radius: var(--r-xl);
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  padding: 0;
}

._swatch_ggny6_1:hover {
  filter: brightness(1.1);
}

._swatchSelected_ggny6_24 {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--color-surface);
}
._form_9dqt0_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._formField_9dqt0_7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._formLabel_9dqt0_13 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

._formError_9dqt0_19 {
  font-size: var(--fs-sm);
  color: var(--red);
}

._footerSpacer_9dqt0_24 {
  flex: 1;
}

._preview_9dqt0_28 {
  display: flex;
  justify-content: flex-start;
}
._actionsCell_15kci_1 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

._actionBtn_15kci_7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--r-lg);
  background: none;
  color: var(--g300);
  cursor: pointer;
}

._actionBtn_15kci_7:hover:not(:disabled) {
  background: var(--g100);
  color: var(--navy);
}
._form_1mgwq_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._formField_1mgwq_7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._formLabel_1mgwq_13 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

._footerSpacer_1mgwq_19 {
  flex: 1;
}

._requiredMark_1mgwq_23 {
  margin-left: 2px;
  color: var(--red);
}
._body_1p7q3_1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

._text_1p7q3_8 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--navy);
}

._footerSpacer_1p7q3_14 {
  flex: 1;
}
._userCell_emty5_1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A centred value with a muted line under it (a viewer's professions, MFA methods). */
._stackCell_emty5_8 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

._subtext_emty5_15 {
  font-size: var(--fs-xs);
  color: var(--g300);
}

/* Company-account sign-in: informational, not a status. */
._ssoPill_emty5_21 {
  background: var(--info-tint);
  color: var(--info);
}

/* Member status tones. Expired is the one that asks the admin to act (resend). */
._statusActive_emty5_27 {
  background: var(--color-success-bg);
  color: var(--color-success);
}

._statusInvited_emty5_32 {
  background: var(--g100);
  color: var(--g600);
}

._statusExpired_emty5_37 {
  background: var(--color-warn-bg);
  color: var(--color-warn);
}

._actionsCell_emty5_42 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

._actionBtn_emty5_48 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--r-lg);
  background: none;
  color: var(--g300);
  cursor: pointer;
}

._actionBtn_emty5_48:hover:not(:disabled) {
  background: var(--g100);
  color: var(--navy);
}

._actionBtn_emty5_48:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
._form_era48_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._formField_era48_7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._formLabel_era48_13 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

/* Sits right under the email field it describes, tighter than the form's gap. */
._ssoBadgeRow_era48_20 {
  margin-top: calc(-1 * var(--s-2));
}

._ssoBadge_era48_20 {
  background: var(--info-tint);
  color: var(--info);
}

._footerSpacer_era48_29 {
  flex: 1;
}

._requiredMark_era48_33 {
  margin-left: 2px;
  color: var(--red);
}

._checkGroup_era48_38 {
  display: flex;
  flex-direction: column;
}

._checkRow_era48_43 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
  cursor: pointer;
  text-align: left;
}

._permissionOption_era48_57 {
  display: flex;
  flex-direction: column;
}

._permissionText_era48_62 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._permissionDescription_era48_68 {
  font-size: var(--fs-xs);
  color: var(--g400);
}

._professionsSelect_era48_73 {
  margin: 0 0 8px 26px;
}

._professionsWarning_era48_77 {
  margin: 0 0 8px 26px;
  font-size: var(--fs-xs);
  color: var(--amber);
}
._card_10n91_1 {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* Icon, title, then the optional action in the last column. */
._header_10n91_10 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--separator);
}

._icon_10n91_19 {
  display: inline-flex;
  color: var(--navy);
}

._title_10n91_24 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

/* A hairline between consecutive rows. */
._rows_10n91_32 > * + * { border-top: 1px solid var(--separator); }
._title_ox98j_1 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._placeLine_ox98j_8 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

._place_ox98j_8 {
  font-weight: 600;
  color: var(--navy);
}

._restriction_ox98j_19 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* A link-looking button: the row's secondary action, not a CTA. */
._edit_ox98j_25 {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--info);
  cursor: pointer;
}

._edit_ox98j_25:hover { text-decoration: underline; }
._row_8z1hp_1 {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
}

._text_8z1hp_8 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._name_8z1hp_16 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._description_8z1hp_22 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

/* Recipients, frequency, then the switches — pushed to the right edge. */
._controls_8z1hp_28 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-4);
  margin-left: auto;
}

._frequency_8z1hp_37 { width: 120px; }

/* A switch with its small channel label above it. */
._channel_8z1hp_40 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  min-width: 48px;
  cursor: pointer;
}

._channelLabel_8z1hp_49 {
  font-size: var(--fs-2xs);
  color: var(--g500);
}
._list_8vc4z_1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

._status_8vc4z_7 {
  display: flex;
  justify-content: center;
  padding: var(--s-6);
}
/* The pick-only combo — the logistics dialogs' dropdown, now the ONE shell for
   every "choose from a list" control (delivery unit and status, the Stock
   tab's material and unit). Trigger is a <button> wearing the dialog input's
   skin, caret affordance on the right, options list absolutely positioned
   under (or, `listUp`, above) it.

   This file is the single source of the combo rules. The logistics dialogs'
   `dialogChrome.module.css` composes `.input`, `.withCaret`, `.combo`, `.list`,
   `.opt` and `.caretBtn` from here for their free-text combos (typed-filter
   material/unit fields) — same cross-module `composes` pattern as ui/DateField
   ← ui/DatePicker — so the skin is written once. *//* The field skin, shared by free-text inputs (via composes) and the trigger. */._input_1h55q_8 {
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--white);
  width: 100%;
}/* Room for the caret affordance inside the field. */._withCaret_1h55q_8 { padding-right: 32px; }._combo_1h55q_8 { position: relative; }/* A <button>, never free text — reset the UA button defaults that would give
   it away. Long labels (CAD material names) clip with an ellipsis rather than
   stretching the grid cell they sit in. */._trigger_1h55q_33 {
  display: block;
  text-align: left;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* Empty state ("Select unit…") — faded, so it never reads as a picked value.
   Compound so it beats the composed `.input` colour on specificity rather
   than bundle order. */._trigger_1h55q_33._placeholder_1h55q_48 { color: var(--g400); }/* The filterable trigger is an <input>; its empty state is the placeholder attribute. */._trigger_1h55q_33::placeholder { color: var(--g400); opacity: 1; }._trigger_1h55q_33[aria-invalid] { border-color: var(--color-error); }/* Locked (`disabled`) — the same grey "you can't edit this" treatment as a
   read-only value in the field skin (the delivery form's locked unit), so a
   field waiting on another reads as inert, not as an empty pick. */._trigger_1h55q_33:disabled,
._caretBtn_1h55q_9:disabled {
  background: var(--g50);
  color: var(--g500);
  cursor: default;
}._caretBtn_1h55q_9 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--g500);
  cursor: pointer;
  padding: 0;
}._list_1h55q_8 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dialog-inner);
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}/* A list that opens UPWARD — for a form's bottom-most field (the delivery
   Status). Inside the drawer's Edit tab the form sits in a scroll container,
   and a downward list opened at the bottom edge renders clipped until the
   reader scrolls; upward it is always in view. */._listUp_1h55q_99 {
  top: auto;
  bottom: calc(100% + 4px);
}._opt_1h55q_9 {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 7px 12px;
  font-size: var(--fs-sm);
  font-family: var(--f-body);
  color: var(--navy);
  cursor: pointer;
}._opt_1h55q_9:hover { background: var(--status-planned-bg); }/* The faded second line under an option's label ("Slab · 120 Cu. m.") that
   tells two same-named materials apart. */._optHint_1h55q_121 {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--g400);
  margin-top: 1px;
}/* A thin divider above an option that is a different KIND of choice from the
   rows before it (the Stock tab's "Not in the CAD…" opt-out). */._optSeparator_1h55q_130 { border-top: 1px solid var(--separator); }

/* The multi-pick. The trigger is PickCombo's field skin (composed, never
   re-declared), with the caret drawn inside it; the popup is a checkbox list
   under an optional search box. */

._trigger_1gmz9_5 {
  position: relative;
}

/* Compound, so it beats the composed field colour on specificity. */
._trigger_1gmz9_5._placeholder_1gmz9_11 { color: var(--g400); }

._caret_1gmz9_13 {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  display: grid;
  place-items: center;
  color: var(--g500);
}

/* Lifted above the dialog layer: the popup portals to the body, and inside
   `ui/Modal` it would otherwise sit under the dialog. */
._positioner_1gmz9_26 { z-index: var(--z-dialog-popover); }

._popup_1gmz9_28 {
  display: grid;
  row-gap: var(--s-1);
  min-width: 260px;
  max-width: 360px;
  padding: var(--s-2);
  color: var(--navy);
  font: var(--fs-sm) var(--f-body);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
}

._search_1gmz9_42 { margin-bottom: var(--s-1); }

._rows_1gmz9_44 {
  max-height: 280px;
}

/* Checkbox, then the label (and its hint) in the remaining width. */
._row_1gmz9_44 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  border-radius: var(--r-sm);
}

._row_1gmz9_44:hover { background: var(--info-tint-soft); }

._allRow_1gmz9_61 {
  font-weight: 600;
  border-bottom: 1px solid var(--separator);
  border-radius: 0;
}

._label_1gmz9_67 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._hint_1gmz9_73 {
  font-size: var(--fs-2xs);
  color: var(--g400);
}

._empty_1gmz9_78 {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  color: var(--g500);
}
/* The Alerts Hub tab: the admin page chrome (AdminPage.module.css) around a
   scrolling column of group cards. */

._body_14byx_4 {
  flex: 1;
}

._bodyInner_14byx_8 {
  padding: var(--s-5) var(--s-6);
}

._recipients_14byx_12 { width: 180px; }

._spacer_14byx_14 { flex: 1; }
._form_1mc2b_1 {
  display: grid;
  gap: var(--s-4);
}

._field_1mc2b_6 {
  display: grid;
  gap: var(--s-2);
}

._label_1mc2b_11 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

._spacer_1mc2b_17 { flex: 1; }
._field_4pvrz_1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._label_4pvrz_7 {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--g600);
  text-transform: uppercase;
}

._input_4pvrz_15 {
  padding: 12px 14px;
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  font-family: var(--f-mono);
  font-size: var(--fs-xl);
  font-weight: 600;

  /* The segmented "one box per digit" look without N inputs to focus. */
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-align: center;
  color: var(--navy);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

._input_4pvrz_15:hover:not(:focus, :disabled) {
  border-color: var(--g300);
}

._input_4pvrz_15:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-soft);
}

._input_4pvrz_15:disabled {
  color: var(--g400);
  background: var(--g50);
  cursor: not-allowed;
}

._hint_4pvrz_48 {
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  ._input_4pvrz_15 {
    transition: none;
  }
}
/* Shared styling for the MFA surfaces (challenge, enrolment, and the
   SecurityPage method manager). Consumed via `composes:` — same pattern as
   ui/DatePicker's fieldStyles. One declaration per pattern; per-surface
   deviations stay local as overrides after the composes line. */._root_1xtlf_6 {
  display: flex;
  flex-direction: column;
}._heading_1xtlf_11 {
  margin-bottom: 20px;
}._eyebrow_1xtlf_15 {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 10px;
}._title_1xtlf_25 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--navy);
}._subtitle_1xtlf_35 {
  font-size: var(--fs-sm);
  color: var(--g500);
  margin: 0;
  line-height: 1.6;
}._form_1xtlf_42 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}/* Body copy in confirmation/summary blocks (confirmBody, subBody). */._mutedBody_1xtlf_49 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.6;
}/* The bordered error box — the most-cloned block in the family. */._errorBox_1xtlf_57 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.5;
}._codeGrid_1xtlf_67 {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
}._backupCode_1xtlf_79 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--navy);
  letter-spacing: 0.04em;
}._gate_1xtlf_86 {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.55;
  cursor: pointer;
}._gate_1xtlf_86 input {
  margin-top: 2px;
  accent-color: var(--navy);
  flex: 0 0 auto;
}._footerRow_1xtlf_102 {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}._linkButton_1xtlf_108 {
  background: none;
  border: none;
  padding: 4px 6px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color 140ms ease;
}._linkButton_1xtlf_108:hover {
  color: var(--navy);
  text-decoration: underline;
}._linkButton_1xtlf_108:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--navy-soft);
}@media (prefers-reduced-motion: reduce) {
  ._linkButton_1xtlf_108 {
    transition: none;
  }
}

/* Shared MFA-family styling comes from ../mfaShared.module.css via composes;
   only enrolment-specific rules (the numbered setup steps, QR frame, secret
   block) live here. */

._root_dc73m_5 {
}

._heading_dc73m_9 {
}

._eyebrow_dc73m_13 {
}

._title_dc73m_17 {
}

._subtitle_dc73m_21 {
}

._form_dc73m_25 {
}

._setup_dc73m_29 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._steps_dc73m_35 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  counter-reset: mfa-step;
}

._step_dc73m_35 {
  counter-increment: mfa-step;
  padding-left: 30px;
  position: relative;
}

._step_dc73m_35::before {
  content: counter(mfa-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-circle);
  background: var(--navy-soft);
  color: var(--navy);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

._stepTitle_dc73m_67 {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
}

._stepBody_dc73m_75 {
  margin: 4px 0 12px;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.6;
}

._qrFrame_dc73m_82 {
  display: inline-flex;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
}

._secretBlock_dc73m_90 {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

._secretLabel_dc73m_98 {
  flex: 1 0 100%;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g500);
}

._secret_dc73m_90 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--navy);
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  word-break: break-all;
}

._codeGrid_dc73m_118 {
}

._backupCode_dc73m_122 {
}

._backupActions_dc73m_126 {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

._gate_dc73m_132 {
  margin-top: 14px;
}

._confirmBody_dc73m_137 {
}

._error_dc73m_141 {
}

._footerRow_dc73m_145 {
}

._linkButton_dc73m_149 {
  align-self: center;
}
/* Shared styling for the MFA surfaces (challenge, enrolment, and the
   SecurityPage method manager). Consumed via `composes:` — same pattern as
   ui/DatePicker's fieldStyles. One declaration per pattern; per-surface
   deviations stay local as overrides after the composes line. */._root_1xtlf_6 {
  display: flex;
  flex-direction: column;
}._heading_1xtlf_11 {
  margin-bottom: 20px;
}._eyebrow_1xtlf_15 {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 10px;
}._title_1xtlf_25 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--navy);
}._subtitle_1xtlf_35 {
  font-size: var(--fs-sm);
  color: var(--g500);
  margin: 0;
  line-height: 1.6;
}._form_1xtlf_42 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}/* Body copy in confirmation/summary blocks (confirmBody, subBody). */._mutedBody_1xtlf_49 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.6;
}/* The bordered error box — the most-cloned block in the family. */._errorBox_1xtlf_57 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.5;
}._codeGrid_1xtlf_67 {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
}._backupCode_1xtlf_79 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--navy);
  letter-spacing: 0.04em;
}._gate_1xtlf_86 {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.55;
  cursor: pointer;
}._gate_1xtlf_86 input {
  margin-top: 2px;
  accent-color: var(--navy);
  flex: 0 0 auto;
}._footerRow_1xtlf_102 {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}._linkButton_1xtlf_108 {
  background: none;
  border: none;
  padding: 4px 6px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color 140ms ease;
}._linkButton_1xtlf_108:hover {
  color: var(--navy);
  text-decoration: underline;
}._linkButton_1xtlf_108:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--navy-soft);
}@media (prefers-reduced-motion: reduce) {
  ._linkButton_1xtlf_108 {
    transition: none;
  }
}

._page_a6tc8_1 {
  max-width: 720px;
}

._card_a6tc8_5 {
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}

._cardHeader_a6tc8_13 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

._cardTitle_a6tc8_20 {
  margin: 0 0 4px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--navy);
}

._cardBody_a6tc8_27 {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.6;
}

._pill_a6tc8_35 {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--g100);
  color: var(--g600);
}

._pillOn_a6tc8_47 {
  background: var(--color-success-bg);
  color: var(--color-success);
}

._loading_a6tc8_52 {
  margin: 18px 0 0;
  font-size: var(--fs-xs);
  color: var(--g500);
}

._loadError_a6tc8_58 {
  margin-top: 16px;
}

._methodList_a6tc8_63 {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

._methodRow_a6tc8_71 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--g100);
}

._methodRow_a6tc8_71:first-child {
  border-top: none;
}

/* Icon tile — the at-a-glance signal for whether a factor is on. */
._tile_a6tc8_84 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-2xl);
  background: var(--g50);
  border: 1px solid var(--g100);
  color: var(--g600);
}

._tile_a6tc8_84 svg {
  width: 20px;
  height: 20px;
}

._tileOn_a6tc8_102 {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

._methodInfo_a6tc8_108 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

._methodLabel_a6tc8_116 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
}

._methodHint_a6tc8_125 {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--g600);
}

._badge_a6tc8_131 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 5px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-success-bg);
  color: var(--color-success);
}

._badge_a6tc8_131 svg {
  width: 11px;
  height: 11px;
}

/* Recovery: its own block, so backup codes aren't implied by the method list. */
._recoveryRow_a6tc8_152 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--g100);
  border-radius: var(--r-2xl);
  background: var(--g50);
}

._comingSoon_a6tc8_163 {
  flex: 0 0 auto;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g500);
}

._enrollSlot_a6tc8_172 {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--g100);
}

._subForm_a6tc8_178 {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--g100);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 400px;
}

._subTitle_a6tc8_188 {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
}

._subBody_a6tc8_195 {
}

._codeGrid_a6tc8_199 {
}

._backupCode_a6tc8_203 {
}

._backupActions_a6tc8_207 {
  display: flex;
  gap: 8px;
}

._otpRow_a6tc8_212 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

._sentNote_a6tc8_219 {
  font-size: var(--fs-xs);
  color: var(--g500);
}

._gate_a6tc8_224 {
}

._formActions_a6tc8_228 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

._flash_a6tc8_234 {
  margin-top: 16px;
  font-size: var(--fs-xs);
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.5;
}

._error_a6tc8_245 {
}
._page_12vn7_1 { max-width: 880px; }

._hubLink_12vn7_3 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--info);
}
._raw_z1t9q_1 {
  display: inline-flex;
}

._raw_z1t9q_1 svg {
  width: 100%;
  height: 100%;
}
._tile_1mou1_1 {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--prod-tone-teal-fg);
}

._card_1mou1_8 {
  width: 40px;
  height: 40px;
  border-radius: var(--r-2xl);
  background: var(--prod-tone-teal-bg);
}

._head_1mou1_15 {
  width: 48px;
  height: 48px;
  border-radius: var(--r-3xl);
  background: var(--prod-tone-teal-bg);
}

._kid_1mou1_22 {
  width: 30px;
  height: 30px;
  border-radius: var(--r-xl);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}
/* The page body: capped, under the shared header. */
._hub_1iytk_2 {
  max-width: 1180px;
  width: 100%;
}

._hero_1iytk_7 {
  background: linear-gradient(135deg, var(--surface-card) 0%, var(--prod-tone-teal-bg-light) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3xl);
  padding: var(--s-7) var(--s-8);
  display: flex;
  gap: 28px;
  align-items: center;
}

._heroIcon_1iytk_17 {
  width: 64px;
  height: 64px;
  border-radius: var(--r-3xl);
  background: var(--prod-tone-teal-bg);
  color: var(--prod-tone-teal-fg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

._heroBody_1iytk_28 {
  flex: 1;
  min-width: 0;
}

/* The shared SearchInput supplies the box; the hub only caps its width. */
._search_1iytk_34 {
  margin-top: var(--s-4);
  max-width: 520px;
}

._sectionHead_1iytk_39 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: var(--s-7) 0 14px;
}

._sectionHead_1iytk_39 h2 {
  font-size: var(--fs-sm);
  font-weight: 600;
}

._sectionHead_1iytk_39 span {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

._grid_1iytk_56 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

._card_1iytk_62 {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3xl);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

._card_1iytk_62:hover {
  border-color: var(--prod-tone-teal-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

._cardTop_1iytk_81 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

._eyebrow_1iytk_87 {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

._cardTitle_1iytk_96 {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
}

._cardSummary_1iytk_102 {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._twoLines_1iytk_112 {
  -webkit-line-clamp: 2;
}

._chips_1iytk_116 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._chips_1iytk_116 span {
  font-size: var(--fs-xs);
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 3px var(--s-2);
  border-radius: var(--r-pill);
}

._meta_1iytk_131 {
  display: flex;
  gap: 14px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--s-3);
  margin-top: auto;
}

._metaEnd_1iytk_141 {
  margin-left: auto;
}

/* Parent card: two columns, same row height as its neighbour (spec ruling 7). */
._parentCard_1iytk_146 {
  grid-column: span 2;
  padding: 0;
  gap: 0;
}

._parentCard_1iytk_146:hover {
  transform: none;
}

._parentMain_1iytk_156 {
  padding: var(--s-5) var(--s-5) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
}

._countBadge_1iytk_165 {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--prod-tone-teal-fg);
  background: var(--prod-tone-teal-bg);
  padding: var(--s-1) 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

._kidsGrid_1iytk_175 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 var(--s-5) var(--s-3);
}

._kid_1iytk_175 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  background: var(--surface-soft);
  color: inherit;
  text-decoration: none;
}

._kid_1iytk_175:hover {
  border-color: var(--prod-tone-teal-border);
  background: var(--surface-card);
}

._kidText_1iytk_199 {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
}

._kidText_1iytk_199 small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-secondary);
}

._parentMeta_1iytk_213 {
  margin: 0 var(--s-5);
  padding-bottom: var(--s-5);
}

._hits_1iytk_218 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

._hit_1iytk_218 {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  padding: var(--s-3) var(--s-4);
  display: flex;
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
}

._hit_1iytk_218:hover {
  border-color: var(--prod-tone-teal-border);
}

._where_1iytk_239 {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

._where_1iytk_239 b {
  color: var(--prod-tone-teal-fg);
  font-weight: 600;
}

._snippet_1iytk_250 {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.5;
}

._hit_1iytk_218 mark {
  background: color-mix(in srgb, var(--accent-yellow) 35%, transparent);
  color: inherit;
  border-radius: var(--r-sm);
}

._contact_1iytk_264 {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3xl);
  padding: 18px var(--s-5);
}

._contactIcon_1iytk_275 {
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-2xl);
  background: var(--surface-soft);
  display: grid;
  place-items: center;
  color: var(--text-secondary);
}

._contactText_1iytk_285 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

._contactText_1iytk_285 b {
  font-size: var(--fs-sm);
  font-weight: 600;
}

._contactText_1iytk_285 span {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

@media (width <= 1100px) {
  ._kidsGrid_1iytk_175 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._parentCard_1iytk_146 {
    grid-column: 1 / -1;
  }
}

@media (width <= 820px) {
  ._hub_1iytk_2 {
    padding: var(--s-4);
  }

  ._hero_1iytk_7 {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }

  ._grid_1iytk_56 {
    grid-template-columns: 1fr;
  }

  ._kidsGrid_1iytk_175 {
    grid-template-columns: 1fr;
  }
}

._englishOnly_1iytk_331 {
  flex-shrink: 0;
  color: var(--prod-tone-amber-fg);
  background: var(--prod-tone-amber-bg);
}

/* On a report tile or a search hit the pill is a direct flex child: push it right. */
._kid_1iytk_175 > ._englishOnly_1iytk_331,
._hit_1iytk_218 > ._englishOnly_1iytk_331 {
  margin-left: auto;
}

/* The pill and the count badge sit together at the right edge: the group owns
   the right-alignment, and neither child carries an auto margin of its own. */
._cardTags_1iytk_345 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
._settings_zvo7a_1 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
  align-self: flex-start;
}

._result_zvo7a_9,
._failed_zvo7a_10 {
  font-size: var(--fs-xs);
}

._result_zvo7a_9 {
  color: var(--text-secondary);
}

._failed_zvo7a_10 {
  color: var(--color-error);
}
/* "Here is the thing you asked for": two pulses in the info blue, fading out.
   One visual language for every jump-to-target — the progress tracker's
   column jump, the delivery board's card jump, the Help Center's search
   landing. Compose it (`composes: jumpFlash from …`) and add only the
   placement the call site needs; the animation lives here once. */._jumpFlash_57a0y_6 {
  animation: _jumpFlash_57a0y_6 1.6s ease-out both;
}@keyframes _jumpFlash_57a0y_6 {
  0%,
  14% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  28% {
    background: color-mix(in srgb, var(--info) 10%, transparent);
  }

  42% {
    background: color-mix(in srgb, var(--info) 26%, transparent);
  }

  100% {
    background: transparent;
  }
}@media (prefers-reduced-motion: reduce) {
  ._jumpFlash_57a0y_6 {
    animation-name: _jumpFlashReduced_57a0y_1;
  }

  /* Single steady tint fading out — same duration so animationend still
     fires for the callers that clean up on it, no pulsing. */
  @keyframes _jumpFlashReduced_57a0y_1 {
    0%,
    55% {
      background: color-mix(in srgb, var(--info) 18%, transparent);
    }

    100% {
      background: transparent;
    }
  }
}

._reader_1bia2_1 {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 200px;
  gap: var(--s-7);
  padding: 28px var(--s-7) 64px;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

._rail_1bia2_11,
._toc_1bia2_12 {
  position: sticky;
  top: 84px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._rail_1bia2_11 h4,
._toc_1bia2_12 h4 {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0 0 6px 10px;
}

._toc_1bia2_12 h4 {
  margin-left: 0;
  margin-bottom: var(--s-2);
}

._back_1bia2_36 {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  text-decoration: none;
}

._back_1bia2_36:hover {
  color: var(--prod-tone-teal-fg);
}

._backCaret_1bia2_50 {
  display: inline-flex;
  transform: rotate(90deg);
}

._rail_1bia2_11 a:not(._back_1bia2_36) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--s-2) 10px;
  border-radius: var(--r-2xl);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}

._rail_1bia2_11 a:not(._back_1bia2_36):hover {
  background: var(--surface-soft);
}

._rail_1bia2_11 a._on_1bia2_71 {
  background: var(--prod-tone-teal-bg-light);
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--prod-tone-teal-fg);
  font-weight: 600;
}

._rail_1bia2_11 a._on_1bia2_71 svg {
  color: var(--prod-tone-teal-fg);
}

._grow_1bia2_82 {
  flex: 1;
}

._caret_1bia2_86 {
  display: inline-flex;
  transition: transform 0.15s ease;
  color: var(--text-secondary);
}

._caretShut_1bia2_92 {
  transform: rotate(-90deg);
}

._railKids_1bia2_96 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 21px;
  padding-left: var(--s-2);
  border-left: 1px solid var(--border-subtle);
}

/* Same specificity as `.rail a:not(.back)`, declared after it, so the
   smaller child-row size wins without !important. */
._rail_1bia2_11 ._railKids_1bia2_96 a:not(._back_1bia2_36) {
  font-size: var(--fs-xs);
  padding: 6px var(--s-2);
}

._article_1bia2_112 {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3xl);
  padding: var(--s-8) 44px 48px;
  min-width: 0;
}

._head_1bia2_120 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--s-6);
}

._head_1bia2_120 h1 {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

._headMeta_1bia2_135 {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 3px;
}

._eyebrowLink_1bia2_141 {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--prod-tone-teal-fg);
  text-decoration: none;
  margin-bottom: 2px;
}

._eyebrowLink_1bia2_141:hover {
  text-decoration: underline;
}

._doc_1bia2_156 {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-primary);
}

._doc_1bia2_156 h2,
._reportsHeading_1bia2_163 {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: var(--s-8) 0 10px;
  scroll-margin-top: 80px;
}

._doc_1bia2_156 h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: var(--s-6) 0 var(--s-2);
  scroll-margin-top: 80px;
}

._doc_1bia2_156 h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: 18px 0 6px;
}

._doc_1bia2_156 p {
  margin: var(--s-2) 0;
}

._doc_1bia2_156 ul,
._doc_1bia2_156 ol {
  margin: var(--s-2) 0 var(--s-2) 22px;
}

._doc_1bia2_156 li {
  margin: var(--s-1) 0;
}

._doc_1bia2_156 li p,
._doc_1bia2_156 td p,
._doc_1bia2_156 th p {
  margin: 0;
}

._doc_1bia2_156 strong {
  font-weight: 600;
}

._doc_1bia2_156 figure {
  margin: var(--s-4) 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: var(--surface-soft);
}

._doc_1bia2_156 figure img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

._doc_1bia2_156 table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: var(--fs-sm);
}

._doc_1bia2_156 th,
._doc_1bia2_156 td {
  border: 1px solid var(--border-subtle);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
}

._doc_1bia2_156 th {
  background: var(--surface-soft);
  font-weight: 600;
}

._doc_1bia2_156 code {
  font-size: var(--fs-sm);
  background: var(--surface-soft);
  padding: 1px 5px;
  border-radius: var(--r-md);
}

._doc_1bia2_156 .callout {
  border-radius: var(--r-2xl);
  padding: var(--s-3) var(--s-4) var(--s-3) 44px;
  margin: var(--s-4) 0;
  position: relative;
  font-size: var(--fs-sm);
}

/* The icon sits on the box's top padding; the first paragraph's own top margin
   would push the text below it. */
._doc_1bia2_156 .callout > :first-child {
  margin-top: 0;
}

._doc_1bia2_156 .callout > :last-child {
  margin-bottom: 0;
}

._doc_1bia2_156 .callout::before {
  position: absolute;
  left: 14px;
  top: var(--s-3);
  width: var(--s-5);
  height: var(--s-5);
  border-radius: var(--r-circle);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--white);
}

._doc_1bia2_156 .callout-info {
  background: var(--prod-tone-teal-bg-light);
  border: 1px solid var(--prod-tone-teal-border);
}

._doc_1bia2_156 .callout-info::before {
  content: 'i';
  background: var(--prod-tone-teal-fg);
}

._doc_1bia2_156 .callout-note {
  background: var(--prod-tone-amber-bg);
  border: 1px solid var(--prod-tone-amber-border);
}

._doc_1bia2_156 .callout-note::before {
  content: '!';
  background: var(--accent-attention);
}

._doc_1bia2_156 .callout-tip {
  background: var(--prod-tone-green-bg);
  border: 1px solid var(--prod-tone-green-border);
}

._doc_1bia2_156 .callout-tip::before {
  content: '✓';
  background: var(--accent-success);
}

._doc_1bia2_156 .callout-warning {
  background: var(--prod-tone-red-bg);
  border: 1px solid var(--prod-tone-red-border);
}

._doc_1bia2_156 .callout-warning::before {
  content: '!';
  background: var(--accent-warning);
}

._xref_1bia2_320 {
  color: var(--prod-tone-teal-fg);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

._reportGrid_1bia2_326 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: var(--s-3);
}

._reportCard_1bia2_333 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3xl);
  padding: 14px;
  color: inherit;
  text-decoration: none;
}

._reportCard_1bia2_333:hover {
  border-color: var(--prod-tone-teal-border);
  box-shadow: var(--shadow-card-hover);
}

._reportCard_1bia2_333 b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
}

._reportSummary_1bia2_355 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: 2px;
}

._reportCard_1bia2_333 small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 6px;
}

._pager_1bia2_373 {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

._pager_1bia2_373 a {
  flex: 1;
  max-width: 48%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--fs-sm);
}

._pager_1bia2_373 a._next_1bia2_392 {
  text-align: right;
}

._pager_1bia2_373 a:hover {
  border-color: var(--prod-tone-teal-fg);
  color: var(--prod-tone-teal-fg);
}

._pager_1bia2_373 small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

._toc_1bia2_12 a {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-decoration: none;
  padding: 5px 0 5px var(--s-3);
  border-left: 2px solid var(--border-subtle);
  line-height: 1.35;
}

._toc_1bia2_12 a:hover {
  color: var(--text-primary);
}

/* `.toc .x` outranks `.toc a`, so the modifiers need no !important. */
._toc_1bia2_12 ._tocL3_1bia2_424 {
  padding-left: 22px;
  font-size: var(--fs-xs);
}

._toc_1bia2_12 ._tocOn_1bia2_429 {
  color: var(--prod-tone-teal-fg);
  border-left-color: var(--prod-tone-teal-fg);
  font-weight: 600;
}

._notFound_1bia2_435 {
  margin: 40px auto;
  max-width: 560px;
}

@media (width <= 1180px) {
  ._reader_1bia2_1 {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  ._toc_1bia2_12 {
    display: none;
  }
}

@media (width <= 820px) {
  ._reader_1bia2_1 {
    grid-template-columns: 1fr;
    padding: var(--s-4);
  }

  ._rail_1bia2_11 {
    display: none;
  }

  ._article_1bia2_112 {
    padding: 22px 18px;
  }

  ._reportGrid_1bia2_326 {
    grid-template-columns: 1fr;
  }
}

/* A search result's landing: the shared jump flash on the matched block. */
._matchFlash_1bia2_470 {
  border-radius: var(--r-md);
}

._notTranslated_1bia2_475 {
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2xl);
  font-size: var(--fs-sm);
  color: var(--prod-tone-amber-fg);
  background: var(--prod-tone-amber-bg);
}
/* Shared styling for the MFA surfaces (challenge, enrolment, and the
   SecurityPage method manager). Consumed via `composes:` — same pattern as
   ui/DatePicker's fieldStyles. One declaration per pattern; per-surface
   deviations stay local as overrides after the composes line. */._root_1xtlf_6 {
  display: flex;
  flex-direction: column;
}._heading_1xtlf_11 {
  margin-bottom: 20px;
}._eyebrow_1xtlf_15 {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 10px;
}._title_1xtlf_25 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--navy);
}._subtitle_1xtlf_35 {
  font-size: var(--fs-sm);
  color: var(--g500);
  margin: 0;
  line-height: 1.6;
}._form_1xtlf_42 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}/* Body copy in confirmation/summary blocks (confirmBody, subBody). */._mutedBody_1xtlf_49 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.6;
}/* The bordered error box — the most-cloned block in the family. */._errorBox_1xtlf_57 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.5;
}._codeGrid_1xtlf_67 {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
}._backupCode_1xtlf_79 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--navy);
  letter-spacing: 0.04em;
}._gate_1xtlf_86 {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.55;
  cursor: pointer;
}._gate_1xtlf_86 input {
  margin-top: 2px;
  accent-color: var(--navy);
  flex: 0 0 auto;
}._footerRow_1xtlf_102 {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}._linkButton_1xtlf_108 {
  background: none;
  border: none;
  padding: 4px 6px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color 140ms ease;
}._linkButton_1xtlf_108:hover {
  color: var(--navy);
  text-decoration: underline;
}._linkButton_1xtlf_108:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--navy-soft);
}@media (prefers-reduced-motion: reduce) {
  ._linkButton_1xtlf_108 {
    transition: none;
  }
}

/* Shared MFA-family styling comes from ../mfaShared.module.css via composes;
   only challenge-specific rules live here. */

._root_1tie9_4 {
}

._heading_1tie9_8 {
}

._eyebrow_1tie9_12 {
}

._title_1tie9_16 {
}

._subtitle_1tie9_20 {
}

._switcher_1tie9_24 {
  margin-bottom: 18px;
}

._form_1tie9_28 {
}

._otpRow_1tie9_32 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

._sentNote_1tie9_39 {
  font-size: var(--fs-xs);
  color: var(--color-success);
  line-height: 1.5;
}

._error_1tie9_45 {
}

._footerRow_1tie9_49 {
}

._linkButton_1tie9_53 {
}
/* Shared styling for the MFA surfaces (challenge, enrolment, and the
   SecurityPage method manager). Consumed via `composes:` — same pattern as
   ui/DatePicker's fieldStyles. One declaration per pattern; per-surface
   deviations stay local as overrides after the composes line. */._root_1xtlf_6 {
  display: flex;
  flex-direction: column;
}._heading_1xtlf_11 {
  margin-bottom: 20px;
}._eyebrow_1xtlf_15 {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 10px;
}._title_1xtlf_25 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--navy);
}._subtitle_1xtlf_35 {
  font-size: var(--fs-sm);
  color: var(--g500);
  margin: 0;
  line-height: 1.6;
}._form_1xtlf_42 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}/* Body copy in confirmation/summary blocks (confirmBody, subBody). */._mutedBody_1xtlf_49 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.6;
}/* The bordered error box — the most-cloned block in the family. */._errorBox_1xtlf_57 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.5;
}._codeGrid_1xtlf_67 {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
}._backupCode_1xtlf_79 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--navy);
  letter-spacing: 0.04em;
}._gate_1xtlf_86 {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.55;
  cursor: pointer;
}._gate_1xtlf_86 input {
  margin-top: 2px;
  accent-color: var(--navy);
  flex: 0 0 auto;
}._footerRow_1xtlf_102 {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}._linkButton_1xtlf_108 {
  background: none;
  border: none;
  padding: 4px 6px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color 140ms ease;
}._linkButton_1xtlf_108:hover {
  color: var(--navy);
  text-decoration: underline;
}._linkButton_1xtlf_108:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--navy-soft);
}@media (prefers-reduced-motion: reduce) {
  ._linkButton_1xtlf_108 {
    transition: none;
  }
}

._page_i1w9t_1 {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--gradient-login-bg);
  overflow: hidden;
}

._grid_i1w9t_13 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(to right, rgb(16 48 69 / 4.5%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(16 48 69 / 4.5%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, #000 45%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at center, #000 45%, transparent 85%);
}

._card_i1w9t_26 {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  padding: 36px 32px 28px;
  box-shadow:
    0 1px 1px rgb(16 48 69 / 4%),
    0 14px 40px -12px rgb(16 48 69 / 18%);
  overflow: hidden;
  animation: _cardIn_i1w9t_1 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* The enrollment step carries a QR block plus a two-column backup-code grid;
   the sign-in width would squeeze both. */
._cardWide_i1w9t_43 {
  max-width: 480px;
}

._accent_i1w9t_47 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--turq) 0%, var(--blue) 55%, var(--navy) 100%);
}

._brand_i1w9t_56 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
}

._logo_i1w9t_64 {
  width: 28px;
  height: 28px;
  user-select: none;
}

._wordmark_i1w9t_70 {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

._heading_i1w9t_78 {
  margin-bottom: 24px;
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 140ms both;
}

._eyebrow_i1w9t_83 {
}

._title_i1w9t_87 {
}

._subtitle_i1w9t_91 {
  line-height: 1.5;
}

._form_i1w9t_96 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms both;
}

._field_i1w9t_103 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._fieldLabel_i1w9t_109 {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--g600);
  text-transform: uppercase;
}

._field_i1w9t_103 input {
  padding: 11px 13px;
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

._field_i1w9t_103 input::placeholder { color: var(--g400); }

._field_i1w9t_103 input:hover:not(:focus) {
  border-color: var(--g300);
}

._field_i1w9t_103 input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-soft);
  background: var(--color-surface);
}

._error_i1w9t_141 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid #ffb1a9;
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.4;
}

/* Informational, not a failure — e.g. "the verification window closed, please
   sign in again". Deliberately not styled as an error. */
._notice_i1w9t_153 {
  margin-bottom: 16px;
  font-size: var(--fs-xs);
  color: var(--g600);
  background: var(--banner-info-bg);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.5;
}

._submit_i1w9t_164 {
  margin-top: 6px;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--color-surface);
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 140ms ease, transform 140ms ease;
}

._submit_i1w9t_164:hover:not(:disabled) {
  background: var(--g700);
}

._submit_i1w9t_164:hover:not(:disabled) ._arrow_i1w9t_187 {
  transform: translateX(3px);
}

._submit_i1w9t_164:active:not(:disabled) {
  transform: translateY(1px);
}

/* Our own focus ring instead of the browser's — the SSO step autofocuses its
   button, and the default outline read as a rendering glitch. */
._submit_i1w9t_164:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 4px var(--blue);
}

/* SSO step — the hand-off: d-orca → the company, centred. It replaces the brand
   header on this step, so d-orca's own mark lives in the first tile. */
._ssoStep_i1w9t_206 {
  display: flex;
  flex-direction: column;
  text-align: center;
}

._ssoStep_i1w9t_206 ._submit_i1w9t_164 {
  width: 100%;
}

._handoff_i1w9t_216 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 22px;
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
}

/* A white tile, so a logo drawn for light backgrounds keeps its contrast. */
._handoffTile_i1w9t_226 {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 9px;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--g200);
  border-radius: var(--r-md);
}

._handoffTile_i1w9t_226 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

/* No logo: the company's name stands in, so the tile widens to fit it. */
._handoffTileName_i1w9t_246 {
  width: auto;
  min-width: 56px;
  max-width: 200px;
  padding: 0 14px;
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._handoffArrow_i1w9t_260 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--g300);
}

._handoffArrow_i1w9t_260 i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--g300);
}

._handoffArrow_i1w9t_260 svg {
  width: 14px;
  height: 14px;
  color: var(--g400);
}

._ssoTitle_i1w9t_281 {
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 140ms both;
}

/* Japanese has no spaces, so the browser may split a word anywhere (アカウ / ント).
   `auto-phrase` breaks at phrase boundaries instead, under `<html lang="ja">`
   (which i18n sets); browsers without it fall back to normal breaking. */
._ssoWho_i1w9t_289 {
  margin: 2px 0 22px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--g600);
  word-break: auto-phrase;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms both;
}

._ssoWho_i1w9t_289 strong {
  font-weight: 600;
  color: var(--navy);
}

._ssoNotYou_i1w9t_305 {
  margin: 14px 0 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 260ms both;
}

._spinner_i1w9t_312 {
  width: 14px;
  height: 14px;
  border: 2px solid rgb(255 255 255 / 35%);
  border-top-color: var(--color-surface);
  border-radius: var(--r-pill);
  animation: _spin_i1w9t_312 700ms linear infinite;
}

@keyframes _spin_i1w9t_312 {
  to {
    transform: rotate(360deg);
  }
}

._submit_i1w9t_164:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._arrow_i1w9t_187 {
  width: 14px;
  height: 14px;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

._forgotRow_i1w9t_338 {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both;
}

._linkButton_i1w9t_345 {
}

._confirmation_i1w9t_349 {
  font-size: var(--fs-sm);
  color: var(--g600);
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  line-height: 1.5;
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both;
}

._footer_i1w9t_360 {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--g100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--g500);
  animation: _fadeUp_i1w9t_1 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both;
}

._footerSep_i1w9t_373 {
  color: var(--g300);
}

@keyframes _cardIn_i1w9t_1 {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes _fadeUp_i1w9t_1 {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._card_i1w9t_26,
  ._brand_i1w9t_56,
  ._heading_i1w9t_78,
  ._handoff_i1w9t_216,
  ._ssoTitle_i1w9t_281,
  ._ssoWho_i1w9t_289,
  ._ssoNotYou_i1w9t_305,
  ._form_i1w9t_96,
  ._footer_i1w9t_360 {
    animation: none;
  }

  ._spinner_i1w9t_312 {
    animation-duration: 1.6s;
  }

  ._arrow_i1w9t_187,
  ._submit_i1w9t_164,
  ._field_i1w9t_103 input {
    transition: none;
  }
}
/* Shared styling for the MFA surfaces (challenge, enrolment, and the
   SecurityPage method manager). Consumed via `composes:` — same pattern as
   ui/DatePicker's fieldStyles. One declaration per pattern; per-surface
   deviations stay local as overrides after the composes line. */._root_1xtlf_6 {
  display: flex;
  flex-direction: column;
}._heading_1xtlf_11 {
  margin-bottom: 20px;
}._eyebrow_1xtlf_15 {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 10px;
}._title_1xtlf_25 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--navy);
}._subtitle_1xtlf_35 {
  font-size: var(--fs-sm);
  color: var(--g500);
  margin: 0;
  line-height: 1.6;
}._form_1xtlf_42 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}/* Body copy in confirmation/summary blocks (confirmBody, subBody). */._mutedBody_1xtlf_49 {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.6;
}/* The bordered error box — the most-cloned block in the family. */._errorBox_1xtlf_57 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.5;
}._codeGrid_1xtlf_67 {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
}._backupCode_1xtlf_79 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--navy);
  letter-spacing: 0.04em;
}._gate_1xtlf_86 {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-xs);
  color: var(--g600);
  line-height: 1.55;
  cursor: pointer;
}._gate_1xtlf_86 input {
  margin-top: 2px;
  accent-color: var(--navy);
  flex: 0 0 auto;
}._footerRow_1xtlf_102 {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}._linkButton_1xtlf_108 {
  background: none;
  border: none;
  padding: 4px 6px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color 140ms ease;
}._linkButton_1xtlf_108:hover {
  color: var(--navy);
  text-decoration: underline;
}._linkButton_1xtlf_108:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--navy-soft);
}@media (prefers-reduced-motion: reduce) {
  ._linkButton_1xtlf_108 {
    transition: none;
  }
}

._page_1tacq_1 {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  font-family: var(--f-body);
  color: var(--navy);
  background: var(--gradient-login-bg);
  overflow: hidden;
}

._card_1tacq_13 {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-md);
  padding: 36px 32px 28px;
  box-shadow:
    0 1px 1px rgb(16 48 69 / 4%),
    0 14px 40px -12px rgb(16 48 69 / 18%);
  overflow: hidden;
  animation: _cardIn_1tacq_1 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

._accent_1tacq_28 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--turq) 0%, var(--blue) 55%, var(--navy) 100%);
}

._brand_1tacq_37 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

._logo_1tacq_44 {
  width: 28px;
  height: 28px;
  user-select: none;
}

._wordmark_1tacq_50 {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

._heading_1tacq_58 {
  margin-bottom: 24px;
}

._eyebrow_1tacq_63 {
}

._title_1tacq_67 {
}

._subtitle_1tacq_71 {
  line-height: 1.5;
}

._form_1tacq_76 {
}

._field_1tacq_80 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._fieldLabel_1tacq_86 {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--g600);
  text-transform: uppercase;
}

._field_1tacq_80 input {
  padding: 11px 13px;
  border: 1px solid var(--g200);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

._field_1tacq_80 input:hover:not(:focus) {
  border-color: var(--g300);
}

._field_1tacq_80 input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-soft);
}

._policy_1tacq_115 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._policyTitle_1tacq_121 {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--g600);
}

._policyList_1tacq_127 {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-xs);
  color: var(--g500);
  line-height: 1.6;
}

._error_1tacq_135 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid #ffb1a9;
  border-radius: var(--r-sm);
  padding: 9px 11px;
  line-height: 1.4;
}

._submit_1tacq_145 {
  margin-top: 6px;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--color-surface);
  border: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 140ms ease, transform 140ms ease;
}

._submit_1tacq_145:hover:not(:disabled) {
  background: var(--g700);
}

._submit_1tacq_145:active:not(:disabled) {
  transform: translateY(1px);
}

._submit_1tacq_145:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._forgotRow_1tacq_177 {
}

._linkButton_1tacq_181 {
  text-decoration: none;
}

@keyframes _cardIn_1tacq_1 {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._card_1tacq_13 {
    animation: none;
  }

  ._submit_1tacq_145,
  ._field_1tacq_80 input {
    transition: none;
  }
}
._page_d0bg4_1 {
  min-height: calc(100vh - var(--topbar-h));
  display: grid;
  place-items: center;
  padding: 32px;
  font-family: var(--f-body);
  color: var(--navy);
  letter-spacing: 0.25px;
  background: radial-gradient(120% 80% at 50% 0%, var(--g50), var(--color-surface) 62%);
}

._card_d0bg4_12 {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
  border: 1px solid var(--g100);
  border-radius: var(--r-md);
  padding: 34px 30px 30px;
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 18px 40px var(--navy-soft);
}

/* Slim brand accent — a multi-stop gradient built from existing tokens that
   echoes the Genba Plus mark's palette without introducing raw colours. */
._card_d0bg4_12::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-purple-text),
    var(--blue),
    var(--color-success-mid),
    var(--color-warn)
  );
}

._providerBrand_d0bg4_42 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--g100);
}

._providerLogo_d0bg4_51 {
  height: 28px;
  width: auto;
  user-select: none;
}

._genbaLockup_d0bg4_57 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

._genbaMark_d0bg4_64 {
  height: 32px;
  width: 32px;
}

._genbaWordmark_d0bg4_69 {
  font-family: var(--f-jp);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}

._genbaPlus_d0bg4_77 {
  font-style: italic;
  font-weight: 700;
  margin-left: 1px;
}

._title_d0bg4_83 {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin: 0 0 6px;
}

._subtitle_d0bg4_89 {
  font-size: var(--fs-sm);
  color: var(--g600);
  margin: 0 0 10px;
  line-height: 1.4;
}

._note_d0bg4_96 {
  font-size: var(--fs-xs);
  color: var(--g500);
  background: var(--g50);
  border: 1px solid var(--g100);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  margin: 0 0 16px;
}

._form_d0bg4_106 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A return user's Genba API URL is already bound server-side, so it's hidden
   behind this low-emphasis link instead of shown — clicking reveals the
   editable field for the rare case the tenant URL changes. */
._editRootUrlLink_d0bg4_115 {
  background: none;
  border: none;
  padding: 0;
  color: var(--g500);
  font-size: var(--fs-xs);
  font-family: inherit;
  cursor: pointer;
  transition: color 150ms ease;
}

._editRootUrlLink_d0bg4_115:hover {
  color: var(--blue);
  text-decoration: underline;
}

._error_d0bg4_131 {
  font-size: var(--fs-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}

/* 10px sits between --s-2 (8px) and --s-3 (12px); intentional non-token value
   defined here and inherited by .actionButtons so the two gaps stay in step. */
._actions_d0bg4_142 {
  --gap-actions: 10px;

  display: flex;
  align-items: center;
  gap: var(--gap-actions);
  margin-top: var(--s-1);
}

/* Keep the Cancel/Connect pair right-aligned whether or not the edit-API-URL
   link is present on the left. */
._actionButtons_d0bg4_141 {
  display: flex;
  gap: var(--gap-actions);
  margin-left: auto;
}
._root_ajvda_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  color: var(--g600);
  font-size: var(--fs-sm);
  text-align: center;
}
._shell_63xe6_1 {
  min-height: 100vh;
  background: var(--g50);
}

._content_63xe6_6 {
  position: fixed;
  inset: var(--topbar-h) 0 0 var(--sidebar-w);
  background: var(--g50);
  transition: left 0.2s ease;
}

/* The scroll area filling the pane; its viewport is the page's scroller. */
._pane_63xe6_14 {
  height: 100%;
}

._main_63xe6_18 {
  /* No padding: every page's gutters live in ui/PageLayout. */
  width: 100%;
  min-width: 0;

  /* Definite height (= the fixed-height `.content`) so that
     full-height pages like the CAD viewer, whose root uses `height: 100%`, can
     actually resolve it. Without this `.main` is auto-height, percentage
     heights collapse, and grid `1fr` rows fall back to content size — which
     lets a tall left rail push the 3D canvas past the screen. Taller flow
     pages still overflow and scroll via the pane's ScrollArea viewport. */
  height: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input { font: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:root {
  /* Trusstor palette — primary navy from Trusstor production colors.constants.ts */
  --navy: #212a35;
  --navy-soft: rgb(16 48 69 / 8%);
  --navy-line: rgb(16 48 69 / 14%);
  --border: #d9d9d9;
  --separator: #f0f0f0;
  --blue: #2ebffd;
  --turq: #2cffcb;
  --red: #e23749;
  --amber: #feb953;
  --green: #73d973;
  --g50: #f4f7f8;
  --g100: #e7e9eb;
  --g200: #cfd2d6;
  --g300: #b7bcc2;
  --g400: #878f99;
  --g500: #6f7985;
  --g600: #576270;
  --g700: #384758;
  --g800: #273547;

  /* surface */
  --color-surface: #fff;

  /* "info" blue — the deep navy-blue trusstor uses for active-tab
     underline / status-done text / sev-low text + dot. Distinct from
     `--blue` (the cyan accent) and from `--navy` (the near-black brand).
     `-tint` and `-tint-soft` are the matching desaturated surface
     variants for status pills and the active-tab background. */
  --info:           #2b679e;
  --info-tint:      #eaf3fb;
  --info-tint-soft: #f3f8ff;

  /* Avatar tint color pool — 10 hues, deterministic by name hash.
     Washed into a tinted avatar's fill and initials (Avatar `tinted`). */
  --avatar-fg-0: #2563eb;
  --avatar-fg-1: #7c3aed;
  --avatar-fg-2: #059669;
  --avatar-fg-3: #e11d48;
  --avatar-fg-4: #d97706;
  --avatar-fg-5: #0891b2;
  --avatar-fg-6: #c026d3;
  --avatar-fg-7: #0d9488;
  --avatar-fg-8: #ea580c;
  --avatar-fg-9: #475569;

  /* Documents — file-family icon hues in the document table. Desaturated on
     purpose: the colour is a type cue, so it must not read as a status the
     way --red or --color-success would. */
  --doc-type-image: #7b61c4;
  --doc-type-pdf:   #c0483f;
  --doc-type-sheet: #2f8f6f;
  --doc-type-cad:   #2b679e;

  /* Activities & Issues — operations layout (mirrors the command-center reference) */
  --ops-surface:      #f6f7f9;                /* page background */
  --ops-card-border:  #d6dbe0;                /* card / panel hairline */
  --ops-bar-bg:       rgb(255 255 255 / 50%); /* translucent filter-bar strip */
  --ops-pill-bg:      #f1f3f5;                /* filter pill rest background */
  --ops-pill-hover:   #e7eaee;                /* filter pill hover background */
  --ops-select-tint:  rgb(37 134 147 / 6%);   /* selected-card background wash */
  --ops-select-edge:  #258693;                /* selected-card left edge (teal) */
  --ops-floor-bar:    rgb(115 217 115 / 22%); /* site-location-map occupancy bar */
  --ops-critical-edge: rgb(226 55 73 / 45%);  /* 1px hairline on critical-risk activity cards */
  --ops-critical-glow: rgb(226 55 73 / 22%);  /* outer halo around the hairline */

  /* cyan accent overlays — soft surface tints derived from --blue
     for active/selected states inside dark popovers (e.g. Sidebar
     language selector). */
  --blue-tint:      rgb(46 191 253 / 8%);
  --blue-tint-soft: rgb(46 191 253 / 14%);

  /* AI Agent brand-blue palette — mirrors Trusstor's $blue50..$blue900
     Material-style ramp. Used inside the AI Agent surface for chart
     accents, focus rings, navigation links, and the data-flow animation.
     Intentionally separate from --info (the darker desaturated blue
     used elsewhere) so the AI surface inherits Trusstor's visual
     signature without recoloring the rest of the product. */
  --brand-blue:        #2196f3;
  --brand-blue-dark:   #1976d2;
  --brand-blue-light:  #64b5f6;
  --brand-blue-xlight: #90caf9;
  --brand-blue-tint:   #bbdefb;
  --brand-blue-pale:   #e3f2fd;
  --brand-blue-deep:   #0d47a1;

  /* Alpha variants — used by the AI Agent surface for active-row tints,
     border accents, and the active-button glow shadow. Named by intent. */
  --brand-blue-bg-soft:    rgb(33 150 243 / 6%);
  --brand-blue-border-soft: rgb(100 181 246 / 20%);
  --brand-blue-glow:       rgb(37 99 235 / 35%);
  --brand-blue-focus-ring: rgb(100 181 246 / 8%);

  /* AI Agent surface — compound shadow tokens. Each is a full
     box-shadow declaration, so consumers say `box-shadow: var(--ai-shadow-sm)`
     instead of inlining `0 1px 3px rgb(33 42 53 / 6%)`. Names follow
     elevation conventions (sm / md / lg). */
  --ai-shadow-sm:       0 1px 3px rgb(33 42 53 / 6%);
  --ai-shadow-md:       0 2px 8px rgb(33 42 53 / 8%);
  --ai-shadow-elev:     0 4px 16px rgb(33 42 53 / 8%);
  --ai-shadow-lg:       0 8px 22px rgb(33 42 53 / 16%);
  --ai-shadow-tile:     0 1px 2px rgb(15 23 42 / 4%);
  --ai-shadow-toolbar:  0 6px 20px rgb(33 42 53 / 12%);  /* export bar floating in the composer's slot */
  --ai-shadow-popover:  0 4px 16px rgb(0 0 0 / 8%);
  --ai-shadow-sidebar:  0 2px 8px rgb(33 42 53 / 8%);
  --ai-shadow-focus:    0 0 0 4px var(--brand-blue-focus-ring),
                        var(--ai-shadow-elev);

  /* AI Agent — neutral overlays and row tints. */
  --ai-surface-overlay-strong: rgb(255 255 255 / 85%);
  --ai-spinner-track:         rgb(255 255 255 / 30%);
  --ai-row-stripe:            rgb(244 247 248 / 50%);
  --ai-row-hover:             rgb(231 233 235 / 50%);
  --ai-divider-soft:          rgb(231 233 235 / 60%);
  --ai-divider-faint:         rgb(217 217 217 / 30%);
  --ai-grid-line:             rgb(33 42 53 / 3%);
  --ai-glow-bg:               rgb(100 181 246 / 5%);

  /* issues page — status pill colors (mirror trusstor's feedback-* light variants) */
  --status-planned-bg:     #eaf3fb;
  --status-planned-text:   #2b679e;
  --status-for-review-bg:  rgb(254 185 83 / 18%);
  --status-for-review-text:#a36a16;
  --status-rejected-bg:    rgb(226 55 73 / 12%);
  --status-rejected-text:  #b1212f;
  --status-completed-bg:   rgb(115 217 115 / 18%);
  --status-completed-text: #2f8f2f;

  /* issues page — kanban board background tint */
  --surface-board: var(--info-tint-soft);

  /* dashboard / command-center — teal accent used by Project Progress
     + Quality Assurance ring charts and progress bars. Slightly cooler
     than --status-completed-text (#2f8f2f) which is reserved for the
     issues-page success state. */
  --dashboard-teal:        #2f8f6f;
  --dashboard-teal-soft:   #5cb494;
  --dashboard-teal-deep:   #157e6a;

  /* Inline MOCK pill — slightly softer amber than --status-for-review-bg
     so it reads as a meta-tag rather than a status. */
  --dashboard-mock-bg: rgb(254 185 83 / 14%);

  /* Bar shades used by the master-schedule Gantt + activity-feed tile
     backgrounds (light tinted versions of the palette). */
  --dashboard-critical-bar: #d63a4a;
  --dashboard-ontrack-bar:  var(--dashboard-teal-soft);

  /* Stronger amber tint used by the Weather card's safety-warning
     row border. */
  --dashboard-warning-border: rgb(254 185 83 / 24%);

  /* Permit row in the activity feed — light blue tint of --blue. */
  --dashboard-permit-bg: rgb(46 191 253 / 14%);

  /* "Urgent" pill in the activity feed — light red tint. */
  --dashboard-urgent-bg: rgb(226 55 73 / 14%);

  /* A safety alert's icon in the bell and on the alert settings cards — the same light red tint. */
  --alert-safety-bg: rgb(226 55 73 / 14%);

  /* Flow View — softer, more transparent severity / status surfaces used
     by exception cards, blocker rows, and completed item chips. Sit at
     ~8% alpha so a stack of them reads as a calm canvas; the global
     --sev-critical-bg / --status-*-bg tokens are reserved for chips
     that need stronger fill. */
  --flow-sev-high-bg:    rgb(226 55 73 / 8%);
  --flow-sev-med-bg:     rgb(254 185 83 / 10%);
  --flow-status-done-bg: rgb(115 217 115 / 10%);
  --primary:            187 60% 36%;
  --primary-foreground: 0 0% 100%;
  --success:             168 48% 36%;
  --success-foreground:  0 0% 100%;
  --warning:             40 76% 49%;
  --warning-foreground:  0 0% 100%;
  --destructive:         0 72% 50%;
  --destructive-foreground: 0 0% 100%;

  /* Cameras feature — HSL triples (used with hsl(... / a) for tinted
     borders, backgrounds, and the live-count text). --camera-info is a
     brighter blue than --info (a hex); --camera-secondary is a neutral
     light grey for soft placeholder surfaces. */
  --camera-info:        200 90% 48%;
  --camera-secondary:   210 14% 92%;

  /* warn (used by reconnecting badge etc.) */
  --color-warn: #d99a3c;
  --color-warn-bg: rgb(217 154 60 / 12%);

  /* success green — positive trend arrows, "ok" status chips, progress bars.
     Distinct from --green (the palette green #73d973) which is used for
     live-pulse and safety alerts. */
  --color-success:    #0e8a33;  /* dark green text / icon */
  --color-success-mid: #18a41e; /* medium green dot / progress fill */
  --color-success-bg: #e3f4e8;  /* light green background for success pills */

  /* project status / phase pill — additional semantic colors not covered by
     the main palette. Used by portfolio ProjectRow status chips and phase
     pills. */
  --bar-blue: #3582ff;          /* histogram bar fill — matches trusstor's LocationHistogram BAR_COLOR */
  --banner-soft-blue: #eaf3fb;   /* contractor-analysis report page header strip */
  --line-purple:      #4d0068;   /* contractor-analysis workers/hours chart line — matches trusstor source */
  --chart-cyan:      rgb(46 191 253 / 85%);   /* contractor-analysis workers bar fill — matches trusstor's V2 chart series */
  --chart-cyan-tint: rgb(46 191 253 / 12%);   /* hover-cursor band over the bars */
  --chip-cyan-bg:    rgb(46 191 253 / 18%);   /* trade-chip fallback background */
  --chip-cyan-text:  #126f86;                  /* trade-chip fallback foreground */
  --color-plan-text: #3582ff;   /* "plan" status — blue */
  --color-neutral-text: #4f4f4f; /* neutral gray text */
  --color-purple-text: #a5398d;  /* interior / MEP phase */

  /* severity pill palettes (safety alerts, issue criticality) —
     background + foreground for critical / high / medium / low bands.
     Low re-uses --info-tint / --info from the info blue cluster.
     These also drive the provider reconnect warn/error variants. */

  /* error banner — canonical source for the dark-red on pale-red error
     pair used by the login form, ConnectProvider banner, severity-critical
     pill, and portfolio scoring. Single source of truth: --sev-critical-*
     aliases below reference these. */
  --color-error:    #a83229;
  --color-error-bg: #ffdbd9;
  --color-error-border: #ffb1a9;

  /* Soft pink used for non-blocking inline notices (e.g. the daily-route
     tag-reassignment warning). Paired with `--navy` text — informational,
     not alarming. Matches Trusstor's pale-rose notice surface. */
  --color-warning-soft-bg: #f9e5ea;

  /* Foreground for chips that sit on a profession's `backgroundColor`.
     Profession colors are always saturated mid/dark tones, so white reads
     consistently. Used by `Reports/shared/DataRow` and
     `Reports/DailyRoute/components/ActivitiesSection`. */
  --color-on-trade: var(--color-surface);
  --sev-critical-bg:   var(--color-error-bg);
  --sev-critical-text: var(--color-error);
  --sev-high-bg:       #ffe6c9;
  --sev-high-text:     #8a5a12;
  --sev-med-bg:        #fff3b2;
  --sev-med-text:      #8a6a15;

  /* sev-low re-uses --info-tint + --info */

  /* "info" notice banner — yellow/amber tints used by info banners
     (dashboard layout-fetch notice, timesheet). */
  --banner-info-bg:   #fff9d9;
  --banner-info-text: #5a4108;

  /* safety-alert high dot — the orange-ish dot for "high" severity.
     Distinct from --amber (#feb953) which is used for the medium dot. */
  --color-sev-high-dot: #e8900c;

  /* shadows */
  --shadow-card:       0 1px 2px rgb(33 42 53 / 8%);
  --shadow-card-hover: 0 0 8px rgb(17 24 39 / 16%);
  --shadow-dropdown:   0 4px 12px rgb(0 0 0 / 10%);
  --shadow-row-hover: 0 1px 2px rgb(33 42 53 / 4%);
  --shadow-skeleton: 0 1px 2px rgb(0 0 0 / 3%);
  --shadow-tooltip:  0 0 2px rgb(0 0 0 / 40%);
  --shadow-left-rail:
    -2px 0 6px 1px rgb(128 128 128 / 20%),
    0 -8px 4px 1px rgb(128 128 128 / 20%);
  --shadow-modal:    0 24px 48px rgb(33 42 53 / 25%);
  --shadow-popover:  0 14px 36px rgb(17 24 39 / 24%);
  --shadow-drawer:   2px 0 12px rgb(0 0 0 / 8%);
  --shadow-drawer-right: -16px 0 48px rgb(0 0 0 / 16%);
  --shadow-pin:      0 1px 2px rgb(0 0 0 / 25%);
  --shadow-calendar-handle: -2px 2px 10px rgb(16 48 69 / 22%);
  --shadow-calendar-handle-hover:
    -6px 4px 22px rgb(16 48 69 / 34%),
    0 0 0 3px color-mix(in srgb, var(--turq) 35%, transparent);
  --shadow-calendar-card-hover: 0 3px 10px rgb(16 48 69 / 10%);

  /* Rendered document page (e.g. the PDF preview canvas) lifted off its tray. */
  --shadow-page:     0 1px 6px rgb(0 0 0 / 18%);

  /* LoginPage hero background — multi-layer cyan/blue glow over the
     neutral surface, framed by the dotted grid overlay in .grid. */
  --gradient-login-bg:
    radial-gradient(700px 360px at 85% -10%, rgb(44 255 203 / 10%), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgb(46 191 253 / 8%), transparent 55%),
    var(--g50);

  /* Floor-plan area highlight (matches trusstor_dashboard's selected-area
     style verbatim — see Dialog/floorPlanSvg.ts). The fill is read from
     this token via getComputedStyle so the SVG inline-style mutation in
     floorPlanSvg.ts honours the design-token rule. */
  --floor-area-selected-fill: rgb(104 228 255 / 30%);
  --floor-area-selected-fill-opacity: 0.6;
  --floor-area-selected-opacity: 0.8;

  /* Replay: the day held on screen while the next one loads (track and building chips). */
  --replay-held-opacity: 0.35;

  /* Hovered/active area — a darker shade of the same blue (no new hue). */
  --floor-area-active-fill: rgb(46 191 253 / 42%);
  --shadow-chip:     0 1px 4px rgb(33 42 53 / 22%);

  /* dim overlay behind modals */
  --modal-backdrop: rgb(33 42 53 / 45%);

  /* lightbox overlay + nav/close button fill */
  --lightbox-backdrop:   rgb(0 0 0 / 85%);
  --lightbox-button-bg:  rgb(0 0 0 / 50%);

  /* inverse-on-dark overlay tints — used inside dark popovers (e.g. the
     building-view floor-details popover) for soft separators, faded text,
     and inset chip pills. */
  --inverse-bg-faint:    rgb(255 255 255 / 4%);
  --inverse-bg-light:    rgb(255 255 255 / 8%);
  --inverse-bg-medium:   rgb(255 255 255 / 16%);
  --inverse-text-soft:   rgb(255 255 255 / 55%);
  --inverse-text-medium: rgb(255 255 255 / 65%);
  --inverse-text-strong: rgb(255 255 255 / 92%);

  /* chip inner overlays (transparent white tints inside coloured badges) */
  --chip-overlay-sm: rgb(255 255 255 / 15%);
  --chip-overlay-md: rgb(255 255 255 / 22%);

  /* dark overlay tint for count badges sitting on light surfaces (e.g.
     the MultiSelect selected/total count inside a profession chip row) */
  --chip-count-bg: rgb(0 0 0 / 18%);

  /* "live" pulse — green tints used by the scissor-lift live indicator on
     the building view + floor drawer (mirrors trusstor's LiveActionAnimatedIcon). */
  --live-pulse-strong: rgb(115 217 115 / 55%);
  --live-pulse-soft:   rgb(115 217 115 / 0%);
  --live-badge-bg:     rgb(115 217 115 / 18%);

  /* Sidebar palette — light theme */
  --sidebar-accent:          #258693;               /* active accent — icons, left border, dot */
  --sidebar-text:            #4b566c;               /* primary text and icon color */
  --sidebar-active-text:     #0f131a;               /* selected leaf label */
  --sidebar-subtext:         #656c7b;               /* secondary text — subtitles, org */
  --sidebar-background:      #f9fafb;               /* surface */
  --sidebar-border:          #e2e6ea;               /* right edge + footer divider */
  --sidebar-hover-bg:        rgb(75 86 108 / 5%);   /* item hover background */
  --sidebar-active-bg:       rgb(37 134 147 / 5%);  /* selected leaf background */
  --sidebar-group-active-bg: rgb(37 134 147 / 5%);  /* selected group header background */
  --sidebar-chevron:         rgb(75 86 108 / 32%);  /* chevron icon at rest */
  --sidebar-chevron-open:    rgb(75 86 108 / 65%);  /* chevron icon when expanded */
  --sidebar-toggle:          rgb(75 86 108 / 58%);  /* collapse toggle icon */

  /* ── Chat channel active-state tints (ChatBox selected item) ─ */
  --chat-channel-active-bg:        rgb(37 134 147 / 8%);   /* selected channel background */
  --chat-channel-active-border:    rgb(37 134 147 / 30%);  /* selected channel border */
  --chat-channel-active-hover-bg:  rgb(37 134 147 / 10%);  /* selected channel hover */
  --chat-conversation-selected-bg: #e6f3f4;               /* selected row in the conversation list */

  /* provenance */
  --prov-trusstor: #2cffcb;
  --prov-daitec:   #ffb259;
  --prov-merged:   #9dbbff;

  /* Default chip fill when a profession's catalog `backgroundColor` is
     missing. A neutral light gray (mirrors trusstor_dashboard's empty-state
     chip) rather than inventing a saturated colour, so a profession without
     an upstream colour reads as "unset" instead of an arbitrary mustard/slate.
     Resolved centrally in `utils/professionColor.ts`. */
  --profession-fallback-color: #e2e8f0;

  /* Readable foreground paired with the light-gray fallback fill — white text
     would vanish on it, so chips on the fallback use dark navy instead. */
  --profession-fallback-on: var(--navy);

  /* Per-floor side-rail badge palette (alert + hoist glyphs).
     Mirrors trusstor_dashboard's `dash-icon-orange-alert.svg` (#f46e0a) /
     `dash-icon-red-alert.svg` (#d81a1a) / `elevator_icon.svg` (#1e1e1e).
     The avatar tokens drive the small white count circle pinned on each
     badge — values lifted from trusstor's `SafetyIcon` / `HoistIcon`
     (`backgroundColor: #fefefe`, `color: #3b3b3b`, drop shadow). */
  --safety-alert-orange: #f46e0a;
  --safety-alert-red:    #d81a1a;
  --hoist-glyph-fill:    #1e1e1e;
  --badge-avatar-bg:     #fefefe;
  --badge-avatar-text:   #3b3b3b;
  --badge-avatar-shadow: 0 3px 2px rgb(0 0 0 / 45%);

  /* Building-view + floor-area interaction tints (mirrors trusstor_dashboard's
     svgSelectedStyle + .highlightedAreaHovered values). The hover tone is
     ~50% of an off-white blue; the selected tone is the same blue family
     at full saturation. Used by BuildingViewSvg for floor hover/selection
     AND by FloorDrawer for per-area hover, "has workers" tint, and
     click-selected tint (different fill-opacities). */
  --floor-hover-fill:    rgb(234 243 251 / 55%);
  --floor-selected-fill: #c8e5f9;

  /* typography — Outfit per Trusstor Design System 2024 */
  --f-display: 'Outfit', system-ui, sans-serif;
  --f-body:    'Outfit', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', 'Outfit', monospace;

  /* Japanese supplemental font — used alongside --f-body for CJK text in
     portfolio/project-name labels that may contain Japanese characters. */
  --f-jp: 'Noto Sans JP', var(--f-body), sans-serif;

  /* font-size scale — even-numbered, body = 14px.
     Every literal font-size in component module CSS files must
     reference one of these tokens (enforced by Stylelint). */
  --fs-3xs:  9px;
  --fs-2xs:  10px;
  --fs-xs:   12px;
  --fs-sm:   14px;   /* body baseline — matches global.css body */
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  40px;
  --fs-5xl:  56px;

  /* radii */
  --r-sm:     2px;
  --r-md:     4px;
  --r-lg:     6px;
  --r-xl:     8px;
  --r-2xl:   10px;
  --r-3xl:   12px;
  --r-pill:  999px;
  --r-circle: 50%;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 36px;

  /* Bottom slot shared by the toast stack and any page-level dock in it. */
  --toast-slot-bottom: 22px;
  --toast-slot-gap:    8px;
  --ease-toast-in:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-expo:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* z-index scale — every numeric z-index in component modules must
     reference one of these tokens (enforced by Stylelint in a later
     task). Layers ascend by purpose, not by magnitude; gaps exist
     for future insertion. */
  --z-base:           0;
  --z-raised-1:       1;   /* intra-stacking-context layering (preview bands etc.) */
  --z-raised-2:       2;   /* next layer up — sticky headers, skeleton rows */
  --z-raised-3:       3;   /* a sticky header over a sticky column (Work Plan day header) */
  --z-raised-4:       4;   /* the corner where a sticky header and sticky column meet */
  --z-floor-overlay:  5;   /* FloorDrawer SVG hit-target overlay */
  --z-drag-lift:      5;   /* Gantt bar lifted above siblings/grid mid-drag */
  --z-canvas-overlay: 5;   /* banner floating over the CAD viewport and its header controls */
  --z-inline-popover: 5;   /* hover popover inside a content block (AI table overflow badges) */
  --z-side-panel:     10;  /* in-page side panel whose shadow must fall over the main pane */
  --z-dialog-inner:   10;  /* in-dialog confirmations (DeleteConfirmDialog) */
  --z-under-chrome:   15;  /* header-anchored popovers that must pass UNDER the
                              topbar/sidebar as their trigger scrolls away, instead
                              of riding over the app chrome (dashboard layout controls).
                              Still above page content, so it covers cards normally. */
  --z-topbar:         20;  /* unified with sidebar — TopBar was 15, lifted to match */
  --z-sidebar:        20;
  --z-sidebar-overlay: 21; /* narrow-viewport sidebar + its backdrop, over the TopBar */
  --z-floating-dock:  30;  /* Monitor replay bar floating at the screen's bottom — over the sidebar, under drawers */
  --z-delivery-calendar: 30; /* Logistics calendar and its edge handle — over the sidebar, under drawers */
  --z-focus-halo:     40;  /* transient deep-link focus halo — above content/topbar, below drawers */
  --z-map-fullscreen-backdrop: 44; /* SLS Site Map fullscreen overlay's content-area dim */
  --z-map-fullscreen: 45;          /* SLS Site Map fullscreen card itself — above its own backdrop,
                                       below drawers/dialogs (AreaDrawer, NewAreaDialog, DiscardModal)
                                       so those still render on top of the expanded map */
  --z-drawer-backdrop: 49;
  --z-drawer:         50;
  --z-popover:        100; /* Menu, FloorDrawer floating popover */
  --z-dialog:         1000;
  --z-dialog-popover: 1100; /* popovers anchored inside a dialog */
  --z-lightbox:       1200;
  --z-toast:          1300;
  --z-tooltip:        1400; /* hover tooltips sit above everything, incl. the fullscreen floor-plan modal */

  /* Page tour — above EVERY portal (dialogs, drawers, toasts, tooltips): the
     tour explains those surfaces, so it can never be covered by one. */
  --z-page-tour-sheet: 10000;
  --z-page-tour-ring:  10001;
  --z-page-tour-bulb:  10002;

  /* Analytics center — yellow accent on report-card headers
     (mirrors trusstor_dashboard's $yellow #ffc700). Used only by
     ReportCard's header band. */
  --accent-yellow: #ffc700;

  /* Card hover/selected shadows (mirrors trusstor's analytics ReportCard
     interaction states). Distinct from --shadow-row-hover (table rows). */
  --shadow-card-selected: 0 0 16px 0 rgb(0 0 0 / 12%);

  /* Project Overview report — div-drawn charts + status donut.
     Ported from trusstor's report palette:
       TOTAL_COLUMN_COLOR '#2B679E' (= --info, defined above — no separate
       token: reuse it rather than duplicating the same hex);
       donut status asPlanned/partial/deficient;
       safety bar gradient = base '#647794' with alpha ff/dd/bb/99/77. */
  --po-status-as-planned: #79a41c;
  --po-status-partial:    #f9bc14;
  --po-status-deficient:  #d34e0a;
  --po-donut-ring: #ebebeb;
  --po-safety-grad-0: #647794;
  --po-safety-grad-1: #647794dd;
  --po-safety-grad-2: #647794bb;
  --po-safety-grad-3: #64779499;
  --po-safety-grad-4: #64779477;

  /* Documents page — primary teal and secondary chip bg (matches Genba Plus mock palette) */
  --doc-primary: 187 60% 36%;
  --doc-secondary: 210 14% 92%;

  /* Documents page surface — cool blue-gray tint distinct from --color-surface */
  --docs-surface:       hsl(210deg 25% 97%);
  --docs-surface-hover: hsl(210deg 25% 94%);

  /* Documents page — status pill colors (matching Genba Plus mock palette) */
  --doc-approved-text: hsl(168deg 48% 36%);
  --doc-approved-bg:   hsl(168deg 48% 36% / 12%);

  /* "In review" is one colour for documents, issues and areas. */
  --doc-in-review-text:  var(--area-status-review-fg);
  --doc-in-review-bg:    var(--area-status-review-bg);
  --doc-draft-text:    hsl(200deg 90% 48%);
  --doc-draft-bg:      hsl(200deg 90% 48% / 20%);
  --doc-rejected-text: var(--color-error);
  --doc-rejected-bg:   var(--color-error-bg);
  --doc-superseded-text: var(--g500);
  --doc-superseded-bg:   var(--g100);

  /* The scrim that gives a label laid over a photo its ground. */
  --doc-overlay-scrim: linear-gradient(180deg, transparent, rgb(0 0 0 / 55%));

  /* Logistics dialogs — sizes the delivery form, the stock dialog and the
     delivery lines table must agree on, so they cannot drift apart. */
  --logistics-wide-dialog-width: min(560px, calc(100vw - 32px));
  --logistics-amount-col-width:  88px;
  --logistics-unit-col-width:    104px;

  /* CAD viewer — layer panel dots (left rail) */
  --color-cad-layer-structural: var(--prov-daitec);     /* orange */
  --color-cad-layer-mep:        var(--red);
  --color-cad-layer-safety:     var(--green);
  --color-cad-layer-logistics:  var(--safety-alert-red);
  --color-cad-layer-temp:       var(--accent-yellow);

  /* CAD viewer — bottom legend trade dots
     plumbing-pink and hvac-purple are new color values; chosen to match
     the saturation level of --red / --amber / --green. Adjust against
     docs/design-tokens-trusstor-ds2024.md if a designer review surfaces
     a preferred value. */
  --color-cad-trade-electrical: var(--blue);
  --color-cad-trade-plumbing:   #ec5cab;
  --color-cad-trade-structural: var(--color-cad-layer-structural);
  --color-cad-trade-hvac:       #9d5fe1;
  --color-cad-trade-concrete:   var(--green);

  /* CAD discipline palette — left-rail layer swatches AND the
     "colour by discipline" 3D overlay both read these, so the panel key
     always matches the model tint. Colours are mnemonic: each maps to a real
     association for that building system (fire=red, water=blue, electricity=
     yellow, …) so the overlay reads intuitively and the trades stay distinct
     when architecture is hidden. */
  --color-cad-discipline-architectural: #9aa1ab;       /* neutral building shell — new base value, not in DS palette (close to --g400 #878f99 but lighter/bluer; kept distinct so the shell reads cooler than plain grey UI text) */
  --color-cad-discipline-structural:    #5b7488;       /* steel / concrete slate — new base value, not in DS palette */
  --color-cad-discipline-mechanical:    #f5922f;       /* HVAC · air handling (heat) — new base value, not in DS palette */
  --color-cad-discipline-plumbing:      #2f80ed;       /* water — new base value, not in DS palette */
  --color-cad-discipline-electrical:    #f4c20d;       /* electricity — new base value, not in DS palette */
  --color-cad-discipline-fire:          var(--red);    /* fire protection */
  --color-cad-discipline-telecom:       #8b5cf6;       /* data / comms — new base value, not in DS palette (a bluer violet than --color-cad-trade-hvac #9d5fe1; kept distinct so telecom and HVAC don't collide in the overlay) */
  --color-cad-discipline-landscape:     #4caf50;       /* vegetation — new base value, not in DS palette (a deeper material-green than --green #73d973, which reads too pale against the model) */
  --color-cad-discipline-civil:         #9c6b3f;       /* earthwork / site — new base value, not in DS palette */
  --color-cad-discipline-interior:      #ec4899;       /* finishes — new base value, not in DS palette (a cooler magenta than --color-cad-trade-plumbing #ec5cab; kept distinct so interior and the plumbing trade dot stay separable) */
  --color-cad-discipline-equipment:     #14b8a6;       /* equipment — new base value, not in DS palette */
  --color-cad-discipline-general:       var(--g500);   /* unclassified */
  --color-cad-discipline-other:         var(--g400);   /* no discipline prefix */

  /* Floor-isolation ghost — the translucent shade everything OUTSIDE the
     selected level is drawn in (paired with a low opacity set in code).
     Near-white pale grey: ghosted pixels stack many surfaces deep, so the
     colour must sit close to the canvas background or the accumulation
     reads as a solid milky mass. New base value, not in DS palette. */
  --color-cad-ghost:                    #eceef1;

  /* CAD annotations — category pin colours (defect / info / task / safety /
     question) + the resolved-muted and pin-text tones. Reuse the existing
     palette: question reuses the CAD hvac purple (#9d5fe1) — same saturation
     family as --red / --amber / --green — so no new hex is introduced. */
  --color-annotation-defect:   var(--red);
  --color-annotation-info:     var(--info);
  --color-annotation-task:     var(--amber);
  --color-annotation-safety:   var(--green);
  --color-annotation-question: var(--color-cad-trade-hvac);
  --color-annotation-resolved: var(--g400);
  --color-annotation-pin-text: var(--white);

  /* Document markup editor — the drawing palette. Token per swatch (no new
     hex: reuses the semantic palette + neutrals). The editor resolves these
     at runtime for canvas/PDF export, so tokens.css stays the single source. */
  --markup-red:    var(--red);
  --markup-amber:  var(--amber);
  --markup-green:  var(--green);
  --markup-blue:   var(--info);
  --markup-black:  var(--navy);
  --markup-white:  var(--white);

  /* Finance — additional trade swatches used by the Cost Heatmap bars
     and Labor-by-Trade dots. Pink is the same value as
     --color-cad-trade-plumbing (kept as its own token so a designer
     can rebalance Finance independently of the CAD legend);
     steel-purple is a new value not present in the CAD palette. */
  --finance-trade-pink:   var(--color-cad-trade-plumbing);
  --finance-trade-purple: #a5398d;

  /* Finance — primary action button (deep teal, matches Loveable
     reference). Distinct from --dashboard-teal-deep (#157e6a) which
     reads cooler and is reserved for ring charts. */
  --finance-action-bg:       #1b4d4a;
  --finance-action-bg-hover: #143938;

  /* Finance AI-Insights — translucent borders for over/under-budget
     pills. ~24-28% alpha so the pill reads as a tag, not a status
     chip. */
  --finance-insight-border-red:   rgb(226 55 73 / 24%);
  --finance-insight-border-green: rgb(115 217 115 / 28%);

  /* app-shell layout */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;

  /* Monitor page left rail width — single source of truth shared by the
     live panel and the loading skeleton so they can't drift apart.
     Narrows below 1600px (see the media override at the end of this file). */
  --monitor-leftrail-w: 380px;

  /* Gantt scheduler */
  --gantt-row-h:            36px;

  /* The canvas track is max-content (bars keep their size), so the label column
     widening below feeds straight into the task-name 1fr track — it doesn't
     compress the Gantt, only shifts where the horizontal scroll starts. */
  --gantt-label-col:        540px;
  --gantt-col-ppc:          76px;  /* fits the "PROGRESS" header; value "100%" needs less */
  --gantt-col-trade:        96px;
  --gantt-col-status:       100px;

  /* Last survivor of the per-trade Gantt palette (the scheduler now derives
     bar colours from each task's own hex) — kept only because FinancePage's
     CostsTab legend dot still references it. */
  --gantt-color-electrical: #004fc6;
  --gantt-bar-text:         #1e293b;
  --gantt-gridline:         rgb(15 23 42 / 4%);     /* faint per-tick vertical line */
  --gantt-gridline-major:   rgb(15 23 42 / 8%);     /* heavier week-boundary at Day zoom */
  --gantt-critical:         var(--red);
  --gantt-critical-fill:    #ffd9dd;
  --gantt-today:            var(--blue);

  /* Gantt vertical marker colours — one token per kind (fallback used when
     a marker's `.color` field is absent). Named --gantt-marker-<kind>. */
  --gantt-marker-today:      var(--blue);
  --gantt-marker-deadline:   var(--red);
  --gantt-marker-inspection: var(--amber);
  --gantt-marker-event:      var(--info);
  --gantt-marker-range:      var(--g300);

  /* Named overrides that user-authored markers can reference via `.color`. */
  --gantt-marker-red:        var(--red);
  --gantt-marker-amber:      var(--amber);
  --gantt-marker-critical:   var(--red);

  /* Status pill palette */
  --gantt-status-done-fg:        #166534;
  --gantt-status-done-bg:        #dcfce7;
  --gantt-status-track-fg:       #1e40af;
  --gantt-status-track-bg:       #dbeafe;
  --gantt-status-planned-fg:     #475569;
  --gantt-status-planned-bg:     #e2e8f0;
  --gantt-status-blocked-fg:     #991b1b;
  --gantt-status-blocked-bg:     #fee2e2;

  /* Per-AREA status (Trusstor's area-sequence vocabulary) as pale grounds for
     the drawer's area board and its meter. A started area is yellow, one
     awaiting review is orange, and a late one — delayed or overdue — is red;
     overdue is told apart from delayed by its FLAG mark, not by a fourth hue
     (the board reads "late" at a glance, then "how late" on the glyph). */
  --area-status-progress-bg:     #fef9c3;
  --area-status-progress-fg:     #854d0e;
  --area-status-delayed-bg:      #fee2e2;
  --area-status-delayed-fg:      #991b1b;
  --area-status-overdue-bg:      #fee2e2;
  --area-status-overdue-fg:      #991b1b;
  --area-status-review-bg:       #ffedd5;
  --area-status-review-fg:       #9a3412;

  /* Translucent overlay for Gantt range-band markers (the shaded region
     between two date markers). Low-opacity black so the tint works on any
     background colour without requiring a surface-specific token. */
  --gantt-range-overlay: rgb(0 0 0 / 4%);

  /* Hover crosshair — the hovered day column + task row darken slightly so a
     bar can be traced back to its date and label. Low-opacity navy, same
     family as the gridlines, so it sits on white rows, grey group rows and
     the weekend tints alike; where column and row cross the alpha doubles. */
  --gantt-hover-band: rgb(15 23 42 / 6%);

  /* Japanese-calendar weekend coloring. Sat = blue, Sun = red — the
     traditional convention used in JP calendars and construction-site
     工程表. *-fg is for header text; *-bg-soft is for column tints in
     the gantt body (kept low-opacity so task bars stay legible). */
  --gantt-weekend-saturday-fg:      #1d4ed8;
  --gantt-weekend-saturday-bg:      #eff6ff;
  --gantt-weekend-saturday-bg-soft: rgb(185 28 28 / 6%);
  --gantt-weekend-sunday-fg:        #b91c1c;
  --gantt-weekend-sunday-bg:        #fef2f2;
  --gantt-weekend-sunday-bg-soft:   rgb(185 28 28 / 6%);

  /* Portfolio page redesign — surface / border / text / accent / chip
     tokens consumed by the redesigned PortfolioPage components. */
  --surface-card:      #fff;
  --surface-soft:      #f6f7f9;
  --surface-chip:      #e4e7ec;
  --surface-alert:     #fff3f3;
  --border-subtle:     #e4e7ec;
  --border-strong:     #cbd0d8;
  --text-primary:      #111827;
  --text-secondary:    #6b7280;
  --text-link:         #1d4ed8;
  --accent-success:        #1f8a3f;
  --accent-attention:      #e0a512;
  --accent-attention-dark: #b58404; /* darker amber for foreground on .minorDelay chips */
  --accent-warning:        #c0392b;

  /* "On the critical path" tag — outlined amber chip (amber text + amber border, transparent fill). */
  --critical-path-tag-fg: #e8a317;
  --chip-success:          #d4f0db;
  --chip-attention:        #fff2c7;
  --chip-warning:          #fde2e1;

  /* Portfolio chip tints — very soft (~8-10% alpha) per-state backgrounds
     used by StatusBadges. Derived from --accent-* values. */
  --chip-success-tint:    rgb(31 138 63 / 10%);   /* derived from --accent-success */
  --chip-attention-tint:  rgb(224 165 18 / 10%);  /* derived from --accent-attention */

  /* Portfolio "Minor Delay" chip, recolored to the MOCK pill's amber family:
     --amber text over a 24% amber tint (the --dashboard-warning-border
     strength). Deliberately scoped — --accent-attention stays mustard for the
     Productivity amber tones, whose small text needs the darker value. */
  --chip-attention-amber-bg: rgb(254 185 83 / 24%);
  --chip-warning-tint:    rgb(192 57 43 / 8%);    /* derived from --accent-warning */
  --chip-neutral-tint:    rgb(107 114 128 / 8%);  /* derived from --text-secondary */

  /* Portfolio alert tile tints — extremely soft per-severity backgrounds
     used by AlertItem. Tuned to ~5-6% so cards read as "almost white with
     a wash" (Loveable reference). */
  --alert-high-tint:      rgb(192 57 43 / 5%);
  --alert-high-border:    rgb(192 57 43 / 10%);
  --alert-med-tint:       rgb(224 165 18 / 6%);
  --alert-med-border:     rgb(224 165 18 / 12%);

  /* Portfolio project card — photo panel. The scrim darkens the top (star +
     badges) and the bottom (name + manager) so white text reads over any
     photo; the fallback is what a project with no photo shows instead. */
  --portfolio-photo-scrim: linear-gradient(
    180deg,
    rgb(10 18 28 / 45%) 0%,
    rgb(10 18 28 / 0%) 30%,
    rgb(10 18 28 / 25%) 55%,
    rgb(10 18 28 / 85%) 100%
  );
  --portfolio-photo-fallback: linear-gradient(135deg, var(--g800), var(--info));
  --portfolio-photo-text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
  --portfolio-photo-frost-bg:     rgb(255 255 255 / 14%);
  --portfolio-photo-frost-border: rgb(255 255 255 / 18%);
  --portfolio-photo-star-bg:      rgb(255 255 255 / 18%);
  --portfolio-photo-star-bg-hover: rgb(255 255 255 / 28%);

  /* A card metric bar's target range (workforce: expected ±15%). */
  --portfolio-metric-band: rgb(43 103 158 / 16%);

  /* The delayed "Current" milestone box: a soft red wash + a red-pink edge. */
  --portfolio-milestone-late-bg:     rgb(226 55 73 / 9%);
  --portfolio-milestone-late-border: rgb(226 55 73 / 28%);

  /* Pure white — use for text/icons on coloured backgrounds (badges, buttons) */
  --white: #fff;

  /* ── Productivity Analysis — metric-card icon tones. Each tone is a
     soft tinted square background + a saturated icon foreground. Tints
     are derived from the existing palette so the strip reads as one
     family. ─────────────────────────────────────────────────────────── */
  --prod-tone-green-bg: rgb(115 217 115 / 14%);
  --prod-tone-green-fg: var(--color-success);
  --prod-tone-green-border: rgb(115 217 115 / 32%);
  --prod-tone-amber-bg: rgb(254 185 83 / 16%);
  --prod-tone-amber-fg: var(--accent-attention-dark);
  --prod-tone-amber-border: rgb(254 185 83 / 36%);
  --prod-tone-teal-bg:       rgb(37 134 147 / 10%);
  --prod-tone-teal-bg-light: rgb(37 134 147 / 5%);
  --prod-tone-teal-fg:       var(--sidebar-accent);
  --prod-tone-teal-border:   rgb(37 134 147 / 28%);
  --prod-tone-teal-glow:        rgb(37 134 147 / 25%);  /* inner halo */
  --prod-tone-teal-glow-faint:  rgb(37 134 147 / 8%);   /* outer halo */
  --prod-tone-slate-bg: rgb(100 116 139 / 12%);
  --prod-tone-slate-fg: var(--trade-manager-fallback);
  --prod-tone-slate-border: rgb(100 116 139 / 28%);
  --prod-tone-red-bg:   rgb(226 55 73 / 12%);
  --prod-tone-red-fg:   var(--color-error);
  --prod-tone-red-border: rgb(226 55 73 / 30%);

  /* Productivity trend pills — up reads positive (green), down negative
     (red); colour applies to both the chevron-line glyph and the label. */
  --prod-trend-up:   var(--color-success);
  --prod-trend-down: var(--red);

  /* Earned-vs-Actual chart bars — two shades of the brand cyan: a soft light
     cyan for measured "actual" hours, the vivid --blue for "earned". */
  --prod-bar-actual: #bfe2ee;
  --prod-bar-earned: var(--blue);

  /* Comms — mention chip (amber) */
  --comms-mention-bg: #fff8eb;
  --comms-mention-fg: #b45309;
  --comms-mention-activity-bg: var(--color-success-bg);
  --comms-mention-activity-fg: var(--color-success);

  /* ── Project Merge (現場連携) admin page — the only screen that names both
     upstreams. Two-worlds palette: a warm DAITEC/Genba side, a cool
     Trusstor side, and a merged blue for the linked seam. Values not
     covered by the global palette live here, --pm-* prefixed. ────────── */

  /* Pane provenance tints (soft surface washes derived from --prov-daitec
     #ffb259 and --sidebar-accent #258693) + the darker text tones used for
     the pane eyebrow / connect glyph / stage-key label. */
  --pm-genba-soft:        rgb(255 178 89 / 9%);    /* Genba pane wash */
  --pm-genba-badge-bg:    rgb(255 178 89 / 10%);   /* existing-links genba badge */
  --pm-genba-text:        var(--status-for-review-text); /* #a36a16 pane eyebrow */
  --pm-genba-connect:     #c2861f;                 /* Genba connect-state glyph */
  --pm-genba-stage-key:   #b07315;                 /* bridge stage-side "GENBA" key */
  --pm-trusstor-soft:     rgb(37 134 147 / 7%);    /* Trusstor pane wash */
  --pm-trusstor-badge-bg: rgb(37 134 147 / 8%);    /* existing-links trusstor badge */

  /* Merged "linked" blue (derived from --prov-merged #9dbbff). Drives the
     linked chip, the armed bridge icon, and the armed rail glow. */
  --pm-linked-text:       #3a5bbf;                 /* linked chip / armed icon text */
  --pm-linked-chip-bg:    rgb(157 187 255 / 22%);  /* linked chip fill */
  --pm-linked-icon-bg:    rgb(157 187 255 / 18%);  /* armed bridge icon fill */
  --pm-linked-rail-glow:  rgb(157 187 255 / 30%);  /* armed rail box-shadow */

  /* Error toast — deep maroon surface with a light-salmon icon, distinct
     from the navy default toast. */
  --pm-toast-error-bg:   #5b1f1a;
  --pm-toast-error-icon: #ff9a8f;
  --pm-toast-sub:        rgb(255 255 255 / 60%);  /* mono sub-line on toast */
  --pm-toast-close:      rgb(255 255 255 / 55%);  /* dismiss glyph at rest */
  --pm-toast-close-hover: rgb(255 255 255 / 12%); /* dismiss hover background */

  /* Danger-solid button hover (darker than --color-error) + skeleton
     shimmer highlight band. */
  --pm-danger-solid-hover: #8f2a22;
  --pm-skeleton-highlight: #eef1f3;

  /* Progress Tracker table surface — OPAQUE (the sticky header/frozen column
     scroll over cells, so a translucent fill would show them through). */
  --tracker-surface: #fbfbfc;

  /* Crosshair hover — the hovered cell (lighter) and the marked cells (lighter
     still): a data cell marks its header+label; a header/label marks its whole
     column/row. The hit is kept saturated enough to read blue rather than a
     grey wash: at lower alpha it collides with the grey bar track (--tracker-
     bar-track) so the hovered floor bar's edge would vanish into the cell. */
  --tracker-crosshair: rgb(43 103 158 / 6%);
  --tracker-crosshair-hit: rgb(43 103 158 / 20%);

  /* Floor (rollup) rows are set apart by a thick top rule (no fill colour). */
  --tracker-rule: #aeb6c0;

  /* Progress-bar track behind a floor cell's rolled-up % fill. */
  --tracker-bar-track: #e4e7ec;

  /* Diagonal hatch stripe for empty cells (no activity in that area) — sets them
     apart from a real 0%. Paired with --tracker-surface as the base. */
  --tracker-empty-stripe: #eceef2;

  /* Progress Tracker cell tones — solid pastel fills (not translucent) */
  --tracker-complete-bg: #cdeeda;
  --tracker-complete-fg: #0d7a2f;
  --tracker-risk-bg: #fbe6bb;
  --tracker-risk-fg: #9a6a15;
  --tracker-blocked-bg: #f7cbd0;
  --tracker-blocked-fg: #c22f3d;

  /* Progress Tracker legend dots + RTLS-coupled accent — more saturated */
  --tracker-complete-dot: #4fc27f;
  --tracker-risk-dot: #f2b53d;
  --tracker-blocked-dot: #ef6b6b;
  --tracker-coupled: #22a7c9;

  /* Dependency direction chips in the activity headers: predecessor (upstream)
     amber, successor (downstream) blue. */
  --tracker-pred-fg: #b45816;
  --tracker-pred-bg: #fdecd2;
  --tracker-succ-fg: #1d4ed8;
  --tracker-succ-bg: #dce7fe;

  /* Full-fill area status cells (vivid): the whole cell is the status colour. */
  --tracker-status-planned-bg: #e4e7ec;
  --tracker-status-planned-fg: #475569;

  /* In-progress area cells use the same mid-blue as the floor rollup fill
     (--tracker-floor-progress) so a leaf cell reads as the same colour as its
     floor's progress bar in the same column. */
  --tracker-status-progress-bg: var(--tracker-floor-progress);
  --tracker-status-progress-fg: var(--white);
  --tracker-status-done-bg: #58c06a;
  --tracker-status-done-fg: #fff;
  --tracker-status-blocked-bg: #f37167;
  --tracker-status-blocked-fg: #fff;

  /* Floor rollup progress fill (two-tone, by %): 0% neutral, 1–99% a mid blue fill
     over the pale Scheduler-blue remainder, 100% green. The mid tone (not the deep
     --gantt-status-track-fg) keeps the navy % label legible over BOTH the fill and
     the pale track — the label sits at a fixed offset that can fall on either. */
  --tracker-floor-idle: #eef1f4;
  --tracker-floor-progress: #60a5fa;
  --tracker-floor-progress-track: var(--gantt-status-track-bg);
  --tracker-floor-done: #58c06a;

  /* Third-party brand marks (comms integrations), used ONLY to draw the
     vendors' logos. Official palette values, except Google Chat's two, which
     colour our own stand-in drawing of its mark. */
  --logo-google-chat:   #3fb36b;
  --logo-google-chat-light: #8fcdf4;
  --logo-slack-blue:    #36c5f0;
  --logo-slack-green:   #2eb67d;
  --logo-slack-red:     #e01e5a;
  --logo-slack-yellow:  #ecb22e;
  --logo-whatsapp:      #25d366;
  --logo-teams-light:   #7b83eb;
  --logo-teams:         #5059c9;
  --logo-teams-dark:    #4b53bc;

  /* D-ORCA's own mark (ui/OrcaLogo) — the artwork's exact colours: flag-red
     sun, pure-black orca (not --navy, which would grey the silhouette). */
  --logo-orca-sun:      #bc002d;
  --logo-orca-ink:      #000;

  /* SLS Site Map — the six fixed area colours (spec §5). Keys mirror the
     backend enum; components resolve them via AREA_COLOR_TOKEN. Polygons paint
     these as flat fills at use-site fill-opacity (spec §4.0 — the FloorSvg
     highlight treatment, per-area colour, no strokes). */
  --sitemap-blue:   var(--info);

  /* Same hue as --tracker-pred-fg (kept as its own token so Site Map's area
     palette can move independently of the ProgressTracker legend). */
  --sitemap-orange: var(--tracker-pred-fg);
  --sitemap-teal:   var(--sidebar-accent);
  --sitemap-green:  var(--color-success);

  /* Same hue as --tracker-blocked-fg — see --sitemap-orange's note above. */
  --sitemap-red:    var(--tracker-blocked-fg);
  --sitemap-slate:  #64748b;

  /* Full-stage wash while a draw/place tool is armed — dims the blueprint,
     areas, and chips beneath the draft layer. Lighter than the backoffice
     `react-lasso-select` tool's own 50% — D-ORCA's blueprints render with a
     lighter stroke, and 50% read as too dark against them (user judgment). */
  --sitemap-draw-dim: rgb(0 0 0 / 35%);

  /* Page tour — the bulb's own pale-cyan palette (spec §Look). Deliberately
     its own family rather than the app surfaces: the bulb floats over the
     live page and has to read as "not part of it". Everything else the tour
     paints reuses the app tokens (--navy, --blue, --shadow-popover). */
  --tour-bulb-bg:       #dcf3ff;
  --tour-bulb-edge:     #a9e2ff;
  --tour-bulb-text:     #000;
  --tour-accent:        #0a7fb5;
  --tour-muted:         #35424f;
  --tour-caption-bg:    #f2faff;
  --tour-hint-border:   #7fd0f8;

  /* The dim sheet, and the two glow radii of the ring around the hole
     (the wide one is the pulse's outer reach on an action step). */
  --tour-sheet:          rgb(20 27 36 / 74%);
  --tour-ring-glow:      rgb(46 191 253 / 35%);
  --tour-ring-glow-soft: rgb(46 191 253 / 12%);

  /* Hover for the bulb's primary button — --navy lifted, the tour's only
     navy interaction state. */
  --tour-primary-hover: #2f3b4a;

  /* Monitor replay (Site Time Machine) track markers. The other kinds reuse
     --red / --accent-attention / --accent-success / --g500. */
  --replay-marker-committed: #7c5cff;
  --replay-marker-peak:      var(--bar-blue);
}

body[data-sidebar-collapsed='true'] {
  --sidebar-w: var(--sidebar-w-collapsed);
}

@media (width <= 1600px) {
  :root {
    --monitor-leftrail-w: 340px;
  }
}
body {
  font-family: var(--f-body);
  font-feature-settings: 'ss01', 'cv11';
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--navy);
  background: var(--g50);
}

/* ::selection { background: var(--turq); color: var(--navy); } */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Recharts attaches `tabIndex=0` to the outer wrapper, the SVG surface,
   and every series group so keyboard users can navigate the bars /
   lines. For charts that don't expose meaningful keyboard navigation,
   the focus ring is visual noise; opt-in via `data-chart-no-kb-nav` on
   the chart's container div (also use `accessibilityLayer={false}` on
   the chart itself to remove the SVG surface's tabIndex). Charts WITHOUT
   the data attribute retain the default focus ring — keyboard users
   still get visible focus on charts that genuinely support it. */
[data-chart-no-kb-nav] .recharts-wrapper:focus,
[data-chart-no-kb-nav] .recharts-wrapper *:focus,
[data-chart-no-kb-nav] .recharts-wrapper:focus-visible,
[data-chart-no-kb-nav] .recharts-wrapper *:focus-visible,
[data-chart-no-kb-nav] .recharts-surface:focus,
[data-chart-no-kb-nav] .recharts-surface *:focus,
[data-chart-no-kb-nav] .recharts-surface:focus-visible,
[data-chart-no-kb-nav] .recharts-surface *:focus-visible {
  outline: none;
}