/* ==========================================================================
   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 th {
  border-bottom: 1px solid var(--border-1);
  color: var(--teal-900);
  opacity: 0.55;
}
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;
}
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. */

/* ---- Respect the setting, as everything here should. ------------------ */
@media (prefers-reduced-motion: reduce) {
  body.ds-c a.action-card, body.ds-c .panel { transition: none; }
}