/* ============================================================
   Legal pages (Terms & Conditions, Privacy Policy) — shared layout.
   Links AFTER assets/theme.css. Search bar, empty-state, badge all
   reuse theme.css primitives — only what's unique to these two pages
   lives here, since they share an identical reading layout.
   ============================================================ */

.legal-grid{display:flex; flex-direction:column;}
.col-main,.col-side{display:flex; flex-direction:column; min-width:0;}
@media (min-width:1025px){
  .legal-grid{display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start; padding:0 16px;}
  .toc-desktop{position:sticky; top:76px;}
  .toc-mobile{display:none;}
}
@media (max-width:1024px){ .toc-desktop{display:none;} }

/* ============ HERO ============ */
.legal-hero{
  margin:14px 16px 0; border-radius:20px; overflow:hidden; padding:22px 20px;
  background:radial-gradient(120% 100% at 100% 0%, rgba(20,123,255,0.2), transparent 55%), linear-gradient(160deg,#0a1a38 0%, #030914 75%);
  border:1px solid var(--line);
}
.legal-hero-eyebrow{display:flex; align-items:center; gap:6px; font-size:10px; color:var(--blue-br); font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px;}
.legal-hero h1{font-size:19px; font-weight:900; margin:0 0 6px;}
.legal-hero-sub{font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.5; margin:0 0 12px;}
.legal-updated{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted); font-weight:700; background:var(--bg2); padding:5px 11px; border-radius:999px;}
.legal-updated.pending{color:var(--gold); background:rgba(255,196,0,0.1);}
.legal-updated .msr{font-size:13px;}

/* ============ DRAFT BANNER ============ */
.draft-banner{display:flex; gap:12px; align-items:flex-start; margin:14px 16px 0; padding:16px; border-radius:16px; background:rgba(255,196,0,0.06); border:1px solid var(--gold-line);}
.draft-icon{width:36px; height:36px; border-radius:10px; flex-shrink:0; background:rgba(255,196,0,0.14); color:var(--gold); display:flex; align-items:center; justify-content:center;}
.draft-icon .msr{font-size:18px;}
.draft-title{font-size:12.5px; font-weight:800; color:var(--gold); margin-bottom:4px;}
.draft-desc{font-size:11px; color:var(--muted); font-weight:600; line-height:1.55;}
.draft-desc code{background:var(--bg2); padding:1px 5px; border-radius:5px; font-family:monospace; color:var(--white);}

/* ============ TOC ============ */
.toc-card{border-radius:14px; background:var(--card); border:1px solid var(--line); overflow:hidden;}
.toc-link{
  display:flex; align-items:center; gap:9px; width:100%; padding:11px 13px;
  /* Same missing-border-reset bug class already found in profile.php's
     .action-row and now legal.css's own .legal-nav-row — every .toc-link
     is a real <button> (needed for the click-to-scroll/toggle behaviour),
     and a <button> carries a default browser border on all four sides
     that only overriding border-top doesn't remove. */
  border:none;
  border-top:1px solid rgba(255,255,255,0.06); background:none; text-align:left;
  color:var(--muted); font:inherit; font-size:11.5px; font-weight:700; min-height:44px;
}
.toc-link:first-child{border-top:none;}
.toc-num{color:var(--blue-br); font-weight:900; flex-shrink:0;}

/* ============ SECTIONS ============ */
.legal-section{scroll-margin-top:80px; margin:0 16px 18px;}
.legal-section-num{font-size:9.5px; color:var(--blue-br); font-weight:800; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:5px;}
.legal-section h2{font-size:15px; font-weight:900; margin:0 0 10px;}
.legal-body{font-size:12.5px; color:var(--muted); font-weight:500; line-height:1.75;}
.legal-body p{margin:0 0 12px;}
.legal-body p:last-child{margin-bottom:0;}
.legal-body ul{margin:0 0 12px; padding-left:20px;}
.legal-body li{margin-bottom:6px;}
.legal-section.highlight{animation:legalHighlight 1.6s ease;}
@keyframes legalHighlight{0%{background:rgba(20,123,255,0.1); border-radius:14px;} 100%{background:transparent;}}

.legal-placeholder{border-radius:12px; background:rgba(255,196,0,0.06); border:1px dashed var(--gold-line); padding:14px;}
.legal-placeholder-tag{display:block; font-size:9.5px; font-weight:800; color:var(--gold); letter-spacing:0.5px; margin-bottom:6px;}
.legal-placeholder-note{font-size:11px; color:var(--muted); font-weight:600; line-height:1.5;}

/* ============ CONTACT / LEGAL NAV ============ */
.contact-card{border-radius:16px; background:var(--card); border:1px solid var(--line); padding:16px; margin:0 16px;}
.contact-title{font-size:13px; font-weight:800; margin-bottom:5px;}
.contact-desc{font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.5; margin-bottom:14px;}
.legal-nav-card{border-radius:14px; background:var(--card); border:1px solid var(--line); overflow:hidden; margin:0 16px;}
.legal-nav-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px;
  /* .legal-nav-row is used on both <a> (the other two links) and, for
     the current page, a real <button> (kept focusable + aria-current,
     not a plain non-interactive <span>, so a keyboard/screen-reader
     user tabbing through this list doesn't silently skip an item — see
     terms.php / privacy.php). A <button> carries a default browser
     border on all four sides that <a> never has; reset it first or
     only border-top below gets overridden, same class of bug already
     found and fixed in profile.php's .action-row. */
  border:none;
  border-top:1px solid rgba(255,255,255,0.06); color:inherit; text-decoration:none;
  font-size:12.5px; font-weight:700; min-height:48px; width:100%; background:none; font-family:inherit; text-align:left;
}
.legal-nav-row:first-child{border-top:none;}
.legal-nav-row.active{color:var(--blue-br);}
.legal-nav-row .msr{color:var(--muted); font-size:17px; flex-shrink:0;}