/* ============================================================
   WrenchSync — shared styles for the legal pages.
   Text on these pages mirrors what ships inside the app
   (AppConfig.swift + SettingsView.swift) so the two stay in sync.

   Same theming contract as index.html: full light palette on bare
   :root, dark declared twice — once for prefers-color-scheme, once
   for [data-theme="dark"] so the switch wins either direction.
   ============================================================ */

:root{
  color-scheme:light;

  --brand-900:#073E52;
  --brand-800:#0A5C7A;
  --brand-700:#166E8F;
  --brand-600:#2E8CA8;
  --brand-400:#5CC4DE;

  --paper:#FFFFFF;
  --ink:#0C1B22;
  --ink-2:#33474F;
  --ink-3:#64787F;
  --line:#E2ECF0;
  --link:#166E8F;
  --link-h:#0A5C7A;
  --head-ink:#073E52;
  --tint:#EEF8FB;
  --tint-br:#B7E2EE;
  --pill-br:#B7E2EE;
  --hero:linear-gradient(160deg,#0A5C7A 0%,#166E8F 48%,#2E8CA8 100%);
  --btn-brand-bg:#0A5C7A;
  --btn-brand-bg-h:#166E8F;
  --outline:#B7E2EE;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0B1519;
    --ink:#E9F2F5;
    --ink-2:#A6BCC5;
    --ink-3:#7C949D;
    --line:rgba(255,255,255,.10);
    --link:#5CC4DE;
    --link-h:#8FDCEE;
    --head-ink:#8FDCEE;
    --tint:#10222A;
    --tint-br:rgba(93,196,222,.26);
    --pill-br:rgba(93,196,222,.34);
    --hero:linear-gradient(160deg,#062B39 0%,#0A5C7A 42%,#166E8F 100%);
    --btn-brand-bg:#1C6B8A;
    --btn-brand-bg-h:#2E8CA8;
    --outline:rgba(93,196,222,.34);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0B1519;
  --ink:#E9F2F5;
  --ink-2:#A6BCC5;
  --ink-3:#7C949D;
  --line:rgba(255,255,255,.10);
  --link:#5CC4DE;
  --link-h:#8FDCEE;
  --head-ink:#8FDCEE;
  --tint:#10222A;
  --tint-br:rgba(93,196,222,.26);
  --pill-br:rgba(93,196,222,.34);
  --hero:linear-gradient(160deg,#062B39 0%,#0A5C7A 42%,#166E8F 100%);
  --btn-brand-bg:#1C6B8A;
  --btn-brand-bg-h:#2E8CA8;
  --outline:rgba(93,196,222,.34);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.68;-webkit-font-smoothing:antialiased;
  transition:background-color .25s ease,color .25s ease;
}
a{color:var(--link)}
a:hover{color:var(--link-h)}

.wrap{width:100%;max-width:780px;margin-inline:auto;padding-inline:24px}

/* ---------- header ---------- */
.legal-top{
  background:var(--hero);
  color:#fff;padding:26px 0 56px;position:relative;overflow:hidden;
}
.legal-top::after{
  content:"";position:absolute;left:50%;top:-40%;width:700px;height:520px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.20),rgba(255,255,255,0));pointer-events:none;
}
.legal-top .wrap{position:relative;z-index:2}
.legal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.legal-brand{
  display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.03em;
}
.legal-brand:hover{color:#fff}
.brandtile{
  width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:28%;
  background:linear-gradient(to bottom,rgba(255,255,255,.30),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.55);
}
.brandtile svg{width:52%;height:52%;color:#fff}
.legal-top h1{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;
  font-size:clamp(30px,5vw,44px);letter-spacing:-.03em;line-height:1.1;margin:34px 0 0;
}
.legal-top .meta{margin-top:12px;font-size:14px;color:rgba(255,255,255,.82)}

/* ---------- theme switch ---------- */
.theme-toggle{
  display:inline-grid;place-items:center;flex:none;
  width:38px;height:38px;padding:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);
  color:#fff;transition:background .16s ease,transform .16s ease;
}
.theme-toggle:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none}
}

/* ---------- body ---------- */
main{padding:52px 0 40px}
main h2{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;
  font-size:19px;letter-spacing:-.02em;line-height:1.3;
  margin:38px 0 10px;color:var(--head-ink);
}
main h2:first-child{margin-top:0}
main p{margin:0 0 14px;font-size:15.5px;color:var(--ink-2)}
main ul{margin:0 0 16px;padding-left:20px}
main li{font-size:15.5px;color:var(--ink-2);margin-bottom:7px}
main strong{color:var(--ink);font-weight:600}

.callout{
  background:var(--tint);border:1px solid var(--tint-br);
  border-radius:16px;padding:20px 22px;margin:0 0 30px;
}
.callout p{margin:0;font-size:15px}
.callout p + p{margin-top:10px}

.legal-nav{
  display:flex;gap:10px;flex-wrap:wrap;margin:44px 0 0;
  padding-top:26px;border-top:1px solid var(--line);
}
.legal-nav a{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;font-size:14px;
  text-decoration:none;color:var(--link);
  border:1px solid var(--pill-br);border-radius:999px;padding:10px 18px;
  transition:background .15s;
}
.legal-nav a:hover{background:var(--tint)}


/* ---------- cookie table ---------- */
.table-wrap{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch}
table.ck{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
table.ck th,table.ck td{
  text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink-2);
}
table.ck th{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--head-ink);
  border-bottom:1px solid var(--pill-br);white-space:nowrap;
}
table.ck tbody tr:last-child td{border-bottom:0}
table.ck code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--tint);border:1px solid var(--tint-br);border-radius:6px;
  padding:2px 6px;color:var(--ink);white-space:nowrap;
}
table.ck .ls{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);margin-top:2px;
}

/* a callout that flags a caveat rather than reassuring */
.callout.warn{
  background:color-mix(in srgb, #E3A008 10%, var(--paper));
  border-color:color-mix(in srgb, #E3A008 38%, var(--paper));
}
@supports not (background: color-mix(in srgb, red 10%, blue)){
  .callout.warn{background:rgba(227,160,8,.10);border-color:rgba(227,160,8,.38)}
}

/* ---------- footer ---------- */
footer{background:#08222D;color:#7B959F;padding:34px 0;margin-top:44px;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#8FA9B3}

@media (max-width:560px){
  main h2{font-size:17.5px}
  main p,main li{font-size:15px}
  .theme-toggle{width:34px;height:34px}
}