/**
 * Result actions, saved domains and comparison.
 *
 * Brandagy's tokens with a fallback on each, logical properties throughout, and
 * nothing that needs a second rule for RTL. Sits on top of public-search.css and
 * reuses its buttons and badges rather than restating them.
 */

/* ------------------------------------------------------------ the overflow */

.bysd-res { position: relative; }

.bysd-res__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  min-block-size: 36px;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: var(--text-muted, rgba(0, 0, 0, .6));
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
}

.bysd-res__menu:hover { border-color: var(--line, #e2e4d9); }
.bysd-res__menu:focus-visible { outline: 2px solid var(--accent, #567307); outline-offset: 2px; }

.bysd-menu {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% - 8px);
  inset-inline-end: var(--s-4, 16px);
  min-inline-size: 190px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e4d9);
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 1px 2px rgba(11, 59, 46, .05), 0 16px 36px -24px rgba(11, 59, 46, .4);
}

.bysd-menu__item {
  display: block;
  inline-size: 100%;
  min-block-size: 40px;
  padding-inline: var(--s-3, 12px);
  font: inherit;
  font-size: var(--fs-meta, .8125rem);
  text-align: start;
  color: var(--text, rgba(0, 0, 0, .9));
  background: none;
  border: 0;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
}

.bysd-menu__item:hover { background: var(--bg, #f7f8f3); }
.bysd-menu__item:focus-visible { outline: 2px solid var(--accent, #567307); outline-offset: -2px; }

/* Saved and selected are stated in the label as well as the fill, so neither
   depends on being able to see a colour. */
.bysd-menu__item[aria-pressed="true"] { font-weight: var(--fw-medium, 500); color: var(--ink, #0b3b2e); }
.bysd-menu__item[aria-pressed="true"]::before { content: '✓ '; color: var(--success, #2f7a55); }

/* ----------------------------------------------------------------- the tray */

.bysd-tray {
  position: sticky;
  inset-block-end: var(--s-3, 12px);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3, 12px);
  margin-block-start: var(--s-4, 16px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  background: var(--ink, #0b3b2e);
  color: var(--on-ink, #fff);
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 12px 30px -18px rgba(11, 59, 46, .6);
}

.bysd-tray__count { flex: 1 1 auto; margin: 0; font-size: var(--fs-meta, .8125rem); }
.bysd-tray__actions { display: flex; gap: var(--s-2, 8px); }

.bysd-tray .bysd-ps__button--primary {
  color: var(--ink, #0b3b2e);
  background: var(--on-ink, #fff);
  border-color: var(--on-ink, #fff);
}

.bysd-tray .bysd-ps__button--primary[disabled] { opacity: .55; cursor: not-allowed; }
.bysd-tray .bysd-ps__button--quiet { color: var(--on-ink-muted, rgba(247, 248, 243, .6)); }

/* ----------------------------------------------------------- the comparison */

.bysd-cmp { position: fixed; inset: 0; z-index: 1000; }
.bysd-cmp__scrim { position: absolute; inset: 0; background: var(--scrim, rgba(11, 59, 46, .34)); }

.bysd-cmp__panel {
  position: absolute;
  inset-block: 6vh;
  inset-inline: 50%;
  transform: translateX(50%);
  display: flex;
  flex-direction: column;
  inline-size: min(900px, calc(100vw - 32px));
  background: var(--surface, #fff);
  border-radius: var(--r-xl, 24px);
  box-shadow: 0 24px 60px -30px rgba(11, 59, 46, .5);
  overflow: hidden;
}

/* Mirrors correctly: translateX flips sign with the document direction. */
[dir="ltr"] .bysd-cmp__panel { transform: translateX(-50%); }

.bysd-cmp__head {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  padding: var(--s-4, 16px) var(--s-5, 24px);
  border-block-end: 1px solid var(--line, #e2e4d9);
}

.bysd-cmp__title { flex: 1; margin: 0; font-size: var(--fs-h3, 1.0625rem); color: var(--ink, #0b3b2e); }
.bysd-cmp__title:focus-visible { outline: 2px solid var(--accent, #567307); outline-offset: 3px; }

.bysd-cmp__close {
  inline-size: 40px;
  block-size: 40px;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted, rgba(0, 0, 0, .6));
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.bysd-cmp__close:hover { background: var(--bg, #f7f8f3); }

.bysd-cmp__body { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--s-4, 16px) var(--s-5, 24px) var(--s-5, 24px); }
.bysd-cmp__loading { padding: var(--s-6, 32px); text-align: center; color: var(--text-muted, rgba(0, 0, 0, .6)); }

.bysd-cmp__warning {
  margin: 0 0 var(--s-3, 12px);
  padding: var(--s-3, 12px);
  font-size: var(--fs-meta, .8125rem);
  color: var(--warning, #b4761e);
  background: var(--warning-tint, #faf1e2);
  border-radius: var(--r-md, 12px);
}

.bysd-cmp__verdict { margin: 0 0 var(--s-4, 16px); font-size: var(--fs-body, .875rem); }
.bysd-cmp__rule { display: block; margin-block-start: 4px; font-size: var(--fs-label, .75rem); color: var(--text-muted, rgba(0, 0, 0, .6)); }

/* The table scrolls inside its own box; the page never moves sideways. */
.bysd-cmp__scroll { overflow-x: auto; }

.bysd-cmp__table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-meta, .8125rem); }

.bysd-cmp__table th,
.bysd-cmp__table td {
  padding: var(--s-2, 8px) var(--s-3, 12px);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--line, #e2e4d9);
}

.bysd-cmp__table thead th { position: sticky; inset-block-start: 0; background: var(--surface, #fff); }
.bysd-cmp__table tbody th { color: var(--text-muted, rgba(0, 0, 0, .6)); font-weight: var(--fw-regular, 400); white-space: nowrap; }

.bysd-cmp__name { display: block; font-size: var(--fs-body, .875rem); font-weight: var(--fw-bold, 600); color: var(--ink, #0b3b2e); }

.bysd-cmp__flag {
  display: inline-block;
  margin-block-start: 4px;
  margin-inline-end: 4px;
  padding: 1px 8px;
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-medium, 500);
  color: var(--success, #2f7a55);
  background: var(--success-tint, #e5f2eb);
  border-radius: var(--r-full, 999px);
}

.bysd-cmp__none { color: var(--text-soft, #93a498); }
.bysd-cmp__value { unicode-bidi: isolate; }
.bysd-cmp__points { margin: 0; padding-inline-start: 1.1em; }
.bysd-cmp__points--bad { color: var(--warning, #b4761e); }

body.bysd-locked { overflow: hidden; }

@media (max-width: 780px) {
  /* Full screen on a phone: a 900px table in a centred dialog is a table
     nobody can read. */
  .bysd-cmp__panel {
    inset: 0;
    inline-size: 100%;
    transform: none;
    border-radius: 0;
  }

  [dir="ltr"] .bysd-cmp__panel { transform: none; }

  .bysd-cmp__body { padding-inline: var(--s-4, 16px); }
  .bysd-tray { inset-block-end: 0; border-radius: var(--r-lg, 18px) var(--r-lg, 18px) 0 0; }
  .bysd-tray__actions { inline-size: 100%; }
  .bysd-tray__actions .bysd-ps__button { flex: 1 1 auto; }
}

/* -------------------------------------------------------- the saved page */

.bysd-saved__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3, 12px); margin-block-end: var(--s-4, 16px); }
.bysd-saved__title { margin: 0; font-size: var(--fs-h2, 1.5rem); color: var(--ink, #0b3b2e); }
.bysd-saved__count { margin: 0; font-size: var(--fs-meta, .8125rem); color: var(--text-muted, rgba(0, 0, 0, .6)); }
.bysd-saved__note { margin-block-end: var(--s-4, 16px); font-size: var(--fs-meta, .8125rem); color: var(--text-muted, rgba(0, 0, 0, .6)); }

.bysd-saved__list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e4d9);
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
}

.bysd-saved__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2, 8px) var(--s-4, 16px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
}

.bysd-saved__item + .bysd-saved__item { border-block-start: 1px solid var(--line, #e2e4d9); }
.bysd-saved__main { flex: 1 1 14em; min-inline-size: 0; }
.bysd-saved__domain { margin: 0; font-size: var(--fs-body-lg, .9375rem); font-weight: var(--fw-bold, 600); color: var(--ink, #0b3b2e); overflow-wrap: anywhere; }
.bysd-saved__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 8px); margin: 4px 0 0; font-size: var(--fs-label, .75rem); color: var(--text-muted, rgba(0, 0, 0, .6)); }

/* Never dropped and never abbreviated: the status on this page is history. */
.bysd-saved__historical { color: var(--text-soft, #93a498); }

.bysd-saved__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3, 12px); }
.bysd-saved__price { font-weight: var(--fw-bold, 600); font-variant-numeric: tabular-nums; }
.bysd-saved__actions { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); }

.bysd-saved__empty {
  padding: var(--s-6, 32px);
  text-align: center;
  background: var(--surface, #fff);
  border: 1px dashed var(--line, #e2e4d9);
  border-radius: var(--r-lg, 18px);
}

.bysd-saved__empty-title { margin: 0 0 var(--s-2, 8px); font-weight: var(--fw-medium, 500); color: var(--ink, #0b3b2e); }
.bysd-saved__empty-body { margin: 0; font-size: var(--fs-meta, .8125rem); color: var(--text-muted, rgba(0, 0, 0, .6)); }

@media (max-width: 560px) {
  .bysd-saved__end { inline-size: 100%; }
  .bysd-saved__actions { inline-size: 100%; }
  .bysd-saved__actions .bysd-ps__button { flex: 1 1 auto; min-block-size: 40px; }
}

/* ------------------------------------------------------------- collections */

.bysd-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2, 8px);
  margin-block-end: var(--s-3, 12px);
}

.bysd-cols__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  padding-inline: var(--s-3, 12px);
  font: inherit;
  font-size: var(--fs-meta, .8125rem);
  color: var(--text, rgba(0, 0, 0, .9));
  background: var(--bg, #f7f8f3);
  border: 1px solid var(--line, #e2e4d9);
  border-radius: var(--r-full, 999px);
  cursor: pointer;
}

.bysd-cols__chip:focus-visible { outline: 2px solid var(--accent, #567307); outline-offset: 2px; }

/* Selected is fill plus weight, never colour alone. */
.bysd-cols__chip.is-on {
  font-weight: var(--fw-medium, 500);
  color: var(--on-ink, #fff);
  background: var(--ink, #0b3b2e);
  border-color: var(--ink, #0b3b2e);
}

.bysd-cols__count { font-size: var(--fs-label, .75rem); opacity: .7; font-variant-numeric: tabular-nums; }

/* The colour is a quiet marker on the edge of the chip, not the chip itself:
   a wall of saturated pills would read as tags, and these are folders. */
.bysd-cols__chip--lime { box-shadow: inset 3px 0 0 0 var(--lime, #b3f00a); }
.bysd-cols__chip--sand { box-shadow: inset 3px 0 0 0 var(--warning, #b4761e); }
.bysd-cols__chip--clay { box-shadow: inset 3px 0 0 0 var(--error, #a33a3a); }
.bysd-cols__chip--sky { box-shadow: inset 3px 0 0 0 var(--info, #2c6e8f); }
.bysd-cols__chip--plum { box-shadow: inset 3px 0 0 0 #7a4b7a; }
.bysd-cols__chip--slate { box-shadow: inset 3px 0 0 0 var(--text-soft, #93a498); }
.bysd-cols__chip--green { box-shadow: inset 3px 0 0 0 var(--success, #2f7a55); }

.bysd-cols__new {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2, 8px);
  margin-block-end: var(--s-4, 16px);
}

.bysd-cols__new input {
  flex: 1 1 14em;
  min-block-size: 40px;
  padding-inline: var(--s-3, 12px);
  font: inherit;
  font-size: var(--fs-meta, .8125rem);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e4d9);
  border-radius: var(--r-md, 12px);
}

.bysd-cols__select {
  min-block-size: 36px;
  max-inline-size: 12em;
  font: inherit;
  font-size: var(--fs-meta, .8125rem);
  border: 1px solid var(--line, #e2e4d9);
  border-radius: var(--r-md, 12px);
}

@media (max-width: 560px) {
  .bysd-cols__select { inline-size: 100%; max-inline-size: none; }
}

/* -------------------------------------------------- collections, completed */

.bysd-cols__group { display: inline-flex; align-items: stretch; gap: 2px; }

.bysd-cols__move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  min-block-size: 36px;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: var(--text-muted, rgba(0, 0, 0, .6));
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
}

.bysd-cols__move:hover:not([disabled]) { border-color: var(--line, #e2e4d9); color: var(--ink, #0b3b2e); }
.bysd-cols__move:focus-visible { outline: 2px solid var(--accent, #567307); outline-offset: 2px; }
.bysd-cols__move[disabled] { opacity: .3; cursor: default; }

.bysd-cols__bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3, 12px); margin-block: 0 var(--s-4, 16px); }
.bysd-cols__filer { position: relative; display: inline-flex; }
.bysd-cols__itemorder { display: inline-flex; gap: 2px; }

.bysd-menu--file { inset-inline-end: 0; inset-block-start: calc(100% + 4px); min-inline-size: 220px; }

/* A tick that is also a word: the menu item reads as checked to a screen
   reader through aria-checked, and to everyone else through the mark. */
.bysd-menu__item[aria-checked="true"]::before { content: '✓ '; color: var(--success, #2f7a55); }

.bysd-menu__new { display: flex; gap: 6px; margin-block-start: 6px; padding-block-start: 6px; border-block-start: 1px solid var(--line, #e2e4d9); }
.bysd-menu__new input {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 36px;
  padding-inline: var(--s-2, 8px);
  font: inherit;
  font-size: var(--fs-meta, .8125rem);
  border: 1px solid var(--line, #e2e4d9);
  border-radius: var(--r-md, 12px);
}

/* ---------------------------------------------------------- the editor */

.bysd-editor { position: fixed; inset: 0; z-index: 1100; }
.bysd-editor__scrim { position: absolute; inset: 0; background: var(--scrim, rgba(11, 59, 46, .34)); }

.bysd-editor__panel {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  inline-size: min(420px, calc(100vw - 32px));
  padding: var(--s-5, 24px);
  background: var(--surface, #fff);
  border-radius: var(--r-xl, 24px);
  box-shadow: 0 24px 60px -30px rgba(11, 59, 46, .5);
}

[dir="ltr"] .bysd-editor__panel { transform: translate(-50%, -50%); }

.bysd-editor__grip { display: none; }
.bysd-editor__title { margin: 0 0 var(--s-4, 16px); font-size: var(--fs-h3, 1.0625rem); color: var(--ink, #0b3b2e); }
.bysd-editor__title:focus-visible { outline: 2px solid var(--accent, #567307); outline-offset: 3px; }

.bysd-editor__label {
  display: block;
  margin-block-end: 6px;
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-medium, 500);
  color: var(--text-muted, rgba(0, 0, 0, .6));
}

.bysd-editor__panel input[type="text"],
.bysd-editor__panel textarea {
  inline-size: 100%;
  min-block-size: 44px;
  margin-block-end: var(--s-3, 12px);
  padding: var(--s-2, 8px) var(--s-3, 12px);
  font: inherit;
  font-size: 1rem;
  background: var(--bg, #f7f8f3);
  border: 1px solid var(--line, #e2e4d9);
  border-radius: var(--r-md, 12px);
}

.bysd-editor__panel fieldset { margin: 0 0 var(--s-3, 12px); padding: 0; border: 0; }
.bysd-editor__error { margin: -6px 0 var(--s-3, 12px); font-size: var(--fs-meta, .8125rem); color: var(--error, #a33a3a); }

.bysd-editor__palette { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); }

.bysd-editor__swatch {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: var(--s-3, 12px);
  font-size: var(--fs-label, .75rem);
  background: var(--bg, #f7f8f3);
  border: 1px solid var(--line, #e2e4d9);
  border-radius: var(--r-full, 999px);
  cursor: pointer;
}

/* The colour name is written out, so the choice never depends on seeing it. */
.bysd-editor__swatch input { margin-inline-end: 6px; }
.bysd-editor__swatch:has(input:checked) { border-color: var(--ink, #0b3b2e); font-weight: var(--fw-medium, 500); }
.bysd-editor__swatch:focus-within { outline: 2px solid var(--accent, #567307); outline-offset: 2px; }

.bysd-editor__actions { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); }
.bysd-editor__actions [data-bysd-editor-delete] { margin-inline-start: auto; color: var(--error, #a33a3a); }

@media (max-width: 780px) {
  /* A bottom sheet on a phone: a centred dialog above the keyboard is a dialog
     nobody can fill in. */
  .bysd-editor__panel {
    inset: auto 0 0 0;
    inline-size: 100%;
    max-block-size: 85vh;
    overflow-y: auto;
    transform: none;
    border-radius: var(--r-xl, 24px) var(--r-xl, 24px) 0 0;
    padding-block-end: calc(var(--s-5, 24px) + env(safe-area-inset-bottom, 0px));
  }

  [dir="ltr"] .bysd-editor__panel { transform: none; }

  .bysd-editor__grip {
    display: block;
    inline-size: 38px;
    block-size: 4px;
    margin: 0 auto var(--s-3, 12px);
    border-radius: 999px;
    background: var(--line, #e2e4d9);
  }

  .bysd-editor__actions .bysd-ps__button { flex: 1 1 auto; }
}

/* The filer opened from a result row hangs off the row's action group, so it
   needs the same positioning context the row already provides. */
.bysd-res__actions { position: relative; }

.bysd-menu__note {
  margin: 0 0 var(--s-2, 8px);
  padding-inline: var(--s-2, 8px);
  font-size: var(--fs-meta, .8125rem);
  color: var(--text-muted, rgba(0, 0, 0, .6));
}

.bysd-menu__wide { inline-size: 100%; }

/* ------------------------------------------------------------- monitoring */

/*
 * One component in two shapes: a popover anchored to the result on a wide
 * screen, a bottom sheet on a narrow one. The difference is a modifier class
 * and a media query, not a second implementation.
 *
 * Logical properties throughout, so Arabic mirrors without a second stylesheet.
 */

.bysd-res__watchbadge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: #dcfce7;
	color: #166534;
	font-size: 0.75rem;
	white-space: nowrap;
}

.bysd-res__watchbadge.is-paused {
	background: var( --bysd-chip, #f3f4f6 );
	color: var( --bysd-muted, #6b7280 );
}

.bysd-mon {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc( 100% + 0.375rem );
	z-index: 40;
	inline-size: min( 20rem, calc( 100vw - 2rem ) );
	padding: 0.875rem;
	border: 1px solid var( --bysd-border, #e5e7eb );
	border-radius: 0.75rem;
	background: var( --bysd-surface, #fff );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
	text-align: start;
}

.bysd-mon__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block-end: 0.5rem;
}

.bysd-mon__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.bysd-mon__close {
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	border: 0;
	background: transparent;
	color: var( --bysd-muted, #6b7280 );
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.bysd-mon__close:focus-visible,
.bysd-mon__rule input:focus-visible {
	outline: 2px solid var( --bysd-accent, #2563eb );
	outline-offset: 2px;
}

.bysd-mon__domain {
	margin: 0 0 0.25rem;
	font-weight: 600;

	/* A Latin domain inside Arabic text keeps its own direction. */
	unicode-bidi: isolate;
}

.bysd-mon__meta,
.bysd-mon__why,
.bysd-mon__legend,
.bysd-mon__status {
	margin: 0 0 0.5rem;
	color: var( --bysd-muted, #6b7280 );
	font-size: 0.8125rem;
}

.bysd-mon__legend {
	margin-block-start: 0.75rem;
	font-weight: 600;
	color: inherit;
}

.bysd-mon__why {
	margin-block-start: -0.25rem;
	padding-inline-start: 1.625rem;
	font-size: 0.75rem;
}

.bysd-mon__rule {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;

	/* 44px touch target, met by padding rather than a fixed height so a
	   two-line label still grows. */
	padding-block: 0.625rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.bysd-mon__rule.is-disabled {
	opacity: 0.55;
	cursor: default;
}

.bysd-mon__rule--sep {
	margin-block-start: 0.25rem;
	border-block-start: 1px solid var( --bysd-border, #e5e7eb );
	padding-block-start: 0.625rem;
}

.bysd-mon__rule input {
	margin: 0;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	flex: 0 0 auto;
}

.bysd-mon__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 0.75rem;
}

.bysd-mon__foot--minor {
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid var( --bysd-border, #e5e7eb );
}

.bysd-mon__danger {
	color: #991b1b;
}

.bysd-mon__guest {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.bysd-mon__status:empty {
	display: none;
}

@media ( max-width: 640px ) {
	.bysd-mon--sheet {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		inset-block-start: auto;
		inline-size: auto;
		max-block-size: 85vh;
		overflow-y: auto;
		border-radius: 1rem 1rem 0 0;

		/* Clear of the home indicator on a notched phone. */
		padding-block-end: calc( 0.875rem + env( safe-area-inset-bottom ) );
		box-shadow: 0 -8px 32px rgba( 0, 0, 0, 0.18 );
	}

	.bysd-mon--sheet .bysd-mon__primary {
		flex: 1 1 100%;
	}
}