/* Wortknall's rule books: terms, privacy and account deletion.
   The same board-game box as the app: a sky blue tabletop, white printed cards
   with an ink outline and a cardboard edge, the four pawn colours. Built by
   tools/build_legal.mjs; edit that, not the pages. */
:root{
  color-scheme:only light;
  --table:#CFE2FF; --table-hi:#E3EEFF; --table-lo:#B3CEFA;
  --card:#FFFFFF; --card-2:#F3F7FE; --card-3:#E6EEFB;
  --ink:#1D1934; --ink-2:#48436A; --ink-3:#645F84;
  --line:rgba(29,25,52,.14); --line-2:rgba(29,25,52,.24);
  --sun:#FFCB2E; --sun-lo:#E7A900; --sun-soft:#FFF3C7;
  --red:#D6372C; --red-soft:#FFE3DF; --red-tx:#B82B23;
  --blue:#2F6BF0; --blue-soft:#DEE8FF; --blue-tx:#2459D6;
  --green:#15803F; --green-soft:#D9F4E4; --green-tx:#137A40;
  --display:'Bricolage Grotesque','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,Menlo,Consolas,monospace;
  --bw:2px;
  --lift:0 4px 0 var(--ink),0 9px 8px -5px rgba(29,25,52,.22),0 22px 30px -14px rgba(29,25,52,.34);
  --lift-sm:0 3px 0 var(--ink),0 7px 6px -4px rgba(29,25,52,.2);
  --gut:clamp(16px,4.6vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--display);font-optical-sizing:auto;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;background:var(--table);
  background-image:radial-gradient(rgba(29,25,52,.09) 1.2px,transparent 1.3px);background-size:22px 22px}
a{color:var(--blue-tx);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.wrap{max-width:820px;margin:0 auto;padding:18px var(--gut) 56px}

/* top: the brand and the language switch */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.brand svg{width:34px;height:34px;flex:none}
.langs{display:flex;padding:3px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--card);box-shadow:var(--lift-sm)}
.langs a{min-width:44px;min-height:36px;display:grid;place-items:center;padding:0 10px;border-radius:999px;font-size:14px;font-weight:800;color:var(--ink-2);text-decoration:none}
.langs a[aria-current="page"]{background:var(--ink);color:#fff}

/* the rule book */
.book{position:relative;background:var(--card);border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:var(--lift);padding:clamp(22px,5vw,48px) clamp(18px,5vw,52px) clamp(24px,5vw,44px)}
.kicker{display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:8px;background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-2deg)}
h1{margin:0;font-size:clamp(32px,6.4vw,50px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.stamp{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:5px 11px;border-radius:999px;border:1.5px dashed var(--line-2);
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-2)}
.lead{margin:18px 0 0;font-size:clamp(17px,2.3vw,19px);line-height:1.55;color:var(--ink)}

/* in short: the three things that matter, on a yellow card */
.short{margin:26px 0 6px;padding:18px 20px 16px;border-radius:16px;background:var(--sun-soft);border:var(--bw) solid var(--ink);box-shadow:var(--lift-sm)}
.short h2{margin:0 0 10px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;display:block}
.short ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.short li{position:relative;padding-left:32px;font-weight:600;line-height:1.45}
.short li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--ink);background:var(--sun) center/13px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4 5.6 10.4 11.6 3.8' fill='none' stroke='%231D1934' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* contents: numbered pawns */
.toc{margin:24px 0 4px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.toc a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 5px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--card-2);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:700}
.toc a b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);font-family:var(--mono);font-size:12.5px;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.toc a:hover{border-color:var(--ink);background:#fff}}

/* the sections */
section{scroll-margin-top:16px;padding-top:26px;margin-top:26px;border-top:var(--bw) dashed var(--line-2)}
section h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:clamp(21px,3vw,25px);line-height:1.2;font-weight:800;letter-spacing:-.01em}
.pawn{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:var(--bw) solid var(--ink);box-shadow:0 2px 0 var(--ink);
  font-family:var(--mono);font-size:15px;font-weight:700;color:#fff}
.p1{background:var(--blue)}.p2{background:var(--red)}.p3{background:var(--green)}.p4{background:var(--sun);color:var(--ink)}
section p{margin:0 0 12px}
section ul{margin:4px 0 14px;padding:0;list-style:none;display:grid;gap:8px}
section li{position:relative;padding-left:24px}
section li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:3px;background:var(--ink)}
strong{font-weight:800}
.fine{font-size:14.5px;color:var(--ink-2)}
.chip{display:inline-block;padding:1px 8px;border-radius:7px;background:var(--card-3);font-family:var(--mono);font-size:.88em;font-weight:600;white-space:nowrap}
.steps{counter-reset:s;display:grid;gap:10px;margin:6px 0 14px;padding:0;list-style:none}
.steps li{counter-increment:s;padding:12px 14px 12px 52px;border-radius:14px;background:var(--card-2);border:1.5px solid var(--line-2);position:relative}
.steps li::before{content:counter(s);position:absolute;left:12px;top:10px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700}

/* the deletion form (delete-account pages, driven by legal.js) */
.panel{margin:12px 0 4px;padding:18px;border-radius:16px;border:var(--bw) dashed var(--red);background:var(--red-soft)}
.panel[hidden]{display:none}
.panel p{margin:0 0 12px}
.panel label{display:block;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin:0 0 7px}
.at{display:flex;align-items:center;border:var(--bw) solid var(--ink);border-radius:12px;background:#fff;overflow:hidden}
.at i{font-style:normal;padding:0 2px 0 14px;font-size:16px;font-weight:800;color:var(--ink-2)}
.at input{flex:1;min-width:0;min-height:50px;padding:0 12px 0 2px;border:0;font:inherit;font-size:16px;font-weight:700;color:var(--ink);background:transparent}
.at input:focus{outline:none}
.msg{min-height:1.4em;margin:8px 0 0;font-size:14px;font-weight:700;color:var(--red-tx)}
.msg.good{color:var(--green-tx)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}

/* buttons: cardboard, pressed in on tap */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:var(--bw) solid var(--ink);border-radius:16px;
  background:var(--sun);color:var(--ink);font:inherit;font-size:16px;font-weight:800;text-decoration:none;box-shadow:0 4px 0 var(--ink);cursor:pointer;
  transition:transform .12s cubic-bezier(.23,1,.32,1),box-shadow .12s cubic-bezier(.23,1,.32,1)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.ghost{background:var(--card)}
.btn.red{background:var(--red);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 3px 0 var(--ink)}

/* the end: the other rule books and the way back */
.more{margin-top:34px;padding-top:26px;border-top:var(--bw) dashed var(--line-2)}
.more h2{margin:0 0 12px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 22px;padding:0;list-style:none}
.docs a{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border-radius:14px;border:var(--bw) solid var(--ink);background:var(--card-2);
  color:var(--ink);text-decoration:none;font-weight:800;box-shadow:var(--lift-sm)}
.docs a[aria-current="page"]{background:var(--ink);color:#fff;box-shadow:none}
.docs a span{font-size:13px;font-weight:600;color:var(--ink-2);display:block}
.docs a[aria-current="page"] span{color:#D8D4F0}
.docs i{flex:none;width:34px;height:34px;border-radius:10px;border:1.5px solid var(--ink);display:grid;place-items:center;font-style:normal;font-size:17px;background:#fff}
.foot{margin:28px 4px 0;text-align:center;font-size:13.5px;color:var(--ink-2)}
@media (max-width:520px){
  body{font-size:16px}
  .top{margin-bottom:14px}
  .brand span{display:none}
  .book{border-radius:18px}
  .toc a{font-size:14px}
  section h2{gap:10px}
  .pawn{width:32px;height:32px;font-size:14px}
  .row .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}