/* /Groups/GroupFormPanel.razor.rz.scp.css */
/*
  Task 193, ADR-0116: the panel shell (position, sizing, backdrop, animation, close button) moved to
  ModalOverlay.razor.css; only what is genuinely specific to this panel's own content stays here.

  "Manage members" and "Delete" declare .btn-ghost/.btn-ghost-destructive (buttons.css, task 185's
  own review round) for colour, shape, cursor and hover — the same rules PlaceDetailPanel.razor.css's
  own Edit/Delete/Move now reach for instead of hand-rolling. Only this trigger's own position in the
  panel varies component to component, so only its margin stays here.
*/
.group-form-manage-members[b-jrmtosrefk] {
	margin: var(--space-medium) 0 0;
}

.group-form-delete[b-jrmtosrefk] {
	margin: var(--space-small) 0 0;
}

/*
  Task 221, ADR-0136: delete is now a stacked ConfirmationModal, styled entirely by
  ModalOverlay.razor.css and buttons.css — the .group-form-delete-confirm rules that used to live here
  are gone rather than left unused.
*/
/* /Groups/GroupMemberRow.razor.rz.scp.css */
.member-row[b-eud80f4v32] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-small);
	padding: var(--space-small) 0;
	border-bottom: 1px solid var(--colour-border);
}

.member-info[b-eud80f4v32] {
	display: flex;
	align-items: center;
	gap: var(--space-small);
}

.member-role-badge[b-eud80f4v32],
.member-status-badge[b-eud80f4v32] {
	font-size: var(--font-size-small);
	color: var(--colour-text-muted);
	border: 1px solid var(--colour-border);
	border-radius: var(--radius);
	padding: 0 var(--space-small);
}

.member-status-pending[b-eud80f4v32] {
	color: var(--colour-danger);
	border-color: var(--colour-danger);
}

.member-actions[b-eud80f4v32],
.member-confirm[b-eud80f4v32] {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-small);
}

.member-actions select[b-eud80f4v32],
.member-actions button[b-eud80f4v32],
.member-confirm button[b-eud80f4v32] {
	font: inherit;
	font-size: var(--font-size-small);
}

/*
  Unlike every other <select> in the application (forms.css's own .field select), this one carried
  no explicit styling at all — left to the browser's own UA chrome, which meant no declared token
  for ColourContrastTests to check and no declared boundary for WCAG 1.4.11 to be judged against
  either way (found in review of PR #102, task 167). --colour-control-border, not --colour-border,
  for the same reason forms.css gives its own fields: this select's background is already
  --colour-surface, so the border is the only cue to where it is.
*/
.member-actions select[b-eud80f4v32] {
	color: var(--colour-text);
	background-color: var(--colour-surface);
	border: 1px solid var(--colour-control-border);
	border-radius: var(--radius);
	padding: var(--space-small);
}

.member-confirm[b-eud80f4v32] {
	color: var(--colour-danger);
}
/* /Groups/GroupMembersPanel.razor.rz.scp.css */
/*
  Task 193, ADR-0116: the panel shell (position, sizing, backdrop, animation, close button) moved to
  ModalOverlay.razor.css; only what is genuinely specific to this panel's own content stays here.
*/
.invite-section[b-amyqaap1te],
.roster-section[b-amyqaap1te] {
	margin-top: var(--space-large);
}

.invite-section h3[b-amyqaap1te],
.roster-section h3[b-amyqaap1te] {
	font-size: var(--font-size-body);
	margin-bottom: var(--space-small);
}

.member-list[b-amyqaap1te] {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* /Layout/Drawer.razor.rz.scp.css */
/*
  64rem: a literal, not a token — a media query condition cannot read a custom property (ADR-0027),
  and this is also the exact number Drawer.razor.cs asks JavaScript to match on first render. app.css's
  own .page-content rule carries the same literal too (task 172), and since task 193 so does
  OverlayBackdrop.razor.css's own HideAboveWideViewport rule, which is what now hides the drawer's own
  narrow-viewport scrim above this breakpoint (moved there with the rest of the backdrop, ADR-0116) —
  four places now carry this comment and this number, move one, move all four.
*/

.drawer-toggle[b-byi8st7fot] {
	position: fixed;
	top: var(--space-medium);
	left: var(--space-medium);
	/* calc(var(--z-header) + 1) (task 248, ADR-0162), not the bare token any more — ADR-0156 put the
	   toggle on the same rung as .drawer below, and equal z-index hands paint order to DOM order:
	   .drawer renders after this button in the markup, so the open drawer painted over its own toggle
	   and the menu could not be closed on desktop. This restores the strict ordering ADR-0059 always
	   had (calc(var(--z-drawer) + 1) against the drawer's own --z-drawer), one rung above .drawer at
	   the new token instead of the old one, so the toggle is always clickable while the drawer is
	   open. See ADR-0162 for why review's own "one rung for both" reasoning still stood for .drawer
	   staying above PlaceDetailPanel, but not for the toggle being level with .drawer itself. */
	z-index: calc(var(--z-header) + 1);
	display: grid;
	place-items: center;
	width: var(--control-size);
	height: var(--control-size);
	padding: 0;
	border: none;
	border-radius: var(--radius);
	background-color: var(--colour-surface);
	box-shadow: 0 1px 4px var(--colour-shadow);
	cursor: pointer;
}

.drawer-toggle:hover[b-byi8st7fot],
.drawer-toggle:focus-visible[b-byi8st7fot] {
	background-color: var(--colour-surface-hover);
}

/*
  A hand-drawn burger rather than an image asset or an icon font, in keeping with ADR-0027's "no
  framework": three bars built from one element's own background plus its two pseudo-elements. It
  carries `aria-hidden`, because the state it represents — open or closed — is already spoken by the
  button's visually-hidden label and its `aria-expanded`; the icon is decoration on top of that, not
  a second source of truth.
*/
.drawer-toggle-icon[b-byi8st7fot] {
	display: block;
	width: 1.25rem;
	height: 2px;
	background-color: var(--colour-text);
}

.drawer-toggle-icon[b-byi8st7fot]::before,
.drawer-toggle-icon[b-byi8st7fot]::after {
	content: "";
	display: block;
	width: 1.25rem;
	height: 2px;
	background-color: var(--colour-text);
}

.drawer-toggle-icon[b-byi8st7fot]::before {
	transform: translateY(-6px);
}

.drawer-toggle-icon[b-byi8st7fot]::after {
	transform: translateY(4px);
}

.drawer[b-byi8st7fot] {
	position: fixed;
	inset: 0 auto 0 0;
	/* --z-header (task 244, ADR-0156), not a lower rung of its own any more — this used to sit at
	   --z-drawer, below PlaceDetailPanel, which is exactly the defect Rob reported: the open drawer's
	   own content (this element's own nav links, PlaceAccordion, "Add group") painted over by the
	   panel wherever the two overlapped on a narrow viewport (--drawer-width: min(20rem, 85vw) against
	   the panel's own similar width, well below the 64rem breakpoint). This reverses ADR-0059's own
	   original choice, which put the panel above this element specifically so an open drawer could
	   never hide it — that property is deliberately given up here; see ADR-0156's own Consequences for
	   the trade. Not the same rung as .drawer-toggle any more either (task 248, ADR-0162): sharing one
	   token left paint order between the two of them to DOM order, which buried the toggle under this
	   element whenever both were open — the toggle now sits one rung above, at
	   calc(var(--z-header) + 1), strictly, the same way it always stood strictly above --z-drawer
	   before ADR-0156. */
	z-index: var(--z-header);
	width: var(--drawer-width);
	display: flex;
	flex-direction: column;
	gap: var(--space-medium);
	padding: var(--content-clearance) var(--space-medium) var(--space-medium);
	background-color: var(--colour-surface);
	color: var(--colour-text);
	box-shadow: 2px 0 8px var(--colour-shadow);
	/*
	  Scrolls on its own. The place list #88 adds here will, on a small group of groups, run past
	  the viewport height long before the map behind it would, and `overscroll-behavior: contain`
	  stops that scroll from handing off to whatever is behind the drawer once it hits either end —
	  without it, a phone flicks the map (or the whole page) on the next swipe.
	*/
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: transform 0.2s ease;
}

.drawer-open[b-byi8st7fot] {
	transform: translateX(0);
}

.drawer-closed[b-byi8st7fot] {
	transform: translateX(-100%);
}

@media (prefers-reduced-motion: reduce) {
	.drawer[b-byi8st7fot] {
		transition: none;
	}
}

/*
  Task 183: the drawer's own standalone "Add group" button, below PlaceAccordion, replacing
  GroupsSection's own version of the same button (same class-free markup shape, carried over here).
*/
.drawer-add-group[b-byi8st7fot] {
	align-self: flex-start;
	font: inherit;
	font-size: var(--font-size-small);
	color: var(--colour-accent);
	background: none;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-small);
	cursor: pointer;
}

.drawer-add-group:hover[b-byi8st7fot],
.drawer-add-group:focus-visible[b-byi8st7fot] {
	background-color: var(--colour-surface-hover);
}

.drawer .brand[b-byi8st7fot] {
	font-size: var(--font-size-brand);
	font-weight: 600;
	color: var(--colour-text);
	text-decoration: none;
}

/*
  The graphical separator between the place accordion and the secondary links (task 88, ADR-0059's
  own description of the drawer's shape). A styled <hr> rather than a bare border on one of its
  neighbours, so the separator survives either side being empty (no groups yet, or every secondary
  link still unavailable) without needing a margin trick to still read as a divider.
*/
.drawer-divider[b-byi8st7fot] {
	width: 100%;
	border: none;
	border-top: 1px solid var(--colour-border);
	margin: 0;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/*
  `position: fixed; inset: 0` sizes this from the viewport directly, so nothing in the ancestor
  chain — html, body, #app — has to carry `height: 100%` for this to fill the screen. That chain is
  also what breaks under an on-screen keyboard on mobile: a percentage chain resolves against the
  *layout* viewport, which does not shrink when the keyboard opens, so a `height: 100%` shell either
  hides behind the keyboard or leaves a gap. `inset: 0` on a fixed element resolves against the
  same viewport too, but because nothing here needs to *grow* to reach the bottom of the screen —
  the drawer and the content area each manage their own height and their own scrolling — there is no
  percentage-of-parent step in the chain left to go wrong.
*/
.app-shell[b-wb6abnr9hh] {
	position: fixed;
	inset: 0;
}

/*
  Fills the shell on its own — the drawer is not a layout sibling that pushes this aside, it is an
  overlay that floats above it (Rob's direction, 2026-08-04: the drawer floats over the map, it does
  not share a row with it). Full bleed by default, for the map #92 puts here. Scrolls independently
  of the drawer: a page whose content is taller than the viewport (or the map, once it exists) never
  carries the drawer's place list along with it, and vice versa.
*/
.content-area[b-wb6abnr9hh] {
	width: 100%;
	height: 100%;
	overflow: auto;
}
/* /Layout/NavMenu.razor.rz.scp.css */
/*
  Two things govern the selectors here.

  `::deep` on every rule but the first: half the entries are `NavLink`, a component, and Blazor's
  CSS isolation stamps its scope attribute only on elements this file's own markup declares — the
  anchor `NavLink` renders does not carry it. Without `::deep` the link rules would silently apply
  to the placeholder spans and to nothing else.

  And the split between `.navigation-link` and `a.navigation-link`: shared typography and spacing
  go on the class, so every entry lines up, while **anything that looks like an affordance is
  qualified with `a`**. A placeholder is a span precisely so that it offers nothing to interact
  with, and an unqualified `:hover` hands the affordance straight back — `:hover` matches whatever
  is under the pointer, element type and interactivity notwithstanding. That is not a hypothetical:
  an unqualified rule here painted the placeholders with the hover background, which read as the
  same lifted pill as the current page and dropped their contrast to 4.22:1 in the light scheme.

  The `a` qualifier, rather than an override that neutralises the effect for the current
  placeholder class, is deliberate. An override has to be remembered by whoever adds the next kind
  of non-interactive entry; a selector that cannot match a non-anchor does not.
*/

/*
  Vertical rather than the wrapped horizontal row this was before #99: the nav now lives in the
  drawer (Drawer.razor), not a header row competing with the brand for width, and a vertical list
  is what the place-list accordion #88 adds below it will be too.
*/
.primary-navigation[b-e7qghjzg97] {
	display: flex;
	flex-direction: column;
	gap: var(--space-small);
}

.primary-navigation[b-e7qghjzg97]  .navigation-link {
	padding: var(--space-small) var(--space-medium);
	border-radius: var(--radius);
	color: var(--colour-text);
	font-size: var(--font-size-small);
	text-decoration: none;
}

.primary-navigation[b-e7qghjzg97]  a.navigation-link:hover {
	background-color: var(--colour-surface-hover);
}

.primary-navigation[b-e7qghjzg97]  a.navigation-link.active {
	background-color: var(--colour-accent);
	color: var(--colour-accent-text);
}

/*
  Destinations whose page is a later ticket. They are shown so the shape of the application is
  visible, and set in the muted text colour so it reads as secondary. That is a token rather than
  `opacity` on the normal colour because a composited opacity has to be contrast-checked against
  whatever it happens to sit on, and it failed AA in the light scheme when it was.

  --colour-text-muted moved with the nav from --colour-header to --colour-surface when #99 put it
  in the drawer, so its contrast pair changed and needed re-measuring rather than assumed carried
  over: 5.82:1 in the light scheme, 6.97:1 in dark — both above the 4.5:1 AA floor for text this
  size, same as the header context it left.
*/
.primary-navigation[b-e7qghjzg97]  .navigation-link-unavailable {
	color: var(--colour-text-muted);
	cursor: default;
}
/* /Layout/PlaceAccordion.razor.rz.scp.css */
/*
  Same qualifier discipline as NavMenu.razor.css: every affordance rule is written against a
  `button`, because that is the element the accessibility criteria in task 88 require these to be —
  a `button` selector cannot land on a non-interactive element by accident the way an unqualified
  class could.
*/

.place-accordion[b-j62dde0fvm] {
	display: flex;
	flex-direction: column;
	gap: var(--space-small);
}

.place-accordion-status[b-j62dde0fvm] {
	margin: 0;
	color: var(--colour-text-muted);
	font-size: var(--font-size-small);
}

button.accordion-add-place[b-j62dde0fvm] {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	font-weight: 600;
	color: var(--colour-accent);
	background: none;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-small);
	cursor: pointer;
}

button.accordion-add-place:hover[b-j62dde0fvm],
button.accordion-add-place:focus-visible[b-j62dde0fvm] {
	background-color: var(--colour-surface-hover);
}

.accordion-heading-row[b-j62dde0fvm] {
	display: flex;
	align-items: center;
	gap: var(--space-small);
}

.accordion-heading-row .accordion-heading[b-j62dde0fvm] {
	flex: 1;
	min-width: 0;
}

/*
  Task 215 (ADR-0131): the per-group visibility toggle, to the left of the heading it belongs to. A
  plain CSS dot rather than an image asset or icon font, the same "no framework" convention
  .drawer-toggle-icon already sets in Drawer.razor.css — filled and accent-coloured when the group's
  markers are shown, an outline in the muted text colour when hidden.
*/
button.accordion-visibility-toggle[b-j62dde0fvm] {
	flex: none;
	display: grid;
	place-items: center;
	padding: var(--space-small);
	border: none;
	border-radius: var(--radius);
	background: none;
	cursor: pointer;
}

button.accordion-visibility-toggle:hover[b-j62dde0fvm],
button.accordion-visibility-toggle:focus-visible[b-j62dde0fvm] {
	background-color: var(--colour-surface-hover);
}

.accordion-visibility-icon[b-j62dde0fvm] {
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	border: 2px solid var(--colour-text-muted);
	background-color: transparent;
}

.accordion-visibility-icon-visible[b-j62dde0fvm] {
	border-color: var(--colour-accent);
	background-color: var(--colour-accent);
}

.accordion-heading[b-j62dde0fvm] {
	margin: 0;
	font-size: inherit;
	font-weight: normal;
}

button.accordion-edit-group[b-j62dde0fvm] {
	flex: none;
	font: inherit;
	font-size: var(--font-size-small);
	color: var(--colour-accent);
	background: none;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-small);
	cursor: pointer;
}

button.accordion-edit-group:hover[b-j62dde0fvm],
button.accordion-edit-group:focus-visible[b-j62dde0fvm] {
	background-color: var(--colour-surface-hover);
}

button.accordion-header[b-j62dde0fvm] {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	color: var(--colour-text);
	background: none;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-small);
	cursor: pointer;
}

button.accordion-header:hover[b-j62dde0fvm],
button.accordion-header:focus-visible[b-j62dde0fvm] {
	background-color: var(--colour-surface-hover);
}

.accordion-panel[b-j62dde0fvm] {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-small);
}

button.place-button[b-j62dde0fvm] {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: var(--font-size-small);
	color: var(--colour-text);
	background: none;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-small) var(--space-small) var(--space-small) var(--space-large);
	cursor: pointer;
}

button.place-button:hover[b-j62dde0fvm],
button.place-button:focus-visible[b-j62dde0fvm] {
	background-color: var(--colour-surface-hover);
}

button.place-button-selected[b-j62dde0fvm] {
	background-color: var(--colour-accent);
	color: var(--colour-accent-text);
}
/* /Maps/CurrentLocationButton.razor.rz.scp.css */
/*
  Component-specific rules (ADR-0027). The button itself is a plain .btn-secondary from
  wwwroot/css/buttons.css — nothing here restyles it; only the message beside it needs rules of its
  own, because of where this component is used.
*/

.current-location[b-c3k0gjab3q] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-small);
}

/*
  Carries its own surface, not merely text. One of this component's two hosts floats it directly over
  the map (Pages/Home.razor.css), where bare text would sit on tiles of unknown colour and be
  unreadable — the same reason leaflet-theme.css makes the attribution control opaque rather than
  keeping the vendor's translucent fill. --colour-text on --colour-surface: 17.09:1 light, 13.70:1
  dark, the same pairing ADR-0087 already measured.
*/
.current-location-message[b-c3k0gjab3q] {
	margin: 0;
	padding: var(--space-small);
	max-width: 18rem;
	color: var(--colour-text);
	background-color: var(--colour-surface);
	border-radius: var(--radius);
	box-shadow: 0 1px 4px var(--colour-shadow);
}
/* /Maps/LeafletMap.razor.rz.scp.css */
/*
  Fills whatever the caller sizes this component's container to — the home map behind the drawer
  (ADR-0059), a group overview panel, or a picker dialog. Leaflet sizes its own map to this element's
  box, so a host with no height renders a Leaflet instance with no visible tiles.
*/
.leaflet-map-host[b-hsmexnqeso] {
	width: 100%;
	height: 100%;
}
/* /Maps/PlaceDetailPanel.razor.rz.scp.css */
/*
  Floats over the map on the side the drawer does not occupy, at --z-panel (task 244, ADR-0156) —
  below --z-header, the drawer's own toggle *and* its own sliding <aside> alike, so this never buries
  "the main menu" Rob's own report named, on any viewport. Not --z-overlay, this panel's own rung
  before ADR-0156: this panel is deliberately not one of the modal-task panels ModalOverlay hosts
  there (ADR-0099 — selecting a place is browsing, not a modal task), and sharing that rung with them
  is what let it outrank the drawer at all.

  This is a deliberate reversal of ADR-0059's own original placement, not an oversight: that record
  put this panel above the drawer specifically so an open drawer on a narrow viewport could never hide
  it, and putting the drawer above instead means it now can — see ADR-0156's own Consequences for why
  that trade was accepted (an open menu the reader just asked for should win over a panel they did
  not, however it was reached before that click).
*/
.place-detail-panel[b-j9f62u77kc] {
	position: fixed;
	right: var(--space-medium);
	bottom: var(--space-medium);
	z-index: var(--z-panel);

	/*
	  Task 257: a fixed content width, not one that sizes to its contents. `width` rather than
	  `max-width` is the whole point — the previous max-width let a one-word place name give a much
	  narrower panel than a long description did, so the panel changed shape place to place. 240px is
	  the content box, which is why the padding is added back on top: app.css sets `box-sizing:
	  border-box` globally, so a bare `width: 240px` would be 240px *including* both paddings and leave
	  only 208px of content. max-width keeps the narrow-screen clamp the previous declaration carried,
	  so a phone narrower than the fixed width still gets a panel that fits rather than one that
	  overflows.

	  240 is also exactly ThumbnailCropCalculator.ShrinkWidth, so the thumbnail below and task 253's own
	  placeholder for it both land at their natural 240x135 rather than being scaled up to whatever
	  width the contents happened to produce — see PlaceDetailPanelStylesheetTests, which is where that
	  agreement is actually written down.
	*/
	width: calc(240px + 2 * var(--space-medium));
	max-width: calc(100vw - 2 * var(--space-medium));
	background-color: var(--colour-surface);
	color: var(--colour-text);
	border-radius: var(--radius);
	box-shadow: 0 1px 4px var(--colour-shadow);
	padding: var(--space-medium);

	/*
	  Inherited by everything inside, which is the point: at a fixed 240px a long unbroken run of
	  characters — a place named after a URL, a coordinate line at a wide font size, the https fallback
	  link — has nowhere left to go and would otherwise push out of the panel's own box rather than
	  wrapping inside it. `break-word` only breaks a word that cannot fit on a line of its own, so
	  ordinary prose still wraps between words as before.
	*/
	overflow-wrap: break-word;
}

.place-detail-close[b-j9f62u77kc] {
	float: right;
	font: inherit;
	font-size: var(--font-size-brand);
	line-height: 1;
	color: var(--colour-text);
	background: none;
	border: none;
	cursor: pointer;
}

.place-detail-close:hover[b-j9f62u77kc],
.place-detail-close:focus-visible[b-j9f62u77kc] {
	color: var(--colour-accent);
}

.place-detail-name[b-j9f62u77kc] {
	margin: 0;
	font-size: var(--font-size-body);
}

/*
  Task 249: the thumbnail sits under the name, at the panel's own content width, before the group line.
  .btn-ghost (buttons.css) carries the weight this "act on an object" control needs (ADR-0103, the same
  family place-detail-edit already belongs to) — display, background, border, cursor. Only what
  genuinely differs for an image-only button stays here: no padding around the image, and
  line-height: 0 to close the small inline gap under it that an <img> otherwise leaves.
*/
.place-detail-thumbnail-button[b-j9f62u77kc] {
	margin: var(--space-small) 0 0;
	padding: 0;
	line-height: 0;
}

.place-detail-thumbnail[b-j9f62u77kc] {
	display: block;
	width: 100%;
	border-radius: var(--radius);
}

/*
  Task 253: the slot the thumbnail lands in, held while its fetch is in flight. The aspect ratio is
  not a guess — ThumbnailCropCalculator crops every thumbnail to 240 wide by 135 tall (ADR-0163), so
  this box is the size the image itself will occupy, and the group, description and coordinates below
  do not move when it arrives. Only a source whose shrunk height is already under 135 (a panorama)
  produces a shorter thumbnail than this, and it will settle upwards by that difference alone.
*/
.place-detail-thumbnail-placeholder[b-j9f62u77kc] {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: var(--space-small) 0 0;
	aspect-ratio: 240 / 135;
}

.place-detail-group[b-j9f62u77kc],
.place-detail-coordinates[b-j9f62u77kc] {
	margin: var(--space-small) 0 0;
	color: var(--colour-text-muted);
	font-size: var(--font-size-small);
}

.place-detail-description[b-j9f62u77kc] {
	margin: var(--space-small) 0 0;
}

/*
  .btn-ghost carries the rest — colour, shape, cursor, hover (buttons.css, task 185's own review
  round). Only this trigger's own position in the panel varies component to component, so only its
  margin stays here.
*/
.place-detail-edit[b-j9f62u77kc] {
	margin: var(--space-medium) 0 0;
}

/*
  Task 255, ADR-0168: exactly one of these two normally renders — the anchor on a coarse pointer, the
  button on a fine one — so both carry the medium margin that opens this group of controls, rather than
  the anchor alone carrying it as it did while the pair was always rendered together (task 226,
  ADR-0142). The adjacent-sibling rule below restores the small inter-peer gap for the two cases where
  both do render: Home could not read the pointer type at all, or Share has exhausted itself on a
  desktop and its own message names the anchor (see the component's own remarks).
*/
.place-detail-open-maps[b-j9f62u77kc],
.place-detail-share[b-j9f62u77kc] {
	margin: var(--space-medium) 0 0;
}

.place-detail-open-maps + .place-detail-share[b-j9f62u77kc] {
	margin-top: var(--space-small);
}

.place-detail-share-status[b-j9f62u77kc] {
	margin: var(--space-small) 0 0;
	color: var(--colour-text-muted);
	font-size: var(--font-size-small);
}

/*
  Task 226: shown only when share.js could not put the link anywhere itself (an insecure context, or
  no clipboard for any other reason) — the https link as selectable text the reader can copy by hand.
  user-select: all on the value itself, not the whole paragraph, so a single click or tap selects
  exactly the link and nothing else.
*/
.place-detail-share-link[b-j9f62u77kc] {
	margin: var(--space-small) 0 0;
	color: var(--colour-text-muted);
	font-size: var(--font-size-small);
}

.place-detail-share-link code[b-j9f62u77kc] {
	user-select: all;
}

.place-detail-delete[b-j9f62u77kc] {
	margin: var(--space-small) 0 0;
}

.place-detail-delete-confirm[b-j9f62u77kc] {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-small);
	margin: var(--space-small) 0 0;
	color: var(--colour-danger);
}

.place-detail-delete-confirm button[b-j9f62u77kc] {
	font: inherit;
	font-size: var(--font-size-small);
}

.place-detail-move[b-j9f62u77kc] {
	margin: var(--space-small) 0 0;
}

.place-detail-move-choose[b-j9f62u77kc],
.place-detail-move-confirm[b-j9f62u77kc] {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-small);
	margin: var(--space-small) 0 0;
}

.place-detail-move-choose select[b-j9f62u77kc],
.place-detail-move-choose button[b-j9f62u77kc],
.place-detail-move-confirm button[b-j9f62u77kc] {
	font: inherit;
	font-size: var(--font-size-small);
}

/*
  Unlike every other <select> in the application (forms.css's own .field select), this one carried
  no explicit styling at all — left to the browser's own UA chrome, which meant no declared token
  for ColourContrastTests to check and no declared boundary for WCAG 1.4.11 to be judged against
  either way (found in review of PR #102, task 167). --colour-control-border, not --colour-border,
  for the same reason forms.css gives its own fields: this select's background is already
  --colour-surface, so the border is the only cue to where it is.
*/
.place-detail-move-choose select[b-j9f62u77kc] {
	color: var(--colour-text);
	background-color: var(--colour-surface);
	border: 1px solid var(--colour-control-border);
	border-radius: var(--radius);
	padding: var(--space-small);
}
/* /Maps/PlaceImageViewer.razor.rz.scp.css */
/* Task 249, widened by task 252: the full image is bounded by what the shell's Wide centred panel
   leaves inside its own padding — ModalOverlay.razor.css publishes both as custom properties, and
   they are read here rather than restated, because the panel shrink-wraps whatever these produce.
   Absolute bounds rather than percentages for the same reason (see that stylesheet's own remarks),
   and only ever bounds: nothing here scales an image up past its natural size. The fallbacks are the
   pre-task-252 declarations verbatim, so a host that forgets Wide gets the old behaviour rather than
   an unbounded image — and the height one is viewport-relative rather than 100% deliberately (found
   in review of PR #196): a percentage max-height against this panel's auto height computes to none,
   which is exactly the unbounded image the fallback exists to avoid. The width's 100% is sound, the
   panel's width being definite either way. */
.place-image-viewer-image[b-svvjlf5vd4] {
	display: block;
	max-width: var(--modal-overlay-content-max-width, 100%);
	max-height: var(--modal-overlay-content-max-height, calc(100vh - 6 * var(--space-medium)));
	margin: 0 auto;
	border-radius: var(--radius);
}

/* Task 253: the spinner and the words it stands in for, on one line. */
.place-image-viewer-loading[b-svvjlf5vd4] {
	display: flex;
	align-items: center;
	gap: var(--space-small);
}
/* /Notifications/ErrorNotification.razor.rz.scp.css */
/*
  ErrorNotification's own presentation (ADR-0063), scoped here per ADR-0027 rather than folded into
  forms.css: this component owns a whole shape — message plus dismiss control — not a single rule a
  form page reads.
*/

.error-notification[b-8dj5fx9zxl] {
	display: flex;
	align-items: flex-start;
	gap: var(--space-small);
	font-size: var(--font-size-small);
	color: var(--colour-danger);
}

.error-notification-message[b-8dj5fx9zxl] {
	margin: 0;
	flex: 1;
}

/*
  A conflict distinct from an ordinary refusal — GroupForm's own distinction (see its remarks): a
  conflict is the request colliding with something about the resource, not a rule the caller broke.
  Bordered rather than a second colour, matching the token discipline ADR-0027 sets for colour.
*/
.error-notification--conflict[b-8dj5fx9zxl] {
	border-left: 3px solid var(--colour-border);
	padding-left: var(--space-small);
}

/*
  Strips the default button chrome — the same fix task 139 gives #blazor-error-ui's own dismiss
  control (app.css), here from the start rather than inherited as a defect.
*/
.error-notification-dismiss[b-8dj5fx9zxl] {
	flex-shrink: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	line-height: 1;
}

.error-notification-dismiss:hover[b-8dj5fx9zxl],
.error-notification-dismiss:focus-visible[b-8dj5fx9zxl] {
	color: var(--colour-text);
}
/* /Overlays/ModalOverlay.razor.rz.scp.css */
/*
  Task 193, ADR-0116: the one panel shell every modal-task panel floats inside, replacing what used to
  be three near-identical copies (.place-form-panel, .group-form-panel, .group-members-panel — all
  fixed, top/right/bottom var(--space-medium), width min(28rem, ...), the same surface/border/shadow)
  and three near-identical close buttons. Floats over the map at --z-overlay, one layer above the
  nested OverlayBackdrop (calc(var(--z-overlay) - 1)) and one below --z-dialog, unclaimed.

  The fade/slide keyframes and their prefers-reduced-motion removal are unchanged from what ADR-0102
  built for PlaceFormPanel alone — moved here verbatim, generalised to every consumer at once.
*/
.modal-overlay-panel[b-nnkw32us8p] {
	position: fixed;
	top: var(--space-medium);
	right: var(--space-medium);
	bottom: var(--space-medium);
	z-index: var(--z-overlay);
	width: min(28rem, calc(100vw - 2 * var(--space-medium)));
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--colour-surface);
	color: var(--colour-text);
	border-radius: var(--radius);
	box-shadow: 0 1px 4px var(--colour-shadow);
	padding: var(--space-medium);
	animation: modal-overlay-panel-in-b-nnkw32us8p 0.2s ease-out;
}

/*
  ModalOverlay.razor.cs's own CloseAsync sets the closing class before waiting out the same duration
  this animation runs for, then calls OnClose — `forwards` holds the last keyframe (invisible, offset)
  rather than snapping back to fully visible the instant the animation's own iteration ends but before
  that delay has finished elapsing.
*/
.modal-overlay-panel.modal-overlay-panel-closing[b-nnkw32us8p] {
	animation: modal-overlay-panel-out-b-nnkw32us8p 0.2s ease-in forwards;
}

@keyframes modal-overlay-panel-in-b-nnkw32us8p {
	from {
		opacity: 0;
		transform: translateX(1rem);
	}
}

@keyframes modal-overlay-panel-out-b-nnkw32us8p {
	to {
		opacity: 0;
		transform: translateX(1rem);
	}
}

/*
  Task 220, ADR-0136: ConfirmationModal's own centred dialog, stacked above whichever sidebar-shaped
  panel raised it — same shell, same z-index (it is a genuine second ModalOverlay, deliberately not a
  bespoke dialog), narrower and pinned to the middle of the viewport instead of the right edge. The
  keyframes translate on the same axis the sidebar panel's own animation does (a small vertical offset
  in place of the sidebar's horizontal one) so the fade-and-slide feel stays the same even though the
  base position does not.
*/
.modal-overlay-panel-centred[b-nnkw32us8p] {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	width: min(24rem, calc(100vw - 2 * var(--space-medium)));
	max-height: calc(100vh - 2 * var(--space-medium));
	animation: modal-overlay-panel-centred-in-b-nnkw32us8p 0.2s ease-out;
}

.modal-overlay-panel-centred.modal-overlay-panel-closing[b-nnkw32us8p] {
	animation: modal-overlay-panel-centred-out-b-nnkw32us8p 0.2s ease-in forwards;
}

/*
  Task 252: the centred shape, bounded for a picture instead of for a confirmation's few lines — the
  Wide parameter, which only PlaceImageViewer passes, so ConfirmationModal keeps its 24rem dialog
  untouched. The ceiling is 90vw/90vh (never past the viewport's own margin on a small screen), but
  the panel itself is fit-content rather than that ceiling: a portrait photo the height bound has
  already shrunk should not sit in a 90vw-wide surface with blank space either side.

  The two custom properties are what those ceilings leave once this panel's own padding is taken off,
  published for the content to bound its own natural size against. That indirection is load-bearing,
  not tidiness: fit-content sizes this panel from its content's *intrinsic* width, which a content
  max-width of 100% does not constrain, so an image bounded only that way would size the panel from
  its full natural width and then letterbox itself inside it the moment the height ceiling bit.
*/
.modal-overlay-panel-centred.modal-overlay-panel-wide[b-nnkw32us8p] {
	--modal-overlay-content-max-width: calc(min(90vw, 100vw - 2 * var(--space-medium)) - 2 * var(--space-medium));
	--modal-overlay-content-max-height: calc(min(90vh, 100vh - 2 * var(--space-medium)) - 2 * var(--space-medium));
	width: fit-content;
	max-width: min(90vw, calc(100vw - 2 * var(--space-medium)));
	max-height: min(90vh, calc(100vh - 2 * var(--space-medium)));
}

/*
  The other half of the same review finding: z-index below puts the close button back on top of the
  image, but a bare glyph in --colour-text over an arbitrary photograph is legible or not depending
  entirely on the photograph. Only the wide panel needs this — every other consumer's content is
  text on --colour-surface, which the button already reads against — so the surface it is missing
  is given back to it here rather than to the shared rule.
*/
.modal-overlay-panel-wide .modal-overlay-close[b-nnkw32us8p] {
	padding: 0 var(--space-small);
	background-color: var(--colour-surface);
	border-radius: var(--radius);
}

@keyframes modal-overlay-panel-centred-in-b-nnkw32us8p {
	from {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 1rem));
	}
}

@keyframes modal-overlay-panel-centred-out-b-nnkw32us8p {
	to {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 1rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.modal-overlay-panel[b-nnkw32us8p],
	.modal-overlay-panel.modal-overlay-panel-closing[b-nnkw32us8p],
	.modal-overlay-panel-centred[b-nnkw32us8p],
	.modal-overlay-panel-centred.modal-overlay-panel-closing[b-nnkw32us8p] {
		animation: none;
	}
}

/*
  position/z-index found in review of PR #196, and not cosmetic: this button is a float, rendered
  before ChildContent, and a float paints *below* in-flow block-level content. That was survivable
  while the centred panel was a fixed 24rem — the corner the button sits in was usually empty — but
  task 252's fit-content panel shrink-wraps its image, so the image covers that corner exactly, and
  the button ended up drawn under the photo and unclickable with it (Escape and the backdrop were
  the only way out). Lifting it into its own stacking level fixes the paint order and the hit test
  together. Declared on the shared button rather than only under the wide modifier, because no
  consumer's content should ever be able to bury this shell's own way out.
*/
.modal-overlay-close[b-nnkw32us8p] {
	position: relative;
	z-index: 1;
	float: right;
	font: inherit;
	font-size: var(--font-size-brand);
	line-height: 1;
	color: var(--colour-text);
	background: none;
	border: none;
	cursor: pointer;
}

.modal-overlay-close:hover[b-nnkw32us8p],
.modal-overlay-close:focus-visible[b-nnkw32us8p] {
	color: var(--colour-accent);
}
/* /Overlays/OverlayBackdrop.razor.rz.scp.css */
/*
  Task 193, ADR-0116: one dimming, blurring scrim, reused by every overlay in this application rather
  than each declaring its own. --colour-backdrop and --backdrop-blur are shared with every consumer by
  construction — there is only one component to reach through to change either.

  Always in the DOM (see this component's own remarks in the .cs file); opacity and pointer-events
  both follow .overlay-backdrop-visible, so a closed backdrop dims nothing and intercepts nothing.
  Only opacity transitions — background-color and backdrop-filter never change at runtime, so nothing
  here needs to animate them.
*/
.overlay-backdrop[b-cdybmzxj89] {
	position: fixed;
	inset: 0;
	z-index: calc(var(--overlay-backdrop-below-token) - 1);
	background-color: var(--colour-backdrop);
	backdrop-filter: blur(var(--backdrop-blur));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.overlay-backdrop-visible[b-cdybmzxj89] {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.overlay-backdrop[b-cdybmzxj89] {
		transition: none;
	}
}

/*
  Drawer.razor.cs's own narrow-viewport scrim only (OverlayBackdrop.razor.cs's own HideAboveWideViewport
  remarks) — never dims the map on a wide viewport, where the drawer floats open alongside it rather
  than instead of it.

  64rem is a literal, not a token, for the reason Drawer.razor.css's own comment beside its matching
  media query gives in full: a media query condition cannot read a custom property (ADR-0027), and this
  is also the exact number Drawer.razor.cs asks JavaScript to match on first render. Four places now
  carry this comment and this number — Drawer.razor.css, app.css's own .page-content rule, Drawer.razor.cs
  and this file — move one, move all four.
*/
@media (min-width: 64rem) {
	.overlay-backdrop-hide-above-wide-viewport[b-cdybmzxj89] {
		display: none;
	}
}
/* /Pages/Account.razor.rz.scp.css */
/*
  Task 185 (ADR-0103): the colour, border and padding task 184 hand-rolled here for this one button
  now live in buttons.css's own .btn-secondary, which the markup applies alongside this class — see
  that file's own remarks for why signing out is secondary weight rather than destructive (nothing is
  lost by it, unlike Remove or Leave). Only the layout this button needs that .btn-secondary does not
  — sitting on its own line, clear of the sections above it — stays scoped here.
*/
.account-sign-out[b-8abk6nk7lq] {
	display: block;
	margin-top: var(--space-large);
}
/* /Pages/Home.razor.rz.scp.css */
/*
  Component-specific rules (ADR-0027) — the "Show my location" control (task 254, ADR-0167) is the
  only thing on this page that is not either the full-bleed map or a panel with its own stylesheet.
*/

/*
  Top-right, the one corner of the map nothing else claims: Drawer.razor.css puts the drawer's own
  toggle top-left, PlaceDetailPanel.razor.css puts the detail panel bottom-right, and Leaflet's own
  zoom control sits under that (map.js's own ZOOM_CONTROL_POSITION).

  --z-panel, the same rung PlaceDetailPanel uses: above the map, and below --z-header, so this never
  paints over the drawer or its toggle — exactly the relationship ADR-0156 settled for anything
  floating over this map.
*/
.home-current-location[b-obccsmopmy] {
	position: fixed;
	top: var(--space-medium);
	right: var(--space-medium);
	z-index: var(--z-panel);
}
/* /Places/Import/ImportReportBanner.razor.rz.scp.css */
/*
  ImportReportBanner's own presentation (ADR-0127, ADR-0128), scoped here per ADR-0027 — a
  fixed-position banner surviving PlaceFormPanel's own dismissal, so it cannot be styled alongside
  that panel's own markup, which is gone by the time this shows anything.
*/

.import-report-banner[b-35zcl0ktg6] {
	position: fixed;
	top: var(--space-medium);
	right: var(--space-medium);
	left: var(--space-medium);
	max-width: 32rem;
	margin-inline: auto;
	z-index: var(--z-dialog);
	display: flex;
	flex-direction: column;
	gap: var(--space-small);
	padding: var(--space-medium);
	background: var(--colour-surface);
	border: 1px solid var(--colour-border);
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 1rem var(--colour-shadow);
	font-size: var(--font-size-small);
}

.import-report-summary[b-35zcl0ktg6] {
	margin: 0;
	padding-right: var(--space-large);
	font-weight: 600;
}

.import-report-skipped[b-35zcl0ktg6] {
	margin: 0;
	padding-left: var(--space-medium);
	max-height: 12rem;
	overflow-y: auto;
}

.import-report-not-attempted[b-35zcl0ktg6] {
	margin: 0;
	color: var(--colour-danger);
}

.import-report-ignored[b-35zcl0ktg6] {
	margin: 0;
	color: var(--colour-text-muted);
}

.import-report-dismiss[b-35zcl0ktg6] {
	position: absolute;
	top: var(--space-small);
	right: var(--space-small);
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	line-height: 1;
}

.import-report-dismiss:hover[b-35zcl0ktg6],
.import-report-dismiss:focus-visible[b-35zcl0ktg6] {
	color: var(--colour-accent);
}
/* /Places/PlaceForm.razor.rz.scp.css */
/*
  Component-specific rules (ADR-0027) — the shared field/label/error shapes still come from
  wwwroot/css/forms.css, which every form uses; only the layout genuinely unique to this one lives
  here. Layout, not colour, so it belongs in this stylesheet rather than theme.css (ADR-0027).
*/

/*
  Task 181: forms.css's own .auth-form caps every form sharing it at max-width: 24rem — right for the
  narrow single-column forms it was built for (Login, Register, Account), but narrower than
  PlaceFormPanel's own ~28rem host, which is what actually left Group, Name, Description and the map
  picker not filling the sidebar they sit in ("does not fit nicely", task 181's own wording) rather
  than any of those elements being sized wrong individually — each was already a flex child stretched
  to .auth-form's own width (forms.css's .auth-form is display: flex; flex-direction: column, whose
  default cross-axis stretch is what already fills every .field, and .place-form-map, to whatever
  width .auth-form allows). Overriding the cap here, for this one form, is the fix; forms.css itself
  is untouched, so Login, Register and Account keep their own narrower width.
*/
.place-form[b-7036wigw2r] {
	max-width: none;
}

.place-form-coordinates[b-7036wigw2r] {
	display: flex;
	/* Confirms both fields stay usable at the panel's own narrowest width (task 181's own acceptance
	   criterion) rather than forcing horizontal scroll if they somehow do not both fit one row. */
	flex-wrap: wrap;
	gap: var(--space-medium);
}

/*
  Shrinks to fit a coordinate (task 181), rather than forms.css's own default input sizing or a flex
  rule that would stretch it to share the row's own now-much-wider (see .place-form above) available
  space. 12ch comfortably fits "-123.456789" (eleven characters) with a little room to spare, without
  the field ballooning to fill half the panel the way flex: 1 1 0 (the previous rule here) did.
*/
.place-form-coordinates .field input[b-7036wigw2r] {
	width: 12ch;
}

.field textarea[b-7036wigw2r] {
	font: inherit;
	color: var(--colour-text);
	background-color: var(--colour-surface);
	/* --colour-control-border, not --colour-border — see forms.css's own note beside .field input. */
	border: 1px solid var(--colour-control-border);
	border-radius: var(--radius);
	padding: var(--space-small);
	resize: vertical;
}

/*
  Gives the embedded picker (LeafletMap.razor.css's .leaflet-map-host fills whatever height its
  container has) something to fill — a form has no ambient full-bleed height the way the home page
  does (ADR-0059).
*/
.place-form-map[b-7036wigw2r] {
	height: 16rem;
	border-radius: var(--radius);
	overflow: hidden;
}
/* /Places/PlaceFormPanel.razor.rz.scp.css */
/*
  Task 180's own discard-confirmation (ADR-0102) — everything about the panel shell itself (position,
  sizing, the backdrop, the open/close animation, the close button) moved to ModalOverlay.razor.css
  (task 193, ADR-0116). Task 220, ADR-0136 moved the confirmation itself out too — it is a stacked
  ConfirmationModal now, styled entirely by ModalOverlay.razor.css and buttons.css, so the rules that
  used to live here (.place-form-panel-discard-confirm and its own button sizing) are gone rather than
  left unused: the delete confirmation below stays inline for now (task 221's own territory), so it
  keeps its own equivalent rule.
*/

/*
  Task 211, ADR-0127: visually separated from PlaceForm above it, per the ticket's own requirement —
  a border and its own heading say "this is an alternative to the form", not another field inside it,
  matching ADR-0066's own reasoning for why it is not one.
*/
.place-form-panel-csv-import[b-k95roquim1],
.place-form-panel-image[b-k95roquim1] {
	margin-top: var(--space-medium);
	padding-top: var(--space-medium);
	border-top: 1px solid var(--colour-border);
}

.place-form-panel-csv-import h3[b-k95roquim1] {
	margin: 0 0 var(--space-small);
	font-size: var(--font-size-small);
}

.place-form-panel-csv-import-status[b-k95roquim1] {
	margin-top: var(--space-medium);
	color: var(--colour-text-muted);
}

.place-form-panel-image h3[b-k95roquim1] {
	margin: 0 0 var(--space-small);
	font-size: var(--font-size-small);
}

.place-form-panel-image-thumbnail[b-k95roquim1] {
	display: block;
	max-width: 100%;
	margin-bottom: var(--space-small);
	border-radius: var(--radius);
}

.place-form-panel-image-remove[b-k95roquim1] {
	display: block;
	margin-bottom: var(--space-medium);
}
/* /Progress/LoadingSpinner.razor.rz.scp.css */
/*
  Task 253. A ring with one contrasting quadrant, spun by transform — no image, no font, nothing to
  fetch, so it can never itself be the thing a reader is waiting on. Both hosts render it at the same
  size deliberately: a spinner is a fixed piece of chrome here, not something scaled to whatever slot
  it sits in.
*/
.loading-spinner[b-62q1pr418g] {
	display: inline-block;
	width: var(--space-large);
	height: var(--space-large);
	border: 2px solid var(--colour-border);
	border-top-color: var(--colour-accent);
	border-radius: 50%;
	animation: loading-spinner-turn-b-62q1pr418g 0.8s linear infinite;
}

@keyframes loading-spinner-turn-b-62q1pr418g {
	to {
		transform: rotate(1turn);
	}
}

/*
  Same treatment ModalOverlay.razor.css gives its own open/close animation: the motion goes, the
  element stays. What is left still reads as a placeholder — a ring with one quadrant picked out in
  the accent colour, holding the slot — rather than disappearing and taking the "something is
  happening here" signal with it.
*/
@media (prefers-reduced-motion: reduce) {
	.loading-spinner[b-62q1pr418g] {
		animation: none;
	}
}
/* /Users/PendingInvitationRow.razor.rz.scp.css */
/*
  Echoes GroupMemberRow.razor.css's own .member-row/.member-info/.member-actions/.member-confirm
  shapes rather than sharing them — Blazor's CSS isolation scopes those rules to GroupMemberRow's own
  markup, so a class of the same name here would carry none of it.
*/
.invitation-row[b-kvjix66myg] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-small);
	padding: var(--space-small) 0;
	border-bottom: 1px solid var(--colour-border);
}

.invitation-info[b-kvjix66myg] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-small);
}

.invitation-role-badge[b-kvjix66myg] {
	font-size: var(--font-size-small);
	color: var(--colour-text-muted);
	border: 1px solid var(--colour-border);
	border-radius: var(--radius);
	padding: 0 var(--space-small);
}

.invitation-inviter[b-kvjix66myg] {
	font-size: var(--font-size-small);
	color: var(--colour-text-muted);
}

.invitation-actions[b-kvjix66myg] {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-small);
}

.invitation-actions button[b-kvjix66myg] {
	font: inherit;
	font-size: var(--font-size-small);
}

/*
  Task 221, ADR-0136: declining is now confirmed on Account itself, through a stacked
  ConfirmationModal — the .invitation-confirm rules that used to live here are gone rather than left
  unused.
*/
/* /Users/PendingInvitationsBadge.razor.rz.scp.css */
/*
  Echoes GroupMemberRow.razor.css's own .member-status-badge — small, muted, bordered — rather than
  literally sharing it: Blazor's CSS isolation scopes that rule to elements GroupMemberRow itself
  renders, so a class of the same name on a span this component renders would carry none of it.
  Duplicating the declaration is the only way to keep the same appearance across two independently
  scoped components; ColourContrastTests only checks form-control borders (ADR-0087), not this one,
  since a count badge is not a control's own boundary.
*/
.pending-invitations-badge[b-gbpnhcansl] {
	display: inline-block;
	margin-left: var(--space-small);
	font-size: var(--font-size-small);
	line-height: 1;
	color: var(--colour-text-muted);
	border: 1px solid var(--colour-border);
	border-radius: var(--radius);
	padding: 0 var(--space-small);
}