/* ===== cht_prediction_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also the only
   route that styles the Anvil designer canvas.

   The root rule is a bare class, which is what
   outranks the scoped rules below; every other rule is
   :where(.cht-prediction-wrap), which adds zero specificity and so cannot
   change which rule wins.

   ORDER. care_home_tracker.css sorts FIRST among this section's five links and
   declares .cht-shell, .cht-grid, .cht-stack, .cht-header-block,
   .cht-page-title and .cht-page-subtitle. No name below is declared there or in
   any sibling cht_*.css, and this section declares no .px-* class at all, so no
   rule here is in an equal-specificity order tie that moving from a body
   <style> into <head> would now lose. No second class is needed anywhere.

   DESIGNER GATE: none. Nothing here hides anything until JavaScript runs.

   NO height: 100% ON THE ROOT. The card is sized by
   .cht-prediction-body { min-height: 420px }. This root sits in an <anvil-slot>
   dropzone that computes display: contents and generates no box, so its
   containing block is the shell's <section class="px-section-reveal"> - a
   STRETCHED grid item of .cht-grid. A percentage height would resolve, pin the
   card to the row height instead of its own minimum, let .cht-prediction-grid's
   margin-top: auto push the four stat tiles to a new bottom, and let
   overflow: hidden clip on a row shorter than the content. Equal-height cards
   ("Trend + Prediction side by side (equal height)", the shell template) are
   a one-line change and the owner's call. */

.cht-prediction-wrap {
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    box-shadow: var(--px-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

:where(.cht-prediction-wrap) .cht-prediction-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--px-border);
    font-family: var(--px-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--px-text-primary);
}

:where(.cht-prediction-wrap) .cht-prediction-body {
    padding: 1.5rem 1.25rem;
    flex: 1;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

:where(.cht-prediction-wrap) .cht-prediction-big {
    font-family: var(--px-font);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--px-text-primary);
    line-height: 1.1;
    margin-bottom: 0.375rem;
}

:where(.cht-prediction-wrap) .cht-prediction-sub {
    font-family: var(--px-font);
    font-size: 0.9rem;
    color: var(--px-text-muted);
    margin-bottom: 0;
}

:where(.cht-prediction-wrap) .cht-prediction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
    margin-top: auto;
}

:where(.cht-prediction-wrap) .cht-prediction-stat {
    background: var(--px-bg-elevated);
    border-radius: var(--px-radius-sm);
    padding: 1rem;
}

:where(.cht-prediction-wrap) .cht-prediction-stat-value {
    font-family: var(--px-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--px-text-primary);
}

:where(.cht-prediction-wrap) .cht-prediction-stat-label {
    font-family: var(--px-font);
    font-size: 0.75rem;
    color: var(--px-text-muted);
    margin-top: 0.2rem;
}

:where(.cht-prediction-wrap) .cht-prediction-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    color: var(--px-text-muted);
}

:where(.cht-prediction-wrap) .cht-prediction-locked-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

:where(.cht-prediction-wrap) .cht-prediction-locked-text {
    font-family: var(--px-font);
    font-size: 1rem;
    font-weight: 500;
}