/* Couchlog's own few styles. Pico CSS does the rest. */

/* The look of the app (see Identity/identity.md): four colours only, always dark. The page tag has data-theme="dark",
   and Pico's own dark colours are replaced here. There is no second navy: cards, boxes and tables sit on the page's
   navy and are told apart by a thin off-white line. */
:root {
  --couch-navy: #0a192f;
  --couch-white: #fef7f7;
  --couch-pink: #e764bb;
  --couch-light-pink: #ffb3d9;
  --couch-line: rgb(254 247 247 / 0.2);
  /* Off-white, softened (about 7 : 1 on navy): small extra info and the quiet buttons. */
  --couch-soft: rgb(254 247 247 / 0.7);
}

/* The rule for the colours: pink means "you are here" or "you can press this". Everything else is off-white. */
:root[data-theme="dark"] {
  --pico-background-color: var(--couch-navy);
  --pico-color: var(--couch-white);
  /* Small extra info (dates, counts, labels): softened off-white, so pink stays for what you can press. */
  --pico-muted-color: var(--couch-soft);
  --pico-muted-border-color: var(--couch-line);

  /* Only the page title is hot pink. */
  --pico-h1-color: var(--couch-pink);
  --pico-h2-color: var(--couch-white);
  --pico-h3-color: var(--couch-white);
  --pico-h4-color: var(--couch-white);
  --pico-h5-color: var(--couch-white);
  --pico-h6-color: var(--couch-white);

  /* Links: hot pink and always underlined; light pink when the mouse is over them. */
  --pico-primary: var(--couch-pink);
  --pico-primary-underline: var(--couch-pink);
  --pico-primary-hover: var(--couch-light-pink);
  --pico-primary-hover-underline: var(--couch-light-pink);
  --pico-primary-focus: rgb(231 100 187 / 0.5);

  /* Main buttons (the solid ones): light pink with navy text, hot pink under the mouse. A phone has no mouse, so
     the light pink has to look right on its own. */
  --pico-primary-background: var(--couch-light-pink);
  --pico-primary-border: var(--couch-light-pink);
  --pico-primary-inverse: var(--couch-navy);
  --pico-primary-hover-background: var(--couch-pink);
  --pico-primary-hover-border: var(--couch-pink);
  /* Quiet buttons ("secondary", outlined or solid): a thin softened off-white outline, hot pink under the mouse. */
  --pico-secondary: var(--couch-soft);
  --pico-secondary-background: transparent;
  --pico-secondary-border: var(--couch-soft);
  --pico-secondary-underline: var(--couch-soft);
  --pico-secondary-inverse: var(--couch-soft);
  --pico-secondary-hover: var(--couch-pink);
  --pico-secondary-hover-background: transparent;
  --pico-secondary-hover-border: var(--couch-pink);
  --pico-secondary-hover-underline: var(--couch-pink);
  --pico-secondary-focus: rgb(231 100 187 / 0.5);

  /* Boxes, the pop-up and the search box: the page's navy with a thin line. */
  --pico-card-background-color: var(--couch-navy);
  --pico-card-sectioning-background-color: var(--couch-navy);
  --pico-card-border-color: var(--couch-line);
  --pico-card-box-shadow: none;
  --pico-form-element-background-color: var(--couch-navy);
  --pico-form-element-selected-background-color: var(--couch-line);
  /* A stronger line than the dividers (40%), so a box you type in, a radio button or a checkbox is easy to find. */
  --pico-form-element-border-color: rgb(254 247 247 / 0.4);
  --pico-form-element-color: var(--couch-white);
  --pico-form-element-active-background-color: var(--couch-navy);
  --pico-form-element-active-border-color: var(--couch-pink);
  --pico-form-element-focus-color: var(--couch-pink);
  --pico-table-border-color: var(--couch-line);
  --pico-modal-overlay-background-color: rgb(10 25 47 / 0.85);

  /* The episode the page just jumped to, and the progress bars. */
  --pico-mark-background-color: rgb(255 179 217 / 0.2);
  --pico-mark-color: var(--couch-white);
  --pico-progress-color: var(--couch-light-pink);
  --pico-progress-background-color: var(--couch-line);
}

article {
  border: 1px solid var(--pico-card-border-color);
}

/* A solid quiet button (like "Log out") has no fill, so under the mouse its words turn hot pink with its outline. */
:is(button, [type="submit"], [type="button"], [role="button"]).secondary:not(.outline):is(:hover, :active, :focus) {
  --pico-color: var(--couch-pink);
}

/* The bar across the top: full width, a thin line under it, the logo on the left and the menu on the right. It stays
   at the top while the page scrolls, so it has the page's navy behind it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-block: 0;
  background: var(--couch-navy);
  border-bottom: 1px solid var(--couch-line);
}

/* A jump to an episode (or a season) must not end up hidden behind the bar. */
html {
  scroll-padding-top: 7rem;
}

/* The logo in the header, link to Home. It is bigger than the TMDB logo on the About page (100 px wide). */
header nav a.logo {
  text-decoration: none;
}

header nav a.logo img {
  display: block;
  width: 7rem;
  height: auto;
}

/* On a narrow screen the menu drops to a second line instead of running off the edge. */
header nav {
  flex-wrap: wrap;
}

header nav li {
  white-space: nowrap;
  /* Pico gives each item 1rem above and below, which makes the bar tall. */
  padding-block: 0.25rem;
}

/* The names in the menu and in the tabs under Movies and Series: off-white, no underline (where they sit already says
   they are links). Under the mouse, or when tabbed to, hot pink. The page you are on is hot pink and bold: the bold is
   there because hot pink and off-white look almost equally bright. */
header nav a:not(.logo),
nav.tabs a {
  /* Not var(--pico-color): inside a link Pico sets that to the link colour (hot pink). */
  color: var(--couch-white);
  text-decoration: none;
}

/* On a phone the six names must fit in one row, so they sit closer together. */
@media (max-width: 575px) {
  /* The row takes the full width, with the names spread over it (and a second line on a very narrow screen). The
     small negative margin keeps the first and last name level with the page's own edges. */
  header nav ul:last-child {
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(100% + 0.6rem);
    margin-inline: -0.3rem;
  }

  header nav li {
    padding-inline: 0;
  }

  /* Pico pulls each link outwards with a negative margin to make up for its padding, so both are set here. */
  header nav a:not(.logo) {
    margin-inline: 0;
    padding-inline: 0.3rem;
    font-size: 0.95rem;
  }
}

header nav a:not(.logo):is(:hover, :focus-visible),
nav.tabs a:is(:hover, :focus-visible),
header nav a[aria-current="page"],
nav.tabs a[aria-current="page"] {
  color: var(--couch-pink);
}

header nav a[aria-current="page"],
nav.tabs a[aria-current="page"] {
  font-weight: 700;
}

/* The tabs under the Movies and Series headings, with a thin line under the row. */
.tabs {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

/* Search results: tiles with the poster on top and the name below. */
.results {
  list-style: none;
  padding: 0;
  display: grid;
  /* In rem, not px: the text grows on a big screen, so the tiles must grow with it. */
  grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
  gap: 1.5rem 1rem;
}

.results li {
  list-style: none;
  margin: 0;
  padding: 0;
  /* The tile grows to fill the cell, so the button under it (History) always sits at the bottom. The round To Watch
     button is placed against the tile's corner. */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* The suggestions under an empty search box go as soon as something is typed, without waiting for the results. */
form[role="search"]:has(input:not(:placeholder-shown)) ~ #results .suggestions {
  display: none;
}

/* "Searching…" under the box: only while htmx waits for the results (htmx gives it the class htmx-request then). */
#searching {
  display: none;
}

#searching.htmx-request {
  display: block;
}

/* The line under the header bar that says Couchlog did not answer (problems.js): off-white in a thin box, not pink,
   because it is not something to press. */
#problem {
  margin-block: 0 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--couch-soft);
  border-radius: var(--pico-border-radius);
  font-size: 0.9rem;
}

.tile {
  display: block;
  flex: 1;
  text-decoration: none;
  color: inherit;
  overflow-wrap: anywhere;
}

/* Every tile is the same size: the name always takes two lines (longer names are cut with
   "..." and the full name shows on hover), and the year is kept to one line. */
.tile strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 0.5rem;
  line-height: 1.5;
  min-height: 3em;
}

.tile small {
  display: block;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hovering a tile (or tabbing to it) underlines its title and year, so the choice is easy to see. */
.tile:is(:hover, :focus-visible) :is(strong, small) {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.poster {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--pico-border-radius);
  background: var(--pico-muted-border-color);
}

.no-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  color: var(--pico-muted-color);
}

/* The To Watch button on a title's own page: small, so the page stays tidy. */
.to-watch-action form {
  margin: 0;
}

.to-watch-action:not(.to-watch-corner) button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

/* While the server works on an Add / Remove press ("Adding…"), the button says so and is disabled (htmx puts the class
   htmx-request on the form for as long as it waits). Outside that time only the usual words show. */
.to-watch-action .busy,
.watched-form .busy {
  display: none;
}

.to-watch-action form.htmx-request .idle,
form.watched-form.htmx-request .idle {
  display: none;
}

.to-watch-action form.htmx-request .busy,
form.watched-form.htmx-request .busy {
  display: inline;
}

/* The To Watch button on a poster (the Search page only): a small round + in the top-right corner, and a ✓ once the
   title is on the list. It has a navy edge so it shows on a light poster as well as a dark one. Its words are there
   for screen readers, and for the hover hint. Light pink at rest and hot pink under the mouse, like every main button.
   It is small on purpose: in rem it grows with the text on a wide screen, as the tiles do. */
.to-watch-corner form,
.to-watch-corner > .corner-button {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 1;
}

.corner-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--couch-navy);
  border-radius: 50%;
  background: var(--couch-light-pink);
  color: var(--couch-navy);
}

.corner-button svg {
  width: 0.8rem;
  height: 0.8rem;
}

.corner-button:is(:hover, :focus-visible),
.corner-button.on-list {
  background: var(--couch-pink);
}

button.corner-button.on-list:is(:hover, :focus-visible) {
  filter: brightness(1.15);
}

/* Words that screen readers read but nobody sees. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A dropped series has this note where the button would be. */
.dropped-note {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
}

/* The seasons, under the description and the rating. */
.seasons {
  margin-top: 1.5rem;
}

/* A season's first line: its name and "3 of 10 episodes", a thin bar under them, and Pico's arrow at the right. The
   arrow is a float in Pico; here the line is a row, so the arrow sits level with the name instead of under the bar. */
.seasons summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.season-line {
  flex: 1;
  min-width: 0;
}

.season-line small {
  color: var(--pico-muted-color);
}

.season-line progress {
  display: block;
  width: 100%;
  height: 0.35rem;
  margin: 0.5rem 0 0;
}

/* The episodes of a series: the name and air date on the left, the round check button on the right. */
.episodes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.episodes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

/* The episode the page just jumped to, after marking or un-marking it. */
.episodes li:target {
  background: var(--pico-mark-background-color);
}

.episode-info small {
  display: block;
  color: var(--pico-muted-color);
}

.episodes form {
  margin: 0;
  /* The button keeps its size however long the episode name is. */
  flex: none;
}

/* "Mark Season 2 as watched", above the episodes of the season. */
.season-action {
  margin: 0.5rem 0;
}

.season-action button {
  width: auto;
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

/* The season's buttons side by side: "Mark Season 2 as watched", then "Watch Season 2 again" and its "−" once
   the season is watched through. They wrap on a narrow screen. */
.season-buttons,
.season-rewatch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.season-buttons {
  margin: 0.5rem 0;
}

.season-buttons .season-action {
  margin: 0;
}

/* The small round "−" that takes back the latest watch of an episode, or one rewatch of a season. */
.take-back,
.season-action .take-back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
}

/* The "−" and the round check button of an episode, side by side. */
.episode-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

/* How many times an episode was watched ("2×"), after its name. */
.watch-count {
  margin-left: 0.25rem;
  font-size: 0.85em;
  color: var(--pico-muted-color);
}

/* The pop-up after the first episode marked in a series ("did you watch the earlier episodes too?"). Pico draws
   the pop-up itself; this only lines the buttons up side by side (they wrap on a narrow screen). */
#ask footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

#ask footer form {
  margin: 0;
}

#ask footer button {
  width: auto;
  margin: 0;
}

/* The round check button: the same circle and check, gray until the episode is watched, then green. */
.check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #8b93a0;
  color: #fff;
}

.check.watched {
  background: #2e7d32;
}

.check:is(:hover, :focus-visible) {
  filter: brightness(1.15);
}

/* A progress bar with how many aired episodes are watched written under it, on the Home cards. (The series page has
   its own: .series-bar and .season-line.) */
.progress {
  display: block;
}

.progress progress {
  display: block;
  width: 100%;
  margin: 0.25rem 0;
}

.progress small {
  display: block;
  color: var(--pico-muted-color);
}


/* The News section on Home: wide banners in a grid, each with the days left in its corner. */
.news {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  /* Small enough for two banners side by side on a phone, so Up Next is not pushed far down the page. */
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem;
}

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

.news a {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--pico-border-radius);
}

.banner {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--pico-muted-border-color);
}

/* A title with no banner: its name on a plain background, with room at the bottom for the days left. */
.no-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem 2.5rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.25;
  color: var(--pico-muted-color);
}

/* Navy with off-white text whatever the picture, so it can always be read. */
.news-days {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.1rem 0.7rem;
  border-radius: 1rem;
  background: rgb(10 25 47 / 0.85);
  color: var(--couch-white);
  font-size: 0.9rem;
  font-weight: 600;
}

/* The Home page: one card for each series, with the poster on the left and the round check button on the right. */
.up-next {
  list-style: none;
  padding: 0;
  margin: 0;
}

.up-next li {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.up-next-poster {
  flex: none;
  width: 4.5rem;
}

.up-next-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.up-next-info small {
  color: var(--pico-muted-color);
}

.up-next form {
  margin: 0;
  flex: none;
}

/* The "nothing to watch next" note is only there while the list has no card. */
.up-next:has(li) + .up-next-empty {
  display: none;
}

/* The Calendar page: the titles of one day, each with a small poster on the left. */
.calendar {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.calendar li {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.calendar-poster {
  flex: none;
  width: 3rem;
}

.calendar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

/* "Recently removed" on the To Watch screen: a name on the left, Undo on the right. */
.removed {
  list-style: none;
  padding: 0;
}

.removed li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.removed form {
  margin: 0;
}

.removed button {
  margin: 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
}

.title-page {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* The poster, with what is about the title itself under it: the series' bar and the small buttons. It is next to the
   details. */
.title-poster {
  flex: none;
  width: 185px;
}

/* The whole series' bar: thin, with "8 of 15 episodes" under it. */
.series-bar progress {
  display: block;
  width: 100%;
  height: 0.35rem;
  margin: 0.75rem 0 0.25rem;
}

.series-bar small {
  display: block;
  color: var(--pico-muted-color);
}

/* The small buttons under the poster, one under the other: To Watch, Stop watching, Bring back, Remove from all
   lists. Each is only as wide as its words, on one line (the poster is only 185 px wide and "Remove from all lists"
   is the longest). */
.poster-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.poster-actions > :first-child {
  margin-top: 0.75rem;
}

.poster-actions form {
  margin: 0;
}

.title-poster button {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.title-details {
  flex: 1 1 16rem;
}

/* The "Mark as watched" form (or the date it was watched) on a movie page. */
.watched-section {
  margin-top: 1.5rem;
}

/* On a phone, room at the end of every page. Safari's toolbar floats over the bottom of the screen, and while it is
   hidden a tap near the bottom edge brings it back and never reaches the page, so the last button must sit higher. */
@media (max-width: 575px) {
  main.container {
    padding-bottom: 9rem;
  }
}

.watched-section form {
  max-width: 20rem;
}

/* The date box with the small button at its right, and "Date unknown" under them. The box and the button are the same
   small height, so they sit level. */
.watched-section form.watched-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.5rem 0.75rem;
  max-width: 24rem;
}

.watched-form label {
  margin: 0;
}

.watched-form label:has(input[type="checkbox"]) {
  grid-column: 1 / -1;
  grid-row: 2;
}

.watched-form + p {
  margin-top: 1.25rem;
}

.watched-form button {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  /* A tap is a tap: the phone does not wait to see whether it is a double tap to zoom. */
  touch-action: manipulation;
}

.watched-form :is(input[type="date"], button) {
  /* Pico gives inputs a fixed height; without this the box stays taller than the button next to it. */
  height: auto;
  margin: 0;
  padding-block: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Your stars and note on a title's page, in one thin box (the same line as the other boxes). The stars are light pink,
   with the score small beside them; the note is under them. The pencil runs on in the same line as the last words,
   so it sits right after them (the form, when it opens, goes under them, inside the box). */
.rating-section {
  margin-top: 1.5rem;
}

.rating-section form {
  max-width: 20rem;
}

.rating-card {
  /* The words only screen readers read are placed against the box. */
  position: relative;
  padding: 0.8rem 1rem;
  border: 1px solid var(--couch-line);
  border-radius: var(--pico-border-radius);
  overflow-wrap: anywhere;
}

.rating-stars {
  color: var(--couch-light-pink);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}

.rating-score {
  margin-inline-start: 0.6rem;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}

.rating-note {
  margin-top: 0.45rem;
}

/* With stars above it, the note is a little way down. With no stars it is the first thing in the box. */
.rating-card > .rating-note:first-child {
  margin-top: 0;
}

.rating-section details {
  display: inline;
}

/* The form opens under the saved text, with a little room. */
.rating-section details form {
  display: block;
  margin-top: 0.75rem;
}

/* "No rating" and the five star choices in a row (they wrap on a narrow screen). */
.rating-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.rating-choices legend {
  width: 100%;
}

.rating-choices label {
  margin: 0;
}

/* Neither the pencil nor the "Rate it" button has Pico's arrow: the pencil is an icon, and the button looks like one. */
.rating-section summary::after {
  display: none;
}

/* The edit icon (a pencil) that opens the form once something is saved, right after the saved text. It is small and
   softened, and hot pink under the mouse. Its padding makes it easy to press, and the negative margins give that
   room back so it does not make its line taller. */
.rating-section summary.rating-edit {
  display: inline-flex;
  vertical-align: middle;
  width: fit-content;
  margin: -0.4rem -0.2rem -0.4rem 0.1rem;
  padding: 0.4rem;
  color: var(--pico-muted-color);
}

.rating-section summary.rating-edit:is(:hover, :focus-visible) {
  color: var(--couch-pink);
}

/* "Rate it or add a note", with nothing saved yet: a small quiet button with a star. */
.rating-section summary.rating-open {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  margin: 0;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* "Time spent watching" on the Profile page: the name on the left, the time on the right. */
.time-spent {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1.5rem;
  max-width: 28rem;
}

.time-spent dt,
.time-spent dd {
  margin: 0;
}

/* A film's watches on its page: the date on the left, the button to take that watch back on the right. */
.watch-list {
  list-style: none;
  max-width: 20rem;
  padding: 0;
}

.watch-list li > span {
  color: var(--pico-muted-color);
}

.watch-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.25rem 0;
}

.watch-list form {
  margin: 0;
}

.watch-list button {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

/* The date under a tile in History. */
.watched-on {
  margin: 0.25rem 0 0;
  color: var(--pico-muted-color);
}

/* The line at the top of every page of the public demo (docs/demo.md). A small accent, so light pink. */
.demo-banner {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--couch-light-pink);
  border-radius: var(--pico-border-radius);
  color: var(--couch-light-pink);
  font-size: 0.875rem;
}