/* =========================================================
   CLUBHOUSE V1 — Reports (js/reports.js)
   A report's own page in the app: the frame (‹ Reports, Print report,
   the title, the season picker) and the report itself as white cards on
   the report's paper colour, one column, 760px at most. The paper
   document carries its own <style> (Reports.seasonPrintHtml); this file
   is the screen only.
   Restrained on purpose: ink, one brand brown, two bar colours, hairline
   rules, tabular numerals. No gradients, no filled blocks of colour, no
   badges, no coloured arrows.
   ========================================================= */

:root {
  --rpt-ink: #2A211B;
  --rpt-muted: #6E6157;
  --rpt-brand: #52382D;
  --rpt-rule: #E6DED0;
  --rpt-strong: #CFC4B3;
  --rpt-bar-cur: #A65A2A;
  --rpt-bar-prev: #2F7FB0;
  --rpt-page: #F4F0E8;
  --rpt-card: #FFFFFF;
  --rpt-band: #F7F3EC;
  --rpt-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --rpt-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* The page behind a report is the report's paper colour, not the app's grey. */
#main-content:has(.rpt-page-screen) {
  background: var(--rpt-page);
}

.rpt-page-screen {
  max-width: 760px;
  margin: 0 auto;
  color: var(--rpt-ink);
  font-family: var(--rpt-sans);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ---------- The frame ---------- */

.rpt-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.rpt-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  margin-left: -6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rpt-muted);
  text-decoration: none;
}

.rpt-back:hover {
  color: var(--rpt-brand);
  text-decoration: none;
}

.rpt-print,
.rpt-showall {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rpt-strong);
  border-radius: 10px;
  background: var(--rpt-card);
  color: var(--rpt-brand);
  font-family: var(--rpt-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.rpt-print:hover,
.rpt-showall:hover {
  background: var(--rpt-band);
}

.rpt-print:disabled {
  opacity: 0.5;
  cursor: default;
  background: var(--rpt-card);
}

.rpt-back:focus-visible,
.rpt-print:focus-visible,
.rpt-select:focus-visible,
.rpt-showall:focus-visible {
  outline: 2px solid var(--rpt-brand);
  outline-offset: 2px;
}

.rpt-header {
  margin-bottom: 20px;
}

.rpt-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rpt-muted);
}

.rpt-page-screen .rpt-h1 {
  margin: 0 0 4px;
  font-family: var(--rpt-serif);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  color: var(--rpt-brand);
}

.rpt-page-screen .rpt-subline {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 24px;
  color: var(--rpt-muted);
}

.rpt-season {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rpt-season__label {
  font-size: 15px;
  font-weight: 600;
}

/* The Hunt Day's picker: a date, laid out as the season picker is. */
.rpt-picker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rpt-picker__label {
  font-size: 15px;
  font-weight: 600;
}

/* 16px so an iPhone does not zoom in on it. */
.rpt-input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rpt-strong);
  border-radius: 10px;
  background: var(--rpt-card);
  color: var(--rpt-ink);
  font-family: var(--rpt-sans);
  font-size: 16px;
}

.rpt-input:focus-visible {
  outline: 2px solid var(--rpt-brand);
  outline-offset: 2px;
}

/* 16px so an iPhone does not zoom in on it; the arrow drawn, as .select's is. */
.rpt-select {
  min-height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--rpt-strong);
  border-radius: 10px;
  background: var(--rpt-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6157' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--rpt-ink);
  font-family: var(--rpt-sans);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.rpt-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 24px 0;
  color: var(--rpt-muted);
}

.rpt-error {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--rpt-strong);
  border-radius: 14px;
  background: var(--rpt-card);
}

/* ---------- The report: five sections, each a white card ---------- */

.rpt--screen .rpt-card {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--rpt-rule);
  border-radius: 14px;
  background: var(--rpt-card);
}

.rpt--screen .rpt-title {
  margin: 0 0 6px;
  font-family: var(--rpt-serif);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: var(--rpt-brand);
}

.rpt--screen .rpt-lede {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 24px;
}

.rpt--screen .rpt-block {
  margin: 0 0 24px;
}

.rpt--screen .rpt-card > .rpt-block:last-child,
.rpt--screen .rpt-col > .rpt-block:last-child {
  margin-bottom: 0;
}

.rpt--screen .rpt-head {
  margin: 0 0 6px;
  font-family: var(--rpt-serif);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: var(--rpt-ink);
}

.rpt--screen .rpt-sub {
  margin: -2px 0 8px;
  font-size: 13px;
  line-height: 19px;
  color: var(--rpt-muted);
}

.rpt--screen .rpt-text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 22px;
}

.rpt--screen .rpt-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--rpt-muted);
}

.rpt--screen .rpt-quiet {
  margin: 0;
  color: var(--rpt-muted);
}

.rpt--screen .rpt-tag {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--rpt-muted);
  white-space: nowrap;
}

/* The sub-line's separators (– and ·) in runs of their own (a style of
   their own makes them one): Public Sans kerns a space tight against them. */
.rpt-page-screen .rpt-sep {
  font-variant-numeric: normal;
}

/* Two blocks side by side on paper; stacked here. */
.rpt--screen .rpt-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
}

/* ---------- Tables ---------- */

.rpt--screen .rpt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.rpt--screen .rpt-table th {
  padding: 0 10px 6px 0;
  border-bottom: 1px solid var(--rpt-strong);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  color: var(--rpt-muted);
}

.rpt--screen .rpt-table td {
  padding: 7px 10px 7px 0;
  border-top: 1px solid var(--rpt-rule);
  font-size: 15px;
  line-height: 21px;
  vertical-align: top;
}

.rpt--screen .rpt-table tbody tr:first-child td {
  border-top: 0;
}

.rpt--screen .rpt-table th:last-child,
.rpt--screen .rpt-table td:last-child {
  padding-right: 0;
}

.rpt--screen .rpt-table .rpt-num {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.rpt--screen .rpt-table td.rpt-cur {
  font-weight: 600;
}

.rpt--screen .rpt-table td.rpt-prev,
.rpt--screen .rpt-table td.rpt-chg,
.rpt--screen .rpt-table td.rpt-rank {
  color: var(--rpt-muted);
}

.rpt--screen .rpt-table tr.rpt-total td {
  border-top: 1px solid var(--rpt-strong);
  font-weight: 600;
}

.rpt--screen .rpt-table--most-deer {
  margin-top: 12px;
}

/* By month: the pair of bars, this season over last. */
.rpt--screen .rpt-table th.rpt-bars,
.rpt--screen .rpt-table td.rpt-bars {
  width: 34%;
}

.rpt--screen .rpt-table td.rpt-bars {
  padding-top: 10px;
}

.rpt--screen .rpt-bar {
  display: block;
  height: 7px;
  border-radius: 0 2px 2px 0;
}

.rpt--screen .rpt-bar + .rpt-bar {
  margin-top: 3px;
}

.rpt--screen .rpt-bar--cur,
.rpt--screen .rpt-swatch--cur {
  background: var(--rpt-bar-cur);
}

.rpt--screen .rpt-bar--prev,
.rpt--screen .rpt-swatch--prev {
  background: var(--rpt-bar-prev);
}

.rpt--screen .rpt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--rpt-muted);
}

.rpt--screen .rpt-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rpt--screen .rpt-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
}

/* In this report: one a line, each with a dotted leader. */
.rpt--screen .rpt-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpt--screen .rpt-toc__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 15px;
  line-height: 24px;
}

.rpt--screen .rpt-toc__leader {
  flex: 1;
  border-bottom: 1px dotted var(--rpt-muted);
  transform: translateY(-5px);
}

.rpt--screen .rpt-showall {
  margin-top: 10px;
}

.rpt--screen .rpt-about {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rpt-strong);
}

.rpt--screen .rpt-about__list {
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
}

.rpt--screen .rpt-about__item {
  margin: 0 0 4px;
  padding-left: 2px;
  font-size: 13px;
  line-height: 19px;
  color: var(--rpt-muted);
}

/* ---------- Hunt Day and Places & Guides ---------- */

/* A cell's second line (dog · length · guide; a hunter's hunt; a best
   hunt's place): 12px, muted. The two lines of a hunt's conditions. */
.rpt--screen .rpt-line2 {
  display: block;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  color: var(--rpt-muted);
}

.rpt--screen .rpt-cline {
  display: block;
}

.rpt--screen .rpt-table td.rpt-time,
.rpt--screen .rpt-table td.rpt-when,
.rpt--screen .rpt-table td.rpt-conds {
  white-space: nowrap;
}

/* The day's strip: one ruled row, each label over its figure; no cards. */
.rpt--screen .rpt-strip {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  margin: 0 0 24px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--rpt-strong);
  border-bottom: 1px solid var(--rpt-strong);
}

.rpt--screen .rpt-strip__item {
  flex: 1 1 auto;
  margin: 0;
  padding-right: 12px;
}

.rpt--screen .rpt-strip__item:last-child {
  padding-right: 0;
}

.rpt--screen .rpt-strip__label {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpt-muted);
  white-space: nowrap;
}

.rpt--screen .rpt-strip__num {
  display: block;
  margin: 2px 0 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

/* A group's heading inside a table: 12px capitals, muted, a rule under it. */
.rpt--screen .rpt-table tr.rpt-group td {
  padding: 14px 0 4px;
  border-top: 0;
  border-bottom: 1px solid var(--rpt-rule);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpt-muted);
}

.rpt--screen .rpt-table tr.rpt-group + tr td {
  border-top: 0;
}

.rpt--screen .rpt-table tr.rpt-muted td,
.rpt--screen .rpt-table tr.rpt-quietrow td {
  font-weight: 400;
  color: var(--rpt-muted);
}

/* Conditions: a heading with its key, no header row, a bar on 0–6 birds
   per hunter with a 1px tick at the season average. */
.rpt--screen .rpt-condhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rpt-strong);
}

.rpt--screen .rpt-condhead .rpt-head {
  margin: 0;
}

.rpt--screen .rpt-condhead__key {
  font-size: 12px;
  line-height: 16px;
  color: var(--rpt-muted);
  white-space: nowrap;
}

.rpt--screen .rpt-table td.rpt-cbar-cell {
  width: 40%;
  padding-top: 13px;
}

.rpt--screen .rpt-cbar {
  position: relative;
  display: block;
  height: 8px;
}

.rpt--screen .rpt-cbar__fill {
  display: block;
  height: 8px;
  border-radius: 0 2px 2px 0;
  background: var(--rpt-bar-cur);
}

.rpt--screen .rpt-cbar__fill--few {
  background: var(--rpt-strong);
}

.rpt--screen .rpt-cbar__tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 14px;
  margin-left: -1px;
  background: var(--rpt-ink);
}

.rpt--screen .rpt-notes {
  margin-top: 16px;
}

/* ---------- Stays and Wader Sizes ---------- */

/* The dates picker: From and To, their labels above them, then Apply (and
   Wader Sizes' All active guests). Two dates share a row on a phone. */
.rpt-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.rpt-range__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 150px;
  min-width: 0;
  max-width: 210px;
}

.rpt-range__field .rpt-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.rpt-range__label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--rpt-muted);
}

.rpt-range__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rpt-apply {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rpt-strong);
  border-radius: 10px;
  background: var(--rpt-card);
  color: var(--rpt-brand);
  font-family: var(--rpt-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.rpt-apply:hover {
  background: var(--rpt-band);
}

.rpt-apply:focus-visible,
.rpt-range .rpt-input:focus-visible {
  outline: 2px solid var(--rpt-brand);
  outline-offset: 2px;
}

/* A report with more than Print on the bar row (Wader Sizes' Download .xlsx).
   On a phone the buttons drop below "‹ Reports" rather than squeeze it onto
   two lines, and keep to one row while they fit. */
.rpt-bar-row--actions {
  flex-wrap: wrap;
}

.rpt-bar-row--actions .rpt-back {
  white-space: nowrap;
}

.rpt-bar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.rpt-bar-actions .rpt-print {
  white-space: nowrap;
}

.rpt--screen .rpt-none {
  color: var(--rpt-muted);
}

.rpt--screen[data-report="stays"] .rpt-cols + .rpt-block {
  margin-top: 24px;
}

.rpt--screen .rpt-table th.rpt-hunted,
.rpt--screen .rpt-table td.rpt-hunted {
  width: 1%;
  white-space: nowrap;
}

.rpt--screen .rpt-table td.rpt-size {
  white-space: nowrap;
}

/* Who stayed: a band over each arrival and departure — 13px, 600, on the
   band colour; no rule between it and its first guest. */
.rpt--screen .rpt-table tr.rpt-band td {
  padding: 8px 10px;
  border-top: 0;
  background: var(--rpt-band);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--rpt-ink);
}

.rpt--screen .rpt-table tr.rpt-band + tr td {
  border-top: 0;
}

/* ---------- A phone: no sideways scrolling ---------- */
/* The columns a phone has no room for are marked data-narrow="hide" by the
   builder (the places table's Hunter-days and last-season bag, the guests'
   Per day, the months' Change; the Hunt Day's Avg. bag and Conditions, the
   hunters' Drakes, Hens and Other, the deer, turkey and geese hunts' Place
   and Time; the blinds' Place and Best hunt, the guides' Hunters; Stays'
   Rooms in Where they stayed and Nights in Who stayed; Wader Sizes'
   Backups) — one builder, hidden here. */
@media (max-width: 599px) {
  .rpt [data-narrow="hide"] {
    display: none;
  }

  /* Tighter cells; a long name breaks rather than push the numbers past the
     card; the Guides' four number headings may take two lines ("Hunts / led"),
     which is the only way five columns fit. */
  .rpt--screen .rpt-table th,
  .rpt--screen .rpt-table td {
    padding-right: 6px;
  }

  .rpt--screen .rpt-table td {
    font-size: 14px;
    line-height: 20px;
  }

  .rpt--screen .rpt-table--guides th.rpt-num {
    white-space: normal;
  }

  .rpt--screen .rpt-table td:first-child,
  .rpt--screen .rpt-table td:nth-child(2) {
    overflow-wrap: anywhere;
  }

  .rpt--screen .rpt-table th:last-child,
  .rpt--screen .rpt-table td:last-child {
    padding-right: 0;
  }

  .rpt--screen .rpt-table td.rpt-bars,
  .rpt--screen .rpt-table th.rpt-bars {
    width: 30%;
  }

  /* The day's strip: three figures a row. */
  .rpt--screen .rpt-strip__item {
    flex: 0 0 33.333%;
    padding-right: 8px;
  }

  .rpt--screen .rpt-strip__item:last-child {
    padding-right: 8px;
  }

  /* A hunt's conditions and a date may break on a phone. */
  .rpt--screen .rpt-table td.rpt-conds,
  .rpt--screen .rpt-table td.rpt-when {
    white-space: normal;
  }

  .rpt--screen .rpt-table td.rpt-cbar-cell {
    width: 34%;
  }
}