/* Eifo components.
 *
 * Everything is laid out with logical properties (inline-start, margin-inline)
 * so right-to-left is the same code path as left-to-right, not a special case
 * with its own overrides.
 */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/* An author `display` outranks the UA sheet's `[hidden] { display: none }`, so
   every component that sets one had to remember to opt back out - and the ones
   that forgot stayed on screen while claiming to be hidden. Said once here
   instead of once per component that trips over it. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-4);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

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

.shell {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* -- header --------------------------------------------------------------- */

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

/* The name is the question, so the mark belongs to the logo rather than to the
 * sentence around it. ::after keeps it at the end in both directions - trailing
 * in English, leading on screen in Hebrew. */
.wordmark::after {
  content: "?";
  color: var(--accent);
  margin-inline-start: -0.05em;
}

.search {
  flex: 1;
  min-inline-size: 0;
  position: relative;
  max-inline-size: 30rem;
}

.search__input {
  inline-size: 100%;
  padding: var(--space-2) var(--space-4);
  padding-inline-end: 2.75rem;
  background: var(--surface-sunken);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font: inherit;
}

.search__input::placeholder {
  color: var(--fg-faint);
}

.search__input:focus {
  border-color: var(--line-strong);
}

.search__hint {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-3);
  transform: translateY(-50%);
  color: var(--fg-faint);
  font-size: var(--text-xs);
  font-family: var(--font-data);
  pointer-events: none;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-inline-size: 2.25rem;
  block-size: 2.25rem;
  padding-inline: var(--space-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.icon-button:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

/* -- filter bar ----------------------------------------------------------- */

.filters {
  border-block-end: 1px solid var(--line);
  background: var(--ink);
}

.filters__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.filters__label {
  flex: none;
  color: var(--fg-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-inline-end: var(--space-1);
}

/* A service chip. Its dot is the same hue as the spine on every card the
 * service offers, which is what makes the grid readable by colour. */
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.chip:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.chip[aria-pressed="true"] {
  color: var(--fg);
  background: var(--surface-raised);
  border-color: var(--source-color, var(--accent));
}

.chip__dot {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background: var(--source-color, var(--fg-faint));
  flex: none;
}

.chip__count {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* -- services combo ------------------------------------------------------- */

.combo {
  position: relative;
  flex: none;
}

.combo__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  min-block-size: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.combo__trigger::-webkit-details-marker {
  display: none;
}

.combo__trigger:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.combo--active .combo__trigger {
  color: var(--fg);
  background: var(--surface-raised);
  border-color: var(--line-strong);
}

.combo[open] .combo__trigger {
  border-color: var(--accent);
  color: var(--fg);
}

/* A row of the selected services' colours, right in the trigger - one dot each,
 * side by side; each carries the service name as a hover tooltip. */
.combo__stack {
  display: inline-flex;
  gap: 3px;
}

.combo__stack:not(:empty) {
  margin-inline-end: var(--space-1);
}

.combo__stackdot {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--source-color, var(--fg-faint));
  cursor: default;
}

.combo__caret {
  color: var(--fg-faint);
  font-size: 0.7em;
  transition: transform var(--duration) var(--ease);
}

.combo[open] .combo__caret {
  transform: rotate(180deg);
}

.combo__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: 30;
  inline-size: max-content;
  min-inline-size: 15rem;
  max-inline-size: min(22rem, 90vw);
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

.combo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--space-1);
}

.combo__action {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.combo__action:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.combo__action--quiet {
  border-color: transparent;
}

.combo__action--mine.is-on {
  background: var(--accent-quiet);
  border-color: var(--accent);
  color: var(--accent);
}

.combo__action--hint {
  border-style: dashed;
  color: var(--fg-faint);
  font-style: italic;
}

/* Search-as-you-type, under the header box. */
.suggest {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline: 0;
  z-index: 40;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  max-block-size: min(26rem, 70vh);
  overflow-y: auto;
  scrollbar-width: thin;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

.suggest__group {
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.suggest__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.suggest__option:hover,
.suggest__option--active {
  background: var(--surface);
}

.suggest__poster {
  flex: none;
  inline-size: 1.75rem;
  block-size: 2.5rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.suggest__poster--person {
  border-radius: 50%;
  block-size: 1.75rem;
}

.suggest__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest__meta {
  flex: none;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* The pill keeps its size in a row that is otherwise free to squeeze. */
.suggest__option .score {
  flex: none;
}

.suggest__empty {
  padding: var(--space-3) var(--space-2);
  color: var(--fg-faint);
  font-size: var(--text-sm);
}

/* Reverse the sort. Square so it reads as a button, not a truncated select. */
.control--order {
  inline-size: 2.25rem;
  padding-inline: 0;
  text-align: center;
  cursor: pointer;
  font-variant-numeric: normal;
}

.control--order[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* The second question, not the first: year, genre and score, folded away. */
.combo__panel--wide {
  min-inline-size: 20rem;
  max-inline-size: min(26rem, 92vw);
}

.morefilters__group + .morefilters__group {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
}

.morefilters__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.morefilters__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.morefilters__years {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.morefilters__boxes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-faint);
}

.morefilters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.control--year {
  inline-size: 6rem;
  /* Digits only; the spinners cost width and nobody steps a year one at a time. */
  appearance: textfield;
}

.control--year::-webkit-outer-spin-button,
.control--year::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.combo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-block-size: min(20rem, 60vh);
  overflow-y: auto;
  scrollbar-width: thin;
}

.combo__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.combo__option:hover {
  background: var(--surface-sunken);
}

.combo__check {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  accent-color: var(--source-color, var(--accent));
  cursor: pointer;
}

.combo__dot {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--source-color, var(--fg-faint));
  flex: none;
}

.combo__name {
  flex: 1 1 auto;
  color: var(--fg);
  font-size: var(--text-sm);
}

.combo__count {
  flex: none;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.control {
  flex: none;
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  color: var(--fg-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-sm);
}

/* Not a filter: the way to the arrivals page, at the end of the row. Outlined
   in the accent so it reads as somewhere to go rather than something to set. */
.control--new {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.control--new:hover,
.control--new:focus-visible {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
}

/* -- grid ----------------------------------------------------------------- */

.results {
  padding-block: var(--space-5) var(--space-8);
}

.results__status {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.results__count {
  font-family: var(--font-data);
  color: var(--fg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 80rem) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* -- card ----------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  border-radius: var(--radius);
  transition: transform var(--duration) var(--ease);
}

.card:hover {
  transform: translateY(-3px);
}

.card__poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.card__poster img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.card__placeholder {
  display: grid;
  place-items: center;
  block-size: 100%;
  color: var(--fg-faint);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  opacity: 0.35;
}

/* The signature: a segmented bar keyed to the services offering this title.
 * Sits on the poster's block-end edge so it reads as part of the artwork. */
.spine {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  block-size: 4px;
}

.spine__segment {
  flex: 1;
  background: var(--source-color, var(--source-unknown));
}

.card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-faint);
  font-size: var(--text-xs);
  font-family: var(--font-data);
}

/* Line art sized to the text beside it, and coloured by it. */
.icon {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
}

/* -- list toggles on the poster ------------------------------------------- */

/* The card is one anchor, so the toggles are a sibling laid over it and the
   list item is what positions them. */
.card-slot {
  position: relative;
}

.card__actions {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  display: flex;
  gap: var(--space-1);
  /* The card lifts on hover; these are not inside it, so they are lifted with
     it rather than being left behind on the artwork. */
  transition: transform var(--duration) var(--ease);
}

.card-slot:hover .card__actions {
  transform: translateY(-3px);
}

/* Dark scrim rather than a themed surface: these sit on artwork, which is the
   same brightness whichever theme the page is in. */
.card-action {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  /* The icon is the whole button here, so it wants to be bigger than a glyph
     sitting in a line of text would be. */
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.card-action:hover {
  background: rgb(0 0 0 / 0.8);
}

/* In the list, and meant to be readable as such from across the grid without
   hovering anything. */
.card-action--on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.card-action--on:hover {
  background: var(--accent);
}

/* -- score ---------------------------------------------------------------- */

.score {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--score-color, var(--score-none));
  background: color-mix(in srgb, var(--score-color, var(--score-none)) 14%, transparent);
}

.score--high {
  --score-color: var(--score-high);
}
.score--mid {
  --score-color: var(--score-mid);
}
.score--low {
  --score-color: var(--score-low);
}
.score--none {
  --score-color: var(--score-none);
}

.score--large {
  font-size: var(--text-xl);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
}

/* -- detail --------------------------------------------------------------- */

.detail {
  padding-block-end: var(--space-8);
}

.detail__hero {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

@media (min-width: 48rem) {
  .detail__hero {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* Wide enough for a third column: the metadata becomes a rail beside the
   description rather than a block under it. Below this it spans the full
   width and reads as the next block down, which is what a phone wants. */
.detail__meta {
  grid-column: 1 / -1;
}

@media (min-width: 64rem) {
  .detail__hero {
    grid-template-columns: 15rem minmax(0, 1fr) 19rem;
  }

  /* Placed explicitly: an item with a definite row is positioned before the
     auto-placed poster and text, so `grid-row: 1` alone would steal column 1
     and push the poster along. */
  .detail__meta {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    margin-block-start: 0;
  }

  /* Label above value in the rail. Side by side, a label column wide enough
     for "Cinematography" leaves too little for a name like "Keegan-Michael
     Key"; stacked, both get the whole width. */
  .detail__meta .meta__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

.detail__poster {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-raised);
  aspect-ratio: 2 / 3;
  max-inline-size: 15rem;
}

.detail__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.detail__subtitle {
  color: var(--fg-muted);
  font-size: var(--text-lg);
  margin: var(--space-1) 0 0;
  font-weight: var(--weight-normal);
}

.detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-family: var(--font-data);
}

.detail__overview {
  max-inline-size: 60ch;
  color: var(--fg-muted);
}

.section {
  margin-block-start: var(--space-6);
}

.section__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  margin-block-end: var(--space-3);
}

.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease);
}

.rating:hover {
  border-color: var(--line-strong);
}

/* The service's own mark, standing in for its name.
 *
 * Sized by height and left to find its own width: these are other people's
 * logos and they are every shape from a square tomato to a wordmark three
 * times as wide as it is tall. Fixing the width instead would squash them. */
.rating__logo {
  height: 1.5rem;
  width: auto;
  max-width: 5.5rem;
  flex: none;
  object-fit: contain;
}

.rating__provider {
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

/* Two figures side by side rather than stacked: a chip sits in a row of chips,
 * and one twice the height of its neighbours is the thing the eye goes to. */
.rating__scores {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}

.rating__score {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.rating__value {
  font-family: var(--font-data);
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

/* What the figure is, and how many voted for it. Small and quiet: it is there
 * to tell two numbers apart, not to compete with them. */
.rating__caption {
  color: var(--fg-faint);
  font-size: var(--text-xs);
  line-height: 1.1;
  white-space: nowrap;
}

.aggregate {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.aggregate__label {
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.components {
  margin-block-start: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.components summary {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.components__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: var(--text-xs);
}

.components__table th,
.components__table td {
  padding: var(--space-2) var(--space-3);
  text-align: start;
  border-block-start: 1px solid var(--line);
  color: var(--fg-muted);
}

.components__table th {
  color: var(--fg-faint);
  font-weight: var(--weight-normal);
}

/* A rater the sum left out. Dimmed rather than hidden: the score is still
   true and still worth reading, it just did not get a vote in the total. */
.components__row--excluded td {
  color: var(--fg-faint);
}

/* Why a weight is nought or halved. Beside the number rather than in a column
   of its own, because it is an aside about that number and empty on most rows. */
.components__note {
  display: block;
  color: var(--fg-faint);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

/* -- availability --------------------------------------------------------- */

.offers {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.offer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--source-color, var(--source-unknown));
  border-radius: var(--radius);
}

.offer--gone {
  opacity: 0.65;
}

.offer__name {
  font-weight: var(--weight-medium);
}

.offer__note {
  color: var(--fg-faint);
  font-size: var(--text-xs);
  font-family: var(--font-data);
}

/* A price is the one part of the note you decide on, so it carries the weight
   of the surrounding text rather than fading with it. */
.offer__price {
  color: var(--fg-muted);
  font-weight: 600;
}

.offer__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.button--quiet {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--line);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1em 0.5em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.badge--gone {
  background: color-mix(in srgb, var(--fg-faint) 18%, transparent);
  color: var(--fg-muted);
}

.badge--untracked {
  background: color-mix(in srgb, var(--score-mid) 16%, transparent);
  color: var(--score-mid);
}

/* Work that has been asked for and not done yet: the accent, because it is a
   thing in progress rather than a thing wrong. */
.badge--busy {
  background: var(--accent-quiet);
  color: var(--accent);
}

/* -- states --------------------------------------------------------------- */

.state {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  padding-block: var(--space-8);
  text-align: center;
  color: var(--fg-muted);
}

.state__mark {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius);
  border: 2px dashed var(--line-strong);
}

.state__title {
  color: var(--fg);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0;
}

.state__body {
  margin: 0;
  max-inline-size: 40ch;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-raised) 25%,
    var(--surface) 50%,
    var(--surface-raised) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.sentinel {
  block-size: 1px;
}

/* -- footer --------------------------------------------------------------- */

.footer {
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-5);
  color: var(--fg-faint);
  font-size: var(--text-xs);
}

.footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer a {
  color: var(--fg-muted);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover,
  .card-slot:hover .card__actions {
    transform: none;
  }
}

/* -- account -------------------------------------------------------------- */

.account {
  position: relative;
}

.account__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.account__summary::-webkit-details-marker {
  display: none;
}

.account__summary:hover {
  border-color: var(--line-strong);
}

.account__name {
  max-inline-size: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 20;
  display: grid;
  min-inline-size: 12rem;
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

.account__item {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--text-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.account__item:hover {
  background: var(--surface-sunken);
}

.avatar {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-sunken);
}

.avatar--initial {
  display: inline-grid;
  place-items: center;
  background: var(--accent-quiet);
  color: var(--accent);
  font-weight: var(--weight-bold);
}

.notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: var(--content-max);
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-quiet);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: var(--text-sm);
}

.notice__dismiss {
  margin-inline-start: auto;
  border: none;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
  font: inherit;
}

/* -- my lists ------------------------------------------------------------- */

.page__title {
  margin: var(--space-6) 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
}

/* -- what's new ----------------------------------------------------------- */

.whatsnew__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.whatsnew__head .page__title {
  margin-block-end: var(--space-2);
}

.whatsnew__note {
  margin: 0;
  max-inline-size: 46ch;
  color: var(--fg-faint);
  font-size: var(--text-sm);
}

/* Which service it turned up on, and when. The service is the subject of the
   card, so it gets the colour and the full name rather than a spine segment. */
/* A line of text rather than a row of boxes, so a long service name wraps the
   way a sentence does. Truncating it would be worse than wrapping: "Israel Film
   Archive (Jerusalem)" clipped in a Hebrew line loses its beginning, not its
   end, and a service named by its last word is a service nobody recognises. */
.arrival {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.arrival__dot {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-end: 0.35rem;
  border-radius: 50%;
  background: var(--source-color, var(--fg-faint));
}

.arrival__when {
  margin-inline-start: var(--space-2);
  color: var(--fg-faint);
  font-family: var(--font-data);
}

.tabs {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--line);
}

.tab {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-block-end: 2px solid transparent;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.tab--on {
  color: var(--fg);
  border-block-end-color: var(--accent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.actions__block {
  margin-block-start: var(--space-5);
}

.actions__prompt,
.actions__problem {
  margin-block-start: var(--space-4);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.actions__problem {
  color: var(--danger);
}

.actions__problem:empty {
  margin: 0;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.toggle:hover {
  border-color: var(--line-strong);
  color: var(--fg);
}

.toggle--on {
  background: var(--accent-quiet);
  border-color: var(--accent);
  color: var(--accent);
}

/* -- where a list can be watched ------------------------------------------ */

.where {
  margin-block-end: var(--space-5);
}

.where__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  margin-block: 0 var(--space-3);
}

.where__list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  /* A summary, not a chart of the page: past this the bars say nothing more
     and the eye has to travel the whole width to read a number. */
  max-inline-size: 34rem;
}

/* One row per service: its colour, its name, how much of the list it carries,
   and the count. The name column is fixed so the bars share a baseline and can
   be read against each other rather than one at a time. */
.where__row {
  display: grid;
  grid-template-columns: auto minmax(6rem, 10rem) 1fr auto;
  align-items: center;
  gap: var(--space-3);
}

.where__dot {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background: var(--source-color, var(--fg-faint));
}

.where__name {
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Of the whole list, not of the biggest service - so a service carrying half
   of it looks like half of it rather than like the winner. */
.where__bar {
  block-size: 0.4rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to var(--bar-end, right),
    var(--source-color, var(--accent)) var(--fill, 0%),
    var(--surface-sunken) var(--fill, 0%)
  );
}

[dir="rtl"] .where__bar {
  --bar-end: left;
}

.where__count {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--fg-faint);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  /* The bar is the first thing to go: the number says it too. */
  .where__row {
    grid-template-columns: auto 1fr auto;
  }

  .where__bar {
    display: none;
  }
}

/* -- stars ---------------------------------------------------------------- */

/* Two rows of the same five glyphs, the filled one laid over the empty one and
   clipped to a percentage. Half a star is then a number rather than a second
   set of characters - and so would a quarter be. */
.stars {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  line-height: 1;
}

.stars:hover {
  border-color: var(--line);
}

.stars__track {
  position: relative;
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
}

.stars__off {
  color: var(--line-strong);
}

/* Clipped from the reading start, so in Hebrew it fills from the right and the
   first star is the rightmost one - which is what the click maths assumes. */
.stars__on {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--fill, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--accent);
  transition: inline-size var(--duration) var(--ease);
}

/* Nothing said yet: dimmer than a rating of nothing, which is not a thing. */
.stars--empty .stars__off {
  color: var(--line);
}

.mine {
  color: var(--accent);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.note-editor {
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
}

.note-editor summary {
  color: var(--fg-muted);
  cursor: pointer;
}

.note {
  display: block;
  inline-size: 100%;
  margin-block-start: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
  resize: vertical;
}

.note-editor__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.note__status {
  color: var(--fg-muted);
  font-size: var(--text-xs);
}

/* -- settings ------------------------------------------------------------- */

.settings {
  max-inline-size: 44rem;
  padding-block-end: var(--space-8);
}

.settings__help {
  margin: var(--space-2) 0 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  max-inline-size: 60ch;
}

.settings__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.settings__field {
  display: grid;
  gap: var(--space-1);
  margin-block: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.control--text {
  inline-size: 100%;
  max-inline-size: 24rem;
  color: var(--fg);
}

.settings__switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  font-size: var(--text-sm);
}

.settings__status {
  min-block-size: 1.5rem;
}

.section--danger {
  margin-block-start: var(--space-7);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: var(--radius);
}

.section--danger .control--text {
  margin-block: var(--space-4);
}

.button--danger {
  background: var(--danger);
  color: var(--surface);
}

.button--danger[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.chip--mine[aria-pressed="true"] {
  background: var(--accent-quiet);
  border-color: var(--accent);
  color: var(--accent);
}

.chip--hint {
  color: var(--fg-faint);
  text-decoration: none;
  font-style: italic;
}

/* -- credits and metadata ------------------------------------------------- */

/* A definition list rather than a table: these are label/value pairs, and a
   table would promise columns that the values do not line up in. */
.meta {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface);
}

.meta__row {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--line);
}

.meta__row:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.meta__label {
  color: var(--fg-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.meta__value {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  align-items: baseline;
}

/* Names are links, so they carry the underline a link should have - but only
   on the name itself, not across the separators between them. A name wraps as
   a unit: "James Corden" broken across two lines reads as two people. */
.meta__person {
  white-space: nowrap;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.meta__person:hover,
.meta__person:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.meta__person:not(:last-child)::after {
  content: "·";
  color: var(--fg-faint);
  text-decoration: none;
  display: inline-block;
  margin-inline-start: var(--space-2);
}

/* Four dots filled to the length band. Quiet on purpose: this is a hint you
   catch while reading the minutes, not a thing to look at on its own. */
.runtime {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.runtime__dots {
  display: inline-flex;
  gap: 3px;
}

.runtime__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

.runtime__dot--on {
  background: var(--fg-muted);
}

/* A flag is recognised before its name is read, so it leads. */
.country {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.country__flag {
  font-size: 1.05em;
  line-height: 1;
}

.meta__more {
  border: 0;
  background: none;
  padding: 0;
  color: var(--fg-faint);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.meta__more:hover,
.meta__more:focus-visible {
  color: var(--accent);
}

/* -- a person's work ------------------------------------------------------ */

.person__head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-block: var(--space-4) var(--space-6);
}

.person__portrait {
  inline-size: 5.5rem;
  block-size: 5.5rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 1px solid var(--line);
  flex: none;
}

.person__name {
  margin: 0;
}

.person__alternate,
.person__role {
  margin-block: var(--space-1) 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-family: var(--font-data);
}

.person__count {
  color: var(--fg-faint);
}

.person__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3) 0;
}

.person__link {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.2rem var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.person__link:hover,
.person__link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* -- manage tab ----------------------------------------------------------- */

.muted {
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.panel {
  margin-block-start: var(--space-6);
}

.panel__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-block-end: var(--space-3);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* A number that wants looking at, not a failure: an amber edge rather than a
 * red panel, because most of the time it is a queue that needs an evening. */
.stat--warn {
  border-color: var(--score-mid);
}

.stat__value {
  font-family: var(--font-data);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

/* Dates and ratios, which are answers rather than headline figures. */
.stat--text .stat__value {
  font-size: var(--text-md);
  line-height: 1.4;
}

/* A completeness figure carries its own verdict. Every one of these is stated
   so that more is better, which is what lets one scale colour them all. */
.stat__value--good {
  color: var(--score-high);
}

.stat__value--warn {
  color: var(--score-mid);
}

.stat__value--bad {
  color: var(--score-low);
}

.stat__value--none {
  color: var(--fg-muted);
}

/* The figure the percentage was taken from: a share with no numbers behind it
   is a number nobody can check. */
.stat__count {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.stat__label {
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* Eight columns do not fit a phone. The table scrolls inside its own box so
   the page never widens and drags every other panel sideways with it. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sources {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.sources th,
.sources td {
  padding: var(--space-2) var(--space-3);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
}

.sources th {
  position: sticky;
  inset-block-start: 0;
  background: var(--surface-raised);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  border-block-end: 1px solid var(--line);
}

.sources tbody tr + tr td {
  border-block-start: 1px solid var(--line);
}

.sources tbody tr:hover td {
  background: var(--surface-raised);
}

/* Numbers line up under each other, whichever way the page reads. */
.sources .num {
  text-align: end;
}

.sources td:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 12rem;
}

.source__name {
  font-weight: var(--weight-medium);
}

.source__key,
.source__count,
.source__synced,
.run__when,
.run__took {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.pct {
  font-family: var(--font-data);
  font-weight: var(--weight-medium);
}

.pct--good {
  color: var(--score-high);
}

.pct--warn {
  color: var(--score-mid);
}

.pct--bad {
  color: var(--score-low);
}

.pct--none {
  color: var(--fg-faint);
}

/* A note under a panel heading, saying what the table below it means. A share
   of a weighted sum is not self-explanatory the way a coverage column is. */
.panel__note {
  max-inline-size: 46rem;
  margin-block: calc(var(--space-2) * -1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* The share bar under a rater's percentage.
 *
 * Scaled against the largest share on the table rather than against 100%: the
 * biggest contributor is rarely near a hundred, and bars measured against a
 * bound nothing reaches are all stub length. The number above it is the real
 * share, so the bar compares and the number states. */
.mix__bar {
  display: block;
  block-size: 0.3rem;
  margin-block-start: var(--space-1);
  min-inline-size: 4rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to var(--bar-end, right),
    var(--accent) var(--fill, 0%),
    var(--surface-sunken) var(--fill, 0%)
  );
}

[dir="rtl"] .mix__bar {
  --bar-end: left;
}

/* The count the share was taken from, tucked under it. */
.pct__of {
  display: block;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.source__switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.source__note {
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

.switch {
  inline-size: 2.4rem;
  block-size: 1.3rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* -- runs ----------------------------------------------------------------- */

.runs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.run {
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: var(--radius);
}

.run--ok {
  border-inline-start-color: var(--score-high);
}

.run--failed,
.run--crashed,
.run--aborted_suspicious {
  border-inline-start-color: var(--danger);
}

.run__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.run__phase {
  font-weight: var(--weight-bold);
}

.run__source {
  font-family: var(--font-data);
  font-size: var(--text-sm);
}

.run__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.run__stats li {
  display: flex;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.run__stat-key {
  color: var(--fg-faint);
}

.run__stat-value {
  font-family: var(--font-data);
  color: var(--fg);
}

.badge--ok {
  background: var(--score-high);
  color: var(--ink);
}

.badge--failed,
.badge--crashed,
.badge--aborted_suspicious {
  background: var(--danger);
  color: var(--accent-ink);
}

.badge--warn {
  background: var(--score-mid);
  color: var(--ink);
}

/* A log is timestamps, logger names and source keys - Latin structure with the
 * occasional Hebrew title inside it. Forced ltr so the page's direction does
 * not reorder lines around their own contents. */
.log {
  max-block-size: 24rem;
  overflow: auto;
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* -- review queue --------------------------------------------------------- */

.queue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.queue__count {
  font-weight: var(--weight-bold);
}

.chips--quiet {
  margin-block-start: var(--space-2);
}

.bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-4);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.queue {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.queue__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.queue__item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A ruled-on card collapses rather than vanishing: the row keeping its place
 * for a moment is what tells somebody working at speed that the tap landed on
 * the one they meant. */
.queue__item--done {
  display: block;
  padding: var(--space-3) var(--space-4);
  opacity: 0.5;
}

.queue__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
  min-inline-size: 0;
}

.queue__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.queue__col--empty {
  justify-content: center;
}

.queue__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}

.queue__poster {
  inline-size: 3.5rem;
  block-size: 5.25rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.queue__name {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.queue__alt,
.queue__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.queue__source {
  font-family: var(--font-data);
}

.queue__score {
  font-family: var(--font-data);
  color: var(--fg);
}

.queue__link {
  font-size: var(--text-xs);
  color: var(--accent);
}

.queue__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.button--same {
  background: var(--score-high);
  color: var(--ink);
}

.button--different {
  background: var(--surface-raised);
  color: var(--fg);
  border: 1px solid var(--line-strong);
}

.button--junk {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--line);
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.queue__done {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.queue__error {
  font-size: var(--text-sm);
  color: var(--danger);
}

@media (max-width: 40rem) {
  .queue__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .queue__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


/* ---------------------------------------------------------------- members
 *
 * Who may sign in, and the tokens they issue. Both are lists of one line each
 * where the identifier is the point, so both give it the data font and let the
 * controls sit at the end of the row rather than in a column of their own -
 * these lists are short, and a table's worth of structure would be scaffolding
 * around three rows.
 */

.members__invite,
.tokens__create {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.members__invite .input,
.tokens__create .input {
  flex: 1 1 16rem;
}

.members__row,
.tokens__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.members__email,
.tokens__name {
  flex: 1 1 14rem;
  font-family: var(--font-data);
  word-break: break-all;
}

.members__role {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--line);
  color: var(--fg-muted);
}

/* An administrator is the row worth spotting on the way past. */
.members__role--admin {
  border-color: var(--accent, var(--line-strong));
  color: var(--accent, var(--fg));
}

.members__note,
.tokens__hint,
.tokens__used {
  color: var(--fg-faint);
  font-size: var(--text-xs);
}

.tokens__hint {
  font-family: var(--font-data);
}

.members__actions {
  display: flex;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.tokens__row .button {
  margin-inline-start: auto;
}

/* The one moment a token is readable. Loud on purpose: there is no second
 * chance to copy it, and a person who misses that has to make another. */
.tokens__revealed:empty {
  display: none;
}

.tokens__warning {
  color: var(--fg);
  font-size: var(--text-sm);
  margin: var(--space-3) 0 var(--space-2);
}

.tokens__value {
  width: 100%;
  font-family: var(--font-data);
}

/* The sign-in wall's buttons: one per provider, side by side under the
 * sentence that explains why they are there. */
.members__wallActions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}