/* Legal pages (support, privacy, terms): one layout language, the owner-approved "C" direction.
   Support = a map by place. Privacy = choices first, reference tier after. Terms = the same
   reference-tier setting on one sheet. Tokens come from kit.css and shell.css only. */

body{background:var(--board)}
.wrap{max-width:1160px;margin:0 auto;padding-inline:var(--s4)}

.lp{
  --placew:124px;--gap:var(--s3);--dot:10px;
  max-width:1160px;margin:0 auto;padding:var(--s2) var(--s4) 64px;
}
.lp h1,.lp h2,.lp h3,.lp p,.lp ul,.lp ol{margin:0}
.lp ul{padding:0;list-style:none}
.lp p,.lp li{font-size:var(--t-body);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.lp b{color:var(--ink)}
.lp a{color:var(--link);text-underline-offset:3px}
.lp a:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.lp h1{font-size:var(--t-greet);line-height:1.15;letter-spacing:var(--h-track);color:var(--ink)}
.lp h2,.lp h3{font-size:var(--t-sect);line-height:1.3;letter-spacing:var(--h-track);color:var(--ink);text-wrap:balance}
.lp :is(section,li)[id]{scroll-margin-top:var(--s4)}

/* ── title band ─────────────────────────────────────────────── */
.lp-title{display:grid;gap:var(--s2);padding:var(--s5) 0 var(--s6)}
.lp .lp-meta{font-size:var(--t-label);line-height:1.5;color:var(--ink-3)}
.lp .lp-lede{max-width:62ch}
.lp .lp-side{display:grid;gap:var(--s2);align-content:start}

/* ── exits ──────────────────────────────────────────────────── */
.lp .lp-nav{display:flex;flex-wrap:wrap;column-gap:var(--s6);margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--hair)}
.lp .lp-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--t-body)}

/* ── bullets shared by reference lists ──────────────────────── */
.lp .dots li{position:relative;padding-left:var(--s4)}
.lp .dots li::before{content:"";position:absolute;left:2px;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
.lp .dots li+li,.lp .dots+p,.lp p+.dots,.lp p+p{margin-top:var(--s2)}
.lp .dots li.never::before{display:none}
.lp .never{padding:var(--s3) var(--s4);background:var(--surf-2);border-radius:var(--r-chip);color:var(--ink)}
.lp .dots li.never{padding-left:var(--s4)}
.lp :is(section,li)[id]:target>h2,.lp .fix:target>h3{text-decoration:underline;text-decoration-color:var(--butter);text-decoration-thickness:3px;text-underline-offset:5px}

/* ── SUPPORT: a map by place ────────────────────────────────── */
.lp-support .place{
  position:relative;display:grid;grid-template-columns:var(--placew) minmax(0,1fr);column-gap:var(--gap);
  padding:var(--s4) 0 var(--s6);border-top:1px solid var(--hair);
}
.lp-support .place>h2{position:relative;align-self:start;padding-left:calc(var(--dot) + var(--s2))}
/* station */
.lp-support .place>h2::after{content:"";position:absolute;left:0;top:.42em;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--board);border:2px solid var(--link)}
/* rail down to the next station */
.lp-support .place:first-of-type::before{content:"";position:absolute;left:calc(var(--dot) / 2 - 1px);top:calc(var(--s4) + .42em + var(--dot));bottom:calc(-1 * (var(--s4) + .42em));width:2px;background:var(--butter)}
.lp-support .fixes{display:grid;gap:var(--s5);align-content:start}
.lp-support .fix h3{line-height:1.3}
.lp-support .fix p{margin-top:var(--s1)}
/* signed-out "Write to us": shown by support.html only when nobody is signed in */
.lp-support .wtu{grid-column:1 / -1}
.lp-support .wtu form{display:grid;gap:var(--s4);margin-top:var(--s3);max-width:520px}
.lp-support .wtu-field{display:grid;gap:6px}
.lp-support .wtu-field label{font-weight:700;color:var(--ink)}
.lp-support .wtu :is(input,select,textarea){width:100%;min-height:44px;padding:10px var(--s3);border-radius:var(--r-in);border:1px solid var(--ink-3);background:var(--surf);color:var(--ink);font:inherit}
.lp-support .wtu textarea{min-height:120px;resize:vertical}
.lp-support .wtu :is(input,select,textarea):focus-visible{outline:2px solid var(--link);outline-offset:2px}
.lp-support .wtu [aria-invalid="true"]{border-color:var(--rose-ink)}
.lp-support .wtu-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lp-support .wtu .btn{justify-self:start}
.lp-support .wtu .wtu-status{min-height:1.6em;margin-top:var(--s2)}
.lp-support .wtu .wtu-status:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.lp-support .wtu .wtu-status.wtu-error{color:var(--rose-ink)}
.lp-support .lp-foot{margin-top:var(--s2);padding-top:var(--s4);border-top:1px solid var(--hair)}
.lp-support .lp-foot h2{font-size:var(--t-body);line-height:1.4}
.lp-support .lp-foot p{margin-top:var(--s1);font-size:var(--t-label);line-height:1.6;color:var(--ink-3);max-width:96ch}
.lp-support .lp-foot p a{color:inherit}
.lp-support .lp-nav{margin-top:var(--s2)}

/* ── PRIVACY: choices first, reference after ────────────────── */
.lp-privacy .tier>h2{margin-bottom:var(--s3)}
.lp-privacy .ctls{background:var(--surf);border-radius:var(--r-card);box-shadow:var(--card-elev);overflow:hidden}
.lp-privacy .ctls li{padding:var(--s4);font-size:var(--t-sect);line-height:1.4;color:var(--ink);border-top:1px solid var(--hair-soft)}
.lp-privacy .ctls li:first-child{border-top:0}
/* live state under a choice: two text lines and the link are always reserved, so the row never jumps */
.lp-privacy .ctl-state{margin-top:var(--s2);font-size:var(--t-label);line-height:1.5;color:var(--ink-3)}
.lp-privacy .ctl-text{display:block;min-height:3em}
.lp-privacy .ctl-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.lp-privacy .ctl-state:is(.is-loading,.is-error) .ctl-link{visibility:hidden}
.lp-privacy .ctl-state.is-error .ctl-text{color:var(--rose-ink)}
.lp-privacy .ctl-btn{min-height:44px;min-width:44px}
.lp-privacy .ctl-btn[hidden]{display:none}
.lp-privacy .ctl-link[hidden]{display:none}
.lp-privacy .ctl-state.is-loading .ctl-btn{visibility:hidden}
.lp-privacy .delete{margin-top:var(--s3);padding:var(--s4) var(--s4) var(--s5);background:var(--rose-soft);border-radius:var(--r-card)}
.lp-privacy .delete h2{color:var(--rose-ink)}
.lp-privacy .delete p{margin-top:var(--s2);color:var(--ink);max-width:62ch}
.lp-privacy .delete:target{box-shadow:0 0 0 3px var(--rose)}
.lp-privacy .ref{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--hair)}
.lp-privacy .ref-col+.ref-col,.lp-privacy .ref-col>section+section{margin-top:var(--s5)}
.lp-privacy .ref h2{margin-bottom:var(--s2)}
.lp-privacy .ref-col>section{break-inside:avoid}
.lp-privacy .ref p{max-width:62ch}
.lp-privacy .ref p.never{margin-top:var(--s3)}

/* ── TERMS: the reference setting, on one sheet ─────────────── */
.lp-terms .sheet{background:var(--surf);border-radius:var(--r-card);box-shadow:var(--card-elev);padding:var(--s5) var(--s4) var(--s2)}
.lp-terms .clause{padding-bottom:var(--s5);break-inside:avoid}
.lp-terms .clause h2{margin-bottom:var(--s2);break-after:avoid}

/* ── 640: wider gutters, wider place column ─────────────────── */
@media (min-width:640px){
  .wrap{padding-inline:var(--s6)}
  .lp{--placew:168px;--gap:var(--s6);padding-inline:var(--s6)}
  .lp-terms .sheet{padding:var(--s6) var(--s6) var(--s3)}
}

/* ── 700: privacy title in two columns, choices in a row ────── */
@media (min-width:700px){
  .lp-privacy .lp-title{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s7);align-items:end}
  .lp-privacy .ref-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s7);row-gap:var(--s6);align-items:start}
  .lp-privacy .ref-col+.ref-col{margin-top:0}
  .lp-privacy .ref-col-3{grid-column:1 / -1}
  .lp-terms .sheet-cols{columns:2;column-gap:var(--s7);column-rule:1px solid var(--hair)}
  .lp-terms #what-you-post{break-inside:auto}
}
@media (min-width:960px){
  .lp-privacy .ctls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp-privacy .ctls li{border-top:0;border-left:1px solid var(--hair-soft)}
  .lp-privacy .ctls li:first-child{border-left:0}
}
@media (min-width:1000px){
  .lp-terms .sheet-cols{columns:3}
  /* support desktop: the places run across the top, each fix hangs under its place */
  .lp-support{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,2fr);column-gap:var(--s7);align-content:start}
  .lp-support .lp-title{grid-column:1;grid-row:1 / span 3;align-self:start;padding-top:var(--s6)}
  .lp-support .place{display:block;grid-row:1;padding:var(--s6) 0 0;border-top:0}
  .lp-support .place:nth-of-type(1){grid-column:2}
  .lp-support .place:nth-of-type(2){grid-column:3}
  .lp-support .place::before{display:none}
  .lp-support .place>h2{padding:0 0 var(--s4)}
  .lp-support .place>h2{border-bottom:2px solid var(--butter)}
  .lp-support .place:first-of-type>h2{margin-right:calc(-1 * var(--s7))}
  .lp-support .place>h2::after{top:auto;bottom:calc(-1 * (var(--dot) / 2 + 1px));left:0}
  .lp-support .fixes{padding-top:var(--s5)}
  .lp-support .place:nth-of-type(2) .fixes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s6)}
  .lp-support .lp-nav{grid-column:2 / -1;grid-row:2}
  .lp-support .lp-foot{grid-column:2 / -1;grid-row:3}
}
@media (min-width:1024px){
  .lp-privacy .ref-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp-privacy .ref-col-3{grid-column:auto}
  .lp-privacy .ref-col+.ref-col{margin-top:0}
}