@charset "UTF-8";
/* ============================================================================
   Local Directory Service - prototype stylesheet
   ----------------------------------------------------------------------------
   Styling follows the Department of Health Style Guide (First Edition,
   June 2026):
     - Colour palette, p.26 (WEB hexadecimal column)
     - Colour contrast compliance, p.28 (WCAG 2.1 Level AA minimum)
     - Mandatory elements / web font exception, p.7
     - Page furniture (Midnight Sky band, Powder Blue rule, curved footer
       wedge), used throughout the guide
   ========================================================================== */

:root {
  /* Primary anchor colour.
     The style guide palette (p.26) gives Midnight Sky twice and inconsistently:
     RGB 31,56,74 (= #1f384a) against WEB 002d48. Sampling www.health.tas.gov.au
     shows the live site uses #1d384a, so the RGB column is the authoritative
     one and the WEB column is wrong. */
  --midnight-sky: #1d384a;

  /* Secondary colours */
  --royal-blue: #0063ed;
  --baby-blue: #82cafc;
  --powder-blue: #9ee8e8;
  --turquoise: #70ffd9;
  --tranquil-teal: #007f81;
  --elixir-emerald: #00bd9a;
  --vitality-violet: #9067e0;
  --healing-heather: #a495cc;
  --graceful-granite: #61737a;
  --neutral-gray: #a1a8c4;
  --rose-quartz: #fc7982;
  --wholesome-wheat: #f2d452;
  --soothing-sandstone: #ce9b67;

  /* Sampled from www.health.tas.gov.au - the accent rule under the primary
     navigation and above the footer, and the navigation strip behind it.
     The cyan is not in the style guide palette but is what the department
     site actually uses; it is applied to rules only, never to text. Hover
     states on dark grounds use Powder Blue, which is in the palette and reads
     at 8.8:1 on Midnight Sky. The one remaining non-rule use is the solid
     pill's hover background - recorded for Communications to confirm. */
  --accent-cyan: #05bdd8;
  --nav-grey: #f3f3f2;

  /* Sampled from www.tas.gov.au itself (the whole-of-government flagship site,
     saved 5 August 2026), for the header top-links bar and the two footer
     bands - the facelift brief was to match that reference. These four sit
     outside the DoH style guide palette exactly as --accent-cyan already does
     above, for the same reason: they are what the government's own site
     actually uses. Recorded here for Communications to confirm alongside it.
     All four are verified >=9.8:1 for white text/links against them. */
  --tasgov-grey-darkest: #404040;   /* top-links bar background */
  --tasgov-yellow: #ffff86;         /* top-links hover, matching the live site */
  --tasgov-blue-darkest: #192733;   /* acknowledgement band background */
  --tasgov-black-alternate: #0d1720; /* mandatory footer band background */

  /* Sampled from www.health.tas.gov.au's own header logo mark
     (tasmanian-health-logo.svg), which draws the crest/wordmark divider as a
     hairline in this grey rather than a heavier near-black rule. */
  --doh-header-divider: #a5a5a5;

  /* Tints derived from the palette (per p.28 guidance on using tints) */
  --powder-tint-15: #eef9f9;
  --powder-tint-30: #dff3f3;
  --midnight-tint-08: #edeff0;
  --rose-tint-25: #fee4e6;
  --wheat-tint-30: #fcf4d5;

  --ink: #1c1c1c;
  --ink-muted: #4a5560;
  --rule: #cfd8dd;

  /* Widened from 1140px so the footer's logo + five links fit on one line
     rather than wrapping. Measured (Arial metrics, since that is what is
     verifiable outside a browser): crest 168px + 18px gap + wordmark ~73px
     + 48px gap + the five links with their icons and 32px gaps between them
     ~807px = ~1114px of content, plus the 24px of padding on each side this
     custom property also sizes = ~1162px. 1200px clears that with some room
     for the gap between the estimate and whatever Open Sans actually
     measures, which was not re-verified against real metrics.
     One token, so it widens the header, nav strip and main content area
     along with the footer, all of which share it - that follows from asking
     to widen the page, not the footer specifically. */
  --shell-max: 1260px;
  --radius: 3px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Open Sans, self-hosted.

   The Tasmanian Government web standard requires a sans-serif WEB font, names
   Open Sans as its example, and requires open licensing - Open Sans is OFL 1.1
   (assets/fonts/open-sans/LICENSE), so it answers all three. Naming it in a
   stack was not enough on its own: nothing served it, so machines without it
   installed fell through to Arial, which is neither a web font nor openly
   licensed.

   The package under assets/fonts/open-sans/ is a Fontsource-style build, split
   by Unicode subset and by variable-font axis (wght-only, wdth-only, or both -
   "standard"). Every weight this stylesheet uses (300 service name, 400 body,
   600 utility bar, 700 headings, 800 the "Health" wordmark) sits on the wght
   axis alone, so the wght-only files are used - they are the smallest of the
   three for the same coverage. Only two of the package's ten subsets are
   loaded: latin, for the text this site actually contains, and latin-ext,
   which is what carries an accented name (a diacritic outside plain ASCII) if
   one appears in the establishment data this site displays. The other eight
   subsets (cyrillic, cyrillic-ext, greek, greek-ext, hebrew, math, symbols,
   vietnamese) serve scripts and notation nothing on this English-language
   intranet site uses, so they are left unloaded rather than sent to every
   visitor.

   The intranet target is isolated: these must be served from the site, never
   from fonts.googleapis.com - which is exactly what self-hosting this package
   achieves. unicode-range values are the standard Google Fonts / Fontsource
   ones for these two subsets, so a browser only downloads whichever file a
   page's actual characters call for. */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/variable/open-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/variable/open-sans-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/variable/open-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/variable/open-sans-latin-ext-wght-italic.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  margin: 0;
  /* Style guide p.7 - web font exception: readable, accessible sans serif with
     a generic sans-serif fallback. Order follows the standard's own worked
     example rather than putting Noto Sans second; see the compliance record for
     why, since the DoH style guide's specimen is Noto Sans. */
  font-family: "Open Sans", Arial, Helvetica, "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: #ffffff;
  /* keeps the footer at the foot of short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--royal-blue); text-decoration: underline; }
a:hover { color: var(--midnight-sky); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--royal-blue);
  outline-offset: 2px;
}
/* Text boxes carry a lighter ring than the rest - a full 3px reads as a heavy
   slab around a field that is already outlined by its own border. */
input:focus-visible {
  outline: 2px solid var(--royal-blue);
  outline-offset: 2px;
}

/* Royal Blue fails 3:1 (WCAG 1.4.11's floor for a focus indicator) against
   every dark band on the page: 1.98:1 on the utility bar's Grey Darkest,
   2.91:1 on the acknowledgement band's Blue Darkest, 3.45:1 on the footer's
   Black Alternate - and the skip link is styled onto Midnight Sky the moment
   it receives focus, where it manages only 2.33:1. White reads >=12:1 against
   all four, so every dark band gets a white ring instead. */
.lds-utility a:focus-visible,
.lds-footer a:focus-visible,
.lds-footer button:focus-visible,
.skip-link:focus-visible {
  outline-color: #fff;
}

/* h5 covers the staff card's "Positions held" heading on the browse page,
   where the card's name is h4 under the staff-type h3 - see staffcard.js */
h1, h2, h3, h4, h5 { color: var(--midnight-sky); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--midnight-sky); color: #fff; padding: .6rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   No-script fallback

   Every page's static markup carries only <main>; the utility bar, brand band,
   navigation and footer are all injected by assets/js/layout.js. With scripting
   off that leaves no Tasmanian Government logo in the header and no footer at
   all, which the web standard requires on every page. These two blocks supply
   both, and are the only furniture that is duplicated per page - unavoidable in
   static HTML with no include mechanism.
   -------------------------------------------------------------------------- */
.lds-noscript-head {
  background: #fff;
  border-bottom: 4px solid var(--accent-cyan);
  padding: 20px 24px;
}
.lds-noscript-head__inner,
.lds-noscript-foot__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}
.lds-noscript-head img { display: block; width: 172px; height: auto; }
.lds-noscript-head p { margin: 0; font-size: .95rem; max-width: 62ch; }

.lds-noscript-foot {
  background: var(--midnight-sky);
  color: #fff;
  padding: 28px 24px;
  margin-top: 40px;
}
.lds-noscript-foot ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: .95rem;
}
.lds-noscript-foot a { color: #fff; }
.lds-noscript-foot a:hover { color: var(--powder-blue); }
.lds-noscript-foot img { display: block; width: 168px; height: auto; }

/* --------------------------------------------------------------------------
   Utility bar - the header's top-links strip, restyled to match the
   whole-of-government site's own header-row-top-links: Grey Darkest rather
   than Midnight Sky, plain links rather than a pill CTA, yellow on hover
   rather than Powder Blue - the one place this facelift keeps that reference
   site's own accent colour, since it is that bar's most recognisable trait.
   -------------------------------------------------------------------------- */
.lds-utility { background: var(--tasgov-grey-darkest); color: #fff; }

.lds-utility__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lds-utility a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .85rem 0;
  color: #fff; font-weight: 500; font-size: .95rem;
  text-decoration: none;
}
.lds-utility a:hover, .lds-utility a:focus-visible { color: var(--tasgov-yellow); }

.lds-ext { display: inline-block; width: .82em; height: .82em; }
.lds-ext svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Brand band - Tasmanian Government logo + DoH wordmark + service name
   -------------------------------------------------------------------------- */
.lds-brand { background: #fff; }

.lds-brand__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 26px 24px;
  min-height: 168px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* The lock-up holds two separate links: the crest goes to www.tas.gov.au, as the
   Tasmanian Government web standard requires of the logo itself, and the
   wordmark with the service name goes to this site's home page. */
.lds-brand__lockup { display: flex; align-items: center; gap: 18px; }

.lds-brand__crestlink { display: block; text-decoration: none; }
.lds-brand__homelink {
  display: flex; align-items: center; gap: 18px;
  text-decoration: none; color: var(--ink);
}

.lds-brand__crest { display: block; width: 172px; height: auto; }

/* Modelled on the hairline the reference site draws inside its own combined
   logo mark (tasmanian-health-logo.svg): a 1px grey rule, inset slightly from
   the top and bottom of the crest rather than running its full height. */
.lds-brand__divider {
  width: 1px; align-self: stretch; margin: 2px 0;
  background: var(--doh-header-divider);
}

/* --------------------------------------------------------------------------
   DoH wordmark - shared by the brand band and the footer

   Live text, but drawn to the proportions of the supplied mark
   (assets/img/doh-logo-black.png): a light "Department of" sitting directly on
   a heavy "Health", the two lines the same measure, tight leading.

   Measured off that PNG (129x59 canvas, 104x44 of ink):
     cap heights   "Health" 24px : "Department of" 10.5px   = 1 : 0.44
     line widths   104px : 104px                            = equal measure
     baselines     31.5px apart                             = 0.94em of "Health"

   .44em below reproduces the cap-height ratio. That alone leaves the upper
   line about 10% short of the measure, which is why the supplied mark carries
   tracking of its own: 104px of ink against roughly 94px of natural setting.
   The exact tracking depends on whichever font resolves, so it is measured and
   applied by fitWordmarks() in assets/js/layout.js, which is what makes the
   two lines flush on both edges.
   -------------------------------------------------------------------------- */
.lds-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.5rem;          /* sizes the whole mark - "Health" is set at 1em */
  line-height: 1;

  /* alignWordmarks() in assets/js/layout.js sets top, bringing this mark's cap
     line onto the cap line of the Tasmanian Government logo beside it. It is
     measured at the zoom in force rather than fixed here, because no single
     pixel value is right at both 100% and 300%. */
  position: relative;

  /* Softened to sit with the Tasmanian Government logo beside it. That PNG is
     not blurred - its edges carry one pixel of antialiasing - but it is a
     400px image drawn at 172px, and the 2.33x downscale spreads each edge over
     about a screen pixel. Live text is hinted and subpixel-antialiased, so it
     reads far crisper than the mark it sits next to.

     Applying any filter also drops the text to grayscale antialiasing, which
     accounts for much of the difference on its own; the blur closes the rest.
     Tune it here, but keep it small: the stems of "Health" are only ~3.4px
     wide at this size, so past about 0.5px the mark starts to dissolve rather
     than soften. */
  --wordmark-softness: .35px;
  filter: blur(var(--wordmark-softness));
}
.lds-wordmark span {
  font-size: .44em;
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
}
.lds-wordmark strong {
  font-size: 1em;
  font-weight: 800;           /* Arial stops at 700; 800 picks up a heavier
                                 face if one is ever installed or webfonted */
  line-height: .95;
  letter-spacing: -.005em;
  white-space: nowrap;
}

.lds-brand__wordmark { color: var(--ink); }

.lds-brand__right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* Search pill - white field with a Midnight Sky circular submit button */
.lds-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 3px solid var(--midnight-sky);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
  width: min(360px, 100%);
}
/* One ring only: it follows the pill's rounded edge, and the field inside keeps
   no outline of its own so the two do not stack up. */
.lds-search:focus-within { outline: 2px solid var(--royal-blue); outline-offset: 2px; }
.lds-search__input:focus,
.lds-search__input:focus-visible { outline: none; }
.lds-search__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 1rem;
  padding: .35rem 0;
  color: var(--ink);
}
.lds-search__input::placeholder { color: var(--graceful-granite); }
.lds-search__btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--midnight-sky); color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
}
.lds-search__btn:hover { background: #19303f; }
.lds-search__btn svg { display: block; width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Primary navigation - pale strip, active item a white tab on a cyan bar
   -------------------------------------------------------------------------- */
.lds-nav { background: var(--nav-grey); }

.lds-nav__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 24px;
}

.lds-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  flex-wrap: wrap;
}
.lds-nav__list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 0 1.15rem;
  color: var(--midnight-sky);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
/* Hover and focus take the same white tab as the current page, matching the
   department site's rollover. */
.lds-nav__list a:hover,
.lds-nav__list a:focus-visible,
.lds-nav__list a[aria-current="page"] { background: #fff; }

/* The cyan bar is drawn as an overlay rather than a bottom border. A 6px border
   would sit inside the 80px box (box-sizing: border-box), leaving 74px for the
   flex line and centring the label 3px above the strip's true centre. Taking it
   out of layout lets the text centre on the full height, as the department site
   does.

   Every item carries the bar; it is scaled to nothing until the item is hovered,
   focused or current, so it grows out from the centre. This is the department
   site's own mechanism - scaleX(0) to scaleX(1) with opacity over .3s
   ease-in-out - rather than an animated width, which would relayout each frame. */
/* Tranquil Teal rather than the department site's cyan: --accent-cyan reads
   2.04:1 against the strip and 2.26:1 against the white tab it sits under,
   both under the 3:1 WCAG 1.4.11 asks of a state indicator. Teal reads 4.49:1
   and 4.82:1 on the same two grounds, and is in the style guide palette. */
.lds-nav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--tranquil-teal);
  transform: scaleX(0);
  opacity: 0;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
}
.lds-nav__list a:hover::after,
.lds-nav__list a:focus-visible::after,
.lds-nav__list a[aria-current="page"]::after {
  transform: scaleX(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .lds-nav__list a::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Main content shell
   -------------------------------------------------------------------------- */
.lds-main {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 26px 24px 56px;
  min-height: 58vh;
}

.lds-page-head { margin-bottom: 1.4rem; }
.lds-page-head p { color: var(--ink-muted); max-width: 62ch; margin-bottom: 0; }

.lds-breadcrumb {
  font-size: .82rem;
  color: var(--ink-muted);
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .1rem;
}
/* Graceful Granite rather than Neutral Gray: the separator is generated content,
   which some screen readers expose, and #a1a8c4 on white is only 2.4:1. */
.lds-breadcrumb li + li::before { content: "›"; margin: 0 .4rem 0 .2rem; color: var(--graceful-granite); }

/* --------------------------------------------------------------------------
   Footer - now matches the whole-of-government reference site's own footer
   structure directly rather than adapting it: a cyan rule (this department's
   own accent, not the reference's), a Blue Darkest acknowledgement band
   framed top and bottom by a white rule and centred, then a near-black Black
   Alternate band carrying the logo beside the same five mandatory links the
   reference site itself carries, in the same order. The three-column layout
   and the copyright line this replaced are gone.
   -------------------------------------------------------------------------- */
.lds-footer { margin-top: auto; }

.lds-footer__rule { height: 4px; background: var(--accent-cyan); }

.lds-footer__acknowledgement { background: var(--tasgov-blue-darkest); padding: 34px 0; }
.lds-footer__acknowledgement-inner { max-width: var(--shell-max); margin: 0 auto; padding: 0 24px; }
.lds-footer__ack {
  margin: 0; padding: 22px 20px;
  border-top: 2px solid #fff; border-bottom: 2px solid #fff;
  color: #fff; text-align: center; font-size: .95rem;
}

.lds-footer__body {
  background: var(--tasgov-black-alternate);
  color: #fff;
  font-size: 1rem;
  padding: 52px 0 40px;
}
.lds-footer__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Logo and link list side by side, matching the reference site's own
   .footer-logo-nav: the two sit level with each other down to a narrow
   viewport (see the 760px breakpoint below, matching the reference's own
   42rem/672px switch to a stacked column), rather than the links wrapping
   below the logo the moment space is tight - that was this rule's own doing
   the first time it carried flex-wrap here as well as on .lds-footer__links,
   which is where wrapping actually belongs (its own items, not this row). */
.lds-footer__logonav { display: flex; align-items: flex-end; gap: 24px 48px; }

.lds-footer__lockup { display: flex; align-items: center; gap: 18px; }
.lds-footer__crestlink { display: block; text-decoration: none; }
.lds-footer__crest { display: block; width: 168px; height: auto; }

.lds-footer__links {
  margin: 0; padding: 0; list-style: none; font-size: .95rem;
  display: flex; flex-wrap: wrap; gap: 8px 32px;
}
/* No underline until hover, matching the reference footer's own convention -
   safe here because a footer link list has nothing else in the line to
   distinguish a link from, unlike a link inside a paragraph of prose. */
.lds-footer__links a { color: #fff; text-decoration: none; }
.lds-footer__links a:hover { color: var(--powder-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Landing page
   -------------------------------------------------------------------------- */
.lds-landing { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; }

.lds-landing__intro h1 { font-size: 2.1rem; margin-bottom: 1.6rem; }

.lds-options { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 14px; }
.lds-option {
  display: block;
  border: 1px solid var(--rule);
  border-left: 6px solid var(--tranquil-teal);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.lds-option:hover, .lds-option:focus-visible { background: var(--powder-tint-15); border-left-color: var(--midnight-sky); }
.lds-option__title { display: block; font-size: 1.12rem; font-weight: 700; color: var(--royal-blue); text-decoration: underline; }
.lds-option:hover .lds-option__title { color: var(--midnight-sky); }
.lds-option__desc { display: block; margin-top: .2rem; color: var(--ink-muted); font-size: .92rem; }
.lds-options li:nth-child(2) .lds-option { border-left-color: var(--vitality-violet); }
.lds-options li:nth-child(3) .lds-option { border-left-color: var(--soothing-sandstone); }

.lds-landing__aside { text-align: center; }
.lds-landing__graphic { max-width: 330px; width: 100%; height: auto; }

.lds-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.lds-stat {
  background: var(--powder-tint-15);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 130px;
}
.lds-stat__value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--midnight-sky); line-height: 1.1; }
.lds-stat__label { display: block; font-size: .8rem; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Browse - two-column tree + detail
   -------------------------------------------------------------------------- */
.lds-browse { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }

/* The tree follows the explorer-style pattern in examples/tree example.jpg: a
   filter field above a scrolling list of compact rows, each row an expander
   chevron (examples/tree buttons.png), an organisation-unit icon and the unit
   name. Indentation alone carries the nesting - no connector lines. */
.lds-tree-pane { background: #fff; border-right: 1px solid var(--rule); padding: 12px 10px 16px; }
.lds-tree-pane h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--graceful-granite); margin-bottom: .5rem; padding-left: 2px; }

.lds-treefilter {
  display: flex; align-items: center; gap: 6px;
  background: var(--midnight-tint-08);
  /* Graceful Granite, not Rule: #cfd8dd measured 1.25-1.45:1 against every
     ground it touched here, well under the 3:1 WCAG 1.4.11 asks of an input's
     boundary. Granite reads 4.29:1 against this bar. */
  border: 1px solid var(--graceful-granite);
  border-radius: var(--radius);
  padding: 4px 6px;
  margin-bottom: 8px;
}
.lds-treefilter__funnel { flex: 0 0 auto; width: 15px; height: 15px; color: var(--graceful-granite); }
.lds-treefilter__field {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  background: #fff;
  border: 1px solid var(--graceful-granite);
  border-radius: 999px;
  padding: 2px 9px;
}
/* Same single 2px ring as the brand-band search pill, following the rounded
   edge. The offset is 1px rather than 2px because the filter bar around it only
   has 4px of vertical padding to give. */
.lds-treefilter__field:focus-within {
  border-color: var(--royal-blue);
  outline: 2px solid var(--royal-blue);
  outline-offset: 1px;
}
.lds-treefilter__icon { flex: 0 0 auto; width: 13px; height: 13px; color: var(--graceful-granite); }
.lds-treefilter__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; padding: 3px 0;
  font: inherit; font-size: .82rem; color: var(--ink);
}
.lds-treefilter__input:focus,
.lds-treefilter__input:focus-visible { outline: none; }
/* Its label is visually hidden, so this placeholder is the only visible cue to
   what the field does; left unset it would render at whatever the user agent
   defaults to instead of a measured colour. Matches the header search pill's
   own placeholder rule (4.95:1 on white). */
.lds-treefilter__input::placeholder { color: var(--graceful-granite); }

.lds-tree-pane__scroll { max-height: 560px; overflow: auto; }

.lds-tree, .lds-tree ul { list-style: none; margin: 0; padding: 0; }
.lds-tree ul { padding-left: 16px; }
.lds-tree li { margin: 0; }

.lds-tree__row { display: flex; align-items: flex-start; gap: 4px; padding: 1px 2px; border-radius: 2px; }
.lds-tree__row:hover { background: var(--powder-tint-15); }

.lds-tree__toggle {
  flex: 0 0 auto;
  width: 14px; height: 14px; margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--midnight-sky);
  cursor: pointer;
}
.lds-tree__toggle:hover { color: var(--royal-blue); }
.lds-tree__toggle--leaf { cursor: default; visibility: hidden; }

/* Every glyph is drawn in Midnight Sky (p.26) - the shape carries the level,
   not the colour. The agency house is a shade larger to anchor the top. */
.lds-tree__icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--midnight-sky); }
.lds-tree__icon--agency { width: 16px; height: 16px; margin-top: 1px; }

.lds-treefilter__funnel svg, .lds-treefilter__icon svg,
.lds-tree__toggle svg, .lds-tree__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }

.lds-tree__link {
  flex: 1 1 auto; min-width: 0;
  font-size: .84rem; line-height: 1.35;
  padding: 1px 4px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
}
.lds-tree__link:hover { text-decoration: underline; }
/* matches the aria-current="page" that browse.js sets */
.lds-tree__link[aria-current="page"] {
  background: var(--powder-tint-30);
  box-shadow: inset 0 0 0 1px var(--powder-blue);
  color: var(--midnight-sky);
  font-weight: 700;
}

.lds-tree__empty { font-size: .82rem; color: var(--ink-muted); font-style: italic; margin: 10px 2px; }

.lds-detail-pane { padding: 20px 24px 28px; min-width: 0; }

.lds-detail__head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.lds-detail__head h2 { font-size: 1.45rem; margin: 0; flex: 1 1 auto; }

.lds-addresses { display: flex; gap: 44px; flex-wrap: wrap; margin: 18px 0 4px; }
.lds-address { flex: 0 1 290px; min-width: 190px; }
.lds-address h3, .lds-address h4 { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--graceful-granite); margin: 0 0 .25rem; }
.lds-address p { margin: 0; font-size: .95rem; }
.lds-address__note { font-size: .78rem; color: var(--ink-muted); font-style: italic; margin-top: .2rem; }
.lds-address__none { color: var(--ink-muted); font-style: italic; }

/* minmax(0, ...) rather than the bare max-content/1fr this used to be: a bare
   1fr's automatic minimum is its content's min-content, and an email address
   or URL has no break point, so the grid could not shrink below its widest
   value's full width - forcing the whole page to scroll horizontally at a
   reflow (320px-equivalent) viewport, which WCAG 1.4.10 rules out. The same
   fix applies to .lds-staffcard__grid, .lds-position__facts and
   .lds-resultrow__facts below. */
.lds-contact-list { margin: 14px 0 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 2px 14px; font-size: .92rem; }
.lds-contact-list dt { color: var(--graceful-granite); }
.lds-contact-list dd { margin: 0; overflow-wrap: anywhere; }

.lds-function { margin-top: 14px; padding: 12px 14px; background: var(--powder-tint-15); border-radius: var(--radius); font-size: .92rem; }
.lds-function h3 { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--graceful-granite); margin-bottom: .2rem; }

.lds-sortbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: 22px; padding-top: 10px;
}
.lds-sortbar__label { font-size: .85rem; font-weight: 700; color: var(--midnight-sky); }
.lds-sortbar__links { font-size: .85rem; }
.lds-sortbar__links button {
  background: none; border: 0; padding: 0 .1rem; margin-left: .5rem;
  font: inherit; color: var(--royal-blue); cursor: pointer; text-decoration: underline;
}
.lds-sortbar__links button[aria-pressed="true"] { color: var(--midnight-sky); font-weight: 700; text-decoration: none; }

/* --------------------------------------------------------------------------
   Staff list
   -------------------------------------------------------------------------- */
.lds-stafftype { margin-top: 20px; }
.lds-stafftype__heading {
  font-size: 1rem;
  color: var(--midnight-sky);
  margin: 0 0 .35rem;
  padding-bottom: .2rem;
  border-bottom: 2px solid var(--accent-cyan);
}
.lds-stafftype__count { font-weight: 400; font-size: .82rem; color: var(--ink-muted); }

.lds-stafflist { list-style: none; margin: 0; padding: 0; }
.lds-stafflist > li { border-bottom: 1px solid var(--midnight-tint-08); }

.lds-staffrow {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) 130px 130px minmax(180px, 1.6fr);
  gap: 4px 14px;
  align-items: baseline;
  width: 100%;
  padding: 5px 6px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lds-staffrow:hover { background: var(--powder-tint-15); }
.lds-staffrow[aria-expanded="true"] { background: var(--powder-tint-30); }

.lds-staffrow__name { color: var(--royal-blue); text-decoration: underline; }
.lds-staffrow:hover .lds-staffrow__name { color: var(--midnight-sky); }
.lds-staffrow__phone, .lds-staffrow__mobile { font-size: .88rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lds-staffrow__position { font-size: .92rem; }

/* Requirement B8 - names and position titles with delegations in bold */
.lds-staffrow--delegated .lds-staffrow__name,
.lds-staffrow--delegated .lds-staffrow__position { font-weight: 700; }
.lds-staffrow--delegated .lds-staffrow__position { color: var(--midnight-sky); }

/* inherits the body stack - the standard asks for sans-serif on all text, and
   the glyph is aria-hidden decoration either way. Ink-muted rather than
   Graceful Granite: on an expanded row's Powder Blue tint background, Granite
   measured 4.30:1, just under the 4.5:1 this text-sized glyph needs; the muted
   token clears 6.6:1 there and 7.6:1 on white. */
/* display:inline-block is load-bearing, not tidying. The glyph sits inside
   .lds-staffrow__name / .lds-resultrow__name, both of which carry the link's
   underline, and a descendant cannot switch an ancestor's text-decoration off -
   the ancestor draws it straight through. Text decorations are not propagated
   into an atomic inline-level box, so making the glyph one is what lifts the
   underline off it while leaving the name underlined and the button unchanged. */
.lds-staffrow__toggle { display: inline-block; color: var(--ink-muted); margin-right: .35rem; }

/* --------------------------------------------------------------------------
   Staff detail card (shared by browse and search results)
   -------------------------------------------------------------------------- */
.lds-staffcard {
  background: var(--wheat-tint-30);
  border: 1px solid #e3d69b;
  border-radius: var(--radius);
  margin: 2px 6px 12px;
  padding: 14px 16px;
}
.lds-staffcard__head { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.lds-staffcard__name { font-size: 1.05rem; font-weight: 700; color: var(--midnight-sky); margin: 0; }
.lds-staffcard__close {
  margin-left: auto; background: none; border: 0; padding: 0;
  font: inherit; font-size: .85rem; color: var(--royal-blue); cursor: pointer; text-decoration: underline;
}

.lds-staffcard__grid { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 1px 14px; margin: 10px 0 0; font-size: .92rem; }
.lds-staffcard__grid dt { font-weight: 700; color: var(--midnight-sky); }
.lds-staffcard__grid dd { margin: 0; overflow-wrap: anywhere; }

.lds-positions { margin-top: 14px; }
/* Graceful Granite falls to 4.49:1 on the card's Wholesome Wheat tint, just
   under AA for normal text; the muted ink token reads 6.9:1 there and 7.6:1 on
   white, so it is used for every label inside the card. */
.lds-positions__heading { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 0 0 .4rem; }
.lds-position { margin: 0 0 12px; }
.lds-position:last-child { margin-bottom: 0; }
.lds-position__title { font-weight: 700; color: var(--midnight-sky); font-size: .98rem; }
.lds-position__primary {
  display: inline-block; margin-left: .5rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--midnight-sky); color: #fff;
  padding: .08rem .38rem; border-radius: 2px; vertical-align: 1px;
}
.lds-position__facts { margin: .1rem 0 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 0 12px; font-size: .88rem; }
.lds-position__facts dt { color: var(--ink-muted); }
.lds-position__facts dd { margin: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Search forms and results
   -------------------------------------------------------------------------- */
.lds-searchform {
  border: 1px solid var(--rule);
  border-top: 4px solid var(--midnight-sky);
  border-radius: var(--radius);
  background: var(--powder-tint-15);
  padding: 18px 20px 20px;
  margin-bottom: 26px;
}
.lds-field { display: grid; grid-template-columns: 150px minmax(0, 420px); gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.lds-field label { font-weight: 700; font-size: .92rem; color: var(--midnight-sky); }
.lds-field input[type="text"] {
  width: 100%;
  padding: .42rem .55rem;
  border: 1px solid var(--graceful-granite);
  border-radius: 2px;
  font: inherit;
  background: #fff;
}
.lds-searchform__actions { display: flex; gap: .7rem; align-items: center; margin-top: 16px; flex-wrap: wrap; }

.lds-btn {
  font: inherit;
  font-weight: 700;
  padding: .48rem 1.3rem;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid var(--midnight-sky);
  background: var(--midnight-sky);
  color: #fff;
}
.lds-btn:hover { background: #19303f; }
.lds-btn--secondary { background: #fff; color: var(--midnight-sky); }
.lds-btn--secondary:hover { background: var(--powder-tint-30); }

.lds-hint { font-size: .85rem; margin-left: .4rem; }

.lds-resultbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--accent-cyan);
  padding-bottom: .35rem; margin-bottom: .2rem;
}
.lds-resultbar__count { font-size: 1.05rem; font-weight: 700; color: var(--midnight-sky); margin: 0; }

.lds-resultlist { list-style: none; margin: 0; padding: 0; }
.lds-resultlist > li { border-bottom: 1px solid var(--midnight-tint-08); }

.lds-resultrow {
  display: block; width: 100%;
  padding: 8px 6px;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.lds-resultrow:hover { background: var(--powder-tint-15); }
.lds-resultrow[aria-expanded="true"] { background: var(--powder-tint-30); }
.lds-resultrow__name { font-weight: 700; color: var(--royal-blue); text-decoration: underline; }
.lds-resultrow:hover .lds-resultrow__name { color: var(--midnight-sky); }

/* Organisation unit results are links straight into the Department Structure */
a.lds-resultrow { color: inherit; text-decoration: none; }
.lds-resultrow__meta { margin-left: .6rem; font-size: .78rem; color: var(--graceful-granite); }
.lds-resultrow__facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 0 14px; margin: .2rem 0 0 1.2rem; font-size: .9rem; }
.lds-resultrow__facts dt { color: var(--graceful-granite); }
.lds-resultrow__facts dd { margin: 0; overflow-wrap: anywhere; }

/* Replaces an inline style that hardcoded #002d48 - the exact Midnight Sky
   value the style guide's WEB column gives and the live site does not use
   (see the --midnight-sky note above). Same treatment browse.js already gives
   a delegated position: bold, in the real token. */
.lds-resultrow__position--delegated { font-weight: 700; color: var(--midnight-sky); }

.lds-oulink { display: inline; color: var(--royal-blue); }

.lds-empty {
  background: var(--powder-tint-15);
  border-left: 5px solid var(--neutral-gray);
  padding: 14px 16px;
  border-radius: var(--radius);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Prose pages (help, request a change)
   -------------------------------------------------------------------------- */
.lds-prose { max-width: 78ch; }
.lds-prose h2 { margin-top: 1.8rem; }
.lds-prose h3 { margin-top: 1.3rem; }
.lds-prose ul, .lds-prose ol { padding-left: 1.4rem; }
.lds-prose li { margin-bottom: .35rem; }
.lds-prose dl { margin: 0 0 1em; }
.lds-prose dt { font-weight: 700; color: var(--midnight-sky); margin-top: .7rem; }
.lds-prose dd { margin: 0 0 0 1.2rem; }

.lds-callout {
  border-left: 5px solid var(--tranquil-teal);
  background: var(--powder-tint-15);
  padding: 14px 18px;
  border-radius: var(--radius);
  margin: 0 0 1.6rem;
}
.lds-callout h2 { margin-top: 0; }
.lds-callout--redirect { border-left-color: var(--soothing-sandstone); background: var(--wheat-tint-30); }

.lds-kb-url {
  display: block;
  font-size: .88rem;
  word-break: break-all;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .5rem .6rem;
  margin: .6rem 0 1rem;
}

/* Unresolved content in the draft accessibility statement. Deliberately loud, so
   that it cannot reach a published page unnoticed. */
.lds-todo {
  background: var(--wheat-tint-30);
  border-bottom: 2px dotted var(--soothing-sandstone);
  padding: 0 .25em;
  font-style: italic;
}

/* Prototype notes - clearly marked as commentary, not part of the product */
.lds-protonote {
  margin-top: 2.6rem;
  border: 1px dashed var(--healing-heather);
  border-radius: var(--radius);
  background: #f8f6fc;
  padding: 14px 18px;
  font-size: .86rem;
  color: var(--ink-muted);
}
/* Midnight Sky, not Vitality Violet: the violet reads only 3.76:1 on this tint
   and fails 1.4.3. The dashed Healing Heather border still marks the block out. */
.lds-protonote h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--midnight-sky); margin: 0 0 .5rem; }
.lds-protonote ul { margin: 0; padding-left: 1.2rem; }
/* code samples keep the body stack too, so no text on the site falls back to a
   non-sans-serif family; the tint alone marks them out */
.lds-protonote code { font-family: inherit; font-size: .95em; background: var(--midnight-tint-08); padding: 0 .2em; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* 1108px, not 1080px: .lds-browse's overflow:hidden combines with
   .lds-staffrow's four fixed-minimum columns (190+130+130+180px plus three
   14px gaps = 672px) to clip up to 27px off the right-hand column in the gap
   between the two thresholds, with no scrollbar to reveal it (WCAG 1.4.10).
   Collapsing the staff-row grid 28px earlier removes the gap. */
@media (max-width: 1108px) {
  .lds-landing { grid-template-columns: 1fr; }
  .lds-landing__aside { order: -1; }
  .lds-landing__graphic { max-width: 240px; }
  .lds-browse { grid-template-columns: 1fr; }
  .lds-tree-pane { border-right: 0; border-bottom: 1px solid var(--rule); }
  .lds-tree-pane__scroll { max-height: 60vh; }
  .lds-staffrow { grid-template-columns: minmax(0, 1fr) 120px; }
  .lds-staffrow__position { grid-column: 1 / -1; }

  /* The brand band's right-hand block drops below the lock-up rather than
     squeezing it. */
  .lds-brand__right { margin-left: 0; align-items: flex-start; width: 100%; }
}

@media (max-width: 760px) {
  .lds-brand__lockup { flex-wrap: wrap; gap: 12px; }
  .lds-brand__inner { min-height: 0; }
  .lds-nav__list a { min-height: 56px; padding: 0 .85rem; font-size: .95rem; }
  .lds-field { grid-template-columns: 1fr; }
  .lds-staffrow { grid-template-columns: 1fr; }
  .lds-footer__lockup { flex-wrap: wrap; }
  /* matches the reference site's own switch to a stacked column at 42rem */
  .lds-footer__logonav { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Print (browser print of the org unit detail drops the surrounding furniture)
   -------------------------------------------------------------------------- */
@media print {
  .lds-utility, .lds-nav, .lds-tree-pane, .lds-search,
  .lds-protonote, .skip-link,
  .lds-footer__rule { display: none !important; }
  .lds-browse { border: 0; display: block; }
  .lds-footer__acknowledgement { background: #fff; padding: 12px 0; }
  .lds-footer__ack { border-color: #000; }
  .lds-footer__body {
    background: #fff; color: #000; border-top: 1px solid #000; padding: 12px 0;
  }
  .lds-footer__links a, .lds-footer__ack { color: #000; }
  /* the reversed crest is invisible on white */
  .lds-footer__crest { filter: invert(1); }
  /* and so is the whole no-script footer, on the pages printed without scripting */
  .lds-noscript-foot { background: #fff; color: #000; border-top: 1px solid #000; }
  .lds-noscript-foot a { color: #000; }
  .lds-noscript-foot img { filter: invert(1); }
  .lds-noscript-head { border-bottom: 1px solid #000; }
  body { font-size: 11pt; }
  a { color: #000; }
}