/* Brickfield Plugin Review: the shared stylesheet. Colours and sizes come from
   docs/design/README.md; every text and background pair there is contrast-checked. */

/* Fonts are served from this site, not a font service. Both are under the SIL Open
   Font License; see public/fonts. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
  --page: #F2F6FB;
  --card: #FFFFFF;
  --text: #0F1B2D;
  --text-secondary: #3A4A5E;
  --navy: #12355B;
  --link: #1452A3;
  --control-border: #7A8CA3;
  --card-border: #C9D4E1;
  --info: #E4EEF8;
  --serious-text: #7A4200;
  --serious-bg: #FFF0DB;
  --error-text: #9E1F17;
  --error-bg: #FDE8E6;
  --success: #0B5D33;
  --body-font: "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
  --mono-font: "IBM Plex Mono", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

a {
  color: var(--link);
  text-decoration: underline;
}

a:hover {
  color: var(--text);
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

p {
  margin: 0;
}

.mono {
  font-family: var(--mono-font);
}

.secondary {
  color: var(--text-secondary);
}

/* Skip link: shown when it receives focus. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 12px 20px;
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 8px;
  z-index: 10;
}

.skip-link:focus {
  top: 16px;
  color: #FFFFFF;
}

/* Header, navigation and footer */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 16px 48px;
  background: var(--card);
  border-bottom: 1px solid var(--card-border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}

.brand:hover {
  color: var(--text);
}

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--navy);
  border-radius: 8px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  background: var(--navy);
  color: #FFFFFF;
}

.site-main {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1280px;
}

.site-footer {
  padding: 24px 48px;
  border-top: 1px solid var(--card-border);
  background: var(--card);
}

/* Page heading block */

.page-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}

.page-heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.narrow {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Buttons. A link that looks like a button is still a link: it goes somewhere. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 20px;
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}

a.button {
  text-decoration: underline;
}

.button:hover {
  background: #0F1B2D;
  border-color: #0F1B2D;
  color: #FFFFFF;
}

.button-secondary {
  background: var(--card);
  color: var(--navy);
}

.button-secondary:hover {
  background: var(--info);
  color: var(--navy);
  border-color: var(--navy);
}

.button-small {
  min-height: 44px;
  padding: 8px 16px;
}

.button-quiet {
  min-height: 44px;
  padding: 8px 16px;
  background: var(--card);
  color: var(--navy);
  border-color: var(--control-border);
  font-weight: 400;
}

.button-quiet:hover {
  background: var(--info);
  color: var(--navy);
  border-color: var(--control-border);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Cards and panels */

.card {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-info {
  padding: 16px 20px;
  background: var(--info);
  color: var(--navy);
  border-radius: 8px;
}

.panel-success {
  padding: 16px 20px;
  background: var(--card);
  color: var(--success);
  border: 2px solid var(--success);
  border-radius: 8px;
  font-weight: 700;
}

.panel-error {
  padding: 12px 16px;
  background: var(--error-bg);
  color: var(--error-text);
  border: 2px solid var(--error-text);
  border-radius: 8px;
  font-weight: 700;
}

/* Sign in */

.sign-in {
  align-self: center;
  width: 100%;
  max-width: 480px;
  margin-top: 32px;
  padding: 40px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sign-in h1 {
  font-size: 32px;
}

/* Repository list */

.repository-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.repository {
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.repository-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.grade-letter.grade-letter-small {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border-width: 2px;
  font-size: 32px;
}

.repository h3 {
  font-family: var(--mono-font);
  font-size: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Forms */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label,
legend {
  font-weight: 700;
}

input[type="url"],
select {
  min-height: 48px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--control-border);
  border-radius: 8px;
  max-width: 100%;
}

input[type="url"] {
  font-family: var(--mono-font);
}

select {
  max-width: 420px;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--error-text);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

legend {
  padding: 0;
  margin-bottom: 12px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.choice input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--navy);
}

.choice label {
  font-weight: 400;
}

/* Review steps */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}

.step-label {
  flex-grow: 1;
}

.step-state {
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 110px;
}

.step svg {
  flex-shrink: 0;
}

.step [data-icon] {
  display: none;
}

.step[data-state="done"] [data-icon="done"],
.step[data-state="active"] [data-icon="active"],
.step[data-state="waiting"] [data-icon="waiting"],
.step[data-state="failed"] [data-icon="failed"] {
  display: block;
}

.step[data-state="done"] .step-state {
  color: var(--success);
}

.step[data-state="failed"] .step-state {
  color: var(--error-text);
}

/* Report */

.page-heading-wide {
  max-width: none;
}

.stack-tight {
  gap: 4px;
}

.readable {
  max-width: 900px;
}

/* Two columns: the grade and how to use the report on the left, what the review covered
   on the right. Each column reads top to bottom, in markup order. One column on narrow
   screens (see the 960px rule below). */
.report-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}


.grade-panel {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.grade-letter {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border-radius: 16px;
  border: 3px solid;
  font-size: 64px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grade-panel h2 {
  font-size: 28px;
}

.grade-a,
.grade-b {
  color: var(--success);
  background: #E7F4EC;
  border-color: var(--success);
}

.grade-c {
  color: var(--serious-text);
  background: var(--serious-bg);
  border-color: var(--serious-text);
}

.grade-d,
.grade-f {
  color: var(--error-text);
  background: var(--error-bg);
  border-color: var(--error-text);
}

.coverage-list {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.severity-counts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.severity-counts li {
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.severity-counts .count {
  font-size: 28px;
  font-weight: 700;
}

.finding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.finding {
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.finding > p,
.finding details {
  max-width: 900px;
}

.finding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.severity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
}

.severity-critical {
  background: var(--error-bg);
  color: var(--error-text);
}

.severity-serious {
  background: var(--serious-bg);
  color: var(--serious-text);
}

.severity-moderate {
  background: var(--info);
  color: var(--navy);
}

.severity-minor {
  background: var(--card);
  color: var(--text-secondary);
  border: 1px solid var(--text-secondary);
}

.location {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.snippet {
  margin: 0;
  padding: 12px 16px;
  background: var(--page);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-family: var(--mono-font);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.key {
  font-size: 13px;
}

.table-wrap {
  max-width: 100%;
}

.file-table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--card-border);
}

.file-table caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 8px;
}

.file-table th,
.file-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
}

.file-table thead th {
  background: var(--info);
  color: var(--navy);
}

.file-table tbody th {
  font-weight: 400;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.file-table td {
  font-variant-numeric: tabular-nums;
}

.test-table tbody th {
  font-size: 16px;
}

.test-title {
  display: block;
  font-weight: 600;
}

.test-id {
  display: block;
  font-size: 14px;
}

/* On narrow screens each test takes three lines: its name and issues, its source and
   where it looks, then its result. */
@media (max-width: 640px) {
  .file-table.test-table thead tr,
  .file-table.test-table tbody tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .file-table.test-table thead th:first-child,
  .file-table.test-table tbody th {
    grid-column: auto;
  }

  .file-table.test-table th:last-child,
  .file-table.test-table td:last-child {
    grid-column: 1 / -1;
  }

  .file-table.test-table th,
  .file-table.test-table td {
    padding: 6px 8px;
  }
}

/* On narrow screens each file name takes its own line, with its counts on the line below. */
@media (max-width: 640px) {
  .file-table thead tr,
  .file-table tbody tr {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid var(--card-border);
  }

  .file-table thead tr {
    background: var(--info);
  }

  .file-table th,
  .file-table td {
    padding: 6px 4px;
    border-bottom: 0;
    font-size: 15px;
  }

  .file-table th:first-child,
  .file-table thead th:nth-child(2),
  .file-table td:first-of-type {
    padding-left: 8px;
  }

  .file-table thead th {
    font-size: 14px;
  }

  .file-table thead th:first-child,
  .file-table tbody th {
    grid-column: 1 / -1;
  }

  .file-table tbody th {
    padding-top: 10px;
  }
}

details summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

.finding-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  color: var(--text-secondary);
}

.finding-meta div {
  display: flex;
  gap: 8px;
}

.finding-meta dt {
  font-weight: 700;
}

.finding-meta dd {
  margin: 0;
}

/* The status line is a message, not a heading, so it stands out by a bar, not weight. */
.status-line {
  padding-left: 12px;
  border-left: 4px solid var(--navy);
}

@media (max-width: 960px) {
  .report-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .severity-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .site-header,
  .site-main,
  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .site-main {
    padding-top: 32px;
  }

  h1 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Report: what kind of review this is, the scope beside the grade, and key issues */

.lead {
  font-size: 18px;
  max-width: 70ch;
}

.scope-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scope-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.scope-list dt {
  font-weight: 700;
}

.scope-list dt::after {
  content: ":";
}

.scope-list dd {
  margin: 0;
}

.key-issues {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.key-issues .mono {
  overflow-wrap: anywhere;
}