/* ==========================================================================
   DPDP Core, design system.

   ONE definition of the palette and ONE definition of the site chrome
   (masthead plus primary navigation), shared by every page on the site.

   The site has two page families and they were built independently:

     A. The 82 shared-stylesheet pages (home, explainer, roles, blog,
        questions, legal). They load styles.css, then site.css, then this
        file, then redesign.css. Their masthead is header.top plus nav.tabs.

     B. The 5 standalone pages (act-map, sector-reference, simulation,
        simulation/notice, assess). Each carries its own complete theme in an
        inline <style> and does NOT load the shared stylesheets, because each
        also carries its own reset that would fight them. They load this file
        AFTER that inline block, so the tokens below win. Their masthead is
        .sitenav.

   Because family B names its tokens differently from family A, this file
   declares the same palette under every name in use. That is deliberate: it
   is how one palette reaches two theming systems without editing either
   page's markup or its own stylesheet.

   Presentation only. No markup moves, no route changes, and nothing the
   scripts hook into (nav.tabs a, #lang, #pending, #greetA, #greetB) is
   touched. Content, copy and URLs are unchanged.
   ========================================================================== */

:root{
  /* ---- the palette, canonical names ---- */
  --bg:#f4efe4;              /* page ground, unchanged from the parchment theme */
  --surface:#fffdf8;         /* raised card */
  --soft:#ebe3d4;            /* recessed fill */
  --navy:#1f2d63;            /* primary */
  --blue:#dae4ff;            /* primary tint */
  --lime:#d4ec46;            /* highlight, used sparingly */
  --orange:#c8673d;          /* warning / later commencement */
  --orange2:#f4ddd2;
  --amber:#c6842a;           /* the middle commencement stage, kept distinct from orange */
  --green:#39715a;           /* affirmative / in force */
  --green2:#dfeee4;
  --line:#d9cfbd;
  --ink:#242320;
  --muted:#706b62;
  --muted2:#5f5a52;          /* the comp used this three times but never defined it */

  --round:20px;
  --radius:16px;
  --shadow:0 12px 35px rgba(36,35,32,.08);

  --font-ui:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* act-map.html and simulation/notice.html each set a serif display face of
     their own. The prototype is a single sans voice, so the display face is
     re-pointed here. --font-body is deliberately NOT touched, which leaves the
     notice artefact on simulation/notice in its serif, where the serif is the
     point of the exercise. */
  --font-display:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---- family A aliases (styles.css, site.css) ---- */
  --panel:#fffdf8;
  --panel2:#ebe3d4;
  --accent:#1f2d63;
  --accent2:#39715a;

  /* ---- family B aliases ----
     act-map.html: --paper --card --ink2 --indigo --teal --saffron --rust plus tints.
     The four accent colours carry MEANING on that page (the commencement
     legend: in force / 13 Nov 2026 / 13 May 2027), so they are re-pointed to
     the nearest colour in this palette rather than collapsed into one. */
  --paper:#f4efe4;
  --card:#fffdf8;
  --ink2:#706b62;
  --indigo:#1f2d63;    --indigo-tint:#dae4ff;
  --teal:#39715a;      --teal-tint:#dfeee4;
  --saffron:#c6842a;   --saffron-tint:#f8ecd8;
  --rust:#c8673d;      --rust-tint:#f4ddd2;

  /* simulation.html and simulation/notice.html */
  --no:#c8673d;
  --warn:#c6842a;
  --ink-soft:#706b62;
  --bg-vignette:#ebe3d4;
  --paper-edge:#d9cfbd;
  --rule:#d9cfbd;
  --maroon:#c8673d;
  --maroon-deep:#a6432b;
  --gold:#c6842a;
  --correct:#39715a;
  --incorrect:#c8673d;
}

/* ==========================================================================
   Site chrome for family B: .sitenav

   The markup is already identical on all four standalone pages:

     <div class="sitenav">
       <a class="home" href="/"><b>…</b><span>…</span></a>
       <nav><a>…</a> … <a class="here">…</a></nav>
     </div>

   so restyling it here makes one masthead serve all of them, and matches the
   header.top plus nav.tabs treatment that redesign.css gives family A.
   ========================================================================== */

/* A sticky element can only travel inside its own parent's box. On three of the
   four pages .sitenav sits directly inside the tall page container, so sticking
   it works. On sector-reference.html the nav has a short wrapper of its own that
   closes before the content, giving it nowhere to travel, so there the wrapper
   is what has to stick. Verified per page rather than assumed. */
.wrap:has(> .sitenav:only-child){position:sticky;top:0;z-index:30}

.sitenav{
  position:sticky;top:0;z-index:30;
  padding:14px 0 0;
  margin-bottom:18px;
  font-family:var(--font-ui);
}
/* the translucent band runs edge to edge even though the shell is centred */
.sitenav:before{
  content:'';position:absolute;z-index:-1;
  top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:rgba(244,239,228,.96);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
/* an in-page anchor must not land underneath the sticky bar.
   :target covers hash navigation. It does NOT cover scrollIntoView, which is
   how sector-reference.html lands a deep link on #view, so that one is named
   explicitly. act-map.html uses block:'center' and needs no offset. */
:target,#view{scroll-margin-top:130px}

/* brand: the wordmark alone. No logo mark. The prototype carried a navy "D"
   tile; the owner removed it 2026-08-17. */
.sitenav a.home{
  display:inline-block;
  margin-bottom:0;
  text-decoration:none;color:var(--ink);
}
.sitenav a.home b{
  display:block;
  font-size:18px;font-weight:800;letter-spacing:-.04em;line-height:1.15;
}
.sitenav a.home span{
  display:block;margin-top:1px;
  font-size:11px;font-weight:400;color:var(--muted);
}

/* ==========================================================================
   Primary navigation, one definition for all three implementations

   The same eight links are marked up three different ways across the site,
   because the three page families were built at different times:

     nav.tabs        the 82 shared-stylesheet pages   (active class: .active)
     .sitenav nav    the four standalone tool pages   (active class: .here)
     nav.sitetabs    the gated app, assess.html       (active class: .here)

   Rather than restyle each one separately and let them drift, all three are
   given the same pill treatment here. Pills, not the full width boxes each
   page had.
   ========================================================================== */

.sitenav nav,nav.tabs,nav.sitetabs{
  display:flex;flex-wrap:wrap;gap:6px;
}
.sitenav nav{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.sitenav nav a,nav.tabs a,nav.sitetabs a{
  flex:0 1 auto;min-width:0;min-height:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;
  border-radius:999px;padding:9px 13px;
  font-size:12.5px;font-weight:600;line-height:1.2;
  color:var(--muted);text-decoration:none;text-align:center;
  transition:background .15s ease,color .15s ease;
}
.sitenav nav a:hover,nav.tabs a:hover,nav.sitetabs a:hover{background:var(--soft);color:var(--ink)}
.sitenav nav a.here,.sitenav nav a.here:hover,
nav.tabs a.active,nav.tabs a.active:hover,
nav.sitetabs a.here,nav.sitetabs a.here:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.sitenav nav a:focus-visible,nav.tabs a:focus-visible,nav.sitetabs a:focus-visible{
  outline:2.5px solid var(--navy);outline-offset:2px;
}

@media(max-width:760px){
  /* wrapped, the eight tabs take three rows, and a sticky bar three rows deep
     eats a quarter of a phone screen. One scrolling row instead. */
  .sitenav nav,nav.tabs,nav.sitetabs{
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .sitenav nav::-webkit-scrollbar,nav.tabs::-webkit-scrollbar,nav.sitetabs::-webkit-scrollbar{display:none}
  .sitenav nav a,nav.tabs a,nav.sitetabs a{
    flex:0 0 auto;white-space:nowrap;min-width:0;min-height:0;font-size:12px;padding:8px 11px;
  }
  :target{scroll-margin-top:120px}
}

@media(prefers-reduced-motion:reduce){
  .sitenav nav a{transition:none}
}