/* ============================================================================
   Casa Hub — shared design system
   One stylesheet for the shell and every tool that plugs into it.

   COLOUR comes from the Casa Dental Group Brand Identity System (Drift, 2026),
   "Aubergine chrome": the brand lives in the furniture — a deep aubergine nav,
   #6D0D7D on anything clickable — and the working area stays a quiet near-white
   so a table is still comfortable to read at eight in the morning.

     #24002A  the group aubergine — nav, headings
     #380241  its deeper step — nav in dark mode
     #6D0D7D  the action colour: buttons, links, active states
     #E28FEF  its dark-mode counterpart (6D0D7D is too dark on a dark plane)
     #F5D3FF  brand light lilac — type and the mark on the aubergine bar
     #FCEBFF  the softer step from the document house style — UI washes
     #09715F  brand deep green — "good"
     #FF845E  brand coral — "at risk"

   TYPE is Figtree, which the guidelines name as the face for digital
   interfaces. Loaded from Google Fonts with a full system fallback stack, so
   the hub still sets correctly if the font request fails.

   Two colours are NOT from the brand: --warning and --critical. The palette
   has no amber and no alarm red — its nearest, #5E1E3E plum, sits too close to
   the aubergine to read as a warning. Both are held one step warmer than the
   old teal-era values so they sit with the purple.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;

  --plane:        #f5f5f7;   /* page background — soft light grey */
  --surface:      #ffffff;   /* cards, chart surfaces */
  --surface-2:    #fafafb;   /* insets, table stripes */
  --surface-3:    #ededf1;   /* hover wash */

  --ink:          #14161a;
  --ink-2:        #4c5158;
  --muted:        #7c828b;

  --line:         #e3e3e8;
  --line-strong:  #c8c9d0;
  --ring:         rgba(20, 22, 26, 0.10);

  --accent:       #6D0D7D;
  --accent-ink:   #ffffff;
  --accent-wash:  #FCEBFF;

  /* The brand bar. Its own set, so the chrome can be dark while the page
     stays light — and so a tool never has to know how the nav is painted. */
  --nav:          #24002A;
  --nav-ink:      #F5D3FF;
  --nav-ink-2:    rgba(245, 211, 255, 0.66);
  --nav-on:       rgba(245, 211, 255, 0.15);
  --nav-hover:    rgba(245, 211, 255, 0.09);
  --nav-line:     rgba(245, 211, 255, 0.14);

  /* Categorical — validated adjacent-pair CVD + normal-vision separation
     against this surface. Assign in fixed order; never cycle past slot 3
     in an all-pairs form (scatter/bubble) — fold to "Other" instead. */
  --series-1:     #2a78d6;
  --series-2:     #eb6834;
  --series-3:     #1baf7a;

  /* Status — reserved. Never reused as a series colour, and never used
     without an icon + label beside it. */
  --good:         #09715F;   /* brand deep green */
  --warning:      #E09B1F;   /* not in the palette — see the note at the top */
  --serious:      #FF845E;   /* brand coral */
  --critical:     #C32F4B;   /* not in the palette — see the note at the top */
  --good-ink:     #09715F;   /* already dark enough to set as text */

  /* ---------------------------------------------------------------- shape --
     Four radii, each with a job. The audit of 28 Sep found SIXTEEN in use
     across the twelve tool pages — 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,
     14, 16, 20 and fully round — with 5, 6, 7, 8, 9 and 10 all appearing
     dozens of times on the same kinds of object. That, more than anything
     else, is why two pages read as two products.

       --r-sm    inputs, small marks, table cells
       --r       buttons and controls
       --r-lg    cards, panels, modals
       --r-pill  chips and anything fully round

     --radius and --radius-lg are kept as aliases so every rule already
     written against them picks the new values up without being touched. */
  --r-sm:         4px;
  --r:            8px;
  --r-lg:         12px;
  --r-pill:       999px;
  --radius:       var(--r);
  --radius-lg:    var(--r-lg);

  /* ----------------------------------------------------------------- type --
     Five steps. The same audit found fourteen sizes in page CSS, including
     10.5, 11.5, 12.5 and 13.5 — half-pixel steps nobody chooses on purpose
     across five files. --t-fig is the sixth, and only for a display figure
     on a stat tile. */
  --t-cap:        11px;   /* eyebrows, chip text, axis labels */
  --t-sm:         13px;   /* secondary text, table body, meta lines */
  --t-body:       15px;   /* running text and form controls */
  --t-head:       19px;   /* card and section headings */
  --t-title:      26px;   /* the page title, once per page */
  --t-fig:        26px;   /* a stat tile's number */

  --shadow:       0 1px 2px rgba(20, 22, 26, .05), 0 6px 18px rgba(20, 22, 26, .06);
  --font:         "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:       #101012;
    --surface:     #1a1a1e;
    --surface-2:   #202026;
    --surface-3:   #2a2a31;
    --ink:         #ffffff;
    --ink-2:       #c6c7cd;
    --muted:       #91939c;
    --line:        #2e2e35;
    --line-strong: #43434d;
    --ring:        rgba(255, 255, 255, 0.10);
    --accent:      #E28FEF;
    --accent-ink:  #24002A;
    --accent-wash: #3a0b42;
    --nav:         #1a0020;
    --nav-ink:     #F5D3FF;
    --nav-ink-2:   rgba(245, 211, 255, 0.62);
    --nav-on:      #380241;
    --nav-hover:   rgba(245, 211, 255, 0.08);
    --nav-line:    #3a1642;
    --series-1:    #3987e5;
    --series-2:    #d95926;
    --series-3:    #199e70;
    --good:        #57DB89;   /* the deep green disappears on a dark plane */
    --good-ink:    #57DB89;
    --serious:     #FF9B9E;
    --critical:    #E85C77;
    --shadow:      0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:       #101012;
  --surface:     #1a1a1e;
  --surface-2:   #202026;
  --surface-3:   #2a2a31;
  --ink:         #ffffff;
  --ink-2:       #c6c7cd;
  --muted:       #91939c;
  --line:        #2e2e35;
  --line-strong: #43434d;
  --ring:        rgba(255, 255, 255, 0.10);
  --accent:      #E28FEF;
  --accent-ink:  #24002A;
  --accent-wash: #3a0b42;
  --nav:         #1a0020;
  --nav-ink:     #F5D3FF;
  --nav-ink-2:   rgba(245, 211, 255, 0.62);
  --nav-on:      #380241;
  --nav-hover:   rgba(245, 211, 255, 0.08);
  --nav-line:    #3a1642;
  --series-1:    #3987e5;
  --series-2:    #d95926;
  --series-3:    #199e70;
  --good:        #57DB89;
  --good-ink:    #57DB89;
  --serious:     #FF9B9E;
  --critical:    #E85C77;
  --shadow:      0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only `display:none` in the UA stylesheet, so any
   author rule that sets display (.casa-field is flex, .casa-links is flex)
   silently beats it and the "hidden" element stays on screen. Restate it here
   so `el.hidden = true` means hidden everywhere. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--plane);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--accent); }

/* ---------------------------------------------------------------- shell --- */

.casa-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 56px;
  background: var(--nav);
  border-bottom: 1px solid var(--nav-line);
}

.casa-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: var(--t-body);
  letter-spacing: -0.01em;
  color: var(--nav-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ mark -- */
/* The Casa monogram. Served as one SVG and painted through a CSS mask rather
   than an <img>, so it takes `currentColor` — accent in the nav, ink on the
   sign-in card, white on a dark plane — and needs no second file for dark
   mode. The glyph is a hairline, so it is never asked to work below ~26px;
   the SVG carries a small baked stroke to hold it together at nav size. */

.casa-mark {
  display: block;
  width: calc(var(--mark-size, 30px) * 0.814);  /* 542 / 666 */
  height: var(--mark-size, 30px);
  flex: none;
  background-color: currentColor;
  -webkit-mask: url('/assets/casa-mark.svg') no-repeat center / contain;
          mask: url('/assets/casa-mark.svg') no-repeat center / contain;
}
.casa-mark.lg { --mark-size: 76px; }
.casa-mark.xl { --mark-size: 108px; }

/* On the aubergine bar the mark is the brand lilac, which is how the identity
   sets it. Everywhere else — the sign-in card, an empty state — it takes the
   colour of whatever it sits in, as before. */
.casa-brand .casa-mark { color: var(--nav-ink); }

.casa-links {
  display: flex;
  align-items: center;
  gap: 2px;
  /* 0 0 auto, not 0 1 auto: when the strip is allowed to shrink it does not
     hide anything, it just lets its own children overlap whatever comes next.
     Holding its natural width makes the squeeze visible as page overflow,
     which is what the breakpoint below is set from. */
  flex: 0 0 auto;
  min-width: 0;
  margin-right: auto;
  /* NOT overflow-x:auto, which is what it was when thirteen tabs had to fit
     in one row. A scroll container clips anything positioned outside it, and
     the group panels hang below the bar — they came out invisible. Six
     headings fit without scrolling, which is the point of grouping them. */
  overflow: visible;
  padding-right: 4px;
}

.casa-link {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: var(--t-sm);
  color: var(--nav-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.casa-link:hover { background: var(--nav-hover); color: var(--nav-ink); }
.casa-link[aria-current="page"] {
  background: var(--nav-on);
  color: var(--nav-ink);
  font-weight: 600;
}

/* ------------------------------------------------------- grouped menu -- */
/* A heading with its pages under it. The panel is positioned against the bar
   rather than the button so it cannot be clipped by .casa-links' own
   horizontal scroll — which is what a dropdown inside an overflow:auto strip
   does otherwise. */
.casa-grp { position: relative; display: flex; }
.casa-grp-btn {
  /* `font: inherit` resets size too, and because this rule sits after
     .casa-link it was winning — so the headings came out at body size while
     the single-page links beside them stayed at --t-sm. Both are --t-sm. */
  font: inherit;
  font-size: var(--t-sm);
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
}
.casa-grp-btn svg { opacity: .7; transition: transform .14s ease; }
.casa-grp-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.casa-grp-btn[aria-expanded="true"] { background: var(--nav-hover); color: var(--nav-ink); }
/* the heading of the section you are currently inside */
.casa-grp-btn[data-here="1"] {
  background: var(--nav-on); color: var(--nav-ink); font-weight: 600;
}
.casa-grp-panel {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  padding: 5px;
  display: flex; flex-direction: column; gap: 1px;
  z-index: 60;
}
.casa-grp-panel[hidden] { display: none; }
.casa-sublink {
  padding: 7px 11px;
  border-radius: 7px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.casa-sublink:hover { background: var(--surface-2); color: var(--ink); }
.casa-sublink[aria-current="page"] {
  background: var(--accent-wash); color: var(--accent); font-weight: 620;
}

.casa-user { flex: none; }
.casa-user-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 4px 4px; border-radius: var(--r-pill);
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--nav-ink-2); white-space: nowrap;
}
.casa-user-btn:hover,
.casa-user-btn[aria-expanded="true"] { background: var(--nav-hover); }
.casa-acct-panel { left: auto; right: 0; min-width: 210px; }
.casa-acct-who {
  padding: 8px 11px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1px;
  font-size: var(--t-cap); color: var(--muted);
}
.casa-acct-who strong { font-size: var(--t-sm); color: var(--ink); font-weight: 650; }
.casa-sublink.casa-signout {
  font: inherit; font-size: var(--t-sm); text-align: left; width: 100%;
  background: none; border: 0; cursor: pointer; color: var(--ink-2);
}

.casa-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: var(--t-cap); font-weight: 650;
}
/* Inside the bar it has to read against aubergine, not against the page. */
.casa-nav .casa-avatar { background: var(--nav-on); color: var(--nav-ink); }

.casa-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.casa-user-name { font-size: var(--t-sm); font-weight: 600; }
.casa-user-role { font-size: var(--t-cap); color: var(--muted); }
.casa-nav .casa-user-name { color: var(--nav-ink); }
.casa-nav .casa-user-role { color: var(--nav-ink-2); }

.casa-nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  color: var(--nav-ink-2); padding: 6px; border-radius: 8px;
}
.casa-nav-toggle:hover { color: var(--nav-ink); background: var(--nav-hover); }

/* Between the two: the name and role go first, then Staff & access leaves the
   account block and joins the menu, because the menu has room and the bar has
   not. */
@media (max-width: 1180px) {
  .casa-nav { gap: 14px; }
  /* The avatar alone, with the name inside the menu it opens. */
  .casa-user-meta { display: none; }
}

/* The bar needs about 1000px for six headings plus the account block. Below
   that the whole menu goes behind the toggle rather than overlapping itself —
   which is what it did at 900px while the breakpoint was still the 640 it had
   when the menu was one flat scrolling strip. */
@media (max-width: 1000px) {
  .casa-nav-toggle { display: block; }
  .casa-links {
    position: absolute;
    top: 56px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--nav);
    border-bottom: 1px solid var(--nav-line);
    padding: 8px;
    gap: 2px;
    overflow: visible;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .casa-links[hidden] { display: none; }
  /* On a phone there is nothing to drop a menu down over, and tapping twice
     to reach a page is a tax. Every group is simply open, its heading a
     label above its pages. */
  .casa-grp:not(.casa-user) { display: block; }
  .casa-grp:not(.casa-user) > .casa-grp-btn { display: none; }
  /* the account menu keeps working as a dropdown — it is in the bar, not in
     the collapsible strip */
  .casa-user .casa-grp-panel[hidden] { display: none !important; }
  .casa-user .casa-grp-panel { position: absolute; background: var(--surface);
    border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.16);
    padding: 5px; min-width: 210px; }
  .casa-user::before { content: none; }
  /* !important because line 182 sets [hidden] { display:none !important } for
     the whole hub, and on a phone these panels are deliberately always open —
     the button that would toggle them is not drawn. */
  .casa-grp-panel,
  .casa-grp-panel[hidden] {
    display: flex !important;
    position: static;
    border: 0; box-shadow: none; background: none;
    padding: 0; min-width: 0;
  }
  .casa-grp::before {
    content: attr(data-group);
    display: block;
    padding: 10px 11px 3px;
    font-size: var(--t-cap); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--nav-ink-2);
  }
  .casa-sublink { color: var(--nav-ink-2); }
  .casa-sublink:hover { background: var(--nav-hover); color: var(--nav-ink); }
  .casa-sublink[aria-current="page"] { background: var(--nav-on); color: var(--nav-ink); }
}

/* ---------------------------------------------------------------- layout -- */

.casa-page { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }
/* Nothing uses this. Every tool is 1180px so a manager moving between them
   sees the same column of content in the same place. Kept only because the
   rota's seven-day grid may one day need the room -- not for a page that
   merely has a wide table, which belongs in .casa-table-wrap instead. */
.casa-page.wide { max-width: 1480px; }

/* ------------------------------------------------------- the page header -- */
/* Every tool opens the same way, so that moving between them feels like moving
   between screens of one product rather than between five separate sites:
   title on the left at 22px, optional one-line subtitle under it, controls
   pushed to the right on the same baseline. Tools previously had their own
   coloured banner here — a purple one, a violet one, a dark teal one — which
   is what made the hub read as a launcher for five things. */

.casa-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
/* The mark sits beside the page name on every page, drawn here rather than
   written into twelve files. A grid, not a flex row: the title's siblings (a
   scope line, a permissions note) stay stacked under the title in column two
   while the mark spans the whole block in column one, so a page with one line
   and a page with three both centre correctly against it.

   It is a ::before, so no page needs markup for it and none can end up with
   the mark at its own size -- which is how Home, Private Growth and Weekly
   Performance came to carry three different copies at 44, 48 and 42px. */
.casa-page-head > .casa-head-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
}
.casa-page-head > .casa-head-main::before {
  content: '';
  grid-row: 1 / -1;
  grid-column: 1;
  width: calc(var(--head-mark, 36px) * 0.814);
  height: var(--head-mark, 36px);
  background-color: var(--accent);
  -webkit-mask: url('/assets/casa-mark.svg') no-repeat center / contain;
          mask: url('/assets/casa-mark.svg') no-repeat center / contain;
}
.casa-page-head > .casa-head-main > * { grid-column: 2; min-width: 0; }
/* The glyph is a hairline and stops holding together much below this. */
@media (max-width: 480px) {
  .casa-page-head > .casa-head-main { --head-mark: 30px; column-gap: 10px; }
}
.casa-page-head .casa-head-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-left: auto;
}

.casa-h1 { font-size: var(--t-title); font-weight: 650; margin: 0; letter-spacing: -0.01em; }
.casa-sub { color: var(--ink-2); font-size: var(--t-body); margin: 0; }
/* The line that says what YOU can see on this page -- your practices, whether
   you may edit. It used to sit under the title inside the header, which made
   every page's heading two lines deep and different heights depending on the
   reader's role. It now sits just below the header: same information, but the
   heading is the mark and the page name and nothing else, on every page. */
.casa-scope {
  color: var(--ink-2); font-size: var(--t-sm);
  margin: -14px 0 20px; max-width: 78ch;
}
.casa-scope:empty { display: none; margin: 0; }
.casa-scope strong { color: var(--ink); font-weight: 620; }

.casa-eyebrow {
  font-size: var(--t-cap); font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 5px;
}

/* ------------------------------------------------------------------ tabs -- */
/* Four of the five tools had their own tab strip, each a different colour and
   size. One definition now, so the underline sits in the same place on every
   page. */

.casa-tabs {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.casa-tabs::-webkit-scrollbar { display: none; }
.casa-tabs button, .casa-tabs .casa-tab {
  font: inherit; font-size: var(--t-sm); font-weight: 560;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-2); white-space: nowrap;
  padding: 9px 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.casa-tabs button:hover, .casa-tabs .casa-tab:hover { color: var(--ink); }
.casa-tabs button.active, .casa-tabs [aria-selected="true"] {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 620;
}

.casa-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 32px 0 12px;
}
.casa-h2 { font-size: var(--t-sm); font-weight: 650; margin: 0; color: var(--muted);
           text-transform: uppercase; letter-spacing: .06em; }

.casa-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.casa-grid { display: grid; gap: 14px; }
/* 268px was sized for a card carrying a paragraph. The home page now shows the
   icon and the name only, so a card is one line tall and wants to be narrower —
   otherwise eleven of them sit in two sparse rows of very wide boxes. */
.casa-grid-tools { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); }
.casa-grid-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ------------------------------------------------------------ stat tiles -- */
/* label · value · delta — value uses proportional figures at display size;
   tabular-nums is reserved for table columns that must align. */

.casa-stat { padding: 15px 16px 16px; }
.casa-stat-label {
  font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 6px;
  display: flex; align-items: center; gap: 6px;
}
.casa-stat-value { font-size: var(--t-fig); font-weight: 640; letter-spacing: -0.02em; line-height: 1.1; }
.casa-stat-value.is-empty { color: var(--muted); font-size: var(--t-body); font-weight: 500; letter-spacing: 0; }
.casa-stat-delta { font-size: var(--t-sm); color: var(--ink-2); margin-top: 5px; }
.casa-stat-delta.up   { color: var(--good-ink); }
.casa-stat-delta.down { color: var(--critical); }

.casa-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ------------------------------------------------------------ tool tiles -- */

.casa-tool {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s;
}
.casa-tool:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.casa-tool:hover .casa-tool-icon { background: var(--accent-wash); color: var(--accent); }

/* The whole card is one row now, so the name may wrap to two lines on a long
   one ("Weekly Performance") without the icon drifting off centre. */
.casa-tool-top { display: flex; align-items: center; gap: 10px; }
.casa-tool-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 17px; /* glyph, not text */
  background: var(--surface-3);
}
.casa-tool-name { font-size: var(--t-body); font-weight: 620; }
.casa-tool-desc { font-size: var(--t-sm); color: var(--ink-2); margin: 0; flex: 1; }
.casa-tool-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* Every tool is "pending" until it is migrated, so this state is the whole
   Tools section for a while. Keep it clearly inactive but still readable —
   at .55 the descriptions were too faint to scan. */
.casa-tool.is-locked { opacity: .72; pointer-events: none; }

/* ----------------------------------------------------------------- bits --- */

.casa-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-cap); font-weight: 600; padding: 2.5px 8px;
  border-radius: 999px; background: var(--surface-3); color: var(--ink-2);
  white-space: nowrap;
}
.casa-badge.live    { background: var(--accent-wash); color: var(--accent); }
.casa-badge.pending { background: var(--surface-3);   color: var(--muted); }

/* ---------------------------------------------------------------- footer -- */
/* Quiet on purpose: it is a fact about the page, not part of the page. */
.casa-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 7px;
  padding: 20px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  font-size: var(--t-cap); color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.casa-foot-sep { opacity: .5; }
.casa-foot-v {
  font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 99px;
  background: var(--accent-wash); color: var(--accent); font-weight: 600;
}

.casa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: var(--t-sm); font-weight: 560;
  padding: 8px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
}
.casa-btn:hover { background: var(--surface-3); }
.casa-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.casa-btn.primary:hover { filter: brightness(1.08); }
.casa-btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.casa-btn.ghost:hover { background: var(--surface-3); color: var(--ink); }
/* Sign out is a ghost button sitting on the aubergine bar, so it has to take
   the bar's colours rather than the page's — otherwise it is grey on purple
   and all but invisible. */
.casa-nav .casa-btn.ghost { color: var(--nav-ink-2); }
.casa-nav .casa-btn.ghost:hover { background: var(--nav-hover); color: var(--nav-ink); }
.casa-btn:disabled { opacity: .5; cursor: not-allowed; }
.casa-btn.sm { padding: 5px 10px; font-size: var(--t-cap); }

.casa-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.casa-field label { font-size: var(--t-sm); font-weight: 560; color: var(--ink-2); }
.casa-input, .casa-select {
  font: inherit; font-size: var(--t-body);
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  width: 100%;
}
.casa-input:focus, .casa-select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}

.casa-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.casa-table th {
  text-align: left; font-size: var(--t-cap); font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.casa-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.casa-table tbody tr:last-child td { border-bottom: 0; }
.casa-table tbody tr:hover { background: var(--surface-2); }
.casa-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.casa-table-wrap { overflow-x: auto; position: relative; }

.casa-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-2);
}
.casa-note strong { color: var(--ink); font-weight: 620; }
/* The flex above is for the icon-plus-text form, where the note has exactly two
   children. A note that is just a sentence with some <strong> in it has many
   inline children, and flex lays every one of them out as its own column —
   which is how a footnote ends up reading down the page in stripes. `.plain`
   is that second form. */
.casa-note.plain { display: block; }

.casa-empty { padding: 34px 20px; text-align: center; color: var(--muted); font-size: var(--t-sm); }

.casa-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--plane);
  padding: 10px 18px; border-radius: 999px; font-size: var(--t-sm);
  box-shadow: var(--shadow); z-index: 200;
}

.casa-splash {
  min-height: 100dvh; display: grid; place-items: center;
  color: var(--muted); font-size: var(--t-body);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  /* Without this the element keeps its static position, which on a table that
     scrolls sideways sits past the right edge and drags the whole page's
     scroll width with it. Staff & access scrolled horizontally on a phone for
     exactly this reason. */
  margin: -1px; left: 0;
}

@media print {
  .casa-nav, .casa-btn, .casa-toast, .casa-foot { display: none !important; }
  body { background: #fff; }
  .casa-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ==========================================================================
   SHARED COMPONENTS
   Added 28 Sep 2026, after the layout audit.

   Every one of these existed already — four or five times over, under four or
   five names, with different numbers. A chip was .tag in the Library, .pill in
   Compliance, .chip on the Rota, .pick in Staff & access and .badge in Private
   Growth. A modal header was .m-h on six pages and .modal-head on two. The
   filter row above a table had four names and four arrangements.

   The point is not the names. It is that a value defined once cannot drift,
   and twelve copies always do. Pages keep their own CSS for whatever is
   genuinely theirs — the rota grid, the Gantt, the document rail — and take
   the rest from here.
   ========================================================================== */

/* ------------------------------------------------------------------ chip --
   One shape, graded by weight rather than by hue, so a chip never competes
   with the status colours beside it. */
.casa-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-cap); font-weight: 600; line-height: 1.5;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2);
  white-space: nowrap; border: 0;
}
.casa-chip.quiet    { background: transparent; color: var(--muted); padding-inline: 0; }
.casa-chip.accent   { background: var(--accent-wash); color: var(--accent); }
.casa-chip.solid    { background: var(--accent); color: var(--accent-ink); }
.casa-chip.outline  { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }
/* Status chips carry a dot, never colour alone. */
.casa-chip .casa-dot { width: 7px; height: 7px; background: currentColor; }
.casa-chip.good     { background: var(--surface-3); color: var(--good-ink); }
.casa-chip.warning  { background: var(--surface-3); color: var(--warning); }
.casa-chip.serious  { background: var(--surface-3); color: var(--serious); }
.casa-chip.critical { background: var(--surface-3); color: var(--critical); }

/* A chip that is also a control — the tick-box pills in Staff & access and
   the practice pickers in the forms. */
.casa-pick {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); cursor: pointer; user-select: none;
}
.casa-pick input { accent-color: var(--accent); margin: 0; }
.casa-pick.on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.casa-pick-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ----------------------------------------------------------------- modal --
   Two widths, by what is inside: a confirmation or a short form, or a full
   record editor. Five were in use — 560, 620, 720 and 760 for the same kind
   of dialog opened from different tabs. */
.casa-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11, 20, 22, .5);
}
.casa-modal {
  position: fixed; z-index: 101; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.casa-modal.lg { width: min(720px, calc(100vw - 32px)); }
.casa-modal-head, .casa-modal-foot { padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
.casa-modal-head { border-bottom: 1px solid var(--line); }
.casa-modal-foot { border-top: 1px solid var(--line); justify-content: flex-end; flex-wrap: wrap; }
.casa-modal-head h3 { margin: 0; font-size: var(--t-body); font-weight: 640; flex: 1; }
.casa-modal-body { padding: 18px; overflow-y: auto; }
.casa-modal-x {
  background: none; border: 0; font-size: 22px; /* glyph, not text */ line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.casa-modal-x:hover { color: var(--ink); }

/* --------------------------------------------------------------- filters --
   Search first, then dropdowns, then toggles — same order and same heights on
   every tool, directly under the heading. Four arrangements were in use. */
.casa-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px;
}
.casa-filters .casa-field { margin-bottom: 0; }
.casa-filters .casa-input, .casa-filters .casa-select { min-width: 170px; }
.casa-filters .grow { flex: 1 1 220px; min-width: 200px; }
.casa-filters .grow .casa-input { width: 100%; }
.casa-filters .spacer { flex: 1 1 auto; }

/* ----------------------------------------------------------------- stats --
   One grid. Six different minimum widths were in use (160 to 200px), which is
   why tile rows broke to a new line in different places on different pages. */
.casa-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 18px;
}
/* At 170px the tiles go to one column on a phone, and four of them stacked
   put half a screen of figures between the heading and the thing you came
   for. Two-up keeps them glanceable and gets the content back up the page. */
@media (max-width: 560px) {
  .casa-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .casa-stats .casa-stat { padding: 11px 12px; }
}

/* --------------------------------------------------------- form grouping --
   A pair or a trio of fields on one line, and a named group of them. */
.casa-fgrid { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
.casa-fgrid.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .casa-fgrid, .casa-fgrid.three { grid-template-columns: 1fr; } }
.casa-fieldset {
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 0 0 14px;
}
.casa-fieldset > h4 {
  margin: 0 0 10px; font-size: var(--t-cap); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------------ card heads --
   A heading line inside a card, with room for a count or a control. */
.casa-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 15px 18px 0;
}
.casa-card-note { font-size: var(--t-sm); color: var(--muted); }