/* Legal pages (/privacy, /terms, /eula, /csae) - port of
   lib/venue/legal/venue_legal_document_view.dart: a faceplate table of
   contents (sticky beside the document; stacked above it under 900px)
   and the document on a sheet of paper held by a clipboard clip. */

.legal{
  --legal-ink:#2C2838;
  --legal-max:calc(1180px + 2 * var(--gutter));
  padding-bottom:100px;
  background:radial-gradient(ellipse 40% 20% at 80% 6%,rgba(177,58,242,.16),transparent 70%),var(--ink);
}
.legal .cl-crumbs{max-width:var(--legal-max)}

/* The content row: Flutter's 72px top padding, less the breadcrumb trail. */
.legal__row{display:flex;align-items:flex-start;gap:40px;max-width:var(--legal-max);margin:0 auto;padding:34px var(--gutter) 0}

/* ------------------------------------------------------------------ */
/* Table of contents */
.legal-toc{flex:0 0 280px;width:280px;position:sticky;top:107px;max-height:calc(100vh - 130px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
  padding:20px 14px 16px;border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 3px 3px rgba(255,255,255,.2),inset 0 -14px 22px rgba(0,0,0,.45),0 20px 40px rgba(0,0,0,.45)}
.legal-toc__title{padding:0 8px 12px;font-size:16px;line-height:1.25;color:#fff}
.legal-toc .cl-groove{margin:0 4px 10px}
.legal-toc ol{list-style:none;margin:0;padding:0}
.legal-toc a{display:block;padding:7px 8px;border-radius:8px;font:500 13px/1.45 var(--font-body);color:var(--muted);text-shadow:var(--engrave)}
.legal-toc a:hover{color:var(--cyan);background:rgba(0,0,0,.22)}

/* ------------------------------------------------------------------ */
/* The sheet */
.legal-sheet{flex:1;min-width:0;position:relative;margin-top:22px;padding:64px clamp(28px,5vw,64px) 56px;border-radius:6px;
  background:linear-gradient(180deg,#FBF9F2,#F3EFE3);color:var(--legal-ink);
  box-shadow:0 2px 0 #D8D2C4,0 30px 60px rgba(0,0,0,.55)}
.legal__row--solo .legal-sheet{flex:1 1 100%}
.legal-sheet__clip{position:absolute;top:-24px;left:50%;width:180px;height:46px;margin-left:-90px;border-radius:10px 10px 16px 16px;
  background:linear-gradient(180deg,#EEF0F5 0%,#B9BECB 35%,#7D8394 70%,#3A3E4A 100%);
  box-shadow:inset 0 1px 0 #fff,0 6px 10px rgba(0,0,0,.45)}
.legal-sheet h1{font-size:clamp(30px,3.4vw,40px);line-height:1.1;color:var(--paper-ink);text-wrap:balance;overflow-wrap:break-word}
.legal-sheet__date{margin-top:10px;font-size:14px;letter-spacing:1px;color:var(--paper-muted)}
.legal-sheet__rule{height:2px;margin:26px 0 28px;background:repeating-linear-gradient(90deg,var(--paper-rule) 0 6px,transparent 6px 12px)}

.legal-sheet h2{margin:38px 0 14px;font-size:21px;line-height:1.25;color:var(--paper-ink);scroll-margin-top:104px;overflow-wrap:break-word}
.legal-sheet h3{margin:8px 0 10px;font:800 16px/1.35 var(--font-body);color:var(--paper-ink)}
.legal-sheet p{margin:0 0 14px;font:400 15px/1.65 var(--font-body);color:var(--legal-ink);overflow-wrap:break-word;text-wrap:pretty}
.legal-sheet a{color:#007585;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
.legal-sheet a:hover{color:#00525E}
.legal-sheet h2 a,.legal-sheet a[href^="#"]{overflow-wrap:break-word}

/* "In Short: ..." callouts, run through a yellow highlighter. */
.legal-sheet .legal-callout{font-style:italic;font-weight:500}
.legal-callout mark{color:inherit;padding:0 3px;
  background:linear-gradient(transparent 14%,rgba(255,232,92,.75) 14%,rgba(255,232,92,.75) 88%,transparent 88%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

.legal-sheet ul{list-style:none;margin:0 0 14px;padding:0}
.legal-sheet li{position:relative;padding-left:26px;font:400 15px/1.6 var(--font-body);color:var(--legal-ink);overflow-wrap:break-word;text-wrap:pretty}
.legal-sheet li+li{margin-top:8px}
.legal-sheet li::before{content:'';position:absolute;left:9.5px;top:9.5px;width:5px;height:5px;border-radius:50%;background:var(--legal-ink)}

/* Data table - scrolls sideways inside its own box below 640px. */
.legal-table{overflow-x:auto;margin:0 0 16px;-webkit-overflow-scrolling:touch}
.legal-table table{width:100%;min-width:640px;border-collapse:collapse;font:400 13px/1.45 var(--font-body);color:var(--legal-ink)}
.legal-table th,.legal-table td{padding:10px;border:1px solid var(--paper-rule);text-align:left;vertical-align:top}
.legal-table thead th{background:#EDE7D6;font-weight:700}
.legal-table tbody th{font-weight:400}
.legal-table__fit{width:1%}

@media (max-width:899px){
  .legal__row{flex-direction:column;align-items:stretch;gap:40px}
  .legal-toc{position:static;flex:none;width:auto;max-height:none;overflow:visible}
  .legal-sheet{flex:none}
}