/* Legal pages (Prompt 17 Part A): Terms, Privacy, Cookie Policy. One layout (src/legal.njk), copy in _data/legal.json.
   Figma desktop 1518:51955 / 1518:52281 / 1518:52614 (1440), tablet 2301:99223 / 2301:99499 / 2301:99782 (744),
   phone 2302:30267 / 2302:30411 / 2302:30562 (390, app view). Phone text styles come from tokens.css (the type scale switches under 600). */
.legal{
  --legal-toc-w: 280px;            /* not a Figma token yet: desktop contents column */
  --legal-content-w: 740px;        /* not a Figma token yet: desktop content column */
  --legal-offset: 112px;           /* not a Figma token yet: room for the fixed (scrolled) Navbar when jumping to a section */
  --legal-toc-mark: 2px;           /* not a Figma token yet: active contents item marker (scroll-spy is not drawn in Figma) */
  --legal-col-cat: 140px;          /* not a Figma token yet: cookie table Category column (desktop) */
  --legal-col-off: 160px;          /* not a Figma token yet: cookie table "Can you turn it off?" column (desktop) */
  max-width:1440px;margin:0 auto;box-sizing:border-box}

/* Header (Figma 1518:51999): 64 top (under the 120 Navbar), 112 sides, 48 bottom, 16 between */
.legal__header{display:flex;flex-direction:column;gap:var(--space-16);padding:calc(var(--nav-h,120px) + var(--space-64)) var(--space-112) var(--space-48)}
.legal__eyebrow{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.legal__title{margin:0;font:var(--text-6xl);text-transform:uppercase;color:var(--text-primary);overflow-wrap:anywhere}
.legal__updated{margin:0;font:var(--text-base);color:var(--text-secondary)}   /* Figma text/muted; readable text uses text/secondary (standing rule) */

/* Body (Figma 1518:52003): contents 280 + 96 gap + content 740; 112 sides, 112 bottom */
.legal__body{display:flex;align-items:flex-start;gap:var(--space-96);padding:0 var(--space-112) var(--space-112)}

/* On this page (contents) */
.legal-toc{flex:none;width:var(--legal-toc-w);position:sticky;top:var(--legal-offset);display:flex;flex-direction:column;gap:var(--space-12);font:var(--text-sm)}
.legal-toc__label{margin:0;color:var(--text-secondary)}
.legal-toc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-12)}
.legal-toc__item{position:relative;display:flex;align-items:flex-start;gap:var(--space-10);padding:var(--space-2) 0;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-sm)}
.legal-toc__num{flex:none;color:var(--text-secondary)}   /* Figma text/muted; numbers are readable text */
.legal-toc__item:hover{color:var(--text-primary)}
.legal-toc__item:hover .legal-toc__text{text-decoration:underline;text-underline-offset:2px}
.legal-toc__item:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}
/* Active item (scroll-spy, desktop only; not drawn: Tab item selected = text/primary, semibold, accent marker) */
.legal-toc__item[aria-current="true"],.legal-toc__item[aria-current="true"] .legal-toc__num{color:var(--text-primary)}
.legal-toc__item[aria-current="true"]{font-weight:600}
.legal-toc__item[aria-current="true"]::before{content:"";position:absolute;left:calc(-1 * var(--space-12));top:var(--space-4);bottom:var(--space-4);width:var(--legal-toc-mark);border-radius:var(--radius-full);background:var(--accent-default)}

/* Content: sections 40 apart, each with a border/default rule 40 below the text */
.legal__content{flex:0 1 var(--legal-content-w);min-width:0;display:flex;flex-direction:column;gap:var(--space-40)}
.legal-section{display:flex;flex-direction:column;gap:14px;padding-bottom:var(--space-40);border-bottom:1px solid var(--border-default);scroll-margin-top:var(--legal-offset)}   /* 14: not a Figma token yet (section gap) */
.legal-section__title{margin:0;font:var(--text-2xl);color:var(--text-primary)}
.legal-section__body{margin:0;font:var(--text-base);color:var(--text-secondary)}
.legal-section__note{margin:0;font:var(--text-base);color:var(--text-secondary)}   /* Figma text/muted; readable text uses text/secondary (standing rule) */
.legal-section__action{margin:0}
.legal-section__link{appearance:none;background:none;border:0;padding:0;font:var(--text-base);color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:var(--radius-sm)}
.legal-section__link:hover{color:var(--text-link-action)}
.legal-section__link:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}

/* Cookie table (Figma 1518:52696): border/default, radius 12; head row card/background/default; rows 14/20 padding, 16 gap */
.legal-table{margin-top:var(--space-0)}
.legal-table__grid{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border-default);border-radius:var(--radius-md-lg);overflow:hidden;font:var(--text-sm);color:var(--text-primary);text-align:left}
.legal-table__grid th,.legal-table__grid td{padding:14px var(--space-8);vertical-align:top;font-weight:400}   /* 14: not a Figma token yet (row padding) */
.legal-table__grid :is(th,td):first-child{padding-left:var(--space-20);width:var(--legal-col-cat)}
.legal-table__grid :is(th,td):last-child{padding-right:var(--space-20);width:var(--legal-col-off)}
.legal-table__grid thead th{background:var(--card-bg-default);color:var(--text-secondary);white-space:nowrap}
.legal-table__grid tbody :is(th,td){border-top:1px solid var(--border-default)}
.legal-table__list{display:none}

/* 1024–1279: no frame drawn; narrower gutters, contents column 240 */
@media (min-width:1024px) and (max-width:1279px){
  .legal{--legal-toc-w:240px}
  .legal__header{padding-inline:var(--space-48)}
  .legal__body{gap:var(--space-48);padding-inline:var(--space-48)}
}

/* Tablet (600–1023, Figma 744): header 40 / 32 / 24, 12 between, H1 Desktop/05; contents card (two columns) → content 680 */
@media (max-width:1023px){
  .legal{--legal-offset:96px}   /* not a Figma token yet: tablet Navbar (scrolled) + breathing room */
  .legal__header{gap:var(--space-12);padding:calc(var(--nav-h,120px) + var(--space-40)) var(--space-32) var(--space-24)}
  .legal__title{font:var(--text-5xl)}
  .legal__body{flex-direction:column;align-items:stretch;gap:var(--space-32);padding:0 var(--space-32) var(--space-64)}
  .legal-toc{position:static;width:auto;box-sizing:border-box;padding:var(--space-20);border:1px solid var(--border-subtle);border-radius:var(--radius-md-lg)}
  .legal-toc__list{gap:0}
  .legal-toc__list--split{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--legal-toc-rows),auto);column-gap:var(--space-24)}
  .legal-toc__item{padding:var(--space-6) 0;color:var(--text-primary)}
  .legal-toc__item[aria-current="true"]{font-weight:400}
  .legal-toc__item[aria-current="true"]::before{content:none}
  .legal__content{flex:none}
  /* Tablet table (Figma 2301:99849): border/subtle, head row surface/selected + xs semibold, 12 / 16 padding, columns 120 / fill / 130 */
  .legal-table__grid{border-color:var(--border-subtle)}
  .legal-table__grid th,.legal-table__grid td{padding:var(--space-12) var(--space-8)}
  .legal-table__grid :is(th,td):first-child{padding-left:var(--space-16);width:120px}   /* not a Figma token yet */
  .legal-table__grid :is(th,td):last-child{padding-right:var(--space-16);width:130px}   /* not a Figma token yet */
  .legal-table__grid thead th{background:var(--surface-selected);color:var(--text-primary);font:var(--text-xs-semibold)}
  .legal-table__grid tbody :is(th,td){border-top-color:var(--border-subtle)}
}

/* Phone (<600, Figma 390): app view. Header 24 / 16 / 20, 8 between; contents card one column (13/18, 16 padding, 4 gap);
   sections 32 apart, 10 inside, 32 rule; the table becomes stacked rows */
@media (max-width:599px){
  .legal{--legal-offset:72px}   /* not a Figma token yet: App / Header 56 + 16 */
  .legal__header{gap:var(--space-8);padding:var(--space-24) var(--space-16) var(--space-20)}
  .legal__title{font:var(--text-5xl)}
  .legal__body{gap:28px;padding:0 var(--space-16) var(--space-32)}   /* 28: Figma Body gap */
  .legal-toc{gap:var(--space-4);padding:var(--space-16)}
  .legal-toc__list,.legal-toc__list--split{display:flex;flex-direction:column;gap:var(--space-4)}
  .legal-toc__item{gap:var(--space-8)}
  .legal__content{gap:var(--space-32)}
  .legal-section{gap:var(--space-10);padding-bottom:var(--space-32)}
  .legal-table__grid{display:none}
  .legal-table__list{display:block;list-style:none;margin:var(--space-0);padding:0;border:1px solid var(--border-subtle);border-radius:var(--radius-md-lg);overflow:hidden}
  .legal-table__row{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-12) var(--space-16)}
  .legal-table__row+.legal-table__row{border-top:1px solid var(--border-subtle)}
  .legal-table__name{margin:0;font:var(--text-row-title);color:var(--text-primary)}
  .legal-table__text{margin:0;font:var(--text-sm);color:var(--text-secondary)}
}

@media (prefers-reduced-motion:no-preference){html:has(.legal){scroll-behavior:smooth}}
.legal-section__title:focus,.legal-section__title:focus-visible{outline:0;box-shadow:none}   /* focused by script (tabindex -1) after a contents jump; not a control */