/**
 * Domain search history.
 *
 * Brandagy's own tokens with a fallback on each, so it inherits the site's warm
 * off-white, dark green and hairline border rather than bringing a palette of
 * its own. Logical properties throughout: the dropdown anchors to the trigger's
 * inline-start and mirrors with the document, so RTL needs no second rule.
 *
 * A dropdown on a desktop, a bottom sheet on a phone. Both are the same panel.
 */

.bysd-history {
  --bysd-h-surface: var(--surface, #fff);
  --bysd-h-bg: var(--bg, #f7f8f3);
  --bysd-h-line: var(--line, #e2e4d9);
  --bysd-h-ink: var(--ink, #0b3b2e);
  --bysd-h-text: var(--text, rgba(0, 0, 0, .9));
  --bysd-h-muted: var(--text-muted, rgba(0, 0, 0, .6));
  --bysd-h-accent: var(--accent, #567307);
  --bysd-h-ok: var(--success, #2f7a55);
}

/* ---------------------------------------------------------------- trigger */

/* The button inherits .header-me__item from the theme; only the badge and the
   open state are ours. */
.bysd-history__trigger { position: relative; background: none; border: 0; font: inherit; cursor: pointer; }
.bysd-history__trigger[aria-expanded="true"] { color: var(--ink, #0b3b2e); }

/* A count, not an alarm. The theme's notification badge is red because
   something needs doing; nothing here does. */
.bysd-history__badge {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -6px;
  min-inline-size: 16px;
  padding-inline: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--ink, #0b3b2e);
  background: var(--accent-tint, #eef9d2);
  border: 1px solid var(--accent-line, #d6ee9c);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ panel */

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

.bysd-history__panel {
  position: fixed;
  z-index: 999;
  display: flex;
  flex-direction: column;
  inline-size: min(400px, calc(100vw - 20px));
  max-block-size: 520px;
  background: var(--bysd-h-surface);
  border: 1px solid var(--bysd-h-line);
  border-radius: var(--r-lg, 18px);
  /* One soft shadow. The panel is close to the surface, not floating over it. */
  box-shadow: 0 1px 2px rgba(11, 59, 46, .05), 0 18px 44px -26px rgba(11, 59, 46, .4);
  color: var(--bysd-h-text);
  overflow: hidden;
}

.bysd-history__grip { display: none; }

.bysd-history__head {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  padding: var(--s-4, 16px) var(--s-4, 16px) var(--s-3, 12px);
  border-block-end: 1px solid var(--bysd-h-line);
}

.bysd-history__title {
  flex: 1;
  margin: 0;
  font-size: var(--fs-body, .875rem);
  font-weight: var(--fw-bold, 600);
  color: var(--bysd-h-ink);
}

.bysd-history__title:focus-visible { outline: 2px solid var(--bysd-h-accent); outline-offset: 3px; }

.bysd-history__count { margin: 0; font-size: var(--fs-label, .75rem); color: var(--bysd-h-muted); }

.bysd-history__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  color: var(--bysd-h-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.bysd-history__close:hover { background: var(--bysd-h-bg); color: var(--bysd-h-ink); }

.bysd-history__body {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------------- list */

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

.bysd-history__item {
  display: flex;
  align-items: stretch;
  gap: var(--s-1, 4px);
  padding-inline: var(--s-2, 8px);
}

.bysd-history__item + .bysd-history__item { border-block-start: 1px solid var(--bysd-h-line); }

/* One row is one button. The whole thing is the target, so a phone does not
   need a precise tap and a keyboard needs one stop. */
.bysd-history__restore {
  flex: 1;
  display: grid;
  gap: 2px;
  min-block-size: 44px;
  padding: var(--s-3, 12px) var(--s-2, 8px);
  font: inherit;
  text-align: start;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
}

.bysd-history__restore:hover { background: var(--bysd-h-bg); }
.bysd-history__restore:focus-visible,
.bysd-history__remove:focus-visible,
.bysd-history__clear:focus-visible { outline: 2px solid var(--bysd-h-accent); outline-offset: -2px; }

.bysd-history__query {
  font-size: var(--fs-body, .875rem);
  font-weight: var(--fw-medium, 500);
  color: var(--bysd-h-ink);
  overflow-wrap: anywhere;
}

.bysd-history__tlds,
.bysd-history__meta,
.bysd-history__last {
  font-size: var(--fs-label, .75rem);
  color: var(--bysd-h-muted);
  /* Mixed Arabic and Latin on one line: isolated so a domain or a count cannot
     drag the rest of the sentence around it. */
  unicode-bidi: isolate;
}

.bysd-history__last { color: var(--bysd-h-ok); }

.bysd-history__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  color: var(--bysd-h-muted);
  background: none;
  border: 0;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
}

.bysd-history__remove:hover { background: var(--bysd-h-bg); color: var(--error, #a33a3a); }

/* ------------------------------------------------------ empty and loading */

.bysd-history__empty { padding: var(--s-6, 32px) var(--s-5, 24px); text-align: center; }
.bysd-history__empty-title { margin: 0 0 var(--s-2, 8px); font-weight: var(--fw-medium, 500); color: var(--bysd-h-ink); }
.bysd-history__empty-body { margin: 0; font-size: var(--fs-meta, .8125rem); color: var(--bysd-h-muted); }
.bysd-history__loading { padding: var(--s-5, 24px); margin: 0; text-align: center; font-size: var(--fs-meta, .8125rem); color: var(--bysd-h-muted); }

.bysd-history__foot { padding: var(--s-2, 8px) var(--s-3, 12px); border-block-start: 1px solid var(--bysd-h-line); }

.bysd-history__clear {
  inline-size: 100%;
  min-block-size: 40px;
  font: inherit;
  font-size: var(--fs-meta, .8125rem);
  color: var(--bysd-h-muted);
  background: none;
  border: 0;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
}

.bysd-history__clear:hover { background: var(--bysd-h-bg); color: var(--error, #a33a3a); }

/* ---------------------------------------------------------- bottom sheet */

@media (max-width: 780px) {
  .bysd-history__panel.is-sheet {
    inset-block-end: 0;
    inset-inline: 0;
    inline-size: 100%;
    max-block-size: 82vh;
    /* The sheet sits on the bottom edge, so only the top corners round. */
    border-radius: var(--r-xl, 24px) var(--r-xl, 24px) 0 0;
    border-block-end: 0;
    /* Clears the home indicator on a phone without padding every other device. */
    padding-block-end: env(safe-area-inset-bottom, 0);
  }

  .bysd-history__panel.is-sheet .bysd-history__grip {
    display: block;
    inline-size: 38px;
    block-size: 4px;
    margin: var(--s-2, 8px) auto 0;
    border-radius: 999px;
    background: var(--bysd-h-line);
  }

  /* The head stays put while the list moves under it. */
  .bysd-history__panel.is-sheet .bysd-history__head {
    position: sticky;
    inset-block-start: 0;
    background: var(--bysd-h-surface);
    z-index: 1;
  }
}

/* Only the sheet locks the page behind it. */
body.bysd-history-locked { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .bysd-history__panel { animation: bysd-history-in .18s cubic-bezier(.22, 1, .36, 1); }

  @keyframes bysd-history-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  .bysd-history__panel.is-sheet { animation-name: bysd-history-up; }

  @keyframes bysd-history-up {
    from { transform: translateY(12px); }
    to { transform: none; }
  }
}