/*
 * 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). MOBILE-BARS-1:
       56px (was the mockup's 68px) so the page keeps more of the phone. */
    --hn-bottomnav-h: 56px;
    --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) {
    /* MOBILE-BARS-1: 52px (was 60px). */
    .hn-topbar-row {
        min-height: 52px;
        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);
}

/* TASKS-HUB-2: «وافق / ارفض» on a postponement request */
.hn-notif-decide { display: flex; gap: 6px; margin-block-start: 8px; }
.hn-notif-decide .hn-notif-action { margin-block-start: 0; }
.hn-notif-action.is-go { background: var(--hn-orange-bg); font-weight: 700; }

.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;
    /* The items (--hn-bottomnav-h) plus the safe area. */
    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: var(--hn-bottomnav-h);
    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: 44px;
    block-size: 26px;
    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: 84px;
    }
}

.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;
}

/* MOBILE-BARS-1: a smaller house mark, so the phone bar stays 52px. */
.hn-mlead .hn-brand-mark {
    block-size: 28px;
}

/*
 * 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;
}

/* A title with no section above it (home) is one line, so it can be larger. */
.hn-mtitle-page:only-child {
    font-size: 18px;
}

/* «+ إضافة» — 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,
    .hn-bottomnav {
        transition: transform 0.22s ease;
    }

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

    /* MOBILE-BARS-1: the bottom bar slides away with the header. It stays
       on pages whose own bar is pinned just above it (a save bar, the
       planning sheet, the menu editor's draft bar, the work center's bulk
       bar while it shows), so those never float over an empty strip. */
    .hn-head-hidden body:not(:has(.co-savebar, .mcp-aside, .hnm-foot, .wcd-bulk:not([style*='display: none']))) .hn-bottomnav {
        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-bottomnav,
    .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);
}

/* SITE-PULSE-2: the bell's «الكل / الشركة / ليّا» chips are buttons; on desktop they sit under the dropdown head. */
button.hn-chip {
    font-family: inherit;
    cursor: pointer;
}

.hn-pop-notif .hn-bell-tabs {
    margin: 0;
    padding: 10px 16px;
    border-block-end: 1px solid var(--hn-border-faint);
}

.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;
}