/* Long-form pages: /about, the diary, and the quiz shell.
   Inherits every token and the capsule box language from styles.css. */

body.doc {
  background:
    radial-gradient(120% 62% at 16% 0%, rgba(255, 62, 165, 0.16), transparent 60%),
    radial-gradient(110% 55% at 88% 12%, rgba(0, 229, 255, 0.12), transparent 62%),
    radial-gradient(140% 80% at 50% 100%, var(--ultra), transparent 70%),
    var(--void);
  background-attachment: fixed;
}

/* --------------------------------------------------------- doc header ---- */

.doc-header {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--pad) 8px;
  text-align: center;
}

.back {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 10px 2px; /* 44px tap target without visual weight */
}
.back:hover,
.back:active {
  color: var(--cyber);
}

.doc-header h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 12vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 6px 0 0;
  background: linear-gradient(174deg, #fff 10%, var(--shock) 52%, var(--lilac) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 16px rgba(255, 62, 165, 0.4));
}

.doc-tagline {
  margin: 12px 0 0;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted);
}

/* ----------------------------------------------------------- doc body ---- */

.doc-main {
  max-width: var(--measure);
  margin: 0 auto;
  /* Bottom padding clears the sticky CTA (~78px) so the last line is never
     trapped behind it, with a little air and nothing more. */
  padding: 26px var(--pad) 98px;
}

.lede {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--milk);
  margin: 0 0 30px;
}

.section {
  margin: 0 0 40px;
}

.section h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--milk);
}

/* The sparkle motif again, at section scale: a short gradient rule with a star
   sitting on its end. Static here — six animated ones per page would be noise.
   Two backgrounds on one pseudo-element rather than a box-shadow: a shadow
   inherits the element's own rounded-rectangle shape, so it can only ever
   produce a second dash, never a star. */
.section h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 14px;
  margin-top: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff36b' d='M12 0 L14.4 9.6 L24 12 L14.4 14.4 L12 24 L9.6 14.4 L0 12 L9.6 9.6 Z'/%3E%3C/svg%3E")
      right center / 13px 13px no-repeat,
    linear-gradient(90deg, var(--bubble), var(--lilac) 62%, var(--cyber))
      left center / 58px 3px no-repeat;
}

.section-blurb {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 14px 0 18px;
}

.doc-main p {
  margin: 0 0 16px;
}

.outro {
  color: var(--milk);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.5;
  margin-top: 26px;
}

/* -------------------------------------------------------- quick facts ---- */

.facts-grid {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}
.fact {
  background: rgba(21, 12, 38, 0.9);
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fact-label {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyber);
}
.fact-value {
  font-size: 0.95rem;
  color: var(--milk);
}
@media (min-width: 560px) {
  .facts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------- accordion ---- */
/* Native <details>. No JavaScript, no layout shift, correct screen-reader
   semantics, and each row is a full-width tap target. The name attribute makes
   it exclusive where supported, so a wall of text never loses your place. */

.accordion {
  border-top: 1px solid var(--hairline);
}

.accordion details {
  border-bottom: 1px solid var(--hairline);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 0.99rem;
  font-weight: 700;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.accordion summary::-webkit-details-marker {
  display: none;
}
.accordion summary:hover {
  color: var(--shock);
}

/* The marker is a star that spins and lights up when its row opens. */
.marker {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--lilac);
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease, filter 0.2s ease;
}
details[open] .marker {
  transform: rotate(180deg) scale(1.25);
  background: var(--zap);
  filter: drop-shadow(0 0 8px var(--bubble));
}

.answer {
  padding: 0 2px 20px;
}
.answer p {
  margin: 0;
  color: #d6cbe8;
  font-size: 0.96rem;
  line-height: 1.75;
}

/* --------------------------------------------------------- favourites ---- */

.favs,
.vitals {
  margin: 18px 0 0;
  display: grid;
  gap: 0;
}
.favs > div,
.vitals > div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.favs dt,
.vitals dt {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyber);
  padding-top: 4px;
}
.favs dd,
.vitals dd {
  margin: 0;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------- ask form ---- */

.ask-form {
  margin: 4px 0 0;
}

/* Same two-layer trick as the buttons: the wrapper paints the rim, the textarea
   paints the fill, and the 2px between them is the border. Doing it this way
   means the focus state can light the whole rim as a gradient, which a plain
   border colour cannot. */
.ask-field {
  padding: 2px;
  border-radius: var(--r-card);
  background: var(--hairline);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}
.ask-field:focus-within {
  background: linear-gradient(120deg, var(--bubble), var(--lilac), var(--cyber));
  box-shadow: 0 0 24px -6px rgba(255, 62, 165, 0.6);
}

.ask-form textarea {
  display: block;
  width: 100%;
  /* 16px exactly: anything smaller triggers iOS Safari's auto-zoom, which
     strands the visitor mid-page with no obvious way back. */
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  color: var(--milk);
  background: rgba(17, 9, 30, 0.96);
  border: 0;
  border-radius: calc(var(--r-card) - 2px);
  padding: 14px 16px;
  resize: none;
  overflow: hidden; /* the height is managed in script.js as you type */
  min-height: 96px;
}
.ask-form textarea::placeholder {
  color: rgba(244, 236, 255, 0.34);
}
.ask-form textarea:focus {
  outline: none;
}

.ask-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.counter {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  flex: none;
  min-width: 30px;
}
.counter.low {
  color: var(--zap);
}
.ask-send {
  max-width: 190px;
  margin: 0 0 0 auto;
}
.ask-send .face {
  min-height: 52px;
  font-size: 0.95rem;
}

.ask-status {
  margin: 12px 0 0;
  font-size: 0.88rem;
  min-height: 1.2em;
  color: var(--muted);
}
.ask-status.ok {
  color: var(--cyber);
}
.ask-status.err {
  color: #ff8fb4;
}

/* The honeypot: hidden from people, irresistible to bots. Kept out of the
   accessibility tree as well as out of sight, so a screen reader never
   announces a field its user must not fill. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.answered-heading {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 34px 0 6px;
}

/* -------------------------------------------------------------- blog ---- */

.post-card {
  border-bottom: 1px solid var(--hairline);
}
.post-card:first-child {
  border-top: 1px solid var(--hairline);
}
.post-card-link {
  display: block;
  padding: 22px 2px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.post-card h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.post-meta {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.post-excerpt {
  margin: 0 0 12px !important;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.62;
}
.post-more {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyber);
  border-bottom: 2px solid var(--bubble);
  padding-bottom: 3px;
}
.post-card-link:hover h2 {
  color: var(--shock);
}

.post-header h1 {
  font-size: clamp(1.95rem, 8.5vw, 3rem);
  line-height: 1.08;
}
.post-header {
  text-align: left;
}
.post-header .post-meta {
  margin-top: 12px;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
}
.tags li {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lilac);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 5px 12px;
}

.post-body .lede {
  font-size: 1.12rem;
  border-left: 3px solid var(--bubble);
  border-radius: 0 10px 10px 0;
  padding-left: 16px;
}

/* ------------------------------------------------------------- leaks ---- */
/* The answer goes first, in the largest type on the page. Someone arriving from
   a search for this has exactly one question, and making them read three
   paragraphs to reach a one-word answer is how a page like this loses to the
   scraper sites it is trying to beat. */

.verdict {
  position: relative;
  margin: 4px 0 30px;
  padding: 22px 22px 24px;
  background: linear-gradient(168deg, rgba(0, 229, 255, 0.14), rgba(21, 12, 38, 0.94));
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: var(--r-card);
  overflow: hidden;
}
.verdict::before {
  content: '';
  position: absolute;
  inset: auto -20% -70% -20%;
  height: 90%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(0, 229, 255, 0.2), transparent 70%);
  pointer-events: none;
}
.verdict > * {
  position: relative;
}
.verdict-label {
  margin: 0 0 8px !important;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyber);
}
.verdict-answer {
  margin: 0 0 12px !important;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  line-height: 1.12;
  color: var(--milk);
}
.verdict-summary {
  margin: 0 !important;
  color: #d6cbe8;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Numbered, because it is a checklist someone runs top to bottom, and the
   numbers are what make that legible at a glance. */
.checks {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 16px;
  background: rgba(21, 12, 38, 0.7);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.check-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--bubble), var(--lilac));
  color: #fff;
  font-family: var(--f-mono);
  font-size: 0.72rem;
}
.check-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.check-body strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--milk);
}
.check-body span {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* --------------------------------------------------------- cta + nav ---- */

.cta-card {
  position: relative;
  margin: 40px 0 0;
  padding: 28px 22px;
  text-align: center;
  background: linear-gradient(168deg, rgba(255, 62, 165, 0.2), rgba(21, 12, 38, 0.94));
  border: 1px solid rgba(255, 62, 165, 0.42);
  border-radius: var(--r-card);
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(0, 229, 255, 0.28), transparent 70%);
  pointer-events: none;
}
.cta-card p {
  position: relative;
  margin: 0 0 18px !important;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1.35;
}

.post-nav {
  display: grid;
  gap: 10px;
  margin: 34px 0 0;
}
.post-nav a {
  display: block;
  padding: 15px 18px;
  text-decoration: none;
  color: var(--milk);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
  background: rgba(21, 12, 38, 0.78);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.post-nav a span {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyber);
  margin-bottom: 4px;
}
.post-nav a:hover {
  border-color: var(--bubble);
}

.doc-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom, 0px) + 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

@media (min-width: 769px) {
  .doc-main {
    padding-bottom: 60px;
  }
  .doc-footer {
    padding-bottom: 60px;
    flex-direction: row;
    justify-content: center;
    gap: 26px;
  }
}