/* Shared typographic article shell for Vercaa's 5 legal/policy pages
   (market/legal-*.php). Loaded alongside _tokens.css + _chrome.css by every
   one of the 5 pages -- exactly one copy of this CSS, never hand-duplicated
   per page. Every color below is one of this project's existing --mc-*/
   --elevation-*/--focus-ring custom properties (see _tokens.css) -- nothing
   here is a new hex literal, so light/dark both resolve automatically the
   same way every other market/*.php page already does. */

:root {
  --lg-max: 1160px;
  --lg-shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.05);
  --lg-shadow-md: 0 12px 32px -16px rgba(15, 17, 21, 0.18);
}

.lg-wrap { max-width: var(--lg-max); margin: 0 auto; padding: 0 24px; }

/* ---------- Hero ---------- */
.lg-hero { padding: 72px 0 40px; }
.lg-eyebrow {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--mc-radius-pill);
  background: var(--mc-purple-soft); color: var(--mc-purple); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px;
}
.lg-hero h1 {
  font-size: clamp(2rem, 4vw, 2.85rem); line-height: 1.14; letter-spacing: -0.02em; font-weight: 800;
  color: var(--mc-ink); margin: 0 0 16px; max-width: 720px;
}
.lg-hero-intro { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; color: var(--mc-text-muted); max-width: 680px; margin: 0 0 14px; }
.lg-hero-intro a { color: var(--mc-purple); font-weight: 650; }
.lg-hero-intro a:hover { text-decoration: underline; }
.lg-updated { font-size: 0.86rem; color: var(--mc-text-muted); margin: 0 0 28px; font-weight: 600; }
.lg-updated time { color: var(--mc-text); }

.lg-doc-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.lg-doc-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: var(--mc-radius-pill);
  border: 1px solid var(--mc-border); background: var(--mc-bg); color: var(--mc-text); font-size: 0.86rem; font-weight: 650;
  transition: border-color var(--mc-duration) var(--mc-ease), background var(--mc-duration) var(--mc-ease), color var(--mc-duration) var(--mc-ease), transform var(--mc-duration) var(--mc-ease);
  cursor: pointer;
}
.lg-doc-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.lg-doc-pill:hover { border-color: var(--mc-purple); color: var(--mc-purple); transform: translateY(-1px); }
.lg-doc-pill-active { background: var(--mc-purple); border-color: var(--mc-purple); color: #fff; }
.lg-doc-pill-active:hover { color: #fff; transform: none; }
.lg-doc-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Shell: TOC + article ---------- */
.lg-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 96px; }

.lg-toc-heading { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mc-text-muted); margin: 0 0 12px; }
.lg-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-toc-list a {
  display: block; padding: 7px 10px; border-radius: var(--rounding-md); font-size: 0.88rem; color: var(--mc-text-muted); font-weight: 550;
  border-left: 2px solid transparent; transition: color var(--mc-duration) var(--mc-ease), background var(--mc-duration) var(--mc-ease), border-color var(--mc-duration) var(--mc-ease);
}
.lg-toc-list a:hover { color: var(--mc-ink); background: var(--mc-bg-muted); }
.lg-toc-list a.lg-toc-active { color: var(--mc-purple); border-left-color: var(--mc-purple); background: var(--mc-purple-soft); font-weight: 650; }

.lg-toc-desktop { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 8px; }
.lg-toc-mobile { display: none; }

@media (max-width: 900px) {
  /* minmax(0, 1fr), not a bare 1fr -- a bare 1fr's implicit min track size is "auto" (content-
     based), which let this single mobile column refuse to shrink below its widest unwrapped text
     (the TOC link labels) and overflow past the viewport. The desktop rule above already avoids
     this correctly with its own minmax(0, 1fr) second column; confirmed live (2026-08-13) this
     mobile rule needed the same explicit 0 minimum. */
  .lg-shell { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lg-toc-desktop { display: none; }
  .lg-toc-mobile {
    display: block; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-lg); background: var(--mc-bg);
    padding: 4px 18px; box-shadow: var(--lg-shadow-sm);
    /* Matches the sitewide .faq-item accordion pattern (market/domains.php) exactly: native
       <details> closed-state content should be non-rendered per spec, but this clip is kept as
       the same real safety net that pattern already relies on -- confirmed live (2026-08-13) that
       .faq-a's own closed-state box is laid out full-height/width and only invisible because its
       *container* clips it, not because the browser actually removes it from layout. Without this,
       the closed .lg-toc-list here visibly bled outside the viewport at narrow widths. */
    overflow: hidden;
  }
  .lg-toc-mobile summary {
    list-style: none; cursor: pointer; padding: 14px 0; display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; font-size: 0.95rem; color: var(--mc-ink);
  }
  .lg-toc-mobile summary::-webkit-details-marker { display: none; }
  .lg-toc-mobile summary svg { width: 18px; height: 18px; color: var(--mc-text-muted); transition: transform var(--mc-duration) var(--mc-ease); }
  .lg-toc-mobile[open] summary svg { transform: rotate(180deg); }
  .lg-toc-mobile .lg-toc-list { padding-bottom: 14px; border-top: 1px solid var(--mc-border-soft); padding-top: 10px; }
}

/* ---------- Article typography ---------- */
.lg-article { max-width: 720px; color: var(--mc-text); font-size: 1rem; line-height: 1.75; }
.lg-article section { margin-bottom: 44px; scroll-margin-top: 96px; }
.lg-article section:last-child { margin-bottom: 0; }
.lg-article h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: var(--mc-ink); margin: 0 0 14px; }
.lg-article h3 { font-size: 1.08rem; font-weight: 700; color: var(--mc-ink); margin: 24px 0 10px; }
.lg-article p { margin: 0 0 14px; }
.lg-article p:last-child { margin-bottom: 0; }
.lg-article ul, .lg-article ol { margin: 0 0 14px; padding-left: 1.35em; }
.lg-article li { margin-bottom: 8px; }
.lg-article li:last-child { margin-bottom: 0; }
.lg-article li > ul, .lg-article li > ol { margin-top: 8px; }
.lg-article a { color: var(--mc-purple); font-weight: 650; text-decoration: none; }
.lg-article a:hover { text-decoration: underline; }
.lg-article strong { color: var(--mc-ink); font-weight: 700; }
.lg-article code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; background: var(--mc-bg-muted); border: 1px solid var(--mc-border-soft); border-radius: 5px; padding: 2px 6px; }

.lg-article table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 0.92rem; }
.lg-article th, .lg-article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mc-border-soft); vertical-align: top; }
.lg-article th { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mc-text-muted); }
.lg-article .lg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 16px; }
.lg-article .lg-table-wrap table { margin: 0; min-width: 480px; }

/* ---------- Callouts ---------- */
.lg-callout { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--mc-radius-lg); margin: 4px 0 20px; border: 1px solid var(--mc-border); background: var(--mc-bg-muted); }
.lg-callout svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.lg-callout p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--mc-text); }
.lg-callout p + p { margin-top: 8px; }

.lg-callout-info { background: var(--mc-purple-soft); border-color: transparent; }
.lg-callout-info svg { color: var(--mc-purple); }

.lg-todo-notice { background: var(--mc-orange-soft); border: 1px solid transparent; }
.lg-todo-notice svg { color: var(--mc-orange); }

.lg-todo {
  display: inline; font-weight: 700; color: var(--mc-orange); background: var(--mc-orange-soft);
  border: 1px dashed var(--mc-orange); border-radius: 6px; padding: 1px 8px; white-space: normal;
}

/* ---------- Closing CTA ---------- */
.lg-cta-section { padding-bottom: 96px; }
.lg-cta-band {
  border-radius: var(--mc-radius-xl); padding: 52px 40px; text-align: center;
  background: linear-gradient(135deg, var(--mc-ink) 0%, #2a1a3d 55%, var(--mc-ink) 100%);
  position: relative; overflow: hidden;
}
:root[data-theme="dark"] .lg-cta-band { background: linear-gradient(135deg, #05070a 0%, #1a1026 55%, #05070a 100%); }
.lg-cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 260px at 16% 0%, rgba(168, 63, 255, 0.3), transparent 65%), radial-gradient(360px 240px at 88% 100%, rgba(59, 130, 246, 0.2), transparent 65%);
}
.lg-cta-band * { position: relative; z-index: 1; }
.lg-cta-band h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; }
.lg-cta-band p { color: rgba(255, 255, 255, 0.72); font-size: 0.97rem; margin: 0 0 26px; max-width: 480px; margin-inline: auto; }
.lg-cta-buttons { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.lg-btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 0.95rem; padding: 13px 26px;
  border-radius: var(--mc-radius-pill); border: 1px solid transparent; cursor: pointer;
  transition: transform var(--mc-duration) var(--mc-ease), background var(--mc-duration) var(--mc-ease), box-shadow var(--mc-duration) var(--mc-ease), border-color var(--mc-duration) var(--mc-ease);
}
.lg-btn-primary { background: var(--mc-purple); color: #fff; box-shadow: 0 10px 24px -10px rgba(168, 63, 255, 0.55); }
.lg-btn-primary:hover { background: var(--mc-purple-dark); transform: translateY(-2px); }
.lg-btn-ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.lg-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); }
.lg-btn:focus-visible { outline: 2px solid var(--mc-purple); outline-offset: 3px; }

@media (max-width: 640px) {
  .lg-cta-band { padding: 40px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-doc-pill, .lg-btn, .lg-toc-mobile summary svg { transition: none !important; }
}