/* ==========================================================================
   PhansiSorter - pixel horror theme
   --------------------------------------------------------------------------
   The look follows the design vocabulary of the Phantom Siita official
   homepage (pixel font, 1px hard borders, offset hard shadows, paper panels
   over a red or black page, inverse-video hovers, ◇/♡ ornaments). The artwork
   is not copied: every ornament in assets/pixel is generated by
   tools/gen-pixel-assets.mjs, and the font is the freely licensed PixelMplus12.

   Layout key
     .shell        page column, centred
     .panel        paper block with title bar (pattern tile background)
     .window       dark "OS dialog" box (black bg, grey border, hard shadow)
     .btn          retro button; .btn--primary is the red one
    ========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: "PixelMplus12";
  src: url("../assets/fonts/PixelMplus12-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PixelMplus12";
  src: url("../assets/fonts/PixelMplus12-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- design tokens */

:root {
  /* Colours taken from the official site's palette, one to one:
     #600e0e page, #050406 ink/black panels, #cc1515 hover red, #edcfcf paper,
     #fc8e8e salmon accents, #a5a5a5 / #595959 greys, #cfdfe6 / #729be3 blues,
     #ae007f magenta, #4e9882 green, #19171b deep panel. */
  --red-deep: #600e0e;
  --red: #cc1515;
  --red-shadow: #4c0000;
  --ink: #050406;
  --paper: #edcfcf;
  --paper-dark: #ebcdcd;
  --paper-deep: #19171b;
  --salmon: #fc8e8e;
  --pink-light: #ffe8e8;
  --grey: #a5a5a5;
  --grey-dark: #595959;
  --blue: #cfdfe6;
  --blue-link: #729be3;
  --magenta: #ae007f;
  --green: #4e9882;

  --font-pixel: "PixelMplus12", "Yu Gothic", "Hiragino Kaku Gothic Pro", Meiryo,
    "MS PGothic", sans-serif;

  --border: 1px solid var(--grey-dark);
  --shadow: 2px 2px 0 var(--grey-dark);
  --shadow-lg: 4px 4px 0 var(--red-shadow);

  --page-bg: var(--red-deep);
  /* Header and page swap colours between the two modes, like the official site:
     red mode is a dark header on the maroon page, black mode is the maroon
     header on the near black page. */
  --header-bg: var(--ink);
  --panel-bg: var(--paper);
  --panel-ink: var(--ink);
  /* Secondary text on paper: dark enough to stay readable at 13-14px with the
     pixel font (the reference site's brown was too faint on the pink panel). */
  --panel-soft: #523636;
  /* Secondary text on the page background (red page, dark intro). */
  --muted-ink: #f2d4d4;
  --title-bg: #8b1616;
  --dock-bg: #3d0909;
}

/* --------------------------------------------------------------- base reset */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  background: var(--page-bg);
}

body {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  word-wrap: break-word;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

ul {
  list-style: none;
}

a {
  color: inherit;
}

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

/* The two page modes of the official site: red (default) and black. */
body.mode-black {
  --page-bg: #050406;
  --header-bg: var(--red-deep);
  --panel-bg: #19171b;
  --panel-ink: #e8e8e8;
  --panel-soft: #c6c6c6;
  --muted-ink: #c6c6c6;
  --title-bg: #101013;
  --dock-bg: #0d0d10;
  background: var(--page-bg);
  color: #e8e8e8;
}

/* Pixel cursor, black mode only, exactly like the source site. */
body.mode-black,
body.mode-black a,
body.mode-black button,
body.mode-black label,
body.mode-black input,
body.mode-black summary {
  cursor: url("../assets/pixel/cursor.png") 1 1, auto;
}

:focus-visible {
  outline: 2px solid var(--blue-link);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ page furniture */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#view {
  flex: 1;
  /* Raised above .flutter-zone (z-index 0) so the drifting butterflies stay
     behind the page content. */
  position: relative;
  z-index: 1;
}

.shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 120px;
  flex: 1;
}

.site-header {
  background: var(--header-bg);
  border-bottom: var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.site-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
  min-width: 0;
}

/* Official wordmark, see assets/logo/README.txt. */
.brand__logo {
  height: 24px;
  width: auto;
  flex: none;
}

.brand__tool {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pink-light);
  white-space: nowrap;
}

.site-header__spacer {
  flex: 1;
}

.header-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f0d8d8;
  font-size: 13px;
}

.mode-dots {
  display: flex;
  gap: 6px;
}

.mode-dot {
  width: 20px;
  height: 20px;
  /* Ring weight and colour follow the official mode buttons. */
  border: 2px solid var(--grey-dark);
  background: var(--ink);
  padding: 0;
}

.mode-dot--red {
  background: var(--red-deep);
}

/* A dot always keeps the colour of the mode it stands for: the official site
   has no active state at all, and repainting the black swatch red (the earlier
   behaviour) was misleading. The current mode is marked with a white ring
   instead, and inactive dots take the official pale blue on hover. */
.mode-dot[aria-pressed="true"] {
  border-color: #fff;
}

.mode-dot:not([aria-pressed="true"]):hover {
  border-color: var(--blue);
}

/* Red drip hanging from the right edge of the header. The official site shows
   it in black mode only (`body.black-mode .drop.black-mode-only`). */
.drop {
  display: none;
}

body.mode-black .drop {
  display: block;
  position: absolute;
  /* Nudged in from the right edge (the official site pins it to the edge) so the
     drip reads as its own element rather than a screen border. */
  right: 96px;
  width: 90px;
  pointer-events: none;
}

.drop img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------- panels */

.panel {
  background-color: var(--panel-bg);
  /* The official paper texture: a pale butterfly pattern, repeated at the same
     100px tile the official site uses. Kept light so body text stays readable. */
  background-image: url("../assets/logo/phantomsiita-pattern.png");
  background-size: 100px;
  background-repeat: repeat;
  border: var(--border);
  box-shadow: var(--shadow);
  color: var(--panel-ink);
  margin-bottom: 20px;
  overflow: hidden;
}

body.mode-black .panel {
  background-image: none;
}

.panel__title {
  background: var(--title-bg);
  color: #fff;
  padding: 8px 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: var(--border);
}

.panel__body {
  padding: 18px 18px 20px;
}

.panel__note {
  padding: 10px 18px 0;
  font-size: 13px;
  color: var(--panel-soft);
}

/* ------------------------------------------------------------------ window */

/* The "old OS dialog" box: black body, grey border, offset shadow. */
.window {
  background: var(--ink);
  color: var(--grey);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  font-size: 14px;
}

.window__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--grey-dark);
  padding-bottom: 6px;
  margin-bottom: 10px;
  color: var(--paper);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.window__text {
  color: var(--grey);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue);
  color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 9px 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s linear, color 0.12s linear;
}

.btn:hover {
  background: var(--ink);
  color: #fff;
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.btn--primary {
  background: var(--red-deep);
  color: #fff;
  border-color: #e9b9b9;
}

.btn--primary:hover {
  background: var(--red);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: var(--grey);
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--grey-dark);
  color: #fff;
}

.btn--block {
  width: 100%;
}

.btn--big {
  padding: 14px 22px;
  font-size: 17px;
  letter-spacing: 0.18em;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--x {
  background: #fff;
  color: var(--ink);
}

.btn--x:hover {
  background: var(--grey);
  color: var(--ink);
}

/* ------------------------------------------------------------------- titles */

.page-title {
  text-align: center;
  color: #fff;
  margin: 6px 0 18px;
  line-height: 1.3;
}

.page-title__kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--salmon);
  margin-bottom: 6px;
}

.page-title__main {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--red-shadow);
}

/* Wordmark instead of the plain title on the menu. */
.page-title__logo {
  display: block;
  width: min(360px, 82%);
  height: auto;
  margin: 2px auto 0;
}

.page-title__sub {
  display: block;
  font-size: 13px;
  color: var(--pink-light);
  margin-top: 8px;
  letter-spacing: 0.12em;
}

.ornament {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ornament .glyph {
  width: 9px;
  height: 9px;
  opacity: 0.95;
}

.glyph {
  width: 12px;
  height: 12px;
  flex: none;
}

.glyph--lg {
  width: 20px;
  height: 20px;
}

/* Brand marks from assets/logo, tinted through a mask so they inherit colour. */
.mark {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Both wing designs share one box, so a random pick never shifts the layout.
   Size is per place: the ornament rows and icons stay small, the drifting
   background butterflies get their own larger box below. */
.mark--butterfly-01,
.mark--butterfly-02 {
  width: 26px;
  height: 16px;
}

.mark--butterfly-01 {
  -webkit-mask-image: url("../assets/logo/phantomsiita-butterfly-01.svg");
  mask-image: url("../assets/logo/phantomsiita-butterfly-01.svg");
}

.mark--butterfly-02 {
  -webkit-mask-image: url("../assets/logo/phantomsiita-butterfly-02.svg");
  mask-image: url("../assets/logo/phantomsiita-butterfly-02.svg");
}

/* Leading icon of a menu row. */
.mark--lead {
  color: var(--magenta);
}

body.mode-black .mark--lead {
  color: var(--salmon);
}

/* Butterfly divider under a page title. */
.page-title__butterflies,
.intro__butterflies {
  display: block;
  margin-top: 12px;
  color: var(--salmon);
}

.page-title__butterflies .ornament,
.intro__butterflies .ornament {
  justify-content: center;
}

body.mode-black .page-title__butterflies {
  color: var(--grey);
}

/* Butterfly on an A/B card. */
.song-card__butterfly {
  color: var(--salmon);
  align-self: center;
}

body.mode-black .song-card__butterfly {
  color: var(--grey);
}

/* Butterflies drifting along the page edges. Hidden on narrow screens, where
   the content uses the full width. They sit at z-index 0 while #view is raised
   to 1, so a big butterfly shows in the margins and passes behind the opaque
   panels instead of drawing over text. */
.flutter-zone {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.flutter-zone__mark {
  position: absolute;
  /* Much bigger than the inline ornaments: these drift in the page margins and
     are meant to be noticed. They sit behind the content (see .flutter-zone),
     so a wide one simply passes behind the opaque panels. */
  width: 170px;
  height: 103px;
  color: var(--salmon);
  opacity: 0.32;
  animation: flutter 3.2s ease-in-out infinite alternate;
}

body.mode-black .flutter-zone__mark {
  color: var(--grey);
  opacity: 0.22;
}

@media (max-width: 1199px) {
  .flutter-zone {
    display: none;
  }
}

/* ------------------------------------------------------------- list / rows */

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px dashed var(--grey-dark);
}

.row:last-child {
  border-bottom: 0;
}

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

.row__title {
  font-weight: 700;
  font-size: 15px;
}

.row__meta {
  font-size: 14px;
  color: var(--panel-soft);
}

.row__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Menu rows behave like buttons. */
.row--action {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--grey-dark);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.row--action:hover {
  background: rgba(204, 21, 21, 0.12);
}

.row--action:last-of-type {
  border-bottom: 0;
}

/* ------------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  border: 1px solid currentColor;
  background: var(--pink-light);
  color: var(--red-deep);
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  letter-spacing: 0.08em;
}

.badge--muted {
  background: transparent;
  color: var(--panel-soft);
  border-color: var(--panel-soft);
}

.badge--magenta {
  background: var(--magenta);
  color: #fff;
  border-color: #fff;
}

/* ----------------------------------------------------------------- progress */

.progress {
  border: var(--border);
  background: var(--ink);
  padding: 3px;
}

.progress__fill {
  height: 14px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--red) 0 6px,
    var(--red-deep) 6px 12px
  );
  transition: width 0.25s linear;
}

.progress__label {
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
  color: var(--panel-soft);
  letter-spacing: 0.12em;
}

/* ------------------------------------------------------------------ switches */

.switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.switch__track {
  width: 44px;
  height: 22px;
  border: var(--border);
  background: #8a8a8a;
  padding: 2px;
  display: block;
}

.switch__knob {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--ink);
  transition: transform 0.15s steps(3, end);
}

.switch__input:checked + .switch__track {
  background: var(--green);
}

.switch__input:checked + .switch__track .switch__knob {
  transform: translateX(20px);
}

.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--blue-link);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ checkbox */

.song-check {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--grey-dark);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.song-check:hover {
  background: rgba(252, 142, 142, 0.18);
}

.song-check[aria-pressed="true"] {
  background: var(--pink-light);
  color: var(--ink);
  border-style: solid;
}

body.mode-black .song-check[aria-pressed="true"] {
  background: #2b2626;
  color: #fff;
}

.song-check__mark {
  width: 14px;
  height: 14px;
  border: var(--border);
  background: var(--ink);
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.song-check[aria-pressed="true"] .song-check__mark {
  background: var(--red);
}

.song-check__text {
  min-width: 0;
  flex: 1;
}

.song-check__ja {
  display: block;
  font-weight: 700;
  line-height: 1.5;
}

.song-check__en {
  display: block;
  font-size: 13px;
  color: var(--panel-soft);
  line-height: 1.6;
}

body.mode-black .song-check__en {
  color: var(--grey);
}

/* --------------------------------------------------------------------- vote */

.vote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.song-card {
  background: var(--panel-bg);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.song-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
}

.song-card__side {
  font-weight: 700;
  color: var(--red);
  flex: none;
}

body.mode-black .song-card__side {
  color: var(--salmon);
}

.song-card__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

.song-card__sub {
  font-size: 13px;
  color: var(--panel-soft);
}

body.mode-black .song-card__sub {
  color: var(--grey);
}

/* Spotify preview player. The compact size (Spotify's documented 80px layout) is
   used on purpose: at 152px the embed paints roughly 112px of content for
   anonymous visitors and leaves the rest of the box empty and black, which shows
   as a dead band under the player at every width. */
.player {
  position: relative;
  width: 100%;
  /* 80px of player + the 1px pixel border on each side. */
  height: 82px;
  background: var(--ink);
  border: var(--border);
  overflow: hidden;
}

.player iframe,
.player__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Shown when a song has no preview id. */
.player--empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 12px;
  text-align: center;
}

.player__hint {
  font-size: 12px;
  color: var(--grey);
  letter-spacing: 0.14em;
}

.player__link {
  font-size: 12px;
  color: var(--blue-link);
}

/* Link row under a player. */
.song-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.song-card__links a {
  color: var(--blue-link);
}

.song-card__sep {
  color: var(--panel-soft);
}

/* A/B letter in the answer buttons. The cards above say which song is which. */
.dock__letter {
  font-size: 20px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

/* ------------------------------------------------------------------- result */

.rank-list {
  border-top: 1px dashed var(--grey-dark);
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px dashed var(--grey-dark);
}

.rank-row__no {
  width: 34px;
  flex: none;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--panel-soft);
}

.rank-row--1 .rank-row__no,
.rank-row__no--1 {
  color: var(--red);
}

.rank-row--2 .rank-row__no,
.rank-row__no--2 {
  color: #5a5a5a;
}

.rank-row--3 .rank-row__no,
.rank-row__no--3 {
  color: #a1521f;
}

.rank-row__title {
  font-weight: 700;
}

.rank-row__meta {
  font-size: 13px;
  color: var(--panel-soft);
}

body.mode-black .rank-row__meta,
body.mode-black .rank-row__no {
  color: var(--grey);
}

.rank-row__link {
  font-size: 12px;
  color: var(--blue-link);
}

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--dock-bg);
  border-top: var(--border);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dock__inner {
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Two equal answer buttons on the vote screen. */
.dock__inner--vote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dock__info {
  flex: 1;
  min-width: 0;
  color: var(--pink-light);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button that shares the dock row with the info text. */
.dock__action {
  flex: 1;
  min-width: 0;
}

.dock__count {
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Save-recap menu that unfolds above the dock. */
.dock-menu {
  width: 100%;
  max-width: 1080px;
  border: var(--border);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.dock-menu .row--action {
  border-bottom: 1px dashed var(--grey-dark);
}

/* --------------------------------------------------------------------- intro */

.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--grey);
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
}

.intro__inner {
  width: 100%;
  max-width: 560px;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.intro__logo-mark {
  width: min(320px, 70vw);
  height: auto;
  animation: flicker 4s steps(1, end) infinite;
}

.intro__tool {
  font-size: 12px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--salmon);
}

.intro__butterfly {
  width: 104px;
  height: 96px;
  color: var(--pink-light);
  animation: flutter 2.4s ease-in-out infinite alternate;
}

.intro__question {
  font-size: 15px;
  color: var(--paper);
}

.intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------------------------------------------------------------- utilities */

.stack-sm > * + * {
  margin-top: 8px;
}

.stack > * + * {
  margin-top: 16px;
}

.center {
  text-align: center;
}

.muted {
  color: var(--muted-ink);
  font-size: 14px;
}

/* The intro sits on its own black backdrop in both page modes. */
.intro .muted {
  color: var(--grey);
}

body.mode-black .muted {
  color: var(--grey);
}

.mt-lg {
  margin-top: 26px;
}

.lace-edge {
  background-image: url("../assets/pixel/lace.svg");
  background-size: 16px 8px;
  background-repeat: repeat-x;
  height: 8px;
  border: 0;
}

/* ------------------------------------------------------------------ notices */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.7;
}

.notice__mark {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-weight: 700;
  line-height: 1;
  margin-top: 3px;
}

.notice--warn {
  color: #ffd9a1;
  border-color: #a8721f;
}

.notice--info {
  color: var(--grey);
}

.glyph--dim {
  opacity: 0.5;
}

/* ------------------------------------------------------------------ motion */

@keyframes flutter {
  0% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
  100% {
    transform: translateY(0) rotate(-3deg);
  }
}

@keyframes flicker {
  0%,
  92%,
  100% {
    opacity: 1;
  }
  93% {
    opacity: 0.45;
  }
  94% {
    opacity: 1;
  }
  96% {
    opacity: 0.6;
  }
  97% {
    opacity: 1;
  }
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.blink {
  animation: blink 1s steps(1, end) infinite;
}

/* -------------------------------------------------------------- responsive */

/* Single breakpoint, like the source site: 960px and below is the phone tier. */
@media (max-width: 960px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  .shell {
    padding: 16px 14px 120px;
  }

  .page-title__main {
    font-size: 22px;
    letter-spacing: 0.12em;
  }

  /* The tool label would squeeze the header on a phone. */
  .brand__tool {
    display: none;
  }

  /* No side margin on a phone, so the drip goes back to the screen edge. */
  body.mode-black .drop {
    right: 0;
  }

  .vote-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dock__inner--vote {
    gap: 10px;
  }

  .panel__body {
    padding: 14px 14px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}