/*
   HYSEC OS mobile surface

   This file is the final mobile cascade. Mobile pages intentionally share one
   material vocabulary: one visible rim per surface, open content sections and
   a single floating navigation layer. The compositor provides the changing
   background through backdrop-filter; no nested pseudo-element is painted on
   top of a surface.
*/

html.hysec-mobile {
    color-scheme: dark;
    /* One viewport height owns the document, app host and boot screen.
       The mobile layout and dock use that host's containing block. */
    --mobile-shell-height: 100vh;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-left: env(safe-area-inset-left, 0px);
    --mobile-dock-clearance: calc(82px + var(--mobile-safe-bottom));
    --mobile-gutter: 20px;
    --mobile-page-top: 24px;
    --mobile-page-bottom: 38px;
    --mobile-bg: #0b0c0f;
    --mobile-bg-raised: #111318;
    --mobile-text: #eee8dc;
    --mobile-muted: rgba(219, 207, 185, .66);
    --mobile-faint: rgba(219, 207, 185, .42);
    --mobile-gold: #e4a738;
    --mobile-gold-soft: #f2ca7d;
    --mobile-rim: rgba(255, 255, 255, .19);
    --mobile-rim-quiet: rgba(255, 255, 255, .10);
    --mobile-edge: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.28);
    --mobile-edge-soft: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.22);
    --mobile-glass: rgba(25, 25, 24, .62);
    --mobile-glass-soft: rgba(24, 24, 23, .44);
    --mobile-glass-shadow: 0 16px 36px rgba(0, 0, 0, .25), 0 3px 10px rgba(0, 0, 0, .18);
    --mobile-radius-sm: 14px;
    --mobile-radius-md: 20px;
    --mobile-radius-lg: 26px;
    background: var(--mobile-bg);
    overscroll-behavior: none;
}

@supports (height: 100dvh) {
    html.hysec-mobile { --mobile-shell-height: 100dvh; }
}

@supports (height: 100lvh) {
    html.hysec-mobile.hysec-standalone { --mobile-shell-height: 100lvh; }
    @media (display-mode: standalone), (display-mode: fullscreen) {
        html.hysec-mobile { --mobile-shell-height: 100lvh; }
    }
}

html.hysec-mobile,
html.hysec-mobile body {
    width: 100%; height: var(--mobile-shell-height); min-width: 0; min-height: var(--mobile-shell-height); margin: 0;
    background:
        radial-gradient(560px 420px at 8% -8%, rgba(228, 167, 56, .13), transparent 68%),
        radial-gradient(520px 480px at 108% 24%, rgba(137, 103, 48, .08), transparent 72%),
        var(--mobile-bg);
    overscroll-behavior: none;
}
html.hysec-mobile #app {
    position: fixed; inset: auto 0; top: 0;
    width: 100%; height: var(--mobile-shell-height); min-height: 0;
    overflow: hidden; background: transparent;
}
html.hysec-mobile .boot-screen,
html.hysec-mobile #boot-screen-static {
    position: fixed; inset: auto 0; top: 0;
    width: 100%; height: var(--mobile-shell-height); min-height: 0;
}
html.hysec-mobile .loading-layout {
    position: absolute; inset: 0; height: 100%;
}
@media (min-width: 700px) { html.hysec-mobile { --mobile-gutter: 32px; --mobile-page-top: 30px; } }

/* Shell and page rhythm --------------------------------------------------- */
.mobile-root {
    --mobile-content-left: max(var(--mobile-gutter), var(--mobile-safe-left));
    --mobile-content-right: max(var(--mobile-gutter), var(--mobile-safe-right));
    color: var(--mobile-text);
    font-family: 'Jura', sans-serif;
    background:
        radial-gradient(560px 420px at 8% -8%, rgba(228, 167, 56, .13), transparent 68%),
        radial-gradient(520px 480px at 108% 24%, rgba(137, 103, 48, .08), transparent 72%),
        var(--mobile-bg);
}

.mobile-root .m-page,
.mobile-root .member-identity-page {
    width: 100%; max-width: none; min-width: 0; min-height: 0; flex: 1 0 auto;
    margin: 0; padding: var(--mobile-page-top) var(--mobile-content-right) var(--mobile-page-bottom) var(--mobile-content-left);
    box-sizing: border-box; color: var(--mobile-text); background: transparent; border: 0; box-shadow: none;
    display: flex; flex-direction: column; gap: 20px; height: auto; overflow: visible;
}
.mobile-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0; padding: 0 0 4px; }
.mobile-page-heading-copy { flex: 1; min-width: 0; }
.mobile-page-heading h1 { margin: 0; color: var(--mobile-text); font: 600 clamp(27px, 7vw, 34px)/1.2 'Jura',sans-serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
.mobile-page-context { margin-top: 8px; color: var(--mobile-muted); font-size: 14px; line-height: 1.55; }
.mobile-page-eyebrow { color: var(--mobile-gold-soft); font-size: 11px; margin-bottom: 9px; letter-spacing: .1em; }
.mobile-page-heading-actions { display: flex; align-items: center; gap: 8px; flex: none; }
html.hysec-mobile .mu .mobile-page-heading { margin-left: var(--mobile-content-left); margin-right: var(--mobile-content-right); }
.mobile-root .m-page > .header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 0 12px; margin: 0 0 8px; border: 0; background: transparent; box-shadow: none;
}
.mobile-root .m-page .header .spacer { display: none; }
.mobile-root .m-page .titles { flex: 1; min-width: 0; text-align: left; align-items: flex-start; }
.mobile-root .m-page .title { margin: 0; color: var(--mobile-text); font: 600 clamp(25px, 7vw, 34px)/1.15 'Jura', sans-serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
.mobile-root .m-page .subtitle { margin-top: 6px; color: var(--mobile-muted); font-size: 14px; }

/* Content is open by default. A class that represents an actual object or
   decision may opt into .mobile-surface below; generic sections never grow a
   frame merely because a desktop stylesheet called them a panel. */
.mobile-root .m-page :is(.section, .panel, .card, .hero, .mission-hero) {
    margin: 0; padding: 16px 0; border: 0 !important; border-radius: 0;
    background: transparent !important; box-shadow: none !important;
}
.mobile-root .m-page > :is(.section, .panel):first-of-type,
.mobile-root .m-page > .header + :is(.section, .panel) { padding-top: 0; }
.mobile-root .m-page :is(.section-title, .panel-title, .group-title, .score-title, .notes-title) {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    color: var(--mobile-text); font: 600 16px/1.35 'Jura', sans-serif;
}
.mobile-root .m-page :is(.panel-text, .section-body, .text, .description, .sub-text) {
    color: var(--mobile-muted); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere;
}
.mobile-root .m-page :is(.list, .member-list) { display: flex; flex-direction: column; gap: 0; }
.mobile-root .m-page :is(button.item, .note-card, .member-card) {
    display: flex; align-items: center; width: 100%; min-height: 72px; gap: 14px;
    padding: 15px 0; margin: 0; color: var(--mobile-text); text-align: left;
    border: 0 !important; border-bottom: 1px solid var(--mobile-rim-quiet) !important;
    border-radius: 0; background: transparent !important; box-shadow: none !important;
}
/* Item, offer and sub-unit entries: the one owner of their mobile frame. Pages
   keep only their inner layout (flex direction, gap). */
.mobile-root .m-page :is(.item-card, .offer-card, .sub-card) {
    padding: 18px 0; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.mobile-root .m-page .mobile-surface {
    padding: 18px; border: 0 !important; border-radius: var(--mobile-radius-md);
    background: var(--mobile-glass) !important; box-shadow: var(--mobile-edge), var(--mobile-glass-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.mobile-root .m-page :is(.subject, .note-title, .item-name, .offer-title, .name, .member-name) {
    color: var(--mobile-text); font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
}
.mobile-root .m-page :is(.when, .meetpoint, .meta, .member-meta, .meta-row) {
    color: var(--mobile-muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere;
}

/* One real surface: border + compositor, no nested painted frame. ---------- */
html.hysec-mobile .hss-liquid-glass {
    border: 0 !important;
    background: var(--mobile-glass) !important; box-shadow: var(--mobile-edge), var(--mobile-glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(175%) contrast(1.04);
    backdrop-filter: blur(22px) saturate(175%) contrast(1.04);
}
html.hysec-mobile .hss-liquid-glass::before,
html.hysec-mobile .hss-liquid-glass::after { display: none !important; content: none !important; }

/* Controls --------------------------------------------------------------- */
.mobile-root .m-page :is(button, a, input, select, textarea) { touch-action: manipulation; }
.mobile-root .m-page :is(.btn, button.primary, button.secondary, button.danger, .back, .score-option, .role-item, .nav-btn, .icon-btn, .action-btn, .clear-btn) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 16px;
    color: var(--mobile-text); font: 600 14px/1.35 'Jura', sans-serif; text-transform: none; letter-spacing: 0;
    border: 0 !important; border-radius: var(--mobile-radius-sm);
    background: var(--mobile-glass-soft); box-shadow: var(--mobile-edge-soft), 0 8px 18px rgba(0,0,0,.14);
}
.mobile-root .m-page :is(.btn.primary, button.primary) { color: #1c1509; border-color: rgba(255,238,183,.4) !important; background: rgba(228,167,56,.84); }
.mobile-root .m-page :is(.btn.danger, button.danger) { color: #f1b4a8; border-color: rgba(239,146,124,.3) !important; background: rgba(239,146,124,.1); }
.mobile-root .m-page .btn.warning { color: #f3dc94; background: rgba(255,193,7,.12); }
.mobile-root .m-page .btn.compact { padding: 10px; font-size: 11px; }
.mobile-root .m-page :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--mobile-gold); outline-offset: 3px; }
.mobile-root .m-page :is(button, a):active { transform: scale(.985); }
.mobile-root .m-page :is(input.search, input.field-input, input.input-field, input.qty, input.quantity-input, textarea:not(.mud-input-slot), select.selector-input) {
    width: 100%; min-height: 52px; min-width: 0; max-width: 100%; padding: 13px 14px; color: var(--mobile-text);
    font: 400 16px/1.5 'Jura', sans-serif; border: 0 !important;
    border-radius: var(--mobile-radius-sm); background: var(--mobile-glass-soft);
    box-shadow: var(--mobile-edge-soft);
    -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
html.hysec-mobile .mobile-root .mud-input-control { min-width: 0; }
html.hysec-mobile .mobile-root .mud-input-control.home-search,
html.hysec-mobile .mobile-root .mud-input-control:has(.mud-input-slot[placeholder*="suchen"]),
html.hysec-mobile .mobile-root .mud-input-control:has(.mud-input-slot[placeholder*="durchsuchen"]) {
    min-width: 0; width: 100%;
    border-radius: var(--mobile-radius-sm);
    background: var(--mobile-glass) !important;
    box-shadow: var(--mobile-edge), var(--mobile-glass-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}
html.hysec-mobile .mobile-root .mud-input-control.home-search .mud-input-root,
html.hysec-mobile .mobile-root .mud-input-control:has(.mud-input-slot[placeholder*="suchen"]) .mud-input-root,
html.hysec-mobile .mobile-root .mud-input-control:has(.mud-input-slot[placeholder*="durchsuchen"]) .mud-input-root {
    background: transparent !important; box-shadow: none !important;
}
html.hysec-mobile .mobile-home > .mud-input-control.home-search {
    position: sticky; top: 0; z-index: 5;
    transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; contain: paint;
}
html.hysec-mobile .mobile-root .mud-input-control .mud-input-root {
    box-sizing: border-box; height: 52px; min-height: 52px; padding: 0 14px !important;
    border: 0 !important; border-radius: var(--mobile-radius-sm) !important;
    background: var(--mobile-glass-soft) !important; box-shadow: var(--mobile-edge-soft) !important;
}
.mobile-root .m-page :is(.empty, .empty-state, .no-members, .loading, .loading-state, .loading-container, .notice) {
    margin: 0; padding: 16px 0; border: 0 !important; border-radius: 0;
    background: transparent !important; box-shadow: none !important;
    color: var(--mobile-muted); line-height: 1.6; overflow-wrap: anywhere;
}
.mobile-root .m-page :is(.notice.error, .notice.warn) {
    padding-left: 14px; border-left: 2px solid rgba(239,146,124,.6) !important;
}
.mobile-root .m-page :is(.empty, .empty-state, .no-members) { color: var(--mobile-muted); }
.mobile-root .m-page > .mud-input-control,
.mobile-root .m-page > .mud-select,
.mobile-root .m-page > .mud-autocomplete,
.mobile-root .m-page > .mud-picker {
    flex: 0 0 auto;
}
html.hysec-mobile .mobile-root .mud-input-control .mud-input-root.mud-input-multiline {
    height: auto; min-height: 108px; padding: 13px 14px !important;
}

/* The app title bar already provides the mobile-level navigation. The legacy
   wizard header must stay in normal flow instead of competing for the same
   top sticky slot and producing a second composited surface. */
html.hysec-mobile .mobile-root .mobile-action-page > .header {
    position: static !important; top: auto !important; z-index: auto !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.hysec-mobile .mobile-root .mud-input-control .mud-input-outlined:not(.mud-input-multiline),
html.hysec-mobile .mobile-root .mud-input-control .mud-input-outlined-border {
    height: 52px;
}
html.hysec-mobile .mobile-root .mud-input-control .mud-input-outlined-border { border: 0 !important; border-radius: var(--mobile-radius-sm) !important; }
html.hysec-mobile .mobile-root .mud-input-control .mud-input-slot { background: transparent !important; }
html.hysec-mobile .mobile-root .mud-input-control:focus-within .mud-input-outlined-border { border-color: rgba(228,167,56,.76) !important; }
html.hysec-mobile .mud-input-control :is(input, textarea, .mud-select-input) { font-size: 16px !important; }
html.hysec-mobile .mud-icon-button:not(.mud-switch-base):not(.mud-picker-calendar-day) { min-width: 48px !important; min-height: 48px; }

/* File actions render in MudBlazor's popover portal, outside the page scope. */
html.hysec-mobile .mobile-files-actions-menu { min-width: 228px; max-width: calc(100vw - 32px); }
html.hysec-mobile .mobile-files-actions-menu .mud-menu-item { min-height: 48px; }

/* Legacy page sheets collapse into the same open, readable mobile rhythm.
   Their desktop outlines must not create a second glass surface. */
html.hysec-mobile .mobile-root .m-page :where(.stats, .stat, .lead-card, .g, .item-row, .archive-toggle, .prio-block) {
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
html.hysec-mobile .mobile-root .m-page :where(.stats) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); align-items: start; gap: 16px;
    padding: 8px 0 14px !important;
}
html.hysec-mobile .mobile-root .m-page :where(.stat) { min-width: 0; padding: 0 !important; text-align: left; }
html.hysec-mobile .mobile-root .m-page :where(.stat-value, .stat-val, .lead-label, .meta-label) { color: var(--mobile-muted); }
html.hysec-mobile .mobile-root .m-page :where(.stat-value, .stat-val) { font-size: 19px; line-height: 1.1; }
html.hysec-mobile .mobile-root .m-page :where(.stat-label) { margin-top: 4px; color: var(--mobile-faint); font-size: 11px; }
html.hysec-mobile .mobile-root .m-page :where(.archive-toggle) {
    display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between;
    padding: 14px 0 !important; color: var(--mobile-text); border-bottom: 1px solid var(--mobile-rim-quiet) !important;
}
/* One mobile chip for counts, status words, owners and tags. Shape and material
   live here; a page adds at most a tone (color) modifier such as .done or .mia. */
html.hysec-mobile .mobile-root .m-page :where(.note-status, .chip, .owner-chip, .tag, .sub-badge, .badge) {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 10px;
    border: 0 !important; border-radius: 999px; box-shadow: none !important; background: rgba(228,167,56,.10) !important;
    font: 600 12px/1.4 'Jura', sans-serif;
}
:where(.mobile-root .m-page) :is(.note-status, .chip, .owner-chip, .tag, .sub-badge, .badge) { color: var(--mobile-text); }
html.hysec-mobile .mobile-root .m-page :where(.lead-grid, .sub-grid, .grid) { gap: 0; }

/* Home launcher ---------------------------------------------------------- */
.mobile-root .home-welcome { padding: 10px 0 18px; margin: 0; border: 0; }
.mobile-root .home-date { color: var(--mobile-gold-soft); font: 600 10px/1 'Roboto Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.mobile-root .home-welcome h1 { margin: 11px 0 6px; color: var(--mobile-text); font-size: clamp(29px, 8vw, 38px); font-weight: 550; letter-spacing: -.04em; }
.mobile-root .home-welcome p { margin: 0; color: var(--mobile-muted); font-size: 14px; }
.mobile-root .home-app-group { margin-top: 9px; }
.mobile-root .home-app-group h2 { margin: 0 0 16px; color: var(--mobile-faint); font: 600 10px/1 'Roboto Mono', monospace; letter-spacing: .15em; text-transform: uppercase; }
.mobile-root .home-app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 12px; }
.mobile-root .home-app { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; padding: 0; color: var(--mobile-text); font: 500 12px/1.3 'Jura', sans-serif; text-align: center; border: 0; background: transparent; }
.mobile-root .home-app > span:last-child { max-width: 100%; overflow-wrap: anywhere; }
.mobile-root .home-app-icon {
    width: 64px; height: 64px; display: grid; place-items: center; color: var(--mobile-gold-soft);
    border: 0 !important; border-radius: 20px; background: rgba(43, 39, 31, .56) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.22), 0 12px 24px rgba(0,0,0,.24);
    -webkit-backdrop-filter: blur(20px) saturate(180%) contrast(1.05); backdrop-filter: blur(20px) saturate(180%) contrast(1.05);
}
.mobile-root .home-app-icon::before, .mobile-root .home-app-icon::after { display: none !important; content: none !important; }
.mobile-root .home-app-icon svg { width: 29px; height: 29px; filter: drop-shadow(0 0 6px rgba(228,167,56,.16)); }
.mobile-root .home-app:active .home-app-icon { transform: scale(.94); border-color: rgba(242,202,125,.6) !important; }

/* Dock and section tabs use one rail, one indicator and transparent hit areas.
   Only their placement differs; geometry/material must not be redefined in
   Razor isolation, where an extra scope selector would override this contract. */
.hss-mobile-tabs-sticky-shell {
    isolation: isolate;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    contain: paint;
}
html.hysec-mobile .mobile-nav-rail {
    display: grid; grid-template-columns: repeat(var(--mobile-nav-count, 4), minmax(0, 1fr));
    align-items: stretch; gap: 3px; min-width: 0; padding: 5px;
    box-sizing: border-box; border: 1px solid var(--mobile-rim-quiet) !important;
    border-radius: 26px; background: rgba(25, 25, 24, .72) !important;
    box-shadow: var(--mobile-edge), var(--mobile-glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(175%) contrast(1.04);
    backdrop-filter: blur(22px) saturate(175%) contrast(1.04);
    isolation: isolate;
}
html.hysec-mobile .mobile-nav-rail::before,
html.hysec-mobile .mobile-nav-rail::after { display: none; content: none; }
html.hysec-mobile .mobile-nav-active-indicator {
    position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px;
    width: calc((100% - 10px - (var(--mobile-nav-count, 4) - 1) * 3px) / var(--mobile-nav-count, 4));
    border-radius: 19px; background: rgba(228, 167, 56, .16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.18);
    opacity: 1; pointer-events: none;
    transform: translateX(calc(var(--mobile-nav-active, -1) * (100% + 3px)));
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 140ms ease;
    will-change: transform;
}
html.hysec-mobile .mobile-nav-rail:not(.has-active) .mobile-nav-active-indicator { opacity: 0; }
html.hysec-mobile .mobile-nav-rail .mobile-nav-item {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 3px; min-width: 0; min-height: 52px; padding: 5px 3px;
    color: var(--mobile-muted); font: 500 10px/1.2 'Jura', sans-serif;
    text-decoration: none; white-space: nowrap; border: 0 !important; border-radius: 19px;
    background: transparent !important; box-shadow: none !important; cursor: pointer; touch-action: manipulation;
    transition: color 140ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}
html.hysec-mobile .mobile-nav-rail .mobile-nav-item:is(.active, .is-active),
html.hysec-mobile .mobile-nav-rail .mobile-nav-item:is(.active, .is-active):visited { color: var(--mobile-gold-soft); }
html.hysec-mobile .mobile-nav-rail .mobile-nav-item .mud-icon-root { width: 22px; height: 22px; }
html.hysec-mobile .mobile-nav-rail .mobile-nav-item:is(.active, .is-active) .mud-icon-root { transform: translateY(-1px); }
html.hysec-mobile .mobile-nav-rail .mobile-nav-item:active { transform: scale(.94); }
html.hysec-mobile .mobile-nav-rail .mobile-nav-item:focus-visible { outline: 2px solid var(--mobile-gold); outline-offset: -3px; }

/* The sticky shell stays transparent. A second masked/filtered backdrop here
   would hide the moving content from the glass rail and create a hard seam. */
.hss-mobile-tabs-sticky-shell::before { content: none; }
/* Hangar and Universe place the shared tabs in full-width page shells rather
   than inside the padded .m-page surface. Keep the same content gutter while
   allowing the sticky shell to span the scroll host. */
html.hysec-mobile .personal-hangar-mobile .hss-mobile-tabs-sticky-shell,
html.hysec-mobile .mu .hss-mobile-tabs-sticky-shell {
    margin: 0 0 22px;
    padding: 4px var(--mobile-content-right) 12px var(--mobile-content-left);
}
/* The hangar's figures follow its tabs directly, so its list starts within the first screen. */
html.hysec-mobile .personal-hangar-mobile .hss-mobile-tabs-sticky-shell { margin-bottom: 4px; }
.hss-mobile-tabs {
    position: relative; width: 100%; margin: 0;
}
.hss-mobile-tab-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.hss-mobile-tab-icon img { width: 24px; height: 24px; object-fit: contain; }
.hss-mobile-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rails with every entry labelled (Universe) read slightly larger. */
html.hysec-mobile .mobile-nav-rail.labelled .mobile-nav-item { font-size: 11px; }
.hss-mobile-tab-count { position: absolute; top: 4px; right: 5px; font-size: 9px; line-height: 1; opacity: .78; }

/* Filter and scope chips (Item Bank, Universe, Refinery): one row of links or
   toggle buttons. The row scrolls sideways; .wrap lets it break into lines.
   The active chip is .active (toggle button) or aria-current="true" (link). */
.mobile-root .mobile-chips { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mobile-root .mobile-chips.wrap { flex-wrap: wrap; overflow-x: visible; }
.mobile-root .mobile-chips::-webkit-scrollbar { display: none; }
.mobile-root .mobile-chips > :is(a, button) {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    color: var(--mobile-muted); font: 500 14px/1.3 'Jura', sans-serif; white-space: nowrap; text-decoration: none;
    border: 0 !important; border-radius: 22px; background: var(--mobile-glass-soft); box-shadow: var(--mobile-edge-soft); cursor: pointer;
}
.mobile-root .mobile-chips > :is(.active, [aria-current="true"]) { color: #1a1408; background: var(--mobile-gold-soft); font-weight: 600; }
.mobile-root .mobile-chips > :is(a, button):focus-visible { outline: 2px solid var(--mobile-gold); outline-offset: 2px; }

/* Bottom navigation is a single uninterrupted sheet. */
.mobile-dock {
    /* The dock belongs to the shell. It must share the content's height,
       including while WebKit changes its fixed-position viewport. */
    position: absolute; right: max(12px, var(--mobile-safe-right)); bottom: calc(10px + var(--mobile-safe-bottom)); left: max(12px, var(--mobile-safe-left));
    z-index: 6;
}
.mobile-content { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; padding-bottom: calc(82px + var(--mobile-safe-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: auto; }
.ptr-content { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; min-width: 0; min-height: 100%; }
.ptr-pulling .ptr-content, .ptr-refreshing .ptr-content { transform: translateY(var(--ptr-pull, 0px)); }

/* Sheets and dialogs ----------------------------------------------------- */
html.hysec-mobile .mud-dialog-container { inset: 0; height: auto; padding-top: max(16px, var(--mobile-safe-top)); align-items: flex-end; }
html.hysec-mobile .mud-dialog { width: 100%; max-width: 600px; max-height: 100%; margin: 0; padding-bottom: var(--mobile-safe-bottom); border: 0 !important; border-radius: 26px 26px 0 0 !important; background: rgba(22,21,19,.94) !important; box-shadow: var(--mobile-edge), 0 -18px 48px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); }
html.hysec-mobile .mobile-inbox { max-height: calc(100% - var(--mobile-safe-top)); border: 0 !important; border-radius: 26px 26px 0 0; background: rgba(22,21,19,.94) !important; box-shadow: var(--mobile-edge), 0 -18px 48px rgba(0,0,0,.35); }
html.hysec-mobile .mobile-inbox .mud-drawer-content {
    box-sizing: border-box; width: 100%; min-width: 0;
    padding: 22px var(--mobile-content-right) calc(28px + var(--mobile-safe-bottom)) var(--mobile-content-left);
    overflow: auto;
}
.mobile-inbox-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--mobile-rim-quiet); }
.mobile-inbox-heading > div > span { color: var(--mobile-gold-soft); font: 600 10px/1 'Roboto Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.mobile-inbox-heading h2 { margin: 8px 0 0; color: var(--mobile-text); }
.mobile-inbox-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.mobile-inbox-actions .mud-button-root { min-width: 0; min-height: 44px; padding: 9px 12px; color: var(--mobile-text); border: 1px solid var(--mobile-rim-quiet); border-radius: var(--mobile-radius-sm); background: var(--mobile-glass-soft); box-shadow: var(--mobile-edge-soft); text-transform: none; }
.mobile-inbox-list { display: flex; flex-direction: column; gap: 0; }
.mobile-inbox-item {
    display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: stretch;
    width: 100%; min-width: 0; min-height: 0; gap: 8px; padding: 14px 0 !important;
    color: var(--mobile-text); text-align: left; border: 0 !important; border-bottom: 1px solid var(--mobile-rim-quiet) !important;
    border-radius: 0; background: transparent !important; box-shadow: none !important;
}
.mobile-inbox-item-message { display: block; min-width: 0; color: var(--mobile-text); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.mobile-inbox-item-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; color: var(--mobile-muted); font-size: 11px; line-height: 1.4; }
.mobile-inbox-item-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-inbox-item-meta time { flex: none; white-space: nowrap; }
.mobile-inbox-item.unread { border-left: 3px solid var(--mobile-gold) !important; background: rgba(228,167,56,.08) !important; }

/* Keep long training descriptions readable and Boot Camp rows aligned. */
.mobile-root .bc-mobile .item { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: start; gap: 16px; padding: 16px 0; text-align: left; }
.mobile-root .bc-mobile .item .time { width: 68px; min-width: 68px; min-height: 68px; margin: 0; }
.mobile-root .bc-mobile .item .content { min-width: 0; text-align: left; }
.mobile-root .mobile-training-details .section-body,
.mobile-root .mobile-training-details .section-body .markdown-content { max-height: none !important; overflow: visible !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; }

html.hysec-mobile.mobile-keyboard #app {
    inset: auto 0;
    top: var(--mobile-visible-top);
    height: var(--mobile-visible-height);
    min-height: 0;
}
html.mobile-keyboard .mobile-dock { display: none; }
html.hysec-mobile.mobile-keyboard { --mobile-safe-bottom: 0px; }
html.hysec-mobile.mobile-keyboard .mud-dialog-container { top: var(--mobile-visible-top); height: var(--mobile-visible-height); }
@media (max-width: 420px) { .mobile-root .home-app-icon { width: 60px; height: 60px; border-radius: 19px; } }
@media (min-width: 700px) { .mobile-dock { right: max(28px, var(--mobile-safe-right)); left: max(28px, var(--mobile-safe-left)); } }
@media (prefers-reduced-transparency: reduce) {
    html.hysec-mobile .hss-liquid-glass, .mobile-root .home-app-icon, html.hysec-mobile .mobile-nav-rail,
    html.hysec-mobile .mud-dialog, html.hysec-mobile .mobile-inbox { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1a1917 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-root *, .mobile-root *::before, .mobile-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Final mobile material contract ----------------------------------------
   Feature sheets still contain desktop-era rules for the shared Hangar
   components. Keep the mobile surface contract here, at the end of the
   cascade, so a page cannot accidentally paint a second frame over glass. */
html.hysec-mobile .mobile-titlebar .mobile-app-menu .mud-icon-button {
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}

html.hysec-mobile .mobile-inbox {
    border-top: 1px solid var(--mobile-rim-quiet) !important;
    box-shadow: var(--mobile-edge), 0 -18px 48px rgba(0,0,0,.35) !important;
}

html.hysec-mobile .mobile-root .home-app-icon.hss-liquid-glass {
    /* A brighter body lets the live backdrop show through the icon. */
    background: rgba(47, 41, 31, .52) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(0, 0, 0, .24),
        0 12px 24px rgba(0, 0, 0, .24) !important;
}

/* Every MudTextField owns one surface. Feature pages may use different
   classes, but the mobile shell keeps the outer control and inner input
   visually unified. */
html.hysec-mobile .mobile-root .mud-input-control {
    box-sizing: border-box; flex: 0 1 auto; width: 100%; min-width: 0;
    border-radius: var(--mobile-radius-sm);
    background: var(--mobile-glass) !important;
    box-shadow: var(--mobile-edge), var(--mobile-glass-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}
/* style-guidelines.css deliberately removes Mud's generic control shadow with
   a high-specificity reset. Match that reset here so every mobile field keeps
   the same outer rim and depth, regardless of its feature-specific classes. */
html.hysec-mobile .mobile-root .mud-input-control:not(.military-autocomplete .mud-input-control):not(.hysec-tab-keepnative .mud-input-control) {
    box-shadow: var(--mobile-edge), var(--mobile-glass-shadow) !important;
}
html.hysec-mobile .mobile-root .mud-input-control .mud-input-root,
html.hysec-mobile .mobile-root .mud-input-control .mud-input-root.mud-input-multiline {
    background: transparent !important;
    box-shadow: none !important;
}

/* Mobile fleet contribution is a deliberate action surface, not a leftover
   desktop footer strip. Keep its copy and actions inside one warm glass frame. */
html.hysec-mobile .personal-hangar-mobile .hangar-contribution {
    box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    width: 100%; min-width: 0; margin: 22px 0 0; padding: 18px;
    border: 1px solid var(--mobile-rim-quiet) !important; border-radius: var(--mobile-radius-md) !important;
    background: rgba(38, 34, 25, .72) !important;
    box-shadow: var(--mobile-edge), var(--mobile-glass-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
}
html.hysec-mobile .personal-hangar-mobile .hangar-contribution strong { display: block; margin-bottom: 6px; color: var(--mobile-text); line-height: 1.4; }
html.hysec-mobile .personal-hangar-mobile .hangar-contribution-status { display: block; }
html.hysec-mobile .personal-hangar-mobile .hangar-contribution-meta { display: block; color: var(--mobile-muted); line-height: 1.55; }
html.hysec-mobile .personal-hangar-mobile .hangar-contribution .hangar-header-actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
html.hysec-mobile .personal-hangar-mobile .hangar-contribution .hangar-header-actions > * { width: 100%; min-width: 0; min-height: 44px; }

/* Freight notes stay readable as stacked rows on a narrow mobile surface. */
html.hysec-mobile .mobile-freightnotes .note-card {
    display: block !important; width: 100%; min-width: 0; min-height: 0; margin: 0;
    padding: 18px 0 !important; color: var(--mobile-text); text-align: left;
    border: 0 !important; border-bottom: 1px solid var(--mobile-rim-quiet) !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
html.hysec-mobile .mobile-freightnotes .note-head {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 20px; align-items: start; gap: 10px; min-width: 0;
}
html.hysec-mobile .mobile-freightnotes .note-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--mobile-gold-soft); }
html.hysec-mobile .mobile-freightnotes .note-title { min-width: 0; color: var(--mobile-text); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; text-transform: none; }
html.hysec-mobile .mobile-freightnotes .note-status { align-self: start; white-space: nowrap; }
html.hysec-mobile .mobile-freightnotes .note-chevron { margin-top: 4px; color: var(--mobile-muted); }
html.hysec-mobile .mobile-freightnotes .note-meta { display: grid; gap: 7px; margin: 14px 30px 0 38px; }
html.hysec-mobile .mobile-freightnotes .meta-row { display: grid; grid-template-columns: minmax(64px, .8fr) minmax(0, 1.2fr); gap: 12px; align-items: baseline; min-width: 0; }
html.hysec-mobile .mobile-freightnotes .meta-label { color: var(--mobile-muted); }
html.hysec-mobile .mobile-freightnotes .meta-value { min-width: 0; color: var(--mobile-text); text-align: left; overflow-wrap: anywhere; }
html.hysec-mobile .mobile-freightnotes .archive-toggle { min-height: 52px; padding: 14px 0 !important; border: 0 !important; border-bottom: 1px solid var(--mobile-rim-quiet) !important; border-radius: 0 !important; background: transparent !important; }

html.hysec-mobile .personal-hangar-mobile {
    background: transparent !important;
    color: var(--mobile-text) !important;
}

html.hysec-mobile .personal-hangar-mobile .personal-hangar-heading {
    padding: var(--mobile-page-top) var(--mobile-content-right) 8px var(--mobile-content-left) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.hysec-mobile .personal-hangar-mobile .personal-hangar-heading::after {
    display: none !important;
    content: none !important;
}

html.hysec-mobile .personal-hangar-mobile .personal-hangar-identity {
    gap: 12px;
}

html.hysec-mobile .personal-hangar-mobile .personal-hangar-emblem {
    width: 36px;
    height: 36px;
    border: 0 !important;
    border-radius: 12px;
    background: rgba(228, 167, 56, .12) !important;
    box-shadow: var(--mobile-edge-soft) !important;
}

html.hysec-mobile .personal-hangar-mobile .personal-hangar-heading span {
    color: var(--mobile-gold-soft);
    font: 600 10px/1 'Roboto Mono', monospace;
    letter-spacing: .14em;
}

html.hysec-mobile .personal-hangar-mobile .personal-hangar-heading h1 {
    margin: 8px 0 0;
    color: var(--mobile-text);
    font: 600 clamp(27px, 7vw, 34px)/1.2 'Jura', sans-serif;
    letter-spacing: -.035em;
}

html.hysec-mobile .personal-hangar-mobile .personal-hangar-navigation {
    display: contents !important;
    position: static !important;
}

html.hysec-mobile .personal-hangar-mobile .personal-hangar-panels {
    padding: 0 var(--mobile-content-right) var(--mobile-page-bottom) var(--mobile-content-left) !important;
}

html.hysec-mobile .personal-hangar-mobile .hangar-button,
html.hysec-mobile .personal-hangar-mobile .hangar-icon {
    border: 0 !important;
    background: var(--mobile-glass-soft) !important;
    box-shadow: var(--mobile-edge-soft), 0 8px 18px rgba(0, 0, 0, .14) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}

html.hysec-mobile .personal-hangar-mobile .hangar-button.primary {
    color: #1c1509 !important;
    background: rgba(228, 167, 56, .84) !important;
}

html.hysec-mobile .personal-hangar-mobile .hangar-image {
    border: 0 !important;
    box-shadow: var(--mobile-edge-soft) !important;
}

/* Update announcement under the title bar: open strip, the shared mobile controls. */
.mobile-update { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px var(--mobile-content-right) 10px var(--mobile-content-left);
    color: var(--mobile-gold-soft); font-size: 13px; line-height: 1.45; border-bottom: 1px solid var(--mobile-rim-quiet); }
.mobile-update span { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.mobile-update button { min-height: 40px; padding: 8px 14px; color: var(--mobile-text); font: 600 13px/1.3 'Jura', sans-serif; border: 0; border-radius: var(--mobile-radius-sm);
    background: var(--mobile-glass-soft); box-shadow: var(--mobile-edge-soft); }
.mobile-update button:focus-visible { outline: 2px solid var(--mobile-gold); outline-offset: 3px; }