/* ProbieTrack.
   No CDN, no external fonts, no build step. Everything is served from this
   origin, which is what lets the CSP stay tight on an application holding
   personnel records.

   Phone-first: evaluations get filled in on an apparatus floor or in a bunk
   room, not at a desk. */

:root {
  --brand: #8b1a1a;
  --brand-ink: #ffffff;
  --brand-2: #1f2933;
  --brand-2-ink: #ffffff;

  --ink: #16202a;
  --ink-soft: #52606d;
  --ink-faint: #7b8794;
  --line: #dbe1e8;
  --line-soft: #eef1f5;
  --paper: #ffffff;
  --ground: #f5f7f9;

  --ok: #14713d;
  --ok-bg: #e6f4ec;
  --warn: #8a5a00;
  --warn-bg: #fdf3e0;
  --bad: #a01b1b;
  --bad-bg: #fbeaea;
  --info-bg: #e9f0f8;

  --radius: 6px;
  --gap: 1rem;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 16px/1.55 var(--sans);
  color: var(--ink);
  background: var(--ground);
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.03rem; }
p { margin: 0 0 .75rem; }
a { color: #17497a; }
a:hover { color: #0f3358; }
small { font-size: .82rem; }

/* ---------- layout ---------- */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}
.page--narrow { max-width: 620px; }
.page--wide { max-width: 1400px; }

.stack > * + * { margin-top: var(--gap); }
.row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.grow { flex: 1 1 auto; }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: .6rem 1rem;
  background: var(--brand-2);
  color: var(--brand-2-ink);
}
.topbar a { color: inherit; text-decoration: none; }
.topbar__brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 650; font-size: 1.02rem;
}
.topbar__logo {
  height: 34px; width: 34px; object-fit: contain;
  /* A white disc behind the mark. A dark department crest on a near-black bar
     is illegible, and that is a defect you only notice by looking at it. */
  background: #fff; border-radius: 50%; padding: 3px;
}
.topbar__nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.topbar__nav a { padding: .25rem 0; border-bottom: 2px solid transparent; }
.topbar__nav a:hover { border-bottom-color: currentColor; }
.topbar__user { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.topbar__whoami { display: flex; flex-direction: column; line-height: 1.2; }
.topbar__whoami small { opacity: .75; }

/* ---------- public header (bare host, signed out) ---------- */
/* Light ground on purpose: the mark is navy and gold with a transparent
   background, so it needs a pale bar to read. The signed-in .topbar is the
   department's colour and puts a white disc behind their crest instead. */
.pubbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding: .7rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e3e6ea;
}
.pubbar__brand { display: inline-flex; align-items: center; }
.pubbar__logo { height: 42px; width: auto; display: block; }
.pubbar__nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.pubbar__nav a {
  color: #1b2a4a; text-decoration: none; font-weight: 600;
  padding: .25rem 0; border-bottom: 2px solid transparent;
}
.pubbar__nav a:hover { border-bottom-color: currentColor; }
@media (max-width: 30rem) {
  .pubbar__logo { height: 34px; }
  .pubbar__nav { gap: 1rem; }
}

/* ---------- banners ---------- */
.banner {
  padding: .6rem 1rem;
  font-size: .92rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.banner a { color: inherit; font-weight: 600; }
.banner--impersonation { background: #6b21a8; color: #fff; }
.banner--readonly { background: var(--warn-bg); color: var(--warn);
                    border-bottom: 1px solid #e8d5ac; }
.banner--trial { background: var(--info-bg); border-bottom: 1px solid #cddbeb; }

/* The demo. Deliberately the loudest banner on the site: these screens show
   fabricated personnel records, and nobody should be a moment's doubt about
   which workspace they are in. */
.banner--demo {
  background: repeating-linear-gradient(
    135deg, #3f3f46, #3f3f46 14px, #52525b 14px, #52525b 28px);
  color: #fff;
  letter-spacing: .02em;
}
.banner--demo strong {
  background: #fff; color: #18181b; padding: 0 .45rem;
  border-radius: 3px; letter-spacing: .08em;
}

/* ---------- cards, tables ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; margin-bottom: .6rem;
}
.card--flush { padding: 0; overflow: hidden; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line-soft); }
th { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
tbody tr:hover { background: #fafbfc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
.hint { color: var(--ink-soft); font-size: .85rem; font-weight: 400; margin: .15rem 0 0; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=url], input[type=tel], input[type=color],
select, textarea {
  width: 100%;
  padding: .55rem .6rem;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid #b9c2cc;
  border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(23, 73, 122, .35);
  outline-offset: 1px;
  border-color: #17497a;
}
textarea { min-height: 6rem; resize: vertical; }
input[type=color] { padding: .2rem; height: 2.6rem; }

.field { margin-bottom: 1rem; }
.field--error input, .field--error select, .field--error textarea {
  border-color: var(--bad);
}
.field__error { color: var(--bad); font-size: .87rem; margin-top: .25rem; }
.errorlist { color: var(--bad); font-size: .87rem; margin: .25rem 0 0; padding-left: 1.1rem; }

.button {
  display: inline-block;
  padding: .55rem 1rem;
  font: inherit; font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--brand); color: var(--brand-ink);
  cursor: pointer; text-decoration: none;
}
.button:hover { filter: brightness(1.08); color: var(--brand-ink); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button--secondary { background: var(--paper); color: var(--ink); border-color: #b9c2cc; }
.button--secondary:hover { background: var(--ground); color: var(--ink); }
.button--quiet { background: transparent; color: inherit; border-color: currentColor; padding: .3rem .7rem; font-size: .87rem; }
.button--danger { background: var(--bad); color: #fff; }
.button--small { padding: .3rem .65rem; font-size: .86rem; }

/* ---------- messages, pills ---------- */
.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.message { padding: .6rem .8rem; border-radius: var(--radius); margin-bottom: .5rem;
           border: 1px solid transparent; }
.message--success { background: var(--ok-bg); color: var(--ok); border-color: #bfe0cd; }
.message--error   { background: var(--bad-bg); color: var(--bad); border-color: #ecc4c4; }
.message--warning { background: var(--warn-bg); color: var(--warn); border-color: #e8d5ac; }
.message--info    { background: var(--info-bg); border-color: #cddbeb; }

.pill {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; line-height: 1.5;
  background: var(--line); color: var(--ink-soft);
}
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--bad { background: var(--bad-bg); color: var(--bad); }
.pill--info { background: var(--info-bg); color: #17497a; }
.pill--draft { background: #eceff3; color: var(--ink-soft); }

/* ---------- the two tracks ---------- */
/* Rendered as two visually distinct lanes on purpose. If they look like one
   progress bar, someone will eventually read them as one thing, which is the
   misunderstanding this whole product is built to prevent. */
.tracks { display: grid; gap: .9rem; }
@media (min-width: 720px) { .tracks { grid-template-columns: 1fr 1fr; } }

.track { border: 1px solid var(--line); border-radius: var(--radius);
         padding: .85rem .9rem; background: var(--paper); }
.track--contractual { border-left: 5px solid #1f6feb; }
.track--program { border-left: 5px solid #8a5a00; }
.track__label { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
                color: var(--ink-faint); font-weight: 700; margin-bottom: .3rem; }
.track__note { font-size: .84rem; color: var(--ink-soft); margin-top: .5rem; }

.capped { color: var(--warn); font-weight: 600; }
.capped__why { font-size: .82rem; color: var(--ink-soft); font-weight: 400; }

.meter { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.meter__fill { height: 100%; background: var(--brand); }

/* ---------- evaluation form ---------- */
.eval-group { border: 1px solid var(--line); border-radius: var(--radius);
              background: var(--paper); margin-bottom: 1rem; overflow: hidden; }
.eval-group__head { background: var(--brand-2); color: var(--brand-2-ink);
                    padding: .5rem .8rem; font-weight: 650; font-size: .95rem; }
.eval-item { padding: .8rem; border-bottom: 1px solid var(--line-soft); }
.eval-item:last-child { border-bottom: 0; }
.eval-item__name { font-weight: 620; }
.eval-item__code { font: 600 .78rem var(--mono); color: var(--ink-faint); }
.eval-item__desc { color: var(--ink-soft); font-size: .87rem; margin: .15rem 0 .5rem; }

.scale { display: flex; flex-wrap: wrap; gap: .35rem; }
.scale__option { flex: 0 0 auto; }
.scale__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.scale__option span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; min-height: 2.6rem; padding: 0 .4rem;
  border: 1px solid #b9c2cc; border-radius: var(--radius);
  font-weight: 650; cursor: pointer; background: var(--paper);
}
.scale__option input:checked + span { background: var(--brand); color: var(--brand-ink);
                                      border-color: var(--brand); }
.scale__option input:focus-visible + span { outline: 3px solid rgba(23,73,122,.4); }
.scale__option--flag span { min-width: 3.4rem; font-size: .84rem; }
.scale__option--flag input:checked + span { background: var(--warn); border-color: var(--warn);
                                            color: #fff; }

.comment-required { border-left: 3px solid var(--warn); padding-left: .6rem; }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.mono { font-family: var(--mono); font-size: .88rem;
        /* An address longer than the card must wrap, not overflow. Without
           this a narrow screen scrolls sideways. */
        overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.footer {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding: 1rem; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: .85rem;
}
.footer__request-id { margin-left: auto; font-family: var(--mono); }

.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.auth-card { width: 100%; max-width: 26rem; background: var(--paper);
             border: 1px solid var(--line); border-radius: var(--radius);
             padding: 1.5rem; }
/* The landing page is not a sign-in box. It carries a paragraph, four
   buttons and a 62-character example address, and 26rem forces all of it to
   wrap into a column. Every other user of .auth-card is a form asking for one
   or two things, where narrow is right, so this widens only the page that
   needs it. */
/* 38rem, arrived at rather than guessed. box-sizing is border-box, so the
   text area is the card minus 1.5rem of padding each side. The longest line
   is the example address at 62 monospace characters and .88rem, which needs
   between 500px and 545px depending on which mono face the system picks.
   34rem left 496px and the address still wrapped, which was the one thing
   this was meant to fix. 38rem leaves 560px, enough for the widest of them. */
.auth-card--wide { max-width: 38rem; }
.auth-card__brand { text-align: center; margin-bottom: 1.25rem; }
.auth-card__brand img { max-height: 72px; max-width: 100%; }
.auth-card__brand h1 { font-size: 1.2rem; margin-top: .6rem; }

@media print {
  .topbar, .pubbar, .footer, .banner, .messages, .no-print { display: none !important; }
  /* Except this one. A page printed from the demo must still say DEMO. */
  .banner--demo { display: block !important; background: #fff; color: #000;
                  border: 2px solid #000; }
  body { background: #fff; }
  .card { border: 0; padding: 0; }
}