/* Shared by every page in legal-site.
   Tokens copied 1:1 from BitzuTokens in LearnIT/lib/app/theme/app_theme.dart;
   components mirror Eyebrow, BzTag, BzIconTile and BzListTile in bitzu_widgets.dart. */
:root{
  --ink:#0A0E1A; --ink-soft:#1A1C18; --muted:#43483E; --subtle:#73796C;
  --surface:#FFFFFF; --surface-low:#F4F5F2; --hairline:#ECEEE7; --outline:#D6DAD2;
  --blue:#1F8BFF; --blue-dark:#0E6FD9; --blue-wash:rgba(31,139,255,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#F6F7F4; --ink-soft:#E2E4DE; --muted:#B7BCAE; --subtle:#8E9385;
    --surface:#0E1310; --surface-low:#1C2419; --hairline:#2E3C28; --outline:#3E5036;
    --blue-dark:#00E5FF;
  }
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--surface);color:var(--ink-soft);
  font-size:15px;line-height:1.65;padding:0 20px;
}
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}
strong{color:var(--ink)}

/* ---- header (AppBar: surface + hairline bottom) ---- */
.top{margin:0 -20px;padding:0 20px;border-bottom:1px solid var(--hairline)}
.top-in{max-width:1080px;height:64px;margin:0 auto;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.brand img{width:28px;height:28px;border-radius:8px;display:block}
.docs{display:flex;gap:24px}
.docs a{font-size:15px;font-weight:700;color:var(--subtle);text-decoration:none}
.docs a:hover,.docs a[aria-current="page"]{color:var(--ink)}
.langs{display:flex;gap:8px;margin-left:auto}
.langs button{
  font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;
  height:36px;min-width:44px;padding:0 14px;border-radius:12px;
  border:1px solid var(--hairline);background:var(--surface);color:var(--muted);
}
.langs button[aria-pressed="true"]{border-color:var(--blue);background:rgba(31,139,255,.08);color:var(--blue)}
.langs .short{display:none}

/* Four nav links plus the long language labels overflow below ~920px. */
@media (max-width:919px){
  .top-in{gap:20px}
  .docs{gap:16px}
  .langs .long{display:none}
  .langs .short{display:inline}
}

/* ---- layout ---- */
.layout{max-width:720px;margin:0 auto;padding:48px 0 64px}
.toc{display:none}
@media (min-width:960px){
  html.js .layout{max-width:1080px;display:grid;grid-template-columns:232px minmax(0,1fr);gap:64px;align-items:start}
  html.js .toc{display:block;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto}
  .doc{max-width:720px}
}
.toc-title{padding:0 12px 10px}
.toc ol,.toc-m ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc li,.toc-m li{margin:0}
.toc a,.toc-m a{display:block;padding:8px 12px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.35;color:var(--subtle);text-decoration:none}
.toc a:hover,.toc-m a:hover{color:var(--ink)}
.toc a[aria-current="true"]{background:var(--surface-low);color:var(--ink);font-weight:700}

/* Mobile table of contents: a BzListTile that expands. */
.toc-m{display:none;margin-top:20px;border:1px solid var(--hairline);border-radius:16px}
@media (max-width:959px){ html.js .toc-m{display:block} }
.toc-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m .label{flex:1;min-width:0}
.toc-m .label b{display:block;font-size:15px;font-weight:700;line-height:1.25;color:var(--ink)}
.toc-m .label small{display:block;margin-top:4px;font-size:13px;font-weight:600;line-height:1.3;color:var(--subtle)}
.toc-m .chev{width:20px;height:20px;flex:none;color:var(--subtle);transition:transform .2s}
.toc-m[open] .chev{transform:rotate(180deg)}
.toc-m ol{padding:0 8px 8px}
.tile{width:40px;height:40px;flex:none;border-radius:12px;background:var(--blue-wash);color:var(--blue);display:flex;align-items:center;justify-content:center}
.tile svg{width:20px;height:20px}

/* ---- document ---- */
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.4px;line-height:1.3;text-transform:uppercase;color:var(--subtle)}
h1{margin-top:8px;font-size:32px;font-weight:800;letter-spacing:-.7px;line-height:1.15;color:var(--ink);text-wrap:balance}
.meta{margin-top:16px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:13px;line-height:1.5;color:var(--subtle)}
.tag{padding:5px 10px 6px;border:1.5px solid var(--outline);border-radius:8px;font-size:12.5px;font-weight:800;line-height:1.1;color:var(--muted)}
p,ul,ol{margin-top:12px}
.meta + p{margin-top:24px}
ul,ol{padding-left:20px}
li{margin:4px 0}
li::marker{color:var(--subtle)}
h2{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--hairline);
  display:flex;align-items:center;gap:12px;
  font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.3;color:var(--ink);
  scroll-margin-top:16px;
}
h2 .num{flex:none;width:32px;height:32px;border-radius:8px;background:var(--blue-wash);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;letter-spacing:0}
h3{margin-top:20px;font-size:15px;font-weight:700;line-height:1.4;color:var(--ink)}
h3 + p,h3 + ul{margin-top:4px}

/* Placeholders to fill before publishing: BzTag warn. */
.fill{background:#FFC800;color:#3D2900;font-weight:800;border-radius:8px;padding:1px 6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

.note{
  position:relative;margin-top:16px;padding:16px 16px 16px 68px;min-height:74px;
  border:1px solid var(--hairline);border-radius:16px;
  font-size:13px;line-height:1.55;color:var(--muted);
}
.note::before{
  content:"";position:absolute;left:16px;top:16px;width:40px;height:40px;border-radius:12px;
  background:var(--blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/20px no-repeat;
}

.tablewrap{margin-top:16px;border:1px solid var(--hairline);border-radius:16px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px;line-height:1.45}
th{text-align:left;padding:12px 16px;background:var(--surface-low);border-bottom:1px solid var(--hairline);
  font-size:11px;font-weight:800;letter-spacing:1.4px;line-height:1.3;text-transform:uppercase;color:var(--subtle)}
td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--hairline);color:var(--muted)}
td:first-child{font-weight:700;color:var(--ink)}
tr:last-child td{border-bottom:0}

footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
  font-size:13px;line-height:1.5;color:var(--subtle)}
footer a{font-weight:700;color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}

/* ---- phones ---- */
@media (max-width:719px){
  .top-in{height:56px}
  .docs{display:none}
  .langs{gap:6px}
  .langs button{padding:0 12px}
  .langs .long{display:none}
  .langs .short{display:inline}
  .layout{padding:24px 0 48px}
  h1{font-size:24px;letter-spacing:-.5px}
  .meta{margin-top:12px}
  .meta + p{margin-top:20px}
  h2{margin-top:32px;padding-top:20px}
  footer{margin-top:48px;flex-direction:column}
}

/* Tables become one card per row on narrow screens (labels come from legal.js). */
@media (max-width:640px){
  html.js .tablewrap{border:0;border-radius:0;overflow:visible}
  html.js table{min-width:0}
  html.js table,html.js tbody,html.js tr,html.js td{display:block}
  html.js thead{display:none}
  html.js tr{border:1px solid var(--hairline);border-radius:16px;padding:14px 16px}
  html.js tr + tr{margin-top:8px}
  html.js td{padding:0;border:0}
  html.js td:first-child{font-size:15px;line-height:1.3}
  html.js td + td{margin-top:6px}
  html.js td + td::before{content:attr(data-label);margin-right:8px;
    font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--subtle)}
}

/* Without JS both languages stay visible rather than nothing. */
html.js [data-lang]:not(.on){display:none}
html:not(.js) .docs [data-lang="en"]::before{content:" / "}