@susilkumar006/widgets-test 1.0.0

package/dist/styles.css

@@ -0,0 +1,887 @@
+/*
+ * Shared by every component root (classes picked in surface.ts).
+ *
+ * The package hard-codes no colours and no fonts (architecture §7.1). Each
+ * value reads a documented --fp-* variable; left unset, it inherits from the
+ * host page (text colour, font, size) or is derived from the inherited text
+ * colour (borders, muted text), and surfaces stay transparent. The --fpi-*
+ * names are internal shorthands, not part of the contract.
+ */
+
+._root_ho4ob_11 {
+  --fpi-text: var(--fp-color-text, currentColor);
+  --fpi-surface: var(--fp-color-surface, transparent);
+  --fpi-surface-muted: var(--fp-color-surface-muted, color-mix(in srgb, var(--fpi-text) 5%, transparent));
+  --fpi-muted: var(--fp-color-muted, color-mix(in srgb, var(--fpi-text) 68%, transparent));
+  --fpi-border: var(--fp-color-border, color-mix(in srgb, var(--fpi-text) 22%, transparent));
+  --fpi-accent: var(--fp-color-accent, var(--fpi-text));
+  --fpi-danger: var(--fp-color-danger, var(--fpi-text));
+  --fpi-success: var(--fp-color-success, var(--fpi-text));
+  --fpi-space: var(--fp-spacing, 0.25rem);
+  --fpi-radius: var(--fp-radius, 0.375rem);
+
+  box-sizing: border-box;
+  font-family: var(--fp-font-family, inherit);
+  font-size: var(--fp-font-size, inherit);
+  line-height: 1.5;
+  color: var(--fpi-text);
+  text-align: start;
+  /* Children adapt to the space the host gives, not to the viewport. */
+  container-type: inline-size;
+}
+
+._root_ho4ob_11 *,
+._root_ho4ob_11 *::before,
+._root_ho4ob_11 *::after {
+  box-sizing: border-box;
+}
+
+/* Emphasis (rung L2). Inside an overlay the dialog is the frame, so it sets
+   --fpi-frame-border/--fpi-frame-shadow to drop the component's own. */
+._subtle_ho4ob_41 {
+  background: transparent;
+}
+
+._framed_ho4ob_45,
+._elevated_ho4ob_46 {
+  background: var(--fpi-surface);
+  border: var(--fpi-frame-border, 1px solid var(--fpi-border));
+  border-radius: calc(var(--fpi-radius) * 1.5);
+}
+
+._elevated_ho4ob_46 {
+  box-shadow: var(
+    --fpi-frame-shadow,
+    var(--fp-shadow, 0 2px 4px color-mix(in srgb, var(--fpi-text) 6%, transparent),
+      0 8px 24px color-mix(in srgb, var(--fpi-text) 10%, transparent))
+  );
+}
+
+/* Size (rung L2): scales the type, and with it every em-based measure. */
+._small_ho4ob_61 {
+  font-size: calc(var(--fp-font-size, 1em) * 0.875);
+}
+
+._medium_ho4ob_65 {
+  font-size: var(--fp-font-size, inherit);
+}
+
+._large_ho4ob_69 {
+  font-size: calc(var(--fp-font-size, 1em) * 1.125);
+}
+/* Shown in place of a component that failed: the same frame, with a
+   danger-coloured edge. */
+._fallback_1rdem_3 {
+  margin: 0;
+  padding: calc(var(--fpi-space) * 3.5) calc(var(--fpi-space) * 4);
+  color: var(--fpi-danger);
+  border-color: var(--fpi-danger);
+}
+/* The form's layout. Scoped by CSS Modules; no global selectors; every
+   colour, font, spacing and radius comes from the documented --fp-* variables
+   (through the shared --fpi-* shorthands), inheriting from the host when unset. */
+
+._form_1clyx_5 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--fp-content-max-width, 32rem);
+}
+
+._comfortable_1clyx_12 {
+  --fpi-gap: calc(var(--fpi-space) * 4.5);
+  gap: var(--fpi-gap);
+  padding: calc(var(--fpi-space) * 6);
+}
+
+._compact_1clyx_18 {
+  --fpi-gap: calc(var(--fpi-space) * 3);
+  gap: var(--fpi-gap);
+  padding: calc(var(--fpi-space) * 4);
+}
+
+._field_1clyx_24 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--fpi-space) * 1.5);
+  min-width: 0;
+}
+
+/* Variant 'stacked' (default, rung L2): one field per row. */
+._stacked_1clyx_32 {
+  flex-direction: column;
+}
+
+/* Variant 'inline' (rung L2): name and email side by side once the form's
+   own width allows (a container query, never the viewport); stacked below. */
+._inline_1clyx_38 {
+  flex-flow: row wrap;
+  align-items: flex-start;
+}
+
+._inline_1clyx_38 > * {
+  flex: 1 1 100%;
+}
+
+@container (min-width: 26rem) {
+  ._inline_1clyx_38 > ._half_1clyx_48 {
+    flex-basis: calc((100% - var(--fpi-gap)) / 2);
+  }
+}
+
+._label_1clyx_53 {
+  font-size: 0.875em;
+  font-weight: 600;
+}
+
+._control_1clyx_58 {
+  width: 100%;
+  margin: 0;
+  padding: calc(var(--fpi-space) * 2.5) calc(var(--fpi-space) * 3);
+  font: inherit;
+  line-height: 1.4;
+  color: inherit;
+  background: var(--fpi-surface);
+  border: 1px solid var(--fpi-border);
+  border-radius: var(--fpi-radius);
+}
+
+textarea._control_1clyx_58 {
+  min-height: 5.5em;
+  resize: vertical;
+}
+
+._control_1clyx_58::placeholder {
+  color: var(--fpi-muted);
+}
+
+._control_1clyx_58:hover {
+  border-color: var(--fpi-muted);
+}
+
+._control_1clyx_58:focus-visible {
+  outline: 2px solid var(--fpi-accent);
+  outline-offset: 1px;
+}
+
+._control_1clyx_58[readonly] {
+  background: var(--fpi-surface-muted);
+  border-style: dashed;
+}
+
+._control_1clyx_58:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Invalid is also announced (aria-invalid) and spelled out in text. */
+._invalid_1clyx_99,
+._invalid_1clyx_99:hover {
+  border-color: var(--fpi-danger);
+  border-width: 2px;
+}
+
+._error_1clyx_105 {
+  margin: 0;
+  font-size: 0.8125em;
+  color: var(--fpi-danger);
+}
+
+._formError_1clyx_111 {
+  margin: 0;
+  padding: calc(var(--fpi-space) * 2.5) calc(var(--fpi-space) * 3);
+  font-size: 0.875em;
+  color: var(--fpi-danger);
+  border: 1px solid currentColor;
+  border-radius: var(--fpi-radius);
+}
+
+._actions_1clyx_120 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: calc(var(--fpi-space) * 2.5);
+  margin-top: var(--fpi-space);
+}
+
+._primary_1clyx_128,
+._secondary_1clyx_129 {
+  padding: calc(var(--fpi-space) * 2.5) calc(var(--fpi-space) * 4.5);
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.25;
+  border-radius: var(--fpi-radius);
+  cursor: pointer;
+}
+
+/* Always explicit, never the browser default: host resets such as Tailwind's
+   Preflight make default button backgrounds transparent. Without an accent
+   token the primary action is outlined in the text colour. */
+._primary_1clyx_128 {
+  color: var(--fp-color-on-accent, inherit);
+  background: var(--fp-color-accent, transparent);
+  border: 2px solid var(--fpi-accent);
+}
+
+._secondary_1clyx_129 {
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--fpi-border);
+}
+
+._primary_1clyx_128:hover:not(:disabled) {
+  filter: brightness(0.92);
+}
+
+._secondary_1clyx_129:hover:not(:disabled) {
+  background: var(--fpi-surface-muted);
+}
+
+._primary_1clyx_128:focus-visible,
+._secondary_1clyx_129:focus-visible {
+  outline: 2px solid var(--fpi-accent);
+  outline-offset: 2px;
+}
+
+._primary_1clyx_128:disabled,
+._secondary_1clyx_129:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+/* The picker's layout: a group of option rows. Scoped by CSS Modules; no
+   global selectors; colours, fonts, spacing and radius from the documented
+   --fp-* variables, inheriting from the host when unset. Selection is shown
+   by the radio's dot and a thicker outline, never by colour alone. */
+
+._picker_2easv_11 {
+  width: 100%;
+  min-width: 0;
+  max-width: var(--fp-content-max-width, 32rem);
+  margin: 0;
+}
+
+/* Floated so the legend sits inside the frame rather than on its border. */
+._legend_2easv_27 {
+  float: left;
+  width: 100%;
+  padding: 0;
+  font-size: 1em;
+  font-weight: 600;
+}
+
+._legend_2easv_27 ~ * {
+  clear: both;
+}
+
+._comfortable_2easv_51 {
+  --fpi-gap: calc(var(--fpi-space) * 2.5);
+  padding: calc(var(--fpi-space) * 6);
+}
+
+._comfortable_2easv_51 ._legend_2easv_27 {
+  margin-bottom: calc(var(--fpi-space) * 4);
+}
+
+._comfortable_2easv_51 ._option_2easv_69 {
+  padding: calc(var(--fpi-space) * 3.5) calc(var(--fpi-space) * 4);
+}
+
+._compact_2easv_77 {
+  --fpi-gap: calc(var(--fpi-space) * 1.5);
+  padding: calc(var(--fpi-space) * 4);
+}
+
+._compact_2easv_77 ._legend_2easv_27 {
+  margin-bottom: calc(var(--fpi-space) * 2.5);
+}
+
+._compact_2easv_77 ._option_2easv_69 {
+  padding: calc(var(--fpi-space) * 2) calc(var(--fpi-space) * 3);
+}
+
+._options_2easv_103 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--fpi-gap);
+}
+
+/* Variant 'list' (default, rung L2): one option per row, at any width. */
+._list_2easv_117 ._options_2easv_103 {
+  grid-auto-flow: row;
+}
+
+/* Variant 'grid': as many columns as the picker's own width allows. A
+   container query, so it follows the space the host gives, not the viewport. */
+@container (min-width: 28rem) {
+  ._grid_2easv_131 ._options_2easv_103 {
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  }
+}
+
+._option_2easv_69 {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--fpi-space) * 3);
+  background: var(--fpi-surface);
+  border: 1px solid var(--fpi-border);
+  border-radius: var(--fpi-radius);
+  cursor: pointer;
+}
+
+._option_2easv_69:hover {
+  border-color: var(--fpi-muted);
+}
+
+._selected_2easv_169,
+._selected_2easv_169:hover {
+  border-color: var(--fpi-accent);
+  box-shadow: inset 0 0 0 1px var(--fpi-accent);
+}
+
+._disabled_2easv_181,
+._disabled_2easv_181:hover {
+  cursor: not-allowed;
+  color: var(--fpi-muted);
+  background: var(--fpi-surface-muted);
+  border-color: var(--fpi-border);
+  border-style: dashed;
+}
+
+._input_2easv_199 {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  margin: 0.2em 0 0;
+  accent-color: var(--fp-color-accent, auto);
+  cursor: inherit;
+}
+
+._input_2easv_199:focus-visible {
+  outline: 2px solid var(--fpi-accent);
+  outline-offset: 2px;
+}
+
+._text_2easv_227 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--fpi-space) * 0.5);
+  min-width: 0;
+}
+
+._label_2easv_241 {
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+._selected_2easv_169 ._label_2easv_241 {
+  font-weight: 600;
+}
+
+._description_2easv_259 {
+  font-size: 0.875em;
+  font-weight: 400;
+  color: var(--fpi-muted);
+}
+
+._empty_2easv_271 p {
+  margin: 0;
+  color: var(--fpi-muted);
+}
+/* The timeline's layout. Scoped by CSS Modules; no global selectors;
+   colours, fonts, spacing and radius from the documented --fp-* variables,
+   inheriting from the host when unset. Status is
+   carried by the marker's shape and the text label; colour only reinforces
+   it. No fixed widths: the timeline fills its container. */
+
+._timeline_plcgb_13 {
+  width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+._heading_plcgb_25 {
+  margin: 0;
+  font-size: 1em;
+  font-weight: 600;
+  color: inherit;
+}
+
+._message_plcgb_39 p,
+p._message_plcgb_39 {
+  margin: 0;
+  color: var(--fpi-muted);
+}
+
+._list_plcgb_51 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+._item_plcgb_63 {
+  position: relative;
+  display: flex;
+  gap: calc(var(--fpi-space) * 3.5);
+}
+
+/* The connecting line, drawn between markers. */
+._item_plcgb_63:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  left: calc(var(--fpi-marker) / 2 - 1px);
+  top: var(--fpi-marker);
+  bottom: 0;
+  border-left: 2px solid var(--fpi-border);
+}
+
+._marker_plcgb_95 {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fpi-marker);
+  height: var(--fpi-marker);
+  font-size: 0.75em;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--fpi-muted);
+  background: var(--fpi-surface);
+  border: 2px solid var(--fpi-muted);
+  border-radius: 50%;
+}
+
+._completed_plcgb_129 ._marker_plcgb_95 {
+  color: var(--fpi-success);
+  background: var(--fpi-surface);
+  border-color: var(--fpi-success);
+}
+
+._completed_plcgb_129 ._status_plcgb_141 {
+  color: var(--fpi-success);
+}
+
+._current_plcgb_149 ._marker_plcgb_95 {
+  color: var(--fpi-accent);
+  background: var(--fpi-surface);
+  border-color: var(--fpi-accent);
+  border-width: 3px;
+}
+
+._current_plcgb_149 ._status_plcgb_141 {
+  color: var(--fpi-accent);
+}
+
+._pending_plcgb_171 ._marker_plcgb_95 {
+  border-style: dashed;
+}
+
+._error_plcgb_179 ._marker_plcgb_95 {
+  color: var(--fpi-danger);
+  background: var(--fpi-surface);
+  border-color: var(--fpi-danger);
+}
+
+._error_plcgb_179 ._status_plcgb_141 {
+  color: var(--fpi-danger);
+}
+
+._body_plcgb_199 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--fpi-space) * 0.5);
+}
+
+._title_plcgb_215 {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  text-align: start;
+  background: none;
+  border: 0;
+}
+
+button._title_plcgb_215 {
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: var(--fpi-border);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+
+button._title_plcgb_215:hover {
+  color: var(--fpi-accent);
+  text-decoration-color: currentColor;
+}
+
+button._title_plcgb_215:focus-visible,
+._link_plcgb_265:focus-visible {
+  outline: 2px solid var(--fpi-accent);
+  outline-offset: 2px;
+  border-radius: calc(var(--fpi-radius) / 3);
+}
+
+/* "View details": a navigation request, styled as a text link. */
+._link_plcgb_265 {
+  align-self: flex-start;
+  margin-top: var(--fpi-space);
+  padding: 0;
+  font: inherit;
+  font-size: 0.875em;
+  font-weight: 500;
+  color: var(--fpi-accent);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+._link_plcgb_265:hover {
+  filter: brightness(0.85);
+}
+
+._selected_plcgb_317 button._title_plcgb_215 {
+  color: var(--fpi-accent);
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 2px;
+}
+
+._selected_plcgb_317 ._body_plcgb_199 {
+  padding-left: calc(var(--fpi-space) * 2.5);
+  border-left: 3px solid var(--fpi-accent);
+}
+
+._meta_plcgb_339 {
+  margin: 0;
+  font-size: 0.875em;
+  color: var(--fpi-muted);
+}
+
+._status_plcgb_141 {
+  font-weight: 600;
+}
+
+._description_plcgb_359 {
+  margin: 0.125rem 0 0;
+  color: inherit;
+}
+
+._metadata_plcgb_369 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fpi-space) calc(var(--fpi-space) * 4);
+  margin: var(--fpi-space) 0 0;
+  font-size: 0.875em;
+  color: var(--fpi-muted);
+}
+
+._metadataEntry_plcgb_387 {
+  display: flex;
+  gap: calc(var(--fpi-space) * 1.5);
+}
+
+._metadataEntry_plcgb_387 dt {
+  font-weight: 600;
+}
+
+._metadataEntry_plcgb_387 dt::after {
+  content: ':';
+}
+
+._metadataEntry_plcgb_387 dd {
+  margin: 0;
+  color: inherit;
+}
+
+._comfortable_plcgb_423 {
+  --fpi-marker: 1.75em;
+  padding: calc(var(--fpi-space) * 6);
+}
+
+._comfortable_plcgb_423 ._heading_plcgb_25 {
+  margin-bottom: calc(var(--fpi-space) * 4);
+}
+
+._comfortable_plcgb_423 ._item_plcgb_63 {
+  padding-bottom: calc(var(--fpi-space) * 5);
+}
+
+._compact_plcgb_449 {
+  --fpi-marker: 1.25em;
+  padding: calc(var(--fpi-space) * 4);
+}
+
+._compact_plcgb_449 ._heading_plcgb_25 {
+  margin-bottom: calc(var(--fpi-space) * 2);
+}
+
+._compact_plcgb_449 ._item_plcgb_63 {
+  padding-bottom: calc(var(--fpi-space) * 3);
+}
+
+/* In a narrow container the metadata lists stack, one entry per line. */
+@container (max-width: 22rem) {
+  ._metadata_plcgb_369 {
+    flex-direction: column;
+  }
+}
+/* The avatar's layout: the video stage, captions and controls. Scoped by CSS
+   Modules; no global selectors; colours, fonts, spacing and radius from the
+   documented --fp-* variables, inheriting from the host when unset. */
+
+._avatar_1ugh0_9 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  max-width: var(--fp-content-max-width, 32rem);
+}
+
+._comfortable_1ugh0_25 {
+  gap: calc(var(--fpi-space) * 4);
+  padding: calc(var(--fpi-space) * 6);
+}
+
+._compact_1ugh0_35 {
+  gap: calc(var(--fpi-space) * 2.5);
+  padding: calc(var(--fpi-space) * 4);
+}
+
+/* The picture fills the width the host gives; portrait, like the kiosk. */
+._stage_1ugh0_47 {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  overflow: hidden;
+  background: var(--fpi-surface-muted);
+  border-radius: var(--fpi-radius);
+}
+
+/* Wider containers get a less tall stage. */
+@container (min-width: 36rem) {
+  ._stage_1ugh0_47 {
+    aspect-ratio: 4 / 3;
+  }
+}
+
+._video_1ugh0_79 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* The portrait (or initials) covers the stage whenever nothing is streaming. */
+._portrait_1ugh0_95 {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+._initials_1ugh0_111 {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font-size: 3em;
+  font-weight: 700;
+  color: var(--fpi-muted);
+}
+
+._overlay_1ugh0_131 {
+  position: absolute;
+  inset: auto 0 0;
+  margin: 0;
+  padding: calc(var(--fpi-space) * 3) calc(var(--fpi-space) * 4);
+  font-weight: 600;
+  color: var(--fpi-text);
+  background: var(--fpi-surface);
+  border-top: 1px solid var(--fpi-border);
+}
+
+._problem_1ugh0_153 {
+  margin: 0;
+  font-size: 0.875em;
+  color: var(--fpi-danger);
+}
+
+._captions_1ugh0_165 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--fpi-space) * 1.5);
+  font-size: 0.9375em;
+}
+
+._captions_1ugh0_165 p {
+  margin: 0;
+}
+
+._speaker_1ugh0_187 {
+  font-weight: 600;
+}
+
+._user_1ugh0_195 {
+  color: var(--fpi-muted);
+}
+
+._assistant_1ugh0_203 {
+  color: inherit;
+}
+
+._controls_1ugh0_211 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: calc(var(--fpi-space) * 2.5);
+}
+
+._primary_1ugh0_225,
+._secondary_1ugh0_227,
+._danger_1ugh0_229 {
+  padding: calc(var(--fpi-space) * 2.5) calc(var(--fpi-space) * 4.5);
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.25;
+  border-radius: var(--fpi-radius);
+  cursor: pointer;
+}
+
+/* Explicit backgrounds: host resets (e.g. Tailwind Preflight) clear button defaults. */
+._primary_1ugh0_225 {
+  color: var(--fp-color-on-accent, inherit);
+  background: var(--fp-color-accent, transparent);
+  border: 2px solid var(--fpi-accent);
+}
+
+._secondary_1ugh0_227 {
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--fpi-border);
+}
+
+._danger_1ugh0_229 {
+  color: var(--fpi-danger);
+  background: transparent;
+  border: 2px solid var(--fpi-danger);
+}
+
+._primary_1ugh0_225:focus-visible,
+._secondary_1ugh0_227:focus-visible,
+._danger_1ugh0_229:focus-visible {
+  outline: 2px solid var(--fpi-accent);
+  outline-offset: 2px;
+}
+
+._primary_1ugh0_225:disabled,
+._secondary_1ugh0_227:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+/* The user's avatars to choose from (only when the host names none). */
+._choices_1ugh0_313 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: calc(var(--fpi-space) * 2);
+}
+
+._choice_1ugh0_313 {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--fpi-space) * 2);
+  padding: var(--fpi-space) calc(var(--fpi-space) * 3) var(--fpi-space) var(--fpi-space);
+  font: inherit;
+  font-size: 0.875em;
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--fpi-border);
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+._choice_1ugh0_313[aria-checked="true"] {
+  font-weight: 600;
+  border-color: var(--fpi-accent);
+  box-shadow: inset 0 0 0 1px var(--fpi-accent);
+}
+
+._choice_1ugh0_313:focus-visible {
+  outline: 2px solid var(--fpi-accent);
+  outline-offset: 2px;
+}
+
+._choice_1ugh0_313:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+._thumb_1ugh0_387 {
+  display: inline-grid;
+  place-items: center;
+  width: 2em;
+  height: 2em;
+  object-fit: cover;
+  font-weight: 700;
+  color: var(--fpi-muted);
+  background: var(--fpi-surface-muted);
+  border-radius: 50%;
+}
+/* Display-mode containers. Scoped; no global selectors. Both lift the
+   components' default width limit (--fp-content-max-width) so the component
+   fills the space the host gives it, and are size containers so components
+   adapt to them rather than to the viewport. */
+
+._page_1q0su_11 {
+  display: block;
+  width: 100%;
+  container-type: inline-size;
+  --fp-content-max-width: none;
+}
+
+/* The dialog is the frame; components inside drop their own border and
+   shadow so there is no frame within a frame. Its surface falls back to the
+   system Canvas colours (what a native dialog uses), never a fixed colour. */
+._overlay_1q0su_31 {
+  max-height: calc(100% - 2rem);
+  padding: 0;
+  overflow: auto;
+  color: var(--fp-color-text, CanvasText);
+  background: var(--fp-color-surface, Canvas);
+  border: 0;
+  /* The dimmed backdrop already sets it apart; a host may add --fp-shadow. */
+  box-shadow: var(--fp-shadow, none);
+  container-type: inline-size;
+  --fp-content-max-width: none;
+  --fpi-frame-border: 0;
+  --fpi-frame-shadow: none;
+}
+
+/* A dimmer is always dark: the light scheme's CanvasText is the system's
+   near-black, whatever scheme the host has switched the overlay to. */
+._overlay_1q0su_31::backdrop {
+  color-scheme: light;
+  background: color-mix(in srgb, CanvasText 45%, transparent);
+}
+
+._modal_1q0su_75 {
+  width: min(36rem, calc(100% - 2rem));
+  border-radius: calc(var(--fp-radius, 0.375rem) * 1.5);
+}
+
+/* A side drawer: full height at the inline end of the viewport. */
+._drawer_1q0su_87 {
+  width: min(28rem, 100%);
+  height: 100%;
+  max-height: none;
+  margin-block: 0;
+  margin-inline: auto 0;
+  border-radius: 0;
+}