/*
  The application's own styling.

  The look follows Procyon Green — a green header band over a cool grey page, content on white
  panels, restrained typography. None of that template's files are here: no stylesheet of theirs,
  no image slices, no JavaScript. Everything below is written against the same custom properties
  the branding system already emits, which is what lets an enterprise replace the palette without
  touching a rule.

  Two deliberate departures from the original. Its green measured 3.54:1 against white and its
  body grey 3.84:1 — both under the 4.5:1 needed for body text — so both are deepened here. On a
  system that shows hiring decisions about people, a shortlist somebody squints at is a real cost.

  And the gradients, rounded corners and shadows are CSS rather than the sliced PNGs the original
  used. Nothing to ship, nothing to cache, and they follow the theme when an enterprise changes it.
*/

:root {
    /*
      Kept in step with Theme.DEFAULT. The served theme.css redefines these, but it arrives as a
      second request — so if these disagreed there would be a flash of the wrong palette first.
    */
    --ink: #2f3a3d; --muted: #5f6b70; --line: #c8d2d5; --bg: #dbe1e3;
    --accent: #46801b; --warn: #8a5a00; --gap: #9b2c2c; --ok: #46801b;

    /*
      Not themed. White is the surface everything is read against, and letting it be chosen would
      let an enterprise pick a panel colour that its own text tokens were never measured against.
    */
    --panel: #ffffff;
    --panel-edge: 0 1px 3px rgba(20, 34, 38, .09);
}

* { box-sizing: border-box; }

body {
    margin: 0; background: var(--bg); color: var(--ink);
    /*
      Sans for the body, Georgia for headings below. The original sets a 14px serif throughout,
      which is lovely on a brochure page and hard work on a table of forty ranked candidates —
      and tables are most of what this application shows.
    */
    font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex; flex-direction: column; min-height: 100vh;
}

h1, h2, h3, .brand, .big, .tile .value {
    font-family: Georgia, "Times New Roman", ui-serif, serif;
    font-weight: 600;
}

/* ---------------------------------------------------------------- the band
   The header is a full-width colour band with a soft shadow beneath it — the one piece of the
   original's identity that is unmistakably itself. Drawn here rather than cut from an image,
   so it follows --accent when an enterprise chooses its own. */

header {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    padding: 1.15rem 2rem;
    background: var(--accent);
    /* A slight lift towards the top, which is what the original's gradient slice did. */
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .10), rgba(0, 0, 0, .06));
    box-shadow: 0 4px 8px rgba(20, 34, 38, .22);
    color: #fff;
    position: relative; z-index: 1;
}

.brand { font-size: 1.3rem; color: #fff; text-decoration: none; letter-spacing: .01em; }
.brand:hover { text-decoration: underline; }

/* Muted text is measured against white panels; on the band it has to be white-on-green. */
header .tagline, header .who { color: rgba(255, 255, 255, .82); font-size: .82rem; }
header nav { margin-left: auto; display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
header nav a, header .nav { color: #fff; text-decoration: none; font-size: .85rem; }
/*
  A link inside the header blurb, which an enterprise writes and the branding screen explicitly
  invites: "Bold, italics, links and lists are kept". Without this it takes the global link
  colour — var(--accent) — which is the colour of the band behind it, so a mailto: to an
  enterprise's own HR address rendered as invisible text on its own header. Underlined as well
  as coloured, because the band is already a colour and hue alone would not carry it.
*/
header .tagline a { color: #fff; text-decoration: underline; }
header nav a:hover { text-decoration: underline; }
/* UX1: the nav groups. A label above its own links, so the header reads as sections rather than
   a wall of nineteen. Presentation only -- the grouping is in the markup and the permissions are
   unchanged.

   UX8: each group is a <details>, so it collapses with no JavaScript and arrives with keyboard
   support and the right ARIA semantics already attached. The group holding the current page is
   rendered open by the server; nothing is remembered between pages, which would need storage. */
/* The <details> itself stays a block. `display:flex` on <details> is not something browsers
   agree about -- with it, the links laid out in a row instead of a column -- so the flex
   container is a plain child element and the disclosure element is left to do one job. */
header .nav-group { display: block; }
header .nav-group-items { display: flex; flex-direction: column; gap: .15rem; margin-top: .2rem; }
header .nav-group-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em;
    opacity: .55; cursor: pointer; list-style: none; user-select: none; }
/* The default disclosure triangle sits oddly against an uppercase micro-label; a rotating caret
   of our own lines up with the text and says the same thing. */
header .nav-group-label::-webkit-details-marker { display: none; }
header .nav-group-label::after { content: "\25B8"; margin-left: .3rem; display: inline-block;
    transition: transform .12s ease; }
header .nav-group[open] > .nav-group-label::after { transform: rotate(90deg); }
header .nav-group-label:hover { opacity: .8; }
header .nav-group-label:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
header .nav-group a { font-size: .85rem; }

/* The page you are on. Never colour alone (WCAG 1.4.1, and UX4's floor): the weight and the rule
   down the side carry it for anybody who cannot tell the colours apart. */
header nav a.here { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
header .nav-group a.here { border-left: 2px solid currentColor; padding-left: .35rem;
    margin-left: -.35rem; text-decoration: none; }

/* ---------------------------------------------------------------- the page */

main {
    max-width: 64rem; width: 100%; margin: 1.75rem auto; padding: 1.75rem 2rem 2.25rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
    box-shadow: var(--panel-edge);
    flex: 1 0 auto;
}

h1 { font-size: 1.75rem; margin: 0 0 .3rem; color: var(--ink); }
h2 {
    font-size: 1.2rem; margin: 2rem 0 .6rem; color: var(--ink);
    padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
h3 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
.subtitle { margin: 0 0 .5rem; color: var(--muted); font-size: 1rem; }
.tagline, .meta, .note, .empty { color: var(--muted); font-size: .85rem; }
a { color: var(--accent); }
/* WCAG 2.4.1. Off-screen rather than display:none, because a hidden element is not focusable and
   a skip link that cannot be focused is decoration. It becomes visible on focus -- one that stays
   invisible while focused strands the person using it (`ADR 96`). */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: .55rem .9rem; background: var(--ink); color: var(--page);
    text-decoration: none; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* Links get an explicit ring too. Nothing here sets outline:none, so the browser default already
   worked, but "already worked by accident" is one careless rule away from not. */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    background: #f4f7f8; border-bottom: 2px solid var(--line);
}
/* A quiet stripe, which is how the original keeps a long table readable without heavy rules. */
tbody tr:nth-child(even) td { background: #fafcfc; }
tbody tr:hover td { background: #f1f6f2; }
tr.gap td, tbody tr.gap:nth-child(even) td { background: #fdf4f4; }
tr.must td:first-child { font-weight: 600; }
tfoot td { border-top: 2px solid var(--line); border-bottom: none; }

/* ---------------------------------------------------------------- controls */

input, select, textarea {
    padding: .48rem .6rem; border: 1px solid var(--line); border-radius: 2px;
    font: inherit; font-size: .9rem; min-width: 18rem; background: #fff; color: var(--ink);
}
textarea { width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
/*
  A colour well, sized to be judged rather than merely identified. Browsers inset the
  swatch by the padding and border, so both stay small and the colour keeps the room.
*/
input[type="color"] {
    min-width: 0; width: 100%; height: 3rem; padding: .2rem; cursor: pointer;
    border-radius: 3px; background: #fff;
}
input[type="radio"], input[type="checkbox"] { min-width: 0; }

button {
    padding: .5rem 1.1rem; border: 1px solid var(--accent); border-radius: 2px;
    background: var(--accent);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .14), rgba(0, 0, 0, .07));
    color: #fff; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
button:hover { background-image: linear-gradient(to bottom, rgba(255, 255, 255, .24), rgba(0, 0, 0, .02)); }
button:active { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .10), rgba(0, 0, 0, .04)); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .25rem; margin-top: .8rem; }

/* ---------------------------------------------------------------- panels */

.panel {
    border: 1px solid var(--line); border-radius: 3px; background: #fbfdfd;
    padding: 1.1rem 1.25rem; margin: 1.25rem 0;
}
.chip {
    display: inline-block; padding: .12rem .5rem; margin: 0 .2rem .2rem 0;
    border: 1px solid var(--line); border-radius: 2rem; font-size: .78rem; background: #fff;
}
.citations { margin: .25rem 0 0; padding-left: 1rem; font-size: .82rem; color: var(--muted); }
.raw { color: var(--muted); font-size: .82rem; }
.tabs { display: flex; gap: 1rem; margin: 1rem 0; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.tabs a { color: var(--accent); text-decoration: none; font-size: .9rem; }
.tabs a:hover { text-decoration: underline; }

.scorecard {
    display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: 3px; background: #fbfdfd; padding: 1.25rem;
}
.overall { text-align: center; }
.big { display: block; font-size: 2.7rem; font-weight: 700; line-height: 1; color: var(--accent); }
.label, .confidence, .coverage { color: var(--muted); font-size: .78rem; }
.tables { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.table-score { display: flex; flex-direction: column; }
.table-score .kind { font-size: .78rem; text-transform: uppercase; color: var(--muted); }
.table-score .value { font-size: 1.4rem; font-weight: 600; }
.indicative { color: var(--warn); font-size: .75rem; font-style: italic; }
.caveat, .warnings {
    background: #fff8e8; border-left: 3px solid var(--warn); border-radius: 0 3px 3px 0;
    padding: .7rem 1rem; font-size: .88rem;
}
.warnings { margin: 1rem 0; }
/* Neutral rather than a warning colour: a redaction is the system working, not a fault. */
.redacted {
    background: var(--bg); border-left: 3px solid var(--muted);
    border-radius: 0 3px 3px 0; padding: .7rem 1rem; font-size: .88rem; margin: 1rem 0;
}
.gaps { border-left: 3px solid var(--gap); padding-left: 1rem; }
.ok { color: var(--ok); } .stale { color: var(--warn); }
.must-tag { font-size: .72rem; color: var(--gap); } .pref-tag { font-size: .72rem; color: var(--muted); }
.list { list-style: none; padding: 0; } .list li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.error-message {
    background: #fdf4f4; border-left: 3px solid var(--gap); border-radius: 0 3px 3px 0;
    padding: .7rem 1rem;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- footer */

footer {
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 1.15rem 2rem; color: var(--muted); font-size: .8rem;
    flex-shrink: 0;
}
footer p { margin: .2rem 0; }
.footer-links { margin-top: .35rem; }
.footer-links a { color: var(--muted); }

/* ---------------------------------------------------------------- monitoring
   Charts are SVG generated on the server, so their colours come from these
   custom properties rather than from literals baked into the markup. */

.ranges { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.ranges a {
    padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 2rem; background: #fff;
    color: var(--accent); text-decoration: none; font-size: .82rem;
}
.ranges a.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.custom-range { display: flex; align-items: flex-end; gap: .5rem; margin-left: auto; }
.custom-range label { margin: 0; font-size: .72rem; }
.custom-range input { min-width: 0; width: 12.5rem; font-size: .8rem; padding: .25rem .4rem; }
.custom-range button { padding: .3rem .8rem; font-size: .82rem; }

.tiles { display: flex; flex-wrap: wrap; gap: .75rem; margin: .75rem 0 1.5rem; }
.tile {
    flex: 1 1 8rem; border: 1px solid var(--line); border-radius: 3px; background: #fbfdfd;
    padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.tile .value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.tile .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.tile.warn .value { color: var(--warn); }
.tile.bad .value { color: var(--gap); }

.chart-frame {
    border: 1px solid var(--line); border-radius: 3px; background: #fff;
    padding: .5rem; margin: 0 0 1.25rem;
}
.chart { display: block; width: 100%; height: 160px; }
.chart .area { fill: var(--accent); opacity: .12; stroke: none; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart .axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .column { fill: var(--accent); opacity: .75; }
.chart .column-label { font-size: 11px; fill: var(--muted); font-family: inherit; }
.chart-meta { margin: .1rem 0 .35rem; color: var(--muted); font-size: .78rem; }
.chart-empty { color: var(--muted); font-style: italic; font-size: .85rem; margin: .25rem 0 1.25rem; }

table.top { font-size: .85rem; }
table.top td { border-bottom: 1px solid var(--line); padding: .35rem .5rem; }
table.top td.number { text-align: right; white-space: nowrap; color: var(--muted); }
table.top td.bar-cell { width: 30%; }
.bar { display: block; width: 100%; height: 10px; }
.bar-track { fill: var(--line); }
.bar-fill { fill: var(--accent); }

/* ---------------------------------------------------------------- identity */

body.signin {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    /* A wash of the brand colour behind the panel, rather than the flat page grey. */
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(70, 128, 27, .16), rgba(70, 128, 27, 0) 60%),
        var(--bg);
}
.signin-panel {
    width: min(26rem, 92vw); background: var(--panel); border: 1px solid var(--line);
    border-radius: 3px; box-shadow: 0 6px 18px rgba(20, 34, 38, .14);
    padding: 2rem 2.25rem 2.5rem; margin: 0;
    /* The shared rule gives main a flex-grow; the sign-in card is not a page body. */
    flex: 0 0 auto;
}
.signin-panel h1 { margin: 0 0 .25rem; }
.signin-panel form { margin-top: 1.5rem; }
.signin-panel input { width: 100%; margin-bottom: 1rem; }
.signin-panel button { width: 100%; }

button.link {
    background: none; border: none; color: #fff; padding: 0;
    font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline;
}
button.link:hover { background: none; }
form.inline { display: inline; }
.permission { margin: .3rem 0; }
.permission label { display: flex; align-items: baseline; gap: .5rem; color: var(--ink); font-size: .9rem; margin-top: .3rem; }
.permission input { width: auto; min-width: 0; }
/*
  The theme editor. Seven wells laid out as a palette so they are compared against each
  other, which is how a palette is actually chosen — a column of form fields makes each
  colour a separate decision, and the result is seven colours that do not sit together.
*/
.palette {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .9rem; margin: 1rem 0 1.4rem;
}
.swatch {
    border: 1px solid var(--line); border-radius: 3px; padding: .7rem .75rem .75rem;
    background: var(--panel);
}
.swatch label {
    margin: 0 0 .45rem; font-size: .78rem; line-height: 1.35; color: var(--muted);
}
.swatch:focus-within { border-color: var(--accent); }

/* Which door a sign-in page is. Quiet: it is a label, not an instruction. */
.signin-panel .door {
    margin: 0 0 1.1rem; padding: .6rem .75rem; border-left: 3px solid var(--accent);
    background: #f4f7f4; font-size: .85rem; line-height: 1.5; color: var(--muted);
}
.signin-panel .door strong { display: block; color: var(--ink); }
.other-doors a { white-space: nowrap; }

/* The trace filters: a row that wraps rather than a column of full-width fields. */
.filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
    margin: 1rem 0 1.4rem; padding: .85rem .9rem;
    border: 1px solid var(--line); border-radius: 3px; background: #fbfcfc;
}
.filters .filter { display: flex; flex-direction: column; }
.filters label { margin: 0 0 .25rem; font-size: .75rem; }
.filters input, .filters select { min-width: 0; width: auto; font-size: .85rem; padding: .35rem .45rem; }
.filters input[type="text"] { min-width: 13rem; }
.paging { display: flex; gap: 1rem; margin: 1rem 0; font-size: .9rem; }

.pill-current {
    display: inline-block; padding: .12rem .55rem; border-radius: 2rem;
    background: var(--accent); color: #fff; font-size: .75rem;
}
.pill-gap {
    display: inline-block; padding: .12rem .55rem; border-radius: 2rem;
    background: var(--gap); color: #fff; font-size: .75rem;
}
a.cancel { margin-left: 1rem; color: var(--muted); font-size: .85rem; }
.scope-picker { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; }
.scope-picker label { margin: 0; font-size: .8rem; }
.scope-picker select { min-width: 14rem; padding: .3rem .4rem; font-size: .85rem; }
.scope-picker button { padding: .3rem .8rem; font-size: .82rem; }

/*
  Mock-mode banner. Deliberately loud and deliberately at the very top of the document, above
  the header, so it is the first thing on the page and survives being scrolled past on a
  screenshot. Colours carry a border and bold text as well as hue, so it still reads as a
  warning without colour.
*/
.mock-banner {
    background: #7a2f00;
    color: #fff5ec;
    border-bottom: 3px solid #ff8a3d;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.mock-banner strong {
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/*
  The locked-out panel. Loud on purpose: it is the answer to the question the reader arrived
  with, and it competes with a page full of tables. Carries a border and a heading as well as
  colour, so it still reads as serious without colour.
*/
.lockout {
    border: 2px solid #a3231b;
    border-left-width: 6px;
    background: #fdf0ef;
    color: #4a1310;
    padding: 1rem 1.2rem;
    margin: 1rem 0 1.5rem;
    border-radius: 4px;
}

.lockout h2 {
    margin-top: 0;
    color: #a3231b;
    border-bottom: none;
}

@media (prefers-color-scheme: dark) {
    .lockout {
        background: #2a100e;
        color: #f6d9d6;
    }
}

/*
  Narrow screens. The original is a fixed 960px and simply does not have this — its six @media
  blocks are browser hacks rather than breakpoints. Keeping the application usable on a phone
  was not something to give up for a closer resemblance.
*/
@media (max-width: 40rem) {
    header { padding: .9rem 1.1rem; gap: .5rem; }
    header nav { margin-left: 0; width: 100%; gap: .8rem; }
    main { margin: .75rem; padding: 1.25rem 1.1rem 1.75rem; border-radius: 2px; }
    footer { padding: 1rem 1.1rem; }
    input, select { min-width: 0; width: 100%; }
    .custom-range { margin-left: 0; }
    table { font-size: .82rem; }
}

/*
  A recruiter on a phone (PR14, ADR 89). The narrow-screen block above makes the page fit; these make it usable.
  Four things a phone does that a desktop does not: a table wider than the screen scrolls inside itself rather
  than widening the page, a form field under 16px makes iOS zoom into it and leave the page zoomed, a finger is
  a 44px target where a pointer is a 24px one (WCAG 2.5.8 asks for 24 as the floor; 44 is what a thumb needs),
  and a notch or a home indicator covers whatever sits at the edge unless the page leaves room for it.
*/
@media (max-width: 40rem) {
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    input, select, textarea { font-size: 16px; }
}
@media (pointer: coarse) {
    button, input[type="submit"], select, summary, .nav-group-items a, header nav a {
        min-height: 44px;
    }
    .nav-group-items a, header nav a { display: inline-flex; align-items: center; }
    input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
}
@supports (padding: env(safe-area-inset-left)) {
    header, main, footer {
        padding-left: max(1.1rem, env(safe-area-inset-left));
        padding-right: max(1.1rem, env(safe-area-inset-right));
    }
    footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}
/* Installed to a home screen there is no browser chrome, so the app has to give itself somewhere to go back to. */
@media (display-mode: standalone) {
    body { overscroll-behavior-y: contain; }
}

/*
 * An enterprise's logo, in the header and on the branding screen (PR1).
 *
 * Bounded rather than sized: the image is whatever an administrator uploaded, and a header that
 * changes height with it is a layout that moves under everybody. max-height keeps the header one
 * height; width auto keeps the image its own shape rather than squashing it.
 */
.logo {
    max-height: 2.2rem;
    max-width: 12rem;
    width: auto;
    vertical-align: middle;
}