/* WhatWay document pages: terms, privacy, accessibility, data, 404.
 *
 * Loaded after styles.css, which owns the tokens and the reset. These pages
 * are a reading surface, not an app surface, so they get a single measured
 * column and no cards: the app's card grid encodes "these are comparable
 * results", which is a claim that means nothing about a paragraph.
 *
 * Every page opens with a one-sentence plain-language summary. Most people
 * reading this are reading English as a second or third language while
 * trying to decide whether this site is safe. The summary is the part that
 * has to land; the detail below it is for the people who want it.
 */

.doc-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--gutter); border-bottom: 1px solid var(--rule);
  background: rgba(255,255,255,0.96); position: sticky; inset-block-start: 0;
  z-index: 40; backdrop-filter: blur(12px);
}
.doc-back {
  font-size: 14.5px; color: var(--spruce); text-decoration: none; font-weight: 600;
}
.doc-back:hover { text-decoration: underline; }

.doc {
  max-width: 68ch; margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--gutter) clamp(48px, 7vw, 88px);
}
.doc h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.05; }

/* The summary is load-bearing, so it gets the one piece of emphasis on the
   page: a tinted panel with a thick leading edge. Nothing else here is
   boxed, which is what makes this read as "start here" rather than "a card". */
.doc-summary {
  margin: 20px 0 8px; padding: 16px 18px;
  background: var(--tint); border-inline-start: 4px solid var(--spruce);
  border-radius: var(--r-ctl);
  font-size: 17.5px; line-height: 1.55; color: var(--pine);
}
.doc-updated { font-size: 14px; color: var(--ink-muted); margin: 14px 0 0; }

.doc h2 {
  font-size: clamp(20px, 2.6vw, 25px); margin: 36px 0 0;
  padding-top: 20px; border-top: 1px solid var(--rule);
}
.doc h3 { font-size: 17.5px; margin: 24px 0 0; }
.doc p, .doc li { font-size: 16.5px; line-height: 1.65; color: var(--ink-body); }
.doc p { margin: 12px 0 0; }
/* Not buttons. `.doc a` outranks `.btn-primary` on specificity, so a
   primary button on a document page rendered spruce text on a spruce
   fill: a solid green block with an invisible label. */
.doc a:not(.btn) { color: var(--spruce); }
.doc ul, .doc ol { margin: 12px 0 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.doc li::marker { color: var(--ink-muted); }
.doc strong { color: var(--ink); font-weight: 600; }

/* A definition-style row reads better than a two-column table for "what we
   keep / how long", and it survives a 320px screen without scrolling. */
.doc-rows { margin: 16px 0 0; display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); overflow: hidden; }
.doc-row { background: var(--card); padding: 14px 16px; display: grid; gap: 4px; }
.doc-row dt { font-weight: 600; font-size: 16px; color: var(--ink); }
.doc-row dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); }

.doc-note {
  margin-top: 32px; padding: 16px 18px; border: 1px solid var(--edge);
  border-radius: var(--r-ctl); background: var(--card);
  font-size: 15.5px; line-height: 1.6; color: var(--ink-muted);
}

.doc-more { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); }
.doc-more p { font-weight: 600; color: var(--ink); margin: 0 0 10px; font-size: 15.5px; }
.doc-more ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.doc-more a { font-size: 15.5px; }

/* Error pages keep the same route language as the rest of the product: a
   number for support, one plain explanation, then the next safe action. */
.error-page { min-height: 100vh; display: flex; flex-direction: column; }
.error-header { position: relative; }
.error-shell {
  width: 100%; max-width: 920px; margin: 0 auto; flex: 1;
  padding: clamp(52px, 10vw, 112px) var(--gutter);
  display: grid; align-items: center;
}
.error-panel {
  position: relative; max-width: 680px; padding-inline-start: clamp(22px, 5vw, 48px);
  border-inline-start: 4px solid var(--warning-edge);
}
.error-eyebrow {
  margin: 0 0 14px; color: var(--spruce); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.error-code {
  position: absolute; inset-inline-end: 0; top: -0.25em; margin: 0;
  color: var(--band); font-family: var(--display); font-size: clamp(64px, 15vw, 150px);
  font-weight: 800; line-height: 0.8; letter-spacing: -0.06em; z-index: -1;
}
.error-panel h1 {
  max-width: 15ch; font-size: clamp(36px, 7vw, 66px); line-height: 0.98;
  letter-spacing: -0.035em;
}
.error-panel > p:not(.error-eyebrow, .error-code, .error-help) {
  max-width: 52ch; margin: 18px 0 0; color: var(--ink-body);
  font-size: clamp(17px, 2vw, 20px); line-height: 1.55;
}
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.error-help { margin: 24px 0 0; font-size: 14.5px; }
.error-help a { color: var(--spruce); font-weight: 600; }
.error-footer {
  padding: 20px var(--gutter); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--ink); color: #b6c9bf; font-size: 13.5px;
}
.error-footer a { color: var(--mint); font-weight: 600; }
@media (max-width: 540px) {
  .error-code {
    position: static; margin: 0 0 12px; color: var(--spruce);
    font-family: var(--body); font-size: 13px; line-height: 1;
    font-weight: 700; letter-spacing: 0.08em;
  }
}

.doc-nav { display: flex; align-items: center; gap: 18px; }
.doc-lang-switch .lang-trigger { min-height: 40px; }
.doc-lang-switch .lang-menu { z-index: 60; }
.doc-language {
  max-width: 150px; min-height: 38px; padding: 6px 28px 6px 10px;
  border: 1px solid var(--edge); border-radius: var(--r-ctl); background: var(--card);
  color: var(--ink); font: inherit;
}
.doc-language:focus-visible { outline: 3px solid var(--fern); outline-offset: 2px; }
.english-detail-notice {
  max-width: 68ch; margin: 18px auto 0; padding: 12px var(--gutter);
  color: var(--ink-muted); font-size: 14px;
}

/* The shell may be Arabic, Persian, Pashto, or Urdu while the long policy
   below remains English. Keep that source copy LTR so punctuation, phone
   numbers, and addresses do not jump around; only translated headings keep
   the active interface direction. */
html[dir="rtl"] .doc,
html[dir="rtl"] .error-shell,
html[dir="rtl"] .project-context,
html[dir="rtl"] .doc-footer { direction: ltr; text-align: left; }
html[dir="rtl"] .doc > h1[data-i18n],
html[dir="rtl"] .error-panel > h1[data-i18n] { direction: rtl; text-align: right; }

/* The verification pipeline really is a sequence, so it is the one place on
   the site that earns numbered markers. */
.doc-steps { counter-reset: step; list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.doc-steps li {
  counter-increment: step; position: relative; padding-inline-start: 42px;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-body);
}
.doc-steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: 1px;
  width: 27px; height: 27px; border-radius: 999px;
  background: var(--tint); color: var(--pine);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}

/* The same project context closes every reading page. Roles stay visible so
   a logo never quietly turns an affiliation or user-testing relationship
   into a sponsorship claim. */
.project-context {
  padding: clamp(30px, 5vw, 52px) var(--gutter);
  border-top: 1px solid var(--rule); background: var(--card);
}
.project-context-heading {
  max-width: 1120px; margin: 0 auto 24px;
  display: flex; justify-content: space-between; align-items: end; gap: 20px;
}
.project-context-eyebrow {
  margin: 0 0 5px; color: var(--spruce); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.project-context h2 { font-size: clamp(23px, 3vw, 32px); }
.project-context-copy {
  max-width: 68ch; margin: 9px 0 0; color: var(--ink-muted); font-size: 14.5px; line-height: 1.55;
}
.project-context-link { flex: 0 0 auto; font-size: 14px; font-weight: 600; }
.project-context-list {
  max-width: 1120px; margin: 0 auto; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--rule);
}
.project-organization {
  min-width: 0; padding: 16px 18px; border-bottom: 1px solid var(--rule);
  display: grid; gap: 7px; align-content: center;
}
.project-organization:nth-child(3n + 2),
.project-organization:nth-child(3n + 3) { border-inline-start: 1px solid var(--rule); }
.project-organization:nth-last-child(-n + 3) { border-bottom: 0; }
.project-organization-visual {
  min-height: 44px; display: flex; align-items: center; justify-content: flex-start;
}
.project-organization img {
  display: block; width: auto; max-width: 190px; max-height: 42px;
  object-fit: contain; filter: grayscale(1); opacity: 0.82;
}
.project-organization.slot-narrow img { max-width: 64px; }
.project-organization-name {
  color: var(--ink); font-family: var(--display); font-size: 15px; font-weight: 650;
  line-height: 1.2; unicode-bidi: isolate;
}
.project-organization.has-logo .project-organization-name { display: none; }
.project-organization-role { color: var(--ink-muted); font-size: 12.5px; line-height: 1.35; }

.doc-footer {
  padding: 26px var(--gutter); background: var(--ink); color: #b6c9bf;
  display: grid; grid-template-columns: auto minmax(240px, 1fr) auto;
  align-items: center; gap: 18px 30px;
}
.doc-footer-brand {
  color: var(--mist); font-family: var(--display); font-size: 19px;
  font-weight: 800; text-decoration: none;
}
.doc-footer-brand:hover { color: var(--mint); }
.doc-footer p { max-width: 62ch; font-size: 12.5px; line-height: 1.55; }
.doc-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.doc-footer-links a { color: var(--mint); font-size: 12.5px; text-decoration: none; }
.doc-footer-links a:hover { color: var(--mist); text-decoration: underline; }

@media (max-width: 820px) {
  .doc-header { align-items: flex-start; flex-wrap: wrap; }
  .doc-nav { width: 100%; justify-content: space-between; gap: 8px 14px; }
  .doc-lang-switch { margin-inline-end: auto; }
  .project-context-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-organization:nth-child(n) { border-inline-start: 0; border-bottom: 1px solid var(--rule); }
  .project-organization:nth-child(even) { border-inline-start: 1px solid var(--rule); }
  .project-organization:nth-last-child(-n + 2) { border-bottom: 0; }
  .doc-footer { grid-template-columns: 1fr; }
  .doc-footer-links { justify-content: flex-start; }
}

@media (max-width: 540px) {
  .doc-header { padding-block: 12px; }
  /* Only the way back fits beside the language picker. The rest of the
     nav is in the footer at the end of every document page. */
  .doc-nav .doc-back:not(:last-of-type) { display: none; }
  .project-context-heading { align-items: flex-start; flex-direction: column; }
  .project-context-list { grid-template-columns: 1fr; }
  .project-organization:nth-child(n) {
    border-inline-start: 0; border-bottom: 1px solid var(--rule); padding-inline: 2px;
  }
  .project-organization:last-child { border-bottom: 0; }
}

/* ---- saved places -----------------------------------------------------
   A reading surface that happens to be editable. Flat, one hairline per
   card, no shadow: this is a list someone scans while standing up. */
.saved-empty { margin: 24px 0 0; display: grid; gap: 10px; justify-items: start; }
.saved-empty-lead { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--ink); }
.saved-empty .btn { margin-top: 8px; }

.saved-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 24px 0 0; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.saved-tools-count { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.saved-clear {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--ink-muted);
  background: transparent; border: 0; padding: 8px 0; min-height: 44px;
  text-decoration: underline; text-underline-offset: 2px;
}
.saved-clear:hover { color: #9f2f2d; }

.saved-confirm {
  margin: 16px 0 0; padding: 16px 18px;
  border: 1px solid #e7c9c8; border-radius: var(--r-ctl); background: #fdebec;
}
.saved-confirm p { color: #7d2422; font-size: 15.5px; line-height: 1.55; margin: 0; }
.saved-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn-danger { background: #9f2f2d; color: #fff; }
.btn-danger:hover { background: #812523; }

.saved-list { display: grid; gap: 14px; margin-top: 20px; }
.saved-card {
  border: 1px solid var(--edge); border-radius: var(--r-card);
  background: var(--card); padding: 18px; display: grid; gap: 8px;
}
.saved-name { font-size: 18px; margin: 0; }
.saved-address { font-size: 15px; color: var(--ink-muted); margin: 0; }
.saved-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.saved-note-label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.saved-note {
  font: inherit; font-size: 15.5px; line-height: 1.5; color: var(--ink);
  background: var(--mist); border: 1.5px solid var(--control);
  border-radius: var(--r-ctl); padding: 10px 12px; width: 100%; resize: vertical;
}
.saved-note:focus-visible { border-color: var(--spruce); }
.saved-remove {
  justify-self: start; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--ink-muted); background: transparent; border: 0;
  padding: 6px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 2px;
}
.saved-remove:hover { color: #9f2f2d; }

/* A short list of things to do rather than things to read. Buttons on a
   document page need the list semantics stripped, not the list itself:
   a screen reader should still say how many choices there are. */
.doc-actions {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.doc-actions li { margin: 0; }
.doc-actions .btn { font-size: 15.5px; }