/* Encounter: The Lost Cards — the support and legal pages, drawn on top of
   styles.css: they share its fonts, colours, top bar, buttons, FAQ and
   footer. What is here is theirs alone: a solid top bar, a page header with
   its Tarot card, the reading column and the support form. */

:root {
  /* Native controls, the select's list among them, drawn dark to match. */
  color-scheme: dark;
}

/* ── Top bar ───────────────────────────────────────────────────────────────
   On the landing page it floats over the hero. Here there is no hero under
   it, so it takes its place in the page, lined up with the page's narrower
   column (.wrap-narrow) instead of the landing page's wide one. */
.topbar {
  position: relative;
  padding-inline: max(var(--gutter), (100% - 46rem) / 2);
  background: var(--night);
  border-bottom: var(--px) solid var(--ink);
}

/* Whole pixels where round() is known, as on the landing page. */
@supports (width: round(up, 1px, 1px)) {
  .topbar {
    padding-inline: round(max(var(--gutter), (100% - 46rem) / 2), 1px);
  }
}

/* The icons' capsule, a shade up from the solid bar so it still shows. */
.topbar-tools::before {
  background: var(--charcoal-2);
}

/* ── Page header ───────────────────────────────────────────────────────── */
.page-header {
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  background: radial-gradient(ellipse at 80% 0, var(--charcoal-3) 0, var(--charcoal) 70%);
  border-bottom: 2px solid var(--charcoal-3);
}

.page-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.page-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0 0 8px;
  padding: 0;
  font-size: var(--fs-note);
  color: var(--muted);
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 10px;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--gold);
  text-underline-offset: 4px;
}

.breadcrumb a:hover {
  color: var(--cream);
}

.page-title {
  margin: 0;
  font-size: var(--pixel-3);
  text-shadow: var(--pixel-shadow);
}

/* A legal document's title is a whole sentence ("Terms of Service for
   Encounter: The Lost Cards (Steam Version)"), so it is drawn smaller. */
.page-title-long {
  font-size: var(--pixel-2);
}

@media (min-width: 1024px) {
  .page-title {
    font-size: var(--pixel-4);
  }

  .page-title-long {
    font-size: var(--pixel-3);
  }
}

.page-lede {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: var(--fs-lead);
  color: var(--muted);
}

/* The page's Tarot card, at a whole multiple of its 50 × 82 pixels: 2× on a
   tablet, 3× on a wide screen. A phone has no room beside the title for it.
   The card's own art carries its name, so it has no caption. */
.page-card {
  flex: none;
  display: none;
  width: 100px;
  height: 164px;
  image-rendering: pixelated;
  filter: drop-shadow(0 var(--px) 0 var(--ink));
}

@media (min-width: 640px) {
  .page-card {
    display: block;
  }
}

@media (min-width: 1024px) {
  .page-card {
    width: 150px;
    height: 246px;
  }
}

/* ── Page body ─────────────────────────────────────────────────────────── */
/* <main> holds the page header too, so the skip link lands on the title. */
.page-body {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) clamp(4rem, 3rem + 4vw, 6rem);
}

.page-section + .page-section {
  margin-top: clamp(3.5rem, 3rem + 2vw, 5rem);
}

.page-h2 {
  margin: 0 0 16px;
  font-size: var(--pixel-2);
  text-shadow: var(--pixel-shadow);
}

@media (min-width: 1024px) {
  .page-h2 {
    font-size: var(--pixel-3);
  }
}

code {
  padding: 1px 6px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  color: var(--cream);
  background: var(--night);
  border: 1px solid var(--charcoal-3);
}

/* Among pixel text, a command is set in it too: a system font's fractional
   width would start the words after it between the screen's pixels. */
:root:not(.legible) code {
  font-family: inherit;
  font-size: inherit;
}

/* ── Legal documents ───────────────────────────────────────────────────── */
.platform-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.platform-toggle a {
  --btn-bg: var(--charcoal-2);
  --btn-fg: var(--text);
  --btn-edge: var(--stone);
  min-height: 48px;
  padding: 4px 20px;
  font-size: var(--pixel-2);
}

.platform-toggle a[aria-current="page"] {
  --btn-bg: var(--green);
  --btn-fg: var(--charcoal);
  --btn-edge: var(--green-deep);
}

/* High contrast has no green to mark the current platform with, so it takes
   the system's selection colours. */
@media (forced-colors: active) {
  .platform-toggle a[aria-current="page"] {
    forced-color-adjust: none;
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
  }
}

.prose {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: var(--pixel-2);
  line-height: 1;
  text-shadow: var(--pixel-shadow);
}

.prose h3 {
  margin: 2rem 0 0.5rem;
  font-size: var(--pixel-2);
  color: var(--gold);
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1em;
}

.prose ul,
.prose ol {
  padding-left: 1.5em;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose li::marker {
  color: var(--gold);
}

.prose strong {
  font-weight: 650;
  color: var(--cream);
}

.prose a {
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.prose a:hover {
  color: var(--cream);
}

.prose blockquote {
  margin: 0 0 1em;
  padding-left: 16px;
  color: var(--muted);
  border-left: var(--px) solid var(--stone);
}

.prose hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 2px solid var(--charcoal-3);
}

/* Not drawn while the documents are English only (generate-legal-html.js). */
.lang-switcher {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.lang-switcher a,
.lang-switcher img {
  display: block;
}

.lang-icon {
  width: auto;
  height: 24px;
}

.lang-icon.inactive {
  opacity: 0.6;
  filter: grayscale(1);
}

/* ── Support: quick links ──────────────────────────────────────────────── */
.help-title {
  margin: 0 0 24px;
  font-size: var(--pixel-2);
}

.help-grid {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.help-card {
  padding: 16px 20px;
  overflow-wrap: anywhere;
  background: var(--charcoal-2);
}

.help-card h3 {
  margin: 0 0 6px;
  font-size: var(--pixel-2);
  color: var(--gold);
}

.help-card p {
  margin: 0;
}

/* ── Support: FAQ ──────────────────────────────────────────────────────── */
/* The landing page's FAQ (styles.css), whose answers are a paragraph or a
   list; here one has two paragraphs. */
.faq details p + p {
  margin-top: 0;
}

/* ── Support: the form ─────────────────────────────────────────────────── */
.support-form {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

@media (min-width: 640px) {
  .support-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-wide,
  .support-form > .form-actions {
    grid-column: 1 / -1;
  }
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--cream);
}

.field .hint {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  line-height: var(--lh-body);
  color: var(--cream);
  background: var(--night);
  border: 2px solid var(--stone);
  border-radius: 0;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #8d897f;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--gold);
  outline-offset: 2px;
}

.field textarea {
  min-height: 168px;
  resize: vertical;
}

/* The list's arrow, drawn as a stepped pixel chevron in the gold accent. */
.field select {
  padding-right: 48px;
  cursor: pointer;
  background:
    var(--night)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd700' d='M0 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E")
    right 16px center / 14px 8px no-repeat;
  appearance: none;
}

.field select option {
  color: var(--cream);
  background: var(--night);
}

@media (forced-colors: active) {
  .field select {
    appearance: auto;
    background-image: none;
  }
}

/* Honeypot: out of sight but not display: none, which some bots skip. */
.honeypot {
  position: absolute;
  top: auto;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 8px;
}

.support-submit {
  --btn-bg: var(--green);
  --btn-fg: var(--charcoal);
  --btn-edge: var(--green-deep);
  min-width: 10rem;
  padding-inline: 32px;
  font-size: var(--pixel-2);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* Disabled for the form's first two seconds (support-handler.js) and while
   a ticket is sending. */
.support-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  --btn-edge: var(--green-deep);
}

/* The border styles.css gives every .btn under high contrast, which the
   border: 0 above would otherwise take away. */
@media (forced-colors: active) {
  .support-submit {
    border: 2px solid ButtonText;
  }

  .support-submit:disabled {
    border-color: GrayText;
  }
}

.form-status {
  display: none;
  align-self: stretch;
  margin: 0;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--cream);
  border: 2px solid var(--stone);
}

.form-status.show {
  display: block;
}

.form-status.success {
  background: rgb(101 219 50 / 0.12);
  border-color: var(--green);
}

.form-status.error {
  background: rgb(255 138 122 / 0.12);
  border-color: var(--error);
}

/* ── Floating support button ───────────────────────────────────────────── */
/* On the landing page it waits for the gameplay reel to scroll by. There is
   no reel here, so it shows from the start. */
.support-fab {
  animation: none;
}