/* Main navigation (main-navigation.postcss:11-56) */
.desktop-menu { background:var(--color-bg); border-bottom:var(--stroke-1) solid var(--color-border); position:relative; z-index:var(--z-nav); }
/* top:100% = bottom edge of the entire navigation (even when it wraps), matching
   the drawer. Otherwise the overlay grays out a wrapped second navigation row
   and leaves a gap above the drawer. */
.desktop-menu__overlay { position:absolute; top:100%; right:0; bottom:0; left:0; z-index:var(--z-local-control); height:120vh;
  background:var(--scrim-navigation);
  opacity:1; pointer-events:auto; transition:opacity var(--duration-slow) var(--ease-in-out); }
.desktop-menu__overlay.hidden { height:0; overflow:hidden; opacity:0; pointer-events:none; }
.desktop-menu .main-navigation, .mobile-menu .main-navigation { border-bottom:0; }
.main-navigation { width:100%; background:var(--color-bg); border-bottom:var(--stroke-1) solid var(--color-border); position:relative; }
/* PARTIALLY RETIRED DEVIATION (Review 2026-07, nav/l1-1/l1-2 → 2026-08
   alignment D11): the wrap-instead-of-More-flyout decision STAYS (a More
   flyout would need width measurement on every resize), but the denser
   0.7rem rhythm existed for NINE L1 entries and the row now carries five —
   which fit at 1024 on CD's own 1rem rhythm. Padding, negative margin and
   underline insets are back on CD's `px-4 / -ml-4 / inset-4`
   (main-navigation.postcss:16,29,38), matching the tenant portal. */
.main-navigation > ul { list-style:none; display:flex; flex-wrap:wrap; margin-left:calc(-1 * var(--sp-4)); min-height:var(--sp-14); }
@media (max-width:1023.98px){ .desktop-menu { display:none; } }
@media (min-width:1280px){ .main-navigation > ul { min-height:var(--sp-16); } }
@media (min-width:1920px){ .main-navigation > ul { min-height:var(--sp-20); } }
.main-navigation > ul > li > a,
.main-navigation > ul > li > button { position:relative; display:flex; align-items:center; gap:var(--sp-2); color:var(--color-text);
  height:100%; min-height:var(--sp-14); padding:var(--sp-4); font:inherit; font-size:var(--text-base); line-height:var(--lh-tight); white-space:nowrap;
  background:none; border:0; cursor:pointer; text-decoration:none; transition:color var(--duration-fast),box-shadow var(--duration); }
@media (min-width:1280px){ .main-navigation > ul > li > a, .main-navigation > ul > li > button { min-height:var(--sp-16); } }
@media (min-width:1920px){ .main-navigation > ul > li > a, .main-navigation > ul > li > button { min-height:var(--sp-20); } }
.main-navigation > ul > li > a::after,
.main-navigation > ul > li > button::after { content:""; position:absolute; left:var(--sp-4); right:var(--sp-4); bottom:0; height:var(--stroke-3);
  background:transparent; transition:background var(--duration-fast); }
.main-navigation > ul > li > a:hover,
.main-navigation > ul > li > button:hover { color:var(--color-primary-600); text-decoration:none; }
.main-navigation > ul > li > a:hover::after,
.main-navigation > ul > li > button:hover::after,
.main-navigation > ul > li > a.active::after,
.main-navigation > ul > li > button.active::after,
.main-navigation > ul > li > .clicked::after { background:var(--color-primary-500); }
/* CD main-navigation.postcss:42-44 `focus-visible:ring-inset`: the entry fills
   the bar height, so the ring lies inside instead of cutting the bar edge and
   neighboring entries. */
.main-navigation > ul > li > a:focus-visible,
.main-navigation > ul > li > button:focus-visible { outline-offset:calc(-1 * var(--stroke-2)); }
/* CD marks the active L1 entry ONLY with the underline (::after), not bold
   type (main-navigation.postcss:46); on mobile only the 3px bar conveys state
   (navy.postcss:18-23, where CD likewise uses no bold). */
.main-navigation:has(.navy__has-children[aria-expanded="true"]) [data-nav].active::after { background:transparent; }
.main-navigation:has(.navy__has-children[aria-expanded="true"]) .clicked::after { background:var(--color-primary-500); }
/* `!important` remains here, contrary to the review's initial assessment. The
   reason was verified: `[data-menu]` is wired across the ENTIRE shell
   (shell.js:374), so `.clicked` can also appear in the mobile menu, while
   `.mobile-menu .main-navigation > ul > li > button:hover` (0,4,2, later in
   the sheet) beats this rule (0,2,2) in both specificity and order. The open
   branch would turn gray rather than white on hover. The alternative would be
   to tear the rule out of its navigation block. */
.main-navigation > ul > li > .clicked { background:var(--color-bg) !important; position:relative; z-index:var(--z-nav-active); box-shadow:var(--shadow-2xl);
  clip-path:inset(-50px -50px calc(-1 * var(--stroke-1)) -50px); }
.main-navigation--desktop > ul > li > .navy__has-children > .icon { display:none; }

/* Desktop drawer (desktop-menu.postcss:9-19 + navy.postcss + menu.postcss) */
/* The level-0 surface is ≈730px tall and opens at y≈252: at 1440x800 and
   1366x768 the last three entries were unreachable because overflow:hidden
   applied without inner scrolling. CD caps a flyout against the viewport
   (top-bar.postcss:101-108, max-h-[60vh]). overflow-x remains hidden. */
.desktop-menu__drawer { position:absolute; left:0; top:100%; width:450px; max-width:calc(100vw - var(--sp-6));
  padding:var(--sp-16) var(--sp-8) var(--sp-8); z-index:var(--z-drawer); background:var(--color-bg); overflow:hidden;
  max-height:calc(100vh - var(--shell-top, 14rem) - var(--sp-6)); overflow-y:auto; overscroll-behavior:contain;
  box-shadow:var(--shadow-2xl); opacity:1; animation:navMenuIn var(--duration) var(--ease-out); }
/* The drawer's x is set inline by positionPanel (ui/shell/header.js): CD's
   Navy.js places it under its trigger pulled left by the `.with-offset`
   step (16/32/80 — desktop-menu.postcss:36-38), so the drawer's padding
   leaves its rows flush with the trigger's text. Same rule as the tenant
   portal (2026-08 alignment D12). */
@media (min-width:1280px){ .desktop-menu__drawer { width:650px; padding:var(--sp-20) var(--sp-12) var(--sp-12); } }
@media (min-width:1920px){ .desktop-menu__drawer { width:850px; padding:var(--sp-24); } }
/* Only a subtle slide-in; the hidden attribute controls visibility. No opacity
   in the keyframe, or the drawer remained translucent depending on fill mode
   and timing. DELIBERATE REDUCTION (Review 2026-07, nav/drawer-4): CD also
   animates closing (desktop-menu.postcss:19-34, opacity+height through a class).
   Here `hidden` closes immediately; a transition would require class-based
   instead of attribute-based control in shell.js. */
@keyframes navMenuIn { from { transform:translateY(calc(-1 * var(--sp-1-5))); } to { transform:translateY(0); } }
/* Close button: position and icon size follow desktop-menu.postcss:75-88
   (lg:top-4 right-0 → xl:top-6 right-4 → 3xl:top-8 right-20; icon h-5 = 1.25rem)
   instead of the drawer corner (top/right:0) with an undersized icon (0.75rem).
   Ink = CD's menu__action-btn (menu.postcss:116-122): text-500 at rest, text-600
   on secondary-50 during hover, matching .navy__back beside it. */
.desktop-menu__close { position:absolute; top:var(--sp-4); right:0; display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); color:var(--color-text-500); background:none; border:0; cursor:pointer; font:inherit; font-size:var(--fs-sm); }
.desktop-menu__close:hover { color:var(--color-text-600); background:var(--color-secondary-50); }
@media (min-width:1280px){ .desktop-menu__close { top:var(--sp-6); right:var(--sp-4); } }
@media (min-width:1920px){ .desktop-menu__close { top:var(--sp-8); right:var(--sp-20); font-size:var(--fs-base); } }
.navy { position:relative; }
/* CD navy multi-level (navy.postcss): level 0 = services + domain branches;
   level 1 = children of a domain. A robust display switch replaces the slider
   transform (width:200% + flex + translateX fails to render glyphs in some
   browsers). Only the active level participates in layout; the other is
   display:none and absent from the accessibility tree. */
.navy--drill { position:relative; }
.navy__slider { display:block; }
.navy__pane[data-pane="1"] { display:none; }
.navy--drill[data-level="1"] .navy__pane[data-pane="0"] { display:none; }
.navy--drill[data-level="1"] .navy__pane[data-pane="1"] { display:block; animation:navyDrillIn var(--duration-slowest) var(--ease-out); }
/* Fade, not a translateX slide: a transformed pane becomes a containing block,
   which would re-anchor the absolutely-positioned .navy__back to the pane instead
   of the drawer's top row. Opacity has no such side effect.
   Timing var(--duration-slowest): CD's level change runs 600ms ease-in-out
   (navy.postcss:97-98); 700ms is the nearest token step, while 300ms read as a
   foreign motion idiom (nav/drawer-5). */
@keyframes navyDrillIn { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce){ .navy--drill[data-level="1"] .navy__pane[data-pane="1"] { animation:none; } }
/* The branch button must align exactly like the overview row (<a>); otherwise
   the user-agent default padding on <button> shifts text to the right. */
.navy-branch { background:none; border:0; padding:0; margin:0; text-align:left; font:inherit; cursor:pointer; color:inherit; }
/* CD navy.postcss:54-58: the back button uses menu__action-btn anatomy
   (menu.postcss:109-123: px-4 py-3, text-500, hover secondary-50/text-600), like
   the close button sharing its header row. The former primary link color read
   as a navigation link rather than a menu action. */
.navy__back { display:inline-flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2); padding:var(--sp-3) var(--sp-4);
  min-height:var(--target-min); background:none; border:0; font:inherit; font-size:var(--fs-sm);
  color:var(--color-text-500); cursor:pointer; }
.navy__back:hover { color:var(--color-text-600); background:var(--color-secondary-50); }
.navy__level-0 { list-style:none; margin:0; padding:0; }
/* CD navy.postcss:69-73: the panel title is `menu__item--title`: base size,
   INHERITED ink, row indentation px-4 with lg:px-0 (menu.postcss:68-71); only
   bold remains. The former fs-lg/secondary-700 version was a separate voice.
   Size is the RESPONSIVE body step (`--text-base` 16/18 @1280/20 @1920) —
   CD's menu title declares no size and inherits `.text--base`; the fixed
   16 px sat 2 px under the tenant portal's drawer heading at ≥1280
   (2026-08 alignment D30). */
.navy__title { display:block; margin:0 0 var(--sp-2); padding:0 var(--sp-4); font-size:var(--text-base); font-weight:var(--fw-bold);
  line-height:var(--lh-tight); color:inherit; cursor:default; }
@media (min-width:1024px){ .navy__title { padding:0; } }
/* Item 4.10 reverted: CD's drawer has no section titles. The class
   `menu__item--title` exists in menu.postcss, but no CD component applies it;
   it does not belong to the drawer pattern. The list remains flat. */
/* Navy menu rows use CD's fixed row size (menu.postcss:24 menu__item--small =
   text-sm 3xl:text-base), never the responsive body ramp — otherwise the flyout
   rows balloon at ≥1280px. */
.navy .menu__item { font-size:var(--fs-sm); }
/* navy.postcss:9-16 puts row padding on the INTERACTIVE element. We put it on
   <li>, leaving anchors/buttons at text height: rows looked 44px tall, but the
   hit area and hover highlight covered only the ~28px text line (measured:
   530x28 for all ten branch buttons in the desktop drawer). About 16px of each
   row was dead space under the pointer. */
.navy .menu__item { padding:0; }
.navy .menu__item > .menu__item__flex,
.navy .menu__item > .navy-branch { padding:var(--sp-3) var(--sp-4); min-height:var(--target-min); box-sizing:border-box; }
/* CD row ramp (navy.postcss:13-15: menu__item px-4 py-3, px-3 from xl). The
   former --condensed detour is gone: shell.js no longer emits the modifier;
   in CD, --condensed is a DISTINCT variant (menu.postcss:87-93). */
@media (min-width:1280px){
  .navy .menu__item > .menu__item__flex,
  .navy .menu__item > .navy-branch { padding:var(--sp-3); }
}
.navy .menu__item:hover { background:none; }
.navy .menu__item > .menu__item__flex:hover,
.navy .menu__item > .navy-branch:hover { background:var(--color-secondary-50); }
@media (min-width:1920px){ .navy .menu__item { font-size:var(--fs-base); } }
/* Desktop: the drill-down back button shares the drawer's top row with the close
   button (CD navy.postcss:56: lg:absolute -top-12 -left-5, mirroring
   desktop-menu__close top-right). On mobile it stays inline atop the pane. */
@media (min-width:1024px){
  .desktop-menu__drawer .navy,
  .desktop-menu__drawer .navy--drill { position:static; }
  /* CD's lg:-left-5 resolved against 2rem drawer padding = .75rem from the edge. */
  .desktop-menu__drawer .navy__back { position:absolute; top:var(--sp-4); left:var(--sp-3); margin:0; }
}
@media (min-width:1280px){ .desktop-menu__drawer .navy__back { top:var(--sp-6); left:var(--sp-4); font-size:var(--fs-sm); } }
@media (min-width:1920px){ .desktop-menu__drawer .navy__back { top:var(--sp-8); left:var(--sp-20); font-size:var(--fs-base); } }
/* Menu rows (menu.postcss:5-60) — CD's canonical list-row anatomy, as used by
   the live intranet: li.menu__item > a.menu__item__flex > label + icon. */
.menu { list-style:none; }
.menu a, .menu a:hover { color:inherit; text-decoration:none; }
.menu__item { display:flex; align-items:center; justify-content:space-between; position:relative;
  padding:var(--sp-3) var(--sp-4); cursor:pointer; transition:color var(--duration-fast), background-color var(--duration-fast); }
.menu__item:hover { background:var(--color-secondary-50); }
.menu__item--condensed { padding:var(--sp-3); }
.menu__item--border { border-bottom:var(--stroke-1) solid var(--color-secondary-100); }
.menu__item--active::after { content:""; display:block; position:absolute; top:0; bottom:0; left:0;
  width:var(--stroke-3); background:var(--color-primary-500); }
.menu__item__flex { display:flex; width:100%; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.menu__item__icon { flex:none; width:var(--sp-6); height:var(--sp-6); color:var(--color-text-muted); }
@media (min-width:768px){ .menu__item__icon { width:var(--sp-7); height:var(--sp-7); } }
.menu__item:hover .menu__item__icon { color:var(--color-primary-600); }
/* CD menu.postcss:21 `focus:text-primary-600`: keyboard focus receives the same
   ink feedback as hover, in addition to the global ring. */
.menu__item a:focus-visible,
.navy .menu__item > .navy-branch:focus-visible { color:var(--color-primary-600); }

/* Mobile menu (mobile-menu.postcss:5-20) — an overlay drawer, opened by the burger */
.mobile-menu { position:absolute; z-index:var(--z-content); width:100%; height:0;
  visibility:hidden; opacity:0; overflow:hidden; background:var(--color-bg);
  box-shadow:var(--shadow-2xl); transition:opacity var(--duration-slowest); }   /* CD mobile-menu.postcss:10 duration-700 */
@media (min-width:1024px){ .mobile-menu { display:none; } }
.body--mobile-menu-is-open .mobile-menu { height:calc(100vh - var(--shell-top, var(--sp-32)));
  visibility:visible; opacity:1; overflow-y:auto; }
/* CD slide (global.postcss:34-38): the page moves up by the top-bar height; with
   the menu open, white header + drawer fill the whole screen. shell.js measures
   --topbar-h/--shell-top on opening. Transform makes body the containing block
   for all fixed descendants; banner/back-to-top are hidden while the menu is
   open anyway. */
.body--mobile-menu-is-open { overflow:hidden;
  height:calc(100vh + var(--topbar-h, var(--sp-12)));
  transform:translateY(calc(-1 * var(--topbar-h, var(--sp-12)))); }
/* With the menu open, NO second search affordance in the header (search lives
   in the panel) and no floating notice strip above the menu. */
@media (max-width:1023.98px){
  .body--mobile-menu-is-open .search--main { display:none; }
  .body--mobile-menu-is-open .notification-banner--fixed { display:none; }
}
/* Search row at the top of the panel: CD search--mobile (white field, shadow). */
.mobile-menu__search { padding:var(--sp-3) var(--sp-4); background:var(--color-bg);
  border-bottom:var(--stroke-1) solid var(--color-secondary-100); }
.mobile-menu__search-form { position:relative; display:flex; }
.mobile-menu__search input { width:100%; min-height:var(--input-h);
  padding-right:var(--sp-12); box-shadow:var(--shadow-2xl); }
.mobile-menu__search-submit { position:absolute; top:0; right:0; bottom:0; width:var(--sp-12); }
.mobile-menu ul { list-style:none; }
.mobile-menu .main-navigation { border-bottom:0; }
.mobile-menu .main-navigation > ul { flex-direction:column; margin-left:0; min-height:0; }
/* As a descendant selector (0,2,2), `li > a` also reached into the open drawer
   and stamped a SECOND white 44px block with its own padding and hairline INSIDE
   the gray navy row. Measured row height became 74px instead of 46px, producing
   visually indented floating cards with doubled lines. With the explicit child
   path `> ul > li >`, the rule cannot reach the drawer (CD likewise applies row
   anatomy only to the top level, mobile-menu.postcss:150-160). This must stay
   paired with the padding move below or drawer targets fall to 28px. */
.mobile-menu .main-navigation > ul > li > a,
.mobile-menu .main-navigation > ul > li > button,
.mobile-menu .meta-navigation li > a,
.mobile-menu .meta-navigation li > button,
.mobile-menu .meta-navigation .meta-navigation__name,
.mobile-menu .top-bar-navigation--mobile li > a {
  display:flex; align-items:center; justify-content:space-between; width:100%; min-height:var(--target-min);
  padding:var(--sp-3) var(--sp-4); position:relative; font:inherit; font-size:var(--fs-sm); text-align:left;
  border:0; border-bottom:var(--stroke-1) solid var(--color-secondary-100); cursor:pointer; text-decoration:none;
  transition:background var(--duration-fast); }
.mobile-menu .main-navigation > ul > li > a,
.mobile-menu .main-navigation > ul > li > button { background:var(--color-bg); color:var(--color-text); }
.mobile-menu .main-navigation > ul > li > a::after,
.mobile-menu .main-navigation > ul > li > button::after { display:none; }
.mobile-menu .main-navigation > ul > li > a:hover,
.mobile-menu .main-navigation > ul > li > button:hover { background:var(--color-secondary-50); color:var(--color-text); }
/* No bold on the active row: CD's navy marks mobile state ONLY with the 3px bar
   (navy.postcss:18-23); a 700 weight also shifted line length, while CD's
   "bold" is a family switch at 400 (nav/mob-4). */
.mobile-menu .main-navigation .active::before { content:""; position:absolute; left:0; top:0; bottom:0;
  width:var(--stroke-3); background:var(--color-primary-500); }
/* app.css set display:inline-block here without a size, leaving icon--sm at 12px
   (CD: 20px, navy.postcss:47-51), and the chevron never rotated on disclosure.
   CSS half of Item 4.6; belongs in the same block as above. */
.mobile-menu .navy__has-children .icon { display:inline-block;
  color:var(--color-text-muted); transition:transform var(--duration); }
.mobile-menu .navy__has-children[aria-expanded="true"] .icon { transform:rotate(90deg); }
@media (prefers-reduced-motion: reduce){ .mobile-menu .navy__has-children .icon { transition:none; } }
/* Close, back and drill-down are one 20px navigation-glyph tier. */
:is(.desktop-menu__close, .navy__back, .mobile-menu .navy__has-children) .icon {
  width:var(--sp-5); height:var(--sp-5); align-self:center; vertical-align:middle;
}
/* DELIBERATE DEVIATION from CD (Review 2026-07, nav/mob-1): CD's mobile menu
   shifts WHOLE level panels with translateX (navy.postcss:79-99, 600ms), which
   assumes one navy tree. Our shell has a dedicated drawer per L1 entry, so
   drill-down opens as an inline accordion with tinted indentation. Adopting
   CD's slider would mean restructuring the entire shell's drawer anatomy;
   cost/benefit is documented in the review. */
.mobile-menu__drawer { position:static; width:100%; padding:0; background:var(--color-secondary-50); }
/* Hide only the drawer close button and level-0 title (redundant with its
   trigger); the branch title on level 1 must remain visible. */
.mobile-menu__drawer .desktop-menu__close,
.mobile-menu__drawer .navy__pane[data-pane="0"] .navy__title { display:none; }
/* Indentation moves with padding onto the interactive element (Item 2.9b). */
.mobile-menu__drawer .menu__item { padding-left:0; background:var(--color-secondary-50); }
.mobile-menu__drawer .menu__item > .menu__item__flex,
.mobile-menu__drawer .menu__item > .navy-branch { padding-left:var(--sp-9); }
.mobile-menu .meta-navigation { display:block; }
.mobile-menu .meta-navigation ul { display:block; }
.mobile-menu .meta-navigation li > a,
.mobile-menu .meta-navigation li > button,
.mobile-menu .meta-navigation .meta-navigation__name { background:var(--color-secondary-50); color:var(--color-text); }
.mobile-menu .meta-navigation li > a:hover,
.mobile-menu .meta-navigation li > button:hover { background:var(--color-secondary-100); }
/* The signed-in entry is ONE <li> holding a name, a vertical rule and the
   sign-out button. That anatomy belongs to the desktop meta bar, where the three
   sit side by side. In the drawer CD makes every meta entry a full-width row
   (mobile-menu.postcss:126-134), and only two of the three parts matched a
   selector here: the button became a 100%-wide row while the name stayed an
   inline cluster, so they fought inside one flex line and pushed the row past
   the drawer edge. Here the same <li> is a COLUMN of rows, so name and action
   read like the two meta rows above them. The rule is then the
   row divider each child already draws, not a glyph between them.
   German UI term: `Notfall & Vorfälle` / `Hilfe`. */
.mobile-menu .meta-navigation .meta-navigation__user {
  display:flex; flex-direction:column; align-items:stretch; gap:0; padding-inline:0; min-height:0; }
.mobile-menu .meta-navigation .meta-navigation__user > .separator--vertical { display:none; }
/* The name IS a control since alignment D43 — a link to #/profile, as in the
   tenant portal's drawer. As an <a> it takes the shared row anatomy and hover
   from the `li > a` rules above; only the icon gap and left alignment stay
   local. */
.mobile-menu .meta-navigation .meta-navigation__name { gap:var(--sp-2); justify-content:flex-start; }
/* No padding-bottom: it painted an empty dark strip below the last row (user
   finding). Rows carry their own surface. */
.mobile-menu .top-bar-navigation--mobile { background:var(--color-secondary-500); }
.mobile-menu .top-bar-navigation--mobile li > a { background:var(--color-secondary-500); color:var(--color-text-negative);
  border-bottom-color:var(--color-secondary-300); }
.mobile-menu .top-bar-navigation--mobile li > a:hover { background:var(--color-secondary-700); color:var(--color-text-negative); }

/* Detail header bar: back link left, share bar right, one row.
   CD pairs `.back-bar` and `.share-bar`, each `mt-5 lg:mt-4`
   (share-bar.postcss:5-13) — the bar sits ~20/16px under the breadcrumb, NOT a
   section's 80px away from it. Where the bar opens a `.container.section`, that
   section's top padding lands ABOVE the bar and pushed it 80px down the page,
   leaving a hole between the trail and the back button (measured 340→420 at
   1440). The rule below hands that gap back to the bar at CD's value; the
   section keeps its rhythm BELOW, via the bar's own margin-bottom. */
.detail-bar { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  margin-top:var(--sp-5); margin-bottom:var(--sp-6); }
@media (min-width:1024px){ .detail-bar { margin-top:var(--sp-4); margin-bottom:var(--sp-10); } }
/* `:has()` rather than a class on every caller: the bar is rendered by
   C.detailBar into whatever wrapper a page already has, and the correction
   belongs to the pairing, not to fourteen call sites. */
.container.section:has(> .detail-bar:first-child) { padding-top:0; }
.detail-bar .back-link-row { padding-bottom:0; }
/* Keep CD's `-mr-3` (share-bar.postcss:7) inside the bar: the buttons' own
   padding is pulled back over the container edge so the ICON — not the
   invisible hit area — lines up with the text column. `margin:0` here used to
   drop it, which left the icons inset against every other row on the page and
   12px away from where the tenant portal put them. */
.detail-bar .share-bar { margin:0 calc(-1 * var(--sp-3)) 0 0; }
/* The detail-bar owns the gap to the following hero (its margin-bottom); the hero
   must not add its own top padding on top of that, or the title floats too low. */
.detail-bar + .hero { padding-top:0; }
/* Share bar (share-bar.postcss:5-16): right-aligned after the breadcrumb. */
.share-bar { display:flex; flex-direction:row-reverse; align-items:flex-end; margin:var(--sp-5) calc(-1 * var(--sp-3)) 0 0; }
@media (min-width:1024px){ .share-bar { margin-top:var(--sp-4); } }
.share-container { display:flex; gap:var(--sp-1); }
.share-bar__btn { --control-icon-size:var(--sp-7); min-width:var(--target-min); min-height:var(--target-min); justify-content:center; color:var(--color-secondary-700); }
.share-bar__btn:hover { color:var(--color-primary-600); background:none; }
/* These are .btn--bare buttons, so `.btn .icon { width:1.4em }` (0,2,0) would
   clobber the icon-size class and leave the icons ~1.4em. Re-assert CD's ShareBar
   size (SvgIcon size="xl" → icon--xl: h-7 md:h-8 lg:h-9) at higher specificity.
   Masked icons need an explicit width (see .icon note), so width tracks height. */
.share-bar .share-bar__btn .icon { width:var(--control-icon-size); height:var(--control-icon-size); align-self:center; vertical-align:middle; }
@media (min-width:768px){ .share-bar__btn { --control-icon-size:var(--sp-8); } }
@media (min-width:1024px){ .share-bar__btn { --control-icon-size:var(--sp-9); } }
@media print { .share-bar { display:none; } }