/* =========================================================
   CYBERDOLL — legal pages
   (loads after style.css + shop.css)
   ========================================================= */

.page-legal .nav { background: rgba(10, 10, 11, .95); }
.lg { padding-top: var(--header-h); background: var(--paper-2); }

.lg-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 9000; pointer-events: none; }
.lg-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--hotpink), var(--ice)); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- head ---------- */
.lg-head { padding: clamp(40px, 6vw, 70px) var(--gutter) 0; }
.lg-folders { display: flex; gap: 6px; }
.lg-folders a {
  position: relative;
  padding: 10px 18px 8px;
  font-family: var(--f-pixel); font-size: 11px;
  background: #d8d5cf;
  border: 2px solid var(--ink); border-bottom: 0;
  border-radius: 8px 8px 0 0;
  transition: transform .25s var(--ease), background .2s;
}
.lg-folders a::before { content: "▤ "; color: var(--red); }
.lg-folders a:hover { transform: translateY(-3px); background: var(--pink); }
.lg-folders a[aria-current="page"] { background: #fbfaf6; transform: none; z-index: 1; margin-bottom: -2px; padding-bottom: 10px; }
.lg-head__in {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px);
  background: #fbfaf6;
  border: 2px solid var(--ink);
}
.lg-head .kicker { color: var(--red); margin-bottom: 12px; }
.lg-title { font-family: "Playfair Display", serif; font-weight: 900; font-style: italic; font-size: clamp(54px, 9vw, 150px); line-height: .9; letter-spacing: -.02em; }
.lg-title em { font-style: normal; font-family: var(--f-display); font-weight: 400; color: var(--hotpink); -webkit-text-stroke: 2px var(--ink); }
.lg-lead { margin-top: 16px; max-width: 560px; font-size: 14px; }

/* ---------- body ---------- */
.lg-wrap {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(30px, 5vw, 60px) var(--gutter) clamp(70px, 9vw, 120px);
  align-items: start;
}
.lg-toc { position: sticky; top: calc(var(--header-h) + 30px); }
.lg-toc p { font-family: var(--f-pixel); font-size: 10px; margin-bottom: 12px; opacity: .6; }
.lg-toc ol { display: grid; gap: 2px; border-left: 2px solid rgba(10, 10, 11, .15); }
.lg-toc a { display: flex; gap: 10px; padding: 7px 12px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13px; transition: background .2s, border-color .2s, padding .3s var(--ease); }
.lg-toc a i { font-style: normal; font-family: var(--f-pixel); font-size: 9px; color: var(--red); padding-top: 3px; }
.lg-toc a:hover { background: rgba(255, 169, 207, .4); }
.lg-toc a.is-on { border-left-color: var(--hotpink); background: var(--white); padding-left: 18px; font-weight: 700; }

.lg-doc {
  max-width: 760px;
  padding: clamp(24px, 4vw, 50px);
  background: #fbfaf6;
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  /* ruled notebook paper */
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(159, 196, 232, .35) 31px 32px);
  background-position: 0 14px;
  counter-reset: sec;
}
.lg-doc section { padding: 10px 0 26px; scroll-margin-top: calc(var(--header-h) + 30px); }
.lg-doc h2 { counter-increment: sec; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1; text-transform: uppercase; margin-bottom: 14px; scroll-margin-top: calc(var(--header-h) + 30px); }
.lg-doc h2::before { content: counter(sec, decimal-leading-zero) " "; font-family: var(--f-pixel); font-size: 12px; color: var(--red); vertical-align: middle; }
.lg-doc p, .lg-doc li { font-size: 15px; line-height: 1.75; }
.lg-doc p + p, .lg-doc p + table, .lg-doc table + p { margin-top: 14px; }
.lg-doc b { background: linear-gradient(transparent 55%, rgba(255, 94, 168, .45) 55%); }
.lg-doc a { color: var(--red); border-bottom: 1.5px solid currentColor; font-weight: 700; }
.lg-doc a:hover { color: var(--hotpink); }
.lg-list { display: grid; gap: 6px; margin-top: 10px; }
.lg-list li { position: relative; padding-left: 24px; }
.lg-list li::before { content: "♡"; position: absolute; left: 0; color: var(--hotpink); }

.lg-tldr {
  position: relative;
  margin: 0 0 30px;
  padding: 22px 22px 20px;
  background: #ffe36e;
  border: 2px solid var(--ink);
  transform: rotate(-1.2deg);
  box-shadow: 4px 6px 0 rgba(10, 10, 11, .2);
  font-size: 15px; line-height: 1.6;
}
.lg-tldr::before { content: ""; position: absolute; left: 50%; top: -12px; width: 90px; height: 22px; margin-left: -45px; background: rgba(255, 169, 207, .75); transform: rotate(2deg); }
.lg-tldr b { display: block; font-family: var(--f-pixel); font-size: 11px; margin-bottom: 6px; background: none; }

.lg-table { width: 100%; border-collapse: collapse; background: var(--white); border: 2px solid var(--ink); font-size: 13px; }
.lg-table th { background: var(--ink); color: var(--white); font-family: var(--f-pixel); font-size: 9px; font-weight: 400; text-align: left; padding: 9px 12px; }
.lg-table td { padding: 11px 12px; border-bottom: 1.5px solid rgba(10, 10, 11, .12); vertical-align: top; line-height: 1.5; }
.lg-table tr:last-child td { border-bottom: 0; }

/* inspector */
.lg-inspect { margin-top: 16px; box-shadow: 6px 6px 0 var(--hotpink); }
.page-legal .win { position: relative; opacity: 1; transform: none; left: auto; top: auto; width: auto; }
.page-legal .win__bar { cursor: default; }
.page-legal .winbtn { color: var(--ink); }
.lg-table--inspect { border: 0; }
.lg-table--inspect td b { display: block; background: none; font-size: 13px; }
.lg-table--inspect td small { font-family: var(--f-mono); font-size: 10px; opacity: .55; }
.lg-table--inspect tbody tr { animation: rowIn .35s var(--ease) both; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } }
.lg-box { display: inline-block; padding: 2px 7px; font-family: var(--f-pixel); font-size: 9px; border: 1.5px solid var(--ink); }
.lg-box--session { background: var(--ice); }
.lg-box--local { background: var(--pink); }
.lg-empty { text-align: center; padding: 24px !important; font-family: var(--f-pixel); font-size: 11px; }
.lg-inspect__sum { padding: 10px 12px; font-family: var(--f-pixel); font-size: 10px; border-top: 2px solid var(--ink); background: #eceae6; }
.lg-inspect__sum b { color: var(--red); background: none; }
.lg-inspect__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px; border-top: 1.5px solid rgba(10, 10, 11, .15); }
.lg-danger { background: var(--red) !important; color: var(--white) !important; }

@media (max-width: 900px) {
  .lg-wrap { grid-template-columns: 1fr; }
  .lg-toc { position: static; }
  .lg-toc ol { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .lg-toc a { border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 10px; margin: 0; }
  .lg-toc a.is-on { padding-left: 10px; }
}
@media (max-width: 560px) {
  .lg-folders a { padding: 8px 10px 6px; font-size: 9px; }
  .lg-doc { padding: 20px 16px; }
  .lg-doc p, .lg-doc li { font-size: 14px; }
  .lg-table { font-size: 12px; }
  .lg-table td, .lg-table th { padding: 8px; }
}