/* The app's own styles (the CSP allows no inline styles). */

/* Accessibility (docs/accessibility.md). The page background is --bs-tertiary-bg (#f8f9fa), on which Bootstrap's
   link and outline-button colours fall below 4.5:1 (#0d6efd 4.27, #6c757d 4.45): darker shades pass (6.1, 5.8). */
:root {
  --bs-link-color: #0a58ca;
  --bs-link-color-rgb: 10, 88, 202;
  --bs-link-hover-color: #084298;
  --bs-link-hover-color-rgb: 8, 66, 152;
  --app-focus: #052c65;
}
.btn-outline-primary {
  --bs-btn-color: #0a58ca;
  --bs-btn-border-color: #0a58ca;
}
.btn-outline-secondary {
  --bs-btn-color: #5c636a;
  --bs-btn-border-color: #5c636a;
}
/* Form controls: Bootstrap's border (#dee2e6, 1.3:1) is too faint to find a field by; #6c757d is 4.7:1. */
.form-control,
.form-select,
.form-check-input {
  border-color: #6c757d;
}
/* A focus outline that shows on every background (Bootstrap's pale ring is 1.4:1 on white). */
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.hint:focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 2px;
}
.pdf-frame {
  width: 100%;
  height: 75vh;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.text-block {
  max-height: 60vh;
  overflow: auto;
}
.text-block pre {
  white-space: pre-wrap;
}
/* The workload planner's charts (planner_page.chart, dashboard/_planner_chart.html). Each method has its own dash as
   well as its own colour: solid, dash-dot (mixed), dashed (traditional); the target is dotted. */
.planner-chart {
  width: 100%;
  max-width: 720px;
  height: auto;
}
.planner-grid {
  stroke: var(--bs-border-color);
}
.planner-axis {
  stroke: var(--bs-secondary-color);
}
.planner-tick {
  fill: var(--bs-body-color);
  font-size: 12px;
}
.planner-target {
  stroke: var(--bs-danger);
  stroke-dasharray: 2 4;
}
.planner-line {
  fill: none;
  stroke-width: 2.5;
}
.planner-band {
  stroke: none;
  opacity: 0.15;
}
.planner-line.rule-scores { stroke: var(--bs-primary); }
.planner-band.rule-scores { fill: var(--bs-primary); }
.planner-line.rule-mixed { stroke: var(--bs-success); stroke-dasharray: 12 3 2 3; }
.planner-band.rule-mixed { fill: var(--bs-success); }
.planner-line.rule-traditional { stroke: var(--bs-secondary-color); stroke-dasharray: 6 4; }
.planner-band.rule-traditional { fill: var(--bs-secondary-color); }
/* The key draws a short line with the chart's own classes, so colour and dash match the chart. */
.planner-key {
  display: inline-block;
  width: 1.5em;
  height: 0.4em;
  vertical-align: middle;
  overflow: visible;
}

/* The Positions chart (positions_page.position_chart, dashboard/_positions_chart.html): each row's fill is its star
   level's colour; a grey outline gives the palest level 3:1 against the page. Many rows scroll in a box of fixed
   height, under an axis that stays in view. */
.positions-box {
  overflow-x: auto;
}
.positions-scroll {
  max-height: 36rem;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.positions-axis,
.positions-chart {
  display: block;
}
.positions-axis {
  position: sticky;
  top: 0;
  z-index: 1;
}
.positions-axis-back {
  fill: var(--bs-body-bg);
}
.positions-axis-line {
  stroke: var(--bs-secondary-color);
}
.positions-tick {
  fill: var(--bs-body-color);
  font-size: 12px;
}
.positions-grid {
  stroke: var(--bs-border-color);
}
.positions-stripe {
  fill: var(--bs-tertiary-bg);
}
.positions-label {
  fill: var(--bs-body-color);
  font-size: 11px;
}
.positions-id {
  font-weight: 600;
}
.positions-interval {
  fill: var(--bs-secondary-color);
  opacity: 0.18;
}
.positions-shape {
  stroke: #5c636a;
  stroke-width: 0.75;
  stroke-linejoin: round;
}
.positions-median {
  stroke: var(--bs-emphasis-color);
  stroke-width: 2;
}

/* The reading timer (reviewer/_timer.html): stays in view while the reviewer scrolls through the papers */
.reading-timer { position: sticky; top: 0; z-index: 10; background: var(--bs-body-bg); }
.reading-timer-bar { height: 0.5rem; min-width: 6rem; accent-color: #0a58ca; }
.reading-timer-over .reading-timer-bar { accent-color: #995c00; }
.reading-timer-paused [data-timer-clock] { text-decoration: underline dotted; }

/* Help hints (templates/_hint.html, static/app/hints.js): a muted question mark, at least 24 px square (2.5.8), in the
   outline buttons' grey (5.8:1 on the page background; 3:1 is needed for an icon), blue when pointed at or open. */
.hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  margin-left: 0.125rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #5c636a;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1;
  vertical-align: middle;
}
.hint:hover,
.hint[aria-describedby^="popover"] {
  color: #0a58ca;
}
.hint-popover {
  --bs-popover-max-width: 20rem;
  --bs-popover-font-size: 0.875rem;
  --bs-popover-border-color: #6c757d;
}

/* Written feedback (triage): a text shown with its line breaks. */
.preserve-lines {
  white-space: pre-wrap;
}