/* Privacy and Terms — the two documents nobody visits until they need to.
 *
 * Shared by web/templates/privacy.html and terms.html, which are
 * standalone documents like landing.html and login.html rather than views
 * inside the studio: they have to be readable signed-out (that is the
 * whole point of them) and they are linked from outside this app, by the
 * developer portals that require them.
 *
 * The tokens are carried here rather than pulled from studio.css, which
 * is the same choice landing.html makes and for the same reason — these
 * pages load none of the studio, so linking its stylesheet would mean
 * shipping the whole app's rules to read one page of prose. When the
 * palette changes in studio.css, it changes here too. See
 * static/studio.css for the reasoning behind the values.
 */

:root, :root[data-theme="light"]{
  color-scheme:light;
  --background:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F5F9;
  --text:#1B1B21; --text-secondary:#6A6A78;
  --border:rgba(27,27,33,.09); --border-2:rgba(27,27,33,.14);
  --accent:#6C5CE7; --link:#5A48D6;
  --page:linear-gradient(180deg,#FFFFFF,#FAFAFC);
}

/* Dark under BOTH the media query and the explicit attribute: theme.js
 * stamps data-theme when somebody chooses, and stamps nothing at all on
 * "system". A rule that only answered one of the two would leave the
 * toggle working in one direction. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --background:#121216; --surface:#17171C; --surface-2:#1E1E25;
    --text:#ECECF1; --text-secondary:#9C9CAB;
    --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16);
    --accent:#8172F0; --link:#A79AF6;
    --page:linear-gradient(180deg,#121216,#0E0E12);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --background:#121216; --surface:#17171C; --surface-2:#1E1E25;
  --text:#ECECF1; --text-secondary:#9C9CAB;
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16);
  --accent:#8172F0; --link:#A79AF6;
  --page:linear-gradient(180deg,#121216,#0E0E12);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font:400 16px/1.7 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
       Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* One gutter, set once on the wrapper, with padding-block for the
 * vertical so the shorthand can never quietly zero the sides on a phone. */
.legal{
  max-width:760px;
  margin:0 auto;
  padding-inline:20px;
  padding-block:32px 96px;
}

.legal header{
  display:flex; align-items:center; gap:12px;
  padding-block:8px 40px;
  border-bottom:1px solid var(--border);
  margin-bottom:40px;
}
.legal header a.brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none;
  font-family:Manrope, Inter, sans-serif; font-weight:800; font-size:19px;
}
/* The mark is a mask rather than an <img>: mark.svg is authored with
 * fill=currentColor, which renders black through an <img> and disappears
 * on the dark theme. */
.legal header .mark{
  width:26px; height:19px;
  background:var(--accent);
  -webkit-mask:url(/static/identity/mark.svg) center/contain no-repeat;
  mask:url(/static/identity/mark.svg) center/contain no-repeat;
}
.legal header .spacer{margin-left:auto}
.legal header .back{
  color:var(--text-secondary); text-decoration:none; font-size:14px;
}
.legal header .back:hover{color:var(--text)}

h1{
  font-family:Manrope, Inter, sans-serif;
  font-size:clamp(28px, 5vw, 38px); font-weight:800;
  line-height:1.2; margin:0 0 8px;
}
.updated{color:var(--text-secondary); font-size:14px; margin:0 0 40px}

h2{
  font-family:Manrope, Inter, sans-serif;
  font-size:20px; font-weight:700; line-height:1.3;
  margin:40px 0 12px;
}
h3{font-size:16px; font-weight:700; margin:24px 0 8px}

p{margin:0 0 16px}
ul{margin:0 0 16px; padding-left:22px}
li{margin:0 0 8px}

a{color:var(--link)}
a:hover{text-decoration:none}

strong{font-weight:600}

/* The one thing on these pages anybody is actually looking for. */
.contact{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 22px;
  margin:32px 0 0;
}
.contact p{margin:0}
.contact a{font-weight:600}

.legal footer{
  margin-top:64px; padding-top:24px;
  border-top:1px solid var(--border);
  color:var(--text-secondary); font-size:14px;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
}
.legal footer a{color:var(--text-secondary)}
.legal footer .spacer{margin-left:auto}

table{
  width:100%; border-collapse:collapse; margin:0 0 16px; font-size:15px;
}
th, td{
  text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--border); vertical-align:top;
}
th{font-weight:600; color:var(--text-secondary)}

/* A table is the one thing here allowed to be wider than the column. */
.scroll{overflow-x:auto}