/* One class per UI pattern. If markup is about to be copied between
   components, extract a component and a class here instead. */

/* --- App shell: full-width top bar, left sidebar beneath it (desktop),
   mobile tab bar --- */

.hc-shell {
    --hc-topbar-h: 59px; /* 58px inner + 1px border, the sidebar sticks below it */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hc-shell-row {
    display: flex;
    flex: 1;
    min-width: 0;
}

.hc-sidebar {
    position: sticky;
    top: var(--hc-topbar-h);
    height: calc(100vh - var(--hc-topbar-h));
    width: 232px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: var(--hc-space-4) var(--hc-space-3);
    background-color: var(--hc-surface);
    border-right: 1px solid var(--hc-border-subtle);
    overflow-y: auto;
}

.hc-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--hc-topbar-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hc-border-subtle);
}

.hc-topbar-inner {
    display: flex;
    align-items: center;
    gap: var(--hc-space-4);
    height: 58px;
    padding: 0 var(--hc-space-5);
}

/* The homehogs wordmark: always lowercase, always pink, DejaVu Sans Bold. */
.hc-brand {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
    font-family: "DejaVu Sans", sans-serif;
    font-size: var(--hc-font-size-lg);
    font-weight: 700;
    color: var(--hc-brand);
    text-transform: lowercase;
    white-space: nowrap;
}

.hc-brand:hover {
    color: var(--hc-brand);
    text-decoration: none;
}

.hc-brand i {
    color: var(--hc-accent);
}

.hc-brand-logo {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.hc-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hc-nav-link {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
    padding: 12px var(--hc-space-3);
    border-radius: var(--hc-radius-sm);
    color: var(--hc-text-muted);
    font-size: var(--hc-font-size-base);
    font-weight: 550;
    white-space: nowrap;
}

.hc-nav-link i {
    width: 24px;
    text-align: center;
    font-size: 17px;
}

.hc-nav-link:hover {
    color: var(--hc-text);
    background-color: var(--hc-accent-soft);
    text-decoration: none;
}

.hc-nav-link.active {
    color: var(--hc-accent);
    background-color: var(--hc-accent-soft);
}

.hc-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
}

.hc-main {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--hc-space-6) var(--hc-space-5) var(--hc-space-7);
}

/* Mobile: bottom tab bar (Instagram-style); profile lives in the tab bar. */
.hc-tabbar {
    display: none;
}

@media (max-width: 960px) {
    .hc-sidebar {
        display: none;
    }

    /* The avatar moves into the tab bar as the Profile tab on mobile. */
    .hc-topbar-user {
        display: none;
    }

    .hc-main {
        padding: var(--hc-space-4) var(--hc-space-4) calc(84px + env(safe-area-inset-bottom));
    }

    /* Narrow phones: the logo alone marks the brand, the text would push the
       XP ring, home switcher and bell off the edge. */
    @media (max-width: 640px) {
        .hc-topbar .hc-brand span {
            display: none;
        }

        .hc-context-switch select {
            max-width: 120px;
        }
    }

    .hc-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        justify-content: space-around;
        background-color: var(--hc-tabbar-bg);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--hc-border-subtle);
        padding: var(--hc-space-2) var(--hc-space-2) calc(var(--hc-space-2) + env(safe-area-inset-bottom));
    }

    .hc-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 56px;
        padding: var(--hc-space-1);
        border-radius: var(--hc-radius-sm);
        color: var(--hc-text-muted);
        font-size: var(--hc-font-size-xs);
        font-weight: 550;
    }

    .hc-tab i {
        font-size: 1.15rem;
    }

    .hc-tab:hover {
        text-decoration: none;
        color: var(--hc-text);
    }

    .hc-tab.active {
        color: var(--hc-accent);
    }
}

/* --- Avatar + dropdown menu ----------------------------------------- */

.hc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--hc-radius-full);
    border: 1px solid var(--hc-border-subtle);
    background-color: var(--hc-accent-soft);
    color: var(--hc-accent);
    font-size: var(--hc-font-size-base);
    cursor: pointer;
}

.hc-avatar:hover {
    box-shadow: var(--hc-shadow-sm);
}

.hc-menu {
    position: relative;
}

/* <details>-based menus: hide the disclosure triangle, keep the avatar look. */
.hc-menu > summary {
    list-style: none;
}

.hc-menu > summary::-webkit-details-marker {
    display: none;
}

.hc-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.hc-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 61;
    min-width: 220px;
    background-color: var(--hc-surface);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow-pop);
    padding: var(--hc-space-2);
}

.hc-menu-header {
    padding: var(--hc-space-2) var(--hc-space-3);
    font-size: var(--hc-font-size-xs);
    color: var(--hc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid var(--hc-border-subtle);
    margin-bottom: var(--hc-space-2);
}

.hc-menu-item {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
    width: 100%;
    padding: var(--hc-space-2) var(--hc-space-3);
    border: none;
    border-radius: var(--hc-radius-sm);
    background: none;
    color: var(--hc-text);
    font-family: inherit;
    font-size: var(--hc-font-size-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.hc-menu-item i {
    width: 18px;
    text-align: center;
    color: var(--hc-text-muted);
}

.hc-menu-item:hover {
    background-color: var(--hc-accent-soft);
    color: var(--hc-text);
    text-decoration: none;
}

/* --- Full-screen menu page (mobile profile tab) ---------------------- */

.hc-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-1);
}

.hc-menu-row {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
    width: 100%;
    padding: var(--hc-space-3);
    border: none;
    border-radius: var(--hc-radius-sm);
    background: none;
    color: var(--hc-text);
    font-family: inherit;
    font-size: var(--hc-font-size-base);
    font-weight: 550;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

/* Rounded, inset highlight — hover only where hover exists, press feedback on touch. */
@media (hover: hover) {
    .hc-menu-row:hover {
        background-color: var(--hc-accent-soft);
        text-decoration: none;
        color: var(--hc-text);
    }
}

.hc-menu-row:active {
    background-color: var(--hc-accent-soft);
    text-decoration: none;
    color: var(--hc-text);
}

.hc-menu-row > i:first-child {
    width: 24px;
    text-align: center;
    color: var(--hc-accent);
}

.hc-menu-row .hc-menu-chevron {
    margin-left: auto;
    color: var(--hc-text-muted);
}

.hc-menu-row--danger,
.hc-menu-row--danger > i:first-child {
    color: var(--hc-danger);
}

/* --- Card --------------------------------------------------------- */

.hc-card {
    background-color: var(--hc-surface);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-lg);
    box-shadow: var(--hc-shadow-sm);
    padding: var(--hc-space-5);
}

.hc-card--link {
    display: block;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hc-card--link:hover {
    color: inherit;
    text-decoration: none;
    box-shadow: var(--hc-shadow);
    transform: translateY(-2px);
}

.hc-card-title {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
    font-size: var(--hc-font-size-sm);
    font-weight: 650;
    color: var(--hc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--hc-space-2);
}

.hc-card-title i {
    color: var(--hc-accent);
    font-size: var(--hc-font-size-base);
}

/* Suns stay sunny; everything else went pink with the brand. */
.hc-card-title i.fa-sun {
    color: var(--hc-highlight);
}

.hc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--hc-space-4);
}

/* --- Buttons ------------------------------------------------------ */

.hc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hc-space-2);
    min-height: 36px;
    padding: var(--hc-space-2) var(--hc-space-4);
    border: none;
    border-radius: var(--hc-radius-sm);
    background-color: var(--hc-surface-sunken);
    color: var(--hc-text);
    font-family: inherit;
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
    line-height: var(--hc-line-height);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.hc-btn:hover {
    background-color: color-mix(in srgb, var(--hc-surface-sunken) 90%, var(--hc-text));
}

/* Compact variant for buttons that sit inline with text. */
.hc-btn--sm {
    min-height: 28px;
    padding: var(--hc-space-1) var(--hc-space-3);
    font-size: var(--hc-font-size-xs);
}

/* Guided setup wizard: step trail, choice tiles, repeating rate rows. */
.hc-wizard-step--active {
    color: var(--hc-text);
    font-weight: 600;
}

.hc-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--hc-space-2);
    margin-top: var(--hc-space-4);
}

.hc-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hc-space-2);
    min-height: 72px;
    padding: var(--hc-space-3);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
    background-color: var(--hc-surface);
    color: var(--hc-text);
    font-family: inherit;
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hc-choice:hover {
    border-color: var(--hc-accent);
}

.hc-choice--selected {
    border-color: var(--hc-accent);
    background-color: var(--hc-accent-soft);
}

.hc-rate-row {
    padding: var(--hc-space-2) 0;
    border-bottom: 1px dashed var(--hc-border);
    margin-bottom: var(--hc-space-2);
}

.hc-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-space-2);
    min-height: 36px;
}

/* Loading state, applied by app.js on click/submit. The label only fades and
   the spinner only appears after 300ms, so instant actions never flicker. */
.hc-btn--loading {
    position: relative;
    pointer-events: none;
    animation: hc-btn-label-out 0s linear 0.3s forwards;
}

@keyframes hc-btn-label-out {
    to { color: transparent; }
}

.hc-btn--loading::after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    width: 16px;
    height: 16px;
    border: 2px solid var(--hc-text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: hc-btn-spin 0.7s linear infinite,
               hc-btn-spinner-in 0.15s ease 0.3s forwards;
}

.hc-btn--primary.hc-btn--loading::after {
    border-color: #ffffff;
    border-top-color: transparent;
}

@keyframes hc-btn-spin {
    to { transform: rotate(360deg); }
}

@keyframes hc-btn-spinner-in {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hc-btn--loading::after {
        animation: hc-btn-spinner-in 0.15s ease 0.3s forwards;
    }
}

/* Link-styled buttons: the global a:hover accent text must not bleed
   through, it made primary buttons unreadable on hover. */
a.hc-btn:hover {
    color: var(--hc-text);
    text-decoration: none;
}

a.hc-btn--primary:hover {
    color: var(--hc-on-accent);
}

.hc-btn:active {
    transform: scale(0.97);
}

.hc-btn:focus-visible,
.hc-icon-btn:focus-visible {
    outline: 2px solid var(--hc-accent);
    outline-offset: 2px;
}

.hc-btn--primary {
    background-color: var(--hc-accent);
    color: var(--hc-on-accent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hc-accent) 35%, transparent);
}

.hc-btn--primary:hover {
    background-color: var(--hc-accent-hover);
}

.hc-btn--block {
    display: flex;
    width: 100%;
}

.hc-btn--link {
    min-height: 0;
    border: none;
    background: none;
    padding: 0;
    color: var(--hc-accent);
    font-weight: 600;
}

.hc-btn--link:hover {
    background: none;
    color: var(--hc-accent-hover);
}

.hc-btn--danger {
    background-color: var(--hc-danger-soft);
    color: var(--hc-danger);
}

.hc-btn--danger:hover {
    background-color: color-mix(in srgb, var(--hc-danger-soft) 85%, var(--hc-danger));
}

/* Icon-only buttons for row actions (edit, delete, download). Always pair
   with title + aria-label — the icon is the only visible content. */
.hc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--hc-radius-sm);
    background: transparent;
    color: var(--hc-text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.hc-icon-btn:hover {
    background-color: var(--hc-surface-sunken);
    color: var(--hc-text);
}

.hc-icon-btn:active {
    transform: scale(0.94);
}

.hc-icon-btn--danger:hover {
    background-color: var(--hc-danger-soft);
    color: var(--hc-danger);
}

/* --- Badge -------------------------------------------------------- */

.hc-badge {
    display: inline-block;
    padding: var(--hc-space-1) var(--hc-space-2);
    border-radius: var(--hc-radius-full);
    font-size: var(--hc-font-size-xs);
    font-weight: 650;
    background-color: var(--hc-accent-soft);
    color: var(--hc-accent);
    white-space: nowrap;
}

.hc-badge--success {
    background-color: var(--hc-success-soft);
    color: var(--hc-success);
}

.hc-badge--danger {
    background-color: var(--hc-danger-soft);
    color: var(--hc-danger);
}

.hc-badge--warning {
    background-color: var(--hc-warning-soft);
    color: var(--hc-warning);
}

/* --- Forms -------------------------------------------------------- */

.hc-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-1);
    margin-bottom: var(--hc-space-4);
}

.hc-form-field--checkbox {
    flex-direction: row;
    align-items: center;
}

.hc-form-field--checkbox label {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
    font-weight: 450;
}

/* Home/property context dropdown in the top bar (only when the user belongs
   to more than one household). The form is the pill and the house icon sits
   inside it, next to the selected name. */
.hc-context-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-space-2);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-full);
    background-color: var(--hc-surface);
    padding-left: 14px;
    color: var(--hc-text-muted);
}

.hc-context-switch:hover,
.hc-context-switch:focus-within {
    border-color: var(--hc-accent);
}

.hc-context-switch select {
    border: none;
    background-color: transparent;
    color: var(--hc-text);
    padding: 6px 14px 6px 0;
    font: inherit;
    font-size: var(--hc-font-size-sm);
    font-weight: 550;
    cursor: pointer;
    max-width: 220px;
}

/* M365-style permission table (invite form, member access editor):
   one row per feature, View / Edit tickbox columns. */
.hc-perm-table {
    width: 100%;
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-sm);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.hc-perm-table th {
    text-align: left;
    font-size: var(--hc-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hc-text-muted);
    background: var(--hc-surface-subtle, rgba(0, 0, 0, 0.02));
    padding: var(--hc-space-2) var(--hc-space-3);
    border-bottom: 1px solid var(--hc-border-subtle);
}

.hc-perm-table td {
    padding: var(--hc-space-2) var(--hc-space-3);
    vertical-align: middle;
}

.hc-perm-table tr + tr td {
    border-top: 1px solid var(--hc-border-subtle);
}

.hc-perm-table .hc-perm-check {
    width: 64px;
    text-align: center;
}

.hc-perm-table th.hc-perm-check {
    text-align: center;
}

.hc-perm-name {
    font-weight: 550;
}

.hc-perm-name small {
    display: block;
    color: var(--hc-text-muted);
    font-weight: 400;
}

.hc-perm-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--hc-accent);
    cursor: pointer;
}

.hc-perm-table input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.hc-input {
    padding: var(--hc-space-2) var(--hc-space-3);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-sm);
    background-color: var(--hc-surface);
    color: var(--hc-text);
    font-family: inherit;
    font-size: var(--hc-font-size-base);
    line-height: var(--hc-line-height);
}

.hc-input:focus {
    border-color: var(--hc-accent);
    outline: 2px solid var(--hc-accent-soft);
    outline-offset: 0;
}

/* --- Selects --------------------------------------------------------
   Closed control: our own chevron, inset from the right edge by the same
   space the text has on the left (no browser-default arrow jammed in the
   corner). Works in every browser. */
select.hc-input,
.hc-context-switch select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--hc-space-3) center;
    background-size: 12px 8px;
    padding-right: calc(var(--hc-space-3) * 2 + 12px);
    cursor: pointer;
    /* Long values trim with an ellipsis; wrapped text in a dropdown always looks bad. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Open dropdown: styled to match the app instead of the browser default.
   Progressive enhancement — browsers without customizable selects
   (appearance: base-select) keep the native picker. */
@supports (appearance: base-select) {
    select.hc-input,
    .hc-context-switch select {
        appearance: base-select;
        background-image: none;
        padding-right: var(--hc-space-3);
    }

    select.hc-input::picker-icon,
    .hc-context-switch select::picker-icon {
        color: var(--hc-text-muted);
        /* pin to the right edge; the select's right padding gives it the same
           breathing room the text has on the left */
        margin-left: auto;
        padding-left: var(--hc-space-2);
    }

    select.hc-input::picker(select),
    .hc-context-switch select::picker(select) {
        appearance: base-select;
        border: 1px solid var(--hc-border-subtle);
        border-radius: var(--hc-radius-sm);
        background-color: var(--hc-surface);
        box-shadow: var(--hc-shadow-pop);
        padding: var(--hc-space-1);
        margin-top: 4px;
        max-width: min(360px, calc(100vw - 24px));
    }

    select.hc-input option,
    .hc-context-switch select option {
        display: flex;
        align-items: center;
        gap: var(--hc-space-2);
        padding: var(--hc-space-2) var(--hc-space-3);
        border-radius: calc(var(--hc-radius-sm) - 4px);
        font-size: var(--hc-font-size-base);
        color: var(--hc-text);
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    select.hc-input option:hover,
    select.hc-input option:focus,
    .hc-context-switch select option:hover,
    .hc-context-switch select option:focus {
        background-color: var(--hc-accent-soft);
    }

    select.hc-input option:checked,
    .hc-context-switch select option:checked {
        font-weight: 650;
    }

    select.hc-input option::checkmark,
    .hc-context-switch select option::checkmark {
        color: var(--hc-accent);
    }
}

.hc-validation-summary {
    color: var(--hc-danger);
    font-size: var(--hc-font-size-sm);
    margin: 0 0 var(--hc-space-3);
    padding-left: var(--hc-space-4);
}

.hc-validation-summary:empty {
    display: none;
}

.hc-validation-message {
    color: var(--hc-danger);
    font-size: var(--hc-font-size-sm);
}

/* --- Long forms ----------------------------------------------------- */

.hc-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: var(--hc-space-4);
}

.hc-form-grid .hc-form-field--full {
    grid-column: 1 / -1;
}

.hc-form-section-title {
    grid-column: 1 / -1;
    font-size: var(--hc-font-size-sm);
    font-weight: 650;
    color: var(--hc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--hc-space-3) 0 var(--hc-space-3);
    padding-bottom: var(--hc-space-1);
    border-bottom: 1px solid var(--hc-border-subtle);
}

.hc-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hc-space-3);
    margin-top: var(--hc-space-4);
}

/* --- Alerts / status ---------------------------------------------- */

.hc-alert {
    padding: var(--hc-space-3) var(--hc-space-4);
    border-radius: var(--hc-radius-sm);
    font-size: var(--hc-font-size-sm);
    margin-bottom: var(--hc-space-4);
    background-color: var(--hc-accent-soft);
    color: var(--hc-accent);
}

.hc-alert--success {
    background-color: var(--hc-success-soft);
    color: var(--hc-success);
}

.hc-alert--error {
    background-color: var(--hc-danger-soft);
    color: var(--hc-danger);
}

.hc-alert--warning {
    background-color: var(--hc-warning-soft);
    color: var(--hc-text);
}

.hc-alert--warning a {
    font-weight: 600;
}

/* --- Search box ------------------------------------------------------- */

.hc-search {
    position: relative;
    flex: 1;
    width: 100%;
    margin-bottom: var(--hc-space-4);
}

.hc-search > i {
    position: absolute;
    left: var(--hc-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--hc-text-muted);
    font-size: var(--hc-font-size-sm);
    pointer-events: none;
}

.hc-search input {
    width: 100%;
    padding-left: calc(var(--hc-space-3) * 2 + 1em);
    padding-right: calc(var(--hc-space-3) * 2 + 1em);
    border-radius: var(--hc-radius-full);
}

.hc-search input::-webkit-search-cancel-button {
    display: none;
}

.hc-search-clear {
    position: absolute;
    right: var(--hc-space-3);
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--hc-text-muted);
    cursor: pointer;
    padding: var(--hc-space-1);
}

.hc-search-clear:hover {
    color: var(--hc-text);
}

/* --- Toasts (top-right) --------------------------------------------- */

.hc-toast-host {
    position: fixed;
    top: calc(58px + var(--hc-space-3));
    right: var(--hc-space-4);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-2);
    max-width: min(360px, calc(100vw - 2 * var(--hc-space-4)));
}

.hc-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--hc-space-3);
    padding: var(--hc-space-3) var(--hc-space-4);
    background-color: var(--hc-surface);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow-pop);
    font-size: var(--hc-font-size-sm);
    animation: hc-toast-in 0.2s ease-out;
}

.hc-toast i {
    margin-top: 2px;
}

.hc-toast--success i {
    color: var(--hc-success);
}

.hc-toast--error i {
    color: var(--hc-danger);
}

.hc-toast-close {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--hc-text-muted);
    cursor: pointer;
    padding: 0 0 0 var(--hc-space-2);
}

@keyframes hc-toast-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Dropzone (Dropbox-style) ---------------------------------------- */

.hc-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hc-space-2);
    padding: var(--hc-space-6) var(--hc-space-4);
    border: 2px dashed var(--hc-border);
    border-radius: var(--hc-radius);
    background-color: var(--hc-surface-sunken);
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hc-dropzone i {
    font-size: 1.75rem;
    color: var(--hc-accent);
}

.hc-dropzone-title {
    font-weight: 650;
}

.hc-dropzone-hint {
    font-size: var(--hc-font-size-xs);
    color: var(--hc-text-muted);
}

.hc-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.hc-dropzone--active {
    border-color: var(--hc-accent);
    background-color: var(--hc-accent-soft);
}

/* Archived rows fade back but stay legible. */
.hc-row-archived {
    opacity: 0.55;
}

/* --- Modal dialog (delete-or-archive choices) ------------------------ */

.hc-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(22, 35, 58, 0.45);
    z-index: 300;
}

.hc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 2 * var(--hc-space-4)));
    background-color: var(--hc-surface);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow-pop);
    padding: var(--hc-space-5);
    z-index: 301;
}

/* Wider modal for embedded content (photos & receipts). */
.hc-modal--wide {
    width: min(680px, calc(100vw - 2 * var(--hc-space-4)));
    max-height: min(85vh, 720px);
    overflow-y: auto;
}

.hc-modal-close {
    position: absolute;
    top: var(--hc-space-3);
    right: var(--hc-space-3);
}

/* A section embedded in a modal drops its outer card chrome. */
.hc-modal .hc-section {
    margin-top: 0;
}

.hc-modal .hc-section .hc-card {
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Small image preview beside the file name in linked-document tables. */
.hc-doc-thumb-link {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-space-2);
}

.hc-doc-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: calc(var(--hc-radius-sm) - 4px);
    border: 1px solid var(--hc-border-subtle);
}

/* --- Upload tray (bottom-right progress popups) ----------------------- */

.hc-upload-tray {
    position: fixed;
    right: var(--hc-space-4);
    bottom: var(--hc-space-4);
    z-index: 190;
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-2);
    width: min(340px, calc(100vw - 2 * var(--hc-space-4)));
}

@media (max-width: 960px) {
    .hc-upload-tray {
        bottom: calc(92px + env(safe-area-inset-bottom));
    }
}

.hc-upload-item {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-2);
    padding: var(--hc-space-3) var(--hc-space-4);
    background-color: var(--hc-surface);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow-pop);
    font-size: var(--hc-font-size-sm);
    animation: hc-toast-in 0.2s ease-out;
}

.hc-upload-item-header {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
}

.hc-upload-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.hc-progress {
    height: 6px;
    border-radius: var(--hc-radius-full);
    background-color: var(--hc-border-subtle);
    overflow: hidden;
}

.hc-progress-bar {
    height: 100%;
    border-radius: var(--hc-radius-full);
    background-color: var(--hc-accent);
    transition: width 0.15s ease;
}

/* --- File input (fallback) ------------------------------------------- */

.hc-file-input {
    font-size: var(--hc-font-size-sm);
}

.hc-file-input::file-selector-button {
    margin-right: var(--hc-space-3);
    padding: var(--hc-space-2) var(--hc-space-4);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-full);
    background-color: var(--hc-surface);
    color: var(--hc-text);
    font-family: inherit;
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

/* --- Table -------------------------------------------------------- */

.hc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hc-font-size-sm);
}

.hc-table th {
    text-align: left;
    padding: var(--hc-space-2) var(--hc-space-3);
    color: var(--hc-text-muted);
    font-weight: 650;
    border-bottom: 1px solid var(--hc-border-subtle);
}

.hc-table td {
    padding: var(--hc-space-3);
    border-bottom: 1px solid var(--hc-border-subtle);
}

.hc-table .hc-table-actions {
    text-align: right;
    white-space: nowrap;
}

/* Mobile: each row becomes a stacked label/value block (the standard
   responsive-table pattern) — nothing ever overflows the card. */
@media (max-width: 640px) {
    .hc-table thead {
        display: none;
    }

    .hc-table tr {
        display: block;
        padding: var(--hc-space-3) 0;
        border-bottom: 1px solid var(--hc-border-subtle);
    }

    .hc-table tr:last-child {
        border-bottom: none;
    }

    .hc-table td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--hc-space-1) var(--hc-space-4);
        padding: 3px 0;
        border-bottom: none;
        text-align: right;
    }

    /* Sub-lines inside a cell (serial numbers, notes, descriptions) take
       their own full line instead of squeezing beside the value. */
    .hc-table td > div {
        flex-basis: 100%;
    }

    .hc-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: var(--hc-font-size-xs);
        font-weight: 650;
        color: var(--hc-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
    }

    .hc-table td:not([data-label]) {
        justify-content: flex-end;
    }

    .hc-table .hc-table-actions {
        padding-top: var(--hc-space-2);
    }
}

/* --- Key fact photos -------------------------------------------------- */

.hc-keyfact-photo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--hc-radius-sm);
    border: 1px solid var(--hc-border-subtle);
    display: block;
}

.hc-keyfact-photo-row {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
}

/* --- Pager (long lists page at ten) ---------------------------------- */

.hc-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--hc-space-3);
    margin-top: var(--hc-space-3);
}

.hc-pager-controls {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
}

.hc-pager-page {
    color: var(--hc-text-muted);
    white-space: nowrap;
}

/* --- Home dashboard (tip + widgets) ----------------------------------- */

/* Sunshine yellow, the visual language of "handy hint". */
.hc-home-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--hc-space-3);
    padding: var(--hc-space-4);
    margin-bottom: var(--hc-space-4);
    background-color: var(--hc-warning-soft);
    border-radius: var(--hc-radius-lg);
}

.hc-home-tip img {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    flex-shrink: 0;
}

.hc-home-tip-label {
    font-size: var(--hc-font-size-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hc-warning);
}

.hc-home-tip p {
    margin: var(--hc-space-1) 0 0;
}

.hc-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hc-space-4);
    align-items: start;
}

/* Every widget is the same height, iPhone-style; growing a widget makes it
   wider and its content richer, never taller. */
.hc-widget {
    grid-column: span 1;
    height: 240px;
    display: flex;
    flex-direction: column;
    background-color: var(--hc-surface);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-lg);
    box-shadow: var(--hc-shadow-sm);
    padding: var(--hc-space-4);
    overflow: hidden;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.hc-widget-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hc-widget-body .hc-widget-more {
    margin-top: auto;
    padding-top: var(--hc-space-2);
}

/* Charts inside widgets fit the fixed height rather than scaling with width. */
.hc-widget-chart {
    flex: 1;
    min-height: 0;
}

.hc-widget-chart svg {
    height: 100% !important;
    width: 100% !important;
}

.hc-widget--m {
    grid-column: span 2;
}

.hc-widget--l {
    grid-column: 1 / -1;
}

@media (max-width: 960px) {
    .hc-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hc-widget-grid {
        grid-template-columns: 1fr;
    }

    .hc-widget,
    .hc-widget--m {
        grid-column: span 1;
    }
}

.hc-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hc-space-2);
    margin-bottom: var(--hc-space-3);
}

.hc-widget-title {
    font-size: var(--hc-font-size-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hc-text-muted);
}

.hc-widget-title i {
    color: var(--hc-accent);
    margin-right: var(--hc-space-1);
}

.hc-widget-controls {
    display: inline-flex;
    gap: var(--hc-space-1);
}

/* iPhone-style wobble says "you're editing"; drags feel natural from it. */
.hc-widget--edit {
    cursor: grab;
    animation: hc-widget-wobble 0.35s ease-in-out infinite alternate;
}

/* While a drag is live: freeze the wobble (a moving transform makes drop
   targets jitter) and let only whole widgets receive drag events, so
   dragenter doesn't storm from every child element. */
.hc-widget-grid--dragging .hc-widget {
    animation: none;
}

.hc-widget-grid--dragging .hc-widget > * {
    pointer-events: none;
}

.hc-widget--dragging {
    opacity: 0.4;
    border-style: dashed;
    box-shadow: none;
}

@keyframes hc-widget-wobble {
    from { transform: rotate(-0.3deg); }
    to { transform: rotate(0.3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hc-widget--edit {
        animation: none;
    }
}

.hc-widget-hero {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hc-widget-stats {
    display: flex;
    gap: var(--hc-space-5);
    margin-bottom: var(--hc-space-2);
}

.hc-widget-bad {
    color: var(--hc-danger);
}

.hc-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-1);
}

.hc-widget-list a {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
    padding: var(--hc-space-1) 0;
    color: var(--hc-text);
}

.hc-widget-list i {
    width: 18px;
    text-align: center;
    color: var(--hc-text-muted);
}

.hc-widget-list-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--hc-font-size-sm);
}

.hc-widget-more {
    display: inline-block;
    margin-top: var(--hc-space-2);
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
}

.hc-widget-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hc-space-2);
}

.hc-widget-search {
    flex-shrink: 0;
}

/* --- Document folders (Dropbox-style rows) --------------------------- */

/* The folder name cell is a button so the whole label opens the folder. */
.hc-folder-open {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-space-2);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--hc-text);
    font: inherit;
    text-align: left;
}

.hc-folder-open i {
    color: var(--hc-accent);
    font-size: 18px;
}

.hc-folder-open:hover strong {
    color: var(--hc-accent);
}

/* Highlight while an OS file drag hovers the row (documentsPage.js). */
.hc-folder-row--drop > td {
    background-color: var(--hc-accent-soft);
}

/* Breadcrumb back into the folder list. */
.hc-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
    margin-bottom: var(--hc-space-3);
    font-weight: 600;
}

.hc-breadcrumb button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--hc-accent);
    font: inherit;
}

.hc-breadcrumb button:hover {
    color: var(--hc-accent-hover);
}

.hc-breadcrumb .hc-breadcrumb-sep {
    color: var(--hc-text-muted);
}

/* --- Empty state --------------------------------------------------- */

.hc-empty-state {
    text-align: center;
    padding: var(--hc-space-7) var(--hc-space-5);
    color: var(--hc-text-muted);
}

.hc-empty-state h3 {
    color: var(--hc-text);
}

/* --- Auth pages ---------------------------------------------------- */

/* Full-viewport centring for every pre-sign-in screen. */
.hc-auth-viewport {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--hc-space-4);
}

.hc-auth-card {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}

/* Logo + product name at the top of the auth card. */
.hc-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hc-space-2);
    margin-bottom: var(--hc-space-4);
}

.hc-auth-brand img {
    width: 52px;
    height: 52px;
}

.hc-auth-brand span {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--hc-text);
    letter-spacing: -0.01em;
}

.hc-auth-links {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-2);
    margin-top: var(--hc-space-4);
    font-size: var(--hc-font-size-sm);
}

/* Card footer: divider then a centred row of quiet links, the shape most
   sign-in screens settle on. */
.hc-auth-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--hc-space-3);
    margin-top: var(--hc-space-5);
    padding-top: var(--hc-space-4);
    border-top: 1px solid var(--hc-border-subtle);
    font-size: var(--hc-font-size-sm);
}

.hc-auth-footer-dot {
    color: var(--hc-text-muted);
}

/* --- Back link (Apple-style ‹ Parent) -------------------------------- */

.hc-back {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-space-2);
    margin-bottom: var(--hc-space-3);
    color: var(--hc-accent);
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
}

.hc-back i {
    font-size: var(--hc-font-size-xs);
}

.hc-back:hover {
    color: var(--hc-accent-hover);
    text-decoration: none;
}

.hc-back--mobile {
    display: none;
}

@media (max-width: 960px) {
    .hc-back--mobile {
        display: inline-flex;
    }
}

/* --- Page header ---------------------------------------------------- */

.hc-page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hc-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--hc-space-5);
}

.hc-page-header p {
    margin: 0;
}

/* --- Fact grid (label/value pairs) ---------------------------------- */

.hc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--hc-space-4);
}

.hc-fact-label {
    font-size: var(--hc-font-size-xs);
    font-weight: 650;
    color: var(--hc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hc-fact-value {
    font-size: var(--hc-font-size-base);
}

/* --- Detail sections ------------------------------------------------- */

.hc-section {
    margin-top: var(--hc-space-5);
}

.hc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hc-space-3);
    margin-bottom: var(--hc-space-3);
}

.hc-section-header h2 {
    margin: 0;
}

/* Grouped actions on the right of a section header keep their spacing when
   they wrap onto separate lines on mobile. */
.hc-section-header > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--hc-space-2);
}

.hc-inline-form {
    background-color: var(--hc-surface-sunken);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-sm);
    padding: var(--hc-space-4);
    margin-top: var(--hc-space-3);
}

/* Add/edit forms open at the TOP of their card: the user sees the form
   immediately instead of having to know to scroll past existing records.
   DOM order stays as-is, only the visual order changes. */
.hc-card:has(> .hc-inline-form) {
    display: flex;
    flex-direction: column;
}

.hc-card > .hc-inline-form {
    order: -1;
    margin-top: 0;
    margin-bottom: var(--hc-space-3);
}

/* Same rule for add forms that aren't styled as inline forms (inventory). */
.hc-card:has(> .hc-card-form) {
    display: flex;
    flex-direction: column;
}

.hc-card > .hc-card-form {
    order: -1;
    margin-top: 0;
    margin-bottom: var(--hc-space-3);
}

/* --- Photo grid ------------------------------------------------------- */

.hc-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--hc-space-3);
}

.hc-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--hc-radius-sm);
    overflow: hidden;
    border: 1px solid var(--hc-border-subtle);
}

.hc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hc-photo-remove {
    position: absolute;
    top: var(--hc-space-2);
    right: var(--hc-space-2);
    padding: var(--hc-space-1) var(--hc-space-2);
    border: none;
    border-radius: var(--hc-radius-sm);
    background-color: color-mix(in srgb, var(--hc-ink) 70%, transparent);
    color: #ffffff;
    font-size: var(--hc-font-size-xs);
    cursor: pointer;
}

/* --- Blazor framework UI ------------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--hc-space-3) var(--hc-space-5);
    background-color: var(--hc-warning-soft);
    color: var(--hc-text);
    box-shadow: var(--hc-shadow);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: var(--hc-space-3);
    top: var(--hc-space-2);
    cursor: pointer;
}

.blazor-error-boundary {
    padding: var(--hc-space-4);
    border-radius: var(--hc-radius-sm);
    background-color: var(--hc-danger-soft);
    color: var(--hc-danger);
}

.validation-errors {
    color: var(--hc-danger);
    font-size: var(--hc-font-size-sm);
}

/* --- Renewal radar ------------------------------------------------- */

.hc-radar-card {
    padding: var(--hc-space-2);
}

.hc-radar-row {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
    padding: var(--hc-space-3);
    border-radius: var(--hc-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.hc-radar-row:hover {
    background-color: var(--hc-surface-sunken);
}

.hc-radar-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hc-accent-soft);
    color: var(--hc-accent);
    font-size: 15px;
}

.hc-radar-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.hc-radar-title {
    font-weight: 600;
}

.hc-radar-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: none;
}

.hc-radar-date {
    font-size: var(--hc-font-size-sm);
    color: var(--hc-text-muted);
}

/* --- Notification bell ---------------------------------------------- */

.hc-bell-wrap {
    position: relative;
}

.hc-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--hc-radius-full);
    background: none;
    color: var(--hc-text-muted);
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hc-bell:hover {
    background-color: var(--hc-accent-soft);
    color: var(--hc-text);
}

.hc-bell-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--hc-radius-full);
    background-color: var(--hc-danger);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--hc-surface);
}

.hc-bell-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.hc-bell-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 91;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    overflow-y: auto;
    background-color: var(--hc-surface);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow-pop);
    padding: var(--hc-space-2);
}

.hc-bell-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hc-space-3);
    padding: var(--hc-space-2) var(--hc-space-3);
    border-bottom: 1px solid var(--hc-border-subtle);
    margin-bottom: var(--hc-space-2);
}

.hc-bell-empty {
    padding: var(--hc-space-3);
    margin: 0;
}

.hc-bell-row {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
    padding: var(--hc-space-2) var(--hc-space-3);
    border-radius: var(--hc-radius-sm);
    color: inherit;
    text-decoration: none;
}

.hc-bell-row:hover {
    background-color: var(--hc-surface-sunken);
    text-decoration: none;
}

.hc-bell-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 13px;
}

.hc-bell-row-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hc-bell-row-title {
    font-weight: 600;
    font-size: var(--hc-font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-bell-view-all {
    display: block;
    text-align: center;
    padding: var(--hc-space-3);
    margin-top: var(--hc-space-1);
    border-top: 1px solid var(--hc-border-subtle);
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
}

/* --- Property valuation --------------------------------------------- */

.hc-valuation-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hc-space-4);
    flex-wrap: wrap;
}

.hc-valuation-figure {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}

.hc-valuation-deltas {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--hc-space-2);
}

/* Card on /properties: main area links to the property, the strip below
   links to its valuation on /costs. */
.hc-property-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hc-property-card:hover {
    box-shadow: var(--hc-shadow);
    transform: translateY(-2px);
}

.hc-property-card-main {
    display: block;
    padding: var(--hc-space-5);
    color: inherit;
    flex: 1;
}

.hc-property-card-main:hover {
    color: inherit;
    text-decoration: none;
}

.hc-valuation-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hc-space-3);
    padding: var(--hc-space-3) var(--hc-space-5);
    border-top: 1px solid var(--hc-border-subtle);
    background-color: var(--hc-surface-sunken);
    border-radius: 0 0 var(--hc-radius-lg) var(--hc-radius-lg);
    color: inherit;
}

.hc-valuation-strip:hover {
    text-decoration: none;
    color: inherit;
    background-color: var(--hc-accent-soft);
}

.hc-valuation-strip-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hc-valuation-strip-value {
    font-weight: 650;
    font-size: var(--hc-font-size-sm);
}

/* --- Address finder (property setup) ------------------------------- */

.hc-address-finder {
    display: flex;
    gap: var(--hc-space-2);
}

.hc-address-finder .hc-input {
    flex: 1;
}

/* --- Moving on (archive + handover) --------------------------------- */

.hc-moving-on {
    margin-top: var(--hc-space-5);
}

.hc-moving-on-section {
    max-width: 560px;
}

.hc-moving-on-section + .hc-moving-on-section {
    margin-top: var(--hc-space-5);
    padding-top: var(--hc-space-5);
    border-top: 1px solid var(--hc-border-subtle);
}

.hc-transfer-appliances {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-2);
    margin: var(--hc-space-3) 0 var(--hc-space-4);
}

.hc-check-row {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
    font-size: var(--hc-font-size-sm);
    cursor: pointer;
}

.hc-check-row input[type="checkbox"] {
    accent-color: var(--hc-accent);
    width: 16px;
    height: 16px;
}

.hc-transfer-form {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-3);
    align-items: flex-start;
}

.hc-transfer-form .hc-form-field {
    width: 100%;
    max-width: 320px;
}

/* --- XP ring (header) + level-up ------------------------------------ */

.hc-xp {
    display: inline-flex;
    align-items: center;
}

.hc-xp-ring {
    width: 34px;
    height: 34px;
    display: block;
}

.hc-xp-track {
    fill: none;
    stroke: var(--hc-border-subtle);
    stroke-width: 3;
}

.hc-xp-progress {
    fill: none;
    stroke: var(--hc-accent);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.hc-xp-level {
    fill: var(--hc-text);
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

.hc-levelup {
    text-align: center;
}

.hc-levelup-badge svg {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--hc-space-3);
    display: block;
}

.hc-levelup-badge .hc-xp-level {
    font-size: 15px;
}

.hc-levelup-full {
    stroke: var(--hc-accent);
}

.hc-levelup-actions {
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Email-in address (Settings) ------------------------------------- */

.hc-inbox-address {
    padding: var(--hc-space-2) var(--hc-space-3);
    background-color: var(--hc-surface-sunken);
    border-radius: var(--hc-radius-sm);
    font-size: var(--hc-font-size-sm);
    word-break: break-all;
}

/* --- Assistant chat --------------------------------------------------- */

.hc-chat-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 95;
    width: 56px;
    height: 56px;
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-full);
    background-color: var(--hc-surface);
    color: var(--hc-accent);
    font-size: 22px;
    cursor: pointer;
    box-shadow: var(--hc-shadow-pop);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.hc-chat-fab:hover {
    transform: scale(1.06);
}

/* The homehog is the chat button: it sits in the bubble and idles away. It
   ages like it does everywhere else, and the head grows by ~87% from level 1
   to 30, so the box is sized to keep a baby readable and an old hog inside the
   56px bubble. pointer-events off so every click lands on the button. */
.hc-chat-fab .hc-pig {
    width: 46px;
    height: 46px;
    margin: 0 auto;
    pointer-events: none;
}

.hc-chat-title {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
}

.hc-chat-avatar {
    width: 34px;
    height: 34px;
}

/* Pops back in when the chat closes. */
.hc-chat-fab {
    animation: hc-chat-fab-in 0.18s ease-out;
}

@keyframes hc-chat-fab-in {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* The panel takes the bubble's corner and grows out of it: it starts as a
   bubble-sized circle at the exact FAB position and morphs into the chat. */
.hc-chat-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 96;
    width: 390px;
    max-width: calc(100vw - 40px);
    height: 600px;
    max-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    background-color: var(--hc-surface);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-lg);
    box-shadow: var(--hc-shadow-pop);
    overflow: hidden;
    transform-origin: calc(100% - 28px) calc(100% - 28px);
    animation: hc-chat-morph 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes hc-chat-morph {
    0% { transform: scale(0.14); border-radius: 50%; opacity: 0.4; }
    55% { border-radius: 28px; }
    100% { transform: scale(1); border-radius: var(--hc-radius-lg); opacity: 1; }
}

.hc-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hc-space-3);
    padding: var(--hc-space-3) var(--hc-space-4);
    border-bottom: 1px solid var(--hc-border-subtle);
}

.hc-chat-messages {
    flex: 1;
    min-height: 0; /* a flex child won't scroll without this, it just grows */
    overflow-y: auto;
    /* The conversation is the only thing that scrolls: reaching either end
       must not start dragging the page behind it. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--hc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-3);
}

.hc-chat-msg--user {
    align-self: flex-end;
    text-align: right;
    max-width: 85%;
}

.hc-chat-msg--assistant {
    align-self: flex-start;
    max-width: 90%;
}

.hc-chat-msg-author {
    font-size: var(--hc-font-size-xs);
    font-weight: 650;
    color: var(--hc-text-muted);
    margin-bottom: 2px;
}

.hc-chat-bubble {
    display: inline-block;
    text-align: left;
    padding: var(--hc-space-2) var(--hc-space-3);
    border-radius: var(--hc-radius);
    background-color: var(--hc-surface-sunken);
    font-size: var(--hc-font-size-sm);
    line-height: 1.5;
}

.hc-chat-msg--user .hc-chat-bubble {
    background-color: var(--hc-accent-soft);
}

.hc-chat-bullet {
    padding-left: var(--hc-space-4);
    position: relative;
}

.hc-chat-bullet::before {
    content: "\2022";
    position: absolute;
    left: var(--hc-space-2);
}

.hc-chat-gap {
    height: var(--hc-space-2);
}

.hc-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hc-space-2);
    padding: 0 var(--hc-space-4) var(--hc-space-3);
}

.hc-chat-chip {
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-full);
    background-color: var(--hc-surface);
    color: var(--hc-text);
    font-size: var(--hc-font-size-xs);
    font-weight: 550;
    padding: 6px 12px;
    cursor: pointer;
}

.hc-chat-chip:hover {
    background-color: var(--hc-accent-soft);
    border-color: var(--hc-accent);
}

.hc-chat-input-row {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
    padding: var(--hc-space-3) var(--hc-space-4);
    border-top: 1px solid var(--hc-border-subtle);
}

.hc-chat-input-row .hc-input {
    flex: 1;
}

.hc-chat-send {
    color: var(--hc-accent);
    font-size: 17px;
}

/* Hover inverts it rather than washing it grey like a plain icon button:
   the pink moves from the plane to the pad behind it. */
.hc-chat-send:hover:not(:disabled) {
    background-color: var(--hc-accent);
    color: var(--hc-on-accent);
}

.hc-chat-send:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Typing indicator: three pulsing dots. */
.hc-chat-thinking {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.hc-chat-thinking span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--hc-text-muted);
    animation: hc-chat-dot 1.2s ease-in-out infinite;
}

.hc-chat-thinking span:nth-child(2) { animation-delay: 0.15s; }
.hc-chat-thinking span:nth-child(3) { animation-delay: 0.3s; }

@keyframes hc-chat-dot {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

/* Whenever the bottom tab bar is showing, the bubble sits above it. */
@media (max-width: 960px) {
    .hc-chat-fab {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

/* Mobile: the chat takes the whole screen, standard for support widgets.
   Sized to the device rather than the layout viewport: dvh tracks the browser
   chrome as it hides and shows, so the input row never ends up under it. */
@media (max-width: 640px) {
    .hc-chat-panel {
        inset: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        z-index: 120; /* above the tab bar */
        padding-bottom: env(safe-area-inset-bottom);
        animation: hc-chat-slide-up 0.25s ease-out; /* full screen slides up instead of morphing */
    }
}

@keyframes hc-chat-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hc-chat-thinking span {
        animation: none;
    }

    .hc-chat-fab,
    .hc-chat-panel {
        animation: none;
    }
}

/* --- AI photo analysis ----------------------------------------------- */

/* Shown while the vision model reads an uploaded photo. */
.hc-ai-banner {
    display: flex;
    align-items: center;
    gap: var(--hc-space-2);
    margin: var(--hc-space-3) 0;
    color: var(--hc-accent);
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
}

.hc-ai-banner i {
    animation: hc-ai-pulse 1.2s ease-in-out infinite;
}

@keyframes hc-ai-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.9); }
}

/* The inputs the AI is about to fill shimmer until the answer lands. */
.hc-ai-analyzing .hc-input {
    color: transparent;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--hc-surface-sunken) 25%,
        color-mix(in srgb, var(--hc-surface) 70%, var(--hc-surface-sunken)) 50%,
        var(--hc-surface-sunken) 75%);
    background-size: 200% 100%;
    animation: hc-ai-input-shimmer 1.4s ease-in-out infinite;
}

@keyframes hc-ai-input-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hc-ai-banner i,
    .hc-ai-analyzing .hc-input {
        animation: none;
    }
}

/* --- Skeleton loading (shimmer) --------------------------------------- */

.hc-skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--hc-surface-sunken);
    border-radius: var(--hc-radius-sm);
}

.hc-skeleton--circle {
    border-radius: 50%;
}

.hc-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--hc-surface) 70%, transparent),
        transparent);
    animation: hc-shimmer 1.4s ease-in-out infinite;
}

@keyframes hc-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .hc-skeleton::after {
        animation: none;
    }
}

.hc-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: var(--hc-space-3);
}

.hc-skeleton-header {
    margin-bottom: var(--hc-space-5);
}

.hc-skeleton-row {
    display: flex;
    gap: var(--hc-space-4);
    align-items: center;
}

.hc-skeleton-row--head {
    padding-bottom: var(--hc-space-2);
    border-bottom: 1px solid var(--hc-border-subtle);
}

.hc-skeleton-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--hc-space-4);
}

/* --- Progress page + badges ------------------------------------------ */

.hc-progress-hero {
    display: flex;
    align-items: center;
    gap: var(--hc-space-5);
}

.hc-progress-hero h2,
.hc-progress-hero p {
    margin: 0 0 var(--hc-space-1);
}

/* The hero ring frames the pig instead of a number, so it's sized to hold one. */
.hc-progress-pigring {
    position: relative;
    display: grid;
    place-items: center;
    width: 168px;
    height: 168px;
    flex: none;
}

.hc-progress-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Stroke 3 was drawn for a 96px ring; at 168px it reads as a hoop. */
.hc-progress-pigring .hc-xp-track,
.hc-progress-pigring .hc-xp-progress {
    stroke-width: 2;
}

.hc-progress-badges-title {
    margin-top: var(--hc-space-6);
}

.hc-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--hc-space-3);
}

.hc-badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hc-space-2);
    padding: var(--hc-space-4) var(--hc-space-2);
    border: 1px solid var(--hc-border-subtle);
    border-radius: var(--hc-radius-lg);
    background-color: var(--hc-surface);
    font-family: inherit;
    color: var(--hc-text);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.hc-badge-tile:hover {
    box-shadow: var(--hc-shadow-sm);
    transform: translateY(-1px);
}

.hc-badge-tile--locked {
    opacity: 0.45;
    filter: grayscale(1);
}

.hc-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--hc-accent-soft);
    color: var(--hc-accent);
    font-size: 19px;
    flex: none;
}

.hc-badge-icon--big {
    width: 64px;
    height: 64px;
    font-size: 26px;
    margin: 0 auto var(--hc-space-3);
}

.hc-badge-name {
    font-size: var(--hc-font-size-sm);
    font-weight: 600;
    text-align: center;
}

.hc-badge-earned {
    display: flex;
    align-items: center;
    gap: var(--hc-space-3);
    text-align: left;
    padding: var(--hc-space-2) 0;
}

.hc-badge-earned p {
    margin: 0;
}

/* --- Print (lawyer pack and any report) ----------------------------- */

@media print {
    .hc-sidebar,
    .hc-topbar,
    .hc-tabbar,
    .hc-toast-host,
    .hc-no-print {
        display: none !important;
    }

    .hc-main {
        max-width: none;
        padding: 0;
    }

    .hc-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
}

/* --- The homehog: idle pig avatar (see js/pig.js) --- */
.hc-pig {
    display: block;
    flex-shrink: 0;
}

.hc-pig svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hc-pig--head {
    width: 40px;
    height: 40px;
}

.hc-pig--full {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

/* Ambient motion: always running, the pig is never completely still. */
@keyframes hc-pig-floatbob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.hc-pig [data-p="float"] {
    animation: hc-pig-floatbob 3.6s ease-in-out infinite;
}

@keyframes hc-pig-breathe {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.025) scaleX(.995); }
}

.hc-pig [data-p="breathe"] {
    animation: hc-pig-breathe 3.4s ease-in-out infinite;
    transform-origin: 150px 210px;
    transform-box: view-box;
}

/* Transient actions, fired on random timers by pig.js. */
@keyframes hc-pig-blink {
    0%, 100% { transform: scaleY(1); }
    45%, 60% { transform: scaleY(.08); }
}

@keyframes hc-pig-nod {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(4px); }
    58% { transform: translateY(-2px); }
    80% { transform: translateY(1px); }
}

@keyframes hc-pig-sway {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(4deg); }
    75% { transform: rotate(-4deg); }
}

@keyframes hc-pig-hop {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-26px); }
    55% { transform: translateY(0); }
    70% { transform: translateY(-7px); }
    85% { transform: translateY(0); }
}

@keyframes hc-pig-wag {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(-26deg); }
}

@keyframes hc-pig-eartw {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-13deg); }
    60% { transform: rotate(3deg); }
}

@keyframes hc-pig-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(3.5deg); }
    75% { transform: rotate(-3.5deg); }
}

@keyframes hc-pig-sniff {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(1.5px) scale(1.05); }
}

@keyframes hc-pig-yawn {
    0%, 100% { transform: scaleY(1); }
    40%, 60% { transform: scaleY(1.9) scaleX(1.1); }
}

.hc-pig .a-blink { animation: hc-pig-blink .34s ease-in-out; }
.hc-pig .a-nod { animation: hc-pig-nod .9s ease-in-out; }
.hc-pig .a-sway { animation: hc-pig-sway 1.1s ease-in-out; }
.hc-pig .a-hop { animation: hc-pig-hop .95s cubic-bezier(.3,.7,.4,1); }
.hc-pig .a-wag { animation: hc-pig-wag .45s ease-in-out; }
.hc-pig .a-ear { animation: hc-pig-eartw .5s ease-in-out; }
.hc-pig .a-wiggle { animation: hc-pig-wiggle .7s ease-in-out; }
.hc-pig .a-sniff { animation: hc-pig-sniff .18s ease-in-out 3; }
.hc-pig .a-yawn { animation: hc-pig-yawn 1.1s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
    .hc-pig [data-p="float"],
    .hc-pig [data-p="breathe"],
    .hc-pig .a-blink,
    .hc-pig .a-nod,
    .hc-pig .a-sway,
    .hc-pig .a-hop,
    .hc-pig .a-wag,
    .hc-pig .a-ear,
    .hc-pig .a-wiggle,
    .hc-pig .a-sniff,
    .hc-pig .a-yawn {
        animation: none;
    }
}

/* --- Naming the homehog --- */
.hc-pig-namer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hc-space-3);
    text-align: center;
}

/* What the pig says back: a bubble with a tail pointing up at its snout. */
.hc-pig-speech {
    position: relative;
    max-width: 34ch;
    margin: 0;
    padding: var(--hc-space-3) var(--hc-space-4);
    background-color: var(--hc-accent-soft);
    border-radius: var(--hc-radius-lg);
    font-weight: 550;
}

.hc-pig-speech::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--hc-accent-soft);
}

.hc-pig-namer-hello {
    margin: 0;
    font-size: var(--hc-font-size-lg);
}

.hc-pig-namer-form {
    display: flex;
    gap: var(--hc-space-2);
    width: 100%;
    max-width: 340px;
}

.hc-pig-namer-form .hc-input {
    flex: 1;
    min-width: 0;
    text-align: center;
}

/* The pig leads the progress card, then steps aside on narrow screens. */
/* The pig sits inside the ring. Its artwork is bottom-heavy (the shadow sits
   near the foot of the viewBox), so it's nudged up to look centred in the
   circle rather than measured centred. */
.hc-progress-pigring .hc-pig--full {
    width: 116px;
    height: 116px;
    margin: 0;
    transform: translateY(-5px);
}

@media (max-width: 640px) {
    .hc-progress-hero {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Full-screen AI analysing overlay --- */
.hc-ai-overlay {
    position: fixed;
    inset: 0;
    z-index: 400; /* over modals: nothing should interrupt the analysis */
    width: 100vw;
    height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--hc-space-5);
    background-color: color-mix(in srgb, var(--hc-bg) 88%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: hc-ai-overlay-in 0.2s ease-out;
}

@keyframes hc-ai-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hc-ai-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hc-space-2);
    text-align: center;
    max-width: 34ch;
}

.hc-ai-overlay-card h2 {
    margin: var(--hc-space-3) 0 0;
}

.hc-ai-overlay-card p {
    margin: 0;
}

.hc-ai-overlay-step {
    font-weight: 550;
    color: var(--hc-accent);
    min-height: 1.5em;
    animation: hc-ai-step-in 0.3s ease-out;
}

@keyframes hc-ai-step-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* The pig waits inside a slowly sweeping ring. */
.hc-ai-overlay-pig {
    position: relative;
    display: grid;
    place-items: center;
    width: 168px;
    height: 168px;
}

.hc-ai-overlay-pig .hc-pig--head {
    width: 116px;
    height: 116px;
}

.hc-ai-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--hc-radius-full);
    border: 3px solid var(--hc-border-subtle);
    border-top-color: var(--hc-accent);
    animation: hc-ai-ring-spin 1.4s linear infinite;
}

@keyframes hc-ai-ring-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hc-ai-overlay,
    .hc-ai-overlay-step {
        animation: none;
    }

    .hc-ai-ring {
        animation-duration: 4s;
    }
}