/* ===== OsteoSort: dark sidebar theme on Bootstrap 5 (Flatly) =====
   The navy and greys are the Atlas platform's (its midnight shell and its
   blue-grey scale); the gold accent is OsteoSort's own. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Inter-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Inter-Medium.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/Inter-SemiBold.woff2) format('woff2');
}

:root {
  --os-gold: #d4a843;
  --os-gold-tint: rgba(212, 168, 67, 0.15);
  --os-navy: #0c2030;
  --os-navy-dark: #081726;
  --os-field: #192e3f;
  --os-text: #dae6ec;
  --os-muted: #778f9e;
  --os-line: rgba(255, 255, 255, 0.08);
  /* the sidebar's rhythm: every control is one height, and controls stacked
     in a section are one gap apart */
  --os-control: 38px;
  --os-gap: 8px;
  --bs-body-font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-font-size: 15px;
  --bs-body-bg: #f4f8fa;
  --bs-body-color: #2a4051;
}

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  background-color: var(--bs-body-bg);
}

.app-main {
  padding: 20px 15px;
}

/* The sidebar keeps one width on desktop screens; the results take the rest.
   On narrow screens the two stack. */
@media (min-width: 992px) {
  .app-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }

  .app-sidebar {
    flex: 0 0 360px;
  }
}

.app-results {
  flex: 1 1 auto;
  min-width: 0;
}

/* Text selection is off everywhere: dragging across the page highlights
   nothing. Results are taken out with the Copy and Download buttons. Fields
   stay selectable so typed values can be edited. */
body {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Icons: Font Awesome Free 6 solid SVGs, tinted with the text colour.
   Not named ".icon": Plotly gives its toolbar SVGs that class. */
.os-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.icon-bone { --icon: url(../icons/bone.svg); width: 1.125em; }
.icon-table-list { --icon: url(../icons/table-list.svg); }
.icon-play { --icon: url(../icons/play.svg); width: 0.75em; }
.icon-folder-open { --icon: url(../icons/folder-open.svg); width: 1.125em; }
.icon-eraser { --icon: url(../icons/eraser.svg); width: 1.125em; }
.icon-download { --icon: url(../icons/download.svg); }
.icon-copy { --icon: url(../icons/copy.svg); }

/* Header: darker than the sidebar, with a gold accent border */
.app-navbar {
  background-color: var(--os-navy-dark);
  border-bottom: 2px solid var(--os-gold);
  min-height: 44px;
  padding: 0;
}

.app-navbar .navbar-brand {
  padding: 2px 15px 2px 0;
  margin-right: 30px;
  line-height: 40px;
}

.navbar-logo {
  height: 40px;
  width: auto;
  vertical-align: middle;
}

.app-navbar .nav-link {
  color: #ffffff;
  background: none;
  border: none;
  padding: 12px 15px !important;
  line-height: 20px;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active,
.app-navbar .nav-link.show {
  color: var(--os-gold);
}

.version-badge {
  color: var(--os-gold);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 12px 15px;
  line-height: 20px;
}

.files-menu {
  padding: 8px;
  min-width: 0;
}

.files-menu .btn {
  display: block;
  margin: 4px 0;
}

/* Dark sidebar */
.well {
  background-color: var(--os-navy);
  border-radius: 8px;
  padding: 19px;
  margin-bottom: 20px;
  color: var(--os-text);
}

.well label,
.well .form-label,
.well .form-check-label {
  color: var(--os-text);
  font-weight: normal;
}

.well .form-label {
  margin-top: 10px;
  margin-bottom: 4px;
}

.sidebar-section-label {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--os-muted);
  margin-bottom: 8px;
  margin-top: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--os-line);
}

/* The Settings heading opens and closes its section. While closed it says
   what is set, so nothing that changes a result is out of sight. */
.settings-toggle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--os-line);
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.settings-toggle::after {
  content: "";
  margin-left: auto;
  align-self: center;
  border: 4px solid transparent;
  border-top-color: var(--os-muted);
  border-bottom-width: 0;
  transition: transform 0.15s;
}

/* closed, the rule above Analyze is the only line needed */
.settings-toggle.collapsed {
  border-bottom-color: transparent;
  margin-bottom: 0;
  padding-bottom: 0;
}

.settings-toggle.collapsed::after {
  transform: rotate(-90deg);
}

.settings-toggle:hover,
.settings-toggle:focus-visible {
  color: var(--os-text);
}

.settings-summary {
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
  color: var(--os-text);
}

.settings-toggle:not(.collapsed) .settings-summary {
  display: none;
}

/* Under a heading, the first thing in each column of a row sits one gap
   below it, as a control straight under a heading does */
.well .sidebar-section-label + .row .side-label,
.well .sidebar-section-label + .row .measure-list {
  margin-top: 0;
}

.well > .sidebar-section-label:first-child {
  margin-top: 0;
}

/* Column headings (Left, Right, Independent, Dependent): the same type as
   the section labels, without the rule under them */
/* A caption over a column of controls inside a section (Independent, Left):
   plain small text, so it reads as belonging under the section's heading and
   not as a second heading */
.well h5.side-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--os-muted);
  margin-top: var(--os-gap);
  margin-bottom: 4px;
}

/* Every control in the sidebar is the same size: dropdowns, tag lists,
   number fields and the file field share one height, font and padding. */
.well .form-control,
.well .ts-wrapper .ts-control {
  font-size: 15px;
  line-height: 1.5;
  min-height: 38px;
  padding: 6px 8px;
}

/* The theme reserves room on the right for a dropdown arrow that is not
   drawn here; give it back so longer names such as "humerus-scapula" fit. */
.well .ts-wrapper.single .ts-control {
  padding-right: 8px !important;
}

.well .ts-wrapper .ts-control {
  align-items: center;
}

/* A control placed directly under another, with no label between them */
.well .stacked {
  margin-top: var(--os-gap);
}

/* Dark form controls */
.well .form-control {
  background-color: var(--os-field);
  color: var(--os-text);
  border: 1px solid var(--os-line);
  box-shadow: none;
}

.well .form-control:focus {
  border-color: var(--os-gold);
  box-shadow: none;
}

.well .form-control::placeholder {
  color: #586f80;
}

/* Typed measurements: one row each, the code beside its field. A pair-match
   has two fields a row, left and right, under their headings. */
.well .measure-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
  margin-top: var(--os-gap);
}

.well .measure-list.for-a-pair {
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
}

.well .measure-list label,
.well .measure-list h5.side-label {
  margin: 0;
  white-space: nowrap;
}

/* A bone with many measurements: beyond about ten rows the fields scroll in
   place, so the rest of the form and the Analyze button stay where they are.
   The wheel stays with the list while the pointer is over it. The small inset
   leaves room for a field's focus ring, which the scrolling edge would cut. */
.well .measure-scroll {
  max-height: 440px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #586f80 transparent;
  margin: var(--os-gap) -3px 0;
  padding: 3px;
}

.well .measure-scroll .measure-list {
  margin-top: 0;
}

/* Left and Right sit centred over their column of fields */
.well .for-a-pair .side-label {
  text-align: center;
}

/* the Left and Right captions stay in view while their fields scroll under them */
.well .measure-scroll .for-a-pair .side-label {
  position: sticky;
  top: -3px;
  z-index: 2;
  background-color: var(--os-navy);
  padding: 3px 0;
  align-self: stretch;
}

/* In the scrolling fields and in an open list the tooltip is the floating
   one, placed by script (common.js); the one drawn in place would be cut off */
.well .measure-scroll [data-tooltip]:hover::after,
.well .ts-dropdown .option[data-tooltip]:hover::after {
  content: none;
}

.floating-tip {
  position: fixed;
  z-index: 2000;
  background-color: #f5e6c0;
  color: var(--os-navy);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Measurements that come with the choice above them and cannot be changed:
   plain text at the height of a control, a line for each measurement and the
   one it is compared with. With none, it says so. */
.well .measure-given {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--os-control);
  color: var(--os-text);
}

.well .measure-given > div {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.9;
}

.well .measure-given .with,
.well .measure-given .absent {
  color: var(--os-muted);
}

.well .measure-given:empty::before {
  content: "Not in the file";
  color: var(--os-muted);
}

/* Hide number input spinners */
.well input[type="number"]::-webkit-outer-spin-button,
.well input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.well input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* File input: a neutral Browse button, a shade lighter than the field */
.well input[type="file"]::file-selector-button {
  background-color: #2a4459;
  color: var(--os-text);
  border: none;
  font-weight: 500;
}

.well input[type="file"]:hover::file-selector-button {
  background-color: #34526a !important;
}

.upload-summary {
  font-size: 12px;
  color: var(--os-muted);
  margin-top: 6px;
  line-height: 1.5;
}

.upload-summary strong {
  color: var(--os-text);
  font-weight: 500;
}

.upload-summary .unmatched {
  color: #f0b4a0;
}

/* Tom Select (dropdowns and tag lists) */
.well .ts-wrapper {
  margin-bottom: 0;
}

.well .ts-wrapper .ts-control,
.well .ts-wrapper.single.input-active .ts-control,
.well .ts-wrapper.full .ts-control {
  background-color: var(--os-field) !important;
  background-image: none !important;
  color: var(--os-gold);
  border: 1px solid var(--os-line);
  box-shadow: none;
  font-weight: 600;
}

.well .ts-wrapper.focus .ts-control {
  border-color: var(--os-gold);
  box-shadow: none;
}

.well .ts-wrapper .ts-control > input {
  color: var(--os-gold);
}

.well .ts-wrapper .ts-control > input::placeholder {
  color: #586f80;
}

/* A dropdown must not change height when it gains or loses focus: the form
   below would move under the pointer and swallow a click on Process. */
.well .ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
}

.well .ts-wrapper.single .ts-control > .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.well .ts-wrapper.single .ts-control > input {
  min-width: 2px !important;
}

.well .ts-wrapper.single .ts-control::after {
  border-color: var(--os-muted) transparent transparent transparent;
}

.well .ts-wrapper.multi .ts-control > .item {
  color: var(--os-gold);
  background: transparent;
  border: none;
  border-radius: 0;
  /* tight enough for two codes per row in a half-width column */
  padding: 1px 3px;
  margin: 0 2px 3px 0;
  font-weight: 600;
}

.well .ts-wrapper.multi .ts-control {
  padding-left: 7px;
  padding-right: 5px;
}

/* The full-width list of one bone's measurements: four tags to a row in
   columns of one width, so every row but the last is full and the tags line
   up under each other. (Every measurement code is six characters.) */
.well .ts-wrapper.tag-grid .ts-control {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 3px;
}

.well .ts-wrapper.tag-grid .ts-control > .item {
  margin: 0;
  padding-right: 0;
}

/* One bone of two, in half the width: two tags to a row. The box and its tags
   give up a few pixels of padding so the widest code and its × fit a column. */
.well .ts-wrapper.tag-grid.half .ts-control {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 5px;
  padding-right: 3px;
}

/* a size down: the widest code with its × is otherwise exactly a column wide */
.well .ts-wrapper.tag-grid.half .ts-control > .item {
  padding-left: 2px;
  font-size: 14px;
}

.well .ts-wrapper.tag-grid.half .ts-control > .item .remove {
  padding-left: 2px;
  padding-right: 0;
}

/* The theme gives a tag list's text field a 7rem minimum width, so it wraps
   onto an empty line of its own whenever the last row of tags is nearly full.
   Let it share the last row instead. */
.well .ts-wrapper.multi.has-items .ts-control > input {
  min-width: 2px !important;
  margin: 0 !important;
}

/* A tag's ×: faint until the tag or the × itself is pointed at, so a row of
   tags stays readable. The theme's divider line and padding are taken off. */
.well .ts-wrapper.multi .ts-control > .item .remove {
  border: none;
  padding: 0 1px 0 3px;
  margin: 0;
  color: var(--os-muted);
  opacity: 0.55;
  font-weight: normal;
  text-decoration: none;
}

.well .ts-wrapper.multi .ts-control > .item:hover .remove {
  opacity: 1;
}

.well .ts-wrapper.multi .ts-control > .item .remove:hover {
  background: none;
  color: #ffffff;
}

.well .ts-wrapper.multi .ts-control > .item.active {
  background-color: var(--os-gold-tint);
  color: var(--os-gold);
}

.ts-dropdown {
  background-color: var(--os-field);
  color: var(--os-text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0;
}

.ts-dropdown .option,
.ts-dropdown .no-results {
  color: var(--os-text);
  white-space: nowrap;
}

/* A list may be wider than a half-width dropdown, so long names stay on one line */
.well .ts-dropdown {
  width: max-content;
  min-width: 100%;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover,
.ts-dropdown .option.selected {
  background-color: var(--os-gold-tint);
  color: var(--os-gold);
}

/* Checkboxes, radios, slider */
.well .form-check-input {
  accent-color: var(--os-gold);
  background-color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.well .form-check-input:checked {
  background-color: var(--os-gold);
  border-color: var(--os-gold);
}

.well .form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.3);
}

/* The on/off settings are switches: a dark pill with a grey dot when off,
   gold with a white dot when on. */
.well .form-switch .form-check-input:not(:checked) {
  background-color: var(--os-field);
  border-color: var(--os-muted);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23778f9e'/%3e%3c/svg%3e");
}

/* Tails and Alpha: one control in a few parts, the chosen part gold */
.alpha-group,
.well .ttest-settings {
  margin-top: var(--os-gap);
}

/* with no tails to choose (regression), alpha is the first thing under the heading */
.tails-group[hidden] + .alpha-group {
  margin-top: 0;
}

/* the same height as a dropdown or a field, whatever the words in it */
.segmented .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--os-control);
  background-color: var(--os-field);
  border: 1px solid var(--os-line);
  color: var(--os-text);
  font-size: 14px;
  padding: 0 6px;
}

.segmented .btn:hover {
  border-color: var(--os-muted);
  color: #ffffff;
}

/* the chosen part: a gold outline and tint. Solid gold is kept for the one
   button that runs the analysis. */
.segmented .btn-check:checked + .btn {
  background-color: var(--os-gold-tint);
  border-color: var(--os-gold);
  color: var(--os-gold);
  font-weight: 500;
}

.segmented .btn-check:disabled + .btn {
  opacity: 0.4;
}

.segmented .btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.3);
}

.settings-note .warning {
  color: #f5e6c0;
}

.well hr {
  border-color: rgba(255, 255, 255, 0.4);
  margin: 18px 0;
}

/* Buttons. Solid gold is the one thing to press: Analyze, or a dialog's
   answer. Everything else is neutral, so the gold one stands out. */
/* On the white panels: Copy, Download, the example files */
.btn-neutral,
.btn-neutral:focus {
  background-color: #ffffff;
  border: 1px solid #becfd9;
  color: #2a4051;
}

.btn-neutral:hover,
.btn-neutral:active {
  background-color: #f4f8fa !important;
  border-color: #778f9e !important;
  color: #2a4051 !important;
}

/* In the dark sidebar: Clear beside Analyze */
.well .btn-neutral,
.well .btn-neutral:focus {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--os-text);
}

.well .btn-neutral:hover,
.well .btn-neutral:active {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--os-muted) !important;
  color: #ffffff !important;
}

.btn-gold,
.btn-gold:focus {
  background-color: var(--os-gold);
  border-color: var(--os-gold);
  color: var(--os-navy);
}

.btn-gold:hover,
.btn-gold:active,
.btn-gold:disabled {
  background-color: #c2983a !important;
  border-color: #c2983a !important;
  color: var(--os-navy) !important;
}

/* Measurement code tooltip: light gold on dark */
.well [data-tooltip] {
  position: relative;
  cursor: help;
}

/* let the tooltip of a measurement tag extend past its tag list */
.well .ts-wrapper.multi .ts-control {
  overflow: visible;
}

/* Dropdowns and tag lists each sit in their own layer, so a tooltip would
   slide under the control beside or above it. Lift whatever is hovered. */
.well [data-tooltip]:hover {
  z-index: 30;
}

.well .ts-wrapper:hover .ts-control {
  z-index: 20;
}

.well [data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 0;
  background-color: #f5e6c0;
  color: var(--os-navy);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Main panel */
.panel {
  background-color: #ffffff;
  border: 1px solid #dae6ec;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.main-section-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #2a4051;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--os-gold);
}

/* The batch summary: one tile per headline number, two to a row beside the plot */
.stat-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-tile {
  background-color: #f7fafc;
  border: 1px solid #dae6ec;
  border-left: 3px solid #becfd9;
  border-radius: 4px;
  padding: 10px 14px;
}

/* four across above the single comparison's plot, fewer to a row on a narrow screen */
.stat-tiles.in-a-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 8px;
}

.stat-tile.accent {
  border-left-color: var(--os-gold);
}

/* the outcome of a single comparison, in the colours the batch histogram gives the two */
.stat-tile.excluded {
  border-left-color: #cc4444;
}

.stat-tile.kept {
  border-left-color: #3d5a73;
}

.stat-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: #2a4051;
}

.stat-note {
  font-size: 13px;
  font-weight: 500;
  color: #586f80;
  margin-left: 8px;
}

.stat-label {
  font-size: 12px;
  color: #586f80;
  margin-top: 2px;
}


.stat-run {
  font-size: 12px;
  color: #778f9e;
  margin: 8px 0 0;
}

/* The plots keep one shape, 21:9, within a range of heights, rather than
   stretching into a strip on a wide screen; Single's and Multiple's alike */
.plot-single {
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 300px;
  max-height: 480px;
}

.plot-histogram {
  width: 100%;
  height: 250px;
}

/* On a very wide screen the results stop widening, so the plots and tables
   keep their proportions. The sidebar stays at the left edge and the results
   beside it; what is left over is empty space on the right. */
.app-results {
  max-width: 1400px;
}

/* On a wide screen the summary tiles stand in a column on the left of the
   plot, one width in both tabs so the plots line up, and stretch to the
   plot's height: Single's four one above another, Multiple's six two to a
   row with the run time under them. Narrower, the tiles sit above. */
@media (min-width: 1200px) {
  .summary-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
  }

  .summary-row > .stat-tiles.in-a-row,
  .summary-row > .summary-side {
    flex: 0 0 340px;
  }

  /* the tiles end level with the plot's x-axis: the space below it, for the
     axis numbers and title, is the plot's bottom margin (single.js) */
  .summary-row > .stat-tiles.in-a-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
    padding-bottom: 50px;
  }

  .summary-row > .summary-side {
    display: flex;
    flex-direction: column;
  }

  .summary-row > .summary-side > .stat-tiles {
    flex: 1 1 auto;
    grid-auto-rows: 1fr;
  }

  .summary-row .stat-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .summary-row > .stat-tiles.in-a-row .stat-tile {
    flex: 1 1 0;
  }

  .summary-row > .plot-single,
  .summary-row > .plot-box {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* the histogram takes the same shape as Single's plot */
  .summary-row > .plot-box > .plot-histogram {
    height: auto;
    aspect-ratio: 21 / 9;
    min-height: 300px;
    max-height: 480px;
  }
}

/* Tables */
.panel .table {
  margin-bottom: 0;
  --bs-table-striped-bg: #f7fafc;
  --bs-table-hover-bg: var(--os-gold-tint);
  --bs-table-border-color: #eef4f7;
}

/* numbers against the right edge of their column, each digit the same width */
.panel .table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.panel .table th {
  font-weight: 600;
  white-space: nowrap;
}

.result-table tbody tr:hover > td {
  background-color: var(--os-gold-tint);
  box-shadow: none;
}

.result-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.result-table th.sortable::after {
  content: "\2195";
  color: #becfd9;
  margin-left: 6px;
  font-weight: 400;
}

.result-table th.sorted-asc::after { content: "\2191"; color: #2a4051; }
.result-table th.sorted-desc::after { content: "\2193"; color: #2a4051; }

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

/* the search box says what it is with a magnifier and a word inside it */
.table-toolbar .table-search {
  width: 240px;
  padding-left: 30px;
  background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23778f9e' stroke-width='1.6' stroke-linecap='round'%3e%3ccircle cx='7' cy='7' r='4.5'/%3e%3cpath d='M10.5 10.5 14 14'/%3e%3c/svg%3e") no-repeat 9px center / 14px;
}

.table-toolbar input:focus {
  border-color: var(--os-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.3);
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.table-paging {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-paging .page-size {
  width: auto;
}

.table-paging .page-size:focus {
  border-color: var(--os-gold);
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.3);
}

.table-footer .pagination {
  margin: 0;
  --bs-pagination-color: #2a4051;
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: transparent;
  --bs-pagination-hover-color: #2a4051;
  --bs-pagination-hover-bg: var(--os-gold-tint);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-active-color: #2a4051;
  --bs-pagination-active-bg: var(--os-gold-tint);
  --bs-pagination-active-border-color: var(--os-gold);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
  --bs-pagination-disabled-color: #778f9e;
  --bs-pagination-focus-box-shadow: none;
}

/* Regression goes one way: the first bone predicts the second. An arrow in
   the gap between the two bone dropdowns says so, level with them. */
.well .predicts {
  position: relative;
}

.well .predicts-arrow {
  position: absolute;
  left: 50%;
  top: 0;
  width: auto;
  padding: 0;
  transform: translateX(-50%);
  line-height: var(--os-control);
  color: var(--os-muted);
  cursor: help;
}

/* The sample size of a result row says, on hover, which reference groups it
   came from. The tooltip opens to the left, on the row's own line, so the
   scrolling table area never clips it. */
.panel td[data-tooltip] {
  position: relative;
  cursor: help;
  text-decoration: underline dotted #becfd9;
  text-underline-offset: 3px;
}

.panel td[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f5e6c0;
  color: var(--os-navy);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* a list of measurement codes can be long: its tooltip wraps */
.panel td.measures[data-tooltip]:hover::after {
  white-space: normal;
  width: max-content;
  max-width: 280px;
}

/* Results tabset: the active tab has a gold tint and a gold line under it;
   the others are in the muted slate of the tile labels, darker on hover */
.results-tabs .nav-link {
  color: #586f80;
  border-color: transparent;
  min-width: 10.5rem; /* the three tabs are one width, that of the longest label */
}

.results-tabs .nav-link:hover,
.results-tabs .nav-link:focus {
  background-color: var(--os-gold-tint);
  border-color: transparent;
  color: #2a4051;
}

.results-tabs .nav-link.active,
.results-tabs .nav-link.active:hover {
  background-color: var(--os-gold-tint);
  color: #2a4051;
  font-weight: 600;
  border-color: transparent;
  box-shadow: inset 0 -3px 0 var(--os-gold);
}

/* Dialogs */
.progress-text {
  text-align: center;
  margin: 10px 0 0;
}

#progress-modal .progress-bar {
  background-color: var(--os-gold);
}

.error-dialog .modal-body {
  text-align: center;
  padding: 30px;
}

/* what went wrong, said plainly: a red edge marks it, the words do the rest */
.error-dialog {
  border-top: 3px solid #c0392b;
}

.error-dialog p {
  font-size: 16px;
  margin: 4px 0 22px;
}

/* A plot's hover label (common.js): the floating tooltip's look, with a
   trace name and two lines of values */
.plot-tip {
  position: fixed;
  z-index: 2000;
  background-color: #f5e6c0;
  color: var(--os-navy);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: pre;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}