/* ==========================================================================
   Waiz Earn — legal and standalone document pages.
   Reading layout: one measured column, generous leading, real headings.
   ========================================================================== */

.legal { max-width: 780px; padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px); }
.legal h1 { font-size: calc(var(--fs-h1) * var(--text-scale)); margin-block: 12px 14px; }

.legal-meta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--subtle); font-size: calc(12.5px * var(--text-scale));
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
}
.legal-intro {
  color: var(--text-2); font-size: calc(16px * var(--text-scale));
  line-height: 1.65; margin-top: var(--sp-5);
}

.legal section {
  margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.legal section:first-of-type { border-top: 0; }
.legal h2 {
  font-size: calc(19px * var(--text-scale)); margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 10px;
}
.legal h2 .n {
  font-family: var(--font-num); font-size: 13px; font-weight: 700;
  color: var(--brand); flex: none;
}
:root:not([data-theme="light"]) .legal h2 .n { color: #8FB6FF; }
.legal h3 {
  font-size: calc(15px * var(--text-scale)); margin-top: var(--sp-5); margin-bottom: 8px;
}
.legal p, .legal li {
  color: var(--text-2); font-size: calc(14.5px * var(--text-scale)); line-height: 1.72;
}
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { margin: 12px 0 0; padding-left: 22px; }
.legal li + li { margin-top: 7px; }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
:root:not([data-theme="light"]) .legal a { color: #8FB6FF; }
.legal strong { color: var(--text); font-weight: 700; }

/* Data-inventory table. Scrolls inside itself so the page never scrolls sideways. */
.legal .table-wrap {
  margin-top: var(--sp-5); overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.legal table { width: 100%; border-collapse: collapse; min-width: 560px; }
.legal th, .legal td {
  text-align: left; padding: 11px 14px; vertical-align: top;
  font-size: calc(13.2px * var(--text-scale)); line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.legal th {
  color: var(--text); font-weight: 700; background: var(--surface-2);
  white-space: nowrap; position: sticky; top: 0;
}
.legal tr:last-child td { border-bottom: 0; }
.legal td { color: var(--muted); }
.legal td:first-child { color: var(--text-2); font-weight: 600; }

.callout {
  margin-top: var(--sp-5); padding: 14px 16px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-2); display: flex; gap: 11px;
}
.callout .ic { color: var(--brand); flex: none; margin-top: 2px; }
:root:not([data-theme="light"]) .callout .ic { color: #8FB6FF; }
.callout p { font-size: calc(13.6px * var(--text-scale)); }
.callout.is-warn { border-color: var(--warn-soft); background: var(--warn-soft); }
.callout.is-warn .ic { color: var(--warn); }

.legal-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  padding-bottom: var(--sp-5);
}
.legal-nav a { color: var(--muted); font-size: calc(13.2px * var(--text-scale)); }
.legal-nav a:hover { color: var(--text); }

.toc {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.toc h2 { font-size: calc(12px * var(--text-scale)); letter-spacing: .13em;
  text-transform: uppercase; color: var(--subtle); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--brand); text-decoration: underline; }

/* Reviews page (2026-10-21) */
.rv-sum{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:var(--sp-4)}
.rv-avg{font-size:44px;font-weight:800;line-height:1;color:var(--text)}
.rv-avg small{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--muted)}
.rv-avg small span{color:#E9A93B;letter-spacing:1px}
.rv-bars{flex:1;min-width:220px;display:grid;gap:6px}
.rv-bar{display:grid;grid-template-columns:34px 1fr 44px;gap:8px;align-items:center;font-size:13px;color:var(--text-2)}
.rv-bar i{display:block;height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.rv-bar i b{display:block;height:100%;background:#E9A93B}
.rv-bar span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.rv-filters{display:flex;gap:8px;flex-wrap:wrap;margin:var(--sp-4) 0}
.rv-filters a{padding:6px 12px;border-radius:99px;border:1px solid var(--line);color:var(--text-2);text-decoration:none;font-size:13px}
.rv-filters a[aria-current="page"]{background:var(--brand-soft);border-color:var(--brand-line);color:var(--text);font-weight:700}
.rv-list,.legal .rv-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.rv-item{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.rv-item .rv-stars{color:#E9A93B;letter-spacing:2px;font-size:15px}
.rv-item h3{margin:6px 0 4px;font-size:15px;color:var(--text)}
.rv-item p{margin:0;overflow-wrap:anywhere}
.rv-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:12px;color:var(--muted)}
.rv-label{padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--text-2);cursor:help}
.rv-pager{display:flex;gap:16px;margin-top:var(--sp-4)}
.rv-form{display:grid;gap:10px;max-width:560px;margin-top:var(--sp-4)}
.rv-form label{display:grid;gap:6px;font-size:13px;color:var(--text-2)}
.rv-form input,.rv-form textarea,.rv-form select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit}
.rv-pick{display:flex;gap:6px}
.rv-pick button{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:20px;cursor:pointer}
.rv-pick button.on{color:#E9A93B;border-color:#E9A93B}
.rv-pick button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rv-actions{display:flex;gap:8px;flex-wrap:wrap}
.rv-msg{margin:0;min-height:1.2em;font-size:13px;color:var(--text-2)}
.rv-msg.bad{color:var(--danger)}.rv-msg.ok{color:var(--ok)}
.rv-form [hidden],#rvWeb [hidden]{display:none!important}