/*
 * 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.
 */

/*
 * Type scale. Written down because the application had drifted into using two
 * sizes for everything: 14px for body and 14px uppercase grey for a heading,
 * with 12px underneath it and then a jump straight to 24px. Nothing sat at the
 * browser default, and a heading was distinguished by case rather than by size.
 *
 *   text-2xl   page title (h1)
 *   text-lg    section heading (h2), set in slate-900, never uppercased
 *   text-base  prose: page intros, profile values, empty states
 *   text-sm    dense data: tables, list rows, form fields and their labels
 *   text-xs    badges, inline metadata, and table column headers
 *
 * Uppercase with tracking survives in exactly one place, the thead row of a
 * data table, where it is a column-header convention rather than a substitute
 * for a heading.
 *
 * Units are rem, which is what Tailwind's --text-* variables emit. Not em: this
 * markup nests a sized span inside a sized row all over the place (a discipline
 * name inside a certification row, a detail line inside a standings item), and
 * under em those compound to around 10px instead of the 12px intended.
 */

/*
 * Selects render with browser-supplied chrome that ignores padding and sizes
 * to their content, which is why a select and a text input styled with the
 * same utilities still do not match. Stripping the appearance and supplying
 * the chevron is the only part Tailwind utilities cannot do cleanly from an
 * ERB class attribute.
 *
 * Specificity note: this file is linked before tailwind.css, so `select.field`
 * at (0,1,1) is what keeps these rules ahead of the utilities at (0,1,0).
 */
select.field {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}

/* Safari keeps a focus ring of its own on selects; the utilities supply one. */
select.field:focus {
  outline: none;
}

/*
 * One keyboard focus ring for everything a reader can tab to. This file is
 * unlayered and Tailwind's utilities live in a cascade layer, so this wins
 * over any leftover focus:outline-none without a specificity fight.
 * :focus-visible keeps it off mouse clicks. Text fields and selects draw
 * their own ring from FieldStylesHelper, which shows on every focus.
 */
:where(a, button, summary, input[type="checkbox"], input[type="radio"], input[type="submit"]):focus-visible {
  outline: 2px solid #334155;
  outline-offset: 2px;
  border-radius: 2px;
}