/* ============================================================================
   Components
   ============================================================================ */

/* ── Shared patterns ─────────────────────────────────────────────────────── */
/* Shared looks, add a selector here rather than repeat declarations */

/* White panel with the standard border */
.form,
.form-card,
.filters,
.toast,
.data-table-container--card,
.admin-section,
.assignment-card,
.error-container,
.event-card,
.detail-section,
.photographer-card,
.home-map,
.photo-card,
.profile-header,
.profile-details,
.profile-layout .profile-section,
.team-card,
.team-editor,
.path-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
}

/* Small caps label above or beside a value */
.admin-group-label,
.email-meta-label,
.filter-group label,
.data-table th,
.event-date-month,
.event-card-type,
.detail-section h3,
.detail-label,
.assignment-you,
.equipment-subhead {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Buttons with no chrome: toggles, close crosses, quiet row actions */
.section-toggle-btn,
.app-summary,
.button-text,
.toast-close,
.modal-close,
.password-toggle,
.lookup-result,
.equipment-pill-remove,
.comment-delete,
.photo-lightbox-close {
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

/* One line, cut with an ellipsis */
.email-log-subject,
.user-username,
.template-subject-cell,
.coordinator-item a,
.photo-card-overlay .photo-card-author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lists without bullets, base.css already zeroes margin and padding */
.event-facts,
.links-list,
.activity-list,
.lookup-results,
.home-map-legend,
.home-map-list,
.profile-websites,
.team-orgs,
.team-links {
  list-style: none;
}

/* Inner card: a row inside a panel, with the lighter border */
.event-date-tile,
.assignment-item,
.coordinator-item,
.admin-card,
.app-row,
.profile-event-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-light);
  border-radius: var(--radius);
}

/* Growing column of a flex row, min-width lets long words shrink */
.toast-body,
.event-card-heading,
.event-heading-body,
.request-lead-body,
.comment-body,
.assignment-info,
.admin-card-info,
.app-summary-meta,
.team-card-body,
.url-entry input,
.sidebar-add-row input,
.sidebar-add-row select,
.photo-lightbox-attribute-row select {
  flex: 1;
  min-width: 0;
}

/* Pill chips: badges, tags and access chips share one soft look, a light
   fill with a dark border and dark text. A variant sets the three --chip-*
   hues; without one the neutral gray applies. */
.badge,
.tag,
.event-chip,
.access-chip {
  display: inline-block;
  border-radius: var(--radius-pill);
  background: var(--chip-bg, var(--clr-well));
  color: var(--chip-fg, var(--clr-text));
  border: 1px solid var(--chip-line, var(--clr-border-strong));
}

/* A person's name as a quiet link, accent on hover */
.user-name a,
.assignment-name a,
.coordinator-item a,
.comment-meta a {
  color: var(--clr-text);
}

.user-name a:hover,
.user-username a:hover,
.assignment-name a:hover,
.coordinator-item a:hover,
.comment-meta a:hover {
  color: var(--clr-accent);
}

/* Member-written notes run to 5000 characters, so they scroll inside a cap */
.admin-notes,
.roster-note,
.assignment-notes {
  line-height: 1.5;
  max-height: 9rem;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

/* Stacked items: the last one drops the gap its container already provides */
.admin-card:last-child,
.app-row:last-child,
.assignment-card:last-child,
.assignment-card-body:last-child,
.assignment-item:last-child,
.coordinator-item:last-child,
.profile-section:last-child,
.profile-details-grid:last-child,
.stat-row:last-child,
.form-group:last-child,
.form-row:last-child {
  margin-bottom: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* Only .button-primary is filled, one per view */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: var(--clr-surface);
  color: var(--clr-accent);
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  border-radius: var(--radius);
  border: 2px solid var(--clr-accent);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

/* Hover swaps fill and text: outlined fills, filled empties */
.button:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: white;
  text-decoration: none;
}

/* Ring comes from utils.css, only the offset differs */
.button:focus-visible {
  outline-offset: 3px;
}

/* Flat grey, not opacity, a faded label fails contrast */
.button:disabled,
.button[disabled] {
  background: var(--clr-bg);
  border-color: var(--clr-border);
  color: var(--clr-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.button-primary {
  background: var(--clr-accent);
  border-color: transparent;
  color: white;
}
.button-primary:hover {
  background: var(--clr-surface);
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}

/* After the hover rules so pressed wins, even on a chosen switch */
.button:active,
.button-primary:active,
.button[aria-pressed="true"]:hover {
  background: var(--clr-accent-dark);
  border-color: var(--clr-accent-dark);
  color: white;
}

/* .button-secondary matches the default, so it has no rule of its own */

.button-danger {
  background: var(--clr-error);
  border-color: transparent;
  color: white;
}
.button-danger:hover {
  background: var(--clr-surface);
  border-color: var(--clr-error);
  color: var(--clr-error-text);
}

.button-danger:active {
  background: var(--clr-error-text);
  border-color: var(--clr-error-text);
  color: white;
}

/* Sizes */
.button-small {
  padding: 0.3125rem 0.75rem;
  font-size: var(--text-sm);
}

.button-large {
  padding: 0.75rem 2rem;
  font-size: var(--text-lg);
}

/* Quiet row actions, danger red at rest */
.button-text {
  padding: 0.25rem 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-text-muted);
}

.button-text:hover {
  color: var(--clr-text);
  text-decoration: underline;
}

.button-text--danger,
.button-text--danger:hover {
  color: var(--clr-error-text);
}

.button-full {
  width: 100%;
}

/* ── Link cards ──────────────────────────────────────────────────────────── */
/* A card that is one link, hover accents and lifts it */

.event-card,
.photographer-card {
  transition: border-color var(--transition), transform var(--transition);
}

.event-card:hover,
.photographer-card:hover,
.photographer-card:focus-within {
  border-color: var(--clr-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .event-card:hover,
  .photographer-card:hover {
    transform: translateY(-2px);
  }
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

/* Solid for the thing's own state, a tint for the reader's */

.badge {
  padding: 0.2rem 0.65rem;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* One hue per meaning, shared by badges, event chips and access chips.
   badge-default, badge-applicant and badge-assigned keep the neutral gray. */
.badge-admin {
  --chip-bg: var(--clr-role-admin-bg);
  --chip-fg: var(--clr-role-admin);
  --chip-line: var(--clr-role-admin);
}
.badge-photographer {
  --chip-bg: var(--clr-accent-bg);
  --chip-fg: var(--clr-accent);
  --chip-line: var(--clr-accent);
}
.badge-open,
.badge-confirmed,
.badge-completed,
.badge-my-confirmed,
.event-chip--success,
.access-chip--open {
  --chip-bg: var(--clr-success-bg);
  --chip-fg: var(--clr-success-text);
  --chip-line: var(--clr-success);
}
.badge-cancelled,
.badge-suspended,
.badge-my-cancelled,
.event-chip--error,
.access-chip--restricted {
  --chip-bg: var(--clr-error-bg);
  --chip-fg: var(--clr-error-text);
  --chip-line: var(--clr-error);
}
.badge-requested,
.badge-pending,
.event-chip--warn,
.access-chip--apply {
  --chip-bg: var(--clr-warn-bg);
  --chip-fg: var(--clr-warn-text);
  --chip-line: var(--clr-warn-border);
}
.badge-warning {
  --chip-bg: var(--clr-warning-bg);
  --chip-fg: var(--clr-warning-text);
  --chip-line: var(--clr-warning);
}
.badge-my-requested,
.access-chip--steps {
  --chip-bg: var(--clr-info-bg);
  --chip-fg: var(--clr-info-text);
  --chip-line: var(--clr-info-border);
}
/* Over, or nothing to do: muted text on the neutral chip */
.badge-skipped,
.badge-secondary,
.badge-my-completed {
  --chip-fg: var(--clr-text-muted);
}
/* The reader's own assignment on an event card (events.js) */
.badge-my-assignment {
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Small tinted chips: credential state, and access level 1 to 5 */
.event-chip,
.access-chip {
  padding: 0.1rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.access-chip {
  margin-right: 0.25rem;
}

/* ── Inline message banners ──────────────────────────────────────────────── */
/* Static notices in the views, and flash.js showFormMessage() */

.message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: var(--text-base);
  line-height: 1.5;
  border: 1px solid transparent;
}

.message-warning {
  background: var(--clr-warn-bg);
  border-color: var(--clr-warn-border);
  color: var(--clr-warn-text);
}

.message-info {
  background: var(--clr-tag-subj);
  border-color: var(--clr-tag-subj-border);
  color: var(--clr-tag-subj-fg);
}

/* A button at the end of a banner's sentence */
.message .message-action {
  margin: 0 0.5rem;
}

/* Wraps whole, after the banner's button */
.message .message-aside {
  white-space: nowrap;
}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
/* Always in the DOM, so no pointer events until a toast */

.toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100; /* over the navbar and modal backdrops, both at 1000 */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--clr-text);
  border-left-width: 4px;
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-md);
  font-size: var(--text-base);
  line-height: 1.5;
  pointer-events: auto;
  overflow-wrap: anywhere;
}

/* Shared with toasts, after .toast so the colours win */
.message-error,
.toast-error {
  background: var(--clr-error-bg);
  border-color: var(--clr-error);
  color: var(--clr-error-text);
}

.message-success,
.toast-success {
  background: var(--clr-success-bg);
  border-color: var(--clr-success);
  color: var(--clr-success-text);
}

.toast-body a {
  margin-left: 0.375rem;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* padding, not size, so it sits on the first text line */
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -0.75rem -0.75rem -0.75rem 0;
  margin-left: auto; /* Pins it right whatever the message markup is */
  border-radius: var(--radius);
  font-size: var(--text-2xl);
  line-height: 1;
}

@media (max-width: 480px) {
  .toast-region {
    left: 1rem;
    width: auto;
  }
}

/* ── Avatars ─────────────────────────────────────────────────────────────── */
/* Round image (avatar.js) */
.avatar {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.avatar--xs {
  width: 1.75rem;
  height: 1.75rem;
}

.avatar--sm {
  width: 2.25rem;
  height: 2.25rem;
}

.avatar--md {
  width: 2.75rem;
  height: 2.75rem;
}

.avatar--lg {
  width: 3rem;
  height: 3rem;
  border-width: 2px;
}

.avatar--xl {
  width: 5.5rem;
  height: 5.5rem;
  border-width: 3px;
}

.avatar--2xl {
  width: 6.25rem;
  height: 6.25rem;
  border-width: 3px;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
/* The filter row above a list */
.filters {
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.75rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filter-group {
  flex: 1;
  min-width: 10rem;
}

.filter-group label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--clr-text);
}

.filter-group input,
.filter-group select {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: var(--text-md);
  height: var(--height-control);
  background: var(--clr-bg);
}

/* Display controls sit between the filters and the list they restyle */
.filters--with-view {
  margin-bottom: 0.75rem;
}

.view-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  font-size: var(--text-md);
}

/* Cards or Table */
.view-switch {
  display: flex;
  gap: 0.25rem;
}

@media (max-width: 768px) {
  /* Two columns, six stacked controls fill the screen */
  .filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .filter-group {
    min-width: 0;
  }

  .filters > .button {
    grid-column: 1 / -1;
  }
}

/* ── Member-written text ─────────────────────────────────────────────────── */
/* Bios, event descriptions and notes: line breaks kept, a readable measure */
.user-text,
.detail-description p,
.detail-notes p {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: var(--text-base);
  max-width: 70ch;
  overflow-wrap: anywhere;
}

/* ── Date tiles (event cards, event pages, the home map list) ────────────── */

/* Decoration only, the text beside it carries the full date */
.event-date-tile {
  --month-clr: var(--clr-accent);
  flex-shrink: 0;
  /* A floor, so a wide fallback font stretches rather than clips */
  width: max-content;
  min-width: 4rem;
  overflow: hidden;
  text-align: center;
  line-height: 1;
}

/* One colour per month, all at least 4.6:1 under white */
.event-date-tile--m1  { --month-clr: #3061a6; }
.event-date-tile--m2  { --month-clr: #6236a1; }
.event-date-tile--m3  { --month-clr: #21836a; }
.event-date-tile--m4  { --month-clr: #278627; }
.event-date-tile--m5  { --month-clr: #597e25; }
.event-date-tile--m6  { --month-clr: #8f7014; }
.event-date-tile--m7  { --month-clr: #bb501b; }
.event-date-tile--m8  { --month-clr: #ab2b40; }
.event-date-tile--m9  { --month-clr: #a13674; }
.event-date-tile--m10 { --month-clr: #a9631e; }
.event-date-tile--m11 { --month-clr: #8b3b9b; }
.event-date-tile--m12 { --month-clr: #363ea1; }

.event-date-month {
  display: block;
  padding: 0.3rem 0 0.25rem;
  background: var(--month-clr);
  color: white;
}

.event-date-day {
  display: block;
  padding: 0.45rem 0.3125rem 0.5rem;
  font-size: var(--text-xl);
  /* A set line box, so a smaller range keeps the tile's height */
  line-height: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--clr-text);
}

.event-date-day--range {
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

/* On the event page the tile is the only written date */
.event-date-year {
  display: block;
  margin-top: -0.3rem;
  padding: 0 0.25rem 0.45rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--clr-text-muted);
}

/* Now or today lights up, past fades */
.event-date-tile--now {
  border-color: var(--month-clr);
}
.event-date-tile--now .event-date-day {
  color: var(--month-clr);
}
.event-date-tile--past .event-date-month {
  background: var(--clr-text-muted);
}
.event-date-tile--past .event-date-day {
  color: var(--clr-text-muted);
}

/* ── Tags (custom chip entries) ──────────────────────────────────────────── */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  --chip-bg: var(--clr-tag-subj);
  --chip-fg: var(--clr-tag-subj-fg);
  --chip-line: var(--clr-tag-subj-border);
  padding: 0.2rem 0.6rem;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Plain fact chips, not links, so no blue: the neutral gray defaults */
.tag--plain {
  --chip-bg: var(--clr-well);
  --chip-fg: var(--clr-text);
  --chip-line: var(--clr-border-strong);
}

/* Event links in the photo lightbox */
.tag--event {
  --chip-bg: var(--clr-tag-evt);
  --chip-fg: var(--clr-tag-evt-fg);
  --chip-line: var(--clr-tag-evt-border);
}

a.tag {
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

a.tag:hover {
  --chip-bg: var(--clr-accent);
  --chip-fg: white;
  --chip-line: var(--clr-accent);
  text-decoration: none;
}

.tag-note {
  font-weight: 400;
  opacity: 0.75;
}

/* ── Modal boxes (html.js modal()) ───────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 35rem;
  max-height: 90vh;
  /* dvh tracks iOS's visible viewport, vh above is the fallback */
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}

/* Room for an email preview beside its message */
.modal--wide {
  max-width: 44rem;
}

.modal-header,
.modal-footer {
  display: flex;
  padding: 1.25rem 1.5rem;
}

.modal-header {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--clr-border);
}

.modal-header h2 {
  font-size: var(--text-2xl);
}

.modal-close {
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--clr-text-muted);
  padding: 0.25rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
}

.modal-close:hover {
  color: var(--clr-text);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* The conduct modal sits outside main, where base.css colours links */
.modal-body a {
  color: var(--clr-accent);
}

.modal-body a:hover {
  text-decoration: underline;
}

/* Direct children only: help-text in a .form-group has its own spacing */
.modal-body > p {
  margin-bottom: 1rem;
}

.modal-body > p:last-child {
  margin-bottom: 0;
}

.modal-body .form-group {
  margin-bottom: 1rem;
}

.modal-body .form-group:last-child {
  margin-bottom: 0;
}

/* Inside the checkbox's .form-group, so that group stays last-child */
#conductModalError {
  margin: 0.75rem 0 0;
}

.modal-footer {
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid var(--clr-border);
  background: var(--clr-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Far end of the footer, apart from Save and Cancel */
.modal-footer-end {
  margin-left: auto;
}

/* ── Misc ────────────────────────────────────────────────────────────────── */

/* Placeholders: loading, failed, nothing to show */
.loading,
.load-error,
.empty-state {
  color: var(--clr-text-muted);
}

.loading,
.empty-state {
  text-align: center;
}

.loading {
  padding: 2rem;
}

/* Placeholders on client-rendered pages, sized so the footer does not jump */
.loading--list {
  min-height: 24rem;
}

.loading--page {
  min-height: calc(100vh - 12rem);
}

/* flash.js renderLoadError() */
.load-error {
  padding: 1rem;
}

.empty-state {
  padding: 3rem 1rem;
}

/* Empty state in a card, where full-page padding is too much */
.empty-state--compact {
  padding: 1rem;
  font-size: var(--text-md);
}

/* Previous/Next row under a paged list, pager.js toggles none and flex */
.pagination {
  margin-top: 1.5rem;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.pagination-info {
  color: var(--clr-text-muted);
}

/* ── Stat row ────────────────────────────────────────────────────────────── */

/* The gap shows the fill as hairlines */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 1.25rem;
  background: var(--clr-border-light);
  border: 1px solid var(--clr-border-light);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat-row:last-child {
  margin-bottom: 0;
}

.stat-row > div {
  flex: 1 1 10rem;
  padding: 0.625rem 0.875rem;
  background: var(--clr-surface);
}

.stat-row dt {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  margin-bottom: 0.125rem;
}

/* Chip and words wrap as whole pieces, never mid-phrase */
.stat-row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.375rem;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
}

.stat-row .access-chip {
  margin-right: 0;
}

.stat-row .fact-sub {
  flex-basis: 100%;
  font-weight: 400;
}

/* Counts, not words: the value is a figure, so it runs larger */
.stat-row--figures dd {
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* ── Data table ──────────────────────────────────────────────────────────── */

/* Keyboard-scrollable, with a shadow at whichever edge still hides columns */
.data-table-container {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--clr-surface), rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--clr-surface), rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Shorthand above resets the panel fill, so a card restates it */
.data-table-container--card {
  background-color: var(--clr-surface);
}

.data-table-container:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: -2px;
}

/* Below the min-width the container scrolls instead of crushing columns */
.data-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--clr-border);
}

/* Headers take the shared small-caps size */
.data-table td {
  font-size: var(--text-md);
}

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table th:first-child,
.data-table td:first-child {
  padding-left: 1rem;
}

.data-table th {
  background: var(--clr-bg);
  color: var(--clr-text);
  position: sticky;
  top: 0;
}

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

.data-table tbody tr:hover {
  background: var(--clr-bg);
}

/* ── Chevron ─────────────────────────────────────────────────────────────── */
/* Two borders, so it takes the text colour */

.chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5625rem;
  height: 0.5625rem;
  margin: 0 0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--clr-text-muted);
  /* An empty box has no text baseline to line up on */
  align-self: center;
  transform: rotate(-45deg);
  transition: transform var(--transition);
}

/* Lifted a little so the point sits on the text's middle line */
details[open] > summary .chevron,
[aria-expanded="true"] > .chevron {
  transform: translateY(-25%) rotate(45deg);
}