/* Solved PM — component layer (Phase F foundation).
   Extracted from design/design_handoff_solved_pm_v1/Components.dc.html and the
   README global shell spec. Inline styles in the .dc.html files are the pixel
   spec; this sheet is their shared vocabulary. tokens.css must load first.

   Sections: base · shell (header, tab bar, nav rail, frame) · sheets ·
   buttons · chips · severity bands · cards, eyebrows, back links · forms ·
   timeline · photos · skeleton and empty states · legacy support (fenced). */

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--coal);
  background: var(--surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--coal);
  margin: 0 0 0.5rem;
}
a { color: var(--info); }
a:hover { color: var(--teal); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideup { from { transform: translateY(24px); opacity: .4 } to { transform: translateY(0); opacity: 1 } }

/* Screen titles live in content, not the teal bar (Montserrat 700, -0.02em). */
.screen-title { margin: 0; font: 700 22px/1.2 var(--font-heading); letter-spacing: -0.02em; color: var(--coal); }
.screen-display { margin: 0; font: 700 28px/1.15 var(--font-heading); letter-spacing: -0.02em; color: var(--coal); }

/* --- Shell: app frame ----------------------------------------------------
   Phones: full bleed. >=720px: 430px centred frame with --shadow-lg.
   Admin >=1024px: full-width nav-rail layout (2c), tab bar hidden. */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface); }
.app-body { flex: 1; display: flex; min-height: 0; }
#view { flex: 1; min-width: 0; padding: 20px 16px 32px; animation: fadein var(--dur) var(--ease); }

@media (min-width: 720px) {
  .app { max-width: 430px; margin: 0 auto; box-shadow: var(--shadow-lg); }
}
@media (min-width: 1024px) {
  body.role-admin .app { max-width: none; margin: 0; box-shadow: none; }
  body.role-admin .navrail { display: flex; }
  body.role-admin .tabbar { display: none; }
  body.role-admin .app-header { padding: 10px 24px; min-height: 56px; }
  body.role-admin .header-email { display: inline; }
  body.role-admin #view { padding: 28px 32px; }
  body.role-admin #view > * { max-width: 720px; }
  body.role-admin .contextrail:not([hidden]) { display: block; }
}

/* --- Shell: header + gold rule ------------------------------------------- */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--teal);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; min-height: 52px;
}
.app-header .wordmark { height: 26px; display: block; flex: none; }
.app-header .signout {
  background: none; border: 0; padding: 0; margin: 0;
  min-height: var(--tap); display: inline-flex; align-items: center;
  color: rgba(255,255,255,.75); font: 400 var(--text-footnote) var(--font-body);
  cursor: pointer; text-decoration: none;
}
.app-header .signout:hover { color: var(--white); }
.header-email { display: none; color: rgba(255,255,255,.6); font-size: var(--text-footnote); }
.header-right { display: flex; align-items: center; gap: 16px; }

/* The 2px gold gradient rule under the teal bar: the only gold in the chrome. */
.gold-rule { height: 2px; background: var(--gold-gradient); border: 0; margin: 0; flex: none; }

/* --- Shell: bottom tab bar ----------------------------------------------
   Sticky, white, 1px top border. Tabs >=44px: 22px 1.8-stroke icon + 11px
   label. Idle muted 500; active teal 600 with the inset gold tick. */
.tabbar {
  position: sticky; bottom: 0; z-index: 50;
  background: var(--white); border-top: 1px solid var(--border);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar[hidden] { display: none; }
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 6px; min-height: var(--tap);
  text-decoration: none; color: var(--text-muted);
  font-size: var(--text-caption); font-weight: 500;
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a:hover { color: var(--teal); }
.tabbar a.on { color: var(--teal); font-weight: 600; box-shadow: inset 0 2px 0 var(--gold); }

/* --- Shell: desktop nav rail (admin >=1024px, layout 2c) ------------------ */
.navrail {
  display: none; width: 200px; flex: none;
  border-right: 1px solid var(--border); background: var(--white);
  padding: 16px 12px; flex-direction: column; gap: 2px;
}
.navrail a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px;
  border-radius: var(--r-md); text-decoration: none;
  color: var(--coal); font: 500 14px var(--font-body);
}
.navrail a svg { width: 18px; height: 18px; flex: none; }
.navrail a:hover { background: var(--surface); color: var(--coal); }
.navrail a.on { color: var(--teal); background: var(--teal-subtle); font-weight: 600; box-shadow: inset 2px 0 0 var(--gold); }
.rail-divider { height: 1px; background: var(--border); margin: 10px 4px; }
.rail-badge {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--fail-bg); color: var(--fail); font: 600 11px var(--font-body);
}
.rail-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* Desktop context rail (280px). Hidden until a view populates it. */
.contextrail { display: none; width: 280px; flex: none; padding: 28px 24px 32px; }

/* --- Bottom sheets --------------------------------------------------------
   Overlay rgba(16,57,71,.45); white sheet, 16px top radius, 36x4 handle,
   220ms slide-up on the house curve. Use ui.js openSheet()/closeSheet(). */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-overlay { position: absolute; inset: 0; background: rgba(16,57,71,.45); animation: fadein var(--dur) var(--ease); }
.sheet {
  position: relative; background: var(--white);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
  animation: slideup var(--dur-slow) var(--ease);
  max-width: 430px; width: 100%; margin: 0 auto;
  max-height: 85vh; overflow: auto;
}
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto; flex: none; }
.sheet-title { font: 600 18px var(--font-heading); color: var(--coal); }
body.sheet-open { overflow: hidden; }

/* --- Buttons (44px+ targets; gold at most once per screen) ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font: 600 15px var(--font-body); cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-hover); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--teal); border: 1.5px solid var(--teal); }
.btn-secondary:hover { background: var(--teal-subtle); color: var(--teal); }
.btn-gold { background: var(--gold-gradient); color: var(--coal); border: 1px solid var(--gold-dark); }
.btn-gold:hover { filter: brightness(.96); color: var(--coal); }
.btn-danger { background: var(--white); color: var(--fail); border: 1.5px solid var(--fail); }
.btn-danger:hover { background: var(--fail-bg); color: var(--fail); }
.btn:disabled { background: var(--border); color: var(--text-muted); border-color: transparent; cursor: not-allowed; filter: none; }

/* --- Chips ----------------------------------------------------------------
   Status chips: dot + tint, functional colours only. Selection chips: pick
   one, teal when chosen. Gold outline marks a key figure, never a status. */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font: 500 12px var(--font-body); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip-pass { background: var(--pass-bg); color: var(--pass); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-fail { background: var(--fail-bg); color: var(--fail); }
.chip-info { background: var(--info-bg); color: var(--info); }
.chip-neutral { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.chip-gold { background: var(--white); color: var(--gold-dark); border: 1px solid var(--gold-dark); font-weight: 600; }

.pick {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-pill); font: 500 13px var(--font-body);
  background: var(--white); color: var(--coal); border: 1px solid var(--border); cursor: pointer;
}
.pick:hover { border-color: var(--teal); }
.pick.on { background: var(--teal); color: var(--white); border-color: var(--teal); font-weight: 600; }

/* --- Severity bands (Today's four temperatures) --------------------------- */
.band { border-radius: var(--r-md); overflow: hidden; }
.band-fail { background: var(--fail-bg); border: 1px solid rgba(179,38,30,.3); }
.band-warn { background: var(--warn-bg); border: 1px solid rgba(217,119,6,.3); }
.band-neutral { background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.band-quiet { background: var(--surface); border: 1px dashed var(--border); }
.band-title {
  display: block; padding: 14px 16px 0;
  font-size: 10px; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted);
}
.band-fail .band-title { color: var(--fail); }
.band-warn .band-title { color: var(--warn); }

/* --- Cards, eyebrows, back links ------------------------------------------ */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-sm);
}
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.eyebrow::before { content: ''; width: 20px; height: 3px; background: var(--gold-gradient); border-radius: 2px; flex: none; }
.backlink {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap);
  text-decoration: none; color: var(--info);
  font-size: var(--text-footnote); font-weight: 500;
}
.backlink svg { width: 14px; height: 14px; flex: none; }
.backlink:hover { color: var(--teal); }

/* --- Forms ----------------------------------------------------------------
   48px fields, teal focus. Checkboxes and radios keep native sizing. */
label { font: 500 var(--text-footnote) var(--font-body); color: var(--text-muted); display: block; margin-bottom: 4px; }
input:not([type='checkbox']):not([type='radio']), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--white); color: var(--coal);
  font: 400 15px var(--font-body);
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: var(--focus-ring);
}

/* Toggle: teal track, gold knob when on (a restyled checkbox). */
input[type='checkbox'].switch {
  appearance: none; -webkit-appearance: none;
  position: relative; width: 46px; height: 28px; flex: none;
  background: var(--border); border: 0; border-radius: var(--r-pill);
  cursor: pointer; margin: 0; padding: 0;
  transition: background var(--dur-fast) var(--ease);
}
input[type='checkbox'].switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--white);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
input[type='checkbox'].switch:checked { background: var(--teal); }
input[type='checkbox'].switch:checked::after { transform: translateX(18px); background: var(--gold); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--tap); font-size: 14px; color: var(--coal); }

/* --- Timeline (append-only, the single source of truth) -------------------
   Filled dot = an action that happened; open dot (li.origin) = origin event. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; margin-left: 8px; padding: 0 0 14px 18px; border-left: 2px solid var(--border); }
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--teal);
}
.timeline li.origin::before { background: var(--white); border: 2px solid var(--teal); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }

/* --- Photos ---------------------------------------------------------------
   No stock ever. Placeholder = tinted diagonal hairline block. */
.photo-ph {
  background: var(--teal-subtle) repeating-linear-gradient(45deg, transparent 0 6px, rgba(16,57,71,.05) 6px 7px);
  border-radius: var(--r-sm);
  display: flex; align-items: flex-end; padding: 5px;
  color: var(--text-muted); font-size: 10px;
}
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); }

/* --- Skeleton and empty states --------------------------------------------
   Loading is skeleton bands shaped like the card they become, never spinners.
   Empty states say why they are empty and link the filling action. */
.skeleton { display: flex; flex-direction: column; gap: 8px; }
.skel { display: block; height: 10px; background: var(--surface); border-radius: 3px; animation: skelpulse 1.4s var(--ease) infinite; }
.card .skel { background: var(--teal-subtle); }
@keyframes skelpulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
.empty {
  background: var(--white); border: 1px dashed var(--border); border-radius: var(--r-md);
  padding: 18px; text-align: center;
}
.empty strong { display: block; font: 500 14px var(--font-body); color: var(--coal); }
.empty p { margin: 3px 0 0; font-size: var(--text-footnote); color: var(--text-muted); line-height: 1.5; }

/* ==========================================================================
   LEGACY SUPPORT — classes the pre-redesign views still reference.
   Everything below dies as workstreams A, B, and C rewrite their screens.
   Do not use these in new code; do not extend this block.
   ========================================================================== */
.shell { width: 100%; margin: 0 auto; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.center { text-align: center; }
.hidden { display: none; }
.muted { color: var(--text-muted); font-size: 0.875rem; }
.login-logo { width: 180px; max-width: 60%; margin: 40px auto 8px; display: block; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cat { min-height: 56px; border: 1px solid var(--border); border-radius: var(--r-md);
       background: var(--white); font: 500 0.95rem var(--font-body); color: var(--coal); cursor: pointer; }
.cat.on { border: 2px solid var(--teal); background: var(--teal-subtle); font-weight: 600; }
.wo-card { display: block; text-decoration: none; color: inherit; }
.banner { padding: 10px 14px; border-radius: var(--r-md); font-size: 0.9rem; }
.banner-info { background: var(--info-bg); color: var(--info); }
.banner-fail { background: var(--fail-bg); color: var(--fail); }
.banner-pass { background: var(--pass-bg); color: var(--pass); }
.banner-warn { background: var(--warn-bg); color: var(--warn); padding: 10px 14px; border-radius: var(--r-md);
               font-size: 0.9rem; font-weight: 600; display: block; text-decoration: none; }
.emergency-note { background: var(--fail-bg); color: var(--fail); padding: 10px 14px;
                  border-radius: var(--r-md); font-size: 0.9rem; }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.toggle input { width: 20px; height: 20px; min-height: 0; }
/* Old in-view filter tabs (admin queue) reused the .tabbar name; scope them
   under #view so they never collide with the shell tab bar. */
#view .tabbar { position: static; display: flex; gap: 4px; margin-bottom: 12px; border-top: 0; background: none; padding-bottom: 0; }
#view .tabbar button { flex: 1; }
.approval-amount { font: 700 1.25rem var(--font-heading); color: var(--teal); }
.feed-link { display: block; color: inherit; text-decoration: none; }
.feed-link:hover strong, .feed-link:active strong { color: var(--teal-hover); }
.form-section { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.form-section summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  min-height: 44px; padding: 10px 14px; font: 600 0.95rem var(--font-body); color: var(--teal);
}
.form-section summary::-webkit-details-marker { display: none; }
.form-section summary::after { content: '+'; color: var(--text-muted); font-size: 1.15rem; line-height: 1; }
.form-section[open] summary::after { content: '\2212'; }
.form-section .form-section-body { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
/* ===================== end legacy support ================================ */

/* ===== A: admin ===== */
/* Shared classes for the admin surface (workstream A). The .dc.html inline
   styles are the pixel spec; these classes carry the patterns that repeat. */

/* Top-level screen title (26px mobile, 28px in the desktop work column). */
.title-display { margin: 0; font: 700 var(--text-display)/1.15 var(--font-heading); letter-spacing: -0.02em; color: var(--coal); }
@media (min-width: 1024px) { body.role-admin .title-display { font-size: 28px; } }

/* Screen root: one column, 14px rhythm. */
.vcol { display: flex; flex-direction: column; gap: 14px; }

/* Quick-link pills (Today), 44px tap. */
.pill-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill); font: 500 13px var(--font-body); color: var(--coal); text-decoration: none; box-shadow: var(--shadow-sm); }
.pill-link:hover { background: var(--teal-subtle); color: var(--coal); }

/* Rows inside a severity band. */
.band-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px 14px; text-decoration: none; color: inherit; }
.band-fail .band-row:hover { background: rgba(179,38,30,.06); }
.band-warn .band-row:hover { background: rgba(217,119,6,.06); }
.band-neutral .band-row:hover { background: var(--surface); }

/* White card of stacked 44px rows (units, documents, inquiries, threads). */
.rowlist { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.rowitem { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 12px 14px; width: 100%; text-decoration: none; color: inherit; background: none; border: 0; border-top: 1px solid var(--border); font: inherit; text-align: left; cursor: pointer; }
.rowlist .rowitem:first-child { border-top: 0; }
a.rowitem:hover, button.rowitem:hover { background: var(--surface); }

/* Accordion action panels (request detail): one open at a time. */
.acc { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 16px; background: var(--white); border: 0; font: 600 15px var(--font-heading); color: var(--coal); cursor: pointer; }
.acc-head:hover { background: var(--surface); }
.acc-head .chip { text-transform: none; letter-spacing: 0; }
.acc-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }

/* Small inline action button (44px, 13px). */
.btn-sm { min-height: var(--tap); padding: 0 14px; font-size: 13px; }

/* Chat (admin messages). */
.chat-scroll { display: flex; flex-direction: column; gap: 10px; }
.chat-in { align-self: flex-start; max-width: 80%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm); padding: 10px 14px; font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.chat-out { align-self: flex-end; max-width: 80%; background: var(--teal); color: var(--white); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); padding: 10px 14px; font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.chat-day { align-self: center; font-size: var(--text-caption); color: var(--text-muted); }
.chat-compose { display: flex; gap: 8px; }
.chat-compose input { flex: 1; min-width: 0; border-radius: var(--r-pill); padding: 0 16px; }
.chat-send { display: flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; height: 48px; background: var(--teal); color: var(--white); border: 0; border-radius: 50%; cursor: pointer; }
.chat-send:hover { background: var(--teal-hover); }
.chat-send svg { width: 18px; height: 18px; }

/* Quiet teal unread dot (threads; no badge counts). */
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; }

/* Desktop context rail rows (Today): open dot + line. */
.ctx-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; text-decoration: none; color: inherit; }
a.ctx-row:hover { color: var(--teal); }
.ctx-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--teal); background: var(--white); flex: none; margin-top: 4px; box-sizing: border-box; }
.ctx-dot.warn { border-color: var(--warn); }
.ctx-rule { height: 1px; background: var(--border); }
/* The work column's quiet-wins card hides on desktop; the rail carries it. */
@media (min-width: 1024px) { body.role-admin .m-wins { display: none; } }

/* Photo tiles (listing editor). */
.tile { position: relative; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); display: block; }
.tile-del { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(40,47,50,.75); color: var(--white); font: 600 15px var(--font-body); line-height: 1; cursor: pointer; }
.tile-tag { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 3px; background: rgba(16,57,71,.7); color: var(--white); font-size: 10px; }
.tile-add { aspect-ratio: 1; background: var(--white); border: 1.5px dashed var(--border); border-radius: var(--r-sm); font: 500 12px var(--font-body); color: var(--text-muted); cursor: pointer; }
.tile-add:hover { border-color: var(--teal); color: var(--teal); }

/* CSV drop zone (Buildium). */
.dropzone { border: 1.5px dashed var(--border); border-radius: var(--r-md); padding: 24px 16px; text-align: center; background: var(--surface); }
.dropzone.on { border-color: var(--teal); background: var(--teal-subtle); }
/* ===== end A: admin ===== */

/* ===== C: tenant-public ===== */
/* Tenant thread (Tenant Messages.dc.html): Solved speaks teal on the LEFT,
   the tenant answers in mist on the right; day separators are quiet captions;
   the composer is a pill input plus a round teal send button. */
.thread { display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.msg-day { align-self: center; font-size: var(--text-caption); color: var(--text-muted); }
.bubble { max-width: 80%; padding: 10px 14px; font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.bubble-solved { align-self: flex-start; background: var(--teal); color: var(--white); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-sm); }
.bubble-tenant { align-self: flex-end; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); }
.send-round {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; flex: none;
  background: var(--teal); color: var(--white);
  border: none; border-radius: 50%; cursor: pointer;
}
.send-round:hover { background: var(--teal-hover); }
/* ===== end C: tenant-public ===== */

/* ===== B: owner ===========================================================
   Owner surface vocabulary (Owner Home / Approvals / Documents / Request
   Detail .dc.html files): kicker labels, hairline row lists, pulse dots,
   the gold top line on cards that need the owner's eyes. */
.o-kicker { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.o-rows { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.o-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 12px 14px; text-decoration: none; color: inherit; border-top: 1px solid var(--border); }
.o-rows > .o-row:first-child { border-top: 0; }
a.o-row:hover { background: var(--surface); color: inherit; }
.o-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; }
.o-cap { font-size: var(--text-caption); color: var(--text-muted); }
.o-goldline { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold-gradient); }
.o-chev { width: 14px; height: 14px; flex: none; color: var(--border); }
/* ===== end B: owner ====================================================== */