/* ==================================================================
   LEGAL LIBRARY — screen reflow for the documents in www2026/legal/

   The ten files under /legal/ are self-contained facsimiles of the signed
   PDFs: one inline <style> each, A4 geometry, and a type scale in pt. That
   is deliberate and must stay — the printed output has to match the executed
   document, so nothing here touches @page, the print @media block, or any
   value the print layout depends on.

   What it does NOT survive is a phone. .doc and .cover-wrap are hard-set to
   210mm — 794px — so every document overflowed a 360px viewport by more than
   twice its width, with a cover sheet locked to 296.9mm and text at 9.8pt.

   This file is the screen-only reflow. It is linked from all ten documents
   AFTER their inline <style>, which is the only reason these rules win
   without !important: same specificity, later source order. Adding a rule
   here reaches every document; adding one to a document's <style> reaches
   one. Prefer here.

   THE CONTENT IS NEVER TOUCHED. Legal copy goes in verbatim (stage 7) and
   nothing below hides, truncates, reorders or abbreviates any of it — the
   mobile view carries the same words in the same order as the print view.

   Scoped to `screen` throughout, so print keeps the A4 layout exactly.
   ================================================================== */

@media screen and (max-width: 820px) {
  /* ---------------- the sheet ----------------
     The A4 page becomes a full-width document. Dropping the shadow with it
     matters: the paper metaphor reads as an affectation once the sheet is
     the whole screen. */
  body {
    background: #fff;
  }
  .doc,
  .cover-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-shadow: none;
  }
  .doc {
    padding: 22px 18px 34px;
    /* Belt and braces: a stray fixed-width child cannot pan the page. */
    overflow-x: hidden;
  }
  /* Long tokens — IBANs, licence references, e-mail addresses — are the one
     thing in these documents that cannot wrap on its own. */
  .doc,
  .cover-wrap {
    overflow-wrap: break-word;
  }

  /* Body copy up from 9.8pt (~13px). Set on body so it reaches everything
     that inherits, which is most of the prose; the pt sizes declared on
     individual components are left alone so the hierarchy holds. */
  body {
    font-size: 11pt;
    line-height: 1.62;
  }
  /* Justified text needs a measure this narrow does not have — at ~320px it
     opens rivers between words. Ranged left instead, hyphenation kept. */
  .doc p,
  .doc li,
  .doc dd {
    text-align: left;
  }

  /* ---------------- cover ----------------
     From a fixed 210 x 296.9mm sheet to a block that grows with its content.
     .cover-base has to leave absolute flow with it, or it overlaps the title
     the moment the height stops being fixed. */
  .cover {
    width: 100%;
    height: auto;
  }
  .cover-inner {
    height: auto;
    padding: 30px 20px 26px;
  }
  .cover-frame {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
  }
  .cover-frame::before,
  .cover-frame::after {
    width: 26px;
    height: 26px;
  }
  .cover-base {
    position: static;
    margin-top: 34px;
  }
  .cover .lockup {
    width: 150px;
  }
  .cover-eyebrow {
    margin-top: 26px;
    font-size: 9px;
    letter-spacing: 0.26em;
  }
  .cover-title {
    margin-top: 12px;
    font-size: 30px;
    letter-spacing: 0.06em;
  }
  .cover-ribbon {
    width: 150px;
    height: 14px;
    margin-top: 16px;
  }
  .cover-entity {
    margin-top: 12px;
    font-size: 17px;
  }
  .cover-reg {
    margin-top: 16px;
    max-width: none;
    font-size: 12px;
  }
  /* Three display:table cells at 33.33% each → stacked blocks. */
  .cover-meta {
    display: block;
    padding-top: 16px;
  }
  .cover-meta > div {
    display: block;
    width: auto;
    padding: 0 0 14px;
  }
  .cover-meta > div:last-child {
    padding-bottom: 0;
  }
  .cover-foot {
    display: block;
    margin-top: 18px;
  }
  .cover-foot span {
    display: block;
  }
  .cover-foot span:last-child {
    margin-top: 6px;
    text-align: left;
  }

  /* ---------------- clause numbering ----------------
     The hanging indents are 12mm and 9mm — 45px and 34px, a seventh of the
     measure on a 360px screen. Same effect, proportionate to the width. */
  p.cl {
    padding-left: 30px;
    text-indent: -30px;
  }
  p.cl .n,
  h2.ch .cn {
    width: 30px;
  }
  p.lettered {
    padding-left: 22px;
    text-indent: -22px;
  }
  h2.ch {
    font-size: 13px;
  }

  /* ---------------- contents ----------------
     Two columns at this width leave four or five words per line. */
  .toc {
    column-count: 1;
  }
  .toc a {
    padding-left: 26px;
    text-indent: -26px;
  }
  .toc .tn {
    width: 26px;
  }

  /* ---------------- definition lists ----------------
     display:table with a 42mm term column → term above definition, the rule
     moving from the cell edge to a left border on the definition. */
  .dfn {
    display: block;
  }
  .dfn dt {
    display: block;
    width: auto;
    padding: 0 0 4px;
    text-align: left;
  }
  .dfn dd {
    display: block;
    padding: 0 0 14px 12px;
    border-left: 2px solid var(--gold);
  }

  /* ---------------- key/value tables ---------------- */
  .kv th,
  .kv td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }
  .kv th {
    padding-top: 12px;
  }
  .kv td {
    padding-bottom: 12px;
    border-bottom: 0.5pt solid var(--hair);
  }

  /* ---------------- entity comparison table ----------------
     Deliberately NOT stacked and NOT made horizontally scrollable. It is a
     comparison — each cell means nothing without its column header — so the
     table keeps its structure and semantics and compresses instead. Fixed
     layout stops the longest entity name from dictating the widths. */
  table.ents {
    table-layout: fixed;
  }
  table.ents th,
  table.ents td {
    padding: 6px 8px 6px 0;
    font-size: 8.6pt;
    overflow-wrap: anywhere;
  }
  table.ents th:last-child,
  table.ents td:last-child {
    padding-right: 0;
  }

  /* Definitions table (client-agreement-labuan only). A 40mm term column is
     nearly half the measure at this width. Proportional instead — and still a
     table, because term and definition are a pair that loses its association
     the moment the cells become blocks. */
  table.defs td.term {
    width: 34%;
    padding-right: 10px;
  }

  /* ---------------- panels, notices, contact ---------------- */
  .panel {
    padding: 0 14px 14px;
  }
  /* Tracks the padding above — the band is drawn to bleed to both edges. */
  .panel-band {
    width: calc(100% + 28px);
    margin-left: -14px;
  }
  .notice,
  .accept {
    padding: 14px 16px;
  }
  ul.glance li {
    padding-left: 20px;
  }
  ul.glance li::before {
    width: 10px;
  }
  .contact {
    padding: 16px;
  }
  .contact-grid {
    display: block;
  }
  .contact-grid > div,
  .contact-grid > div:last-child,
  .contact-grid > div:nth-child(2) {
    display: block;
    width: auto;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 0.4pt solid var(--hair);
  }
  .contact-grid > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .colophon svg {
    width: 34px;
    height: 34px;
  }
  .legalfoot {
    font-size: 8pt;
  }
  /* Floated right against a 30px hanging indent, it collided with the
     heading it belongs to. */
  .tocbk {
    float: none;
    display: block;
    margin: 0 0 6px;
  }
}

/* Small phones. Only the values that still crowd at 360px and below. */
@media screen and (max-width: 420px) {
  .doc {
    padding: 18px 14px 28px;
  }
  .cover-inner {
    padding: 24px 16px 20px;
  }
  .cover-title {
    font-size: 25px;
  }
  .cover .lockup,
  .cover-ribbon {
    width: 128px;
  }
  .panel {
    padding: 0 12px 12px;
  }
  .panel-band {
    width: calc(100% + 24px);
    margin-left: -12px;
  }
  table.ents th,
  table.ents td {
    font-size: 8pt;
    padding-right: 6px;
  }
}