/* trevware.com/power-up/ in retro mode, the default. The same page as modern
   (oriko.css and power-up.css draw that one) in the home page's game clothes:
   the one pixel face, paper and ink, windows with a double line, the stepped
   cursor on whatever is pointed at, and a cartridge floating over the hero.
   Every retro rule is scoped to :root:not([data-mode='modern']), so modern mode
   is exactly the page it was before retro existed. The copy is the same in
   both modes. */

@font-face {
  font-family: 'Departure Mono';
  src: url('/fonts/DepartureMono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Both modes. The switch's bones, which modern.css redraws round, and the
   toast the Konami code raises, which modern.css turns into a dark tile. */
.mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-transform: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mode-track { position: relative; width: 30px; height: 16px; border: 2px solid var(--ink); }
.mode-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  transition: transform 120ms steps(3, end);
}
.mode[aria-checked='true'] .mode-knob { transform: translateX(16px); }
.mode:focus-visible { outline: none; }
.mode:focus-visible .mode-track { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-mode='modern'] .nav .mode { color: var(--dim); }
:root[data-mode='modern'] .nav .mode:hover { color: var(--ink); }
/* On a phone the header holds the name, Subscribe and the switch; the switch's
   word goes (it still names the switch for a screen reader) and the gaps close
   up, so the three fit on one line at 320px. */
@media (max-width: 600px) {
  .nav .links { gap: 14px; }
  .mode-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.toast {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  translate: -50% 0;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 6px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  animation: unfold 160ms steps(4, end) both;
}
.toast.leaving { animation: fold 120ms steps(3, end) both; }
@keyframes unfold {
  from { clip-path: inset(50% -8px 50% -8px); }
  to { clip-path: inset(-8px -8px -8px -8px); }
}
@keyframes fold { to { clip-path: inset(50% -8px 50% -8px); } }

/* The palette: the home page's, with the hairline drawn in ink. */
:root:not([data-mode='modern']) {
  --paper: #f6f2e9;
  --ink: #16130f;
  --dim: #6b645a;
  --accent: #c9391f;
  --on-accent: #f6f2e9;
  --line: var(--ink);
  --mono: 'Departure Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* One cartridge pixel (cartridge.css). */
  --u: 4px;
  /* The cursor: a stepped triangle, seven rows tall. */
  --cursor: polygon(
    0 0, 25% 0, 25% 14.2857%, 50% 14.2857%, 50% 28.5714%, 75% 28.5714%,
    75% 42.8571%, 100% 42.8571%, 100% 57.1429%, 75% 57.1429%,
    75% 71.4286%, 50% 71.4286%, 50% 85.7143%, 25% 85.7143%, 25% 100%, 0 100%
  );
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode='modern']) {
    --paper: #121110;
    --ink: #f1ece2;
    --dim: #a29b8f;
    --accent: #e2492f;
    --on-accent: #121110;
  }
}
/* The secret window colour, behind the Konami code, as on the home page. */
:root[data-theme='ff']:not([data-mode='modern']) {
  --paper: #0f1f6e;
  --ink: #ffffff;
  --dim: #aab6e8;
  --accent: #f2c14e;
  --on-accent: #0f1f6e;
}
:root[data-theme='ff']:not([data-mode='modern']) body { background: linear-gradient(180deg, #1b2d8f, #070f3f) fixed; }
@media (min-width: 600px) { :root:not([data-mode='modern']) { --u: 5px; } }
@media (min-width: 1100px) { :root:not([data-mode='modern']) { --u: 6px; } }

/* The face. Departure Mono is crisp at multiples of 11px, so every size here
   is 16.5, 22, 33, 44 or 55. It has one weight; a bold would smear it. */
:root:not([data-mode='modern']) body {
  font: 400 16.5px/26px var(--mono);
  -webkit-font-smoothing: none;
}
:root:not([data-mode='modern']) body * { font-weight: 400; letter-spacing: 0; }

/* Header. Quiet and lowercase, like the home page's. */
:root:not([data-mode='modern']) .brand { font-size: 16.5px; }
:root:not([data-mode='modern']) .nav .links { font-size: 16.5px; }
:root:not([data-mode='modern']) .nav .links > a:not(.btn),
:root:not([data-mode='modern']) .nav .mode { text-transform: lowercase; color: var(--ink); }

/* Small links react the way the home page's do: a bar snaps in behind them. */
:root:not([data-mode='modern']) :is(.nav .links > a:not(.btn), .faq a, .foot a) {
  padding: 0 3px;
  margin: 0 -3px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat right / 0% 100%;
  transition: background-size 120ms steps(4, end), color 0s linear 60ms;
}
:root:not([data-mode='modern']) .faq a { box-shadow: inset 0 -2px 0 var(--accent); color: var(--ink); text-decoration: none; }
:root:not([data-mode='modern']) :is(.nav .links > a:not(.btn), .faq a, .foot a):is(:hover, :focus-visible, :active) {
  background-position: left;
  background-size: 100% 100%;
  color: var(--on-accent);
  box-shadow: none;
  outline: none;
}

/* Buttons: square, on a hard shadow, pressed flat under a click. The cursor
   lands beside whichever one is pointed at and nudges, as on a game menu. */
:root:not([data-mode='modern']) .btn {
  position: relative;
  height: 44px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 16.5px;
  transition: none;
}
:root:not([data-mode='modern']) .btn.sm { height: 36px; padding: 0 12px; font-size: 16.5px; box-shadow: 3px 3px 0 var(--ink); }
:root:not([data-mode='modern']) .btn:hover { transform: none; }
:root:not([data-mode='modern']) .btn:active { transform: translate(4px, 4px); box-shadow: none; }
:root:not([data-mode='modern']) .btn.sm:active { transform: translate(3px, 3px); }
:root:not([data-mode='modern']) :is(.btn.ink, .btn.accent) { background: var(--accent); color: var(--on-accent); }
:root:not([data-mode='modern']) .btn.line { background: var(--paper); color: var(--ink); }
:root:not([data-mode='modern']) .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:root:not([data-mode='modern']) .btn::before {
  content: '';
  position: absolute;
  left: -18px;
  top: calc(50% - 7px);
  width: 8px;
  height: 14px;
  background: var(--accent);
  clip-path: var(--cursor);
  opacity: 0;
}
:root:not([data-mode='modern']) .btn:is(:hover, :focus-visible)::before {
  opacity: 1;
  animation: nudge 600ms steps(1, end) infinite;
}
@keyframes nudge { 50% { transform: translateX(-2px); } }
:root:not([data-mode='modern']) .hero .cta { gap: 32px; }
/* A card's button may take two lines if its words outrun a small phone. */
:root:not([data-mode='modern']) .card .btn { height: auto; min-height: 44px; padding: 8px 12px; line-height: 22px; white-space: normal; text-align: center; }

/* The cartridge (drawn and animated by /cartridge.css), over the hero. */
:root:not([data-mode='modern']) .hero .cart { margin: 0 auto 24px; }

/* Hero. */
:root:not([data-mode='modern']) .hero { padding-top: 40px; }
:root:not([data-mode='modern']) .hero h1 { font-size: 33px; line-height: 1.25; }
:root:not([data-mode='modern']) .hero p { font-size: 16.5px; line-height: 26px; }
@media (min-width: 600px) { :root:not([data-mode='modern']) .hero h1 { font-size: 44px; } }
@media (min-width: 1100px) { :root:not([data-mode='modern']) .hero h1 { font-size: 55px; } }

/* The plans. Each card is a game window: a double line on whole pixels. */
:root:not([data-mode='modern']) .plans h2,
:root:not([data-mode='modern']) .questions h2 { font-size: 33px; line-height: 1.25; }
:root:not([data-mode='modern']) .card {
  margin: 4px;
  padding: 24px;
  border: 2px solid var(--ink);
  border-radius: 0;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
:root:not([data-mode='modern']) .card .name { font-size: 22px; line-height: 32px; gap: 12px; align-items: flex-start; }
:root:not([data-mode='modern']) .card .mark { display: none; }
.pix { display: block; width: 32px; height: 32px; flex: none; }
.pix .ink { fill: var(--ink); }
.pix .hue { fill: var(--accent); }
:root:not([data-mode='modern']) .card .lede,
:root:not([data-mode='modern']) .card ul { font-size: 16.5px; line-height: 26px; }
:root:not([data-mode='modern']) .card li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  background: var(--accent);
}
/* The price card, inverted like a selected window, centred on its own. */
:root:not([data-mode='modern']) .card.single { margin: 4px auto; }
:root:not([data-mode='modern']) .card.plus { background: var(--ink); color: var(--paper); }
:root:not([data-mode='modern']) .card.plus .pix .ink { fill: var(--paper); }
:root:not([data-mode='modern']) .card.plus .btn { border-color: var(--paper); box-shadow: 4px 4px 0 var(--paper); }
:root:not([data-mode='modern']) .card.plus .btn:active { box-shadow: none; }
:root:not([data-mode='modern']) .price { font-size: 55px; line-height: 1; }
/* The terms sit under the price, as a shop lists an item's cost. */
:root:not([data-mode='modern']) .price small { display: block; margin-top: 12px; font-size: 16.5px; line-height: 26px; opacity: 0.8; }

/* Questions: ruled in ink, and the cursor beside the question pointed at. An
   open question keeps a dim cursor, as an opened row does at home. */
:root:not([data-mode='modern']) .faq { border-top: 2px solid var(--ink); }
:root:not([data-mode='modern']) .faq details { border-bottom: 2px solid var(--ink); }
:root:not([data-mode='modern']) .faq summary { position: relative; font-size: 16.5px; line-height: 26px; }
:root:not([data-mode='modern']) .faq summary::after { content: '+'; font-size: 16.5px; line-height: 26px; }
:root:not([data-mode='modern']) .faq details[open] summary::after { content: '-'; }
:root:not([data-mode='modern']) .faq summary::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 6px;
  width: 8px;
  height: 14px;
  background: var(--accent);
  clip-path: var(--cursor);
  opacity: 0;
}
:root:not([data-mode='modern']) .faq details[open] summary::before { opacity: 1; background: var(--dim); }
:root:not([data-mode='modern']) .faq summary:is(:hover, :focus-visible)::before { opacity: 1; background: var(--accent); animation: nudge 600ms steps(1, end) infinite; }
:root:not([data-mode='modern']) .faq summary:focus-visible { outline: none; }
:root:not([data-mode='modern']) .faq details p { font-size: 16.5px; line-height: 26px; }

:root:not([data-mode='modern']) .foot { border-top: 2px solid var(--ink); font-size: 16.5px; }
:root:not([data-mode='modern']) .foot nav { flex-wrap: wrap; gap: 4px 20px; }