/*
  the dashboard, same paper as melodistboko.com and lancer's dashboard: white paper with grain,
  times new roman, small spaced caps for labels, hand-drawn borders, crooked cards, taped pictures
  and the crayon scribble under links. dark mode dims the paper like a lamp instead of inverting
  it. seam's purple is the one accent (switches, the picked thing), the rest is ink on paper.
*/

:root {
  color-scheme: light;
  --font-serif: "Times New Roman", Times, Georgia, serif;
  --font-type: "Courier New", Courier, monospace;
  --c-paper: #fbfaf6;
  --c-ink: #1d1b18;
  --c-ink-soft: #57524a;
  --c-label: #6b665d;
  --c-hairline: #b9b4aa;
  --c-seam: #6b3fa0;
  --c-seam-soft: rgba(107, 63, 160, 0.12);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0 0.1 0.09 0 0 0 -0.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7c14-4 26 3 41-1s28-3 42 1 27-4 41-2 30 4 42 0 20-2 30 1' fill='none' stroke='%231d1b18' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 9c18-2 33 1 52-1s36-3 54 0 41 1 82-2' fill='none' stroke='%231d1b18' stroke-width='1.3' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  --hand-a: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --hand-b: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --hand-box-a: 18px 6px 22px 5px / 5px 22px 6px 18px;
  --hand-box-b: 6px 20px 5px 24px / 22px 5px 20px 6px;
  --gutter: 16px;
  --column: 36rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-paper: #e4dfd2;
    --c-ink-soft: #46413a;
    --c-label: #5e594f;
    --c-hairline: #9d978b;
  }

  html {
    background: #12110e;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--c-ink);
  background-color: var(--c-paper);
  background-image: var(--grain);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* the crayon scribble draws in under links on hover */
a:not(.button, .server-card) {
  background-image: var(--scribble);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 0.4em;
  padding-bottom: 0.15em;
  transition: background-size 0.35s ease-out, text-decoration-color 0.2s;
}

a:not(.button, .server-card):hover,
.tabs a[aria-current="page"] {
  background-size: 100% 0.4em;
  text-decoration-color: transparent;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 0.4rem 0.7rem;
  background: #fff;
  border: 1px solid #000;
  z-index: 10;
}

.skip-link:focus {
  top: 0.5rem;
}

/* small, centered, spaced caps for labels, like the tour posters */
.caps,
.top-nav,
.tabs,
.kicker,
.site-footer,
.button,
.setting-name {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}

.boil {
  filter: url(#boil-1);
  animation: boil 0.3s steps(1, end) infinite;
}

@keyframes boil {
  0% { filter: url(#boil-1); }
  33% { filter: url(#boil-2); }
  66% { filter: url(#boil-3); }
}

.poster {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 2rem;
}

.column {
  max-width: var(--column);
  margin: 0 auto;
  text-align: center;
}

.top-nav ul,
.tabs ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-nav form {
  display: inline;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.kicker {
  margin: 2rem 0 0;
  color: var(--c-label);
}

.page-title {
  margin: 0.25rem 0 0.75rem;
  font-weight: 400;
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intro {
  margin: 1.25rem auto;
}

/* hand-drawn buttons */
.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.buttons li {
  position: relative;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 1.25rem;
  color: inherit;
  background: transparent;
  font-family: var(--font-serif);
  text-decoration: none;
  border: 1.5px solid currentColor;
  border-radius: var(--hand-a);
  cursor: pointer;
  transition: transform 0.15s ease-out;
}

.button:hover {
  transform: rotate(-1.5deg) scale(1.03);
}

.button:active {
  transform: translateY(2px);
}

.button.quiet {
  border-radius: var(--hand-b);
  color: var(--c-ink-soft);
}

.button.big {
  min-height: 52px;
  padding: 0.6rem 1.8rem;
  font-size: 0.8rem;
}

/* the little hand-drawn arrow pointing at the log in button */
.pointer {
  position: absolute;
  right: calc(100% + 0.25rem);
  top: -1.4rem;
  width: 3.2rem;
  height: auto;
  pointer-events: none;
}

@media (max-width: 30rem) {
  .pointer {
    right: auto;
    left: -0.6rem;
    top: -2.3rem;
    width: 2.6rem;
  }

  .buttons:has(.pointer) {
    margin-top: 2.75rem;
  }
}

/* taped-on pictures */
.photo {
  position: relative;
  display: block;
  margin: 0;
  background: #fff;
  border: 7px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 18px -6px rgba(0, 0, 0, 0.3);
  rotate: -2deg;
  transition: rotate 0.35s ease, translate 0.35s ease;
}

.photo img {
  display: block;
  width: 100%;
}

.photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -15px;
  left: 50%;
  width: 4.4rem;
  height: 1.35rem;
  transform: translateX(-50%) rotate(-5deg);
  background: rgba(247, 242, 222, 0.78);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  clip-path: polygon(2% 10%, 98% 0, 100% 90%, 95% 100%, 5% 96%, 0 86%);
}

.hero-photo {
  width: 11rem;
  margin: 2rem auto 0.5rem;
}

/* the servers you can change, crooked hand-drawn cards like the projects page */
.server-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2.25rem 1.75rem;
  max-width: 52rem;
  margin: 2rem auto 2.5rem;
  padding: 0;
  list-style: none;
}

.server-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem 1rem 1.25rem;
  color: inherit;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid currentColor;
  border-radius: var(--hand-a);
  transition: transform 0.15s ease-out;
}

.server-cards li:nth-child(odd) .server-card {
  rotate: -1deg;
}

.server-cards li:nth-child(even) .server-card {
  rotate: 1.3deg;
  border-radius: var(--hand-b);
}

.server-card:hover {
  transform: rotate(-1.5deg) scale(1.03);
}

.server-card .photo {
  width: 5.5rem;
  margin: 0.5rem auto 0.6rem;
}

.server-card .photo img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* servers with no picture get their first letter, written big */
.initial {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 2.2rem;
  font-style: italic;
  background: #fff;
}

.server-name {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}

.server-note {
  color: var(--c-label);
  font-size: 0.85rem;
}

/* the setup pages, one per wizard page, along the top */
.tabs {
  margin: 1.25rem auto 0.5rem;
  max-width: 44rem;
}

/* the other pages, one strip that scrolls sideways instead of wrapping into a wall of links on a phone */
.tabs ul {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 1.2rem;
  overflow-x: auto;
  padding: 0.3rem 0.2rem 0.6rem;
  scrollbar-width: thin;
  mask-image: linear-gradient(to right, transparent 0, #000 0.8rem, #000 calc(100% - 1.5rem), transparent 100%);
}

.tabs li {
  flex: none;
  white-space: nowrap;
}

.back {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.back a::before {
  content: "\2190  ";
}

.page-text {
  margin: 1rem auto 1.5rem;
  color: var(--c-ink-soft);
}

/* each setting is a piece of paper with a wobbly pencil border */
.settings {
  display: grid;
  gap: 1.4rem;
  margin: 1.5rem 0;
  text-align: left;
}

.setting {
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
  border: 1.5px solid var(--c-ink);
  border-radius: var(--hand-box-a);
  /* solid paper, so the confetti stays behind the box instead of showing through */
  background-color: var(--c-paper);
  background-image: var(--grain);
}

.setting:nth-child(even) {
  border-radius: var(--hand-box-b);
  rotate: 0.4deg;
}

.setting:nth-child(odd) {
  rotate: -0.3deg;
}

.setting-name {
  display: block;
  margin: 0 0 0.55rem;
  padding: 0 0.4rem;
  color: var(--c-ink);
  background: var(--c-paper);
  background-image: var(--grain);
}

.setting-now {
  margin: 0.55rem 0 0;
  color: var(--c-label);
  font-size: 0.85rem;
}

.setting-lock {
  margin: 0.4rem 0 0;
  color: var(--c-label);
  font-size: 0.85rem;
  font-style: italic;
}

select {
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  color: var(--c-ink);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  border: 1.5px solid var(--c-ink);
  border-radius: var(--hand-box-b);
}

/* checklists for picking several roles or channels */
.picks {
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.2rem 0.4rem;
  list-style: none;
  border: 1px dashed var(--c-hairline);
  border-radius: 6px;
  background: #fff;
}

.picks li {
  margin: 0;
}

.picks label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--c-ink);
  flex: none;
}

/* a role's own color, as a little ink blot */
.dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%;
  background: var(--role, var(--c-hairline));
  flex: none;
}

.switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.switch label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  cursor: pointer;
}

.save-bar {
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin: 2rem 0 0.5rem;
  pointer-events: none;
}

.save-bar .button {
  pointer-events: auto;
  background: var(--c-paper);
  background-image: var(--grain);
}

/* seam's notes after saving, on a taped scrap of paper */
.note {
  position: relative;
  margin: 1.75rem auto 0.5rem;
  padding: 1.1rem 1.2rem 0.9rem;
  max-width: 30rem;
  text-align: left;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
  rotate: -0.8deg;
}

.note::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 1.5rem;
  width: 3.8rem;
  height: 1.2rem;
  transform: rotate(-6deg);
  background: rgba(247, 242, 222, 0.85);
  clip-path: polygon(2% 10%, 98% 0, 100% 90%, 95% 100%, 5% 96%, 0 86%);
}

.note p {
  margin: 0.2rem 0;
}

.note .fine {
  color: var(--c-label);
  font-size: 0.85rem;
}

.note.is-saved {
  rotate: 0.6deg;
}

/* the permission check page */
.checks {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.checks li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--c-hairline);
}

.checks .ok {
  color: var(--c-ink-soft);
}

.checks .missing {
  font-style: italic;
}

.me {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.me img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
}

.credit {
  margin: 2.5rem auto 0;
  font-size: 0.82rem;
  color: var(--c-ink-soft);
}

.site-footer {
  margin-top: 3.5rem;
  color: var(--c-ink-soft);
  text-align: center;
}

.site-footer p {
  margin: 0.2rem 0;
}

/* doodles, placed like on melodistboko.com: in rows above and below the content on
   small screens, scattered round the edges from 52rem up */
.doodle-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0;
}

.doodle {
  display: block;
  width: 6.5rem;
}

.doodle.small {
  width: 5rem;
}

.doodle img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* one doodle wanders off very slowly */
.drift {
  animation: drift 38s ease-in-out infinite alternate;
}

@keyframes drift {
  from {
    translate: 0 0;
    rotate: 0deg;
  }
  to {
    translate: 1.5rem 0.9rem;
    rotate: 4deg;
  }
}

@media (min-width: 52rem) {
  .poster {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .poster main {
    flex: 1;
  }

  .doodle-row {
    display: contents;
  }

  .doodle {
    position: absolute;
    width: 7rem;
  }

  .doodle.small {
    width: 5rem;
  }

  .at-tl { top: 3rem; left: 4%; }
  .at-tr { top: 10rem; right: 5%; }
  .at-ml { top: 40%; left: 6%; rotate: -3deg; }
  .at-mr { top: 46%; right: 5%; }
  .at-bl { bottom: 6rem; left: 8%; }
  .at-br { bottom: 4.5rem; right: 7%; rotate: 4deg; }
  .at-top { top: 0.5rem; right: 17%; }
}

@media (min-width: 70rem) {
  .doodle {
    width: 10.5rem;
  }

  .doodle.small {
    width: 7.5rem;
  }
}

/* the footer's links back to the site, like every page there */
.site-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.4rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

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

  .boil {
    animation: none;
    filter: none;
  }

  .button,
  .server-card,
  .photo,
  a {
    transition: none;
  }
}

/* ---- the bigger pages: sections, typed settings, lists and the overview ---- */
.section {
  margin: 2.25rem 0 0;
}

.section-title {
  display: inline-block;
  margin: 0 auto 0.25rem;
  padding-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--scribble) bottom / 100% 0.45rem no-repeat;
}

.setting-help {
  margin: -0.2rem 0 0.7rem;
  color: var(--c-ink-soft);
  font-size: 0.9rem;
}

input[type="text"],
input[type="number"],
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  color: var(--c-ink);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  border: 1.5px solid var(--c-ink);
  border-radius: var(--hand-box-a);
}

textarea {
  resize: vertical;
  line-height: 1.45;
}

input.short {
  max-width: 9rem;
}

.hidden-words:not(:focus) {
  color: transparent;
  text-shadow: 0 0 8px var(--c-ink);
}

.mini-label {
  display: block;
  margin: 0.7rem 0 0.25rem;
  color: var(--c-label);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mini-label input {
  margin-top: 0.3rem;
  letter-spacing: normal;
  text-transform: none;
}

.switch.stack {
  flex-direction: column;
  gap: 0;
}

.picks.flat {
  max-height: none;
  margin-top: 0.6rem;
}

/* lists with a few things per row: strikes, level roles, boosts */
.rows {
  display: grid;
  gap: 0.6rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.8rem;
  padding: 0.55rem 0.7rem 0.7rem;
  background: #fff;
  border: 1px dashed var(--c-hairline);
  border-radius: 6px;
}

.row.is-new {
  background: transparent;
}

.row-number {
  align-self: center;
  min-width: 1.6rem;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--c-ink-soft);
}

.row.is-new .row-number {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.row-cell {
  flex: 1 1 9rem;
  min-width: 0;
}

.row-cell .mini-label {
  margin-top: 0;
}

.row-remove,
.rule-on {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  cursor: pointer;
}

.row-remove {
  flex: none;
  color: var(--c-label);
  font-size: 0.85rem;
}

.rule-on {
  font-size: 1.05rem;
}

/* the starboard emoji picker */
.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.3rem;
  background: #fff;
  border: 1px dashed var(--c-hairline);
  border-radius: 6px;
}

.emoji-pick {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: var(--hand-box-b);
}

.emoji-pick input {
  position: absolute;
  opacity: 0;
}

.emoji-pick:has(input:checked) {
  outline: 2px solid var(--c-ink);
  background: var(--c-seam-soft);
}

.emoji-pick:has(input:focus-visible) {
  outline: 2px dashed var(--c-seam);
}

.emoji-big {
  font-size: 1.5rem;
  line-height: 1;
}

img.emoji {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  object-fit: contain;
}

/* the log groups, one block each */
.log-group + .log-group {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--c-hairline);
}

.group-name {
  margin: 0;
  font-size: 1.1rem;
  font-style: italic;
}

/* the overview: one crooked card per module, two across on a phone */
.modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  max-width: 62rem;
  margin: 1.5rem auto 0;
  padding: 0 var(--gutter);
  list-style: none;
}

@media (min-width: 48rem) {
  .modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

@media (min-width: 64rem) {
  .modules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.module {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 0.8rem;
  text-align: left;
  border: 1.5px solid var(--c-ink);
  border-radius: var(--hand-box-a);
  background-color: var(--c-paper);
  background-image: var(--grain);
}

.module:nth-child(odd) {
  rotate: -0.5deg;
}

.module:nth-child(even) {
  rotate: 0.4deg;
  border-radius: var(--hand-box-b);
}

.module-title {
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--c-ink);
}

.module-text {
  flex: 1;
  margin: 0.35rem 0 0.8rem;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
  line-height: 1.4;
}

.module-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 44px;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--c-hairline);
}

.module-foot form {
  margin: 0;
}

.module-status {
  padding: 0.05rem 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--c-ink);
  border-radius: var(--hand-a);
}

.module-open {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.module-open::after {
  content: " \2192";
}

/* the on/off switch on a module card, a hand-drawn pill */
.flip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  color: var(--c-ink);
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.flip:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.flip-track {
  position: relative;
  width: 2.6rem;
  height: 1.4rem;
  border: 1.5px solid var(--c-ink);
  border-radius: 999px 900px 999px 950px / 950px 999px 900px 999px;
  background: #fff;
  transition: background-color 0.15s ease;
}

.flip-knob {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%;
  background: var(--c-ink);
  transition: translate 0.15s ease;
}

.flip[aria-pressed="true"] .flip-track {
  background: var(--c-seam);
}

.flip[aria-pressed="true"] .flip-knob {
  translate: 1.15rem 0;
  background: #fff;
}

.module.is-on {
  box-shadow: inset 0 0 0 1px var(--c-seam);
}

@media (prefers-reduced-motion: reduce) {
  .flip-track,
  .flip-knob {
    transition: none;
  }
}

/* a strike that isn't a timeout or a temporary ban has no length, so its length boxes hide */
.row:not(:has(option[value="timeout"]:checked, option[value="tempban"]:checked)) .timed {
  display: none;
}

/* ---- the gear in the top right corner, a <details> so it opens without javascript ---- */
header {
  position: relative;
  padding: 0 3.25rem;
}

.gear {
  position: absolute;
  top: -0.6rem;
  right: 0;
  z-index: 20;
  text-align: left;
}

.gear summary {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  list-style: none;
  cursor: pointer;
}

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

.gear summary img {
  width: 38px;
  height: auto;
  transition: rotate 0.4s ease;
}

.gear[open] summary img,
.gear summary:hover img {
  rotate: 60deg;
}

.gear-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  width: 15rem;
  padding: 0.9rem 1rem 0.8rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 10px 22px -10px rgba(0, 0, 0, 0.35);
  rotate: 0.8deg;
}

/* the tape holding the scrap of paper up */
.gear-menu::before {
  content: "";
  position: absolute;
  top: -11px;
  right: 1.4rem;
  width: 3.4rem;
  height: 1.1rem;
  transform: rotate(5deg);
  background: rgba(247, 242, 222, 0.9);
  clip-path: polygon(2% 10%, 98% 0, 100% 90%, 95% 100%, 5% 96%, 0 86%);
}

.gear-label {
  margin: 0.4rem 0 0.2rem;
  color: var(--c-label);
  font-size: 0.85rem;
  font-style: italic;
}

/* everything in the gear menu is lowercase, the names and the language choices too */
.gear-menu,
.gear-menu * {
  text-transform: lowercase;
}

.gear-picks {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.gear-picks a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.75rem;
  color: var(--c-ink);
  text-decoration: none;
  border: 1px dashed var(--c-hairline);
  border-radius: var(--hand-a);
}

.gear-picks a[aria-current="true"] {
  border: 1.5px solid var(--c-ink);
  background: var(--c-seam-soft);
}

.gear-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.7rem 0 0.2rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--c-hairline);
}

.gear-me img {
  border-radius: 50%;
}

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

.gear-links li {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.gear-links form {
  margin: 0;
}

/* ---- the box outlines shake like the doodles ----
   the line is drawn on its own layer under the box's words, so only the outline wobbles and the text stays still */
.setting,
.module,
.server-card,
.button,
.row {
  position: relative;
  border-color: transparent;
}

.setting::before,
.module::before,
.server-card::before,
.button::before,
.row::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid var(--c-ink);
  border-radius: inherit;
  pointer-events: none;
  filter: url(#boil-1);
  animation: boil 0.3s steps(1, end) infinite;
}

.server-card::before,
.button::before {
  border-color: currentColor;
}

.row::before {
  inset: -1px;
  border: 1px dashed var(--c-hairline);
}

/* the setting's name sits on top of its wobbly line, like it did on the plain border */
.setting-name {
  position: relative;
  z-index: 1;
}

/* a fieldset's inside starts under its name, so the line moves up to the middle of the name (half its line
   height plus its bottom margin) to cross it the way the real border did */
.setting::before {
  top: calc(-0.55rem - 0.576rem - 1.5px);
}

/* animations off, from the gear menu or the phone's own setting: everything holds still */
[data-motion="off"] .boil,
[data-motion="off"] .drift,
[data-motion="off"] .setting::before,
[data-motion="off"] .module::before,
[data-motion="off"] .server-card::before,
[data-motion="off"] .button::before,
[data-motion="off"] .row::before {
  animation: none;
}

[data-motion="off"] .gear summary img,
[data-motion="off"] .flip-track,
[data-motion="off"] .flip-knob {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .setting::before,
  .module::before,
  .server-card::before,
  .button::before,
  .row::before {
    animation: none;
  }

  .gear summary img {
    transition: none;
  }
}

/* ---- lists where every entry is its own form: tags, auto answers, scheduled and sticky messages, alerts ---- */
.entry {
  margin: 0;
}

.entry-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.8rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.entry-title {
  flex: 1 1 100%;
  margin: 0;
  font-size: 1.1rem;
  font-style: italic;
  overflow-wrap: anywhere;
}

.row.is-new .entry-title {
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.entry-info {
  margin-left: 0.4rem;
  color: var(--c-label);
  font-size: 0.85rem;
  font-style: normal;
}

.entry-foot {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.9rem;
}

.entry-foot .button {
  margin: 0;
}

.row-cell.wide {
  flex-basis: 100%;
}

.row-hint {
  display: block;
  margin-top: 0.2rem;
  color: var(--c-label);
  font-size: 0.8rem;
}

input[type="search"],
input[type="datetime-local"] {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  color: var(--c-ink);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  border: 1.5px solid var(--c-ink);
  border-radius: var(--hand-box-a);
}

/* the search box over a long list: a plain GET form */
.search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.8rem;
  margin: 0.4rem 0 0.8rem;
}

.search .mini-label {
  margin-top: 0;
}

/* page numbers under a long list */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
  margin: 0.9rem 0 0.2rem;
  font-size: 1.05rem;
}

.pager a[aria-current="page"] {
  font-weight: bold;
  text-decoration: none;
}

/* a list is a box like a setting, but a div with a heading instead of a fieldset with a legend, so its wobbly line
   sits on the box's own edge */
.setting-items > .setting-name {
  font-size: 0.72rem;
  font-weight: normal;
}

.setting-items::before {
  top: -1.5px;
}

.setting-items > .rows + .row.is-new,
.setting-items > .pager + .row.is-new {
  margin-top: 0.6rem;
}

/* ---- seam's own bits ---- */

/* the one line seam says on the login and error pages, in his italic voice */
.seam-line {
  margin: 0.5rem auto 0;
  max-width: 28rem;
  font-style: italic;
  color: var(--c-seam);
}

/* the overview: one block per topic group, its title on the scribble like a section */
.group + .group {
  margin-top: 2.5rem;
}

/* a channel's category after its name in a checklist, quieter */
.pick-extra {
  margin-left: auto;
  padding-left: 0.6rem;
  color: var(--c-label);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the earning buttons and the reset confirm sit in a note, in a row */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin: 0.7rem 0 0.3rem;
}

.inline-form .button {
  margin: 0;
}

/* the quiet reset link at the bottom of a module page */
.reset-form {
  margin: 2.5rem 0 0;
  text-align: center;
}

.reset-form .quiet {
  color: var(--c-label);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}