/* Pico.css (vendored in pico.min.css, loaded first in base.html) handles
   the base look — typography, forms, buttons, tables, light/dark mode.
   Everything below is only what Pico doesn't already provide, or a
   narrow override where its defaults don't fit our editable table rows. */

/* Pico gives every input/select a bottom margin meant for stacked,
   free-standing form fields — wrong inside a compact table row, and
   inconsistently so: Pico's own rule targets
   input:not([type=checkbox],[type=radio]),select,textarea, whose
   specificity (0,0,1,1) beats a plain "td input, td select" (0,0,0,2) —
   so without !important some inputs kept the margin and others didn't,
   throwing off vertical alignment within a row. */
td input, td select { margin-bottom: 0 !important; }

/* Pico's disclosure-triangle ::after uses float:right, which drifts to
   the far edge of a wide container instead of sitting next to the
   summary text — inline-flex keeps the two visually together regardless
   of viewport width. */
summary { display: inline-flex; align-items: center; }

.checkbox-list { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.checkbox-list label { display: flex; align-items: center; gap: 0.3rem; font-weight: normal; }

.owner-banner {
  background: var(--pico-mark-background-color, #fff8e1);
  border: 1px solid var(--pico-primary-border, #e8d27a);
  border-radius: var(--pico-border-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

/* Below this width, a literal grid of table columns doesn't fit —
   scrunched cells truncate the very content the page exists to show
   (a phone number, an email). Each row becomes a labeled card instead;
   data-label attributes on the <td>s (see the templates) supply the
   labels via ::before, since <thead> is hidden at this width. */
@media (max-width: 640px) {
  table { border: none; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr {
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
  }
  td {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: none;
    padding: 0.3rem 0;
  }
  td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    flex: 0 0 auto;
    min-width: 5rem;
  }
  td input, td select { flex: 1; min-width: 0; }
  td .checkbox-list { flex: 1; }
}