/* =============================================================================
   trust.css — the trust centre, on screen

   Palette, type scale and setting rules from the fishing4flowers brand
   guidelines v1.1 (2026). print.css carries the same tokens so that a
   document's web page and its downloaded PDF are the same document. That is
   the principle behind data/facts.yml applied to presentation: one source,
   no drift.

   Two rules from the guidelines shape most of what follows:

     • The bright accents never carry text at any size. Leaf, blossom and
       river measure 2.25:1, 2.20:1 and 2.65:1 on Paper -- decoration only.
       Anything that carries text or UI uses the deep tint.
     • Links are deep river blue AND underlined, so colour is never the only
       cue distinguishing them.
   ============================================================================= */

/* ---------- brand typeface ----------
   Lexend is the only face in the brand. It ships as a single variable file
   covering the 100-900 weight axis, which is why one @font-face declaration
   with a weight range replaces the eight static files the previous pack used.
   WeasyPrint instances the axis correctly, so the PDF and the page agree.

   Vendored rather than fetched, so CI needs no network and a reader of the
   trust centre makes no third-party request. SIL Open Font License 1.1;
   the licence travels alongside in templates/fonts/. */
@font-face{
  font-family:"Lexend";
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
  src:url("fonts/Lexend-variable.woff2") format("woff2");
}

:root{
  /* ground and ink */
  --paper:#FFFDF8;      /* the warm ground everything sits on */
  --stone:#F5F5F5;      /* panels */
  --ink:#111111;        /* headings, the rail */
  --bark:#33312E;       /* body copy */
  --slate:#66625A;      /* captions and labels, never a lighter grey */
  --rule:#E6E2D8;       /* hairlines */

  /* bright accents — logo and decoration only, never text */
  --leaf:#3CC44A;
  --blossom:#FF3EB5;
  --river:#00AADD;

  /* deep tints — everything that carries text, links, buttons or UI */
  --leaf-deep:#26802F;      /* success, confirmations */
  --blossom-deep:#D6007F;   /* emphasis, warmth */
  --river-deep:#007A9E;     /* links, buttons, UI: the default */

  /* The guidelines name one fallback stack. Verdana is the universal net;
     Atkinson Hyperlegible is preferred where a reader has it installed. */
  --font:"Lexend","Atkinson Hyperlegible",Verdana,sans-serif;

  --rail-w:16.5rem;
  --contents-w:13rem;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--bark);
  font:400 1rem/1.6 var(--font);       /* body copy 16/26, never below 16px */
  text-align:left;                      /* left-aligned; never justified */
  -webkit-font-smoothing:antialiased;
}

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--stone);
  padding:.6rem 1rem; border-radius:.5rem; z-index:10;
}
.skip:focus{ left:1rem; top:1rem; }

:where(a):focus-visible,
:where(button):focus-visible{
  outline:3px solid var(--river-deep);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- shell ---------- */
.shell{ display:flex; align-items:flex-start; min-height:100vh; }

/* ---------- the document rail ---------- */
.rail{
  flex:0 0 var(--rail-w);
  position:sticky; top:0;
  align-self:stretch;
  min-height:100vh;
  background:var(--ink);
  padding:2rem 1.25rem;
}

.lockup{ display:block; text-decoration:none; margin-bottom:2.5rem; }

/* The wordmark is set in Lexend rather than placed as artwork, because the
   pack holds no logo asset. Three letters carry the accents, matching the
   application: the first f is leaf, the 4 is blossom, the f of flowers is
   river. The tagline's full stop is leaf, per the guidelines.

   This is the one place bright accents touch letterforms, and it is sanctioned
   because it is the logo. It also happens to be safe: on the Ink rail they
   measure 8.3:1, 5.9:1 and 7.0:1. On Paper the same three would be 2.25:1,
   2.20:1 and 2.65:1 -- which is why the rail is dark and why the accents
   appear nowhere in the body copy.

   The lockup carries the alt text the guidelines require on the logo, and the
   letters are hidden from assistive technology so it is announced once, as a
   name, rather than spelled out span by span. */
.wordmark{
  display:block;
  font-size:1.5rem; font-weight:600;
  letter-spacing:-.02em;                /* negative tracking only above 22px */
  line-height:1.15;
  color:var(--paper);
}
.tagline{
  display:block; margin-top:.25rem;
  font-size:.8125rem; font-weight:400; letter-spacing:0;
  color:#C3C3C3;                        /* 10.7:1 on Ink */
}
.leaf{ color:var(--leaf); }
.blossom{ color:var(--blossom); }
.river{ color:var(--river); }

.rail-label{
  margin:0 0 .6rem;
  font-size:.75rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase;             /* the one sanctioned all-caps */
  color:#B1B1B1;                        /* 8.8:1 on Ink */
}
.rail .rail-label{ padding-left:.75rem; }

.doc-nav{ list-style:none; margin:0; padding:0; }
.doc-nav li{ margin:0; }
.doc-nav a{
  display:block;
  padding:.5rem .75rem;
  border-left:3px solid transparent;
  color:#C3C3C3;
  font-size:.9375rem; font-weight:400;
  text-decoration:none;                 /* a nav rail, not running-text links */
  border-radius:0 .375rem .375rem 0;
}
.doc-nav a:hover{ color:var(--paper); background:rgba(255,255,255,.06); }
.doc-nav a[aria-current="page"]{
  color:var(--paper); font-weight:500;
  background:rgba(255,255,255,.08);
  border-left-color:var(--leaf);        /* bright accent as decoration only */
}

/* ---------- page ---------- */
.page{ flex:1 1 auto; min-width:0; max-width:82rem; padding:3rem 3rem 5rem; }

.doc-head{ border-bottom:1px solid var(--rule); padding-bottom:1.5rem; margin-bottom:2.5rem; }
.eyebrow{
  margin:0 0 .75rem;
  font-size:.75rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate);
}
.doc-head h1{
  margin:0;
  font-size:2.5rem; line-height:1.1; font-weight:600; letter-spacing:-.02em;
  color:var(--ink);
}
.doc-meta{ margin:.75rem 0 0; color:var(--slate); font-size:.9375rem; }

.doc-body{ display:flex; align-items:flex-start; gap:3rem; }

/* The 60-75 character measure the guidelines set is a rule for body copy, so
   it is applied to the prose elements rather than to the column. Constraining
   the whole column would squeeze the tables, and in this pack the tables carry
   most of the substance -- the sub-processor register is very nearly all
   table. They are allowed the full width. */
.prose{ flex:1 1 auto; min-width:0; }
.prose p,
.prose > ul,
.prose > ol,
.prose blockquote{ max-width:68ch; }

/* ---------- prose ---------- */
.prose h2,.prose h3,.prose h4{
  color:var(--ink); font-weight:600; line-height:1.25;
  margin:2.5rem 0 .75rem;
}
.prose h2{ font-size:1.75rem; letter-spacing:-.015em; }   /* heading 28/34 */
.prose h3{ font-size:1.25rem; font-weight:500; }          /* subheading 20/28 */
.prose h4{ font-size:1.0625rem; }
.prose > :first-child{ margin-top:0; }

.prose p,.prose li{ font-size:1rem; line-height:1.6; }
.prose li+li{ margin-top:.35rem; }

.prose a{
  color:var(--river-deep);
  text-decoration:underline;            /* colour is never the only cue */
  text-underline-offset:2px;
}
.prose a:hover{ text-decoration-thickness:2px; }

.prose strong{ font-weight:600; color:var(--ink); }

/* Callouts carry commitments and obligations -- see STYLE.md. Deep river blue
   marks them; the bright tint would fail on text. */
.prose blockquote{
  margin:1.5rem 0; padding:1rem 1.25rem;
  background:var(--stone);
  border-left:4px solid var(--river-deep);
  border-radius:0 .5rem .5rem 0;
  color:var(--bark);
}
.prose blockquote > :first-child{ margin-top:0; }
.prose blockquote > :last-child{ margin-bottom:0; }

.prose code{
  background:var(--stone); color:var(--ink);
  padding:.1rem .35rem; border-radius:.25rem;
  font-size:.9em;
}

/* Tables are the substance of the register -- the sub-processor register is
   very nearly all table -- so they are kept as real tables and given the full
   column width. Narrow screens make them scrollable; see the media query. */
.prose table{
  border-collapse:collapse; width:100%;
  font-size:.9375rem;
  font-variant-numeric:tabular-nums;
}
.prose th,.prose td{
  border:1px solid var(--rule);
  padding:.6rem .75rem;
  text-align:left; vertical-align:top;
}
.prose th{ background:var(--stone); color:var(--ink); font-weight:600; }
.prose tbody tr:nth-child(even) td{ background:#FBFAF6; }

.prose hr{ border:0; border-top:1px solid var(--rule); margin:2.5rem 0; }

/* ---------- in-page contents ---------- */
.contents{
  flex:0 0 var(--contents-w);
  position:sticky; top:3rem;
  font-size:.875rem;
}
.contents .rail-label{ color:var(--slate); }
.contents ul{ list-style:none; margin:0; padding:0; border-left:1px solid var(--rule); }
.contents li{ margin:0; }
.contents ul ul{ border-left:0; }
.contents a{
  display:block; padding:.3rem 0 .3rem .875rem;
  margin-left:-1px; border-left:2px solid transparent;
  color:var(--slate); text-decoration:none; line-height:1.4;
}
.contents a:hover{ color:var(--river-deep); border-left-color:var(--river-deep); }
.contents ul ul a{ padding-left:1.75rem; font-size:.8125rem; }

/* ---------- narrow screens ---------- */
@media (max-width:60rem){
  .shell{ display:block; }
  .rail{
    position:static; min-height:0;
    padding:1.5rem;
  }
  .lockup{ margin-bottom:1.5rem; }
  .doc-nav{ display:flex; flex-wrap:wrap; gap:.25rem; }
  .doc-nav a{ border-left:0; border-radius:.375rem; padding:.4rem .7rem; }
  .doc-nav a[aria-current="page"]{ border-left:0; background:rgba(255,255,255,.14); }
  .page{ padding:2rem 1.25rem 4rem; }
  .doc-head h1{ font-size:1.875rem; }
  .doc-body{ display:block; }
  .contents{
    position:static; margin:0 0 2.5rem;
    padding-bottom:1.5rem; border-bottom:1px solid var(--rule);
  }

  /* A register table has more columns than a phone has room for. Making the
     table itself the scroll container keeps the page from scrolling sideways
     as a whole, which is the thing that makes a document unreadable on a
     phone -- every line of prose then moves when you chase a table cell.

     print.css warns against display:block on tables and is right to: on paper
     it clips instead of laying out. There is no such risk here, and this rule
     is inside a screen-width media query, so it never reaches the PDF. */
  .prose table{ display:block; overflow-x:auto; }
}

/* ---------- printing a trust centre page ----------
   The PDF of each document is rendered separately by print.css. This only
   makes the web page behave if a reader prints it from the browser. */
@media print{
  .rail,.contents,.skip{ display:none; }
  .page{ padding:0; }
  .prose{ max-width:none; }
  .prose a{ color:var(--ink); }
}