/* Grizzly Beam — legal pages (/privacy/, /cookies/)
   Legal document: long text, sticky index, tables and visible markers of
   open decisions. All measurements in rem, per P3-1 (the site has no layout px).
   No em dashes in the copy (rule no-em-dash-in-copy). */

/* ---------- hero ---------- */
/* .svc-hero is min-height: 100vh but does not center on its own; each page
   adds that (same as .apr-hero in approach.css). Without this the content
   sits at the top and slides under the fixed header. */
.lg-hero { display: flex; align-items: center; justify-content: center; }.lg-fact__n {
  font-family: var(--f-disp); font-weight: var(--w-h2); font-size: 2.4rem;
  line-height: 1; color: var(--amber);
}
.lg-fact__l {
  font-family: var(--f-mono); font-size: 1rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(236, 232, 225, 0.7);
}

/* ---------- status bar ---------- */
.lg-status { background: var(--stone2); color: var(--ink); padding-block: 1.6rem; }
.lg-status__ctr { display: flex; align-items: flex-start; gap: 1rem; }
.lg-status__dot {
  flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--amber); margin-top: 0.62rem;
}
.lg-status__tx { font-family: var(--f-body); font-size: 1.266rem; line-height: 1.5; max-width: 62rem; }
.lg-status__tx strong { font-weight: var(--w-body-strong); }
.lg-status__n { font-family: var(--f-mono); font-weight: 500; }

/* ---------- layout ---------- */
.lg-body { background: var(--paper); color: var(--ink); padding-block: 5.5rem 8rem; }
.lg-grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 5rem; align-items: start; }

/* ---------- index ----------
   <details> cannot be kept open from CSS, so privacy.js tracks the width. */
.lg-rail { position: sticky; top: 9rem; max-height: calc(100vh - 12rem); overflow-y: auto; }
.lg-rail__hd {
  color: var(--tx-g); cursor: pointer; list-style: none;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--stone2);
  display: block;
}
.lg-rail__hd::-webkit-details-marker { display: none; }
.lg-rail__hd::after { content: '+'; float: right; font-size: 1.1rem; line-height: 1; }
.lg-rail[open] > .lg-rail__hd::after { content: '-'; }
.lg-rail__list { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.1rem; }
.lg-rail__list a {
  display: block; padding: 0.34rem 0.6rem; border-radius: var(--r-6);
  font-family: var(--f-body); font-size: 1.06rem; line-height: 1.3;
  color: var(--tx-g); border-left: 2px solid transparent; text-decoration: none;
}
.lg-rail__list a:hover { background: var(--stone2); color: var(--ink); }
.lg-rail__list a.is-here {
  color: var(--ink); background: var(--stone2);
  border-left-color: var(--amber); font-weight: var(--w-body-strong);
}
.lg-rail__list .is-appendix > a { color: var(--amber-deep); }

/* An anchor jump must land below the fixed header. Measured: the header is
   102px @1440 (root 12.8) and 96px @1024/768 (root 12), so ~8rem; on a
   phone 58px (root 12.19), hence the smaller value in the <=767 block. */
.lg-h2, .lg-h3 { scroll-margin-top: 9.5rem; }

/* ---------- body ---------- */
.lg-doc { max-width: 46rem; font-family: var(--f-body); font-size: 1.266rem; line-height: 1.62; }
.lg-h2 {
  font-family: var(--f-disp); font-weight: var(--w-h2); font-size: 2.1rem;
  line-height: 1.14; letter-spacing: -0.005em;
  margin-top: 4rem; padding-top: 2.4rem; border-top: 1px solid var(--stone2);
}
.lg-doc > .lg-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lg-h3 {
  font-family: var(--f-disp); font-weight: var(--w-h3); font-size: 1.4rem;
  margin-top: 2.4rem; margin-bottom: 0.2rem;
}
.lg-doc p { margin-top: 1.1rem; }
.lg-doc ul, .lg-doc ol { margin-top: 1.1rem; padding-left: 1.5rem; }
.lg-doc li { margin-bottom: 0.55rem; }
.lg-doc li::marker { color: var(--amber-deep); }
.lg-doc strong { font-weight: var(--w-body-strong); }
.lg-doc a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--amber); }
.lg-doc a:hover { color: var(--amber-deep); }
.lg-doc code {
  font-family: var(--f-mono); font-size: 0.88em;
  background: var(--stone2); padding: 0.1em 0.35em; border-radius: var(--r-6);
}

/* ---------- tables ---------- */
.lg-tw {
  overflow-x: auto; margin-top: 1.6rem;
  border: 1px solid var(--stone2); border-radius: var(--r-10); background: var(--white);
}
.lg-table { border-collapse: collapse; width: 100%; font-size: 1.14rem; }
.lg-table th {
  font-family: var(--f-mono); font-size: 0.92rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tx-g); font-weight: 400; text-align: left;
  padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--stone2); white-space: nowrap;
}
.lg-table td { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--stone2); vertical-align: top; }
.lg-table tbody tr:last-child td { border-bottom: 0; }
.lg-table td:first-child { font-weight: var(--w-body-strong); }

/* ---------- open decision marker ----------
   The text is --ink, never --amber-deep on a longer paragraph: color is an
   additional signal, not the only one (WCAG 1.4.1), and the border carries the color. */
.lg-flag {
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: #FBF2E1; color: var(--ink);
  border-bottom: 2px solid var(--amber);
  padding: 0.1em 0.4em; border-radius: var(--r-6);
  overflow-wrap: anywhere;
}
.lg-flag__k {
  font-family: var(--f-mono); font-size: 0.78em; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--amber-deep);
  margin-right: 0.5em; white-space: nowrap;
}

/* ---------- <=1023 ---------- */
@media (max-width: 1023px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .lg-rail {
    position: static; max-height: none;
    border: 1px solid var(--stone2); border-radius: var(--r-10); background: var(--white);
  }
  .lg-rail__hd { padding: 1.1rem 1.3rem; border-bottom: 0; }
  .lg-rail[open] > .lg-rail__hd { border-bottom: 1px solid var(--stone2); }
  .lg-rail__list { margin-top: 0; padding: 0.9rem 1.3rem 1.2rem; max-height: 26rem; overflow-y: auto; }
  .lg-doc { max-width: none; }
  .lg-hero__facts { gap: 1rem 2.4rem; }
}

/* Same specificity as .lg-rail[open] > .lg-rail__hd::after and after it in the
   source, otherwise the [open] rule wins and the sign stays visible on desktop. */
@media (min-width: 1024px) {
  .lg-rail__hd { cursor: default; }
  .lg-rail > .lg-rail__hd::after, .lg-rail[open] > .lg-rail__hd::after { content: none; }
}

@media (max-width: 767px) {
  .lg-body { padding-block: 3.5rem 5rem; }
  .lg-h2, .lg-h3 { scroll-margin-top: 6.2rem; }
  .lg-h2 { font-size: 1.9rem; margin-top: 3rem; padding-top: 2rem; }
  .lg-hero__facts { flex-direction: column; align-items: center; gap: 0.9rem; }
}