/*
 * HOMEi navigation — the approved redesign (handoff «تحسينات قائمة Homei-2»).
 *
 * Sizes, spacing, radii, colours and states below are transcribed from the
 * design files, not re-interpreted. Every directional rule uses logical
 * properties (inline-start/end, padding-inline, inset-inline) so the SAME
 * component renders correctly in Arabic RTL and English LTR with no
 * duplicated ruleset.
 *
 * Scope: topbar + sidebar + mobile chrome + the General Settings cards page.
 * Nothing here touches page content styling.
 */

:root {
    /* Brand — taken from the official logo. */
    --hn-orange: #f28126;
    /* Shared roles read from the token layer (tokens.css, HO-3104): the
       brand tints, the page and card surfaces, the primary text, the danger
       pair. --hn-faint (gray-400, 2.54:1) was painted as TEXT seven times;
       de-emphasis is --ho-ink-muted. --hn-faint-2/-3 and --hn-pin stay as
       the handoff set them: keyboard hints and pin glyphs, decorative, and
       flagged in the 2026-09-10 review rather than silently darkened. */
    --hn-orange-bg: var(--ho-accent-soft);
    --hn-orange-soft: var(--ho-accent-soft);
    --hn-orange-border: #f8d5b4;
    --hn-orange-text: var(--ho-accent-ink);
    --hn-navy: #101c3d;

    /* Surfaces & borders */
    --hn-page: var(--ho-surface-sunken);
    --hn-surface: var(--ho-surface);
    --hn-surface-2: var(--ho-surface-sunken);
    --hn-border: var(--ho-line);
    --hn-border-soft: #f0f1f3;
    --hn-border-faint: #f4f5f7;

    /* Text */
    --hn-text: var(--ho-ink);
    --hn-text-strong: #1f2937;
    --hn-text-2: #3f4654;
    --hn-text-3: #4b5563;
    --hn-muted: var(--ho-ink-muted);
    --hn-faint: var(--ho-ink-muted);
    --hn-faint-2: #a3a8b0;
    --hn-faint-3: #c3c7cd;
    --hn-pin: #dfe2e7;

    --hn-danger: var(--ho-danger-line);
    --hn-danger-bg: var(--ho-danger-soft);
    --hn-danger-border: #fecaca;

    --hn-shadow-dropdown: 0 14px 36px rgb(16 28 61 / 14%);
    --hn-shadow-panel: 0 16px 44px rgb(16 28 61 / 16%);
    --hn-shadow-fly: 0 12px 34px rgb(16 28 61 / 14%);
    --hn-shadow-drawer: 0 0 40px rgb(16 28 61 / 25%);
    --hn-shadow-sheet: 0 -10px 40px rgb(16 28 61 / 20%);
    --hn-scrim: rgb(16 28 61 / 35%);

    /* Shell redesign mockups (docs/design/shell-2026-09): a 68px bar, a
       208px column, a 72px rail. */
    --hn-topbar-h: 68px;
    /* Where the chrome ends: the loading bar and the offline banner hang
       from here (the phone header is taller; see below). */
    --hn-head-h: 68px;
    --hn-rail-w: 72px;
    --hn-col-w: 13rem;
    /* The phone bottom bar without its safe-area padding; the assistant's
       floating button is lifted clear of it (assistant.css). */
    --hn-bottomnav-h: 68px;
    --hn-drawer-w: 300px;
}

/*
 * Dark mode is not part of the handoff (it is a light-only design), but the
 * panel ships a theme switcher, so the same tokens are remapped onto
 * Filament's own greys instead of leaving the chrome unreadable.
 */
.dark {
    --hn-surface-2: var(--ho-surface-raised);
    --hn-border-soft: var(--gray-800);
    --hn-border-faint: var(--gray-800);
    --hn-orange-border: rgb(242 129 38 / 40%);
    --hn-text-strong: var(--gray-100);
    --hn-text-2: var(--gray-300);
    --hn-text-3: var(--gray-300);
    --hn-faint-2: var(--gray-500);
    --hn-faint-3: var(--gray-600);
    --hn-pin: var(--gray-700);
    --hn-danger-border: rgb(220 38 38 / 40%);
}

/* ══════════════════════════════════════════════════════════════════════
   Layout shell — 56px topbar instead of Filament's 64px
   ══════════════════════════════════════════════════════════════════════ */

.fi-body .fi-topbar-ctn,
.fi-body .fi-topbar {
    height: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.fi-body .fi-topbar-ctn {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    /*
     * Filament clips this container horizontally. The dropdowns, the bottom
     * sheets and the full-screen search all live inside it, so the clip has
     * to go or they are cut off at the 56px bar.
     */
    overflow: visible;
}

.hn-topbar {
    background: var(--hn-surface);
    border-block-end: 1px solid var(--hn-border);
}

.hn-topbar-row {
    height: var(--hn-topbar-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding-inline: 20px;
}

@media (max-width: 1023.98px) {
    .hn-topbar-row {
        min-height: 60px;
        height: auto;
        gap: 8px;
        padding-inline: 12px;
    }
}

/* Logo — house mark + wordmark (Helvetica bold), both brand orange. The
   mark is `fill: currentColor`, so this one `color` paints both. */
.hn-logo {
    display: flex;
    align-items: center;
    color: var(--hn-orange);
    flex-shrink: 0;
    line-height: 1;
    text-decoration: none;
    border-radius: 8px;
}

.hn-logo:hover {
    color: var(--hn-orange);
}

.hn-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Mockup: a 34px mark, a 25px wordmark, the © above the word's start. */
.hn-brand-mark {
    display: block;
    block-size: 34px;
    inline-size: auto;
    aspect-ratio: 1390 / 1403;
    flex-shrink: 0;
}

.hn-brand-word {
    position: relative;
    padding-block-start: 6px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* The mockup draws the © at 11px; the 12px type floor (TypeFloorTest)
   keeps it at --ho-text-xs. */
.hn-brand-word sup {
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: -10px;
    font-size: var(--ho-text-xs);
    line-height: 1;
}

.hn-logo-drawer .hn-brand-mark {
    block-size: 28px;
}

.hn-logo-drawer .hn-brand-word {
    font-size: 21px;
}

/* The brand slot is the sidebar column's width, so the search after it
   starts where the page content does; the rail toggle closes the slot. */
.hn-brandbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .hn-brandbar {
        gap: 12px;
        inline-size: calc(var(--hn-col-w) - 20px);
    }

    .hn-brandbar .hn-iconbtn {
        margin-inline-start: auto;
    }

    /* Rail: the house mark alone, then the toggle. */
    .hn-brandbar-rail {
        inline-size: auto;
    }

    .hn-brandbar-rail .hn-brand-word {
        display: none;
    }
}

/* 38×38 outline button: the rail toggle, the folded search, «+», the bell. */
.hn-iconbtn {
    position: relative;
    inline-size: 38px;
    block-size: 38px;
    border: 1px solid var(--hn-border);
    background: var(--hn-surface);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hn-text-2);
    padding: 0;
    flex-shrink: 0;
}

/* Chrome glyphs: 19px, stroke 1.8 (set on each SVG). */
.hn-ico {
    inline-size: 19px;
    block-size: 19px;
    flex-shrink: 0;
}

.hn-flip {
    transform: scaleX(-1);
}

.hn-iconbtn:hover,
.hn-iconbtn[aria-expanded='true'] {
    background: var(--hn-surface-2);
    color: var(--hn-text);
}

.hn-iconbtn-bare {
    border-color: transparent;
    background: transparent;
    color: var(--hn-text-3);
    position: relative;
}

.hn-chev-toggle {
    transition: transform 0.2s;
}

.hn-topbar-search {
    position: relative;
    /* Compact: 210px, giving way to the breadcrumb down to 150px. */
    flex: 0 1 210px;
    min-inline-size: 150px;
}

.hn-search-box {
    inline-size: 100%;
    block-size: 38px;
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 12px 8px;
    background: var(--hn-surface-2);
    color: var(--hn-muted);
}

.hn-search-ic {
    inline-size: 17px;
    block-size: 17px;
    flex-shrink: 0;
}

.hn-search-box input::placeholder {
    color: var(--hn-muted);
}

.hn-search-box:focus-within {
    border-color: var(--hn-muted);
    background: var(--hn-surface);
}

/* The icon the box folds into below 1400px. */
.hn-search-fold {
    display: none;
}

@media (max-width: 1399.98px) {
    .hn-topbar-search {
        flex: 0 0 auto;
        min-inline-size: 0;
    }

    .hn-search-fold {
        display: flex;
    }

    .hn-search-box {
        display: none;
    }

    /* Opened from the icon (or ⌘K): the same box, over the bar. */
    .hn-search-open .hn-search-box {
        display: flex;
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 300px;
        z-index: 61;
        background: var(--hn-surface);
        box-shadow: var(--hn-shadow-dropdown);
    }

    .hn-topbar-search:not(.hn-search-open) .hn-search-results {
        display: none !important;
    }
}

.hn-search-box input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--hn-text-strong);
    min-inline-size: 0;
    padding: 0;
}

.hn-kbd {
    font-size: var(--ho-text-xs);
    color: var(--hn-muted);
    border: 1px solid var(--hn-border);
    background: var(--hn-surface);
    border-radius: 6px;
    padding: 1px 6px;
    font-family: Helvetica, Arial, sans-serif;
    flex-shrink: 0;
}

.hn-search-results {
    position: absolute;
    inset-block-start: 44px;
    inset-inline-start: 0;
    inline-size: 340px;
    max-block-size: 340px;
    overflow-y: auto;
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    box-shadow: var(--hn-shadow-dropdown);
    padding: 6px;
    z-index: 60;
}

.hn-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.hn-search-result:hover {
    background: var(--hn-orange-soft);
}

.hn-search-result-label {
    flex: 1;
    min-inline-size: 0;
    font-size: 12.5px;
    color: var(--hn-text-strong);
    white-space: normal;
    overflow-wrap: anywhere;
}

.hn-search-result-dept {
    font-size: var(--ho-text-xs);
    color: var(--hn-faint);
    flex-shrink: 0;
}

.hn-empty {
    padding: 14px 10px;
    font-size: 12.5px;
    color: var(--hn-faint);
    text-align: center;
}

/*
 * Breadcrumb — takes the free width. When it runs out: the middle crumbs
 * shrink to an ellipsis first (flex-shrink 20), then the home crumb drops
 * out (`.hn-crumbs-tight`, set by the crumb's own fit() when a middle crumb
 * bottoms out), and the current page is truncated last. Every crumb keeps
 * its full name in `title`.
 */
.hn-crumbs {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--hn-muted);
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* 13px chevrons along the reading order: «‹» in Arabic, «›» in English
   (the glyph is chosen in the view, per locale). */
.hn-crumb-sep {
    inline-size: 13px;
    block-size: 13px;
    color: var(--hn-muted);
    flex-shrink: 0;
}

.hn-crumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--hn-muted);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    font: inherit;
    flex: 0 0 auto;
}

.hn-crumb:hover {
    background: var(--hn-border-faint);
    color: var(--hn-orange-text);
}

.hn-crumb-mid {
    flex: 0 20 auto;
    min-inline-size: 24px;
}

.hn-crumb-last {
    color: var(--ho-ink);
    font-weight: 700;
    flex: 0 0.05 auto;
    min-inline-size: 60px;
}

.hn-crumbs-tight .hn-crumb-home,
.hn-crumbs-tight .hn-crumb-sep-home {
    display: none;
}

.hn-topbar-end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* «مساعد هومي» — soft blue pill; solid blue while its panel is open. */
.hn-ai-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    block-size: 38px;
    padding-inline: 12px 14px;
    border-radius: 999px;
    background: var(--ho-info-soft);
    color: var(--ho-info-ink);
    border: 1px solid color-mix(in srgb, var(--ho-info-line) 22%, transparent);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.hn-ai-btn:hover {
    background: color-mix(in srgb, var(--ho-info-line) 14%, var(--hn-surface));
    border-color: color-mix(in srgb, var(--ho-info-line) 40%, transparent);
}

.hn-ai-btn[aria-expanded='true'] {
    background: var(--ho-info-line);
    border-color: var(--ho-info-line);
    color: #fff;
}

/* Dark: the solid blue is light, so the words on it go dark. */
.dark .hn-ai-btn[aria-expanded='true'] {
    color: var(--ho-surface);
}

.hn-ai-btn:focus-visible {
    outline: 2px solid var(--ho-info-line);
    outline-offset: 2px;
}

/* «+» quick add — a dropdown on desktop, a bottom sheet on phones; the
   rows are the same partial (partials/quick-add-list). */
.hn-quick-anchor {
    position: relative;
    flex-shrink: 0;
}

.hn-pop-add {
    inline-size: 250px;
    inset-inline-start: 0;
    inset-inline-end: auto;
    inset-block-start: 46px;
    overflow: hidden;
}

.hn-quick {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.hn-quick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 40px;
    padding-inline: 8px 10px;
    border-radius: 9px;
    color: var(--hn-text-2);
    font-size: 13.5px;
    text-decoration: none;
}

.hn-quick-row:hover,
.hn-quick-row:focus-visible {
    background: var(--hn-surface-2);
    color: var(--hn-text);
}

.hn-quick-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    background: var(--hn-surface-2);
    color: var(--hn-muted);
    flex-shrink: 0;
}

.hn-quick-row:hover .hn-quick-ic,
.hn-quick-row:focus-visible .hn-quick-ic {
    background: var(--ho-accent-soft);
    color: var(--hn-orange);
}

.hn-quick-label {
    flex: 1;
    min-inline-size: 0;
}

.hn-quick-ic svg {
    inline-size: 17px;
    block-size: 17px;
}

/* Phone sheet: a 3-column grid of tiles — sunken ground, a 44px tinted
   icon square, a 12.5px bold label (mockup). Tints are the token roles. */
.hn-quick-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0;
}

.hn-quick-tiles .hn-quick-row {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-block-size: 0;
    padding: 14px 6px;
    border-radius: 14px;
    background: var(--hn-surface-2);
    color: var(--ho-ink);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

.hn-quick-tiles .hn-quick-label {
    flex: none;
}

.hn-quick-tiles .hn-quick-ic {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 12px;
}

.hn-quick-tiles .hn-quick-ic svg {
    inline-size: 20px;
    block-size: 20px;
}

.hn-quick-tiles .hn-quick-task .hn-quick-ic,
.hn-quick-tiles .hn-quick-expense .hn-quick-ic {
    background: var(--ho-accent-soft);
    color: var(--hn-orange);
}

.hn-quick-tiles .hn-quick-customer .hn-quick-ic,
.hn-quick-tiles .hn-quick-leave .hn-quick-ic {
    background: var(--ho-info-soft);
    color: var(--ho-info-ink);
}

.hn-quick-tiles .hn-quick-request .hn-quick-ic,
.hn-quick-tiles .hn-quick-disbursement .hn-quick-ic {
    background: var(--ho-success-soft);
    color: var(--ho-success-ink);
}

/* Bell: the standard 38px icon button (.hn-iconbtn); only the count differs. */
.hn-count {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    /* The mockup's 20px count at the top inline-end corner with a 2px
       surface ring. White on the bright brand orange is 2.64:1, so the fill
       is the contrast-safe accent fill (5.18:1 under white). */
    display: grid;
    place-items: center;
    min-inline-size: 20px;
    block-size: 20px;
    padding-inline: 5px;
    background: var(--ho-accent-fill);
    color: var(--ho-accent-on-fill);
    font-size: var(--ho-text-xs);
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    border: 2px solid var(--hn-surface);
    font-variant-numeric: tabular-nums;
    font-family: Helvetica, Arial, sans-serif;
}

/* Account trigger: avatar + name + role in one pill; below 1250px the
   avatar alone. */
.hn-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
    padding-inline-end: 12px;
    border: 1px solid var(--hn-border);
    border-radius: 999px;
    background: var(--hn-surface);
    cursor: pointer;
    font: inherit;
    color: inherit;
    max-inline-size: 240px;
    flex-shrink: 0;
}

.hn-account:hover,
.hn-account[aria-expanded='true'] {
    background: var(--hn-surface-2);
}

.hn-account-meta {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    line-height: 1.25;
    text-align: start;
}

.hn-account-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--hn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hn-account-role {
    font-size: var(--ho-text-xs);
    color: var(--hn-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1249.98px) {
    .hn-account {
        padding-inline-end: 4px;
    }

    .hn-account-meta {
        display: none;
    }
}

.hn-avatar {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    background: var(--hn-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
}

.hn-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ── Notifications dropdown ─────────────────────────────────────────── */

.hn-pop {
    position: absolute;
    inset-block-start: 42px;
    inset-inline-end: -8px;
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 14px;
    box-shadow: var(--hn-shadow-panel);
    z-index: 70;
}

.hn-pop-notif {
    inline-size: 380px;
    max-block-size: 70vh;
    overflow-y: auto;
}

.hn-pop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-block-end: 1px solid var(--hn-border);
    position: sticky;
    inset-block-start: 0;
    background: var(--hn-surface);
}

.hn-pop-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--hn-text);
}

.hn-pill {
    background: var(--hn-orange-bg);
    color: var(--hn-orange-text);
    font-size: var(--ho-text-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: Helvetica, Arial, sans-serif;
}

.hn-pop-actions {
    margin-inline-start: auto;
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.hn-link {
    color: var(--hn-orange-text);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
}

.hn-link:hover {
    text-decoration: underline;
}

.hn-link-danger {
    color: var(--hn-danger);
}

.hn-notif {
    display: flex;
    gap: 10px;
    padding: 13px 16px;
    border-block-end: 1px solid var(--hn-border-faint);
}

.hn-notif:hover {
    background: var(--hn-orange-soft);
}

.hn-notif-read {
    opacity: 0.55;
}

.hn-dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--hn-orange);
    margin-block-start: 6px;
    flex-shrink: 0;
}

.hn-notif-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--hn-text);
    line-height: 1.5;
}

.hn-notif-sub {
    font-size: 12px;
    color: var(--hn-muted);
    margin-block-start: 1px;
}

.hn-notif-time {
    font-size: var(--ho-text-xs);
    color: var(--hn-faint);
    margin-block-start: 4px;
}

.hn-notif-action {
    margin-block-start: 8px;
    background: var(--hn-surface);
    border: 1px solid var(--hn-orange-border);
    color: var(--hn-orange-text);
    border-radius: 8px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.hn-notif-action:hover {
    background: var(--hn-orange-bg);
    color: var(--hn-orange-text);
}

.hn-x {
    inline-size: 20px;
    block-size: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--hn-faint-3);
    cursor: pointer;
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
}

.hn-x:hover {
    background: var(--hn-border-faint);
    color: var(--hn-text-3);
}

.hn-notif-empty {
    padding: 34px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--hn-faint);
}

/* ── Account dropdown ───────────────────────────────────────────────── */

.hn-pop-acct {
    inline-size: 270px;
    padding: 8px;
    inset-inline-end: 0;
    inset-block-start: 46px;
}

.hn-acct-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--hn-border);
    margin-block-end: 8px;
}

.hn-acct-avatar {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background: var(--hn-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.hn-acct-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.hn-acct-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hn-text);
}

.hn-acct-role {
    font-size: var(--ho-text-xs);
    color: var(--hn-faint);
}

.hn-seg {
    display: flex;
    gap: 6px;
    padding: 2px 4px 8px;
}

.hn-seg-lang {
    padding: 0 4px 8px;
}

.hn-seg-btn {
    flex: 1;
    block-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hn-border);
    background: transparent;
    color: var(--hn-muted);
    border-radius: 9px;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
}

.hn-seg-lang .hn-seg-btn {
    block-size: 34px;
}

.hn-seg-btn.hn-on {
    background: var(--hn-orange-bg);
    color: var(--hn-orange-text);
    border-color: var(--hn-orange-border);
    font-weight: 600;
}

.hn-logout {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--hn-danger);
    border: 0;
    border-block-start: 1px solid var(--hn-border);
    margin-block-start: 2px;
    background: none;
    inline-size: 100%;
    font-family: inherit;
}

.hn-logout:hover {
    background: var(--hn-danger-bg);
}

/* ══════════════════════════════════════════════════════════════════════
   Sidebar
   ══════════════════════════════════════════════════════════════════════ */

/* Mobile-first: the sidebar IS the drawer, off-canvas until opened. */
.fi-body .fi-sidebar.hn-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--hn-drawer-w);
    max-inline-size: 86vw;
    block-size: 100dvh;
    z-index: 80;
    background: var(--hn-surface);
    border-inline-end: 1px solid var(--hn-border);
    box-shadow: var(--hn-shadow-drawer);
    display: flex;
    flex-direction: column;
    translate: 0;
    transform: translateX(calc(var(--hn-drawer-flip) * 100%));
    transition: transform 0.22s ease;
    padding: 0;
}

[dir='ltr'] .fi-body .fi-sidebar.hn-sidebar,
.fi-body .fi-sidebar.hn-sidebar {
    --hn-drawer-flip: -1;
}

[dir='rtl'] .fi-body .fi-sidebar.hn-sidebar {
    --hn-drawer-flip: 1;
}

.fi-body .fi-sidebar.hn-sidebar.hn-drawer-open {
    transform: translateX(0);
}

.hn-scrim {
    position: fixed;
    inset: 0;
    background: var(--hn-scrim);
    z-index: 70;
}

/* Drawer header (mobile only). */
.hn-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-block-end: 1px solid var(--hn-border);
    flex-shrink: 0;
}

.hn-drawer-close {
    margin-inline-start: auto;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--hn-muted);
    cursor: pointer;
    background: none;
    border: 0;
}

.hn-drawer-close:active {
    background: var(--hn-border-faint);
}

.hn-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Rows — a section, a page, or a nested page. */
.hn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    block-size: auto;
    padding: 11px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--hn-text-2);
    background: transparent;
    line-height: 1.5;
    min-block-size: 44px;
    /* Transparent until the row is the active page, so the active border
       never shifts the label. */
    border: 1px solid transparent;
    position: relative;
    inline-size: 100%;
    font-family: inherit;
    text-align: start;
    text-decoration: none;
    margin-block-start: 5px;
}

.hn-row:active {
    background: var(--hn-orange-bg);
}

/*
 * Navigation page names are NEVER truncated. A clipped name is a name the
 * user cannot read — «استكمال عمولات الأوردرات القديمة» was rendering as
 * «استكمال عمولات الأوردرات ال...». Long names wrap onto a second line
 * instead, inside the same 196px column: no ellipsis, no clipping, and no
 * wider sidebar.
 */
.hn-row-label {
    flex: 1;
    min-inline-size: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: normal;
}

.hn-row-child {
    font-size: 13px;
    font-weight: 400;
    color: var(--hn-text-3);
    padding: 8px 12px;
    margin-block-start: 0;
}

.hn-row-grandchild {
    padding-inline-start: 26px;
    font-size: 12.5px;
}

.hn-row.hn-on {
    /* PO ruling 2026-09-11: «orange = active» stays, but the WORDS are the
       readable orange (--hn-orange-text, 4.88:1 on the tint — the bright
       brand orange was 2.5:1) and the bright orange goes on what is not a
       word: the row's icon (shell redesign 2026-09 — a soft tile with a
       hairline edge replaces the old inset bar). */
    color: var(--hn-orange-text);
    font-weight: 600;
    background: var(--hn-orange-bg);
    border-color: var(--ho-accent-edge);
}

/* The section holding the page you are on: bright icon, full-ink bold label. */
.hn-row-section.hn-in-active {
    color: var(--ho-ink);
    font-weight: 600;
}

.hn-row.hn-on .hn-rail-icon,
.hn-row-section.hn-in-active .hn-rail-icon {
    color: var(--hn-orange);
}

/* Counts: a neutral pill; `hot` (work waiting on the viewer) is filled
   with the contrast-safe accent (white on the bright brand orange is
   2.64:1; on --ho-accent-fill it is 5.18:1). */
.hn-badge {
    background: var(--hn-surface-2);
    color: var(--hn-text-2);
    border: 1px solid var(--hn-border);
    font-size: var(--ho-text-xs);
    font-weight: 600;
    line-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-family: Helvetica, Arial, sans-serif;
}

.hn-badge-hot {
    background: var(--ho-accent-fill);
    border-color: var(--ho-accent-fill);
    color: var(--ho-accent-on-fill);
}

/* Pages under a section hang off a thin guide line under the section's
   icon. */
.hn-sub {
    position: relative;
    padding-inline-start: 26px;
}

.hn-sub::before {
    content: '';
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 22px;
    inline-size: 1px;
    background: var(--hn-border);
}

.hn-chev {
    flex-shrink: 0;
    transition: transform 0.18s;
    color: var(--hn-faint-2);
}

/* Desktop ≥1024px — the design's 196px sticky sidebar, no icons, accordion. */
@media (min-width: 1024px) {
    .fi-body .fi-sidebar.hn-sidebar {
        position: sticky;
        inset-block-start: var(--hn-topbar-h);
        /* The bar is `--hn-topbar-h` plus its 1px bottom border. */
        block-size: calc(100dvh - var(--hn-topbar-h) - 1px);
        inline-size: var(--sidebar-width);
        max-inline-size: none;
        z-index: 20;
        box-shadow: none;
        transform: none;
        /*
         * `translate: 0` above only cancels Filament's off-canvas translate
         * for the drawer. It is still a value other than `none`, so it made
         * the sidebar the containing block of its `position: fixed` rail
         * flyout: a `top` measured against the viewport was applied from the
         * sidebar's own top, and every panel opened one topbar-height below
         * its icon — out of the pointer's reach. The desktop column never
         * moves, so it takes no translate at all.
         */
        translate: none;
        transition: width 0.22s ease;
    }

    .fi-body .fi-sidebar.hn-sidebar.hn-rail {
        inline-size: var(--hn-rail-w);
    }

    /*
     * Filament fills the screen below its own 4rem (64px) bar. Ours is 68px
     * plus a 1px border, so its `calc(100dvh - 4rem)` left every page 5px
     * taller than the window — a scrollbar on pages with nothing to scroll.
     */
    .fi-body .fi-layout,
    .fi-body .fi-main-ctn {
        min-block-size: calc(100dvh - var(--hn-topbar-h) - 1px);
    }

    .hn-drawer-head,
    .hn-scrim {
        display: none;
    }

    .hn-nav {
        padding: 10px 8px 12px;
        gap: 1px;
    }

    /* Shell redesign: 36px rows 2px apart, as the mockup draws them. */
    .hn-row {
        gap: 9px;
        padding: 7px 9px;
        border-radius: 10px;
        font-size: 13.2px;
        line-height: 1.45;
        min-block-size: 36px;
        margin-block-start: 2px;
    }

    .hn-row:hover {
        background: var(--hn-border-faint);
    }

    .hn-row-child {
        font-size: 12.8px;
        padding: 7px 10px;
        margin-block-start: 0;
    }

    .hn-row-grandchild {
        padding-inline-start: 24px;
        font-size: 12.4px;
    }

    .hn-row.hn-on {
        background: var(--hn-orange-bg);
    }

    .hn-sub {
        padding-inline-start: 22px;
    }

    .hn-sub::before {
        inset-inline-start: 19px;
    }

    /* Rail (collapsed): 36px icon-only rows. */
    .hn-rail .hn-nav {
        gap: 4px;
        padding-inline: 8px;
    }

    .hn-rail .hn-row {
        justify-content: center;
        padding: 0;
        block-size: 36px;
        margin-block-start: 0;
    }

    .hn-rail .hn-row-label,
    .hn-rail .hn-badge,
    .hn-rail .hn-chev,
    .hn-rail .hn-row-child {
        display: none;
    }

    /* A hot count survives the rail as a small tag on the icon's corner. */
    .hn-rail .hn-row > .hn-badge-hot {
        display: block;
        position: absolute;
        inset-block-start: -3px;
        inset-inline-end: 1px;
        line-height: 14px;
        padding: 0 4px;
        border-width: 1.5px;
        border-color: var(--hn-surface);
    }

    .hn-rail .hn-sub::before {
        display: none;
    }
}

/* Row icons: the rail's glyph set, shown beside every first-level row. */
.hn-rail-icon {
    display: block;
    flex-shrink: 0;
    inline-size: 18px;
    block-size: 18px;
}

@media (min-width: 1024px) {
    .hn-rail .hn-rail-icon {
        inline-size: 20px;
        block-size: 20px;
    }
}

/* Rail flyout */
.hn-flyout {
    position: fixed;
    inset-inline-start: var(--hn-rail-w);
    /*
     * The panel overlaps the rail so it meets its icon's row with no
     * transparent strip between them: icon and panel are one hover zone.
     * The store places it (`flyPlace`) level with the icon, lifted by this
     * corner radius so the rounded corner never sits between the two.
     */
    margin-inline-start: -10px;
    z-index: 30;
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    box-shadow: var(--hn-shadow-fly);
    padding: 10px;
    min-inline-size: 240px;
    max-block-size: 70vh;
    overflow-y: auto;
}

.hn-flyout-title {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hn-text);
    padding: 4px 8px 8px;
}

.hn-flyout a {
    display: block;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--hn-text-2);
    border-radius: 6px;
    text-decoration: none;
}

.hn-flyout a:hover,
.hn-flyout a:focus-visible {
    background: var(--hn-orange-soft);
    color: var(--hn-orange-text);
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile chrome — bottom navigation, search screen, bottom sheets
   ══════════════════════════════════════════════════════════════════════ */

.hn-bottomnav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    background: var(--hn-surface);
    border-block-start: 1px solid var(--hn-border);
    display: flex;
    /* 68px of items plus the safe area, as the mockup. */
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    z-index: 60;
}

.hn-bottomnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    block-size: 68px;
    cursor: pointer;
    color: var(--hn-muted);
    border-radius: 10px;
    min-block-size: 48px;
    background: none;
    border: 0;
    font-family: inherit;
    text-decoration: none;
}

.hn-bottomnav-item:active {
    background: var(--hn-orange-bg);
}

.hn-bottomnav-item.hn-on {
    color: var(--hn-orange-text);
}

.hn-bottomnav-item.hn-on .hn-bottomnav-label {
    font-weight: 700;
}

/* The active tab's icon keeps the bright brand orange — it is not a word,
   and the label beside it already says which tab is on — on a soft accent
   pill (shell redesign M5). */
.hn-bottomnav-item.hn-on .hn-bottomnav-icon {
    color: var(--hn-orange);
    background: var(--ho-accent-soft);
}

.hn-bottomnav-label {
    font-size: var(--ho-text-xs);
    font-weight: 500;
    /* Five slots share the width; at the floor «Notifications» is 70px of a
       73px slot on a 375px phone. Narrower than that, the word is clipped
       with an ellipsis rather than spilling into its neighbour. */
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hn-bottomnav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 52px;
    block-size: 30px;
    border-radius: 999px;
    transition: background-color 0.15s;
}

.hn-bottomnav-icon .hn-count {
    inset-block-start: -5px;
    inset-inline-start: auto;
    inset-inline-end: 2px;
    font-size: var(--ho-text-xs);
    padding: 2.5px 5px;
}

@media (prefers-reduced-motion: reduce) {
    .hn-bottomnav-icon {
        transition: none;
    }
}

/* The home item draws the sidebar's own home glyph at the bar's size. */
.hn-bottomnav-icon .hn-rail-icon,
.hn-bottomnav-icon .hn-rail-heroicon {
    display: block;
    inline-size: 20px;
    block-size: 20px;
    stroke-width: 1.7;
}

@media (min-width: 1024px) {
    .hn-bottomnav {
        display: none;
    }
}

/* Content must clear the bottom bar. */
@media (max-width: 1023.98px) {
    .fi-body.fi-body-has-navigation .fi-main {
        padding-block-end: 96px;
    }
}

.hn-fullscreen {
    position: fixed;
    inset: 0;
    background: var(--hn-surface);
    z-index: 90;
    display: flex;
    flex-direction: column;
}

.hn-fullscreen-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-block-end: 1px solid var(--hn-border);
    flex-shrink: 0;
}

.hn-msearch {
    flex: 1;
    block-size: 40px;
    border: 1px solid var(--hn-orange-border);
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
    background: var(--hn-orange-soft);
}

.hn-msearch input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--hn-text-strong);
    min-inline-size: 0;
}

.hn-cancel {
    font-size: 13.5px;
    color: var(--hn-orange-text);
    cursor: pointer;
    font-weight: 500;
    background: none;
    border: 0;
    font-family: inherit;
}

.hn-fullscreen-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
}

.hn-section-label {
    font-size: var(--ho-text-xs);
    font-weight: 600;
    color: var(--hn-faint-2);
    letter-spacing: 0.4px;
    padding: 10px 10px 4px;
}

.hn-mresult {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 9px;
    cursor: pointer;
    min-block-size: 44px;
    text-decoration: none;
}

.hn-mresult:active {
    background: var(--hn-orange-bg);
}

.hn-mresult-label {
    flex: 1;
    min-inline-size: 0;
    font-size: 13.5px;
    color: var(--hn-text-strong);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Bottom sheets */
.hn-sheet {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    background: var(--hn-surface);
    z-index: 80;
    border-start-start-radius: 22px;
    border-start-end-radius: 22px;
    box-shadow: var(--hn-shadow-sheet);
    display: flex;
    flex-direction: column;
    max-block-size: 85dvh;
}

.hn-sheet-notif {
    max-block-size: 75%;
}

.hn-sheet-acct {
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.hn-grip {
    padding: 10px 0 4px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    background: none;
    border: 0;
    inline-size: 100%;
    /* The handle zone owns the vertical drag; the browser must not turn it
       into a page scroll before the swipe-to-close can see it. */
    touch-action: none;
}

.hn-grip span {
    inline-size: 40px;
    block-size: 5px;
    border-radius: 3px;
    background: var(--hn-border);
}

.hn-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 13px;
    border-block-end: 1px solid var(--hn-border);
    flex-shrink: 0;
    touch-action: none;
}

/*
 * Close button for the notifications sheet. It lives in the header row,
 * beside the title, at the row's inline END — top-left in RTL, top-right in
 * LTR — with a 44×44 hit target. The negative margins keep the header's
 * visual height unchanged; only the tappable area grows.
 */
.hn-sheet-close {
    margin-inline-start: auto;
    margin-inline-end: -8px;
    margin-block: -10px;
    inline-size: 44px;
    block-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--hn-muted);
    font-size: 24px;
    line-height: 1;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
}

.hn-sheet-close:active,
.hn-sheet-close:hover {
    background: var(--hn-border-faint);
    color: var(--hn-text-3);
}

.hn-sheet-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hn-text);
}

.hn-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding-block-end: 14px;
}

.hn-sheet-acct-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 2px 14px;
    border-block-end: 1px solid var(--hn-border);
}

.hn-sheet-acct-head .hn-acct-avatar {
    inline-size: 40px;
    block-size: 40px;
    font-size: 16px;
}

.hn-sheet .hn-seg {
    padding: 14px 0 0;
    gap: 8px;
}

.hn-sheet .hn-seg-btn {
    block-size: 44px;
    border-radius: 11px;
}

.hn-sheet .hn-seg-lang {
    padding: 8px 0 0;
}

.hn-sheet .hn-seg-lang .hn-seg-btn {
    block-size: 42px;
    font-size: 13px;
}

.hn-sheet-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-block-start: 14px;
    padding: 12px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--hn-danger);
    border: 1px solid var(--hn-danger-border);
    min-block-size: 44px;
    background: none;
    inline-size: 100%;
    font-family: inherit;
}

.hn-sheet-logout:active {
    background: var(--hn-danger-bg);
}

/* Phone header (shell redesign M1): lead (house mark or back), the page
   title under its section, then «+ إضافة». */
.hn-back {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hn-text);
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}

.hn-mlead {
    inline-size: 36px;
    block-size: 36px;
    justify-content: center;
}

/*
 * The title names a page, so it wraps rather than clipping; the header's
 * min-height lets it grow (and --hn-head-h follows the real height).
 */
.hn-mtitle {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.hn-mtitle-section {
    font-size: var(--ho-text-xs);
    color: var(--hn-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hn-mtitle-page {
    font-size: 16px;
    font-weight: 700;
    color: var(--hn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* «+ إضافة» — the contrast-safe accent fill (no white on the bright orange). */
.hn-madd {
    display: flex;
    align-items: center;
    gap: 4px;
    block-size: 36px;
    padding-inline: 10px 12px;
    border-radius: 10px;
    background: var(--ho-accent-fill);
    color: var(--ho-accent-on-fill);
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.hn-madd:active {
    filter: brightness(0.94);
}

.hn-sheet-add .hn-sheet-body {
    padding-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
}

.hn-sheet-add .hn-sheet-head {
    border-block-end: 0;
    padding-block-end: 12px;
}

.hn-sheet-add .hn-sheet-body {
    padding-inline: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   General Settings page — masonry cards
   ══════════════════════════════════════════════════════════════════════ */

.hn-settings-search {
    inline-size: 340px;
    max-inline-size: 100%;
    block-size: 34px;
    border: 1px solid var(--hn-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 11px;
    background: var(--hn-surface);
    margin-block-end: 20px;
}

.hn-settings-search input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--hn-text-strong);
    min-inline-size: 0;
}

.hn-settings-sub {
    font-size: 13px;
    color: var(--hn-muted);
    margin-block-end: 16px;
}

.hn-cards {
    columns: 300px;
    column-gap: 8px;
    column-fill: balance;
}

.hn-card {
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    padding: 16px 18px 12px;
    break-inside: avoid;
    margin-block-end: 8px;
}

.hn-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--hn-text);
}

.hn-card-desc {
    font-size: 12px;
    color: var(--hn-faint);
    margin-block-start: 2px;
}

.hn-card-rule {
    block-size: 1px;
    background: var(--hn-border-soft);
    margin: 11px 0 6px;
    border: 0;
}

.hn-card-page {
    display: block;
    padding: 6px;
    font-size: 12.5px;
    color: var(--hn-text-2);
    border-radius: 6px;
    text-decoration: none;
}

.hn-card-page:hover {
    background: var(--hn-orange-soft);
    color: var(--hn-orange-text);
}

.hn-card-page.hn-on {
    color: var(--hn-orange-text);
    font-weight: 600;
    background: var(--hn-orange-soft);
}

/* Mobile: one column, cards collapsed by default. */
@media (max-width: 767.98px) {
    .hn-cards {
        columns: 1;
    }

    .hn-card {
        padding: 0;
        border-radius: 13px;
        overflow: hidden;
        margin-block-end: 10px;
    }

    .hn-card-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        cursor: pointer;
        min-block-size: 48px;
        inline-size: 100%;
        background: none;
        border: 0;
        font-family: inherit;
        text-align: start;
    }

    .hn-card-head:active {
        background: var(--hn-orange-bg);
    }

    .hn-card-count {
        background: var(--hn-border-faint);
        color: var(--hn-muted);
        font-size: var(--ho-text-xs);
        font-weight: 600;
        padding: 2px 9px;
        border-radius: 999px;
        flex-shrink: 0;
        font-family: Helvetica, Arial, sans-serif;
    }

    .hn-card-rule {
        display: none;
    }

    .hn-card-body {
        border-block-start: 1px solid var(--hn-border);
        padding: 2px 16px 6px;
    }

    .hn-card-page {
        display: flex;
        align-items: center;
        padding: 12px 2px;
        font-size: 13.5px;
        border-block-end: 1px solid var(--hn-border-faint);
        border-radius: 0;
        min-block-size: 44px;
    }
}

@media (min-width: 768px) {
    .hn-card-count,
    .hn-card-chev {
        display: none;
    }

    .hn-card-head {
        display: block;
        inline-size: 100%;
        background: none;
        border: 0;
        padding: 0;
        font-family: inherit;
        text-align: start;
        cursor: default;
    }
}

/* No horizontal overflow anywhere, in either direction. */
.fi-body {
    overflow-x: hidden;
}


/* ── Bits appended after the first pass ─────────────────────────────── */

/*
 * Livewire wraps the <aside> in its own root node, and that node is the
 * flex item inside `.fi-layout` — so it, not the aside, must hold the
 * column's width on desktop.
 */
.hn-sidebar-root {
    flex-shrink: 0;
    display: contents;
}

@media (min-width: 1024px) {
    .hn-sidebar-root {
        display: block;
        flex-shrink: 0;
    }
}

/*
 * Chevron direction is a reading-order question, so it is resolved by
 * `dir`, not by a duplicated RTL ruleset: closed points along the text
 * direction, open points down.
 */
.hn-chev {
    transform: rotate(0deg);
}

[dir='rtl'] .hn-chev {
    transform: rotate(180deg);
}

.hn-chev.hn-open,
[dir='rtl'] .hn-chev.hn-open {
    transform: rotate(90deg);
}

.hn-card-chev {
    transition: transform 0.18s;
    color: var(--hn-faint-2);
    flex-shrink: 0;
}

.hn-card-chev.hn-open {
    transform: rotate(180deg);
}

/* The mobile drawer's own chevrons sit at 13px, the desktop ones at 12px. */
.hn-chev svg,
.hn-card-chev svg {
    display: block;
}

/* Skeleton shimmer used while a page boots (design §8). */
@keyframes hn-shimmer {
    0% { opacity: 0.45; }
    50% { opacity: 0.9; }
    100% { opacity: 0.45; }
}

.hn-skeleton-row {
    block-size: 14px;
    border-radius: 6px;
    background: #eef0f3;
    animation: hn-shimmer 1.2s infinite;
    margin-block-end: 12px;
}

/* Filament's own sidebar overlay is unused — ours is `.hn-scrim`. */
.fi-sidebar-close-overlay {
    display: none !important;
}

/* Page background matches the design's #f4f5f7 surface. */
.fi-body .fi-main-ctn {
    background: var(--hn-page);
}

/* ── Responsive visibility ───────────────────────────────────────────── */

@media (max-width: 1023.98px) {
    .hn-desktop-only {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .hn-mobile-only,
    .hn-back {
        display: none !important;
    }
}

/* The back chevron follows the reading direction. */
[dir='rtl'] .hn-back svg {
    transform: scaleX(-1);
}

/* Cards are always open on desktop; the closed state is phone-only. */
@media (max-width: 767.98px) {
    .hn-card-body-closed {
        display: none;
    }
}

/* ── Pinned shortcuts ────────────────────────────────────────────────── */

/* «المفضلة» — a soft accent block at the top of the sidebar. */
.hn-pinned {
    padding: 4px;
    margin-block-end: 6px;
    border-radius: 12px;
    background: var(--ho-accent-soft);
    border: 1px solid var(--ho-accent-edge);
}

.hn-pinned-hdr {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    font-size: var(--ho-text-xs);
    font-weight: 700;
    color: var(--hn-orange-text);
    padding: 4px 6px 2px;
}

.hn-pinned-hdr svg {
    color: var(--hn-orange);
    flex-shrink: 0;
}

.hn-pinned-hint {
    margin-inline-start: auto;
    font-size: var(--ho-text-xs);
    font-weight: 500;
    color: var(--hn-muted);
    white-space: nowrap;
}

.hn-fav {
    display: flex;
    align-items: center;
    gap: 6px;
    min-block-size: 32px;
    padding-block: 5px;
    padding-inline: 4px 6px;
    border-radius: 8px;
    color: var(--hn-text);
    font-size: 12.5px;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

.hn-fav:hover,
.hn-fav.hn-on {
    background: var(--hn-surface);
}

.hn-fav.hn-on {
    color: var(--hn-orange-text);
    font-weight: 600;
}

.hn-fav-grip {
    flex-shrink: 0;
    color: var(--hn-muted);
    opacity: 0.5;
    cursor: grab;
}

.hn-fav:hover .hn-fav-grip {
    opacity: 1;
}

.hn-fav-x {
    display: flex;
    flex-shrink: 0;
    color: var(--hn-muted);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
}

.hn-fav:hover .hn-fav-x,
.hn-fav:focus-visible .hn-fav-x,
.hn-fav-x:focus-visible {
    opacity: 1;
}

.hn-fav-x:hover {
    color: var(--hn-danger);
}

/* Drag and drop: the dragged row fades, a 2px orange line marks the drop. */
.hn-fav-dragging {
    opacity: 0.4;
}

.hn-fav-drop-before {
    box-shadow: 0 -2px 0 var(--hn-orange);
}

.hn-fav-drop-after {
    box-shadow: 0 2px 0 var(--hn-orange);
}

/* Reordering and removing are pointer affordances; the phone drawer keeps
   its favorites as plain links. */
@media (max-width: 1023.98px) {
    .hn-fav {
        min-block-size: 44px;
        font-size: 13.5px;
        padding-inline: 10px;
    }

    .hn-pinned-hint,
    .hn-fav-grip,
    .hn-fav-x {
        display: none;
    }
}

.hn-pin {
    display: flex;
    line-height: 1;
    color: var(--hn-muted);
    flex-shrink: 0;
    cursor: pointer;
    align-self: center;
    border-radius: 4px;
    /* Hidden until its row is hovered or focused (shell redesign 2026-09). */
    opacity: 0;
    transition: opacity 0.12s;
}

.hn-pin svg {
    fill: none;
}

.hn-row:hover .hn-pin,
.hn-row:focus-visible .hn-pin,
.hn-row:focus-within .hn-pin,
.hn-pin-on {
    opacity: 1;
}

/* A favorite keeps its star, filled in the brand orange. */
.hn-pin-on {
    color: var(--hn-orange);
}

.hn-pin-on svg {
    fill: currentColor;
}

@media (max-width: 1023.98px) {
    /* Pinning is a pointer affordance; the drawer keeps its 44px rows clean. */
    .hn-row-section ~ div .hn-pin {
        display: none;
    }
}

.hn-rail .hn-pinned,
.hn-rail .hn-pin {
    display: none;
}

/* Settings card rows: a directional arrow on phones only. */
.hn-card-page-label {
    flex: 1;
    min-inline-size: 0;
}

.hn-card-page-arrow {
    display: none;
    flex-shrink: 0;
    color: var(--hn-faint-3);
}

[dir='rtl'] .hn-card-page-arrow {
    transform: scaleX(-1);
}

@media (max-width: 767.98px) {
    .hn-card-page-arrow {
        display: block;
    }
}


/* ── Third level: the nested group inside a section ──────────────────── */

/*
 * The chevron that opens a parent's own pages. It sits INSIDE the row's
 * anchor as a separate hit target, so the row still navigates to the
 * parent page while this only folds the group open and shut.
 */
.hn-chev-group {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 22px;
    block-size: 22px;
    margin-inline-end: -4px;
    border-radius: 6px;
    cursor: pointer;
    align-self: center;
}

.hn-chev-group:hover {
    background: var(--hn-border-faint);
    color: var(--hn-text-3);
}

@media (max-width: 1023.98px) {
    /* Touch target on phones stays at the 44px contract. */
    .hn-chev-group {
        inline-size: 44px;
        block-size: 44px;
        margin-inline-end: -10px;
    }
}

.hn-rail .hn-chev-group {
    display: none;
}

/* Nothing in the sidebar clips a page name. */
.hn-row,
.hn-flyout a,
.hn-card-page {
    overflow-wrap: anywhere;
}


/* ── Notifications: tap-to-read + mobile header actions ─────────────── */

/* An unread row is tappable; a read one is inert, so no false affordance. */
.hn-notif-unread {
    cursor: pointer;
}

/*
 * Mark-all / Clear inside the mobile sheet header. Pushed to the inline end
 * so they sit between the count pill and the × — same links, same look as
 * the desktop dropdown, wrapping onto a second line only if a locale's
 * strings are long.
 */
.hn-sheet-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-inline-size: 0;
}

.hn-sheet-actions .hn-link {
    min-block-size: 32px;
    display: inline-flex;
    align-items: center;
    padding-inline: 2px;
}

/* With the actions owning the auto-margin, the × just trails them. */
.hn-sheet-head .hn-sheet-close {
    margin-inline-start: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   NAV-LAYOUT-1 — «تخصيص القوائم» (the navigation layout editor) and the
   fixed way into it from General Settings.

   Tokens only: every colour below reads --ho-* / --hn-*, so the screen
   follows the theme like the rest of the chrome. Orange marks SELECTION,
   blue marks ACTIONS — the same two roles the panel already uses them for.
   ══════════════════════════════════════════════════════════════════════ */

.hn-settings-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-end: 20px;
}

.hn-settings-tools .hn-settings-search {
    margin-block-end: 0;
}

.hn-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    block-size: 34px;
    padding-inline: 12px;
    border: 1px solid var(--hn-border);
    border-radius: 10px;
    background: var(--hn-surface);
    color: var(--ho-info-ink);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    margin-inline-start: auto;
}

.hn-manage-link:hover {
    background: var(--ho-info-soft);
    border-color: var(--ho-info-line);
}

/* Pages waiting for a place — the same pill the cards count with. */
.hn-manage-count {
    min-inline-size: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ho-warning-soft);
    color: var(--ho-warning-ink);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
}

.hn-row-group {
    inline-size: 100%;
    text-align: start;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.hn-rail-heroicon {
    inline-size: 18px;
    block-size: 18px;
}

@media (min-width: 1024px) {
    .hn-rail .hn-rail-heroicon {
        inline-size: 20px;
        block-size: 20px;
    }
}

.hnm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--ho-ink);
    font-size: 13px;
    padding-block-end: 76px;
}

.hnm [x-cloak] {
    display: none !important;
}

.hnm-bar,
.hnm-panel {
    background: var(--ho-surface);
    border: 1px solid var(--ho-line);
    border-radius: 12px;
}

.hnm-bar {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hnm-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hnm-bar-label {
    font-size: 12px;
    color: var(--ho-ink-muted);
}

.hnm-spacer {
    flex: 1;
}

/* Segmented choice — the selected one carries the orange selection mark. */
.hnm-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--ho-surface-inset);
    flex-wrap: wrap;
}

.hnm-seg button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--ho-ink-muted);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.hnm-seg button:hover {
    color: var(--ho-ink);
}

.hnm-seg button.hnm-on {
    background: var(--ho-surface);
    color: var(--ho-accent-ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--ho-accent-line);
}

.hnm-seg-quiet button.hnm-on {
    box-shadow: none;
    background: var(--ho-accent-soft);
}

.hnm-pill {
    min-inline-size: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--ho-accent-soft);
    color: var(--ho-accent-ink);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.hnm-select,
.hnm-field select,
.hnm-field input {
    block-size: 34px;
    border: 1px solid var(--ho-line);
    border-radius: 8px;
    background: var(--ho-surface);
    color: var(--ho-ink);
    font: inherit;
    font-size: 13px;
    padding-inline: 10px;
    min-inline-size: 0;
}

.hnm-select:focus-visible,
.hnm-field select:focus-visible,
.hnm-field input:focus-visible,
.hnm button:focus-visible {
    outline: 2px solid var(--ho-focus);
    outline-offset: 1px;
}

/* Buttons — blue is the action colour. */
.hnm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    block-size: 34px;
    padding-inline: 14px;
    border: 1px solid var(--ho-line);
    border-radius: 8px;
    background: var(--ho-surface);
    color: var(--ho-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.hnm-btn:hover:not(:disabled) {
    background: var(--ho-surface-inset);
}

.hnm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hnm-btn-primary {
    background: var(--ho-info-line);
    border-color: var(--ho-info-line);
    color: var(--ho-surface);
}

.hnm-btn-primary:hover:not(:disabled) {
    background: var(--ho-info-ink);
    border-color: var(--ho-info-ink);
}

.hnm-btn-danger {
    background: var(--ho-danger-line);
    border-color: var(--ho-danger-line);
    color: var(--ho-surface);
}

.hnm-btn-danger:hover:not(:disabled) {
    background: var(--ho-danger-ink);
}

.hnm-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--ho-info-ink);
}

/* Notes */
.hnm-note {
    border: 1px solid var(--ho-info-line);
    background: var(--ho-info-soft);
    color: var(--ho-info-ink);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.7;
}

.hnm-note-warn {
    border-color: var(--ho-warning-line);
    background: var(--ho-warning-soft);
    color: var(--ho-warning-ink);
}

.hnm-note-danger {
    border-color: var(--ho-danger-line);
    background: var(--ho-danger-soft);
    color: var(--ho-danger-ink);
}

/* A note that carries its own action («مراجعة»). */
.hnm-note-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* «مسودتي» — my draft kept beside the newest organisation. */
.hnm-rebase {
    border: 1px solid var(--ho-info-line);
    border-radius: 12px;
    background: var(--hn-surface);
    padding: 12px;
}

.hnm-details {
    margin-block: 4px 10px;
    font-size: 12.5px;
    color: var(--ho-ink-muted);
}

.hnm-details > summary {
    cursor: pointer;
    padding-block: 4px;
    color: var(--ho-info-ink);
    font-weight: 600;
}

/* The tree */
.hnm-panel {
    padding: 8px;
}

.hnm-list,
.hnm-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-block-size: 8px;
}

.hnm-children {
    margin-inline-start: 26px;
    margin-block: 4px 6px;
    padding-inline-start: 10px;
    border-inline-start: 2px solid var(--ho-line);
}

.hnm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding: 6px 8px;
    border: 1px solid var(--ho-line);
    border-radius: 10px;
    background: var(--ho-surface);
}

.hnm-row:hover {
    border-color: var(--ho-line-strong);
}

.hnm-row-group {
    background: var(--ho-surface-sunken);
}

.hnm-row-off .hnm-label,
.hnm-row-off .hnm-icon {
    opacity: 0.55;
    text-decoration: line-through;
}

.hnm-row-missing {
    border-style: dashed;
}

.hnm-row-locked {
    margin-block-start: 6px;
    background: var(--ho-surface-inset);
    border-style: dashed;
}

.hnm-lock {
    color: var(--ho-ink-muted);
    display: inline-flex;
}

.hnm-ghost {
    opacity: 0.4;
}

.hnm-handle,
.hnm-toggle,
.hnm-tool {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 28px;
    block-size: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ho-ink-muted);
    font: inherit;
    cursor: pointer;
}

.hnm-handle {
    cursor: grab;
    touch-action: none;
}

.hnm-handle:active {
    cursor: grabbing;
}

.hnm-handle:hover,
.hnm-toggle:hover,
.hnm-tool:hover {
    background: var(--ho-surface-inset);
    color: var(--ho-ink);
}

.hnm-toggle svg {
    transition: transform 0.15s ease;
}

[dir='rtl'] .hnm-toggle svg {
    transform: rotate(180deg);
}

.hnm-node-open > .hnm-row .hnm-toggle svg {
    transform: rotate(90deg);
}

.hnm-tool-text {
    padding-inline: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ho-info-ink);
}

.hnm-tool-danger {
    color: var(--ho-danger-ink);
}

.hnm-icon {
    flex: none;
    display: inline-flex;
    inline-size: 18px;
    block-size: 18px;
    color: var(--ho-ink-muted);
}

.hnm-icon svg {
    inline-size: 18px;
    block-size: 18px;
}

.hnm-main {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hnm-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hnm-label {
    font-weight: 600;
    color: var(--ho-ink);
    overflow-wrap: anywhere;
}

.hnm-kind,
.hnm-count {
    font-size: 12px;
    color: var(--ho-ink-muted);
}

.hnm-count {
    min-inline-size: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--ho-surface-inset);
    text-align: center;
}

.hnm-badge {
    font-size: 12px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ho-info-soft);
    color: var(--ho-info-ink);
}

.hnm-badge-off {
    background: var(--ho-surface-inset);
    color: var(--ho-ink-muted);
}

.hnm-badge-warn {
    background: var(--ho-warning-soft);
    color: var(--ho-warning-ink);
}

.hnm-badge-new {
    background: var(--ho-success-soft);
    color: var(--ho-success-ink);
}

.hnm-places {
    font-size: 12px;
    color: var(--ho-ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}

.hnm-places-hd {
    color: var(--ho-ink-muted);
}

.hnm-place {
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid var(--ho-line);
    background: var(--ho-surface-sunken);
    color: var(--ho-ink);
}

.hnm-places-only {
    direction: inherit;
    unicode-bidi: plaintext;
}

.hnm-tools {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.hnm-menu-wrap {
    position: relative;
    display: inline-flex;
}

.hnm-menu {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline-end: 0;
    z-index: 30;
    min-inline-size: 190px;
    padding: 4px;
    border: 1px solid var(--ho-line);
    border-radius: 10px;
    background: var(--ho-surface-raised);
    box-shadow: var(--hn-shadow-dropdown);
    display: flex;
    flex-direction: column;
}

.hnm-menu > span {
    display: flex;
    flex-direction: column;
}

.hnm-menu-up {
    inset-block-start: auto;
    inset-block-end: calc(100% + 4px);
}

.hnm-menu button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--ho-ink);
    text-align: start;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
}

.hnm-menu button:hover:not(:disabled) {
    background: var(--ho-accent-soft);
}

.hnm-menu button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hnm-menu .hnm-menu-danger {
    color: var(--ho-danger-ink);
}

.hnm-empty,
.hnm-empty-drop {
    padding: 14px;
    text-align: center;
    color: var(--ho-ink-muted);
    font-size: 12.5px;
}

.hnm-empty-drop {
    border: 1px dashed var(--ho-line);
    border-radius: 10px;
    padding: 10px;
}

.hnm-h {
    font-size: 13px;
    font-weight: 700;
    margin: 12px 6px 4px;
}

.hnm-p {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ho-ink-muted);
    margin: 0 6px 8px;
}

.hnm-p-warn {
    color: var(--ho-warning-ink);
}

.hnm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    block-size: 36px;
    padding-inline: 11px;
    margin: 4px 4px 10px;
    border: 1px solid var(--ho-line);
    border-radius: 10px;
    color: var(--ho-ink-muted);
    background: var(--ho-surface);
}

.hnm-search input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ho-ink);
    font: inherit;
    font-size: 13px;
}

/* The draft bar — pinned, so «حفظ» is never a scroll away. */
.hnm-foot {
    position: fixed;
    /* Above the phone / tablet bottom navigation when there is one: the
       editor measures that bar (it grows with the safe area) and says how
       tall it is; on a desktop the value is 0. */
    inset-block-end: var(--hn-bottomnav-h, 0px);
    inset-inline: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 24px;
    background: var(--ho-surface);
    border-block-start: 1px solid var(--ho-line);
}

@media (min-width: 1024px) {
    .fi-body-has-navigation .hnm-foot {
        inset-inline-start: var(--sidebar-width);
    }
}

.hnm-foot-dirty {
    border-block-start-color: var(--ho-accent-line);
    box-shadow: 0 -2px 0 var(--ho-accent-line);
}

.hnm-foot-text {
    flex: 1;
    min-inline-size: 180px;
    font-size: 12.5px;
    color: var(--ho-ink-muted);
}

.hnm-foot-dirty .hnm-foot-text {
    color: var(--ho-accent-ink);
    font-weight: 600;
}

.hnm-toast {
    position: fixed;
    inset-block-end: 70px;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: fit-content;
    max-inline-size: min(560px, 92vw);
    z-index: 60;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--ho-line);
    background: var(--ho-surface-raised);
    color: var(--ho-ink);
    box-shadow: var(--hn-shadow-panel);
    font-size: 12.5px;
}

.hnm-toast-success {
    border-color: var(--ho-success-line);
    color: var(--ho-success-ink);
}

.hnm-toast-danger {
    border-color: var(--ho-danger-line);
    color: var(--ho-danger-ink);
}

/* Modals */
.hnm-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--hn-scrim);
}

.hnm-modal {
    position: fixed;
    z-index: 41;
    inset-block-start: 8vh;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: min(480px, 94vw);
    max-block-size: 84vh;
    overflow: auto;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--ho-line);
    background: var(--ho-surface-raised);
    box-shadow: var(--hn-shadow-panel);
}

.hnm-modal-wide {
    inline-size: min(760px, 94vw);
}

.hnm-modal-title {
    font-size: 15px;
    font-weight: 700;
    margin-block-end: 8px;
}

.hnm-modal-sub {
    font-weight: 500;
    color: var(--ho-ink-muted);
    margin-inline-start: 6px;
}

.hnm-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-start: 16px;
}

.hnm-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-block-end: 10px;
}

.hnm-field > span {
    font-size: 12px;
    color: var(--ho-ink-muted);
}

.hnm-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    margin-block: 8px;
    line-height: 1.7;
}

.hnm-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-block-start: 10px;
}

.hnm-picker {
    max-block-size: 300px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px;
}

.hnm-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--ho-line);
    border-radius: 10px;
    background: var(--ho-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.hnm-pick:hover {
    border-color: var(--ho-line-strong);
}

.hnm-pick.hnm-on {
    border-color: var(--ho-accent-line);
    background: var(--ho-accent-soft);
}

.hnm-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
}

.hnm-icon-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 40px;
    border: 1px solid var(--ho-line);
    border-radius: 9px;
    background: var(--ho-surface);
    color: var(--ho-ink);
    cursor: pointer;
}

.hnm-icon-pick:hover {
    border-color: var(--ho-line-strong);
}

.hnm-icon-pick.hnm-on {
    border-color: var(--ho-accent-line);
    background: var(--ho-accent-soft);
    color: var(--ho-accent-ink);
}

.hnm-icon-pick svg {
    inline-size: 20px;
    block-size: 20px;
}

/* Preview — small replicas of the three places. */
.hnm-pv-side {
    inline-size: min(260px, 100%);
    margin-block-start: 12px;
    padding: 8px;
    border: 1px solid var(--ho-line);
    border-radius: 12px;
    background: var(--ho-surface);
}

.hnm-pv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12.5px;
}

.hnm-pv-top {
    font-weight: 600;
}

.hnm-pv-child {
    padding-inline-start: 34px;
    color: var(--ho-ink-muted);
}

.hnm-pv-leaf {
    padding-inline-start: 50px;
    color: var(--ho-ink-muted);
    font-size: 12px;
}

.hnm-pv-cards {
    columns: 220px;
    column-gap: 8px;
    margin-block-start: 12px;
}

.hnm-pv-card {
    break-inside: avoid;
    margin-block-end: 8px;
    padding: 12px;
    border: 1px solid var(--ho-line);
    border-radius: 12px;
    background: var(--ho-surface);
}

.hnm-pv-card-title {
    font-weight: 700;
    font-size: 13px;
}

.hnm-pv-card-desc {
    font-size: 12px;
    color: var(--ho-ink-muted);
    margin-block-end: 6px;
}

.hnm-pv-card-page {
    font-size: 12.5px;
    padding-block: 4px;
    border-block-start: 1px solid var(--ho-line);
}

.hnm-pv-heading {
    font-size: 12px;
    color: var(--ho-ink-muted);
    margin-block: 14px 6px;
}

.hnm-pv-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.hnm-pv-hubcard {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--ho-line);
    border-radius: 12px;
    background: var(--ho-surface);
}

.hnm-pv-hubcard-title {
    flex: 1;
    font-weight: 600;
}

.hnm-pv-hubcard-cta {
    font-size: 12px;
    color: var(--ho-info-ink);
}

@media (max-width: 767.98px) {
    .hnm-row {
        flex-wrap: wrap;
    }

    .hnm-tools {
        inline-size: 100%;
        justify-content: flex-end;
    }

    .hnm-children {
        margin-inline-start: 10px;
    }

    .hnm-foot {
        padding: 8px 12px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Page loading bar (shell redesign D7) — filament/navigation/progress
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023.98px) {
    :root {
        --hn-head-h: 58px;
    }
}

.hn-loadbar {
    position: fixed;
    inset-inline: 0;
    inset-block-start: calc(var(--hn-head-h) - 1px);
    block-size: 3px;
    z-index: 45;
    pointer-events: none;
    overflow: hidden;
}

.hn-loadbar i {
    display: block;
    block-size: 100%;
    background: var(--hn-orange);
    box-shadow: 0 0 8px var(--hn-orange);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
}

/* It grows from the reading start. */
[dir='rtl'] .hn-loadbar i {
    transform-origin: right;
}

.hn-loadbar-run i {
    opacity: 1;
    transform: scaleX(0.8);
    transition: transform 1.2s cubic-bezier(0.1, 0.7, 0.2, 1);
}

.hn-loadbar-done i {
    opacity: 0;
    transform: scaleX(1);
    transition: transform 0.2s ease, opacity 0.25s 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .hn-loadbar-run i,
    .hn-loadbar-done i {
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Connection banner (shell redesign D8) — filament/navigation/network
   ══════════════════════════════════════════════════════════════════════ */

.hn-netbar-live {
    position: fixed;
    inset-block-start: var(--hn-head-h);
    inset-inline: 0;
    z-index: 46;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.hn-netbar {
    padding: 7px 16px;
    border-end-start-radius: 12px;
    border-end-end-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--hn-shadow-dropdown);
    animation: hn-netbar-in 0.2s ease-out;
}

/* Offline: the dark banner (inverse of the page — it flips with the theme). */
.hn-netbar-offline {
    background: var(--ho-ink);
    color: var(--ho-surface);
}

.hn-netbar-online {
    background: var(--ho-success-ink);
    color: #fff;
}

.dark .hn-netbar-online {
    color: var(--ho-surface);
}

@keyframes hn-netbar-in {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* Phones (M8): a full-width strip right under the header — it rides up
   with the header when that slides away (see the M2 block). */
@media (max-width: 1023.98px) {
    .hn-netbar {
        flex: 1;
        padding: 7px 12px;
        border-radius: 0;
        box-shadow: none;
        text-align: center;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hn-netbar {
        animation: none;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Phone header hides on scroll (shell redesign M2, M8)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023.98px) {
    .hn-topbar {
        transition: transform 0.22s ease;
    }

    .hn-head-hidden .hn-topbar {
        transform: translateY(-100%);
    }

    /* The sticky container stays (it holds the bottom bar and the sheets);
       only its now-empty strip must let taps through to the page. */
    .hn-head-hidden .fi-topbar-ctn {
        pointer-events: none;
    }

    .hn-head-hidden .fi-topbar-ctn > * {
        pointer-events: auto;
    }

    /* The loading bar and the connection banner follow the header up. */
    .hn-loadbar,
    .hn-netbar-live {
        transition: inset-block-start 0.22s ease;
    }

    .hn-head-hidden .hn-loadbar,
    .hn-head-hidden .hn-netbar-live {
        inset-block-start: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hn-topbar,
    .hn-loadbar,
    .hn-netbar-live {
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Swipe to close (shell redesign M3) — window.homeiSwipe in the store
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023.98px) {
    /* The drawer takes horizontal drags; its list still scrolls vertically. */
    .fi-body .fi-sidebar.hn-sidebar {
        touch-action: pan-y;
    }

    /* Handles that own the vertical drag (the sheet grip and header
       already do). */
    .hn-sheet-acct-head,
    .hn-fullscreen-head {
        touch-action: none;
    }

    /* Short of the threshold, a sheet snaps back instead of jumping. */
    .hn-sheet,
    .hn-fullscreen {
        transition: transform 0.2s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hn-sheet,
    .hn-fullscreen,
    .fi-body .fi-sidebar.hn-sidebar {
        transition: none;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Install as an app (shell redesign M7) — partials/install(-row)
   ══════════════════════════════════════════════════════════════════════ */

.hn-install-row {
    display: flex;
    align-items: center;
    gap: 9px;
    inline-size: 100%;
    padding: 9px 12px;
    margin-block-start: 6px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--hn-text-2);
    font: inherit;
    font-size: 13px;
    text-align: start;
    cursor: pointer;
}

.hn-install-row:hover {
    background: var(--hn-surface-2);
    color: var(--hn-text);
}

.hn-sheet .hn-install-row {
    min-block-size: 44px;
    margin-block-start: 10px;
    border: 1px solid var(--hn-border);
    border-radius: 11px;
    font-size: 13.5px;
}

.hn-install-wrap .hn-scrim {
    z-index: 85;
}

.hn-install {
    z-index: 86;
    padding-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
}

.hn-install-mark {
    display: flex;
    color: var(--hn-orange);
}

.hn-install-mark .hn-brand-mark {
    block-size: 22px;
}

.hn-install-body {
    padding: 12px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.hn-install-intro {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--hn-text-2);
}

.hn-install-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hn-step;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hn-install-steps li {
    counter-increment: hn-step;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    background: var(--hn-surface-2);
    font-size: 13.5px;
    color: var(--hn-text);
}

.hn-install-steps li::before {
    content: counter(hn-step);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background: var(--ho-accent-soft);
    color: var(--hn-orange-text);
    font-size: var(--ho-text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.hn-install-steps li span {
    flex: 1;
}

.hn-install-steps li svg {
    color: var(--ho-info-ink);
    flex-shrink: 0;
}

.hn-install-ready {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hn-install-ready p {
    margin: 0;
    font-size: 13.5px;
    color: var(--hn-text);
}

/* The contrast-safe accent fill, as «+ إضافة». */
.hn-install-go {
    block-size: 44px;
    border: 0;
    border-radius: 11px;
    background: var(--ho-accent-fill);
    color: var(--ho-accent-on-fill);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.hn-install-later {
    align-self: center;
    padding: 8px 12px;
    border: 0;
    background: none;
    color: var(--hn-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* Desktop: a small centred dialog instead of a bottom sheet. Centred with
   physical left + translate, which is the same in both directions. */
@media (min-width: 1024px) {
    .hn-install {
        inset-block-end: auto;
        inset-inline: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        inline-size: 400px;
        max-inline-size: calc(100vw - 32px);
        border-radius: 16px;
        padding-block-end: 16px;
    }

    .hn-install .hn-grip {
        display: none;
    }

    /* The desktop column hides the drawer's scrim; the dialog keeps its own. */
    .hn-install-wrap .hn-scrim {
        display: block;
    }

    .hn-install .hn-sheet-head {
        padding-block-start: 16px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Mockup match (shell redesign, FIX-1) — the sidebar column, the rail and
   the phone menu drawn to docs/design/shell-2026-09 at its measurements.
   Placed last so it wins over the earlier layers at equal specificity.
   Colour roles: brand → --hn-orange, brand-600 → --hn-orange-text,
   brand-50 → --ho-accent-soft, brand-100 → --ho-accent-edge,
   ink → --ho-ink, ink-2 → --hn-text-2, ink-3 → --ho-ink-muted,
   surface-2 → --hn-surface-2, line → --hn-border.
   ══════════════════════════════════════════════════════════════════════ */

/* Pieces that only one layout shows. */
.hn-sep,
.hn-fav-star {
    display: none;
}

.hn-row-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* The icon takes the row's ink, as the mockup draws it. */
    color: inherit;
}

.hn-row-ic .hn-rail-icon {
    stroke-width: 1.8;
}

.hn-chev svg {
    inline-size: 16px;
    block-size: 16px;
}

.hn-chev {
    color: var(--ho-ink-muted);
}

.hn-pin svg {
    inline-size: 15px;
    block-size: 15px;
}

/* ── Desktop column (≥1024px) ─────────────────────────────────────────── */
@media (min-width: 1024px) {
    .hn-nav {
        padding: 12px 8px 16px;
        gap: 10px;
    }

    .hn-pinned {
        margin: 0;
    }

    .hn-sep {
        display: block;
        block-size: 1px;
        margin-inline: 6px;
        background: var(--hn-border);
    }

    .hn-nav-label {
        display: none;
    }

    .hn-sections {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* First-level rows: 36px, 9px inline padding, 13px / 500 secondary ink,
       a 19px icon — icons show in the open column too. */
    .hn-row {
        min-block-size: 36px;
        margin: 0;
        padding: 6px 9px;
        gap: 9px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        color: var(--hn-text-2);
    }

    .hn-row:hover {
        background: var(--hn-surface-2);
        color: var(--ho-ink);
    }

    .hn-row-ic .hn-rail-icon,
    .hn-row-ic .hn-rail-heroicon {
        display: block;
        inline-size: 19px;
        block-size: 19px;
    }

    .hn-row.hn-on,
    .hn-row.hn-on:hover {
        background: var(--ho-accent-soft);
        border-color: var(--ho-accent-edge);
        color: var(--hn-orange-text);
        font-weight: 600;
    }

    .hn-row-section.hn-in-active {
        color: var(--ho-ink);
        font-weight: 600;
    }

    .hn-row.hn-on .hn-row-ic,
    .hn-row-section.hn-in-active .hn-row-ic {
        color: var(--hn-orange);
    }

    /* Sub-pages: indented 14px on a 1px guide line 13px in, each row a
       7px dot on that line — hollow, or brand orange for the page you are
       on. No tile: the current page is its orange words and filled dot. */
    .hn-sub {
        position: relative;
        margin-block: 2px 4px;
        padding-inline-start: 14px;
    }

    .hn-sub::before {
        inset-block: 4px;
        inset-inline-start: 13px;
        inline-size: 1px;
        background: var(--hn-border);
    }

    .hn-sub-deep {
        margin-inline-start: 14px;
    }

    .hn-row-child,
    .hn-row-grandchild {
        min-block-size: 34px;
        padding: 5px 6px;
        padding-inline-start: 16px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 400;
        color: var(--hn-text-2);
    }

    .hn-row-child::before {
        content: '';
        position: absolute;
        inset-inline-start: -4px;
        inset-block-start: 50%;
        inline-size: 7px;
        block-size: 7px;
        margin-block-start: -3.5px;
        border-radius: 50%;
        background: var(--hn-surface);
        border: 1.5px solid var(--hn-border);
        box-sizing: border-box;
    }

    .hn-row-child:hover {
        background: var(--hn-surface-2);
        color: var(--ho-ink);
    }

    .hn-row-child.hn-on,
    .hn-row-child.hn-on:hover {
        background: transparent;
        border-color: transparent;
        color: var(--hn-orange-text);
        font-weight: 600;
    }

    .hn-row-child.hn-on::before {
        background: var(--hn-orange);
        border-color: var(--hn-orange);
    }

    /* Rail — 72px: centred 19px icons in 36px rows; the section holding
       your page keeps the soft accent. */
    .hn-rail .hn-nav {
        padding-inline: 10px;
        gap: 10px;
    }

    .hn-rail .hn-row {
        justify-content: center;
        padding: 0;
        block-size: 36px;
    }

    .hn-rail .hn-row-section.hn-in-active {
        background: var(--ho-accent-soft);
        border-color: var(--ho-accent-edge);
    }

    .hn-rail .hn-sep {
        display: none;
    }

    /* Hot count on the icon's top corner (the mockup draws it at 9px; the
       12px type floor keeps it at --ho-text-xs). */
    .hn-rail .hn-row > .hn-badge-hot {
        inset-block-start: 1px;
        inset-inline-end: 4px;
        line-height: 14px;
        padding: 0 4px;
        border: 0;
    }

    /* The rail flyout: a 12px card, the section and its count, its pages. */
    .hn-flyout {
        min-inline-size: 200px;
        max-inline-size: 260px;
        padding: 6px;
        border-radius: 12px;
    }

    .hn-flyout-title {
        padding: 6px 10px;
        font-size: 13px;
    }

    .hn-flyout a {
        padding: 7px 10px;
        border-radius: 8px;
        font-size: 12.5px;
        color: var(--hn-text-2);
    }

    .hn-flyout a:hover,
    .hn-flyout a:focus-visible {
        background: var(--hn-surface-2);
        color: var(--ho-ink);
    }

    .hn-flyout a.hn-on {
        background: var(--ho-accent-soft);
        color: var(--hn-orange-text);
        font-weight: 600;
    }
}

/* ── Phone menu («الأقسام», <1024px): a full screen, not a side drawer ── */
@media (max-width: 1023.98px) {
    .fi-body .fi-sidebar.hn-sidebar {
        inline-size: 100%;
        max-inline-size: none;
        background: var(--hn-page);
        border: 0;
        box-shadow: none;
    }

    .fi-body .fi-sidebar.hn-sidebar ~ .hn-scrim,
    .hn-sidebar-root > .hn-scrim {
        display: none;
    }

    .hn-drawer-head {
        gap: 8px;
        min-block-size: 58px;
        padding: 10px 12px;
        padding-inline-start: 16px;
        background: var(--hn-surface);
        border-block-end: 1px solid var(--hn-border);
    }

    .hn-drawer-title {
        flex: 1;
        font-size: 17px;
        font-weight: 700;
        color: var(--ho-ink);
    }

    .hn-drawer-close {
        inline-size: 38px;
        block-size: 38px;
        border-radius: 12px;
        color: var(--hn-text-2);
    }

    .hn-nav {
        padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
        gap: 0;
    }

    /* Favorites: a label, then a row of chips that scrolls sideways. */
    .hn-pinned {
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .hn-pinned-hdr {
        padding: 0 2px 8px;
        color: var(--ho-ink-muted);
        font-weight: 600;
    }

    .hn-fav-list {
        display: flex;
        gap: 8px;
        margin-inline: -16px;
        padding-inline: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hn-fav-list::-webkit-scrollbar {
        display: none;
    }

    .hn-fav {
        flex-shrink: 0;
        min-block-size: 36px;
        padding-inline: 12px;
        gap: 6px;
        border-radius: 12px;
        background: var(--ho-accent-soft);
        border: 1px solid var(--ho-accent-edge);
        color: var(--ho-ink);
        font-size: 12.5px;
        font-weight: 500;
        white-space: nowrap;
    }

    .hn-fav .hn-row-label {
        flex: none;
    }

    .hn-fav-star {
        display: block;
        inline-size: 14px;
        block-size: 14px;
        color: var(--hn-orange);
    }

    .hn-nav-label {
        margin: 16px 2px 8px;
        font-size: var(--ho-text-xs);
        font-weight: 600;
        color: var(--ho-ink-muted);
    }

    /* The list scrolls; its blocks keep their height (a squeezed card
       would clip its own sections and leave nothing to scroll). */
    .hn-nav > * {
        flex-shrink: 0;
    }

    /* Every section in one rounded card. */
    .hn-sections {
        background: var(--hn-surface);
        border: 1px solid var(--hn-border);
        border-radius: 14px;
        overflow: hidden;
    }

    .hn-sections > * + * {
        border-block-start: 1px solid var(--hn-border);
    }

    .hn-row {
        min-block-size: 52px;
        margin: 0;
        padding: 8px 14px;
        gap: 12px;
        border: 0;
        border-radius: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--ho-ink);
        background: none;
    }

    .hn-row:active {
        background: var(--hn-surface-2);
    }

    .hn-row-ic {
        inline-size: 34px;
        block-size: 34px;
        border-radius: 10px;
        background: var(--hn-surface-2);
        color: var(--hn-text-2);
    }

    .hn-row-ic .hn-rail-icon,
    .hn-row-ic .hn-rail-heroicon {
        display: block;
        inline-size: 18px;
        block-size: 18px;
    }

    .hn-row.hn-on,
    .hn-row-section.hn-in-active {
        background: none;
        color: var(--hn-orange-text);
        font-weight: 700;
    }

    .hn-row.hn-on .hn-row-ic,
    .hn-row-section.hn-in-active .hn-row-ic {
        background: var(--ho-accent-soft);
        color: var(--hn-orange);
    }

    /* The open section's pages, on the sunken ground. */
    .hn-sub {
        padding: 0 0 8px;
        background: var(--hn-surface-2);
    }

    .hn-sub::before {
        display: none;
    }

    .hn-sub-deep {
        padding: 0;
    }

    .hn-row-child,
    .hn-row-grandchild {
        min-block-size: 44px;
        padding-block: 6px;
        padding-inline: 60px 14px;
        font-size: 13.5px;
        font-weight: 400;
        color: var(--hn-text-2);
    }

    .hn-row-grandchild {
        padding-inline-start: 74px;
    }

    .hn-row-child.hn-on {
        color: var(--hn-orange-text);
        font-weight: 700;
    }

    /* Each page carries its star at the end, as drawn. */
    .hn-row-section ~ div .hn-pin,
    .hn-sub .hn-pin {
        display: flex;
        opacity: 1;
        color: var(--ho-ink-muted);
    }

    .hn-sub .hn-pin svg {
        inline-size: 18px;
        block-size: 18px;
    }

    .hn-sub .hn-pin.hn-pin-on {
        color: var(--hn-orange);
    }
}

/* ── Phone screens: notifications + search (mockup .screen / .sc-hd) ─── */
.hn-screen {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    background: var(--hn-page);
}

.hn-screen-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 12px;
    background: var(--hn-surface);
    border-block-end: 1px solid var(--hn-border);
    touch-action: none;
}

.hn-screen-back {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--hn-text-2);
    cursor: pointer;
}

/* The back chevron points to the reading start. */
[dir='ltr'] .hn-screen-back svg {
    transform: scaleX(-1);
}

.hn-screen-title {
    flex: 1;
    min-inline-size: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ho-ink);
}

.hn-screen .hn-sheet-actions {
    margin-inline-start: 0;
    font-size: 12.5px;
    font-weight: 600;
}

.hn-screen .hn-link {
    color: var(--hn-orange-text);
}

.hn-screen .hn-link-danger {
    color: var(--ho-danger-ink);
}

.hn-screen-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
}

.hn-chips {
    display: flex;
    gap: 6px;
    margin: 0 -16px 12px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hn-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    block-size: 32px;
    padding-inline: 12px;
    border-radius: 999px;
    border: 1px solid var(--hn-border);
    background: var(--hn-surface);
    color: var(--hn-text-2);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.hn-chip b {
    font-size: var(--ho-text-xs);
}

.hn-chip.hn-on {
    background: var(--ho-ink);
    border-color: var(--ho-ink);
    color: var(--ho-surface);
}

.hn-notif-card {
    background: var(--hn-surface);
    border: 1px solid var(--hn-border);
    border-radius: 14px;
    overflow: hidden;
}

/* Search: the same header, a 42px field and result cards. */
.hn-fullscreen {
    background: var(--hn-page);
}

.hn-fullscreen-head {
    gap: 8px;
    padding: 10px 12px;
    background: var(--hn-surface);
}

.hn-msearch {
    block-size: 42px;
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    background: var(--hn-surface);
    color: var(--ho-ink-muted);
}

.hn-msearch:focus-within {
    border-color: var(--hn-orange);
}

.hn-cancel {
    padding: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hn-orange-text);
}

.hn-fullscreen-body {
    padding: 14px 16px;
}

.hn-mresult {
    gap: 12px;
    padding: 10px 12px;
    margin-block-end: 6px;
    border: 1px solid var(--hn-border);
    border-radius: 12px;
    background: var(--hn-surface);
}

.hn-mresult-ic {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 10px;
    background: var(--hn-surface-2);
    color: var(--hn-text-2);
    flex-shrink: 0;
}

.hn-mresult-ic svg {
    inline-size: 17px;
    block-size: 17px;
}

.hn-mresult-text {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.hn-mresult-label {
    font-weight: 700;
}

/* ── Account menus (desktop dropdown + phone sheet): a list, as drawn ─── */
.hn-acct-id {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    line-height: 1.35;
}

.hn-acct-id .hn-acct-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
}

.hn-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    min-block-size: 40px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--hn-text-2);
    font: inherit;
    font-size: 13.5px;
    text-align: start;
    cursor: pointer;
}

button.hn-menu-row:hover {
    background: var(--hn-surface-2);
    color: var(--ho-ink);
}

.hn-menu-ic {
    inline-size: 19px;
    block-size: 19px;
    flex-shrink: 0;
}

.hn-menu-label {
    flex: 1;
    min-inline-size: 0;
}

.hn-menu-row .hn-seg,
.hn-sheet .hn-menu-row .hn-seg,
.hn-sheet .hn-menu-row .hn-seg-lang {
    display: flex;
    gap: 2px;
    padding: 2px;
    margin: 0;
    border-radius: 9px;
    background: var(--hn-surface-2);
    flex-shrink: 0;
}

.hn-menu-row .hn-seg-btn,
.hn-sheet .hn-menu-row .hn-seg-btn,
.hn-sheet .hn-menu-row .hn-seg-lang .hn-seg-btn {
    flex: none;
    block-size: 28px;
    min-inline-size: 32px;
    padding-inline: 8px;
    border: 0;
    border-radius: 7px;
    font-size: var(--ho-text-xs);
}

.hn-menu-row .hn-seg-btn.hn-on {
    background: var(--hn-surface);
    color: var(--hn-orange-text);
    box-shadow: 0 1px 2px rgb(16 28 61 / 12%);
}

.hn-menu-danger,
.hn-logout.hn-menu-danger,
.hn-sheet-logout.hn-menu-danger {
    color: var(--ho-danger-ink);
    border: 0;
    margin: 0;
    justify-content: flex-start;
}

button.hn-menu-danger:hover {
    background: var(--ho-danger-soft);
    color: var(--ho-danger-ink);
}

/* Desktop dropdown: 310px, a 42px avatar with name + e-mail, then rows. */
.hn-pop-acct {
    inline-size: 310px;
    padding: 0 0 6px;
    overflow: hidden;
}

.hn-pop-acct .hn-acct-head {
    padding: 16px;
    gap: 12px;
    border-block-end: 1px solid var(--hn-border);
    margin-block-end: 6px;
}

.hn-pop-acct .hn-acct-avatar {
    inline-size: 42px;
    block-size: 42px;
    font-size: 17px;
}

.hn-pop-acct > .hn-menu-row,
.hn-pop-acct > form {
    margin-inline: 6px;
    inline-size: auto;
}

.hn-pop-acct > form {
    display: block;
    border-block-start: 1px solid var(--hn-border);
    margin-block-start: 6px;
    padding-block-start: 6px;
}

/* Phone sheet: a 48px avatar, then 50px rows split by hairlines. */
.hn-sheet-acct-head {
    gap: 12px;
    padding: 4px 2px 12px;
}

.hn-sheet-acct-head .hn-acct-avatar {
    inline-size: 48px;
    block-size: 48px;
    font-size: 18px;
}

.hn-sheet-acct-head .hn-acct-name {
    font-size: 15px;
}

.hn-sheet-acct .hn-menu-row {
    min-block-size: 50px;
    margin: 0;
    padding-inline: 4px;
    border: 0;
    border-radius: 0;
    border-block-end: 1px solid var(--hn-border);
    font-size: 14px;
    color: var(--ho-ink);
}

.hn-sheet-acct form .hn-menu-row {
    border-block-end: 0;
    color: var(--ho-danger-ink);
}

.hn-sheet-add .hn-sheet-title {
    font-size: 16px;
}