/* ===== active_care_home_tracker_html (HTML form, scoped) =====
   The Active Care Home Tracker shell's styling. Loaded eagerly from
   anvil.yaml native_deps.head_html, which is what styles the designer canvas
   as well as the running app.

   THIS FILE SORTS FIRST AMONG THE FIVE CARE-HOME LINKS (care_home_tracker.css
   before every cht_*.css, because a sorts before h), so the shell's rules come
   first in document order.

   NO SUCH TIE EXISTS, and that was checked name by name rather than assumed.
   This file declares .cht-shell, .cht-grid, .cht-stack and the three header
   names (.cht-header-block, .cht-page-title, .cht-page-subtitle). The four
   child assets declare
   .cht-trend-*, .cht-prediction-*, .cht-summary-*, .cht-card-*, .cht-back-*,
   .cht-rank-*, .cht-portal-*, .cht-bar*, .cht-never-*. No name is declared on
   both sides, so no child rule changes which declaration wins. The --accent*
   tokens reach the children by inheritance, not by cascade. A future child rule
   that must beat a shell rule takes a second class, never a moved link line.

   This section declares no .px-* class at all, so the other tie the guide warns
   about - a head link against the dependency theme the runtime appends after
   every head link - does not arise here. Do not create one.

   ROOT RULE, BARE CLASS, ON ITS OWN LINE, so it outranks the :where()-scoped
   rules below and so the dark restatement stays readable as
   [data-theme="dark"] .cht-shell {.

   THE ROOT RULE DROPS NOTHING IT DECLARED AND GAINS flex: 1 0 auto. The root is
   a flex item inside the shared layout's scroller, .px-nav-content, which owns
   the vertical scroll. There was never an overflow in this CSS; the one a
   helper wrote onto #cht-shell at runtime went with chtSuppressScroll and
   chtRestoreScroll (deviation D1). If a child ever overflows horizontally the
   fix is overflow-x: clip on that child, never on this root.

   min-height: 100vh IS KEPT BYTE FOR BYTE. The port is the layout's
   --px-nav-content-height, so the screen overflows it by the layout's own
   padding, exactly as it does today, and below 980px by the top bar as well.
   Changing that is a visible change and is the owner's call, so it is
   recorded rather than taken here.

   [data-theme="dark"] SITS ON <html>, an ancestor of every form root, so the
   dark rule below is never wrapped in :where(): a scoped
   :where(.cht-shell) [data-theme="dark"] would need a themed element inside the
   shell and could never match.

   NO DESIGNER GATE IS NEEDED. The only rule that hides content until the
   JavaScript runs is .px-section-reveal { opacity: 0 }, and that lives in the
   dependency chrome CSS, which ensure_theme_injected() appends to the head at
   runtime and which is therefore absent from the designer canvas. Nothing in
   this file hides anything.

   There are no @keyframes, no url() and no takeover rules in this section. */

/* =============================================
   CARE HOME TRACKER - ACCENT & LAYOUT
   ============================================= */
.cht-shell {
    --accent: #e11d48;
    --accent-hover: #be123c;
    --accent-subtle: rgba(225, 29, 72, 0.10);
    --accent-text: #ffffff;
    --accent-rgb: 225, 29, 72;
    --px-loading-accent: #e11d48;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex: 1 0 auto;
    padding: 20px;
    gap: 18px;
    position: relative;
    background-color: #f1f5f9;
    background-image:
      radial-gradient(circle at top left, rgba(225, 29, 72, 0.10), transparent 40%),
      linear-gradient(180deg, #fff1f2 0%, #f1f5f9 100%);
}

@media not print {
[data-theme="dark"] .cht-shell {
    --accent: #f43f5e;
    --accent-hover: #fb7185;
    --accent-subtle: rgba(244, 63, 94, 0.14);
    --accent-text: #0f172a;
    --accent-rgb: 244, 63, 94;
    --px-loading-accent: #f43f5e;
    background-color: #0f172a;
    background-image:
      radial-gradient(circle at top left, rgba(244, 63, 94, 0.18), transparent 28%),
      linear-gradient(180deg, #3a0f20 0%, #0f172a 100%);
}
}

/* =============================================
   HEADER BLOCK
   The three rules below carry the declarations that were inline style
   attributes on the template, which the new format forbids.
   ============================================= */
:where(.cht-shell) .cht-header-block {
    margin-bottom: -2px;
}

:where(.cht-shell) .cht-page-title {
    font-family: var(--px-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--px-text-primary);
    margin: 0;
}

:where(.cht-shell) .cht-page-subtitle {
    font-family: var(--px-font);
    font-size: 0.85rem;
    color: var(--px-text-muted);
    margin: 0;
}

/* =============================================
   TWO-COLUMN GRID
   align-items: stretch was an inline style attribute on the one .cht-grid
   element that carries the trend and prediction cards; there is exactly one
   .cht-grid in this template, so declaring it on the rule is equivalent, and
   the media query below overrides grid-template-columns alone.
   ============================================= */
:where(.cht-shell) .cht-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
    gap: 18px;
    align-items: stretch;
}

/* .cht-stack is dead - no element in this section carries it, checked
   repo-wide. */
:where(.cht-shell) .cht-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 960px) {
    :where(.cht-shell) .cht-grid {
        grid-template-columns: 1fr;
    }
}