/* web-community: the piece's own stylesheet, served at /community/assets/main.css after the frame's foundation at /frame/assets/main.css; page rules only, never the foundation's names.
 * Figma "Caregiver Hub" UQdwUDkphf8JySh8cY5sqj, snapshot 2026-10-23: 01 · Community (1601:22027) and Community / Resident row (1551:272512). Desktop at 1440px, light only. */

/* ---------- tones: an icon's colour, named by status, never the only signal ---------- */
.tone-critical { color: var(--shelter-color-status-critical); }
.tone-warning { color: var(--shelter-color-status-warning); }
.tone-resolved { color: var(--shelter-color-status-resolved); }
.tone-info { color: var(--shelter-color-status-info); }
.tone-muted { color: var(--base-muted-foreground); }

/* ---------- the caseload page: one white container in the main area ---------- */
main.cl {
  background: var(--base-card);
  border: 1px solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
  padding: 16px;
}

.cl-header h1 { margin-bottom: 16px; }

/* the five count tiles in a row: label with its icon above the number */
.cl-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}
.cl-counts .tile { padding: 12px 16px; }
.cl-counts .tile dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: var(--font-weight-medium);
  margin-bottom: 12px;
}
.cl-tile-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-muted);
  flex: none;
}
.cl-tile-icon.tone-critical { background: var(--shelter-color-status-critical-background); }
.cl-tile-icon.tone-info { background: var(--base-tag-blue-bg); }
.cl-tile-icon.tone-resolved { background: var(--base-tag-green-bg); }
.cl-tile-icon.tone-warning { background: var(--shelter-color-status-warning-background); }

/* the notice above the filters */
.cl-notice { margin: 0 0 16px; }

/* the filter row: the three labelled selects at the left, the search at the right */
.cl-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
}
.cl-filters label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-weight-medium);
  color: var(--base-muted-foreground);
  white-space: nowrap;
}
.cl-filters select { min-width: 160px; color: var(--base-foreground); }
.cl-search {
  order: 1;
  margin-left: auto;
  position: relative;
  width: 373px;
  flex: none;
}
.cl-search .icon {
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--base-muted-foreground);
  pointer-events: none;
}
/* the foundation's input rule carries four :not() clauses, so this one needs the longer chain to win the padding */
main.cl .cl-filters .cl-search input[type="search"] { width: 100%; padding-left: 36px; }
.cl-search input::-webkit-search-cancel-button { margin-right: 4px; }

/* the loading and calm lines */
.cl-calm { color: var(--base-muted-foreground); }
main.cl > .cl-calm { margin: 0 0 16px; }
.cl-group > .cl-calm { padding: 12px 0; margin: 0; }

/* ---------- the three groups ---------- */
.cl-group { margin: 0 0 24px; }
.cl-group:last-child { margin-bottom: 0; }
.cl-group .section-heading { margin-bottom: 12px; }

.cl-table {
  background: var(--base-card);
  border: 1px solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
  overflow: hidden;
}
.cl-table th { padding: 10px 16px; white-space: nowrap; }
.cl-table th .icon { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; color: var(--base-fg-muted); }
.cl-table td { padding: 12px 16px; }
.cl-table tbody tr:last-child td { border-bottom: 0; }
/* fixed columns so the three group tables line up: resident, event, sleep, activity, notes, status */
.cl-table table { table-layout: fixed; }
.cl-table th:nth-child(1) { width: 216px; }
.cl-table th:nth-child(3) { width: 112px; }
.cl-table th:nth-child(4) { width: 112px; }
.cl-table th:nth-child(6) { width: 244px; }

/* a secondary line: text-xs, muted, with a 12px icon */
.cl-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
  color: var(--base-muted-foreground);
}
.cl-sub .icon { width: 12px; height: 12px; vertical-align: -2px; }

/* the resident cell: avatar with the radio's dot, the name, age and condition */
.cl-resident { display: flex; align-items: center; gap: 12px; }
.cl-who { min-width: 0; }
.cl-who a { color: var(--base-foreground); font-weight: var(--font-weight-medium); }
.cl-who a:hover { text-decoration: underline; }
.cl-row .avatar { width: 36px; height: 36px; border: 2px solid var(--base-card); box-shadow: 0 0 0 2px var(--shelter-color-status-resolved); }
.cl-row .avatar:has(.dot.offline) { box-shadow: 0 0 0 2px var(--base-border-strong); }

/* the event cell: the title, then the time in muted */
.cl-event { font-weight: var(--font-weight-medium); }
.cl-time { color: var(--base-muted-foreground); }

/* the sleep and activity cells: icon, then the value over its label */
.cl-metric { display: inline-flex; align-items: flex-start; gap: 8px; }
.cl-metric > .icon { margin-top: 2px; color: var(--base-fg-subtle); }
.cl-value { display: block; font-weight: var(--font-weight-medium); white-space: nowrap; }
.cl-metric .cl-sub { margin-top: 0; }

/* the notes cell */
.cl-notes { color: var(--base-muted-foreground); }

/* the status cell: the chip, the radio line, the acts, and the call menu under them */
.cl-status-cell { position: relative; }
.cl-status-cell .cl-sub { white-space: nowrap; }
/* the chip wraps rather than runs off the column: "Handler silent for 10 min · <name>" has no bound */
.cl-status .tag { max-width: 100%; white-space: normal; align-items: flex-start; text-align: left; }
.cl-status .tag .icon { flex: none; margin-top: 2px; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cl-call { min-width: 220px; }

/* "Show all N stable residents": a text act in the primary colour */
.cl-more {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-top: 12px;
  padding: 0 4px;
  color: var(--base-primary);
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-rounded-sm);
}
.cl-more:hover { text-decoration: underline; }

/* ---------- the welcome slides: one centred card ---------- */
main.wl { display: grid; place-items: center; min-height: calc(100vh - 48px); }
.wl-card { width: 560px; max-width: 100%; padding: 32px; }
.wl-step {
  margin: 0 0 8px;
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--base-muted-foreground);
}
.wl-card h1 { margin-bottom: 12px; }
.wl-card > p:not(.wl-step) { color: var(--base-fg-subtle); font-size: var(--text-base-font-size); line-height: var(--text-base-line-height); }
.wl-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }