/*
 * app.css: the one stylesheet for every dyscuvr screen, hand-written and served from
 * /static/ with no build step. docs/design/style-guide.md is its reference: every token in
 * the :root block below takes the guide's value, and the components follow the guide's
 * Components section, in its order. No color literal or named color appears outside :root.
 */

/* Font */

@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* Tokens */

:root {
  color-scheme: dark;

  --color-ground: #1C1D20;
  --color-raised: #25262A;
  --color-chip: #2E2F35;
  --color-track: #34363C;
  --color-rule: #3B3D44;
  --color-line: #6E717A;
  --color-text: #F5F5F6;
  --color-chip-text: #E4E5E8;
  --color-muted: #A9ABB2;
  --color-red: #FF4B5C;
  --color-red-wash: #3A1C22;
  --color-qr-tile: #FFFFFF;
  --scrim: rgb(0 0 0 / 60%);
  --shadow-popover: 0 8px 24px rgb(0 0 0 / 50%);

  --font-family: "Archivo", system-ui, sans-serif;
  --font-stretch-display: 68%;
  --font-stretch-numeral: 62%;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.9375rem;
  --font-size-input: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.625rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2rem;
  --font-size-5xl: 2.25rem;
  --font-size-6xl: 2.5rem;
  --font-size-7xl: 2.75rem;
  --font-size-8xl: 4rem;
  --font-size-9xl: 4.5rem;
  --font-size-10xl: 6rem;

  --line-height-numeral: 1;
  --line-height-display: 1.05;
  --line-height-heading: 1.25;
  --line-height-body: 1.5;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-display: 800;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Breakpoints, for reference only: @media cannot read custom properties, so each query
     below writes the em value and names its token in a comment. */
  --bp-tablet: 48em;
  --bp-desktop: 64em;
  --bp-wide: 80em;

  --width-content: 40rem;
  --width-rail: 15.5rem;
  --width-aside: 23.75rem;
  --width-sheet: 30rem;
  --width-welcome: 64rem;
  --size-header: 4rem;
  --size-bottom-bar: 4.25rem;
  --size-save-bar: 4.5rem;
  --size-target: 2.75rem;
  --size-target-lg: 3rem;
  --size-key-enjoy: 3.5rem;
  --size-tag-pill: 2.5rem;
  --size-checkbox: 1.375rem;
  --size-badge: 1.25rem;
  --size-glyph: 0.875rem;
  --size-icon: 1.25rem;
  --size-icon-nav: 1.5rem;
  --size-icon-empty: 2.5rem;
  --size-accent: 1.5rem;
  --size-poster-width: 6rem;
  --size-poster-height: 9rem;

  --radius-chip: 0.375rem;
  --radius-poster: 0.5rem;
  --radius-control: 0.625rem;
  --radius-panel: 0.75rem;
  --radius-sheet: 1rem;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 2px;
  --border-tab: 3px;
}

/* Base elements */

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

html {
  scroll-padding-top: var(--size-header);
  scroll-padding-bottom: calc(var(--size-bottom-bar) + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

h1,
h2,
h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-stretch-display);
  line-height: var(--line-height-display);
}

h1:focus {
  outline: none;
}

h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

p {
  margin: 0;
  max-width: var(--width-content);
}

a {
  color: var(--color-red);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--border-thick) solid var(--color-text);
  outline-offset: 2px;
}

/* Page frame and layout */

/*
 * Phone and tablet: the header is sticky at the top and the navigation is fixed to the
 * bottom, both spanning the viewport; only the content column centers at --width-content.
 * The rail wrapper takes no box of its own until the desktop breakpoint.
 */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

.app > * {
  min-width: 0;
}

.rail {
  display: contents;
}

.app-main,
.app-footer {
  width: 100%;
  max-width: calc(var(--width-content) + 2 * var(--space-5));
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.app-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

.app-main > * {
  min-width: 0;
}

.app--signed-in .app-footer {
  padding-bottom: calc(var(--size-bottom-bar) + env(safe-area-inset-bottom) + var(--space-12));
}

/* --bp-tablet */
@media (min-width: 48em) {
  .app-main,
  .app-footer {
    max-width: calc(var(--width-content) + 2 * var(--space-6));
    padding-inline: var(--space-6);
  }
}

/* --bp-desktop: the left rail replaces the header and the bottom bar. */
@media (min-width: 64em) {
  .app--signed-in {
    grid-template-columns: var(--width-rail) minmax(0, var(--width-content));
    grid-template-rows: auto 1fr;
    justify-content: start;
    column-gap: var(--space-8);
  }

  .app--signed-in .rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    padding: var(--space-5);
    border-right: var(--border-thin) solid var(--color-rule);
  }

  .app--signed-in .app-main,
  .app--signed-in .app-footer {
    grid-column: 2;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .app--signed-in .app-footer {
    padding-bottom: var(--space-8);
  }
}

/* --bp-wide: the right column appears beside the center. */
@media (min-width: 80em) {
  .app--signed-in {
    grid-template-columns: var(--width-rail) minmax(0, var(--width-content)) var(--width-aside);
  }
}

/* Skip link */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 30;
  padding: var(--space-2) var(--space-4);
  background: var(--color-raised);
  color: var(--color-text);
  border-radius: var(--radius-control);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Focus ring: see :focus-visible in Base elements. */

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-target);
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  line-height: var(--line-height-heading);
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  text-decoration: none;
}

.button--primary {
  background: var(--color-text);
  color: var(--color-ground);
  font-weight: var(--font-weight-bold);
  border: 0;
}

.button--primary:hover {
  background: var(--color-chip-text);
}

.button--primary:active {
  background: var(--color-muted);
}

.button--secondary {
  background: var(--color-raised);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  border: var(--border-thin) solid var(--color-rule);
}

.button--secondary:hover {
  background: var(--color-chip);
}

.button--secondary:active {
  background: var(--color-chip);
}

.button--block {
  width: 100%;
  min-height: var(--size-target-lg);
}

/* A compact button keeps the 44px target but sits quieter in a row of entry controls. */
.button--compact {
  padding-inline: var(--space-4);
  font-size: var(--font-size-sm);
}

.button--destructive {
  background: var(--color-raised);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  border: var(--border-thin) solid var(--color-text);
}

.button--destructive:hover {
  background: var(--color-chip);
}

.button--destructive:active {
  background: var(--color-chip);
}

/* In a sheet the border also turns muted on press, so the press still shows. */
.sheet .button--secondary:active,
.sheet .button--destructive:active {
  border-color: var(--color-muted);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-target);
  height: var(--size-target);
  padding: 0;
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-raised);
  color: var(--color-text);
  cursor: pointer;
}

.icon-button:hover,
.icon-button:active {
  background: var(--color-chip);
}

.icon {
  flex-shrink: 0;
  width: var(--size-icon);
  height: var(--size-icon);
}

/* Links: see a in Base elements. */

/* Text inputs */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--width-content);
}

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

.field__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.field__input {
  width: 100%;
  min-height: var(--size-target);
  padding-inline: var(--space-4);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-raised);
  color: var(--color-text);
  font-size: var(--font-size-input);
}

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

.field__input:hover {
  border-color: var(--color-muted);
}

.field__input[aria-invalid="true"] {
  border: var(--border-thick) solid var(--color-text);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

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

/*
 * A link inside muted text is always underlined: red on muted is far below 3:1, so the
 * underline is its non-color cue (style guide, Links). It keeps the red and the global
 * focus ring.
 */
.field__hint a,
.row__detail a {
  text-decoration: underline;
}

.field__affix {
  display: flex;
  align-items: center;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-raised);
  padding-inline-start: var(--space-4);
}

.field__affix:hover {
  border-color: var(--color-muted);
}

.field__affix:has([aria-invalid="true"]) {
  border: var(--border-thick) solid var(--color-text);
}

.field__prefix {
  color: var(--color-muted);
  font-size: var(--font-size-input);
}

.field__input--prefixed,
.field__input--prefixed:hover,
.field__input--prefixed[aria-invalid="true"] {
  border: 0;
  background: transparent;
  padding-inline-start: var(--space-1);
}

.search {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--width-content);
  margin-block: var(--space-4);
}

.search__row {
  display: flex;
  gap: var(--space-3);
}

.search__field {
  flex: 1;
  min-width: 0;
}

/* Checkboxes and radios */

.checks {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-target);
  cursor: pointer;
}

.check:hover {
  text-decoration: underline;
}

.check input[type="checkbox"] {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  margin: 0;
  appearance: none;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--space-1);
  background: var(--color-raised);
  cursor: pointer;
}

.check:hover input[type="checkbox"] {
  border-color: var(--color-muted);
}

.check input[type="checkbox"]::before {
  content: "";
  width: 0.375rem;
  height: 0.75rem;
  border: solid var(--color-ground);
  border-width: 0 var(--border-thick) var(--border-thick) 0;
  transform: translateY(-10%) rotate(45deg);
  visibility: hidden;
}

.check input[type="checkbox"]:checked {
  border-color: var(--color-text);
  background: var(--color-text);
}

.check input[type="checkbox"]:checked::before {
  visibility: visible;
}

.check input[type="radio"] {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  margin: 0;
  appearance: none;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-raised);
  cursor: pointer;
}

.check:hover input[type="radio"] {
  border-color: var(--color-muted);
}

.check input[type="radio"]::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-ground);
  visibility: hidden;
}

.check input[type="radio"]:checked {
  border-color: var(--color-text);
  background: var(--color-text);
}

.check input[type="radio"]:checked::before {
  visibility: visible;
}

.check input[aria-invalid="true"],
.check input:user-invalid {
  border: var(--border-thick) solid var(--color-text);
}

/* Option rows: the recommend screen's "To" */

.options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.option {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-control);
}

.option:has(> .option__choice > input:checked) {
  padding: calc(var(--space-4) - var(--border-thick) + var(--border-thin));
  border: var(--border-thick) solid var(--color-text);
}

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

.option__detail,
.option__field {
  padding-inline-start: calc(var(--size-checkbox) + var(--space-3));
}

.option__detail {
  margin-top: calc(-1 * var(--space-3));
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* The recommend screen's title search: the field and its Search button on
   one line (AC-020.171) */

.composer__search {
  display: flex;
  gap: var(--space-3);
}

.composer__search .field__input {
  flex: 1;
  min-width: 0;
}

/* Selects */

.select {
  position: relative;
  display: flex;
  align-items: center;
}

.select__input {
  width: 100%;
  min-height: var(--size-target);
  padding-inline: var(--space-4) var(--space-10);
  appearance: none;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-raised);
  color: var(--color-text);
  font-size: var(--font-size-input);
  cursor: pointer;
}

.select__input:hover {
  border-color: var(--color-muted);
}

.select__input[aria-invalid="true"] {
  border: var(--border-thick) solid var(--color-text);
}

.select__chevron {
  position: absolute;
  inset-inline-end: var(--space-3);
  color: var(--color-muted);
  pointer-events: none;
}

/* Section tabs and media type chips */

.section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  margin-top: var(--space-6);
  border-bottom: var(--border-thin) solid var(--color-rule);
}

.section-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-target);
  color: var(--color-muted);
  font-weight: var(--font-weight-semibold);
  border-bottom: var(--border-thick) solid transparent;
}

.section-tabs__tab:hover {
  color: var(--color-text);
}

.section-tabs__tab[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-red);
}

.section-tabs__count {
  font-variant-numeric: tabular-nums;
}

/* Media type chips (AC-020.116): single-select links; the selected one
   inverts its fill, the non-color cue beside aria-current. */
.type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.type-chips__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-target);
  padding-inline: var(--space-4);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-raised);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.type-chips__chip:hover,
.type-chips__chip:focus-visible {
  text-decoration: none;
}

.type-chips__chip:hover {
  background: var(--color-chip);
}

.type-chips__chip[aria-current="true"] {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-ground);
  font-weight: var(--font-weight-bold);
}

/* Slim chips (AC-020.155): the Library's status pills and media type chips,
   smaller in padding and type than the search screen's, still above the
   24px minimum target. */
.type-chips--slim {
  margin-bottom: var(--space-2);
}

.type-chips--slim .type-chips__chip {
  min-height: var(--space-8);
  padding-inline: var(--space-3);
  font-size: var(--font-size-xs);
}

/* The Library screen's chip rows sit under its search field (AC-020.123,
   AC-020.124). */
.library__filters {
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Navigation menu */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--size-header);
  padding-inline: var(--space-5);
  background: var(--color-ground);
  border-bottom: var(--border-thin) solid var(--color-rule);
}

.app-header__wordmark {
  display: none;
}

/* Below --bp-desktop the account button sits at the start of the header,
   where the hidden wordmark would be (AC-020.180). It may shrink, so a long
   handle is cut rather than widening the header. */
.app-header__account {
  min-width: var(--size-target);
  max-width: 100%;
}

/* With the handle the button is a pill holding the icon and "@handle",
   at least 44px tall. */
.app-header__account--handle {
  gap: var(--space-2);
  width: auto;
  height: auto;
  min-height: var(--size-target);
  padding-inline: var(--space-3) var(--space-4);
}

/* A long handle is cut to one line with an ellipsis; the accessible name,
   which the visually hidden text completes, keeps it whole. */
.app-header__handle {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: var(--color-ground);
  border-top: var(--border-thin) solid var(--color-rule);
  padding-bottom: env(safe-area-inset-bottom);
}

.app-nav__list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: var(--size-bottom-bar);
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 100%;
  min-height: var(--size-target);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.icon--nav {
  width: var(--size-icon-nav);
  height: var(--size-icon-nav);
}

.app-nav__link:hover,
.app-nav__link:focus-visible {
  color: var(--color-text);
  text-decoration: none;
}

/* Each link is a size container so a wide bottom-bar badge can be kept
   inside its cell (below). */
.app-nav__link {
  position: relative;
  container-type: inline-size;
}

/* Count badges: on the bottom bar the badge overlaps the icon's top-right
   corner; in the rail it follows the label. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-badge);
  height: var(--size-badge);
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-red);
  color: var(--color-ground);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* A badge wider than the room right of its anchor, such as "99+" in a
   320px-wide bar's sixth cell, slides left just enough to end at the cell's
   edge rather than overrun it; elsewhere the shift is zero. */
.app-nav__live .badge {
  position: absolute;
  top: var(--space-1);
  left: calc(50% + var(--space-2));
  translate: min(0px, calc(50cqi - var(--space-2) - 100%)) 0;
}

@media (min-width: 64em) {
  .app--signed-in .app-nav__live .badge {
    position: static;
  }
}

.app-nav__link[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.app-nav__link[aria-current="page"] .icon {
  color: var(--color-red);
}

.account-menu {
  inset: auto;
  margin: 0;
  position: fixed;
  top: var(--size-header);
  left: var(--space-5);
  min-width: 15rem;
  max-width: calc(100vw - 2 * var(--space-5));
  padding: var(--space-2) 0;
  background: var(--color-raised);
  color: var(--color-text);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-popover);
}

.account-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-menu__divider {
  margin: var(--space-2) 0;
  border: 0;
  border-top: var(--border-thin) solid var(--color-rule);
}

.share [hidden] {
  display: none;
}

.account-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--size-target);
  padding-inline: var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
}

.account-menu__item:hover,
.account-menu__item:focus-visible {
  background: var(--color-chip);
  text-decoration: none;
}

.account-menu__form {
  margin: 0;
}

/* The identity block: the handle, then the account's own email under it,
   plain text rather than a control (AC-020.181). */
.account-menu__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
}

.account-menu__handle {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.account-menu__email {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

/* The app's name above the version item, in the wordmark's typeface but
   small, muted, and without the red bar (AC-020.182). */
.account-menu__wordmark {
  padding: var(--space-2) var(--space-4) 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-stretch-display);
  line-height: var(--line-height-display);
}

/* The version item: page | server, plain text rather than a control
   (AC-020.114). */
.account-menu__version {
  padding: var(--space-2) var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* The page's version at the bottom of the rail; the bottom bar on a phone
   never shows it (AC-020.113). */
.app-version {
  display: none;
}

@media (min-width: 64em) {
  .app--signed-in .app-version {
    display: block;
    margin: auto 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
  }
}

/* --bp-desktop: header and navigation live in the rail. */
@media (min-width: 64em) {
  .app--signed-in .app-header {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-6);
    min-height: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
  }

  .app--signed-in .app-header__wordmark {
    display: block;
    justify-self: start;
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-display);
    font-stretch: var(--font-stretch-display);
    line-height: var(--line-height-display);
    align-self: center;
  }

  .app--signed-in .app-header__account {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .app--signed-in .app-nav {
    position: static;
    background: transparent;
    border-top: 0;
    padding-bottom: 0;
  }

  .app--signed-in .app-nav__list {
    grid-auto-flow: row;
    height: auto;
  }

  .app--signed-in .app-nav__link {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    font-size: var(--font-size-base);
  }

  .account-menu {
    top: var(--space-5);
    left: var(--width-rail);
  }
}

/* List rows and panels */

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* A section heading carries a short red bar above it, marking where each part of a screen
   starts. */
.section__heading::before {
  content: "";
  display: block;
  width: var(--size-accent);
  height: var(--border-tab);
  margin-bottom: var(--space-3);
  background: var(--color-red);
}

.rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-rule);
}

/* Inside a list each row is an item card: a raised fill, a thin rule edge, and panel
   corners, with the list's gap between cards in place of the bottom rule. A card never
   shows a hover or selected fill. */
.rows > .row {
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
}

.row__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.row__title {
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

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

/* An item row's title line: the media type icon, then the title, which
   still wraps (style guide, List rows and panels, Media type icon;
   AC-020.183). */
.row__title-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.icon--media {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-muted);
  flex-shrink: 0;
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-muted);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: var(--border-thin) solid var(--color-line);
}

.row--stack,
.entry {
  flex-wrap: wrap;
}

/* An item row showing a rating mark or its status word: one left-aligned column of the title
   line, the metadata, the mark (or the status word) and its chips, then any actions, at every
   width (style guide, List rows and panels, Rating mark under the title; AC-020.184). A
   .row__main keeps the full width, so a line whose time sits at its far end still reaches it. */
.row--marked {
  flex-direction: column;
  align-items: flex-start;
}

.row--marked > .row__main {
  align-self: stretch;
}

.row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.row__person {
  color: var(--color-red);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.entry__title {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-stretch-display);
  line-height: var(--line-height-display);
  overflow-wrap: anywhere;
}

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

.label-rename {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

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

.chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--color-chip);
  color: var(--color-chip-text);
  font-size: var(--font-size-sm);
}

/* Admin data: a table on wider screens; below --bp-tablet each row stacks into "Label: value"
   lines, so it never scrolls sideways (the invites screen, AC-020.105). Changing a table's
   display can drop its table semantics, so the markup carries explicit ARIA table roles. */

.data-table {
  display: block;
  width: 100%;
  border-collapse: collapse;
}

.data-table__head {
  display: none;
}

.data-table__body {
  display: block;
}

.data-table__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-rule);
}

.data-table__cell {
  overflow-wrap: anywhere;
}

.data-table__cell[data-label]::before {
  content: attr(data-label) ": ";
  color: var(--color-muted);
  font-weight: var(--font-weight-semibold);
}

.data-table__cell--number {
  font-variant-numeric: tabular-nums;
}

/* --bp-tablet */
@media (min-width: 48em) {
  .data-table {
    display: table;
  }

  .data-table__head {
    display: table-header-group;
  }

  .data-table__body {
    display: table-row-group;
  }

  .data-table__row {
    display: table-row;
  }

  .data-table__header {
    padding: var(--space-3);
    border-bottom: var(--border-thin) solid var(--color-rule);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: start;
  }

  .data-table__cell {
    display: table-cell;
    padding: var(--space-3);
    border-bottom: var(--border-thin) solid var(--color-rule);
    vertical-align: middle;
  }

  .data-table__cell[data-label]::before {
    content: none;
  }

  .data-table__header--number,
  .data-table__cell--number {
    text-align: end;
  }
}

/* Rating mark */

.mark {
  --mark-bar-width: 0.4375rem;
  --mark-bar-gap: var(--space-1);
  --mark-track-height: 1.625rem;
  --mark-favorite-size: 1rem;

  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
}

.mark__craft,
.mark__enjoy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mark__bars {
  display: flex;
  gap: var(--mark-bar-gap);
  height: var(--mark-track-height);
}

.mark__bar {
  position: relative;
  width: var(--mark-bar-width);
  height: 100%;
  background: var(--color-track);
}

.mark__bar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: var(--color-text);
}

.mark__bar--1::after {
  height: 20%;
}

.mark__bar--2::after {
  height: 40%;
}

.mark__bar--3::after {
  height: 60%;
}

.mark__bar--4::after {
  height: 80%;
}

.mark__bar--5::after {
  height: 100%;
}

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

.mark__numeral {
  color: var(--color-red);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-stretch-numeral);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-numeral);
}

.mark__status {
  color: var(--color-text);
}

.mark__favorite {
  flex: none;
  align-self: flex-end;
  width: var(--mark-favorite-size);
  height: var(--mark-favorite-size);
  color: var(--color-red);
}

/* Score keys and the rating form */

.rate {
  padding-bottom: var(--space-4);
}

.rate__craft {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-block: var(--border-thin) solid var(--color-rule);
}

.rate__heading {
  font-size: var(--font-size-md);
}

.keys-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.keys {
  display: grid;
  gap: var(--space-2);
}

.keys--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.keys--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.keys--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-target);
  padding: var(--space-1) var(--space-2);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  cursor: pointer;
}

.key--enjoy {
  min-height: var(--size-key-enjoy);
}

.key:not(:has(:checked)):hover {
  background: var(--color-raised);
}

.key:has(:focus-visible) {
  outline: var(--border-thick) solid var(--color-text);
  outline-offset: 2px;
}

.key:has(:checked) {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-ground);
  font-weight: var(--font-weight-bold);
}

.key--enjoy:has(:checked) {
  border-color: var(--color-red);
  background: var(--color-red);
}

.key:has([aria-invalid="true"]) {
  border: var(--border-thick) solid var(--color-text);
}

.key__input,
.pill__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

.keys__ends {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

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

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tag-pill);
  padding-inline: var(--space-4);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-raised);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.pill:not(:has(:checked)):hover {
  background: var(--color-chip);
}

.pill:has(:focus-visible) {
  outline: var(--border-thick) solid var(--color-text);
  outline-offset: 2px;
}

.pill:has(:checked) {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-ground);
  font-weight: var(--font-weight-bold);
}

.pill:has(:disabled) {
  border-color: var(--color-rule);
  background: transparent;
  color: var(--color-muted);
  cursor: default;
}

.pill:has([aria-invalid="true"]) {
  border: var(--border-thick) solid var(--color-text);
}

/*
 * The tag picker (style guide, Score keys and the rating form): one group per facet that
 * opens and closes, and above them the filter, which the app script shows. A filtered-out
 * pill or group is hidden with the hidden attribute, which the pill's own display would
 * otherwise override.
 */
.tag-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tag-picker__filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.tag-picker__filter[hidden],
.tag-picker [hidden] {
  display: none;
}

.tag-group {
  border-block-end: var(--border-thin) solid var(--color-rule);
}

.tag-group__summary {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-height: var(--size-target);
  padding-block: var(--space-2);
  cursor: pointer;
}

.tag-group__summary::-webkit-details-marker {
  display: none;
}

.tag-group__chevron {
  align-self: center;
  margin-inline-start: auto;
  color: var(--color-muted);
}

.tag-group[open] .tag-group__chevron {
  transform: rotate(180deg);
}

.tag-group__name {
  font-weight: var(--font-weight-semibold);
}

.tag-group__question {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.tag-group > .pills {
  padding-block-end: var(--space-4);
}

.pill__note {
  margin-inline-start: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
}

.save-bar {
  position: sticky;
  bottom: calc(var(--size-bottom-bar) + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-save-bar);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-thin) solid var(--color-rule);
  background: var(--color-raised);
}

.save-bar__count {
  flex: 1;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.success {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-red);
  font-weight: var(--font-weight-semibold);
}

/* --bp-desktop: there is no bottom bar to sit above. */
@media (min-width: 64em) {
  .save-bar {
    bottom: 0;
  }
}

/* Public header: signed-out screens */

.public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--size-header);
  padding-inline: var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-rule);
}

.wordmark {
  display: inline-block;
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-stretch-display);
  line-height: var(--line-height-display);
}

/* The wordmark's red underline: a bar the width of the word, sized in em so it scales with
   the wordmark from the rail to the sign-in screen. */
.wordmark::after,
.app-header__wordmark::after,
.signin-wordmark::after {
  content: "";
  display: block;
  height: 0.09em;
  margin-top: 0.1em;
  background: var(--color-red);
}

.wordmark:hover,
.wordmark:focus-visible {
  text-decoration: none;
}

/* Notices and errors */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: var(--width-content);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
  color: var(--color-text);
}

.notice__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

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

/* The one-time notice (AC-020.144): the notice panel holding one line, with no icon, at the
   top of main under the h1 (style guide, Notices and errors). */

.notice--success {
  font-weight: var(--font-weight-semibold);
}

/* A created invite's Copy link (AC-020.143) sits under the notice, outside its alert, so the
   polite status region is announced on its own. The button keeps its own width, and stays
   hidden with the hidden attribute until the app script finds a clipboard, which the
   button's own display would otherwise override. */

.invite-created__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  max-width: var(--width-content);
  margin-top: var(--space-3);
}

.invite-created__status {
  color: var(--color-muted);
}

.invite-created [hidden] {
  display: none;
}

/* Alpha banner, alpha notice, and alpha notice dialog (AC-020.104, AC-020.112): the banner
   is a strip above the page frame on every screen, a button that opens the dialog; the
   notice is a panel above the terms acceptance controls; the dialog is a centered popover
   panel holding the same notice. */

.alpha-banner {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  background: var(--color-raised);
  border: 0;
  border-top: var(--border-tab) solid var(--color-red);
  border-bottom: var(--border-thin) solid var(--color-rule);
  border-radius: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-align: center;
  cursor: pointer;
}

.alpha-banner:hover,
.alpha-banner:focus-visible {
  text-decoration: underline;
}

/* The strip meets the viewport's edges, so its focus ring is drawn inside it. */
.alpha-banner:focus-visible {
  outline-offset: -4px;
}

.alpha-dialog {
  width: calc(100% - 2 * var(--space-5));
  max-width: var(--width-sheet);
  max-height: 90vh;
  padding: var(--space-5);
  overflow-y: auto;
  background: var(--color-raised);
  color: var(--color-text);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
}

/* Display is set only while open: an author display would override the user agent's
   display: none for a closed popover. */
.alpha-dialog:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.alpha-dialog .button {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.alpha-dialog::backdrop {
  background: var(--scrim);
}

.alpha-notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--width-content);
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
  color: var(--color-text);
}

/* Empty states */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* Inside a section the section's own spacing already sets it apart. */
.section .empty-state {
  margin-top: 0;
}

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

.empty-state__heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.icon--empty {
  width: var(--size-icon-empty);
  height: var(--size-icon-empty);
  color: var(--color-red);
}

/* Explicit-work placeholder */

.placeholder {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-thin) dashed var(--color-line);
  border-radius: var(--radius-panel);
}

.placeholder__text {
  color: var(--color-text);
}

.placeholder__link {
  text-decoration: underline;
}

/* Inbox: the pending count and the inbox entry row */

.inbox {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.inbox__count {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.inbox-entry .row__main {
  flex: 1;
}

.inbox-entry__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.inbox-entry__action {
  color: var(--color-muted);
}

.inbox-entry__time {
  margin-inline-start: auto;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.inbox-entry .entry__title {
  font-size: var(--font-size-xl);
}

@media (min-width: 64em) {
  .inbox-entry .entry__title {
    font-size: var(--font-size-4xl);
  }
}

.inbox-entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Queues and lists: the queue entry row and the reorder handle */

/* A queue entry is a grid: the handle and position in the first columns, the text in the
   last, and the owner's controls under the text, so they line up with the title. */
.queue-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
}

.queue-entry--editable {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.queue-entry__position {
  min-width: 2ch;
  color: var(--color-muted);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-stretch-numeral);
  line-height: var(--line-height-numeral);
  font-variant-numeric: tabular-nums;
}

.queue-entry__text {
  flex: 1;
}

.queue-entry__actions {
  display: flex;
  grid-column: -2 / -1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.queue-entry__move {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.queue-entry__field {
  flex-direction: row;
  align-items: center;
}

.queue-entry__input {
  width: 4rem;
  font-variant-numeric: tabular-nums;
}

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

.entry__attribution--person {
  color: var(--color-red);
}

.reorder-handle {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--size-target);
  height: var(--size-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  cursor: grab;
}

.reorder-handle:hover {
  color: var(--color-text);
}

/* SortableJS sets these three classes during a drag (style guide, Reorder). Each is also
   written for a row card, whose own selector would otherwise outrank it. The chosen row
   keeps the raised fill, so its red attribution text stays at 4.5:1, and is marked by a
   muted edge instead. */
.sortable-chosen,
.rows > .sortable-chosen {
  border-color: var(--color-muted);
  background: var(--color-raised);
}

.sortable-ghost,
.rows > .sortable-ghost {
  border: var(--border-thin) dashed var(--color-line);
  background: none;
}

.sortable-ghost > * {
  visibility: hidden;
}

.sortable-drag,
.rows > .sortable-drag {
  border: var(--border-thin) solid var(--color-line);
  background: var(--color-raised);
}

.list-links {
  margin-top: var(--space-8);
}

/* Add all to queue sits between the owner line and the entries of another member's list. */
.list-queue-all {
  margin-block: var(--space-4);
}

/* Dialogs and sheets */

.sheet {
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 90vh;
  margin: 0;
  padding: var(--space-5);
  overflow-y: auto;
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-raised);
  color: var(--color-text);
}

.sheet::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-line);
}

.sheet::backdrop {
  background: var(--scrim);
}

.sheet__cancel {
  margin-top: var(--space-4);
}

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

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--size-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.menu__item:hover {
  text-decoration: underline;
}

.confirm {
  max-width: var(--width-content);
  margin-top: var(--space-4);
}

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

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

.confirm__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --bp-tablet: a sheet is a centered dialog. */
@media (min-width: 48em) {
  .sheet {
    inset: 0;
    width: var(--width-sheet);
    margin: auto;
    border-radius: var(--radius-sheet);
  }

  .sheet::before {
    display: none;
  }
}

/* Screens: getting in */

.signin-wordmark {
  width: fit-content;
  font-size: var(--font-size-9xl);
  font-stretch: var(--font-stretch-numeral);
}

.signin {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--width-content);
  margin-top: var(--space-4);
}

.signin__tagline,
.signin__note {
  color: var(--color-muted);
}

.signin__link {
  text-decoration: underline;
}

.signin__methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/*
 * The welcome layout: the sign-in screen and the signed-out landing, which have no public
 * header. The wordmark is the page's one heading, the tagline is a statement in white under
 * it with the muted subline after it, and the ways in sit together in one panel. From
 * --bp-desktop the wordmark and the two lines take the left column and the panel the right.
 */
.app-main--welcome {
  gap: var(--space-6);
  padding-top: var(--space-12);
}

.app-main--welcome .signin__tagline {
  max-width: 24ch;
  color: var(--color-text);
  text-wrap: balance;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-heading);
}

.signin__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

/*
 * The tagline's media word. The three words share one grid cell, so the line keeps the widest
 * word's width, and a shorter word is centered in it so the spare space splits evenly around
 * it. Only the first shows unless motion is allowed; then each shows in turn for two seconds,
 * with no end (style guide, Screens, Getting in).
 */
.tagline-cycle {
  display: inline-grid;
  justify-items: center;
  color: var(--color-red);
}

.tagline-cycle__word {
  grid-area: 1 / 1;
}

.tagline-cycle__word:not(:first-child) {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .tagline-cycle__word {
    animation: tagline-cycle 6s linear infinite;
  }

  .tagline-cycle__word:nth-child(2) {
    animation-delay: -4s;
  }

  .tagline-cycle__word:nth-child(3) {
    animation-delay: -2s;
  }

  @keyframes tagline-cycle {
    0% {
      opacity: 0;
    }

    5%,
    30% {
      opacity: 1;
    }

    35%,
    100% {
      opacity: 0;
    }
  }
}

.signin__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
}

.signin__panel .notice {
  margin-top: 0;
}

/* --bp-tablet */
@media (min-width: 48em) {
  .signin__panel {
    padding: var(--space-6);
  }
}

/* --bp-desktop */
@media (min-width: 64em) {
  .app-main--welcome,
  .app--public:has(.app-main--welcome) .app-footer {
    max-width: calc(var(--width-welcome) + 2 * var(--space-6));
  }

  .app-main--welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--width-sheet));
    align-content: start;
    column-gap: var(--space-12);
    row-gap: var(--space-5);
    padding-top: 16vh;
  }

  .app-main--welcome > .signin {
    display: contents;
  }

  .app-main--welcome .signin-wordmark {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    font-size: var(--font-size-10xl);
  }

  .app-main--welcome .signin__lines {
    grid-column: 1;
    grid-row: 2;
  }

  .app-main--welcome .signin__tagline {
    font-size: var(--font-size-xl);
  }

  .app-main--welcome .signin__panel {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* Screens: profile */

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

.profile__handle,
.profile__count {
  color: var(--color-muted);
}

.profile__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-variant-numeric: tabular-nums;
}

.profile__number {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.profile__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* The Favorites shelf's family headings (style guide, Favorites,
   Favorites shelf; AC-028.22). */
.favorites__family {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Screens: item page */

.item-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

.item-title__poster {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--size-poster-width);
  height: var(--size-poster-height);
  border-radius: var(--radius-poster);
  background: var(--color-raised);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.item-title__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.item-title__meta {
  color: var(--color-muted);
}

.item-title__series,
.item-forms__link {
  color: var(--color-text);
  text-decoration: underline;
}

/* Wikidata's short description takes the synopsis' place under the title block, with its muted
   source line. */
.item-description {
  max-width: var(--width-content);
  margin-top: var(--space-5);
}

.item-description__source {
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.queue-added {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-target);
  padding-inline: var(--space-5);
  border: var(--border-thin) solid var(--color-red);
  border-radius: var(--radius-pill);
  background: var(--color-red-wash);
  color: var(--color-red);
  font-weight: var(--font-weight-semibold);
}

@media (prefers-reduced-motion: no-preference) {
  .queue-added {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
}

/* The list and status forms share one outlined panel under the title block, apart from the
   main actions. */
.item-forms {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
}

.item-forms > .row__detail {
  align-self: center;
}

.item-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.item-own__status {
  font-weight: var(--font-weight-semibold);
}

/* "Add to favorites" or "Remove from favorites" under the own rating
   (style guide, Favorites, Item page and rating form; AC-028.26). */
.item-own__favorite {
  margin-top: var(--space-4);
}

.mark--detail {
  --mark-bar-width: 0.6875rem;
  --mark-bar-gap: 0.375rem;
  --mark-track-height: 2.5625rem;
}

.mark--detail .mark__numeral {
  font-size: var(--font-size-8xl);
}

.item-rating__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.item-rating__muted {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.item-prompt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: var(--width-content);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-rule);
  border-radius: var(--radius-panel);
  background: var(--color-raised);
}

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

.item-prompt__text {
  color: var(--color-muted);
}

/* --bp-tablet */
@media (min-width: 48em) {
  .item-prompt {
    padding: var(--space-6);
  }
}

/* Screens: recommend. The share section sits under the form, set off by a rule line; its QR
   code stands on the white tile a code needs to scan (style guide, QR tile). Copy link is
   hidden with the hidden attribute until the app script finds a clipboard, which the
   button's own display would otherwise override. The code is drawn with hard pixel edges,
   since it is shown smaller than the PNG it is encoded at. */

.share {
  max-width: var(--width-content);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-rule);
}

.share__tile {
  align-self: flex-start;
  max-width: 15rem;
  padding: var(--space-3);
  border-radius: var(--radius-panel);
  background: var(--color-qr-tile);
}

.share__qr {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Screens: long-form pages (policy pages) */

.policy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--width-content);
  line-height: var(--line-height-body);
}

.policy__meta {
  display: flex;
  flex-direction: column;
}

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

.policy__link,
.prose a {
  text-decoration: underline;
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-8);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.prose ul,
.prose ol {
  margin-bottom: 0;
  padding-left: var(--space-6);
}

/* Footer and navigation links */

.app-footer {
  margin-top: var(--space-10);
  border-top: var(--border-thin) solid var(--color-rule);
  padding-top: var(--space-2);
}

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

.footer-links__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-target);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  text-decoration: underline;
}

.footer-links__link:hover,
.footer-links__link:focus-visible {
  color: var(--color-text);
}

/* Feedback and triage (specs/020-app-shell/ T-11). The feedback text keeps its line breaks and
   wraps a long word rather than widening the row. */

.field__input--area {
  min-height: calc(var(--size-target) * 3);
  padding-block: var(--space-3);
  resize: vertical;
}

.feedback-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback-sent-with {
  margin-top: var(--space-4);
}

.item-feedback {
  margin-top: var(--space-6);
}

.triage-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Give invites: the number and the button on one line, on the people list and a profile
   (AC-020.149, AC-020.150). */

.people-grant__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.admin-count {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Utilities */

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

/* Explicit content (AC-020.74, AC-020.75, AC-020.80; style guide, Explicit
   marker and Checkboxes): the rule above the signup choice, the revealed
   attestation, hidden while "Show explicit works" is unchecked, and the
   "Explicit" marker. */

.explicit-rule {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: var(--border-thin) solid var(--color-rule);
}

.explicit-choice__attestation {
  padding-inline-start: var(--space-8);
}

.explicit-choice:not(:has(input[name="explicit_content"]:checked)) .explicit-choice__attestation {
  display: none;
}

.explicit-marker {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-chip);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}