/* ============================
   Privacy — AtlasSwift (mobile-first)
   Palette : --dark-brown --medium-brown --light-beige --off-white --accent --accent-dark
============================ */

/* Motion */
@keyframes fadeInUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Local tokens */
:root{
  --measure: 68ch;
  --leading: 1.7;
  --rhythm: clamp(10px, 0.6rem + 0.3vw, 16px);
  --radius: 14px;
  --ring: 2px solid rgba(244,162,97,.4);
  --shadow: 0 10px 26px rgba(0,0,0,.26);
  --header-offset: clamp(56px, 6vh, 96px);
}

/* ===== Shell (mobile-first) ===== */
.legal{
  background: linear-gradient(135deg, var(--medium-brown), var(--dark-brown));
  color: var(--off-white);
  padding: 16px 12px 22px;
}
.legal-container{
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeInUp .35s ease both;
}

/* ===== Top matter ===== */
.legal h1{
  font-family: 'Space Grotesk',sans-serif;
  color: var(--accent);
  font-size: clamp(1.6rem, 1.1rem + 3vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 calc(var(--rhythm) * .8);
}
.legal .muted{ color: var(--light-beige); opacity: .95; margin: 4px 0 0; }
.legal .small{ font-size: .95rem; }

/* Readable line length (main content only) */
.legal-main > :where(p,ul,ol,h2,h3,blockquote,.table-wrapper){ max-width: var(--measure); }

/* ===== Headings + anchor offset ===== */
:where(.legal h2,.legal h3){ scroll-margin-top: calc(var(--header-offset) + 12px); }
.legal h2{
  font-family: 'Space Grotesk',sans-serif;
  color: var(--accent);
  font-size: clamp(1.15rem, .95rem + 2.2vw, 1.8rem);
  margin: calc(var(--rhythm) * 1.6) 0 var(--rhythm);
  line-height: 1.25;
}
.legal h3{
  font-family: 'Space Grotesk',sans-serif;
  color: var(--light-beige);
  font-size: clamp(1.02rem, .92rem + 1.2vw, 1.22rem);
  margin: calc(var(--rhythm) * 1.1) 0 calc(var(--rhythm) * .5);
}

/* ===== Copy & links ===== */
.legal p{ line-height: var(--leading); margin: var(--rhythm) 0 0; }
.legal strong{ color: var(--off-white); font-weight: 700; }
.legal a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover{ color: var(--accent-dark); }
.legal a:focus-visible{ outline: var(--ring); border-radius: 8px; }

/* Anchor highlight */
.legal :target{
  outline: 2px solid rgba(244,162,97,.35);
  box-shadow: 0 0 0 4px rgba(244,162,97,.16);
  border-radius: 8px;
}

/* ===== ToC (mobile: pill scroller) ===== */
.toc{
  margin: 10px 0 14px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(244,162,97,.28);
  overflow: hidden;                         /* clip pills */
  min-width: 0;                             /* allow shrink */
}
.toc ol{
  list-style: none;
  margin: 0;
  padding: 0 2px 6px;
  counter-reset: sec;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  min-width: 0;
}
.toc li{ counter-increment: sec; flex: 0 0 auto; min-width: 0; }
.toc a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;                      /* keep pills on one line (mobile) */
  color: var(--off-white);
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(244,162,97,.35);
  min-width: 0;                             /* fix overflow in grid/flex contexts */
}
.toc a::before{
  content: counter(sec) ".";
  color: var(--accent);
  font-weight: 700;
}
.toc a:hover{ color: var(--accent); border-color: var(--accent); }

/* ===== Lists ===== */
.legal :where(ul,ol){
  margin: calc(var(--rhythm) * .8) 0 0 1rem;
  padding: 0;
}
.legal ul{ list-style: disc; }
.legal ol{ list-style: decimal; }
.legal li{
  line-height: calc(var(--leading) + .05);
  margin: .55rem 0;
  padding-left: .1rem;
}
.legal li::marker{ color: var(--accent); font-weight: 700; }
.legal li > :where(ul,ol){ margin-top: .38rem; }

/* ===== Blockquote ===== */
blockquote{
  margin: calc(var(--rhythm) * 1.1) 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--accent);
  background: rgba(255,255,255,.05);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ===== Table responsive ===== */
.table-wrapper{
  margin-top: var(--rhythm);
  border: 1px solid rgba(244,162,97,.28);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 4px 14px rgba(0,0,0,.14) inset;
}
.table{
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .98rem;
}
.table thead th{
  position: sticky; top: 0;
  background: rgba(26,18,11,.85);
  backdrop-filter: blur(2px);
  color: var(--off-white);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(244,162,97,.35);
  z-index: 1;
}
.table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--off-white);
}
.table tbody tr:nth-child(odd){ background: rgba(255,255,255,.02); }
.table tbody tr:hover{ background: rgba(244,162,97,.08); }

/* ===== Back to top ===== */
.back-top{ margin: calc(var(--rhythm) * .9) 0 0; text-align: right; }
.back-top a{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(244,162,97,.28);
  text-decoration: none;
}
.back-top a:hover{ background: rgba(255,255,255,.12); }

/* ===== Skip link (a11y) ===== */
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  position: static; width: auto; height: auto; padding: 8px 10px; margin: 8px;
  background: var(--accent); color: var(--dark-brown);
  border-radius: 8px; outline: none;
}

/* ===== ≥ 680px ===== */
@media (min-width: 680px){
  .legal{ padding: 18px 16px 28px; }
  .toc{ padding: 12px 14px; border-radius: 14px; }
  .toc ol{ gap: 10px; }
  .legal :where(ul,ol){ margin-left: 1.25rem; }
}

/* ===== ≥ 1024px : 2-col grid with sticky ToC ===== */
@media (min-width: 1024px){
  .legal{ padding: clamp(22px, 3vw, 56px) clamp(18px, 3vw, 24px); }
  .legal-container{
    display: grid;
    grid-template-columns: 280px minmax(0,1fr);
    gap: clamp(16px, 2.4vw, 30px);
    align-items: start;
  }
  .toc{
    position: sticky;
    top: var(--header-offset);
    margin: 0;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(244,162,97,.35);
    box-shadow: var(--shadow);
  }
  .toc ol{
    display: grid;
    grid-auto-flow: row;
    gap: 6px;
    overflow: visible;                 /* no horizontal scroll on desktop */
    counter-reset: sec;
  }
  .toc li{
    display: grid;
    grid-template-columns: 3ch 1fr;
    align-items: start;
    column-gap: .5ch;
    min-width: 0;                      /* critical: allow shrinking */
    counter-increment: sec;
  }
  .toc li::before{
    content: counters(sec,".") ".";
    color: var(--accent);
    font-weight: 700;
    text-align: right;
  }
  .toc a{
    background: transparent;
    border-radius: 6px;
    border: none;
    padding: 0 0 4px;
    border-bottom: 1px dashed rgba(244,162,97,.35);
    white-space: normal;               /* allow wrapping */
    overflow-wrap: anywhere;           /* wrap long words/links */
    grid-column: 2;
    min-width: 0;
  }
  .toc a::before{ content: none; }     /* avoid double numbering */

  .legal-main{ grid-column: 2; min-width: 0; }
  .legal :where(ul,ol){ margin-left: 1.5rem; }
}

/* ===== Print ===== */
@media print{
  header, footer{ display: none !important; }
  .legal{ background:#fff !important; color:#000 !important; padding:0; }
  .legal-container{ display:block; max-width:100%; margin:0; }
  .toc{ break-inside: avoid; border:1px solid #000; background:#fff; box-shadow:none; }
  .table-wrapper{ border-color:#000; background:#fff; box-shadow:none; }
  .table thead th{ background:#fff; color:#000; border-bottom:1px solid #000; position: static; }
  .table tbody td{ border-bottom:1px solid #ddd; color:#000; }
  .legal a{ color:#000; text-decoration: underline; }
  .legal a::after{ content:" (" attr(href) ")"; font-size:.9em; }
  .back-top{ display:none; }
}