@charset "UTF-8";
/* Issue #201/#208 -- external stylesheet for the whole analyzer-ui app.
 *
 * Ported 1:1 (colors/spacing/typography) from the Challenger's verbindliches Mockup
 * (issue #201 comment, "Domaenen-Pipeline -- Mockup"), extended with the small set of
 * utility classes (.wrap/.card/.dim/.mono/.btn/...) the non-board pages (login,
 * reviewer-login, index) already relied on as INLINE styles pre-#208, and with the
 * pipeline-board's own established class contract (pipeline-*, pip-*, score-band-*,
 * score-badge-pill) that PipelineRenderTest/PipelineDrawerJsContentTest pin at the
 * rendered-HTML level -- those class NAMES are unchanged, only their rules move here
 * and take on the mockup's dark-board look.
 *
 * Loaded same-origin via <link rel="stylesheet" th:href="@{/css/board.css}"> from
 * fragments/head.html -- required for SecurityConfig's CSP (style-src 'self', no
 * unsafe-inline, see ADR-0020).
 *
 * NOTE (#210): @charset above is mandatory and must stay byte 1 of this file per the
 * CSS spec -- it makes the parser treat this file as UTF-8 regardless of the HTTP
 * Content-Type header. Belt-and-suspenders, comments in this file are kept ASCII-only
 * so a dropped/ignored @charset can never again silently drop the :root block below
 * (and with it every --custom-property, e.g. --ground, that the whole page depends
 * on). The systemic fix would be to have Spring serve static CSS with an explicit
 * charset=utf-8 Content-Type; that is a larger config change and out of scope here.
 */

:root {
  --ground: #0b0f14;
  --panel: #131a23;
  --panel2: #19222e;
  --line: #28323f;
  --line-soft: #1e2731;
  --ink: #e7edf3;
  --muted: #8a97a6;
  --faint: #5c6773;
  --flow: #2f9bff;
  --flow-dim: #1c4a72;
  --lo: #43b95a;
  --mid: #d9a441;
  --hi: #f0553f;
  --pending: #7c8794;
  --sel: #a371f7;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 480px at 82% -8%, #14202e 0%, transparent 60%), var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--flow); text-decoration: none; }

/* ---- generic page shell (index/login/reviewer-login/pipeline) --------------------- */
.wrap { max-width: 1360px; margin: 0 auto; padding: 22px 26px 60px; }
.wrap-narrow { max-width: 380px; padding-top: 80px; text-align: center; }
h1 { font-size: 19px; font-weight: 640; letter-spacing: -.01em; margin: 0 0 6px; }
.dim { color: var(--muted); font-size: 12.5px; }
.mono { font-family: var(--mono); }
.mt-sm { margin-top: 10px; }
.mt-md { margin-top: 20px; }
.mt-lg { margin-top: 28px; }
.mb-tiny { margin: 0 0 4px; }
.mb-xs { margin-bottom: 10px; }
.mb-sm { margin-bottom: 14px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 20px; }
.no-margin { margin: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; }
.grow { flex: 1; }
.break-all { word-break: break-all; }
.error-box { border-color: #7f1d1d; text-align: left; }
.nav-entry-title { font-weight: 600; margin-bottom: 6px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.pad { padding: 14px 18px; }

input[type=text], input[type=password] {
  background: var(--ground); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 9px 12px; font-family: var(--sans); font-size: 13px;
}
button, .btn {
  background: #1e3a5f; color: var(--ink); border: 1px solid #2a4a75; border-radius: 8px;
  padding: 9px 16px; cursor: pointer; font-size: 13px; display: inline-block;
}
pre { white-space: pre-wrap; word-break: break-all; background: var(--ground); border-radius: 6px; padding: 8px; }

/* Marker class for a nav entry whose route does not exist yet. */
.disabled { color: var(--faint); pointer-events: none; cursor: default; }

/* ---- header / brand / funnel ------------------------------------------------------ */
header.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand .glyph {
  width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg, #123049, #0d1a26);
  border: 1px solid #2b4763; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #ffffff08;
}
.brand .glyph b { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--flow); box-shadow: 0 0 12px 2px #2f9bff88; }
.brand h1 { margin: 0; }
.brand .sub { color: var(--faint); font-size: 12.5px; margin-top: 1px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

.pipeline-funnel {
  display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.pipeline-funnel-stage { padding: 10px 16px 9px; min-width: 96px; }
.pipeline-funnel-stage + .pipeline-funnel-stage { border-left: 1px solid var(--line-soft); }
.pipeline-funnel-num { font-family: var(--mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pipeline-funnel-lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; white-space: nowrap; }

/* ---- filter bar (score-band select + disabled cluster select) --------------------- */
.filterbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filterbar label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.filterbar select { background: var(--ground); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-family: var(--sans); font-size: 13px; }

/* ---- 5-column board ---------------------------------------------------------------- */
.pipeline-board { display: grid; grid-template-columns: repeat(5, minmax(212px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; }
.pipeline-column {
  background: linear-gradient(180deg, var(--panel) 0%, #10161e 100%); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 11px; display: flex; flex-direction: column; gap: 11px; min-height: 220px;
}
.pipeline-column-title { color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: -.005em; margin-bottom: 2px; }

.pipeline-card {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; transition: border-color .12s, transform .12s;
}
.pipeline-card:hover, .pipeline-card:focus { border-color: #3c4d61; outline: none; transform: translateY(-1px); }
.pipeline-card-domain { font-family: var(--mono); font-size: 13px; color: var(--ink); word-break: break-all; line-height: 1.35; margin-bottom: 0; }

.pipeline-pips { display: flex; gap: 4px; align-items: center; margin-bottom: 0; }
.pipeline-pip { height: 4px; flex: 1; border-radius: 3px; background: #2a3542; width: auto; display: block; }
.pip-reached { background: var(--flow); }
.pip-not_reached { background: #2a3542; }
.pip-unknown { background: var(--pending); }

/* ---- score badge (RiskBandView#cssClass) ------------------------------------------- */
.score-badge-pill {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px;
  border-radius: 6px; font-weight: 600; align-self: flex-start;
}
.score-band-1 { background: #0f2913; color: #79dd8b; border: 1px solid #24512a; }
.score-band-2 { background: #182a10; color: #a6d977; border: 1px solid #38541f; }
.score-band-3 { background: #2a2210; color: #e6bd6b; border: 1px solid #5a481d; }
.score-band-4 { background: #2e1c10; color: #f0b487; border: 1px solid #653c1d; }
.score-band-5 { background: #331410; color: #ff9d8f; border: 1px solid #6f2a20; }

.score-gauge { height: 6px; border-radius: 4px; background: #26303c; overflow: hidden; position: relative; margin-top: 4px; }
.score-gauge > i { display: block; height: 100%; border-radius: 4px; }
.bg-score-band-1 { background: #2ea043; }
.bg-score-band-2 { background: #6cba3e; }
.bg-score-band-3 { background: var(--mid); }
.bg-score-band-4 { background: #e8823a; }
.bg-score-band-5 { background: var(--hi); }

/* Gauge fill width, in 5-point steps (fragments/pipeline-card.html rounds row.score() down to the
   nearest 5 via integer division) -- CSS-only substitute for a style="width:...%" attribute, which
   CSP's style-src 'self' (no unsafe-inline) forbids (#208). */
.score-w-0 > i { width: 0%; }
.score-w-5 > i { width: 5%; }
.score-w-10 > i { width: 10%; }
.score-w-15 > i { width: 15%; }
.score-w-20 > i { width: 20%; }
.score-w-25 > i { width: 25%; }
.score-w-30 > i { width: 30%; }
.score-w-35 > i { width: 35%; }
.score-w-40 > i { width: 40%; }
.score-w-45 > i { width: 45%; }
.score-w-50 > i { width: 50%; }
.score-w-55 > i { width: 55%; }
.score-w-60 > i { width: 60%; }
.score-w-65 > i { width: 65%; }
.score-w-70 > i { width: 70%; }
.score-w-75 > i { width: 75%; }
.score-w-80 > i { width: 80%; }
.score-w-85 > i { width: 85%; }
.score-w-90 > i { width: 90%; }
.score-w-95 > i { width: 95%; }
.score-w-100 > i { width: 100%; }

.empty-col { color: var(--faint); font-size: 12px; text-align: center; padding: 24px 6px; font-style: italic; }

/* ---- detail drawer / stepper -------------------------------------------------------- */
#pipeline-drawer { position: fixed; inset: 0; z-index: 1000; }
#pipeline-drawer[hidden] { display: none; }
.overlay-backdrop { position: absolute; inset: 0; background: #05080cbb; }
.overlay-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(430px, 94vw); background: var(--panel);
  border-left: 1px solid var(--line); overflow-y: auto; padding: 22px 22px 40px;
}
#pipeline-drawer-close {
  position: sticky; top: 0; float: right; background: var(--ground); border: 1px solid var(--line); color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; margin: -4px -4px 0 0;
}
#pipeline-drawer-close:hover { color: var(--ink); border-color: #39485a; }
#pipeline-drawer-title { font-family: var(--mono); font-size: 17px; word-break: break-all; margin: 2px 40px 3px 0; }
#pipeline-drawer-domain { font-family: var(--mono); font-size: 11.5px; color: var(--faint); word-break: break-all; }

.pipeline-stepper { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pipeline-stepper li {
  position: relative; padding: 0 0 16px 38px; border-radius: 0; background: none; border: none; font-size: 13.5px; font-weight: 600;
}
.pipeline-stepper li::before {
  content: ""; position: absolute; left: 12px; top: 24px; bottom: -2px; width: 2px; background: var(--line);
}
.pipeline-stepper li:last-child::before { content: none; }
.pipeline-stepper li::after {
  content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--ground);
}
.pipeline-stepper li.step-done::before { background: var(--flow-dim); }
.pipeline-stepper li.step-done::after { background: var(--flow); border-color: var(--flow); }
.pipeline-stepper li.step-current { color: var(--flow); }
.pipeline-stepper li.step-current::after { border-color: var(--flow); box-shadow: 0 0 0 4px #2f9bff22; }
.pipeline-stepper li.step-pending { color: var(--muted); font-weight: 500; }
.pipeline-stepper li.step-unknown { color: var(--muted); }
.pipeline-stepper li.step-unknown::after { border-color: var(--pending); }

#pipeline-drawer-score-block { margin: 16px 0 18px; padding: 15px 16px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
#pipeline-drawer-score { font-family: var(--mono); font-size: 34px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; margin-top: 9px; }

body.overlay-open { overflow: hidden; }

/* ---- crawl inspector (Issue #201 PR-A) — crawl overview cards, crawl-detail page grid, and the
   full-screen screenshot overlay. Same dark/card/badge design language as the board above, ported
   from PR-A's original inline <style> block onto board.css tokens/classes (#208). ------------- */
.crawl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.crawl-card, .crawl-page-card {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  display: block; text-decoration: none; color: inherit;
}
.crawl-page-card[data-crawl-page] { cursor: pointer; }
.crawl-card:hover, .crawl-page-card:hover, .crawl-page-card:focus { border-color: #3c4d61; outline: none; }
.crawl-card-thumb {
  aspect-ratio: 16 / 10; background: var(--ground); display: flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.crawl-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crawl-card-thumb-empty { font-size: 12px; }
.crawl-card-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }

.badge {
  display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600;
  width: fit-content;
}
.badge-ok { background: #0f2913; color: #79dd8b; border: 1px solid #24512a; }
.badge-warn { background: #331410; color: #ff9d8f; border: 1px solid #6f2a20; }

.overlay-panel-wide { max-width: min(90vw, 1100px); }
#crawl-overlay { position: fixed; inset: 0; z-index: 1000; }
#crawl-overlay[hidden] { display: none; }
#crawl-overlay-close {
  position: sticky; top: 0; float: right; background: var(--ground); border: 1px solid var(--line); color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; margin: -4px -4px 0 0;
}
#crawl-overlay-close:hover { color: var(--ink); border-color: #39485a; }
#crawl-overlay-image { width: 100%; height: auto; border-radius: 6px; margin-top: 10px; display: block; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 820px) { .pipeline-board { grid-template-columns: 1fr; } }