/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* The honeypot wrapper gets a timestamped class such as subtitle_1793212345. */
[class^="subtitle_"] {
  display: none;
}

/*
 * Tapping a control twice in quick succession zooms the page on iOS and
 * Android. On the seat stepper, where tapping + twice is simply how you ask
 * for two tickets, that is maddening.
 *
 * touch-action: manipulation switches off double-tap-to-zoom for these
 * elements only, and also removes the browser's 300ms wait for a possible
 * second tap, so they feel quicker.
 *
 * Deliberately not done with <meta name="viewport" content="user-scalable=no">:
 * that would kill pinch to zoom as well, which breaks WCAG 1.4.4 for anyone
 * who needs to magnify the page. Pinch zoom still works everywhere here.
 */
button,
[type="button"],
[type="submit"],
[type="number"],
[type="radio"],
[type="checkbox"],
label,
a {
  touch-action: manipulation;
}

/*
 * The quantity stepper adds its own minus and plus buttons, so the browser's
 * native number spinners would be a second, much smaller set of controls for
 * the same thing. The class is applied by the Stimulus controller, so without
 * JavaScript the native spinners stay and remain the only way to step the
 * value with a mouse.
 */
.quantity-stepper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity-stepper input[type="number"]::-webkit-outer-spin-button,
.quantity-stepper input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/*
 * Printing. Only the attendance list is ever printed, but these rules are
 * written for any page: whatever ends up on paper should be the content and
 * nothing else.
 *
 * Paper is the last backup. Litestream, the volume snapshots and the fetched
 * dumps all depend on something still working; the sheet carried to the door
 * does not. See docs/backups.md.
 */
@media print {
  /*
   * Navigation, the sign-out button and flash messages are all useless on
   * paper, and the site header would otherwise eat the top of the first
   * sheet.
   *
   * body > header, not header. A bare element selector also matched the
   * <header> inside the attendance sheet, which printed the table with no
   * title, no date and no performance on it -- a page of numbers that could
   * have belonged to any night of the run.
   */
  body > header,
  body > header nav,
  .no-print,
  [role="status"],
  [role="alert"] {
    display: none !important;
  }

  /*
   * The screen layout is capped at max-w-3xl and centred, which on A4 leaves
   * a column down the middle of the page with wide margins either side.
   */
  main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  /*
   * Tailwind's colours are chosen for a screen. On paper the greys print
   * weakly and the brand pink turns into a smudge, so the whole sheet goes
   * black on white.
   */
  .print-sheet,
  .print-sheet * {
    color: #000 !important;
    background: transparent !important;
  }

  /*
   * Repeat the column headings on every sheet. Without this, page two of a
   * sold-out night is a wall of unlabelled numbers.
   */
  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  tr,
  .break-inside-avoid {
    break-inside: avoid;
  }

  @page {
    margin: 12mm;
  }
}