/* Equipixel visual identity - trial skin
   ========================================================================
   Switched on with ?skin=brand and off with ?skin=off, so the two can be
   compared on the live portal and this one thrown away if it does not work.
   It is a layer over app.css, not a replacement: it re-points the tokens
   app.css already uses and then flattens the few places that are drawn
   rather than tokenised (the bar, the card heads, the shadows).

   The fonts are served from this machine, never from Google: the portal's
   CSP is default-src 'self', and a German practice's browser must not be
   made to announce itself to a third party to read a report. Lexend, Source
   Sans 3 and IBM Plex Mono are all SIL Open Font License 1.1 - see
   static/fonts/README.md. Latin and latin-ext subsets only.
   ====================================================================== */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/lexend-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/lexend-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/lexend-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/lexend-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/lexend-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/lexend-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/source-sans-3-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens
   The identity's palette, mapped onto the names app.css already reads. Only
   the ones named in the brief are used; nothing is invented in between
   except the two tints a filled control needs to show a hover. */
:root[data-skin="brand"] {
  --ep-blue: #3050a0;
  --ep-midnight: #14204a;
  --ep-pixel-blue: #6385cc;
  --ep-descriptor-grey: #8f97aa;
  --ep-mist: #e3e8f3;
  --ep-film-white: #f6f7f9;
  --ep-graphite: #2f3237;
  --ep-slate: #3a4466;
  --ep-hairline: #eef1f7;
  --ep-blue-dashed: #b8c6e6;

  --bg: var(--ep-film-white);
  --surface: #ffffff;
  --surface-2: #f1f4fa;
  --surface-3: var(--ep-mist);
  --border: var(--ep-mist);
  --border-strong: var(--ep-blue-dashed);

  /* Headlines are Midnight and body copy is Slate, so --text carries the
     body colour and the headings take Midnight in their own rule below. */
  --text: var(--ep-slate);
  --text-soft: #6b7390;
  /* Descriptor Grey is 2.9:1 on Film White - below what small print has
     to clear - so the muted text is the same hue, carried far enough
     down to be read. The brief's grey stays for borders and marks. */
  --text-faint: #6f7689;

  --accent: var(--ep-blue);
  --accent-600: #27417f;         /* a filled control darkens towards Midnight */
  --accent-dark: var(--ep-midnight);
  --accent-light: var(--ep-pixel-blue);
  --accent-soft: #e8edf9;
  /* The selection band in the identity's own blue, solid. */
  --selection-bg: var(--ep-blue);
  --selection-fg: #ffffff;
  --accent-tint: #f2f5fc;
  --accent-ring: rgba(99, 133, 204, .55);
  --brand-grey: var(--ep-descriptor-grey);

  --danger: #b4382b; --danger-bg: #f9e9e7;
  --info: var(--ep-blue); --info-bg: #e8edf9;

  /* Square corners everywhere. The only radius the brief keeps is on icon
     tiles and the pixel grid, and this portal has neither yet. */
  --radius: 0; --radius-sm: 0; --radius-pill: 0;

  /* No shadows: depth is white cards on Film White, Mist panels, Midnight
     bands. A dialog is the one exception the brief allows. */
  --shadow-sm: none; --shadow: none; --shadow-brand: none;
  --shadow-lg: 0 12px 32px rgba(20, 32, 74, .18);

  --font-display: 'Lexend', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The night version of the same identity: Midnight as the ground rather than
   a neutral dark, so the two read as one portal at different times of day.
   Two attributes, so it outranks both the block above and app.css's own
   dark palette whichever order they are read in. */
:root[data-skin="brand"][data-theme="dark"] {
  --bg: #0b1430;
  --surface: #121d42;
  --surface-2: #16244e;
  --surface-3: #1d2d5e;
  --border: #243566;
  --border-strong: #38508c;
  --text: #e6ebf7;
  --text-soft: #b3bfdb;
  --text-faint: #8f97aa;

  --accent: #6385cc;
  --accent-600: #3f5c9c;   /* the dropdown panel: its labels must clear 4.5:1 */
  --accent-dark: #3b5491;
  --accent-light: #9fb3e0;
  --accent-soft: #1b2a55;
  --selection-bg: #c9d8f5;
  --selection-fg: #101828;
  --accent-tint: #15224a;
  --accent-ring: rgba(159, 179, 224, .5);

  --danger: #e38a7e; --danger-bg: #351b19;
  --info: #9fb3e0; --info-bg: #16244e;
}

/* ------------------------------------------------------------ typography
   The brief's display scale (64/44/32px) is written for a website. This is
   an application - a worklist of forty rows - so the sizes stay as they
   are and what changes is the family, the weight and the tracking. */
:root[data-skin="brand"] body {
  font-family: var(--font-body);
  font-size: 15.5px;
}
:root[data-skin="brand"] h1,
:root[data-skin="brand"] h2,
:root[data-skin="brand"] h3,
:root[data-skin="brand"] h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ep-midnight);
  letter-spacing: -.015em;
}
:root[data-skin="brand"] h3, :root[data-skin="brand"] h4 { font-weight: 500; }
:root[data-skin="brand"][data-theme="dark"] h1,
:root[data-skin="brand"][data-theme="dark"] h2,
:root[data-skin="brand"][data-theme="dark"] h3,
:root[data-skin="brand"][data-theme="dark"] h4 { color: var(--text); }

/* A tracked uppercase label in Pixel Blue, on the two places this portal
   already treats as labels: a form field's caption and a definition list's
   term. Everything else keeps sentence case. */
/* The brief offers "Pixel Blue or Blue" for labels. On Film White, Pixel
   Blue is 3.6:1 - under what 12px type has to clear - so a label is Blue in
   daylight and Pixel Blue only where it sits on Midnight. */
:root[data-skin="brand"] .field-label,
:root[data-skin="brand"] .field > label,
:root[data-skin="brand"] .dl dt {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ep-blue);
}
:root[data-skin="brand"][data-theme="dark"] .field-label,
:root[data-skin="brand"][data-theme="dark"] .field > label,
:root[data-skin="brand"][data-theme="dark"] .dl dt { color: var(--ep-pixel-blue); }
:root[data-skin="brand"] ul:not([class]) { list-style: square; }
:root[data-skin="brand"] ul:not([class]) li::marker { color: var(--ep-blue); }

/* ----------------------------------------------------------------- shape
   The places app.css draws rather than tokenises: no gradients, no
   shadows, and the bar as a flat Midnight band. */
:root[data-skin="brand"] .topbar {
  background: var(--ep-midnight);
  box-shadow: none;
  border-bottom: 1px solid #243566;
}
:root[data-skin="brand"] .brand {
  border-radius: 0; box-shadow: none;
}
:root[data-skin="brand"] .mainnav a.active,
:root[data-skin="brand"] .langswitch a.active { box-shadow: none; color: var(--ep-midnight); }
:root[data-skin="brand"] .card-head,
:root[data-skin="brand"] .card-foot { background: var(--surface-2); }
:root[data-skin="brand"] .card { box-shadow: none; }
:root[data-skin="brand"] .btn { box-shadow: none; }
:root[data-skin="brand"] .btn-primary { background: var(--ep-blue); border-color: var(--ep-blue); }
:root[data-skin="brand"] .btn-primary:hover { background: var(--ep-midnight); border-color: var(--ep-midnight); }
/* Links are already Equipixel Blue through --accent; what the brief adds is
   the hover to Midnight. It must not reach a link that is drawn as a button
   or as part of the bar - that turned the primary button's white label blue
   on blue, which is to say invisible. */
:root[data-skin="brand"] .page a:not(.btn):hover { color: var(--ep-midnight); }
:root[data-skin="brand"][data-theme="dark"] .page a:not(.btn):hover { color: var(--accent-light); }

/* 2px Pixel Blue, and visible: the ring is what tells a keyboard user where
   they are, so it is not softened away with the shadows. */
:root[data-skin="brand"] :focus-visible {
  outline: 2px solid var(--ep-pixel-blue);
  outline-offset: 1px;
}
:root[data-skin="brand"] table tbody tr { border-color: var(--ep-hairline); }

/* 180ms, nothing scales, nothing bounces. */
:root[data-skin="brand"] .btn,
:root[data-skin="brand"] .mainnav a,
:root[data-skin="brand"] .page a { transition: background .18s cubic-bezier(.2,0,0,1), color .18s cubic-bezier(.2,0,0,1), border-color .18s cubic-bezier(.2,0,0,1); }
:root[data-skin="brand"] .btn:hover { transform: none; }