/* Rank King's own layer over Gloss (public/vendor/gloss). Every value
   reads a --gl-* token; nothing here restyles a Gloss component, it only
   lays the components out. */

:root {
  /* Lucide "ellipsis", drawn the way Gloss draws its own icon tokens.
     Gloss has no "more" icon yet; this belongs upstream when it does. */
  --rk-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
}

/* -------------------- */
/* Surfaces */
/* -------------------- */

/* Light mode's page sits a hair under the card (#faf9f7 under #fdfdfb),
   too fine a step for a card to read against. The page takes the fill
   step instead, as pro-tacts does: one alias repointed to a value
   already on the ramp. Dark keeps its own block in tokens.css, so this
   takes that block's scoping inverted. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --gl-color-surface-page: var(--gl-color-surface-fill);
  }
}
:root[data-theme="light"] {
  --gl-color-surface-page: var(--gl-color-surface-fill);
}

/* What Gloss fills with surface-fill would now match the page and
   vanish: hovers and tags take the next step down instead. */
.card > li > a:only-child:hover,
.card > li > button:only-child:hover,
.icon-button:hover:not(:disabled),
:is(button:not(.icon-button), a.btn):not([role="tab"]):not([data-variant="primary"]):not([data-variant="dark"]):not([data-variant="danger"]):hover:not(:disabled):not([aria-disabled="true"]),
.tag:not([data-dashed]) {
  background: var(--gl-color-surface-fill-2);
}

/* Gloss' prose spacing between list items would sit outside each row,
   leaving a strip of every hovered row unfilled. Rows in a card meet. */
.card > li + li { margin-top: 0; }

/* -------------------- */
/* Page */
/* -------------------- */

main {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-m);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--gl-space-m) var(--gl-space-s);
}

main form { max-width: none; }

main p { margin: 0; }

/* One row: back, title, then whatever the screen puts at the end. */
main > header {
  display: flex;
  align-items: center;
  gap: var(--gl-space-2xs);
}

main > header h1 { flex: 1; min-width: 0; }

/* The header's icon buttons sit beside a heading, not a label: even at
   the large size an icon at 1em looks slight next to it, so the icon
   grows inside the same square. */
main > header .icon-button { --gl-icon-style-size: 1.35em; }

section {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-2xs);
}

/* Actions at the foot of a form: one on the right, or two pushed apart. */
form footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--gl-space-2xs);
}

form footer:has(> :nth-child(2)) { justify-content: space-between; }

/* -------------------- */
/* Fields */
/* -------------------- */

/* Gloss styles <input> and <select> but not <textarea>; this matches them. */
textarea {
  width: 100%;
  padding: var(--gl-space-xs) calc(var(--gl-space-xs) - 1px);
  background: var(--gl-color-surface-card);
  border: 1px solid var(--gl-color-border-default);
  border-radius: var(--gl-radius-sm);
  color: var(--gl-color-text-primary);
  font: 400 var(--gl-step--1)/1.5 var(--gl-font-sans);
  text-transform: none;
  letter-spacing: normal;
  resize: vertical;
  outline: none;
}

/* A value shown in a field's place when it can't be changed. */
.field > p {
  font: 400 var(--gl-step--1)/1.5 var(--gl-font-sans);
  text-transform: none;
  letter-spacing: normal;
  color: var(--gl-color-text-primary);
}

[data-tags] > small {
  font-size: var(--gl-step--2);
  color: var(--gl-color-text-tertiary);
}

/* The "+ Axis" slot is a dashed tag holding a bare input. Gloss' dashed
   tag only sets a border style on top of `border: none`, which falls
   back to a 3px medium width; this gives it a hairline instead, with
   the padding taken in by that pixel so it stands as tall as a tag. */
.tag[data-dashed] {
  padding: calc(0.25rem - 1px) calc(0.625rem - 1px);
  border: 1px dashed var(--gl-color-border-default);
  transition: border-color var(--gl-dur-fast) var(--gl-ease);
}

/* The slot takes the focus Input would show, so the input inside it
   draws none of its own. */
.tag[data-dashed]:focus-within { border-color: var(--gl-color-accent); }

.tag[data-dashed] input:not([type="checkbox"]):not([type="radio"]) {
  width: 8ch;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font: inherit;
  line-height: 1;
}

/* A list's first axis is made from a lone slot where the tabs will be. */
form[data-first-axis] { align-items: flex-start; }

/* -------------------- */
/* List actions menu */
/* -------------------- */

main > header [popovertarget] { anchor-name: --rk-list-actions; }

[popover] {
  position-anchor: --rk-list-actions;
  position-area: bottom span-left;
  min-width: 12rem;
  margin: var(--gl-space-3xs) 0 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

[popover] > .card { box-shadow: var(--gl-shadow-float); }

/* -------------------- */
/* Ranking */
/* -------------------- */

[role="tabpanel"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-s);
}

/* The rest of a long ranking, spaced like the tabpanel's other children. */
[role="tabpanel"] details[open] {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-s);
}

/* The rank sits in a fixed gutter; the rating sits at the far end. */
.card > li:has(> .type-label:first-child) { align-items: baseline; }

.card > li > .type-label:first-child {
  min-width: 2.5ch;
  color: var(--gl-color-text-tertiary);
}

.card > li > .type-label:last-child:not(:first-child) {
  margin-inline-start: auto;
  color: var(--gl-color-text-tertiary);
}

/* The rating never shrinks or wraps, so a long name wraps in its own space. */
[data-rating] {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Lets a name with no break points (a URL) break mid-word instead of
   overflowing the row, where the card's overflow: hidden clips the rating. */
.card > li:has(> [data-rating]) { overflow-wrap: anywhere; }

/* -------------------- */
/* Videos */
/* -------------------- */

/* A YouTube item (Views::Sources::YouTubeItem): a small thumbnail beside
   the title and channel in a row, stacked full width in a matchup. */
[data-video] {
  display: flex;
  align-items: center;
  gap: var(--gl-space-xs);
  min-width: 0;
}

[data-video] img {
  flex: none;
  width: 4.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--gl-radius-sm);
}

[data-video] > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

[data-video] small {
  font-size: var(--gl-step--2);
  color: var(--gl-color-text-secondary);
}

/* A thumbnail has no baseline for the rank to sit on. */
.card > li:has(> .type-label:first-child):has(> [data-video]) { align-items: center; }

/* Gloss centers a button's content, which would shrink the item to it
   and float it mid-card when the other card is taller. */
[data-matchup] [data-video] {
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
  width: 100%;
}

[data-matchup] [data-video] img { width: 100%; }

/* A video synced without a thumbnail keeps its slot, so its title lines
   up with the other card's. */
[data-matchup] [data-video]:not(:has(> img))::before {
  content: "";
  aspect-ratio: 16 / 9;
  background: var(--gl-color-surface-fill);
  border-radius: var(--gl-radius-sm);
}

/* -------------------- */
/* Compare */
/* -------------------- */

[data-matchup] {
  display: grid;
  /* minmax(0, …) so a long unbroken title can't widen its column. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gl-space-xs);
}

/* The row stretches each choice's form (a Gloss flex column) to the
   taller card; the button grows to fill it. */
[data-matchup] button {
  flex: 1;
  width: 100%;
  overflow-wrap: anywhere;
  min-height: 8rem;
  padding: var(--gl-space-s);
  background: var(--gl-color-surface-card);
  border-radius: var(--gl-radius-lg);
  font: 600 var(--gl-step-1)/1.25 var(--gl-font-sans);
  white-space: normal;
}

[data-matchup-actions] {
  display: flex;
  justify-content: center;
  gap: var(--gl-space-2xs);
}

/* -------------------- */
/* Busy */
/* -------------------- */

/* A button whose form is still working (see data-busy in app.js) spins
   where an icon would go. Gloss has no spinner, and a busy button never
   carries an icon, so its ::before is free. */
button[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: var(--gl-space-2xs);
  vertical-align: -0.125em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: rk-spin 0.8s linear infinite;
}

@keyframes rk-spin {
  to { rotate: 1turn; }
}