/*
 * hearth.css — shared stylesheet for all Hearth pages.
 *
 * Provides CSS custom properties (design tokens), navbar, card,
 * button, table, and badge components consistent with the dashboard.
 * Pages include this after Bootstrap 5.3 to benefit from the cascade.
 */

/* -----------------------------------------------------------------------
   Design tokens
   ----------------------------------------------------------------------- */
:root {
    /* Core brand palette */
    --h-navy:          #233D4D;
    --h-navy-light:    #2D5068;
    --h-accent:        #FE5F55;
    --h-accent-light:  #FF7B73;

    /* Extended brand tokens */
    --h-brand-coral:   #FE5F55;
    --h-brand-blue:    #4A8FE7;
    --h-brand-teal:    #17BEBB;
    --h-brand-green:   #23CE6B;
    --h-brand-yellow:  #FEE440;
    --h-brand-purple:  #7B4B94;

    /* Surfaces */
    --h-bg:            #FFF8F5;
    --h-surface-bg:    #f8fafc;
    --h-surface:       #ffffff;
    --h-border:        #e5e7eb;
    --h-text:          #1f2937;
    --h-muted:         #6b7280;
    --h-warm-bg:       #fff4ee;
    --h-warm-border:   #f0d9cc;
    --h-muted-bg:      #f0f0ee;

    /* Semantic feedback colours */
    --h-success:       #4c9a7a;
    --h-success-bg:    #f0f7f4;
    --h-warning:       #c09050;
    --h-warning-bg:    #fdf6ea;
    --h-attention:     #c06c6c;
    --h-attention-bg:  #faf0f0;
    --h-attention-light: #d07070;
}

/* -----------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------- */
body {
    background-color: var(--h-surface-bg);
    color: var(--h-text);
}

/* -----------------------------------------------------------------------
   Global anchor defaults — scoped to Hearth pages.
   Sets navy colour and removes underline on plain anchors that do not
   carry a Bootstrap or Hearth class override. Preserves:
     .btn, .btn-*, .nav-link  — Bootstrap interactive controls
     .hearth-brand, .navbar-brand — logo links
     .hearth-back-link, .hearth-entry-title-link, .hearth-child-tag,
     .hearth-accent-link, .hearth-pill, .hearth-inline-link,
     .hearth-table-row-link    — named Hearth link classes (all self-define colour)
   This rule catches any remaining plain <a> elements that would otherwise
   fall through to the browser's default blue.
   ----------------------------------------------------------------------- */
body a:not([class]),
body a[class=""] {
    color: var(--h-navy);
    text-decoration: none;
}
body a:not([class]):hover,
body a:not([class]):focus,
body a[class=""]:hover,
body a[class=""]:focus {
    color: var(--h-accent);
    text-decoration: none;
}

/* -----------------------------------------------------------------------
   Navbar
   ----------------------------------------------------------------------- */
.hearth-navbar {
    background-color: var(--h-surface);
    border-bottom: 1px solid var(--h-border);
}
.hearth-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--h-navy);
    letter-spacing: -0.3px;
}
.hearth-brand-accent {
    color: var(--h-accent);
}

/* -----------------------------------------------------------------------
   Role badge inside navbar
   ----------------------------------------------------------------------- */
.hearth-role-badge {
    font-size: 0.68rem;
    background-color: var(--h-navy);
}

/* -----------------------------------------------------------------------
   Cards
   ----------------------------------------------------------------------- */
.hearth-card {
    border: 1px solid var(--h-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    background: var(--h-surface);
    transition: box-shadow 0.2s ease;
}
.hearth-card:hover {
    box-shadow: 0 4px 16px rgba(35, 61, 77, 0.1);
}

/* -----------------------------------------------------------------------
   Buttons — 5-level hierarchy  (Sheen Lift system)
   Button Action Profiles v1 (semantic aliases in parentheses):
   1. action-open     (.btn-hearth)           — navy;  primary object access:
                      (.btn-action-open)         View Child, View Profile, Open Report
   2. action-commit   (.btn-hearth-secondary) — coral; create, add, save, finalise,
                      (.btn-action-commit)       generate, upload, submit
   3. action-change   (.btn-hearth-outline)   — beige; edit, configure, adjust,
                      (.btn-action-change)       modify existing records
   4. action-danger   (.btn-hearth-danger)    — red;   delete, remove, discard
                      (.btn-action-danger)
   5. Disabled  (:disabled / .disabled) — reduced opacity, no interaction

   Primary object access rule: opening the main trusted view of a record or
   generated output always uses the navy profile, even when it is not the
   visually dominant action on the page.
   Child colour pills, status badges, and count indicators are identity/state
   markers — they are NOT subject to the action profile system.
   ----------------------------------------------------------------------- */
.btn-hearth,
.btn-action-open {
    background: linear-gradient(180deg, var(--h-navy-light) 0%, var(--h-navy) 100%);
    border-color: var(--h-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-hearth:hover,
.btn-hearth:focus,
.btn-action-open:hover,
.btn-action-open:focus {
    background: linear-gradient(180deg, var(--h-navy-light) 0%, var(--h-navy) 100%);
    border-color: var(--h-navy-light);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(35, 61, 77, 0.35);
}
.btn-hearth:active,
.btn-action-open:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(35, 61, 77, 0.18);
}

.btn-hearth-secondary,
.btn-action-commit {
    background: linear-gradient(180deg, var(--h-accent-light) 0%, var(--h-accent) 100%);
    border-color: var(--h-accent);
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-hearth-secondary:hover,
.btn-hearth-secondary:focus,
.btn-action-commit:hover,
.btn-action-commit:focus {
    background: linear-gradient(180deg, var(--h-accent-light) 0%, var(--h-accent) 100%);
    border-color: var(--h-accent-light);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 95, 85, 0.35);
}
.btn-hearth-secondary:active,
.btn-action-commit:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(254, 95, 85, 0.25);
}

.btn-hearth-outline,
.btn-action-change {
    background-color: #E3D6C6;
    border: 1px solid #BFAE97;
    color: var(--h-navy);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-hearth-outline:hover,
.btn-hearth-outline:focus,
.btn-action-change:hover,
.btn-action-change:focus {
    background-color: #D9CCBA;
    border-color: #B0A089;
    color: var(--h-navy);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(35, 61, 77, 0.10);
}
.btn-hearth-outline:active,
.btn-action-change:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(35, 61, 77, 0.08);
    background-color: #D0C2AE;
    border-color: #9A8568;
}

@keyframes hearth-sheen {
    from { transform: translateX(-100%) skewX(-15deg); }
    to   { transform: translateX(200%) skewX(-15deg); }
}
.btn-hearth::before,
.btn-action-open::before,
.btn-hearth-secondary::before,
.btn-action-commit::before,
.btn-hearth-outline::before,
.btn-action-change::before,
.btn-hearth-danger::before,
.btn-action-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%) skewX(-15deg);
    pointer-events: none;
}
.btn-hearth:hover::before,
.btn-action-open:hover::before,
.btn-hearth-secondary:hover::before,
.btn-action-commit:hover::before,
.btn-hearth-outline:hover::before,
.btn-action-change:hover::before,
.btn-hearth-danger:hover::before,
.btn-action-danger:hover::before {
    animation: hearth-sheen 0.9s ease-in-out;
}

.btn-hearth-next {
    background: linear-gradient(180deg, var(--h-navy-light) 0%, var(--h-navy) 100%);
    border-color: var(--h-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(35, 61, 77, 0.25), inset 0 0 0 1px rgba(255,255,255,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-hearth-next:hover,
.btn-hearth-next:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(35, 61, 77, 0.35), inset 0 0 0 1px rgba(255,255,255,0.15);
}
.btn-hearth-next:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(35, 61, 77, 0.2), inset 0 0 0 1px rgba(255,255,255,0.1);
}
.btn-hearth-next::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%) skewX(-15deg);
    pointer-events: none;
}
.btn-hearth-next:hover::before {
    animation: hearth-sheen 0.9s ease-in-out;
}

.btn-hearth-danger,
.btn-action-danger {
    background: linear-gradient(180deg, var(--h-attention-light) 0%, var(--h-attention) 100%);
    border-color: var(--h-attention);
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-hearth-danger:hover,
.btn-hearth-danger:focus,
.btn-action-danger:hover,
.btn-action-danger:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 108, 108, 0.35);
}
.btn-hearth-danger:active,
.btn-action-danger:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(192, 108, 108, 0.2);
}

.btn-hearth:disabled,
.btn-hearth.disabled,
.btn-action-open:disabled,
.btn-action-open.disabled,
.btn-hearth-secondary:disabled,
.btn-hearth-secondary.disabled,
.btn-action-commit:disabled,
.btn-action-commit.disabled,
.btn-hearth-outline:disabled,
.btn-hearth-outline.disabled,
.btn-action-change:disabled,
.btn-action-change.disabled,
.btn-hearth-next:disabled,
.btn-hearth-next.disabled,
.btn-hearth-danger:disabled,
.btn-hearth-danger.disabled,
.btn-action-danger:disabled,
.btn-action-danger.disabled {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: auto;
    background: #d1d5db;
    border-color: #d1d5db;
    color: #9ca3af;
}
.btn-hearth:disabled::before,
.btn-hearth.disabled::before,
.btn-action-open:disabled::before,
.btn-action-open.disabled::before,
.btn-hearth-secondary:disabled::before,
.btn-hearth-secondary.disabled::before,
.btn-action-commit:disabled::before,
.btn-action-commit.disabled::before,
.btn-hearth-outline:disabled::before,
.btn-hearth-outline.disabled::before,
.btn-action-change:disabled::before,
.btn-action-change.disabled::before,
.btn-hearth-next:disabled::before,
.btn-hearth-next.disabled::before,
.btn-hearth-danger:disabled::before,
.btn-hearth-danger.disabled::before,
.btn-action-danger:disabled::before,
.btn-action-danger.disabled::before {
    display: none;
}

/* -----------------------------------------------------------------------
   Keyboard focus rings — :focus-visible adds a visible outline for
   keyboard navigation without affecting mouse or touch interaction.
   Each button profile uses a high-contrast colour relative to its
   own background so the ring is always distinguishable.
   ----------------------------------------------------------------------- */
.btn-hearth:focus-visible,
.btn-action-open:focus-visible,
.btn-hearth-next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--h-navy);
}
.btn-hearth-secondary:focus-visible,
.btn-action-commit:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--h-accent);
}
.btn-hearth-outline:focus-visible,
.btn-action-change:focus-visible {
    outline: 2px solid var(--h-navy);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(35, 61, 77, 0.2);
}
.btn-hearth-danger:focus-visible,
.btn-action-danger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--h-attention);
}

.hearth-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 4px;
    flex-shrink: 0;
}
.hearth-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 575.98px) {
    .hearth-page-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .hearth-page-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* -----------------------------------------------------------------------
   Tables
   ----------------------------------------------------------------------- */
.hearth-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--h-muted);
}
.hearth-table td {
    vertical-align: middle;
    font-size: 0.875rem;
}
.hearth-table tbody tr:hover {
    background-color: #fafaf8;
}

/* -----------------------------------------------------------------------
   Badge — navy variant
   ----------------------------------------------------------------------- */
.hearth-badge-navy {
    background-color: var(--h-navy);
    color: #fff;
    font-size: 0.68rem;
}

/* -----------------------------------------------------------------------
   Stat tiles (dashboard + linked stat tiles)
   ----------------------------------------------------------------------- */
.hearth-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--h-navy);
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.hearth-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-muted);
    margin-top: 0.3rem;
}
.hearth-stat-date {
    font-size: 1.15rem;
    letter-spacing: -0.3px;
}

/* Clickable stat tile wrapper */
.hearth-stat-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.hearth-stat-link .hearth-card {
    height: 100%;
}
.hearth-stat-link:hover .hearth-card {
    box-shadow: 0 6px 20px rgba(35, 61, 77, 0.14);
    transform: translateY(-2px);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hearth-stat-link:hover .hearth-stat-value {
    color: var(--h-accent);
}

/* -----------------------------------------------------------------------
   Non-interactive stat tile — suppresses the global hearth-card hover lift.
   Shared here so non-dashboard pages can reuse it.
   ----------------------------------------------------------------------- */
.hearth-card--static {
    transition: none;
    cursor: default;
}
.hearth-card--static:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    transform: none;
}

/* -----------------------------------------------------------------------
   Entry title link — primary clickable label on each row in entries list.
   ----------------------------------------------------------------------- */
.hearth-entry-title-link {
    color: var(--h-navy);
    font-weight: 500;
    text-decoration: none;
}
.hearth-entry-title-link:hover,
.hearth-entry-title-link:focus {
    color: var(--h-accent);
    text-decoration: none;
}

/* -----------------------------------------------------------------------
   Entry metadata row — flex container that holds the attachment pill and
   evidence type pill below the entry title in the entries list.
   ----------------------------------------------------------------------- */
.hearth-entry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

/* -----------------------------------------------------------------------
   Attachment count pill — entries list, shown next to a title.
   Refined from bare icon+number into a proper bordered pill that matches
   the visual register of the evidence type pill beside it.
   ----------------------------------------------------------------------- */
.hearth-attachment-count {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--h-muted);
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
    vertical-align: middle;
}
.hearth-attachment-count svg {
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Evidence type pill — base shape shared by entries list and entry detail.
   Extended by --lesson / --assessment / --activity modifier classes below.
   ----------------------------------------------------------------------- */
.hearth-evidence-type {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--h-muted);
    background-color: var(--h-muted-bg);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}
.hearth-evidence-type--lesson {
    color: var(--h-navy);
    background-color: rgba(35, 61, 77, 0.08);
}
.hearth-evidence-type--assessment {
    color: var(--h-success);
    background-color: var(--h-success-bg);
}
.hearth-evidence-type--activity {
    color: var(--h-warning);
    background-color: var(--h-warning-bg);
}

/* -----------------------------------------------------------------------
   Child tag — pill-style anchor for the child name in the entries list.
   Visually relates to the evidence pill (same border-radius, size register)
   but is clearly secondary: transparent background, just a subtle border.
   ----------------------------------------------------------------------- */
.hearth-child-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--h-muted);
    border: 1px solid var(--h-border);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
    text-decoration: none;
}
.hearth-child-tag:hover,
.hearth-child-tag:focus {
    color: var(--h-navy);
    border-color: #b0b8c8;
    text-decoration: none;
}

/* -----------------------------------------------------------------------
   Evidence list items — single entry detail page.
   .hearth-evidence-item  one evidence row (file + actions)
   .hearth-evidence-meta  filename / size / date metadata line below title
   ----------------------------------------------------------------------- */
.hearth-evidence-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--h-border);
}
.hearth-evidence-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.hearth-evidence-meta {
    font-size: 0.8rem;
    color: var(--h-muted);
    margin-top: 0.15rem;
}

/* -----------------------------------------------------------------------
   Stat strip mini label — child detail stat tiles.
   .hearth-stat-mini-label replaces repeated inline font/uppercase/letter-spacing
   styles on the four stat strip headings in child.php.
   ----------------------------------------------------------------------- */
.hearth-stat-mini-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--h-muted);
}

/* -----------------------------------------------------------------------
   Detail definition list — shared between child.php and entry.php.
   Applied to <dl class="row hearth-detail-dl">.
   ----------------------------------------------------------------------- */
.hearth-detail-dl {
    font-size: 0.875rem;
}

/* -----------------------------------------------------------------------
   Report status badges — used in child.php reports table.
   .hearth-badge-base    base shape shared by both variants
   .hearth-badge-draft   muted grey (draft status)
   .hearth-badge-finalised success green (finalised status)
   ----------------------------------------------------------------------- */
.hearth-badge-draft,
.hearth-badge-finalised {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 0.3rem;
    padding: 0.15rem 0.45rem;
    line-height: 1.4;
}
.hearth-badge-draft {
    background-color: var(--h-muted-bg);
    color: var(--h-muted);
}
.hearth-badge-finalised {
    background-color: var(--h-success-bg);
    color: var(--h-success);
}
.hearth-badge-finalised-lg {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.6rem !important;
    font-weight: 600;
}
.hearth-badge-active {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 0.3rem;
    padding: 0.15rem 0.45rem;
    line-height: 1.4;
    background-color: var(--h-success-bg);
    color: var(--h-success);
}
.hearth-badge-inactive {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 0.3rem;
    padding: 0.15rem 0.45rem;
    line-height: 1.4;
    background-color: var(--h-muted-bg);
    color: var(--h-muted);
}
.hearth-badge-warning {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 0.3rem;
    padding: 0.15rem 0.45rem;
    line-height: 1.4;
    background-color: var(--h-warning-bg);
    color: var(--h-warning);
}
.hearth-badge-core {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 0.3rem;
    padding: 0.12rem 0.4rem;
    line-height: 1.4;
    background-color: var(--h-accent);
    color: #fff;
}
.hearth-badge-count {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 0.3rem;
    padding: 0.12rem 0.4rem;
    line-height: 1.4;
    background-color: var(--h-muted-bg);
    color: var(--h-muted);
}
.hearth-badge-evidence {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 500;
    border-radius: 0.3rem;
    padding: 0.12rem 0.4rem;
    line-height: 1.4;
    background-color: var(--h-success-bg);
    color: var(--h-navy);
}

/* -----------------------------------------------------------------------
   Body small — 0.875rem body text helper.
   Replaces style="font-size:0.875rem;" on empty-state paragraphs and
   lists across child.php and entry.php.
   ----------------------------------------------------------------------- */
.hearth-body-sm {
    font-size: 0.875rem;
}

/* -----------------------------------------------------------------------
   No-wrap utility — suppresses text wrapping on table cells.
   Replaces style="white-space:nowrap;" on td/th elements across child.php
   and entries.php.
   ----------------------------------------------------------------------- */
.hearth-nowrap {
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Back link — small muted navigation link used at the top of detail pages.
   ----------------------------------------------------------------------- */
.hearth-back-link {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--h-muted);
    text-decoration: none;
}
.hearth-back-link:hover {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------
   Navbar user span — replaces inline style="font-size:0.875rem; color:var(--h-muted);"
   ----------------------------------------------------------------------- */
.hearth-navbar-user {
    font-size: 0.875rem;
    color: var(--h-muted);
}

/* -----------------------------------------------------------------------
   Success badge — replaces inline style badge in subjects.php coverage column.
   Uses the same success palette as existing --h-success-bg / --h-success vars.
   ----------------------------------------------------------------------- */
.hearth-badge-success {
    background-color: var(--h-success-bg);
    color: var(--h-success);
    font-weight: 500;
}

/* -----------------------------------------------------------------------
   Child cards — card tiles used on dashboard and children list pages.
   .hearth-child-card        bordered card with hover lift
   .hearth-card-accent-bar   top colour strip driven by --hearth-child-accent custom property
   .hearth-avatar            circular avatar — initials or photo
   .hearth-avatar--sm        28 px variant
   .hearth-avatar--md        38 px variant (default)
   .hearth-avatar--lg        56 px variant
   .hearth-avatar--photo     photo override (img element, object-fit cover)
   .hearth-child-name-pill   identity name pill with per-child colour
   ----------------------------------------------------------------------- */
.hearth-child-card {
    border: 1px solid var(--h-border);
    border-radius: 0.75rem;
    background: var(--h-surface);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hearth-child-card:hover {
    box-shadow: 0 6px 20px rgba(35, 61, 77, 0.12);
    transform: translateY(-2px);
}
.hearth-card-accent-bar {
    border-top: 4px solid var(--hearth-child-accent, var(--h-border));
}
.hearth-child-context {
    padding: 0.5rem 0;
}

.hearth-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--h-navy);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hearth-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: 0.6rem;
}
.hearth-avatar--md {
    width: 48px;
    height: 48px;
    font-size: 0.85rem;
}
.hearth-avatar--lg {
    width: 64px;
    height: 64px;
    font-size: 1.1rem;
}
.hearth-avatar--photo {
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0.08);
    display: block;
}
.hearth-child-name-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
}
.hearth-colour-swatch-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.hearth-colour-swatch-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.hearth-colour-swatch-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.hearth-colour-swatch-group label:hover {
    transform: scale(1.1);
}
.hearth-colour-swatch-group input[type="radio"]:checked + label {
    border-color: var(--h-navy);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--h-navy);
}

/* -----------------------------------------------------------------------
   Strand badges — subject category tag pills on entry detail page.
   .hearth-strand-badge         outer pill (subject > strand)
   .hearth-strand-badge-subject muted subject name prefix
   ----------------------------------------------------------------------- */
.hearth-strand-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #eee;
    color: #555;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}
.hearth-strand-badge-subject {
    color: var(--h-muted);
    font-size: 0.7rem;
}

/* -----------------------------------------------------------------------
   Action pills — small interactive controls for record-level actions.
   .hearth-pill        base shape (border-radius pill, small font)
   .hearth-pill-accent   accent-coloured (edit, download, etc.)
   .hearth-pill-attention attention-coloured (remove, delete, etc.)
   ----------------------------------------------------------------------- */
.hearth-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    background: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hearth-pill-accent {
    border-color: var(--h-accent);
    color: var(--h-accent);
}
.hearth-pill-accent:hover,
.hearth-pill-accent:focus {
    background-color: var(--h-accent);
    color: #fff;
}
.hearth-pill-attention {
    border-color: var(--h-attention);
    color: var(--h-attention);
}
.hearth-pill-attention:hover,
.hearth-pill-attention:focus {
    background-color: var(--h-attention);
    color: #fff;
}
.hearth-pill-muted {
    border-color: var(--h-border);
    color: var(--h-muted);
}
.hearth-pill-muted:hover,
.hearth-pill-muted:focus {
    border-color: var(--h-muted);
    color: var(--h-text);
}

/* -----------------------------------------------------------------------
   Filter bar — entries list page.
   .hearth-filter-bar    outer wrapper for both filter groups
   .hearth-filter-group  one labelled group of toggle buttons (period/evidence)
   .hearth-filter-label  small uppercase label before each group's buttons
   ----------------------------------------------------------------------- */
.hearth-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--h-border);
    margin-top: 0.45rem;
}
.hearth-filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.hearth-filter-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--h-muted);
    margin-right: 0.2rem;
    white-space: nowrap;
    font-weight: 600;
}

/* -----------------------------------------------------------------------
   Insights bar — compact summary row above the entries table.
   .hearth-insights-bar      flex container for all stat items
   .hearth-insights-stat     one value + label pair
   .hearth-insights-value    the number
   .hearth-insights-label    the description below the number
   .hearth-insights-divider  thin vertical separator between items
   ----------------------------------------------------------------------- */
.hearth-insights-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0.6rem 1rem;
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 0.6rem;
    font-size: 0.8rem;
}
.hearth-insights-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.9rem;
}
.hearth-insights-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--h-navy);
    line-height: 1.2;
}
.hearth-insights-label {
    font-size: 0.7rem;
    color: var(--h-muted);
    text-align: center;
    margin-top: 0.1rem;
    white-space: nowrap;
}
.hearth-insights-divider {
    width: 1px;
    height: 2rem;
    background-color: var(--h-border);
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Evidence thumbnail — single entry detail page.
   .hearth-evidence-thumb-link  anchor wrapping the thumbnail
   .hearth-evidence-thumb       the <img> element itself
   ----------------------------------------------------------------------- */
.hearth-evidence-thumb-link {
    display: block;
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid var(--h-border);
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
}
.hearth-evidence-thumb {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
}
.hearth-evidence-thumb-missing {
    width: 72px;
    height: 72px;
    border-radius: 0.4rem;
    border: 1px dashed var(--h-border);
    background: var(--h-surface-bg);
    color: var(--h-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.2;
    padding: 0.35rem;
}

/* -----------------------------------------------------------------------
   Search row — appears above the filter toggle bar on entries.php.
   .hearth-search-row    flex wrapper for search input, child select, and buttons
   .hearth-search-input  text input styled to match Hearth token conventions
   .hearth-child-select  child dropdown within the search row
   ----------------------------------------------------------------------- */
.hearth-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
/* Inside a toolbar the search row sits directly above the filter bar;
   no extra margin needed — the filter bar supplies its own top border
   and padding to provide the visual separation. */
.hearth-toolbar .hearth-search-row {
    margin-bottom: 0;
}
.hearth-search-input {
    flex: 1 1 16rem;
    min-width: 0;
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.6rem;
    font-size: 0.875rem;
    color: var(--h-text);
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 0.4rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.hearth-search-input:focus {
    border-color: var(--h-navy);
    box-shadow: 0 0 0 3px rgba(35, 61, 77, 0.12);
}
.hearth-search-input::placeholder {
    color: var(--h-muted);
    opacity: 1;
}
.hearth-child-select {
    flex: 0 1 auto;
    min-width: 7rem;
    max-width: 12rem;
    border-color: var(--h-border);
    color: var(--h-text);
    font-size: 0.875rem;
}
.hearth-child-select:focus {
    border-color: var(--h-navy);
    box-shadow: 0 0 0 3px rgba(35, 61, 77, 0.12);
}

/* -----------------------------------------------------------------------
   Page header — canonical layout for the title + action-button row that
   appears at the top of every list and detail page.
   .hearth-page-header  outer flex row (title left, actions right)
   .hearth-page-actions right-side button group (flex, small gap)
   ----------------------------------------------------------------------- */
.hearth-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.hearth-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Toolbar — visual container that groups search and filter controls into
   one cohesive panel. Sits between the page header and the data table.
   The form lives inside this div; padding and border provide the grouping.
   ----------------------------------------------------------------------- */
.hearth-toolbar {
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------
   Entries table column width hints.
   Applied to <th> cells; browsers use these as column-width suggestions.
   Date and Child are constrained to keep Title and Description spacious.
   ----------------------------------------------------------------------- */
.hearth-col-date {
    width: 9rem;
    min-width: 8rem;
    max-width: 9rem;
}
.hearth-col-child {
    width: 9rem;
    min-width: 7rem;
    max-width: 9rem;
}

/* -----------------------------------------------------------------------
   Accent inline link — accent-coloured text link, no underline.
   Used for "Clear all" and similar contextual actions within body text.
   ----------------------------------------------------------------------- */
.hearth-accent-link {
    color: var(--h-accent);
    text-decoration: none;
}
.hearth-accent-link:hover,
.hearth-accent-link:focus {
    color: var(--h-accent-light);
    text-decoration: none;
}

/* -----------------------------------------------------------------------
   Table row link — primary clickable label inside a table cell.
   Used for entry titles in child.php, report titles in child.php, etc.
   Navy at rest; accent orange on hover.
   ----------------------------------------------------------------------- */
.hearth-table-row-link {
    color: var(--h-navy);
    font-weight: 500;
    text-decoration: none;
}
.hearth-table-row-link:hover,
.hearth-table-row-link:focus {
    color: var(--h-accent);
    text-decoration: none;
}

/* -----------------------------------------------------------------------
   Card section heading — small uppercase label used at the top of
   sub-sections inside a card (e.g. "Evidence Summary", "Coverage Notes").
   Replaces repeated inline style blocks on <h2> inside report.php cards.
   ----------------------------------------------------------------------- */
.hearth-card-section-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 0.75rem;
}

/* -----------------------------------------------------------------------
   Extra-small text — 0.75rem, used for minor secondary labels (e.g. "(core)"
   subject markers) that must be smaller than .hearth-body-sm (0.875rem)
   but do not need the uppercase/letter-spacing of .hearth-stat-mini-label.
   ----------------------------------------------------------------------- */
.hearth-text-xs {
    font-size: 0.75rem;
}

/* -----------------------------------------------------------------------
   Inline body link — plain body-text anchor (not a button, not a nav link).
   Navy colour at rest; accent on hover. No underline.
   Applied wherever a contextual text link appears inside a card or <p>.
   ----------------------------------------------------------------------- */
.hearth-inline-link {
    color: var(--h-navy);
    text-decoration: none;
}
.hearth-inline-link:hover,
.hearth-inline-link:focus {
    color: var(--h-accent);
    text-decoration: none;
}

/* -----------------------------------------------------------------------
   Narrative Builder — section status pills.
   Displayed next to each section row in the builder overview.
   Base pill shape; status variant modifiers set colour.
   ----------------------------------------------------------------------- */
.hearth-narrative-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 0.3rem;
    padding: 0.15rem 0.5rem;
    line-height: 1.4;
    white-space: nowrap;
}
.hearth-narrative-pill--empty {
    background-color: var(--h-muted-bg);
    color: var(--h-muted);
}
.hearth-narrative-pill--in-progress {
    background-color: var(--h-warning-bg);
    color: var(--h-warning);
}
.hearth-narrative-pill--complete {
    background-color: var(--h-success-bg);
    color: var(--h-success);
}

/* -----------------------------------------------------------------------
   Narrative Builder — section list rows.
   Each row has section title + status pill + action button in a flex row.
   ----------------------------------------------------------------------- */
.hearth-narrative-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--h-border);
}
.hearth-narrative-section-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.hearth-narrative-section-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--h-text);
    margin: 0;
}
.hearth-narrative-section-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Narrative Builder — progress bar.
   Simple CSS bar shown at the top of the builder overview to indicate
   how many sections have reached 'complete' status.
   ----------------------------------------------------------------------- */
.hearth-progress-track {
    width: 100%;
    height: 6px;
    background-color: var(--h-border);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.hearth-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--h-success) 0%, #6bbfa0 100%);
    transition: width 0.4s ease;
}

.hearth-report-workflow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}
.hearth-report-step {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.4rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--h-border);
    border-radius: 0.5rem;
    color: var(--h-muted);
    background-color: var(--h-surface);
    font-size: 0.8rem;
    font-weight: 600;
}
.hearth-report-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background-color: var(--h-muted-bg);
    color: var(--h-muted);
    font-size: 0.7rem;
    flex-shrink: 0;
}
.hearth-report-supporting-grid {
    display: grid;
    gap: 0.6rem;
}
.hearth-report-supporting-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.75rem;
    border: 1px solid var(--h-border);
    border-radius: 0.5rem;
    background-color: var(--h-surface);
    cursor: pointer;
}
.hearth-report-supporting-item input {
    margin-top: 0.2rem;
    accent-color: var(--h-navy);
}
.hearth-report-supporting-title,
.hearth-report-supporting-meta,
.hearth-report-supporting-reason,
.hearth-report-supporting-suggested,
.hearth-report-supporting-saved {
    display: block;
}
.hearth-report-supporting-title {
    color: var(--h-text);
    font-size: 0.9rem;
    font-weight: 600;
}
.hearth-report-supporting-meta,
.hearth-report-supporting-reason {
    color: var(--h-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}
.hearth-report-supporting-suggested,
.hearth-report-supporting-saved {
    width: fit-content;
    margin: 0.25rem 0;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.hearth-report-supporting-suggested {
    color: var(--h-warning);
    background-color: var(--h-warning-bg);
}
.hearth-report-supporting-saved {
    color: var(--h-success);
    background-color: var(--h-success-bg);
}
.hearth-note-panel {
    padding: 0.85rem 1rem;
    border: 1px solid var(--h-border);
    border-radius: 0.5rem;
    background-color: var(--h-warm-bg);
}

@media (max-width: 767.98px) {
    .hearth-report-workflow {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------
   Narrative Section Editor — prompt form elements.
   .hearth-prompt-group   wrapper for one prompt (label + textarea + help)
   .hearth-prompt-label   the question text shown above the textarea
   .hearth-prompt-help    small guidance text shown below the textarea
   .hearth-prompt-optional  "(optional)" suffix appended to the label
   .hearth-prompt-textarea  full-width resizable textarea
   ----------------------------------------------------------------------- */
.hearth-prompt-group {
    margin-bottom: 1.5rem;
}
.hearth-prompt-group:last-child {
    margin-bottom: 0;
}
.hearth-prompt-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--h-text);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}
.hearth-prompt-optional {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--h-muted);
    margin-left: 0.3rem;
}
.hearth-prompt-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--h-text);
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 0.4rem;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    line-height: 1.5;
    font-family: inherit;
}
.hearth-prompt-textarea:focus {
    border-color: var(--h-navy);
    box-shadow: 0 0 0 3px rgba(35, 61, 77, 0.12);
}
.hearth-prompt-textarea::placeholder {
    color: var(--h-muted);
    opacity: 1;
}
.hearth-prompt-help {
    font-size: 0.8rem;
    color: var(--h-text);
    background-color: var(--h-warm-bg);
    border-left: 3px solid var(--h-accent);
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.35rem 0.6rem;
    margin-top: 0.4rem;
    line-height: 1.45;
}

/* -----------------------------------------------------------------------
   Narrative Builder — section nav footer.
   Prev / Next navigation links at the bottom of the section editor.
   ----------------------------------------------------------------------- */
.hearth-section-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--h-border);
    margin-top: 1.5rem;
}

/* -----------------------------------------------------------------------
   Narrative Section Editor — Supporting entries collapsible panel.
   .hearth-entries-panel         <details> wrapper (top-level panel)
   .hearth-entries-panel-summary <summary> toggle row
   .hearth-entries-linked-count  "X linked" badge beside the summary text
   .hearth-entries-panel-body    body area shown when panel is open
   .hearth-entry-check-row       one entry row (checkbox + label + type pill)
   .hearth-entry-check-box       the actual checkbox input
   .hearth-entry-check-label     the text label beside the checkbox
   .hearth-entry-check-date      muted date prefix inside the label
   ----------------------------------------------------------------------- */
.hearth-entries-panel {
    border: 1px solid var(--h-border);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 1.5rem;
}
.hearth-entries-panel-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--h-text);
    background-color: #fafaf8;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.hearth-entries-panel-summary::-webkit-details-marker {
    display: none;
}
.hearth-entries-panel-summary::before {
    content: "+";
    font-size: 0.9rem;
    color: var(--h-muted);
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}
details.hearth-entries-panel[open] > .hearth-entries-panel-summary::before {
    content: "\2212";
}
.hearth-entries-linked-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--h-success);
    background-color: var(--h-success-bg);
    border-radius: 0.3rem;
    padding: 0.1rem 0.4rem;
    letter-spacing: 0.02em;
    margin-left: auto;
}
.hearth-entries-panel-body {
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--h-border);
    background-color: var(--h-surface);
}
.hearth-entry-check-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--h-border);
    cursor: pointer;
    font-size: 0.875rem;
}
.hearth-entry-check-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.hearth-entry-check-box {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--h-navy);
}
.hearth-entry-check-label {
    flex: 1;
    color: var(--h-text);
    line-height: 1.4;
}
.hearth-entry-check-date {
    font-size: 0.75rem;
    color: var(--h-muted);
    margin-right: 0.35rem;
}
/* Sub-header labels that divide suggested vs other entries in the panel */
.hearth-entries-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-accent);
    margin: 0.6rem 0 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--h-accent-light, #f5d4c4);
}
.hearth-entries-section-label--other {
    color: var(--h-muted);
    border-bottom-color: var(--h-border);
    margin-top: 0.9rem;
}

/* -----------------------------------------------------------------------
   Quality check panel — narrative-builder.php overview page.
   .hearth-quality-section-link   link to the affected section (in warnings)
   .hearth-quality-allclear       all-clear row (green, icon + text)
   .hearth-quality-allclear-icon  green checkmark glyph
   ----------------------------------------------------------------------- */
.hearth-quality-section-link {
    font-weight: 500;
    color: var(--h-navy);
    text-decoration: none;
}
.hearth-quality-section-link:hover,
.hearth-quality-section-link:focus {
    color: var(--h-accent);
    text-decoration: underline;
}
.hearth-quality-allclear {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--h-success, #2d8a4e);
}
.hearth-quality-allclear-icon {
    font-size: 1rem;
    font-weight: 700;
}

/* -----------------------------------------------------------------------
   Narrative Preview — screen styles.
   .hearth-preview-header           report title / child / period block
   .hearth-preview-section          wrapper card for one assembled section
   .hearth-preview-section-heading  section title (h2 styled as card label)
   .hearth-preview-narrative        body paragraphs for the narrative text
   .hearth-preview-entries          supporting entries block inside a section
   .hearth-preview-entries-label    small uppercase label above entries list
   .hearth-preview-entries-list     unstyled <ul> for the entry rows
   .hearth-preview-entry-item       one entry row (date + title + type)
   .hearth-preview-entry-date       muted date prefix
   .hearth-preview-entry-type       muted evidence-type suffix
   ----------------------------------------------------------------------- */
.hearth-preview-header {
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--h-border);
}
.hearth-preview-section-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 0.75rem;
}
.hearth-preview-narrative {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--h-text);
}
.hearth-preview-narrative p:last-child {
    margin-bottom: 0;
}
.hearth-preview-entries {
    border-top: 1px solid var(--h-border);
    padding-top: 0.75rem;
}
.hearth-preview-entries-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-muted);
    margin-bottom: 0.4rem;
}
.hearth-preview-entries-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hearth-preview-entry-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--h-border);
    font-size: 0.875rem;
}
.hearth-preview-entry-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.hearth-preview-entry-date {
    font-size: 0.75rem;
    color: var(--h-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.hearth-preview-entry-type {
    font-size: 0.72rem;
    color: var(--h-muted);
    margin-left: auto;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Narrative Preview — mini entry blocks (supporting entries per section).
   Replaces the old plain <ul> list with richer blocks showing date, type
   pill, title link, and description excerpt.
   .hearth-preview-entry-block       one entry mini-card
   .hearth-preview-entry-meta        meta row: date + type pill
   .hearth-preview-entry-title       entry title (linked on screen)
   .hearth-preview-entry-excerpt     truncated description text
   .hearth-preview-entry-type-print  plain-text type label in print only
   ----------------------------------------------------------------------- */
.hearth-preview-entry-block {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--h-border);
}
.hearth-preview-entry-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.hearth-preview-entry-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}
.hearth-preview-entry-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--h-text);
    line-height: 1.35;
}
.hearth-preview-entry-excerpt {
    font-size: 0.8rem;
    color: var(--h-muted);
    line-height: 1.45;
    margin-top: 0.15rem;
}
.hearth-preview-entry-type-print {
    font-size: 0.72rem;
    color: var(--h-muted);
}

/* -----------------------------------------------------------------------
   Appendix — full entry listing grouped by subject.
   Shown when ?show_appendix=1; hidden on print unless
   .hearth-appendix--active is present.
   .hearth-appendix                outer wrapper
   .hearth-appendix--active        modifier when appendix is shown
   .hearth-appendix-heading        section heading row
   .hearth-appendix-heading-sub    muted period range beside heading
   .hearth-appendix-group          one subject group block
   .hearth-appendix-group-label    subject name label
   .hearth-appendix-entry          one entry row inside a group
   .hearth-appendix-entry-meta     meta row: date + type pill
   .hearth-appendix-entry-title    entry title (linked on screen)
   .hearth-appendix-entry-strands  row of strand tag pills
   .hearth-appendix-strand         individual strand pill
   ----------------------------------------------------------------------- */
.hearth-appendix {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--h-border);
}
.hearth-appendix-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-navy);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hearth-appendix-heading-sub {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--h-muted);
}
.hearth-appendix-group {
    margin-bottom: 1.5rem;
}
.hearth-appendix-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-muted);
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--h-border);
}
.hearth-appendix-entry {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--h-border);
}
.hearth-appendix-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.hearth-appendix-entry-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
}
.hearth-appendix-entry-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--h-text);
}
.hearth-appendix-entry-strands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}
.hearth-appendix-strand {
    font-size: 0.7rem;
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    color: var(--h-muted);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Narrative Preview — document header (hearth-doc-header).
   Replaces the old hearth-preview-header thin block with a richer
   document-style header that reads well both on screen and in print.
   .hearth-doc-header      outer wrapper (border-bottom separator)
   .hearth-doc-label-chip  "Narrative Progress Report" chip above the title
   .hearth-doc-title       child full name (large, navy, bold)
   .hearth-doc-subtitle    report title (medium weight)
   .hearth-doc-meta        period + generated date (muted, small)
   .hearth-doc-meta-draft  draft notice in warning colour
   ----------------------------------------------------------------------- */
.hearth-doc-header {
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--h-border);
}
.hearth-doc-label-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--h-accent);
    background-color: rgba(254, 95, 85, 0.1);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
}
.hearth-doc-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--h-navy);
    line-height: 1.15;
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
    letter-spacing: -0.5px;
}
.hearth-doc-subtitle {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--h-text);
    margin-bottom: 0.6rem;
}
.hearth-doc-meta {
    font-size: 0.825rem;
    color: var(--h-muted);
    line-height: 1.7;
}
.hearth-doc-meta-draft {
    color: var(--h-warning);
    font-weight: 500;
}

/* -----------------------------------------------------------------------
   Narrative Preview — evidence summary panel.
   Sits between the document header and the narrative sections.
   Shows total entry count, a horizontal SVG bar chart by subject, and
   a type-breakdown row of evidence-type pills.

   .hearth-evidence-summary          outer surfaced panel
   .hearth-evidence-summary-heading  small uppercase label
   .hearth-evidence-total            large numeric total
   .hearth-evidence-total-label      descriptor beside the total
   .hearth-bar-chart                 outer wrapper for all bar rows
   .hearth-bar-row                   one subject row (label + track + count)
   .hearth-bar-label                 truncating text label for the subject
   .hearth-bar-track                 background track (grey pill)
   .hearth-bar-fill                  animated SVG rect (accent colour)
   .hearth-bar-count                 right-side numeric count
   .hearth-type-pills                flex row of type pills
   .hearth-type-pill                 one evidence-type label
   .hearth-type-pill-count           muted count suffix inside the pill
   ----------------------------------------------------------------------- */
.hearth-evidence-summary {
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.4rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
.hearth-evidence-summary-heading {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-muted);
    margin-bottom: 0.6rem;
}
.hearth-evidence-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--h-navy);
    line-height: 1.1;
}
.hearth-evidence-total-label {
    font-size: 0.8rem;
    color: var(--h-muted);
    margin-left: 0.3rem;
}
.hearth-bar-chart {
    margin-top: 0.8rem;
}
.hearth-bar-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.4rem;
}
.hearth-bar-row:last-child {
    margin-bottom: 0;
}
/* Fixed-width label column used by ChartRenderer bar charts.
   Ensures all bars start at the same horizontal position. */
.hearth-bar-meta {
    flex-shrink: 0;
    width: 7rem;
    min-width: 5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem;
}
.hearth-bar-name {
    font-size: 0.8rem;
    color: var(--h-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.hearth-bar-label {
    font-size: 0.8rem;
    color: var(--h-text);
    min-width: 6rem;
    max-width: 9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.hearth-bar-track {
    flex: 1;
    height: 12px;
    background-color: var(--h-muted-bg);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.hearth-bar-track svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.hearth-bar-fill {
    fill: var(--h-accent);
    transition: width 0.65s cubic-bezier(0.34, 1.0, 0.64, 1.0);
}
.hearth-bar-count {
    font-size: 0.78rem;
    color: var(--h-muted);
    min-width: 1.5rem;
    text-align: right;
    flex-shrink: 0;
}
.hearth-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.8rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--h-border);
}
.hearth-type-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--h-text);
    background-color: #f4f4f2;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}
.hearth-type-pill-count {
    font-size: 0.7rem;
    color: var(--h-muted);
    font-weight: 400;
}

/* -----------------------------------------------------------------------
   Narrative Preview — Lexend Deca reading font (screen + print).
   Applied to .hearth-preview-body; uses CSS variable so the font stack
   is overridable if needed. Google Fonts is loaded in narrative-preview.php
   only (not globally).
   ----------------------------------------------------------------------- */
.hearth-preview-body {
    font-family: var(--hearth-preview-font, 'Lexend Deca', system-ui, -apple-system, sans-serif);
}

/* -----------------------------------------------------------------------
   Processing overlay — full-page loading indicator.
   Shown while slow form actions (narrative save, finalise) are in progress.
   Built and injected by hearth.js; hidden by default.
   Adding .hearth-overlay--visible makes it fully opaque and interactive.
   ----------------------------------------------------------------------- */
#hearth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(35, 61, 77, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(2px);
}
#hearth-overlay.hearth-overlay--visible {
    opacity: 1;
    pointer-events: all;
}
.hearth-overlay-inner {
    background: var(--h-surface);
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(35, 61, 77, 0.2);
    min-width: 200px;
}
/* Branded morphing icon — SVG injected by hearth.js.
   A single closed path cycles through house → document → pencil using
   CSS d-property animation; all three states share the same 5-point
   command skeleton so the browser interpolates coordinates smoothly. */
.hearth-overlay-icon {
    display: block;
    margin: 0 auto 1rem;
    overflow: visible;
}
.hearth-overlay-morph {
    fill: none;
    stroke: var(--h-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: hearth-morph 2.7s ease-in-out infinite;
}
@keyframes hearth-morph {
    /* House — wide base, eave shoulders, gently rounded roof peak.
       Path skeleton: M L L L Q L Z (7 commands, identical across all states) */
    0%   { d: path("M 4 44 L 44 44 L 44 22 L 26 8 Q 24 6 22 8 L 4 22 Z"); }
    15%  { d: path("M 4 44 L 44 44 L 44 22 L 26 8 Q 24 6 22 8 L 4 22 Z"); }
    /* Document — page with softly rounded dog-ear fold at top-right */
    33%  { d: path("M 9 44 L 39 44 L 39 11 L 32 6 Q 30 4 27 4 L 9 4 Z"); }
    49%  { d: path("M 9 44 L 39 44 L 39 11 L 32 6 Q 30 4 27 4 L 9 4 Z"); }
    /* Pencil — flat eraser cap at top, body tapers to a rounded tip at bottom */
    67%  { d: path("M 16 10 L 32 10 L 30 36 L 27 42 Q 24 46 21 42 L 18 36 Z"); }
    82%  { d: path("M 16 10 L 32 10 L 30 36 L 27 42 Q 24 46 21 42 L 18 36 Z"); }
    /* Return to house */
    100% { d: path("M 4 44 L 44 44 L 44 22 L 26 8 Q 24 6 22 8 L 4 22 Z"); }
}
.hearth-overlay-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--h-navy);
    margin: 0;
    letter-spacing: 0.01em;
}

/* -----------------------------------------------------------------------
   Flash message fade-out — used on narrative-section.php and
   narrative-builder.php. Wrap alert(s) in .hearth-flash-wrap; hearth.js
   injects a close button and sets up auto-dismiss after 4 seconds.
   .hearth-flash-wrap  outer wrapper div (position context)
   .hearth-flash-close close button injected by hearth.js
   .hearth-flash-fade  added on dismiss; triggers opacity transition
   ----------------------------------------------------------------------- */
.hearth-flash-wrap {
    margin-top: 0.75rem;
}
.hearth-flash-wrap .alert {
    position: relative;
    transition: opacity 0.4s ease, max-height 0.4s ease, padding 0.4s ease,
                margin 0.4s ease, border-width 0.4s ease, transform 0.4s ease;
    overflow: hidden;
}
.hearth-flash-fade {
    opacity: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-width: 0 !important;
    transform: translateY(-4px);
}
.hearth-flash-close {
    position: absolute;
    top: 0.35rem;
    right: 0.6rem;
    background: none;
    border: none;
    font-size: 1.15rem;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    line-height: 1;
    padding: 0.1rem 0.25rem;
}
.hearth-flash-close:hover {
    opacity: 1;
}
.hearth-flash-help {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease,
                margin 0.35s ease;
    border-top: 1px solid transparent;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}
.hearth-flash-help.open {
    max-height: 300px;
    opacity: 1;
    padding: 0.6rem 0.75rem 0.5rem;
    margin-top: 0.5rem;
    border-top-color: var(--h-border);
}
.hearth-flash-help-close {
    display: inline-block;
    margin-top: 0.35rem;
    background: none;
    border: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--h-muted);
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    text-decoration: underline;
}
.hearth-flash-help-close:hover {
    color: var(--h-text);
}
@keyframes hearth-highlight-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(254, 95, 85, 0.45); }
    50%  { box-shadow: 0 0 0 4px rgba(254, 95, 85, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(254, 95, 85, 0); }
}
.hearth-flash-highlight {
    animation: hearth-highlight-pulse 0.75s ease 2;
    outline: 2px solid var(--h-accent);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* -----------------------------------------------------------------------
   Section progress context bar — shown at the top of the section editor.
   Displays "Section X of Y" alongside a mini progress track.
   .hearth-section-progress  outer wrapper (mb-3 spacing used in template)
   ----------------------------------------------------------------------- */
.hearth-section-progress {
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: 0.5rem;
    padding: 0.65rem 0.9rem;
}

/* -----------------------------------------------------------------------
   Manual narrative notice — shown when narrative_is_manual = 1.
   Warm amber tint to signal protected state; accent-left border.
   .hearth-manual-notice  wrapper div inside the narrative card
   ----------------------------------------------------------------------- */
.hearth-manual-notice {
    font-size: 0.8rem;
    color: var(--h-warning);
    background-color: var(--h-warning-bg);
    border-left: 3px solid var(--h-warning);
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.75rem;
    line-height: 1.45;
}

/* -----------------------------------------------------------------------
   Print utilities — screen helpers that collapse in print, and vice-versa.
   .hearth-no-print    hidden when printing (navbar, back link, print button)
   .hearth-print-only  visible only when printing (plain text alt to <a>)
   .hearth-print-footer hidden on screen; shown at end of document when printing
   ----------------------------------------------------------------------- */
.hearth-print-only {
    display: none;
}
.hearth-print-footer {
    display: none;
}

/* -----------------------------------------------------------------------
   Print media — narrative-preview.php print/PDF output.
   Collapses screen chrome (navbar, buttons, back link) and reformats the
   narrative sections as clean A4-ready prose.
   @page sets 2 cm margins for A4/Letter output.
   ----------------------------------------------------------------------- */
@page {
    margin: 2cm;
}

@media print {
    .hearth-no-print {
        display: none !important;
    }
    .hearth-print-only {
        display: inline !important;
    }
    .hearth-print-footer {
        display: block !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
        font-family: Georgia, "Times New Roman", Times, serif;
        padding-bottom: 1.5cm;
    }

    /* Reset Bootstrap grid — prevent column padding offsetting page margins */
    .container,
    .container-fluid {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .card,
    .hearth-card {
        border: none;
        box-shadow: none;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .card-body {
        padding: 0 0 1.5rem 0 !important;
    }

    /* Document header (narrative-preview.php) */
    .hearth-doc-header {
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
        border-bottom: 1.5pt solid #ccc;
    }
    .hearth-doc-title {
        font-size: 18pt;
        letter-spacing: 0;
    }
    .hearth-doc-subtitle {
        font-size: 11pt;
    }
    .hearth-doc-meta {
        font-size: 9pt;
        color: #666;
    }
    .hearth-doc-meta-draft {
        color: #c43d34;
    }
    .hearth-doc-label-chip {
        font-size: 8pt;
        background: none;
        color: #c43d34;
        padding: 0;
        border-radius: 0;
    }

    /* Evidence summary panel */
    .hearth-evidence-summary {
        background: none;
        border: 1pt solid #ddd;
        border-radius: 4pt;
        box-shadow: none;
        padding: 0.5rem 0.75rem;
        margin-bottom: 1rem;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .hearth-evidence-summary-heading {
        font-size: 8pt;
        color: #666;
    }
    .hearth-evidence-total {
        font-size: 14pt;
    }
    .hearth-bar-fill {
        transition: none !important;
    }
    .hearth-bar-label {
        font-size: 8pt;
    }
    .hearth-bar-count {
        font-size: 8pt;
    }
    .hearth-type-pill {
        font-size: 7.5pt;
    }

    /* Narrative sections */
    .hearth-preview-body {
        font-family: Georgia, "Times New Roman", Times, serif;
    }

    .hearth-preview-section {
        margin-bottom: 1.5rem !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .hearth-preview-section-heading {
        font-size: 13pt;
        font-weight: 700;
        color: #233D4D;
        letter-spacing: 0;
        margin-bottom: 0.4rem;
        page-break-after: avoid;
        break-after: avoid;
    }

    .hearth-preview-narrative {
        font-size: 11pt;
        line-height: 1.7;
    }

    .hearth-preview-entries {
        margin-top: 0.5rem;
    }

    .hearth-preview-entries-label {
        font-size: 8pt;
        color: #666;
        margin-bottom: 0.25rem;
    }

    .hearth-preview-entries-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hearth-preview-entry-item {
        font-size: 9pt;
        padding: 0.1rem 0;
    }

    .hearth-preview-entry-date {
        color: #666;
        margin-right: 0.4rem;
    }

    .hearth-preview-entry-type {
        font-size: 8pt;
        color: #666;
        margin-left: 0.4rem;
    }

    /* Mini entry blocks in print */
    .hearth-preview-entry-block {
        padding: 0.25rem 0;
    }
    .hearth-preview-entry-title {
        font-size: 9pt;
    }
    .hearth-preview-entry-excerpt {
        font-size: 8pt;
        color: #555;
    }
    .hearth-preview-entry-type-print {
        font-size: 7.5pt;
        color: #666;
    }

    /* Appendix in print — show only when active modifier present */
    .hearth-appendix {
        display: none;
    }
    .hearth-appendix--active {
        display: block;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1.5pt solid #aaa;
        page-break-before: always;
    }
    .hearth-appendix-heading {
        font-size: 13pt;
        font-weight: 700;
        color: #233D4D;
        margin-bottom: 1rem;
    }
    .hearth-appendix-group-label {
        font-size: 8pt;
        color: #666;
        padding-bottom: 0.2rem;
        border-bottom: 0.5pt solid #ccc;
        margin-bottom: 0.25rem;
    }
    .hearth-appendix-entry {
        padding: 0.2rem 0;
    }
    .hearth-appendix-entry-title {
        font-size: 9pt;
    }
    .hearth-appendix-strand {
        font-size: 7pt;
        border: 0.5pt solid #ccc;
        background: none;
        padding: 0.05rem 0.35rem;
    }

    /* Print footer — fixed position so it repeats on every printed page */
    .hearth-print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.35rem 2cm;
        border-top: 0.5pt solid #ccc;
        font-size: 8pt;
        color: #888;
        text-align: center;
        font-family: Georgia, "Times New Roman", Times, serif;
        background: #fff;
    }

    /* Hide remaining screen-only chrome */
    .hearth-navbar,
    .hearth-toolbar,
    .hearth-page-header .btn,
    .hearth-page-actions {
        display: none !important;
    }

    a,
    a:visited {
        color: #000 !important;
        text-decoration: none !important;
    }
}

/* ==========================================================================
   Progress charts — shared styles used across progress.php and report.php.
   Page-specific chart styles are inlined in each page's <style> block.
   ========================================================================== */

/* Pie / donut chart container — max-width constrains SVG on wide viewports */
.hearth-chart-pie-wrap {
    max-width: 220px;
    margin: 0 auto;
}

/* SVG chart baseline — prevents inline-block gap under SVG elements */
.hearth-chart-pie-wrap svg {
    display: block;
}

/* Progress page chart wrapper for the bar charts (reusing bar components) */
.hearth-chart-bars {
    width: 100%;
}

/* ==========================================================================
   Form enhancements — brand-coloured checkboxes and radio buttons.

   Bootstrap 5 sets `appearance: none` on .form-check-input, which completely
   disables the browser's native rendering and makes `accent-color` ineffective.
   Bootstrap instead styles checkboxes via background-color + background-image.
   We override the checked state here so the tick box shows the Hearth accent
   colour instead of Bootstrap's default blue (#0d6efd).

   The broad `input[type]` rules cover non-Bootstrap checkboxes (entry grades,
   no-grade toggle) where the native appearance IS active and accent-color works.
   ========================================================================== */

/* Non-Bootstrap checkboxes / radios: native rendering → accent-color works. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--h-accent);
    cursor: pointer;
}

/* Bootstrap .form-check-input: appearance:none → override checked bg colour.
   These selectors must be at least as specific as Bootstrap's own rules.      */
.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--h-accent);
    border-color: var(--h-accent);
}

.form-check-input:focus {
    border-color: var(--h-accent);
    box-shadow: 0 0 0 0.25rem rgba(254, 95, 85, 0.25);
}

.form-check-input:checked:focus {
    background-color: var(--h-accent);
    border-color: var(--h-accent);
    box-shadow: 0 0 0 0.25rem rgba(254, 95, 85, 0.25);
}

.form-check-label {
    cursor: pointer;
}

/* ==========================================================================
   Grade slider — range input + value display
   ========================================================================== */
.hearth-grade-slider {
    width: 100%;
    cursor: pointer;
    accent-color: var(--h-accent);
}

.hearth-grade-slider-value {
    min-width: 2rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--h-navy);
    text-align: right;
    line-height: 1;
}

.hearth-grade-slider-label {
    font-size: 0.78rem;
    color: var(--h-muted);
    font-weight: 500;
}

.hearth-grade-nograde {
    accent-color: var(--h-warning);
    cursor: pointer;
}

/* ==========================================================================
   Grade skip pill — polished inline toggle replacing the plain checkbox label
   ========================================================================== */
.hearth-grade-skip-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    background: var(--h-surface-bg);
    border: 1px solid var(--h-border);
    border-radius: 2rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    color: var(--h-muted);
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hearth-grade-skip-label:hover {
    border-color: var(--h-navy);
    color: var(--h-navy);
    background: var(--h-surface);
}
.hearth-grade-skip-label:has(input:checked) {
    background: var(--h-warm-bg);
    border-color: var(--h-warning);
    color: var(--h-warning);
}
.hearth-grade-skip-label input[type="checkbox"] {
    width: 0.85rem;
    height: 0.85rem;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* ==========================================================================
   Mastery description — warm guidance panel (no harsh left border)
   ========================================================================== */
.hearth-grade-desc-block {
    font-size: 0.78rem;
    color: var(--h-text);
    background: var(--h-warm-bg);
    border: 1px solid var(--h-warm-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    line-height: 1.5;
    min-height: 1.8rem;
}

/* ==========================================================================
   Insight layer — child page insight cards (card style, no left border strips)
   ========================================================================== */
.hearth-insight-row {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.65rem 0.875rem;
    border: 1px solid var(--h-border);
    border-radius: 0.65rem;
    margin-bottom: 0.5rem;
}

.hearth-insight-active {
    color: var(--h-text);
    background: var(--h-success-bg);
    border-color: rgba(76, 154, 122, 0.25);
}

.hearth-insight-moderate {
    color: var(--h-text);
    background: var(--h-surface-bg);
    border-color: var(--h-border);
}

.hearth-insight-quiet {
    color: var(--h-text);
    background: var(--h-warm-bg);
    border-color: var(--h-warm-border);
}

.hearth-insight-window {
    font-size: 0.78rem;
    color: var(--h-muted);
}

/* New card-style insight items — preferred for new code.
   hearth-insight-row variants above remain for backward compatibility.   */
.hearth-insight-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    background: var(--h-surface-bg);
    border: 1px solid var(--h-border);
    border-radius: 0.65rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--h-text);
}

.hearth-insight-card-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.42rem;
    background: var(--h-border);
}

.hearth-insight-card--positive {
    background: var(--h-success-bg);
    border-color: rgba(76, 154, 122, 0.25);
}
.hearth-insight-card--positive .hearth-insight-card-dot {
    background: var(--h-success);
}

.hearth-insight-card--moderate {
    background: var(--h-surface-bg);
    border-color: var(--h-border);
}
.hearth-insight-card--moderate .hearth-insight-card-dot {
    background: var(--h-muted);
    opacity: 0.5;
}

.hearth-insight-card--quiet {
    background: var(--h-warm-bg);
    border-color: var(--h-warm-border);
}
.hearth-insight-card--quiet .hearth-insight-card-dot {
    background: var(--h-warning);
}

/* ==========================================================================
   Collapsible entry groups — <details>/<summary> on report page
   ========================================================================== */
.hearth-entry-group {
    border: 1px solid var(--h-border);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.hearth-entry-group summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: var(--h-surface-bg);
    cursor: pointer;
    user-select: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--h-navy);
    gap: 0.5rem;
}

.hearth-entry-group summary::-webkit-details-marker {
    display: none;
}

.hearth-entry-group summary::after {
    content: '›';
    font-size: 1.1rem;
    color: var(--h-muted);
    transform: rotate(90deg);
    display: inline-block;
    transition: transform 0.18s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.hearth-entry-group[open] summary::after {
    transform: rotate(270deg);
}

.hearth-entry-group summary:hover {
    background: var(--h-border);
}

.hearth-entry-group-body {
    padding: 0.5rem 0;
}

.hearth-entry-group-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--h-muted);
}

/* ==========================================================================
   Subject filter toggle pills — report page entry list
   ========================================================================== */
.hearth-subject-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.hearth-subject-filter-btn {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.hearth-subject-filter-btn:hover {
    border-color: var(--h-accent);
    color: var(--h-accent);
}

.hearth-subject-filter-btn.active {
    background: var(--h-accent);
    border-color: var(--h-accent);
    color: #fff;
}

/* ==========================================================================
   Chart section heading inside cards
   ========================================================================== */
.hearth-chart-heading {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-muted);
}

/* ==========================================================================
   In-app confirmation modal — used for destructive/irreversible actions
   such as finalising a report. Replaces browser-native confirm() dialogs.
   ========================================================================== */
.hearth-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hearth-confirm-backdrop[hidden] {
    display: none;
}

.hearth-confirm-panel {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.hearth-confirm-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--h-text);
    margin-bottom: 0.75rem;
}

.hearth-confirm-body {
    font-size: 0.9rem;
    color: var(--h-muted);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.hearth-confirm-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Hearth pebble loader — staged integration
   Step 1: CSS only. Do not remove the existing hearth overlay yet.
   ========================================================================== */

:root {
    --hearth-loader-bg: rgba(245, 242, 238, 0.42);
    --hearth-loader-text: #4b5563;
}

#hearth-pebble-loader {
    z-index: 10000;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: var(--hearth-loader-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#hearth-pebble-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#hearth-pebble-loader.is-paused *,
#hearth-pebble-loader.is-paused *::before,
#hearth-pebble-loader.is-paused *::after {
    animation-play-state: paused !important;
}

.hearth-pebble-stage {
    position: relative;
    width: 240px;
    height: 260px;
}

.hearth-pebble {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 120px;
    height: 110px;
    border-radius: 46% 54% 48% 52% / 52% 44% 56% 48%;
    background: #c8cdd3;
    box-shadow:
        inset -6px -8px 14px rgba(0,0,0,0.15),
        inset 4px 6px 10px rgba(255,255,255,0.08);
    overflow: hidden;
    animation:
        hearth-pebble-breathe 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite,
        hearth-pebble-morph 6s ease-in-out infinite;
}

.hearth-pebble::before,
.hearth-pebble::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.hearth-pebble::before {
    background: radial-gradient(circle at 40% 40%,
        rgba(255,110,55,0.9),
        rgba(255,185,70,0.75) 35%,
        rgba(255,220,110,0.4) 55%,
        transparent 70%
    );
    filter: blur(10px);
    animation: hearth-pebble-color-warm 7s ease-in-out infinite;
}

.hearth-pebble::after {
    background: radial-gradient(circle at 65% 60%,
        rgba(90,150,255,0.85),
        rgba(120,170,240,0.6) 40%,
        transparent 70%
    );
    filter: blur(12px);
    animation: hearth-pebble-color-cool 7.5s ease-in-out infinite;
}

.hearth-pebble-ripple {
    position: absolute;
    inset: 0;
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity;
}

.hearth-pebble-ripple::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,190,120,0.38);
    animation: hearth-pebble-ripple 3.6s ease-out infinite;
    transform-origin: center;
    will-change: transform, opacity;
}

.hearth-pebble-shadow {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 18px;
    background: radial-gradient(circle, rgba(0,0,0,0.25), transparent);
    filter: blur(8px);
    animation: hearth-pebble-shadow 3.6s ease-in-out infinite;
}

.hearth-pebble-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--hearth-loader-text);
    letter-spacing: 0.01em;
}

#hearth-pebble-loader.done .hearth-pebble-shadow,
#hearth-pebble-loader.done .hearth-pebble::before,
#hearth-pebble-loader.done .hearth-pebble::after {
    animation: none !important;
}

#hearth-pebble-loader.done .hearth-pebble-ripple {
    animation: hearth-pebble-collapse-ripple 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#hearth-pebble-loader.done .hearth-pebble-ripple::before {
    animation: none !important;
    opacity: 0.5;
    transform: scale(1);
}

#hearth-pebble-loader.done .hearth-pebble {
    animation: hearth-pebble-collapse 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#hearth-pebble-loader.done {
    animation: hearth-pebble-overlay-fade 220ms ease 260ms forwards;
}

@keyframes hearth-pebble-breathe {
    0%, 100% { transform: scale(0.94); }
    50% { transform: scale(1.10); }
}

@keyframes hearth-pebble-morph {
    0% {
        border-radius: 46% 54% 48% 52% / 52% 44% 56% 48%;
    }
    16% {
        border-radius: 34% 66% 42% 58% / 60% 38% 62% 40%;
    }
    33% {
        border-radius: 28% 72% 58% 42% / 66% 34% 66% 34%;
    }
    50% {
        border-radius: 36% 64% 60% 40% / 62% 36% 64% 38%;
    }
    66% {
        border-radius: 44% 56% 38% 62% / 48% 46% 54% 52%;
    }
    83% {
        border-radius: 30% 70% 52% 48% / 58% 34% 66% 42%;
    }
    100% {
        border-radius: 46% 54% 48% 52% / 52% 44% 56% 48%;
    }
}

@keyframes hearth-pebble-color-warm {
    0%   { transform: translate(-10%, 8%) scale(0.9); }
    15%  { transform: translate(-2%, 14%) scale(1.05); }
    30%  { transform: translate(10%, 6%) scale(1.15); }
    45%  { transform: translate(16%, -8%) scale(1.1); }
    60%  { transform: translate(4%, -14%) scale(1.2); }
    75%  { transform: translate(-8%, -6%) scale(1.05); }
    90%  { transform: translate(-14%, 4%) scale(0.95); }
    100% { transform: translate(-10%, 8%) scale(0.9); }
}

@keyframes hearth-pebble-color-cool {
    0%   { transform: translate(12%, -6%) scale(0.85); }
    15%  { transform: translate(6%, 6%) scale(1.05); }
    30%  { transform: translate(-6%, 14%) scale(1.2); }
    45%  { transform: translate(-14%, 6%) scale(1.1); }
    60%  { transform: translate(-4%, -10%) scale(1.25); }
    75%  { transform: translate(10%, -14%) scale(1.05); }
    90%  { transform: translate(16%, -2%) scale(0.95); }
    100% { transform: translate(12%, -6%) scale(0.85); }
}

@keyframes hearth-pebble-ripple {
    0% { transform: scale(0.8); opacity: 0; }
    40% { opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes hearth-pebble-shadow {
    0%, 100% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
    50% { transform: translateX(-50%) scale(1.1); opacity: 0.85; }
}

@keyframes hearth-pebble-collapse-ripple {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    55% {
        transform: scale(0.58);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.14);
        opacity: 0;
    }
}

@keyframes hearth-pebble-collapse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    55% {
        transform: scale(0.58);
        border-radius: 50%;
        opacity: 1;
    }
    100% {
        transform: scale(0.14);
        border-radius: 50%;
        opacity: 0;
    }
}

@keyframes hearth-pebble-overlay-fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* -----------------------------------------------------------------------
   Subject settings — group heading and strand pill
   ----------------------------------------------------------------------- */
.hearth-subject-group-heading {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-muted);
    margin-bottom: 0.25rem;
    margin-top: 1rem;
}
.hearth-subject-group-heading:first-child {
    margin-top: 0;
}

.hearth-subject-strand-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--h-navy);
    background-color: rgba(35, 61, 77, 0.07);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Subject picker — grouped card layout on entry create / edit forms.
   A subject card is always visible; its strand panel reveals on selection.
   ----------------------------------------------------------------------- */
.hearth-subject-card {
    border: 1px solid var(--h-border);
    border-radius: 0.5rem;
    background: var(--h-surface);
    padding: 0.6rem 0.8rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    user-select: none;
}
.hearth-subject-card:hover {
    border-color: var(--h-navy);
}
.hearth-subject-card.is-selected {
    border-color: var(--h-accent);
    background-color: rgba(254, 95, 85, 0.04);
}
.hearth-subject-card-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--h-navy);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.hearth-subject-card-checkbox {
    accent-color: var(--h-accent);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    cursor: pointer;
}
.hearth-subject-strands-panel {
    display: none;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--h-border);
}
.hearth-subject-card.is-selected .hearth-subject-strands-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Strand toggle pill — checkbox but styled as a pill badge */
.hearth-strand-toggle {
    display: inline-block;
}
.hearth-strand-toggle input[type="checkbox"] {
    display: none;
}
.hearth-strand-toggle label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--h-muted);
    background-color: var(--h-muted-bg);
    border: 1px solid var(--h-border);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}
.hearth-strand-toggle input[type="checkbox"]:checked + label {
    color: var(--h-navy);
    background-color: rgba(35, 61, 77, 0.1);
    border-color: var(--h-navy);
}

/* Display group heading inside the subject picker section */
.hearth-picker-group-heading {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-muted);
    margin-bottom: 0.5rem;
    margin-top: 1.25rem;
}
.hearth-picker-group-heading:first-child {
    margin-top: 0;
}

/* =========================================================
   PAGINATION — entries.php
   ========================================================= */
.hearth-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 1rem 0 0.5rem;
}

.hearth-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #fff;
    color: var(--h-navy);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.hearth-page-btn:hover {
    background: var(--h-accent);
    border-color: var(--h-accent);
    color: #fff;
    text-decoration: none;
}

.hearth-page-btn--current {
    background: var(--h-accent);
    border-color: var(--h-accent);
    color: #fff;
    cursor: default;
    pointer-events: none;
}

.hearth-page-btn--disabled {
    color: #adb5bd;
    border-color: #dee2e6;
    background: #f8f9fa;
    cursor: default;
    pointer-events: none;
}

.hearth-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    color: #adb5bd;
    font-size: 0.85rem;
}

.hearth-page-info {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--h-muted);
    white-space: nowrap;
}

/* ==========================================================================
   Dashboard — subject coverage ring and insight panel
   These classes are used only on dashboard.php. Kept here (rather than
   inline) so the dashboard $extraCss block only carries the intentional
   hearth-bar-track / hearth-bar-fill page-level overrides.
   ========================================================================== */

.hearth-ring-wrap {
    flex-shrink: 0;
}

.hearth-ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(
        var(--h-accent) 0% var(--coverage-pct, 0%),
        var(--h-border) var(--coverage-pct, 0%) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hearth-ring::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: var(--h-surface);
}

.hearth-ring-label {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.2;
}

.hearth-ring-pct {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--h-navy);
}

.hearth-ring-sub {
    display: block;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--h-muted);
    margin-top: 0.1rem;
}

.hearth-insight {
    background: var(--h-warm-bg);
    border: 1px solid var(--h-warm-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   Attention panel — "Entries to strengthen" dashboard section
   Warm-tinted card listing entries with completeness gaps.
   ========================================================================== */
.hearth-attention-item {
    background: var(--h-warm-bg);
}
.hearth-attention-item--bordered {
    border-bottom: 1px solid var(--h-warm-border);
}
.hearth-attention-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.hearth-attention-title {
    font-size: 0.875rem;
    color: var(--h-navy);
    text-decoration: none;
    max-width: 30ch;
}
.hearth-attention-title:hover,
.hearth-attention-title:focus {
    color: var(--h-accent);
    text-decoration: none;
}
.hearth-attention-gap {
    font-size: 0.75rem;
    color: var(--h-muted);
    font-style: italic;
}
.hearth-attention-age-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 500;
    background: var(--h-warning-bg);
    border: 1px solid var(--h-warm-border);
    color: var(--h-warning);
    border-radius: 2rem;
    padding: 0.1em 0.6em;
    white-space: nowrap;
}
.hearth-attention-cta {
    font-size: 0.75rem;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

/* ==========================================================================
   Onboarding callout — floats above the page layer below its target button.
   Wrap the button in .hearth-callout-wrap, add .hearth-callout after it.
   The wrap is the positioning anchor; the bubble is absolutely placed so it
   reserves no vertical space in the document flow.
   ========================================================================== */
.hearth-callout-wrap {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
}

/* Solid-background fallback (Firefox without flag, older Safari).
   opacity: 1 is explicit so reduced-motion users always see the bubble —
   the entrance animation's fill-mode only applies in the no-preference path.
   position: absolute removes it from flow so it never reserves layout space. */
.hearth-callout {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    z-index: 100;
    opacity: 1;
    background: #fdf8f3;
    border: 1px solid rgba(221, 208, 192, 0.65);
    border-radius: 18px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--h-navy);
    line-height: 1.45;
    white-space: normal;
    box-shadow:
        0 1px 2px  rgba(35, 61, 77, 0.06),
        0 4px 12px rgba(35, 61, 77, 0.09),
        0 8px 28px rgba(35, 61, 77, 0.07);
}

/* Translucent + blur for supporting browsers */
@supports (backdrop-filter: blur(1px)) {
    .hearth-callout {
        background: rgba(253, 248, 243, 0.88);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Upward-pointing pointer — border layer */
.hearth-callout::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 16px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: rgba(221, 208, 192, 0.65);
    border-top: none;
}

/* Upward-pointing pointer — fill layer (solid fallback colour so arrow
   interior is always opaque regardless of backdrop-filter support) */
.hearth-callout::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 17px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #fdf8f3;
    border-top: none;
}

/* Entrance keyframe — bubble materialises from just below its resting spot.
   Starts invisible, slightly low, and fractionally smaller; eases to full
   opacity, natural position, and full size. */
@keyframes hearth-callout-enter {
    0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Idle float keyframe — very gentle vertical drift after entrance settles. */
@keyframes hearth-float {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-3px); }
}

/* Compound animation — only for users with no reduced-motion preference.
   Timeline:
     0 ms        → bubble invisible (fill-mode: both holds the 0% keyframe)
     2800 ms     → entrance begins (fade in, rise, scale up)
     3350 ms     → entrance complete; idle float starts seamlessly
     3350 ms + ∞ → gentle float loops indefinitely
   The ::before / ::after pointer arrows follow the parent transform
   automatically as they are absolutely-positioned children. */
@media (prefers-reduced-motion: no-preference) {
    .hearth-callout {
        animation:
            hearth-callout-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.8s  both,
            hearth-float         2.8s  ease-in-out                     3.35s infinite;
    }
}

/* ==========================================================================
   Responsive — deployment polish
   ========================================================================== */

/* Safe-area inset for notched/island phones (applied unconditionally — env()
   resolves to 0 on devices without a safe area). */
body {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ==========================================================================
   Mobile / tablet shared — prevent iOS Safari input zoom (< 768 px)
   iOS auto-zooms the viewport when a focused input has font-size < 16px.
   Scoped inside .container to avoid affecting any print or overlay contexts.
   ========================================================================== */
@media (max-width: 767.98px) {

    .container input[type="text"],
    .container input[type="email"],
    .container input[type="password"],
    .container input[type="search"],
    .container select,
    .container textarea {
        font-size: 16px;
    }

    /* Touch-comfort: ensure small buttons and form controls are tall enough
       to be comfortably tapped. Does not affect desktop (max-width scoped). */
    .btn-sm {
        min-height: 36px;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    .form-select-sm,
    .form-control-sm {
        min-height: 36px;
        font-size: 16px;
    }

}

/* ==========================================================================
   Tablet breathing room (768px – 991px)
   Small adjustments only; no layout changes.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    .hearth-stat-value {
        font-size: 1.6rem;
    }

    .hearth-insights-bar {
        padding: 0.6rem 1.25rem;
    }

}

/* ==========================================================================
   Navbar icon — compact settings link shown on xs only
   ========================================================================== */
.hearth-navbar-icon {
    color: var(--h-muted);
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.1rem;
    transition: color 0.15s ease;
}
.hearth-navbar-icon:hover,
.hearth-navbar-icon:focus {
    color: var(--h-navy);
}

/* ==========================================================================
   Responsive — small screens (< 576 px / xs breakpoint)
   Fixes readability and wrapping issues at mobile widths.
   Desktop behaviour is unchanged.
   ========================================================================== */

@media (max-width: 575.98px) {

    /* Calmer app-like content margin on narrow screens */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Navbar: tighten right-hand action group on xs */
    .hearth-navbar-actions {
        gap: 0.5rem;
    }

    /* Page header: allow title + action buttons to stack on narrow screens;
       restore tighter bottom gap since the wrapped block is already taller. */
    .hearth-page-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    .hearth-page-actions {
        flex-shrink: 1;
    }

    /* Dashboard ring block: allow the ring and description text to stack
       vertically so the description remains legible at narrow widths.
       Applied via the .hearth-ring-block class on the container div. */
    .hearth-ring-block {
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* All hearth-card bodies: reduce p-4 (1.5rem) to 1.25rem on xs for a
       calmer, app-like containment. The stat tile rule below takes precedence
       via source order (equal specificity, later = winner). */
    .hearth-card > .card-body {
        padding: 1.25rem !important;
    }

    /* Dashboard stat tiles: reduce value size and tile body padding on xs.
       !important required here to win over .hearth-card > .card-body above. */
    .hearth-stat-value {
        font-size: 1.4rem;
    }
    .hearth-stat-link .card-body {
        padding: 1rem 0.5rem !important;
    }

    /* Dashboard child cards: reduce padding on xs */
    .hearth-child-card {
        padding: 1.25rem !important;
    }

    /* child.php card section headers: allow the heading + action button to
       wrap onto a second line rather than collide at very narrow widths.
       Applied via the .hearth-card-section-hdr class on each header div. */
    .hearth-card-section-hdr {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    /* child.php identity header: allow avatar + name + edit button to wrap
       cleanly on very small screens. hearth-child-header class added in child.php. */
    .hearth-child-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .hearth-child-header .btn {
        margin-left: 0 !important;
    }

    /* entry-create.php child context strip: tighten the avatar–name gap on xs */
    .hearth-child-context {
        gap: 0.625rem;
    }

    /* Entries toolbar: tighter gaps and full-width dropdowns when stacked */
    .hearth-search-row {
        gap: 0.35rem;
    }
    .hearth-search-row .hearth-child-select,
    .hearth-search-row select {
        max-width: 100%;
        width: 100%;
    }
    .hearth-filter-bar {
        gap: 0.4rem 0.6rem;
    }
    /* Each filter group takes its own row on xs so toggle buttons never clip */
    .hearth-filter-group {
        width: 100%;
    }
    .hearth-toolbar .btn {
        min-height: 36px;
    }

    /* Entries insights bar: 2×2 grid layout on xs, hide vertical dividers */
    .hearth-insights-stat {
        flex: 1 1 45%;
    }
    .hearth-insights-divider {
        display: none;
    }

    .hearth-form-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .hearth-form-actions .btn {
        flex: 0 1 auto;
    }

    /* entry.php evidence items: allow action pills to wrap below the file
       info on narrow phones so they don't squeeze the filename illegible. */
    .hearth-evidence-item {
        flex-wrap: wrap;
    }

    /* settings.php report-period select: full width on xs to match other
       form controls in the same card. */
    .hearth-select-period {
        max-width: 100% !important;
    }

    /* pagination: tighten top padding on xs so it sits closer to the list */
    .hearth-pagination {
        padding-top: 0.75rem;
    }

}

/* ==========================================================================
   Settings page — report period select
   Full-width on xs (overridden above); constrained to 300 px on sm+.
   ========================================================================== */
.hearth-select-period {
    max-width: 300px;
}

/* ==========================================================================
   Feedback type badges — admin-feedback.php
   ========================================================================== */
.hearth-feedback-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    line-height: 1.4;
}

/* ==========================================================================
   Feedback callout — dashboard support section
   ========================================================================== */
.hearth-feedback-callout {
    background: var(--h-warm-bg);
    border-radius: 10px;
    border: 1px solid var(--h-warm-border, #e8e0d8);
    padding: 1.25rem 1.5rem;
}

.hearth-feedback-callout summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hearth-feedback-callout summary::-webkit-details-marker {
    display: none;
}

.hearth-feedback-callout summary::after {
    content: '\25BC';
    font-size: 0.55rem;
    color: var(--h-muted);
    margin-left: auto;
    transition: transform 0.2s ease;
}

.hearth-feedback-callout[open] summary::after {
    transform: rotate(180deg);
}

.hearth-feedback-form textarea {
    resize: vertical;
    min-height: 80px;
}
/* ==========================================================================
   Premium App Shell — sticky translucent navbar (v1.5.0)
   Replaces the old .hearth-navbar button-row with a logo + wordmark
   plus a compact <details>-based account menu (no JS required).
   ========================================================================== */

.hearth-appshell-nav {
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(35, 61, 77, 0.08);
    position: sticky;
    top: 0;
    z-index: 900;
}

.hearth-appshell-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

.hearth-appshell-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
}

/* Logo icon — 32 px chosen for legibility at nav scale without crowding the wordmark */
.hearth-appshell-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.hearth-appshell-wordmark {
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-navy);
    letter-spacing: -0.2px;
    line-height: 1;
}

.hearth-appshell-wordmark-sub {
    font-weight: 400;
    color: var(--h-accent);
    font-size: 0.88em;
    margin-left: 0.15em;
}

/* Account dropdown — <details>/<summary> pattern, no JS dependency */
.hearth-appshell-dropdown {
    position: relative;
}

.hearth-appshell-dropdown > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    background: none;
    border: 1px solid var(--h-border);
    border-radius: 99px;
    padding: 0.28rem 0.7rem 0.28rem 0.35rem;
    cursor: pointer;
    color: var(--h-text);
    font-size: 0.82rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
    user-select: none;
}

.hearth-appshell-dropdown > summary::-webkit-details-marker,
.hearth-appshell-dropdown > summary::marker {
    display: none;
    content: '';
}

.hearth-appshell-dropdown > summary:hover {
    border-color: var(--h-navy);
    background: rgba(35, 61, 77, 0.04);
}

.hearth-appshell-dropdown-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--h-accent);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.hearth-appshell-chevron {
    width: 12px;
    height: 12px;
    color: var(--h-muted);
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.hearth-appshell-dropdown[open] .hearth-appshell-chevron {
    transform: rotate(180deg);
}

.hearth-appshell-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--h-border);
    border-radius: 0.75rem;
    box-shadow: 0 8px 28px rgba(35, 61, 77, 0.13);
    padding: 0.35rem 0;
    z-index: 1000;
}

.hearth-appshell-dropdown-header {
    padding: 0.55rem 1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--h-muted);
    border-bottom: 1px solid var(--h-border);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hearth-appshell-dropdown-panel a,
.hearth-appshell-dropdown-signout-btn {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--h-text);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
    border-radius: 0;
    box-sizing: border-box;
}

.hearth-appshell-dropdown-panel a:hover,
.hearth-appshell-dropdown-signout-btn:hover {
    background: var(--h-surface-bg);
    color: var(--h-navy);
}

.hearth-appshell-dropdown-divider {
    border: none;
    border-top: 1px solid var(--h-border);
    margin: 0.25rem 0;
}

.hearth-appshell-dropdown-signout-btn {
    color: var(--h-attention);
}

.hearth-appshell-dropdown-signout-btn:hover {
    background: var(--h-attention-bg);
    color: var(--h-attention);
}

/* Invisible backdrop to close dropdown on outside click */
.hearth-appshell-dropdown[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    cursor: default;
}

@media (max-width: 575.98px) {
    .hearth-appshell-inner {
        padding: 0.5rem 0.9rem;
    }

    .hearth-appshell-wordmark-sub {
        display: none;
    }

    .hearth-appshell-dropdown > summary {
        padding: 0.28rem 0.5rem 0.28rem 0.35rem;
    }
}

/* ==========================================================================
   Lab environment notice banner (controlled by APP_ENV in .env)
   Rendered by app/Views/partials/navbar.php when APP_ENV !== 'production'.
   Never shown in production. hearth-no-print keeps it out of PDF reports.
   ========================================================================== */

.hearth-lab-banner {
    background: var(--h-navy);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
    padding: 0.32rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.hearth-lab-banner-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.1rem 0.48rem;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ==========================================================================
   Auth page animated background blocks (v1.5.0)
   CSS-only floating brand-colour panels behind login / register cards.
   prefers-reduced-motion: keeps blocks visible but stops all animation.
   ========================================================================== */

.hearth-auth-wrap {
    position: relative;
    min-height: 100vh;
    background: #ffffff;
}

.hearth-auth-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hearth-auth-block {
    position: absolute;
    border-radius: 28px;
    opacity: 0.22;
}

.hearth-auth-block--1 {
    width: 340px;
    height: 340px;
    background: var(--h-brand-coral);
    top: -90px;
    left: -90px;
    animation: hearth-auth-float-a 18s ease-in-out infinite;
}

.hearth-auth-block--2 {
    width: 260px;
    height: 260px;
    background: var(--h-brand-blue);
    top: 55%;
    right: -70px;
    animation: hearth-auth-float-b 22s ease-in-out infinite;
}

.hearth-auth-block--3 {
    width: 190px;
    height: 190px;
    background: var(--h-brand-teal);
    bottom: -50px;
    left: 18%;
    animation: hearth-auth-float-c 20s ease-in-out infinite;
}

.hearth-auth-block--4 {
    width: 210px;
    height: 210px;
    background: var(--h-brand-green);
    top: 28%;
    left: -65px;
    animation: hearth-auth-float-a 25s ease-in-out infinite reverse;
}

.hearth-auth-block--5 {
    width: 150px;
    height: 150px;
    background: var(--h-brand-yellow);
    top: 6%;
    right: 10%;
    animation: hearth-auth-float-b 21s ease-in-out infinite reverse;
}

.hearth-auth-block--6 {
    width: 170px;
    height: 170px;
    background: var(--h-brand-purple);
    bottom: 8%;
    right: 4%;
    animation: hearth-auth-float-c 24s ease-in-out infinite;
}

@keyframes hearth-auth-float-a {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%       { transform: translate(22px, 32px) rotate(5deg); }
    66%       { transform: translate(-12px, 18px) rotate(-4deg); }
}

@keyframes hearth-auth-float-b {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%       { transform: translate(-28px, -22px) rotate(-6deg); }
    66%       { transform: translate(14px, -28px) rotate(4deg); }
}

@keyframes hearth-auth-float-c {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%       { transform: translate(28px, -14px) rotate(8deg); }
    66%       { transform: translate(-18px, 12px) rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hearth-auth-block {
        animation: none !important;
        opacity: 0.12;
    }
}

.hearth-auth-content {
    position: relative;
    z-index: 1;
}

.hearth-auth-brand {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--h-navy);
    letter-spacing: -0.3px;
}

.hearth-auth-brand-accent {
    color: var(--h-accent);
}

.hearth-auth-tagline {
    font-size: 0.78rem;
    color: var(--h-muted);
    margin-top: 0.15rem;
}

/* =========================================================================
   Readiness check items — Learning Readiness Check card on report.php
   Replaces the old inline style approach with design-token-aware classes.
   ========================================================================= */
.hearth-readiness-item {
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.65rem 0.875rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    border-left-width: 3px;
    border-left-style: solid;
    line-height: 1.45;
}
.hearth-readiness-item:last-child {
    margin-bottom: 0;
}
.hearth-readiness-item--danger {
    background-color: #fdf3f3;
    border-left-color: #c0392b;
    color: #5d1e1e;
}
.hearth-readiness-item--warning {
    background-color: var(--h-warning-bg);
    border-left-color: var(--h-warning);
    color: #5a4200;
}
.hearth-readiness-item--info {
    background-color: #f0f4ff;
    border-left-color: #5b80d0;
    color: #1a2e5a;
}

/* =========================================================================
   Grade tap buttons — 1–10 mastery score row (entry-create / entry-edit)
   ========================================================================= */
.hearth-grade-taprow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hearth-grade-tap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.65rem;
    border: 1.5px solid var(--h-border);
    background: var(--h-surface);
    color: var(--h-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.hearth-grade-tap:hover {
    border-color: var(--h-navy);
    background: var(--h-warm-bg);
    transform: translateY(-1px);
}

.hearth-grade-tap--active[data-score="1"],
.hearth-grade-tap--active[data-score="2"],
.hearth-grade-tap--active[data-score="3"] {
    background: var(--h-attention);
    border-color: var(--h-attention);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(192, 108, 108, 0.4);
    transform: translateY(-1px);
}

.hearth-grade-tap--active[data-score="4"],
.hearth-grade-tap--active[data-score="5"],
.hearth-grade-tap--active[data-score="6"] {
    background: var(--h-warning);
    border-color: var(--h-warning);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(192, 144, 80, 0.4);
    transform: translateY(-1px);
}

.hearth-grade-tap--active[data-score="7"],
.hearth-grade-tap--active[data-score="8"],
.hearth-grade-tap--active[data-score="9"],
.hearth-grade-tap--active[data-score="10"] {
    background: var(--h-success);
    border-color: var(--h-success);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(76, 154, 122, 0.4);
    transform: translateY(-1px);
}

.hearth-grade-tap-label {
    font-size: 0.82rem;
    color: var(--h-muted);
    margin-top: 0.3rem;
}

.hearth-grade-tap-score-num {
    font-weight: 700;
    color: var(--h-navy);
}

.hearth-grade-tap-score-name {
    font-weight: 500;
    color: var(--h-text);
}

/* =========================================================================
   Auto-title badge — inline indicator on the title field label
   ========================================================================= */
.hearth-auto-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 500;
    padding: 0.1rem 0.45rem;
    border-radius: 0.75rem;
    vertical-align: middle;
    letter-spacing: 0.02em;
    text-transform: none;
    font-style: normal;
}

.hearth-auto-badge--auto {
    background: var(--h-success-bg);
    color: var(--h-success);
    border: 1px solid rgba(76, 154, 122, 0.25);
}

.hearth-auto-badge--manual {
    background: var(--h-muted-bg);
    color: var(--h-muted);
    border: 1px solid var(--h-border);
}

/* =========================================================================
   Entry save success page — confirmation card
   ========================================================================= */
.hearth-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--h-success-bg);
    color: var(--h-success);
    flex-shrink: 0;
}

.hearth-success-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hearth-success-stat {
    text-align: center;
    padding: 0.75rem 1rem;
    background: var(--h-surface-bg);
    border: 1px solid var(--h-border);
    border-radius: 0.5rem;
    flex: 1 1 0;
    min-width: 7rem;
}

.hearth-success-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--h-navy);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.hearth-success-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--h-muted);
    margin-top: 0.2rem;
}

/* =========================================================================
   Learning Story Summary — stat grid and type pills (report.php)
   ========================================================================= */
.hearth-stat-grid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.hearth-stat-cell {
    text-align: center;
    min-width: 4.5rem;
}
.hearth-stat-number {
    font-size: 2rem;
    font-weight: 600;
    color: var(--h-navy);
    line-height: 1.1;
}
.hearth-stat-denom {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--h-muted);
}
.hearth-stat-label {
    font-size: 0.75rem;
    color: var(--h-muted);
    margin-top: 0.2rem;
}
/* ==========================================================================
   Guidance card — warm-tinted panel used for narrative and next-step prompts
   ========================================================================== */
.hearth-guidance-card {
    background: var(--h-warm-bg);
    border: 1px solid var(--h-warm-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}

.hearth-story-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hearth-story-type-pill {
    font-size: 0.8rem;
    background-color: var(--h-surface-bg);
    border: 1px solid var(--h-border);
    border-radius: 1rem;
    padding: 0.2rem 0.7rem;
    color: var(--h-text);
}
.hearth-story-type-count {
    font-weight: 600;
    color: var(--h-navy);
}

/* ==========================================================================
   Admin Operations Centre
   ========================================================================== */
.hearth-admin-subnav {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(35, 61, 77, 0.1);
    border-radius: 0.8rem;
    padding: 0.35rem;
    box-shadow: 0 8px 28px rgba(35, 61, 77, 0.06);
}

.hearth-admin-subnav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.hearth-admin-subnav__link {
    color: var(--h-navy);
    border-radius: 0.6rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.hearth-admin-subnav__link:hover,
.hearth-admin-subnav__link:focus {
    color: var(--h-navy);
    background: var(--h-warm-bg);
}

.hearth-admin-subnav__link:focus-visible,
.hearth-admin-action-link:focus-visible,
.hearth-admin-alert:focus-visible,
.hearth-admin-health-card:focus-visible {
    outline: 3px solid rgba(23, 190, 187, 0.36);
    outline-offset: 3px;
}

.hearth-admin-subnav__link.is-active {
    color: #fff;
    background: var(--h-navy);
    box-shadow: 0 6px 18px rgba(35, 61, 77, 0.16);
}

.hearth-admin-summary {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    border: 1px solid rgba(35, 61, 77, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top right, rgba(23, 190, 187, 0.14), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff8f5 100%);
    box-shadow: 0 12px 36px rgba(35, 61, 77, 0.09);
}

.hearth-admin-summary::before {
    content: '';
    position: absolute;
    right: -2.5rem;
    bottom: -3.5rem;
    width: 12rem;
    height: 8rem;
    border-radius: 2.5rem;
    background: rgba(254, 95, 85, 0.12);
    transform: rotate(-8deg);
}

.hearth-admin-summary--ready {
    border-color: rgba(76, 154, 122, 0.24);
}

.hearth-admin-summary--watch {
    border-color: rgba(192, 144, 80, 0.28);
}

.hearth-admin-summary--attention {
    border-color: rgba(192, 108, 108, 0.32);
}

.hearth-admin-summary > * {
    position: relative;
    z-index: 1;
}

.hearth-admin-summary h2 {
    color: var(--h-navy);
    letter-spacing: 0;
}

.hearth-admin-summary p {
    color: var(--h-muted);
    max-width: 42rem;
}

.hearth-admin-summary__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
    gap: 0.75rem;
    min-width: min(100%, 22rem);
}

.hearth-admin-summary__metrics div {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(35, 61, 77, 0.08);
    border-radius: 0.8rem;
    padding: 0.85rem;
    text-align: center;
}

.hearth-admin-summary__metrics span {
    display: block;
    color: var(--h-navy);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

.hearth-admin-summary__metrics small,
.hearth-admin-kicker {
    color: var(--h-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hearth-admin-alert-list,
.hearth-admin-env,
.hearth-admin-actions {
    display: grid;
    gap: 0.75rem;
}

.hearth-admin-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(35, 61, 77, 0.08);
    border-left: 4px solid var(--h-success);
    border-radius: 0.8rem;
    padding: 0.9rem 1rem;
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hearth-admin-alert:hover {
    color: inherit;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(35, 61, 77, 0.08);
}

.hearth-admin-alert--watch,
.hearth-admin-alert--unknown {
    border-left-color: var(--h-warning);
}

.hearth-admin-alert--attention {
    border-left-color: var(--h-attention);
}

.hearth-admin-alert__main {
    display: grid;
    gap: 0.15rem;
}

.hearth-admin-alert__main strong {
    color: var(--h-navy);
}

.hearth-admin-alert__main span {
    color: var(--h-muted);
    font-size: 0.9rem;
}

.hearth-admin-alert__status {
    display: grid;
    gap: 0.25rem;
    justify-items: end;
    text-align: right;
    white-space: nowrap;
}

.hearth-admin-alert__value {
    color: var(--h-navy);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.hearth-admin-env div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(35, 61, 77, 0.08);
    padding-bottom: 0.7rem;
}

.hearth-admin-env div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.hearth-admin-env span {
    color: var(--h-muted);
    font-size: 0.9rem;
}

.hearth-admin-env strong {
    color: var(--h-navy);
    text-align: right;
}

.hearth-admin-health-card {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.hearth-admin-health-card .hearth-card {
    border-top: 4px solid rgba(23, 190, 187, 0.7);
}

.hearth-admin-health-card:hover {
    color: inherit;
}

.hearth-admin-card-status {
    margin-top: 0.45rem;
}

.hearth-admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: min(100%, 36rem);
}

.hearth-admin-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    color: var(--h-navy);
    border: 1px solid rgba(35, 61, 77, 0.1);
    border-radius: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 248, 245, 0.72);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.hearth-admin-action-link::after {
    content: '>';
    color: var(--h-accent);
    margin-left: 0.75rem;
}

.hearth-admin-action-link:hover {
    color: var(--h-navy);
    background: #fff;
    box-shadow: 0 8px 22px rgba(35, 61, 77, 0.08);
    transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    .hearth-admin-summary {
        display: block;
    }

    .hearth-admin-summary__metrics {
        grid-template-columns: 1fr;
        margin-top: 1rem;
    }

    .hearth-admin-alert,
    .hearth-admin-env div {
        align-items: flex-start;
        flex-direction: column;
    }

    .hearth-admin-alert__status,
    .hearth-admin-env strong {
        justify-items: start;
        text-align: left;
    }

    .hearth-admin-actions {
        grid-template-columns: 1fr;
        min-width: 0;
    }
}