:root {
  color-scheme: light dark;
  --bg: #f4f2fc;
  --card: #fff;
  --text: #1d1a33;
  --muted: #666380;
  --line: #e2dff2;
  --accent: #6d4ff0;
  --accent-text: #fff;
  --good: #1a8a4a;
  --bad: #c62f2f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0c1b;
    --card: #181530;
    --text: #f2f0fb;
    --muted: #a09cc0;
    --line: #2b2750;
    --accent: #8668ff;
    --good: #4ade80;
    --bad: #ff8a8a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  position: relative;
  width: 100%;
  max-width: 30rem;
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgb(40 20 120 / 0.12);
}

.logo {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.masthead h1 {
  margin: 0;
}

.masthead .lede {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
}

h1 {
  margin: 1rem 0 0.25rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

.lede {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.steps {
  margin: 0 0 1.75rem;
  padding-left: 1.25rem;
}

.steps li {
  margin: 0.5rem 0;
}

.button {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.secondary {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.actions .button {
  flex: 1;
  min-width: 10rem;
  text-align: center;
}

.button:hover {
  filter: brightness(1.1);
}

.button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

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

code {
  display: block;
  margin: 0.5rem 0 1rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.85rem;
  word-break: break-all;
  user-select: all;
}

.also {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.35;
  text-decoration: none;
}

.button[hidden],
.also[hidden] {
  display: none;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.corner {
  /* The padding of the box, as the rest of what is in it */
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: flex;
  gap: 1rem;
}

.link-button[hidden] {
  display: none;
}

.coffee {
  margin: 1.25rem 0 0;
}

.coffee a {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.coffee a:hover {
  color: var(--accent);
}

.coffee[hidden] {
  display: none;
}

/* The message of what was saved and the thanks are on one line, the thanks to the right */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
}

.footer p {
  margin-bottom: 0;
}

.footer #status:empty {
  display: none;
}

.footer .coffee {
  margin: 1rem 0 0 auto;
}

#filtered {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

#filtered:empty,
#filtered:has(+ #status:not(:empty)) {
  display: none;
}

.kofi {
  width: 1.2em;
  height: 1.2em;
  fill: #ff5e5b;
  vertical-align: -0.25em;
}

.also img {
  border-radius: 10px;
}

.also strong {
  color: var(--text);
}

.also:hover strong {
  color: var(--accent);
}

.inspired {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

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

#status {
  margin-top: 1rem;
}

#status.good {
  color: var(--good);
  font-weight: 600;
}

#status.bad {
  color: var(--bad);
}

#status ol {
  padding-left: 1.25rem;
}

.addons {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  /* One column no wider than the box, whatever the name: with the width of its content, a long name pushed the rows out of it */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.addons[hidden] {
  display: none;
}

/* What is drawn while the addons are being read, only for who comes back with a session kept: the shape of the rows, and not the button to connect */
.skeleton,
.returning #connect,
.returning #note {
  display: none;
}

.returning .skeleton {
  display: grid;
}

.skeleton li {
  cursor: default;
}

.skeleton .bar {
  display: block;
  width: 60%;
  height: 0.8rem;
  margin: 0.3rem 0;
  border-radius: 6px;
  background: var(--line);
  animation: pulse 1.2s ease-in-out infinite;
}

.skeleton .bar.short {
  width: 35%;
}

@keyframes pulse {
  50% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton .bar {
    animation: none;
  }
}

.addons li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.addons li .logo-small,
.addons li strong {
  cursor: grab;
}

.addons .lists summary {
  list-style: none;
}

.addons .lists summary::-webkit-details-marker {
  display: none;
}

.addons li.dragging {
  opacity: 0.4;
}

.addons li {
  position: relative;
}

.addons li.drop-before::before,
.addons li.drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  pointer-events: none;
}

.addons li.drop-before::before {
  top: -5px;
}

.addons li.drop-after::after {
  bottom: -5px;
}

.logo-small {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--line);
  object-fit: cover;
}

.addons .name {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.addons .lists {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.addons .lists summary {
  cursor: pointer;
}

.addons .lists summary span {
  white-space: nowrap;
  margin-left: 0.25rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
}

.addons .lists .list .move {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.7rem;
}

.addons .lists .list label + .move {
  margin-left: auto;
}

.addons .lists .list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 1.5rem;
  margin-top: 0.3rem;
}

.addons .lists label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  cursor: pointer;
}

.addons .name strong,
.addons .name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .addons li {
    gap: 0.35rem;
    padding: 0.5rem;
  }

  .move {
    width: 1.6rem;
  }
}

.addons small {
  color: var(--muted);
}

.move {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}

a.move {
  display: grid;
  place-items: center;
  text-decoration: none;
}

span.move {
  display: inline-block;
}

.move:hover:not(:disabled) {
  color: var(--accent);
  background: var(--line);
}

.move.remove:hover:not(:disabled) {
  color: var(--bad);
}

.move:disabled {
  opacity: 0.25;
  cursor: default;
}

.coffee[hidden],
.also[hidden] {
  display: none;
}

.remove:hover:not(:disabled) {
  color: var(--bad);
}

.danger {
  background: #c62f2f;
  color: #fff;
}

dialog {
  width: min(22rem, calc(100vw - 2rem));
  padding: 0;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.6);
}

dialog form {
  position: relative;
  padding: 1.5rem;
}

dialog h2 {
  margin: 0 2rem 0.5rem 0;
  font-size: 1.15rem;
}

dialog p {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

dialog .danger {
  width: 100%;
}

.close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/* The page of the lists is not one box: each list is a box of its own, in a column of the width of the page */
main.manage {
  max-width: 44rem;
  /* How far the cross to uninstall ends from the edge of a row: the padding of the row, its border, and the room around the cross in its button; in rem, as they are,
     so what is at the right of the page ends there, as the crosses do, whatever the size of the text */
  --edge: calc(1.395rem + 1px);
}

main.manage .corner {
  right: calc(2rem + var(--edge));
}

main.manage .footer {
  padding-right: var(--edge);
}

/* On a phone the page to manage addons gives the room to the addons, as the margin of the page and the padding of the box would take a quarter of the width */
@media (max-width: 480px) {
  body:has(> main.manage) {
    justify-content: flex-start;
    padding: 0.5rem;
  }

  main.manage {
    padding: 0.9rem 0.65rem;
    border-radius: 16px;
    --edge: calc(1.195rem + 1px);
  }

  main.manage .corner {
    padding-right: var(--edge);
  }

  main.manage .corner {
    margin-bottom: 0.25rem;
  }

  .masthead {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .masthead .logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .masthead h1 {
    font-size: 1.35rem;
  }

  main.manage .addons {
    margin-top: 0.75rem;
    gap: 0.4rem;
  }
}

main.lists {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 64rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.panel {
  min-width: 0;
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgb(40 20 120 / 0.12);
}

.panel[hidden] {
  display: none;
}

.panel h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.15rem;
}

.panel h2 img {
  border-radius: 6px;
}

main.lists #status:empty {
  display: none;
}

@media (max-width: 480px) {
  .panel {
    padding: 1.25rem;
  }

  .shelf {
    margin-right: -1.25rem;
    padding-right: 1.25rem;
  }
}

/* A list is a strip that runs sideways, two rows high at most, so that what does not fit is out of sight until they scroll to it */
.shelf {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column dense;
  grid-auto-columns: 9rem;
  gap: 1rem;
  margin: 0.75rem -2rem 0 0;
  padding: 0 2rem 0.75rem 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.shelf a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.shelf img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--line);
  border-radius: 10px;
}

.shelf span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

.shelf a:hover span,
.shelf a:focus-visible span {
  color: var(--accent);
}



#connect {
  margin-top: 1.25rem;
}

.shelf li {
  position: relative;
}

.shelf .check {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgb(14 12 26 / 0.8);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
}

.shelf li:hover .check,
.shelf .check:focus-visible {
  opacity: 1;
}

.shelf .check:hover {
  background: var(--accent);
}

/* On a touch screen there is no hover to show it with */
@media (hover: none) {
  .shelf .check {
    opacity: 1;
  }
}

.toast {
  margin: 0.75rem 0 0;
  color: var(--good);
  font-weight: 600;
}

.toast[hidden] {
  display: none;
}

dialog .button {
  width: 100%;
}

/* Where there is no room beside the title, the two links go above it, to the right */
@media (max-width: 480px) {
  .corner {
    position: static;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
  }
}

/* Outside the box, above it, to the right: what is about the page and not in it */
.bar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  width: 100%;
  max-width: 64rem;
}

.bar a {
  color: var(--muted);
  font-size: 0.85rem;
}

/* What is wide takes two posters' width, and a big one four posters' room, 2 by 2; the first has the picture behind the title, and the
   second the large poster, and, where it is small, the wide one. The frame grows to where the posters beside it end, and the captions
   have room for two lines, so that every row is as tall as the others */
.shelf li,
.shelf a {
  display: flex;
  flex-direction: column;
}

.shelf a {
  flex: 1;
}

.shelf span {
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shelf .wide,
.shelf .big {
  grid-column: span 2;
}

.shelf .big {
  grid-row: span 2;
}

.shelf .frame {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1.4;
}

.shelf .big .frame {
  aspect-ratio: 2 / 3;
}

.shelf .frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.shelf .big img.wide {
  display: none;
}

@media (max-width: 640px) {
  .shelf {
    grid-auto-columns: 7.5rem;
  }

  .shelf .big {
    grid-row: auto;
  }

  .shelf .big .frame {
    aspect-ratio: 1.4;
  }

  .shelf .big img.tall {
    display: none;
  }

  .shelf .big img.wide {
    display: block;
  }
}