/* Caregiver Hub: the styling foundation.
 *
 * Served by web-frame at /frame/assets/main.css and linked by every page of every piece before
 * the piece's own stylesheet. One file, hand-written: the design tokens, the Inter face, the body
 * grid every page sits in, element defaults, the shared component vocabulary and the icon classes.
 * A piece never redefines anything here; it adds rules for its own root in its own stylesheet.
 * carehub/README.md "Styling" is the prose.
 *
 * Tokens: copied by hand from the Figma file UQdwUDkphf8JySh8cY5sqj ("Caregiver Hub", Shelter
 * Devices), snapshot 2026-10-23 (variables-merged.json in the local cache). A Figma name maps to
 * a custom property with "/" replaced by "-": base/tag-red-bg is --base-tag-red-bg. Only the
 * subset the desktop pages use is declared. Spacing is written as literal px.
 *
 * Inter: /frame/assets/inter.woff2 is InterVariable.woff2 from the rsms/inter 4.1 release,
 * copyright 2016 The Inter Project Authors, SIL Open Font License 1.1 (https://openfontlicense.org).
 * Icons: the .icon-* glyphs are Lucide SVGs (https://lucide.dev), ISC licence, copyright Lucide
 * Icons and Contributors, inlined as mask data URIs. Three carry the name the design uses rather
 * than Lucide's current one: alert-triangle (triangle-alert), alert-circle (circle-alert),
 * filter (funnel).
 *
 * Desktop at 1440px, light only. No breakpoints, no dark scheme.
 */

/* ---------- 1. Tokens ---------- */

:root {
  /* base/* colours */
  --base-background: #f9f5f0;
  --base-foreground: #0d0b0a;
  --base-muted: #f4f2ef;
  --base-muted-foreground: #736b63;
  --base-border: #e6e2dd;
  --base-border-strong: #d3cdc6;
  --base-input: #e6e2dd;
  --base-ring: #c2600a;
  --base-primary: #b85b09;
  --base-primary-foreground: #ffffff;
  --base-secondary: #fbf4f1;
  --base-secondary-foreground: #1c1916;
  --base-accent: #fbf4f1;
  --base-accent-foreground: #a65010;
  --base-destructive: #be123c;
  --base-destructive-foreground: #ffffff;
  --base-card: #ffffff;
  --base-card-foreground: #0d0b0a;
  --base-popover: #ffffff;
  --base-popover-foreground: #0d0b0a;
  --base-sidebar-background: #fafafa;
  --base-sidebar-foreground: #0d0b0a;
  --base-sidebar-accent: #e6e2dd;
  --base-sidebar-accent-foreground: #18181b;
  --base-sidebar-border: #e4e4e7;
  --base-fg-subtle: #575049;
  --base-fg-muted: #a39b92;
  --base-bg-subtle: #faf9f7;
  --base-bg-base-hover: #faf9f7;
  --base-bg-overlay: #0d0b0a;
  --base-button-tinted-text: #a65010;

  /* the six tag families: bg, text, border, icon */
  --base-tag-red-bg: #ffe4e6;
  --base-tag-red-text: #be123c;
  --base-tag-red-border: #fecdd3;
  --base-tag-red-icon: #e11d48;
  --base-tag-blue-bg: #dbeafe;
  --base-tag-blue-text: #1d4ed8;
  --base-tag-blue-border: #bfdbfe;
  --base-tag-blue-icon: #2563eb;
  --base-tag-green-bg: #d1fae5;
  --base-tag-green-text: #047857;
  --base-tag-green-border: #a7f3d0;
  --base-tag-green-icon: #059669;
  --base-tag-orange-bg: #fef3c7;
  --base-tag-orange-text: #b45309;
  --base-tag-orange-border: #fde68a;
  --base-tag-orange-icon: #d97706;
  --base-tag-neutral-bg: #f4f2ef;
  --base-tag-neutral-text: #575049;
  --base-tag-neutral-border: #e6e2dd;
  --base-tag-neutral-icon: #736b63;
  --base-tag-purple-bg: #ede9fe;
  --base-tag-purple-text: #6d28d9;
  --base-tag-purple-border: #ddd6fe;
  --base-tag-purple-icon: #7c3aed;

  /* the status set (Figma keeps these under their CSS names already) */
  --shelter-color-status-critical: #be123c;
  --shelter-color-status-critical-background: #ffe4e6;
  --shelter-color-status-critical-icon-bg: #fecdd3;
  --shelter-color-status-critical-text: #be123c;
  --shelter-color-status-warning: #b85b09;
  --shelter-color-status-warning-background: #ffedd5;
  --shelter-color-status-warning-text: #c2410c;
  --shelter-color-status-resolved: #059669;
  --shelter-color-status-resolved-text: #166534;
  --shelter-color-status-info: #2563eb;

  /* border-radius/* */
  --border-radius-rounded-sm: 6px;
  --border-radius-rounded-md: 8px;
  --border-radius-rounded-lg: 10px;
  --border-radius-rounded-xl: 14px;
  --border-radius-rounded-2xl: 16px;
  --border-radius-rounded-full: 9999px;

  /* shadow/* (each is two layers in Figma) */
  --shadow-sm: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* the type scale: text/<size>/font-size and line-height */
  --text-xs-font-size: 12px;
  --text-xs-line-height: 16px;
  --text-sm-font-size: 14px;
  --text-sm-line-height: 20px;
  --text-base-font-size: 16px;
  --text-base-line-height: 24px;
  --text-lg-font-size: 18px;
  --text-lg-line-height: 28px;
  --text-xl-font-size: 20px;
  --text-xl-line-height: 28px;
  --text-2xl-font-size: 24px;
  --text-2xl-line-height: 32px;

  /* font */
  --font-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}

/* ---------- 2. Inter and the body ---------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/frame/assets/inter.woff2") format("woff2");
}

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

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-font-sans);
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--base-foreground);
  background: var(--base-background);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. The body grid ----------
 * The frame mounts #frame-root as the first child of body and renders the rail, the top bar and
 * (when open) the Alerts panel inside it. #frame-root is display: contents, so those land in the
 * body grid directly, and whatever element the page itself put in body is the main area. The grid
 * is on only when a rail is mounted: the sign-in page, and a page before the frame script runs,
 * stay a plain block. The rail, the top bar and the panel are otherwise unstyled here; the frame
 * piece styles them in its own section of this file.
 */

body:has(.frame-rail) {
  display: grid;
  grid-template-columns: 48px auto 1fr;
  grid-template-rows: auto 1fr;
}

#frame-root { display: contents; }

/* the sign-in page mounts no rail, and Clerk mounts onto #sign-in itself (it becomes Clerk's
 * fit-content root box), so the body is what centres it: Clerk's card, or the not-configured /
 * unavailable line, in the middle of the viewport */
body:has(#sign-in) {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
#sign-in { padding: 24px; }

.frame-rail { grid-row: 1 / 3; grid-column: 1; }
.frame-panel { grid-row: 1 / 3; grid-column: 2; }
.frame-top { grid-row: 1; grid-column: 3; }

/* everything the frame renders that is not rail, panel or top bar (the stranger notice) and the
 * page's own root share the main cell; the modal is position: fixed and ignores the grid */
.frame-stranger,
body:has(.frame-rail) > :not(#frame-root) {
  grid-row: 2;
  grid-column: 3;
  min-width: 0;
  padding: 24px 32px;
}

/* ---------- 4. Element defaults ---------- */

h1, h2, h3, h4, p, ul, ol, dl, figure, table { margin: 0; }

h1 { font-size: var(--text-2xl-font-size); line-height: var(--text-2xl-line-height); font-weight: var(--font-weight-semibold); }
h2 { font-size: var(--text-lg-font-size); line-height: var(--text-lg-line-height); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--text-base-font-size); line-height: var(--text-base-line-height); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--text-sm-font-size); line-height: var(--text-sm-line-height); font-weight: var(--font-weight-semibold); }

h1, h2, h3, h4 { margin-bottom: 8px; }
p { margin-bottom: 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--base-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  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);
  padding: 12px 16px;
  border-bottom: 1px solid var(--base-border);
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--base-border);
  vertical-align: middle;
}

input, select, textarea, button { font: inherit; color: inherit; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  display: inline-block;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--base-input);
  border-radius: var(--border-radius-rounded-md);
  background: var(--base-card);
  color: var(--base-foreground);
}
textarea { height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--base-fg-muted); }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--base-ring);
  outline-offset: 1px;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
}
button:disabled { cursor: default; opacity: 0.5; }

/* ---------- 5. Components ---------- */

/* .btn: 36px, radius md, text-sm medium; .primary .outline .tinted; .sm is 28px */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-rounded-md);
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--base-primary); border-color: var(--base-primary); color: var(--base-primary-foreground); }
.btn.primary:hover { background: var(--base-ring); border-color: var(--base-ring); }
.btn.outline { background: var(--base-card); border-color: var(--base-border-strong); color: var(--base-foreground); }
.btn.outline:hover { background: var(--base-bg-base-hover); }
.btn.tinted { background: var(--base-secondary); border-color: var(--base-secondary); color: var(--base-button-tinted-text); }
.btn.tinted:hover { background: var(--base-accent); }
.btn.sm { height: 28px; padding: 0 10px; font-size: var(--text-xs-font-size); line-height: var(--text-xs-line-height); }

/* .tag: an inline status chip; the six families colour its bg, text, border and icon */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--base-tag-neutral-border);
  border-radius: var(--border-radius-rounded-sm);
  background: var(--base-tag-neutral-bg);
  color: var(--base-tag-neutral-text);
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.tag .icon { width: 12px; height: 12px; vertical-align: -2px; color: var(--base-tag-neutral-icon); }
.tag.red { background: var(--base-tag-red-bg); border-color: var(--base-tag-red-border); color: var(--base-tag-red-text); }
.tag.red .icon { color: var(--base-tag-red-icon); }
.tag.blue { background: var(--base-tag-blue-bg); border-color: var(--base-tag-blue-border); color: var(--base-tag-blue-text); }
.tag.blue .icon { color: var(--base-tag-blue-icon); }
.tag.green { background: var(--base-tag-green-bg); border-color: var(--base-tag-green-border); color: var(--base-tag-green-text); }
.tag.green .icon { color: var(--base-tag-green-icon); }
.tag.orange { background: var(--base-tag-orange-bg); border-color: var(--base-tag-orange-border); color: var(--base-tag-orange-text); }
.tag.orange .icon { color: var(--base-tag-orange-icon); }
.tag.neutral { background: var(--base-tag-neutral-bg); border-color: var(--base-tag-neutral-border); color: var(--base-tag-neutral-text); }
.tag.neutral .icon { color: var(--base-tag-neutral-icon); }
.tag.purple { background: var(--base-tag-purple-bg); border-color: var(--base-tag-purple-border); color: var(--base-tag-purple-text); }
.tag.purple .icon { color: var(--base-tag-purple-icon); }

/* .tile: a count or a reading; a muted text-sm label above a text-2xl number */
.tile {
  background: var(--base-card);
  border: 1px solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
  padding: 16px;
}
.tile .label, .tile dt {
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
  color: var(--base-muted-foreground);
  margin: 0;
}
.tile .value, .tile dd {
  font-size: var(--text-2xl-font-size);
  line-height: var(--text-2xl-line-height);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

/* .card: a bordered white surface with a small shadow */
.card {
  background: var(--base-card);
  border: 1px solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

/* .section-heading: a group title with an optional .count badge */
.section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-lg-font-size);
  line-height: var(--text-lg-line-height);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 12px;
}
.section-heading .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-tag-neutral-bg);
  color: var(--base-tag-neutral-text);
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
  font-weight: var(--font-weight-medium);
}

/* .modal-back + .modal: a fixed overlay with a centred dialog */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(13, 11, 10, 0.45);
  display: grid;
  place-items: center;
}
.modal {
  background: var(--base-card);
  color: var(--base-card-foreground);
  border-radius: var(--border-radius-rounded-xl);
  box-shadow: var(--shadow-lg);
  width: calc(100% - 32px);
  max-width: 550px;
  padding: 24px;
}

/* .drawer: a fixed right-hand panel */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  width: 380px;
  background: var(--base-card);
  border-left: 1px solid var(--base-border);
  padding: 24px;
  overflow: auto;
}

/* .menu: a popover of full-width, left-aligned buttons */
.menu {
  position: absolute;
  z-index: 50;
  min-width: 160px;
  background: var(--base-popover);
  color: var(--base-popover-foreground);
  border: 1px solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--border-radius-rounded-sm);
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
}
.menu button:hover { background: var(--base-bg-base-hover); }

/* .notice: an inline message in one of the four status tones */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--base-border);
  border-radius: var(--border-radius-rounded-md);
  background: var(--base-muted);
  color: var(--base-foreground);
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
}
.notice .icon { flex: none; margin-top: 2px; }
.notice.info { background: var(--base-tag-blue-bg); border-color: var(--base-tag-blue-border); color: var(--base-tag-blue-text); }
.notice.info .icon { color: var(--shelter-color-status-info); }
.notice.warning { background: var(--shelter-color-status-warning-background); border-color: var(--base-tag-orange-border); color: var(--shelter-color-status-warning-text); }
.notice.warning .icon { color: var(--shelter-color-status-warning); }
.notice.critical { background: var(--shelter-color-status-critical-background); border-color: var(--shelter-color-status-critical-icon-bg); color: var(--shelter-color-status-critical-text); }
.notice.critical .icon { color: var(--shelter-color-status-critical); }
.notice.resolved { background: var(--base-tag-green-bg); border-color: var(--base-tag-green-border); color: var(--shelter-color-status-resolved-text); }
.notice.resolved .icon { color: var(--shelter-color-status-resolved); }

/* .avatar: a 32px circle of initials, with an optional .dot status marker */
.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-secondary);
  color: var(--base-accent-foreground);
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  flex: none;
}
.avatar .dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: var(--border-radius-rounded-full);
  border: 2px solid var(--base-card);
  background: var(--base-tag-neutral-icon);
}
.avatar .dot.online { background: var(--shelter-color-status-resolved); }
.avatar .dot.offline { background: var(--base-tag-neutral-icon); }

/* ---------- 6. Icons ----------
 * <span class="icon icon-bell" aria-hidden="true"></span>: a 16px glyph in currentColor.
 * .icon.lg is 20px. The glyph is the mask; the colour is whatever the text colour is.
 */

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  vertical-align: -3px;
}
.icon.lg { width: 20px; height: 20px; vertical-align: -4px; }

.icon-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0' /%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' /%3E%3C/svg%3E"); }
.icon-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744' /%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87' /%3E%3Ccircle cx='9' cy='7' r='4' /%3E%3C/svg%3E"); }
.icon-history { --i: url("data:image/svg+xml,%3C!-- @license lucide-static v1.61.0 - ISC --%3E%3Csvg class='lucide lucide-history' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E%3Cpath d='M3 3v5h5' /%3E%3Cpath d='M12 7v5l4 2' /%3E%3C/svg%3E"); }
.icon-message-circle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719' /%3E%3C/svg%3E"); }
.icon-settings { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' /%3E%3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E"); }
.icon-moon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401' /%3E%3C/svg%3E"); }
.icon-footprints { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z' /%3E%3Cpath d='M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z' /%3E%3Cpath d='M16 17h4' /%3E%3Cpath d='M4 13h4' /%3E%3C/svg%3E"); }
.icon-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384' /%3E%3C/svg%3E"); }
.icon-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='M12 5v14' /%3E%3C/svg%3E"); }
.icon-chevron-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m6 9 6 6 6-6' /%3E%3C/svg%3E"); }
.icon-chevron-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m9 18 6-6-6-6' /%3E%3C/svg%3E"); }
.icon-chevron-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m18 15-6-6-6 6' /%3E%3C/svg%3E"); }
.icon-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E"); }
.icon-circle-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m16 9-5.5 5.5L8 12' /%3E%3C/svg%3E"); }
.icon-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M18 6 6 18' /%3E%3Cpath d='m6 6 12 12' /%3E%3C/svg%3E"); }
.icon-alert-triangle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E%3Cpath d='M12 9v4' /%3E%3Cpath d='M12 17h.01' /%3E%3C/svg%3E"); }
.icon-alert-circle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cline x1='12' x2='12' y1='8' y2='12' /%3E%3Cline x1='12' x2='12.01' y1='16' y2='16' /%3E%3C/svg%3E"); }
.icon-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='M12 16v-4' /%3E%3Cpath d='M12 8h.01' /%3E%3C/svg%3E"); }
.icon-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21 21-4.34-4.34' /%3E%3Ccircle cx='11' cy='11' r='8' /%3E%3C/svg%3E"); }
.icon-filter { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z' /%3E%3C/svg%3E"); }
.icon-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' /%3E%3Ccircle cx='12' cy='7' r='4' /%3E%3C/svg%3E"); }
.icon-user-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m16 11 2 2 4-4' /%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E%3Ccircle cx='9' cy='7' r='4' /%3E%3C/svg%3E"); }
.icon-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='M12 6v6l4 2' /%3E%3C/svg%3E"); }
.icon-calendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 2v3' /%3E%3Cpath d='M16 2v3' /%3E%3Crect x='3' y='3' width='18' height='18' rx='2' /%3E%3Cpath d='M3 9h18' /%3E%3C/svg%3E"); }
.icon-mic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 19v3' /%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2' /%3E%3Crect x='9' y='2' width='6' height='13' rx='3' /%3E%3C/svg%3E"); }
.icon-send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z' /%3E%3Cpath d='m21.854 2.147-10.94 10.939' /%3E%3C/svg%3E"); }
.icon-arrow-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='m12 5 7 7-7 7' /%3E%3C/svg%3E"); }
.icon-person-standing { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='5' r='1' /%3E%3Cpath d='m9 20 3-6 3 6' /%3E%3Cpath d='m6 8 6 2 6-2' /%3E%3Cpath d='M12 10v4' /%3E%3C/svg%3E"); }
.icon-pill { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z' /%3E%3Cpath d='m8.5 8.5 7 7' /%3E%3C/svg%3E"); }
.icon-stethoscope { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 2v2' /%3E%3Cpath d='M5 2v2' /%3E%3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1' /%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3' /%3E%3Ccircle cx='20' cy='10' r='2' /%3E%3C/svg%3E"); }
.icon-heart-pulse { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5' /%3E%3Cpath d='M3.22 13H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27' /%3E%3C/svg%3E"); }
.icon-shield-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E%3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E"); }
.icon-external-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 3h6v6' /%3E%3Cpath d='M10 14 21 3' /%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' /%3E%3C/svg%3E"); }

/* ---------- 7. Frame chrome ----------
 * What the frame script renders inside #frame-root: the rail, the top bar, the Alerts panel with
 * its cards, the call menu and call check, and the acknowledge modal. Everything above this line
 * is the foundation every piece shares and stays as it is; every rule below is scoped to
 * #frame-root so it reaches nothing a page renders (web-alerts reuses the class name frame-acts).
 * Values are the Figma components Sidebar 08 (1702:120093), Top Bar (1558:9154), Alerts Panel
 * (1551:272224), Alert Card (1551:272259..272316) and the Acknowledge modal (1738:163816).
 */

/* the rail: 48px, full height, a logo tile, five icon links, the signed-in avatar at the foot */
#frame-root .frame-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 8px;
  background: var(--base-background);
  border-right: 1px solid var(--base-border);
}
#frame-root .frame-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-rounded-lg);
  background: var(--base-card);
  border: 1px solid var(--base-border);
  color: var(--base-foreground);
  flex: none;
}
#frame-root .frame-logo:hover { text-decoration: none; background: var(--base-bg-base-hover); }
#frame-root .frame-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--base-border);
  width: 100%;
  align-items: center;
}
#frame-root .frame-nav a,
#frame-root .frame-rail-foot .avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-rounded-md);
  color: var(--base-sidebar-foreground);
}
#frame-root .frame-nav a:hover { background: var(--base-muted); text-decoration: none; }
#frame-root .frame-nav a.on { background: var(--base-sidebar-accent); color: var(--base-sidebar-accent-foreground); }
#frame-root .frame-rail-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--base-border);
  width: 100%;
  display: grid;
  place-items: center;
}
#frame-root .frame-rail-foot .avatar { border-radius: var(--border-radius-rounded-lg); }

/* the top bar: site and who is signed in at the left, the bell at the right */
#frame-root .frame-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 32px;
  background: var(--base-background);
  border-bottom: 1px solid var(--base-border);
}
#frame-root .frame-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
#frame-root .frame-site {
  font-size: var(--text-lg-font-size);
  line-height: var(--text-lg-line-height);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
#frame-root .frame-who {
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
  color: var(--base-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#frame-root .frame-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--base-border);
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-card);
  color: var(--base-foreground);
}
#frame-root .frame-bell:hover { background: var(--base-bg-base-hover); }
#frame-root .frame-bell[aria-expanded="true"] { background: var(--base-secondary); border-color: var(--base-secondary); color: var(--base-accent-foreground); }
#frame-root .frame-bell .icon { width: 18px; height: 18px; vertical-align: 0; }
#frame-root .frame-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-tag-red-bg);
  border: 1px solid var(--base-tag-red-border);
  color: var(--base-tag-red-text);
  font-size: 11px;
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

/* the panel: a 320px column between the rail and the main area, as tall as the window */
#frame-root .frame-panel {
  position: sticky;
  top: 0;
  width: 320px;
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 12px;
  background: var(--base-card);
  border-right: 1px solid var(--base-border);
  scrollbar-width: none; /* it scrolls; the bar would sit between the cards and the page */
}
#frame-root .frame-panel::-webkit-scrollbar { display: none; }
/* the end of the drawn page: when it scrolls into view the next page is drawn */
#frame-root .frame-more { height: 1px; list-style: none; }
#frame-root .frame-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
#frame-root .frame-panel-head h2 {
  margin: 0;
  font-size: var(--text-base-font-size);
  line-height: var(--text-base-line-height);
  font-weight: var(--font-weight-semibold);
}
#frame-root .frame-panel-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-destructive);
  color: var(--base-destructive-foreground);
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
  font-weight: var(--font-weight-medium);
}

/* the tabs: a segmented control, the pressed one lifted white */
#frame-root .frame-tabs {
  display: flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--border-radius-rounded-lg);
  background: var(--base-muted);
}
#frame-root .frame-tabs button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--border-radius-rounded-md);
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--base-foreground);
  white-space: nowrap;
}
#frame-root .frame-tabs button:hover { background: var(--base-bg-base-hover); }
#frame-root .frame-tabs button[aria-pressed="true"] { background: var(--base-card); box-shadow: var(--shadow-sm); }
#frame-root .frame-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: var(--border-radius-rounded-full);
  background: var(--base-secondary);
  color: var(--base-secondary-foreground);
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
}

#frame-root .frame-notice { margin: 0; }

#frame-root .frame-alerts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#frame-root .frame-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  text-align: center;
  color: var(--base-muted-foreground);
}
#frame-root .frame-empty .icon { color: var(--shelter-color-status-resolved); }
#frame-root .frame-foot { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 8px; }

/* an alert card: an optional status band on top, the incident, then the acts */
#frame-root .frame-alert {
  background: var(--base-card);
  border: 1px solid var(--base-border);
  border-radius: var(--border-radius-rounded-lg);
}
#frame-root .frame-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  border-radius: 9px 9px 0 0;
  padding: 10px 16px;
  font-size: var(--text-sm-font-size);
  line-height: var(--text-sm-line-height);
  font-weight: var(--font-weight-medium);
  background: var(--base-muted);
  color: var(--base-foreground);
}
#frame-root .frame-state.mine { background: var(--base-tag-blue-bg); color: var(--base-tag-blue-text); }
#frame-root .frame-state.other { background: var(--base-sidebar-accent); color: var(--base-sidebar-accent-foreground); }
#frame-root .frame-state.late { background: var(--base-secondary-foreground); color: var(--base-bg-subtle); }
#frame-root .frame-state-detail { font-weight: var(--font-weight-normal); font-size: var(--text-xs-font-size); color: var(--base-fg-muted); }
#frame-root .frame-state.returned { background: var(--base-tag-orange-bg); color: var(--base-tag-orange-text); }
#frame-root .frame-incident { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 12px; }
#frame-root .frame-alert-title {
  display: block;
  font-size: var(--text-base-font-size);
  line-height: var(--text-base-line-height);
  font-weight: var(--font-weight-semibold);
}
#frame-root .frame-resident { display: flex; align-items: flex-start; gap: 8px; }
#frame-root .frame-resident .avatar { width: 20px; height: 20px; font-size: 9px; line-height: 1; }
#frame-root .frame-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#frame-root .frame-name { font-weight: var(--font-weight-medium); }
#frame-root .frame-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs-font-size);
  line-height: var(--text-xs-line-height);
  color: var(--base-muted-foreground);
}
#frame-root .frame-condition { display: inline-flex; align-items: center; gap: 4px; }
#frame-root .frame-condition .icon { width: 12px; height: 12px; vertical-align: 0; }
#frame-root .frame-time { flex: none; color: var(--base-muted-foreground); white-space: nowrap; }
#frame-root .frame-acts { display: flex; align-items: center; gap: 8px; padding: 16px; }
#frame-root .frame-acts .btn { border-radius: var(--border-radius-rounded-full); height: 32px; padding: 0 12px; }
/* two acts: the first fills, the second is one fixed width, so Take over, Acknowledge and
 * Still handling this? are the same width from card to card whatever sits beside them */
#frame-root .frame-acts > .btn:first-child { flex: 1 1 auto; }
#frame-root .frame-acts > .btn:not(:first-child), #frame-root .frame-acts > .frame-call { flex: 0 0 104px; width: 104px; }
#frame-root .frame-acts > .btn.outline:only-child { flex: 1 1 auto; width: auto; }
#frame-root .frame-acts .btn.outline { border-color: var(--base-accent-foreground); color: var(--base-accent-foreground); }
#frame-root .frame-call { position: relative; display: inline-flex; }
#frame-root .frame-call > .btn { width: 100%; }
#frame-root .frame-call .menu { top: calc(100% + 4px); right: 0; left: auto; min-width: 200px; }

/* the call check: the question and its three answers inside the card */
#frame-root .frame-call-check {
  margin: 12px 16px 0;
  padding: 10px 12px 0;
  border-radius: var(--border-radius-rounded-md);
  background: var(--base-muted);
}
#frame-root .frame-call-check-q { display: flex; align-items: center; gap: 8px; font-weight: var(--font-weight-medium); }
#frame-root .frame-call-check .frame-acts { padding: 10px 0 12px; flex-wrap: wrap; }
#frame-root .frame-call-check .frame-acts .btn { flex: 1 1 auto; }

/* the acknowledge modal: resident, the event, the false-alarm check, what was found, the acts */
#frame-root .frame-modal .modal { display: flex; flex-direction: column; gap: 16px; border-radius: var(--border-radius-rounded-2xl); }
#frame-root .frame-modal h2 { margin: 0; }
#frame-root .frame-modal-resident { display: flex; align-items: center; gap: 12px; }
#frame-root .frame-modal-resident > div { display: flex; flex-direction: column; gap: 4px; }
#frame-root .frame-modal-resident .avatar.lg { width: 40px; height: 40px; font-size: var(--text-sm-font-size); }
#frame-root .frame-modal-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--base-tag-orange-border);
  border-radius: var(--border-radius-rounded-md);
  background: var(--base-tag-orange-bg);
  color: var(--shelter-color-status-warning-text);
}
#frame-root .frame-modal-event.urgent {
  border-color: var(--base-tag-red-border);
  background: var(--base-tag-red-bg);
  color: var(--shelter-color-status-critical-text);
}
#frame-root .frame-modal-event > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#frame-root .frame-modal-detected { font-size: var(--text-xs-font-size); line-height: var(--text-xs-line-height); }
#frame-root .frame-event-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--border-radius-rounded-full);
  background: var(--shelter-color-status-warning-background);
}
#frame-root .frame-modal-event.urgent .frame-event-icon { background: var(--shelter-color-status-critical-icon-bg); }
#frame-root .frame-event-icon .icon { width: 20px; height: 20px; vertical-align: 0; }
#frame-root .frame-check { display: flex; align-items: center; gap: 8px; }
#frame-root .frame-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--base-primary); }
#frame-root .frame-field { font-weight: var(--font-weight-medium); margin-bottom: -8px; }
#frame-root .frame-modal textarea { width: 100%; min-height: 96px; }
#frame-root .frame-modal-acts { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
#frame-root .frame-modal-acts .btn.primary { flex: 1 1 auto; }

/* the stranger notice sits in the main cell (foundation section 3 places it) */
#frame-root .frame-stranger .notice { max-width: 560px; }