/* Code review and security's own part of its dashboard. The rest is the design kit (/ds.css,
   chassis 1.118.2; 3Sry's D-228): its tokens, the shell, the templates and
   their states. What is here is Code review and security's own: its colour as the kit's
   primary (Q-1118-1), and the few parts the kit doesn't draw (a review's
   cards, a finding's patch line). Colours come only through the kit's
   tokens, and every property is logical. No web fonts: the page loads from
   this machine only. */

/* Code review and security's catalogue colour, #991b1b, as the one primary (Q-1118-1). White
   on it reads 8.31:1, and as a link it reads 7.48:1 or more on every light
   surface. In dark mode the primary stays #991b1b (white on it is still
   8.31:1); its words on the dark surfaces would not pass, so the link and
   the rail's current place take the closest shade that does, #c27676
   (4.62:1 or more). */
:root {
  --primary: #991b1b;
  --primary-hover: #871818;
  --primary-tint: #f9f1f1;
  --primary-line: #e2bfbf;
  --link: #991b1b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #991b1b;
    --primary-hover: #871818;
    --primary-tint: #33131f;
    --primary-line: #59161d;
    --link: #c27676;
  }
}
:root[data-theme="light"] {
  --primary: #991b1b;
  --primary-hover: #871818;
  --primary-tint: #f9f1f1;
  --primary-line: #e2bfbf;
  --link: #991b1b;
}
:root[data-theme="dark"] {
  --primary: #991b1b;
  --primary-hover: #871818;
  --primary-tint: #33131f;
  --primary-line: #59161d;
  --link: #c27676;
}

h2 { font-size: var(--text-lg); margin-block: 24px 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row select, .row input:not([type="checkbox"]) { inline-size: auto; flex: 1 1 180px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-block: 0 16px; }
.figure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; }
.figure b { display: block; font-size: var(--text-2xl); }
.figure span { color: var(--ink-2); font-size: var(--text-sm); }
.views { margin-block: 0 12px; }
.chip { display: inline-block; padding-block: 2px; padding-inline: 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); font-size: var(--text-xs); font-weight: 600; margin-block: 0 2px; margin-inline: 0 4px; }
.risk { color: var(--risk); }
.warn { color: var(--attention); }
.good { color: var(--good); }
.muted { color: var(--ink-2); }
.chip.risk { background: var(--risk-tint); }
.chip.warn { background: var(--attention-tint); }
.chip.good { background: var(--good-tint); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-block: 0 12px; }
.card h3 { margin-block: 0 6px; font-size: var(--text-base); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-md); margin-block: 8px; }
.meta { color: var(--ink-2); font-size: var(--text-sm); }
.note { background: var(--surface-2); border-radius: var(--radius-md); padding-block: 10px; padding-inline: 12px; font-size: var(--text-sm); }
label { display: block; font-weight: 600; font-size: var(--text-sm); margin-block: 10px 4px; }
label.row, .t1-group-toggle { font-weight: 500; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { inline-size: 100%; }
textarea { min-block-size: 140px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.send { border: 2px solid var(--primary); }
.ds-table-wrap { margin-block: 0 12px; }

/* What went wrong: at the top of the place you are looking at, until the next thing you do (W-13). */
.ds-shell > .ds-rail { grid-row: 1 / span 2; }
.ds-shell > .error, .ds-shell > main { grid-column: 2; }
.error { position: sticky; top: calc(var(--header) + 8px); z-index: 5; margin-block: 12px 0; margin-inline: 24px; padding-block: 12px; padding-inline: 14px; border-radius: var(--radius-md); background: var(--risk-tint); color: var(--ink); border: 1px solid var(--risk); font-weight: 600; }
.recheck { border-color: var(--primary-line); }
.patch { font-size: var(--text-sm); }