@charset "UTF-8";

/* ==========================================================================
   Leme to Pontal Swimming Association
   admin.css : the admin design system.

   A working tool, not a showcase. Same tokens and typeface as the public
   site.css, higher density, light theme only, no decoration. Flat specificity,
   single class selectors, no !important. Base type is 14px.
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Self-hosted Archivo, the same four faces as site.css. Paths are relative to
   this file: /assets/css/ -> /fonts/
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../../fonts/archivo-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../../fonts/archivo-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ---------------------------------------------------------------
   The light half of the site.css palette. The admin has no dark theme, so the
   values are stated once and never swapped.
   ------------------------------------------------------------------------- */

:root {
  --foam: #F3F6F8;
  --surface: #FFFFFF;
  --tide: #D6DFE6;
  --edge: #6B7C8C;
  --slate: #4B5D6E;
  --ink: #0F2740;
  --gold: #D6A93A;
  --danger: #B4472F;

  /* the sidebar is an ink band; these are its own two tones */
  --sidebar-text: #C6D4E0;
  --sidebar-rule: #24384A;
  --sidebar-hover: #17324D;

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --r-control: 6px;
  --r-surface: 10px;

  --sidebar-w: 240px;
  --form-w: 720px;

  --step: 150ms;
}

/* --- Reset and base ------------------------------------------------------- */

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

html {
  /* 87.5% of the 16px default is the 14px admin base, and it still follows the
     reader's own browser font size, which a fixed 14px would not. */
  font-size: 87.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--foam);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s3);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: 1.75rem; font-stretch: 118%; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--s3); }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--tide);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--step) ease, text-decoration-color var(--step) ease;
}

a:hover {
  text-decoration-color: var(--ink);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  margin: 0 0 var(--s3);
  padding-left: 1.25em;
}

hr {
  border: 0;
  border-top: 1px solid var(--tide);
  margin: var(--s5) 0;
}

/* Two tone ring, as on the public site: gold alone is 2:1 on foam, so the ink
   outline carries the contrast on light surfaces. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--gold);
}

/* inside the ink sidebar both tokens turn against the band */
.admin-sidebar :focus-visible {
  outline-color: var(--foam);
  box-shadow: 0 0 0 4px var(--gold);
}

::selection {
  background: var(--gold);
  color: #0F2740;
}

.nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Shell ---------------------------------------------------------------- */

.admin {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.admin-main {
  min-width: 0;
  padding: var(--s5) var(--s5) var(--s8);
}

@media (min-width: 900px) {
  .admin {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  .admin-main {
    padding: var(--s6) var(--s6) var(--s8);
  }
}

/* --- Sidebar -------------------------------------------------------------- */

.admin-sidebar {
  background: var(--ink);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
}

/* Every link inside the ink band states its own colour. A shared
   ".admin-sidebar a" rule would outrank .admin-nav-current and .admin-foot-link
   on specificity, so the band keeps one class per part instead. */

.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s4);
  border-bottom: 1px solid var(--sidebar-rule);
  color: var(--foam);
  text-decoration: none;
}

.admin-brand-crest {
  width: 32px;
  height: 32px;
  flex: none;
}

.admin-brand-name {
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  font-size: 1.0625rem;
  color: var(--foam);
}

.admin-menu-toggle {
  display: none;
  margin: var(--s3) var(--s4);
  align-self: flex-start;
  font: inherit;
  font-weight: 500;
  color: var(--foam);
  background: transparent;
  border: 1px solid var(--sidebar-rule);
  border-radius: var(--r-control);
  padding: var(--s2) var(--s3);
  cursor: pointer;
}

.admin-menu-toggle:hover {
  background: var(--sidebar-hover);
}

.admin-nav {
  flex: 1 1 auto;
  padding: var(--s4) 0;
  overflow-y: auto;
}

.admin-nav-group {
  margin-bottom: var(--s4);
}

.admin-nav-title {
  margin: 0 0 var(--s1);
  padding: 0 var(--s4);
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
  color: #8FA4B6;
}

.admin-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-nav-link {
  display: block;
  padding: var(--s2) var(--s4);
  border-left: 3px solid transparent;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background-color var(--step) ease, border-color var(--step) ease,
    color var(--step) ease;
}

.admin-nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--foam);
}

.admin-nav-current {
  border-left-color: var(--gold);
  background: var(--sidebar-hover);
  color: var(--foam);
  font-weight: 500;
}

.admin-sidebar-foot {
  border-top: 1px solid var(--sidebar-rule);
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.admin-user {
  width: 100%;
  font-size: 0.8125rem;
  color: #8FA4B6;
}

/* The "Sair" control is a submit button inside a POST form, so it is given the
   same shape as the "Ver o site" link beside it. */
.admin-foot-link {
  color: var(--foam);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #486480;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.admin-foot-link:hover {
  text-decoration-color: var(--foam);
}

.admin-logout {
  margin: 0;
}

@media (min-width: 900px) {
  .admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

@media (max-width: 899px) {
  /* The band becomes a top bar of one row: the crest and the name on the left,
     the "Menu" button on the right of the same row, and the panel and the foot
     wrapping underneath it. */
  .admin-sidebar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .admin-brand {
    flex: 0 1 auto;
    border-bottom: 0;
  }

  /* JS reveals the button and collapses the panel. Without JS the button stays
     hidden and the whole nav is simply stacked under the brand. */
  .admin-js .admin-menu-toggle {
    display: inline-block;
    margin: 0 var(--s4);
    align-self: center;
  }

  .admin-nav,
  .admin-sidebar-foot {
    flex: 1 0 100%;
  }

  .admin-nav-collapsed {
    display: none;
  }

  .admin-nav {
    border-top: 1px solid var(--sidebar-rule);
    padding: var(--s3) 0;
  }

  .admin-foot-collapsed {
    display: none;
  }
}

/* --- Page header ---------------------------------------------------------- */

.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--tide);
}

.admin-title {
  margin: 0;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* --- Flash ---------------------------------------------------------------- */

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  background: var(--surface);
  border: 1px solid var(--tide);
  border-left: 3px solid var(--ink);
  border-radius: var(--r-control);
}

.flash-ok {
  border-left-color: var(--gold);
}

.flash-bad {
  border-left-color: var(--danger);
}

.flash-text {
  flex: 1 1 auto;
  margin: 0;
}

.flash-close {
  flex: none;
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--slate);
  background: none;
  border: 0;
  border-radius: var(--r-control);
  padding: var(--s1) var(--s2);
  cursor: pointer;
}

.flash-close:hover {
  color: var(--ink);
  background: var(--foam);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--step) ease, border-color var(--step) ease,
    color var(--step) ease;
}

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--foam);
}

.btn-primary:hover {
  background: #1B3E60;
  border-color: #1B3E60;
  color: var(--foam);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--edge);
  color: var(--ink);
}

.btn-secondary:hover {
  border-color: var(--ink);
  background: var(--foam);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* The removal control is the submit button of its own small POST form, and it
   has to read as the plain text link it replaced. A button brings its own font,
   padding, border and background, so all four are taken back and the underline
   is put on by hand; "font: inherit" carries no size of its own, which is what
   keeps the control at 0.9375rem inside a row of actions and at the card's own
   size under a photo. */
.link-danger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--danger);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(180, 71, 47, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--step) ease, text-decoration-color var(--step) ease;
}

.link-danger:hover {
  text-decoration-color: var(--danger);
}

/* The form around it carries only the token and the button, so it must not take
   a line of its own: inside .row-actions it is one more flex item, and under a
   photo it sits where the link sat. */
.row-form {
  display: inline;
  margin: 0;
}

.link-plain {
  font-size: 0.9375rem;
}

/* --- List toolbar --------------------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.toolbar-filter {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 260px;
}

.toolbar-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate);
}

.toolbar-count {
  font-size: 0.875rem;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

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

/* The header row is sticky, and a sticky header only holds while something
   scrolls under it: the wrap is what scrolls, so it needs a height of its own.
   Without the max-height the page scrolled instead and the header went away
   with the first rows. */
.table-wrap {
  max-height: calc(100vh - 180px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--surface);
}

.table th,
.table td {
  text-align: left;
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--tide);
  vertical-align: top;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--tide);
  border-bottom: 0;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: var(--foam);
}

.table-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-sort {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

.table-sort:hover {
  color: var(--ink);
}

/* the caret is drawn from the header's aria-sort, so it never lies */
.table-sort::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid transparent;
}

.table th[aria-sort='ascending'] .table-sort::after {
  border-top: 0;
  border-bottom: 5px solid var(--gold);
}

.table th[aria-sort='descending'] .table-sort::after {
  border-top: 5px solid var(--gold);
}

.row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s3);
  white-space: nowrap;
  font-size: 0.9375rem;
}

.table-empty td {
  color: var(--slate);
  padding: var(--s5) var(--s4);
}

/* One cell with nothing in it, said in words. A dash would read as a value in a
   column of times, and an officer scanning the list has to be able to tell "no
   still was made" from "the still is blank". */
.cell-none {
  color: var(--slate);
}

/* The still in the videos list is a thumbnail and not a photo: it is there to
   confirm which video the row is, so it is sized once and never grows. */
.video-thumb {
  display: block;
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--r-control);
  background: var(--tide);
}

/* --- Forms ---------------------------------------------------------------- */

.form {
  max-width: var(--form-w);
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
  padding: var(--s5);
}

.field {
  margin-bottom: var(--s4);
}

.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  margin-bottom: var(--s1);
}

.field-required {
  color: var(--danger);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  padding: var(--s2) var(--s3);
  transition: border-color var(--step) ease;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--slate);
}

.textarea {
  min-height: 8rem;
  resize: vertical;
}

.input-file {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
}

/* the box keeps its native look; only the size and the hit area are set */
.checkbox {
  width: 1.125rem;
  height: 1.125rem;
  margin: var(--s1) 0 0;
  accent-color: var(--ink);
}

.field-invalid {
  border-color: var(--danger);
}

.field-error {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--danger);
  margin-top: var(--s1);
}

.field-hint {
  display: block;
  font-size: 0.875rem;
  color: var(--slate);
  margin-top: var(--s1);
}

/* PT / EN pair: one shared label prefix, the two languages side by side. The
   fieldset drops the box the browser draws around it, and its default padding
   with it, so the pair starts at the same left edge as a single field. */
.field-pair {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s4);
  min-width: 0;
}

.field-pair-legend {
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  margin-bottom: var(--s2);
}

.field-pair-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3) var(--s4);
}

.field-pair-grid .field {
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .field-pair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- File preview --------------------------------------------------------- */

.file-preview {
  margin-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.file-preview-item {
  width: 96px;
  font-size: 0.8125rem;
  color: var(--slate);
  overflow-wrap: anywhere;
}

.file-preview-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--tide);
  border-radius: var(--r-control);
  margin-bottom: var(--s1);
}

/* --- Sticky form footer --------------------------------------------------- */

.form-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  max-width: var(--form-w);
  margin-top: var(--s5);
  padding: var(--s3) 0;
  background: var(--foam);
  border-top: 1px solid var(--tide);
}

/* The second form on a page keeps its footer in the flow: two pinned footers
   would sit on top of each other with no way to tell which submit is which. */
.form-footer-plain {
  position: static;
}

/* --- Dialog --------------------------------------------------------------- */

.dialog {
  width: min(28rem, calc(100vw - 32px));
  padding: var(--s5);
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
}

.dialog::backdrop {
  background: rgba(15, 39, 64, 0.45);
}

.dialog-title {
  margin: 0 0 var(--s3);
  font-size: 1.125rem;
}

.dialog-text {
  margin: 0 0 var(--s5);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s2);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #FFFFFF;
}

.btn-danger:hover {
  background: #9B3B26;
  border-color: #9B3B26;
  color: #FFFFFF;
}

/* --- Empty state ---------------------------------------------------------- */

.empty {
  background: var(--surface);
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
  padding: var(--s7) var(--s5);
  text-align: center;
  color: var(--slate);
}

.empty-text {
  margin: 0 0 var(--s3);
}

/* --- Dashboard ------------------------------------------------------------ */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s6);
  padding: 0;
  list-style: none;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
  padding: var(--s4);
}

.tile-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  font-stretch: 118%;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.tile-label {
  display: block;
  margin-top: var(--s1);
  font-size: 0.875rem;
  color: var(--slate);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
}

.panel-title {
  margin: 0 0 var(--s3);
  font-size: 1.125rem;
}

.status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  margin: 0;
}

.status-on {
  font-weight: 600;
}

.status-off {
  color: var(--slate);
}

.recent {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--tide);
}

.recent li:last-child {
  border-bottom: 0;
}

.recent-kind {
  flex: none;
  min-width: 5.5rem;
  font-size: 0.8125rem;
  color: var(--slate);
}

.recent-date {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

/* --- Login ---------------------------------------------------------------- */

.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  padding: var(--s7) var(--s4);
}

.auth-crest {
  width: 72px;
  height: 72px;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
  padding: var(--s5);
}

.auth-title {
  margin: 0 0 var(--s4);
  font-size: 1.375rem;
}

.auth-error {
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--tide);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-control);
  color: var(--ink);
}

.auth-note {
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--tide);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-control);
}

.auth-submit {
  width: 100%;
}

.auth-back {
  font-size: 0.9375rem;
}

/* --- Photo grids ----------------------------------------------------------
   The album and the pilot photo pages share one grid: the photos are the
   content of those pages, so they are a grid of surfaces and not table rows. */

.photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s4);
}

.photo-card {
  background: var(--surface);
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
  padding: var(--s3);
}

.photo-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-control);
  background: var(--foam);
}

.photo-name {
  margin: var(--s3) 0 var(--s2);
  font-size: 0.875rem;
  color: var(--slate);
  overflow-wrap: anywhere;
}

/* an album card carries a date under the name, so that pair sits tighter and
   the card keeps one gap above the removal link */
.photo-card-dated .photo-name {
  margin-bottom: var(--s1);
}

.photo-date {
  display: block;
  margin-bottom: var(--s2);
  font-size: 0.8125rem;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

/* --- Product covers -------------------------------------------------------
   The cover thumbnail in the products list and the cover as it is stored
   today, shown on the edit form beside the field that replaces it. */

.cover-thumb {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--tide);
  border-radius: var(--r-control);
}

.cover-empty {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px dashed var(--tide);
  border-radius: var(--r-control);
}

.cover-current {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  border: 1px solid var(--tide);
  border-radius: var(--r-surface);
  margin-bottom: var(--s3);
}

/* --- Pilot thumbnails ----------------------------------------------------- */

.pilot-thumb {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--tide);
  border-radius: var(--r-control);
}

.pilot-thumb-empty {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px dashed var(--tide);
  border-radius: var(--r-control);
}

/* --- Documents table ------------------------------------------------------
   The one form whose table is wider than a form column, so it is not held to
   the 720px of .form. */

.form-documentos,
.form-documentos .form-footer {
  max-width: none;
}

.doc-lead {
  max-width: 68ch;
  color: var(--slate);
}

.doc-cell .field {
  margin-bottom: 0;
}

/* the column header is the visible label of the cell, so the label of each
   input only has to name the document and the language for a screen reader */
.doc-cell .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the preview box only takes room once a file is chosen */
.doc-cell .file-preview:empty {
  margin-top: 0;
}

.doc-current {
  margin: var(--s2) 0 0;
  font-size: 0.875rem;
}

.doc-none {
  margin: var(--s2) 0 0;
  font-size: 0.875rem;
  color: var(--slate);
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms;
  }
}

/* Radio groups (live tracking on/off) */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.9375rem;
}

.radio-option input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--ink);
}