:root {
  --ink: #1f2933;
  --muted: #586474;
  --subtle-mute: color-mix(in srgb, var(--ink) 80%, var(--muted) 20%);
  --line: #d9e1e8;
  --soft: #f5f7fa;
  --panel: #fff;
  --accent: #1768ac;
  --accent-soft: #e8f2fb;
  --good: #146c43;
  --bad: #943e3e;
  --tap-target: 36px;
  --mobile-gutter: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.45;
  text-size-adjust: 100%;
  object-fit: contain !important;
}

main {
  width: 100%;
  margin: 0 auto;
  padding: clamp(10px, 2.2vw, 16px);
  min-width: 0;
}

main>* {
  min-width: 0;
}

h1 {
  margin: 0 0 6px;
  font-size: 26px;
}

h2 {
  margin: 0 0 8px;
  font-size: 1.12rem;
}

h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

p {
  margin: 0 0 3px;
  color: var(--subtle-mute);
}

section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin: 6px 0 2px 0;
  min-width: 0;
}

.panel {
  border: 1px solid var(--panel-border-color, var(--line));
  border-radius: var(--panel-radius, 10px);
  padding: var(--panel-padding, 12px);
  background: var(--panel-bg, var(--soft));
  margin: var(--panel-margin, 12px 0);
  box-shadow: var(--panel-shadow, none);
}

.metric {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px;
  background: var(--soft);
}

.metric strong {
  display: block;
  font-size: 1.24rem;
}

.metric span,
.muted {
  color: var(--subtle-mute);
}

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--summary-min, 170px), 1fr));
  gap: var(--summary-gap, 6px);
  margin: var(--summary-margin, 0);
}

.stat {
  border: 1px solid var(--stat-border-color, var(--line));
  border-radius: var(--stat-radius, 8px);
  padding: var(--stat-padding, 12px);
  background: var(--stat-bg, #fff);
  font-size: var(--stat-font-size, inherit);
  box-shadow: var(--stat-shadow, none);
}

.stat strong {
  display: block;
  font-size: var(--stat-strong-size, 17px);
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--filters-min, 190px), 1fr));
  gap: var(--filters-gap, 6px);
  margin: var(--filters-margin, 10px 0);
}

.filter-field label,
.filter-label {
  display: block;
  color: var(--filter-label-color, var(--subtle-mute));
  font-size: var(--filter-label-size, 12px);
  margin-bottom: var(--filter-label-margin-bottom, 4px);
  margin-left: var(--filter-label-margin-left, 0);
  font-weight: var(--filter-label-font-weight, 400);
  letter-spacing: var(--filter-label-letter-spacing, normal);
  text-transform: var(--filter-label-text-transform, none);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--actions-gap, 6px);
  margin-top: var(--actions-margin-top, 10px);
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--action-min-height, var(--tap-target, 44px));
  border: 1px solid var(--action-border-color, var(--line));
  border-radius: var(--action-radius, 7px);
  padding: var(--action-padding, 6px 9px);
  background: var(--action-bg, #fff);
  color: var(--action-color, inherit);
  text-decoration: none;
  font-weight: var(--action-font-weight, 400);
  cursor: pointer;
}

.action:hover {
  background: var(--action-hover-bg, #eef2f7);
}

.action:disabled {
  opacity: var(--action-disabled-opacity, 0.65);
  cursor: var(--action-disabled-cursor, wait);
}

.action-primary {
  background: var(--action-primary-bg, var(--accent));
  color: var(--action-primary-color, #fff);
  border-color: var(--action-primary-border-color, var(--action-primary-bg, var(--accent)));
}

.action-primary:hover {
  background: var(--action-primary-hover-bg, var(--action-primary-bg, var(--accent)));
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  vertical-align: top;
  font-size: 0.91rem;
  line-height: 1.35;
  border: none;
}

th {
  background: var(--soft);
  font-weight: 700;
  text-align: center;
  padding: 7px 8px;
}

td {
  text-align: center;
  padding: 4px 6px;
}

td+td,
th+th {
  border-left-width: 0.2px;
  border-left-style: solid;
  border-left-color: #ccc;
}

tr+tr td,
tr+tr th {
  border-top: 1px solid #ccc;
}

thead+tbody tr:first-child td {
  border-top: 1px solid #626262;
}

.note {
  color: var(--subtle-mute);
}

.empty {
  color: var(--subtle-mute);
  font-style: italic;
}

.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ref-td {
  font-size: 10px;
}

.term-td {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.correct {
  color: var(--good);
  font-weight: 700;
}

.incorrect {
  color: var(--bad);
  font-weight: 700;
}

.detail-cell .detail .table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.detail-cell .detail .table-wrap>table {
  width: max-content;
  min-width: 100%;
}

.missed-ref,
.marked-ref {
  display: inline-block;
  padding: 0.5px 5px;
  border-radius: 999px;
  font-weight: 600;
  white-space: normal;
  max-width: 100%;
}

.missed-ref {
  background: #fde8e7;
  color: #381626;
}

.marked-ref {
  background: #fffbe0;
  color: #5e5512;
}

mark {
  background: #fff2a8;
  padding: 0 0.2px;
  border-radius: 2px;
}

code {
  background: #eef2f7;
  padding: 2px 5px;
  border-radius: 4px;
}

.col-50pc {
  width: 50%;
}

.col-40pc {
  width: 40%;
}

.col-30pc {
  width: 30%;
}

.col-25pc {
  width: 25%;
}

.col-8pc {
  width: 8%;
}

.col-recommendation {
  min-width: 12rem;
}

.source-file-table th.no-br,
.source-file-table td.no-br,
.source-file-table th:first-child,
.source-file-table td:first-child {
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
  width: 1%;
}

.source-file-table td.no-br,
.source-file-table td:first-child {
  min-width: max-content;
}

#dashboard-file-quality-triage .source-file-table th:nth-child(7),
#dashboard-file-quality-triage .source-file-table td:nth-child(7) {
  min-width: 12rem;
}

@media (max-width: 900px) {
  h1 {
    font-size: 1.45rem;
  }

  main {
    padding: clamp(8px, 3vw, 12px);
  }

  section {
    padding: 8px;
  }

  .metric strong {
    font-size: 1.10rem;
  }
}

@media (max-width: 640px) {
  main {
    padding: var(--mobile-gutter);
  }

  h1 {
    font-size: 1.30rem;
  }

  h2 {
    font-size: 1.02rem;
  }

  section {
    padding: 4px;
    margin: 4px 0 2px 0;
  }

  th,
  td {
    font-size: 0.84rem;
  }

  th {
    padding: 2px 3px;
  }

  td {
    padding: 5px;
  }

  .ref-td {
    font-size: 0.7rem;
  }

  .col-50pc,
  .col-40pc,
  .col-30pc,
  .col-25pc,
  .col-8pc {
    width: auto;
  }
}