/* ==========================================================================
   SURFACE REFRESH  --  "direction C", roadmap 9.4 gate.  08/29/2026 (R124)

   !! THIS FILE IS ON TRIAL. Scott picked direction C from three pictures on
   08/29/2026. This applies it to THREE ARCHETYPE PAGES ONLY so he can judge it
   on real screens before it goes near the other 65.

   !! EVERYTHING HERE IS SCOPED UNDER body.ds-c. Nothing in this file can reach
   a page that does not carry that class. layout() adds it for exactly three
   nav sections -- dashboard, residents, waitlist.

   !! TO REVERT: delete the <link> in applib/screening.py. That is the whole
   rollback. No edit to style.css or style-v2.css was made for this, on
   purpose -- a bulk stylesheet pass once broke 48 of 52 page captures.

   !! WHAT C IS: surfaces, borders, shadows, radii, spacing. ONE border colour,
   THREE shadow levels instead of 136, ONE radius scale, consistent padding.
   Reference points Scott named on 08/04/2026: Linear / Notion / Stripe.

   !! WHAT C IS NOT, AND MUST NEVER BECOME: a colour change. DESIGN-NOTES rule
   14 -- section colour is functional, not decoration. NOTHING in this file
   touches .kv-tone-*, .meta-bubble, .rp-band, a house colour, .side-tag-*,
   .rp-side-label, a status bubble, a rate chip or a section legend. Two
   mockups were thrown out for exactly that. Grep this file for those names:
   they appear only in this comment.
   ========================================================================== */

/* ---- The ground. One page colour, one card colour. --------------------- */
body.ds-c {
  background: var(--surface-2);
  background-attachment: fixed;
}

/* ---- Panels: hairline, one radius, one shadow. ------------------------- */
body.ds-c .panel {
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}
body.ds-c .panel:hover { box-shadow: var(--elev-1); border-color: var(--border-1); }

/* !! The hover lift is removed on purpose. A panel is not a button, and 
   88 panels lifting under the pointer is the busiest thing on these pages. */

/* ---- Panel headings: quieter rule, ink instead of teal. ---------------- */
body.ds-c .tab-heading { border-bottom: 1px solid var(--border-1); padding-bottom: var(--sp-3); }
body.ds-c .tab-heading-icon {
  background: var(--teal-50);
  color: var(--teal-700);
  border-radius: var(--r-sm);
  box-shadow: none;
}
body.ds-c .tab-heading-text { color: var(--teal-900); }
body.ds-c .panel > h2, body.ds-c .panel-heading-row h2 { color: var(--teal-900); }

/* ---- Tables: lighter separators, more room to breathe. ----------------- */
body.ds-c table.data-table td { border-bottom: 1px solid var(--teal-50); }
body.ds-c table.data-table th,
body.ds-c table.data-table td { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
body.ds-c table.house-table tbody tr:nth-child(even) { background: var(--surface-2); }
body.ds-c table.house-table tbody tr:hover { background: var(--teal-50); }

/* ---- Buttons: one radius, flat. --------------------------------------- */
/* !! The pill is what makes this read as an older interface. Everything
   Scott named as a reference -- Linear, Notion, Stripe -- uses a small
   radius. This is the single most visible thing in direction C. */
body.ds-c .button { border-radius: var(--r-sm); box-shadow: none; font-weight: 600; }
body.ds-c .button.ghost {
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  color: var(--teal-600);
}
body.ds-c .button.ghost:hover { background: var(--teal-100); color: var(--teal-700); }

/* ---- Chips and small controls: flat, bordered, no glow. ---------------- */
body.ds-c .stat-chip {
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  box-shadow: none;
}
/* 🆕 09/16/2026: the owner Dashboard's house figures (residents, occupancy,
   revenue) were UNREADABLE -- pale gold numbers and white words, colours
   written for the old dark teal chip, sitting on this flat white one. Dark
   ink on white now. The planned and waitlist chips set their own colours and
   are left alone. */
body.ds-c .house-panel:not(.planned-panel):not(.waitlist-panel) .house-panel-stats .stat-chip { color: var(--text-muted); }
body.ds-c .house-panel:not(.planned-panel):not(.waitlist-panel) .house-panel-stats .stat-chip strong { color: var(--teal-700); }
body.ds-c .icon-btn { border-radius: var(--r-sm); box-shadow: none; }

/* ---- Action cards: no lift, no glow, a real border. ------------------- */
body.ds-c a.action-card {
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
}
body.ds-c a.action-card:hover {
  transform: none;
  box-shadow: var(--elev-2);
  border-color: var(--teal-200);
}

/* ---- The top ribbon: solid, hairline, no blur. ------------------------ */
body.ds-c .topbar {
  background: var(--surface-0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--border-1);
}
body.ds-c .topbar::after { opacity: 1; height: 2px; }

/* !! The brand gradient hairline under the topbar is KEPT. It is the one
   piece of decoration on the page that is doing identity work. */