/* Direction A: monochrome masthead. Shared by every console page. The masthead and footer markup come from
   topbar.js, which injects its own masthead rules. Blue is for links and focus, green, amber and red for status. */
@font-face { font-family: 'Inter'; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --black: #000000; --canvas: #f2f3f5; --panel: #ffffff; --ink: #16191f; --muted: #545c6b;
  --line: #dcdfe5; --line-strong: #c5cad3; --control-border: #838a97; --link: #1f4fd8; --on-black: #ffffff; --on-black-muted: #b9bec7;
  --green: #19693f; --green-bg: #dff3e8; --amber: #8a5a00; --amber-bg: #fcefd2; --red: #b42318; --red-bg: #fde4e1; --chip: #eef0f3;
  --gap: #5b4bb7; --gap-bg: #ebe7fb;
  --wrap: 1360px; --gutter: 40px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #111318; --panel: #1a1d23; --ink: #e9ebef; --muted: #a3aab6;
    --line: #2c313a; --line-strong: #3a404b; --control-border: #6b7380; --link: #8fb0ff;
    --green: #6fd3a0; --green-bg: #15301f; --amber: #f1c46b; --amber-bg: #33290f; --red: #ff9b8f; --red-bg: #3b1d1a; --chip: #252a33;
    --gap: #b9adff; --gap-bg: #2a2547;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 17px/1.55 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: 'cv11', 'ss01'; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hidden { display: none !important; }
/* visually hidden, still read by screen readers: a label that the layout has no room for */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- page header: title, one line of purpose, page controls on the right ---------- */
.pagehead { background: var(--panel); border-bottom: 1px solid var(--line); }
.pagehead .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding-top: 28px; padding-bottom: 24px; }
.pagehead h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.pagehead p { margin: 6px 0 0; color: var(--muted); font-size: 17px; }
.pagehead-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.field-inline { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); font-weight: 500; }

/* ---------- content column ---------- */
main { max-width: 1400px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
main.wrap { max-width: var(--wrap); padding: 28px var(--gutter) 56px; gap: 24px; }
/* The footer sits at the bottom of a short page: main takes the spare height, its rows stay at the top */
body.console { min-height: 100vh; display: flex; flex-direction: column; }
body.console > main { flex: 1 0 auto; width: 100%; align-content: start; }
main[tabindex="-1"]:focus { outline: none; }   /* the Skip to content target */
.panel.capped { max-width: 460px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; min-width: 0; }
.panel h2 { margin: 0 0 4px; font-size: 21px; line-height: 1.3; font-weight: 650; }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; }
.panel-head a { font-size: 16px; font-weight: 500; }
.hint { color: var(--muted); font-size: 15px; margin: 0; }
.cols { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cols-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pagelinks { display: flex; flex-wrap: wrap; gap: 14px; font-size: 16px; }
.pagelinks a.on { color: var(--ink); font-weight: 600; }

/* KPI strip: one panel, four cells, every value on the same 48px line box so the numbers share a baseline */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.kpi { display: block; padding: 22px 24px 20px; color: var(--ink); border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 0; }
a.kpi:hover { text-decoration: none; background: var(--chip); }
.kpi .v { display: block; font-size: 42px; line-height: 48px; height: 48px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .l { display: block; margin-top: 8px; font-size: 16px; color: var(--muted); }
.kpi .s { display: block; font-size: 15px; color: var(--muted); }
.kpi.warn .v { color: var(--amber); }
.kpi.warn .l::before { content: ''; display: inline-block; width: 10px; height: 9px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--amber); margin-right: 8px; vertical-align: 1px; }

/* tables */
.scroll { overflow-x: auto; }
/* A row button sits on the box's left edge (the first cell has no left padding) and .scroll clips: 6px of room each
   side, taken back by the margin, keeps the whole focus ring (3px at 2px offset) in view and the table where it was */
.scroll:has(button.linklike) { margin-inline: -6px; padding-inline: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 15px; font-weight: 600; color: var(--muted); padding-top: 8px; padding-bottom: 10px; border-bottom-color: var(--line-strong); white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th.n, td.n { text-align: right; white-space: nowrap; }
td .sub { display: block; color: var(--muted); font-size: 15px; }
.nowrap { white-space: nowrap; }
.zero { color: var(--muted); }
.more { margin-top: 16px; }
tbody tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--chip); }
/* The first cell of a clickable row holds the keyboard way in: a button that looks like a link (the row click stays for the mouse) */
button.linklike { font: inherit; color: var(--link); background: none; border: 0; border-radius: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; max-width: 100%; }
button.linklike:hover { text-decoration: underline; }
td.act { text-align: right; white-space: nowrap; }

/* ---------- badges and status marks ----------
   .badge is a chip; .st is the same text without the chip (Home). The mark repeats the logo's shapes beside the
   text: circle = good, triangle = needs attention, square = critical. Neutral states carry no mark. The mark has
   no text of its own, so screen readers read only the status word. */
.badge { display: inline-block; font-size: 14px; font-weight: 600; line-height: 22px; padding: 0 10px; border-radius: 4px; background: var(--chip); color: var(--muted); white-space: nowrap; }
.st { font-weight: 600; white-space: nowrap; color: var(--muted); }
.badge:is(.info, .received, .cancelled, .disabled, .retired) { background: var(--chip); color: var(--muted); }
.badge.accepted { background: var(--gap-bg); color: var(--gap); }
.st.accepted { color: var(--gap); }

/* status: good */
:is(.badge, .st):is(.ok, .good, .ready, .committed, .verified, .resolved, .active)::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: middle; background: currentColor; border-radius: 50%; }
:is(.badge, .st):is(.ok, .good, .ready, .committed, .verified, .resolved, .active) { color: var(--green); }
.badge:is(.ok, .good, .ready, .committed, .verified, .resolved, .active) { background: var(--green-bg); }

/* status: attention */
:is(.badge, .st):is(.warning, .mid, .needs_template, .overdue, .locked)::before { content: ''; display: inline-block; width: 10px; height: 9px; margin-right: 6px; vertical-align: middle; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:is(.badge, .st):is(.warning, .mid, .needs_template, .overdue, .locked) { color: var(--amber); }
.badge:is(.warning, .mid, .needs_template, .overdue, .locked) { background: var(--amber-bg); }

/* status: critical */
:is(.badge, .st):is(.critical, .missing, .bad, .invalid, .failed)::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: middle; background: currentColor; border-radius: 0; }
:is(.badge, .st):is(.critical, .missing, .bad, .invalid, .failed) { color: var(--red); }
.badge:is(.critical, .missing, .bad, .invalid, .failed) { background: var(--red-bg); }

/* ---------- controls ---------- */
/* Every control border uses --control-border, which measures 3:1 or more against the panel and the canvas. */
select, input[type=text], input[type=password], input[type=date], input[type=number], input[type=month], input[type=file], textarea {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--panel); border: 1px solid var(--control-border); border-radius: 6px; padding: 10px 12px; max-width: 100%; }
select, input[type=text], input[type=password], input[type=date], input[type=number], input[type=month], input[type=file] { min-height: 46px; }
select { padding-right: 36px; min-width: 260px; }
::placeholder { color: var(--muted); opacity: 1; }
button { font: inherit; font-size: 16px; color: var(--ink); background: var(--panel); border: 1px solid var(--control-border); border-radius: 6px; padding: 9px 16px; cursor: pointer; }
/* Checkbox: drawn by the page so the unchecked outline can use --control-border; the tick is an inline SVG */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer;
  accent-color: var(--link); background: var(--panel); border: 1.5px solid var(--control-border); border-radius: 4px; }
input[type=checkbox]:checked { border-color: var(--link); background: var(--link) center / 100% 100% no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input[type=checkbox]:disabled { opacity: .5; cursor: default; }
/* Radio: same treatment; the checked state is a link-coloured dot (a gradient, since the stylesheet has no shadows) */
input[type=radio] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer;
  accent-color: var(--link); background: var(--panel); border: 1.5px solid var(--control-border); border-radius: 50%; }
input[type=radio]:checked { border-color: var(--link); background: radial-gradient(circle, var(--link) 0 4px, var(--panel) 4.5px); }
input[type=radio]:disabled { opacity: .5; cursor: default; }
/* Windows High Contrast ignores author colours, so let the browser draw both boxes there */
@media (forced-colors: active) { input[type=checkbox], input[type=radio] { appearance: auto; } }
button.primary { font-size: 17px; font-weight: 600; color: var(--on-black); background: var(--black); border-color: var(--black); padding: 11px 20px; }
button:disabled { opacity: .5; cursor: default; }
@media (prefers-color-scheme: dark) {
  button.primary { color: var(--black); background: var(--on-black); border-color: var(--on-black); }
  input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5l3 3 6-7' fill='none' stroke='%23111318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}

/* ---------- forms and messages ---------- */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: var(--muted); }
.form input:not([type=checkbox]):not([type=radio]) { width: 100%; }
.msg { padding: 10px 12px; border-radius: 6px; font-size: 16px; }
.msg.bad { background: var(--red-bg); color: var(--red); }
.msg.ok { background: var(--green-bg); color: var(--green); }
.mt8 { margin-top: 8px; }
/* a line of buttons and fields; .spaced adds the gap above it when it follows a form or a list */
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.spaced { margin-top: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; align-items: center; }
.filters select { min-width: 0; }
.confirm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); }

/* footer: the same on every page; topbar.js draws it with a picture element (black logo, white in the dark scheme) */
.foot { border-top: 1px solid var(--line); background: var(--panel); }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 18px; color: var(--muted); font-size: 15px; }
.foot picture { display: block; flex: none; }
.foot img { height: 18px; width: auto; display: block; opacity: .85; }

/* ---------- sign-in page: black brand half, form half ---------- */
.signin { display: grid; grid-template-columns: minmax(420px, 5fr) 7fr; min-height: 100vh; background: var(--panel); }
.signin .brand { background: var(--black); color: var(--on-black); display: flex; flex-direction: column; justify-content: space-between; padding: 56px 64px; }
.signin .brand img { width: 300px; max-width: 100%; height: auto; display: block; }
.signin .brand p { margin: 14px 0 0; font-size: 19px; line-height: 1.5; color: var(--on-black-muted); max-width: 30ch; }
/* the product name looks like a heading but is not one, so the form's h1 is the page's first heading */
.signin .brand p.product { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--on-black); max-width: none; }
.signin .brand small { font-size: 15px; color: var(--on-black-muted); }
.signin .form-side { display: flex; align-items: center; justify-content: center; padding: 56px 32px; }
.signin form { width: 100%; max-width: 420px; display: grid; gap: 20px; }
.signin h1 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.signin .lead { margin: 8px 0 0; color: var(--muted); font-size: 17px; }
.signin label { display: grid; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.signin input { width: 100%; min-height: 52px; }
.signin button.primary { width: 100%; min-height: 54px; margin-top: 4px; }
.signin .help { font-size: 15px; color: var(--muted); margin: 0; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .pagehead .wrap { padding-top: 20px; padding-bottom: 18px; }
  .pagehead h1 { font-size: 28px; }
  .pagehead-controls { width: 100%; }
  .field-inline { width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  select { width: 100%; min-width: 0; }
  main.wrap { padding-top: 16px; padding-bottom: 40px; gap: 16px; }
  .panel { padding: 18px 16px; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 16px; }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpi .v { font-size: 34px; line-height: 40px; height: 40px; }
  /* tables become one block per row; the column name sits beside each value */
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 3px 0; text-align: right; }
  table.stack td .val { display: block; text-align: right; }
  table.stack td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 15px; font-weight: 600; text-align: left; }
  table.stack td:first-child { display: block; text-align: left; font-weight: 600; padding-bottom: 6px; }
  table.stack td:first-child::before { content: none; }
  table.stack td .sub { display: block; }
  table.stack td:empty { display: none; }
  table.stack td.act { justify-content: flex-start; }
  table.stack td.act::before { content: none; }
  .signin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .signin .brand { padding: 28px 16px 32px; gap: 28px; }
  .signin .brand img { width: 190px; }
  .signin .brand p { font-size: 17px; margin-top: 8px; }
  .signin .brand p.product { font-size: 28px; margin-top: 0; }
  .signin .brand small { display: none; }
  .signin .form-side { padding: 28px 16px 40px; align-items: flex-start; }
  .signin h1 { font-size: 28px; }
  .foot .wrap { flex-direction: column; align-items: flex-start; }
}