/* ==========================================================================
   Scryglass site — legal pages: Refunds (2e), Privacy (2f), Licence (2g).
   Depends on tokens.css, site.css and components.css, in that order.

   These three pages share a head, a meta row and the dashed placeholder
   slots that mark content still waiting on an outside answer (Paddle, or
   legal review). Everything else is per page.
   ========================================================================== */

/* --- Dashed placeholder slots ----------------------------------------------
   Deliberate, designed gaps — see "Known gaps" in the handoff. Each one is a
   real outstanding question, so the design draws the hole rather than filling
   it with a guess. Do not resolve these without the answer.                 */

.gap-slot {
  padding: 2px 7px;
  border: 1px dashed var(--dash-alt);
  border-radius: var(--radius-none);
}

/* The three modifiers below are dormant: they belong to the refund and licence
   bodies, which are holding pages for now (CHANGES §7). Privacy still uses the
   base `.gap-slot`. */

/* Inside a heading: mono, at the heading's optical size. */
.gap-slot--heading {
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-dim);
}

/* A whole unwritten clause, standing on its own in a list row. */
.gap-slot--clause {
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
}

/* A prompt trailing a paragraph — "DECIDE", "SEAT RULES", "CONFIRM WORDING". */
.gap-slot--prompt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

/* --- Shared page head and meta row ------------------------------------------ */

.legal-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 68px var(--page-gutter) 44px;
  border-bottom: 1px solid var(--hairline);
}

.legal-head__title {
  max-width: 820px;
  font-size: 46px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.03em;
}

.legal-head__lead {
  max-width: 660px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.legal-meta {
  display: flex;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

/* --- Contact band, closing refunds and privacy ------------------------------- */

.legal-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--bg-panel);
}

.legal-contact--refunds {
  padding: 48px var(--page-gutter);
}

.legal-contact--privacy {
  padding: var(--page-gutter);
}

.legal-contact__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-contact__title {
  font-size: 26px;
  font-weight: 700;
}

.legal-contact__body {
  font-size: 15px;
  color: var(--text-muted);
}

.legal-contact__body--wide {
  max-width: 640px;
  line-height: 1.65;
}

.legal-contact .btn {
  padding: 14px 24px;
  white-space: nowrap;
}

/* --- Holding state — refunds (2e) and licence (2g) ---------------------------
   Both pages state no terms while Paddle and legal settle theirs (CHANGES §7),
   so the whole body is a mono eyebrow, the title, one sentence of why, and a
   pulsing chip. No dashed slots here: there is no drafted body to gap.      */

.holding {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 110px var(--page-gutter) 96px;
  border-bottom: 1px solid var(--hairline);
}

.holding__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--accent-pink);
}

.holding__title {
  max-width: 820px;
  font-size: 46px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.03em;
}

.holding__lead {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* The chip is sized by its own text, not by the column it sits in. */
.holding__status {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-none);
  background: var(--bg-panel);
}

/* The shared status dot, in this page's accent and a hair larger. It must not
   shrink: it is the one thing on the page that says work is in progress. */
.holding__status .status-dot {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--accent-pink);
}

.holding__status-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

/* The mail-us band closing both holding pages. The site footer's own top
   hairline closes it, so it carries no bottom border of its own. */
.legal-contact--holding {
  padding: var(--page-gutter);
}

.legal-contact--holding .legal-contact__body {
  max-width: 620px;
  line-height: 1.65;
}

/* ==========================================================================
   Refund policy (2e)
   Dormant while the page is a holding state — the drafted body returns with
   the signed-off terms (CHANGES §7). Kept intact rather than rewritten.
   ========================================================================== */

.refunds {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  border-bottom: 1px solid var(--hairline);
}

.refunds__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 72px var(--page-gutter);
  border-right: 1px solid var(--hairline);
}

.refunds__title {
  font-size: 46px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.03em;
}

.refunds__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.refunds__meta {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  color: var(--text-dim);
}

.refunds__steps {
  padding: 72px var(--page-gutter);
  list-style: none;
}

.refunds__step {
  display: flex;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
}

.refunds__step:first-child {
  padding: 0 0 26px;
  border-top: 0;
}

.refunds__step:last-child {
  padding: 26px 0 0;
}

.refunds__num {
  min-width: 34px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-pink);
}

.refunds__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.refunds__step-title {
  font-size: 21px;
  font-weight: 700;
}

.refunds__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ==========================================================================
   What we collect (2f)
   ========================================================================== */

.events {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 48px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

.events__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-cyan);
}

.events__lead {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Two event tables. The design draws a 300px column, a 24px gap and the
   remainder — reproduced as a fixed layout whose first column is 300 + 24
   wide with the gap taken as its right padding. */
.events-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.events-table--first { margin-top: 10px; }
.events-table--second { margin-top: 26px; }

.events-table col:first-child { width: 324px; }

.events-table th,
.events-table td {
  text-align: left;
  vertical-align: top;
}

.events-table th:first-child,
.events-table td:first-child {
  padding-right: 24px;
}

.events-table thead th {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-raised);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--text-faint);
}

.events-table tbody th,
.events-table tbody td {
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

.events-table tbody th {
  padding-right: 24px;
  color: var(--text-primary);
}

.events-table tbody td {
  color: var(--text-muted);
}

.events__note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-faint);
}

/* --- Never sent, and the verbatim payload ------------------------------------ */

.privacy-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--hairline);
}

.never {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px var(--page-gutter);
  border-right: 1px solid var(--hairline);
  background: var(--bg-panel);
}

.never__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-pink);
}

.never__list {
  list-style: none;
}

.never__item {
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}

.never__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.never__item--wrap {
  line-height: 1.5;
}

.payload {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px var(--page-gutter);
}

.payload__title {
  font-size: 24px;
  font-weight: 700;
}

.payload__lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.payload__event {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
}

.payload__code {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--bg-well);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.95;
  color: #B9B4C6; /* code foreground; named only in the handoff's code-block
                     spec, so it has no token yet */
  white-space: pre;
  overflow-x: auto;
}

.payload__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* --- Three closing principles ------------------------------------------------ */

.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--hairline);
}

.notes-grid__cell {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: var(--page-gutter);
}

.notes-grid__cell:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.notes-grid__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent-pink);
}

.notes-grid__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* The site's own analytics, distinct from the app telemetry above. */
.site-note {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 48px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

.site-note__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-cyan);
}

.site-note__body {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ==========================================================================
   Licence (2g)
   Dormant while the page is a holding state — the drafted body returns with
   the signed-off terms (CHANGES §7). Kept intact rather than rewritten.
   ========================================================================== */

.permissions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--hairline);
}

.permissions__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px var(--page-gutter);
}

.permissions__col--may {
  border-right: 1px solid var(--hairline);
}

.permissions__col--may-not {
  background: var(--bg-panel);
}

.permissions__title {
  font-size: 24px;
  font-weight: 700;
}

.permissions__title--may { color: var(--accent-cyan); }
.permissions__title--may-not { color: var(--accent-pink); }

.permissions__list {
  list-style: none;
}

.permissions__item {
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.55;
}

.permissions__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.permissions__item strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* --- Per-tier notes ---------------------------------------------------------- */

.tier-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--hairline);
}

.tier-note {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--page-gutter);
}

.tier-note:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.tier-note__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tier-note__name {
  font-size: 19px;
  font-weight: 700;
}

.tier-note__kind {
  font-family: var(--font-mono);
  font-size: 12px;
}

.tier-note__kind--pink { color: var(--accent-pink); }
.tier-note__kind--cyan { color: var(--accent-cyan); }

.tier-note__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --- Term clauses ------------------------------------------------------------
   Three across, then one spanning the full width on its own row.            */

.terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--hairline);
}

.term {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: var(--page-gutter);
}

.term:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.term--wide {
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 1px solid var(--hairline);
}

.term__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent-pink);
}

.term__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --- Full terms and the "Also here" column ----------------------------------- */

.licence-foot {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  border-bottom: 1px solid var(--hairline);
}

.full-terms {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px var(--page-gutter);
  border-right: 1px solid var(--hairline);
}

.full-terms__title,
.also__title {
  font-size: 24px;
  font-weight: 700;
}

.full-terms__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}

.full-terms__item {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.full-terms__item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.full-terms__num {
  min-width: 28px;
  color: var(--accent-pink);
}

.full-terms__note {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
}

.also {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px var(--page-gutter);
  background: var(--bg-panel);
}

.also__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  font-size: 15px;
  color: var(--text-muted);
}

.also__contact {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-dim);
}

.also__contact a {
  color: var(--accent-cyan);
}

/* ==========================================================================
   WP9 — responsive
   See the breakpoint table at the foot of site.css. Nothing here matches at
   1240px or wider.
   ========================================================================== */

@media (max-width: 1239px) {
  .legal-head__title,
  .holding__title,
  .refunds__title { font-size: clamp(28px, 3.72vw, 46px); }
}

@media (max-width: 900px) {
  /* Shared head and contact band */
  .legal-head { padding: 48px var(--page-gutter) 32px; }

  /* Holding state */
  .holding { padding: 72px var(--page-gutter) 64px; }

  .legal-contact--holding { padding: 40px var(--page-gutter); }

  .legal-meta {
    flex-wrap: wrap;
    gap: 10px 24px;
  }

  .legal-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .legal-contact--refunds { padding: 40px var(--page-gutter); }

  /* Refund policy */
  .refunds { grid-template-columns: 1fr; }

  .refunds__intro {
    padding: 48px var(--page-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .refunds__steps { padding: 40px var(--page-gutter); }

  /* What we collect */
  .events { padding: 40px var(--page-gutter); }

  .privacy-pair { grid-template-columns: 1fr; }

  .never {
    padding: 40px var(--page-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .payload { padding: 40px var(--page-gutter); }

  .notes-grid { grid-template-columns: 1fr; }

  .notes-grid__cell:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  /* Licence */
  .permissions { grid-template-columns: 1fr; }

  .permissions__col { padding: 40px var(--page-gutter); }

  .permissions__col--may {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .tier-notes { grid-template-columns: 1fr; }

  .tier-note:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .terms { grid-template-columns: 1fr; }

  .term:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  /* In one column the wide clause is simply the last row, and its own top
     rule would double the one the clause above it now draws. */
  .term--wide { border-top: 0; }

  .licence-foot { grid-template-columns: 1fr; }

  .full-terms {
    padding: 40px var(--page-gutter);
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .also { padding: 40px var(--page-gutter); }
}

/* --- The two event tables scroll themselves --------------------------------
   Their values are unbroken snake_case tokens — hashed_driver_uid,
   has_serial_number — so there is no wrap point inside them and a 300px
   column will not hold one. `display:block` turns each table into its own
   scroll container and drops the fixed 324px first column with it, letting
   auto table layout size both columns to the tokens they actually carry.
   The section around them keeps the reading width.                        */

@media (max-width: 700px) {
  .events-table {
    display: block;
    overflow-x: auto;
  }

  .events-table col:first-child { width: auto; }
}

@media (max-width: 620px) {
  .legal-contact--privacy { padding: 32px var(--page-gutter); }

  /* The chip's mono line is wider than a phone; let it wrap in place. */
  .holding__status {
    align-self: stretch;
    padding: 18px 20px;
  }

  .legal-contact__title,
  .events__title,
  .never__title,
  .payload__title,
  .permissions__title,
  .full-terms__title,
  .also__title { font-size: 21px; }

  .refunds__step { gap: 16px; }

  .refunds__step-title,
  .tier-note__name { font-size: 19px; }

  .legal-contact .btn { align-self: stretch; }
}