/* 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; }

/* ---------- 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; }
.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; }
.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, .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; }
}