/* ============================================================
   LEGAL DOCUMENTS - privacy.html, terms.html

   One stylesheet for both, so the two documents cannot drift apart.

   These pages are not marketing. Somebody arrives here to check one
   specific thing - usually how to get their data deleted, or who it
   gets handed to - reads that clause, and leaves. Everything below is
   pointed at that: find the clause, read it, cite it.

   Nothing here invents a value. Colour, type, radius, easing and
   duration all come off base.css, and the two radii rule holds - there
   is no third shape on this page.
   ============================================================ */

/* ---------- MASTHEAD ----------
   The same mast every other page has: .s-who over a plate, title left,
   detail right. The first build left the photograph off on the argument
   that a legal page is not selling anything - which was true and beside
   the point, because it made this the one page on the site whose top
   did not belong to the set. Consistency wins.

   The scrim block below is the same one .s-mast, .c-mast, .p-mast,
   .t-mast and .r-mast each carry: base.css sets a home-page scrim and
   every mast replaces it outright in its own stylesheet. All five are
   byte identical, and so is this. */
/* The height block, byte for byte what .s-mast, .c-mast, .p-mast and
   .t-mast each carry. Without it this mast fell through to .s-who's
   78vh and the generic .section padding, which is a different height
   from every page it sits beside. .r-mast is the one exception on the
   site at 56vh, and it is a utility page. */
.lg-mast{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:74vh;
  padding-block:clamp(148px,17vw,210px) clamp(64px,8vw,98px);
}
.lg-mast .s-who__scrim{
  background:
    linear-gradient(180deg,rgba(20,33,61,.93),rgba(20,33,61,.78)),
    radial-gradient(94% 74% at 88% -8%,rgba(33,150,243,.15),transparent 60%);
}
.lg-mast__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- THE TWO COLUMNS ----------
   Rail left, document right. The rail is a fixed 250px rather than a
   fraction: it holds thirty short labels and there is no width at which
   giving it more helps. The prose column takes the rest. */
.lg-grid{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}

/* ---------- CONTENTS RAIL ----------
   Thirty sections is past the point where scrolling to find one is
   reasonable, so the rail is navigation, not ornament: it is the only
   structural device on the page and it earns its place.

   Sticky rather than fixed, so it scrolls into the footer instead of
   hanging over it. The top offset clears the floating nav island. */
.lg-toc{
  position:sticky; top:104px;
  max-height:calc(100vh - 140px);
  overflow-y:auto; overscroll-behavior:contain;
}
/* The bar grows a second row below 1320px (item 7), and the rail is still
   sticky between 1080 and 1320, so it has to clear the taller bar there. */
@media (max-width:1320px){
  .lg-toc{ top:132px; max-height:calc(100vh - 168px); }
}
.lg-toc__title{
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--deep);
  margin:0 0 14px;
}

/* A hairline with the current clause marked on it. The site already
   uses a rail this way for a sequence (.c-run, .t-run, .r-rail): a line,
   and a mark that moves along it. Here the line runs vertically.

   The first build set the entries as a number column beside a label, and
   the labels were the clause headings in full - "Organisational Accounts
   and Learner Information" - so most of them wrapped to two and three
   lines and the column read as a paragraph. The numbers are gone from
   the rail and the labels are short, so every entry is one line. The
   numbers still live on the headings, which is where a clause gets
   cited from. */
.lg-toc__list{
  list-style:none; margin:0; padding:0;
  border-left:1px solid var(--line);
}
.lg-toc__list a{
  display:block; padding:6px 0 6px 15px;
  margin-left:-1px; border-left:2px solid transparent;
  font-size:13.5px; line-height:1.4; color:var(--slate);
  transition:color var(--dur-fast) var(--ease-colour),
             border-color var(--dur-fast) var(--ease-colour);
}
.lg-toc__list a:hover{ color:var(--deep); border-left-color:var(--line); }

/* Active clause. A colour, a weight and the mark on the rail - no moving
   parts, because a map that animates while you read it is noise. */
.lg-toc__list a[aria-current="true"]{
  color:var(--deep); font-weight:500; border-left-color:var(--deep);
}

/* ---------- THE DOCUMENT ----------
   70ch is the reading measure. base.css caps prose at 64ch for marketing
   copy; legal clauses run longer and break badly at that width, so they
   get a little more room and no more. */
.lg-body{ max-width:70ch; }

/* ---------- WHAT DATES THE DOCUMENT ----------
   Trading name, ABN, effective and updated dates. These sat in the
   masthead in the first two builds and were wrong there: a headline
   band is for what the page is, and this is reference detail somebody
   checks once, usually to see whether the version they are reading is
   current. It belongs at the head of the document, which is where a
   document has always carried it.

   Four discrete facts, so they are set as four fields rather than five
   runs of grey text. The label-above-value idiom is the contact page's
   .c-dl, which does the same job on the dark panel; this is that
   treatment on a light surface.

   The entity takes its own row because it is a sentence, and the three
   short facts share the row under it. */
.lg-meta{
  margin:0 0 clamp(26px,3.2vw,34px);
  padding-bottom:clamp(18px,2.2vw,22px);
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,22px) clamp(20px,2.6vw,32px);
}
.lg-meta__wide{ grid-column:1 / -1; }

/* Scoped through .lg-body deliberately. A bare `.lg-meta dd` is one class
   and one type, the same specificity as `.lg-body p` and its neighbours,
   and the later rule in the file would win silently - which is exactly
   how the previous version of this strip ended up rendering at body size
   in the body colour. Anything added inside .lg-body wants this scoping. */
.lg-body .lg-meta dt{
  margin:0 0 5px;
  font-family:var(--font-display); font-weight:700; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--slate);
}
.lg-body .lg-meta dd{
  margin:0; font-size:14.5px; line-height:1.5; color:var(--ink);
}

@media (max-width:640px){
  .lg-meta{ grid-template-columns:minmax(0,1fr); }
}

.lg-sec + .lg-sec{ margin-top:clamp(38px,4.4vw,54px); }
.lg-sec:target{ scroll-margin-top:128px; }

/* The heading sits well below the site's h2. An h2 on this site tops out
   at 48px, which is right for one section title on a landing page and
   wrong for thirty of them in a row - at that size the page becomes a
   list of headlines with paragraphs between. 25px is the top of the
   --track-md band, which is the band this size belongs to. */
.lg-sec__h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px,2.1vw,25px); line-height:1.24;
  letter-spacing:var(--track-md); color:var(--ink);
  margin:0 0 14px;
}
/* The number is the document's own - people cite a privacy policy by
   clause, "under section 24" - so it is content, not a counter, and it
   reads as part of the sentence.

   It used to sit in its own 46px column at 14px beside a 25px heading,
   which put a small number a long way from a large title and, worse,
   started every heading 46px right of the paragraph underneath it, so
   nothing on the page shared a left edge. Inline at the heading's own
   size fixes both: the numbers align with the body text and the whole
   column runs flush.

   Deep blue at the same weight is not a new idea either - it is the
   site's own two-colour heading rule (h1 b, h2 b, h3 b in base.css)
   applied to the part of the heading that is the citation. */
.lg-sec__n{ color:var(--deep); }
.lg-sub{
  font-family:var(--font-display); font-weight:600; font-size:16px;
  line-height:1.3; letter-spacing:var(--track-sm); color:var(--ink);
  margin:26px 0 10px;
}
.lg-body p{
  margin:0 0 1em; font-size:15.5px; line-height:1.72; color:#414B5C;
}
.lg-body strong{ color:var(--ink); font-weight:600; }
.lg-body a{ border-bottom:1px solid color-mix(in srgb, var(--deep) 34%, transparent); }
.lg-body a:hover{ border-bottom-color:var(--deep); }

/* ---------- LISTS ----------
   The source document leans hard on lists: forty of them, and the long
   ones are fifteen items of two or three words each ("first name",
   "last name", "email address"). Set as one column those become a
   fifteen-line ribbon down an otherwise readable page.

   --cols is applied only where every item is short, so a list of
   clauses stays in one column and a list of field names does not. The
   rule that decides is in the build script, not here, because it
   depends on the content rather than the layout. */
.lg-list{
  margin:0 0 1.2em; padding:0; list-style:none;
}
.lg-list li{
  position:relative; padding-left:18px;
  margin:0 0 7px; font-size:15.5px; line-height:1.62; color:#414B5C;
}
.lg-list li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:color-mix(in srgb, var(--deep) 42%, transparent);
}
.lg-list--cols{ columns:2; column-gap:clamp(24px,3vw,40px); }
.lg-list--cols li{ break-inside:avoid; }

/* ---------- MOBILE ----------
   The rail cannot be sticky on a phone - it would eat the screen - so it
   becomes a closed disclosure at the top of the document. Closed by
   default: somebody who followed a link to a clause wants the clause,
   not a table of contents in their way. */
.lg-toc__mobile{ display:none; }

@media (max-width:1080px){
  .lg-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .lg-body{ max-width:none; }

  .lg-toc{ display:none; }
  .lg-toc__mobile{
    display:block; margin:0 0 clamp(28px,4vw,38px);
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--white);
  }
  .lg-toc__mobile > summary{
    list-style:none; cursor:pointer;
    padding:14px 16px;
    font-family:var(--font-display); font-weight:600; font-size:13px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--deep);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .lg-toc__mobile > summary::-webkit-details-marker{ display:none; }
  .lg-toc__mobile > summary::after{
    content:""; width:9px; height:9px; flex:none;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform var(--dur-fast) var(--ease);
  }
  .lg-toc__mobile[open] > summary::after{ transform:rotate(225deg) translateY(-2px); }
  .lg-toc__mobile .lg-toc__list{ padding:0 16px 14px; }
  .lg-toc__mobile .lg-toc__title{ display:none; }

  .lg-list--cols{ columns:1; }
}

/* The disclosure arrow is the only moving part on the page, and it still
   answers the site-wide preference. */
@media (prefers-reduced-motion:reduce){
  .lg-toc__mobile > summary::after{ transition:none; }
}