/* HyperCurio — HC-1206: the legal page template.
 *
 * A document, so it is typeset as one: a real measure, real heading hierarchy, and an outline
 * beside it on desktop. The one non-obvious choice is that bracketed items are highlighted
 * rather than blended in. HC-1211's criterion is that no [bracketed] text survives to launch,
 * and the fastest way to check that is to be able to see them from across the room.
 */

.lg-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.lg-main { flex: 1 1 auto; max-width: var(--hc-max); width: 100%; margin: 0 auto; padding: var(--hc-8) var(--hc-pad) var(--hc-16); }

.lg-head { max-width: 68ch; }
.lg-h1 { font-family: var(--hc-font-display); font-size: var(--hc-h1); font-weight: var(--hc-weight-head); margin: 0; }
.lg-meta { color: var(--hc-text-muted); font-size: 14px; margin: var(--hc-2) 0 0; }

/* Coral, and the first thing on the page. */
.lg-draft {
  margin: var(--hc-5) 0 0; padding: var(--hc-4);
  border: 1px solid #A04545; border-radius: var(--hc-radius-card);
  background: rgba(160, 69, 69, .12); color: var(--hc-bad); font-size: 15px;
}

.lg-cols { display: grid; gap: var(--hc-6); margin-top: var(--hc-section-gap); }

.lg-toc { display: none; }
.lg-toc-h { font-family: var(--hc-font-label); font-size: var(--hc-label-size); font-weight: var(--hc-weight-label); letter-spacing: var(--hc-label-track); text-transform: uppercase; color: var(--hc-text-muted); margin: 0 0 var(--hc-2); }
.lg-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hc-1); }
.lg-toc a { color: var(--hc-text-muted); text-decoration: none; font-size: 14px; display: block; padding: 3px 0; }
.lg-toc a:hover { color: var(--hc-text); }
.lg-toc a[aria-current="true"] { color: var(--hc-accent); font-weight: 700; }

.lg-doc { max-width: 68ch; min-width: 0; }
.lg-intro { color: var(--hc-text-muted); font-size: 17px; }
.lg-sec { margin-top: var(--hc-8); scroll-margin-top: var(--hc-6); }
.lg-sec h2 { font-family: var(--hc-font-title); font-size: calc(22px * var(--hc-scale-title)); font-weight: var(--hc-weight-head); margin: 0 0 var(--hc-3); }
.lg-sec p { margin: 0 0 var(--hc-3); }
.lg-sec ul { margin: 0 0 var(--hc-3); padding-left: var(--hc-6); }
.lg-sec li { margin-bottom: var(--hc-2); }

.lg-todo {
  background: rgba(244, 182, 63, .18); color: var(--hc-accent);
  border-radius: 4px; padding: 0 4px; font-weight: 700;
}

.lg-footer { border-top: 1px solid var(--hc-border); padding: var(--hc-6) var(--hc-pad); }
.lg-footlinks { display: flex; flex-wrap: wrap; gap: var(--hc-4); max-width: var(--hc-max); margin: 0 auto; }
.lg-footlink { color: var(--hc-text-muted); text-decoration: none; font-size: 14px; background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0; }
.lg-footlink:hover { color: var(--hc-text); }
.lg-copy { max-width: var(--hc-max); margin: var(--hc-3) auto 0; color: var(--hc-text-disabled); font-size: 13px; }

@media (min-width: 1024px) {
  .lg-cols { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .lg-toc { display: block; position: sticky; top: var(--hc-6); }
}

/* ---------------------------------------------------------------- HC-1210 cookies
   The banner sits at the bottom and does not block the page: somebody should be able to read
   the privacy policy before deciding what to consent to. */
.ck-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--hc-surface-1); border-top: 1px solid var(--hc-border);
  padding: var(--hc-4) var(--hc-pad) max(var(--hc-4), env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}
.ck-inner { max-width: var(--hc-max); margin: 0 auto; display: grid; gap: var(--hc-4); }
.ck-text p { color: var(--hc-text-muted); font-size: 14px; margin: var(--hc-1) 0 0; max-width: 60ch; }
.ck-actions { display: flex; flex-wrap: wrap; gap: var(--hc-2); align-items: center; }
/* Equal weight on purpose: accepting and refusing are both one click and the same size. */
.ck-actions .hc-btn { width: auto; min-width: 150px; }
.ck-link { background: none; border: 0; color: var(--hc-text-muted); font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; padding-inline: var(--hc-2); }
.ck-link:hover { color: var(--hc-text); }

.ck-dlg { width: min(520px, 100vw); padding: 0; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); background: var(--hc-surface-1); color: var(--hc-text); }
.ck-dlg::backdrop { background: var(--hc-scrim); }
@media (max-width: 599px) { .ck-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0; } }
.ck-dlg-head { padding: var(--hc-5) var(--hc-5) 0; }
.ck-dlg-head h2 { font-family: var(--hc-font-title); font-size: calc(22px * var(--hc-scale-title)); font-weight: var(--hc-weight-head); margin: 0; }
.ck-dlg-body { padding: var(--hc-5); display: grid; gap: var(--hc-5); }
.ck-dlg-foot { display: flex; align-items: center; gap: var(--hc-3); padding: var(--hc-4) var(--hc-5); border-top: 1px solid var(--hc-border); }
.ck-dlg-foot .hc-btn { margin-left: auto; }
.ck-cat-head { display: flex; align-items: center; gap: var(--hc-3); }
.ck-cat-head b { flex: 1 1 auto; }
.ck-cat p { color: var(--hc-text-muted); font-size: 14px; margin: var(--hc-2) 0 0; }
/* A sentence rather than a switch that refuses to move. */
.ck-always { font-size: 13px; font-weight: 700; color: var(--hc-text-disabled); }

@media (min-width: 900px) {
  .ck-inner { grid-template-columns: 1fr auto; align-items: center; }
}