/* Rates Page: newsprint, ink, one data blue, vermilion for warnings. No cards, no radius, no shadows. */

@font-face {
  font-family: 'League Gothic';
  src: url('fonts/league-gothic-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/libre-franklin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #e8e6df;
  --paper-2: #dcd9cf;
  --ink: #151412;
  --ink-2: #46443f;
  --ink-3: #5c5a53;
  --rule: #151412;
  --rule-soft: #b4b1a6;
  --blue: #1f5fae;
  --on-blue: #ffffff;
  --blue-screen: #a9c0de;
  --blue-wash: #d2dcea;
  --red: #d3261c;
  --red-strong: #b01e15;
  --on-strong: #e8e6df;
  --green: #0a6b0a;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5l6-6' fill='none' stroke='%23151412' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%23e8e6df' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --display: 'League Gothic', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --text: 'Libre Franklin', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --gutter: 20px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #141312;
    --paper-2: #201f1d;
    --ink: #ecebe5;
    --ink-2: #bdbbb2;
    --ink-3: #9a978f;
    --rule: #ecebe5;
    --rule-soft: #45433f;
    --blue: #4f93e6;
    --on-blue: #0d0d0c;
    --blue-screen: #24406a;
    --blue-wash: #1a2740;
    --red: #f0604f;
    --red-strong: #f0604f;
    --on-strong: #141312;
    --green: #3fbf3f;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5l6-6' fill='none' stroke='%23ecebe5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%23141312' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #141312;
  --paper-2: #201f1d;
  --ink: #ecebe5;
  --ink-2: #bdbbb2;
  --ink-3: #9a978f;
  --rule: #ecebe5;
  --rule-soft: #45433f;
  --blue: #4f93e6;
  --on-blue: #0d0d0c;
  --blue-screen: #24406a;
  --blue-wash: #1a2740;
  --red: #f0604f;
  --red-strong: #f0604f;
  --on-strong: #141312;
  --green: #3fbf3f;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5l6-6' fill='none' stroke='%23ecebe5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%23141312' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 12px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--text);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  accent-color: var(--blue);
  caret-color: var(--blue);
}

::selection {
  background: var(--blue);
  color: var(--on-blue);
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

b {
  font-weight: 700;
}

[hidden] {
  display: none !important;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite {
  position: absolute;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.2em;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 5;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.skip:focus {
  top: 8px;
}

.sheet {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Masthead */

.masthead {
  padding-top: 14px;
}

.nameplate,
.banner,
.bar,
.waiting {
  /* The face joins f and i into a shape that reads as a dotless i. */
  font-variant-ligatures: none;
}

.nameplate {
  padding-bottom: 7px;
  border-bottom: 3px solid var(--red);
  font: 400 2.5rem/0.95 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.dateline {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  list-style: none;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.dateline li {
  margin-right: 9px;
  padding-right: 9px;
  border-right: 1px solid var(--rule-soft);
}
.dateline li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
  font-weight: 700;
  color: var(--ink);
}
/* Below the width of a desk the three facts do not fit on one line. That the page is unofficial
   takes a line of its own, and the fact before it, which now ends its line, has no divider after it. */
@media (max-width: 999px) {
  .dateline li:nth-child(2) {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
  }
  .dateline li:nth-child(3) {
    flex-basis: 100%;
  }
}
/* On a phone each fact has a line of its own: the date, then that the page is unofficial, then the recruitment. */
@media (max-width: 599px) {
  .dateline li {
    flex-basis: 100%;
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
  }
  .dateline li:nth-child(1) {
    order: 1;
  }
  .dateline li:nth-child(3) {
    order: 2;
  }
  .dateline li:nth-child(2) {
    order: 3;
  }
}

.reading {
  padding: 8px 0 7px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.marker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 8px;
  font-weight: 700;
}
.marker .icon {
  color: var(--green);
}
.marker.is-delayed .icon {
  color: var(--ink-3);
}
.marker.is-stale .icon {
  color: var(--red-strong);
}
.reading {
  border-bottom: 1px solid var(--rule-soft);
}
/* Kept whole, so the number is never parted from its words at the end of a line. */
.viewing {
  white-space: nowrap;
}

.sharing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  padding: 2px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}
.more {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-top: 2px;
  font-size: 0.875rem;
}
.share,
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.share:active,
.text-button:active {
  color: var(--ink-2);
}
.sharing__said {
  min-width: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* Telegram */

.channel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 1.4;
}
/* A link that leaves the page has its mark after its words, as the links to the official site have. */
a.text-button {
  gap: 3px;
}
.alerts {
  margin-top: 6px;
}
.alerts .note {
  margin: 0 0 8px;
}

/* Notices */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 0;
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  font-weight: 500;
  line-height: 1.4;
}
.notice .icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--red-strong);
}
.notice b {
  display: block;
}

.waiting {
  padding: 56px 0 8px;
  font: 400 2.75rem/1 var(--display);
}
#waiting {
  padding-bottom: 56px;
}

/* Lead */

.lead {
  padding-top: 22px;
}

.banner {
  font: 400 3.5rem/0.92 var(--display);
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.deck {
  max-width: 34em;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

.overall {
  margin-top: 16px;
}

/* Filled and left, as two segments separated by a gap in the paper colour */

.stack {
  display: flex;
  gap: 2px;
  height: 12px;
}
.stack--lead {
  height: 22px;
}
.stack__filled,
.stack__left {
  flex: 1 1 0;
  min-width: 2px;
}
.stack__filled {
  background: var(--blue);
}
.stack__left {
  background: var(--blue-screen);
}
.stack__none {
  flex: 1;
  border: 1px solid var(--rule-soft);
}

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 8px;
  font-size: 0.9375rem;
}
.keys--small {
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.key {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.swatch {
  align-self: center;
  width: 12px;
  height: 12px;
  flex: none;
}
.swatch--filled {
  background: var(--blue);
}
.swatch--left {
  background: var(--blue-screen);
}

/* Section heads: reversed bars that run to the edge of the sheet */

.bar {
  margin: 40px calc(var(--gutter) * -1) 14px;
  padding: 8px var(--gutter) 6px;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.625rem/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sub {
  margin: 18px 0 2px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.bar + .sub,
.pair > div:first-child > .sub:first-child {
  margin-top: 0;
}

.standfirst {
  margin-bottom: 12px;
  max-width: 38em;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
}

.note {
  max-width: 38em;
  margin: 8px 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.empty {
  padding: 14px 0;
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  font-weight: 500;
}

/* Controls */

.picker {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.segments {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.segments legend,
.field__label {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}
.segments__row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border: 1px solid var(--rule);
}
.segment {
  position: relative;
  display: block;
  border-left: 1px solid var(--rule);
}
.segment:first-child {
  border-left: 0;
}
.segment input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.segment span {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 0 8px;
  font-weight: 600;
  text-align: center;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.segment input:checked + span {
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 700;
}
/* Blue is kept for the reader's own category. Other switches select by reversal. */
.segments--plain .segment input:checked + span {
  background: var(--ink);
  color: var(--paper);
}
.segment input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}
/* More choices than fit one line on a phone: four to a line there, one line on a wider sheet. */
.segments--wrap .segments__row {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 1px 1px 0;
  border: 0;
}
.segments--wrap .segment,
.segments--wrap .segment:first-child {
  margin: 0 -1px -1px 0;
  border: 1px solid var(--rule);
}

.field {
  display: block;
  min-width: 0;
}
.field select,
.field input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  padding-right: 40px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}
.field input::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
.field input::-webkit-search-decoration,
.field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.filters {
  display: grid;
  gap: 14px;
  margin-bottom: 4px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  font-weight: 600;
  cursor: pointer;
}
.check input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.check input:checked {
  background: var(--ink) var(--tick) center / 16px no-repeat;
}

/* The full table on a phone: each place on two lines, every category in view, nothing to swipe. */
.stacked {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  list-style: none;
}
.place-row {
  padding: 10px 0 11px;
  border-bottom: 1px solid var(--rule-soft);
}
.place-row:last-child {
  border-bottom: 0;
}
.place-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.3;
}
.place-row__name {
  min-width: 0;
  font-weight: 600;
}
.place-row__total {
  flex: none;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.place-row__total b {
  font-size: 1rem;
}
.place-row__cats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 7px 0 0;
  border: 1px solid var(--rule-soft);
}
.place-row__cats > div {
  padding: 4px 6px 5px;
  border-left: 1px solid var(--rule-soft);
  text-align: right;
}
.place-row__cats > div:first-child {
  border-left: 0;
}
.place-row__cats dt {
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.place-row__cats dd {
  margin: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.place-row__cats .is-mine {
  background: var(--blue-wash);
}
.place-row__cats .is-mine dt,
.place-row__cats .is-mine dd {
  color: var(--ink);
  font-weight: 700;
}
.stacked.has-choice .place-row__cats > div:not(.is-mine) dd {
  color: var(--ink-2);
}
.place-row__cats .quiet,
.stacked.has-choice .place-row__cats > div .quiet {
  color: var(--ink-3);
  font-weight: 400;
}
.place-row__more {
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.place-row__more b {
  color: var(--ink);
}
.place-row__more .flag {
  margin: 0 8px 0 0;
  vertical-align: 1px;
}
.flag.flag--closed {
  background: var(--ink);
  color: var(--paper);
}
.watch-hint a {
  font-weight: 600;
}
.stacked__none {
  padding: 14px 0;
  font-weight: 500;
}
.from-600 {
  display: none;
}

/* Tables */

.table-wrap {
  /* Positioned, so labels hidden for screen readers stay inside the scroll area. */
  position: relative;
  overflow-x: auto;
  scrollbar-color: var(--ink-3) transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.table-wrap--short {
  max-height: 320px;
  overflow-y: auto;
}

.rates {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.3;
}
.rates th,
.rates td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
}
.rates th:first-child,
.rates td:first-child {
  padding-left: 0;
}
.rates th:last-child,
.rates td:last-child {
  padding-right: 2px;
}
.rates th + th,
.rates th + td,
.rates td + td {
  border-left: 1px solid var(--rule-soft);
}
.rates thead th {
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.8125rem;
  font-weight: 700;
  vertical-align: bottom;
}
.rates tbody th {
  font-weight: 600;
}
.rates tbody tr:last-child > * {
  border-bottom: 2px solid var(--rule);
}
.rates .num {
  text-align: right;
  white-space: nowrap;
}
.rates .num.wraps {
  white-space: normal;
}

.rates .strong {
  font-weight: 700;
}
.rates .quiet {
  color: var(--ink-3);
}
.rates .aside {
  color: var(--ink-2);
}

/* Tables that fit their column are not scroll areas, so their column names can stay in view. */
.table-wrap--fit {
  overflow: visible;
}
.table-wrap--fit thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-top: 0;
  border-bottom: 0;
  background: var(--paper);
  box-shadow: inset 0 2px 0 var(--rule), inset 0 -1px 0 var(--rule);
}

/* With a category chosen, it comes forward in full ink and the rest drop back.
   In the category table the categories are rows. In the wide table they are columns. */
.rates:not(.rates--wide).has-choice tbody tr:not(.is-chosen):not(.total-row) > *,
.rates:not(.rates--wide).has-choice tbody tr:not(.is-chosen):not(.total-row) .cat__code {
  color: var(--ink-2);
  font-weight: 400;
}
.rates:not(.rates--wide).has-choice .is-chosen > * {
  color: var(--ink);
  font-weight: 700;
}
.rates--wide.has-choice tbody td {
  color: var(--ink-2);
  font-weight: 400;
}
.rates--wide.has-choice tbody td.strong,
.rates--wide.has-choice tbody td.is-mine {
  color: var(--ink);
  font-weight: 700;
}
.rates .quiet,
.rates:not(.rates--wide).has-choice tbody tr > td.quiet,
.rates--wide.has-choice tbody td.quiet {
  color: var(--ink-3);
  font-weight: 400;
}
.rates--wide.has-choice tbody .repeat > td {
  color: var(--ink);
  font-weight: 700;
}

.rates .repeat > td {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
}

.rates .has-bar > * {
  padding-bottom: 5px;
  border-bottom: 0;
}
.rates .bar-row > td {
  padding: 0 2px 11px 0;
  border-left: 0;
}
.rates .total-row > * {
  border-top: 1px solid var(--rule);
  font-weight: 700;
}

.rates .is-chosen > *,
.rates .is-mine {
  background-color: var(--blue-wash);
}
.rates .is-chosen .under {
  color: var(--ink);
}

.cat__code {
  color: var(--ink-3);
  font-weight: 600;
}
.yours {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 700;
}
.yours .icon {
  color: var(--blue);
}

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--ink-3);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: 1px;
  white-space: nowrap;
}

/* The watch mark hangs in the margin beside a place, so names keep their rail.
   Its tap area is larger than the mark and reaches over the start of the name. */
.rates tbody th[scope='row'],
.place-row {
  position: relative;
}
.pin {
  position: absolute;
  top: 0;
  left: calc(var(--gutter) * -1);
  display: grid;
  align-content: start;
  width: 44px;
  height: 44px;
  padding: 11px 0 0 2px;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.pin .icon {
  width: 16px;
  height: 16px;
}
.pin.is-on {
  color: var(--ink);
}
.pin:focus-visible {
  outline-offset: -4px;
}
.place-row > .pin {
  top: 1px;
}

.tag--differs {
  border-color: var(--red-strong);
  color: var(--ink);
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 7px 2px 5px;
  background: var(--red-strong);
  color: var(--on-strong);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.flag .icon {
  width: 14px;
  height: 14px;
}
.place {
  display: block;
}
.under {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 400;
}
.only-wide {
  display: none;
}

.sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  width: 100%;
  min-height: 44px;
  margin: -9px 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sort--text {
  justify-content: flex-start;
}
.sort .icon {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}
.sort[aria-pressed='true'] .icon {
  color: var(--ink);
}
.sort:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.rates--wide th:first-child,
.rates--wide td:first-child {
  min-width: 118px;
  padding-right: 8px;
}

/* Ranked lists */

.ranked {
  padding: 0;
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  list-style: none;
}
.rank {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-items: baseline;
  padding: 9px 0 11px;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 1.3;
}
.rank:last-child {
  border-bottom: 0;
}
/* The rank hangs in the margin, so every name starts on the same line as in the tables. */
.rank__n {
  position: absolute;
  top: 11px;
  left: -18px;
  width: 15px;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.rank--top .rank__n {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.rank__name {
  font-weight: 500;
}
.rank--top .rank__name {
  font-weight: 800;
}
.rank__value {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.rank__value b {
  font-size: 1rem;
}
.rank__mark {
  grid-column: 1 / -1;
}

.hbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hbar__fill {
  flex: none;
  width: calc((100% - 7.5em) * var(--ratio));
  min-width: 2px;
  height: 12px;
  background: var(--blue);
}
.hbar__scaled {
  flex: none;
  width: calc((100% - 7.5em) * var(--ratio));
  min-width: 6px;
}
.hbar__tip {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.hbar__tip span {
  font-weight: 400;
}

/* Called and taken, one under the other on one scale. Ink is who was called, blue the seats that went. */

.pairs {
  display: grid;
  gap: 2px;
}
.pairs__bar {
  width: calc(100% * var(--ratio));
  min-width: 2px;
  height: 10px;
}
.pairs__bar.is-none {
  min-width: 0;
}
.pairs__bar--called,
.pairs__bar--waiting,
.swatch--called {
  background: var(--ink);
}
.pairs__bar--taken {
  background: var(--blue);
}
/* Seats left keep the page's colour for them, with a line round it so a short bar can be seen on the paper. */
.pairs__bar--left,
.swatch--lined {
  background: var(--blue-screen);
  box-shadow: inset 0 0 0 1px var(--blue);
}
/* The ratio, which is what the row is there to tell. */
.under--told {
  color: var(--ink);
  font-weight: 700;
}
.rates thead .swatch {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -1px;
}
/* One word and its mark, which must not part on a narrow phone. */
#selection-table thead th:nth-child(2) {
  white-space: nowrap;
}

/* Quick links: an index under the headline, which scrolls away with it */

.jump {
  margin-top: 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jump a {
  display: block;
  /* Tall enough for a thumb. */
  padding: 13px 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375;
}

.pair {
  display: grid;
  gap: 8px 32px;
}

/* Closed */

.brief {
  column-count: 2;
  column-gap: 24px;
  column-rule: 1px solid var(--rule-soft);
  margin: 8px 0 4px;
  padding: 8px 0;
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  list-style: none;
  line-height: 1.35;
}
.brief li {
  padding: 4px 0;
  break-inside: avoid;
}
.brief .brief__none {
  color: var(--ink-2);
}

/* Trend */

.chart {
  position: relative;
  height: 240px;
  touch-action: pan-y;
  cursor: crosshair;
}
.chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart .grid {
  stroke: var(--rule-soft);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart .axis {
  stroke: var(--ink-3);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart .line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart .dot {
  fill: var(--blue);
  stroke: var(--paper);
  stroke-width: 2;
}
.chart .gap {
  fill: var(--paper-2);
}
.chart .gap-edge {
  stroke: var(--rule-soft);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart .gap-label {
  fill: var(--ink-3);
  font-weight: 600;
}
.chart .cross {
  stroke: var(--ink);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart text {
  fill: var(--ink-2);
  font: 500 12px var(--text);
  font-variant-numeric: tabular-nums;
}
.chart .end-label {
  fill: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

.readout {
  min-height: 1.5em;
  margin-top: 6px;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.twin {
  margin-top: 8px;
}
.twin summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Colophon */

.colophon {
  margin-top: 48px;
  padding: 16px 0 40px;
  border-top: 2px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.5;
}
.colophon p {
  max-width: 46em;
  margin-bottom: 10px;
}
.colophon p:first-child {
  color: var(--ink);
  font-weight: 600;
}
.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-bottom: 10px;
  padding: 0;
  list-style: none;
}
.sources a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
}

/* A figure that changed since the last reading is re-inked for a moment */

.changed {
  animation: reink 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes reink {
  from {
    background-color: var(--blue-screen);
  }
  to {
    background-color: transparent;
  }
}

@media (hover: hover) {
  .pin:hover {
    color: var(--ink);
  }
  .share:hover,
  .text-button:hover {
    text-decoration-thickness: 2px;
  }
  .check input:hover:not(:checked),
  .segment input:hover:not(:checked) + span,
  .field input:hover,
  .field select:hover,
  .rank:hover,
  .rates tbody tr:not(.bar-row):not(.repeat):hover > *:not(.is-mine) {
    background-color: var(--paper-2);
  }
  .rates tbody tr.is-chosen:hover > * {
    background-color: var(--blue-wash);
  }
}

@media (prefers-reduced-motion: reduce) {
  .segment span {
    transition: none;
  }
  .changed {
    animation: none;
  }
}

/* The narrowest phones: tighter cells, so four columns still fit without side scrolling. */
@media (max-width: 379px) {
  .rates thead .num {
    white-space: normal;
  }
  .rates th,
  .rates td {
    padding-right: 5px;
    padding-left: 5px;
  }
  .segment span {
    padding: 0 4px;
  }
}

@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }
  .nameplate {
    font-size: 3rem;
  }
  .banner {
    font-size: 4.5rem;
  }
  .picker {
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: end;
  }
  .picker--one {
    grid-template-columns: minmax(0, 1fr);
  }
  .segments--wrap .segments__row {
    grid-auto-flow: column;
    grid-template-columns: none;
  }
  .filters {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
  }
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pair .sub {
    margin-top: 0;
  }
  .rates {
    font-size: 0.9375rem;
  }
  .chart {
    height: 280px;
  }
  .brief {
    column-count: 4;
  }
  .only-wide {
    display: table-cell;
  }
  .only-narrow {
    display: none;
  }
  .from-600 {
    display: block;
  }
  .filters .check {
    grid-column: 1 / -1;
  }
}

/* Broadsheet: two columns that fill independently, then full-width tables */

@media (min-width: 1000px) {
  :root {
    --gutter: 32px;
  }
  .nameplate {
    font-size: 3.75rem;
  }
  .banner {
    font-size: 6rem;
  }
  .deck {
    font-size: 1.25rem;
  }
  .bar {
    margin-right: 0;
    margin-left: 0;
    padding-right: 12px;
    padding-left: 12px;
  }
  .spread {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
  }
  .spread > .lead {
    grid-column: 1 / span 7;
    grid-row: 1;
  }
  .spread > #watch {
    grid-column: 1 / span 7;
    grid-row: 2;
  }
  .spread > #trend {
    grid-column: 1 / span 7;
    grid-row: 3;
  }
  .spread > #categories {
    grid-column: 8 / span 5;
    grid-row: 1 / span 3;
    margin-left: -24px;
    padding-left: 24px;
    border-left: 1px solid var(--rule-soft);
  }
  .spread > #categories > .bar {
    margin-top: 22px;
  }
  .spread > #options {
    grid-column: 1 / span 8;
    grid-row: 4;
  }
  .spread > #changes {
    grid-column: 9 / span 4;
    grid-row: 4;
    margin-left: -24px;
    padding-left: 24px;
    border-left: 1px solid var(--rule-soft);
  }
  /* The days take a row of their own: the table on the left, what to know about it beside it. */
  .spread > #selection {
    grid-column: 1 / -1;
    grid-row: 5;
  }
  .selection {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
  }
  .selection__main {
    grid-column: 1 / span 8;
  }
  .selection__notes {
    grid-column: 9 / span 4;
    margin-left: -24px;
    padding-left: 24px;
    border-left: 1px solid var(--rule-soft);
  }
  .spread > #tocall {
    grid-column: 1 / -1;
    grid-row: 6;
  }
  .spread > #favourites {
    grid-column: 1 / span 8;
    grid-row: 7;
  }
  .spread > #least {
    grid-column: 9 / span 4;
    grid-row: 7;
    margin-left: -24px;
    padding-left: 24px;
    border-left: 1px solid var(--rule-soft);
  }
  .picker {
    grid-template-columns: minmax(0, 1fr);
  }
  .pair {
    column-gap: 48px;
  }
  .brief {
    column-count: 6;
  }
}

@media print {
  body {
    background: #fff;
  }
  .skip,
  .filters,
  .picker,
  .channel,
  .alerts {
    display: none;
  }
}