/* Shared styles for privacy.html and terms.html, in the main page's "Tunnel" design:
   a night header with the tunnel rings and a Lalezar title, the long text on warm paper,
   section headings marked like stops on a metro line, and the dark footer.
   Tokens match index.html. No external requests: fonts come from fonts/fonts.css. */
:root {
  --red: #FF0033;
  --red-btn: #E6002E;
  --red-ink: #D4002A;      /* red text on paper: 5:1 */
  --night: #0B0607;
  --bone: #F7EDEE;
  --bone-2: #EADCDE;
  --ash: #B9A7AA;          /* muted text on night: 8.7:1 */
  --paper: #FBF3EE;
  --ink: #1C1214;          /* body text on paper: 16:1 */
  --ink-2: #5B4A4D;        /* muted text on paper: 7.6:1 */
  --rule: rgba(28, 18, 20, .13);
  --todo-bg: #fff3bf;
  --todo-text: #5c4400;
  --display: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
  --text: 'Vazirmatn', Tahoma, sans-serif;
  --gut: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); font-synthesis: none; }
body {
  margin: 0;
  font: 400 17px/2 var(--text);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--red-ink); text-underline-offset: 3px; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.nav :focus-visible, footer :focus-visible { outline-color: #fff; }
.ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.wrap { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: var(--gut); }

/* ---------- header: night, like the tunnel ---------- */
.nav { background: var(--night); color: var(--bone); padding-top: env(safe-area-inset-top); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 900 22px/1 var(--display); white-space: nowrap; }
.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 22px -8px rgba(255, 0, 51, .6); }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--bone-2); text-decoration: none; font-size: 15px; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
@media (hover: hover) { .back:hover { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); } }

.masthead {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 40px 0 52px;
  background: radial-gradient(70% 130% at 18% 30%, #2b0a13 0%, #13070a 45%, var(--night) 80%);
  color: var(--bone);
}
/* the tunnel: the icon's shape, receding toward a lit mark */
.rings { position: absolute; z-index: -1; left: 0; top: 50%; width: min(560px, 80vw); height: auto; translate: -12% -50%; overflow: visible; }
.rings use { fill: none; stroke: #FF2852; }
.masthead h1 { margin: 0; font: 900 clamp(48px, 9vw, 84px)/1.15 var(--display); color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.updated { margin: 8px 0 0; color: var(--ash); font-size: 15px; }

/* ---------- the text, on paper ---------- */
.body { padding-top: 40px; padding-bottom: 72px; }
.intro { margin: 0; color: var(--ink-2); font-size: 1.05rem; }

/* the summary reads like the back of a ticket */
.summary {
  margin: 30px 0 8px; padding: 20px 24px; border-radius: 14px;
  background: repeating-linear-gradient(135deg, rgba(212, 0, 42, .035) 0 2px, transparent 2px 9px), #F6EAE3;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.summary h2 { margin: 0 0 6px; font: 800 15px/1.6 var(--text); color: var(--red-ink); }
.summary h2::before { display: none; }
.summary ul { margin: 0; padding: 0; list-style: none; }
.summary li { padding: 8px 0; border-top: 1px dashed rgba(28, 18, 20, .2); }
.summary li:first-child { border-top: 0; }
.summary li + li { margin-top: 0; }

/* each section heading is a stop on the line */
section { margin-top: 44px; }
h2 { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; font: 900 clamp(26px, 3.6vw, 32px)/1.45 var(--display); color: var(--ink); }
h2::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: .48em; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 4.5px var(--red); }
h3 { margin: 22px 0 6px; font-size: 1.06rem; font-weight: 800; line-height: 1.6; }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-inline-start: 22px; }
li + li { margin-top: 6px; }
li::marker { color: var(--red-ink); }
section p, section li { color: #2E2224; }

/* Facts not yet confirmed: must be filled in before publishing. */
mark.todo {
  padding: 1px 6px; border-radius: 6px;
  background: var(--todo-bg); color: var(--todo-text);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- footer ---------- */
footer { padding: 32px 0 max(36px, env(safe-area-inset-bottom)); background: var(--night); border-top: 1px solid rgba(255, 255, 255, .08); color: #BDB6B6; font-size: 14.5px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }
.foot a { color: #ECE6E6; text-decoration: none; }
.foot a[aria-current] { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (hover: hover) { .foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; } }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .masthead { padding: 30px 0 40px; }
  .rings { width: 92vw; translate: -40% -50%; opacity: .7; }
  .body { padding-top: 30px; padding-bottom: 56px; }
  .summary { padding: 16px 18px; }
  /* the label stays readable to screen readers; only the arrow shows */
  .back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}