/*
 * Directory styles. Logical properties throughout, so the layout follows dir="rtl".
 * One token set (design proposal 2026-10-20, revision 2). Type sizes are in rem so the reader's
 * text-size setting applies; nothing has a fixed height, so zoom and wrapping never clip text.
 */

:root {
  color-scheme: light dark;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --sunken: #eef0f3;
  --border: #e1e4e8;
  /* Control borders: at least 3:1 against the surface. */
  --border-strong: #858e9c;
  --text: #1b1e23;
  --muted: #59616e;
  --accent: #0b5cad;
  --accent-solid: #0b5cad;
  --on-accent: #ffffff;
  --tint: #e7f0fb;
  --ok: #16653a;
  --warn: #8a4f00;
  --warn-tint: #fff2dc;
  --info: #123f6e;
  --info-tint: #e8f1fc;
  --neutral: #474f5e;
  --neutral-tint: #eceef2;
  --shadow-up: 0 -4px 16px rgb(0 0 0 / 0.1);
  --shadow-float: 0 4px 16px rgb(0 0 0 / 0.2);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --font: system-ui, "Segoe UI", "Noto Sans Arabic UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --gutter: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  /* Heights of the sticky bars, measured by directory.js (0 without it). */
  --sticky-top: 0px;
  --sticky-bottom: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1114;
    --surface: #171a1f;
    --sunken: #1f2329;
    --border: #2a2f37;
    --border-strong: #6e7784;
    --text: #e8eaed;
    --muted: #a3aab5;
    --accent: #8ab8f0;
    --accent-solid: #2a66b3;
    --on-accent: #ffffff;
    --tint: #172a40;
    --ok: #92d6a9;
    --warn: #f0c27e;
    --warn-tint: #35270f;
    --info: #bcd6f6;
    --info-tint: #15263a;
    --neutral: #c6cbd3;
    --neutral-tint: #2a2f37;
    --shadow-up: 0 -4px 16px rgb(0 0 0 / 0.45);
    --shadow-float: 0 4px 16px rgb(0 0 0 / 0.5);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Controls stay hidden until enhanced; the search area may reserve layout space below. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Keyboard focus, in-page links and find-in-page stop clear of the sticky bars, whatever their height. */
  scroll-padding-block-start: calc(var(--sticky-top) + var(--s-2));
  scroll-padding-block-end: calc(var(--sticky-bottom) + var(--s-2));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a {
  color: var(--accent);
}

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

.wrap {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-2);
  inset-block-start: -100px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  z-index: 4;
}

.skip-link:focus {
  inset-block-start: var(--s-2);
}

/* Header: brand, then the four sections as ordinary links. */

.site-header {
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-5);
}

.brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
  min-block-size: 3.25rem;
  /* Room for the inner focus ring beside the mark, without moving the brand off the content edge. */
  padding: var(--s-1);
  margin-inline: calc(-1 * var(--s-1));
  color: var(--text);
  text-decoration: none;
}

/* The app's own launcher artwork, rounded like the favicon (22 % corners). */
.brand-mark {
  display: block;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 22%;
}

.brand-name {
  font-weight: 600;
}

.brand-sub {
  color: var(--muted);
  font-size: 0.875rem;
}

.site-nav {
  flex: 1 1 100%;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-nav a {
  display: flex;
  overflow-wrap: anywhere;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: var(--s-1);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-block-end: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--text);
}

/* Header links reach the top of the page, where an outer ring would be cut off: draw it inside. */
.site-header a:focus-visible {
  outline-offset: -3px;
}

.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-block-end-color: var(--accent-solid);
}

@media (min-width: 48rem) {
  .site-nav {
    flex: none;
  }

  .site-nav ul {
    display: flex;
    gap: var(--s-1);
  }

  .site-nav a {
    min-block-size: 3.75rem;
    padding-inline: var(--s-3);
    font-size: 0.9375rem;
  }
}

.notice {
  padding-block: var(--s-2);
  font-size: 0.9375rem;
  border-block-end: 1px solid var(--border);
}

.notice-info {
  background: var(--info-tint);
  color: var(--info);
}

.notice-warning {
  background: var(--warn-tint);
  color: var(--warn);
  font-weight: 600;
}

/* Page top */

.intro h1 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  margin-block: var(--s-4) var(--s-1);
}

.lead {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-block: 0 var(--s-3);
  max-inline-size: 48rem;
}

/* Collapsible panels: the instructions and the needs-confirmation group. */
.howto,
.group-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.howto {
  max-inline-size: 48rem;
  margin-block-end: var(--s-2);
}

.howto summary,
.group-panel summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 2.75rem;
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  list-style: none;
}

.howto summary {
  font-size: 0.9375rem;
  font-weight: 600;
}

.howto summary .icon {
  color: var(--muted);
}

.howto summary::-webkit-details-marker,
.group-panel summary::-webkit-details-marker {
  display: none;
}

/* A chevron drawn with borders: points down when closed, up when open. */
.howto summary::after,
.group-panel summary::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
}

.howto[open] > summary::after,
.group-panel[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.howto p {
  margin: 0;
  padding: 0 var(--s-3) var(--s-3);
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Search (revealed by directory.js). Sticky only where it leaves most of the screen to the list. */

.tools {
  background: var(--bg);
  padding-block: var(--s-3) var(--s-2);
}

@media (scripting: enabled) {
  /* Reserve the search area without showing or enabling its controls before enhancement. */
  .tools[hidden] {
    display: block !important;
    visibility: hidden;
  }

  .tools[hidden] .copy-all[hidden] {
    display: inline-flex !important;
  }
}

/* directory.js adds .tools-tall when the bar would take over a quarter of the screen (large text). */
@media (min-width: 40rem) and (min-height: 32rem) {
  .tools:not(.tools-tall) {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    border-block-end: 1px solid var(--border);
  }
}

.tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.tools-row > button {
  max-inline-size: 100%;
  min-inline-size: 0;
  flex-wrap: wrap;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  min-inline-size: 0;
}

.search-field .icon {
  position: absolute;
  inset-inline-start: var(--s-3);
  color: var(--muted);
  pointer-events: none;
}

/* Symmetric padding: the field switches direction (dir="auto") when a Latin domain is typed. */
.search-input {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  padding: var(--s-1) 2.5rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}

.search-input::placeholder {
  color: var(--muted);
}

.tools-status {
  margin: var(--s-2) 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.tools-status:not(:has(#search-status:not(:empty))) {
  display: none;
}

.search-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  margin-block: var(--s-4);
  max-inline-size: 48rem;
}

.search-empty p {
  margin: 0 0 var(--s-2);
}

/* Lists: one surface with divider rows */

.group {
  margin-block: var(--s-4) var(--s-6);
}

.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin-block-end: var(--s-2);
  /* The same inline padding as the rows, so the master checkbox sits above the row checkboxes. */
  padding-inline: calc(var(--s-3) + 1px);
}

.list-title {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.list-title h2,
.group-panel h2,
.group > h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.group-meta {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

.group-help,
.legend {
  color: var(--muted);
  font-size: 0.875rem;
  margin-block: 0 var(--s-2);
}

.legend {
  padding-inline: calc(var(--s-3) + 1px);
  font-size: 0.8125rem;
}

.group > h2 {
  margin-block-end: var(--s-2);
}

.group-panel summary .group-meta {
  font-weight: 400;
}

.group-panel .group-help,
.group-panel .legend {
  padding-inline: var(--s-3);
}

.group-panel .cards {
  border-inline: 0;
  border-block-end: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* The sort control may shrink below its longest option (large text on a phone) instead of widening the page. */
.sort-field {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.sort-select {
  min-block-size: 2.75rem;
  max-inline-size: 100%;
  padding-inline: var(--s-2);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}

.list-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-3);
  font-size: 0.875rem;
}

.page-range {
  margin: 0;
  color: var(--muted);
}

.page-controls,
.page-controls label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.page-controls {
  max-inline-size: 100%;
}

.page-controls button,
.page-select {
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  max-inline-size: 100%;
  padding: var(--s-1) var(--s-2);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
}

.page-controls button {
  cursor: pointer;
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* Rows draw the dividers; the first visible row's line becomes the top edge. */
  border-block-start: 0;
  overflow: hidden;
  container: rows / inline-size;
}

.native-page > details > summary {
  padding: var(--s-3);
  border-block-start: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
}

/*
 * Rows on phones: only the name shares its line with the actions; the domain, other names, notes and
 * facts take the full width below it. Selectable rows keep a checkbox column at the start.
 */
.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name actions"
    "detail detail"
    "facts facts";
  gap: 0 var(--s-2);
  padding: var(--s-3);
  border-block-start: 1px solid var(--border);
}

.cards.selectable > .card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "select name actions"
    ". detail detail"
    ". facts facts";
}

/* On phones the name and the details are placed separately; on wide lists they form one column. */
.card-main {
  display: contents;
}

.card-name {
  grid-area: name;
  align-self: center;
  min-inline-size: 0;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.card-detail {
  grid-area: detail;
  min-inline-size: 0;
}

.card-detail:empty {
  display: none;
}

/*
 * The site's icon (or the placeholder) at the start of the name's first line, in a box of fixed size, so a
 * slow, missing or broken image never moves the row. The name's lines, the details and (on phones) the facts
 * share the same start, after the icon.
 */
.card {
  --site-icon: 1.25rem;
  --site-icon-space: calc(var(--site-icon) + var(--s-2));
}

.card-name {
  position: relative;
  padding-inline-start: var(--site-icon-space);
}

.card-detail,
.card-facts {
  padding-inline-start: var(--site-icon-space);
}

.site-icon {
  position: absolute;
  inset-inline-start: 0;
  /* Centred on the first line of the name (its line-height is 1.45). */
  inset-block-start: calc((1.45em - var(--site-icon)) / 2);
  inline-size: var(--site-icon);
  block-size: var(--site-icon);
  overflow: hidden;
  border-radius: 0.3125rem;
  background: var(--sunken);
}

.site-icon img {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/*
 * No icon, or one that failed to load: a muted globe from one cached same-origin file. An image draws its
 * pseudo-elements only when it failed, so they cover the browser's broken-image symbol even without
 * JavaScript; directory.js then replaces the failed image with the plain placeholder.
 */
.site-icon img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sunken);
}

.site-icon-none::before,
.site-icon img::after {
  content: "";
  position: absolute;
  inset: 0.1875rem;
  background: var(--muted);
  mask: url("/assets/site-placeholder.svg") center / contain no-repeat;
}

.card-domain,
.card-aka,
.card-moved,
.card-note,
.card-outdated {
  margin: var(--s-1) 0 0;
  overflow-wrap: anywhere;
}

.card-aka,
.card-outdated {
  color: var(--muted);
  font-size: 0.875rem;
}

.card-moved,
.card-note {
  font-size: 0.9375rem;
}

.domain {
  font-family: var(--mono);
  font-size: 0.875rem;
  /* A domain moves to the next line as a whole and wraps inside only when it is wider than its box;
     its wrapped lines align with the start of the right-to-left text around it. */
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  text-align: right;
  /* One tap selects the whole domain for copying. */
  -webkit-user-select: all;
  user-select: all;
}

.card-name .domain {
  font-size: 0.9375rem;
}

/* In a list of other names, each separator stays on the line of the domain it follows. */
.alias {
  white-space: nowrap;
}

.alias .domain {
  white-space: normal;
  max-inline-size: calc(100% - 1em);
}

.card-facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
  list-style: none;
  margin: var(--s-1) 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.card-facts:empty {
  display: none;
}

.card-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  align-self: start;
  gap: var(--s-1);
  /* The 44px controls reach into the row's top padding, never into the line below. */
  margin-block-start: calc(-1 * var(--s-2));
}

.select-site {
  grid-area: select;
  align-self: start;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-start: calc(-1 * var(--s-2));
  margin-inline-start: calc(-1 * var(--s-2));
  cursor: pointer;
}

.select-site input,
.select-all input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--accent-solid);
  cursor: pointer;
}

.select-all {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-inline-start: calc(-1 * var(--s-2));
}

.badge {
  display: inline-block;
  margin-inline-start: var(--s-2);
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 0.1em;
  /* Moves to its own line as a whole; wraps inside only when even that line is too narrow (large text). */
  background: var(--neutral-tint);
  color: var(--neutral);
}

.badge-supported {
  background: var(--tint);
  color: var(--accent);
}

.badge-outdated {
  background: var(--warn-tint);
  color: var(--warn);
}

.badge-planned {
  background: var(--info-tint);
  color: var(--info);
}

/*
 * Layout changes follow the list's own width in rem: unlike a media query, it tracks the page's text
 * size, so enlarged text gets the roomier arrangement before any column becomes too narrow to read.
 */

/* Narrow lists (a small phone, or large text): the actions move under the text rather than squeeze the
   name below about 5.5rem. Rows with an add link need more room than rows with the copy button only. */
@container rows (width < 17.5rem) {
  .card:has(.add-link) {
    grid-template-areas:
      "name name"
      "detail detail"
      "facts facts"
      "actions actions";
  }

  .cards.selectable > .card:has(.add-link) {
    grid-template-areas:
      "select name name"
      ". detail detail"
      ". facts facts"
      ". actions actions";
  }

  .card:has(.add-link) > .card-actions {
    justify-content: flex-start;
    margin-block-start: var(--s-2);
  }
}

@container rows (width < 10.75rem) {
  .card {
    grid-template-areas:
      "name name"
      "detail detail"
      "facts facts"
      "actions actions";
  }

  .cards.selectable > .card:has(.select-site) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "select"
      "name"
      "detail"
      "facts"
      "actions";
  }

  .card > .card-actions {
    justify-content: flex-start;
    margin-block-start: var(--s-2);
  }
}

/* Wide lists: one aligned row per site. Fixed tracks for the facts and actions keep every row in line;
   the name column keeps at least 16rem. */
@container rows (min-width: 56.25rem) {
  .card {
    grid-template-columns: minmax(0, 1fr) 24.5rem 8.5rem;
    grid-template-areas: "main facts actions";
    align-items: center;
    column-gap: var(--s-4);
  }

  .cards.selectable > .card {
    grid-template-columns: auto minmax(0, 1fr) 24.5rem 8.5rem;
    grid-template-areas: "select main facts actions";
  }

  .card-main {
    display: block;
    grid-area: main;
    min-inline-size: 0;
  }

  .card-facts {
    display: grid;
    /* Sized for the longest date ("28 أغسطس 2026") and activity phrase; longer text still wraps. */
    grid-template-columns: 10.75rem 13rem;
    column-gap: var(--s-3);
    margin: 0;
    /* Its own column here, so no indent after the icon. */
    padding-inline-start: 0;
  }

  .fact-checked {
    grid-column: 1;
  }

  .fact-activity {
    grid-column: 2;
  }

  .card-facts:empty {
    display: grid;
  }

  .card-actions,
  .select-site {
    align-self: center;
    margin-block: 0;
  }
}

.empty {
  color: var(--muted);
}

/* Buttons: solid (one bulk action at a time), tonal (per row and "add all"), outline and icon. */

.icon-button {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
}

.icon-button:hover {
  color: var(--text);
  background: var(--sunken);
}

.copy-button .icon-done,
.copy-button.is-copied .icon-copy {
  display: none;
}

.copy-button.is-copied .icon-done {
  display: block;
}

.copy-button.is-copied {
  color: var(--ok);
}

.add-link,
.add-all,
.add-selected,
.copy-all,
.copy-selected,
.copy-batch,
.copy-close,
.handoff-batch,
.clear-search,
.handoff-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 2.75rem;
  padding: var(--s-1) var(--s-3);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
}

.search-empty-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

.suggestion-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-block: var(--s-1);
}

.suggestion-address {
  overflow-wrap: anywhere;
}

.add-link .icon,
.add-all .icon,
.add-selected .icon,
.copy-all .icon,
.copy-selected .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  stroke-width: 2.2;
}

.add-link,
.add-all,
.copy-all,
.copy-batch,
.selection-actions:has(.add-selected) .copy-selected {
  color: var(--accent);
  background: var(--tint);
}

/* Compact, since it shares the name's line on phones; the target stays 44px tall. */
.add-link {
  gap: var(--s-1);
  font-size: 0.875rem;
  padding-inline: var(--s-2);
}

.add-selected,
.copy-selected,
.handoff-batch {
  color: var(--on-accent);
  background: var(--accent-solid);
}

.clear-search,
.copy-close,
.handoff-close {
  color: var(--accent);
  background: transparent;
  border-color: var(--border-strong);
  font-weight: 400;
}

.add-link:hover,
.add-all:hover,
.copy-all:hover,
.copy-batch:hover,
.copy-close:hover,
.clear-search:hover,
.handoff-close:hover {
  background: var(--sunken);
}

.add-selected:hover,
.copy-selected:hover,
.handoff-batch:hover {
  filter: brightness(1.08);
}

.link-button {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* About page */

.prose {
  max-inline-size: 48rem;
  margin-block: var(--s-5);
}

.prose h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--s-2);
}

.prose p {
  margin-block: 0 var(--s-2);
}

.terms {
  margin: 0;
}

.terms dt {
  font-weight: 600;
  margin-block-start: var(--s-3);
}

.terms dt .badge {
  margin-inline-start: 0;
}

.terms dd {
  margin: 2px 0 0;
  color: var(--muted);
}

/* Bottom dock: copy feedback above the selection bar, one sticky column */

.dock {
  position: sticky;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
}

/* Enlarged text can make the action bar taller than the content left above it. */
.dock.dock-tall {
  position: static;
}

.copy-status {
  align-self: center;
  max-inline-size: min(32rem, 100%);
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.9375rem;
  text-align: center;
  /* Long unbroken text (a domain in an announcement) wraps instead of widening the page. */
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-float);
}

.copy-status:empty {
  display: none;
}

/* Without the bar below it, the feedback keeps clear of the screen edge and any safe area. */
.dock:not(:has(.selection-bar:not([hidden]))) .copy-status {
  margin-block-end: max(var(--s-4), env(safe-area-inset-bottom));
}

.selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3) max(var(--s-2), env(safe-area-inset-bottom));
  background: var(--surface);
  border: 1px solid var(--border);
  border-block-end: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-up);
}

.selection-count {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 600;
}

.selection-note {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.selection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
}

/* Confirmation dialog */

.handoff-dialog,
.bulk-copy-dialog {
  inline-size: min(32rem, calc(100vw - 2rem));
  padding: var(--s-4);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-block-size: calc(100svh - 2rem);
  overflow: auto;
}

.handoff-dialog::backdrop,
.bulk-copy-dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
}

.handoff-dialog h2,
.bulk-copy-dialog h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

.handoff-summary,
.handoff-note {
  margin: 0 0 var(--s-2);
}

.handoff-note,
.batch-opened {
  color: var(--muted);
  font-size: 0.875rem;
}

.handoff-change {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--warn-tint);
  color: var(--warn);
}

.handoff-batches,
.copy-batches {
  list-style: none;
  margin: var(--s-3) 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.handoff-batch,
.copy-batch {
  inline-size: 100%;
}

.handoff-close,
.copy-close {
  inline-size: 100%;
}

.copy-manual textarea {
  display: block;
  inline-size: 100%;
  block-size: 8rem;
  margin-block: var(--s-2);
  padding: var(--s-2);
  font: 1rem / 1.5 ui-monospace, monospace;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  resize: vertical;
}

/* /add fallback */

.add-warning {
  max-inline-size: 48rem;
  margin-block: 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--warn);
  border-radius: var(--r-lg);
  background: var(--warn-tint);
  color: var(--warn);
}

.add-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: 48rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.add-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  min-inline-size: 0;
}

.add-item .domain {
  min-inline-size: 0;
}

.add-item + .add-item {
  border-block-start: 1px solid var(--border);
}

/* Footer */

.site-footer {
  margin-block-start: var(--s-6);
  border-block-start: 1px solid var(--border);
  padding-block: var(--s-4) max(var(--s-6), env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0;
  max-inline-size: 48rem;
}

@media (forced-colors: active) {
  .badge,
  .icon-button,
  .add-link,
  .add-all,
  .add-selected,
  .handoff-batch {
    border: 1px solid ButtonText;
  }

  .howto summary::after,
  .group-panel summary::after {
    border-color: ButtonText;
  }
}