/* Colours, font and shapes follow Catodon's default look: the dark theme
   "Rosé Pine v3", which Catodon shows to everyone unless they choose another
   (it does not follow the device's light or dark setting, and neither does
   this site), with Catodon's default corner roundness (14, 20 and 26 pixels,
   and full pills). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --bg: #191724;
  --panel: #1f1d2e;
  --text: #e0def4;
  --strong: #eae8fa;
  --muted: rgba(224, 222, 244, .75);
  --divider: rgba(255, 255, 255, .1);
  --control-border: rgba(255, 255, 255, .2);
  --accent: #c4a7e7;
  --accented-bg: rgba(196, 167, 231, .15);
  --focus: rgba(196, 167, 231, .3);
  --popup: #252337;
  --button-bg: rgba(255, 255, 255, .05);
  --switch-off-bg: rgba(255, 255, 255, .1);
  --switch-off-fg: rgba(224, 222, 244, .8);
  --link: #9ccfd8;
  --button-a: #c4a7e7;
  --button-b: #ebbcba;
  --on-accent: #26233a;
  --hashtag: #ebbcba;
  --notice-bg: #26233a;
  --notice-text: #f6c177;
  --warn-bg: rgba(235, 111, 146, .15);
  --warn-text: #eb6f92;
  --shadow: 0 2px 10px rgba(0, 0, 0, .3);
  --radius-xs: 14px;
  --radius-sm: 20px;
  --radius: 26px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "Inter", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}
::selection { color: var(--on-accent); background: var(--accent); }
.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
a { color: var(--link); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, strong, b, legend, label, thead th { color: var(--strong); }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 1.5rem 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; line-height: 1.3; margin: 2rem 0 .5rem; }
p, ul, dl, table { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; }
li { margin-bottom: .35rem; }
code { font: .9em "Fira Code", "Fira Mono", ui-monospace, Menlo, Consolas, monospace; background: var(--accented-bg); padding: .1em .35em; border-radius: 6px; }
code.block { display: block; padding: .7rem 1rem; overflow-wrap: anywhere; border-radius: var(--radius-xs); }
.lead { font-size: 1.1rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--button-a); color: var(--on-accent); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* header and logo */
header.site { background: var(--panel); border-bottom: 1px solid var(--divider); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; padding-top: .55rem; padding-bottom: .55rem; }
.brand { display: inline-flex; align-items: center; gap: .45rem; color: var(--strong); text-decoration: none; border-radius: var(--radius-xs); }
.brand img { display: block; height: 76px; width: auto; }
nav { display: flex; flex-wrap: wrap; gap: .25rem; }
nav a { display: inline-block; padding: .4rem .9rem; color: var(--text); border-radius: 999px; text-decoration: none; font-weight: 500; }
nav a:hover { background: var(--accented-bg); }
nav a[aria-current="page"] { font-weight: 700; color: var(--accent); background: var(--accented-bg); }

.notice { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--notice-bg); color: var(--notice-text); font-size: .9rem; padding: .7rem .6rem .7rem 1.25rem; margin-top: 1rem; border-radius: var(--radius); }
.notice form { flex: none; margin: 0; }
.notice .close { background: none; color: inherit; min-height: 0; width: 2rem; height: 2rem; padding: 0; font-size: 1.4rem; line-height: 1; font-weight: 400; border-radius: 999px; }
.notice .close:hover { background: var(--divider); filter: none; }
.notice strong { color: inherit; }
.notice a { color: inherit; }

footer.site { margin-top: 3rem; border-top: 1px solid var(--divider); padding: 1.25rem 0 2rem; color: var(--muted); font-size: .875rem; }

/* a page of text or a form sits on one panel */
.sheet { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem 1.75rem 1.25rem; margin-top: 1rem; }
.sheet h1 { margin-top: 1.25rem; }

/* search form */
.search { display: grid; gap: .75rem; margin-bottom: 1.25rem; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field label, .field .label { font-size: .875rem; font-weight: 600; }
/* Four choices in a row; under them the adult switch on the left and the
   Search button in the last column, below "Order by". Two columns on a
   narrow screen (the button still under "Order by"), one on a phone. */
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.filters .toggle { grid-column: 1 / -2; }
.filters > button { grid-column: -2 / -1; }
@media (max-width: 46rem) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* While no forum has a language the form has no Language field: three
   columns then, and on a narrow screen "Order by" takes the whole second row. */
@media (min-width: 46.01rem) { .filters.no-language { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 46rem) { .filters.no-language .sort-field { grid-column: 1 / -1; } }
@media (max-width: 30rem) {
  .filters { grid-template-columns: minmax(0, 1fr); }
  .filters .toggle, .filters > button { grid-column: 1 / -1; }
}
input[type="search"], input[type="url"], input[type="text"], select, textarea {
  font: inherit; color: var(--strong); background: var(--bg);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: .55rem 1rem; width: 100%; min-height: 2.75rem;
}
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
input[type="search"] { border-radius: 999px; padding-left: 1.2rem; }
textarea { resize: vertical; }

/* the platform picker: a closed box that opens to one switch per platform */
.picker { position: relative; }
.picker summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  color: var(--strong); background: var(--bg);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: .55rem 1rem; min-height: 2.75rem;
}
.picker summary::-webkit-details-marker { display: none; }
.picker summary::after { content: "▾"; color: var(--muted); }
.picker[open] summary::after { content: "▴"; }
.picker summary:hover { border-color: var(--accent); }
/* What the closed box says. As the page arrives it is the server's wording
   ("All platforms", "Mbin", "3 of 8 platforms"). Once a switch is moved
   (it no longer is as it arrived, :default) that wording would be out of
   date, so the box says what the switches say now instead. A browser that
   does not know :has() keeps the server's wording. */
.picker .now-all, .picker .now-some, .picker .now-none { display: none; }
.picker:has(input:default:not(:checked), input:checked:not(:default)) .as-sent { display: none; }
.picker:has(input:default:not(:checked), input:checked:not(:default)):has(input:checked):has(input:not(:checked)) .now-some { display: inline; }
.picker:has(input:default:not(:checked), input:checked:not(:default)):not(:has(input:not(:checked))) .now-all { display: inline; }
.picker:has(input:default:not(:checked), input:checked:not(:default)):not(:has(input:checked)) .now-none { display: inline; }
/* The open list is Catodon's popup: the popup colour, the large corner
   roundness and its soft shadow. */
.picker-panel {
  position: absolute; z-index: 10; top: calc(100% + .35rem); left: 0; min-width: 100%; width: max-content; max-width: min(22rem, 90vw);
  display: grid; gap: .6rem; padding: 1rem;
  background: var(--popup); border-radius: var(--radius); box-shadow: 0 4px 32px rgba(0, 0, 0, .3);
}
/* a list in the last column, or the right one of two, opens leftwards. The
   fields are named, not counted: the Language one is left out while empty. */
@media (min-width: 30.01rem) { .filters .sort-field .picker-panel { left: auto; right: 0; } }
@media (min-width: 30.01rem) and (max-width: 46rem) {
  .filters .language-field .picker-panel, .filters.no-language .topic-field .picker-panel { left: auto; right: 0; }
}

/* With the script the plain lists are menus as in Catodon (MkMenu):
   rows that light up in the accent colour, the current choice in the accent
   colour, bold, with a tick. */
[hidden] { display: none !important; }
.picker.menu summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker.menu .picker-panel {
  display: block; padding: 8px 0; min-width: max(100%, 200px); max-width: min(280px, calc(100vw - 16px));
  max-height: min(60vh, 26rem); overflow: auto; overscroll-behavior: contain;
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: calc(100% - 16px); margin: 0 8px; padding: 5px 8px; min-height: 0;
  font-size: .9em; font-weight: 400; line-height: 20px; text-align: start;
  color: var(--text); background: none; border-radius: var(--radius-sm);
}
.menu-item:hover, .menu-item:focus-visible { color: var(--accent); background: var(--accented-bg); filter: none; }
.menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.menu-item:active { color: var(--on-accent); background: var(--accent); }
.menu-item.selected { color: var(--accent); font-weight: 700; }
.menu-item.selected:active { color: var(--on-accent); }
.menu-item.selected::after { content: "✓"; }
/* With the script the closed platform box is written by the script. */
.js .picker .as-sent { display: inline !important; }
.js .picker .now-all, .js .picker .now-some, .js .picker .now-none { display: none !important; }

/* Catodon's switch (MkSwitch): a 21 pixel high pill, 1.6 times as wide, with
   a round knob that moves to the far side and takes the accent colour when on */
.field .switch { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; font-weight: 400; line-height: 20px; color: var(--text); cursor: pointer; user-select: none; }
.switch > span { margin-top: 2px; }
.switch input {
  --height: 21px;
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: calc(var(--height) * 1.6); height: calc(var(--height) + 2px);
  background: var(--switch-off-bg); background-clip: content-box;
  border: 1px solid var(--switch-off-bg); border-radius: 999px;
  transition: all .2s ease;
}
.switch input::before {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: calc(var(--height) - 6px); height: calc(var(--height) - 6px);
  border-radius: 999px; background: var(--switch-off-fg); transition: all .2s ease;
}
.switch input:checked { background-color: var(--accented-bg); border-color: var(--accented-bg); }
.switch input:checked::before { inset-inline-start: calc(100% - var(--height) + 3px); background: var(--accent); }
.switch:hover input { border-color: var(--control-border); }
.switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.field.toggle { justify-content: center; min-height: 2.75rem; }
.field.check { flex-direction: row; align-items: center; gap: .5rem; min-height: 2.75rem; }
.field.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.field.check label { font-weight: 400; font-size: 1rem; color: var(--text); }
button, .button {
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; text-align: center;
  background: linear-gradient(90deg, var(--button-a), var(--button-b)); color: var(--on-accent);
  border: 0; border-radius: 999px; padding: .6rem 1.4rem; min-height: 2.75rem;
}
button:hover, .button:hover { filter: brightness(1.08); }

.count, .empty { color: var(--muted); }
.problem { background: var(--warn-bg); color: var(--warn-text); padding: .75rem 1.25rem; border-radius: var(--radius); }

/* results */
.results { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; }
.forum { display: flex; gap: .85rem; padding: 1.25rem; margin: 0; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.icon { position: relative; flex: none; width: 48px; height: 48px; border-radius: var(--radius-xs); background: var(--accented-bg); overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; color: var(--accent); }
.icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--panel); }
.body { min-width: 0; flex: 1; }
.forum h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.forum h2 a { text-decoration: none; color: var(--accent); }
.forum h2 a:hover { text-decoration: underline; }
.forum p { margin: .15rem 0; }
.forum .report { margin-top: .6rem; font-size: .8rem; }
.forum .report a { color: var(--muted); }
.handle { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem !important; }
.tag { font-size: .8rem; background: var(--bg); border-radius: 999px; padding: .1rem .6rem; }
.tag.warn { background: var(--warn-bg); color: var(--warn-text); font-weight: 600; }
a.tag.topic { color: var(--hashtag); text-decoration: none; font-weight: 600; }
a.tag.topic:hover { text-decoration: underline; }
.desc { overflow-wrap: anywhere; margin-top: .4rem !important; }
.stats { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid var(--divider); font-size: .9rem; }
.stats div { display: flex; gap: .35rem; }
.stats dt { color: var(--muted); }
.stats dt::after { content: ":"; }
.stats dd { margin: 0; font-weight: 600; color: var(--strong); }
.stats dd .muted { font-weight: 400; }
/* Pages of results. The buttons are Catodon's (MkButton, "primary" and
   "rounded", as under its timelines): the accent colour, bold, a full pill;
   one that leads nowhere is dimmed. */
.pager { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.page-now { margin: 0 .4rem; }
.page-now { color: var(--muted); font-size: .95rem; }
.page-button {
  display: block; min-width: 100px; padding: 7px 14px; font-size: 95%; font-weight: 700; text-align: center; text-decoration: none;
  color: var(--on-accent); background: var(--accent); border-radius: 999px; transition: background .1s ease;
}
a.page-button:hover, a.page-button:active { background: hsl(from var(--accent) h s calc(l + 5)); }
.page-button.off { opacity: .5; cursor: not-allowed; }

/* status */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.facts div { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1.25rem; }
.facts dt { color: var(--muted); font-size: .875rem; }
.facts dd { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; }
table { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 32rem; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
th, td { text-align: left; padding: .5rem 1.25rem; border-bottom: 1px solid var(--divider); font-weight: 400; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-weight: 700; }
tbody th { font-weight: 400; color: var(--text); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 30rem) {
  .forum { gap: .65rem; padding: 1rem; }
  .icon { width: 40px; height: 40px; }
  .stats { flex-direction: column; }
  .sheet { padding: .25rem 1.1rem 1rem; }
  .brand img { height: 60px; }
}

/* suggestion and removal forms */
form.request { display: grid; gap: 1rem; max-width: 38rem; margin-bottom: 1.25rem; }
form.request button { justify-self: start; }
[aria-invalid="true"], [aria-invalid="true"]:hover { border-color: var(--warn-text); border-width: 2px; }
fieldset { border: 1px solid var(--divider); border-radius: var(--radius-sm); margin: 0; padding: .5rem 1rem; }
legend { font-size: .875rem; font-weight: 600; padding: 0 .3rem; }
.hint { color: var(--muted); font-size: .875rem; margin: 0; }
.done { background: var(--accented-bg); padding: .75rem 1.25rem; border-radius: var(--radius); font-weight: 600; color: var(--strong); }
/* A field for programs that fill in everything; people never see it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }